@jumpgroup/jump-design-system 0.3.52 → 0.3.53

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

@@ -1,12 +1,12 @@
 import { generateAttributesFromArgs, formatHtml } from "../../utils/utils";
 export default {
-    title: 'Components/SearchBar (WIP)',
+    title: 'Components/SearchBar/SearchBar',
     tags: ['autodocs'],
     argTypes: {
         identifier: {
             name: 'identifier',
             control: 'text',
-            description: 'L\'id dell\'elemento',
+            description: 'Identificatore della searchbar',
             table: {
                 type: { summary: 'string' },
                 defaultValue: { summary: 'search-bar' },
@@ -15,34 +15,69 @@ export default {
         placeholder: {
             name: 'placeholder',
             control: 'text',
-            description: 'Il testo del placeholder',
+            description: 'Il testo del placeholder dell\'input della searchbar.',
             table: {
                 type: { summary: 'string' },
                 defaultValue: { summary: 'Cerca...' },
             },
         },
-        searchType: {
-            name: 'searchType',
-            control: 'select',
-            options: ['auto', 'manual'],
-            description: "Scelta della modalità di ricerca tra quella automatica e quella manuale.",
+        noResultText: {
+            name: 'no-result-text',
+            control: 'text',
+            description: 'Il testo mostrato in caso nessun risultato sia stato recuperato.',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'Nessun risultato corrispondente' },
+            },
+        },
+        loadingText: {
+            name: 'loading-text',
+            control: 'text',
+            description: 'Il testo mostrato durante il caricamento dei risultati.',
             table: {
                 type: { summary: 'string' },
-                defaultValue: { summary: 'auto' },
+                defaultValue: { summary: 'Caricamento...' },
+            },
+        },
+        resultsText: {
+            name: 'results-text',
+            control: 'text',
+            description: 'Il testo mostrato accanto al numero di risultati totali.',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'risultati' },
+            },
+        },
+        showAllResText: {
+            name: 'show-all-res-text',
+            control: 'text',
+            description: 'La label da mostrare per il pulsante che mostra tutti i risultati.',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'Mostra tutti i risultati' },
             },
         },
         variant: {
             name: 'variant',
             control: 'select',
             options: ['filled', 'linear', 'outline'],
+            description: 'Scelta dello stile della barra di ricerca tra filled, linear e outline.',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'outline' },
+            },
+        },
+        withBtn: {
+            name: 'with-btn',
+            control: 'boolean',
+            description: 'Se true, aggiunge un pulsante alla barra di ricerca',
             if: {
-                arg: 'searchType',
-                eq: 'auto',
+                arg: 'variant',
+                neq: 'linear',
             },
-            description: 'Solo se tipologia "auto", Scelta dello stile della barra di ricerca tra filled, linear e outline.',
             table: {
-                type: { summary: 'string' },
-                defaultValue: { summary: 'linear' },
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
             },
         },
         debounceTime: {
@@ -57,7 +92,70 @@ export default {
                 type: { summary: 'number' },
                 defaultValue: { summary: 500 },
             },
-        }
+        },
+        recentsTitle: {
+            name: 'recents-title',
+            control: 'text',
+            description: 'Serve per il titolo del dropwdown quando si vedono le ricerche recenti',
+            if: {
+                arg: 'dropdown',
+                eq: 'true',
+            },
+        },
+        recents: {
+            name: 'recents',
+            control: 'object',
+            description: 'Serve per il dropdown quando si vedono le ricerche recenti',
+            if: {
+                arg: 'dropdown',
+                eq: 'true',
+            },
+        },
+        results: {
+            name: 'results',
+            control: 'object',
+            description: 'Serve per il dropdown quando si vedono i risultati della ricerca',
+            if: {
+                arg: 'dropdown',
+                eq: 'true',
+            },
+        },
+        linearIconOnly: {
+            name: 'linear-icon-only',
+            control: 'boolean',
+            description: 'Se true, la barra di tipo lineare mostrerà solo l\'icona di ricerca',
+            if: {
+                arg: 'variant',
+                eq: 'linear',
+            },
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        dropdown: {
+            name: 'dropdown',
+            control: 'boolean',
+            description: 'Se true, mostra il dropdown con i risultati della ricerca',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        dropdownPosition: {
+            name: 'dropdown-position',
+            control: 'select',
+            options: ['absolute', 'relative'],
+            description: 'La posizione del dropdown rispetto alla searchbar tra asbolute e relative',
+            if: {
+                arg: 'dropdown',
+                eq: true,
+            },
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'relative' },
+            },
+        },
     }
 };
 const Template = (args) => {
@@ -67,54 +165,227 @@ const Template = (args) => {
 export const SearchBar = Template.bind({});
 SearchBar.args = {
     placeholder: 'Cerca...',
-    searchType: 'manual',
 };
-export const SearchBarManual = Template.bind({});
-SearchBarManual.args = {
+export const SearchBarLinearOnlyIcon = Template.bind({});
+SearchBarLinearOnlyIcon.args = {
     placeholder: 'Cerca...',
-    searchType: 'manual',
+    variant: 'linear',
+    linearIconOnly: true,
 };
-export const SearchBarAutoOutline = Template.bind({});
-SearchBarAutoOutline.args = {
+export const SearchBarOutlineWithBtn = Template.bind({});
+SearchBarOutlineWithBtn.args = {
     placeholder: 'Cerca...',
-    searchType: 'auto',
     variant: 'outline',
+    withBtn: true,
 };
-export const SearchBarAutoFilled = Template.bind({});
-SearchBarAutoFilled.args = {
+export const SearchBarOutlineWithoutBtn = Template.bind({});
+SearchBarOutlineWithoutBtn.args = {
     placeholder: 'Cerca...',
-    searchType: 'auto',
-    variant: 'filled',
+    variant: 'outline',
+    withBtn: false,
 };
-export const SearchBarAutoLinear = Template.bind({});
-SearchBarAutoLinear.args = {
-    placeholder: 'Cerca...',
-    searchType: 'auto',
-    variant: 'linear',
+const TemplateWithRecents = (args) => {
+    const attributes = generateAttributesFromArgs(args);
+    return formatHtml(`<jump-search-bar ${attributes}>
+            <jump-search-bar-dropdown-item value="Prima" details-key="value" img="https://via.placeholder.com/150" href="https://www.google.com"></jump-search-bar-dropdown-item>
+            <jump-search-bar-dropdown-item value="Seconda" details-key="value" img="https://via.placeholder.com/150" href="https://www.google.com"></jump-search-bar-dropdown-item>
+            <jump-search-bar-dropdown-item value="Terza" details-key="value" img="https://via.placeholder.com/150" href="https://www.google.com"></jump-search-bar-dropdown-item>
+        </jump-search-bar>`);
+};
+export const SearchBarWithDropdownRecents = TemplateWithRecents.bind({});
+SearchBarWithDropdownRecents.args = {
+    dropdown: true,
 };
-const TemplateWithListenerExample = (args, data) => {
+const TemplateWithResults = (args, data) => {
     let id = data.id;
     const attributes = generateAttributesFromArgs(args);
-    return formatHtml(`<jump-search-bar ${attributes}></jump-search-bar>
-        <div>Il testo cercato è: <span id="page-text">loading..<span> </div>
-        <script>
-            (function() {
-                let container; 
-                    container = document.querySelector('#story--${id}');
-                    container.querySelector('jump-search-bar').addEventListener('jump-search-bar', (ev) => {
-                    container.querySelector('#page-text').innerText = ev.detail.search;
+    return formatHtml(`<jump-search-bar ${attributes}>
+          <jump-search-bar-dropdown-item value="Prima opzione" details-key="value" img="https://via.placeholder.com/150" href="https://www.google.com"></jump-search-bar-dropdown-item>
+            <jump-search-bar-dropdown-item value="Seconda opzione" details-key="value" img="https://via.placeholder.com/150" href="https://www.google.com"></jump-search-bar-dropdown-item>
+             <jump-search-bar-dropdown-item value="Terza opzione" details-key="value" img="https://via.placeholder.com/150" href="https://www.google.com"></jump-search-bar-dropdown-item>
+              <jump-search-bar-dropdown-item value="Quarta opzione" details-key="value" img="https://via.placeholder.com/150" href="https://www.google.com"></jump-search-bar-dropdown-item>
+        </jump-search-bar>
+         <div>L'utente ha cercato per le parole: <span id="search">loading..<span></div>
+          <div>L'utente ha selezionato il risultato: <span id="result">loading..<span></div>
+         <script>
+        (function(){
+            let container = document.querySelector('#story--${id}');
+            container.querySelector('jump-search-bar').addEventListener('jump-search-bar', (ev) => {
+                container.querySelector('#search').innerText = ev.detail.search;
+                if(ev.detail.search != ''){
+
+                // Il timeout è inserito a scopo dimostrativo per far vedere il caricamento dei risultati
+                setTimeout(() => {
+                    console.log("Delayed for 2 second.");
+                        container.querySelector('jump-search-bar').setResults([
+                        {
+                            "value": "Primo risultato",
+                            "img": "https://t4.ftcdn.net/jpg/06/30/49/51/360_F_630495183_8pznBkSto7BmBYyhtVfAKbptBXlNxACy.jpg",
+                            "href": "https://www.google.com",
+                            "details": {
+                             "key:": "value",
+                             "key1:": "value1"
+                            }
+                        },
+                        {
+                            "value": "Seconda risultato",
+                            "img": "https://as2.ftcdn.net/v2/jpg/03/72/38/41/1000_F_372384189_UFzmQZQKD13dzTWILcDqbsRGDX868F5T.jpg",
+                            "href": "https://www.google.com",
+                            "details": {
+                             "key:": "value",
+                             "key1:": "value1"
+                            }
+                        },
+                        {
+                            "value": "Terza risultato",
+                            "img": "https://as2.ftcdn.net/v2/jpg/06/14/79/27/1000_F_614792718_QAEYmOvD6BFhfTGD0bFNJfWDcubKNSFv.jpg",
+                            "href": "https://www.google.com",
+                            "details": {
+                             "key:": "value",
+                             "key1:": "value1"
+                            }
+                        },
+                        {
+                            "value": "quarto risultato",
+                            "img": "https://as2.ftcdn.net/v2/jpg/07/85/54/73/1000_F_785547378_iHd50UIEpMx3dXabLFcglBfGr2unpHDd.jpg",
+                            "href": "https://www.google.com",
+                            "details": {
+                             "key:": "value",
+                             "key1:": "value1"
+                            }
+                        }
+                    ], 23)
+
+                }, "2000");
+
+                
+                }
                 });
-            })();
+                container.querySelector('jump-search-bar').addEventListener('jump-search-bar-res-clicked', (ev) => {
+                    console.log('Cliccato sul risultato', ev.detail.clicked);
+                    container.querySelector('#result').innerText = ev.detail.clicked.value;
+                });
+
+                container.querySelector('jump-search-bar').addEventListener('jump-search-bar-show-all', (ev) => {
+                    console.log('Vai nella pagina di ricerca', ev.detail);
+                });
+        })();
         </script>`);
 };
-export const SearchBarManualWithListener = TemplateWithListenerExample.bind({});
-SearchBarManualWithListener.args = {
-    placeholder: 'Cerca...',
-    searchType: 'manual',
+export const SearchBarWithDropdownResults = TemplateWithResults.bind({});
+SearchBarWithDropdownResults.args = {
+    dropdown: true,
+    withBtn: true,
 };
-export const SearchBarAutoWithListener = TemplateWithListenerExample.bind({});
-SearchBarAutoWithListener.args = {
-    placeholder: 'Cerca...',
-    searchType: 'auto',
+const TemplateWithResultsDropdownAbsolute = (args, data) => {
+    let id = data.id;
+    const attributes = generateAttributesFromArgs(args);
+    return formatHtml(`<jump-search-bar ${attributes}>
+          <jump-search-bar-dropdown-item value="Prima opzione" details-key="value" img="https://via.placeholder.com/150" href="https://www.google.com"></jump-search-bar-dropdown-item>
+            <jump-search-bar-dropdown-item value="Seconda opzione" details-key="value" img="https://via.placeholder.com/150" href="https://www.google.com"></jump-search-bar-dropdown-item>
+             <jump-search-bar-dropdown-item value="Terza opzione" details-key="value" img="https://via.placeholder.com/150" href="https://www.google.com"></jump-search-bar-dropdown-item>
+              <jump-search-bar-dropdown-item value="Quarta opzione" details-key="value" img="https://via.placeholder.com/150" href="https://www.google.com"></jump-search-bar-dropdown-item>
+        </jump-search-bar>
+         <div>L'utente ha cercato per le parole: <span id="search">loading..<span></div>
+          <div>L'utente ha selezionato il risultato: <span id="result">loading..<span></div>
+         <script>
+        (function(){
+            let container = document.querySelector('#story--${id}');
+            container.querySelector('jump-search-bar').addEventListener('jump-search-bar', (ev) => {
+                container.querySelector('#search').innerText = ev.detail.search;
+                if(ev.detail.search != ''){
+
+                // Il timeout è inserito a scopo dimostrativo per far vedere il caricamento dei risultati
+                setTimeout(() => {
+                    console.log("Delayed for 2 second.");
+                        container.querySelector('jump-search-bar').setResults([
+                        {
+                            "value": "Primo risultato",
+                            "img": "https://t4.ftcdn.net/jpg/06/30/49/51/360_F_630495183_8pznBkSto7BmBYyhtVfAKbptBXlNxACy.jpg",
+                            "href": "https://www.google.com",
+                            "details": {
+                             "key:": "value",
+                             "key1:": "value1"
+                            }
+                        },
+                        {
+                            "value": "Seconda risultato",
+                            "img": "https://as2.ftcdn.net/v2/jpg/03/72/38/41/1000_F_372384189_UFzmQZQKD13dzTWILcDqbsRGDX868F5T.jpg",
+                            "href": "https://www.google.com",
+                            "details": {
+                             "key:": "value",
+                             "key1:": "value1"
+                            }
+                        },
+                        {
+                            "value": "Terza risultato",
+                            "img": "https://as2.ftcdn.net/v2/jpg/06/14/79/27/1000_F_614792718_QAEYmOvD6BFhfTGD0bFNJfWDcubKNSFv.jpg",
+                            "href": "https://www.google.com",
+                            "details": {
+                             "key:": "value",
+                             "key1:": "value1"
+                            }
+                        },
+                        {
+                            "value": "quarto risultato",
+                            "img": "https://as2.ftcdn.net/v2/jpg/07/85/54/73/1000_F_785547378_iHd50UIEpMx3dXabLFcglBfGr2unpHDd.jpg",
+                            "href": "https://www.google.com",
+                            "details": {
+                             "key:": "value",
+                             "key1:": "value1"
+                            }
+                        }
+                    ], 23)
+
+                }, "2000");
+
+                
+                }
+                });
+                container.querySelector('jump-search-bar').addEventListener('jump-search-bar-res-clicked', (ev) => {
+                    console.log('Cliccato sul risultato', ev.detail.clicked);
+                    container.querySelector('#result').innerText = ev.detail.clicked.value;
+                });
+
+                container.querySelector('jump-search-bar').addEventListener('jump-search-bar-show-all', (ev) => {
+                    console.log('Vai nella pagina di ricerca', ev.detail);
+                });
+        })();
+        </script>`);
+};
+export const SearchBarWithDropdownAbsoluteResults = TemplateWithResultsDropdownAbsolute.bind({});
+SearchBarWithDropdownAbsoluteResults.args = {
+    dropdown: true,
+    withBtn: true,
+    dropdownPosition: 'absolute',
+};
+const TemplateWithNoResults = (args, data) => {
+    let id = data.id;
+    const attributes = generateAttributesFromArgs(args);
+    return formatHtml(`<jump-search-bar ${attributes}>
+          <jump-search-bar-dropdown-item value="Prima opzione" details-key="value" img="https://via.placeholder.com/150" href="https://www.google.com"></jump-search-bar-dropdown-item>
+            <jump-search-bar-dropdown-item value="Seconda opzione" details-key="value" img="https://via.placeholder.com/150" href="https://www.google.com"></jump-search-bar-dropdown-item>
+        </jump-search-bar>
+         <div>L'utente ha cercato per le parole: <span id="search">loading..<span></div>
+          <div>L'utente ha selezionato il risultato: <span id="result">loading..<span></div>
+         <script>
+        (function(){
+            let container = document.querySelector('#story--${id}');
+            container.querySelector('jump-search-bar').addEventListener('jump-search-bar', (ev) => {
+                container.querySelector('#search').innerText = ev.detail.search;
+                if(ev.detail.search != ''){
+                    container.querySelector('jump-search-bar').setResults([])
+                }
+                });
+                container.querySelector('jump-search-bar').addEventListener('jump-search-bar-res-clicked', (ev) => {
+                    console.log('Cliccato sul risultato', ev.detail.clicked);
+                    container.querySelector('#result').innerText = ev.detail.clicked.value;
+                });
+        })();
+        </script>`);
+};
+export const SearchBarWithDropdownNoResults = TemplateWithNoResults.bind({});
+SearchBarWithDropdownNoResults.args = {
+    dropdown: true,
 };
 //# sourceMappingURL=jump-search-bar.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"jump-search-bar.stories.js","sourceRoot":"","sources":["../../../src/components/jump-search-bar/jump-search-bar.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { generateAttributesFromArgs, formatHtml} from '../../utils/utils';\n\nexport default {\n    title: 'Components/SearchBar (WIP)',\n    tags: ['autodocs'],\n    argTypes: {\n        identifier: {\n            name: 'identifier',\n            control: 'text',\n            description: 'L\\'id dell\\'elemento',\n            table: {\n                type: { summary: 'string' },\n                defaultValue: { summary: 'search-bar' },\n            },\n        },\n        placeholder: {\n            name: 'placeholder',\n            control: 'text',\n            description: 'Il testo del placeholder',\n            table: {\n                type: { summary: 'string' },\n                defaultValue: { summary: 'Cerca...' },\n            },\n        },\n        searchType: {\n            name: 'searchType',\n            control: 'select',\n            options: ['auto', 'manual'],\n            description: \"Scelta della modalità di ricerca tra quella automatica e quella manuale.\",\n            table: {\n                type: { summary: 'string' },\n                defaultValue: { summary: 'auto' },\n            },\n        },\n        variant: {\n            name: 'variant',\n            control: 'select',\n            options: ['filled', 'linear', 'outline'],\n            if: {\n                arg: 'searchType',\n                eq: 'auto',\n            },\n            description: 'Solo se tipologia \"auto\", Scelta dello stile della barra di ricerca tra filled, linear e outline.',\n            table: {\n                type: { summary: 'string' },\n                defaultValue: { summary: 'linear' },\n            },\n        },\n        debounceTime: {\n            name: 'debounce-time',\n            control: 'number',\n            description: 'Il tempo di attesa per l\\'invio della ricerca in caso di ricerca automatica. In millisecondi.',\n            if: {\n                arg: 'searchType',\n                eq: 'auto',\n            },\n            table: {\n                type: { summary: 'number' },\n                defaultValue: { summary: 500 },\n            },\n        }\n    }\n}\n\nconst Template = (args) => {\n    const attributes = generateAttributesFromArgs(args);\n    return formatHtml(`<jump-search-bar ${attributes}></jump-search-bar>`);\n}\n\nexport const SearchBar = Template.bind({});\nSearchBar.args = {\n    placeholder: 'Cerca...',\n    searchType: 'manual',\n};\n\nexport const SearchBarManual = Template.bind({});\nSearchBarManual.args = {\n    placeholder: 'Cerca...',\n    searchType: 'manual',\n};\n\nexport const SearchBarAutoOutline = Template.bind({});\nSearchBarAutoOutline.args = {\n    placeholder: 'Cerca...',\n    searchType: 'auto',\n    variant: 'outline',\n};\n\nexport const SearchBarAutoFilled = Template.bind({});\nSearchBarAutoFilled.args = {\n    placeholder: 'Cerca...',\n    searchType: 'auto',\n    variant: 'filled',\n};\n\nexport const SearchBarAutoLinear = Template.bind({});\nSearchBarAutoLinear.args = {\n    placeholder: 'Cerca...',\n    searchType: 'auto',\n    variant: 'linear',\n};\n\nconst TemplateWithListenerExample = (args, data) => {\n    let id = data.id;\n    const attributes = generateAttributesFromArgs(args);\n    return formatHtml(`<jump-search-bar ${attributes}></jump-search-bar>\n        <div>Il testo cercato è: <span id=\"page-text\">loading..<span> </div>\n        <script>\n            (function() {\n                let container; \n                    container = document.querySelector('#story--${id}');\n                    container.querySelector('jump-search-bar').addEventListener('jump-search-bar', (ev) => {\n                    container.querySelector('#page-text').innerText = ev.detail.search;\n                });\n            })();\n        </script>`);\n};\n\nexport const SearchBarManualWithListener = TemplateWithListenerExample.bind({});\nSearchBarManualWithListener.args = {\n    placeholder: 'Cerca...',\n    searchType: 'manual',\n};\n\nexport const SearchBarAutoWithListener = TemplateWithListenerExample.bind({});\nSearchBarAutoWithListener.args = {\n    placeholder: 'Cerca...',\n    searchType: 'auto',\n};\n"]}
+{"version":3,"file":"jump-search-bar.stories.js","sourceRoot":"","sources":["../../../src/components/jump-search-bar/jump-search-bar.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { generateAttributesFromArgs, formatHtml} from '../../utils/utils';\n\nexport default {\n    title: 'Components/SearchBar/SearchBar',\n    tags: ['autodocs'],\n    argTypes: {\n        identifier: {\n            name: 'identifier',\n            control: 'text',\n            description: 'Identificatore della searchbar',\n            table: {\n                type: { summary: 'string' },\n                defaultValue: { summary: 'search-bar' },\n            },\n        },\n        placeholder: {\n            name: 'placeholder',\n            control: 'text',\n            description: 'Il testo del placeholder dell\\'input della searchbar.',\n            table: {\n                type: { summary: 'string' },\n                defaultValue: { summary: 'Cerca...' },\n            },\n        },\n        noResultText: {\n            name: 'no-result-text',\n            control: 'text',\n            description: 'Il testo mostrato in caso nessun risultato sia stato recuperato.',\n            table: {\n                type: { summary: 'string' },\n                defaultValue: { summary: 'Nessun risultato corrispondente' },\n            },\n        },\n        loadingText: {\n            name: 'loading-text',\n            control: 'text',\n            description: 'Il testo mostrato durante il caricamento dei risultati.',\n            table: {\n                type: { summary: 'string' },\n                defaultValue: { summary: 'Caricamento...' },\n            },\n        },\n        resultsText: {\n            name: 'results-text',\n            control: 'text',\n            description: 'Il testo mostrato accanto al numero di risultati totali.',\n            table: {\n                type: { summary: 'string' },\n                defaultValue: { summary: 'risultati' },\n            },\n        },\n        showAllResText: {\n            name: 'show-all-res-text',\n            control: 'text',\n            description: 'La label da mostrare per il pulsante che mostra tutti i risultati.',\n            table: {\n                type: { summary: 'string' },\n                defaultValue: { summary: 'Mostra tutti i risultati' },\n            },\n        },\n        variant: {\n            name: 'variant',\n            control: 'select',\n            options: ['filled', 'linear', 'outline'],\n            description: 'Scelta dello stile della barra di ricerca tra filled, linear e outline.',\n            table: {\n                type: { summary: 'string' },\n                defaultValue: { summary: 'outline' },\n            },\n        },\n        withBtn: {\n            name: 'with-btn',\n            control: 'boolean',\n            description: 'Se true, aggiunge un pulsante alla barra di ricerca',\n             if: {\n                arg: 'variant',\n                neq: 'linear',\n            },\n            table: {\n                type: { summary: 'boolean' },\n                defaultValue: { summary: 'false' },\n            },\n        },\n        debounceTime: {\n            name: 'debounce-time',\n            control: 'number',\n            description: 'Il tempo di attesa per l\\'invio della ricerca in caso di ricerca automatica. In millisecondi.',\n            if: {\n                arg: 'searchType',\n                eq: 'auto',\n            },\n            table: {\n                type: { summary: 'number' },\n                defaultValue: { summary: 500 },\n            },\n        },\n        recentsTitle: {\n            name: 'recents-title',\n            control: 'text',\n            description: 'Serve per il titolo del dropwdown quando si vedono le ricerche recenti',\n            if: {\n                arg: 'dropdown',\n                eq: 'true',\n            },\n        },\n        recents: {\n            name: 'recents',\n            control: 'object',\n            description: 'Serve per il dropdown quando si vedono le ricerche recenti',\n            if: {\n                arg: 'dropdown',\n                eq: 'true',\n            },\n        },\n        results: {\n            name: 'results',\n            control: 'object',\n            description: 'Serve per il dropdown quando si vedono i risultati della ricerca',\n            if: {\n                arg: 'dropdown',\n                eq: 'true',\n            },\n        },\n         linearIconOnly: {\n            name: 'linear-icon-only',\n            control: 'boolean',\n            description: 'Se true, la barra di tipo lineare mostrerà solo l\\'icona di ricerca',\n             if: {\n                arg: 'variant',\n                eq: 'linear',\n            },\n            table: {\n                type: { summary: 'boolean' },\n                defaultValue: { summary: 'false' },\n            },\n        },\n         dropdown: {\n            name: 'dropdown',\n            control: 'boolean',\n            description: 'Se true, mostra il dropdown con i risultati della ricerca',\n            table: {\n                type: { summary: 'boolean' },\n                defaultValue: { summary: 'false' },\n            },\n        }, \n        dropdownPosition: {\n            name: 'dropdown-position',\n            control: 'select',\n            options: ['absolute', 'relative'],\n            description: 'La posizione del dropdown rispetto alla searchbar tra asbolute e relative',\n            if: {\n                arg: 'dropdown',\n                eq: true,\n            },\n            table: {\n                type: { summary: 'string' },\n                defaultValue: { summary: 'relative' },\n            },\n        },\n    }\n}\n\nconst Template = (args) => {\n    const attributes = generateAttributesFromArgs(args);\n    return formatHtml(`<jump-search-bar ${attributes}></jump-search-bar>`);\n}\n\nexport const SearchBar = Template.bind({});\nSearchBar.args = {\n    placeholder: 'Cerca...',\n};\n\nexport const SearchBarLinearOnlyIcon = Template.bind({});\nSearchBarLinearOnlyIcon.args = {\n    placeholder: 'Cerca...',\n    variant: 'linear',\n    linearIconOnly: true,\n};\n\nexport const SearchBarOutlineWithBtn = Template.bind({});\nSearchBarOutlineWithBtn.args = {\n    placeholder: 'Cerca...',\n    variant: 'outline',\n    withBtn: true,\n};\n\nexport const SearchBarOutlineWithoutBtn = Template.bind({});\nSearchBarOutlineWithoutBtn.args = {\n    placeholder: 'Cerca...',\n    variant: 'outline',\n    withBtn: false,\n};\n\nconst TemplateWithRecents = (args) => {\n    const attributes = generateAttributesFromArgs(args);\n    return formatHtml(`<jump-search-bar ${attributes}>\n            <jump-search-bar-dropdown-item value=\"Prima\" details-key=\"value\" img=\"https://via.placeholder.com/150\" href=\"https://www.google.com\"></jump-search-bar-dropdown-item>\n            <jump-search-bar-dropdown-item value=\"Seconda\" details-key=\"value\" img=\"https://via.placeholder.com/150\" href=\"https://www.google.com\"></jump-search-bar-dropdown-item>\n            <jump-search-bar-dropdown-item value=\"Terza\" details-key=\"value\" img=\"https://via.placeholder.com/150\" href=\"https://www.google.com\"></jump-search-bar-dropdown-item>\n        </jump-search-bar>`);\n}\n\nexport const SearchBarWithDropdownRecents = TemplateWithRecents.bind({});\nSearchBarWithDropdownRecents.args = {\n    dropdown: true,\n};\n\nconst TemplateWithResults = (args, data) => {\n    let id = data.id;\n    const attributes = generateAttributesFromArgs(args);\n    return formatHtml(`<jump-search-bar ${attributes}>\n          <jump-search-bar-dropdown-item value=\"Prima opzione\" details-key=\"value\" img=\"https://via.placeholder.com/150\" href=\"https://www.google.com\"></jump-search-bar-dropdown-item>\n            <jump-search-bar-dropdown-item value=\"Seconda opzione\" details-key=\"value\" img=\"https://via.placeholder.com/150\" href=\"https://www.google.com\"></jump-search-bar-dropdown-item>\n             <jump-search-bar-dropdown-item value=\"Terza opzione\" details-key=\"value\" img=\"https://via.placeholder.com/150\" href=\"https://www.google.com\"></jump-search-bar-dropdown-item>\n              <jump-search-bar-dropdown-item value=\"Quarta opzione\" details-key=\"value\" img=\"https://via.placeholder.com/150\" href=\"https://www.google.com\"></jump-search-bar-dropdown-item>\n        </jump-search-bar>\n         <div>L'utente ha cercato per le parole: <span id=\"search\">loading..<span></div>\n          <div>L'utente ha selezionato il risultato: <span id=\"result\">loading..<span></div>\n         <script>\n        (function(){\n            let container = document.querySelector('#story--${id}');\n            container.querySelector('jump-search-bar').addEventListener('jump-search-bar', (ev) => {\n                container.querySelector('#search').innerText = ev.detail.search;\n                if(ev.detail.search != ''){\n\n                // Il timeout è inserito a scopo dimostrativo per far vedere il caricamento dei risultati\n                setTimeout(() => {\n                    console.log(\"Delayed for 2 second.\");\n                        container.querySelector('jump-search-bar').setResults([\n                        {\n                            \"value\": \"Primo risultato\",\n                            \"img\": \"https://t4.ftcdn.net/jpg/06/30/49/51/360_F_630495183_8pznBkSto7BmBYyhtVfAKbptBXlNxACy.jpg\",\n                            \"href\": \"https://www.google.com\",\n                            \"details\": {\n                             \"key:\": \"value\",\n                             \"key1:\": \"value1\"\n                            }\n                        },\n                        {\n                            \"value\": \"Seconda risultato\",\n                            \"img\": \"https://as2.ftcdn.net/v2/jpg/03/72/38/41/1000_F_372384189_UFzmQZQKD13dzTWILcDqbsRGDX868F5T.jpg\",\n                            \"href\": \"https://www.google.com\",\n                            \"details\": {\n                             \"key:\": \"value\",\n                             \"key1:\": \"value1\"\n                            }\n                        },\n                        {\n                            \"value\": \"Terza risultato\",\n                            \"img\": \"https://as2.ftcdn.net/v2/jpg/06/14/79/27/1000_F_614792718_QAEYmOvD6BFhfTGD0bFNJfWDcubKNSFv.jpg\",\n                            \"href\": \"https://www.google.com\",\n                            \"details\": {\n                             \"key:\": \"value\",\n                             \"key1:\": \"value1\"\n                            }\n                        },\n                        {\n                            \"value\": \"quarto risultato\",\n                            \"img\": \"https://as2.ftcdn.net/v2/jpg/07/85/54/73/1000_F_785547378_iHd50UIEpMx3dXabLFcglBfGr2unpHDd.jpg\",\n                            \"href\": \"https://www.google.com\",\n                            \"details\": {\n                             \"key:\": \"value\",\n                             \"key1:\": \"value1\"\n                            }\n                        }\n                    ], 23)\n\n                }, \"2000\");\n\n                \n                }\n                });\n                container.querySelector('jump-search-bar').addEventListener('jump-search-bar-res-clicked', (ev) => {\n                    console.log('Cliccato sul risultato', ev.detail.clicked);\n                    container.querySelector('#result').innerText = ev.detail.clicked.value;\n                });\n\n                container.querySelector('jump-search-bar').addEventListener('jump-search-bar-show-all', (ev) => {\n                    console.log('Vai nella pagina di ricerca', ev.detail);\n                });\n        })();\n        </script>`);\n}\n\nexport const SearchBarWithDropdownResults = TemplateWithResults.bind({});\nSearchBarWithDropdownResults.args = {\n    dropdown: true,\n    withBtn: true,\n};\n\nconst TemplateWithResultsDropdownAbsolute = (args, data) => {\n    let id = data.id;\n    const attributes = generateAttributesFromArgs(args);\n    return formatHtml(`<jump-search-bar ${attributes}>\n          <jump-search-bar-dropdown-item value=\"Prima opzione\" details-key=\"value\" img=\"https://via.placeholder.com/150\" href=\"https://www.google.com\"></jump-search-bar-dropdown-item>\n            <jump-search-bar-dropdown-item value=\"Seconda opzione\" details-key=\"value\" img=\"https://via.placeholder.com/150\" href=\"https://www.google.com\"></jump-search-bar-dropdown-item>\n             <jump-search-bar-dropdown-item value=\"Terza opzione\" details-key=\"value\" img=\"https://via.placeholder.com/150\" href=\"https://www.google.com\"></jump-search-bar-dropdown-item>\n              <jump-search-bar-dropdown-item value=\"Quarta opzione\" details-key=\"value\" img=\"https://via.placeholder.com/150\" href=\"https://www.google.com\"></jump-search-bar-dropdown-item>\n        </jump-search-bar>\n         <div>L'utente ha cercato per le parole: <span id=\"search\">loading..<span></div>\n          <div>L'utente ha selezionato il risultato: <span id=\"result\">loading..<span></div>\n         <script>\n        (function(){\n            let container = document.querySelector('#story--${id}');\n            container.querySelector('jump-search-bar').addEventListener('jump-search-bar', (ev) => {\n                container.querySelector('#search').innerText = ev.detail.search;\n                if(ev.detail.search != ''){\n\n                // Il timeout è inserito a scopo dimostrativo per far vedere il caricamento dei risultati\n                setTimeout(() => {\n                    console.log(\"Delayed for 2 second.\");\n                        container.querySelector('jump-search-bar').setResults([\n                        {\n                            \"value\": \"Primo risultato\",\n                            \"img\": \"https://t4.ftcdn.net/jpg/06/30/49/51/360_F_630495183_8pznBkSto7BmBYyhtVfAKbptBXlNxACy.jpg\",\n                            \"href\": \"https://www.google.com\",\n                            \"details\": {\n                             \"key:\": \"value\",\n                             \"key1:\": \"value1\"\n                            }\n                        },\n                        {\n                            \"value\": \"Seconda risultato\",\n                            \"img\": \"https://as2.ftcdn.net/v2/jpg/03/72/38/41/1000_F_372384189_UFzmQZQKD13dzTWILcDqbsRGDX868F5T.jpg\",\n                            \"href\": \"https://www.google.com\",\n                            \"details\": {\n                             \"key:\": \"value\",\n                             \"key1:\": \"value1\"\n                            }\n                        },\n                        {\n                            \"value\": \"Terza risultato\",\n                            \"img\": \"https://as2.ftcdn.net/v2/jpg/06/14/79/27/1000_F_614792718_QAEYmOvD6BFhfTGD0bFNJfWDcubKNSFv.jpg\",\n                            \"href\": \"https://www.google.com\",\n                            \"details\": {\n                             \"key:\": \"value\",\n                             \"key1:\": \"value1\"\n                            }\n                        },\n                        {\n                            \"value\": \"quarto risultato\",\n                            \"img\": \"https://as2.ftcdn.net/v2/jpg/07/85/54/73/1000_F_785547378_iHd50UIEpMx3dXabLFcglBfGr2unpHDd.jpg\",\n                            \"href\": \"https://www.google.com\",\n                            \"details\": {\n                             \"key:\": \"value\",\n                             \"key1:\": \"value1\"\n                            }\n                        }\n                    ], 23)\n\n                }, \"2000\");\n\n                \n                }\n                });\n                container.querySelector('jump-search-bar').addEventListener('jump-search-bar-res-clicked', (ev) => {\n                    console.log('Cliccato sul risultato', ev.detail.clicked);\n                    container.querySelector('#result').innerText = ev.detail.clicked.value;\n                });\n\n                container.querySelector('jump-search-bar').addEventListener('jump-search-bar-show-all', (ev) => {\n                    console.log('Vai nella pagina di ricerca', ev.detail);\n                });\n        })();\n        </script>`);\n}\n\nexport const SearchBarWithDropdownAbsoluteResults = TemplateWithResultsDropdownAbsolute.bind({});\nSearchBarWithDropdownAbsoluteResults.args = {\n    dropdown: true,\n    withBtn: true,\n    dropdownPosition: 'absolute',\n};\n\nconst TemplateWithNoResults = (args, data) => {\n    let id = data.id;\n    const attributes = generateAttributesFromArgs(args);\n    return formatHtml(`<jump-search-bar ${attributes}>\n          <jump-search-bar-dropdown-item value=\"Prima opzione\" details-key=\"value\" img=\"https://via.placeholder.com/150\" href=\"https://www.google.com\"></jump-search-bar-dropdown-item>\n            <jump-search-bar-dropdown-item value=\"Seconda opzione\" details-key=\"value\" img=\"https://via.placeholder.com/150\" href=\"https://www.google.com\"></jump-search-bar-dropdown-item>\n        </jump-search-bar>\n         <div>L'utente ha cercato per le parole: <span id=\"search\">loading..<span></div>\n          <div>L'utente ha selezionato il risultato: <span id=\"result\">loading..<span></div>\n         <script>\n        (function(){\n            let container = document.querySelector('#story--${id}');\n            container.querySelector('jump-search-bar').addEventListener('jump-search-bar', (ev) => {\n                container.querySelector('#search').innerText = ev.detail.search;\n                if(ev.detail.search != ''){\n                    container.querySelector('jump-search-bar').setResults([])\n                }\n                });\n                container.querySelector('jump-search-bar').addEventListener('jump-search-bar-res-clicked', (ev) => {\n                    console.log('Cliccato sul risultato', ev.detail.clicked);\n                    container.querySelector('#result').innerText = ev.detail.clicked.value;\n                });\n        })();\n        </script>`);\n}\n\nexport const SearchBarWithDropdownNoResults = TemplateWithNoResults.bind({});\nSearchBarWithDropdownNoResults.args = {\n    dropdown: true,\n};"]}

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

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

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

@@ -0,0 +1,122 @@
+import { Host, h } from "@stencil/core";
+export class JumpSearchBarDropdownItem {
+    constructor() {
+        this.value = undefined;
+        this.img = undefined;
+        this.href = undefined;
+        this.details = undefined;
+    }
+    componentDidLoad() {
+        // devo recuperare da host tutti gli attributi che hanno davanti "details" e creare un oggetto con chiave e valore
+        if (this.componentRef.hasAttributes()) {
+            const attributes = this.componentRef.attributes;
+            this.details = {};
+            for (let i = 0; i < attributes.length; i++) {
+                if (attributes[i].name.includes('details')) {
+                    // Come nome della chiave vorrei dare solo quello che c'è dopo details- 
+                    this.details[attributes[i].name.split('details-')[1]] = attributes[i].value;
+                }
+            }
+        }
+        this.connectedEvent.emit({
+            value: this.value,
+            details: this.details,
+            img: this.img,
+            href: this.href,
+        });
+    }
+    render() {
+        return (h(Host, { key: '2cd1b4ef033699ffa631a6529da6c167756ca77b', ref: (el) => this.componentRef = el }));
+    }
+    static get is() { return "jump-search-bar-dropdown-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["jump-search-bar-dropdown-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["jump-search-bar-dropdown-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "value",
+                "reflect": false
+            },
+            "img": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "img",
+                "reflect": false
+            },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "href",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "details": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "connectedEvent",
+                "name": "jump-search-bar-dropdown-item-connected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=jump-search-bar-dropdown-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"jump-search-bar-dropdown-item.js","sourceRoot":"","sources":["../../../src/components/jump-search-bar-dropdown-item/jump-search-bar-dropdown-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOvE,MAAM,OAAO,yBAAyB;;;;;;;IAUpC,gBAAgB;QACd,kHAAkH;QAClH,IAAG,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,EAAE,CAAC;YACrC,MAAM,UAAU,GAAG,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC;YAChD,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;YAClB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,UAAU,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;gBAC3C,IAAI,UAAU,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC;oBAE3C,wEAAwE;oBACxE,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;gBAC9E,CAAC;YACH,CAAC;QACH,CAAC;QAED,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC;YACvB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,GAAG,EAAE,IAAI,CAAC,GAAG;YACb,IAAI,EAAE,IAAI,CAAC,IAAI;SAChB,CAAC,CAAC;IACL,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,GAAG,EAAiB,GACjD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, State, Prop, Event, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'jump-search-bar-dropdown-item',\n  styleUrl: 'jump-search-bar-dropdown-item.scss',\n  shadow: true,\n})\nexport class JumpSearchBarDropdownItem {\n  private componentRef: HTMLElement;\n\n  @Prop() value: string;\n  @Prop() img: string;\n  @Prop() href: string;\n  @State() details: object;\n\n  @Event({ eventName: \"jump-search-bar-dropdown-item-connected\" }) connectedEvent;\n\n  componentDidLoad() {\n    // devo recuperare da host tutti gli attributi che hanno davanti \"details\" e creare un oggetto con chiave e valore\n    if(this.componentRef.hasAttributes()) {\n      const attributes = this.componentRef.attributes;\n      this.details = {};\n      for (let i = 0; i < attributes.length; i++) {\n        if (attributes[i].name.includes('details')) {\n\n          // Come nome della chiave vorrei dare solo quello che c'è dopo details- \n          this.details[attributes[i].name.split('details-')[1]] = attributes[i].value;\n        }\n      }\n    }\n\n    this.connectedEvent.emit({\n      value: this.value,\n      details: this.details,\n      img: this.img,\n      href: this.href,\n    });\n  }\n\n  render() {\n    return (\n      <Host ref={(el) => this.componentRef = el as HTMLElement}>\n      </Host>\n    );\n  }\n\n}\n"]}