@haiilo/catalyst 11.0.0 → 12.0.0

package/dist/collection/components/cat-datepicker-inline/cat-datepicker-inline.js

@@ -6,14 +6,22 @@ import { getLocale } from "../cat-datepicker/cat-datepicker.locale";
 import { catI18nRegistry as i18n } from "../cat-i18n/cat-i18n-registry";
 export class CatDatepickerInline {
     constructor() {
+        /**
+         * Whether the input is disabled.
+         */
         this.disabled = false;
-        this.max = undefined;
-        this.min = undefined;
+        /**
+         * The mode of the datepicker, to select a date, time, both, a date range or a week number.
+         */
         this.mode = 'date';
+        /**
+         * The value is not editable.
+         */
         this.readonly = false;
+        /**
+         * The step size to use when changing the time.
+         */
         this.step = 5;
-        this.value = undefined;
-        this.nativePickerAttributes = undefined;
     }
     onValueChanged(value) {
         if (value) {
@@ -79,6 +87,7 @@ export class CatDatepickerInline {
         return {
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -91,12 +100,14 @@ export class CatDatepickerInline {
                     "tags": [],
                     "text": "Whether the input is disabled."
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "max": {
                 "type": "string",
+                "attribute": "max",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -109,11 +120,13 @@ export class CatDatepickerInline {
                     "tags": [],
                     "text": "A maximum value as ISO Date string, e.g. 2017-03-04T01:23:43.000Z."
                 },
-                "attribute": "max",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "min": {
                 "type": "string",
+                "attribute": "min",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -126,11 +139,13 @@ export class CatDatepickerInline {
                     "tags": [],
                     "text": "A minimum value as ISO Date string, e.g. 2017-03-04T01:23:43.000Z."
                 },
-                "attribute": "min",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "mode": {
                 "type": "string",
+                "attribute": "mode",
                 "mutable": false,
                 "complexType": {
                     "original": "CatDatepickerMode",
@@ -149,12 +164,14 @@ export class CatDatepickerInline {
                     "tags": [],
                     "text": "The mode of the datepicker, to select a date, time, both, a date range or a week number."
                 },
-                "attribute": "mode",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "'date'"
             },
             "readonly": {
                 "type": "boolean",
+                "attribute": "readonly",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -167,12 +184,14 @@ export class CatDatepickerInline {
                     "tags": [],
                     "text": "The value is not editable."
                 },
-                "attribute": "readonly",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "step": {
                 "type": "number",
+                "attribute": "step",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -185,12 +204,14 @@ export class CatDatepickerInline {
                     "tags": [],
                     "text": "The step size to use when changing the time."
                 },
-                "attribute": "step",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "5"
             },
             "value": {
                 "type": "string",
+                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -203,11 +224,13 @@ export class CatDatepickerInline {
                     "tags": [],
                     "text": "The value as ISO Date string, e.g. 2017-03-04T01:23:43.000Z or as a week number string."
                 },
-                "attribute": "value",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "nativePickerAttributes": {
                 "type": "unknown",
+                "attribute": "native-picker-attributes",
                 "mutable": false,
                 "complexType": {
                     "original": "{ [key: string]: string }",
@@ -219,7 +242,9 @@ export class CatDatepickerInline {
                 "docs": {
                     "tags": [],
                     "text": "Attributes that will be added to the rendered HTML datepicker element."
-                }
+                },
+                "getter": false,
+                "setter": false
             }
         };
     }

package/dist/collection/components/cat-datepicker-inline/cat-datepicker-inline.js.map

@@ -1 +1 @@
-{"version":3,"file":"cat-datepicker-inline.js","sourceRoot":"","sources":["../../../src/components/cat-datepicker-inline/cat-datepicker-inline.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\nimport flatpickr from 'flatpickr';\nimport { getConfig } from '../cat-datepicker/cat-datepicker.config';\nimport { getFormat } from '../cat-datepicker/cat-datepicker.format';\nimport { getLocale } from '../cat-datepicker/cat-datepicker.locale';\nimport { CatDatepickerMode } from '../cat-datepicker/cat-datepicker.mode';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\n\n@Component({\n  tag: 'cat-datepicker-inline',\n  styleUrl: 'cat-datepicker-inline.scss',\n  shadow: true\n})\nexport class CatDatepickerInline {\n  private pickr?: flatpickr.Instance;\n  private input?: HTMLInputElement;\n\n  /**\n   * Whether the input is disabled.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * A maximum value as ISO Date string, e.g. 2017-03-04T01:23:43.000Z.\n   */\n  @Prop() max?: string;\n\n  /**\n   * A minimum value as ISO Date string, e.g. 2017-03-04T01:23:43.000Z.\n   */\n  @Prop() min?: string;\n\n  /**\n   * The mode of the datepicker, to select a date, time, both, a date range or a week number.\n   */\n  @Prop() mode: CatDatepickerMode = 'date';\n\n  /**\n   * The value is not editable.\n   */\n  @Prop() readonly = false;\n\n  /**\n   * The step size to use when changing the time.\n   */\n  @Prop() step = 5;\n\n  /**\n   * The value as ISO Date string, e.g. 2017-03-04T01:23:43.000Z or as a week number string.\n   */\n  @Prop({ mutable: true }) value?: string;\n\n  /**\n   * Attributes that will be added to the rendered HTML datepicker element.\n   */\n  @Prop() nativePickerAttributes?: { [key: string]: string };\n\n  /**\n   * Emitted when the value is changed.\n   */\n  @Event() catChange!: EventEmitter<string>;\n\n  @Watch('value')\n  onValueChanged(value: string) {\n    if (value) {\n      this.pickr?.setDate(value, false);\n      this.catChange.emit(value);\n    } else {\n      this.pickr?.clear(false);\n      this.catChange.emit(undefined);\n    }\n  }\n\n  @Watch('disabled')\n  @Watch('readonly')\n  onDisabledChanged() {\n    // Dynamically unsetting 'enabled' value to undefined is not working due to\n    // a bug in the library. We thus need to fully recreate the date picker\n    // after the value has been updated.\n    this.pickr?.destroy();\n    this.pickr = undefined;\n    setTimeout(() => (this.pickr = this.initDatepicker(this.input)));\n  }\n\n  componentDidLoad() {\n    this.pickr = this.initDatepicker(this.input);\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          tabIndex={this.disabled || this.readonly ? -1 : undefined}\n          class={{\n            'datepicker-wrapper': true,\n            'datepicker-disabled': this.disabled,\n            'datepicker-readonly': this.readonly\n          }}\n        >\n          <input\n            ref={el => (this.input = el)}\n            value={this.value}\n            disabled={this.disabled}\n            readonly={this.readonly}\n          ></input>\n        </div>\n      </Host>\n    );\n  }\n\n  private initDatepicker(input?: HTMLInputElement): flatpickr.Instance | undefined {\n    if (!input) {\n      return;\n    }\n\n    return flatpickr(\n      input,\n      getConfig(\n        {\n          locale: getLocale(i18n.getLocale()),\n          format: getFormat(i18n.getLocale(), this.mode),\n          mode: this.mode,\n          min: this.min,\n          max: this.max,\n          step: this.step,\n          disabled: this.disabled,\n          readonly: this.readonly,\n          nativePickerAttributes: this.nativePickerAttributes ?? {},\n          applyChange: value => (this.value = value)\n        },\n        {\n          ...(this.disabled ? { enable: [] } : {}),\n          inline: true\n        }\n      )\n    );\n  }\n}\n"]}
+{"version":3,"file":"cat-datepicker-inline.js","sourceRoot":"","sources":["../../../src/components/cat-datepicker-inline/cat-datepicker-inline.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\nimport flatpickr from 'flatpickr';\nimport { getConfig } from '../cat-datepicker/cat-datepicker.config';\nimport { getFormat } from '../cat-datepicker/cat-datepicker.format';\nimport { getLocale } from '../cat-datepicker/cat-datepicker.locale';\nimport { CatDatepickerMode } from '../cat-datepicker/cat-datepicker.mode';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\n\n@Component({\n  tag: 'cat-datepicker-inline',\n  styleUrl: 'cat-datepicker-inline.scss',\n  shadow: true\n})\nexport class CatDatepickerInline {\n  private pickr?: flatpickr.Instance;\n  private input?: HTMLInputElement;\n\n  /**\n   * Whether the input is disabled.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * A maximum value as ISO Date string, e.g. 2017-03-04T01:23:43.000Z.\n   */\n  @Prop() max?: string;\n\n  /**\n   * A minimum value as ISO Date string, e.g. 2017-03-04T01:23:43.000Z.\n   */\n  @Prop() min?: string;\n\n  /**\n   * The mode of the datepicker, to select a date, time, both, a date range or a week number.\n   */\n  @Prop() mode: CatDatepickerMode = 'date';\n\n  /**\n   * The value is not editable.\n   */\n  @Prop() readonly = false;\n\n  /**\n   * The step size to use when changing the time.\n   */\n  @Prop() step = 5;\n\n  /**\n   * The value as ISO Date string, e.g. 2017-03-04T01:23:43.000Z or as a week number string.\n   */\n  @Prop({ mutable: true }) value?: string;\n\n  /**\n   * Attributes that will be added to the rendered HTML datepicker element.\n   */\n  @Prop() nativePickerAttributes?: { [key: string]: string };\n\n  /**\n   * Emitted when the value is changed.\n   */\n  @Event() catChange!: EventEmitter<string>;\n\n  @Watch('value')\n  onValueChanged(value: string) {\n    if (value) {\n      this.pickr?.setDate(value, false);\n      this.catChange.emit(value);\n    } else {\n      this.pickr?.clear(false);\n      this.catChange.emit(undefined);\n    }\n  }\n\n  @Watch('disabled')\n  @Watch('readonly')\n  onDisabledChanged() {\n    // Dynamically unsetting 'enabled' value to undefined is not working due to\n    // a bug in the library. We thus need to fully recreate the date picker\n    // after the value has been updated.\n    this.pickr?.destroy();\n    this.pickr = undefined;\n    setTimeout(() => (this.pickr = this.initDatepicker(this.input)));\n  }\n\n  componentDidLoad() {\n    this.pickr = this.initDatepicker(this.input);\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          tabIndex={this.disabled || this.readonly ? -1 : undefined}\n          class={{\n            'datepicker-wrapper': true,\n            'datepicker-disabled': this.disabled,\n            'datepicker-readonly': this.readonly\n          }}\n        >\n          <input\n            ref={el => (this.input = el)}\n            value={this.value}\n            disabled={this.disabled}\n            readonly={this.readonly}\n          ></input>\n        </div>\n      </Host>\n    );\n  }\n\n  private initDatepicker(input?: HTMLInputElement): flatpickr.Instance | undefined {\n    if (!input) {\n      return;\n    }\n\n    return flatpickr(\n      input,\n      getConfig(\n        {\n          locale: getLocale(i18n.getLocale()),\n          format: getFormat(i18n.getLocale(), this.mode),\n          mode: this.mode,\n          min: this.min,\n          max: this.max,\n          step: this.step,\n          disabled: this.disabled,\n          readonly: this.readonly,\n          nativePickerAttributes: this.nativePickerAttributes ?? {},\n          applyChange: value => (this.value = value)\n        },\n        {\n          ...(this.disabled ? { enable: [] } : {}),\n          inline: true\n        }\n      )\n    );\n  }\n}\n"]}

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

@@ -12,23 +12,72 @@ let nextUniqueId = 0;
 export class CatDropdown {
     constructor() {
         this.id = nextUniqueId++;
-        this.isOpen = false;
+        this._isOpen = false;
         /**
          * Tracking the origin of opening the dropdown and specify if initial focus should be set.
          * Currently we set it only when the origin is keyboard.
          * We might not need to track this in future when focus-visible support is improved across browsers
          */
         this.hasInitialFocus = false;
+        /**
+         * The placement of the dropdown.
+         */
         this.placement = 'bottom-start';
+        /**
+         * Make the dropdown match the width of the reference regardless of its
+         * contents. Note that this only applies to the minimum width of the
+         * dropdown. The maximum width is still limited by the viewport.
+         */
         this.justify = false;
+        /**
+         * Do not close the dropdown on outside clicks.
+         */
         this.noAutoClose = false;
+        /**
+         * Do not navigate focus inside the dropdown via vertical arrow keys.
+         */
         this.arrowNavigation = 'vertical';
+        /**
+         * Do not change the size of the dropdown to ensure it isn’t too big to fit
+         * in the viewport (or more specifically, its clipping context).
+         */
         this.noResize = false;
+        /**
+         * Allow overflow when dropdown is open.
+         */
         this.overflow = false;
+        /**
+         * No element in dropdown will receive focus when dropdown is open.
+         * By default, the first element in tab order will receive a focus.
+         * @deprecated
+         * Using noInitialFocus property would be a bad practice from a11y perspective.
+         * We always want visible focus to jump inside the dropdown when user uses keyboard and noInitialFocus allows to turn it off which might introduce a bug.
+         * hasInitialFocus should resolve the cause of the original problem instead.
+         */
         this.noInitialFocus = false;
+        /**
+         * Trigger element will not receive focus when dropdown is closed.
+         */
         this.noReturnFocus = false;
+        /**
+         * Whether the dropdown trigger should be initialized only before first opening.
+         * Can be useful when trigger is rendered dynamically.
+         */
+        this.delayedTriggerInit = false;
+    }
+    /**
+     * Whether the dropdown is open.
+     * @readonly
+     */
+    get isOpen() {
+        return this._isOpen ?? false;
     }
     clickHandler(event) {
+        if (!this.trigger && this.delayedTriggerInit) {
+            this.hasInitialFocus = this.isEventOriginFromKeyboard(event.detail);
+            this.initTrigger();
+            this.toggle();
+        }
         // hide dropdown on button clicks inside the dropdown content
         const path = event.composedPath();
         if (!this.noAutoClose &&
@@ -45,22 +94,25 @@ export class CatDropdown {
      * Toggles the dropdown.
      */
     async toggle() {
-        this.isOpen ? this.close() : this.open();
+        this._isOpen ? this.close() : this.open();
     }
     /**
      * Opens the dropdown.
      * @param isFocusVisible is dropdown should receive visible focus when it's opened.
      */
     async open(isFocusVisible) {
+        if (!this.trigger && this.delayedTriggerInit) {
+            this.initTrigger();
+        }
         if (this.isOpen === null || this.isOpen) {
             return; // busy or open
         }
-        this.isOpen = null;
+        this._isOpen = null;
         this.content.style.display = 'block';
         this.hasInitialFocus = isFocusVisible ?? this.hasInitialFocus;
         // give CSS transition time to apply
         setTimeout(() => {
-            this.isOpen = true;
+            this._isOpen = true;
             this.content.classList.add('show');
             this.trigger?.setAttribute('aria-expanded', 'true');
             this.trap = this.trap
@@ -105,15 +157,15 @@ export class CatDropdown {
      * Closes the dropdown.
      */
     async close() {
-        if (!this.isOpen) {
+        if (!this._isOpen) {
             return; // busy or closed
         }
-        this.isOpen = null;
+        this._isOpen = null;
         this.trap?.deactivate();
         this.content.classList.remove('show');
         // give CSS transition time to apply
         setTimeout(() => {
-            this.isOpen = false;
+            this._isOpen = false;
             this.content.classList.remove('show');
             this.content.style.display = '';
             this.trigger?.setAttribute('aria-expanded', 'false');
@@ -122,10 +174,12 @@ export class CatDropdown {
     }
     componentDidLoad() {
         this.initAnchor();
-        this.initTrigger();
+        if (!this.delayedTriggerInit) {
+            this.initTrigger();
+        }
     }
     render() {
-        return (h(Host, { key: '05019873f2b9ae46bfbe4c34c1c9b7349dddeb92' }, h("slot", { key: '0760052c1d65818b5a4f8c8bf8dc587da27ec5b3', name: "anchor", ref: el => (this.anchorSlot = el) }), h("slot", { key: '1ab727c6bc362c9a0d233fd1c0d3db76e04b2f1c', name: "trigger", ref: el => (this.triggerSlot = el) }), h("div", { key: '02c216317f4140217578020d83fb853194993d96', id: this.contentId, class: { content: true, 'overflow-auto': !this.overflow, justified: this.justify, aligned: !this.justify }, ref: el => (this.content = el) }, h("slot", { key: '8c31f2d7b16bbdfdc528938b5dd09fa84eeb80c3', name: "content" }))));
+        return (h(Host, { key: '5206026fafea4b080f8890bd89b12885524cccd9' }, h("slot", { key: '316ef973ba544f937217de5d27af51e24a55795d', name: "anchor", ref: el => (this.anchorSlot = el) }), h("slot", { key: '95b9039dd8a88eb79836abe428bd97403f10d886', name: "trigger", ref: el => (this.triggerSlot = el) }), h("div", { key: 'a0067efa6a259faa2c89ed092cb1f467a756e0f3', id: this.contentId, class: { content: true, 'overflow-auto': !this.overflow, justified: this.justify, aligned: !this.justify }, ref: el => (this.content = el) }, h("slot", { key: '6904a4c7e24ed5fd28a48735ec82d9cab26e71e2', name: "content" }))));
     }
     get contentId() {
         return `cat-dropdown-${this.id}`;
@@ -235,6 +289,7 @@ export class CatDropdown {
         return {
             "placement": {
                 "type": "string",
+                "attribute": "placement",
                 "mutable": false,
                 "complexType": {
                     "original": "Placement",
@@ -253,12 +308,14 @@ export class CatDropdown {
                     "tags": [],
                     "text": "The placement of the dropdown."
                 },
-                "attribute": "placement",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "'bottom-start'"
             },
             "justify": {
                 "type": "boolean",
+                "attribute": "justify",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -271,12 +328,14 @@ export class CatDropdown {
                     "tags": [],
                     "text": "Make the dropdown match the width of the reference regardless of its\ncontents. Note that this only applies to the minimum width of the\ndropdown. The maximum width is still limited by the viewport."
                 },
-                "attribute": "justify",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "noAutoClose": {
                 "type": "boolean",
+                "attribute": "no-auto-close",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -289,12 +348,14 @@ export class CatDropdown {
                     "tags": [],
                     "text": "Do not close the dropdown on outside clicks."
                 },
-                "attribute": "no-auto-close",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "arrowNavigation": {
                 "type": "string",
+                "attribute": "arrow-navigation",
                 "mutable": false,
                 "complexType": {
                     "original": "'horizontal' | 'vertical' | 'none'",
@@ -307,12 +368,14 @@ export class CatDropdown {
                     "tags": [],
                     "text": "Do not navigate focus inside the dropdown via vertical arrow keys."
                 },
-                "attribute": "arrow-navigation",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "'vertical'"
             },
             "noResize": {
                 "type": "boolean",
+                "attribute": "no-resize",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -325,12 +388,14 @@ export class CatDropdown {
                     "tags": [],
                     "text": "Do not change the size of the dropdown to ensure it isn\u2019t too big to fit\nin the viewport (or more specifically, its clipping context)."
                 },
-                "attribute": "no-resize",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "overflow": {
                 "type": "boolean",
+                "attribute": "overflow",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -343,12 +408,14 @@ export class CatDropdown {
                     "tags": [],
                     "text": "Allow overflow when dropdown is open."
                 },
-                "attribute": "overflow",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "noInitialFocus": {
                 "type": "boolean",
+                "attribute": "no-initial-focus",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -364,12 +431,36 @@ export class CatDropdown {
                         }],
                     "text": "No element in dropdown will receive focus when dropdown is open.\nBy default, the first element in tab order will receive a focus."
                 },
-                "attribute": "no-initial-focus",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "isOpen": {
+                "type": "boolean",
+                "attribute": "is-open",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "readonly",
+                            "text": undefined
+                        }],
+                    "text": "Whether the dropdown is open."
+                },
+                "getter": true,
+                "setter": false,
+                "reflect": false
+            },
             "noReturnFocus": {
                 "type": "boolean",
+                "attribute": "no-return-focus",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -382,7 +473,28 @@ export class CatDropdown {
                     "tags": [],
                     "text": "Trigger element will not receive focus when dropdown is closed."
                 },
-                "attribute": "no-return-focus",
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "delayedTriggerInit": {
+                "type": "boolean",
+                "attribute": "delayed-trigger-init",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the dropdown trigger should be initialized only before first opening.\nCan be useful when trigger is rendered dynamically."
+                },
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             }

package/dist/collection/components/cat-dropdown/cat-dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"cat-dropdown.js","sourceRoot":"","sources":["../../../src/components/cat-dropdown/cat-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import { autoUpdate, computePosition, flip, offset, Placement, ReferenceElement, shift, size } from '@floating-ui/dom';\nimport { timeTransitionS } from '@haiilo/catalyst-tokens';\nimport { Component, Event, EventEmitter, h, Host, Listen, Method, Prop } from '@stencil/core';\nimport * as focusTrap from 'focus-trap';\nimport type { FocusableElement } from 'tabbable';\nimport firstTabbable from '../../utils/first-tabbable';\nimport findFirstTabbableIncludeHidden from '../../utils/first-tabbable-with-visibility-hidden';\n\nlet nextUniqueId = 0;\n\n/**\n * A dropdown component to display a list of actions in a dropdown menu or to\n * show additional content on demand.\n */\n@Component({\n  tag: 'cat-dropdown',\n  styleUrl: 'cat-dropdown.scss',\n  shadow: true\n})\nexport class CatDropdown {\n  private static readonly OFFSET = 4;\n  private readonly id = nextUniqueId++;\n  private triggerSlot!: HTMLSlotElement;\n  private trigger?: FocusableElement;\n  private anchorSlot!: HTMLSlotElement;\n  private anchor?: Element;\n  private content!: HTMLElement;\n  private trap?: focusTrap.FocusTrap;\n  private isOpen: boolean | null = false;\n  /**\n   * Tracking the origin of opening the dropdown and specify if initial focus should be set.\n   * Currently we set it only when the origin is keyboard.\n   * We might not need to track this in future when focus-visible support is improved across browsers\n   */\n  private hasInitialFocus = false;\n\n  /**\n   * The placement of the dropdown.\n   */\n  @Prop() placement: Placement = 'bottom-start';\n\n  /**\n   * Make the dropdown match the width of the reference regardless of its\n   * contents. Note that this only applies to the minimum width of the\n   * dropdown. The maximum width is still limited by the viewport.\n   */\n  @Prop() justify = false;\n\n  /**\n   * Do not close the dropdown on outside clicks.\n   */\n  @Prop() noAutoClose = false;\n\n  /**\n   * Do not navigate focus inside the dropdown via vertical arrow keys.\n   */\n  @Prop() arrowNavigation: 'horizontal' | 'vertical' | 'none' = 'vertical';\n\n  /**\n   * Do not change the size of the dropdown to ensure it isn’t too big to fit\n   * in the viewport (or more specifically, its clipping context).\n   */\n  @Prop() noResize = false;\n\n  /**\n   * Allow overflow when dropdown is open.\n   */\n  @Prop() overflow = false;\n\n  /**\n   * No element in dropdown will receive focus when dropdown is open.\n   * By default, the first element in tab order will receive a focus.\n   * @deprecated\n   * Using noInitialFocus property would be a bad practice from a11y perspective.\n   * We always want visible focus to jump inside the dropdown when user uses keyboard and noInitialFocus allows to turn it off which might introduce a bug.\n   * hasInitialFocus should resolve the cause of the original problem instead.\n   */\n  @Prop() noInitialFocus = false;\n\n  /**\n   * Trigger element will not receive focus when dropdown is closed.\n   */\n  @Prop() noReturnFocus = false;\n\n  /**\n   * Emitted when the dropdown is opened.\n   */\n  @Event() catOpen!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the dropdown is closed.\n   */\n  @Event() catClose!: EventEmitter<FocusEvent>;\n\n  @Listen('catClick')\n  clickHandler(event: CustomEvent<MouseEvent>) {\n    // hide dropdown on button clicks inside the dropdown content\n    const path = event.composedPath();\n    if (\n      !this.noAutoClose &&\n      // check if click was inside of the dropdown content\n      path.includes(this.content) &&\n      // check if click was not on a trigger for a sub-dropdown\n      (event.target as Element)?.slot !== 'trigger' &&\n      // check if click was not an element marked with data-dropdown-no-close\n      !path.slice(0, path.indexOf(this.content)).find(el => this.hasAttribute(el, 'data-dropdown-no-close'))\n    ) {\n      this.close();\n    }\n  }\n\n  /**\n   * Toggles the dropdown.\n   */\n  @Method()\n  async toggle(): Promise<void> {\n    this.isOpen ? this.close() : this.open();\n  }\n\n  /**\n   * Opens the dropdown.\n   * @param isFocusVisible is dropdown should receive visible focus when it's opened.\n   */\n  @Method()\n  async open(isFocusVisible?: boolean): Promise<void> {\n    if (this.isOpen === null || this.isOpen) {\n      return; // busy or open\n    }\n\n    this.isOpen = null;\n    this.content.style.display = 'block';\n    this.hasInitialFocus = isFocusVisible ?? this.hasInitialFocus;\n    // give CSS transition time to apply\n    setTimeout(() => {\n      this.isOpen = true;\n      this.content.classList.add('show');\n      this.trigger?.setAttribute('aria-expanded', 'true');\n      this.trap = this.trap\n        ? this.trap.updateContainerElements(this.content)\n        : focusTrap.createFocusTrap(this.content, {\n            tabbableOptions: {\n              getShadowRoot: true\n            },\n            allowOutsideClick: true,\n            clickOutsideDeactivates: event =>\n              !this.noAutoClose &&\n              // check if click was outside of the dropdown content\n              !event.composedPath().includes(this.content) &&\n              // check if click was not on an element marked with data-dropdown-no-close\n              !event.composedPath().find(el => this.hasAttribute(el, 'data-dropdown-no-close')),\n            onPostDeactivate: () => this.close(),\n            onPostActivate: () => this.catOpen.emit(),\n            setReturnFocus: elem => (this.noReturnFocus ? false : this.trigger || elem),\n            isKeyForward: event => {\n              if (\n                (this.arrowNavigation === 'horizontal' && event.key === 'ArrowRight') ||\n                (this.arrowNavigation === 'vertical' && event.key === 'ArrowDown')\n              ) {\n                event.preventDefault();\n                return true;\n              }\n              return event.key === 'Tab';\n            },\n            isKeyBackward: event => {\n              if (\n                (this.arrowNavigation === 'horizontal' && event.key === 'ArrowLeft') ||\n                (this.arrowNavigation === 'vertical' && event.key === 'ArrowUp')\n              ) {\n                event.preventDefault();\n                return true;\n              }\n              return event.key === 'Tab' && event.shiftKey;\n            },\n            initialFocus: () => {\n              return this.hasInitialFocus && !this.noInitialFocus ? undefined : false;\n            }\n          });\n      this.trap.activate();\n    });\n  }\n\n  /**\n   * Closes the dropdown.\n   */\n  @Method()\n  async close(): Promise<void> {\n    if (!this.isOpen) {\n      return; // busy or closed\n    }\n\n    this.isOpen = null;\n    this.trap?.deactivate();\n    this.content.classList.remove('show');\n    // give CSS transition time to apply\n    setTimeout(() => {\n      this.isOpen = false;\n      this.content.classList.remove('show');\n      this.content.style.display = '';\n      this.trigger?.setAttribute('aria-expanded', 'false');\n      this.catClose.emit();\n    }, timeTransitionS);\n  }\n\n  componentDidLoad() {\n    this.initAnchor();\n    this.initTrigger();\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot name=\"anchor\" ref={el => (this.anchorSlot = el as HTMLSlotElement)}></slot>\n        <slot name=\"trigger\" ref={el => (this.triggerSlot = el as HTMLSlotElement)}></slot>\n        <div\n          id={this.contentId}\n          class={{ content: true, 'overflow-auto': !this.overflow, justified: this.justify, aligned: !this.justify }}\n          ref={el => (this.content = el as HTMLElement)}\n        >\n          <slot name=\"content\"></slot>\n        </div>\n      </Host>\n    );\n  }\n\n  private get contentId() {\n    return `cat-dropdown-${this.id}`;\n  }\n\n  private initTrigger() {\n    this.trigger = this.findTrigger();\n    const ariaHaspopup = this.trigger.getAttribute('aria-haspopup');\n    this.trigger.setAttribute('aria-haspopup', ariaHaspopup ?? 'true');\n    this.trigger.setAttribute('aria-expanded', 'false');\n    this.trigger.setAttribute('aria-controls', this.contentId);\n    this.trigger.addEventListener('click', (event: Event) => {\n      this.hasInitialFocus = this.isEventOriginFromKeyboard(event as UIEvent);\n      this.toggle();\n    });\n    if (!this.anchor) {\n      autoUpdate(this.trigger, this.content, () => this.update(this.trigger));\n    }\n  }\n\n  private isEventOriginFromKeyboard(event: UIEvent): boolean {\n    return event.detail === 0;\n  }\n\n  private initAnchor() {\n    this.anchor = (this.anchorSlot?.assignedElements?.() || [])[0];\n    if (this.anchor) {\n      autoUpdate(this.anchor, this.content, () => this.update(this.anchor));\n    }\n  }\n\n  private findTrigger() {\n    let trigger: FocusableElement | undefined;\n    let elems = this.triggerSlot?.assignedElements?.() || [];\n    while (!trigger && elems.length) {\n      const elem = elems.shift();\n      trigger = elem?.hasAttribute('data-trigger')\n        ? (elem as HTMLElement)\n        : (elem?.querySelector('[data-trigger]') ?? undefined);\n    }\n    if (!trigger) {\n      trigger = firstTabbable(this.triggerSlot);\n    }\n    // if no tabbable element is still found let's attempt to search through elements with visibility:hidden styles\n    // which stencil assigns to component in prehydration state\n    if (!trigger) {\n      elems = this.triggerSlot?.assignedElements?.() || [];\n      while (!trigger && elems.length) {\n        const elem = elems.shift();\n        trigger = findFirstTabbableIncludeHidden(elem as HTMLElement);\n      }\n    }\n    if (!trigger) {\n      throw new Error('Cannot find tabbable element. Use [data-trigger] to set the trigger.');\n    }\n    return trigger;\n  }\n\n  private update(anchorElement: ReferenceElement | undefined, justify = this.justify) {\n    if (anchorElement) {\n      const resize = this.noResize\n        ? []\n        : [\n            size({\n              padding: CatDropdown.OFFSET,\n              apply({ rects, availableWidth, availableHeight, elements }) {\n                if (justify) {\n                  Object.assign(elements.floating.style, {\n                    minWidth: `${rects.reference.width}px`,\n                    maxWidth: `${rects.reference.width}px`,\n                    maxHeight: `${availableHeight}px`\n                  });\n                } else {\n                  Object.assign(elements.floating.style, {\n                    maxWidth: `${availableWidth}px`,\n                    maxHeight: `${availableHeight}px`\n                  });\n                }\n              }\n            })\n          ];\n      computePosition(anchorElement, this.content, {\n        strategy: 'fixed',\n        placement: this.placement,\n        middleware: [offset(CatDropdown.OFFSET), flip(), shift(), ...resize]\n      }).then(({ x, y, placement }) => {\n        this.content.dataset.placement = placement;\n        Object.assign(this.content.style, {\n          left: `${x}px`,\n          top: `${y}px`\n        });\n      });\n    }\n  }\n\n  private hasAttribute(elem: EventTarget, attr: string) {\n    return elem instanceof HTMLElement && elem.hasAttribute(attr);\n  }\n}\n"]}
+{"version":3,"file":"cat-dropdown.js","sourceRoot":"","sources":["../../../src/components/cat-dropdown/cat-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import { autoUpdate, computePosition, flip, offset, Placement, ReferenceElement, shift, size } from '@floating-ui/dom';\nimport { timeTransitionS } from '@haiilo/catalyst-tokens';\nimport { Component, Event, EventEmitter, h, Host, Listen, Method, Prop } from '@stencil/core';\nimport * as focusTrap from 'focus-trap';\nimport type { FocusableElement } from 'tabbable';\nimport firstTabbable from '../../utils/first-tabbable';\nimport findFirstTabbableIncludeHidden from '../../utils/first-tabbable-with-visibility-hidden';\n\nlet nextUniqueId = 0;\n\n/**\n * A dropdown component to display a list of actions in a dropdown menu or to\n * show additional content on demand.\n */\n@Component({\n  tag: 'cat-dropdown',\n  styleUrl: 'cat-dropdown.scss',\n  shadow: true\n})\nexport class CatDropdown {\n  private static readonly OFFSET = 4;\n  private readonly id = nextUniqueId++;\n  private triggerSlot!: HTMLSlotElement;\n  private trigger?: FocusableElement;\n  private anchorSlot!: HTMLSlotElement;\n  private anchor?: Element;\n  private content!: HTMLElement;\n  private trap?: focusTrap.FocusTrap;\n  private _isOpen: boolean | null = false;\n  /**\n   * Tracking the origin of opening the dropdown and specify if initial focus should be set.\n   * Currently we set it only when the origin is keyboard.\n   * We might not need to track this in future when focus-visible support is improved across browsers\n   */\n  private hasInitialFocus = false;\n\n  /**\n   * The placement of the dropdown.\n   */\n  @Prop() placement: Placement = 'bottom-start';\n\n  /**\n   * Make the dropdown match the width of the reference regardless of its\n   * contents. Note that this only applies to the minimum width of the\n   * dropdown. The maximum width is still limited by the viewport.\n   */\n  @Prop() justify = false;\n\n  /**\n   * Do not close the dropdown on outside clicks.\n   */\n  @Prop() noAutoClose = false;\n\n  /**\n   * Do not navigate focus inside the dropdown via vertical arrow keys.\n   */\n  @Prop() arrowNavigation: 'horizontal' | 'vertical' | 'none' = 'vertical';\n\n  /**\n   * Do not change the size of the dropdown to ensure it isn’t too big to fit\n   * in the viewport (or more specifically, its clipping context).\n   */\n  @Prop() noResize = false;\n\n  /**\n   * Allow overflow when dropdown is open.\n   */\n  @Prop() overflow = false;\n\n  /**\n   * No element in dropdown will receive focus when dropdown is open.\n   * By default, the first element in tab order will receive a focus.\n   * @deprecated\n   * Using noInitialFocus property would be a bad practice from a11y perspective.\n   * We always want visible focus to jump inside the dropdown when user uses keyboard and noInitialFocus allows to turn it off which might introduce a bug.\n   * hasInitialFocus should resolve the cause of the original problem instead.\n   */\n  @Prop() noInitialFocus = false;\n\n  /**\n   * Whether the dropdown is open.\n   * @readonly\n   */\n  @Prop() get isOpen(): boolean {\n    return this._isOpen ?? false;\n  }\n\n  /**\n   * Trigger element will not receive focus when dropdown is closed.\n   */\n  @Prop() noReturnFocus = false;\n\n  /**\n   * Whether the dropdown trigger should be initialized only before first opening.\n   * Can be useful when trigger is rendered dynamically.\n   */\n  @Prop() delayedTriggerInit = false;\n\n  /**\n   * Emitted when the dropdown is opened.\n   */\n  @Event() catOpen!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the dropdown is closed.\n   */\n  @Event() catClose!: EventEmitter<FocusEvent>;\n\n  @Listen('catClick')\n  clickHandler(event: CustomEvent<MouseEvent>) {\n    if (!this.trigger && this.delayedTriggerInit) {\n      this.hasInitialFocus = this.isEventOriginFromKeyboard(event.detail);\n      this.initTrigger();\n      this.toggle();\n    }\n\n    // hide dropdown on button clicks inside the dropdown content\n    const path = event.composedPath();\n    if (\n      !this.noAutoClose &&\n      // check if click was inside of the dropdown content\n      path.includes(this.content) &&\n      // check if click was not on a trigger for a sub-dropdown\n      (event.target as Element)?.slot !== 'trigger' &&\n      // check if click was not an element marked with data-dropdown-no-close\n      !path.slice(0, path.indexOf(this.content)).find(el => this.hasAttribute(el, 'data-dropdown-no-close'))\n    ) {\n      this.close();\n    }\n  }\n\n  /**\n   * Toggles the dropdown.\n   */\n  @Method()\n  async toggle(): Promise<void> {\n    this._isOpen ? this.close() : this.open();\n  }\n\n  /**\n   * Opens the dropdown.\n   * @param isFocusVisible is dropdown should receive visible focus when it's opened.\n   */\n  @Method()\n  async open(isFocusVisible?: boolean): Promise<void> {\n    if (!this.trigger && this.delayedTriggerInit) {\n      this.initTrigger();\n    }\n\n    if (this.isOpen === null || this.isOpen) {\n      return; // busy or open\n    }\n\n    this._isOpen = null;\n    this.content.style.display = 'block';\n    this.hasInitialFocus = isFocusVisible ?? this.hasInitialFocus;\n    // give CSS transition time to apply\n    setTimeout(() => {\n      this._isOpen = true;\n      this.content.classList.add('show');\n      this.trigger?.setAttribute('aria-expanded', 'true');\n      this.trap = this.trap\n        ? this.trap.updateContainerElements(this.content)\n        : focusTrap.createFocusTrap(this.content, {\n            tabbableOptions: {\n              getShadowRoot: true\n            },\n            allowOutsideClick: true,\n            clickOutsideDeactivates: event =>\n              !this.noAutoClose &&\n              // check if click was outside of the dropdown content\n              !event.composedPath().includes(this.content) &&\n              // check if click was not on an element marked with data-dropdown-no-close\n              !event.composedPath().find(el => this.hasAttribute(el, 'data-dropdown-no-close')),\n            onPostDeactivate: () => this.close(),\n            onPostActivate: () => this.catOpen.emit(),\n            setReturnFocus: elem => (this.noReturnFocus ? false : this.trigger || elem),\n            isKeyForward: event => {\n              if (\n                (this.arrowNavigation === 'horizontal' && event.key === 'ArrowRight') ||\n                (this.arrowNavigation === 'vertical' && event.key === 'ArrowDown')\n              ) {\n                event.preventDefault();\n                return true;\n              }\n              return event.key === 'Tab';\n            },\n            isKeyBackward: event => {\n              if (\n                (this.arrowNavigation === 'horizontal' && event.key === 'ArrowLeft') ||\n                (this.arrowNavigation === 'vertical' && event.key === 'ArrowUp')\n              ) {\n                event.preventDefault();\n                return true;\n              }\n              return event.key === 'Tab' && event.shiftKey;\n            },\n            initialFocus: () => {\n              return this.hasInitialFocus && !this.noInitialFocus ? undefined : false;\n            }\n          });\n      this.trap.activate();\n    });\n  }\n\n  /**\n   * Closes the dropdown.\n   */\n  @Method()\n  async close(): Promise<void> {\n    if (!this._isOpen) {\n      return; // busy or closed\n    }\n\n    this._isOpen = null;\n    this.trap?.deactivate();\n    this.content.classList.remove('show');\n    // give CSS transition time to apply\n    setTimeout(() => {\n      this._isOpen = false;\n      this.content.classList.remove('show');\n      this.content.style.display = '';\n      this.trigger?.setAttribute('aria-expanded', 'false');\n      this.catClose.emit();\n    }, timeTransitionS);\n  }\n\n  componentDidLoad() {\n    this.initAnchor();\n    if (!this.delayedTriggerInit) {\n      this.initTrigger();\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot name=\"anchor\" ref={el => (this.anchorSlot = el as HTMLSlotElement)}></slot>\n        <slot name=\"trigger\" ref={el => (this.triggerSlot = el as HTMLSlotElement)}></slot>\n        <div\n          id={this.contentId}\n          class={{ content: true, 'overflow-auto': !this.overflow, justified: this.justify, aligned: !this.justify }}\n          ref={el => (this.content = el as HTMLElement)}\n        >\n          <slot name=\"content\"></slot>\n        </div>\n      </Host>\n    );\n  }\n\n  private get contentId() {\n    return `cat-dropdown-${this.id}`;\n  }\n\n  private initTrigger() {\n    this.trigger = this.findTrigger();\n    const ariaHaspopup = this.trigger.getAttribute('aria-haspopup');\n    this.trigger.setAttribute('aria-haspopup', ariaHaspopup ?? 'true');\n    this.trigger.setAttribute('aria-expanded', 'false');\n    this.trigger.setAttribute('aria-controls', this.contentId);\n    this.trigger.addEventListener('click', (event: Event) => {\n      this.hasInitialFocus = this.isEventOriginFromKeyboard(event as UIEvent);\n      this.toggle();\n    });\n    if (!this.anchor) {\n      autoUpdate(this.trigger, this.content, () => this.update(this.trigger));\n    }\n  }\n\n  private isEventOriginFromKeyboard(event: UIEvent): boolean {\n    return event.detail === 0;\n  }\n\n  private initAnchor() {\n    this.anchor = (this.anchorSlot?.assignedElements?.() || [])[0];\n    if (this.anchor) {\n      autoUpdate(this.anchor, this.content, () => this.update(this.anchor));\n    }\n  }\n\n  private findTrigger() {\n    let trigger: FocusableElement | undefined;\n    let elems = this.triggerSlot?.assignedElements?.() || [];\n    while (!trigger && elems.length) {\n      const elem = elems.shift();\n      trigger = elem?.hasAttribute('data-trigger')\n        ? (elem as HTMLElement)\n        : (elem?.querySelector('[data-trigger]') ?? undefined);\n    }\n    if (!trigger) {\n      trigger = firstTabbable(this.triggerSlot);\n    }\n    // if no tabbable element is still found let's attempt to search through elements with visibility:hidden styles\n    // which stencil assigns to component in prehydration state\n    if (!trigger) {\n      elems = this.triggerSlot?.assignedElements?.() || [];\n      while (!trigger && elems.length) {\n        const elem = elems.shift();\n        trigger = findFirstTabbableIncludeHidden(elem as HTMLElement);\n      }\n    }\n    if (!trigger) {\n      throw new Error('Cannot find tabbable element. Use [data-trigger] to set the trigger.');\n    }\n    return trigger;\n  }\n\n  private update(anchorElement: ReferenceElement | undefined, justify = this.justify) {\n    if (anchorElement) {\n      const resize = this.noResize\n        ? []\n        : [\n            size({\n              padding: CatDropdown.OFFSET,\n              apply({ rects, availableWidth, availableHeight, elements }) {\n                if (justify) {\n                  Object.assign(elements.floating.style, {\n                    minWidth: `${rects.reference.width}px`,\n                    maxWidth: `${rects.reference.width}px`,\n                    maxHeight: `${availableHeight}px`\n                  });\n                } else {\n                  Object.assign(elements.floating.style, {\n                    maxWidth: `${availableWidth}px`,\n                    maxHeight: `${availableHeight}px`\n                  });\n                }\n              }\n            })\n          ];\n      computePosition(anchorElement, this.content, {\n        strategy: 'fixed',\n        placement: this.placement,\n        middleware: [offset(CatDropdown.OFFSET), flip(), shift(), ...resize]\n      }).then(({ x, y, placement }) => {\n        this.content.dataset.placement = placement;\n        Object.assign(this.content.style, {\n          left: `${x}px`,\n          top: `${y}px`\n        });\n      });\n    }\n  }\n\n  private hasAttribute(elem: EventTarget, attr: string) {\n    return elem instanceof HTMLElement && elem.hasAttribute(attr);\n  }\n}\n"]}