@beeq/core 1.11.2 → 1.12.0

package/dist/collection/components/card/bq-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"bq-card.js","sourceRoot":"","sources":["../../../../../../packages/beeq/src/components/card/bq-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEzE,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEvD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AAMH,MAAM,OAAO,MAAM;IACjB,iBAAiB;IACjB,uBAAuB;IAEvB,iCAAiC;IACjC,sCAAsC;IAE3B,EAAE,CAAqB;IAElC,oBAAoB;IACpB,wCAAwC;IACxC,0CAA0C;IAE1C,sBAAsB;IACtB,2BAA2B;IAE3B,6BAA6B;IACJ,IAAI,GAAc,SAAS,CAAC;IAErD,8CAA8C;IACrB,MAAM,GAAsB,GAAG,CAAC;IAEzD,wBAAwB;IACxB,0BAA0B;IAG1B,cAAc;QACZ,iBAAiB,CAAC,SAAS,EAAE,SAAS,EAAE,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,CAAC;IAC3D,CAAC;IAED,iBAAiB;IACjB,+CAA+C;IAC/C,iDAAiD;IAEjD,6BAA6B;IAC7B,sCAAsC;IACtC,wCAAwC;IAExC,iBAAiB;QACf,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAED,YAAY;IACZ,iBAAiB;IAEjB,qBAAqB;IACrB,iDAAiD;IACjD,wBAAwB;IACxB,gCAAgC;IAChC,gDAAgD;IAChD,kDAAkD;IAElD,gBAAgB;IAChB,2BAA2B;IAC3B,wDAAwD;IACxD,0DAA0D;IAE1D,oBAAoB;IACpB,oCAAoC;IACpC,sCAAsC;IAEtC,MAAM;QACJ,MAAM,KAAK,GAAG;YACZ,GAAG,CAAC,IAAI,CAAC,MAAM,IAAI,EAAE,yBAAyB,EAAE,oBAAoB,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;SACtF,CAAC;QACF,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,KAAK;YAChB,4DACE,KAAK,EAAE;oBACL,mJAAmJ,EAAE,IAAI;oBACzJ,mDAAmD,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;oBAC5E,uCAAuC;oBACvC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;iBACvC,EACD,IAAI,EAAC,SAAS;gBAEd,8DAAQ,CACJ,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, h, Prop, Watch } from '@stencil/core';\n\nimport { validatePropValue } from '../../shared/utils';\nimport type { TCardBorderRadius, TCardType } from './bq-card.types';\nimport { CARD_TYPE } from './bq-card.types';\n\n/**\n * The Card component serves as a versatile container designed for flexible content presentation within user interfaces.\n * Its structure accommodates various styles, allowing users to customize and adapt it according to their design preferences.\n *\n * @example How to use it\n * ```html\n * <bq-card type=\"default\" border=\"m\">\n *   <div class=\"p-m\">\n *     <h3 class=\"text-xl font-bold\">Card Title</h3>\n *     <p class=\"text-m\">Card content goes here</p>\n *   </div>\n * </bq-card>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/522abb-card\n * @status stable\n *\n * @attr {\"default\" | \"minimal\"} type - Type of card component\n * @attr {\"none\" | \"xs2\" | \"xs\" | \"s\" | \"m\" | \"l\" | \"full\"} border - The corner radius of the card component\n *\n * @slot - The content of the card component\n *\n * @part wrapper - The wrapper container `<div>` of the element inside the shadow DOM\n *\n * @cssprop --bq-card--borderColor - Card border color\n * @cssprop --bq-card--borderRadius - Card border radius\n * @cssprop --bq-card--borderStyle - Card border style\n * @cssprop --bq-card--borderWidth - Card border width\n *\n * @cssprop --bq-card--padding - Card padding\n * @cssprop --bq-card--paddingMinimal - Minimal card padding\n * @cssprop --bq-card--background - Card background color\n */\n@Component({\n  tag: 'bq-card',\n  styleUrl: './scss/bq-card.scss',\n  shadow: true,\n})\nexport class BqCard {\n  // Own Properties\n  // ====================\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqCardElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  // Public Property API\n  // ========================\n\n  /** Type of card component */\n  @Prop({ reflect: true }) type: TCardType = 'default';\n\n  /** The corner radius of the card component */\n  @Prop({ reflect: true }) border: TCardBorderRadius = 'm';\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('type')\n  checkPropValue() {\n    validatePropValue(CARD_TYPE, 'default', this.el, 'type');\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentWillLoad() {\n    this.checkPropValue();\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  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    const style = {\n      ...(this.border && { '--bq-card--borderRadius': `var(--bq-radius--${this.border})` }),\n    };\n    return (\n      <Host style={style}>\n        <div\n          class={{\n            'bq-card rounded-[--bq-card--borderRadius] border-[color:--bq-card--borderColor] border-[length:--bq-card--borderWidth] bg-[--bq-card--background]': true,\n            'p-b-[--bq-card--padding] p-i-[--bq-card--padding]': this.type === 'default',\n            // Remove padding for minimal card type\n            'p-b-0 p-i-0': this.type === 'minimal',\n          }}\n          part=\"wrapper\"\n        >\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"bq-card.js","sourceRoot":"","sources":["../../../../../../packages/beeq/src/components/card/bq-card.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEvD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AAMH,MAAM,OAAO,MAAM;IACjB,iBAAiB;IACjB,uBAAuB;IAEvB,iCAAiC;IACjC,sCAAsC;IAE3B,EAAE,CAAqB;IAElC,oBAAoB;IACpB,wCAAwC;IACxC,0CAA0C;IAE1C,sBAAsB;IACtB,2BAA2B;IAE3B,6BAA6B;IACJ,IAAI,GAAc,SAAS,CAAC;IAErD,8CAA8C;IACrB,MAAM,GAAsB,GAAG,CAAC;IAEzD,wBAAwB;IACxB,0BAA0B;IAG1B,cAAc;QACZ,iBAAiB,CAAC,SAAS,EAAE,SAAS,EAAE,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,CAAC;IAC3D,CAAC;IAED,iBAAiB;IACjB,+CAA+C;IAC/C,iDAAiD;IAEjD,6BAA6B;IAC7B,sCAAsC;IACtC,wCAAwC;IAExC,iBAAiB;QACf,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAED,YAAY;IACZ,iBAAiB;IAEjB,qBAAqB;IACrB,iDAAiD;IACjD,wBAAwB;IACxB,gCAAgC;IAChC,gDAAgD;IAChD,kDAAkD;IAElD,gBAAgB;IAChB,2BAA2B;IAC3B,wDAAwD;IACxD,0DAA0D;IAE1D,oBAAoB;IACpB,oCAAoC;IACpC,sCAAsC;IAEtC,MAAM;QACJ,MAAM,KAAK,GAAG;YACZ,GAAG,CAAC,IAAI,CAAC,MAAM,IAAI,EAAE,yBAAyB,EAAE,oBAAoB,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;SACtF,CAAC;QACF,OAAO,CACL,KAAC,IAAI,IAAC,KAAK,EAAE,KAAK,YAChB,cACE,KAAK,EAAE;oBACL,mJAAmJ,EAAE,IAAI;oBACzJ,mDAAmD,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;oBAC5E,uCAAuC;oBACvC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;iBACvC,EACD,IAAI,EAAC,SAAS,YAEd,4DAAQ,+CACJ,+CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, Prop, Watch } from '@stencil/core';\n\nimport { validatePropValue } from '../../shared/utils';\nimport type { TCardBorderRadius, TCardType } from './bq-card.types';\nimport { CARD_TYPE } from './bq-card.types';\n\n/**\n * The Card component serves as a versatile container designed for flexible content presentation within user interfaces.\n * Its structure accommodates various styles, allowing users to customize and adapt it according to their design preferences.\n *\n * @example How to use it\n * ```html\n * <bq-card type=\"default\" border=\"m\">\n *   <div class=\"p-m\">\n *     <h3 class=\"text-xl font-bold\">Card Title</h3>\n *     <p class=\"text-m\">Card content goes here</p>\n *   </div>\n * </bq-card>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/522abb-card\n * @status stable\n *\n * @attr {\"default\" | \"minimal\"} type - Type of card component\n * @attr {\"none\" | \"xs2\" | \"xs\" | \"s\" | \"m\" | \"l\" | \"full\"} border - The corner radius of the card component\n *\n * @slot - The content of the card component\n *\n * @part wrapper - The wrapper container `<div>` of the element inside the shadow DOM\n *\n * @cssprop --bq-card--borderColor - Card border color\n * @cssprop --bq-card--borderRadius - Card border radius\n * @cssprop --bq-card--borderStyle - Card border style\n * @cssprop --bq-card--borderWidth - Card border width\n *\n * @cssprop --bq-card--padding - Card padding\n * @cssprop --bq-card--paddingMinimal - Minimal card padding\n * @cssprop --bq-card--background - Card background color\n */\n@Component({\n  tag: 'bq-card',\n  styleUrl: './scss/bq-card.scss',\n  shadow: true,\n})\nexport class BqCard {\n  // Own Properties\n  // ====================\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqCardElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  // Public Property API\n  // ========================\n\n  /** Type of card component */\n  @Prop({ reflect: true }) type: TCardType = 'default';\n\n  /** The corner radius of the card component */\n  @Prop({ reflect: true }) border: TCardBorderRadius = 'm';\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('type')\n  checkPropValue() {\n    validatePropValue(CARD_TYPE, 'default', this.el, 'type');\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentWillLoad() {\n    this.checkPropValue();\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  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    const style = {\n      ...(this.border && { '--bq-card--borderRadius': `var(--bq-radius--${this.border})` }),\n    };\n    return (\n      <Host style={style}>\n        <div\n          class={{\n            'bq-card rounded-[--bq-card--borderRadius] border-[color:--bq-card--borderColor] border-[length:--bq-card--borderWidth] bg-[--bq-card--background]': true,\n            'p-b-[--bq-card--padding] p-i-[--bq-card--padding]': this.type === 'default',\n            // Remove padding for minimal card type\n            'p-b-0 p-i-0': this.type === 'minimal',\n          }}\n          part=\"wrapper\"\n        >\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/checkbox/bq-checkbox.js

@@ -2,7 +2,7 @@
  * Built by Endavans
  * © https://beeq.design - Apache 2 License.
  */
-import { h } from "@stencil/core";
+import { jsx as _jsx, jsxs as _jsxs } from "@stencil/core/jsx-runtime";
 import { isNil } from "../../shared/utils";
 /**
  * The checkbox is a UI component that allows users to select one or more options from a list of choices.
@@ -203,15 +203,15 @@ export class BqCheckbox {
     // Always the last one in the class.
     // ===================================
     render() {
-        return (h("label", { key: 'ac095d204487e115cb1d11cf63f5688dc30be6ba', "aria-label": this.name || 'checkbox', class: {
+        return (_jsxs("label", { "aria-label": this.name || 'checkbox', class: {
                 'bq-checkbox group': true,
                 'is-checked': this.checked,
                 'is-indeterminate': this.indeterminate,
                 'is-disabled !cursor-not-allowed': this.disabled,
                 'has-background': this.backgroundOnHover,
-            }, part: "base" }, h("div", { key: '2de34c0b5f1d2d67df7a10d3825bdfbd000cf9d3', class: "bq-checkbox__control bs-[--bq-checkbox--size] is-[--bq-checkbox--size] relative box-border flex items-center justify-center p-b-xs3 p-i-xs3", part: "control" }, h("input", { key: 'eedf7c8931a93a33fea19a7472cd199c7198732a', "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', checked: this.checked, class: "bq-checkbox__input pointer-events-none absolute m-b-0 m-i-0 p-b-0 p-i-0 opacity-0", disabled: this.disabled, form: this.formId, indeterminate: this.indeterminate, name: !isNil(this.name) ? this.name : undefined, onBlur: this.handleOnBlur, onChange: this.handleChange, onFocus: this.handleOnFocus, part: "input", ref: (input) => {
-                this.inputElem = input;
-            }, required: this.required, tabindex: "0", type: "checkbox", value: this.value }), h("span", { key: '6316510ffdb21d195f8ed0aa7ae46e02c5746266', class: "bq-checkbox__checkbox bs-full is-[--bq-checkbox--size] relative box-border flex items-center justify-center", part: "checkbox" }, this.checked && (h("svg", { key: '11dfd11d0cac62b824169cf8312222348c5bd39c', "aria-hidden": "true", class: "bs-full is-full absolute text-neutral-white", viewBox: "0 0 256 256", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '0de7ed79d17f4a26356ad4cd4e61a4a8c573f9da', d: "M0 0h256v256H0z", fill: "none" }), h("path", { key: 'b74ec0b4fded0752a4d494ed264c30beb97026e3', d: "M216 72 104 184l-56-56", fill: "none", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "32" }))), !this.checked && this.indeterminate && (h("svg", { key: '5eb4937e2654ce5d87521303d1d21583c31c3394', "aria-hidden": "true", class: "bs-full is-full absolute text-neutral-white", fill: "currentColor", viewBox: "0 0 256 256", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'a2205d8f2d4212c6c06590ea9cf1e3c7f9d72f6a', d: "M0 0h256v256H0z", fill: "none" }), h("path", { key: '1001683358e518ca20ffdd0fe18a276452a2f69f', d: "M40 128h176", fill: "none", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "32" }))))), h("span", { key: '0735d4ebff84e967c511f23ea3c4700217b0e37a', class: "bq-checkbox__label ps-xs text-start font-medium text-primary leading-regular group-hover-[&:not(.is-disabled)]:text-hover-primary group-[.is-disabled]:opacity-60", part: "label" }, h("slot", { key: 'a212b9b8b092b87a537575048156c5cd590e5976' }))));
+            }, part: "base", children: [_jsxs("div", { class: "bq-checkbox__control bs-[--bq-checkbox--size] is-[--bq-checkbox--size] relative box-border flex items-center justify-center p-b-xs3 p-i-xs3", part: "control", children: [_jsx("input", { "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', checked: this.checked, class: "bq-checkbox__input pointer-events-none absolute m-b-0 m-i-0 p-b-0 p-i-0 opacity-0", disabled: this.disabled, form: this.formId, indeterminate: this.indeterminate, name: !isNil(this.name) ? this.name : undefined, onBlur: this.handleOnBlur, onChange: this.handleChange, onFocus: this.handleOnFocus, part: "input", ref: (input) => {
+                                this.inputElem = input;
+                            }, required: this.required, tabindex: "0", type: "checkbox", value: this.value }, '82705831b212ce4295abf361b33778096b1830d0'), _jsxs("span", { class: "bq-checkbox__checkbox bs-full is-[--bq-checkbox--size] relative box-border flex items-center justify-center", part: "checkbox", children: [this.checked && (_jsxs("svg", { "aria-hidden": "true", class: "bs-full is-full absolute text-neutral-white", viewBox: "0 0 256 256", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M0 0h256v256H0z", fill: "none" }, 'b9639c45ba423f57e3d52ffcc139f7806cd16a4c'), _jsx("path", { d: "M216 72 104 184l-56-56", fill: "none", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "32" }, '0e870063a942e07968558c4c6217ba5e5e4cb07e')] }, '7eec03aadbeaf92e76cad339ef8b71d7a7202cf2')), !this.checked && this.indeterminate && (_jsxs("svg", { "aria-hidden": "true", class: "bs-full is-full absolute text-neutral-white", fill: "currentColor", viewBox: "0 0 256 256", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M0 0h256v256H0z", fill: "none" }, '4b0cf7e0dcf552aa21c9778eee796de3f4927916'), _jsx("path", { d: "M40 128h176", fill: "none", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "32" }, 'bfc9017dd7d5c89b68f292dcc91501b072f8374b')] }, '65ad79b2823f8a4a20459687fab6e1462943e013'))] }, '49f2681d3ac70f03a2f3b12f0404cb7d0e8f842e')] }, '8a6ccdc8d6386f308467c816351c5fbdc1ff3ec5'), _jsx("span", { class: "bq-checkbox__label ps-xs text-start font-medium text-primary leading-regular group-hover-[&:not(.is-disabled)]:text-hover-primary group-[.is-disabled]:opacity-60", part: "label", children: _jsx("slot", {}, '91709a8ae5aca9ea6b9db45d13eec7664961bb5d') }, 'a52dfe3e8800c3988a0af094a853396ee37d4167')] }, '5bac9ae4cab3a640fc43608f5e6a78f3a14f359f'));
     }
     static get is() { return "bq-checkbox"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/checkbox/bq-checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"bq-checkbox.js","sourceRoot":"","sources":["../../../../../../packages/beeq/src/components/checkbox/bq-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { EventEmitter } from '@stencil/core';\nimport { AttachInternals, Component, Element, Event, h, Method, Prop, Watch } from '@stencil/core';\n\nimport { isNil } from '../../shared/utils';\n\n/**\n * The checkbox is a UI component that allows users to select one or more options from a list of choices.\n * It is commonly used in forms, surveys, and settings pages.\n *\n * @example How to use it\n * ```html\n * <bq-checkbox name=\"bq-checkbox\" value=\"checkbox-value\" background-on-hover>\n *   Checkbox label\n * </bq-checkbox>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/431f17-checkbox\n * @status stable\n *\n * @attr {boolean} background-on-hover - If true checkbox displays background on hover\n * @attr {string} form-id - The form ID that the checkbox is associated with\n * @attr {string} form-validation-message - The native form validation message\n * @attr {boolean} checked - If true checkbox is checked\n * @attr {boolean} disabled - If true checkbox is disabled\n * @attr {boolean} indeterminate - A state that is neither checked nor unchecked\n * @attr {string} name - Name of the HTML input form control. Submitted with the form as part of a name/value pair\n * @attr {boolean} required - If `true`, it will indicate that the user must specify a value for the checkbox before the owning form can be submitted\n * @attr {string} value - A string representing the value of the checkbox. Primarily used to differentiate a list of related checkboxes that have the same name\n *\n * @method vClick - Simulate a click event on the native `<input>` HTML element used under the hood\n * @method vFocus - Sets focus on the native `<input>` HTML element used under the hood\n * @method vBlur - Remove focus from the native `<input>` HTML element used under the hood\n *\n * @event bqChange - Handler to be called when the checkbox state changes\n * @event bqFocus - Handler to be called when the checkbox gets focus\n * @event bqBlur - Handler to be called when the checkbox loses focus\n *\n * @slot - The content of the checkbox component\n *\n * @part base - The component's internal wrapper of the checkbox component.\n * @part control - The container `<div>` element that holds the custom checkbox.\n * @part input - The native HTML `<input type=\"checkbox\">` used under the hood.\n * @part checkbox - The `<span>` element that renders the custom checked/indeterminate state.\n * @part label - The `<span>` element that holds the text content.\n *\n * @cssprop --bq-checkbox--size - Checkbox size\n * @cssprop --bq-checkbox--border-radius - Checkbox border radius\n * @cssprop --bq-checkbox--border-width - Checkbox border width\n */\n@Component({\n  tag: 'bq-checkbox',\n  styleUrl: './scss/bq-checkbox.scss',\n  formAssociated: true,\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class BqCheckbox {\n  // Own Properties\n  // ====================\n\n  private inputElem: HTMLInputElement;\n  private prevCheckedValue: boolean;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqCheckboxElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  // Public Property API\n  // ========================\n\n  /** If true checkbox displays background on hover */\n  @Prop({ reflect: true }) backgroundOnHover? = false;\n\n  /** The form ID that the checkbox is associated with */\n  @Prop({ reflect: true }) formId?: string;\n\n  /** The native form validation message */\n  @Prop({ mutable: true }) formValidationMessage?: string;\n\n  /** If true checkbox is checked */\n  @Prop({ reflect: true, mutable: true }) checked?: boolean;\n\n  /** If true checkbox is disabled */\n  @Prop({ reflect: true }) disabled? = false;\n\n  /** A state that is neither checked nor unchecked */\n  @Prop({ reflect: true, mutable: true }) indeterminate? = false;\n\n  /** Name of the HTML input form control. Submitted with the form as part of a name/value pair.  */\n  @Prop({ reflect: true }) name!: string;\n\n  /** If `true`, it will indicate that the user must specify a value for the checkbox before the owning form can be submitted */\n  @Prop({ reflect: true }) required?: boolean;\n\n  /** A string representing the value of the checkbox. Primarily used to differentiate a list of related checkboxes that have the same name.  */\n  @Prop({ reflect: true }) value!: string;\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('indeterminate')\n  handleIndeterminatePropChange() {\n    if (!this.inputElem) return;\n\n    this.inputElem.indeterminate = this.indeterminate;\n    if (this.indeterminate) {\n      this.checked = false;\n    }\n  }\n\n  @Watch('required')\n  handleRequiredPropChange() {\n    this.updateFormValidity();\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Handler to be called when the checkbox state changes */\n  @Event() bqChange: EventEmitter<{ checked: boolean }>;\n\n  /** Handler to be called when the checkbox gets focus */\n  @Event() bqFocus: EventEmitter<HTMLBqCheckboxElement>;\n\n  /** Handler to be called when the checkbox loses focus */\n  @Event() bqBlur: EventEmitter<HTMLBqCheckboxElement>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentWillLoad() {\n    this.prevCheckedValue = this.checked;\n  }\n\n  componentDidUpdate() {\n    /**\n     * We need to trigger the `bqChange` immediately after the first update happens\n     * so the checked attribute get applied, otherwise, a delay will happen\n     * between the event emits and when the checked attribute value gets reflected in the element host.\n     */\n    if (this.checked !== this.prevCheckedValue) {\n      if (!this.indeterminate) {\n        this.bqChange.emit({ checked: this.checked });\n      }\n      this.prevCheckedValue = this.checked;\n    }\n  }\n\n  formAssociatedCallback() {\n    this.setFormValue(this.checked);\n    this.updateFormValidity();\n  }\n\n  formResetCallback() {\n    // Reset the form value and validity state\n    this.checked = false;\n    this.indeterminate = false;\n    this.inputElem.removeAttribute('checked');\n    this.internals?.setFormValue(undefined);\n    this.updateFormValidity();\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  /**\n   * Simulate a click event on the native `<input>` HTML element used under the hood.\n   * Use this method instead of the global `element.click()`.\n   */\n  @Method()\n  async vClick() {\n    this.inputElem?.click();\n  }\n\n  /**\n   * Sets focus on the native `<input>` HTML element used under the hood.\n   * Use this method instead of the global `element.focus()`.\n   */\n  @Method()\n  async vFocus() {\n    this.inputElem?.focus();\n  }\n\n  /**\n   * Remove focus from the native `<input>` HTML element used under the hood.\n   * Use this method instead of the global `element.blur()`.\n   */\n  @Method()\n  async vBlur() {\n    this.inputElem?.blur();\n  }\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private setFormValue = (checked: boolean) => {\n    const value = checked ? 'on' : undefined;\n    // Set form value based on the checked state\n    // Here we also pass the state of the checkbox (2nd argument) as the state of the form control\n    // Details: https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/setFormValue\n    this.internals?.setFormValue(value, `${this.checked}`);\n  };\n\n  private updateFormValidity = () => {\n    const { formValidationMessage, internals, required, checked, inputElem } = this;\n    // Clear the validity state\n    internals?.states.clear();\n\n    if (!(required && !checked)) {\n      // If the checkbox is not required or is checked, set the validity state to valid\n      internals?.states.add('valid');\n      internals?.setValidity({});\n      return;\n    }\n\n    // Set validity state based on the required property and checked state\n    internals?.states.add('invalid');\n    internals?.setValidity({ valueMissing: true }, formValidationMessage, inputElem);\n  };\n\n  private handleChange = () => {\n    this.checked = !this.checked;\n    this.indeterminate = false;\n\n    this.setFormValue(this.checked);\n    this.updateFormValidity();\n  };\n\n  private handleOnFocus = () => {\n    this.bqFocus.emit(this.el);\n  };\n\n  private handleOnBlur = () => {\n    this.bqBlur.emit(this.el);\n  };\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <label\n        aria-label={this.name || 'checkbox'}\n        class={{\n          'bq-checkbox group': true,\n          'is-checked': this.checked,\n          'is-indeterminate': this.indeterminate,\n          'is-disabled !cursor-not-allowed': this.disabled,\n          'has-background': this.backgroundOnHover,\n        }}\n        part=\"base\"\n      >\n        <div\n          class=\"bq-checkbox__control bs-[--bq-checkbox--size] is-[--bq-checkbox--size] relative box-border flex items-center justify-center p-b-xs3 p-i-xs3\"\n          part=\"control\"\n        >\n          <input\n            aria-checked={this.checked ? 'true' : 'false'}\n            aria-disabled={this.disabled ? 'true' : 'false'}\n            checked={this.checked}\n            class=\"bq-checkbox__input pointer-events-none absolute m-b-0 m-i-0 p-b-0 p-i-0 opacity-0\"\n            disabled={this.disabled}\n            form={this.formId}\n            indeterminate={this.indeterminate}\n            name={!isNil(this.name) ? this.name : undefined}\n            onBlur={this.handleOnBlur}\n            onChange={this.handleChange}\n            onFocus={this.handleOnFocus}\n            part=\"input\"\n            ref={(input: HTMLInputElement) => {\n              this.inputElem = input;\n            }}\n            required={this.required}\n            tabindex=\"0\"\n            type=\"checkbox\"\n            value={this.value}\n          />\n          <span\n            class=\"bq-checkbox__checkbox bs-full is-[--bq-checkbox--size] relative box-border flex items-center justify-center\"\n            part=\"checkbox\"\n          >\n            {/*\n              We could move these SVGs to separated functional components, but it seems there's a weird issue with\n              Stencil and pure SVG components: https://stencil-worldwide.slack.com/archives/C79EANFL7/p1663779385026389\n             */}\n            {this.checked && (\n              <svg\n                aria-hidden=\"true\"\n                class=\"bs-full is-full absolute text-neutral-white\"\n                viewBox=\"0 0 256 256\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path d=\"M0 0h256v256H0z\" fill=\"none\" />\n                <path\n                  d=\"M216 72 104 184l-56-56\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"32\"\n                />\n              </svg>\n            )}\n            {!this.checked && this.indeterminate && (\n              <svg\n                aria-hidden=\"true\"\n                class=\"bs-full is-full absolute text-neutral-white\"\n                fill=\"currentColor\"\n                viewBox=\"0 0 256 256\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path d=\"M0 0h256v256H0z\" fill=\"none\" />\n                <path\n                  d=\"M40 128h176\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"32\"\n                />\n              </svg>\n            )}\n          </span>\n        </div>\n        <span\n          class=\"bq-checkbox__label ps-xs text-start font-medium text-primary leading-regular group-hover-[&:not(.is-disabled)]:text-hover-primary group-[.is-disabled]:opacity-60\"\n          part=\"label\"\n        >\n          <slot />\n        </span>\n      </label>\n    );\n  }\n}\n"]}
+{"version":3,"file":"bq-checkbox.js","sourceRoot":"","sources":["../../../../../../packages/beeq/src/components/checkbox/bq-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { EventEmitter } from '@stencil/core';\nimport { AttachInternals, Component, Element, Event, Method, Prop, Watch } from '@stencil/core';\n\nimport { isNil } from '../../shared/utils';\n\n/**\n * The checkbox is a UI component that allows users to select one or more options from a list of choices.\n * It is commonly used in forms, surveys, and settings pages.\n *\n * @example How to use it\n * ```html\n * <bq-checkbox name=\"bq-checkbox\" value=\"checkbox-value\" background-on-hover>\n *   Checkbox label\n * </bq-checkbox>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/431f17-checkbox\n * @status stable\n *\n * @attr {boolean} background-on-hover - If true checkbox displays background on hover\n * @attr {string} form-id - The form ID that the checkbox is associated with\n * @attr {string} form-validation-message - The native form validation message\n * @attr {boolean} checked - If true checkbox is checked\n * @attr {boolean} disabled - If true checkbox is disabled\n * @attr {boolean} indeterminate - A state that is neither checked nor unchecked\n * @attr {string} name - Name of the HTML input form control. Submitted with the form as part of a name/value pair\n * @attr {boolean} required - If `true`, it will indicate that the user must specify a value for the checkbox before the owning form can be submitted\n * @attr {string} value - A string representing the value of the checkbox. Primarily used to differentiate a list of related checkboxes that have the same name\n *\n * @method vClick - Simulate a click event on the native `<input>` HTML element used under the hood\n * @method vFocus - Sets focus on the native `<input>` HTML element used under the hood\n * @method vBlur - Remove focus from the native `<input>` HTML element used under the hood\n *\n * @event bqChange - Handler to be called when the checkbox state changes\n * @event bqFocus - Handler to be called when the checkbox gets focus\n * @event bqBlur - Handler to be called when the checkbox loses focus\n *\n * @slot - The content of the checkbox component\n *\n * @part base - The component's internal wrapper of the checkbox component.\n * @part control - The container `<div>` element that holds the custom checkbox.\n * @part input - The native HTML `<input type=\"checkbox\">` used under the hood.\n * @part checkbox - The `<span>` element that renders the custom checked/indeterminate state.\n * @part label - The `<span>` element that holds the text content.\n *\n * @cssprop --bq-checkbox--size - Checkbox size\n * @cssprop --bq-checkbox--border-radius - Checkbox border radius\n * @cssprop --bq-checkbox--border-width - Checkbox border width\n */\n@Component({\n  tag: 'bq-checkbox',\n  styleUrl: './scss/bq-checkbox.scss',\n  formAssociated: true,\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class BqCheckbox {\n  // Own Properties\n  // ====================\n\n  private inputElem: HTMLInputElement;\n  private prevCheckedValue: boolean;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqCheckboxElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  // Public Property API\n  // ========================\n\n  /** If true checkbox displays background on hover */\n  @Prop({ reflect: true }) backgroundOnHover? = false;\n\n  /** The form ID that the checkbox is associated with */\n  @Prop({ reflect: true }) formId?: string;\n\n  /** The native form validation message */\n  @Prop({ mutable: true }) formValidationMessage?: string;\n\n  /** If true checkbox is checked */\n  @Prop({ reflect: true, mutable: true }) checked?: boolean;\n\n  /** If true checkbox is disabled */\n  @Prop({ reflect: true }) disabled? = false;\n\n  /** A state that is neither checked nor unchecked */\n  @Prop({ reflect: true, mutable: true }) indeterminate? = false;\n\n  /** Name of the HTML input form control. Submitted with the form as part of a name/value pair.  */\n  @Prop({ reflect: true }) name!: string;\n\n  /** If `true`, it will indicate that the user must specify a value for the checkbox before the owning form can be submitted */\n  @Prop({ reflect: true }) required?: boolean;\n\n  /** A string representing the value of the checkbox. Primarily used to differentiate a list of related checkboxes that have the same name.  */\n  @Prop({ reflect: true }) value!: string;\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('indeterminate')\n  handleIndeterminatePropChange() {\n    if (!this.inputElem) return;\n\n    this.inputElem.indeterminate = this.indeterminate;\n    if (this.indeterminate) {\n      this.checked = false;\n    }\n  }\n\n  @Watch('required')\n  handleRequiredPropChange() {\n    this.updateFormValidity();\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Handler to be called when the checkbox state changes */\n  @Event() bqChange: EventEmitter<{ checked: boolean }>;\n\n  /** Handler to be called when the checkbox gets focus */\n  @Event() bqFocus: EventEmitter<HTMLBqCheckboxElement>;\n\n  /** Handler to be called when the checkbox loses focus */\n  @Event() bqBlur: EventEmitter<HTMLBqCheckboxElement>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentWillLoad() {\n    this.prevCheckedValue = this.checked;\n  }\n\n  componentDidUpdate() {\n    /**\n     * We need to trigger the `bqChange` immediately after the first update happens\n     * so the checked attribute get applied, otherwise, a delay will happen\n     * between the event emits and when the checked attribute value gets reflected in the element host.\n     */\n    if (this.checked !== this.prevCheckedValue) {\n      if (!this.indeterminate) {\n        this.bqChange.emit({ checked: this.checked });\n      }\n      this.prevCheckedValue = this.checked;\n    }\n  }\n\n  formAssociatedCallback() {\n    this.setFormValue(this.checked);\n    this.updateFormValidity();\n  }\n\n  formResetCallback() {\n    // Reset the form value and validity state\n    this.checked = false;\n    this.indeterminate = false;\n    this.inputElem.removeAttribute('checked');\n    this.internals?.setFormValue(undefined);\n    this.updateFormValidity();\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  /**\n   * Simulate a click event on the native `<input>` HTML element used under the hood.\n   * Use this method instead of the global `element.click()`.\n   */\n  @Method()\n  async vClick() {\n    this.inputElem?.click();\n  }\n\n  /**\n   * Sets focus on the native `<input>` HTML element used under the hood.\n   * Use this method instead of the global `element.focus()`.\n   */\n  @Method()\n  async vFocus() {\n    this.inputElem?.focus();\n  }\n\n  /**\n   * Remove focus from the native `<input>` HTML element used under the hood.\n   * Use this method instead of the global `element.blur()`.\n   */\n  @Method()\n  async vBlur() {\n    this.inputElem?.blur();\n  }\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private setFormValue = (checked: boolean) => {\n    const value = checked ? 'on' : undefined;\n    // Set form value based on the checked state\n    // Here we also pass the state of the checkbox (2nd argument) as the state of the form control\n    // Details: https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/setFormValue\n    this.internals?.setFormValue(value, `${this.checked}`);\n  };\n\n  private updateFormValidity = () => {\n    const { formValidationMessage, internals, required, checked, inputElem } = this;\n    // Clear the validity state\n    internals?.states.clear();\n\n    if (!(required && !checked)) {\n      // If the checkbox is not required or is checked, set the validity state to valid\n      internals?.states.add('valid');\n      internals?.setValidity({});\n      return;\n    }\n\n    // Set validity state based on the required property and checked state\n    internals?.states.add('invalid');\n    internals?.setValidity({ valueMissing: true }, formValidationMessage, inputElem);\n  };\n\n  private handleChange = () => {\n    this.checked = !this.checked;\n    this.indeterminate = false;\n\n    this.setFormValue(this.checked);\n    this.updateFormValidity();\n  };\n\n  private handleOnFocus = () => {\n    this.bqFocus.emit(this.el);\n  };\n\n  private handleOnBlur = () => {\n    this.bqBlur.emit(this.el);\n  };\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <label\n        aria-label={this.name || 'checkbox'}\n        class={{\n          'bq-checkbox group': true,\n          'is-checked': this.checked,\n          'is-indeterminate': this.indeterminate,\n          'is-disabled !cursor-not-allowed': this.disabled,\n          'has-background': this.backgroundOnHover,\n        }}\n        part=\"base\"\n      >\n        <div\n          class=\"bq-checkbox__control bs-[--bq-checkbox--size] is-[--bq-checkbox--size] relative box-border flex items-center justify-center p-b-xs3 p-i-xs3\"\n          part=\"control\"\n        >\n          <input\n            aria-checked={this.checked ? 'true' : 'false'}\n            aria-disabled={this.disabled ? 'true' : 'false'}\n            checked={this.checked}\n            class=\"bq-checkbox__input pointer-events-none absolute m-b-0 m-i-0 p-b-0 p-i-0 opacity-0\"\n            disabled={this.disabled}\n            form={this.formId}\n            indeterminate={this.indeterminate}\n            name={!isNil(this.name) ? this.name : undefined}\n            onBlur={this.handleOnBlur}\n            onChange={this.handleChange}\n            onFocus={this.handleOnFocus}\n            part=\"input\"\n            ref={(input: HTMLInputElement) => {\n              this.inputElem = input;\n            }}\n            required={this.required}\n            tabindex=\"0\"\n            type=\"checkbox\"\n            value={this.value}\n          />\n          <span\n            class=\"bq-checkbox__checkbox bs-full is-[--bq-checkbox--size] relative box-border flex items-center justify-center\"\n            part=\"checkbox\"\n          >\n            {/*\n              We could move these SVGs to separated functional components, but it seems there's a weird issue with\n              Stencil and pure SVG components: https://stencil-worldwide.slack.com/archives/C79EANFL7/p1663779385026389\n             */}\n            {this.checked && (\n              <svg\n                aria-hidden=\"true\"\n                class=\"bs-full is-full absolute text-neutral-white\"\n                viewBox=\"0 0 256 256\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path d=\"M0 0h256v256H0z\" fill=\"none\" />\n                <path\n                  d=\"M216 72 104 184l-56-56\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"32\"\n                />\n              </svg>\n            )}\n            {!this.checked && this.indeterminate && (\n              <svg\n                aria-hidden=\"true\"\n                class=\"bs-full is-full absolute text-neutral-white\"\n                fill=\"currentColor\"\n                viewBox=\"0 0 256 256\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path d=\"M0 0h256v256H0z\" fill=\"none\" />\n                <path\n                  d=\"M40 128h176\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"32\"\n                />\n              </svg>\n            )}\n          </span>\n        </div>\n        <span\n          class=\"bq-checkbox__label ps-xs text-start font-medium text-primary leading-regular group-hover-[&:not(.is-disabled)]:text-hover-primary group-[.is-disabled]:opacity-60\"\n          part=\"label\"\n        >\n          <slot />\n        </span>\n      </label>\n    );\n  }\n}\n"]}

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

@@ -2,10 +2,11 @@
  * Built by Endavans
  * © https://beeq.design - Apache 2 License.
  */
-import { h } from "@stencil/core";
-import { hasSlotContent, isClient, isDefined, isEventTargetChildOfElement, isHTMLElement, isNil, parseDateInput, validatePropValue, } from "../../shared/utils";
+import { jsx as _jsx, jsxs as _jsxs } from "@stencil/core/jsx-runtime";
+import { clampDateToRange, extractFocusedDate, formatDisplayValue, getTodayISO, hasSlotContent, isClient, isDefined, isEventTargetChildOfElement, isHTMLElement, isNil, parseDateInput, toISODateString, updateFormValidity, validatePropValue, } from "../../shared/utils";
 import { DATE_PICKER_TYPE } from "./bq-date-picker.types";
-import { isCallyLibraryLoaded, loadCallyLibrary } from "./helper/callyLibrary";
+import { CALENDAR_CONTAINER_EXPORT_PARTS, CALENDAR_MONTH_EXPORT_PARTS, CALENDAR_TYPE_MAP, DEFAULT_INPUT_ID, } from "./helper/constants";
+import { isCallyLibraryLoaded, loadCallyLibrary } from "./libs/callyLibrary";
 /**
  * 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.
  *
@@ -137,11 +138,6 @@ export class BqDatePicker {
     labelElem;
     prefixElem;
     suffixElem;
-    fallbackInputId = 'date-picker';
-    LOCALE_DATE = 'fr-CA';
-    // Export parts of the calendar-month component
-    COMMON_EXPORT_PARTS = 'calendar__heading,calendar__table,calendar__tr,calendar__head,calendar__week,calendar__th,calendar__td';
-    BUTTON_EXPORT_PARTS = 'calendar__button,calendar__day,calendar__selected,calendar__today,calendar__disallowed,calendar__outside,calendar__range-start,calendar__range-end,calendar__range-inner';
     // Reference to host HTML element
     // ===================================
     internals;
@@ -245,13 +241,13 @@ export class BqDatePicker {
     handleValueChange(newValue, oldValue) {
         if (newValue === oldValue)
             return;
-        const { formatDisplayValue, internals, isCallyLoaded } = this;
+        const { formatOptions, internals, isCallyLoaded, locale, type } = this;
         if (!isCallyLoaded)
             return;
         internals.setFormValue(!isNil(newValue) ? `${newValue}` : undefined);
         this.updateFormValidity();
         this.hasValue = isDefined(newValue);
-        this.displayDate = formatDisplayValue(newValue);
+        this.displayDate = formatDisplayValue(newValue, type, locale, formatOptions);
         this.setFocusedDate();
     }
     checkPropValues() {
@@ -329,9 +325,7 @@ export class BqDatePicker {
     // ===============================================
     /**
      * Clears the selected value.
-     *
-     * @return {Promise<void>}
-     * @memberof BqInput
+     * @returns {Promise<void>}
      */
     async clear() {
         if (this.disabled)
@@ -344,21 +338,34 @@ export class BqDatePicker {
     // Internal business logic.
     // These methods cannot be called from the host element.
     // =======================================================
+    /**
+     * Handles the blur event for the date picker input.
+     * @returns {void}
+     */
     handleBlur = () => {
         if (this.disabled)
             return;
         this.bqBlur.emit(this.el);
     };
+    /**
+     * Handles the focus event for the date picker input.
+     * @returns {void}
+     */
     handleFocus = () => {
         if (this.disabled)
             return;
         this.bqFocus.emit(this.el);
     };
+    /**
+     * Updates the focused date in the calendar component.
+     * Falls back to today's date if no value is set.
+     * @returns {void}
+     */
     setFocusedDate = () => {
-        const { callyElem, formatFocusedDate, isCallyLoaded, value } = this;
-        if (!(callyElem && isCallyLoaded))
+        const { callyElem, isCallyLoaded, value } = this;
+        if (!callyElem || !isCallyLoaded)
             return;
-        const nextFocused = value ? formatFocusedDate(value) : new Date().toLocaleDateString(this.LOCALE_DATE);
+        const nextFocused = value ? extractFocusedDate(value) : getTodayISO();
         if (this.focusedDate === nextFocused)
             return;
         this.focusedDate = nextFocused;
@@ -368,13 +375,12 @@ export class BqDatePicker {
             callyElem.focusedDate = this.focusedDate;
         }
     };
-    clampDateToRange = (dateStr) => {
-        if (this.min && dateStr < this.min)
-            return this.min;
-        if (this.max && dateStr > this.max)
-            return this.max;
-        return dateStr;
-    };
+    /**
+     * Handles user input changes with locale-aware date parsing.
+     * Validates against disallowed dates and min/max constraints.
+     * @param {Event} ev - The change event.
+     * @returns {void}
+     */
     handleChange = (ev) => {
         if (this.disabled || !isHTMLElement(ev.target, 'input'))
             return;
@@ -402,14 +408,19 @@ export class BqDatePicker {
         }
         // Valid date: normalize to ISO format and clamp to range if needed
         // Note: clamping is done based on string comparison of ISO dates and only when min/max are set
-        let isoDate = dateValue.toLocaleDateString(this.LOCALE_DATE);
-        isoDate = this.clampDateToRange(isoDate);
+        let isoDate = toISODateString(dateValue);
+        isoDate = clampDateToRange(isoDate, this.min, this.max);
         this.value = isoDate;
-        this.displayDate = this.formatDisplayValue(isoDate);
+        this.displayDate = formatDisplayValue(isoDate, this.type, this.locale, this.formatOptions);
         this.internals.setFormValue(isoDate);
         this.updateFormValidity();
         this.bqChange.emit({ value: this.value, el: this.el });
     };
+    /**
+     * Handles the change event when the user selects a date in the calendar component.
+     * @param {Event} ev - The change event.
+     * @returns {void}
+     */
     handleCalendarChange = (ev) => {
         if (this.isInternalUpdate)
             return;
@@ -421,20 +432,34 @@ export class BqDatePicker {
         }
         this.isInternalUpdate = true;
         this.value = value;
-        this.displayDate = this.formatDisplayValue(value);
+        this.displayDate = formatDisplayValue(value, this.type, this.locale, this.formatOptions);
         this.inputElem.value = this.displayDate;
         this.inputElem.focus();
         this.internals.setFormValue(value);
         this.bqChange.emit({ value: this.value, el: this.el });
         this.open = shouldStayOpen;
     };
+    /**
+     * Handles the range start event when the user starts selecting a date range
+     * @param {CustomEvent} ev - The range start event.
+     * @returns {void}
+     */
     handleCalendarRangeStart = (ev) => {
         this.hasRangeEnd = false;
         this.tentative = ev.detail;
     };
+    /**
+     * Handles the range end event when the user finishes selecting a date range
+     * @returns {void}
+     */
     handleCalendarRangeEnd = () => {
         this.hasRangeEnd = true;
     };
+    /**
+     * Handles the clear click event when the user clicks the clear button
+     * @param {CustomEvent} ev - The clear click event.
+     * @returns {void}
+     */
     handleClearClick = (ev) => {
         if (this.disabled)
             return;
@@ -446,20 +471,34 @@ export class BqDatePicker {
         this.inputElem.focus();
         ev.stopPropagation();
     };
+    /**
+     * Clears the value of the date picker input.
+     * @returns {void}
+     */
     clearValue = () => {
         this.value = undefined;
         this.displayDate = undefined;
         this.internals.setFormValue(undefined);
     };
+    /**
+     * Handles the slot change event when the slots content changes
+     * @returns {void}
+     */
     handleSlotChange = () => {
         this.hasLabel = hasSlotContent(this.labelElem);
         this.hasPrefix = hasSlotContent(this.prefixElem);
         this.hasSuffix = hasSlotContent(this.suffixElem);
     };
+    /**
+     * Generates a calendar month element
+     * @param {number} offset - The offset of the calendar month.
+     * @param {string} className - The class name of the calendar month.
+     * @returns {JSX.Element | null} The calendar month element.
+     */
     generateCalendarMonth = (offset, className = '') => {
         if (!this.isCallyLoaded)
             return null;
-        return (h("calendar-month", { class: className, exportparts: `${this.COMMON_EXPORT_PARTS},${this.BUTTON_EXPORT_PARTS}`, offset: offset }));
+        return _jsx("calendar-month", { class: className, exportparts: CALENDAR_MONTH_EXPORT_PARTS, offset: offset });
     };
     /**
      * Generates an array of Elements representing the calendar months.
@@ -472,7 +511,7 @@ export class BqDatePicker {
      * If the type of the date picker is not 'range' or 'multi', or if the number of months is not specified,
      * it generates an array with a single calendar month.
      *
-     * @returns {Element[]} An array of elements representing the calendar months.
+     * @returns {JSX.Element[]} An array of elements representing the calendar months.
      */
     generateCalendarMonths = () => {
         if (!this.isCallyLoaded)
@@ -487,82 +526,53 @@ export class BqDatePicker {
         return [this.generateCalendarMonth()];
     };
     /**
-     * Extracts and returns the first date part from a given string.
-     * When the type of the date picker is 'range' or 'multi', the first or initial date part of the value
-     * should be the focused date in the calendar.
-     *
-     * @param value - The value to be processed, can be a string.
-     * @returns The extracted last date portion of the value.
+     * Updates the form validity of the date picker input.
+     * @returns {void}
      */
-    formatFocusedDate = (value) => {
-        if (!value)
-            return undefined;
-        const dateRegex = /\b\d{4}-\d{2}-\d{2}\b/;
-        const match = dateRegex.exec(value);
-        return match ? match[0] : undefined;
-    };
-    formatDisplayValue = (value) => {
-        if (!value)
-            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}T00:00:00`));
-            return dateFormatter.formatRange(start, end);
-        }
-        if (this.type === 'multi') {
-            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}T00:00:00`));
-    };
     updateFormValidity = () => {
         const { formValidationMessage, internals, required, value, inputElem } = this;
-        // Clear the validity state
-        internals?.states.clear();
-        // Check if value is required but missing
-        if (required && (!value || value.toString().trim() === '')) {
-            // Set validity state to invalid
-            internals?.states.add('invalid');
-            internals?.setValidity({ valueMissing: true }, formValidationMessage ?? 'Please, input or select a valid date', inputElem);
-            return;
-        }
-        // Set validity state to valid if the input has value or is not required
-        internals?.states.add('valid');
-        internals?.setValidity({});
+        updateFormValidity({
+            internals,
+            required,
+            value,
+            inputElem,
+            validationMessage: formValidationMessage,
+            defaultMessage: 'Please, input or select a valid date',
+        });
     };
+    /**
+     * Returns the Cally calendar component tag name based on the picker type.
+     * Maps 'single' → 'calendar-date', 'multi' → 'calendar-multi', 'range' → 'calendar-range'
+     *
+     * @returns The Cally calendar component tag name.
+     */
     get calendarType() {
-        const componentTypes = {
-            single: 'calendar-date',
-            multi: 'calendar-multi',
-            range: 'calendar-range',
-        };
-        // Return the corresponding component type, based on the type prop value
-        return componentTypes[this.type] || componentTypes.single;
+        return CALENDAR_TYPE_MAP[this.type] ?? CALENDAR_TYPE_MAP.single;
     }
     // render() function
     // Always the last one in the class.
     // ===================================
     render() {
         const CallyCalendar = this.calendarType;
-        const labelId = `bq-date-picker__label-${this.name || this.fallbackInputId}`;
-        return (h("div", { key: '7dd5177513441e3a23967959d67bcc5310327c12', class: "bq-date-picker", part: "base" }, h("label", { key: '8eab1a4fd300bc8b16d926133a7eff6afe79773c', "aria-labelledby": labelId, class: { 'bq-date-picker__label': true, '!hidden': !this.hasLabel }, htmlFor: this.name || this.fallbackInputId, part: "label", ref: (labelElem) => {
-                this.labelElem = labelElem;
-            } }, h("slot", { key: '8733cacff45646645cf21f2bc28e83c48a684a79', id: labelId, name: "label", onSlotchange: this.handleSlotChange })), h("bq-dropdown", { key: 'c85bba63e2078ddb0fa5472aa188ce3c880d4e47', class: "bq-date-picker__dropdown is-full [&::part(panel)]:is-auto [&::part(panel)]:p-m", disabled: this.disabled, distance: this.distance, exportparts: "panel", open: this.open, panelHeight: this.panelHeight, placement: this.placement, skidding: this.skidding, strategy: this.strategy }, h("div", { key: 'd37010f0e2c682c77d4005c28008cf76d1e08235', class: {
-                'bq-date-picker__control': true,
-                [`validation-${this.validationStatus}`]: true,
-                disabled: this.disabled,
-            }, part: "control", slot: "trigger" }, h("span", { key: '42cc62ab392dd011530d4626dae40a08ae5faf7e', class: { 'bq-date-picker__control--prefix': true, '!hidden': !this.hasPrefix }, part: "prefix", ref: (spanElem) => {
-                this.prefixElem = spanElem;
-            } }, h("slot", { key: '77b9d64b0072bb3ff4e4dcca0d285970f1febf77', name: "prefix", onSlotchange: this.handleSlotChange })), h("input", { key: 'b078734fe5d27716a99cb57deabb73229cbe5c96', "aria-controls": `${this.name}`, "aria-describedby": this.hasLabel ? labelId : null, "aria-disabled": this.disabled ? 'true' : 'false', "aria-invalid": this.validationStatus === 'error' ? 'true' : 'false', "aria-haspopup": "dialog", autoCapitalize: "off", autoComplete: "off", class: "bq-date-picker__control--input", disabled: this.disabled, form: this.form, id: this.name || this.fallbackInputId, name: this.name, onBlur: this.handleBlur, onChange: this.handleChange, onFocus: this.handleFocus, part: "input", placeholder: this.placeholder, readonly: this.type !== 'single', ref: (inputElem) => {
-                this.inputElem = inputElem;
-            }, required: this.required, spellcheck: false, type: "text", value: this.displayDate }), 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: 'ecab571d159a203701bd5e1c83d750bb6739c413', appearance: "text", "aria-label": this.clearButtonLabel, class: "bq-date-picker__control--clear ms-[--bq-date-picker--gap] hidden", exportparts: "button", onBqClick: this.handleClearClick, part: "clear-btn", size: "small" }, h("slot", { key: '46713d03aa0a0c08080351d7f8f4b63d41eb0f11', name: "clear-icon" }, h("bq-icon", { key: 'fe839e6ea4f466c1fe333d78b9cb16284085b7fa', class: "flex", name: "x-circle" })))), h("span", { key: '39425b0e92626e37a5f5c50d06c5c4d77c223ac8', class: "bq-date-picker__control--suffix", part: "suffix", ref: (spanElem) => {
-                this.suffixElem = spanElem;
-            } }, h("slot", { key: 'bb94c519c5764b4c866e1d6a3348b52df70e2d03', name: "suffix", onSlotchange: this.handleSlotChange }, h("bq-icon", { key: '945d516274d55ce6202eacc2bea75706aaca01ed', class: "flex", name: "calendar-blank" })))), this.isCallyLoaded && (h(CallyCalendar, { key: '6b969b34c5459f822aec362d4df635aafb27bab6', "aria-labelledby": labelId, "aria-modal": "true", exportparts: "container:calendar__container,header:calendar__header,button:calendar__button,previous:calendar__previous,next:calendar__next,disabled:calendar__disabled,heading:calendar__heading", firstDayOfWeek: this.firstDayOfWeek, isDateDisallowed: this.isDateDisallowed, locale: this.locale, max: this.max, min: this.min, months: this.months, onChange: this.handleCalendarChange, onRangeend: this.handleCalendarRangeEnd, onRangestart: this.handleCalendarRangeStart, pageBy: this.monthsPerView, ref: (elem) => {
-                this.callyElem = elem;
-            }, role: "dialog", showOutsideDays: this.showOutsideDays, tentative: this.tentative, value: this.value }, h("bq-icon", { key: '0184fb53e84a2f0dc02140d6ca6d16f4a2572b28', color: "text--primary", label: "Previous", name: "caret-left", slot: "previous" }), h("bq-icon", { key: '6eaac0b7c395b76b49cda6a726d889dc30336ef3', color: "text--primary", label: "Next", name: "caret-right", slot: "next" }), h("div", { key: '8646ac81ebf39bd06deda107d436313192afed70', class: "flex flex-wrap justify-center gap-[--bq-spacing-m]" }, this.generateCalendarMonths()))))));
+        const labelId = `bq-date-picker__label-${this.name || DEFAULT_INPUT_ID}`;
+        return (_jsxs("div", { class: "bq-date-picker", part: "base", children: [_jsx("label", { "aria-labelledby": labelId, class: { 'bq-date-picker__label': true, '!hidden': !this.hasLabel }, htmlFor: this.name || DEFAULT_INPUT_ID, part: "label", ref: (labelElem) => {
+                        this.labelElem = labelElem;
+                    }, children: _jsx("slot", { id: labelId, name: "label", onSlotchange: this.handleSlotChange }, '6070c604475bef562672492c607435e7ac647c1a') }, '5a0aeb21acf08cacbf320ef6a87a2d8237ebedd0'), _jsxs("bq-dropdown", { class: "bq-date-picker__dropdown is-full [&::part(panel)]:is-auto [&::part(panel)]:p-m", disabled: this.disabled, distance: this.distance, exportparts: "panel", open: this.open, panelHeight: this.panelHeight, placement: this.placement, skidding: this.skidding, strategy: this.strategy, children: [_jsxs("div", { class: {
+                                'bq-date-picker__control': true,
+                                [`validation-${this.validationStatus}`]: true,
+                                disabled: this.disabled,
+                            }, part: "control", slot: "trigger", children: [_jsx("span", { class: { 'bq-date-picker__control--prefix': true, '!hidden': !this.hasPrefix }, part: "prefix", ref: (spanElem) => {
+                                        this.prefixElem = spanElem;
+                                    }, children: _jsx("slot", { name: "prefix", onSlotchange: this.handleSlotChange }, '7f3bbec696f39303127be65762bb2a6dcf36be3e') }, '3cef7076a1f189e5f906e4a9b702ad896758177c'), _jsx("input", { "aria-controls": `${this.name}`, "aria-describedby": this.hasLabel ? labelId : null, "aria-disabled": this.disabled ? 'true' : 'false', "aria-invalid": this.validationStatus === 'error' ? 'true' : 'false', "aria-haspopup": "dialog", autoCapitalize: "off", autoComplete: "off", class: "bq-date-picker__control--input", disabled: this.disabled, form: this.form, id: this.name || DEFAULT_INPUT_ID, name: this.name, onBlur: this.handleBlur, onChange: this.handleChange, onFocus: this.handleFocus, part: "input", placeholder: this.placeholder, readonly: this.type !== 'single', ref: (inputElem) => {
+                                        this.inputElem = inputElem;
+                                    }, required: this.required, spellcheck: false, type: "text", value: this.displayDate }, '535c3a503761a059186e8635fd5c3515f0a7a405'), 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
+                                _jsx("bq-button", { appearance: "text", border: "s", class: "bq-date-picker__control--clear ms-[--bq-date-picker--gap] hidden [&::part(button)]:border-none [&::part(button)]:p-0", exportparts: "button", label: this.clearButtonLabel, onBqClick: this.handleClearClick, onlyIcon: true, part: "clear-btn", size: "small", children: _jsx("slot", { name: "clear-icon", children: _jsx("bq-icon", { "aria-hidden": "true", class: "flex", name: "x-circle" }, '9ad2d96b08e2221e03093ca76ad6dcd588707404') }, '971e0e91974086bd4b263ece346ff1de3639a231') }, 'dbf106fe06a46cc654ce3848035ae7c758586855')), _jsx("span", { class: "bq-date-picker__control--suffix", part: "suffix", ref: (spanElem) => {
+                                        this.suffixElem = spanElem;
+                                    }, children: _jsx("slot", { name: "suffix", onSlotchange: this.handleSlotChange, children: _jsx("bq-icon", { class: "flex", name: "calendar-blank" }, 'ed788d286ead83d0cb56afb97a51f690f1a0a7fa') }, '0e9a0e5a7770726937bb0e82e79587706e383a2a') }, 'a59d1e17dedd9ca004bebe1cb6750fa9a22aadac')] }, '633d4083b42e3354d1b465deafc51a7124e41587'), this.isCallyLoaded && (_jsxs(CallyCalendar, { "aria-labelledby": labelId, "aria-modal": "true", exportparts: CALENDAR_CONTAINER_EXPORT_PARTS, firstDayOfWeek: this.firstDayOfWeek, isDateDisallowed: this.isDateDisallowed, locale: this.locale, max: this.max, min: this.min, months: this.months, onChange: this.handleCalendarChange, onRangeend: this.handleCalendarRangeEnd, onRangestart: this.handleCalendarRangeStart, pageBy: this.monthsPerView, ref: (elem) => {
+                                this.callyElem = elem;
+                            }, role: "dialog", showOutsideDays: this.showOutsideDays, tentative: this.tentative, value: this.value, children: [_jsx("bq-icon", { color: "text--primary", label: "Previous", name: "caret-left", slot: "previous" }, '5b717c86faaa5fc7733b080c5fc6c80518c6c064'), _jsx("bq-icon", { color: "text--primary", label: "Next", name: "caret-right", slot: "next" }, '30cf13e187f0b0f1b5ead36875ddce8313d63ab9'), _jsx("div", { class: "flex flex-wrap justify-center gap-[--bq-spacing-m]", children: this.generateCalendarMonths() }, '65561cf18c5c34d309d306c38fa682f61d719fec')] }, 'ba2fa07f289f65ca95e5f4d3513c0647e537d25a'))] }, '6e46bde115a7bc8950e1d48439ac17207a5b5cbb')] }, '00bdb12502734469ab0a29de76c830c1ca9dd927'));
     }
     static get is() { return "bq-date-picker"; }
     static get encapsulation() { return "shadow"; }
@@ -689,7 +699,8 @@ export class BqDatePicker {
                         "DaysOfWeek": {
                             "location": "import",
                             "path": "./bq-date-picker.types",
-                            "id": "../../packages/beeq/src/components/date-picker/bq-date-picker.types.ts::DaysOfWeek"
+                            "id": "../../packages/beeq/src/components/date-picker/bq-date-picker.types.ts::DaysOfWeek",
+                            "referenceLocation": "DaysOfWeek"
                         }
                     }
                 },
@@ -978,7 +989,8 @@ export class BqDatePicker {
                         "Placement": {
                             "location": "import",
                             "path": "../../services/interfaces",
-                            "id": "../../packages/beeq/src/services/interfaces/index.ts::Placement"
+                            "id": "../../packages/beeq/src/services/interfaces/index.ts::Placement",
+                            "referenceLocation": "Placement"
                         }
                     }
                 },
@@ -1102,7 +1114,8 @@ export class BqDatePicker {
                         "TDatePickerType": {
                             "location": "import",
                             "path": "./bq-date-picker.types",
-                            "id": "../../packages/beeq/src/components/date-picker/bq-date-picker.types.ts::TDatePickerType"
+                            "id": "../../packages/beeq/src/components/date-picker/bq-date-picker.types.ts::TDatePickerType",
+                            "referenceLocation": "TDatePickerType"
                         }
                     }
                 },
@@ -1128,7 +1141,8 @@ export class BqDatePicker {
                         "TInputValidation": {
                             "location": "import",
                             "path": "../input/bq-input.types",
-                            "id": "../../packages/beeq/src/components/input/bq-input.types.ts::TInputValidation"
+                            "id": "../../packages/beeq/src/components/input/bq-input.types.ts::TInputValidation",
+                            "referenceLocation": "TInputValidation"
                         }
                     }
                 },
@@ -1280,11 +1294,8 @@ export class BqDatePicker {
                 "docs": {
                     "text": "Clears the selected value.",
                     "tags": [{
-                            "name": "return",
+                            "name": "returns",
                             "text": undefined
-                        }, {
-                            "name": "memberof",
-                            "text": "BqInput"
                         }]
                 }
             }