@jumpgroup/jump-design-system 0.3.52 → 0.3.54

package/dist/collection/components/jump-search-bar-dropdown-item/jump-search-bar-dropdown-item.stories.js

@@ -0,0 +1,13 @@
+import { generateAttributesFromArgs, formatHtml } from "../../utils/utils";
+export default {
+    title: 'Components/SearchBar/DropdownItem',
+    tags: ['autodocs'],
+    argTypes: {}
+};
+const Template = (args) => {
+    const attributes = generateAttributesFromArgs(args);
+    return formatHtml(`<jump-search-bar ${attributes}></jump-search-bar>`);
+};
+export const SearchBarDropdownItem = Template.bind({});
+SearchBarDropdownItem.args = {};
+//# sourceMappingURL=jump-search-bar-dropdown-item.stories.js.map

package/dist/collection/components/jump-search-bar-dropdown-item/jump-search-bar-dropdown-item.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jump-search-bar-dropdown-item.stories.js","sourceRoot":"","sources":["../../../src/components/jump-search-bar-dropdown-item/jump-search-bar-dropdown-item.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,UAAU,EAAC,MAAM,mBAAmB,CAAC;AAE1E,eAAe;IACX,KAAK,EAAE,mCAAmC;IAC1C,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE,EAAE;CACf,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;IACtB,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,UAAU,CAAC,oBAAoB,UAAU,qBAAqB,CAAC,CAAC;AAC3E,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,qBAAqB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvD,qBAAqB,CAAC,IAAI,GAAG,EAC5B,CAAC","sourcesContent":["import { generateAttributesFromArgs, formatHtml} from '../../utils/utils';\n\nexport default {\n    title: 'Components/SearchBar/DropdownItem',\n    tags: ['autodocs'],\n    argTypes: {}\n};\n\nconst Template = (args) => {\n    const attributes = generateAttributesFromArgs(args);\n    return formatHtml(`<jump-search-bar ${attributes}></jump-search-bar>`);\n}\n\nexport const SearchBarDropdownItem = Template.bind({});\nSearchBarDropdownItem.args = {\n};"]}

package/dist/collection/components/jump-search-bar-dropdown-item/test/jump-search-bar-dropdown-item.e2e.js

@@ -0,0 +1,10 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe('jump-search-bar-dropdown-item', () => {
+    it('renders', async () => {
+        const page = await newE2EPage();
+        await page.setContent('<jump-search-bar-dropdown-item></jump-search-bar-dropdown-item>');
+        const element = await page.find('jump-search-bar-dropdown-item');
+        expect(element).toHaveClass('hydrated');
+    });
+});
+//# sourceMappingURL=jump-search-bar-dropdown-item.e2e.js.map

package/dist/collection/components/jump-search-bar-dropdown-item/test/jump-search-bar-dropdown-item.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jump-search-bar-dropdown-item.e2e.js","sourceRoot":"","sources":["../../../../src/components/jump-search-bar-dropdown-item/test/jump-search-bar-dropdown-item.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,+BAA+B,EAAE,GAAG,EAAE;IAC7C,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;QAChC,MAAM,IAAI,CAAC,UAAU,CAAC,iEAAiE,CAAC,CAAC;QAEzF,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,+BAA+B,CAAC,CAAC;QACjE,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAC1C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\n\ndescribe('jump-search-bar-dropdown-item', () => {\n  it('renders', async () => {\n    const page = await newE2EPage();\n    await page.setContent('<jump-search-bar-dropdown-item></jump-search-bar-dropdown-item>');\n\n    const element = await page.find('jump-search-bar-dropdown-item');\n    expect(element).toHaveClass('hydrated');\n  });\n});\n"]}

package/dist/collection/components/jump-search-bar-dropdown-item/test/jump-search-bar-dropdown-item.spec.js

@@ -0,0 +1,18 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { JumpSearchBarDropdownItem } from "../jump-search-bar-dropdown-item";
+describe('jump-search-bar-dropdown-item', () => {
+    it('renders', async () => {
+        const page = await newSpecPage({
+            components: [JumpSearchBarDropdownItem],
+            html: `<jump-search-bar-dropdown-item></jump-search-bar-dropdown-item>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <jump-search-bar-dropdown-item>
+        <mock:shadow-root>
+          <slot></slot>
+        </mock:shadow-root>
+      </jump-search-bar-dropdown-item>
+    `);
+    });
+});
+//# sourceMappingURL=jump-search-bar-dropdown-item.spec.js.map

package/dist/collection/components/jump-search-bar-dropdown-item/test/jump-search-bar-dropdown-item.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jump-search-bar-dropdown-item.spec.js","sourceRoot":"","sources":["../../../../src/components/jump-search-bar-dropdown-item/test/jump-search-bar-dropdown-item.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,yBAAyB,EAAE,MAAM,kCAAkC,CAAC;AAE7E,QAAQ,CAAC,+BAA+B,EAAE,GAAG,EAAE;IAC7C,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,yBAAyB,CAAC;YACvC,IAAI,EAAE,iEAAiE;SACxE,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;KAM7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { JumpSearchBarDropdownItem } from '../jump-search-bar-dropdown-item';\n\ndescribe('jump-search-bar-dropdown-item', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [JumpSearchBarDropdownItem],\n      html: `<jump-search-bar-dropdown-item></jump-search-bar-dropdown-item>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <jump-search-bar-dropdown-item>\n        <mock:shadow-root>\n          <slot></slot>\n        </mock:shadow-root>\n      </jump-search-bar-dropdown-item>\n    `);\n  });\n});\n"]}

package/dist/collection/components/jump-search-bar-mobile/jump-search-bar-mobile.css

@@ -0,0 +1,91 @@
+:host {
+  display: block;
+  position: relative;
+  --jump-search-bar-mobile-focus-color: var(--secondary-standard, #5E79BA);
+  --jump-search-bar-mobile-background-color: var(--gray-ultralight, #FFFFFF);
+  --jump-search-bar-mobile-border-color: var(--neutral-grey-secondary, #707070);
+  font-family: var(--ff-primary);
+}
+:host .DropdownWrapper {
+  background-color: var(--jump-search-bar-mobile-background-color);
+  padding: 16px;
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100vh;
+  z-index: 1000;
+  /* Stile parte interna del dropdown*/
+}
+:host .DropdownWrapper .closeButton {
+  cursor: pointer;
+}
+:host .DropdownWrapper.open {
+  display: block;
+}
+:host .DropdownWrapper:not(.open) {
+  display: none;
+}
+:host .DropdownWrapper .InputWrapper {
+  background-color: white;
+  width: 100%;
+  display: flex;
+  gap: 12px;
+  border-bottom: 1px solid var(--jump-search-bar-mobile-border-color);
+  padding-bottom: 4px;
+}
+:host .DropdownWrapper .InputWrapper.focused {
+  border-color: var(--jump-search-bar-mobile-focus-color) !important;
+}
+:host .DropdownWrapper .InputWrapper.focused jump-icon {
+  color: var(--jump-search-bar-mobile-focus-color) !important;
+}
+:host .DropdownWrapper .InputWrapper.focused input {
+  outline: none !important;
+}
+:host .DropdownWrapper input {
+  width: 100%;
+  border: none;
+}
+:host .DropdownWrapper .Results {
+  margin-top: 12px;
+}
+:host .DropdownWrapper .Results__Recents .title {
+  color: #707070;
+  font-size: 14px;
+  line-height: 20px;
+  padding: 8px 0;
+  font-weight: 700;
+  display: flex;
+}
+:host .DropdownWrapper .Results__Results .totalRes {
+  display: flex;
+  justify-content: space-between;
+}
+:host .DropdownWrapper .Results .ResWrapper {
+  display: flex;
+  flex-direction: column;
+}
+:host .DropdownWrapper .Results .ResWrapper div {
+  padding: 8px 0;
+  color: #707070;
+  font-size: 14px;
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+:host .DropdownWrapper .Results .ResWrapper div img {
+  width: 40px;
+  height: 48px;
+  object-fit: cover;
+  border-radius: 3px;
+}
+:host .DropdownWrapper .Results .ResWrapper div:hover {
+  cursor: pointer;
+}
+:host .DropdownWrapper .Results .ResWrapper .helperText {
+  color: #CBCBCB;
+}
+:host .DropdownWrapper .Results .ResWrapper .helperText svg {
+  width: 25px;
+  height: 25px;
+}

package/dist/collection/components/jump-search-bar-mobile/jump-search-bar-mobile.js

@@ -0,0 +1,414 @@
+import { Host, h } from "@stencil/core";
+export class JumpSearchBarMobile {
+    constructor() {
+        // Gestisce l'evento focus sull'input
+        this.handleFocus = () => {
+            const searchBarContainer = this.jumpSearchBar.closest('.InputWrapper');
+            if (searchBarContainer) {
+                searchBarContainer.classList.add('focused');
+            }
+        };
+        // Gestisce l'evento blur sull'input
+        this.handleBlur = () => {
+            const searchBarContainer = this.jumpSearchBar.closest('.InputWrapper');
+            if (searchBarContainer) {
+                searchBarContainer.classList.remove('focused');
+            }
+        };
+        this.doSearch = () => {
+            if (this.jumpSearchBar) {
+                this.searchValue = this.jumpSearchBar.value;
+                // Iniziare la ricerca solamente se ci sono almeno tre caratteri 
+                if (this.searchValue.length >= 3) {
+                    this.resType = 'results';
+                    this.innerResults = undefined;
+                    this.search.emit({ search: this.searchValue });
+                }
+            }
+        };
+        this.isOpen = false;
+        this.innerResults = [];
+        this.totalResults = 0;
+        this.resType = 'recents';
+        this.searchValue = undefined;
+        this.identifier = 'search-bar-mobile';
+        this.placeholder = 'Cerca...';
+        this.recents = [];
+        this.recentsTitle = 'Recenti';
+        this.debounceTime = 500;
+        this.loadingText = 'Sto caricando...';
+        this.noResultText = 'Nessun risultato corrispondente';
+        this.results = [];
+        this.resultsText = 'risultati';
+        this.showAllResText = 'Mostra tutti i risultati';
+    }
+    searchValueChanged(newValue) {
+        if (newValue === '') {
+            // Create a new array reference to trigger re-render
+            this.innerResults = [...this.recents];
+            this.results = [];
+        }
+    }
+    /* ---------------------- @EVENTS ------------------------- */
+    /* ---------------------- @LIFECYCLE ------------------------- */
+    /* -------------------- @LISTEN ------------------------------- */
+    addOption(e) {
+        let props = e.detail; // es {code: 'sku1', imageUrl: 'https://google.com/'}
+        // Aggiungi l'elemento solo a `recents`
+        this.recents = [...this.recents, Object.assign({}, props)];
+        // Aggiorna `innerResults` basandoti solo su `recents`
+        this.innerResults = [...this.recents];
+    }
+    /* -------------------- @METHOD ------------------------------- */
+    /** Imposta i risultati della ricerca all'interno della dropdown */
+    async setResults(results, tot) {
+        this.results = results;
+        this.innerResults = results;
+        this.totalResults = tot;
+    }
+    /* -------------------- LOCAL METHODS ------------------------- */
+    openDropdown() {
+        console.log('openDropdown');
+        this.isOpen = true;
+    }
+    closeDropdown() {
+        this.isOpen = false;
+    }
+    /** Emette l'evento quando l'utente clicca sul pulsante (se presente) o nel pulsante del dropdown per vedere tutti i risultati */
+    btnOrShowOtherClicked() {
+        this.showFullSearch.emit({ search: this.searchValue });
+    }
+    /** Emette l'evento di click su un risultato, mandandone tutti i dati */
+    handleResClicked(item) {
+        this.resultClicked.emit({ clicked: item });
+    }
+    debounce(fn, delay = this.debounceTime) {
+        let timeoutId;
+        return (...args) => {
+            if (timeoutId) {
+                clearTimeout(timeoutId);
+            }
+            timeoutId = setTimeout(() => {
+                fn.apply(null, args);
+            }, delay);
+        };
+    }
+    ;
+    /* --------------------- RENDER ------------------------------- */
+    render() {
+        return (h(Host, { key: 'f0535a70395bacabc372999896fc410c948bbed4', class: "JumpSearchBarMobile", ref: (el) => (this.componentRef = el) }, h("jump-icon", { key: '34431a69c6c68f48b5f92b03f5a876f485d66e34', name: "magnifying-glass", category: "light", onClick: () => this.openDropdown() }), h("div", { key: '89575c7a7a1c0a601a589ac451242e591d907a43', class: "DropdownWrapper " + (this.isOpen ? 'open' : '') }, h("div", { key: '633c8543dc2eaf36b7fc61857d7d63aadf852cd8', class: "InputWrapper" }, h("jump-icon", { key: '3c85be9683007c77faf9fe705c382b753dc8d6fb', class: "closeButton", category: "light", name: "arrow-left", onClick: () => this.closeDropdown() }), h("input", { key: '29f98929f8ed596072f1fe31d5820e9bde0a5604', placeholder: this.placeholder, type: "search", id: this.identifier, class: "search-input", ref: (el) => { this.jumpSearchBar = el; }, onInput: this.debounce(this.doSearch), onFocus: this.handleFocus, onBlur: this.handleBlur }), h("jump-icon", { key: '0e577fbdc3cfcc3d1628360487a828437459e01a', name: "magnifying-glass", category: "light" })), h("div", { key: 'da670ec6f527cc0015b42eea74acc355d081e260', class: "Results" }, (this.resType == 'recents') &&
+            h("div", { key: 'bb8eed320957070598e1fb57b3db5a7aa0cea4bd', class: "Results__Recents" }, this.recents.length != 0 && h("span", { key: '748a65cfbb955af507acc30a86afa2366b31d99a', class: "title" }, this.recentsTitle), h("div", { key: 'e3fd0b306f42a56a85d1efc4898a4ead272ce15d', class: "ResWrapper" }, this.innerResults.length > 0 && this.innerResults.map((item) => (h("div", { onClick: () => this.handleResClicked(item) }, h("jump-icon", { name: "magnifying-glass", category: "light" }), item['value']))))), this.resType == 'results' &&
+            h("div", { key: '29f82834ad14a34547f9f856f045c7cccc9431e0', class: "Results__Results" }, h("div", { key: '1c005fe5f1d9a88c151886eda65f372c52f4710f', class: "ResWrapper" }, this.innerResults === undefined ?
+                h("div", { class: "helperText" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 100 100", preserveAspectRatio: "xMidYMid", width: "252", height: "252" }, h("g", null, h("g", { transform: "rotate(0 50 50)" }, h("rect", { fill: "#707070", height: "11", width: "4", ry: "1.87", rx: "1.87", y: "27.5", x: "48" }, h("animate", { repeatCount: "indefinite", begin: "-0.9s", dur: "1s", keyTimes: "0;1", values: "1;0", attributeName: "opacity" }))), h("g", { transform: "rotate(36 50 50)" }, h("rect", { fill: "#707070", height: "11", width: "4", ry: "1.87", rx: "1.87", y: "27.5", x: "48" }, h("animate", { repeatCount: "indefinite", begin: "-0.8s", dur: "1s", keyTimes: "0;1", values: "1;0", attributeName: "opacity" }))), h("g", { transform: "rotate(72 50 50)" }, h("rect", { fill: "#707070", height: "11", width: "4", ry: "1.87", rx: "1.87", y: "27.5", x: "48" }, h("animate", { repeatCount: "indefinite", begin: "-0.7s", dur: "1s", keyTimes: "0;1", values: "1;0", attributeName: "opacity" }))), h("g", { transform: "rotate(108 50 50)" }, h("rect", { fill: "#707070", height: "11", width: "4", ry: "1.87", rx: "1.87", y: "27.5", x: "48" }, h("animate", { repeatCount: "indefinite", begin: "-0.6s", dur: "1s", keyTimes: "0;1", values: "1;0", attributeName: "opacity" }))), h("g", { transform: "rotate(144 50 50)" }, h("rect", { fill: "#707070", height: "11", width: "4", ry: "1.87", rx: "1.87", y: "27.5", x: "48" }, h("animate", { repeatCount: "indefinite", begin: "-0.5s", dur: "1s", keyTimes: "0;1", values: "1;0", attributeName: "opacity" }))), h("g", { transform: "rotate(180 50 50)" }, h("rect", { fill: "#707070", height: "11", width: "4", ry: "1.87", rx: "1.87", y: "27.5", x: "48" }, h("animate", { repeatCount: "indefinite", begin: "-0.4s", dur: "1s", keyTimes: "0;1", values: "1;0", attributeName: "opacity" }))), h("g", { transform: "rotate(216 50 50)" }, h("rect", { fill: "#707070", height: "11", width: "4", ry: "1.87", rx: "1.87", y: "27.5", x: "48" }, h("animate", { repeatCount: "indefinite", begin: "-0.3s", dur: "1s", keyTimes: "0;1", values: "1;0", attributeName: "opacity" }))), h("g", { transform: "rotate(252 50 50)" }, h("rect", { fill: "#707070", height: "11", width: "4", ry: "1.87", rx: "1.87", y: "27.5", x: "48" }, h("animate", { repeatCount: "indefinite", begin: "-0.2s", dur: "1s", keyTimes: "0;1", values: "1;0", attributeName: "opacity" }))), h("g", { transform: "rotate(288 50 50)" }, h("rect", { fill: "#707070", height: "11", width: "4", ry: "1.87", rx: "1.87", y: "27.5", x: "48" }, h("animate", { repeatCount: "indefinite", begin: "-0.1s", dur: "1s", keyTimes: "0;1", values: "1;0", attributeName: "opacity" }))), h("g", { transform: "rotate(324 50 50)" }, h("rect", { fill: "#707070", height: "11", width: "4", ry: "1.87", rx: "1.87", y: "27.5", x: "48" }, h("animate", { repeatCount: "indefinite", begin: "0s", dur: "1s", keyTimes: "0;1", values: "1;0", attributeName: "opacity" }))), h("g", null))), this.loadingText)
+                :
+                    (this.innerResults.length > 0 ?
+                        this.innerResults.map((item) => (h("div", { onClick: () => this.handleResClicked(item), key: item['id'] }, item['img'] && h("img", { src: item['img'], alt: "result" }), item['value'])))
+                        :
+                            h("div", { class: "helperText" }, this.noResultText)), (this.innerResults && this.innerResults.length > 0) &&
+                h("div", { key: '084038e82063eb93fea6ea10d0a405fb7f1e04a8', class: "totalRes" }, h("jump-button", { key: 'f09ae73865768a64e75fcc2b887c4631e3271697', variant: "secondary", size: "small", text: true, onClick: () => this.btnOrShowOtherClicked(), target: "_blank" }, " ", this.showAllResText, " "), this.totalResults && h("div", { key: '66c370a16342ebfe68e3032299bf3da32ed53acd' }, this.totalResults, " ", this.resultsText))))))));
+    }
+    static get is() { return "jump-search-bar-mobile"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["jump-search-bar-mobile.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["jump-search-bar-mobile.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "identifier": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "identifier",
+                "reflect": false,
+                "defaultValue": "'search-bar-mobile'"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "placeholder",
+                "reflect": false,
+                "defaultValue": "'Cerca...'"
+            },
+            "recents": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Array<object>",
+                    "resolved": "object[]",
+                    "references": {
+                        "Array": {
+                            "location": "global",
+                            "id": "global::Array"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "defaultValue": "[]"
+            },
+            "recentsTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "recents-title",
+                "reflect": false,
+                "defaultValue": "'Recenti'"
+            },
+            "debounceTime": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "debounce-time",
+                "reflect": false,
+                "defaultValue": "500"
+            },
+            "loadingText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "loading-text",
+                "reflect": false,
+                "defaultValue": "'Sto caricando...'"
+            },
+            "noResultText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "no-result-text",
+                "reflect": false,
+                "defaultValue": "'Nessun risultato corrispondente'"
+            },
+            "results": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Array<object>",
+                    "resolved": "object[]",
+                    "references": {
+                        "Array": {
+                            "location": "global",
+                            "id": "global::Array"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "defaultValue": "[]"
+            },
+            "resultsText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "results-text",
+                "reflect": false,
+                "defaultValue": "'risultati'"
+            },
+            "showAllResText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "show-all-res-text",
+                "reflect": false,
+                "defaultValue": "'Mostra tutti i risultati'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isOpen": {},
+            "innerResults": {},
+            "totalResults": {},
+            "resType": {},
+            "searchValue": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "resultClicked",
+                "name": "jump-search-bar-mobile-res-clicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "search",
+                "name": "jump-search-bar-mobile",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Evento emesso quando l'utente effettua una ricerca \nEmette un oggetto contenenente il valore della ricerca alla chiave 'search'"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "showFullSearch",
+                "name": "jump-search-bar-mobile-show-all",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Evento emesso quando l'utente clicca sul pulsante (se presente) o nel pulsante del dropdown per vedere tutti i risultati \nEmette un oggetto contenenente il valore della ricerca alla chiave 'search'"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setResults": {
+                "complexType": {
+                    "signature": "(results: any, tot?: number) => Promise<void>",
+                    "parameters": [{
+                            "name": "results",
+                            "type": "any",
+                            "docs": ""
+                        }, {
+                            "name": "tot",
+                            "type": "number",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Imposta i risultati della ricerca all'interno della dropdown",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "searchValue",
+                "methodName": "searchValueChanged"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "jump-search-bar-dropdown-item-connected",
+                "method": "addOption",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=jump-search-bar-mobile.js.map

package/dist/collection/components/jump-search-bar-mobile/jump-search-bar-mobile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jump-search-bar-mobile.js","sourceRoot":"","sources":["../../../src/components/jump-search-bar-mobile/jump-search-bar-mobile.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Watch, Method, Event, EventEmitter, State, Listen, Host, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'jump-search-bar-mobile',\n  styleUrl: 'jump-search-bar-mobile.scss',\n  shadow: true,\n})\nexport class JumpSearchBarMobile {\n\n  /* ---------------------- @OWN PROPERTIES ------------------------- */\n  jumpSearchBar: HTMLInputElement;\n  componentRef: HTMLElement;\n\n  /* ---------------------- @STATE ------------------------- */\n  @State() isOpen: boolean = false;\n  @State() innerResults: Array<object> = [];\n  @State() totalResults: number = 0;\n  @State() resType: string = 'recents';\n  \n  @State() searchValue: string = undefined;\n\n  @Watch('searchValue')\n  searchValueChanged(newValue: string) {\n    if (newValue === '') {\n      // Create a new array reference to trigger re-render\n      this.innerResults = [...this.recents];\n      this.results = [];\n    }\n  }\n\n  /* ---------------------- @PROPERTIES ------------------------- */\n  @Prop() identifier: string = 'search-bar-mobile'; // Identificatore della searchbar\n  @Prop() placeholder: string = 'Cerca...'; //Il testo del placeholder dell\\'input della searchbar\n  @Prop() recents: Array<object> = []; // Serve per il dropdown quando si vedono le ricerche recenti\n  @Prop() recentsTitle: string = 'Recenti'; // Serve per il titolo del dropwdown quando si vedono le ricerche recenti\n  @Prop() debounceTime: number = 500; // 'Il tempo di attesa per l\\'invio della ricerca in caso di ricerca automatica. In millisecondi.\n  @Prop() loadingText: string = 'Sto caricando...'; // Il testo mostrato durante il caricamento dei risultati.\n  @Prop() noResultText: string = 'Nessun risultato corrispondente'; // Il testo da mostrare in caso nessun risultato sia stato recuperato.\n  @Prop() results: Array<object> = []; // Serve per il dropdown quando si vedono i risultati della ricerca\n  @Prop() resultsText: string = 'risultati'; // Il testo mostrato accanto al numero di risultati totali.\n  @Prop() showAllResText: string = 'Mostra tutti i risultati'; // La label da mostrare per il pulsante che mostra tutti i risultati.\n\n  /* ---------------------- @EVENTS ------------------------- */\n\n  /* ---------------------- @LIFECYCLE ------------------------- */\n\n  /* -------------------- @LISTEN ------------------------------- */\n  @Listen(\"jump-search-bar-dropdown-item-connected\")\n  addOption(e) {\n    let props = e.detail; // es {code: 'sku1', imageUrl: 'https://google.com/'}\n\n    // Aggiungi l'elemento solo a `recents`\n    this.recents = [...this.recents, { ...props }];\n\n    // Aggiorna `innerResults` basandoti solo su `recents`\n    this.innerResults = [...this.recents];\n  }\n\n\n  /* \n  * Evento da ascoltare per recuperare il dato cliccato\n  * Emette un oggetto contenente tutti i dati relativi al risultato cliccato.\n  */\n  @Event({ eventName: 'jump-search-bar-mobile-res-clicked' }) resultClicked: EventEmitter; \n\n  /**\n * Evento emesso quando l'utente effettua una ricerca \n * Emette un oggetto contenenente il valore della ricerca alla chiave 'search'\n * */\n  @Event({ eventName: 'jump-search-bar-mobile' }) search: EventEmitter;\n\n  /** \n * Evento emesso quando l'utente clicca sul pulsante (se presente) o nel pulsante del dropdown per vedere tutti i risultati \n * Emette un oggetto contenenente il valore della ricerca alla chiave 'search'\n*/\n  @Event({ eventName: 'jump-search-bar-mobile-show-all' }) showFullSearch: EventEmitter;\n\n  /* -------------------- @METHOD ------------------------------- */\n\n  /** Imposta i risultati della ricerca all'interno della dropdown */\n  @Method()\n  async setResults(results, tot?: number) {\n    this.results = results;\n    this.innerResults = results;\n    this.totalResults = tot;\n  }\n\n  /* -------------------- LOCAL METHODS ------------------------- */\n  openDropdown(){\n    console.log('openDropdown');\n    this.isOpen = true;\n  } \n\n  closeDropdown(){\n    this.isOpen = false;\n  }\n\n  /** Emette l'evento quando l'utente clicca sul pulsante (se presente) o nel pulsante del dropdown per vedere tutti i risultati */\n  btnOrShowOtherClicked() {\n    this.showFullSearch.emit({ search: this.searchValue });\n  }\n\n  // Gestisce l'evento focus sull'input\n  handleFocus = () => {\n    const searchBarContainer = this.jumpSearchBar.closest('.InputWrapper');\n    if (searchBarContainer) {\n      searchBarContainer.classList.add('focused');\n    }\n  };\n\n  // Gestisce l'evento blur sull'input\n  handleBlur = () => {\n    const searchBarContainer = this.jumpSearchBar.closest('.InputWrapper');\n    if (searchBarContainer) {\n      searchBarContainer.classList.remove('focused');\n    }\n  };\n\n  /** Emette l'evento di click su un risultato, mandandone tutti i dati */\n  handleResClicked(item) {\n    this.resultClicked.emit({ clicked: item });\n  } \n\n  doSearch = () => {\n    if (this.jumpSearchBar) {\n      this.searchValue = this.jumpSearchBar.value;\n\n      // Iniziare la ricerca solamente se ci sono almeno tre caratteri \n      if (this.searchValue.length >= 3) {\n        this.resType = 'results';\n\n        this.innerResults = undefined;\n\n        this.search.emit({ search: this.searchValue });\n\n       \n      }\n    }\n  };\n\n  debounce(fn, delay = this.debounceTime) {\n    let timeoutId;\n\n    return (...args) => {\n      if (timeoutId) {\n        clearTimeout(timeoutId);\n      }\n      timeoutId = setTimeout(() => {\n        fn.apply(null, args);\n      }, delay);\n    };\n  };\n\n  /* --------------------- RENDER ------------------------------- */\n\n  render() {\n    return (\n      <Host class=\"JumpSearchBarMobile\" ref={(el) => (this.componentRef = el as HTMLElement)}>\n        <jump-icon\n          name=\"magnifying-glass\"\n          category=\"light\"\n          onClick={() => this.openDropdown()}\n        ></jump-icon>\n        <div class={\"DropdownWrapper \" + (this.isOpen ? 'open' : '')}>\n          <div class=\"InputWrapper\">\n            <jump-icon class=\"closeButton\" category=\"light\" name=\"arrow-left\" onClick={() => this.closeDropdown()}></jump-icon>\n            <input\n              placeholder={this.placeholder}\n              type=\"search\"\n              id={this.identifier}\n              class=\"search-input\"\n              ref={(el) => { this.jumpSearchBar = el as HTMLInputElement }}\n              onInput={this.debounce(this.doSearch)}\n              onFocus={this.handleFocus}\n              onBlur={this.handleBlur}\n            />\n            <jump-icon name=\"magnifying-glass\" category=\"light\"></jump-icon>\n          </div>\n          <div class=\"Results\">\n            {(this.resType == 'recents') &&\n              <div class=\"Results__Recents\">\n                {this.recents.length != 0 && <span class=\"title\">{this.recentsTitle}</span>}\n                <div class=\"ResWrapper\">\n                  {this.innerResults.length > 0 && this.innerResults.map((item) => (\n                    <div onClick={() => this.handleResClicked(item)}>\n                      <jump-icon name=\"magnifying-glass\" category=\"light\"></jump-icon>\n                      {item['value']}\n                    </div>\n                  ))}\n                </div>\n              </div>\n            }\n            {this.resType == 'results' &&\n              <div class=\"Results__Results\">\n                <div class=\"ResWrapper\">\n                  {this.innerResults === undefined ?\n                    <div class=\"helperText\">\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"xMidYMid\" width=\"252\" height=\"252\" ><g><g transform=\"rotate(0 50 50)\">\n                      <rect fill=\"#707070\" height=\"11\" width=\"4\" ry=\"1.87\" rx=\"1.87\" y=\"27.5\" x=\"48\">\n                        <animate repeatCount=\"indefinite\" begin=\"-0.9s\" dur=\"1s\" keyTimes=\"0;1\" values=\"1;0\" attributeName=\"opacity\"></animate>\n                      </rect>\n                    </g><g transform=\"rotate(36 50 50)\">\n                        <rect fill=\"#707070\" height=\"11\" width=\"4\" ry=\"1.87\" rx=\"1.87\" y=\"27.5\" x=\"48\">\n                          <animate repeatCount=\"indefinite\" begin=\"-0.8s\" dur=\"1s\" keyTimes=\"0;1\" values=\"1;0\" attributeName=\"opacity\"></animate>\n                        </rect>\n                      </g><g transform=\"rotate(72 50 50)\">\n                        <rect fill=\"#707070\" height=\"11\" width=\"4\" ry=\"1.87\" rx=\"1.87\" y=\"27.5\" x=\"48\">\n                          <animate repeatCount=\"indefinite\" begin=\"-0.7s\" dur=\"1s\" keyTimes=\"0;1\" values=\"1;0\" attributeName=\"opacity\"></animate>\n                        </rect>\n                      </g><g transform=\"rotate(108 50 50)\">\n                        <rect fill=\"#707070\" height=\"11\" width=\"4\" ry=\"1.87\" rx=\"1.87\" y=\"27.5\" x=\"48\">\n                          <animate repeatCount=\"indefinite\" begin=\"-0.6s\" dur=\"1s\" keyTimes=\"0;1\" values=\"1;0\" attributeName=\"opacity\"></animate>\n                        </rect>\n                      </g><g transform=\"rotate(144 50 50)\">\n                        <rect fill=\"#707070\" height=\"11\" width=\"4\" ry=\"1.87\" rx=\"1.87\" y=\"27.5\" x=\"48\">\n                          <animate repeatCount=\"indefinite\" begin=\"-0.5s\" dur=\"1s\" keyTimes=\"0;1\" values=\"1;0\" attributeName=\"opacity\"></animate>\n                        </rect>\n                      </g><g transform=\"rotate(180 50 50)\">\n                        <rect fill=\"#707070\" height=\"11\" width=\"4\" ry=\"1.87\" rx=\"1.87\" y=\"27.5\" x=\"48\">\n                          <animate repeatCount=\"indefinite\" begin=\"-0.4s\" dur=\"1s\" keyTimes=\"0;1\" values=\"1;0\" attributeName=\"opacity\"></animate>\n                        </rect>\n                      </g><g transform=\"rotate(216 50 50)\">\n                        <rect fill=\"#707070\" height=\"11\" width=\"4\" ry=\"1.87\" rx=\"1.87\" y=\"27.5\" x=\"48\">\n                          <animate repeatCount=\"indefinite\" begin=\"-0.3s\" dur=\"1s\" keyTimes=\"0;1\" values=\"1;0\" attributeName=\"opacity\"></animate>\n                        </rect>\n                      </g><g transform=\"rotate(252 50 50)\">\n                        <rect fill=\"#707070\" height=\"11\" width=\"4\" ry=\"1.87\" rx=\"1.87\" y=\"27.5\" x=\"48\">\n                          <animate repeatCount=\"indefinite\" begin=\"-0.2s\" dur=\"1s\" keyTimes=\"0;1\" values=\"1;0\" attributeName=\"opacity\"></animate>\n                        </rect>\n                      </g><g transform=\"rotate(288 50 50)\">\n                        <rect fill=\"#707070\" height=\"11\" width=\"4\" ry=\"1.87\" rx=\"1.87\" y=\"27.5\" x=\"48\">\n                          <animate repeatCount=\"indefinite\" begin=\"-0.1s\" dur=\"1s\" keyTimes=\"0;1\" values=\"1;0\" attributeName=\"opacity\"></animate>\n                        </rect>\n                      </g><g transform=\"rotate(324 50 50)\">\n                        <rect fill=\"#707070\" height=\"11\" width=\"4\" ry=\"1.87\" rx=\"1.87\" y=\"27.5\" x=\"48\">\n                          <animate repeatCount=\"indefinite\" begin=\"0s\" dur=\"1s\" keyTimes=\"0;1\" values=\"1;0\" attributeName=\"opacity\"></animate>\n                        </rect>\n                      </g><g></g></g></svg>{this.loadingText}</div>\n                    :\n                    (this.innerResults.length > 0 ?\n                      this.innerResults.map((item) => (\n                        <div onClick={() => this.handleResClicked(item)} key={item['id']}>\n                          {item['img'] && <img src={item['img']} alt=\"result\" />}\n                          {item['value']}\n                        </div>\n                      ))\n                      :\n                      <div class=\"helperText\">{this.noResultText}</div>\n                    )\n                  }\n                  {(this.innerResults && this.innerResults.length > 0) &&\n                    <div class=\"totalRes\">\n                      <jump-button variant=\"secondary\" size=\"small\" text onClick={() => this.btnOrShowOtherClicked()} target=\"_blank\"> {this.showAllResText} </jump-button>\n                      {this.totalResults && <div>{this.totalResults} {this.resultsText}</div>}\n                    </div>\n                  }\n                </div>\n              </div>\n            }\n\n          </div>\n        </div>\n      </Host>\n    );\n  }\n\n}\n"]}