@zanichelli/zanichelli-it-frontend-kit 0.0.1-rc.8 → 0.1.1

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

@@ -0,0 +1,173 @@
+import { h } from "@stencil/core";
+import { containsTarget } from "../../../utils/utils";
+export class ZanitSearchForm {
+    formElement;
+    host;
+    isMobile = false;
+    /** Indicates whether the searchbar is visible and usable. */
+    showSearchbar = false;
+    /** Search query to apply. */
+    _searchQuery = undefined;
+    /** Initial search query */
+    searchQuery = undefined;
+    onSearchQueryChange() {
+        this._searchQuery = this.searchQuery;
+        if (this.searchQuery) {
+            this.showSearchbar = true;
+        }
+    }
+    /** Focus searchbar input when it becomes visible. */
+    onShowSearchbar() {
+        if (!this.showSearchbar) {
+            return;
+        }
+        setTimeout(() => {
+            const searchbarInput = this.host.shadowRoot.querySelector('#searchbar-input');
+            if (this.showSearchbar && !this.searchQuery) {
+                searchbarInput.focus();
+            }
+        }, 100);
+    }
+    /** Emitted on search form submission. */
+    search;
+    resetSearch;
+    async connectedCallback() {
+        this.showSearchbar = !!this.searchQuery;
+        const mobileMediaQuery = window.matchMedia('(width < 768px)');
+        this.isMobile = mobileMediaQuery.matches;
+        mobileMediaQuery.onchange = (mql) => {
+            this.isMobile = mql.matches;
+        };
+    }
+    /** Close open searchbar when clicking outside. */
+    handleOutsideClick(event) {
+        if (this.showSearchbar && this.formElement && !containsTarget(this.formElement, event)) {
+            this.showSearchbar = false;
+        }
+    }
+    resetSearchQuery() {
+        this.searchQuery = undefined;
+        this.resetSearch.emit();
+    }
+    handleInputChange(event) {
+        this._searchQuery = event.target.value;
+        if (!this._searchQuery) {
+            this.searchQuery = undefined;
+        }
+    }
+    onSearchSubmit(event) {
+        event.preventDefault();
+        if (!this._searchQuery) {
+            return;
+        }
+        this.showSearchbar = false;
+        const searchEv = this.search.emit({ query: this._searchQuery });
+        // do not submit the form if the event default behavior was prevented
+        if (searchEv.defaultPrevented) {
+            return;
+        }
+        this.formElement.submit();
+    }
+    render() {
+        if (this.isMobile) {
+            return (h("form", { class: "searchbar", ref: (el) => (this.formElement = el), role: "search", "aria-label": "Cerca", method: "get", action: "/ricerca", onSubmit: (event) => this.onSearchSubmit(event), onReset: () => this.resetSearchQuery() }, this.searchQuery && (h("button", { type: "reset", "aria-label": "Svuota campo di ricerca" }, h("z-icon", { name: "multiply-circled", width: "1rem", height: "1rem" }))), 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-controls": "searchbar-input", "aria-label": "Cerca", type: "submit" }, h("z-icon", { name: "search", width: "1.25rem", height: "1.25rem" }))));
+        }
+        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() }, this.showSearchbar && (h("div", { class: "input-wrapper", 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.showSearchbar = true) }, this.showSearchbar ? null : h("span", { class: "searchbar-button-label" }, "Cerca"), h("z-icon", { name: "search", width: "2rem", height: "2rem" }))));
+    }
+    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"
+            }, {
+                "propName": "showSearchbar",
+                "methodName": "onShowSearchbar"
+            }];
+    }
+    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.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        {this.showSearchbar && (\n          <div\n            class=\"input-wrapper\"\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

@@ -8,5 +8,4 @@
  * to consume components of this package as outlined in the `README.md`.
  */
 export * from './utils/types';
-import "@zanichelli/albe-web-components";
 //# sourceMappingURL=index.js.map

package/dist/collection/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH,cAAc,eAAe,CAAC;AAE9B,OAAO,iCAAiC,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\nimport '@zanichelli/albe-web-components';\n"]}
+{"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"]}