npm - @beeq/core - Versions diffs - 1.8.4-beta.0 → 1.8.5-beta.2 - Mend

@beeq/core 1.8.4-beta.0 → 1.8.5-beta.2

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 (898) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"bq-step-item.js","sourceRoot":"","sources":["../../../../../../src/components/step-item/bq-step-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,~~EAAgB~~,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;~~AAExF~~,OAAO,EAAE,gBAAgB,~~EAAmB~~,MAAM,sBAAsB,CAAC;~~AACzE~~,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AACtE,OAAO,EAAE,UAAU,~~EAA0B~~,MAAM,yBAAyB,CAAC;~~AAE7E~~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","sourcesContent":["import { Component, Element, Event, ~~EventEmitter,~~ h, Prop, Watch } from '@stencil/core';\n\nimport { STEP_ITEM_STATUS, TStepItemStatus } from './bq-step-item.types';\nimport { isHTMLElement, validatePropValue } from '../../shared/utils';\nimport { STEPS_SIZE, TStepsSize, TStepsType } from '../steps/bq-steps.types';\n\n/*\n The Step Item Component is a UI element used to display a single step or stage in a process or task.\n * It should be used inside the Steps component.\n \n @example How to use it\n * ```html\n * <bq-step-item status=\"completed\">\n * <bq-icon slot=\"prefix\" name=\"check-circle\"></bq-icon>\n * <span>Title</span>\n * <span slot=\"description\">Description</span>\n * </bq-step-item>\n * ```\n \n @documentation https://www.beeq.design/3d466e231/p/896b66-stepper\n * @status stable\n \n @attr {\"small\" \| \"medium\"} size - It defines prefix size\n * @attr {\"completed\" \| \"current\" \| \"error\" \| \"default\" \| \"disabled\"} status - It defines step item appearance based on its status\n * @attr {\"numeric\" \| \"icon\" \| \"dot\"} type - It defines the step item type used\n \n @event bqClick - Callback handler emitted when the step item is clicked\n \n @slot - The step item content\n * @slot prefix - The step item prefix\n * @slot description - The step item description\n \n @part base - The component's base wrapper.\n * @part title - The component's title.\n * @part description - The component's description.\n \n @cssprop --bq-step-item--prefix-color - Color of the prefix icon\n * @cssprop --bq-step-item--prefix-color-current - Color of the prefix icon when current\n * @cssprop --bq-step-item--prefix-color-completed - Color of the prefix icon when completed\n * @cssprop --bq-step-item--prefix-color-error - Color of the prefix icon when error\n * @cssprop --bq-step-item--prefix-num-size - Size of the prefix number\n * @cssprop --bq-step-item--prefix-num-bg-color - Background color of the prefix number\n /\n@Component({\n tag: 'bq-step-item',\n styleUrl: './scss/bq-step-item.scss',\n shadow: true,\n})\nexport class BqStepItem {\n // Own Properties\n // ====================\n\n // Reference to host HTML element\n // ===================================\n @Element() el!: HTMLBqStepItemElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n // Public Property API\n // ========================\n\n /* It defines prefix size /\n @Prop({ reflect: true }) size?: TStepsSize = 'medium';\n\n /* It defines step item appearance based on its status /\n @Prop({ reflect: true }) status?: TStepItemStatus = 'default';\n\n /* It defines the step item type used /\n @Prop({ reflect: true }) type?: TStepsType;\n\n // Prop lifecycle events\n // =======================\n\n @Watch('size')\n @Watch('status')\n checkPropValues() {\n validatePropValue(STEPS_SIZE, 'medium', this.el, 'size');\n validatePropValue(STEP_ITEM_STATUS, 'default', this.el, 'status');\n\n this.handleIconPrefix();\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /* Callback handler emitted when the step item is clicked /\n @Event() bqClick: EventEmitter<{ target: HTMLBqStepItemElement; value: string }>;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n connectedCallback() {\n this.checkPropValues();\n }\n\n componentWillLoad() {\n this.checkPropValues();\n }\n\n componentDidLoad() {\n this.handleIconPrefix();\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 get isDisabled(): boolean {\n return this.status === 'disabled';\n }\n\n private get isCurrent(): boolean {\n return this.status === 'current';\n }\n\n private handleIconPrefix = () => {\n const iconElem = this.el.querySelector('[slot=\"prefix\"]');\n if (!iconElem \|\| !isHTMLElement(iconElem, 'bq-icon')) return;\n\n iconElem.size = this.size === 'small' ? 24 : 32;\n iconElem.weight = this.isCurrent ? 'fill' : 'regular';\n };\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n return (\n <div\n class={{\n 'bq-step-item flex gap-s': true,\n [`bq-step-item--${this.status}`]: true,\n 'pointer-events-none opacity-60': this.isDisabled,\n }}\n part=\"base\"\n >\n <div class={`bq-step-item__prefix relative ${this.type} ${this.size} ${this.status}`}>\n <slot name=\"prefix\" onSlotchange={this.handleIconPrefix} />\n </div>\n <div class=\"bq-step-item__content\">\n {/ TITLE /}\n <div\n class={{\n 'bq-step-item__content--title pe-xs3 text-m leading-regular text-primary': true,\n 'pointer-events-none': this.isDisabled,\n 'text-brand': this.isCurrent,\n }}\n part=\"title\"\n >\n <slot />\n </div>\n {/ DESCRIPTION */}\n <div\n class={{\n 'bq-step-item__content--description text-s leading-regular opacity-60': true,\n 'opacity-60': this.isDisabled,\n }}\n part=\"description\"\n >\n <slot name=\"description\" />\n </div>\n </div>\n </div>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"bq-step-item.js","sourceRoot":"","sources":["../../../../../../packages/beeq/src/components/step-item/bq-step-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAG1E,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAExD,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AACtE,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAGrD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AAMH,MAAM,OAAO,UAAU;IACrB,iBAAiB;IACjB,uBAAuB;IAEvB,iCAAiC;IACjC,sCAAsC;IAC3B,EAAE,CAAyB;IAEtC,oBAAoB;IACpB,wCAAwC;IACxC,0CAA0C;IAE1C,sBAAsB;IACtB,2BAA2B;IAE3B,6BAA6B;IACJ,IAAI,GAAgB,QAAQ,CAAC;IAEtD,0DAA0D;IACjC,MAAM,GAAqB,SAAS,CAAC;IAE9D,yCAAyC;IAChB,IAAI,CAAc;IAE3C,wBAAwB;IACxB,0BAA0B;IAI1B,eAAe;QACb,iBAAiB,CAAC,UAAU,EAAE,QAAQ,EAAE,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,CAAC;QACzD,iBAAiB,CAAC,gBAAgB,EAAE,SAAS,EAAE,IAAI,CAAC,EAAE,EAAE,QAAQ,CAAC,CAAC;QAElE,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IAED,iBAAiB;IACjB,+CAA+C;IAC/C,iDAAiD;IAEjD,6DAA6D;IACpD,OAAO,CAAiE;IAEjF,6BAA6B;IAC7B,sCAAsC;IACtC,wCAAwC;IAExC,iBAAiB;QACf,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,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,IAAY,UAAU;QACpB,OAAO,IAAI,CAAC,MAAM,KAAK,UAAU,CAAC;IACpC,CAAC;IAED,IAAY,SAAS;QACnB,OAAO,IAAI,CAAC,MAAM,KAAK,SAAS,CAAC;IACnC,CAAC;IAEO,gBAAgB,GAAG,GAAG,EAAE;QAC9B,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;QAC1D,IAAI,CAAC,QAAQ,IAAI,CAAC,aAAa,CAAC,QAAQ,EAAE,SAAS,CAAC;YAAE,OAAO;QAE7D,QAAQ,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QAChD,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC;IACxD,CAAC,CAAC;IAEF,oBAAoB;IACpB,oCAAoC;IACpC,sCAAsC;IAEtC,MAAM;QACJ,OAAO,CACL,4DACE,KAAK,EAAE;gBACL,yBAAyB,EAAE,IAAI;gBAC/B,CAAC,iBAAiB,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,IAAI;gBACtC,gCAAgC,EAAE,IAAI,CAAC,UAAU;aAClD,EACD,IAAI,EAAC,MAAM;YAEX,4DAAK,KAAK,EAAE,iCAAiC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,EAAE;gBAClF,6DAAM,IAAI,EAAC,QAAQ,EAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAI,CACvD;YACN,4DAAK,KAAK,EAAC,uBAAuB;gBAEhC,4DACE,KAAK,EAAE;wBACL,yEAAyE,EAAE,IAAI;wBAC/E,qBAAqB,EAAE,IAAI,CAAC,UAAU;wBACtC,YAAY,EAAE,IAAI,CAAC,SAAS;qBAC7B,EACD,IAAI,EAAC,OAAO;oBAEZ,8DAAQ,CACJ;gBAEN,4DACE,KAAK,EAAE;wBACL,sEAAsE,EAAE,IAAI;wBAC5E,YAAY,EAAE,IAAI,CAAC,UAAU;qBAC9B,EACD,IAAI,EAAC,aAAa;oBAElB,6DAAM,IAAI,EAAC,aAAa,GAAG,CACvB,CACF,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, h, Prop, Watch } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\nimport { STEP_ITEM_STATUS } from './bq-step-item.types';\nimport type { TStepItemStatus } from './bq-step-item.types';\nimport { isHTMLElement, validatePropValue } from '../../shared/utils';\nimport { STEPS_SIZE } from '../steps/bq-steps.types';\nimport type { TStepsSize, TStepsType } from '../steps/bq-steps.types';\n\n/*\n The Step Item Component is a UI element used to display a single step or stage in a process or task.\n * It should be used inside the Steps component.\n \n @example How to use it\n * ```html\n * <bq-step-item status=\"completed\">\n * <bq-icon slot=\"prefix\" name=\"check-circle\"></bq-icon>\n * <span>Title</span>\n * <span slot=\"description\">Description</span>\n * </bq-step-item>\n * ```\n \n @documentation https://www.beeq.design/3d466e231/p/896b66-stepper\n * @status stable\n \n @attr {\"small\" \| \"medium\"} size - It defines prefix size\n * @attr {\"completed\" \| \"current\" \| \"error\" \| \"default\" \| \"disabled\"} status - It defines step item appearance based on its status\n * @attr {\"numeric\" \| \"icon\" \| \"dot\"} type - It defines the step item type used\n \n @event bqClick - Callback handler emitted when the step item is clicked\n \n @slot - The step item content\n * @slot prefix - The step item prefix\n * @slot description - The step item description\n \n @part base - The component's base wrapper.\n * @part title - The component's title.\n * @part description - The component's description.\n \n @cssprop --bq-step-item--prefix-color - Color of the prefix icon\n * @cssprop --bq-step-item--prefix-color-current - Color of the prefix icon when current\n * @cssprop --bq-step-item--prefix-color-completed - Color of the prefix icon when completed\n * @cssprop --bq-step-item--prefix-color-error - Color of the prefix icon when error\n * @cssprop --bq-step-item--prefix-num-size - Size of the prefix number\n * @cssprop --bq-step-item--prefix-num-bg-color - Background color of the prefix number\n /\n@Component({\n tag: 'bq-step-item',\n styleUrl: './scss/bq-step-item.scss',\n shadow: true,\n})\nexport class BqStepItem {\n // Own Properties\n // ====================\n\n // Reference to host HTML element\n // ===================================\n @Element() el!: HTMLBqStepItemElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n // Public Property API\n // ========================\n\n /* It defines prefix size /\n @Prop({ reflect: true }) size?: TStepsSize = 'medium';\n\n /* It defines step item appearance based on its status /\n @Prop({ reflect: true }) status?: TStepItemStatus = 'default';\n\n /* It defines the step item type used /\n @Prop({ reflect: true }) type?: TStepsType;\n\n // Prop lifecycle events\n // =======================\n\n @Watch('size')\n @Watch('status')\n checkPropValues() {\n validatePropValue(STEPS_SIZE, 'medium', this.el, 'size');\n validatePropValue(STEP_ITEM_STATUS, 'default', this.el, 'status');\n\n this.handleIconPrefix();\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /* Callback handler emitted when the step item is clicked /\n @Event() bqClick: EventEmitter<{ target: HTMLBqStepItemElement; value: string }>;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n connectedCallback() {\n this.checkPropValues();\n }\n\n componentWillLoad() {\n this.checkPropValues();\n }\n\n componentDidLoad() {\n this.handleIconPrefix();\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 get isDisabled(): boolean {\n return this.status === 'disabled';\n }\n\n private get isCurrent(): boolean {\n return this.status === 'current';\n }\n\n private handleIconPrefix = () => {\n const iconElem = this.el.querySelector('[slot=\"prefix\"]');\n if (!iconElem \|\| !isHTMLElement(iconElem, 'bq-icon')) return;\n\n iconElem.size = this.size === 'small' ? 24 : 32;\n iconElem.weight = this.isCurrent ? 'fill' : 'regular';\n };\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n return (\n <div\n class={{\n 'bq-step-item flex gap-s': true,\n [`bq-step-item--${this.status}`]: true,\n 'pointer-events-none opacity-60': this.isDisabled,\n }}\n part=\"base\"\n >\n <div class={`bq-step-item__prefix relative ${this.type} ${this.size} ${this.status}`}>\n <slot name=\"prefix\" onSlotchange={this.handleIconPrefix} />\n </div>\n <div class=\"bq-step-item__content\">\n {/ TITLE /}\n <div\n class={{\n 'bq-step-item__content--title pe-xs3 text-m leading-regular text-primary': true,\n 'pointer-events-none': this.isDisabled,\n 'text-brand': this.isCurrent,\n }}\n part=\"title\"\n >\n <slot />\n </div>\n {/ DESCRIPTION */}\n <div\n class={{\n 'bq-step-item__content--description text-s leading-regular opacity-60': true,\n 'opacity-60': this.isDisabled,\n }}\n part=\"description\"\n >\n <slot name=\"description\" />\n </div>\n </div>\n </div>\n );\n }\n}\n"]}

package/dist/collection/components/step-item/bq-step-item.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"bq-step-item.types.js","sourceRoot":"","sources":["../../../../../../src/components/step-item/bq-step-item.types.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,SAAS,EAAE,SAAS,EAAE,WAAW,EAAE,OAAO,EAAE,UAAU,CAAU,CAAC","sourcesContent":["export const STEP_ITEM_STATUS = ['default', 'current', 'completed', 'error', 'disabled'] as const;\nexport type TStepItemStatus = (typeof STEP_ITEM_STATUS)[number];\n"]}
1	+ {"version":3,"file":"bq-step-item.types.js","sourceRoot":"","sources":["../../../../../../packages/beeq/src/components/step-item/bq-step-item.types.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,SAAS,EAAE,SAAS,EAAE,WAAW,EAAE,OAAO,EAAE,UAAU,CAAU,CAAC","sourcesContent":["export const STEP_ITEM_STATUS = ['default', 'current', 'completed', 'error', 'disabled'] as const;\nexport type TStepItemStatus = (typeof STEP_ITEM_STATUS)[number];\n"]}

package/dist/collection/components/steps/bq-steps.js CHANGED Viewed

@@ -104,7 +104,7 @@ export class BqSteps {
     // ===================================
     render() {
         const dividerPaddingTop = this.size === 'small' ? 'p-bs-s' : 'p-bs-m';
-        return (h("div", { key: '3dce87e1c73302eca5f4f7ddf8608318ceae1938', class: "relative flex w-full items-start justify-between", ref: (div) => (this.stepElem = div), part: "container" }, h("slot", { key: '5d55a7c2244bcdaab1ecc90365ac0e35b6f940e9' }), h("bq-divider", { key: '337a125bde11140ab4dff1fef10797b13613d182', class: `absolute -z-10 p-i-s inset-ie-0 inset-is-0 ${dividerPaddingTop}`, strokeColor: this.dividerColor, strokeThickness: 2, exportparts: "base:divider-base,dash-start:divider-dash-start,dash-end:divider-dash-end" })));
+        return (h("div", { key: 'b9660d54d4c6c5dfb470e2b1ccab9f2a1599637d', class: "relative flex w-full items-start justify-between", ref: (div) => (this.stepElem = div), part: "container" }, h("slot", { key: '5dc3d054ac85a5a9c642b93cd19a0e5f8d85042b' }), h("bq-divider", { key: 'bb4f790055f5512ca5f89c1062f77397d36ec006', class: `absolute -z-10 p-i-s inset-ie-0 inset-is-0 ${dividerPaddingTop}`, strokeColor: this.dividerColor, strokeThickness: 2, exportparts: "base:divider-base,dash-start:divider-dash-start,dash-end:divider-dash-end" })));
     }
     static get is() { return "bq-steps"; }
     static get encapsulation() { return "shadow"; }
@@ -122,6 +122,7 @@ export class BqSteps {
         return {
             "dividerColor": {
                 "type": "string",
+                "attribute": "divider-color",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -136,12 +137,12 @@ export class BqSteps {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "divider-color",
                 "reflect": true,
                 "defaultValue": "'stroke--primary'"
             },
             "size": {
                 "type": "string",
+                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "TStepsSize",
@@ -162,12 +163,12 @@ export class BqSteps {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
                 "reflect": true,
                 "defaultValue": "'medium'"
             },
             "type": {
                 "type": "string",
+                "attribute": "type",
                 "mutable": false,
                 "complexType": {
                     "original": "TStepsType",
@@ -188,7 +189,6 @@ export class BqSteps {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "type",
                 "reflect": true
             }
         };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"bq-steps.js","sourceRoot":"","sources":["../../../../../../src/components/steps/bq-steps.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEnE,OAAO,EAAE,UAAU,EAAE,UAAU,~~EAA0B~~,MAAM,kBAAkB,CAAC;~~AAClF~~,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AAMH,MAAM,OAAO,OAAO;IAClB,iBAAiB;IACjB,uBAAuB;IAEf,QAAQ,CAAc;IAE9B,iCAAiC;IACjC,sCAAsC;IAE3B,EAAE,CAAsB;IAEnC,oBAAoB;IACpB,wCAAwC;IACxC,0CAA0C;IAE1C,sBAAsB;IACtB,2BAA2B;IAE3B,mGAAmG;IAC1E,YAAY,GAAW,iBAAiB,CAAC;IAElE,4BAA4B;IACH,IAAI,GAAe,QAAQ,CAAC;IAErD,0DAA0D;IACjC,IAAI,CAAa;IAE1C,wBAAwB;IACxB,0BAA0B;IAI1B,eAAe;QACb,iBAAiB,CAAC,UAAU,EAAE,QAAQ,EAAE,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,CAAC;QACzD,iBAAiB,CAAC,UAAU,EAAE,SAAS,EAAE,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,CAAC;QAE1D,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IACD,iBAAiB;IACjB,+CAA+C;IAC/C,iDAAiD;IAEjD,6BAA6B;IAC7B,sCAAsC;IACtC,wCAAwC;IAExC,gBAAgB;QACd,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,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,IAAY,OAAO;QACjB,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,OAAO,EAAE,CAAC;QAE9B,MAAM,IAAI,GAAG,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QACjD,OAAO,CAAC,GAAG,IAAI,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,MAAM,CACzD,CAAC,EAA6B,EAAE,EAAE,CAAC,EAAE,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,cAAc,CAChD,CAAC;IACnC,CAAC;IAEO,gBAAgB,GAAG,GAAG,EAAE;QAC9B,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,UAAiC,EAAE,EAAE;YACzD,UAAU,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;YAC5B,UAAU,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QAC9B,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,sCAAsC;IACtC,+BAA+B;IAC/B,IAAI;IAEJ,oBAAoB;IACpB,oCAAoC;IACpC,sCAAsC;IAEtC,MAAM;QACJ,MAAM,iBAAiB,GAAG,IAAI,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC;QAEtE,OAAO,CACL,4DACE,KAAK,EAAC,kDAAkD,EACxD,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,GAAG,CAAC,EACnC,IAAI,EAAC,WAAW;YAEhB,8DAAQ;YACR,mEACE,KAAK,EAAE,8CAA8C,iBAAiB,EAAE,EACxE,WAAW,EAAE,IAAI,CAAC,YAAY,EAC9B,eAAe,EAAE,CAAC,EAClB,WAAW,EAAC,2EAA2E,GACvF,CACE,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Prop, Watch } from '@stencil/core';\n\nimport { STEPS_SIZE, STEPS_TYPE, TStepsSize, TStepsType } from './bq-steps.types';\nimport { validatePropValue } from '../../shared/utils';\n\n/*\n The Steps Component is a UI element used to display a series of steps or stages in a process or task.\n * It is used to guide users through a process or task and to indicate their progress.\n \n @example How to use it\n * ```html\n * <bq-steps divider-color=\"stroke--primary\" type=\"dot\" size=\"medium\">\n * <bq-step-item status=\"completed\"> ... </bq-step-item>\n * <bq-step-item status=\"error\"> ... </bq-step-item>\n * <bq-step-item status=\"current\"> ... </bq-step-item>\n * <bq-step-item status=\"default\"> ... </bq-step-item>\n * </bq-steps>\n * ```\n \n @documentation https://www.beeq.design/3d466e231/p/896b66-stepper\n * @status stable\n \n @dependency bq-divider\n \n @attr {string} divider-color - The color of the line that connects the steps. It should be a valid declarative color token.\n * @attr {\"medium\" \| \"small\"} size - The size of the steps\n * @attr {\"numeric\" \| \"icon\" \| \"dot\"} type - The type of prefix element to use on the step items\n \n @slot - The step items\n \n @part container - The container wrapper of the Steps component\n * @part divider-base - The base wrapper of the divider component\n * @part divider-dash-start - The dash start wrapper of the divider component\n * @part divider-dash-end - The dash end wrapper of the divider component\n \n @cssprop --bq-steps--divider-color - Divider color\n * @cssprop --bq-steps--gap - Gap between steps\n /\n@Component({\n tag: 'bq-steps',\n styleUrl: './scss/bq-steps.scss',\n shadow: true,\n})\nexport class BqSteps {\n // Own Properties\n // ====================\n\n private stepElem: HTMLElement;\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqStepsElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n // Public Property API\n // ========================\n\n /* The color of the line that connects the steps. It should be a valid declarative color token. /\n @Prop({ reflect: true }) dividerColor: string = 'stroke--primary';\n\n /* The size of the steps /\n @Prop({ reflect: true }) size: TStepsSize = 'medium';\n\n /* The type of prefix element to use on the step items */\n @Prop({ reflect: true }) type: TStepsType;\n\n // Prop lifecycle events\n // =======================\n\n @Watch('type')\n @Watch('size')\n checkPropValues() {\n validatePropValue(STEPS_SIZE, 'medium', this.el, 'size');\n validatePropValue(STEPS_TYPE, 'numeric', this.el, 'type');\n\n this.setStepItemProps();\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 componentDidLoad() {\n this.setStepItemProps();\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 get bqSteps(): HTMLBqStepItemElement[] {\n if (!this.stepElem) return [];\n\n const slot = this.stepElem.querySelector('slot');\n return [...slot.assignedElements({ flatten: true })].filter(\n (el: HTMLBqSideMenuItemElement) => el.tagName.toLowerCase() === 'bq-step-item',\n ) as [HTMLBqSideMenuItemElement];\n }\n\n private setStepItemProps = () => {\n this.bqSteps.forEach((bqStepElem: HTMLBqStepItemElement) => {\n bqStepElem.size = this.size;\n bqStepElem.type = this.type;\n });\n };\n\n // private handleChange = (event) => {\n // this.bqChange.emit(event);\n // }\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n const dividerPaddingTop = this.size === 'small' ? 'p-bs-s' : 'p-bs-m';\n\n return (\n <div\n class=\"relative flex w-full items-start justify-between\"\n ref={(div) => (this.stepElem = div)}\n part=\"container\"\n >\n <slot />\n <bq-divider\n class={`absolute -z-10 p-i-s inset-ie-0 inset-is-0 ${dividerPaddingTop}`}\n strokeColor={this.dividerColor}\n strokeThickness={2}\n exportparts=\"base:divider-base,dash-start:divider-dash-start,dash-end:divider-dash-end\"\n />\n </div>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"bq-steps.js","sourceRoot":"","sources":["../../../../../../packages/beeq/src/components/steps/bq-steps.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Prop, Watch } from '@stencil/core';\n\nimport { STEPS_SIZE, STEPS_TYPE } from './bq-steps.types';\nimport type { TStepsSize, TStepsType } from './bq-steps.types';\nimport { validatePropValue } from '../../shared/utils';\n\n/*\n The Steps Component is a UI element used to display a series of steps or stages in a process or task.\n * It is used to guide users through a process or task and to indicate their progress.\n \n @example How to use it\n * ```html\n * <bq-steps divider-color=\"stroke--primary\" type=\"dot\" size=\"medium\">\n * <bq-step-item status=\"completed\"> ... </bq-step-item>\n * <bq-step-item status=\"error\"> ... </bq-step-item>\n * <bq-step-item status=\"current\"> ... </bq-step-item>\n * <bq-step-item status=\"default\"> ... </bq-step-item>\n * </bq-steps>\n * ```\n \n @documentation https://www.beeq.design/3d466e231/p/896b66-stepper\n * @status stable\n \n @dependency bq-divider\n \n @attr {string} divider-color - The color of the line that connects the steps. It should be a valid declarative color token.\n * @attr {\"medium\" \| \"small\"} size - The size of the steps\n * @attr {\"numeric\" \| \"icon\" \| \"dot\"} type - The type of prefix element to use on the step items\n \n @slot - The step items\n \n @part container - The container wrapper of the Steps component\n * @part divider-base - The base wrapper of the divider component\n * @part divider-dash-start - The dash start wrapper of the divider component\n * @part divider-dash-end - The dash end wrapper of the divider component\n \n @cssprop --bq-steps--divider-color - Divider color\n * @cssprop --bq-steps--gap - Gap between steps\n /\n@Component({\n tag: 'bq-steps',\n styleUrl: './scss/bq-steps.scss',\n shadow: true,\n})\nexport class BqSteps {\n // Own Properties\n // ====================\n\n private stepElem: HTMLElement;\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqStepsElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n // Public Property API\n // ========================\n\n /* The color of the line that connects the steps. It should be a valid declarative color token. /\n @Prop({ reflect: true }) dividerColor: string = 'stroke--primary';\n\n /* The size of the steps /\n @Prop({ reflect: true }) size: TStepsSize = 'medium';\n\n /* The type of prefix element to use on the step items */\n @Prop({ reflect: true }) type: TStepsType;\n\n // Prop lifecycle events\n // =======================\n\n @Watch('type')\n @Watch('size')\n checkPropValues() {\n validatePropValue(STEPS_SIZE, 'medium', this.el, 'size');\n validatePropValue(STEPS_TYPE, 'numeric', this.el, 'type');\n\n this.setStepItemProps();\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 componentDidLoad() {\n this.setStepItemProps();\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 get bqSteps(): HTMLBqStepItemElement[] {\n if (!this.stepElem) return [];\n\n const slot = this.stepElem.querySelector('slot');\n return [...slot.assignedElements({ flatten: true })].filter(\n (el: HTMLBqSideMenuItemElement) => el.tagName.toLowerCase() === 'bq-step-item',\n ) as [HTMLBqSideMenuItemElement];\n }\n\n private setStepItemProps = () => {\n this.bqSteps.forEach((bqStepElem: HTMLBqStepItemElement) => {\n bqStepElem.size = this.size;\n bqStepElem.type = this.type;\n });\n };\n\n // private handleChange = (event) => {\n // this.bqChange.emit(event);\n // }\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n const dividerPaddingTop = this.size === 'small' ? 'p-bs-s' : 'p-bs-m';\n\n return (\n <div\n class=\"relative flex w-full items-start justify-between\"\n ref={(div) => (this.stepElem = div)}\n part=\"container\"\n >\n <slot />\n <bq-divider\n class={`absolute -z-10 p-i-s inset-ie-0 inset-is-0 ${dividerPaddingTop}`}\n strokeColor={this.dividerColor}\n strokeThickness={2}\n exportparts=\"base:divider-base,dash-start:divider-dash-start,dash-end:divider-dash-end\"\n />\n </div>\n );\n }\n}\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"bq-steps.types.js","sourceRoot":"","sources":["../../../../../../src/components/steps/bq-steps.types.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,CAAU,CAAC;AAG9D,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,QAAQ,EAAE,OAAO,CAAU,CAAC","sourcesContent":["export const STEPS_TYPE = ['numeric', 'icon', 'dot'] as const;\nexport type TStepsType = (typeof STEPS_TYPE)[number];\n\nexport const STEPS_SIZE = ['medium', 'small'] as const;\nexport type TStepsSize = (typeof STEPS_SIZE)[number];\n"]}
1	+ {"version":3,"file":"bq-steps.types.js","sourceRoot":"","sources":["../../../../../../packages/beeq/src/components/steps/bq-steps.types.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,CAAU,CAAC;AAG9D,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,QAAQ,EAAE,OAAO,CAAU,CAAC","sourcesContent":["export const STEPS_TYPE = ['numeric', 'icon', 'dot'] as const;\nexport type TStepsType = (typeof STEPS_TYPE)[number];\n\nexport const STEPS_SIZE = ['medium', 'small'] as const;\nexport type TStepsSize = (typeof STEPS_SIZE)[number];\n"]}

package/dist/collection/components/switch/bq-switch.js CHANGED Viewed

@@ -2,7 +2,7 @@
  * Built by Endavans
  * © https://beeq.design - Apache 2 License.
  */
-import { h, Host, } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { getTextContent, isNil } from "../../shared/utils";
 /**
  * Toggle switches are digital on/off switches.
@@ -221,11 +221,11 @@ export class BqSwitch {
             'is-disabled': this.disabled,
             'flex-row-reverse': this.reverseOrder,
         };
-        return (h(Host, { key: '630f292d2c6250f3e66209ec100d8f2f987f97f0', class: { 'full-width': this.fullWidth }, style: hostStyle }, h("label", { key: '82377b1b05bc43dc6df06b6fe127e09408e4744c', class: { 'bq-switch group': true, ...labelCssClasses }, part: "base" }, h("input", { key: '65c9f73951a1db95cb684111421e2755f5c92fba', class: "bq-switch--input peer sr-only !bs-[--bq-switch--dot-size] !is-[--bq-switch--width] peer-checked:invisible", type: "checkbox", checked: this.checked, disabled: this.disabled, required: this.required, name: !isNil(this.name) ? this.name : undefined, "aria-label": this.name, "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', onBlur: this.handleOnBlur, onChange: this.handleChange, onFocus: this.handleOnFocus, ref: (input) => (this.inputElem = input), role: "switch", value: this.value }), h("div", { key: 'ddc5c4b1c1d787597cf0157cd529d88ddda8ea20', class: "bq-switch--control relative box-border flex justify-between rounded-full bg-ui-tertiary transition duration-300 bs-[--bq-switch--height] is-[--bq-switch--width] p-b-xs2 p-i-xs2 group-[&.is-checked]:bg-ui-brand", part: "control" }, this.innerLabel === 'icon' && (h("bq-icon", { key: 'baa7ceab4bc243d5e34943ee9f95cb3f74ceca1f', class: "bq-switch--control__icon on", name: "check", color: "icon--alt", role: "img", title: "On", part: "icon-on" })), this.innerLabel === 'icon' && (h("bq-icon", { key: 'ef541c5fa7c51d92bcd15f4d1af84887e250e4aa', class: "bq-switch--control__icon off", name: "x", color: "icon--inverse", role: "img", title: "Off", part: "icon-off" })), h("div", { key: '8d682574ee3eaeb6f93fb08a4c8a170b2e92e924', class: "bq-switch--control__dot", part: "dot" })), h("span", { key: '3c5ca5f5c30d54a4aee643769364b9d9b6b9fd17', class: {
+        return (h(Host, { key: '6bdc7568ea6a4142a48fe9a20bc50abb381486b5', class: { 'full-width': this.fullWidth }, style: hostStyle }, h("label", { key: '504e0876cdf620dc60342d4e10f2c8331c5b4665', class: { 'bq-switch group': true, ...labelCssClasses }, part: "base" }, h("input", { key: '6ae8317be077f19f8d957db7d781a42a33a5e5c8', class: "bq-switch--input peer sr-only !bs-[--bq-switch--dot-size] !is-[--bq-switch--width] peer-checked:invisible", type: "checkbox", checked: this.checked, disabled: this.disabled, required: this.required, name: !isNil(this.name) ? this.name : undefined, "aria-label": this.name, "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', onBlur: this.handleOnBlur, onChange: this.handleChange, onFocus: this.handleOnFocus, ref: (input) => (this.inputElem = input), role: "switch", value: this.value }), h("div", { key: '1e6d95106a816da3bdc7344413fb575e0432f7fd', class: "bq-switch--control relative box-border flex justify-between rounded-full bg-ui-tertiary transition duration-300 bs-[--bq-switch--height] is-[--bq-switch--width] p-b-xs2 p-i-xs2 group-[&.is-checked]:bg-ui-brand", part: "control" }, this.innerLabel === 'icon' && (h("bq-icon", { key: '72ffa2f9628d070a8179dbf0aeb8008c65823904', class: "bq-switch--control__icon on", name: "check", color: "icon--alt", role: "img", title: "On", part: "icon-on" })), this.innerLabel === 'icon' && (h("bq-icon", { key: '45ce86b4eb02f448cb223b8f42d1a3c0e206bacb', class: "bq-switch--control__icon off", name: "x", color: "icon--inverse", role: "img", title: "Off", part: "icon-off" })), h("div", { key: '73a28dd1c1a818c1bdb80c2bcef164499084554a', class: "bq-switch--control__dot", part: "dot" })), h("span", { key: 'a212c040709f86a514d1e8b8c179240b74b70ee2', class: {
                 'bq-switch--label text-m font-medium leading-regular text-primary transition-colors duration-300': true,
                 'ms-s': this.hasLabel && !this.reverseOrder,
                 'me-s': this.hasLabel && this.reverseOrder,
-            }, ref: (span) => (this.labelElem = span), part: "label" }, h("slot", { key: '85aed39ed5e1736a553297168999dc6c8eb72fd9', onSlotchange: this.handleSlotChange })))));
+            }, ref: (span) => (this.labelElem = span), part: "label" }, h("slot", { key: '9046509ba40c5d51c5af7a9360fd2825ab5209d1', onSlotchange: this.handleSlotChange })))));
     }
     static get is() { return "bq-switch"; }
     static get encapsulation() { return "shadow"; }
@@ -245,6 +245,7 @@ export class BqSwitch {
         return {
             "backgroundOnHover": {
                 "type": "boolean",
+                "attribute": "background-on-hover",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -259,12 +260,12 @@ export class BqSwitch {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "background-on-hover",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "checked": {
                 "type": "boolean",
+                "attribute": "checked",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -279,12 +280,12 @@ export class BqSwitch {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "checked",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -299,12 +300,12 @@ export class BqSwitch {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "formValidationMessage": {
                 "type": "string",
+                "attribute": "form-validation-message",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -319,11 +320,11 @@ export class BqSwitch {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "form-validation-message",
                 "reflect": false
             },
             "fullWidth": {
                 "type": "boolean",
+                "attribute": "full-width",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -338,12 +339,12 @@ export class BqSwitch {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "full-width",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "innerLabel": {
                 "type": "string",
+                "attribute": "inner-label",
                 "mutable": false,
                 "complexType": {
                     "original": "TSwitchInnerLabel",
@@ -364,12 +365,12 @@ export class BqSwitch {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "inner-label",
                 "reflect": true,
                 "defaultValue": "'default'"
             },
             "justifyContent": {
                 "type": "string",
+                "attribute": "justify-content",
                 "mutable": false,
                 "complexType": {
                     "original": "TSwitchJustifyContent",
@@ -390,12 +391,12 @@ export class BqSwitch {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "justify-content",
                 "reflect": true,
                 "defaultValue": "'start'"
             },
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -410,11 +411,11 @@ export class BqSwitch {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "name",
                 "reflect": true
             },
             "required": {
                 "type": "boolean",
+                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -429,12 +430,12 @@ export class BqSwitch {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "required",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "reverseOrder": {
                 "type": "boolean",
+                "attribute": "reverse-order",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -449,12 +450,12 @@ export class BqSwitch {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "reverse-order",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "value": {
                 "type": "string",
+                "attribute": "value",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -469,7 +470,6 @@ export class BqSwitch {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": true
             }
         };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"bq-switch.js","sourceRoot":"","sources":["../../../../../../src/components/switch/bq-switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n AttachInternals,\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\n\nimport { TSwitchInnerLabel, TSwitchJustifyContent } from './bq-switch.types';\nimport { getTextContent, isNil } from '../../shared/utils';\n\n/*\n Toggle switches are digital on/off switches.\n * They should provide immediate results, giving users the freedom to control their preferences as needed.\n \n @example How to use it\n * ```html\n * <bq-switch inner-label=\"default\" justify-content=\"start\" name=\"bq-switch\" value=\"Switch value\">\n * Toggle me!\n * </bq-switch>\n * ```\n \n @documentation https://www.beeq.design/3d466e231/p/49d9c9-switch\n * @status stable\n \n @dependency bq-icon\n \n @attr {boolean} background-on-hover - If `true`, a background will be displayed on hover\n * @attr {boolean} checked - It indicates whether if the switch is `ON` by default (when the page loads)\n * @attr {boolean} disabled - If `true`, the switch control will be disabled and no interaction will be allowed\n * @attr {string} form-validation-message - The native form validation message\n * @attr {boolean} full-width - If `true`, the component will take the full width space available on the parent container\n * @attr {\"default\" \| \"icon\"} inner-label - It indicates how to to display the on/off marks inside the control, with icons or none (default)\n * @attr {\"start\" \| \"end\" \| \"center\" \| \"space-between\" \| \"space-around\" \| \"space-evenly\"} justify-content - It defines how to distribute the space between and around the control and the label text\n * @attr {string} name - Name of the 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 switch `ON` the element before the owning form can be submitted\n * @attr {boolean} reverse-order - If `true`, the order of the control and the label text will be changed\n * @attr {string} value - The input control's value, submitted as a name/value pair with form data\n \n @event bqChange - Handler to be called when the switch state changes\n * @event bqFocus - Handler to be called when the switch gets focus\n * @event bqBlur - Handler to be called when the switch loses focus\n \n @slot - The switch label text\n \n @part base - HTML `<label>` root container\n * @part control - HTML `<div>` element for the custom control\n * @part dot - HTML `<div>` element that acts as changing dot\n * @part icon-off - HTMLBqIcon `<pk-icon>` element used as the `OFF` mark inner label\n * @part icon-on - HTMLBqIcon `<pk-icon>` element used as the `ON` mark inner label\n * @part label - HTML `<span>` element that holds the label text\n \n @cssprop --bq-switch--height - Switch height\n * @cssprop --bq-switch--justify-content - Switch justify content\n * @cssprop --bq-switch--width - Switch width\n * @cssprop --bq-switch--dot-size - Switch dot size\n /\n@Component({\n tag: 'bq-switch',\n styleUrl: './scss/bq-switch.scss',\n formAssociated: true,\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class BqSwitch {\n // Own Properties\n // ====================\n\n private labelElem: HTMLSpanElement;\n private inputElem: HTMLInputElement;\n private prevCheckedValue: boolean;\n\n // Reference to host HTML element\n // ===================================\n\n @AttachInternals() internals!: ElementInternals;\n @Element() el!: HTMLBqSwitchElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n @State() hasLabel = false;\n\n // Public Property API\n // ========================\n\n /* If true, a background will be displayed on hover /\n @Prop({ reflect: true }) backgroundOnHover?: boolean = false;\n\n /* It indicates whether if the switch is `ON` by default (when the page loads) /\n @Prop({ reflect: true, mutable: true }) checked?: boolean = false;\n\n /* If true, the switch control will be disabled and no interaction will be allowed /\n @Prop({ reflect: true }) disabled?: boolean = false;\n\n /* The native form validation message /\n @Prop({ mutable: true }) formValidationMessage?: string;\n\n /* If true, the component will take the full width space available on the parent container /\n @Prop({ reflect: true }) fullWidth?: boolean = false;\n\n /* It indicates how to to display the on/off marks inside the control, with icons or none (default) /\n @Prop({ reflect: true }) innerLabel?: TSwitchInnerLabel = 'default';\n\n /\n It defines how to distribute the space between and around the control and the label text\n * (https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)\n /\n @Prop({ reflect: true }) justifyContent?: TSwitchJustifyContent = 'start';\n\n /* Name of the 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 switch `ON` the element before the owning form can be submitted /\n @Prop({ reflect: true }) required?: boolean = false;\n\n /* If true, the order of the control and the label text will be changed /\n @Prop({ reflect: true }) reverseOrder?: boolean = false;\n\n /* The input control's value, submitted as a name/value pair with form data. /\n @Prop({ reflect: true }) value?: string;\n\n // Prop lifecycle events\n // =======================\n\n @Watch('required')\n handleRequiredChange() {\n this.updateFormValidity();\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /* Handler to be called when the switch state changes /\n @Event() bqChange: EventEmitter<{ checked: boolean }>;\n\n /* Handler to be called when the switch gets focus /\n @Event() bqFocus: EventEmitter<HTMLBqSwitchElement>;\n\n /* Handler to be called when the switch loses focus /\n @Event() bqBlur: EventEmitter<HTMLBqSwitchElement>;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n componentWillLoad() {\n this.prevCheckedValue = this.checked;\n }\n\n componentDidLoad() {\n this.handleSlotChange();\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 this.bqChange.emit({ checked: this.checked });\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.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 handleChange = () => {\n this.checked = !this.checked;\n this.inputElem.setAttribute('checked', `${this.checked}`);\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 private handleSlotChange = () => {\n const slot = this.labelElem?.querySelector('slot') ?? null;\n if (isNil(slot)) return;\n\n this.hasLabel = !!getTextContent(slot, { recurse: true }).length;\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 component (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 switch component 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 // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n const hostStyle = {\n ...(this.justifyContent && { '--bq-switch--justify-content': this.justifyContent }),\n };\n\n const labelCssClasses = {\n 'has-background': this.backgroundOnHover,\n 'is-checked': this.checked,\n 'is-disabled': this.disabled,\n 'flex-row-reverse': this.reverseOrder,\n };\n\n return (\n <Host class={{ 'full-width': this.fullWidth }} style={hostStyle}>\n <label class={{ 'bq-switch group': true, ...labelCssClasses }} part=\"base\">\n {/ Hidden native HTML input /}\n <input\n class=\"bq-switch--input peer sr-only !bs-[--bq-switch--dot-size] !is-[--bq-switch--width] peer-checked:invisible\"\n type=\"checkbox\"\n checked={this.checked}\n disabled={this.disabled}\n required={this.required}\n name={!isNil(this.name) ? this.name : undefined}\n aria-label={this.name}\n aria-checked={this.checked ? 'true' : 'false'}\n aria-disabled={this.disabled ? 'true' : 'false'}\n onBlur={this.handleOnBlur}\n onChange={this.handleChange}\n onFocus={this.handleOnFocus}\n ref={(input) => (this.inputElem = input)}\n role=\"switch\"\n value={this.value}\n />\n {/ Control /}\n <div\n class=\"bq-switch--control relative box-border flex justify-between rounded-full bg-ui-tertiary transition duration-300 bs-[--bq-switch--height] is-[--bq-switch--width] p-b-xs2 p-i-xs2 group-[&.is-checked]:bg-ui-brand\"\n part=\"control\"\n >\n {this.innerLabel === 'icon' && (\n <bq-icon\n class=\"bq-switch--control__icon on\"\n name=\"check\"\n color=\"icon--alt\"\n role=\"img\"\n title=\"On\"\n part=\"icon-on\"\n />\n )}\n {this.innerLabel === 'icon' && (\n <bq-icon\n class=\"bq-switch--control__icon off\"\n name=\"x\"\n color=\"icon--inverse\"\n role=\"img\"\n title=\"Off\"\n part=\"icon-off\"\n />\n )}\n {/ Dot /}\n <div class=\"bq-switch--control__dot\" part=\"dot\" />\n </div>\n {/ Label */}\n <span\n class={{\n 'bq-switch--label text-m font-medium leading-regular text-primary transition-colors duration-300': true,\n 'ms-s': this.hasLabel && !this.reverseOrder,\n 'me-s': this.hasLabel && this.reverseOrder,\n }}\n ref={(span) => (this.labelElem = span)}\n part=\"label\"\n >\n <slot onSlotchange={this.handleSlotChange} />\n </span>\n </label>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"bq-switch.js","sourceRoot":"","sources":["../../../../../../packages/beeq/src/components/switch/bq-switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import { AttachInternals, Component, Element, Event, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\nimport type { TSwitchInnerLabel, TSwitchJustifyContent } from './bq-switch.types';\nimport { getTextContent, isNil } from '../../shared/utils';\n\n/*\n Toggle switches are digital on/off switches.\n * They should provide immediate results, giving users the freedom to control their preferences as needed.\n \n @example How to use it\n * ```html\n * <bq-switch inner-label=\"default\" justify-content=\"start\" name=\"bq-switch\" value=\"Switch value\">\n * Toggle me!\n * </bq-switch>\n * ```\n \n @documentation https://www.beeq.design/3d466e231/p/49d9c9-switch\n * @status stable\n \n @dependency bq-icon\n \n @attr {boolean} background-on-hover - If `true`, a background will be displayed on hover\n * @attr {boolean} checked - It indicates whether if the switch is `ON` by default (when the page loads)\n * @attr {boolean} disabled - If `true`, the switch control will be disabled and no interaction will be allowed\n * @attr {string} form-validation-message - The native form validation message\n * @attr {boolean} full-width - If `true`, the component will take the full width space available on the parent container\n * @attr {\"default\" \| \"icon\"} inner-label - It indicates how to to display the on/off marks inside the control, with icons or none (default)\n * @attr {\"start\" \| \"end\" \| \"center\" \| \"space-between\" \| \"space-around\" \| \"space-evenly\"} justify-content - It defines how to distribute the space between and around the control and the label text\n * @attr {string} name - Name of the 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 switch `ON` the element before the owning form can be submitted\n * @attr {boolean} reverse-order - If `true`, the order of the control and the label text will be changed\n * @attr {string} value - The input control's value, submitted as a name/value pair with form data\n \n @event bqChange - Handler to be called when the switch state changes\n * @event bqFocus - Handler to be called when the switch gets focus\n * @event bqBlur - Handler to be called when the switch loses focus\n \n @slot - The switch label text\n \n @part base - HTML `<label>` root container\n * @part control - HTML `<div>` element for the custom control\n * @part dot - HTML `<div>` element that acts as changing dot\n * @part icon-off - HTMLBqIcon `<pk-icon>` element used as the `OFF` mark inner label\n * @part icon-on - HTMLBqIcon `<pk-icon>` element used as the `ON` mark inner label\n * @part label - HTML `<span>` element that holds the label text\n \n @cssprop --bq-switch--height - Switch height\n * @cssprop --bq-switch--justify-content - Switch justify content\n * @cssprop --bq-switch--width - Switch width\n * @cssprop --bq-switch--dot-size - Switch dot size\n /\n@Component({\n tag: 'bq-switch',\n styleUrl: './scss/bq-switch.scss',\n formAssociated: true,\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class BqSwitch {\n // Own Properties\n // ====================\n\n private labelElem: HTMLSpanElement;\n private inputElem: HTMLInputElement;\n private prevCheckedValue: boolean;\n\n // Reference to host HTML element\n // ===================================\n\n @AttachInternals() internals!: ElementInternals;\n @Element() el!: HTMLBqSwitchElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n @State() hasLabel = false;\n\n // Public Property API\n // ========================\n\n /* If true, a background will be displayed on hover /\n @Prop({ reflect: true }) backgroundOnHover?: boolean = false;\n\n /* It indicates whether if the switch is `ON` by default (when the page loads) /\n @Prop({ reflect: true, mutable: true }) checked?: boolean = false;\n\n /* If true, the switch control will be disabled and no interaction will be allowed /\n @Prop({ reflect: true }) disabled?: boolean = false;\n\n /* The native form validation message /\n @Prop({ mutable: true }) formValidationMessage?: string;\n\n /* If true, the component will take the full width space available on the parent container /\n @Prop({ reflect: true }) fullWidth?: boolean = false;\n\n /* It indicates how to to display the on/off marks inside the control, with icons or none (default) /\n @Prop({ reflect: true }) innerLabel?: TSwitchInnerLabel = 'default';\n\n /\n It defines how to distribute the space between and around the control and the label text\n * (https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)\n /\n @Prop({ reflect: true }) justifyContent?: TSwitchJustifyContent = 'start';\n\n /* Name of the 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 switch `ON` the element before the owning form can be submitted /\n @Prop({ reflect: true }) required?: boolean = false;\n\n /* If true, the order of the control and the label text will be changed /\n @Prop({ reflect: true }) reverseOrder?: boolean = false;\n\n /* The input control's value, submitted as a name/value pair with form data. /\n @Prop({ reflect: true }) value?: string;\n\n // Prop lifecycle events\n // =======================\n\n @Watch('required')\n handleRequiredChange() {\n this.updateFormValidity();\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /* Handler to be called when the switch state changes /\n @Event() bqChange: EventEmitter<{ checked: boolean }>;\n\n /* Handler to be called when the switch gets focus /\n @Event() bqFocus: EventEmitter<HTMLBqSwitchElement>;\n\n /* Handler to be called when the switch loses focus /\n @Event() bqBlur: EventEmitter<HTMLBqSwitchElement>;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n componentWillLoad() {\n this.prevCheckedValue = this.checked;\n }\n\n componentDidLoad() {\n this.handleSlotChange();\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 this.bqChange.emit({ checked: this.checked });\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.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 handleChange = () => {\n this.checked = !this.checked;\n this.inputElem.setAttribute('checked', `${this.checked}`);\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 private handleSlotChange = () => {\n const slot = this.labelElem?.querySelector('slot') ?? null;\n if (isNil(slot)) return;\n\n this.hasLabel = !!getTextContent(slot, { recurse: true }).length;\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 component (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 switch component 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 // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n const hostStyle = {\n ...(this.justifyContent && { '--bq-switch--justify-content': this.justifyContent }),\n };\n\n const labelCssClasses = {\n 'has-background': this.backgroundOnHover,\n 'is-checked': this.checked,\n 'is-disabled': this.disabled,\n 'flex-row-reverse': this.reverseOrder,\n };\n\n return (\n <Host class={{ 'full-width': this.fullWidth }} style={hostStyle}>\n <label class={{ 'bq-switch group': true, ...labelCssClasses }} part=\"base\">\n {/ Hidden native HTML input /}\n <input\n class=\"bq-switch--input peer sr-only !bs-[--bq-switch--dot-size] !is-[--bq-switch--width] peer-checked:invisible\"\n type=\"checkbox\"\n checked={this.checked}\n disabled={this.disabled}\n required={this.required}\n name={!isNil(this.name) ? this.name : undefined}\n aria-label={this.name}\n aria-checked={this.checked ? 'true' : 'false'}\n aria-disabled={this.disabled ? 'true' : 'false'}\n onBlur={this.handleOnBlur}\n onChange={this.handleChange}\n onFocus={this.handleOnFocus}\n ref={(input) => (this.inputElem = input)}\n role=\"switch\"\n value={this.value}\n />\n {/ Control /}\n <div\n class=\"bq-switch--control relative box-border flex justify-between rounded-full bg-ui-tertiary transition duration-300 bs-[--bq-switch--height] is-[--bq-switch--width] p-b-xs2 p-i-xs2 group-[&.is-checked]:bg-ui-brand\"\n part=\"control\"\n >\n {this.innerLabel === 'icon' && (\n <bq-icon\n class=\"bq-switch--control__icon on\"\n name=\"check\"\n color=\"icon--alt\"\n role=\"img\"\n title=\"On\"\n part=\"icon-on\"\n />\n )}\n {this.innerLabel === 'icon' && (\n <bq-icon\n class=\"bq-switch--control__icon off\"\n name=\"x\"\n color=\"icon--inverse\"\n role=\"img\"\n title=\"Off\"\n part=\"icon-off\"\n />\n )}\n {/ Dot /}\n <div class=\"bq-switch--control__dot\" part=\"dot\" />\n </div>\n {/ Label */}\n <span\n class={{\n 'bq-switch--label text-m font-medium leading-regular text-primary transition-colors duration-300': true,\n 'ms-s': this.hasLabel && !this.reverseOrder,\n 'me-s': this.hasLabel && this.reverseOrder,\n }}\n ref={(span) => (this.labelElem = span)}\n part=\"label\"\n >\n <slot onSlotchange={this.handleSlotChange} />\n </span>\n </label>\n </Host>\n );\n }\n}\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"bq-switch.types.js","sourceRoot":"","sources":["../../../../../../src/components/switch/bq-switch.types.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,SAAS,EAAE,MAAM,CAAU,CAAC;AAG/D,MAAM,CAAC,MAAM,sBAAsB,GAAG;IACpC,QAAQ;IACR,KAAK;IACL,UAAU;IACV,YAAY;IACZ,SAAS;IACT,SAAS;IACT,MAAM;IACN,QAAQ;IACR,OAAO;IACP,cAAc;IACd,eAAe;IACf,cAAc;IACd,OAAO;IACP,SAAS;CACD,CAAC","sourcesContent":["export const SWITCH_INNER_LABEL = ['default', 'icon'] as const;\nexport type TSwitchInnerLabel = (typeof SWITCH_INNER_LABEL)[number];\n\nexport const SWITCH_JUSTIFY_CONTENT = [\n 'center',\n 'end',\n 'flex-end',\n 'flex-start',\n 'inherit',\n 'initial',\n 'left',\n 'normal',\n 'right',\n 'space-around',\n 'space-between',\n 'space-evenly',\n 'start',\n 'stretch',\n] as const;\nexport type TSwitchJustifyContent = (typeof SWITCH_JUSTIFY_CONTENT)[number];\n"]}
1	+ {"version":3,"file":"bq-switch.types.js","sourceRoot":"","sources":["../../../../../../packages/beeq/src/components/switch/bq-switch.types.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,SAAS,EAAE,MAAM,CAAU,CAAC;AAG/D,MAAM,CAAC,MAAM,sBAAsB,GAAG;IACpC,QAAQ;IACR,KAAK;IACL,UAAU;IACV,YAAY;IACZ,SAAS;IACT,SAAS;IACT,MAAM;IACN,QAAQ;IACR,OAAO;IACP,cAAc;IACd,eAAe;IACf,cAAc;IACd,OAAO;IACP,SAAS;CACD,CAAC","sourcesContent":["export const SWITCH_INNER_LABEL = ['default', 'icon'] as const;\nexport type TSwitchInnerLabel = (typeof SWITCH_INNER_LABEL)[number];\n\nexport const SWITCH_JUSTIFY_CONTENT = [\n 'center',\n 'end',\n 'flex-end',\n 'flex-start',\n 'inherit',\n 'initial',\n 'left',\n 'normal',\n 'right',\n 'space-around',\n 'space-between',\n 'space-evenly',\n 'start',\n 'stretch',\n] as const;\nexport type TSwitchJustifyContent = (typeof SWITCH_JUSTIFY_CONTENT)[number];\n"]}

package/dist/collection/components/tab/bq-tab.js CHANGED Viewed

@@ -174,11 +174,11 @@ export class BqTab {
     // Always the last one in the class.
     // ===================================
     render() {
-        return (h("button", { key: '5c7864ae3c97b025b650b3d844c9c093d91e3470', ref: (el) => (this.buttonElement = el), class: {
+        return (h("button", { key: 'd6c4707b912d26b523fff60a92af577f067a6709', ref: (el) => (this.buttonElement = el), class: {
                 [`bq-tab bq-tab--${this.size} bq-tab--${this.orientation}-${this.placement}`]: true,
                 'text-brand': this.active,
                 'text-primary': !this.active,
-            }, id: this.tabId, onBlur: this.handleOnBlur, onClick: this.handleClick, onFocus: this.handleOnFocus, onKeyDown: this.handleOnKeyDown, disabled: this.disabled, role: "tab", "aria-controls": this.controls, "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', tabindex: this.tabindex, part: "base" }, h("div", { key: '2d8a47a512dc2393387c95f8327a3fb81a229746', class: "flex items-center justify-center", part: "content" }, h("div", { key: '54d6b13fe9d339bf09a75720a86854a3243d2156', class: "flex", ref: (span) => (this.iconElement = span), part: "icon" }, h("slot", { key: '170fdfc9026dddd09ead92f1bc214a774f4b5a59', name: "icon", onSlotchange: this.handleIconSlotChange })), h("div", { key: 'd3e6bca34a9b7fe6fd1624500a5e16ef8d97d905', class: { 'line-clamp-1': true, 'ms-[--bq-tab--label-icon-gap]': this.hasIcon }, part: "text" }, h("slot", { key: 'a02f8f9f7a5da5e5a49fb384a8627cd9ad559220' })))));
+            }, id: this.tabId, onBlur: this.handleOnBlur, onClick: this.handleClick, onFocus: this.handleOnFocus, onKeyDown: this.handleOnKeyDown, disabled: this.disabled, role: "tab", "aria-controls": this.controls, "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', tabindex: this.tabindex, part: "base" }, h("div", { key: '3522a7c6a51714f625cd5a962cd796600d69d940', class: "flex items-center justify-center", part: "content" }, h("div", { key: 'd378dc06e30d5587eded78933c82c558378009ef', class: "flex", ref: (span) => (this.iconElement = span), part: "icon" }, h("slot", { key: 'f52e10730ef91b7b234dbe4aaa8ec7230be383a2', name: "icon", onSlotchange: this.handleIconSlotChange })), h("div", { key: '7e8ba9ce35d1dff9e9fb5464a03a6acbde533e92', class: { 'line-clamp-1': true, 'ms-[--bq-tab--label-icon-gap]': this.hasIcon }, part: "text" }, h("slot", { key: 'da709ebe8630cea617ace2e0c2c18a54fe3c8332' })))));
     }
     static get is() { return "bq-tab"; }
     static get encapsulation() { return "shadow"; }
@@ -196,6 +196,7 @@ export class BqTab {
         return {
             "active": {
                 "type": "boolean",
+                "attribute": "active",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -210,11 +211,11 @@ export class BqTab {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "active",
                 "reflect": true
             },
             "controls": {
                 "type": "string",
+                "attribute": "controls",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -229,11 +230,11 @@ export class BqTab {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "controls",
                 "reflect": true
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -248,12 +249,12 @@ export class BqTab {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "orientation": {
                 "type": "string",
+                "attribute": "orientation",
                 "mutable": false,
                 "complexType": {
                     "original": "TTabOrientation",
@@ -274,12 +275,12 @@ export class BqTab {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "orientation",
                 "reflect": true,
                 "defaultValue": "'horizontal'"
             },
             "placement": {
                 "type": "string",
+                "attribute": "placement",
                 "mutable": false,
                 "complexType": {
                     "original": "TTabPlacement",
@@ -300,12 +301,12 @@ export class BqTab {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "placement",
                 "reflect": true,
                 "defaultValue": "'start'"
             },
             "size": {
                 "type": "string",
+                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "TTabSize",
@@ -326,12 +327,12 @@ export class BqTab {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
                 "reflect": true,
                 "defaultValue": "'medium'"
             },
             "tabId": {
                 "type": "string",
+                "attribute": "tab-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -346,7 +347,6 @@ export class BqTab {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "tab-id",
                 "reflect": true
             }
         };