@haiilo/catalyst 8.1.0 → 8.2.0

package/dist/components/cat-dropdown.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface CatDropdown extends Components.CatDropdown, HTMLElement {}
 export const CatDropdown: {
-  prototype: CatDropdown;
-  new (): CatDropdown;
+    prototype: CatDropdown;
+    new (): CatDropdown;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/cat-dropdown2.js

@@ -1511,202 +1511,202 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
 };
 
 const firstTabbable = (container) => {
-  return (container ? tabbable(container, { includeContainer: true, getShadowRoot: true }) : []).shift();
+    return (container ? tabbable(container, { includeContainer: true, getShadowRoot: true }) : []).shift();
 };
 
 const catDropdownCss = ":host{display:contents}:host([hidden]){display:none}::slotted(nav){padding:0.25rem;min-width:8rem;max-width:16rem}.content{position:fixed;background:white;-webkit-overflow-scrolling:touch;min-height:2rem;max-height:calc(100vh - 48px);box-shadow:0 4px 6px -2px rgba(27, 31, 38, 0.03), 0 12px 16px -4px rgba(27, 31, 38, 0.08);border-radius:var(--cat-border-radius-m, 0.25rem);border:1px solid rgb(var(--cat-border-color, 235, 236, 240));z-index:calc(var(--cat-z-index, 1000) + 100);display:none;opacity:0;transform:scale(0.9);transition:transform 125ms cubic-bezier(0.3, 0, 0.8, 0.15), opacity 125ms cubic-bezier(0.3, 0, 0.8, 0.15)}.content[data-placement^=top]{transform-origin:bottom}.content[data-placement^=top-start]{transform-origin:bottom left}.content[data-placement^=top-end]{transform-origin:bottom right}.content[data-placement^=left]{transform-origin:right}.content[data-placement^=left-start]{transform-origin:right top}.content[data-placement^=left-end]{transform-origin:right bottom}.content[data-placement^=right]{transform-origin:left}.content[data-placement^=right-start]{transform-origin:left top}.content[data-placement^=right-end]{transform-origin:left bottom}.content[data-placement^=bottom]{transform-origin:top}.content[data-placement^=bottom-start]{transform-origin:top left}.content[data-placement^=bottom-end]{transform-origin:top right}.content.show{opacity:1;transform:scale(1);transition:transform 250ms cubic-bezier(0.05, 0.7, 0.1, 1), opacity 250ms cubic-bezier(0.05, 0.7, 0.1, 1)}.content.overflow-auto{overflow:auto}";
 
 let nextUniqueId = 0;
 const CatDropdown = /*@__PURE__*/ proxyCustomElement(class CatDropdown extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.catOpen = createEvent(this, "catOpen", 7);
-    this.catClose = createEvent(this, "catClose", 7);
-    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() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.catOpen = createEvent(this, "catOpen", 7);
+        this.catClose = createEvent(this, "catClose", 7);
+        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)
-        : 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)
+                : 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 style() { return catDropdownCss; }
+    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;
+        }
+        if (!trigger) {
+            trigger = firstTabbable(this.triggerSlot);
+        }
+        if (!trigger) {
+            throw new Error('Cannot find tabbable element. Use [data-trigger] to set the trigger.');
+        }
+        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 style() { return catDropdownCss; }
 }, [1, "cat-dropdown", {
-    "placement": [1],
-    "noAutoClose": [4, "no-auto-close"],
-    "overflow": [4],
-    "close": [64]
-  }, [[0, "catClick", "clickHandler"]]]);
+        "placement": [1],
+        "noAutoClose": [4, "no-auto-close"],
+        "overflow": [4],
+        "close": [64]
+    }, [[0, "catClick", "clickHandler"]]]);
 CatDropdown.OFFSET = 4;
 function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["cat-dropdown"];
-  components.forEach(tagName => { switch (tagName) {
-    case "cat-dropdown":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, CatDropdown);
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["cat-dropdown"];
+    components.forEach(tagName => { switch (tagName) {
+        case "cat-dropdown":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, CatDropdown);
+            }
+            break;
+    } });
 }
 
 export { CatDropdown as C, defineCustomElement as d };