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

@beeq/core 1.8.4 → 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 (896) hide show

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":"AAAA,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAIhH,OAAO,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAE3D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AASH,MAAM,OAAO,QAAQ;IACnB,iBAAiB;IACjB,uBAAuB;IAEf,SAAS,CAAkB;IAC3B,SAAS,CAAmB;IAC5B,gBAAgB,CAAU;IAElC,iCAAiC;IACjC,sCAAsC;IAEnB,SAAS,CAAoB;IACrC,EAAE,CAAuB;IAEpC,oBAAoB;IACpB,wCAAwC;IACxC,0CAA0C;IAEjC,QAAQ,GAAG,KAAK,CAAC;IAE1B,sBAAsB;IACtB,2BAA2B;IAE3B,uDAAuD;IAC9B,iBAAiB,GAAa,KAAK,CAAC;IAE7D,kFAAkF;IAC1C,OAAO,GAAa,KAAK,CAAC;IAElE,sFAAsF;IAC7D,QAAQ,GAAa,KAAK,CAAC;IAEpD,yCAAyC;IAChB,qBAAqB,CAAU;IAExD,8FAA8F;IACrE,SAAS,GAAa,KAAK,CAAC;IAErD,wGAAwG;IAC/E,UAAU,GAAuB,SAAS,CAAC;IAEpE;;;OAGG;IACsB,cAAc,GAA2B,OAAO,CAAC;IAE1E,qFAAqF;IAC5D,IAAI,CAAU;IAEvC,qHAAqH;IAC5F,QAAQ,GAAa,KAAK,CAAC;IAEpD,4EAA4E;IACnD,YAAY,GAAa,KAAK,CAAC;IAExD,gFAAgF;IACvD,KAAK,CAAU;IAExC,wBAAwB;IACxB,0BAA0B;IAG1B,oBAAoB;QAClB,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC5B,CAAC;IAED,iBAAiB;IACjB,+CAA+C;IAC/C,iDAAiD;IAEjD,yDAAyD;IAChD,QAAQ,CAAqC;IAEtD,sDAAsD;IAC7C,OAAO,CAAoC;IAEpD,uDAAuD;IAC9C,MAAM,CAAoC;IAEnD,6BAA6B;IAC7B,sCAAsC;IACtC,wCAAwC;IAExC,iBAAiB;QACf,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,OAAO,CAAC;IACvC,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IAED,kBAAkB;QAChB;;;;WAIG;QACH,IAAI,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAC3C,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC;YAC9C,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,OAAO,CAAC;QACvC,CAAC;IACH,CAAC;IAED,sBAAsB;QACpB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAChC,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC5B,CAAC;IAED,iBAAiB;QACf,0CAA0C;QAC1C,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,IAAI,CAAC,SAAS,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC;QAC1C,IAAI,CAAC,SAAS,EAAE,YAAY,CAAC,SAAS,CAAC,CAAC;QACxC,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC5B,CAAC;IAED,YAAY;IACZ,iBAAiB;IAEjB,qBAAqB;IACrB,iDAAiD;IACjD,wBAAwB;IACxB,gCAAgC;IAChC,gDAAgD;IAChD,kDAAkD;IAElD;;;OAGG;IAEH,KAAK,CAAC,MAAM;QACV,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,CAAC;IAC1B,CAAC;IAED;;;OAGG;IAEH,KAAK,CAAC,MAAM;QACV,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,CAAC;IAC1B,CAAC;IAED;;;OAGG;IAEH,KAAK,CAAC,KAAK;QACT,IAAI,CAAC,SAAS,EAAE,IAAI,EAAE,CAAC;IACzB,CAAC;IAED,gBAAgB;IAChB,2BAA2B;IAC3B,wDAAwD;IACxD,0DAA0D;IAElD,YAAY,GAAG,GAAG,EAAE;QAC1B,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,SAAS,EAAE,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC;QAC1D,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAChC,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC5B,CAAC,CAAC;IAEM,aAAa,GAAG,GAAG,EAAE;QAC3B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAC7B,CAAC,CAAC;IAEM,YAAY,GAAG,GAAG,EAAE;QAC1B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAC5B,CAAC,CAAC;IAEM,gBAAgB,GAAG,GAAG,EAAE;QAC9B,MAAM,IAAI,GAAG,IAAI,CAAC,SAAS,EAAE,aAAa,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC;QAC3D,IAAI,KAAK,CAAC,IAAI,CAAC;YAAE,OAAO;QAExB,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,cAAc,CAAC,IAAI,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC;IACnE,CAAC,CAAC;IAEM,YAAY,GAAG,CAAC,OAAgB,EAAE,EAAE;QAC1C,MAAM,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC;QACzC,4CAA4C;QAC5C,+FAA+F;QAC/F,0FAA0F;QAC1F,IAAI,CAAC,SAAS,EAAE,YAAY,CAAC,KAAK,EAAE,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC;IACzD,CAAC,CAAC;IAEM,kBAAkB,GAAG,GAAG,EAAE;QAChC,MAAM,EAAE,qBAAqB,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;QAChF,2BAA2B;QAC3B,SAAS,EAAE,MAAM,CAAC,KAAK,EAAE,CAAC;QAE1B,IAAI,CAAC,CAAC,QAAQ,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC;YAC5B,yFAAyF;YACzF,SAAS,EAAE,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;YAC/B,SAAS,EAAE,WAAW,CAAC,EAAE,CAAC,CAAC;YAC3B,OAAO;QACT,CAAC;QAED,sEAAsE;QACtE,SAAS,EAAE,MAAM,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;QACjC,SAAS,EAAE,WAAW,CAAC,EAAE,YAAY,EAAE,IAAI,EAAE,EAAE,qBAAqB,EAAE,SAAS,CAAC,CAAC;IACnF,CAAC,CAAC;IAEF,oBAAoB;IACpB,oCAAoC;IACpC,sCAAsC;IAEtC,MAAM;QACJ,MAAM,SAAS,GAAG;YAChB,GAAG,CAAC,IAAI,CAAC,cAAc,IAAI,EAAE,8BAA8B,EAAE,IAAI,CAAC,cAAc,EAAE,CAAC;SACpF,CAAC;QAEF,MAAM,eAAe,GAAG;YACtB,gBAAgB,EAAE,IAAI,CAAC,iBAAiB;YACxC,YAAY,EAAE,IAAI,CAAC,OAAO;YAC1B,aAAa,EAAE,IAAI,CAAC,QAAQ;YAC5B,kBAAkB,EAAE,IAAI,CAAC,YAAY;SACtC,CAAC;QAEF,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAE,YAAY,EAAE,IAAI,CAAC,SAAS,EAAE,EAAE,KAAK,EAAE,SAAS;YAC7D,8DAAO,KAAK,EAAE,EAAE,iBAAiB,EAAE,IAAI,EAAE,GAAG,eAAe,EAAE,EAAE,IAAI,EAAC,MAAM;gBAExE,8DACE,KAAK,EAAC,2GAA2G,EACjH,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,gBACnC,IAAI,CAAC,IAAI,kBACP,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,mBAC9B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAC/C,MAAM,EAAE,IAAI,CAAC,YAAY,EACzB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,GAAG,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,EACxC,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,IAAI,CAAC,KAAK,GACjB;gBAEF,4DACE,KAAK,EAAC,mNAAmN,EACzN,IAAI,EAAC,SAAS;oBAEb,IAAI,CAAC,UAAU,KAAK,MAAM,IAAI,CAC7B,gEACE,KAAK,EAAC,6BAA6B,EACnC,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,WAAW,EACjB,IAAI,EAAC,KAAK,EACV,KAAK,EAAC,IAAI,EACV,IAAI,EAAC,SAAS,GACd,CACH;oBACA,IAAI,CAAC,UAAU,KAAK,MAAM,IAAI,CAC7B,gEACE,KAAK,EAAC,8BAA8B,EACpC,IAAI,EAAC,GAAG,EACR,KAAK,EAAC,eAAe,EACrB,IAAI,EAAC,KAAK,EACV,KAAK,EAAC,KAAK,EACX,IAAI,EAAC,UAAU,GACf,CACH;oBAED,4DAAK,KAAK,EAAC,yBAAyB,EAAC,IAAI,EAAC,KAAK,GAAG,CAC9C;gBAEN,6DACE,KAAK,EAAE;wBACL,iGAAiG,EAAE,IAAI;wBACvG,MAAM,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,YAAY;wBAC3C,MAAM,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY;qBAC3C,EACD,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EACtC,IAAI,EAAC,OAAO;oBAEZ,6DAAM,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAI,CACxC,CACD,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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
             }
         };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"bq-tab.js","sourceRoot":"","sources":["../../../../../../src/components/tab/bq-tab.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\n\nimport { TAB_ORIENTATION, TAB_PLACEMENT, TAB_SIZE, TTabOrientation, TTabPlacement, TTabSize } from './bq-tab.types';\nimport { hasSlotContent, validatePropValue } from '../../shared/utils';\n\n/*\n The tab is a user interface element that allows users to navigate between different sections of a page.\n * It should be used inside `<bq-tab-group>` component.\n \n @example How to use it\n * ```html\n * <bq-tab tab-id=\"1\" controls=\"panel-1\">Tab 1</bq-tab>\n * ```\n \n @documentation https://www.beeq.design/3d466e231/p/775321-tabs\n * @status stable\n \n @attr {boolean} active - If `true` tab is active\n * @attr {string} controls - The tab panel id that the tab controls\n * @attr {boolean} disabled - If `true` tab is disabled\n * @attr {string} orientation - The direction that tab should be render\n * @attr {string} placement - The placement that tab should be render\n * @attr {string} size - The size of the tab\n * @attr {string} tab-id - The id of the tab\n \n @event bqClick - Handler to be called when the tab state changes\n * @event bqFocus - Handler to be called when the tab gets focus\n * @event bqBlur - Handler to be called when the tab loses focus\n * @event bqKeyDown - Handler to be called when the tab key is pressed\n \n @method vClick - Simulate a click event on the native `<button>` HTML element used under the hood\n * @method vFocus - Sets focus on the native `<button>` HTML element used under the hood\n * @method vBlur - Remove focus from the native `<button>` HTML element used under the hood\n \n @part base - The HTML button used under the hood.\n * @part content - The HTML `<div>` element that holds the content.\n * @part icon - The HTML `<div>` element that holds the icon content.\n * @part text - The HTML `<div>` element that holds the text content.\n * @part underline - The HTML `<div>` element that display active state.\n \n @cssprop --bq-tab--font-size - Font size\n * @cssprop --bq-tab--font-weight - Font weight\n * @cssprop --bq-tab--icon-size-large - Icon size for large tab\n * @cssprop --bq-tab--icon-size-medium - Icon size for medium tab\n * @cssprop --bq-tab--icon-size-small - Icon size for small tab\n * @cssprop --bq-tab--label-icon-gap - Gap between label and icon\n * @cssprop --bq-tab--line-height - Line height\n * @cssprop --bq-tab--padding-horizontal-large - Horizontal padding for large tab\n * @cssprop --bq-tab--padding-horizontal-medium - Horizontal padding for medium tab\n * @cssprop --bq-tab--padding-horizontal-small - Horizontal padding for small tab\n * @cssprop --bq-tab--padding-vertical-large - Vertical padding for large tab\n * @cssprop --bq-tab--padding-vertical-medium - Vertical padding for medium tab\n * @cssprop --bq-tab--padding-vertical-small - Vertical padding for small tab\n /\n@Component({\n tag: 'bq-tab',\n styleUrl: './scss/bq-tab.scss',\n shadow: true,\n})\nexport class BqTab {\n // Own Properties\n // ====================\n\n private buttonElement: HTMLButtonElement;\n private iconElement: HTMLSpanElement;\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqTabElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n @State() tabIndex: number \| null = null;\n @State() hasIcon: boolean = false;\n\n // Public Property API\n // ========================\n\n /* If true tab is active /\n @Prop({ reflect: true, mutable: true }) active?: boolean;\n\n /* The tab panel id that the tab controls /\n @Prop({ reflect: true }) controls!: string;\n\n /* If true tab is disabled /\n @Prop({ reflect: true }) disabled = false;\n\n /* The direction that tab should be render /\n @Prop({ reflect: true }) orientation?: TTabOrientation = 'horizontal';\n\n /* The placement that tab should be render /\n @Prop({ reflect: true }) placement?: TTabPlacement = 'start';\n\n /* The size of the tab /\n @Prop({ reflect: true }) size: TTabSize = 'medium';\n\n /* The id of the tab /\n @Prop({ reflect: true }) tabId!: string;\n\n // Prop lifecycle events\n // =======================\n\n @Watch('size')\n @Watch('orientation')\n @Watch('placement')\n checkPropValues() {\n validatePropValue(TAB_SIZE, 'medium', this.el, 'size');\n validatePropValue(TAB_ORIENTATION, 'horizontal', this.el, 'orientation');\n validatePropValue(TAB_PLACEMENT, 'start', this.el, 'placement');\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /* Handler to be called when the tab state changes /\n @Event() bqClick: EventEmitter<HTMLBqTabElement>;\n\n /* Handler to be called when the tab gets focus /\n @Event() bqFocus: EventEmitter<HTMLBqTabElement>;\n\n /* Handler to be called when the tab loses focus /\n @Event() bqBlur: EventEmitter<HTMLBqTabElement>;\n\n /* Handler to be called when the tab key is pressed /\n @Event() bqKeyDown: EventEmitter<KeyboardEvent>;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n componentWillLoad() {\n this.checkPropValues();\n }\n\n componentDidLoad() {\n this.handleIconSlotChange();\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 Simulate a click event on the native `<button>` HTML element used under the hood.\n * Use this method instead of the global `element.click()`.\n /\n @Method()\n async vClick() {\n this.buttonElement?.click();\n }\n\n /\n Sets focus on the native `<button>` HTML element used under the hood.\n * Use this method instead of the global `element.focus()`.\n /\n @Method()\n async vFocus() {\n this.buttonElement?.focus();\n }\n\n /\n Remove focus from the native `<button>` HTML element used under the hood.\n * Use this method instead of the global `element.blur()`.\n /\n @Method()\n async vBlur() {\n this.buttonElement?.blur();\n }\n\n /\n @internal Sets tabindex on the native `<button>` HTML element used under the hood.\n * This method is used inside `<bq-tab-group>` to make tab focusable after the active one is focused\n */\n @Method()\n async enableFocus(value: boolean) {\n this.tabIndex = value ? 0 : null;\n }\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n private handleClick = () => {\n this.active = true;\n this.bqClick.emit(this.el);\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 handleOnKeyDown = (event: KeyboardEvent) => {\n this.bqKeyDown.emit(event);\n };\n\n private handleIconSlotChange = () => {\n this.hasIcon = hasSlotContent(this.iconElement, 'icon');\n };\n\n private get tabindex(): string {\n // NOTE: this.active is undefined when is not part of bq-tab-group\n return `${this.tabIndex ?? -1 + +(this.active ?? 1)}`;\n }\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n return (\n <button\n ref={(el) => (this.buttonElement = el)}\n class={{\n [`bq-tab bq-tab--${this.size} bq-tab--${this.orientation}-${this.placement}`]: true,\n 'text-brand': this.active,\n 'text-primary': !this.active,\n }}\n id={this.tabId}\n onBlur={this.handleOnBlur}\n onClick={this.handleClick}\n onFocus={this.handleOnFocus}\n onKeyDown={this.handleOnKeyDown}\n disabled={this.disabled}\n role=\"tab\"\n aria-controls={this.controls}\n aria-disabled={this.disabled ? 'true' : 'false'}\n aria-selected={this.active ? 'true' : 'false'}\n tabindex={this.tabindex}\n part=\"base\"\n >\n <div class=\"flex items-center justify-center\" part=\"content\">\n <div class=\"flex\" ref={(span: HTMLSpanElement) => (this.iconElement = span)} part=\"icon\">\n <slot name=\"icon\" onSlotchange={this.handleIconSlotChange} />\n </div>\n <div class={{ 'line-clamp-1': true, 'ms-[--bq-tab--label-icon-gap]': this.hasIcon }} part=\"text\">\n <slot />\n </div>\n </div>\n </button>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"bq-tab.js","sourceRoot":"","sources":["../../../../../../packages/beeq/src/components/tab/bq-tab.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, h, Method, Prop, State, Watch } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\nimport { TAB_ORIENTATION, TAB_PLACEMENT, TAB_SIZE } from './bq-tab.types';\nimport type { TTabOrientation, TTabPlacement, TTabSize } from './bq-tab.types';\nimport { hasSlotContent, validatePropValue } from '../../shared/utils';\n\n/*\n The tab is a user interface element that allows users to navigate between different sections of a page.\n * It should be used inside `<bq-tab-group>` component.\n \n @example How to use it\n * ```html\n * <bq-tab tab-id=\"1\" controls=\"panel-1\">Tab 1</bq-tab>\n * ```\n \n @documentation https://www.beeq.design/3d466e231/p/775321-tabs\n * @status stable\n \n @attr {boolean} active - If `true` tab is active\n * @attr {string} controls - The tab panel id that the tab controls\n * @attr {boolean} disabled - If `true` tab is disabled\n * @attr {string} orientation - The direction that tab should be render\n * @attr {string} placement - The placement that tab should be render\n * @attr {string} size - The size of the tab\n * @attr {string} tab-id - The id of the tab\n \n @event bqClick - Handler to be called when the tab state changes\n * @event bqFocus - Handler to be called when the tab gets focus\n * @event bqBlur - Handler to be called when the tab loses focus\n * @event bqKeyDown - Handler to be called when the tab key is pressed\n \n @method vClick - Simulate a click event on the native `<button>` HTML element used under the hood\n * @method vFocus - Sets focus on the native `<button>` HTML element used under the hood\n * @method vBlur - Remove focus from the native `<button>` HTML element used under the hood\n \n @part base - The HTML button used under the hood.\n * @part content - The HTML `<div>` element that holds the content.\n * @part icon - The HTML `<div>` element that holds the icon content.\n * @part text - The HTML `<div>` element that holds the text content.\n * @part underline - The HTML `<div>` element that display active state.\n \n @cssprop --bq-tab--font-size - Font size\n * @cssprop --bq-tab--font-weight - Font weight\n * @cssprop --bq-tab--icon-size-large - Icon size for large tab\n * @cssprop --bq-tab--icon-size-medium - Icon size for medium tab\n * @cssprop --bq-tab--icon-size-small - Icon size for small tab\n * @cssprop --bq-tab--label-icon-gap - Gap between label and icon\n * @cssprop --bq-tab--line-height - Line height\n * @cssprop --bq-tab--padding-horizontal-large - Horizontal padding for large tab\n * @cssprop --bq-tab--padding-horizontal-medium - Horizontal padding for medium tab\n * @cssprop --bq-tab--padding-horizontal-small - Horizontal padding for small tab\n * @cssprop --bq-tab--padding-vertical-large - Vertical padding for large tab\n * @cssprop --bq-tab--padding-vertical-medium - Vertical padding for medium tab\n * @cssprop --bq-tab--padding-vertical-small - Vertical padding for small tab\n /\n@Component({\n tag: 'bq-tab',\n styleUrl: './scss/bq-tab.scss',\n shadow: true,\n})\nexport class BqTab {\n // Own Properties\n // ====================\n\n private buttonElement: HTMLButtonElement;\n private iconElement: HTMLSpanElement;\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqTabElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n @State() tabIndex: number \| null = null;\n @State() hasIcon: boolean = false;\n\n // Public Property API\n // ========================\n\n /* If true tab is active /\n @Prop({ reflect: true, mutable: true }) active?: boolean;\n\n /* The tab panel id that the tab controls /\n @Prop({ reflect: true }) controls!: string;\n\n /* If true tab is disabled /\n @Prop({ reflect: true }) disabled = false;\n\n /* The direction that tab should be render /\n @Prop({ reflect: true }) orientation?: TTabOrientation = 'horizontal';\n\n /* The placement that tab should be render /\n @Prop({ reflect: true }) placement?: TTabPlacement = 'start';\n\n /* The size of the tab /\n @Prop({ reflect: true }) size: TTabSize = 'medium';\n\n /* The id of the tab /\n @Prop({ reflect: true }) tabId!: string;\n\n // Prop lifecycle events\n // =======================\n\n @Watch('size')\n @Watch('orientation')\n @Watch('placement')\n checkPropValues() {\n validatePropValue(TAB_SIZE, 'medium', this.el, 'size');\n validatePropValue(TAB_ORIENTATION, 'horizontal', this.el, 'orientation');\n validatePropValue(TAB_PLACEMENT, 'start', this.el, 'placement');\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /* Handler to be called when the tab state changes /\n @Event() bqClick: EventEmitter<HTMLBqTabElement>;\n\n /* Handler to be called when the tab gets focus /\n @Event() bqFocus: EventEmitter<HTMLBqTabElement>;\n\n /* Handler to be called when the tab loses focus /\n @Event() bqBlur: EventEmitter<HTMLBqTabElement>;\n\n /* Handler to be called when the tab key is pressed /\n @Event() bqKeyDown: EventEmitter<KeyboardEvent>;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n componentWillLoad() {\n this.checkPropValues();\n }\n\n componentDidLoad() {\n this.handleIconSlotChange();\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 Simulate a click event on the native `<button>` HTML element used under the hood.\n * Use this method instead of the global `element.click()`.\n /\n @Method()\n async vClick() {\n this.buttonElement?.click();\n }\n\n /\n Sets focus on the native `<button>` HTML element used under the hood.\n * Use this method instead of the global `element.focus()`.\n /\n @Method()\n async vFocus() {\n this.buttonElement?.focus();\n }\n\n /\n Remove focus from the native `<button>` HTML element used under the hood.\n * Use this method instead of the global `element.blur()`.\n /\n @Method()\n async vBlur() {\n this.buttonElement?.blur();\n }\n\n /\n @internal Sets tabindex on the native `<button>` HTML element used under the hood.\n * This method is used inside `<bq-tab-group>` to make tab focusable after the active one is focused\n */\n @Method()\n async enableFocus(value: boolean) {\n this.tabIndex = value ? 0 : null;\n }\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n private handleClick = () => {\n this.active = true;\n this.bqClick.emit(this.el);\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 handleOnKeyDown = (event: KeyboardEvent) => {\n this.bqKeyDown.emit(event);\n };\n\n private handleIconSlotChange = () => {\n this.hasIcon = hasSlotContent(this.iconElement, 'icon');\n };\n\n private get tabindex(): string {\n // NOTE: this.active is undefined when is not part of bq-tab-group\n return `${this.tabIndex ?? -1 + +(this.active ?? 1)}`;\n }\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n return (\n <button\n ref={(el) => (this.buttonElement = el)}\n class={{\n [`bq-tab bq-tab--${this.size} bq-tab--${this.orientation}-${this.placement}`]: true,\n 'text-brand': this.active,\n 'text-primary': !this.active,\n }}\n id={this.tabId}\n onBlur={this.handleOnBlur}\n onClick={this.handleClick}\n onFocus={this.handleOnFocus}\n onKeyDown={this.handleOnKeyDown}\n disabled={this.disabled}\n role=\"tab\"\n aria-controls={this.controls}\n aria-disabled={this.disabled ? 'true' : 'false'}\n aria-selected={this.active ? 'true' : 'false'}\n tabindex={this.tabindex}\n part=\"base\"\n >\n <div class=\"flex items-center justify-center\" part=\"content\">\n <div class=\"flex\" ref={(span: HTMLSpanElement) => (this.iconElement = span)} part=\"icon\">\n <slot name=\"icon\" onSlotchange={this.handleIconSlotChange} />\n </div>\n <div class={{ 'line-clamp-1': true, 'ms-[--bq-tab--label-icon-gap]': this.hasIcon }} part=\"text\">\n <slot />\n </div>\n </div>\n </button>\n );\n }\n}\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"bq-tab.types.js","sourceRoot":"","sources":["../../../../../../src/components/tab/bq-tab.types.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAU,CAAC;AAG9D,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,YAAY,EAAE,UAAU,CAAU,CAAC;AAGnE,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,OAAO,EAAE,KAAK,CAAU,CAAC","sourcesContent":["export const TAB_SIZE = ['small', 'medium', 'large'] as const;\nexport type TTabSize = (typeof TAB_SIZE)[number];\n\nexport const TAB_ORIENTATION = ['horizontal', 'vertical'] as const;\nexport type TTabOrientation = (typeof TAB_ORIENTATION)[number];\n\nexport const TAB_PLACEMENT = ['start', 'end'] as const;\nexport type TTabPlacement = (typeof TAB_PLACEMENT)[number];\n"]}
1	+ {"version":3,"file":"bq-tab.types.js","sourceRoot":"","sources":["../../../../../../packages/beeq/src/components/tab/bq-tab.types.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAU,CAAC;AAG9D,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,YAAY,EAAE,UAAU,CAAU,CAAC;AAGnE,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,OAAO,EAAE,KAAK,CAAU,CAAC","sourcesContent":["export const TAB_SIZE = ['small', 'medium', 'large'] as const;\nexport type TTabSize = (typeof TAB_SIZE)[number];\n\nexport const TAB_ORIENTATION = ['horizontal', 'vertical'] as const;\nexport type TTabOrientation = (typeof TAB_ORIENTATION)[number];\n\nexport const TAB_PLACEMENT = ['start', 'end'] as const;\nexport type TTabPlacement = (typeof TAB_PLACEMENT)[number];\n"]}

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

@@ -4,7 +4,7 @@
  */
 import { h, Host } from "@stencil/core";
 import { debounce, getNextElement, isHTMLElement, isNil, validatePropValue } from "../../shared/utils";
-import { TAB_ORIENTATION, TAB_PLACEMENT, TAB_SIZE, } from "../tab/bq-tab.types";
+import { TAB_ORIENTATION, TAB_PLACEMENT, TAB_SIZE } from "../tab/bq-tab.types";
 /**
  * The tab group is a user interface element that allows users wrap a set of tab items.
  *
@@ -192,13 +192,13 @@ export class BqTabGroup {
     // Always the last one in the class.
     // ===================================
     render() {
-        return (h(Host, { key: '715f9f78383311d64d0ae3a6930c60d8f491eb7f', class: { 'inline-block': this.orientation === 'vertical' } }, h("div", { key: '5c1ea69716bdbdd14fbae34907bab7e802deaaf7', class: {
+        return (h(Host, { key: '836652e248d3c8643b674b2f6689e94d063f3dde', class: { 'inline-block': this.orientation === 'vertical' } }, h("div", { key: 'a6fd17d9f7baed6988780dd3bd6d0141cb2882b7', class: {
                 [`bq-tab-group bq-tab-group--${this.orientation}-${this.placement} flex is-full`]: true,
                 'no-divider': this.disableDivider,
-            }, part: "base" }, h("div", { key: '3cc0d4ef451734cc5b07ea28501a9845dc590232', class: {
+            }, part: "base" }, h("div", { key: '4999bf2bb14870fa73ff99571d99e479ae88ac63', class: {
                 'bq-tab-group--container flex overflow-x-auto': true,
                 'flex-col': this.orientation !== 'horizontal',
-            }, role: "tablist", part: "tabs" }, h("slot", { key: '7779891ab886bd809f1675d9c46fb15fb9d68be9' })))));
+            }, role: "tablist", part: "tabs" }, h("slot", { key: '6bad6cac0e024d0fabfc130f2bddeb4b9224a2d5' })))));
     }
     static get is() { return "bq-tab-group"; }
     static get encapsulation() { return "shadow"; }
@@ -216,6 +216,7 @@ export class BqTabGroup {
         return {
             "debounceTime": {
                 "type": "number",
+                "attribute": "debounce-time",
                 "mutable": true,
                 "complexType": {
                     "original": "number",
@@ -230,12 +231,12 @@ export class BqTabGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "debounce-time",
                 "reflect": true,
                 "defaultValue": "0"
             },
             "disableDivider": {
                 "type": "boolean",
+                "attribute": "disable-divider",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -250,12 +251,12 @@ export class BqTabGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disable-divider",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "orientation": {
                 "type": "string",
+                "attribute": "orientation",
                 "mutable": false,
                 "complexType": {
                     "original": "TTabOrientation",
@@ -276,12 +277,12 @@ export class BqTabGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "orientation",
                 "reflect": true,
                 "defaultValue": "'horizontal'"
             },
             "placement": {
                 "type": "string",
+                "attribute": "placement",
                 "mutable": false,
                 "complexType": {
                     "original": "TTabPlacement",
@@ -302,12 +303,12 @@ export class BqTabGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "placement",
                 "reflect": true,
                 "defaultValue": "'start'"
             },
             "size": {
                 "type": "string",
+                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "TTabSize",
@@ -328,12 +329,12 @@ export class BqTabGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
                 "reflect": true,
                 "defaultValue": "'medium'"
             },
             "value": {
                 "type": "string",
+                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -348,7 +349,6 @@ export class BqTabGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": true
             }
         };