@haiilo/catalyst 8.1.0 → 8.2.0

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

@@ -6,319 +6,319 @@ import { tabbable } from "tabbable";
 import firstTabbable from "../../utils/first-tabbable";
 let nextUniqueId = 0;
 export class CatDropdown {
-  constructor() {
-    this.id = nextUniqueId++;
-    this.isOpen = false;
-    this.placement = 'bottom-start';
-    this.noAutoClose = false;
-    this.overflow = false;
-  }
-  clickHandler(event) {
-    // we need to delay the initialization of the trigger until first
-    // interaction because the element might still be hidden (and thus not
-    // tabbable) if contained in another Stencil web component
-    if (!this.trigger) {
-      this.initTrigger();
-      this.toggle();
+    constructor() {
+        this.id = nextUniqueId++;
+        this.isOpen = false;
+        this.placement = 'bottom-start';
+        this.noAutoClose = false;
+        this.overflow = false;
     }
-    // hide dropdown on button clicks inside the dropdown content
-    const path = event.composedPath();
-    if (!this.noAutoClose &&
-      // check if click was inside of the dropdown content
-      path.includes(this.content) &&
-      // check if click was not on a trigger for a sub-dropdown
-      event.target?.slot !== 'trigger' &&
-      // check if click was not an element marked with data-dropdown-no-close
-      !path.slice(0, path.indexOf(this.content)).find(el => this.hasAttribute(el, 'data-dropdown-no-close'))) {
-      this.close();
+    clickHandler(event) {
+        // we need to delay the initialization of the trigger until first
+        // interaction because the element might still be hidden (and thus not
+        // tabbable) if contained in another Stencil web component
+        if (!this.trigger) {
+            this.initTrigger();
+            this.toggle();
+        }
+        // hide dropdown on button clicks inside the dropdown content
+        const path = event.composedPath();
+        if (!this.noAutoClose &&
+            // check if click was inside of the dropdown content
+            path.includes(this.content) &&
+            // check if click was not on a trigger for a sub-dropdown
+            event.target?.slot !== 'trigger' &&
+            // check if click was not an element marked with data-dropdown-no-close
+            !path.slice(0, path.indexOf(this.content)).find(el => this.hasAttribute(el, 'data-dropdown-no-close'))) {
+            this.close();
+        }
     }
-  }
-  /**
-   * Toggles the dropdown.
-   */
-  async toggle() {
-    this.isOpen ? this.close() : this.open();
-  }
-  /**
-   * Opens the dropdown.
-   */
-  async open() {
-    if (this.isOpen === null || this.isOpen) {
-      return; // busy or open
+    /**
+     * Toggles the dropdown.
+     */
+    async toggle() {
+        this.isOpen ? this.close() : this.open();
     }
-    this.isOpen = null;
-    this.content.style.display = 'block';
-    // give CSS transition time to apply
-    setTimeout(() => {
-      this.isOpen = true;
-      this.content.classList.add('show');
-      this.trigger?.setAttribute('aria-expanded', 'true');
-      this.catOpen.emit();
-      this.trap = this.trap
-        ? this.trap.updateContainerElements(this.content)
-        : focusTrap.createFocusTrap(this.content, {
-          tabbableOptions: {
-            getShadowRoot: true
-          },
-          allowOutsideClick: true,
-          clickOutsideDeactivates: event => !this.noAutoClose &&
-            // check if click was outside of the dropdown content
-            !event.composedPath().includes(this.content) &&
-            // check if click was not on an element marked with data-dropdown-no-close
-            !event.composedPath().find(el => this.hasAttribute(el, 'data-dropdown-no-close')),
-          onPostDeactivate: () => this.close()
+    /**
+     * Opens the dropdown.
+     */
+    async open() {
+        if (this.isOpen === null || this.isOpen) {
+            return; // busy or open
+        }
+        this.isOpen = null;
+        this.content.style.display = 'block';
+        // give CSS transition time to apply
+        setTimeout(() => {
+            this.isOpen = true;
+            this.content.classList.add('show');
+            this.trigger?.setAttribute('aria-expanded', 'true');
+            this.catOpen.emit();
+            this.trap = this.trap
+                ? this.trap.updateContainerElements(this.content)
+                : focusTrap.createFocusTrap(this.content, {
+                    tabbableOptions: {
+                        getShadowRoot: true
+                    },
+                    allowOutsideClick: true,
+                    clickOutsideDeactivates: event => !this.noAutoClose &&
+                        // check if click was outside of the dropdown content
+                        !event.composedPath().includes(this.content) &&
+                        // check if click was not on an element marked with data-dropdown-no-close
+                        !event.composedPath().find(el => this.hasAttribute(el, 'data-dropdown-no-close')),
+                    onPostDeactivate: () => this.close()
+                });
+            this.trap.activate();
         });
-      this.trap.activate();
-    });
-  }
-  /**
-   * Closes the dropdown.
-   */
-  async close() {
-    if (!this.isOpen) {
-      return; // busy or closed
     }
-    this.isOpen = null;
-    this.content.classList.remove('show');
-    // give CSS transition time to apply
-    setTimeout(() => {
-      this.isOpen = false;
-      this.content.classList.remove('show');
-      this.content.style.display = '';
-      this.trigger?.setAttribute('aria-expanded', 'false');
-      this.trap?.deactivate();
-      this.catClose.emit();
-    }, timeTransitionS);
-  }
-  componentDidLoad() {
-    this.keyListener = event => {
-      if (this.isOpen && ['ArrowDown', 'ArrowUp'].includes(event.key)) {
-        const targetElements = tabbable(this.content, { includeContainer: false, getShadowRoot: true });
-        const activeElement = firstTabbable(document.activeElement);
-        const activeIdx = activeElement ? targetElements.indexOf(activeElement) : -1;
-        const activeOff = event.key === 'ArrowDown' ? 1 : -1;
-        const targetIdx = activeIdx < 0 ? 0 : (activeIdx + activeOff + targetElements.length) % targetElements.length;
-        targetElements[targetIdx].focus();
-        event.preventDefault();
-      }
-    };
-    document.addEventListener('keydown', this.keyListener);
-  }
-  disconnectedCallback() {
-    if (this.keyListener) {
-      document.removeEventListener('keydown', this.keyListener);
+    /**
+     * Closes the dropdown.
+     */
+    async close() {
+        if (!this.isOpen) {
+            return; // busy or closed
+        }
+        this.isOpen = null;
+        this.content.classList.remove('show');
+        // give CSS transition time to apply
+        setTimeout(() => {
+            this.isOpen = false;
+            this.content.classList.remove('show');
+            this.content.style.display = '';
+            this.trigger?.setAttribute('aria-expanded', 'false');
+            this.trap?.deactivate();
+            this.catClose.emit();
+        }, timeTransitionS);
     }
-  }
-  render() {
-    return (h(Host, null, h("slot", { name: "trigger", ref: el => (this.triggerSlot = el) }), h("div", { id: this.contentId, class: { content: true, 'overflow-auto': !this.overflow }, ref: el => (this.content = el) }, h("slot", { name: "content" }))));
-  }
-  get contentId() {
-    return `cat-dropdown-${this.id}`;
-  }
-  initTrigger() {
-    this.trigger = this.findTrigger();
-    this.trigger.setAttribute('aria-haspopup', 'true');
-    this.trigger.setAttribute('aria-expanded', 'false');
-    this.trigger.setAttribute('aria-controls', this.contentId);
-    this.trigger.addEventListener('click', () => this.toggle());
-    autoUpdate(this.trigger, this.content, () => this.update());
-  }
-  findTrigger() {
-    let trigger;
-    const elems = this.triggerSlot?.assignedElements?.() || [];
-    while (!trigger && elems.length) {
-      const elem = elems.shift();
-      trigger = elem?.hasAttribute('data-trigger')
-        ? elem
-        : elem?.querySelector('[data-trigger]') ?? undefined;
+    componentDidLoad() {
+        this.keyListener = event => {
+            if (this.isOpen && ['ArrowDown', 'ArrowUp'].includes(event.key)) {
+                const targetElements = tabbable(this.content, { includeContainer: false, getShadowRoot: true });
+                const activeElement = firstTabbable(document.activeElement);
+                const activeIdx = activeElement ? targetElements.indexOf(activeElement) : -1;
+                const activeOff = event.key === 'ArrowDown' ? 1 : -1;
+                const targetIdx = activeIdx < 0 ? 0 : (activeIdx + activeOff + targetElements.length) % targetElements.length;
+                targetElements[targetIdx].focus();
+                event.preventDefault();
+            }
+        };
+        document.addEventListener('keydown', this.keyListener);
     }
-    if (!trigger) {
-      trigger = firstTabbable(this.triggerSlot);
+    disconnectedCallback() {
+        if (this.keyListener) {
+            document.removeEventListener('keydown', this.keyListener);
+        }
     }
-    if (!trigger) {
-      throw new Error('Cannot find tabbable element. Use [data-trigger] to set the trigger.');
+    render() {
+        return (h(Host, null, h("slot", { name: "trigger", ref: el => (this.triggerSlot = el) }), h("div", { id: this.contentId, class: { content: true, 'overflow-auto': !this.overflow }, ref: el => (this.content = el) }, h("slot", { name: "content" }))));
     }
-    return trigger;
-  }
-  update() {
-    if (this.trigger) {
-      computePosition(this.trigger, this.content, {
-        strategy: 'fixed',
-        placement: this.placement,
-        middleware: [
-          offset(CatDropdown.OFFSET),
-          flip(),
-          size({
-            padding: CatDropdown.OFFSET,
-            apply({ availableWidth, availableHeight, elements }) {
-              Object.assign(elements.floating.style, {
-                maxWidth: `${availableWidth}px`,
-                maxHeight: `${availableHeight}px`
-              });
-            }
-          })
-        ]
-      }).then(({ x, y, placement }) => {
-        this.content.dataset.placement = placement;
-        Object.assign(this.content.style, {
-          left: `${x}px`,
-          top: `${y}px`
-        });
-      });
+    get contentId() {
+        return `cat-dropdown-${this.id}`;
     }
-  }
-  hasAttribute(elem, attr) {
-    return elem instanceof HTMLElement && elem.hasAttribute(attr);
-  }
-  static get is() { return "cat-dropdown"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["cat-dropdown.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["cat-dropdown.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "placement": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "Placement",
-          "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
-          "references": {
-            "Placement": {
-              "location": "import",
-              "path": "@floating-ui/dom",
-              "id": "../node_modules/.pnpm/@floating-ui+dom@1.5.3/node_modules/@floating-ui/dom/src/types.d.ts::Placement"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The placement of the dropdown."
-        },
-        "attribute": "placement",
-        "reflect": false,
-        "defaultValue": "'bottom-start'"
-      },
-      "noAutoClose": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Do not close the dropdown on outside clicks."
-        },
-        "attribute": "no-auto-close",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "overflow": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Allow overflow when dropdown is open."
-        },
-        "attribute": "overflow",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get events() {
-    return [{
-        "method": "catOpen",
-        "name": "catOpen",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the dropdown is opened."
-        },
-        "complexType": {
-          "original": "FocusEvent",
-          "resolved": "FocusEvent",
-          "references": {
-            "FocusEvent": {
-              "location": "global",
-              "id": "global::FocusEvent"
-            }
-          }
+    initTrigger() {
+        this.trigger = this.findTrigger();
+        this.trigger.setAttribute('aria-haspopup', 'true');
+        this.trigger.setAttribute('aria-expanded', 'false');
+        this.trigger.setAttribute('aria-controls', this.contentId);
+        this.trigger.addEventListener('click', () => this.toggle());
+        autoUpdate(this.trigger, this.content, () => this.update());
+    }
+    findTrigger() {
+        let trigger;
+        const elems = this.triggerSlot?.assignedElements?.() || [];
+        while (!trigger && elems.length) {
+            const elem = elems.shift();
+            trigger = elem?.hasAttribute('data-trigger')
+                ? elem
+                : elem?.querySelector('[data-trigger]') ?? undefined;
         }
-      }, {
-        "method": "catClose",
-        "name": "catClose",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the dropdown is closed."
-        },
-        "complexType": {
-          "original": "FocusEvent",
-          "resolved": "FocusEvent",
-          "references": {
-            "FocusEvent": {
-              "location": "global",
-              "id": "global::FocusEvent"
-            }
-          }
+        if (!trigger) {
+            trigger = firstTabbable(this.triggerSlot);
         }
-      }];
-  }
-  static get methods() {
-    return {
-      "close": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Closes the dropdown.",
-          "tags": []
+        if (!trigger) {
+            throw new Error('Cannot find tabbable element. Use [data-trigger] to set the trigger.');
         }
-      }
-    };
-  }
-  static get listeners() {
-    return [{
-        "name": "catClick",
-        "method": "clickHandler",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }];
-  }
+        return trigger;
+    }
+    update() {
+        if (this.trigger) {
+            computePosition(this.trigger, this.content, {
+                strategy: 'fixed',
+                placement: this.placement,
+                middleware: [
+                    offset(CatDropdown.OFFSET),
+                    flip(),
+                    size({
+                        padding: CatDropdown.OFFSET,
+                        apply({ availableWidth, availableHeight, elements }) {
+                            Object.assign(elements.floating.style, {
+                                maxWidth: `${availableWidth}px`,
+                                maxHeight: `${availableHeight}px`
+                            });
+                        }
+                    })
+                ]
+            }).then(({ x, y, placement }) => {
+                this.content.dataset.placement = placement;
+                Object.assign(this.content.style, {
+                    left: `${x}px`,
+                    top: `${y}px`
+                });
+            });
+        }
+    }
+    hasAttribute(elem, attr) {
+        return elem instanceof HTMLElement && elem.hasAttribute(attr);
+    }
+    static get is() { return "cat-dropdown"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cat-dropdown.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cat-dropdown.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Placement",
+                    "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+                    "references": {
+                        "Placement": {
+                            "location": "import",
+                            "path": "@floating-ui/dom",
+                            "id": "../node_modules/.pnpm/@floating-ui+dom@1.5.3/node_modules/@floating-ui/dom/src/types.d.ts::Placement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The placement of the dropdown."
+                },
+                "attribute": "placement",
+                "reflect": false,
+                "defaultValue": "'bottom-start'"
+            },
+            "noAutoClose": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Do not close the dropdown on outside clicks."
+                },
+                "attribute": "no-auto-close",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "overflow": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allow overflow when dropdown is open."
+                },
+                "attribute": "overflow",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "catOpen",
+                "name": "catOpen",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the dropdown is opened."
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "catClose",
+                "name": "catClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the dropdown is closed."
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "close": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Closes the dropdown.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get listeners() {
+        return [{
+                "name": "catClick",
+                "method": "clickHandler",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }
 CatDropdown.OFFSET = 4;
 //# sourceMappingURL=cat-dropdown.js.map