@zanichelli/zanichelli-it-frontend-kit 0.0.1-rc.0

package/dist/collection/components/menubar/mobile-menubar/mobile-menubar.css

@@ -0,0 +1,143 @@
+:host {
+  position: relative;
+  z-index: 2;
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  background-color: #fff;
+  color: var(--gray900);
+  fill: var(--gray900);
+  font-family: var(--font-family-sans);
+  overflow-x: clip;
+}
+
+:host,
+*,
+::before,
+::after {
+  box-sizing: border-box;
+}
+
+*:focus:focus-visible {
+  box-shadow: var(--shadow-focus-primary);
+  outline: none;
+}
+
+ul {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+a {
+  color: var(--gray900);
+  cursor: pointer;
+  text-decoration: none;
+}
+
+button {
+  all: unset;
+  cursor: pointer;
+}
+
+nav {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  padding: 8px var(--grid-margin) 8px 8px;
+}
+
+nav::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  box-shadow: var(--shadow-1);
+  content: '';
+  pointer-events: none;
+}
+
+.burger-button {
+  margin-left: auto;
+}
+
+.mobile-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  padding: 16px var(--grid-margin) 32px;
+  background-color: #fff;
+  box-shadow: var(--shadow-2);
+  gap: 8px;
+}
+
+.mobile-menu li {
+  width: 100%;
+}
+
+.searchbar {
+  display: flex;
+  border: 1px solid #000;
+  border-radius: 4px;
+}
+
+.searchbar input {
+  width: 100%;
+  height: 100%;
+  padding: 8px;
+  border: none;
+  background-color: #fff;
+
+  /* To have a seamless appearance of the border radius of an internal child element nested within a parent element with rounded borders, we need to subtract the parent's border thickness from the child's border radius. Inner Radius = Outer Radius - Border Thickness */
+  border-bottom-left-radius: 3px;
+  border-top-left-radius: 3px;
+  font-family: var(--font-family-sans);
+  font-size: 1rem;
+}
+
+.searchbar input::placeholder {
+  color: var(--gray500);
+}
+
+.searchbar .searchbar-button {
+  padding: 4px 8px;
+  border-left: 1px solid #000;
+  background: var(--zanit-accent-color);
+  border-bottom-right-radius: 3px;
+  border-top-right-radius: 3px;
+  line-height: 1;
+}
+
+.searchbar input:focus:focus-visible,
+.searchbar .searchbar-button:focus:focus-visible {
+  z-index: 1;
+}
+
+.items-container {
+  min-height: 256px;
+}
+
+.mobile-menu > li .menubar-item {
+  padding: 8px 0;
+  font-size: 1rem;
+  text-align: left;
+}
+
+.mobile-menu > li:not(:last-child) .menubar-item {
+  border-bottom: 1px solid #000;
+}
+
+[role='menuitem'].parent {
+  display: flex;
+  width: fit-content;
+  align-items: center;
+  padding: 0;
+  border: none;
+  font-size: 0.875rem;
+  gap: 8px;
+}

package/dist/collection/components/menubar/mobile-menubar/mobile-menubar.js

@@ -0,0 +1,292 @@
+import { h } from "@stencil/core";
+import { containsTarget, moveFocus } from "../../../utils/utils";
+import { Menu } from "../menu/menu";
+/** Mobile menubar component. */
+export class ZanitMobileMenubar {
+    formElement;
+    host;
+    /** ID of the current active item. */
+    current = undefined;
+    /** Menubar items. */
+    items = [];
+    /** Initial search query. */
+    searchQuery = undefined;
+    parentItem = undefined;
+    menuItems = undefined;
+    /** Whether the items to render come from a menubar or a menu. */
+    menuType = undefined;
+    open;
+    /** Search query to apply. */
+    _searchQuery = undefined;
+    onItemsChange() {
+        this.setupData(this.items);
+    }
+    /**
+     * Find the current item and take its parent, `menuItems` or the `navbarItems`.
+     * @returns True if an item matches the `current` prop, false otherwise.
+     */
+    setupData(items, parent) {
+        for (const item of items) {
+            if (item.id === this.current) {
+                const type = item.menuItems?.length ? 'menu' : 'menubar';
+                this.parentItem = parent;
+                this.menuType = type;
+                this.menuItems = item.menuItems || item.navbarItems;
+                return true;
+            }
+            if (item.menuItems?.some(({ id }) => id === this.current)) {
+                this.parentItem = parent;
+                this.menuType = 'menu';
+                this.menuItems = item.menuItems;
+                return true;
+            }
+            if (item.navbarItems?.length) {
+                return this.setupData(item.navbarItems, item);
+            }
+        }
+        this.parentItem = parent;
+        return false;
+    }
+    get menuItemsElement() {
+        return Array.from(this.host.shadowRoot.querySelectorAll('[role="menuitem"]'));
+    }
+    /** Initialize tabindex on menuitems, setting -1 to all but the first one. */
+    initTabindex() {
+        this.menuItemsElement.forEach((item, index) => item.setAttribute('tabindex', index === 0 ? '0' : '-1'));
+    }
+    toggleMenu() {
+        if (this.open) {
+            this.open = false;
+        }
+        else {
+            this.open = true;
+            setTimeout(() => {
+                this.initTabindex();
+                this.menuItemsElement[0].focus();
+            }, 200);
+        }
+    }
+    /** Handles keyboard navigation on mobile menu. */
+    handleItemKeydown(event) {
+        switch (event.key) {
+            case 'ArrowUp': {
+                event.preventDefault();
+                event.stopPropagation();
+                const items = this.menuItemsElement;
+                const currentIndex = items.indexOf(event.target);
+                const prevItem = items[(currentIndex - 1 + items.length) % items.length];
+                moveFocus(items[currentIndex], prevItem);
+                break;
+            }
+            case 'ArrowDown': {
+                event.preventDefault();
+                event.stopPropagation();
+                const items = this.menuItemsElement;
+                const currentIndex = items.indexOf(event.target);
+                const nextItem = items[(currentIndex + 1) % items.length];
+                moveFocus(items[currentIndex], nextItem);
+                break;
+            }
+            case 'Home': {
+                event.preventDefault();
+                event.stopPropagation();
+                moveFocus(event.target, this.menuItemsElement[0]);
+                break;
+            }
+            case 'End': {
+                event.preventDefault();
+                event.stopPropagation();
+                moveFocus(event.target, this.menuItemsElement.pop());
+                break;
+            }
+        }
+    }
+    handleInputChange(event) {
+        this._searchQuery = event.target.value;
+    }
+    onSearchSubmit(event) {
+        event.preventDefault();
+        if (!this._searchQuery) {
+            return;
+        }
+        this.search.emit({ query: this._searchQuery });
+        this.formElement.submit();
+    }
+    /** Emitted on search form submission. */
+    search;
+    connectedCallback() {
+        this.setupData(this.items);
+    }
+    /** Close the menu when clicking outside. */
+    handleOutsideClick(event) {
+        if (containsTarget(this.host, event)) {
+            return;
+        }
+        this.open = false;
+    }
+    /** Close the menu when pressing Escape or Tab. */
+    handleKeydown(event) {
+        switch (event.key) {
+            case 'Escape':
+                this.open = false;
+                break;
+            case 'Tab':
+                if (containsTarget(this.host, event)) {
+                    break;
+                }
+                this.open = false;
+                break;
+        }
+    }
+    /** Close the menu when it loses focus. */
+    handleFocusout(event) {
+        const relatedTarget = event.relatedTarget;
+        if (this.host.contains(relatedTarget)) {
+            return;
+        }
+        this.open = false;
+    }
+    render() {
+        return (h("nav", { key: '3ee00a62748cdbe4b1ca1becb696008e271ab909', "aria-label": "Zanichelli.it" }, h("z-logo", { key: '2b8c1d70bfa60e60a3e8fe2d15962f8642caa76d', link: "/", height: "32", width: "126" }), h("button", { key: '872c2adc276bfd47554857095ccdca6320c49e43', class: "burger-button", type: "button", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": "mobile-menu", "aria-label": this.open ? 'Chiudi menù' : 'Apri menù', onClick: () => this.toggleMenu() }, h("z-icon", { key: 'd846abf56ae037bfa92940c6a485350c457395ba', name: this.open ? 'multiply' : 'burger-menu', width: "24", height: "24" })), this.open && (h("ul", { key: '07b09b0797cd9708d27b309e4cdffcd004e1ab0a', class: "mobile-menu", role: "menubar" }, h("li", { key: '52e0d1d2f56c15d0b4f4e453e34236be2aca5a6d', role: "none" }, h("form", { key: '6515903b4bc1544e681c29f094161d53309a7d18', class: "searchbar", role: "search", "aria-label": "Cerca", method: "get", action: "/ricerca", onSubmit: (event) => this.onSearchSubmit(event), ref: (el) => (this.formElement = el) }, h("input", { key: 'e0b81cacf186fca79cd51543488c9d24669e80b4', id: "searchbar-input", name: "q", type: "search", placeholder: "Cerca per parola chiave o ISBN", onInput: (event) => this.handleInputChange(event) }), h("button", { key: '89fca5e96b570f2b1580acac9bd41f5090edb1f0', class: "searchbar-button", "aria-controls": "searchbar-input", "aria-label": "Cerca", type: "submit" }, h("z-icon", { key: '5acd1111c13dcb11b127d649e32aac631e0371d4', name: "search", width: "20", height: "20" })))), this.parentItem && (h("li", { key: 'aa7058f15be4e0c35971700ccac0771adcdcf6d7', role: "none" }, h("a", { key: '4dc6c2cb4695fda00580eead0505bcae31be8a63', class: "parent", href: this.parentItem.href, id: this.parentItem.id, role: "menuitem", tabIndex: -1, onKeyDown: (event) => this.handleItemKeydown(event) }, h("z-icon", { key: '42b4bc953938556481e0f4374ef307a545163e7f', name: "arrow-left", width: "8", height: "8" }), h("span", { key: '937a9f5bc0790e2f657ac457c65bcc1ce6a2121e' }, this.items.some(({ id }) => this.current === id) ? 'Home' : this.parentItem.label)))), this.menuType === 'menu' ? (h(Menu, { items: this.menuItems, current: this.current, onItemKeyDown: (event) => this.handleItemKeydown(event) })) : (this.menuItems?.length && (h("div", { class: "items-container", role: "none" }, this.menuItems.map((item) => (h("li", { role: "none" }, h("a", { class: {
+                'menu-item': this.menuType === 'menu',
+                'menubar-item': this.menuType === 'menubar',
+            }, href: item.href, id: item.id, role: "menuitem", "aria-current": this.current === item.id ? 'page' : 'false', tabIndex: -1, onKeyDown: (event) => this.handleItemKeydown(event) }, h("span", { "data-text": item.label }, item.label))))))))))));
+    }
+    static get is() { return "zanit-mobile-menubar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["mobile-menubar.css", "../menu/menu.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["mobile-menubar.css", "../menu/menu.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "current": {
+                "type": "string",
+                "attribute": "current",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | undefined",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "ID of the current active item."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "undefined"
+            },
+            "items": {
+                "type": "unknown",
+                "attribute": "items",
+                "mutable": false,
+                "complexType": {
+                    "original": "MenubarItem[]",
+                    "resolved": "MenubarItem[]",
+                    "references": {
+                        "MenubarItem": {
+                            "location": "import",
+                            "path": "../menubar",
+                            "id": "src/components/menubar/menubar.tsx::MenubarItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Menubar items."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "searchQuery": {
+                "type": "string",
+                "attribute": "search-query",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | undefined",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Initial search query."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "undefined"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "parentItem": {},
+            "menuItems": {},
+            "menuType": {},
+            "open": {},
+            "_searchQuery": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "search",
+                "name": "search",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on search form submission."
+                },
+                "complexType": {
+                    "original": "{ query: string }",
+                    "resolved": "{ query: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "items",
+                "methodName": "onItemsChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "pointerdown",
+                "method": "handleOutsideClick",
+                "target": "document",
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "keydown",
+                "method": "handleKeydown",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "focusout",
+                "method": "handleFocusout",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }];
+    }
+}
+//# sourceMappingURL=mobile-menubar.js.map

package/dist/collection/components/menubar/mobile-menubar/mobile-menubar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mobile-menubar.js","sourceRoot":"","sources":["../../../../src/components/menubar/mobile-menubar/mobile-menubar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Listen, Prop, State, Watch } from '@stencil/core';\nimport { containsTarget, moveFocus } from '../../../utils/utils';\nimport { MenubarItem, MenuItem } from '../menubar';\nimport { Menu } from '../menu/menu';\n\n/** Mobile menubar component. */\n@Component({\n  tag: 'zanit-mobile-menubar',\n  styleUrls: ['mobile-menubar.css', '../menu/menu.css'],\n  shadow: true,\n})\nexport class ZanitMobileMenubar {\n  private formElement: HTMLFormElement;\n\n  @Element() host: HTMLZanitMobileMenubarElement;\n\n  /** ID of the current active item. */\n  @Prop() current: string | undefined = undefined;\n\n  /** Menubar items. */\n  @Prop() items: MenubarItem[] = [];\n\n  /** Initial search query. */\n  @Prop() searchQuery: string | undefined = undefined;\n\n  @State() parentItem: MenubarItem | undefined = undefined;\n  @State() menuItems: MenubarItem[] | MenuItem[] | undefined = undefined;\n  /** Whether the items to render come from a menubar or a menu. */\n  @State() menuType: 'menubar' | 'menu' | undefined = undefined;\n  @State() open: boolean;\n\n  /** Search query to apply. */\n  @State() _searchQuery: string | undefined = undefined;\n\n  @Watch('items')\n  onItemsChange() {\n    this.setupData(this.items);\n  }\n\n  /**\n   * Find the current item and take its parent, `menuItems` or the `navbarItems`.\n   * @returns True if an item matches the `current` prop, false otherwise.\n   */\n  private setupData(items: MenubarItem[], parent?: MenubarItem): boolean {\n    for (const item of items) {\n      if (item.id === this.current) {\n        const type = item.menuItems?.length ? 'menu' : 'menubar';\n        this.parentItem = parent;\n        this.menuType = type;\n        this.menuItems = item.menuItems || item.navbarItems;\n        return true;\n      }\n\n      if (item.menuItems?.some(({ id }) => id === this.current)) {\n        this.parentItem = parent;\n        this.menuType = 'menu';\n        this.menuItems = item.menuItems;\n        return true;\n      }\n\n      if (item.navbarItems?.length) {\n        return this.setupData(item.navbarItems, item);\n      }\n    }\n\n    this.parentItem = parent;\n\n    return false;\n  }\n\n  private get menuItemsElement() {\n    return Array.from(this.host.shadowRoot.querySelectorAll('[role=\"menuitem\"]')) as HTMLElement[];\n  }\n\n  /** Initialize tabindex on menuitems, setting -1 to all but the first one. */\n  private initTabindex() {\n    this.menuItemsElement.forEach((item, index) => item.setAttribute('tabindex', index === 0 ? '0' : '-1'));\n  }\n\n  private toggleMenu() {\n    if (this.open) {\n      this.open = false;\n    } else {\n      this.open = true;\n      setTimeout(() => {\n        this.initTabindex();\n        this.menuItemsElement[0].focus();\n      }, 200);\n    }\n  }\n\n  /** Handles keyboard navigation on mobile menu. */\n  private handleItemKeydown(event: KeyboardEvent) {\n    switch (event.key) {\n      case 'ArrowUp': {\n        event.preventDefault();\n        event.stopPropagation();\n        const items = this.menuItemsElement;\n        const currentIndex = items.indexOf(event.target as HTMLElement);\n        const prevItem = items[(currentIndex - 1 + items.length) % items.length];\n        moveFocus(items[currentIndex], prevItem);\n        break;\n      }\n      case 'ArrowDown': {\n        event.preventDefault();\n        event.stopPropagation();\n        const items = this.menuItemsElement;\n        const currentIndex = items.indexOf(event.target as HTMLElement);\n        const nextItem = items[(currentIndex + 1) % items.length];\n        moveFocus(items[currentIndex], nextItem);\n        break;\n      }\n      case 'Home': {\n        event.preventDefault();\n        event.stopPropagation();\n        moveFocus(event.target as HTMLElement, this.menuItemsElement[0]);\n        break;\n      }\n      case 'End': {\n        event.preventDefault();\n        event.stopPropagation();\n        moveFocus(event.target as HTMLElement, this.menuItemsElement.pop());\n        break;\n      }\n    }\n  }\n\n  private handleInputChange(event: Event) {\n    this._searchQuery = (event.target as HTMLInputElement).value;\n  }\n\n  private onSearchSubmit(event: Event) {\n    event.preventDefault();\n    if (!this._searchQuery) {\n      return;\n    }\n\n    this.search.emit({ query: this._searchQuery });\n    this.formElement.submit();\n  }\n\n  /** Emitted on search form submission. */\n  @Event() search: EventEmitter<{ query: string }>;\n\n  connectedCallback() {\n    this.setupData(this.items);\n  }\n\n  /** Close the menu when clicking outside. */\n  @Listen('pointerdown', { target: 'document', passive: true })\n  handleOutsideClick(event: MouseEvent) {\n    if (containsTarget(this.host, event)) {\n      return;\n    }\n\n    this.open = false;\n  }\n\n  /** Close the menu when pressing Escape or Tab. */\n  @Listen('keydown', { passive: true })\n  handleKeydown(event: KeyboardEvent) {\n    switch (event.key) {\n      case 'Escape':\n        this.open = false;\n        break;\n      case 'Tab':\n        if (containsTarget(this.host, event)) {\n          break;\n        }\n\n        this.open = false;\n        break;\n    }\n  }\n\n  /** Close the menu when it loses focus. */\n  @Listen('focusout', { passive: true })\n  handleFocusout(event: FocusEvent) {\n    const relatedTarget = event.relatedTarget as HTMLElement;\n    if (this.host.contains(relatedTarget)) {\n      return;\n    }\n    this.open = false;\n  }\n\n  render() {\n    return (\n      <nav aria-label=\"Zanichelli.it\">\n        <z-logo\n          link=\"/\"\n          height=\"32\"\n          width=\"126\"\n        ></z-logo>\n        <button\n          class=\"burger-button\"\n          type=\"button\"\n          aria-expanded={this.open ? 'true' : 'false'}\n          aria-controls=\"mobile-menu\"\n          aria-label={this.open ? 'Chiudi menù' : 'Apri menù'}\n          onClick={() => this.toggleMenu()}\n        >\n          <z-icon\n            name={this.open ? 'multiply' : 'burger-menu'}\n            width=\"24\"\n            height=\"24\"\n          ></z-icon>\n        </button>\n        {this.open && (\n          <ul\n            class=\"mobile-menu\"\n            role=\"menubar\"\n          >\n            <li role=\"none\">\n              <form\n                class=\"searchbar\"\n                role=\"search\"\n                aria-label=\"Cerca\"\n                method=\"get\"\n                action=\"/ricerca\"\n                onSubmit={(event) => this.onSearchSubmit(event)}\n                ref={(el) => (this.formElement = el as HTMLFormElement)}\n              >\n                <input\n                  id=\"searchbar-input\"\n                  name=\"q\"\n                  type=\"search\"\n                  placeholder=\"Cerca per parola chiave o ISBN\"\n                  onInput={(event) => this.handleInputChange(event)}\n                ></input>\n                <button\n                  class=\"searchbar-button\"\n                  aria-controls=\"searchbar-input\"\n                  aria-label=\"Cerca\"\n                  type=\"submit\"\n                >\n                  <z-icon\n                    name=\"search\"\n                    width=\"20\"\n                    height=\"20\"\n                  ></z-icon>\n                </button>\n              </form>\n            </li>\n\n            {this.parentItem && (\n              <li role=\"none\">\n                <a\n                  class=\"parent\"\n                  href={this.parentItem.href}\n                  id={this.parentItem.id}\n                  role=\"menuitem\"\n                  tabIndex={-1}\n                  onKeyDown={(event) => this.handleItemKeydown(event)}\n                >\n                  <z-icon\n                    name=\"arrow-left\"\n                    width=\"8\"\n                    height=\"8\"\n                  ></z-icon>\n                  <span>\n                    {/* Show the 'Home' label if the parent of the current list is a root child. */}\n                    {this.items.some(({ id }) => this.current === id) ? 'Home' : this.parentItem.label}\n                  </span>\n                </a>\n              </li>\n            )}\n\n            {this.menuType === 'menu' ? (\n              <Menu\n                items={this.menuItems}\n                current={this.current}\n                onItemKeyDown={(event) => this.handleItemKeydown(event)}\n              />\n            ) : (\n              this.menuItems?.length && (\n                <div\n                  class=\"items-container\"\n                  role=\"none\"\n                >\n                  {this.menuItems.map((item) => (\n                    <li role=\"none\">\n                      <a\n                        class={{\n                          'menu-item': this.menuType === 'menu',\n                          'menubar-item': this.menuType === 'menubar',\n                        }}\n                        href={item.href}\n                        id={item.id}\n                        role=\"menuitem\"\n                        aria-current={this.current === item.id ? 'page' : 'false'}\n                        tabIndex={-1}\n                        onKeyDown={(event) => this.handleItemKeydown(event)}\n                      >\n                        <span data-text={item.label}>{item.label}</span>\n                      </a>\n                    </li>\n                  ))}\n                </div>\n              )\n            )}\n          </ul>\n        )}\n      </nav>\n    );\n  }\n}\n"]}

package/dist/collection/index.js

@@ -0,0 +1,11 @@
+/**
+ * @fileoverview entry point for your component library
+ *
+ * This is the entry point for your component library. Use this file to export utilities,
+ * constants or data structure that accompany your components.
+ *
+ * DO NOT use this file to export your components. Instead, use the recommended approaches
+ * to consume components of this package as outlined in the `README.md`.
+ */
+import "@zanichelli/albe-web-components/dist/web-components-library/web-components-library.esm.js";
+//# sourceMappingURL=index.js.map

package/dist/collection/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAIH,OAAO,2FAA2F,CAAC","sourcesContent":["/**\n * @fileoverview entry point for your component library\n *\n * This is the entry point for your component library. Use this file to export utilities,\n * constants or data structure that accompany your components.\n *\n * DO NOT use this file to export your components. Instead, use the recommended approaches\n * to consume components of this package as outlined in the `README.md`.\n */\n\nexport type * from './components.d.ts';\n\nimport '@zanichelli/albe-web-components/dist/web-components-library/web-components-library.esm.js';\n"]}

package/dist/collection/utils/utils.js

@@ -0,0 +1,17 @@
+/**
+ * Check if an element contains an event target by checking its composedPath.
+ * Useful when an event target may come from a component's shadow DOM.
+ */
+export const containsTarget = (ancestor, event) => {
+    return event
+        .composedPath()
+        .filter((el) => el !== document && el !== window.window)
+        .some((el) => ancestor.contains(el));
+};
+/** Move the focus to `next` element, set tabindex to 0 for `next` and -1 to `current`. */
+export const moveFocus = (current, next) => {
+    current.tabIndex = -1;
+    next.tabIndex = 0;
+    next.focus();
+};
+//# sourceMappingURL=utils.js.map

package/dist/collection/utils/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/utils/utils.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,QAAqB,EAAE,KAAY,EAAE,EAAE;IACpE,OAAO,KAAK;SACT,YAAY,EAAE;SACd,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,QAAQ,IAAI,EAAE,KAAK,MAAM,CAAC,MAAM,CAAC;SACvD,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAiB,CAAC,CAAC,CAAC;AACxD,CAAC,CAAC;AAEF,0FAA0F;AAC1F,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,OAAoB,EAAE,IAAiB,EAAE,EAAE;IACnE,OAAO,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;IACtB,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;IAClB,IAAI,CAAC,KAAK,EAAE,CAAC;AACf,CAAC,CAAC","sourcesContent":["/**\n * Check if an element contains an event target by checking its composedPath.\n * Useful when an event target may come from a component's shadow DOM.\n */\nexport const containsTarget = (ancestor: HTMLElement, event: Event) => {\n  return event\n    .composedPath()\n    .filter((el) => el !== document && el !== window.window)\n    .some((el) => ancestor.contains(el as HTMLElement));\n};\n\n/** Move the focus to `next` element, set tabindex to 0 for `next` and -1 to `current`. */\nexport const moveFocus = (current: HTMLElement, next: HTMLElement) => {\n  current.tabIndex = -1;\n  next.tabIndex = 0;\n  next.focus();\n};\n"]}

package/dist/components/index.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Get the base path to where the assets can be found. Use "setAssetPath(path)"
+ * if the path needs to be customized.
+ */
+export declare const getAssetPath: (path: string) => string;
+
+/**
+ * Used to manually set the base path where assets can be found.
+ * If the script is used as "module", it's recommended to use "import.meta.url",
+ * such as "setAssetPath(import.meta.url)". Other options include
+ * "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
+ * dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
+ * But do note that this configuration depends on how your script is bundled, or lack of
+ * bundling, and where your assets can be loaded from. Additionally custom bundling
+ * will have to ensure the static assets are copied to its build directory.
+ */
+export declare const setAssetPath: (path: string) => void;
+
+/**
+ * Used to specify a nonce value that corresponds with an application's CSP.
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a meta tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) which
+ * will result in the same behavior.
+ */
+export declare const setNonce: (nonce: string) => void
+
+export interface SetPlatformOptions {
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+}
+export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;