fix(Datepicker): color states for range inner, disallowed and today d…

…ates
Endava · Dec 6, 2024 · 5516955 · 5516955
1 parent 4575571
commit 5516955
Show file tree

Hide file tree

Showing 4 changed files with 141 additions and 147 deletions.
diff --git a/packages/beeq/src/components.d.ts b/packages/beeq/src/components.d.ts
@@ -738,29 +738,29 @@ export namespace Components {
      * @event bqChange - Callback handler emitted when the input value has changed and the input loses focus.
      * @event bqClear - Callback handler emitted when the input value has been cleared.
      * @event bqFocus - Callback handler emitted when the input has received focus.
-     * @cssprop --bq-date-picker--background-color - Date picker background color
-     * @cssprop --bq-date-picker--border-color - Date picker border color
-     * @cssprop --bq-date-picker--border-color-disabled - Date picker border color when disabled
-     * @cssprop --bq-date-picker--border-color-focus - Date picker border color on focus
-     * @cssprop --bq-date-picker--border-radius - Date picker border radius
-     * @cssprop --bq-date-picker--border-style - Date picker border style
-     * @cssprop --bq-date-picker--border-width - Date picker border width
-     * @cssprop --bq-date-picker--currentDate-border-color - Date picker border color for current date
-     * @cssprop --bq-date-picker--currentDate-border-width - Date picker border width for current date
-     * @cssprop --bq-date-picker--currentDate-text-color - Date picker label text color for currentDate
-     * @cssprop --bq-date-picker--day-size - Date picker button day size
-     * @cssprop --bq-date-picker--gap - Gap between Date picker content and prefix/suffix
-     * @cssprop --bq-date-picker--icon-size - Icon size to use in prefix/suffix and clear button
-     * @cssprop --bq-date-picker--label-margin-bottom - Date picker label margin bottom
-     * @cssprop --bq-date-picker--label-text-color - Date picker label text color
-     * @cssprop --bq-date-picker--label-text-size - Date picker label text size
-     * @cssprop --bq-date-picker--padding-end - Date picker padding end
-     * @cssprop --bq-date-picker--padding-start - Date picker padding start
-     * @cssprop --bq-date-picker--paddingY - Date picker padding top and bottom
-     * @cssprop --bq-date-picker--range-background-color - Background color for the selected date range in the date picker
-     * @cssprop --bq-date-picker--text-color - Date picker text color
-     * @cssprop --bq-date-picker--text-placeholder-color - Date picker placeholder text color
-     * @cssprop --bq-date-picker--text-size - Date picker text size
+     * @cssprop --bq-date-picker--background-color - Date picker background color.
+     * @cssprop --bq-date-picker--border-color - Date picker border color.
+     * @cssprop --bq-date-picker--border-color-disabled - Date picker border color when disabled.
+     * @cssprop --bq-date-picker--border-color-focus - Date picker border color on focus.
+     * @cssprop --bq-date-picker--border-radius - Date picker border radius.
+     * @cssprop --bq-date-picker--border-style - Date picker border style.
+     * @cssprop --bq-date-picker--border-width - Date picker border width.
+     * @cssprop --bq-date-picker--currentDate-border-color - Date picker border color for current date.
+     * @cssprop --bq-date-picker--currentDate-border-width - Date picker border width for current date.
+     * @cssprop --bq-date-picker--day-size - Date picker button day size.
+     * @cssprop --bq-date-picker--gap - Gap between Date picker content and prefix/suffix.
+     * @cssprop --bq-date-picker--icon-size - Icon size to use in prefix/suffix and clear button.
+     * @cssprop --bq-date-picker--label-margin-bottom - Date picker label margin bottom.
+     * @cssprop --bq-date-picker--label-text-color - Date picker label text color.
+     * @cssprop --bq-date-picker--label-text-size - Date picker label text size.
+     * @cssprop --bq-date-picker--padding-end - Date picker padding end.
+     * @cssprop --bq-date-picker--padding-start - Date picker padding start.
+     * @cssprop --bq-date-picker--paddingY - Date picker padding top and bottom.
+     * @cssprop --bq-date-picker--range-background-color - Background color for the selected date range in the date picker.
+     * @cssprop --bq-date-picker--range-inner-background-color - Background color for the selected dates inside the date range in the date picker.
+     * @cssprop --bq-date-picker--text-color - Date picker text color.
+     * @cssprop --bq-date-picker--text-placeholder-color - Date picker placeholder text color.
+     * @cssprop --bq-date-picker--text-size - Date picker text size.
      */
     interface BqDatePicker {
         /**
@@ -3574,29 +3574,29 @@ declare global {
      * @event bqChange - Callback handler emitted when the input value has changed and the input loses focus.
      * @event bqClear - Callback handler emitted when the input value has been cleared.
      * @event bqFocus - Callback handler emitted when the input has received focus.
-     * @cssprop --bq-date-picker--background-color - Date picker background color
-     * @cssprop --bq-date-picker--border-color - Date picker border color
-     * @cssprop --bq-date-picker--border-color-disabled - Date picker border color when disabled
-     * @cssprop --bq-date-picker--border-color-focus - Date picker border color on focus
-     * @cssprop --bq-date-picker--border-radius - Date picker border radius
-     * @cssprop --bq-date-picker--border-style - Date picker border style
-     * @cssprop --bq-date-picker--border-width - Date picker border width
-     * @cssprop --bq-date-picker--currentDate-border-color - Date picker border color for current date
-     * @cssprop --bq-date-picker--currentDate-border-width - Date picker border width for current date
-     * @cssprop --bq-date-picker--currentDate-text-color - Date picker label text color for currentDate
-     * @cssprop --bq-date-picker--day-size - Date picker button day size
-     * @cssprop --bq-date-picker--gap - Gap between Date picker content and prefix/suffix
-     * @cssprop --bq-date-picker--icon-size - Icon size to use in prefix/suffix and clear button
-     * @cssprop --bq-date-picker--label-margin-bottom - Date picker label margin bottom
-     * @cssprop --bq-date-picker--label-text-color - Date picker label text color
-     * @cssprop --bq-date-picker--label-text-size - Date picker label text size
-     * @cssprop --bq-date-picker--padding-end - Date picker padding end
-     * @cssprop --bq-date-picker--padding-start - Date picker padding start
-     * @cssprop --bq-date-picker--paddingY - Date picker padding top and bottom
-     * @cssprop --bq-date-picker--range-background-color - Background color for the selected date range in the date picker
-     * @cssprop --bq-date-picker--text-color - Date picker text color
-     * @cssprop --bq-date-picker--text-placeholder-color - Date picker placeholder text color
-     * @cssprop --bq-date-picker--text-size - Date picker text size
+     * @cssprop --bq-date-picker--background-color - Date picker background color.
+     * @cssprop --bq-date-picker--border-color - Date picker border color.
+     * @cssprop --bq-date-picker--border-color-disabled - Date picker border color when disabled.
+     * @cssprop --bq-date-picker--border-color-focus - Date picker border color on focus.
+     * @cssprop --bq-date-picker--border-radius - Date picker border radius.
+     * @cssprop --bq-date-picker--border-style - Date picker border style.
+     * @cssprop --bq-date-picker--border-width - Date picker border width.
+     * @cssprop --bq-date-picker--currentDate-border-color - Date picker border color for current date.
+     * @cssprop --bq-date-picker--currentDate-border-width - Date picker border width for current date.
+     * @cssprop --bq-date-picker--day-size - Date picker button day size.
+     * @cssprop --bq-date-picker--gap - Gap between Date picker content and prefix/suffix.
+     * @cssprop --bq-date-picker--icon-size - Icon size to use in prefix/suffix and clear button.
+     * @cssprop --bq-date-picker--label-margin-bottom - Date picker label margin bottom.
+     * @cssprop --bq-date-picker--label-text-color - Date picker label text color.
+     * @cssprop --bq-date-picker--label-text-size - Date picker label text size.
+     * @cssprop --bq-date-picker--padding-end - Date picker padding end.
+     * @cssprop --bq-date-picker--padding-start - Date picker padding start.
+     * @cssprop --bq-date-picker--paddingY - Date picker padding top and bottom.
+     * @cssprop --bq-date-picker--range-background-color - Background color for the selected date range in the date picker.
+     * @cssprop --bq-date-picker--range-inner-background-color - Background color for the selected dates inside the date range in the date picker.
+     * @cssprop --bq-date-picker--text-color - Date picker text color.
+     * @cssprop --bq-date-picker--text-placeholder-color - Date picker placeholder text color.
+     * @cssprop --bq-date-picker--text-size - Date picker text size.
      */
     interface HTMLBqDatePickerElement extends Components.BqDatePicker, HTMLStencilElement {
         addEventListener<K extends keyof HTMLBqDatePickerElementEventMap>(type: K, listener: (this: HTMLBqDatePickerElement, ev: BqDatePickerCustomEvent<HTMLBqDatePickerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -5849,29 +5849,29 @@ declare namespace LocalJSX {
      * @event bqChange - Callback handler emitted when the input value has changed and the input loses focus.
      * @event bqClear - Callback handler emitted when the input value has been cleared.
      * @event bqFocus - Callback handler emitted when the input has received focus.
-     * @cssprop --bq-date-picker--background-color - Date picker background color
-     * @cssprop --bq-date-picker--border-color - Date picker border color
-     * @cssprop --bq-date-picker--border-color-disabled - Date picker border color when disabled
-     * @cssprop --bq-date-picker--border-color-focus - Date picker border color on focus
-     * @cssprop --bq-date-picker--border-radius - Date picker border radius
-     * @cssprop --bq-date-picker--border-style - Date picker border style
-     * @cssprop --bq-date-picker--border-width - Date picker border width
-     * @cssprop --bq-date-picker--currentDate-border-color - Date picker border color for current date
-     * @cssprop --bq-date-picker--currentDate-border-width - Date picker border width for current date
-     * @cssprop --bq-date-picker--currentDate-text-color - Date picker label text color for currentDate
-     * @cssprop --bq-date-picker--day-size - Date picker button day size
-     * @cssprop --bq-date-picker--gap - Gap between Date picker content and prefix/suffix
-     * @cssprop --bq-date-picker--icon-size - Icon size to use in prefix/suffix and clear button
-     * @cssprop --bq-date-picker--label-margin-bottom - Date picker label margin bottom
-     * @cssprop --bq-date-picker--label-text-color - Date picker label text color
-     * @cssprop --bq-date-picker--label-text-size - Date picker label text size
-     * @cssprop --bq-date-picker--padding-end - Date picker padding end
-     * @cssprop --bq-date-picker--padding-start - Date picker padding start
-     * @cssprop --bq-date-picker--paddingY - Date picker padding top and bottom
-     * @cssprop --bq-date-picker--range-background-color - Background color for the selected date range in the date picker
-     * @cssprop --bq-date-picker--text-color - Date picker text color
-     * @cssprop --bq-date-picker--text-placeholder-color - Date picker placeholder text color
-     * @cssprop --bq-date-picker--text-size - Date picker text size
+     * @cssprop --bq-date-picker--background-color - Date picker background color.
+     * @cssprop --bq-date-picker--border-color - Date picker border color.
+     * @cssprop --bq-date-picker--border-color-disabled - Date picker border color when disabled.
+     * @cssprop --bq-date-picker--border-color-focus - Date picker border color on focus.
+     * @cssprop --bq-date-picker--border-radius - Date picker border radius.
+     * @cssprop --bq-date-picker--border-style - Date picker border style.
+     * @cssprop --bq-date-picker--border-width - Date picker border width.
+     * @cssprop --bq-date-picker--currentDate-border-color - Date picker border color for current date.
+     * @cssprop --bq-date-picker--currentDate-border-width - Date picker border width for current date.
+     * @cssprop --bq-date-picker--day-size - Date picker button day size.
+     * @cssprop --bq-date-picker--gap - Gap between Date picker content and prefix/suffix.
+     * @cssprop --bq-date-picker--icon-size - Icon size to use in prefix/suffix and clear button.
+     * @cssprop --bq-date-picker--label-margin-bottom - Date picker label margin bottom.
+     * @cssprop --bq-date-picker--label-text-color - Date picker label text color.
+     * @cssprop --bq-date-picker--label-text-size - Date picker label text size.
+     * @cssprop --bq-date-picker--padding-end - Date picker padding end.
+     * @cssprop --bq-date-picker--padding-start - Date picker padding start.
+     * @cssprop --bq-date-picker--paddingY - Date picker padding top and bottom.
+     * @cssprop --bq-date-picker--range-background-color - Background color for the selected date range in the date picker.
+     * @cssprop --bq-date-picker--range-inner-background-color - Background color for the selected dates inside the date range in the date picker.
+     * @cssprop --bq-date-picker--text-color - Date picker text color.
+     * @cssprop --bq-date-picker--text-placeholder-color - Date picker placeholder text color.
+     * @cssprop --bq-date-picker--text-size - Date picker text size.
      */
     interface BqDatePicker {
         /**
@@ -8649,29 +8649,29 @@ declare module "@stencil/core" {
              * @event bqChange - Callback handler emitted when the input value has changed and the input loses focus.
              * @event bqClear - Callback handler emitted when the input value has been cleared.
              * @event bqFocus - Callback handler emitted when the input has received focus.
-             * @cssprop --bq-date-picker--background-color - Date picker background color
-             * @cssprop --bq-date-picker--border-color - Date picker border color
-             * @cssprop --bq-date-picker--border-color-disabled - Date picker border color when disabled
-             * @cssprop --bq-date-picker--border-color-focus - Date picker border color on focus
-             * @cssprop --bq-date-picker--border-radius - Date picker border radius
-             * @cssprop --bq-date-picker--border-style - Date picker border style
-             * @cssprop --bq-date-picker--border-width - Date picker border width
-             * @cssprop --bq-date-picker--currentDate-border-color - Date picker border color for current date
-             * @cssprop --bq-date-picker--currentDate-border-width - Date picker border width for current date
-             * @cssprop --bq-date-picker--currentDate-text-color - Date picker label text color for currentDate
-             * @cssprop --bq-date-picker--day-size - Date picker button day size
-             * @cssprop --bq-date-picker--gap - Gap between Date picker content and prefix/suffix
-             * @cssprop --bq-date-picker--icon-size - Icon size to use in prefix/suffix and clear button
-             * @cssprop --bq-date-picker--label-margin-bottom - Date picker label margin bottom
-             * @cssprop --bq-date-picker--label-text-color - Date picker label text color
-             * @cssprop --bq-date-picker--label-text-size - Date picker label text size
-             * @cssprop --bq-date-picker--padding-end - Date picker padding end
-             * @cssprop --bq-date-picker--padding-start - Date picker padding start
-             * @cssprop --bq-date-picker--paddingY - Date picker padding top and bottom
-             * @cssprop --bq-date-picker--range-background-color - Background color for the selected date range in the date picker
-             * @cssprop --bq-date-picker--text-color - Date picker text color
-             * @cssprop --bq-date-picker--text-placeholder-color - Date picker placeholder text color
-             * @cssprop --bq-date-picker--text-size - Date picker text size
+             * @cssprop --bq-date-picker--background-color - Date picker background color.
+             * @cssprop --bq-date-picker--border-color - Date picker border color.
+             * @cssprop --bq-date-picker--border-color-disabled - Date picker border color when disabled.
+             * @cssprop --bq-date-picker--border-color-focus - Date picker border color on focus.
+             * @cssprop --bq-date-picker--border-radius - Date picker border radius.
+             * @cssprop --bq-date-picker--border-style - Date picker border style.
+             * @cssprop --bq-date-picker--border-width - Date picker border width.
+             * @cssprop --bq-date-picker--currentDate-border-color - Date picker border color for current date.
+             * @cssprop --bq-date-picker--currentDate-border-width - Date picker border width for current date.
+             * @cssprop --bq-date-picker--day-size - Date picker button day size.
+             * @cssprop --bq-date-picker--gap - Gap between Date picker content and prefix/suffix.
+             * @cssprop --bq-date-picker--icon-size - Icon size to use in prefix/suffix and clear button.
+             * @cssprop --bq-date-picker--label-margin-bottom - Date picker label margin bottom.
+             * @cssprop --bq-date-picker--label-text-color - Date picker label text color.
+             * @cssprop --bq-date-picker--label-text-size - Date picker label text size.
+             * @cssprop --bq-date-picker--padding-end - Date picker padding end.
+             * @cssprop --bq-date-picker--padding-start - Date picker padding start.
+             * @cssprop --bq-date-picker--paddingY - Date picker padding top and bottom.
+             * @cssprop --bq-date-picker--range-background-color - Background color for the selected date range in the date picker.
+             * @cssprop --bq-date-picker--range-inner-background-color - Background color for the selected dates inside the date range in the date picker.
+             * @cssprop --bq-date-picker--text-color - Date picker text color.
+             * @cssprop --bq-date-picker--text-placeholder-color - Date picker placeholder text color.
+             * @cssprop --bq-date-picker--text-size - Date picker text size.
              */
             "bq-date-picker": LocalJSX.BqDatePicker & JSXBase.HTMLAttributes<HTMLBqDatePickerElement>;
             /**