npm - @beeq/core - Versions diffs - 1.10.0-beta.4 → 1.10.0-beta.5 - Mend

@beeq/core 1.10.0-beta.4 → 1.10.0-beta.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (89) hide show

package/dist/collection/components/button/bq-button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"bq-button.js","sourceRoot":"","sources":["../../../../../../packages/beeq/src/components/button/bq-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { AttachInternals, Component, Element, Event, h, Host, Prop, State, Watch } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\nimport { BUTTON_APPEARANCE, BUTTON_SIZE, BUTTON_TYPE, BUTTON_VARIANT } from './bq-button.types';\nimport type {\n TButtonAppearance,\n TButtonBorderRadius,\n TButtonSize,\n TButtonType,\n TButtonVariant,\n} from './bq-button.types';\nimport { hasSlotContent, isClient, isDefined, isNil, validatePropValue } from '../../shared/utils';\n\n/*\n Buttons are designed for users to take action on a page or a screen.\n \n @example How to use it\n * ```html\n * <bq-button appearance=\"primary\" border=\"m\" size=\"medium\">\n * <bq-icon name=\"arrow-circle-left\" slot=\"prefix\"></bq-icon>\n * Go back\n * </bq-button>\n * ```\n \n @documentation https://www.beeq.design/3d466e231/p/286b43-buttons\n * @status stable\n \n @dependency bq-icon\n \n @attr {\"primary\" \| \"secondary\" \| \"link\" \| \"text\"} appearance - The appearance style to apply to the button\n * @attr {boolean} block - If `true`, it will make the button fit to its parent width.\n * @attr {string} border - The corner radius of the button\n * @attr {boolean} disabled - If `true`, the button will be disabled (no interaction allowed)\n * @attr {string} download - Tells the browser to treat the linked URL as a download. Only used when `href` is set.\n * @attr {string} href - When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`\n * @attr {\"left\" \| \"center\" \| \"right\"} justify-content - It determinate how the content should be aligned\n * @attr {boolean} loading - If `true` it will display the button in a loading state\n * @attr {\"small\" \| \"medium\" \| \"large\"} size - The size of the button\n * @attr {\"_blank\" \| \"_parent\" \| \"_self\" \| \"_top\"} target - Where to display the linked URL, as the name for a browsing context (a `tab`, `window`, or `<iframe>`)\n * @attr {\"button\" \| \"submit\" \| \"reset\"} type - The default behavior of the button\n * @attr {\"standard\" \| \"ghost\" \| \"danger\"} variant - The variant of button to apply on top of the appearance (applicable only to `appearance=\"primary\"`)\n \n @event bqBlur - Handler to be called when the button loses focus\n * @event bqFocus - Handler to be called when button gets focus\n * @event bqClick - Handler to be called when the button is clicked\n \n @slot prefix - The prefix content to be displayed before the button label\n * @slot - The button label content\n * @slot suffix - The suffix content to be displayed after the button label\n \n @part button - The `<a>` or `<button>` HTML element used under the hood.\n * @part prefix - The `<span>` tag element that acts as prefix container.\n * @part label - The `<span>` tag element that renders the text of the button.\n * @part suffix - The `<span>` tag element that acts as suffix container.\n \n @cssprop --bq-button--border-color - Button border color\n * @cssprop --bq-button--border-radius - Button border radius\n * @cssprop --bq-button--border-style - Button border style\n * @cssprop --bq-button--border-width - Button border width\n * @cssprop --bq-button--small-height - Button small height\n * @cssprop --bq-button--small-paddingX - Button small padding block (top and bottom)\n * @cssprop --bq-button--small-paddingY - Button small padding inline (left and right)\n * @cssprop --bq-button--small-font-size - Button small font size\n * @cssprop --bq-button--medium-height - Button medium height\n * @cssprop --bq-button--medium-paddingX - Button medium padding block (top and bottom)\n * @cssprop --bq-button--medium-paddingY - Button medium padding inline (left and right)\n * @cssprop --bq-button--medium-font-size - Button medium font size\n * @cssprop --bq-button--large-height - Button large height\n * @cssprop --bq-button--large-paddingX - Button large padding block (top and bottom)\n * @cssprop --bq-button--large-paddingY - Button large padding inline (left and right)\n * @cssprop --bq-button--large-font-size - Button large font size\n /\n@Component({\n tag: 'bq-button',\n styleUrl: './scss/bq-button.scss',\n formAssociated: true,\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class BqButton {\n // Own Properties\n // ====================\n\n private prefixElem: HTMLElement;\n private suffixElem: HTMLElement;\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqButtonElement;\n @AttachInternals() internals!: ElementInternals;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n @State() private hasPrefix = false;\n @State() private hasSuffix = false;\n\n // Public Property API\n // ========================\n\n /* The appearance style to apply to the button /\n @Prop({ reflect: true }) appearance: TButtonAppearance = 'primary';\n\n /* If `true`, it will make the button fit to its parent width. /\n @Prop({ reflect: true }) block: boolean = false;\n\n /* The corner radius of the button /\n @Prop({ reflect: true }) border: TButtonBorderRadius = 'm';\n\n /* If true, the button will be disabled (no interaction allowed) /\n @Prop() disabled = false;\n\n /\n Tells the browser to treat the linked URL as a download. Only used when `href` is set.\n * Details: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download\n /\n @Prop() download?: string;\n\n /* When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>` /\n @Prop({ reflect: true }) href: string;\n\n /* It determinate how the content should be aligned /\n @Prop({ reflect: true }) justifyContent: 'left' \| 'center' \| 'right' = 'center';\n\n /* If `true` it will display the button in a loading state /\n @Prop() loading = false;\n\n /* The size of the button /\n @Prop({ reflect: true }) size: TButtonSize = 'medium';\n\n /\n Where to display the linked URL, as the name for a browsing context (a `tab`, `window`, or `<iframe>`)\n * Details: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target\n /\n @Prop({ reflect: true }) target: '_blank' \| '_parent' \| '_self' \| '_top';\n\n /* The default behavior of the button /\n @Prop({ reflect: true }) type: TButtonType = 'button';\n\n /* The variant of button to apply on top of the appearance (applicable only to `appearance=\"primary\"`) /\n @Prop({ reflect: true }) variant: TButtonVariant = 'standard';\n\n // Prop lifecycle events\n // =======================\n\n @Watch('appearance')\n @Watch('type')\n @Watch('size')\n @Watch('variant')\n checkPropValues() {\n validatePropValue(BUTTON_APPEARANCE, 'primary', this.el, 'appearance');\n validatePropValue(BUTTON_TYPE, 'button', this.el, 'type');\n validatePropValue(BUTTON_SIZE, 'medium', this.el, 'size');\n validatePropValue(BUTTON_VARIANT, 'standard', this.el, 'variant');\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /* Handler to be called when the button loses focus /\n @Event() bqBlur: EventEmitter<HTMLBqButtonElement>;\n\n /* Handler to be called when the button is clicked /\n @Event() bqFocus: EventEmitter<HTMLBqButtonElement>;\n\n /* Handler to be called when button gets focus */\n @Event() bqClick: EventEmitter<HTMLBqButtonElement>;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n componentWillLoad() {\n this.checkPropValues();\n }\n\n componentDidLoad() {\n this.handleSlotChange();\n }\n\n // Listeners\n // ==============\n\n // Public methods API\n // These methods are exposed on the host element.\n // Always use two lines.\n // Public Methods must be async.\n // Requires JSDocs for public API documentation.\n // ===============================================\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n private handleBlur = () => {\n this.bqBlur.emit(this.el);\n };\n\n private handleFocus = () => {\n this.bqFocus.emit(this.el);\n };\n\n private handleClick = (ev: Event) => {\n const { disabled, loading, bqClick, el } = this;\n\n if (disabled \|\| loading) {\n this.preventEvent(ev);\n return;\n }\n\n const bqClickEvent = bqClick.emit(el);\n if (bqClickEvent.defaultPrevented) {\n this.preventEvent(ev);\n return;\n }\n\n this.handleFormAction();\n };\n\n private handleFormAction() {\n const {\n type,\n internals: { form },\n } = this;\n if (isNil(form)) return;\n\n const formAction = this.formActions(form)[type];\n if (isNil(formAction)) return;\n\n formAction();\n }\n\n private formActions = (form: HTMLFormElement) => ({\n submit: () => this.submitAssociatedForm(form),\n reset: () => form.reset(),\n });\n\n private submitAssociatedForm = (form: HTMLFormElement) => {\n if (!isClient() \|\| isNil(form)) return;\n\n const btn = document.createElement('button');\n btn.type = this.type;\n btn.hidden = true;\n form.append(btn);\n\n btn.click();\n btn.remove();\n };\n\n private handleSlotChange = () => {\n this.hasPrefix = hasSlotContent(this.prefixElem, 'prefix');\n this.hasSuffix = hasSlotContent(this.suffixElem, 'suffix');\n };\n\n private preventEvent(ev: Event) {\n ev.preventDefault();\n ev.stopPropagation();\n }\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n const isLink = isDefined(this.href);\n const TagElem = isLink ? 'a' : 'button';\n const style = {\n ...(this.border && { '--bq-button--border-radius': `var(--bq-radius--${this.border})` }),\n };\n\n return (\n <Host style={style}>\n <TagElem\n class={{\n 'bq-button': true,\n [`bq-button--${this.appearance}`]: true,\n [`content-${this.justifyContent}`]: true,\n [`${this.variant}`]: true,\n [`${this.size}`]: true,\n block: this.block,\n disabled: this.disabled,\n 'has-prefix': this.hasPrefix,\n 'has-suffix': this.hasSuffix,\n loading: this.loading,\n }}\n aria-disabled={this.disabled ? 'true' : 'false'}\n disabled={this.disabled}\n download={isLink ? this.download : undefined}\n href={isLink ? this.href : undefined}\n part=\"button\"\n rel={isLink && this.target ? 'noreferrer noopener' : undefined}\n target={isLink ? this.target : undefined}\n type={this.type}\n tabIndex={this.disabled ? -1 : 0}\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n onClick={this.handleClick}\n >\n <span class=\"bq-button__prefix\" ref={(spanElem) => (this.prefixElem = spanElem)} part=\"prefix\">\n <slot name=\"prefix\" onSlotchange={this.handleSlotChange} />\n </span>\n <span class=\"bq-button__label\" part=\"label\">\n <slot />\n </span>\n <span class=\"bq-button__suffix\" ref={(spanElem) => (this.suffixElem = spanElem)} part=\"suffix\">\n <slot name=\"suffix\" onSlotchange={this.handleSlotChange} />\n </span>\n {this.loading && <bq-icon class=\"bq-button__loader\" name=\"spinner-gap\" />}\n </TagElem>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"bq-button.js","sourceRoot":"","sources":["../../../../../../packages/beeq/src/components/button/bq-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { AttachInternals, Component, Element, Event, h, Host, Prop, State, Watch } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\nimport { BUTTON_APPEARANCE, BUTTON_SIZE, BUTTON_TYPE, BUTTON_VARIANT } from './bq-button.types';\nimport type {\n TButtonAppearance,\n TButtonBorderRadius,\n TButtonSize,\n TButtonType,\n TButtonVariant,\n} from './bq-button.types';\nimport { hasSlotContent, isClient, isDefined, isNil, validatePropValue } from '../../shared/utils';\n\n/*\n Buttons are designed for users to take action on a page or a screen.\n \n @example How to use it\n * ```html\n * <bq-button appearance=\"primary\" border=\"m\" size=\"medium\">\n * <bq-icon name=\"arrow-circle-left\" slot=\"prefix\"></bq-icon>\n * Go back\n * </bq-button>\n * ```\n \n @documentation https://www.beeq.design/3d466e231/p/286b43-buttons\n * @status stable\n \n @dependency bq-icon\n \n @attr {\"primary\" \| \"secondary\" \| \"link\" \| \"text\"} appearance - The appearance style to apply to the button\n * @attr {boolean} block - If `true`, it will make the button fit to its parent width.\n * @attr {string} border - The corner radius of the button\n * @attr {boolean} disabled - If `true`, the button will be disabled (no interaction allowed)\n * @attr {string} download - Tells the browser to treat the linked URL as a download. Only used when `href` is set.\n * @attr {string} href - When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`\n * @attr {\"left\" \| \"center\" \| \"right\"} justify-content - It determinate how the content should be aligned\n * @attr {boolean} loading - If `true` it will display the button in a loading state\n * @attr {\"small\" \| \"medium\" \| \"large\"} size - The size of the button\n * @attr {\"_blank\" \| \"_parent\" \| \"_self\" \| \"_top\"} target - Where to display the linked URL, as the name for a browsing context (a `tab`, `window`, or `<iframe>`)\n * @attr {\"button\" \| \"submit\" \| \"reset\"} type - The default behavior of the button\n * @attr {\"standard\" \| \"ghost\" \| \"danger\"} variant - The variant of button to apply on top of the appearance (applicable only to `appearance=\"primary\"`)\n \n @event bqBlur - Handler to be called when the button loses focus\n * @event bqFocus - Handler to be called when button gets focus\n * @event bqClick - Handler to be called when the button is clicked\n \n @slot prefix - The prefix content to be displayed before the button label\n * @slot - The button label content\n * @slot suffix - The suffix content to be displayed after the button label\n \n @part button - The `<a>` or `<button>` HTML element used under the hood.\n * @part prefix - The `<span>` tag element that acts as prefix container.\n * @part label - The `<span>` tag element that renders the text of the button.\n * @part suffix - The `<span>` tag element that acts as suffix container.\n \n @cssprop --bq-button--border-color - Button border color\n * @cssprop --bq-button--border-radius - Button border radius\n * @cssprop --bq-button--border-style - Button border style\n * @cssprop --bq-button--border-width - Button border width\n * @cssprop --bq-button--small-height - Button small height\n * @cssprop --bq-button--small-paddingX - Button small padding block (top and bottom)\n * @cssprop --bq-button--small-paddingY - Button small padding inline (left and right)\n * @cssprop --bq-button--small-font-size - Button small font size\n * @cssprop --bq-button--medium-height - Button medium height\n * @cssprop --bq-button--medium-paddingX - Button medium padding block (top and bottom)\n * @cssprop --bq-button--medium-paddingY - Button medium padding inline (left and right)\n * @cssprop --bq-button--medium-font-size - Button medium font size\n * @cssprop --bq-button--large-height - Button large height\n * @cssprop --bq-button--large-paddingX - Button large padding block (top and bottom)\n * @cssprop --bq-button--large-paddingY - Button large padding inline (left and right)\n * @cssprop --bq-button--large-font-size - Button large font size\n /\n@Component({\n tag: 'bq-button',\n styleUrl: './scss/bq-button.scss',\n formAssociated: true,\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class BqButton {\n // Own Properties\n // ====================\n\n private prefixElem: HTMLElement;\n private suffixElem: HTMLElement;\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqButtonElement;\n @AttachInternals() internals!: ElementInternals;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n @State() private hasPrefix = false;\n @State() private hasSuffix = false;\n\n // Public Property API\n // ========================\n\n /* The appearance style to apply to the button /\n @Prop({ reflect: true }) appearance: TButtonAppearance = 'primary';\n\n /* If `true`, it will make the button fit to its parent width. /\n @Prop({ reflect: true }) block: boolean = false;\n\n /* The corner radius of the button /\n @Prop({ reflect: true }) border: TButtonBorderRadius = 'm';\n\n /* If true, the button will be disabled (no interaction allowed) /\n @Prop() disabled = false;\n\n /\n Tells the browser to treat the linked URL as a download. Only used when `href` is set.\n * Details: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download\n /\n @Prop() download?: string;\n\n /* When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>` /\n @Prop({ reflect: true }) href: string;\n\n /* It determinate how the content should be aligned /\n @Prop({ reflect: true }) justifyContent: 'left' \| 'center' \| 'right' = 'center';\n\n /* If `true` it will display the button in a loading state /\n @Prop() loading = false;\n\n /* The size of the button /\n @Prop({ reflect: true }) size: TButtonSize = 'medium';\n\n /\n Where to display the linked URL, as the name for a browsing context (a `tab`, `window`, or `<iframe>`)\n * Details: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target\n /\n @Prop({ reflect: true }) target: '_blank' \| '_parent' \| '_self' \| '_top';\n\n /* The default behavior of the button /\n @Prop({ reflect: true }) type: TButtonType = 'button';\n\n /* The variant of button to apply on top of the appearance (applicable only to `appearance=\"primary\"`) /\n @Prop({ reflect: true }) variant: TButtonVariant = 'standard';\n\n // Prop lifecycle events\n // =======================\n\n @Watch('appearance')\n @Watch('type')\n @Watch('size')\n @Watch('variant')\n checkPropValues() {\n validatePropValue(BUTTON_APPEARANCE, 'primary', this.el, 'appearance');\n validatePropValue(BUTTON_TYPE, 'button', this.el, 'type');\n validatePropValue(BUTTON_SIZE, 'medium', this.el, 'size');\n validatePropValue(BUTTON_VARIANT, 'standard', this.el, 'variant');\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /* Handler to be called when the button loses focus. /\n @Event() bqBlur: EventEmitter<HTMLBqButtonElement>;\n\n /* Handler to be called when the button gets focus. /\n @Event() bqFocus: EventEmitter<HTMLBqButtonElement>;\n\n /* Handler to be called when the button is clicked. */\n @Event() bqClick: EventEmitter<HTMLBqButtonElement>;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n componentWillLoad() {\n this.checkPropValues();\n }\n\n componentDidLoad() {\n this.handleSlotChange();\n }\n\n // Listeners\n // ==============\n\n // Public methods API\n // These methods are exposed on the host element.\n // Always use two lines.\n // Public Methods must be async.\n // Requires JSDocs for public API documentation.\n // ===============================================\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n private handleBlur = () => {\n this.bqBlur.emit(this.el);\n };\n\n private handleFocus = () => {\n this.bqFocus.emit(this.el);\n };\n\n private handleClick = (ev: Event) => {\n const { disabled, loading, bqClick, el } = this;\n\n if (disabled \|\| loading) {\n this.preventEvent(ev);\n return;\n }\n\n const bqClickEvent = bqClick.emit(el);\n if (bqClickEvent.defaultPrevented) {\n this.preventEvent(ev);\n return;\n }\n\n this.handleFormAction();\n };\n\n private handleFormAction() {\n const {\n type,\n internals: { form },\n } = this;\n if (isNil(form)) return;\n\n const formAction = this.formActions(form)[type];\n if (isNil(formAction)) return;\n\n formAction();\n }\n\n private formActions = (form: HTMLFormElement) => ({\n submit: () => this.submitAssociatedForm(form),\n reset: () => form.reset(),\n });\n\n private submitAssociatedForm = (form: HTMLFormElement) => {\n if (!isClient() \|\| isNil(form)) return;\n\n const btn = document.createElement('button');\n btn.type = this.type;\n btn.hidden = true;\n form.append(btn);\n\n btn.click();\n btn.remove();\n };\n\n private handleSlotChange = () => {\n this.hasPrefix = hasSlotContent(this.prefixElem, 'prefix');\n this.hasSuffix = hasSlotContent(this.suffixElem, 'suffix');\n };\n\n private preventEvent(ev: Event) {\n ev.preventDefault();\n ev.stopPropagation();\n }\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n const isLink = isDefined(this.href);\n const TagElem = isLink ? 'a' : 'button';\n const style = {\n ...(this.border && { '--bq-button--border-radius': `var(--bq-radius--${this.border})` }),\n };\n\n return (\n <Host style={style}>\n <TagElem\n class={{\n 'bq-button': true,\n [`bq-button--${this.appearance}`]: true,\n [`content-${this.justifyContent}`]: true,\n [`${this.variant}`]: true,\n [`${this.size}`]: true,\n block: this.block,\n disabled: this.disabled,\n 'has-prefix': this.hasPrefix,\n 'has-suffix': this.hasSuffix,\n loading: this.loading,\n }}\n aria-disabled={this.disabled ? 'true' : 'false'}\n disabled={this.disabled}\n download={isLink ? this.download : undefined}\n href={isLink ? this.href : undefined}\n part=\"button\"\n rel={isLink && this.target ? 'noreferrer noopener' : undefined}\n target={isLink ? this.target : undefined}\n type={this.type}\n tabIndex={this.disabled ? -1 : 0}\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n onClick={this.handleClick}\n >\n <span class=\"bq-button__prefix\" ref={(spanElem) => (this.prefixElem = spanElem)} part=\"prefix\">\n <slot name=\"prefix\" onSlotchange={this.handleSlotChange} />\n </span>\n <span class=\"bq-button__label\" part=\"label\">\n <slot />\n </span>\n <span class=\"bq-button__suffix\" ref={(spanElem) => (this.suffixElem = spanElem)} part=\"suffix\">\n <slot name=\"suffix\" onSlotchange={this.handleSlotChange} />\n </span>\n {this.loading && <bq-icon class=\"bq-button__loader\" name=\"spinner-gap\" />}\n </TagElem>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/date-picker/bq-date-picker.js CHANGED Viewed

@@ -133,6 +133,7 @@ export class BqDatePicker {
     // ====================
     callyElem;
     inputElem;
+    isInternalUpdate = false;
     labelElem;
     prefixElem;
     suffixElem;
@@ -240,18 +241,16 @@ export class BqDatePicker {
     value;
     // Prop lifecycle events
     // =======================
-    handleValueChange() {
-        const { formatDisplayValue, internals, isCallyLoaded, value } = this;
+    handleValueChange(newValue, oldValue) {
+        if (newValue === oldValue)
+            return;
+        const { formatDisplayValue, internals, isCallyLoaded } = this;
         if (!isCallyLoaded)
             return;
-        internals.setFormValue(!isNil(value) ? `${value}` : undefined);
+        internals.setFormValue(!isNil(newValue) ? `${newValue}` : undefined);
         this.updateFormValidity();
-        if (Array.isArray(value)) {
-            this.hasValue = value.some((val) => val.length > 0);
-            return;
-        }
-        this.hasValue = isDefined(value);
-        this.displayDate = formatDisplayValue(value);
+        this.hasValue = isDefined(newValue);
+        this.displayDate = formatDisplayValue(newValue);
         this.setFocusedDate();
     }
     checkPropValues() {
@@ -285,9 +284,14 @@ export class BqDatePicker {
             console.error(error);
         }
     }
-    async componentDidLoad() {
+    componentDidLoad() {
         this.handleSlotChange();
-        this.handleValueChange();
+        this.handleValueChange(this.value, undefined);
+    }
+    componentDidRender() {
+        if (this.isInternalUpdate) {
+            this.isInternalUpdate = false;
+        }
     }
     formAssociatedCallback() {
         this.updateFormValidity();
@@ -300,10 +304,12 @@ export class BqDatePicker {
     // Listeners
     // ==============
     handleOpenChange(ev) {
-        if (!ev.composedPath().includes(this.el))
+        if (!isEventTargetChildOfElement(ev, this.el))
             return;
-        this.open = ev.detail.open;
-        this.setFocusedDate();
+        const { open } = ev.detail;
+        if (this.open === open)
+            return;
+        this.open = open;
     }
     handleClickOutside(ev) {
         const { open, type, hasRangeEnd } = this;
@@ -311,12 +317,8 @@ export class BqDatePicker {
             return;
         if (isEventTargetChildOfElement(ev, this.el) || hasRangeEnd)
             return;
-        if (isEventTargetChildOfElement(ev, this.el))
-            return;
-        if (!hasRangeEnd) {
-            this.tentative = undefined;
-            this.hasRangeEnd = false;
-        }
+        this.tentative = undefined;
+        this.hasRangeEnd = false;
     }
     // Public methods API
     // These methods are exposed on the host element.
@@ -355,17 +357,20 @@ export class BqDatePicker {
         const { callyElem, formatFocusedDate, isCallyLoaded, value } = this;
         if (!(callyElem && isCallyLoaded))
             return;
-        // We need to set the focused date in the calendar component via a ref
-        // because it doesn't work when passed as a prop (the Cally element does not re-render)
-        this.focusedDate = value ? formatFocusedDate(value) : new Date().toLocaleDateString('fr-CA');
-        this.callyElem.focusedDate = this.focusedDate;
+        const nextFocused = value ? formatFocusedDate(value) : new Date().toLocaleDateString('fr-CA');
+        if (this.focusedDate === nextFocused)
+            return;
+        this.focusedDate = nextFocused;
+        if (callyElem.focusedDate !== this.focusedDate) {
+            // We need to set the focused date in the calendar component via a ref
+            // because it doesn't work when passed as a prop (the Cally element does not re-render)
+            callyElem.focusedDate = this.focusedDate;
+        }
     };
     handleChange = (ev) => {
-        if (this.disabled)
+        if (this.disabled || !isHTMLElement(ev.target, 'input'))
             return;
-        if (!isHTMLElement(ev.target, 'input'))
-            return;
-        const dateValue = new Date(ev.target.value);
+        const dateValue = new Date(ev.target.value + 'T00:00:00');
         if (!isNaN(dateValue.getTime())) {
             // We need to force the value to respect the format: yyyy-mm-dd, hence the hardcoded locale
             this.value = dateValue.toLocaleDateString('fr-CA');
@@ -375,18 +380,26 @@ export class BqDatePicker {
         }
     };
     handleCalendarChange = (ev) => {
-        const { value } = ev.target;
+        if (this.isInternalUpdate)
+            return;
+        const shouldStayOpen = this.type === 'multi';
+        const value = ev.target.value;
+        if (this.value === value) {
+            this.open = shouldStayOpen;
+            return;
+        }
+        this.isInternalUpdate = true;
         this.value = value;
-        this.displayDate = this.formatDisplayValue(this.value);
+        this.displayDate = this.formatDisplayValue(value);
         this.inputElem.value = this.displayDate;
         this.inputElem.focus();
-        this.internals.setFormValue(`${this.value}`);
+        this.internals.setFormValue(value);
         this.bqChange.emit({ value: this.value, el: this.el });
-        this.open = this.type === 'multi';
+        this.open = shouldStayOpen;
     };
     handleCalendarRangeStart = (ev) => {
         this.hasRangeEnd = false;
-        this.tentative = new Date(ev.detail).toLocaleDateString('fr-CA');
+        this.tentative = ev.detail;
     };
     handleCalendarRangeEnd = () => {
         this.hasRangeEnd = true;
@@ -458,14 +471,14 @@ export class BqDatePicker {
             return undefined;
         const dateFormatter = new Intl.DateTimeFormat(this.locale, this.formatOptions);
         if (this.type === 'range') {
-            const [start, end] = value.split('/').map((dateStr) => new Date(dateStr));
+            const [start, end] = value.split('/').map((dateStr) => new Date(dateStr + 'T00:00:00'));
             return dateFormatter.formatRange(start, end);
         }
         if (this.type === 'multi') {
-            const dates = value.split(' ').map((dateStr) => new Date(dateStr));
+            const dates = value.split(' ').map((dateStr) => new Date(dateStr + 'T00:00:00'));
             return dates.map((date) => dateFormatter.format(date)).join(', ');
         }
-        return dateFormatter.format(new Date(value));
+        return dateFormatter.format(new Date(value + 'T00:00:00'));
     };
     updateFormValidity = () => {
         const { formValidationMessage, internals, required, value, inputElem } = this;
@@ -474,7 +487,7 @@ export class BqDatePicker {
         if (required && (!value || value.toString().trim() === '')) {
             // Set validity state to invalid
             internals?.states.add('invalid');
-            internals?.setValidity({ valueMissing: true }, formValidationMessage, inputElem);
+            internals?.setValidity({ valueMissing: true }, formValidationMessage ?? 'Please, input or select a valid date', inputElem);
             return;
         }
         // Set validity state to valid if textarea has value or is not required
@@ -496,16 +509,16 @@ export class BqDatePicker {
     render() {
         const CallyCalendar = this.CalendarType;
         const labelId = `bq-date-picker__label-${this.name || this.fallbackInputId}`;
-        return (h("div", { key: '90e43244086cd211ea29a2e4c2b38a53d61fb6e3', class: "bq-date-picker", part: "base" }, h("label", { key: 'afa9d4e4c5b1961155f96b5cf2c862491fe252e8', id: labelId, class: { 'bq-date-picker__label': true, '!hidden': !this.hasLabel }, "aria-label": this.name || this.fallbackInputId, htmlFor: this.name || this.fallbackInputId, ref: (labelElem) => (this.labelElem = labelElem), part: "label" }, h("slot", { key: '0e6087b6d570604cfa0ff6c0199ee15b4509fb1f', name: "label", onSlotchange: this.handleSlotChange })), h("bq-dropdown", { key: 'e5314f0cec550603250010c170872823df644a66', class: "bq-date-picker__dropdown is-full [&::part(panel)]:p-m [&::part(panel)]:is-auto", disabled: this.disabled, distance: this.distance, open: this.open, panelHeight: this.panelHeight, placement: this.placement, skidding: this.skidding, strategy: this.strategy, exportparts: "panel" }, h("div", { key: 'cc9a24028deb548153c81be9269c26ee7d4be8c9', class: {
+        return (h("div", { key: '70f13329ea64ee9b34923e4a63f15567b8599647', class: "bq-date-picker", part: "base" }, h("label", { key: '380eff87152f9f1b32c6a245fb1076c9bfd49718', id: labelId, class: { 'bq-date-picker__label': true, '!hidden': !this.hasLabel }, "aria-label": this.name || this.fallbackInputId, htmlFor: this.name || this.fallbackInputId, ref: (labelElem) => (this.labelElem = labelElem), part: "label" }, h("slot", { key: '8c2af1ac6b86069943ee9f800fca5e34a8330de8', name: "label", onSlotchange: this.handleSlotChange })), h("bq-dropdown", { key: 'f2a23bdfa18984900b54414f9f9adedcffd7da44', class: "bq-date-picker__dropdown is-full [&::part(panel)]:p-m [&::part(panel)]:is-auto", disabled: this.disabled, distance: this.distance, open: this.open, panelHeight: this.panelHeight, placement: this.placement, skidding: this.skidding, strategy: this.strategy, exportparts: "panel" }, h("div", { key: 'da8b3eee06bba4fba6a6bd0afa34f276013e3e24', class: {
                 'bq-date-picker__control': true,
                 [`validation-${this.validationStatus}`]: true,
                 disabled: this.disabled,
-            }, part: "control", slot: "trigger" }, h("span", { key: 'b548441675b48af77eeff1cd2a7ab94b6e722a2c', class: { 'bq-date-picker__control--prefix': true, '!hidden': !this.hasPrefix }, ref: (spanElem) => (this.prefixElem = spanElem), part: "prefix" }, h("slot", { key: 'e0f4ab4a054073c602cf4ec89ce0fb2edcbc4502', name: "prefix", onSlotchange: this.handleSlotChange })), h("input", { key: '548cf75c23c5ba24fe800f5edc882e9af0a712d2', id: this.name || this.fallbackInputId, class: "bq-date-picker__control--input", autoComplete: "off", autoCapitalize: "off", "aria-disabled": this.disabled ? 'true' : 'false', "aria-controls": `${this.name}`, "aria-haspopup": "dialog", disabled: this.disabled, form: this.form, name: this.name, placeholder: this.placeholder, readonly: this.type !== 'single', ref: (inputElem) => (this.inputElem = inputElem), required: this.required, spellcheck: false, type: "text", value: this.displayDate, part: "input",
+            }, part: "control", slot: "trigger" }, h("span", { key: '7c02c1554af91b2bd5500b88c0e5d727603a2b9b', class: { 'bq-date-picker__control--prefix': true, '!hidden': !this.hasPrefix }, ref: (spanElem) => (this.prefixElem = spanElem), part: "prefix" }, h("slot", { key: '103cc4ffe2cb2b37a4cc232a69ef78b6e8b8c6e4', name: "prefix", onSlotchange: this.handleSlotChange })), h("input", { key: '39cd9c82215df7a7e6fc0460915328056f221978', id: this.name || this.fallbackInputId, class: "bq-date-picker__control--input", autoComplete: "off", autoCapitalize: "off", "aria-disabled": this.disabled ? 'true' : 'false', "aria-controls": `${this.name}`, "aria-haspopup": "dialog", disabled: this.disabled, form: this.form, name: this.name, placeholder: this.placeholder, readonly: this.type !== 'single', ref: (inputElem) => (this.inputElem = inputElem), required: this.required, spellcheck: false, type: "text", value: this.displayDate, part: "input",
             // Events
             onBlur: this.handleBlur, onFocus: this.handleFocus, onChange: this.handleChange }), this.hasValue && !this.disabled && !this.disableClear && (
         // The clear button will be visible as long as the input has a value
         // and the parent group is hovered or has focus-within
-        h("bq-button", { key: '94c186cfce884edd7c2d63a49f6533d8448fb683', class: "bq-date-picker__control--clear ms-[--bq-date-picker--gap] hidden", appearance: "text", "aria-label": this.clearButtonLabel, size: "small", onBqClick: this.handleClearClick, part: "clear-btn", exportparts: "button" }, h("slot", { key: 'f0caaec8283a7ca0298b82f157bd36933b0541b4', name: "clear-icon" }, h("bq-icon", { key: '2549f5bce9f4d7e836ff5babaa04750831482b40', name: "x-circle", class: "flex" })))), h("span", { key: '8c504c8a885061eec62e4704e425b5f3779cd69e', class: "bq-date-picker__control--suffix", ref: (spanElem) => (this.suffixElem = spanElem), part: "suffix" }, h("slot", { key: '8220188ec1b41908b45301503d3351a6038e1dd5', name: "suffix", onSlotchange: this.handleSlotChange }, h("bq-icon", { key: 'ba52169baa77e1103e09fcb538f7ba7067ca5474', name: "calendar-blank", class: "flex" })))), this.isCallyLoaded && (h(CallyCalendar, { key: '7d27a2ab38209ebe4d1801bb235da417321904b4', isDateDisallowed: this.isDateDisallowed, locale: this.locale, value: this.value, min: this.min, max: this.max, months: this.months, tentative: this.tentative, pageBy: this.monthsPerView, firstDayOfWeek: this.firstDayOfWeek, showOutsideDays: this.showOutsideDays, onChange: this.handleCalendarChange, onRangestart: this.handleCalendarRangeStart, onRangeend: this.handleCalendarRangeEnd, exportparts: "container:calendar__container,header:calendar__header,button:calendar__button,previous:calendar__previous,next:calendar__next,disabled:calendar__disabled,heading:calendar__heading", ref: (elem) => (this.callyElem = elem) }, h("bq-icon", { key: '671b9b78eb566a2f4862525e396749e50be679a8', color: "text--primary", slot: "previous", name: "caret-left", label: "Previous" }), h("bq-icon", { key: '6219184ad134f80b515aeb4dd5a52a2efe1ccf8a', color: "text--primary", slot: "next", name: "caret-right", label: "Next" }), h("div", { key: '438fecb7af23bb5a6e10f2e65c310ce904fbae00', class: "flex flex-wrap justify-center gap-[--bq-spacing-m]" }, this.generateCalendarMonths()))))));
+        h("bq-button", { key: 'f23e4d77b45f88920d96be228a55af493b0306f4', class: "bq-date-picker__control--clear ms-[--bq-date-picker--gap] hidden", appearance: "text", "aria-label": this.clearButtonLabel, size: "small", onBqClick: this.handleClearClick, part: "clear-btn", exportparts: "button" }, h("slot", { key: 'a0cb283da14c276bdb7851c5c9664b9f5fd2b3a4', name: "clear-icon" }, h("bq-icon", { key: '02663a817097d5426c71569019de176044a247f0', name: "x-circle", class: "flex" })))), h("span", { key: '872be19c196b4a2b7523e22140b9f7b81feab81a', class: "bq-date-picker__control--suffix", ref: (spanElem) => (this.suffixElem = spanElem), part: "suffix" }, h("slot", { key: '5b687ae35fa37326fd83f141c7788e3441ac4e75', name: "suffix", onSlotchange: this.handleSlotChange }, h("bq-icon", { key: 'cbb17aafed0f39fbc14047afb68ce2f18752529e', name: "calendar-blank", class: "flex" })))), this.isCallyLoaded && (h(CallyCalendar, { key: '12185dc3e6650ef7d640e709c5bb3b2ed3ef2a72', isDateDisallowed: this.isDateDisallowed, locale: this.locale, value: this.value, min: this.min, max: this.max, months: this.months, tentative: this.tentative, pageBy: this.monthsPerView, firstDayOfWeek: this.firstDayOfWeek, showOutsideDays: this.showOutsideDays, onChange: this.handleCalendarChange, onRangestart: this.handleCalendarRangeStart, onRangeend: this.handleCalendarRangeEnd, exportparts: "container:calendar__container,header:calendar__header,button:calendar__button,previous:calendar__previous,next:calendar__next,disabled:calendar__disabled,heading:calendar__heading", ref: (elem) => (this.callyElem = elem) }, h("bq-icon", { key: '19820e69ed798053e0b63f6a9d19547244c6f165', color: "text--primary", slot: "previous", name: "caret-left", label: "Previous" }), h("bq-icon", { key: '7e71a521ef61c8eece31eb76b99584f52ea34897', color: "text--primary", slot: "next", name: "caret-right", label: "Next" }), h("div", { key: '62291115d74800609cc82dc200cb40e1ddc464e4', class: "flex flex-wrap justify-center gap-[--bq-spacing-m]" }, this.generateCalendarMonths()))))));
     }
     static get is() { return "bq-date-picker"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/date-picker/bq-date-picker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"bq-date-picker.js","sourceRoot":"","sources":["../../../../../../packages/beeq/src/components/date-picker/bq-date-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { AttachInternals, Component, Element, Event, h, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\nimport { DATE_PICKER_TYPE } from './bq-date-picker.types';\nimport type { DaysOfWeek, TCalendarDate, TDatePickerType } from './bq-date-picker.types';\nimport { isCallyLibraryLoaded, loadCallyLibrary } from './helper/callyLibrary';\nimport type { Placement } from '../../services/interfaces';\nimport {\n hasSlotContent,\n isClient,\n isDefined,\n isEventTargetChildOfElement,\n isHTMLElement,\n isNil,\n validatePropValue,\n} from '../../shared/utils';\nimport type { TInputValidation } from '../input/bq-input.types';\n\n/*\n The Date Picker is a intuitive UI element component allows users to select dates from a visual calendar interface, providing an intuitive way to input date information.\n \n @example How to use it\n * ```html\n * <bq-date-picker\n * first-day-of-week=\"1\"\n * locale=\"en-GB\"\n * months-per-view=\"single\"\n * months=\"2\"\n * name=\"bq-date-picker\"\n * placeholder=\"Enter your date\"\n * placement=\"bottom-end\"\n * show-outside-days=\"false\"\n * type=\"range\"\n * validation-status=\"none\"\n * value=\"2024-05-25\"\n * >\n * <label class=\"flex flex-grow items-center\" slot=\"label\">\n * Date picker label\n * </label>\n * </bq-date-picker>\n * ```\n \n @documentation https://www.beeq.design/3d466e231/p/5793a9-date-picker\n * @status stable\n \n @dependency bq-button\n * @dependency bq-dropdown\n * @dependency bq-icon\n \n @attr {boolean} autofocus - If `true`, the Date picker input will be focused on component render.\n * @attr {string} clear-button-label - The clear button aria label.\n * @attr {boolean} disable-clear - If `true`, the clear button won't be displayed.\n * @attr {boolean} disabled - Indicates whether the Date picker input is disabled or not.\n * @attr {number} distance - Represents the distance (gutter or margin) between the Date picker panel and the input element.\n * @attr {0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6} first-day-of-week - The first day of the week, where Sunday is 0, Monday is 1, etc.\n * @attr {Intl.DateTimeFormatOptions} format-options - The options to use when formatting the displayed value. Details: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#using_options\n * @attr {string} form - The ID of the form that the Date picker input belongs to.\n * @attr {string} form-validation-message - The native form validation message (mandatory if `required` is set).\n * @attr {function} is-date-disallowed - A function that takes a date and returns true if the date should not be selectable.\n * @attr {Intl.LocalesArgument} locale - The locale for formatting dates. If not set, will use the browser's locale. Details: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument\n * @attr {string} max - The latest date that can be selected.\n * @attr {string} min - The earliest date that can be selected.\n * @attr {number} months - Number of months to show when range is `true`.\n * @attr {string} name - The Date picker input name.\n * @attr {boolean} open - If `true`, the Date picker panel will be visible.\n * @attr {string} panel-height - When set, it will override the height of the Date picker panel.\n * @attr {\"top\" \| \"right\" \| \"bottom\" \| \"left\" \| \"top-start\" \| \"top-end\" \| \"right-start\" \| \"right-end\" \| \"bottom-start\" \| \"bottom-end\" \| \"left-start\" \| \"left-end\"} placement - Position of the Date picker panel.\n * @attr {boolean} required - Indicates whether or not the Date picker input is required to be filled out before submitting the form.\n * @attr {number} skidding - Represents the skidding between the Date picker panel and the input element.\n * @attr {boolean} show-outside-days - Whether to show days outside the month.\n * @attr {string} strategy - Defines the strategy to position the Date picker panel.\n * @attr {string} tentative - The date that is tentatively selected, e.g. the start of a range selection.\n * @attr {\"single\" \| \"multi\" \| \"range\"} type - It defines how the calendar will behave, allowing single date selection, range selection, or multiple date selection.\n * @attr {\"error\" \| \"none\" \| \"success\" \| \"warning\"} validation-status - The validation status of the Select input.\n * @attr {string} value - The select input value represents the currently selected date or range and can be used to reset the field to a previous value.\n \n @method clear - Clears the selected value.\n \n @event bqBlur - Callback handler emitted when the input loses focus.\n * @event bqChange - Callback handler emitted when the input value has changed and the input loses focus.\n * @event bqClear - Callback handler emitted when the input value has been cleared.\n * @event bqFocus - Callback handler emitted when the input has received focus.\n \n @part base - The component's base wrapper.\n * @part button - The native HTML button used under the hood in the clear button.\n * @part calendar__button - Any button used in the calendar-month component.\n * @part calendar__button - Any button within the calendar-range component.\n * @part calendar__container - The calendar-range container for the entire component.\n * @part calendar__day - The buttons corresponding to each day in the calendar-month grid.\n * @part calendar__disabled - A button that is disabled due to min/max on the calendar-range component.\n * @part calendar__disallowed - Any day that has been disallowed via isDateDisallowed.\n * @part calendar__head - The calendar-month table's header row.\n * @part calendar__header - The calendar-range container for the heading and buttons.\n * @part calendar__heading - The calendar-month heading container that labels the month.\n * @part calendar__heading - The calendar-range heading containing the month and year.\n * @part calendar__next - The next page button on the calendar-range component.\n * @part calendar__outside - Any days which are outside the current month.\n * @part calendar__previous - The previous page button on the calendar-range component.\n * @part calendar__range-end - The day at the end of a date range.\n * @part calendar__range-inner - Any days between the start and end of a date range.\n * @part calendar__range-start - The day at the start of a date range.\n * @part calendar__selected - Any days which are selected.\n * @part calendar__table - The calendar-month <table> element.\n * @part calendar__td - The calendar-month table's body cells.\n * @part calendar__th - The calendar-month table's header cells.\n * @part calendar__today - The Today's day.\n * @part calendar__tr - Any row within the table on the calendar-month component.\n * @part calendar__week - The calendar-month table's body rows.\n * @part clear-btn - The clear button.\n * @part control - The input control wrapper.\n * @part input - The native HTML input element used under the hood.\n * @part label - The label slot container.\n * @part panel - The date picker panel container\n * @part prefix - The prefix slot container.\n * @part suffix - The suffix slot container.\n \n @cssprop --bq-date-picker--background-color - Date picker background color.\n * @cssprop --bq-date-picker--border-color - Date picker border color.\n * @cssprop --bq-date-picker--border-color-disabled - Date picker border color when disabled.\n * @cssprop --bq-date-picker--border-color-focus - Date picker border color on focus.\n * @cssprop --bq-date-picker--border-radius - Date picker border radius.\n * @cssprop --bq-date-picker--border-style - Date picker border style.\n * @cssprop --bq-date-picker--border-width - Date picker border width.\n * @cssprop --bq-date-picker--currentDate-border-color - Date picker border color for current date.\n * @cssprop --bq-date-picker--currentDate-border-width - Date picker border width for current date.\n * @cssprop --bq-date-picker--day-size - Date picker button day size.\n * @cssprop --bq-date-picker--gap - Gap between Date picker content and prefix/suffix.\n * @cssprop --bq-date-picker--icon-size - Icon size to use in prefix/suffix and clear button.\n * @cssprop --bq-date-picker--label-margin-bottom - Date picker label margin bottom.\n * @cssprop --bq-date-picker--label-text-color - Date picker label text color.\n * @cssprop --bq-date-picker--label-text-size - Date picker label text size.\n * @cssprop --bq-date-picker--padding-end - Date picker padding end.\n * @cssprop --bq-date-picker--padding-start - Date picker padding start.\n * @cssprop --bq-date-picker--paddingY - Date picker padding top and bottom.\n * @cssprop --bq-date-picker--range-background-color - Background color for the selected date range in the date picker.\n * @cssprop --bq-date-picker--range-inner-background-color - Background color for the selected dates inside the date range in the date picker.\n * @cssprop --bq-date-picker--text-color - Date picker text color.\n * @cssprop --bq-date-picker--text-placeholder-color - Date picker placeholder text color.\n * @cssprop --bq-date-picker--text-size - Date picker text size.\n /\n@Component({\n tag: 'bq-date-picker',\n styleUrl: './scss/bq-date-picker.scss',\n formAssociated: true,\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class BqDatePicker {\n // Own Properties\n // ====================\n\n private callyElem?: TCalendarDate;\n private inputElem?: HTMLInputElement;\n private labelElem?: HTMLElement;\n private prefixElem?: HTMLElement;\n private suffixElem?: HTMLElement;\n\n private fallbackInputId = 'date-picker';\n\n // Export parts of the calendar-month component\n private readonly COMMON_EXPORT_PARTS =\n 'calendar__heading,calendar__table,calendar__tr,calendar__head,calendar__week,calendar__th,calendar__td';\n private readonly BUTTON_EXPORT_PARTS =\n 'calendar__button,calendar__day,calendar__selected,calendar__today,calendar__disallowed,calendar__outside,calendar__range-start,calendar__range-end,calendar__range-inner';\n\n // Reference to host HTML element\n // ===================================\n\n @AttachInternals() internals: ElementInternals;\n @Element() el!: HTMLBqDatePickerElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n @State() isCallyLoaded = false;\n @State() focusedDate: string;\n @State() displayDate: string;\n @State() hasLabel = false;\n @State() hasPrefix = false;\n @State() hasRangeEnd = false;\n @State() hasSuffix = false;\n @State() hasValue = false;\n\n // Public Property API\n // ========================\n\n /* If `true`, the Date picker input will be focused on component render /\n @Prop({ reflect: true }) autofocus: boolean;\n\n /* The clear button aria label /\n @Prop({ reflect: true }) clearButtonLabel? = 'Clear value';\n\n /* If `true`, the clear button won't be displayed /\n @Prop({ reflect: true }) disableClear? = false;\n\n /\n Indicates whether the Date picker input is disabled or not.\n * If `true`, the Date picker is disabled and cannot be interacted with.\n /\n @Prop({ mutable: true }) disabled?: boolean = false;\n\n /* Represents the distance (gutter or margin) between the Date picker panel and the input element. /\n @Prop({ reflect: true }) distance?: number = 8;\n\n /* The first day of the week, where Sunday is 0, Monday is 1, etc /\n @Prop({ reflect: true }) firstDayOfWeek?: DaysOfWeek = 1;\n\n /* The options to use when formatting the displayed value.\n * Details: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#using_options\n /\n @Prop() formatOptions: Intl.DateTimeFormatOptions = {\n day: 'numeric',\n month: 'short',\n year: 'numeric',\n };\n\n /* The ID of the form that the Date picker input belongs to. /\n @Prop({ reflect: true }) form?: string;\n\n /* The native form validation message (mandatory if `required` is set) /\n @Prop({ mutable: true }) formValidationMessage?: string;\n\n /* A function that takes a date and returns true if the date should not be selectable /\n @Prop({ reflect: true }) isDateDisallowed?: (date: Date) => boolean;\n\n /* The locale for formatting dates. If not set, will use the browser's locale.\n * Details: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument\n /\n @Prop({ reflect: true }) locale: Intl.LocalesArgument = 'en-GB';\n\n /* The latest date that can be selected /\n @Prop({ reflect: true }) max?: string;\n\n /* The earliest date that can be selected /\n @Prop({ reflect: true }) min?: string;\n\n /* Number of months to show when range is `true` /\n @Prop({ reflect: true }) months: number;\n\n /\n Specifies how the next/previous buttons should navigate the calendar.\n * - single: The buttons will navigate by a single month at a time.\n * - months: The buttons will navigate by the number of months displayed per view.\n /\n @Prop({ reflect: true }) monthsPerView: 'single' \| 'months' = 'single';\n\n /* The Date picker input name. /\n @Prop({ reflect: true }) name!: string;\n\n /* If `true`, the Date picker panel will be visible. /\n @Prop({ reflect: true, mutable: true }) open?: boolean = false;\n\n /* When set, it will override the height of the Date picker panel. /\n @Prop({ reflect: true, mutable: true }) panelHeight?: string = 'auto';\n\n /* The Date picker input placeholder text value /\n @Prop({ reflect: true }) placeholder?: string;\n\n /* Position of the Date picker panel /\n @Prop({ reflect: true }) placement?: Placement = 'bottom-end';\n\n /* Indicates whether or not the Date picker input is required to be filled out before submitting the form. /\n @Prop({ reflect: true }) required?: boolean;\n\n /* Represents the skidding between the Date picker panel and the input element. /\n @Prop({ reflect: true }) skidding?: number = 0;\n\n /* Whether to show days outside the month /\n @Prop({ reflect: true }) showOutsideDays: boolean = false;\n\n /* Defines the strategy to position the Date picker panel /\n @Prop({ reflect: true }) strategy?: 'fixed' \| 'absolute' = 'fixed';\n\n /* The date that is tentatively selected e.g. the start of a range selection /\n @Prop({ reflect: true, mutable: true }) tentative?: string;\n\n /* It defines how the calendar will behave, allowing single date selection, range selection, or multiple date selection /\n @Prop({ reflect: true }) type: TDatePickerType = 'single';\n\n /\n The validation status of the Select input.\n \n @remarks\n * This property is used to indicate the validation status of the select input. It can be set to one of the following values:\n * - `'none'`: No validation status is set.\n * - `'error'`: The input has a validation error.\n * - `'warning'`: The input has a validation warning.\n * - `'success'`: The input has passed validation.\n /\n @Prop({ reflect: true }) validationStatus: TInputValidation = 'none';\n\n /* The select input value represents the currently selected date or range and can be used to reset the field to a previous value.\n * All dates are expected in ISO-8601 format (YYYY-MM-DD). /\n @Prop({ reflect: true, mutable: true }) value: string;\n\n // Prop lifecycle events\n // =======================\n\n @Watch('value')\n handleValueChange() {\n const { formatDisplayValue, internals, isCallyLoaded, value } = this;\n if (!isCallyLoaded) return;\n\n internals.setFormValue(!isNil(value) ? `${value}` : undefined);\n this.updateFormValidity();\n\n if (Array.isArray(value)) {\n this.hasValue = value.some((val) => val.length > 0);\n return;\n }\n\n this.hasValue = isDefined(value);\n this.displayDate = formatDisplayValue(value);\n\n this.setFocusedDate();\n }\n\n @Watch('type')\n checkPropValues() {\n validatePropValue(DATE_PICKER_TYPE, 'single', this.el, 'type');\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /* Callback handler emitted when the input loses focus /\n @Event() bqBlur!: EventEmitter<HTMLBqDatePickerElement>;\n\n /\n Callback handler emitted when the input value has changed and the input loses focus.\n * This handler is called whenever the user finishes typing or pasting text into the input field and then clicks outside of the input field.\n /\n @Event() bqChange!: EventEmitter<{ value: string; el: HTMLBqDatePickerElement }>;\n\n /* Callback handler emitted when the input value has been cleared /\n @Event() bqClear!: EventEmitter<HTMLBqDatePickerElement>;\n\n /* Callback handler emitted when the input has received focus /\n @Event() bqFocus!: EventEmitter<HTMLBqDatePickerElement>;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n async componentWillLoad() {\n if (!isClient() \|\| this.isCallyLoaded) return;\n\n try {\n await loadCallyLibrary();\n this.isCallyLoaded = isCallyLibraryLoaded();\n } catch (error) {\n console.error(error);\n }\n }\n\n async componentDidLoad() {\n this.handleSlotChange();\n this.handleValueChange();\n }\n\n formAssociatedCallback() {\n this.updateFormValidity();\n }\n\n formResetCallback() {\n if (isNil(this.value)) return;\n\n this.clear();\n }\n\n // Listeners\n // ==============\n\n @Listen('bqOpen', { capture: true })\n handleOpenChange(ev: CustomEvent<{ open: boolean }>) {\n if (!ev.composedPath().includes(this.el)) return;\n\n this.open = ev.detail.open;\n this.setFocusedDate();\n }\n\n @Listen('click', { target: 'body', capture: true })\n handleClickOutside(ev: MouseEvent) {\n const { open, type, hasRangeEnd } = this;\n if (!open \|\| type !== 'range' \|\| ev.button !== 0) return;\n if (isEventTargetChildOfElement(ev, this.el) \|\| hasRangeEnd) return;\n if (isEventTargetChildOfElement(ev, this.el)) return;\n\n if (!hasRangeEnd) {\n this.tentative = undefined;\n this.hasRangeEnd = false;\n }\n }\n\n // Public methods API\n // These methods are exposed on the host element.\n // Always use two lines.\n // Public Methods must be async.\n // Requires JSDocs for public API documentation.\n // ===============================================\n\n /\n Clears the selected value.\n \n @return {Promise<void>}\n * @memberof BqInput\n /\n @Method()\n async clear(): Promise<void> {\n if (this.disabled) return;\n\n this.value = undefined;\n this.internals.setFormValue(undefined);\n this.bqClear.emit(this.el);\n }\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n private handleBlur = () => {\n if (this.disabled) return;\n\n this.bqBlur.emit(this.el);\n };\n\n private handleFocus = () => {\n if (this.disabled) return;\n\n this.bqFocus.emit(this.el);\n };\n\n private setFocusedDate = () => {\n const { callyElem, formatFocusedDate, isCallyLoaded, value } = this;\n if (!(callyElem && isCallyLoaded)) return;\n // We need to set the focused date in the calendar component via a ref\n // because it doesn't work when passed as a prop (the Cally element does not re-render)\n this.focusedDate = value ? formatFocusedDate(value) : new Date().toLocaleDateString('fr-CA');\n this.callyElem.focusedDate = this.focusedDate;\n };\n\n private handleChange = (ev: Event) => {\n if (this.disabled) return;\n if (!isHTMLElement(ev.target, 'input')) return;\n\n const dateValue = new Date(ev.target.value);\n if (!isNaN(dateValue.getTime())) {\n // We need to force the value to respect the format: yyyy-mm-dd, hence the hardcoded locale\n this.value = dateValue.toLocaleDateString('fr-CA');\n this.displayDate = this.formatDisplayValue(this.value);\n this.internals.setFormValue(`${this.value}`);\n this.bqChange.emit({ value: this.value, el: this.el });\n }\n };\n\n private handleCalendarChange = (ev: Event) => {\n const { value } = ev.target as unknown as { value: string };\n\n this.value = value;\n this.displayDate = this.formatDisplayValue(this.value);\n this.inputElem.value = this.displayDate;\n this.inputElem.focus();\n\n this.internals.setFormValue(`${this.value}`);\n this.bqChange.emit({ value: this.value, el: this.el });\n\n this.open = this.type === 'multi';\n };\n\n private handleCalendarRangeStart = (ev: CustomEvent) => {\n this.hasRangeEnd = false;\n this.tentative = new Date(ev.detail).toLocaleDateString('fr-CA');\n };\n\n private handleCalendarRangeEnd = () => {\n this.hasRangeEnd = true;\n };\n\n private handleClearClick = (ev: CustomEvent) => {\n if (this.disabled) return;\n\n this.inputElem.value = '';\n this.value = this.inputElem.value;\n this.hasRangeEnd = false;\n\n this.bqClear.emit(this.el);\n this.bqChange.emit({ value: this.value, el: this.el });\n this.internals.setFormValue(undefined);\n this.inputElem.focus();\n\n ev.stopPropagation();\n };\n\n private handleSlotChange = () => {\n this.hasLabel = hasSlotContent(this.labelElem);\n this.hasPrefix = hasSlotContent(this.prefixElem);\n this.hasSuffix = hasSlotContent(this.suffixElem);\n };\n\n private generateCalendarMonth = (offset?: number, className = ''): Element \| null => {\n if (!this.isCallyLoaded) return null;\n\n return (\n <calendar-month\n offset={offset}\n class={className}\n exportparts={`${this.COMMON_EXPORT_PARTS},${this.BUTTON_EXPORT_PARTS}`}\n />\n );\n };\n\n /\n Generates an array of Elements representing the calendar months.\n \n If the type of the date picker is 'range' or 'multi' and the number of months is specified,\n * it generates an array of calendar months with the specified length. Each month will have an offset\n * and a class name based on its position in the array. The offset is used to determine the month to display,\n * and the class name is used for responsive design.\n \n If the type of the date picker is not 'range' or 'multi', or if the number of months is not specified,\n * it generates an array with a single calendar month.\n \n @returns {Element[]} An array of elements representing the calendar months.\n /\n private generateCalendarMonths = (): Element[] => {\n if (!this.isCallyLoaded) return [];\n\n if (this.type === 'range' \|\| (this.type === 'multi' && this.months)) {\n return Array.from({ length: this.months }, (_, i) => {\n const offset = i > 0 ? i : undefined;\n const className = offset ? 'hidden sm:block' : '';\n return this.generateCalendarMonth(offset, className);\n });\n }\n\n return [this.generateCalendarMonth()];\n };\n\n /\n Extracts and returns the first date part from a given string.\n * When the type of the date picker is 'range' or 'multi', the first or initial date part of the value\n * should be the focused date in the calendar.\n \n @param value - The value to be processed, can be a string.\n * @returns The extracted last date portion of the value.\n /\n private formatFocusedDate = (value: string): string \| undefined => {\n if (!value) return undefined;\n\n const dateRegex = /\\b\\d{4}-\\d{2}-\\d{2}\\b/;\n const match = dateRegex.exec(value);\n return match ? match[0] : undefined;\n };\n\n private formatDisplayValue = (value: string): string \| undefined => {\n if (!value) return undefined;\n\n const dateFormatter = new Intl.DateTimeFormat(this.locale, this.formatOptions);\n\n if (this.type === 'range') {\n const [start, end] = value.split('/').map((dateStr) => new Date(dateStr));\n return dateFormatter.formatRange(start, end);\n }\n\n if (this.type === 'multi') {\n const dates = value.split(' ').map((dateStr) => new Date(dateStr));\n return dates.map((date) => dateFormatter.format(date)).join(', ');\n }\n\n return dateFormatter.format(new Date(value));\n };\n\n private updateFormValidity = () => {\n const { formValidationMessage, internals, required, value, inputElem } = this;\n\n // Clear the validity state\n internals?.states.clear();\n\n if (required && (!value \|\| value.toString().trim() === '')) {\n // Set validity state to invalid\n internals?.states.add('invalid');\n internals?.setValidity({ valueMissing: true }, formValidationMessage, inputElem);\n return;\n }\n\n // Set validity state to valid if textarea has value or is not required\n internals?.states.add('valid');\n internals?.setValidity({});\n };\n\n private get CalendarType() {\n const componentTypes = {\n single: 'calendar-date',\n multi: 'calendar-multi',\n range: 'calendar-range',\n } as const;\n\n // Return the corresponding component type, based on the type prop value\n return componentTypes[this.type] \|\| componentTypes.single;\n }\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n const CallyCalendar = this.CalendarType;\n const labelId = `bq-date-picker__label-${this.name \|\| this.fallbackInputId}`;\n\n return (\n <div class=\"bq-date-picker\" part=\"base\">\n {/ Label /}\n <label\n id={labelId}\n class={{ 'bq-date-picker__label': true, '!hidden': !this.hasLabel }}\n aria-label={this.name \|\| this.fallbackInputId}\n htmlFor={this.name \|\| this.fallbackInputId}\n ref={(labelElem: HTMLSpanElement) => (this.labelElem = labelElem)}\n part=\"label\"\n >\n <slot name=\"label\" onSlotchange={this.handleSlotChange} />\n </label>\n {/ Select date picker dropdown /}\n <bq-dropdown\n class=\"bq-date-picker__dropdown is-full [&::part(panel)]:p-m [&::part(panel)]:is-auto\"\n disabled={this.disabled}\n distance={this.distance}\n open={this.open}\n panelHeight={this.panelHeight}\n placement={this.placement}\n skidding={this.skidding}\n strategy={this.strategy}\n exportparts=\"panel\"\n >\n {/ Input control group /}\n <div\n class={{\n 'bq-date-picker__control': true,\n [`validation-${this.validationStatus}`]: true,\n disabled: this.disabled,\n }}\n part=\"control\"\n slot=\"trigger\"\n >\n {/ Prefix /}\n <span\n class={{ 'bq-date-picker__control--prefix': true, '!hidden': !this.hasPrefix }}\n ref={(spanElem: HTMLSpanElement) => (this.prefixElem = spanElem)}\n part=\"prefix\"\n >\n <slot name=\"prefix\" onSlotchange={this.handleSlotChange} />\n </span>\n {/ HTML Input /}\n <input\n id={this.name \|\| this.fallbackInputId}\n class=\"bq-date-picker__control--input\"\n autoComplete=\"off\"\n autoCapitalize=\"off\"\n aria-disabled={this.disabled ? 'true' : 'false'}\n aria-controls={`${this.name}`}\n aria-haspopup=\"dialog\"\n disabled={this.disabled}\n form={this.form}\n name={this.name}\n placeholder={this.placeholder}\n readonly={this.type !== 'single'}\n ref={(inputElem: HTMLInputElement) => (this.inputElem = inputElem)}\n required={this.required}\n spellcheck={false}\n type=\"text\"\n value={this.displayDate}\n part=\"input\"\n // Events\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n onChange={this.handleChange}\n />\n {/ Clear Button /}\n {this.hasValue && !this.disabled && !this.disableClear && (\n // The clear button will be visible as long as the input has a value\n // and the parent group is hovered or has focus-within\n <bq-button\n class=\"bq-date-picker__control--clear ms-[--bq-date-picker--gap] hidden\"\n appearance=\"text\"\n aria-label={this.clearButtonLabel}\n size=\"small\"\n onBqClick={this.handleClearClick}\n part=\"clear-btn\"\n exportparts=\"button\"\n >\n <slot name=\"clear-icon\">\n <bq-icon name=\"x-circle\" class=\"flex\" />\n </slot>\n </bq-button>\n )}\n {/ Suffix */}\n <span\n class=\"bq-date-picker__control--suffix\"\n ref={(spanElem: HTMLSpanElement) => (this.suffixElem = spanElem)}\n part=\"suffix\"\n >\n <slot name=\"suffix\" onSlotchange={this.handleSlotChange}>\n <bq-icon name=\"calendar-blank\" class=\"flex\" />\n </slot>\n </span>\n </div>\n {this.isCallyLoaded && (\n <CallyCalendar\n isDateDisallowed={this.isDateDisallowed}\n locale={this.locale as string}\n value={this.value}\n min={this.min}\n max={this.max}\n months={this.months}\n tentative={this.tentative}\n pageBy={this.monthsPerView}\n firstDayOfWeek={this.firstDayOfWeek}\n showOutsideDays={this.showOutsideDays}\n onChange={this.handleCalendarChange}\n onRangestart={this.handleCalendarRangeStart}\n onRangeend={this.handleCalendarRangeEnd}\n exportparts=\"container:calendar__container,header:calendar__header,button:calendar__button,previous:calendar__previous,next:calendar__next,disabled:calendar__disabled,heading:calendar__heading\"\n ref={(elem: TCalendarDate) => (this.callyElem = elem)}\n >\n <bq-icon color=\"text--primary\" slot=\"previous\" name=\"caret-left\" label=\"Previous\" />\n <bq-icon color=\"text--primary\" slot=\"next\" name=\"caret-right\" label=\"Next\" />\n\n <div class=\"flex flex-wrap justify-center gap-[--bq-spacing-m]\">{this.generateCalendarMonths()}</div>\n </CallyCalendar>\n )}\n </bq-dropdown>\n </div>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"bq-date-picker.js","sourceRoot":"","sources":["../../../../../../packages/beeq/src/components/date-picker/bq-date-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { AttachInternals, Component, Element, Event, h, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\nimport { DATE_PICKER_TYPE } from './bq-date-picker.types';\nimport type { DaysOfWeek, TCalendarDate, TDatePickerType } from './bq-date-picker.types';\nimport { isCallyLibraryLoaded, loadCallyLibrary } from './helper/callyLibrary';\nimport type { Placement } from '../../services/interfaces';\nimport {\n hasSlotContent,\n isClient,\n isDefined,\n isEventTargetChildOfElement,\n isHTMLElement,\n isNil,\n validatePropValue,\n} from '../../shared/utils';\nimport type { TInputValidation } from '../input/bq-input.types';\n\n/*\n The Date Picker is a intuitive UI element component allows users to select dates from a visual calendar interface, providing an intuitive way to input date information.\n \n @example How to use it\n * ```html\n * <bq-date-picker\n * first-day-of-week=\"1\"\n * locale=\"en-GB\"\n * months-per-view=\"single\"\n * months=\"2\"\n * name=\"bq-date-picker\"\n * placeholder=\"Enter your date\"\n * placement=\"bottom-end\"\n * show-outside-days=\"false\"\n * type=\"range\"\n * validation-status=\"none\"\n * value=\"2024-05-25\"\n * >\n * <label class=\"flex flex-grow items-center\" slot=\"label\">\n * Date picker label\n * </label>\n * </bq-date-picker>\n * ```\n \n @documentation https://www.beeq.design/3d466e231/p/5793a9-date-picker\n * @status stable\n \n @dependency bq-button\n * @dependency bq-dropdown\n * @dependency bq-icon\n \n @attr {boolean} autofocus - If `true`, the Date picker input will be focused on component render.\n * @attr {string} clear-button-label - The clear button aria label.\n * @attr {boolean} disable-clear - If `true`, the clear button won't be displayed.\n * @attr {boolean} disabled - Indicates whether the Date picker input is disabled or not.\n * @attr {number} distance - Represents the distance (gutter or margin) between the Date picker panel and the input element.\n * @attr {0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6} first-day-of-week - The first day of the week, where Sunday is 0, Monday is 1, etc.\n * @attr {Intl.DateTimeFormatOptions} format-options - The options to use when formatting the displayed value. Details: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#using_options\n * @attr {string} form - The ID of the form that the Date picker input belongs to.\n * @attr {string} form-validation-message - The native form validation message (mandatory if `required` is set).\n * @attr {function} is-date-disallowed - A function that takes a date and returns true if the date should not be selectable.\n * @attr {Intl.LocalesArgument} locale - The locale for formatting dates. If not set, will use the browser's locale. Details: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument\n * @attr {string} max - The latest date that can be selected.\n * @attr {string} min - The earliest date that can be selected.\n * @attr {number} months - Number of months to show when range is `true`.\n * @attr {string} name - The Date picker input name.\n * @attr {boolean} open - If `true`, the Date picker panel will be visible.\n * @attr {string} panel-height - When set, it will override the height of the Date picker panel.\n * @attr {\"top\" \| \"right\" \| \"bottom\" \| \"left\" \| \"top-start\" \| \"top-end\" \| \"right-start\" \| \"right-end\" \| \"bottom-start\" \| \"bottom-end\" \| \"left-start\" \| \"left-end\"} placement - Position of the Date picker panel.\n * @attr {boolean} required - Indicates whether or not the Date picker input is required to be filled out before submitting the form.\n * @attr {number} skidding - Represents the skidding between the Date picker panel and the input element.\n * @attr {boolean} show-outside-days - Whether to show days outside the month.\n * @attr {string} strategy - Defines the strategy to position the Date picker panel.\n * @attr {string} tentative - The date that is tentatively selected, e.g. the start of a range selection.\n * @attr {\"single\" \| \"multi\" \| \"range\"} type - It defines how the calendar will behave, allowing single date selection, range selection, or multiple date selection.\n * @attr {\"error\" \| \"none\" \| \"success\" \| \"warning\"} validation-status - The validation status of the Select input.\n * @attr {string} value - The select input value represents the currently selected date or range and can be used to reset the field to a previous value.\n \n @method clear - Clears the selected value.\n \n @event bqBlur - Callback handler emitted when the input loses focus.\n * @event bqChange - Callback handler emitted when the input value has changed and the input loses focus.\n * @event bqClear - Callback handler emitted when the input value has been cleared.\n * @event bqFocus - Callback handler emitted when the input has received focus.\n \n @part base - The component's base wrapper.\n * @part button - The native HTML button used under the hood in the clear button.\n * @part calendar__button - Any button used in the calendar-month component.\n * @part calendar__button - Any button within the calendar-range component.\n * @part calendar__container - The calendar-range container for the entire component.\n * @part calendar__day - The buttons corresponding to each day in the calendar-month grid.\n * @part calendar__disabled - A button that is disabled due to min/max on the calendar-range component.\n * @part calendar__disallowed - Any day that has been disallowed via isDateDisallowed.\n * @part calendar__head - The calendar-month table's header row.\n * @part calendar__header - The calendar-range container for the heading and buttons.\n * @part calendar__heading - The calendar-month heading container that labels the month.\n * @part calendar__heading - The calendar-range heading containing the month and year.\n * @part calendar__next - The next page button on the calendar-range component.\n * @part calendar__outside - Any days which are outside the current month.\n * @part calendar__previous - The previous page button on the calendar-range component.\n * @part calendar__range-end - The day at the end of a date range.\n * @part calendar__range-inner - Any days between the start and end of a date range.\n * @part calendar__range-start - The day at the start of a date range.\n * @part calendar__selected - Any days which are selected.\n * @part calendar__table - The calendar-month <table> element.\n * @part calendar__td - The calendar-month table's body cells.\n * @part calendar__th - The calendar-month table's header cells.\n * @part calendar__today - The Today's day.\n * @part calendar__tr - Any row within the table on the calendar-month component.\n * @part calendar__week - The calendar-month table's body rows.\n * @part clear-btn - The clear button.\n * @part control - The input control wrapper.\n * @part input - The native HTML input element used under the hood.\n * @part label - The label slot container.\n * @part panel - The date picker panel container\n * @part prefix - The prefix slot container.\n * @part suffix - The suffix slot container.\n \n @cssprop --bq-date-picker--background-color - Date picker background color.\n * @cssprop --bq-date-picker--border-color - Date picker border color.\n * @cssprop --bq-date-picker--border-color-disabled - Date picker border color when disabled.\n * @cssprop --bq-date-picker--border-color-focus - Date picker border color on focus.\n * @cssprop --bq-date-picker--border-radius - Date picker border radius.\n * @cssprop --bq-date-picker--border-style - Date picker border style.\n * @cssprop --bq-date-picker--border-width - Date picker border width.\n * @cssprop --bq-date-picker--currentDate-border-color - Date picker border color for current date.\n * @cssprop --bq-date-picker--currentDate-border-width - Date picker border width for current date.\n * @cssprop --bq-date-picker--day-size - Date picker button day size.\n * @cssprop --bq-date-picker--gap - Gap between Date picker content and prefix/suffix.\n * @cssprop --bq-date-picker--icon-size - Icon size to use in prefix/suffix and clear button.\n * @cssprop --bq-date-picker--label-margin-bottom - Date picker label margin bottom.\n * @cssprop --bq-date-picker--label-text-color - Date picker label text color.\n * @cssprop --bq-date-picker--label-text-size - Date picker label text size.\n * @cssprop --bq-date-picker--padding-end - Date picker padding end.\n * @cssprop --bq-date-picker--padding-start - Date picker padding start.\n * @cssprop --bq-date-picker--paddingY - Date picker padding top and bottom.\n * @cssprop --bq-date-picker--range-background-color - Background color for the selected date range in the date picker.\n * @cssprop --bq-date-picker--range-inner-background-color - Background color for the selected dates inside the date range in the date picker.\n * @cssprop --bq-date-picker--text-color - Date picker text color.\n * @cssprop --bq-date-picker--text-placeholder-color - Date picker placeholder text color.\n * @cssprop --bq-date-picker--text-size - Date picker text size.\n /\n@Component({\n tag: 'bq-date-picker',\n styleUrl: './scss/bq-date-picker.scss',\n formAssociated: true,\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class BqDatePicker {\n // Own Properties\n // ====================\n\n private callyElem?: TCalendarDate;\n private inputElem?: HTMLInputElement;\n private isInternalUpdate = false;\n private labelElem?: HTMLElement;\n private prefixElem?: HTMLElement;\n private suffixElem?: HTMLElement;\n private fallbackInputId = 'date-picker';\n // Export parts of the calendar-month component\n private readonly COMMON_EXPORT_PARTS =\n 'calendar__heading,calendar__table,calendar__tr,calendar__head,calendar__week,calendar__th,calendar__td';\n private readonly BUTTON_EXPORT_PARTS =\n 'calendar__button,calendar__day,calendar__selected,calendar__today,calendar__disallowed,calendar__outside,calendar__range-start,calendar__range-end,calendar__range-inner';\n\n // Reference to host HTML element\n // ===================================\n\n @AttachInternals() internals: ElementInternals;\n @Element() el!: HTMLBqDatePickerElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n @State() isCallyLoaded = false;\n @State() focusedDate: string;\n @State() displayDate: string;\n @State() hasLabel = false;\n @State() hasPrefix = false;\n @State() hasRangeEnd = false;\n @State() hasSuffix = false;\n @State() hasValue = false;\n\n // Public Property API\n // ========================\n\n /* If `true`, the Date picker input will be focused on component render /\n @Prop({ reflect: true }) autofocus: boolean;\n\n /* The clear button aria label /\n @Prop({ reflect: true }) clearButtonLabel? = 'Clear value';\n\n /* If `true`, the clear button won't be displayed /\n @Prop({ reflect: true }) disableClear? = false;\n\n /\n Indicates whether the Date picker input is disabled or not.\n * If `true`, the Date picker is disabled and cannot be interacted with.\n /\n @Prop({ mutable: true }) disabled?: boolean = false;\n\n /* Represents the distance (gutter or margin) between the Date picker panel and the input element. /\n @Prop({ reflect: true }) distance?: number = 8;\n\n /* The first day of the week, where Sunday is 0, Monday is 1, etc /\n @Prop({ reflect: true }) firstDayOfWeek?: DaysOfWeek = 1;\n\n /* The options to use when formatting the displayed value.\n * Details: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#using_options\n /\n @Prop() formatOptions: Intl.DateTimeFormatOptions = {\n day: 'numeric',\n month: 'short',\n year: 'numeric',\n };\n\n /* The ID of the form that the Date picker input belongs to. /\n @Prop({ reflect: true }) form?: string;\n\n /* The native form validation message (mandatory if `required` is set) /\n @Prop({ mutable: true }) formValidationMessage?: string;\n\n /* A function that takes a date and returns true if the date should not be selectable /\n @Prop({ reflect: true }) isDateDisallowed?: (date: Date) => boolean;\n\n /* The locale for formatting dates. If not set, will use the browser's locale.\n * Details: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument\n /\n @Prop({ reflect: true }) locale: Intl.LocalesArgument = 'en-GB';\n\n /* The latest date that can be selected /\n @Prop({ reflect: true }) max?: string;\n\n /* The earliest date that can be selected /\n @Prop({ reflect: true }) min?: string;\n\n /* Number of months to show when range is `true` /\n @Prop({ reflect: true }) months: number;\n\n /\n Specifies how the next/previous buttons should navigate the calendar.\n * - single: The buttons will navigate by a single month at a time.\n * - months: The buttons will navigate by the number of months displayed per view.\n /\n @Prop({ reflect: true }) monthsPerView: 'single' \| 'months' = 'single';\n\n /* The Date picker input name. /\n @Prop({ reflect: true }) name!: string;\n\n /* If `true`, the Date picker panel will be visible. /\n @Prop({ reflect: true, mutable: true }) open?: boolean = false;\n\n /* When set, it will override the height of the Date picker panel. /\n @Prop({ reflect: true, mutable: true }) panelHeight?: string = 'auto';\n\n /* The Date picker input placeholder text value /\n @Prop({ reflect: true }) placeholder?: string;\n\n /* Position of the Date picker panel /\n @Prop({ reflect: true }) placement?: Placement = 'bottom-end';\n\n /* Indicates whether or not the Date picker input is required to be filled out before submitting the form. /\n @Prop({ reflect: true }) required?: boolean;\n\n /* Represents the skidding between the Date picker panel and the input element. /\n @Prop({ reflect: true }) skidding?: number = 0;\n\n /* Whether to show days outside the month /\n @Prop({ reflect: true }) showOutsideDays: boolean = false;\n\n /* Defines the strategy to position the Date picker panel /\n @Prop({ reflect: true }) strategy?: 'fixed' \| 'absolute' = 'fixed';\n\n /* The date that is tentatively selected e.g. the start of a range selection /\n @Prop({ reflect: true, mutable: true }) tentative?: string;\n\n /* It defines how the calendar will behave, allowing single date selection, range selection, or multiple date selection /\n @Prop({ reflect: true }) type: TDatePickerType = 'single';\n\n /\n The validation status of the Select input.\n \n @remarks\n * This property is used to indicate the validation status of the select input. It can be set to one of the following values:\n * - `'none'`: No validation status is set.\n * - `'error'`: The input has a validation error.\n * - `'warning'`: The input has a validation warning.\n * - `'success'`: The input has passed validation.\n /\n @Prop({ reflect: true }) validationStatus: TInputValidation = 'none';\n\n /* The select input value represents the currently selected date or range and can be used to reset the field to a previous value.\n * All dates are expected in ISO-8601 format (YYYY-MM-DD). /\n @Prop({ reflect: true, mutable: true }) value: string;\n\n // Prop lifecycle events\n // =======================\n\n @Watch('value')\n handleValueChange(newValue: string, oldValue: string) {\n if (newValue === oldValue) return;\n\n const { formatDisplayValue, internals, isCallyLoaded } = this;\n if (!isCallyLoaded) return;\n\n internals.setFormValue(!isNil(newValue) ? `${newValue}` : undefined);\n this.updateFormValidity();\n\n this.hasValue = isDefined(newValue);\n this.displayDate = formatDisplayValue(newValue);\n\n this.setFocusedDate();\n }\n\n @Watch('type')\n checkPropValues() {\n validatePropValue(DATE_PICKER_TYPE, 'single', this.el, 'type');\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /* Callback handler emitted when the input loses focus /\n @Event() bqBlur!: EventEmitter<HTMLBqDatePickerElement>;\n\n /\n Callback handler emitted when the input value has changed and the input loses focus.\n * This handler is called whenever the user finishes typing or pasting text into the input field and then clicks outside of the input field.\n /\n @Event() bqChange!: EventEmitter<{ value: string; el: HTMLBqDatePickerElement }>;\n\n /* Callback handler emitted when the input value has been cleared /\n @Event() bqClear!: EventEmitter<HTMLBqDatePickerElement>;\n\n /* Callback handler emitted when the input has received focus /\n @Event() bqFocus!: EventEmitter<HTMLBqDatePickerElement>;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n async componentWillLoad() {\n if (!isClient() \|\| this.isCallyLoaded) return;\n\n try {\n await loadCallyLibrary();\n this.isCallyLoaded = isCallyLibraryLoaded();\n } catch (error) {\n console.error(error);\n }\n }\n\n componentDidLoad() {\n this.handleSlotChange();\n this.handleValueChange(this.value, undefined);\n }\n\n componentDidRender() {\n if (this.isInternalUpdate) {\n this.isInternalUpdate = false;\n }\n }\n\n formAssociatedCallback() {\n this.updateFormValidity();\n }\n\n formResetCallback() {\n if (isNil(this.value)) return;\n\n this.clear();\n }\n\n // Listeners\n // ==============\n\n @Listen('bqOpen', { capture: true })\n handleOpenChange(ev: CustomEvent<{ open: boolean }>) {\n if (!isEventTargetChildOfElement(ev, this.el)) return;\n\n const { open } = ev.detail;\n if (this.open === open) return;\n\n this.open = open;\n }\n\n @Listen('click', { target: 'body', capture: true })\n handleClickOutside(ev: MouseEvent) {\n const { open, type, hasRangeEnd } = this;\n if (!open \|\| type !== 'range' \|\| ev.button !== 0) return;\n if (isEventTargetChildOfElement(ev, this.el) \|\| hasRangeEnd) return;\n\n this.tentative = undefined;\n this.hasRangeEnd = false;\n }\n\n // Public methods API\n // These methods are exposed on the host element.\n // Always use two lines.\n // Public Methods must be async.\n // Requires JSDocs for public API documentation.\n // ===============================================\n\n /\n Clears the selected value.\n \n @return {Promise<void>}\n * @memberof BqInput\n /\n @Method()\n async clear(): Promise<void> {\n if (this.disabled) return;\n\n this.value = undefined;\n this.internals.setFormValue(undefined);\n this.bqClear.emit(this.el);\n }\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n private handleBlur = () => {\n if (this.disabled) return;\n\n this.bqBlur.emit(this.el);\n };\n\n private handleFocus = () => {\n if (this.disabled) return;\n\n this.bqFocus.emit(this.el);\n };\n\n private setFocusedDate = () => {\n const { callyElem, formatFocusedDate, isCallyLoaded, value } = this;\n if (!(callyElem && isCallyLoaded)) return;\n\n const nextFocused = value ? formatFocusedDate(value) : new Date().toLocaleDateString('fr-CA');\n if (this.focusedDate === nextFocused) return;\n\n this.focusedDate = nextFocused;\n if (callyElem.focusedDate !== this.focusedDate) {\n // We need to set the focused date in the calendar component via a ref\n // because it doesn't work when passed as a prop (the Cally element does not re-render)\n callyElem.focusedDate = this.focusedDate;\n }\n };\n\n private handleChange = (ev: Event) => {\n if (this.disabled \|\| !isHTMLElement(ev.target, 'input')) return;\n\n const dateValue = new Date(ev.target.value + 'T00:00:00');\n if (!isNaN(dateValue.getTime())) {\n // We need to force the value to respect the format: yyyy-mm-dd, hence the hardcoded locale\n this.value = dateValue.toLocaleDateString('fr-CA');\n this.displayDate = this.formatDisplayValue(this.value);\n this.internals.setFormValue(`${this.value}`);\n this.bqChange.emit({ value: this.value, el: this.el });\n }\n };\n\n private handleCalendarChange = (ev: Event) => {\n if (this.isInternalUpdate) return;\n\n const shouldStayOpen = this.type === 'multi';\n const value = (ev.target as unknown as { value: string }).value;\n\n if (this.value === value) {\n this.open = shouldStayOpen;\n return;\n }\n\n this.isInternalUpdate = true;\n\n this.value = value;\n this.displayDate = this.formatDisplayValue(value);\n this.inputElem.value = this.displayDate;\n this.inputElem.focus();\n\n this.internals.setFormValue(value);\n this.bqChange.emit({ value: this.value, el: this.el });\n\n this.open = shouldStayOpen;\n };\n\n private handleCalendarRangeStart = (ev: CustomEvent) => {\n this.hasRangeEnd = false;\n this.tentative = ev.detail;\n };\n\n private handleCalendarRangeEnd = () => {\n this.hasRangeEnd = true;\n };\n\n private handleClearClick = (ev: CustomEvent) => {\n if (this.disabled) return;\n\n this.inputElem.value = '';\n this.value = this.inputElem.value;\n this.hasRangeEnd = false;\n\n this.bqClear.emit(this.el);\n this.bqChange.emit({ value: this.value, el: this.el });\n this.internals.setFormValue(undefined);\n this.inputElem.focus();\n\n ev.stopPropagation();\n };\n\n private handleSlotChange = () => {\n this.hasLabel = hasSlotContent(this.labelElem);\n this.hasPrefix = hasSlotContent(this.prefixElem);\n this.hasSuffix = hasSlotContent(this.suffixElem);\n };\n\n private generateCalendarMonth = (offset?: number, className = ''): Element \| null => {\n if (!this.isCallyLoaded) return null;\n\n return (\n <calendar-month\n offset={offset}\n class={className}\n exportparts={`${this.COMMON_EXPORT_PARTS},${this.BUTTON_EXPORT_PARTS}`}\n />\n );\n };\n\n /\n Generates an array of Elements representing the calendar months.\n \n If the type of the date picker is 'range' or 'multi' and the number of months is specified,\n * it generates an array of calendar months with the specified length. Each month will have an offset\n * and a class name based on its position in the array. The offset is used to determine the month to display,\n * and the class name is used for responsive design.\n \n If the type of the date picker is not 'range' or 'multi', or if the number of months is not specified,\n * it generates an array with a single calendar month.\n \n @returns {Element[]} An array of elements representing the calendar months.\n /\n private generateCalendarMonths = (): Element[] => {\n if (!this.isCallyLoaded) return [];\n\n if (this.type === 'range' \|\| (this.type === 'multi' && this.months)) {\n return Array.from({ length: this.months }, (_, i) => {\n const offset = i > 0 ? i : undefined;\n const className = offset ? 'hidden sm:block' : '';\n return this.generateCalendarMonth(offset, className);\n });\n }\n\n return [this.generateCalendarMonth()];\n };\n\n /\n Extracts and returns the first date part from a given string.\n * When the type of the date picker is 'range' or 'multi', the first or initial date part of the value\n * should be the focused date in the calendar.\n \n @param value - The value to be processed, can be a string.\n * @returns The extracted last date portion of the value.\n /\n private formatFocusedDate = (value: string): string \| undefined => {\n if (!value) return undefined;\n\n const dateRegex = /\\b\\d{4}-\\d{2}-\\d{2}\\b/;\n const match = dateRegex.exec(value);\n return match ? match[0] : undefined;\n };\n\n private formatDisplayValue = (value: string): string \| undefined => {\n if (!value) return undefined;\n\n const dateFormatter = new Intl.DateTimeFormat(this.locale, this.formatOptions);\n\n if (this.type === 'range') {\n const [start, end] = value.split('/').map((dateStr) => new Date(dateStr + 'T00:00:00'));\n return dateFormatter.formatRange(start, end);\n }\n\n if (this.type === 'multi') {\n const dates = value.split(' ').map((dateStr) => new Date(dateStr + 'T00:00:00'));\n return dates.map((date) => dateFormatter.format(date)).join(', ');\n }\n\n return dateFormatter.format(new Date(value + 'T00:00:00'));\n };\n\n private updateFormValidity = () => {\n const { formValidationMessage, internals, required, value, inputElem } = this;\n\n // Clear the validity state\n internals?.states.clear();\n\n if (required && (!value \|\| value.toString().trim() === '')) {\n // Set validity state to invalid\n internals?.states.add('invalid');\n internals?.setValidity(\n { valueMissing: true },\n formValidationMessage ?? 'Please, input or select a valid date',\n inputElem,\n );\n return;\n }\n\n // Set validity state to valid if textarea has value or is not required\n internals?.states.add('valid');\n internals?.setValidity({});\n };\n\n private get CalendarType() {\n const componentTypes = {\n single: 'calendar-date',\n multi: 'calendar-multi',\n range: 'calendar-range',\n } as const;\n\n // Return the corresponding component type, based on the type prop value\n return componentTypes[this.type] \|\| componentTypes.single;\n }\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n const CallyCalendar = this.CalendarType;\n const labelId = `bq-date-picker__label-${this.name \|\| this.fallbackInputId}`;\n\n return (\n <div class=\"bq-date-picker\" part=\"base\">\n {/ Label /}\n <label\n id={labelId}\n class={{ 'bq-date-picker__label': true, '!hidden': !this.hasLabel }}\n aria-label={this.name \|\| this.fallbackInputId}\n htmlFor={this.name \|\| this.fallbackInputId}\n ref={(labelElem: HTMLSpanElement) => (this.labelElem = labelElem)}\n part=\"label\"\n >\n <slot name=\"label\" onSlotchange={this.handleSlotChange} />\n </label>\n {/ Select date picker dropdown /}\n <bq-dropdown\n class=\"bq-date-picker__dropdown is-full [&::part(panel)]:p-m [&::part(panel)]:is-auto\"\n disabled={this.disabled}\n distance={this.distance}\n open={this.open}\n panelHeight={this.panelHeight}\n placement={this.placement}\n skidding={this.skidding}\n strategy={this.strategy}\n exportparts=\"panel\"\n >\n {/ Input control group /}\n <div\n class={{\n 'bq-date-picker__control': true,\n [`validation-${this.validationStatus}`]: true,\n disabled: this.disabled,\n }}\n part=\"control\"\n slot=\"trigger\"\n >\n {/ Prefix /}\n <span\n class={{ 'bq-date-picker__control--prefix': true, '!hidden': !this.hasPrefix }}\n ref={(spanElem: HTMLSpanElement) => (this.prefixElem = spanElem)}\n part=\"prefix\"\n >\n <slot name=\"prefix\" onSlotchange={this.handleSlotChange} />\n </span>\n {/ HTML Input /}\n <input\n id={this.name \|\| this.fallbackInputId}\n class=\"bq-date-picker__control--input\"\n autoComplete=\"off\"\n autoCapitalize=\"off\"\n aria-disabled={this.disabled ? 'true' : 'false'}\n aria-controls={`${this.name}`}\n aria-haspopup=\"dialog\"\n disabled={this.disabled}\n form={this.form}\n name={this.name}\n placeholder={this.placeholder}\n readonly={this.type !== 'single'}\n ref={(inputElem: HTMLInputElement) => (this.inputElem = inputElem)}\n required={this.required}\n spellcheck={false}\n type=\"text\"\n value={this.displayDate}\n part=\"input\"\n // Events\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n onChange={this.handleChange}\n />\n {/ Clear Button /}\n {this.hasValue && !this.disabled && !this.disableClear && (\n // The clear button will be visible as long as the input has a value\n // and the parent group is hovered or has focus-within\n <bq-button\n class=\"bq-date-picker__control--clear ms-[--bq-date-picker--gap] hidden\"\n appearance=\"text\"\n aria-label={this.clearButtonLabel}\n size=\"small\"\n onBqClick={this.handleClearClick}\n part=\"clear-btn\"\n exportparts=\"button\"\n >\n <slot name=\"clear-icon\">\n <bq-icon name=\"x-circle\" class=\"flex\" />\n </slot>\n </bq-button>\n )}\n {/ Suffix */}\n <span\n class=\"bq-date-picker__control--suffix\"\n ref={(spanElem: HTMLSpanElement) => (this.suffixElem = spanElem)}\n part=\"suffix\"\n >\n <slot name=\"suffix\" onSlotchange={this.handleSlotChange}>\n <bq-icon name=\"calendar-blank\" class=\"flex\" />\n </slot>\n </span>\n </div>\n {this.isCallyLoaded && (\n <CallyCalendar\n isDateDisallowed={this.isDateDisallowed}\n locale={this.locale as string}\n value={this.value}\n min={this.min}\n max={this.max}\n months={this.months}\n tentative={this.tentative}\n pageBy={this.monthsPerView}\n firstDayOfWeek={this.firstDayOfWeek}\n showOutsideDays={this.showOutsideDays}\n onChange={this.handleCalendarChange}\n onRangestart={this.handleCalendarRangeStart}\n onRangeend={this.handleCalendarRangeEnd}\n exportparts=\"container:calendar__container,header:calendar__header,button:calendar__button,previous:calendar__previous,next:calendar__next,disabled:calendar__disabled,heading:calendar__heading\"\n ref={(elem: TCalendarDate) => (this.callyElem = elem)}\n >\n <bq-icon color=\"text--primary\" slot=\"previous\" name=\"caret-left\" label=\"Previous\" />\n <bq-icon color=\"text--primary\" slot=\"next\" name=\"caret-right\" label=\"Next\" />\n\n <div class=\"flex flex-wrap justify-center gap-[--bq-spacing-m]\">{this.generateCalendarMonths()}</div>\n </CallyCalendar>\n )}\n </bq-dropdown>\n </div>\n );\n }\n}\n"]}