@zanichelli/zanichelli-it-frontend-kit 0.1.2 → 0.1.3

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

@@ -1,114 +0,0 @@
-: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);
-}
-
-: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);
-}
-
-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%;
-}
-
-.mobile-menu .items-container {
-  display: flex;
-  min-height: 256px;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.mobile-menu .items-container z-ghost-loading {
-  width: 40%;
-  height: 1.2rem;
-}
-
-.mobile-menu .items-container .menubar-item {
-  display: block;
-  width: 100%;
-  padding: 8px 0;
-  font-size: 1rem;
-  text-align: left;
-}
-
-.mobile-menu .items-container 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

@@ -1,280 +0,0 @@
-import { h } from "@stencil/core";
-import { containsTarget, moveFocus } from "../../../utils/utils";
-import { Menu } from "../menu/menu";
-/** Mobile menubar component. */
-export class ZanitMobileMenubar {
-    host;
-    /** ID of the current active item. */
-    current = undefined;
-    /** Menubar items. */
-    items = [];
-    /** Initial search query. */
-    searchQuery = undefined;
-    /** Whether the menubar is loading the data. */
-    loading = false;
-    parentItem = undefined;
-    menuItems = undefined;
-    /** Whether the items to render come from a menubar or a menu. */
-    menuType = undefined;
-    open;
-    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);
-            }
-        }
-        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;
-            }
-        }
-    }
-    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 the focus goes out. */
-    handleFocusout(event) {
-        if (containsTarget(this.host, event)) {
-            return;
-        }
-        this.open = false;
-    }
-    render() {
-        return (h("nav", { key: 'df6d04c4bb8343ec62fe69df3f01f6f47b4367cf', "aria-label": "Zanichelli.it" }, h("z-logo", { key: '3403d6548e16d131c4ce81c624e761e523b65562', imageAlt: "Logo Zanichelli", link: "/", height: 32, width: 126 }), h("button", { key: '198db21866d9a2b86e9094ae0d6d84c48953f3a6', 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: '549b5327194978ee9b23fb8a2839d73d06bfd6f8', name: this.open ? 'multiply' : 'burger-menu', width: "1.5rem", height: "1.5rem" })), this.open && (h("ul", { key: '27933ec0651b98039598a5e1d26d144ea7c3c73a', class: "mobile-menu", role: "menubar" }, h("li", { key: '09f8dbe1534e0f97df17e34a6f9b075f8dce10dd', role: "none" }, h("zanit-search-form", { key: '64e5fa4b8d9217646da95204583da333ec0f8f6d', searchQuery: this.searchQuery, onResetSearch: () => (this.searchQuery = undefined) })), !this.loading && this.current && (h("li", { key: 'b5dcca1a67de785caa2f5247c850437abb20e5e2', role: "none" }, h("a", { key: '14d386b83ef96ae92070e9e738fdf70e6e0e6ef2', class: "parent", href: this.parentItem?.href ?? '/', id: this.parentItem?.id ?? undefined, role: "menuitem", tabIndex: -1, onKeyDown: (event) => this.handleItemKeydown(event) }, h("z-icon", { key: '7851e7a47f5723029d9ce0bf85e4010025509caf', name: "arrow-left", width: "0.5rem", height: "0.5rem" }), h("span", { key: 'ab158b0c1350eedbb4c4270b2d9d111ae732af95' }, this.parentItem?.label ?? 'Home')))), this.loading && (h("div", { key: '9d4a6b292cbf067a3f5b743daff5a26bfcfaf403', class: "items-container", role: "none" }, [...new Array(4)].map(() => (h("li", { role: "none" }, h("div", { class: "menubar-item", role: "none" }, h("z-ghost-loading", null))))))), 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": "../../../utils/types",
-                            "id": "src/utils/types.ts::MenubarItem"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Menubar items."
-                },
-                "getter": false,
-                "setter": false,
-                "defaultValue": "[]"
-            },
-            "searchQuery": {
-                "type": "string",
-                "attribute": "search-query",
-                "mutable": true,
-                "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"
-            },
-            "loading": {
-                "type": "boolean",
-                "attribute": "loading",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Whether the menubar is loading the data."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "false"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "parentItem": {},
-            "menuItems": {},
-            "menuType": {},
-            "open": {}
-        };
-    }
-    static get elementRef() { return "host"; }
-    static get watchers() {
-        return [{
-                "propName": "items",
-                "methodName": "onItemsChange"
-            }, {
-                "propName": "current",
-                "methodName": "onItemsChange"
-            }];
-    }
-    static get listeners() {
-        return [{
-                "name": "click",
-                "method": "handleOutsideClick",
-                "target": "document",
-                "capture": false,
-                "passive": true
-            }, {
-                "name": "keydown",
-                "method": "handleKeydown",
-                "target": undefined,
-                "capture": false,
-                "passive": true
-            }, {
-                "name": "focusin",
-                "method": "handleFocusout",
-                "target": "document",
-                "capture": false,
-                "passive": true
-            }];
-    }
-}
-//# sourceMappingURL=mobile-menubar.js.map

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

@@ -1 +0,0 @@
-{"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, h, Listen, Prop, State, Watch } from '@stencil/core';\nimport { MenubarItem, MenuItem } from '../../../utils/types';\nimport { containsTarget, moveFocus } from '../../../utils/utils';\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  @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({ mutable: true }) searchQuery: string | undefined = undefined;\n\n  /** Whether the menubar is loading the data. */\n  @Prop() loading: boolean = false;\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  @Watch('items')\n  @Watch('current')\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    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  connectedCallback() {\n    this.setupData(this.items);\n  }\n\n  /** Close the menu when clicking outside. */\n  @Listen('click', { 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 the focus goes out. */\n  @Listen('focusin', { target: 'document', passive: true })\n  handleFocusout(event: FocusEvent) {\n    if (containsTarget(this.host, event)) {\n      return;\n    }\n\n    this.open = false;\n  }\n\n  render() {\n    return (\n      <nav aria-label=\"Zanichelli.it\">\n        <z-logo\n          imageAlt=\"Logo Zanichelli\"\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=\"1.5rem\"\n            height=\"1.5rem\"\n          ></z-icon>\n        </button>\n        {this.open && (\n          <ul\n            class=\"mobile-menu\"\n            role=\"menubar\"\n          >\n            <li role=\"none\">\n              <zanit-search-form\n                searchQuery={this.searchQuery}\n                onResetSearch={() => (this.searchQuery = undefined)}\n              />\n            </li>\n\n            {!this.loading && this.current && (\n              <li role=\"none\">\n                <a\n                  class=\"parent\"\n                  href={this.parentItem?.href ?? '/'}\n                  id={this.parentItem?.id ?? undefined}\n                  role=\"menuitem\"\n                  tabIndex={-1}\n                  onKeyDown={(event) => this.handleItemKeydown(event)}\n                >\n                  <z-icon\n                    name=\"arrow-left\"\n                    width=\"0.5rem\"\n                    height=\"0.5rem\"\n                  ></z-icon>\n                  <span>\n                    {/* Show the 'Home' label if the current item is a root child. */}\n                    {this.parentItem?.label ?? 'Home'}\n                  </span>\n                </a>\n              </li>\n            )}\n\n            {this.loading && (\n              <div\n                class=\"items-container\"\n                role=\"none\"\n              >\n                {[...new Array(4)].map(() => (\n                  <li role=\"none\">\n                    <div\n                      class=\"menubar-item\"\n                      role=\"none\"\n                    >\n                      <z-ghost-loading></z-ghost-loading>\n                    </div>\n                  </li>\n                ))}\n              </div>\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/components/menubar/search-form/search-form.css

@@ -1,147 +0,0 @@
-:host,
-*,
-::before,
-::after {
-  box-sizing: border-box;
-}
-
-*:focus:focus-visible {
-  box-shadow: var(--shadow-focus-primary);
-  outline: none;
-}
-
-button {
-  all: unset;
-  cursor: pointer;
-}
-
-@media (width < 768px) {
-  .searchbar {
-    display: flex;
-    align-items: center;
-    border: 1px solid #000;
-    border-radius: 4px;
-  }
-
-  .searchbar > *:first-child {
-    /* 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;
-  }
-
-  .searchbar button[type='reset'] {
-    display: flex;
-    padding: 0 0 0 8px;
-    cursor: pointer;
-  }
-
-  .searchbar input {
-    width: 100%;
-    height: 100%;
-    padding: 4px 8px;
-    border: none;
-    background-color: #fff;
-    font-family: var(--font-family-sans);
-    font-size: 1rem;
-  }
-
-  .searchbar input[type='search']::-webkit-search-cancel-button,
-  .searchbar input[type='search']::-webkit-search-decoration {
-    appearance: none;
-  }
-
-  .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;
-  }
-
-  .searchbar input:focus:focus-visible,
-  .searchbar .searchbar-button:focus:focus-visible {
-    z-index: 1;
-  }
-}
-
-@media (width >= 768px) {
-  .searchbar {
-    display: flex;
-    font-size: 1.5rem;
-  }
-
-  .searchbar.searchbar-open {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    inset: 0;
-  }
-
-  .searchbar .input-wrapper {
-    display: none;
-    width: 100%;
-    align-items: center;
-    padding: 0 0 0 var(--grid-margin);
-    background-color: #fff;
-    gap: 14px;
-  }
-
-  .searchbar .input-wrapper:not(.hide) {
-    display: flex;
-  }
-
-  .searchbar button[type='reset'] {
-    display: flex;
-    align-items: center;
-    border-radius: 4px;
-    cursor: pointer;
-  }
-
-  .searchbar input {
-    z-index: 1;
-    width: 100%;
-    height: 100%;
-    padding: 8px 14px 8px 0;
-    border: none;
-    background-color: #fff;
-    font-family: var(--font-family-sans);
-    font-size: inherit;
-  }
-
-  .searchbar input[type='search']::-webkit-search-cancel-button,
-  .searchbar input[type='search']::-webkit-search-decoration {
-    appearance: none;
-  }
-
-  .searchbar input::placeholder {
-    color: var(--gray500);
-  }
-
-  .searchbar .searchbar-button {
-    display: flex;
-    align-items: center;
-    padding: 8px 16px;
-    border-right: 1px solid #000;
-    border-left: 1px solid #000;
-    background: var(--zanit-accent-color);
-    font-family: inherit;
-    font-size: inherit;
-    gap: 64px;
-    line-height: 1;
-  }
-
-  .searchbar input:focus:focus-visible,
-  .searchbar .searchbar-button:focus:focus-visible {
-    z-index: 1;
-  }
-}
-
-@media (width >= 768px) and (width < 1152px) {
-  .searchbar .searchbar-button > .searchbar-button-label {
-    display: none;
-  }
-}

package/dist/collection/components/menubar/search-form/search-form.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"search-form.js","sourceRoot":"","sources":["../../../../src/components/menubar/search-form/search-form.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Listen, Prop, State, Watch } from '@stencil/core';\nimport { containsTarget } from '../../../utils/utils';\n\n@Component({\n  tag: 'zanit-search-form',\n  styleUrl: 'search-form.css',\n  shadow: true,\n})\nexport class ZanitSearchForm {\n  private formElement: HTMLFormElement;\n\n  @Element() host: HTMLZanitSearchFormElement;\n\n  @State()\n  isMobile: boolean = false;\n\n  /** Indicates whether the searchbar is visible and usable. */\n  @State()\n  showSearchbar: boolean = false;\n\n  /** Search query to apply. */\n  @State()\n  _searchQuery: string | undefined = undefined;\n\n  /** Initial search query */\n  @Prop({ mutable: true })\n  searchQuery: string | undefined = undefined;\n\n  @Watch('searchQuery')\n  onSearchQueryChange() {\n    this._searchQuery = this.searchQuery;\n    if (this.searchQuery) {\n      this.showSearchbar = true;\n    }\n  }\n\n  /** Focus searchbar input when it becomes visible. */\n  @Watch('showSearchbar')\n  onShowSearchbar() {\n    if (!this.showSearchbar) {\n      return;\n    }\n\n    setTimeout(() => {\n      const searchbarInput = this.host.shadowRoot.querySelector('#searchbar-input') as HTMLInputElement;\n      if (this.showSearchbar && !this.searchQuery) {\n        searchbarInput.focus();\n      }\n    }, 100);\n  }\n\n  /** Emitted on search form submission. */\n  @Event({ cancelable: true }) search: EventEmitter<{ query: string }>;\n\n  @Event() resetSearch: EventEmitter<void>;\n\n  async connectedCallback() {\n    this.showSearchbar = !!this.searchQuery;\n    const mobileMediaQuery = window.matchMedia('(width < 768px)');\n    this.isMobile = mobileMediaQuery.matches;\n    mobileMediaQuery.onchange = (mql) => {\n      this.isMobile = mql.matches;\n    };\n  }\n\n  /** Close open searchbar when clicking outside. */\n  @Listen('click', { target: 'document', passive: true })\n  handleOutsideClick(event: MouseEvent) {\n    if (this.showSearchbar && this.formElement && !containsTarget(this.formElement, event)) {\n      this.showSearchbar = false;\n    }\n  }\n\n  private resetSearchQuery() {\n    this.searchQuery = undefined;\n    this.resetSearch.emit();\n  }\n\n  private handleInputChange(event: Event) {\n    this._searchQuery = (event.target as HTMLInputElement).value;\n    if (!this._searchQuery) {\n      this.searchQuery = undefined;\n    }\n  }\n\n  private onSearchSubmit(event: Event) {\n    event.preventDefault();\n    if (!this._searchQuery) {\n      return;\n    }\n\n    this.showSearchbar = false;\n    const searchEv = this.search.emit({ query: this._searchQuery });\n    // do not submit the form if the event default behavior was prevented\n    if (searchEv.defaultPrevented) {\n      return;\n    }\n\n    this.formElement.submit();\n  }\n\n  render() {\n    if (this.isMobile) {\n      return (\n        <form\n          class=\"searchbar\"\n          ref={(el) => (this.formElement = el)}\n          role=\"search\"\n          aria-label=\"Cerca\"\n          method=\"get\"\n          action=\"/ricerca\"\n          onSubmit={(event) => this.onSearchSubmit(event)}\n          onReset={() => this.resetSearchQuery()}\n        >\n          {this.searchQuery && (\n            <button\n              type=\"reset\"\n              aria-label=\"Svuota campo di ricerca\"\n            >\n              <z-icon\n                name=\"multiply-circled\"\n                width=\"1rem\"\n                height=\"1rem\"\n              />\n            </button>\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            value={this.searchQuery}\n            required\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=\"1.25rem\"\n              height=\"1.25rem\"\n            ></z-icon>\n          </button>\n        </form>\n      );\n    }\n\n    return (\n      <form\n        class={{ 'searchbar': true, 'searchbar-open': this.showSearchbar }}\n        ref={(el) => (this.formElement = el)}\n        role=\"search\"\n        aria-label=\"Cerca\"\n        method=\"get\"\n        action=\"/ricerca\"\n        onSubmit={(event) => this.onSearchSubmit(event)}\n        onReset={() => this.resetSearchQuery()}\n      >\n        <div\n          class={{ 'hide': !this.showSearchbar, 'input-wrapper': true }}\n          role=\"none\"\n        >\n          {this.searchQuery && (\n            <button\n              type=\"reset\"\n              aria-label=\"Svuota campo di ricerca\"\n            >\n              <z-icon\n                name=\"multiply-circled\"\n                width=\"1.5rem\"\n                height=\"1.5rem\"\n              />\n            </button>\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            value={this.searchQuery}\n            required\n          ></input>\n        </div>\n\n        <button\n          class=\"searchbar-button\"\n          aria-label=\"Cerca\"\n          aria-controls=\"searchbar-input\"\n          type={this.showSearchbar ? 'submit' : 'button'}\n          onClick={() => (this.showSearchbar = true)}\n        >\n          {this.showSearchbar ? null : <span class=\"searchbar-button-label\">Cerca</span>}\n          <z-icon\n            name=\"search\"\n            width=\"2rem\"\n            height=\"2rem\"\n          ></z-icon>\n        </button>\n      </form>\n    );\n  }\n}\n"]}

package/dist/collection/index.js

@@ -1,11 +0,0 @@
-/**
- * @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`.
- */
-export * from './utils/types';
-//# sourceMappingURL=index.js.map

package/dist/collection/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH,cAAc,eAAe,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';\nexport * from './utils/types';\n"]}

package/dist/collection/utils/types.js

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=types.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/utils/types.ts"],"names":[],"mappings":"","sourcesContent":["export type MenuItem = {\n  label: string;\n  href?: string;\n  highlight?: boolean;\n  id?: string;\n  group?: { id: string; label: string };\n};\n\nexport type MenubarItem = Omit<MenuItem, 'group' | 'highlight'> & {\n  navbarItems?: MenubarItem[];\n  menuItems?: MenuItem[];\n};\n"]}

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

@@ -1 +0,0 @@
-{"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"]}