@zanichelli/zanichelli-it-frontend-kit 1.0.0 → 1.0.2

package/dist/collection/components/menubar/search-form/search-form.css

@@ -0,0 +1,147 @@
+: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: 6px; /* diventa 14px sommato al padding a sinistra della input */
+  }
+
+  .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;
+    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/{www/build/zanit-search-form.entry.js → dist/collection/components/menubar/search-form/search-form.js}

@@ -1,16 +1,8 @@
-import { r as registerInstance, d as createEvent, a as getElement, h } from './index-Cn3aX5eK.js';
-import { c as containsTarget } from './utils-CaxAWyZI.js';
-
-const searchFormCss = ":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{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:6px;}.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;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}}";
-
-const ZanitSearchForm = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.search = createEvent(this, "search", 7);
-        this.resetSearch = createEvent(this, "resetSearch", 7);
-    }
+import { h } from "@stencil/core";
+import { containsTarget } from "../../../utils/utils";
+export class ZanitSearchForm {
     formElement;
-    get host() { return getElement(this); }
+    host;
     isMobile = false;
     /** Indicates whether the searchbar is visible and usable. */
     showSearchbar = false;
@@ -77,13 +69,97 @@ const ZanitSearchForm = class {
         }
         return (h("form", { class: { 'searchbar': true, 'searchbar-open': this.showSearchbar }, ref: (el) => (this.formElement = el), role: "search", "aria-label": "Cerca", method: "get", action: "/ricerca", onSubmit: (event) => this.onSearchSubmit(event), onReset: () => this.resetSearchQuery() }, h("div", { class: { 'hide': !this.showSearchbar, 'input-wrapper': true }, role: "none" }, this.searchQuery && (h("button", { type: "reset", "aria-label": "Svuota campo di ricerca" }, h("z-icon", { name: "multiply-circled", width: "1.5rem", height: "1.5rem" }))), h("input", { id: "searchbar-input", name: "q", type: "search", placeholder: "Cerca per parola chiave o ISBN", onInput: (event) => this.handleInputChange(event), value: this.searchQuery, required: true })), h("button", { class: "searchbar-button", "aria-label": "Cerca", "aria-controls": "searchbar-input", type: this.showSearchbar ? 'submit' : 'button', onClick: () => this.openSearchbar() }, this.showSearchbar ? null : h("span", { class: "searchbar-button-label" }, "Cerca"), h("z-icon", { name: "search", width: "2rem", height: "2rem" }))));
     }
-    static get watchers() { return {
-        "searchQuery": ["onSearchQueryChange"]
-    }; }
-};
-ZanitSearchForm.style = searchFormCss;
-
-export { ZanitSearchForm as zanit_search_form };
-//# sourceMappingURL=zanit-search-form.entry.esm.js.map
-
-//# sourceMappingURL=zanit-search-form.entry.js.map
+    static get is() { return "zanit-search-form"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["search-form.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["search-form.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "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"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isMobile": {},
+            "showSearchbar": {},
+            "_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": {}
+                }
+            }, {
+                "method": "resetSearch",
+                "name": "resetSearch",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "searchQuery",
+                "methodName": "onSearchQueryChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleOutsideClick",
+                "target": "document",
+                "capture": false,
+                "passive": true
+            }];
+    }
+}
+//# sourceMappingURL=search-form.js.map

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

@@ -0,0 +1 @@
+{"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.openSearchbar();\n    }\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 openSearchbar() {\n    this.showSearchbar = true;\n    setTimeout(() => {\n      const searchbarInput = this.host.shadowRoot.querySelector('#searchbar-input') as HTMLInputElement;\n      searchbarInput.focus();\n    }, 100);\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.openSearchbar()}\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

@@ -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`.
+ */
+export * from './utils/types';
+//# 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;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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/utils/types.ts"],"names":[],"mappings":"","sourcesContent":["export type MenuItem = {\n  label: string;\n  href?: string;\n  target?: '_self' | '_blank' | '_parent' | '_top';\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/{zanichelli-it-frontend-kit/utils-CaxAWyZI.js → collection/utils/utils.js}

@@ -2,20 +2,16 @@
  * 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.
  */
-const containsTarget = (ancestor, event) => {
+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`. */
-const moveFocus = (current, next) => {
+export const moveFocus = (current, next) => {
     current.tabIndex = -1;
     next.tabIndex = 0;
     next.focus();
 };
-
-export { containsTarget as c, moveFocus as m };
-//# sourceMappingURL=utils-CaxAWyZI.js.map
-
-//# sourceMappingURL=utils-CaxAWyZI.js.map
+//# 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"]}