@beeq/core 1.11.0 → 1.11.2

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

@@ -2,9 +2,9 @@
  * Built by Endavans
  * © https://beeq.design - Apache 2 License.
  */
-import { h, Host } from "@stencil/core";
-import { DIVIDER_ORIENTATION, DIVIDER_ORIENTATION_ENUM, DIVIDER_STROKE_LINECAP, DIVIDER_TITLE_ALIGNMENT, } from "./bq-divider.types";
+import { Host, h } from "@stencil/core";
 import { getColorCSSVariable, getTextContent, hasSlotContent, isNil, validatePropValue } from "../../shared/utils";
+import { DIVIDER_ORIENTATION, DIVIDER_ORIENTATION_ENUM, DIVIDER_STROKE_LINECAP, DIVIDER_TITLE_ALIGNMENT, } from "./bq-divider.types";
 /**
  * The Divider component is used to visually separate content in a layout.
  *
@@ -136,18 +136,20 @@ export class BqDivider {
             ...(this.strokeThickness && { '--bq-divider--stroke-thickness': `${this.strokeThickness}px` }),
             ...(!isNil(this.strokeBasis) && { '--bq-divider--stroke-basis': `${this.strokeBasis}px` }),
         };
-        return (h(Host, { key: '4103d484b5ccb459e9c6cbbb2bdfa2e2f6b4828c', style: styles }, h("div", { key: 'e6a16846974474593ef290f77ad624d2ee88baa5', class: {
+        return (h(Host, { key: '4103d484b5ccb459e9c6cbbb2bdfa2e2f6b4828c', style: styles }, h("div", { key: '873d97ed59ed11212daf79e8fdadbf90efd1db58', class: {
                 'bq-divider': true,
                 [`bq-divider--${this.orientation}`]: true,
                 [`bq-divider--title__${this.titleAlignment}`]: true,
                 'gap-0': !this.hasTitle,
-            }, part: "base", ref: (div) => (this.titleElem = div), role: "separator", "aria-orientation": this.orientation }, h("svg", { key: '3a992a344d4c4d55f3b4d3a3af808b6e670803fe', class: {
+            }, part: "base", ref: (div) => {
+                this.titleElem = div;
+            } }, h("svg", { key: '993928654e09cef10c7c1e1ebb5c0cb8da67bc95', "aria-hidden": "true", class: {
                 'bq-divider--stroke start': true,
                 '!hidden': this.strokeBasis === 0 && this.titleAlignment === 'start',
-            }, part: "dash-start" }, h("line", { key: 'c9e9aa87681fdc83f85a56f6a7b9a34386edc0b8', ...this.strokeAttributes, part: "dash-start-line" })), h("slot", { key: '62a6a210165fdc3354f15a7e6acc7c8914b7258a', onSlotchange: this.handleSlotChange }), h("svg", { key: 'c9e2a0f3b0b4421f19dc124036297f549e3a9623', class: {
+            }, part: "dash-start" }, h("line", { key: '36ad986e0b9328e1fb903e7b844783c10a29d464', ...this.strokeAttributes, part: "dash-start-line" })), h("slot", { key: 'e1cc1c809970e7694895a6d85338b43e697fd658', onSlotchange: this.handleSlotChange }), h("svg", { key: '1cb61ca3051f40b19dc3003c3d24b882416961df', "aria-hidden": "true", class: {
                 'bq-divider--stroke end': true,
                 '!hidden': !this.hasTitle || (this.strokeBasis === 0 && this.titleAlignment === 'end'),
-            }, part: "dash-end" }, h("line", { key: 'af46637eda909675b0363d37f699bbfd78ef3e1c', ...this.strokeAttributes, part: "dash-end-line" })))));
+            }, part: "dash-end" }, h("line", { key: '063e4c1eb33d0e7c55fa78cb2521ac89353bc050', ...this.strokeAttributes, part: "dash-end-line" })))));
     }
     static get is() { return "bq-divider"; }
     static get encapsulation() { return "shadow"; }
@@ -165,7 +167,6 @@ export class BqDivider {
         return {
             "dashed": {
                 "type": "boolean",
-                "attribute": "dashed",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -181,11 +182,11 @@ export class BqDivider {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "dashed",
                 "defaultValue": "false"
             },
             "orientation": {
                 "type": "string",
-                "attribute": "orientation",
                 "mutable": false,
                 "complexType": {
                     "original": "TDividerOrientation",
@@ -207,11 +208,11 @@ export class BqDivider {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "orientation",
                 "defaultValue": "'horizontal'"
             },
             "strokeColor": {
                 "type": "string",
-                "attribute": "stroke-color",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -227,11 +228,11 @@ export class BqDivider {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "stroke-color",
                 "defaultValue": "'stroke--primary'"
             },
             "titleAlignment": {
                 "type": "string",
-                "attribute": "title-alignment",
                 "mutable": false,
                 "complexType": {
                     "original": "TDividerTitleAlignment",
@@ -253,11 +254,11 @@ export class BqDivider {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "title-alignment",
                 "defaultValue": "'middle'"
             },
             "strokeDashWidth": {
                 "type": "number",
-                "attribute": "stroke-dash-width",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -273,11 +274,11 @@ export class BqDivider {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "stroke-dash-width",
                 "defaultValue": "12"
             },
             "strokeDashGap": {
                 "type": "number",
-                "attribute": "stroke-dash-gap",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -293,11 +294,11 @@ export class BqDivider {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "stroke-dash-gap",
                 "defaultValue": "7"
             },
             "strokeThickness": {
                 "type": "number",
-                "attribute": "stroke-thickness",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -313,11 +314,11 @@ export class BqDivider {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "stroke-thickness",
                 "defaultValue": "1"
             },
             "strokeBasis": {
                 "type": "number",
-                "attribute": "stroke-basis",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -333,11 +334,11 @@ export class BqDivider {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "stroke-basis",
                 "defaultValue": "0"
             },
             "strokeLinecap": {
                 "type": "string",
-                "attribute": "stroke-linecap",
                 "mutable": false,
                 "complexType": {
                     "original": "TDividerStrokeLinecap",
@@ -359,6 +360,7 @@ export class BqDivider {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "stroke-linecap",
                 "defaultValue": "'butt'"
             }
         };

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

@@ -1 +1 @@
-{"version":3,"file":"bq-divider.js","sourceRoot":"","sources":["../../../../../../packages/beeq/src/components/divider/bq-divider.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport {\n  DIVIDER_ORIENTATION,\n  DIVIDER_ORIENTATION_ENUM,\n  DIVIDER_STROKE_LINECAP,\n  DIVIDER_TITLE_ALIGNMENT,\n} from './bq-divider.types';\nimport type { TDividerOrientation, TDividerStrokeLinecap, TDividerTitleAlignment } from './bq-divider.types';\nimport { getColorCSSVariable, getTextContent, hasSlotContent, isNil, validatePropValue } from '../../shared/utils';\n\n/**\n * The Divider component is used to visually separate content in a layout.\n *\n * @example How to use it\n * ```html\n * <bq-divider orientation=\"horizontal\" stroke-color=\"stroke--primary\" title-alignment=\"middle\">\n *   <span slot=\"title\">Divider Title</span>\n * </bq-divider>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/53dfe6-divider\n * @status stable\n *\n * @attr {boolean} dashed - If true, the divider has a dashed pattern.\n * @attr {\"horizontal\" | \"vertical\"} orientation - The default orientation of the divider.\n * @attr {string} stroke-color - Set the stroke color of the divider. The value should be a valid value of the palette color.\n * @attr {\"start\" | \"middle\" | \"end\"} title-alignment - Set the alignment of the title on the main axis of the divider (horizontal / vertical).\n * @attr {number} stroke-dash-width - Set the width of each dash of the divider's stroke. This is applicable when the stroke is dashed.\n * @attr {number} stroke-dash-gap - Set the gap of the divider's stroke. This is applicable when the stroke is dashed.\n * @attr {number} stroke-thickness - Set the thickness of the divider's stroke. Value expressed in px.\n * @attr {number} stroke-basis - Set the min width of the divider's stroke when text is not centered. Value expressed in px.\n * @attr {\"square\" | \"round\" | \"butt\"} stroke-linecap - Set the line of the divider's stroke. This is applicable when the stroke is dashed.\n *\n * @slot - The title content of the divider.\n *\n * @part base - The component's internal wrapper.\n * @part dash-start - The component's internal svg wrapper for the start line of the divider's stroke.\n * @part dash-end - The component's internal svg wrapper for the end line of the divider's stroke.\n * @part dash-start-line - The component's internal line component of the divider's stroke.\n * @part dash-end-line - The component's internal line component of the divider's stroke.\n *\n * @cssprop --bq-divider--color - Divider color\n * @cssprop --bq-divider--title-marginX - Divider space between title and delimiters\n */\n@Component({\n  tag: 'bq-divider',\n  styleUrl: './scss/bq-divider.scss',\n  shadow: true,\n})\nexport class BqDivider {\n  // Own Properties\n  // ====================\n\n  private titleElem: HTMLDivElement;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqDividerElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() private hasTitle: boolean;\n\n  // Public Property API\n  // ========================\n\n  /** If true, the divider has a dashed pattern */\n  @Prop() dashed = false;\n\n  /** The default orientation of the divider */\n  @Prop({ reflect: true }) orientation: TDividerOrientation = 'horizontal';\n\n  /** Set the stroke color of the divider. The value should be a valid value of the palette color */\n  @Prop({ reflect: true }) strokeColor?: string = 'stroke--primary';\n\n  /** Set the alignment of the title on the main axis of the divider (horizontal / vertical) */\n  @Prop({ reflect: true }) titleAlignment?: TDividerTitleAlignment = 'middle';\n\n  /** Set the width of each dash of the divider's stroke. This is applicable when the stroke is dashed */\n  @Prop({ reflect: true }) strokeDashWidth?: number = 12;\n\n  /** Set the gap of the divider's stroke. This is applicable when the stroke is dashed */\n  @Prop({ reflect: true }) strokeDashGap?: number = 7;\n\n  /** Set the thickness of the divider's stroke. Value expressed in px*/\n  @Prop({ reflect: true }) strokeThickness?: number = 1;\n\n  /** Set the min width of the divider's stroke when text is not centered. Value expressed in px */\n  @Prop({ reflect: true }) strokeBasis?: number = 0;\n\n  /** Set the line of the divider's stroke. This is applicable when the stroke is dashed */\n  @Prop({ reflect: true }) strokeLinecap?: TDividerStrokeLinecap = 'butt';\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('orientation')\n  @Watch('titleAlignment')\n  @Watch('strokeLinecap')\n  checkPropValues() {\n    validatePropValue(DIVIDER_ORIENTATION, 'horizontal', this.el, 'orientation');\n    validatePropValue(DIVIDER_TITLE_ALIGNMENT, 'middle', this.el, 'titleAlignment');\n    validatePropValue(DIVIDER_STROKE_LINECAP, 'butt', this.el, 'strokeLinecap');\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  connectedCallback() {\n    this.checkPropValues();\n  }\n\n  componentWillLoad() {\n    this.checkPropValues();\n  }\n\n  componentDidLoad() {\n    this.handleSlotChange();\n  }\n\n  // Listeners\n  // ==============\n\n  // Public methods API\n  // These methods are exposed on the host element.\n  // Always use two lines.\n  // Public Methods must be async.\n  // Requires JSDocs for public API documentation.\n  // ===============================================\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private handleSlotChange = () => {\n    this.hasTitle = hasSlotContent(this.titleElem) || !!getTextContent(this.titleElem.querySelector('slot'));\n  };\n\n  private get strokeAttributes() {\n    return {\n      ...this.strokeDrawPositions,\n      ...(this.dashed && { 'stroke-dasharray': this.strokeDasharray }),\n      'stroke-linecap': this.strokeLinecap,\n      'stroke-width': this.strokeThickness,\n    };\n  }\n\n  private get strokeDrawPositions() {\n    const drawOffset = this.strokeThickness / 2;\n    const strokeDrawPositions = {\n      [DIVIDER_ORIENTATION_ENUM.HORIZONTAL]: { x1: drawOffset, x2: '100%', y1: drawOffset, y2: drawOffset },\n      [DIVIDER_ORIENTATION_ENUM.VERTICAL]: { x1: drawOffset, x2: drawOffset, y1: drawOffset, y2: '100%' },\n    };\n    const orientationMap = new Map(Object.entries(strokeDrawPositions));\n\n    return orientationMap.get(this.orientation);\n  }\n\n  private get strokeDasharray() {\n    return `${this.strokeDashWidth}, ${this.strokeDashGap}`;\n  }\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    const styles = {\n      ...(this.strokeColor && { '--bq-divider--stroke-color': getColorCSSVariable(this.strokeColor) }),\n      ...(this.strokeThickness && { '--bq-divider--stroke-thickness': `${this.strokeThickness}px` }),\n      ...(!isNil(this.strokeBasis) && { '--bq-divider--stroke-basis': `${this.strokeBasis}px` }),\n    };\n\n    return (\n      <Host style={styles}>\n        <div\n          class={{\n            'bq-divider': true,\n            [`bq-divider--${this.orientation}`]: true,\n            [`bq-divider--title__${this.titleAlignment}`]: true,\n            'gap-0': !this.hasTitle,\n          }}\n          part=\"base\"\n          ref={(div) => (this.titleElem = div)}\n          role=\"separator\"\n          aria-orientation={this.orientation}\n        >\n          <svg\n            class={{\n              'bq-divider--stroke start': true,\n              '!hidden': this.strokeBasis === 0 && this.titleAlignment === 'start',\n            }}\n            part=\"dash-start\"\n          >\n            <line {...this.strokeAttributes} part=\"dash-start-line\" />\n          </svg>\n          <slot onSlotchange={this.handleSlotChange} />\n          <svg\n            class={{\n              'bq-divider--stroke end': true,\n              '!hidden': !this.hasTitle || (this.strokeBasis === 0 && this.titleAlignment === 'end'),\n            }}\n            part=\"dash-end\"\n          >\n            <line {...this.strokeAttributes} part=\"dash-end-line\" />\n          </svg>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"bq-divider.js","sourceRoot":"","sources":["../../../../../../packages/beeq/src/components/divider/bq-divider.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, h, Prop, State, Watch } from '@stencil/core';\n\nimport { getColorCSSVariable, getTextContent, hasSlotContent, isNil, validatePropValue } from '../../shared/utils';\nimport type { TDividerOrientation, TDividerStrokeLinecap, TDividerTitleAlignment } from './bq-divider.types';\nimport {\n  DIVIDER_ORIENTATION,\n  DIVIDER_ORIENTATION_ENUM,\n  DIVIDER_STROKE_LINECAP,\n  DIVIDER_TITLE_ALIGNMENT,\n} from './bq-divider.types';\n\n/**\n * The Divider component is used to visually separate content in a layout.\n *\n * @example How to use it\n * ```html\n * <bq-divider orientation=\"horizontal\" stroke-color=\"stroke--primary\" title-alignment=\"middle\">\n *   <span slot=\"title\">Divider Title</span>\n * </bq-divider>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/53dfe6-divider\n * @status stable\n *\n * @attr {boolean} dashed - If true, the divider has a dashed pattern.\n * @attr {\"horizontal\" | \"vertical\"} orientation - The default orientation of the divider.\n * @attr {string} stroke-color - Set the stroke color of the divider. The value should be a valid value of the palette color.\n * @attr {\"start\" | \"middle\" | \"end\"} title-alignment - Set the alignment of the title on the main axis of the divider (horizontal / vertical).\n * @attr {number} stroke-dash-width - Set the width of each dash of the divider's stroke. This is applicable when the stroke is dashed.\n * @attr {number} stroke-dash-gap - Set the gap of the divider's stroke. This is applicable when the stroke is dashed.\n * @attr {number} stroke-thickness - Set the thickness of the divider's stroke. Value expressed in px.\n * @attr {number} stroke-basis - Set the min width of the divider's stroke when text is not centered. Value expressed in px.\n * @attr {\"square\" | \"round\" | \"butt\"} stroke-linecap - Set the line of the divider's stroke. This is applicable when the stroke is dashed.\n *\n * @slot - The title content of the divider.\n *\n * @part base - The component's internal wrapper.\n * @part dash-start - The component's internal svg wrapper for the start line of the divider's stroke.\n * @part dash-end - The component's internal svg wrapper for the end line of the divider's stroke.\n * @part dash-start-line - The component's internal line component of the divider's stroke.\n * @part dash-end-line - The component's internal line component of the divider's stroke.\n *\n * @cssprop --bq-divider--color - Divider color\n * @cssprop --bq-divider--title-marginX - Divider space between title and delimiters\n */\n@Component({\n  tag: 'bq-divider',\n  styleUrl: './scss/bq-divider.scss',\n  shadow: true,\n})\nexport class BqDivider {\n  // Own Properties\n  // ====================\n\n  private titleElem: HTMLDivElement;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqDividerElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() private hasTitle: boolean;\n\n  // Public Property API\n  // ========================\n\n  /** If true, the divider has a dashed pattern */\n  @Prop() dashed = false;\n\n  /** The default orientation of the divider */\n  @Prop({ reflect: true }) orientation: TDividerOrientation = 'horizontal';\n\n  /** Set the stroke color of the divider. The value should be a valid value of the palette color */\n  @Prop({ reflect: true }) strokeColor?: string = 'stroke--primary';\n\n  /** Set the alignment of the title on the main axis of the divider (horizontal / vertical) */\n  @Prop({ reflect: true }) titleAlignment?: TDividerTitleAlignment = 'middle';\n\n  /** Set the width of each dash of the divider's stroke. This is applicable when the stroke is dashed */\n  @Prop({ reflect: true }) strokeDashWidth?: number = 12;\n\n  /** Set the gap of the divider's stroke. This is applicable when the stroke is dashed */\n  @Prop({ reflect: true }) strokeDashGap?: number = 7;\n\n  /** Set the thickness of the divider's stroke. Value expressed in px*/\n  @Prop({ reflect: true }) strokeThickness?: number = 1;\n\n  /** Set the min width of the divider's stroke when text is not centered. Value expressed in px */\n  @Prop({ reflect: true }) strokeBasis?: number = 0;\n\n  /** Set the line of the divider's stroke. This is applicable when the stroke is dashed */\n  @Prop({ reflect: true }) strokeLinecap?: TDividerStrokeLinecap = 'butt';\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('orientation')\n  @Watch('titleAlignment')\n  @Watch('strokeLinecap')\n  checkPropValues() {\n    validatePropValue(DIVIDER_ORIENTATION, 'horizontal', this.el, 'orientation');\n    validatePropValue(DIVIDER_TITLE_ALIGNMENT, 'middle', this.el, 'titleAlignment');\n    validatePropValue(DIVIDER_STROKE_LINECAP, 'butt', this.el, 'strokeLinecap');\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  connectedCallback() {\n    this.checkPropValues();\n  }\n\n  componentWillLoad() {\n    this.checkPropValues();\n  }\n\n  componentDidLoad() {\n    this.handleSlotChange();\n  }\n\n  // Listeners\n  // ==============\n\n  // Public methods API\n  // These methods are exposed on the host element.\n  // Always use two lines.\n  // Public Methods must be async.\n  // Requires JSDocs for public API documentation.\n  // ===============================================\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private handleSlotChange = () => {\n    this.hasTitle = hasSlotContent(this.titleElem) || !!getTextContent(this.titleElem.querySelector('slot'));\n  };\n\n  private get strokeAttributes() {\n    return {\n      ...this.strokeDrawPositions,\n      ...(this.dashed && { 'stroke-dasharray': this.strokeDasharray }),\n      'stroke-linecap': this.strokeLinecap,\n      'stroke-width': this.strokeThickness,\n    };\n  }\n\n  private get strokeDrawPositions() {\n    const drawOffset = this.strokeThickness / 2;\n    const strokeDrawPositions = {\n      [DIVIDER_ORIENTATION_ENUM.HORIZONTAL]: { x1: drawOffset, x2: '100%', y1: drawOffset, y2: drawOffset },\n      [DIVIDER_ORIENTATION_ENUM.VERTICAL]: { x1: drawOffset, x2: drawOffset, y1: drawOffset, y2: '100%' },\n    };\n    const orientationMap = new Map(Object.entries(strokeDrawPositions));\n\n    return orientationMap.get(this.orientation);\n  }\n\n  private get strokeDasharray() {\n    return `${this.strokeDashWidth}, ${this.strokeDashGap}`;\n  }\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    const styles = {\n      ...(this.strokeColor && { '--bq-divider--stroke-color': getColorCSSVariable(this.strokeColor) }),\n      ...(this.strokeThickness && { '--bq-divider--stroke-thickness': `${this.strokeThickness}px` }),\n      ...(!isNil(this.strokeBasis) && { '--bq-divider--stroke-basis': `${this.strokeBasis}px` }),\n    };\n\n    return (\n      <Host style={styles}>\n        <div\n          class={{\n            'bq-divider': true,\n            [`bq-divider--${this.orientation}`]: true,\n            [`bq-divider--title__${this.titleAlignment}`]: true,\n            'gap-0': !this.hasTitle,\n          }}\n          part=\"base\"\n          ref={(div) => {\n            this.titleElem = div;\n          }}\n        >\n          <svg\n            aria-hidden=\"true\"\n            class={{\n              'bq-divider--stroke start': true,\n              '!hidden': this.strokeBasis === 0 && this.titleAlignment === 'start',\n            }}\n            part=\"dash-start\"\n          >\n            <line {...this.strokeAttributes} part=\"dash-start-line\" />\n          </svg>\n          <slot onSlotchange={this.handleSlotChange} />\n          <svg\n            aria-hidden=\"true\"\n            class={{\n              'bq-divider--stroke end': true,\n              '!hidden': !this.hasTitle || (this.strokeBasis === 0 && this.titleAlignment === 'end'),\n            }}\n            part=\"dash-end\"\n          >\n            <line {...this.strokeAttributes} part=\"dash-end-line\" />\n          </svg>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -2,9 +2,9 @@
  * Built by Endavans
  * © https://beeq.design - Apache 2 License.
  */
-import { h, Host } from "@stencil/core";
-import { DRAWER_PLACEMENT, DRAWER_POSITIONS } from "./bq-drawer.types";
+import { Host, h } from "@stencil/core";
 import { enter, hasSlotContent, isNil, leave, validatePropValue } from "../../shared/utils";
+import { DRAWER_PLACEMENT, DRAWER_POSITIONS } from "./bq-drawer.types";
 /**
  * The Drawer component provides a sliding panel interface commonly used for navigation or presenting additional content without taking up significant screen space.
  *
@@ -239,16 +239,20 @@ export class BqDrawer {
                 'fixed inset-0 block bg-[--bq-drawer--backgroundBackdrop] opacity-0 transition-opacity duration-300': true,
                 'pointer-events-none': !this.open,
                 'opacity-60': this.open,
-            }, tabIndex: -1, part: "backdrop" })), h("div", { key: '204c2fca8240c6848316a74e480081a5d28b0e4a', class: {
+            }, part: "backdrop", tabIndex: -1 })), h("div", { key: 'c86c49c074fd1e7d59de8d8df33fe43504fcb169', "aria-hidden": !this.open ? 'true' : 'false', "aria-labelledby": "bq-drawer__title", "aria-modal": "true", class: {
                 [`bq-drawer transition-all duration-300 ease-in-out ${this.position || this.placement}`]: true,
                 '-start-[--bq-drawer--width]': this.isPositionStart,
                 '-end-[--bq-drawer--width]': this.isPositionEnd,
                 'start-0': this.open && this.isPositionStart,
                 'end-0': this.open && this.isPositionEnd,
-            }, ref: (div) => (this.drawerElem = div), "aria-hidden": !this.open ? 'true' : 'false', "aria-labelledby": "bq-drawer__title", "aria-modal": "true", hidden: !this.open, part: "panel", role: "dialog" }, h("header", { key: 'a59c6f950bfdae3bf0da80d51f49c93fb774b3c6', class: "flex items-center", part: "header" }, h("h2", { key: '07f3aca6df1e484ef1e0047073ce1c434f05d844', class: "flex-1 items-center justify-between text-xl font-bold leading-regular text-primary", id: "bq-drawer__title", part: "title" }, h("slot", { key: '93de20cd61525bf7194835e0413caa2185ed1b33', name: "title" })), h("div", { key: '7d9b574274bce2a20ce820b2d0850c7c3f8a492c', class: "flex", part: "button-close" }, h("bq-button", { key: '6fbce660e16967c75381222af1f471f7001d30ea', class: "[&::part(button)]:rounded-s [&::part(button)]:border-0 [&::part(button)]:bs-fit [&::part(button)]:p-b-0 [&::part(button)]:p-i-0 [&::part(label)]:inline-flex", appearance: "text", size: "small", slot: "button-close", exportparts: "button:button-close__btn,label:button-close__label", onClick: this.hide.bind(this) }, h("slot", { key: 'b6ff8569dd3ba1f01e3066228afa9c471f7cb998', name: "button-close" }, h("bq-icon", { key: 'd9077480e3c8f6410a8e9b945bdec4fdf6baf8e3', name: "x-bold", role: "img", title: "Close" }))))), h("main", { key: '01c3edefe9e342fa02696082cad2f2ad687fdedb', class: "block flex-auto overflow-auto", part: "body" }, h("slot", { key: 'b8b7ae730e44c3cb7fe6d8ead86e21e77f70e961' })), h("footer", { key: '8c44431db4c4d5790a61d2b0b617c9a3c58fc982', class: {
+            }, hidden: !this.open, part: "panel", ref: (div) => {
+                this.drawerElem = div;
+            }, role: "dialog" }, h("header", { key: '6cd1d9ce70d4cb30d6524af6dd366e989e676c62', class: "flex items-center", part: "header" }, h("h2", { key: '3212557ad0649414eb332e187acd52c96efbd835', class: "flex-1 items-center justify-between font-bold text-primary text-xl leading-regular", id: "bq-drawer__title", part: "title" }, h("slot", { key: '6aebb931e8cea3ede8dde98c66ebf9a275d1cb66', name: "title" })), h("div", { key: 'd68cac1a5bc9d7e7d4b4c885003630baae96c46e', class: "flex", part: "button-close" }, h("bq-button", { key: 'aba8327b549f2a2995af57205b0eb426d360762e', appearance: "text", class: "[&::part(button)]:bs-fit [&::part(button)]:rounded-s [&::part(button)]:border-0 [&::part(button)]:p-b-0 [&::part(button)]:p-i-0 [&::part(label)]:inline-flex", exportparts: "button:button-close__btn,label:button-close__label", onBqClick: () => this.hide(), size: "small", slot: "button-close" }, h("slot", { key: 'c2ecda8e35926aa1e30eb264825a3e8295068503', name: "button-close" }, h("bq-icon", { key: 'a91f4115f6c682d1c7b671fe7246fb62a01acac9', name: "x-bold", title: "Close" }))))), h("main", { key: '57722f33633d8008b2ce5d1af1de66e0cc8349a5', class: "block flex-auto overflow-auto", part: "body" }, h("slot", { key: 'e40bad5748d468e8f9f93047b2a7b9f069554052' })), h("footer", { key: 'c86396212d78e35a1c6a5a4fea804f355bc8ee1a', class: {
                 block: true,
                 '!hidden': !this.hasFooter,
-            }, ref: (footerElem) => (this.footerElem = footerElem), part: "footer" }, h("slot", { key: '64e241cb7e0665e9615ef791c6b24f7f22cb095a', name: "footer-divider" }, h("bq-divider", { key: '0fde4e73d472af52ab17346d3722ab53d074e65d', class: "mb-m block", dashed: true })), h("slot", { key: 'c0d4af5d801bfe83afbbe54c37e5c61363123184', name: "footer", onSlotchange: this.handleFooterSlotChange })))));
+            }, part: "footer", ref: (footerElem) => {
+                this.footerElem = footerElem;
+            } }, h("slot", { key: '19693333c7592b48539d0196c329070f5763d2a1', name: "footer-divider" }, h("bq-divider", { key: '14243b9978ecfec0a3077f3ecd9931aa5313676e', class: "mb-m block", dashed: true })), h("slot", { key: '5ffaff2ce64aa8c4424aaccf4fd4f568f62501a3', name: "footer", onSlotchange: this.handleFooterSlotChange })))));
     }
     static get is() { return "bq-drawer"; }
     static get encapsulation() { return "shadow"; }
@@ -266,7 +270,6 @@ export class BqDrawer {
         return {
             "enableBackdrop": {
                 "type": "boolean",
-                "attribute": "enable-backdrop",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -282,11 +285,11 @@ export class BqDrawer {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "enable-backdrop",
                 "defaultValue": "false"
             },
             "closeOnClickOutside": {
                 "type": "boolean",
-                "attribute": "close-on-click-outside",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -302,11 +305,11 @@ export class BqDrawer {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "close-on-click-outside",
                 "defaultValue": "false"
             },
             "closeOnEsc": {
                 "type": "boolean",
-                "attribute": "close-on-esc",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -322,11 +325,11 @@ export class BqDrawer {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "close-on-esc",
                 "defaultValue": "false"
             },
             "open": {
                 "type": "boolean",
-                "attribute": "open",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -341,11 +344,11 @@ export class BqDrawer {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "open"
             },
             "placement": {
                 "type": "string",
-                "attribute": "placement",
                 "mutable": true,
                 "complexType": {
                     "original": "TDrawerPlacement",
@@ -370,11 +373,11 @@ export class BqDrawer {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "placement",
                 "defaultValue": "'right'"
             },
             "position": {
                 "type": "string",
-                "attribute": "position",
                 "mutable": true,
                 "complexType": {
                     "original": "TDrawerPosition",
@@ -396,6 +399,7 @@ export class BqDrawer {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "position",
                 "defaultValue": "'end'"
             }
         };

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

@@ -1 +1 @@
-{"version":3,"file":"bq-drawer.js","sourceRoot":"","sources":["../../../../../../packages/beeq/src/components/drawer/bq-drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\nimport { DRAWER_PLACEMENT, DRAWER_POSITIONS } from './bq-drawer.types';\nimport type { TDrawerPlacement, TDrawerPosition } from './bq-drawer.types';\nimport { enter, hasSlotContent, isNil, leave, validatePropValue } from '../../shared/utils';\n\n/**\n * The Drawer component provides a sliding panel interface commonly used for navigation or presenting additional content without taking up significant screen space.\n *\n * @example How to use it\n * ```html\n * <bq-drawer position=\"end\">\n *   <div class=\"flex gap-xs\" slot=\"title\">Title</div>\n *   <div class=\"...\">\n *     Content\n *   </div>\n *   <div class=\"flex flex-1 justify-center gap-xs\" slot=\"footer\">\n *     <bq-button appearance=\"primary\" block=\"\" size=\"small\">Button</bq-button>\n *     <bq-button appearance=\"link\" block=\"\" size=\"small\">Button</bq-button>\n *   </div>\n * </bq-drawer>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/871139-drawer\n * @status stable\n *\n * @dependency bq-button\n * @dependency bq-icon\n * @dependency bq-divider\n *\n * @attr {boolean} enable-backdrop - If true, the backdrop overlay will be shown when the drawer opens.\n * @attr {boolean} close-on-click-outside - If true, the drawer will not close when clicking outside the panel.\n * @attr {boolean} close-on-esc - If true, the drawer will not close when the [Esc] key is pressed.\n * @attr {boolean} open - If true, the drawer component will be shown.\n * @attr {\"start\" | \"end\"} position - Defines the position of the drawer.\n *\n * @method show - Method to be called to show the drawer component.\n * @method hide - Method to be called to hide the drawer component.\n *\n * @event bqClose - Callback handler to be called when the drawer is closed.\n * @event bqOpen - Callback handler to be called when the drawer is opened.\n * @event bqAfterOpen - Callback handler to be called after the drawer has been opened.\n * @event bqAfterClose - Callback handler to be called after the drawer has been closed.\n *\n * @slot title - The title content of the drawer.\n * @slot - The body content of the drawer.\n * @slot footer - The footer content of the drawer.\n * @slot button-close - The close button content of the drawer.\n * @slot footer-divider - The footer divider content of the drawer.\n *\n * @part backdrop - The `<div>` that holds the backdrop overlay.\n * @part button-close - The BqButton that closes the drawer.\n * @part button-close__btn - The native button used under the hood that closes the drawer.\n * @part button-close__label - The text inside the native button that closes the drawer.\n * @part panel - The `<div>` that holds the drawer entire content.\n * @part header - The `<header>` that holds the icon, title, and close button.\n * @part title - The `<div>` that holds the title content.\n * @part body - The `<main>` that holds the drawer body content.\n * @part footer - The `<footer>` that holds footer content.\n *\n * @cssprop --bq-drawer--backgroundBackdrop - Background color of the backdrop\n * @cssprop --bq-drawer--gap - Gap between the drawer and the viewport\n * @cssprop --bq-drawer--width - Width of the drawer\n * @cssprop --bq-drawer--paddingX - Padding left and right of the drawer\n * @cssprop --bq-drawer--paddingY - Padding top and bottom of the drawer\n * @cssprop --bq-drawer--zIndex - Z-index of the drawer component\n */\n@Component({\n  tag: 'bq-drawer',\n  styleUrl: './scss/bq-drawer.scss',\n  shadow: true,\n})\nexport class BqDrawer {\n  // Own Properties\n  // ====================\n\n  private footerElem: HTMLElement;\n  private drawerElem: HTMLDivElement;\n  private OPEN_CSS_CLASS = 'bq-drawer--open';\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqDrawerElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() private hasFooter = false;\n  @State() hasIcon: boolean = false;\n\n  // Public Property API\n  // ========================\n\n  /** If true, the backdrop overlay will be shown when the drawer opens */\n  @Prop({ reflect: true }) enableBackdrop = false;\n\n  /** If true, the drawer will not close when clicking outside the panel */\n  @Prop({ reflect: true }) closeOnClickOutside = false;\n\n  /** If true, the dialog will not close when the [Esc] key is pressed */\n  @Prop({ reflect: true }) closeOnEsc = false;\n\n  /** If true, the drawer component will be shown */\n  @Prop({ reflect: true, mutable: true }) open: boolean;\n\n  /** @deprecated Defines the position of the drawer */\n  @Prop({ reflect: true, mutable: true }) placement: TDrawerPlacement = 'right';\n\n  /** Defines the position of the drawer */\n  @Prop({ reflect: true, mutable: true }) position: TDrawerPosition = 'end';\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('open')\n  async handleOpenChange() {\n    if (!this.open) {\n      await this.handleAfterHide();\n      return;\n    }\n\n    await this.handleAfterShow();\n  }\n\n  /**\n   * !TO BE REMOVED: Delete this `@Watch()` once the deprecated `placement` property is removed\n   * We need to maintain retro-compatibility with the deprecated `placement` property\n   */\n  @Watch('placement')\n  handlePlacementChange() {\n    if (!isNil(this.placement)) {\n      console.warn(\n        `❗️ [bq-drawer]: the 'placement' prop is deprecated and it will be removed in the future. Please use 'position' instead.`,\n      );\n    }\n    validatePropValue(DRAWER_PLACEMENT, 'right', this.el, 'placement');\n    // Sync 'position' property\n    const synPositionMap = {\n      right: 'end',\n      left: 'start',\n    };\n    this.position = (synPositionMap[this.placement] as TDrawerPosition) || this.position;\n  }\n\n  @Watch('position')\n  handlePositionChange() {\n    validatePropValue(DRAWER_POSITIONS, 'start', this.el, 'position');\n    /**\n     * Sync 'placement' property\n     * !TO BE REMOVED: Delete the code below once the deprecated `placement` property is removed\n     */\n    const syncPlacementMap = {\n      end: 'right',\n      start: 'left',\n    };\n    this.placement = (syncPlacementMap[this.position] as TDrawerPlacement) || this.placement;\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Callback handler to be called when the drawer is closed */\n  @Event() bqClose!: EventEmitter;\n\n  /** Callback handler to be called when the drawer is opened */\n  @Event() bqOpen!: EventEmitter;\n\n  /** Callback handler to be called after the drawer has been opened */\n  @Event() bqAfterOpen!: EventEmitter;\n\n  /** Callback handler to be called after the drawer has been closed */\n  @Event() bqAfterClose!: EventEmitter;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentWillLoad() {\n    this.handlePositionChange();\n    // !TO BE REMOVED: Delete this once the deprecated `placement` property is removed\n    this.handlePlacementChange();\n  }\n\n  componentDidLoad() {\n    this.handleFooterSlotChange();\n  }\n\n  // Listeners\n  // ==============\n\n  @Listen('mousedown', { target: 'window', capture: true })\n  async handleMouseClick(event: MouseEvent) {\n    if (!this.open) return;\n    if (!this.drawerElem || this.closeOnClickOutside) return;\n    // Skip if the mouse button is not the main button\n    if (event.button !== 0) return;\n\n    const rect = this.drawerElem.getBoundingClientRect();\n    if (event.clientX < rect.left || event.clientX > rect.right) {\n      await this.hide();\n    }\n  }\n\n  @Listen('keydown', { target: 'window', capture: true })\n  async handleKeyDown(event: KeyboardEvent) {\n    if (!this.open) return;\n    if (!this.drawerElem || this.closeOnEsc || !(event.key === 'Escape' || event.key === 'Esc')) return;\n\n    await this.hide();\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  /** Method to be called to hide the drawer component */\n  @Method()\n  async hide(): Promise<void> {\n    const ev = this.bqClose.emit();\n    if (ev.defaultPrevented) return;\n\n    this.open = false;\n  }\n\n  /** Method to be called to show the drawer component */\n  @Method()\n  async show(): Promise<void> {\n    const ev = this.bqOpen.emit();\n    if (ev.defaultPrevented) return;\n\n    this.open = true;\n  }\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private handleFooterSlotChange = () => {\n    this.hasFooter = hasSlotContent(this.footerElem, 'footer');\n  };\n\n  private handleAfterHide = async () => {\n    if (!this.drawerElem) return;\n\n    await leave(this.drawerElem);\n    this.handleTransitionEnd();\n  };\n\n  private handleAfterShow = async () => {\n    if (!this.drawerElem) return;\n\n    this.el.classList.add(this.OPEN_CSS_CLASS);\n    await enter(this.drawerElem);\n    this.handleTransitionEnd();\n  };\n\n  private handleTransitionEnd = () => {\n    if (this.open) {\n      this.bqAfterOpen.emit();\n      return;\n    }\n\n    this.bqAfterClose.emit();\n    this.el.classList.remove(this.OPEN_CSS_CLASS);\n  };\n\n  private get isPositionStart() {\n    // !TO BE REMOVED: `placement` is deprecated and will be removed in the future\n    return this.position === 'start' || this.placement === 'left';\n  }\n\n  private get isPositionEnd() {\n    // !TO BE REMOVED: `placement` is deprecated and will be removed in the future\n    return this.position === 'end' || this.placement === 'right';\n  }\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <Host>\n        {/* BACKDROP */}\n        {this.enableBackdrop && (\n          <div\n            class={{\n              'fixed inset-0 block bg-[--bq-drawer--backgroundBackdrop] opacity-0 transition-opacity duration-300': true,\n              'pointer-events-none': !this.open,\n              'opacity-60': this.open,\n            }}\n            tabIndex={-1}\n            part=\"backdrop\"\n          />\n        )}\n        {/* DRAWER PANEL */}\n        <div\n          class={{\n            [`bq-drawer transition-all duration-300 ease-in-out ${this.position || this.placement}`]: true,\n            '-start-[--bq-drawer--width]': this.isPositionStart,\n            '-end-[--bq-drawer--width]': this.isPositionEnd,\n            'start-0': this.open && this.isPositionStart,\n            'end-0': this.open && this.isPositionEnd,\n          }}\n          ref={(div) => (this.drawerElem = div)}\n          aria-hidden={!this.open ? 'true' : 'false'}\n          aria-labelledby=\"bq-drawer__title\"\n          aria-modal=\"true\"\n          hidden={!this.open}\n          part=\"panel\"\n          role=\"dialog\"\n        >\n          <header class=\"flex items-center\" part=\"header\">\n            <h2\n              class=\"flex-1 items-center justify-between text-xl font-bold leading-regular text-primary\"\n              id=\"bq-drawer__title\"\n              part=\"title\"\n            >\n              <slot name=\"title\" />\n            </h2>\n            <div class=\"flex\" part=\"button-close\">\n              <bq-button\n                class=\"[&::part(button)]:rounded-s [&::part(button)]:border-0 [&::part(button)]:bs-fit [&::part(button)]:p-b-0 [&::part(button)]:p-i-0 [&::part(label)]:inline-flex\"\n                appearance=\"text\"\n                size=\"small\"\n                slot=\"button-close\"\n                exportparts=\"button:button-close__btn,label:button-close__label\"\n                onClick={this.hide.bind(this)}\n              >\n                <slot name=\"button-close\">\n                  <bq-icon name=\"x-bold\" role=\"img\" title=\"Close\" />\n                </slot>\n              </bq-button>\n            </div>\n          </header>\n          <main class=\"block flex-auto overflow-auto\" part=\"body\">\n            <slot />\n          </main>\n          <footer\n            class={{\n              block: true,\n              '!hidden': !this.hasFooter,\n            }}\n            ref={(footerElem) => (this.footerElem = footerElem)}\n            part=\"footer\"\n          >\n            <slot name=\"footer-divider\">\n              <bq-divider class=\"mb-m block\" dashed />\n            </slot>\n            <slot name=\"footer\" onSlotchange={this.handleFooterSlotChange} />\n          </footer>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"bq-drawer.js","sourceRoot":"","sources":["../../../../../../packages/beeq/src/components/drawer/bq-drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { EventEmitter } from '@stencil/core';\nimport { Component, Element, Event, Host, h, Listen, Method, Prop, State, Watch } from '@stencil/core';\n\nimport { enter, hasSlotContent, isNil, leave, validatePropValue } from '../../shared/utils';\nimport type { TDrawerPlacement, TDrawerPosition } from './bq-drawer.types';\nimport { DRAWER_PLACEMENT, DRAWER_POSITIONS } from './bq-drawer.types';\n\n/**\n * The Drawer component provides a sliding panel interface commonly used for navigation or presenting additional content without taking up significant screen space.\n *\n * @example How to use it\n * ```html\n * <bq-drawer position=\"end\">\n *   <div class=\"flex gap-xs\" slot=\"title\">Title</div>\n *   <div class=\"...\">\n *     Content\n *   </div>\n *   <div class=\"flex flex-1 justify-center gap-xs\" slot=\"footer\">\n *     <bq-button appearance=\"primary\" block=\"\" size=\"small\">Button</bq-button>\n *     <bq-button appearance=\"link\" block=\"\" size=\"small\">Button</bq-button>\n *   </div>\n * </bq-drawer>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/871139-drawer\n * @status stable\n *\n * @dependency bq-button\n * @dependency bq-icon\n * @dependency bq-divider\n *\n * @attr {boolean} enable-backdrop - If true, the backdrop overlay will be shown when the drawer opens.\n * @attr {boolean} close-on-click-outside - If true, the drawer will not close when clicking outside the panel.\n * @attr {boolean} close-on-esc - If true, the drawer will not close when the [Esc] key is pressed.\n * @attr {boolean} open - If true, the drawer component will be shown.\n * @attr {\"start\" | \"end\"} position - Defines the position of the drawer.\n *\n * @method show - Method to be called to show the drawer component.\n * @method hide - Method to be called to hide the drawer component.\n *\n * @event bqClose - Callback handler to be called when the drawer is closed.\n * @event bqOpen - Callback handler to be called when the drawer is opened.\n * @event bqAfterOpen - Callback handler to be called after the drawer has been opened.\n * @event bqAfterClose - Callback handler to be called after the drawer has been closed.\n *\n * @slot title - The title content of the drawer.\n * @slot - The body content of the drawer.\n * @slot footer - The footer content of the drawer.\n * @slot button-close - The close button content of the drawer.\n * @slot footer-divider - The footer divider content of the drawer.\n *\n * @part backdrop - The `<div>` that holds the backdrop overlay.\n * @part button-close - The BqButton that closes the drawer.\n * @part button-close__btn - The native button used under the hood that closes the drawer.\n * @part button-close__label - The text inside the native button that closes the drawer.\n * @part panel - The `<div>` that holds the drawer entire content.\n * @part header - The `<header>` that holds the icon, title, and close button.\n * @part title - The `<div>` that holds the title content.\n * @part body - The `<main>` that holds the drawer body content.\n * @part footer - The `<footer>` that holds footer content.\n *\n * @cssprop --bq-drawer--backgroundBackdrop - Background color of the backdrop\n * @cssprop --bq-drawer--gap - Gap between the drawer and the viewport\n * @cssprop --bq-drawer--width - Width of the drawer\n * @cssprop --bq-drawer--paddingX - Padding left and right of the drawer\n * @cssprop --bq-drawer--paddingY - Padding top and bottom of the drawer\n * @cssprop --bq-drawer--zIndex - Z-index of the drawer component\n */\n@Component({\n  tag: 'bq-drawer',\n  styleUrl: './scss/bq-drawer.scss',\n  shadow: true,\n})\nexport class BqDrawer {\n  // Own Properties\n  // ====================\n\n  private footerElem: HTMLElement;\n  private drawerElem: HTMLDivElement;\n  private OPEN_CSS_CLASS = 'bq-drawer--open';\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqDrawerElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() private hasFooter = false;\n  @State() hasIcon: boolean = false;\n\n  // Public Property API\n  // ========================\n\n  /** If true, the backdrop overlay will be shown when the drawer opens */\n  @Prop({ reflect: true }) enableBackdrop = false;\n\n  /** If true, the drawer will not close when clicking outside the panel */\n  @Prop({ reflect: true }) closeOnClickOutside = false;\n\n  /** If true, the dialog will not close when the [Esc] key is pressed */\n  @Prop({ reflect: true }) closeOnEsc = false;\n\n  /** If true, the drawer component will be shown */\n  @Prop({ reflect: true, mutable: true }) open: boolean;\n\n  /** @deprecated Defines the position of the drawer */\n  @Prop({ reflect: true, mutable: true }) placement: TDrawerPlacement = 'right';\n\n  /** Defines the position of the drawer */\n  @Prop({ reflect: true, mutable: true }) position: TDrawerPosition = 'end';\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('open')\n  async handleOpenChange() {\n    if (!this.open) {\n      await this.handleAfterHide();\n      return;\n    }\n\n    await this.handleAfterShow();\n  }\n\n  /**\n   * !TO BE REMOVED: Delete this `@Watch()` once the deprecated `placement` property is removed\n   * We need to maintain retro-compatibility with the deprecated `placement` property\n   */\n  @Watch('placement')\n  handlePlacementChange() {\n    if (!isNil(this.placement)) {\n      console.warn(\n        `❗️ [bq-drawer]: the 'placement' prop is deprecated and it will be removed in the future. Please use 'position' instead.`,\n      );\n    }\n    validatePropValue(DRAWER_PLACEMENT, 'right', this.el, 'placement');\n    // Sync 'position' property\n    const synPositionMap = {\n      right: 'end',\n      left: 'start',\n    };\n    this.position = (synPositionMap[this.placement] as TDrawerPosition) || this.position;\n  }\n\n  @Watch('position')\n  handlePositionChange() {\n    validatePropValue(DRAWER_POSITIONS, 'start', this.el, 'position');\n    /**\n     * Sync 'placement' property\n     * !TO BE REMOVED: Delete the code below once the deprecated `placement` property is removed\n     */\n    const syncPlacementMap = {\n      end: 'right',\n      start: 'left',\n    };\n    this.placement = (syncPlacementMap[this.position] as TDrawerPlacement) || this.placement;\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Callback handler to be called when the drawer is closed */\n  @Event() bqClose!: EventEmitter;\n\n  /** Callback handler to be called when the drawer is opened */\n  @Event() bqOpen!: EventEmitter;\n\n  /** Callback handler to be called after the drawer has been opened */\n  @Event() bqAfterOpen!: EventEmitter;\n\n  /** Callback handler to be called after the drawer has been closed */\n  @Event() bqAfterClose!: EventEmitter;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentWillLoad() {\n    this.handlePositionChange();\n    // !TO BE REMOVED: Delete this once the deprecated `placement` property is removed\n    this.handlePlacementChange();\n  }\n\n  componentDidLoad() {\n    this.handleFooterSlotChange();\n  }\n\n  // Listeners\n  // ==============\n\n  @Listen('mousedown', { target: 'window', capture: true })\n  async handleMouseClick(event: MouseEvent) {\n    if (!this.open) return;\n    if (!this.drawerElem || this.closeOnClickOutside) return;\n    // Skip if the mouse button is not the main button\n    if (event.button !== 0) return;\n\n    const rect = this.drawerElem.getBoundingClientRect();\n    if (event.clientX < rect.left || event.clientX > rect.right) {\n      await this.hide();\n    }\n  }\n\n  @Listen('keydown', { target: 'window', capture: true })\n  async handleKeyDown(event: KeyboardEvent) {\n    if (!this.open) return;\n    if (!this.drawerElem || this.closeOnEsc || !(event.key === 'Escape' || event.key === 'Esc')) return;\n\n    await this.hide();\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  /** Method to be called to hide the drawer component */\n  @Method()\n  async hide(): Promise<void> {\n    const ev = this.bqClose.emit();\n    if (ev.defaultPrevented) return;\n\n    this.open = false;\n  }\n\n  /** Method to be called to show the drawer component */\n  @Method()\n  async show(): Promise<void> {\n    const ev = this.bqOpen.emit();\n    if (ev.defaultPrevented) return;\n\n    this.open = true;\n  }\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private handleFooterSlotChange = () => {\n    this.hasFooter = hasSlotContent(this.footerElem, 'footer');\n  };\n\n  private handleAfterHide = async () => {\n    if (!this.drawerElem) return;\n\n    await leave(this.drawerElem);\n    this.handleTransitionEnd();\n  };\n\n  private handleAfterShow = async () => {\n    if (!this.drawerElem) return;\n\n    this.el.classList.add(this.OPEN_CSS_CLASS);\n    await enter(this.drawerElem);\n    this.handleTransitionEnd();\n  };\n\n  private handleTransitionEnd = () => {\n    if (this.open) {\n      this.bqAfterOpen.emit();\n      return;\n    }\n\n    this.bqAfterClose.emit();\n    this.el.classList.remove(this.OPEN_CSS_CLASS);\n  };\n\n  private get isPositionStart() {\n    // !TO BE REMOVED: `placement` is deprecated and will be removed in the future\n    return this.position === 'start' || this.placement === 'left';\n  }\n\n  private get isPositionEnd() {\n    // !TO BE REMOVED: `placement` is deprecated and will be removed in the future\n    return this.position === 'end' || this.placement === 'right';\n  }\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <Host>\n        {/* BACKDROP */}\n        {this.enableBackdrop && (\n          <div\n            class={{\n              'fixed inset-0 block bg-[--bq-drawer--backgroundBackdrop] opacity-0 transition-opacity duration-300': true,\n              'pointer-events-none': !this.open,\n              'opacity-60': this.open,\n            }}\n            part=\"backdrop\"\n            tabIndex={-1}\n          />\n        )}\n        {/* DRAWER PANEL */}\n        <div\n          aria-hidden={!this.open ? 'true' : 'false'}\n          aria-labelledby=\"bq-drawer__title\"\n          aria-modal=\"true\"\n          class={{\n            [`bq-drawer transition-all duration-300 ease-in-out ${this.position || this.placement}`]: true,\n            '-start-[--bq-drawer--width]': this.isPositionStart,\n            '-end-[--bq-drawer--width]': this.isPositionEnd,\n            'start-0': this.open && this.isPositionStart,\n            'end-0': this.open && this.isPositionEnd,\n          }}\n          hidden={!this.open}\n          part=\"panel\"\n          ref={(div) => {\n            this.drawerElem = div;\n          }}\n          role=\"dialog\"\n        >\n          <header class=\"flex items-center\" part=\"header\">\n            <h2\n              class=\"flex-1 items-center justify-between font-bold text-primary text-xl leading-regular\"\n              id=\"bq-drawer__title\"\n              part=\"title\"\n            >\n              <slot name=\"title\" />\n            </h2>\n            <div class=\"flex\" part=\"button-close\">\n              <bq-button\n                appearance=\"text\"\n                class=\"[&::part(button)]:bs-fit [&::part(button)]:rounded-s [&::part(button)]:border-0 [&::part(button)]:p-b-0 [&::part(button)]:p-i-0 [&::part(label)]:inline-flex\"\n                exportparts=\"button:button-close__btn,label:button-close__label\"\n                onBqClick={() => this.hide()}\n                size=\"small\"\n                slot=\"button-close\"\n              >\n                <slot name=\"button-close\">\n                  <bq-icon name=\"x-bold\" title=\"Close\" />\n                </slot>\n              </bq-button>\n            </div>\n          </header>\n          <main class=\"block flex-auto overflow-auto\" part=\"body\">\n            <slot />\n          </main>\n          <footer\n            class={{\n              block: true,\n              '!hidden': !this.hasFooter,\n            }}\n            part=\"footer\"\n            ref={(footerElem) => {\n              this.footerElem = footerElem;\n            }}\n          >\n            <slot name=\"footer-divider\">\n              <bq-divider class=\"mb-m block\" dashed />\n            </slot>\n            <slot name=\"footer\" onSlotchange={this.handleFooterSlotChange} />\n          </footer>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -117,8 +117,12 @@ export class BqDropdown {
     // =====================================
     componentDidLoad() {
         this.triggerElem = this.el.querySelector('[slot="trigger"]');
+        this.triggerElem?.addEventListener('click', this.togglePanel);
         this.handleDisabledChange();
     }
+    disconnectedCallback() {
+        this.triggerElem?.removeEventListener('click', this.togglePanel);
+    }
     // Listeners
     // ==============
     onItemSelect() {
@@ -163,8 +167,8 @@ export class BqDropdown {
     // These methods cannot be called from the host element.
     // =======================================================
     togglePanel = () => {
-        // Don't toggle the panel if the component is disabled or the trigger element is disabled
-        if (this.disabled || this.triggerElem?.hasAttribute('disabled'))
+        const isDisabled = this.disabled || this.triggerElem?.hasAttribute('disabled');
+        if (isDisabled)
             return;
         this.open = !this.open;
     };
@@ -175,7 +179,7 @@ export class BqDropdown {
         const style = {
             ...(this.panelHeight && { '--bq-panel--height': this.panelHeight }),
         };
-        return (h("div", { key: '41c44113b7496cdcfec26e5bcdb1d89a56ca37eb', class: "bq-dropdown", part: "base" }, h("div", { key: '4dd4bde1af1c60b1b25961fbe206f02ef275ce0c', class: "bq-dropdown__trigger block", "aria-controls": this.dropdownPanelId, "aria-haspopup": "true", onClick: this.togglePanel, part: "trigger" }, h("slot", { key: '6cdebf21d0b79076a47ee69847ed8b44257c23ae', name: "trigger" })), h("bq-panel", { key: '1b1ce13ffef3b27ba390aac6262839a56723674a', style: style, id: this.dropdownPanelId, class: "bq-dropdown__panel", disableScrollLock: this.disableScrollLock, distance: this.distance, placement: this.placement, open: this.open, sameWidth: this.sameWidth, skidding: this.skidding, strategy: this.strategy, role: "group", part: "dropdown", exportparts: "panel" }, h("slot", { key: '8c09398a557856632a5b8ff55fda03fc8a731394' }))));
+        return (h("div", { key: 'ae583f26db0f5dd9ed8a9b1bad4700fa1f43d64d', class: "bq-dropdown", part: "base" }, h("div", { key: '5ed63cafc2149a554cf19f448b84f74b7e90ad4e', "aria-controls": this.dropdownPanelId, "aria-haspopup": "true", class: "bq-dropdown__trigger block", part: "trigger" }, h("slot", { key: '4a0c6d8df5b8ea1be06db2b95f30603348b6d86a', name: "trigger" })), h("bq-panel", { key: '863be4b92b73f3769edcabee007c622270074cb1', class: "bq-dropdown__panel", disableScrollLock: this.disableScrollLock, distance: this.distance, exportparts: "panel", id: this.dropdownPanelId, open: this.open, part: "dropdown", placement: this.placement, sameWidth: this.sameWidth, skidding: this.skidding, strategy: this.strategy, style: style }, h("slot", { key: '94c1d32fbb1f0e19bce48851443e52c5471a09ed' }))));
     }
     static get is() { return "bq-dropdown"; }
     static get encapsulation() { return "shadow"; }
@@ -193,7 +197,6 @@ export class BqDropdown {
         return {
             "disableScrollLock": {
                 "type": "boolean",
-                "attribute": "disable-scroll-lock",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -209,11 +212,11 @@ export class BqDropdown {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "disable-scroll-lock",
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -229,11 +232,11 @@ export class BqDropdown {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "distance": {
                 "type": "number",
-                "attribute": "distance",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -249,11 +252,11 @@ export class BqDropdown {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "distance",
                 "defaultValue": "4"
             },
             "keepOpenOnSelect": {
                 "type": "boolean",
-                "attribute": "keep-open-on-select",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -269,11 +272,11 @@ export class BqDropdown {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "keep-open-on-select",
                 "defaultValue": "false"
             },
             "placement": {
                 "type": "string",
-                "attribute": "placement",
                 "mutable": false,
                 "complexType": {
                     "original": "Placement",
@@ -295,11 +298,11 @@ export class BqDropdown {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "placement",
                 "defaultValue": "'bottom-start'"
             },
             "open": {
                 "type": "boolean",
-                "attribute": "open",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -315,11 +318,11 @@ export class BqDropdown {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "open",
                 "defaultValue": "false"
             },
             "panelHeight": {
                 "type": "string",
-                "attribute": "panel-height",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -334,11 +337,11 @@ export class BqDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "panel-height"
             },
             "sameWidth": {
                 "type": "boolean",
-                "attribute": "same-width",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -354,11 +357,11 @@ export class BqDropdown {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "same-width",
                 "defaultValue": "false"
             },
             "skidding": {
                 "type": "number",
-                "attribute": "skidding",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -374,11 +377,11 @@ export class BqDropdown {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "skidding",
                 "defaultValue": "0"
             },
             "strategy": {
                 "type": "string",
-                "attribute": "strategy",
                 "mutable": false,
                 "complexType": {
                     "original": "'fixed' | 'absolute'",
@@ -394,6 +397,7 @@ export class BqDropdown {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "strategy",
                 "defaultValue": "'fixed'"
             }
         };