@jumpgroup/jump-design-system 0.3.77 → 0.3.78

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (24) hide show
  1. package/dist/cjs/jump-design-system.cjs.js +1 -1
  2. package/dist/cjs/jump-search-bar.cjs.entry.js +2 -2
  3. package/dist/cjs/jump-search-bar.cjs.entry.js.map +1 -1
  4. package/dist/cjs/loader.cjs.js +1 -1
  5. package/dist/collection/components/jump-search-bar/jump-search-bar.js +20 -3
  6. package/dist/collection/components/jump-search-bar/jump-search-bar.js.map +1 -1
  7. package/dist/collection/components/jump-search-bar/jump-search-bar.stories.js +9 -0
  8. package/dist/collection/components/jump-search-bar/jump-search-bar.stories.js.map +1 -1
  9. package/dist/components/jump-search-bar.js +3 -3
  10. package/dist/components/jump-search-bar.js.map +1 -1
  11. package/dist/esm/jump-design-system.js +1 -1
  12. package/dist/esm/jump-search-bar.entry.js +2 -2
  13. package/dist/esm/jump-search-bar.entry.js.map +1 -1
  14. package/dist/esm/loader.js +1 -1
  15. package/dist/jump-design-system/jump-design-system.esm.js +1 -1
  16. package/dist/jump-design-system/jump-design-system.esm.js.map +1 -1
  17. package/dist/jump-design-system/p-985e8ea6.entry.js +2 -0
  18. package/dist/jump-design-system/p-985e8ea6.entry.js.map +1 -0
  19. package/dist/jump-design-system-elements.json +4 -0
  20. package/dist/types/components/jump-search-bar/jump-search-bar.stories.d.ts +13 -0
  21. package/dist/types/components.d.ts +2 -0
  22. package/package.json +1 -1
  23. package/dist/jump-design-system/p-5b54b1f4.entry.js +0 -2
  24. package/dist/jump-design-system/p-5b54b1f4.entry.js.map +0 -1
package/dist/collection/components/jump-search-bar/jump-search-bar.stories.js.map CHANGED
@@ -1 +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/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};"]}
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/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 searchValue: {\n name: 'search-value',\n control: 'text',\n description: 'Il valore di ricerca iniziale della searchbar.',\n table: {\n type: { summary: 'string' },\n defaultValue: { summary: '' },\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/components/jump-search-bar.js CHANGED
@@ -143,10 +143,10 @@ const JumpSearchBar$1 = /*@__PURE__*/ proxyCustomElement(class JumpSearchBar ext
143
143
  renderLinearIconOnly() {
144
144
  return (h(Host, { class: "JumpSearchBar ", ref: (el) => (this.componentRef = el) }, h("div", { class: "SearchBar iconOnly " + this.variant + (this.isExpanded ? " expanded" : "") }, h("div", { class: "InputWrapper", onClick: (this.isExpanded && this.dropdown && this.recents.length > 0) ? () => this.openDropdown() : null }, h("jump-icon", { name: "magnifying-glass", category: "light", onClick: () => this.expandSearchBar() }), this.isExpanded &&
145
145
  // Mostra la barra di ricerca con l'animazione di slide
146
- h("input", { 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 }))), (this.dropdown && this.dropdownVisible) && this.renderDropdown()));
146
+ h("input", { placeholder: this.placeholder, type: "search", value: this.searchValue, id: this.identifier, class: "search-input", ref: (el) => { this.jumpSearchBar = el; }, onInput: this.debounce(this.doSearch), onFocus: this.handleFocus, onBlur: this.handleBlur }))), (this.dropdown && this.dropdownVisible) && this.renderDropdown()));
147
147
  }
148
148
  renderDefault() {
149
- return (h(Host, { class: "JumpSearchBar", ref: (el) => (this.componentRef = el) }, h("div", { class: "SearchBar " + this.variant + " " + (this.withBtn ? "withBtn" : "") + (this.isExpanded ? " expanded" : "") }, h("div", { class: "InputWrapper", onClick: (this.dropdown && this.recents.length > 0) ? () => this.openDropdown() : null }, !this.withBtn && h("jump-icon", { name: "magnifying-glass", category: "light" }), h("input", { 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 })), this.withBtn && !this.linearIconOnly && (h("jump-button", { variant: "secondary", size: "medium", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, onClick: () => this.btnOrShowOtherClicked() }, h("jump-icon", { slot: "suffix", name: "magnifying-glass" })))), (this.dropdown && this.dropdownVisible) && this.renderDropdown()));
149
+ return (h(Host, { class: "JumpSearchBar", ref: (el) => (this.componentRef = el) }, h("div", { class: "SearchBar " + this.variant + " " + (this.withBtn ? "withBtn" : "") + (this.isExpanded ? " expanded" : "") }, h("div", { class: "InputWrapper", onClick: (this.dropdown && this.recents.length > 0) ? () => this.openDropdown() : null }, !this.withBtn && h("jump-icon", { name: "magnifying-glass", category: "light" }), h("input", { placeholder: this.placeholder, type: "search", id: this.identifier, class: "search-input", value: this.searchValue, ref: (el) => { this.jumpSearchBar = el; }, onInput: this.debounce(this.doSearch), onFocus: this.handleFocus, onBlur: this.handleBlur })), this.withBtn && !this.linearIconOnly && (h("jump-button", { variant: "secondary", size: "medium", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, onClick: () => this.btnOrShowOtherClicked() }, h("jump-icon", { slot: "suffix", name: "magnifying-glass" })))), (this.dropdown && this.dropdownVisible) && this.renderDropdown()));
150
150
  }
151
151
  renderDropdown() {
152
152
  console.log('POSITION', this.dropdownPosition);
@@ -174,6 +174,7 @@ const JumpSearchBar$1 = /*@__PURE__*/ proxyCustomElement(class JumpSearchBar ext
174
174
  }; }
175
175
  static get style() { return JumpSearchBarStyle0; }
176
176
  }, [1, "jump-search-bar", {
177
+ "searchValue": [1025, "search-value"],
177
178
  "placeholder": [1],
178
179
  "noResultText": [1, "no-result-text"],
179
180
  "loadingText": [1, "loading-text"],
@@ -190,7 +191,6 @@ const JumpSearchBar$1 = /*@__PURE__*/ proxyCustomElement(class JumpSearchBar ext
190
191
  "linearIconOnly": [4, "linear-icon-only"],
191
192
  "dropdownPosition": [1, "dropdown-position"],
192
193
  "dropdownVisible": [32],
193
- "searchValue": [32],
194
194
  "resType": [32],
195
195
  "innerResults": [32],
196
196
  "totalResults": [32],
package/dist/components/jump-search-bar.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"jump-search-bar.js","mappings":"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","names":["JumpSearchBar"],"sources":["src/components/jump-search-bar/jump-search-bar.scss?tag=jump-search-bar&encapsulation=shadow","src/components/jump-search-bar/jump-search-bar.tsx"],"sourcesContent":[":host {\n display: block;\n\n --jump-search-bar-focus-color: var(--secondary-standard, #5E79BA);\n --jump-search-bar-border-color: var(--neutral-grey-secondary, #707070);\n --jump-search-bar-bg-color: var(--gray-ultralight, #F8F8F8);\n --jump-search-bar-dropdown-border-color: var(--neutral-grey-disabled, #CBCBCB);\n\n font-family: var(--ff-primary);\n\n jump-button {\n --jump-button-border-radius: 0px 3px 3px 0px;\n }\n\n .SearchBar {\n position: relative;\n\n &.focused .InputWrapper {\n border-color: var(--jump-search-bar-focus-color) !important;\n \n jump-icon {\n color: var(--jump-search-bar-focus-color) !important;\n }\n \n input {\n outline: none !important;\n }\n }\n }\n\n .SearchBar:not(.iconOnly) {\n display: flex;\n width: 100%;\n \n .InputWrapper {\n width: 100%;\n display: flex;\n }\n \n input {\n width: 100%;\n border: none;\n }\n \n /* Stile outline*/\n &.outline .InputWrapper {\n border: 1px solid var(--jump-search-bar-border-color);\n border-radius: 3px;\n padding: 12px;\n gap: 8px;\n \n jump-icon {\n color: var(--jump-search-bar-border-color);\n }\n }\n \n &.outline.withBtn .InputWrapper {\n border-radius: 3px 0px 0px 3px;\n }\n \n \n /* Stile filled */\n &.filled .InputWrapper {\n border: 1px solid var(--jump-search-bar-bg-color);\n background-color: var(--jump-search-bar-bg-color);\n border-radius: 3px;\n padding: 12px;\n gap: 8px;\n \n input {\n background-color: var(--jump-search-bar-bg-color);\n }\n \n jump-icon {\n color: var(--jump-search-bar-border-color);\n }\n }\n \n &.filled.focused.withBtn .InputWrapper {\n border-radius: 3px 0px 0px 3px !important;\n }\n \n /* Stile linear */\n &.linear .InputWrapper {\n border-bottom: 1px solid var(--jump-search-bar-border-color);\n padding-bottom: 4px;\n \n jump-icon {\n padding-right: 6px;\n }\n }\n }\n \n \n .Dropdown {\n\n &.dropAbsolute {\n position: absolute;\n box-sizing: border-box;\n position: absolute;\n left: 0;\n width: 100%;\n }\n\n &.dropRelative {\n position: relative;\n }\n\n // position: absolute; la tolgo per il test\n margin-top: 10px;\n border-radius: 3px;\n border: 1px solid var(--jump-search-bar-dropdown-border-color);\n padding: 4px 16px;\n background-color: white;\n\n &__Recents {\n .title {\n color: #707070;\n font-size: 14px;\n line-height: 20px;\n padding: 8px 0;\n font-weight: 700;\n display: flex;\n }\n }\n\n &__Results {\n .totalRes {\n display: flex; \n justify-content: space-between;\n }\n }\n \n\n .ResWrapper {\n display: flex;\n flex-direction: column;\n\n div {\n padding: 8px 0;\n color: #707070;\n font-size: 14px;\n display: flex;\n gap: 12px;\n align-items: center;\n\n img {\n width: 40px;\n height: 48px;\n object-fit: cover;\n border-radius: 3px;\n }\n }\n\n div:hover {\n cursor: pointer;\n }\n\n .helperText {\n color: #CBCBCB;\n\n svg {\n width: 25px;\n height: 25px;\n }\n }\n }\n }\n\n/* Applicazione dell'animazione alla SearchBar.iconOnly.linear */\n.SearchBar.iconOnly.linear {\n display: flex;\n width: 100%;\n\n .InputWrapper {\n width: 100%;\n display: flex;\n align-items: center;\n transition: border-bottom 0.3s ease;\n /* Transizione solo per il bordo inferiore */\n border-bottom: 1px solid transparent;\n /* Nessun bordo inizialmente */\n padding-bottom: 4px;\n overflow: hidden;\n /* Per nascondere il contenuto che esce dai limiti dell'InputWrapper */\n\n jump-icon {\n padding-right: 6px;\n /* Padding dell'icona */\n }\n\n input {\n width: 0;\n /* Imposta la larghezza iniziale a 0 */\n border: none;\n transform: translateX(-100%);\n /* Sposta l'input fuori dalla vista */\n transition: width 0.3s ease, transform 0.3s ease;\n /* Transizioni separate per width e transform */\n animation: none;\n /* Disabilita l'animazione predefinita */\n }\n }\n\n &.expanded {\n .InputWrapper {\n border-bottom: 1px solid var(--jump-search-bar-border-color);\n /* Mostra il bordo inferiore quando espanso */\n transition: border-bottom 0.3s ease;\n /* Transizione per il bordo inferiore */\n\n input {\n width: 100%;\n /* Espande l'input a tutta la larghezza disponibile */\n transform: translateX(0);\n /* Riposiziona l'input nella vista */\n animation: slide-right 0.3s ease forwards;\n /* Applicazione dell'animazione slide-right */\n }\n }\n }\n}\n \n}\n\n@keyframes slide-right {\n from {\n transform: translateX(-100%);\n opacity: 0;\n }\n\n to {\n transform: translateX(0);\n opacity: 1;\n }\n}\n\n@keyframes border-slide-right {\n from {\n border-bottom-width: 0;\n }\n\n to {\n border-bottom-width: 1px;\n }\n}","import { Component, Method, Watch, Listen, State, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'jump-search-bar',\n styleUrl: 'jump-search-bar.scss',\n shadow: true,\n})\nexport class JumpSearchBar {\n\n /* ---------------------- @OWN PROPERTIES ------------------------- */\n jumpSearchBar: HTMLInputElement;\n private componentRef: HTMLElement;\n\n /* ---------------------- @STATE ------------------------- */\n @State() dropdownVisible: boolean = false;\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 @State() resType: string = 'recents';\n @State() innerResults: Array<object> = [];\n @State() totalResults: number = 0;\n @State() isExpanded: boolean = false; \n\n /* ---------------------- @PROPERTIES ------------------------- */\n @Prop() placeholder: string = 'Cerca...'; //Il testo del placeholder dell\\'input della searchbar\n @Prop() noResultText: string = 'Nessun risultato corrispondente'; // Il testo da mostrare in caso nessun risultato sia stato recuperato.\n @Prop() loadingText: string = 'Sto caricando...'; // Il testo mostrato durante il caricamento dei risultati.\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 @Prop() identifier: string = 'search-bar'; // Identificatore della searchbar\n @Prop() debounceTime: number = 500; // 'Il tempo di attesa per l\\'invio della ricerca in caso di ricerca automatica. In millisecondi.\n @Prop() variant: string = 'outline'; // Scelta dello stile della barra di ricerca tra filled, linear e outline.\n @Prop() withBtn: boolean = false; // Se true, aggiunge un pulsante alla barra di ricerca\n @Prop() recentsTitle: string = 'Recenti'; // Serve per il titolo del dropwdown quando si vedono le ricerche recenti\n @Prop() recents: Array<object> = []; // Serve per il dropdown quando si vedono le ricerche recenti\n @Prop() results: Array<object> = []; // Serve per il dropdown quando si vedono i risultati della ricerca\n @Prop() dropdown: boolean = false; // Se true, mostra il dropdown con i risultati della ricerca.\n @Prop() linearIconOnly: boolean = false; // Se true, mostra solo l'icona nella barra di ricerca lineare\n @Prop() dropdownPosition: string = 'relative'; // Posizione del dropdown rispetto alla searchbar. \"relative\" o \"absolute\"\n\n\n /* ---------------------- @EVENTS ------------------------- */\n\n /**\n * Evento emesso quando l'utente clicca sull'icona in variant linear e linearIconOnly\n */\n @Event({ eventName: 'jump-search-bar-expanded' }) searchbarExpanded: 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' }) search: EventEmitter;\n @Event({ eventName: 'jump-filterchange' }) searchFilters: EventEmitter; // E' analoga a quella sopra ma serve per i filtri\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-show-all' }) showFullSearch: EventEmitter;\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-res-clicked'}) resultClicked: EventEmitter; \n\n /* ---------------------- @LIFECYCLE ------------------------- */\n componentDidLoad() {\n // Aggiungi l'event listener per il clic al di fuori del componente\n document.addEventListener('click', this.handleOutsideClick.bind(this));\n }\n\n disconnectedCallback() {\n // Rimuovi l'event listener per evitare perdite di memoria\n document.removeEventListener('click', this.handleOutsideClick.bind(this));\n }\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 /* -------------------- @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 handleOutsideClick(event: MouseEvent) {\n // Controlla se il clic è fuori dal componente\n if (this.componentRef && !this.componentRef.contains(event.target as Node)) {\n this.dropdownVisible = false;\n }\n }\n\n // Gestisce l'evento focus sull'input\n handleFocus = () => {\n const searchBarContainer = this.jumpSearchBar.closest('.SearchBar');\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('.SearchBar');\n if (searchBarContainer) {\n searchBarContainer.classList.remove('focused');\n }\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 this.searchFilters.emit({ name: 's', values: this.searchValue });\n \n // Se il dropdown è chiuso, aprilo. Potrebbe essere chiuso perchè non ci sono recenti\n if (!this.dropdownVisible) {\n this.dropdownVisible = true;\n }\n } else if(this.searchValue.length == 0) {\n this.dropdownVisible = false;\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 openDropdown() {\n this.resType = 'recents';\n this.dropdownVisible = true;\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 /** 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 /**\n * Se clicco l'icona espando la searchbar ed emetto un evento dedicato\n */\n expandSearchBar() {\n this.isExpanded = true;\n this.searchbarExpanded.emit();\n }\n\n\n /* --------------------- RENDER ------------------------------- */\n renderLinearIconOnly() {\n return (\n <Host class={\"JumpSearchBar \"} ref={(el) => (this.componentRef = el as HTMLElement)}>\n <div class={\"SearchBar iconOnly \" + this.variant + (this.isExpanded ? \" expanded\" : \"\")}>\n <div class=\"InputWrapper\" onClick={(this.isExpanded && this.dropdown && this.recents.length > 0) ? () => this.openDropdown() : null}>\n <jump-icon\n name=\"magnifying-glass\"\n category=\"light\"\n onClick={() => this.expandSearchBar()}\n ></jump-icon>\n {this.isExpanded &&\n // Mostra la barra di ricerca con l'animazione di slide\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 }\n </div>\n </div>\n {(this.dropdown && this.dropdownVisible) && this.renderDropdown()} \n </Host>\n );\n }\n\n renderDefault() {\n return (\n <Host class={\"JumpSearchBar\"} ref={(el) => (this.componentRef = el as HTMLElement)}>\n <div class={\"SearchBar \" + this.variant + \" \" + (this.withBtn ? \"withBtn\" : \"\") + (this.isExpanded ? \" expanded\" : \"\")}>\n <div class=\"InputWrapper\" onClick={(this.dropdown && this.recents.length > 0) ? () => this.openDropdown() : null}>\n {!this.withBtn && <jump-icon name=\"magnifying-glass\" category=\"light\"></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 </div>\n {this.withBtn && !this.linearIconOnly && (\n <jump-button\n variant=\"secondary\"\n size=\"medium\"\n name=\"scopri\"\n value=\"value\"\n aria-label=\"Scopri di più\"\n id=\"button\"\n onlyIcon\n onClick={() => this.btnOrShowOtherClicked()}\n >\n <jump-icon slot=\"suffix\" name=\"magnifying-glass\"></jump-icon>\n </jump-button>\n )}\n </div>\n {(this.dropdown && this.dropdownVisible) && this.renderDropdown()} \n </Host>\n );\n }\n\n renderDropdown(){\n console.log('POSITION', this.dropdownPosition);\n return <div class={\"Dropdown \" + (this.dropdownPosition == 'absolute' ? 'dropAbsolute' : 'dropRelative' ) }>\n {(this.resType == 'recents') &&\n <div class=\"Dropdown__Recents\">\n <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=\"Dropdown__Results\">\n <div class=\"ResWrapper\">\n {this.innerResults === undefined ?\n <div class=\"helperText\"><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 </div>\n }\n\n render() {\n if (this.variant === 'linear' && this.linearIconOnly) {\n return this.renderLinearIconOnly();\n } else {\n return this.renderDefault();\n }\n }\n}"],"version":3}
1
+ {"file":"jump-search-bar.js","mappings":"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","names":["JumpSearchBar"],"sources":["src/components/jump-search-bar/jump-search-bar.scss?tag=jump-search-bar&encapsulation=shadow","src/components/jump-search-bar/jump-search-bar.tsx"],"sourcesContent":[":host {\n display: block;\n\n --jump-search-bar-focus-color: var(--secondary-standard, #5E79BA);\n --jump-search-bar-border-color: var(--neutral-grey-secondary, #707070);\n --jump-search-bar-bg-color: var(--gray-ultralight, #F8F8F8);\n --jump-search-bar-dropdown-border-color: var(--neutral-grey-disabled, #CBCBCB);\n\n font-family: var(--ff-primary);\n\n jump-button {\n --jump-button-border-radius: 0px 3px 3px 0px;\n }\n\n .SearchBar {\n position: relative;\n\n &.focused .InputWrapper {\n border-color: var(--jump-search-bar-focus-color) !important;\n \n jump-icon {\n color: var(--jump-search-bar-focus-color) !important;\n }\n \n input {\n outline: none !important;\n }\n }\n }\n\n .SearchBar:not(.iconOnly) {\n display: flex;\n width: 100%;\n \n .InputWrapper {\n width: 100%;\n display: flex;\n }\n \n input {\n width: 100%;\n border: none;\n }\n \n /* Stile outline*/\n &.outline .InputWrapper {\n border: 1px solid var(--jump-search-bar-border-color);\n border-radius: 3px;\n padding: 12px;\n gap: 8px;\n \n jump-icon {\n color: var(--jump-search-bar-border-color);\n }\n }\n \n &.outline.withBtn .InputWrapper {\n border-radius: 3px 0px 0px 3px;\n }\n \n \n /* Stile filled */\n &.filled .InputWrapper {\n border: 1px solid var(--jump-search-bar-bg-color);\n background-color: var(--jump-search-bar-bg-color);\n border-radius: 3px;\n padding: 12px;\n gap: 8px;\n \n input {\n background-color: var(--jump-search-bar-bg-color);\n }\n \n jump-icon {\n color: var(--jump-search-bar-border-color);\n }\n }\n \n &.filled.focused.withBtn .InputWrapper {\n border-radius: 3px 0px 0px 3px !important;\n }\n \n /* Stile linear */\n &.linear .InputWrapper {\n border-bottom: 1px solid var(--jump-search-bar-border-color);\n padding-bottom: 4px;\n \n jump-icon {\n padding-right: 6px;\n }\n }\n }\n \n \n .Dropdown {\n\n &.dropAbsolute {\n position: absolute;\n box-sizing: border-box;\n position: absolute;\n left: 0;\n width: 100%;\n }\n\n &.dropRelative {\n position: relative;\n }\n\n // position: absolute; la tolgo per il test\n margin-top: 10px;\n border-radius: 3px;\n border: 1px solid var(--jump-search-bar-dropdown-border-color);\n padding: 4px 16px;\n background-color: white;\n\n &__Recents {\n .title {\n color: #707070;\n font-size: 14px;\n line-height: 20px;\n padding: 8px 0;\n font-weight: 700;\n display: flex;\n }\n }\n\n &__Results {\n .totalRes {\n display: flex; \n justify-content: space-between;\n }\n }\n \n\n .ResWrapper {\n display: flex;\n flex-direction: column;\n\n div {\n padding: 8px 0;\n color: #707070;\n font-size: 14px;\n display: flex;\n gap: 12px;\n align-items: center;\n\n img {\n width: 40px;\n height: 48px;\n object-fit: cover;\n border-radius: 3px;\n }\n }\n\n div:hover {\n cursor: pointer;\n }\n\n .helperText {\n color: #CBCBCB;\n\n svg {\n width: 25px;\n height: 25px;\n }\n }\n }\n }\n\n/* Applicazione dell'animazione alla SearchBar.iconOnly.linear */\n.SearchBar.iconOnly.linear {\n display: flex;\n width: 100%;\n\n .InputWrapper {\n width: 100%;\n display: flex;\n align-items: center;\n transition: border-bottom 0.3s ease;\n /* Transizione solo per il bordo inferiore */\n border-bottom: 1px solid transparent;\n /* Nessun bordo inizialmente */\n padding-bottom: 4px;\n overflow: hidden;\n /* Per nascondere il contenuto che esce dai limiti dell'InputWrapper */\n\n jump-icon {\n padding-right: 6px;\n /* Padding dell'icona */\n }\n\n input {\n width: 0;\n /* Imposta la larghezza iniziale a 0 */\n border: none;\n transform: translateX(-100%);\n /* Sposta l'input fuori dalla vista */\n transition: width 0.3s ease, transform 0.3s ease;\n /* Transizioni separate per width e transform */\n animation: none;\n /* Disabilita l'animazione predefinita */\n }\n }\n\n &.expanded {\n .InputWrapper {\n border-bottom: 1px solid var(--jump-search-bar-border-color);\n /* Mostra il bordo inferiore quando espanso */\n transition: border-bottom 0.3s ease;\n /* Transizione per il bordo inferiore */\n\n input {\n width: 100%;\n /* Espande l'input a tutta la larghezza disponibile */\n transform: translateX(0);\n /* Riposiziona l'input nella vista */\n animation: slide-right 0.3s ease forwards;\n /* Applicazione dell'animazione slide-right */\n }\n }\n }\n}\n \n}\n\n@keyframes slide-right {\n from {\n transform: translateX(-100%);\n opacity: 0;\n }\n\n to {\n transform: translateX(0);\n opacity: 1;\n }\n}\n\n@keyframes border-slide-right {\n from {\n border-bottom-width: 0;\n }\n\n to {\n border-bottom-width: 1px;\n }\n}","import { Component, Method, Watch, Listen, State, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'jump-search-bar',\n styleUrl: 'jump-search-bar.scss',\n shadow: true,\n})\nexport class JumpSearchBar {\n\n /* ---------------------- @OWN PROPERTIES ------------------------- */\n jumpSearchBar: HTMLInputElement;\n private componentRef: HTMLElement;\n\n /* ---------------------- @STATE ------------------------- */\n @State() dropdownVisible: boolean = false;\n @Prop({ mutable: true }) 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 @State() resType: string = 'recents';\n @State() innerResults: Array<object> = [];\n @State() totalResults: number = 0;\n @State() isExpanded: boolean = false; \n\n /* ---------------------- @PROPERTIES ------------------------- */\n @Prop() placeholder: string = 'Cerca...'; //Il testo del placeholder dell\\'input della searchbar\n @Prop() noResultText: string = 'Nessun risultato corrispondente'; // Il testo da mostrare in caso nessun risultato sia stato recuperato.\n @Prop() loadingText: string = 'Sto caricando...'; // Il testo mostrato durante il caricamento dei risultati.\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 @Prop() identifier: string = 'search-bar'; // Identificatore della searchbar\n @Prop() debounceTime: number = 500; // 'Il tempo di attesa per l\\'invio della ricerca in caso di ricerca automatica. In millisecondi.\n @Prop() variant: string = 'outline'; // Scelta dello stile della barra di ricerca tra filled, linear e outline.\n @Prop() withBtn: boolean = false; // Se true, aggiunge un pulsante alla barra di ricerca\n @Prop() recentsTitle: string = 'Recenti'; // Serve per il titolo del dropwdown quando si vedono le ricerche recenti\n @Prop() recents: Array<object> = []; // Serve per il dropdown quando si vedono le ricerche recenti\n @Prop() results: Array<object> = []; // Serve per il dropdown quando si vedono i risultati della ricerca\n @Prop() dropdown: boolean = false; // Se true, mostra il dropdown con i risultati della ricerca.\n @Prop() linearIconOnly: boolean = false; // Se true, mostra solo l'icona nella barra di ricerca lineare\n @Prop() dropdownPosition: string = 'relative'; // Posizione del dropdown rispetto alla searchbar. \"relative\" o \"absolute\"\n\n\n /* ---------------------- @EVENTS ------------------------- */\n\n /**\n * Evento emesso quando l'utente clicca sull'icona in variant linear e linearIconOnly\n */\n @Event({ eventName: 'jump-search-bar-expanded' }) searchbarExpanded: 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' }) search: EventEmitter;\n @Event({ eventName: 'jump-filterchange' }) searchFilters: EventEmitter; // E' analoga a quella sopra ma serve per i filtri\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-show-all' }) showFullSearch: EventEmitter;\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-res-clicked'}) resultClicked: EventEmitter; \n\n /* ---------------------- @LIFECYCLE ------------------------- */\n componentDidLoad() {\n // Aggiungi l'event listener per il clic al di fuori del componente\n document.addEventListener('click', this.handleOutsideClick.bind(this));\n }\n\n disconnectedCallback() {\n // Rimuovi l'event listener per evitare perdite di memoria\n document.removeEventListener('click', this.handleOutsideClick.bind(this));\n }\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 /* -------------------- @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 handleOutsideClick(event: MouseEvent) {\n // Controlla se il clic è fuori dal componente\n if (this.componentRef && !this.componentRef.contains(event.target as Node)) {\n this.dropdownVisible = false;\n }\n }\n\n // Gestisce l'evento focus sull'input\n handleFocus = () => {\n const searchBarContainer = this.jumpSearchBar.closest('.SearchBar');\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('.SearchBar');\n if (searchBarContainer) {\n searchBarContainer.classList.remove('focused');\n }\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 this.searchFilters.emit({ name: 's', values: this.searchValue });\n \n // Se il dropdown è chiuso, aprilo. Potrebbe essere chiuso perchè non ci sono recenti\n if (!this.dropdownVisible) {\n this.dropdownVisible = true;\n }\n } else if(this.searchValue.length == 0) {\n this.dropdownVisible = false;\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 openDropdown() {\n this.resType = 'recents';\n this.dropdownVisible = true;\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 /** 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 /**\n * Se clicco l'icona espando la searchbar ed emetto un evento dedicato\n */\n expandSearchBar() {\n this.isExpanded = true;\n this.searchbarExpanded.emit();\n }\n\n\n /* --------------------- RENDER ------------------------------- */\n renderLinearIconOnly() {\n return (\n <Host class={\"JumpSearchBar \"} ref={(el) => (this.componentRef = el as HTMLElement)}>\n <div class={\"SearchBar iconOnly \" + this.variant + (this.isExpanded ? \" expanded\" : \"\")}>\n <div class=\"InputWrapper\" onClick={(this.isExpanded && this.dropdown && this.recents.length > 0) ? () => this.openDropdown() : null}>\n <jump-icon\n name=\"magnifying-glass\"\n category=\"light\"\n onClick={() => this.expandSearchBar()}\n ></jump-icon>\n {this.isExpanded &&\n // Mostra la barra di ricerca con l'animazione di slide\n <input\n placeholder={this.placeholder}\n type=\"search\"\n value={this.searchValue}\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 }\n </div>\n </div>\n {(this.dropdown && this.dropdownVisible) && this.renderDropdown()} \n </Host>\n );\n }\n\n renderDefault() {\n return (\n <Host class={\"JumpSearchBar\"} ref={(el) => (this.componentRef = el as HTMLElement)}>\n <div class={\"SearchBar \" + this.variant + \" \" + (this.withBtn ? \"withBtn\" : \"\") + (this.isExpanded ? \" expanded\" : \"\")}>\n <div class=\"InputWrapper\" onClick={(this.dropdown && this.recents.length > 0) ? () => this.openDropdown() : null}>\n {!this.withBtn && <jump-icon name=\"magnifying-glass\" category=\"light\"></jump-icon>}\n <input\n placeholder={this.placeholder}\n type=\"search\"\n id={this.identifier}\n class=\"search-input\"\n value={this.searchValue}\n ref={(el) => { this.jumpSearchBar = el as HTMLInputElement }}\n onInput={this.debounce(this.doSearch)}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n />\n </div>\n {this.withBtn && !this.linearIconOnly && (\n <jump-button\n variant=\"secondary\"\n size=\"medium\"\n name=\"scopri\"\n value=\"value\"\n aria-label=\"Scopri di più\"\n id=\"button\"\n onlyIcon\n onClick={() => this.btnOrShowOtherClicked()}\n >\n <jump-icon slot=\"suffix\" name=\"magnifying-glass\"></jump-icon>\n </jump-button>\n )}\n </div>\n {(this.dropdown && this.dropdownVisible) && this.renderDropdown()} \n </Host>\n );\n }\n\n renderDropdown(){\n console.log('POSITION', this.dropdownPosition);\n return <div class={\"Dropdown \" + (this.dropdownPosition == 'absolute' ? 'dropAbsolute' : 'dropRelative' ) }>\n {(this.resType == 'recents') &&\n <div class=\"Dropdown__Recents\">\n <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=\"Dropdown__Results\">\n <div class=\"ResWrapper\">\n {this.innerResults === undefined ?\n <div class=\"helperText\"><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 </div>\n }\n\n render() {\n if (this.variant === 'linear' && this.linearIconOnly) {\n return this.renderLinearIconOnly();\n } else {\n return this.renderDefault();\n }\n }\n}"],"version":3}
package/dist/esm/jump-design-system.js CHANGED
@@ -16,7 +16,7 @@ var patchBrowser = () => {
16
16
 
17
17
  patchBrowser().then(async (options) => {
18
18
  await globalScripts();
19
- return bootstrapLazy([["jump-card-ecommerce",[[1,"jump-card-ecommerce",{"onlyIconButton":[4,"only-icon-button"],"hasBackground":[4,"has-background"],"badge":[1],"favorite":[1540],"hasFavorite":[4,"has-favorite"],"hasSlotForFavorite":[4,"has-slot-for-favorite"],"hasSlotAddToCart":[4,"has-slot-add-to-cart"],"link":[1],"img":[1],"imgAlt":[1,"img-alt"],"hoverImg":[1,"hover-img"],"hoverImgAlt":[1,"hover-img-alt"],"videoSrc":[1,"video-src"],"notificationUrl":[1,"notification-url"],"notificationText":[1,"notification-text"],"productName":[1,"product-name"],"subtitle":[1],"productId":[1,"product-id"],"price":[2],"salePrice":[2,"sale-price"],"currency":[1],"addToCartColor":[1,"add-to-cart-color"],"badgeColor":[1,"badge-color"],"outOfStock":[1540,"out-of-stock"],"outOfStockText":[1,"out-of-stock-text"],"addToCartText":[1,"add-to-cart-text"],"waitingListText":[1,"waiting-list-text"],"addToWaitingList":[4,"add-to-waiting-list"],"isMini":[4,"is-mini"],"addedToCart":[4,"added-to-cart"],"endAddedToCart":[4,"end-added-to-cart"],"variations":[32],"selectedVariation":[32],"priceFormatted":[32],"salePriceFormatted":[32],"setPrice":[64]},[[0,"jump-card-ecommerce-option-connected","addOption"]]]]],["jump-filter",[[1,"jump-filter",{"direction":[1],"filterHeading":[1,"filter-heading"],"filterButtonLabel":[1,"filter-button-label"],"filterButtonIcon":[1,"filter-button-icon"],"mobileThreshold":[2,"mobile-threshold"],"filters":[8],"showCount":[4,"show-count"],"offCanvasOverlay":[4,"off-canvas-overlay"],"activeFilters":[32],"showMobileFilters":[32],"isMobile":[32],"offCanvasClasses":[32],"getFilters":[64]},[[0,"jump-filterchange","filterChangeHandler"],[9,"resize","handleResize"]],{"showMobileFilters":["watchHandler"]}]]],["jump-filtergroup",[[1,"jump-filtergroup",{"name":[1],"heading":[1],"otherLabel":[1,"other-label"],"lessLabel":[1,"less-label"],"maxElements":[2,"max-elements"],"variant":[1],"label":[32],"values":[32],"value":[32],"slotItems":[32],"inputs":[32],"showMore":[32],"getValues":[64],"getActiveAmount":[64],"getInputs":[64],"getName":[64]},null,{"showMore":["watchShowMore"]}]]],["jump-navbar",[[1,"jump-navbar",{"logo":[16],"navItems":[16],"secondaryNavItems":[16],"mobileThreshold":[2,"mobile-threshold"],"type":[1],"navPosition":[1,"nav-position"],"megaMenuAlignment":[1,"mega-menu-alignment"],"sticky":[4],"stickyThreshold":[2,"sticky-threshold"],"mobileLogo":[16],"user":[16],"isMobile":[32]},[[9,"resize","handleResize"]]]]],["jump-pagination",[[1,"jump-pagination",{"pagLabel":[1,"pag-label"],"last":[2],"showFirstAndLast":[4,"show-first-and-last"],"current":[32]},null,{"current":["watchcurrent"]}]]],["jump-pagination-table",[[0,"jump-pagination-table",{"elementsRanges":[1,"elements-ranges"],"elPerPage":[2,"el-per-page"],"pagLabel":[513,"pag-label"],"labelElementsPerPage":[513,"label-elements-per-page"],"total":[514],"first":[514],"last":[514],"showFirstAndLast":[516,"show-first-and-last"],"elementsRangesArray":[32]},null,{"elementsRanges":["elementsRangesChanged"],"elPerPage":["elPerPageChanged"]}]]],["jump-quantity",[[65,"jump-quantity",{"min":[2],"max":[2],"step":[2],"label":[1],"type":[1],"variant":[1],"showButtons":[4,"show-buttons"],"value":[2],"internalValue":[32],"getValue":[64],"setMax":[64],"reset":[64]},null,{"value":["onValueChange"]}]]],["jump-search-bar",[[1,"jump-search-bar",{"placeholder":[1],"noResultText":[1,"no-result-text"],"loadingText":[1,"loading-text"],"resultsText":[1,"results-text"],"showAllResText":[1,"show-all-res-text"],"identifier":[1],"debounceTime":[2,"debounce-time"],"variant":[1],"withBtn":[4,"with-btn"],"recentsTitle":[1,"recents-title"],"recents":[16],"results":[16],"dropdown":[4],"linearIconOnly":[4,"linear-icon-only"],"dropdownPosition":[1,"dropdown-position"],"dropdownVisible":[32],"searchValue":[32],"resType":[32],"innerResults":[32],"totalResults":[32],"isExpanded":[32],"setResults":[64]},[[0,"jump-search-bar-dropdown-item-connected","addOption"]],{"searchValue":["searchValueChanged"]}]]],["jump-search-bar-mobile",[[1,"jump-search-bar-mobile",{"identifier":[1],"placeholder":[1],"recents":[16],"recentsTitle":[1,"recents-title"],"debounceTime":[2,"debounce-time"],"loadingText":[1,"loading-text"],"noResultText":[1,"no-result-text"],"results":[16],"resultsText":[1,"results-text"],"showAllResText":[1,"show-all-res-text"],"isOpen":[32],"innerResults":[32],"totalResults":[32],"resType":[32],"searchValue":[32],"setResults":[64]},[[0,"jump-search-bar-dropdown-item-connected","addOption"]],{"searchValue":["searchValueChanged"]}]]],["jump-accordion",[[1,"jump-accordion",{"variant":[1],"summary":[1],"disabled":[4],"open":[516],"icon":[1],"identifier":[1]},[[0,"sl-show","handleShow"]]]]],["jump-side-cart-example",[[1,"jump-side-cart-example",{"isCartOpen":[32],"position":[32],"cartItems":[32]}]]],["jump-tab-item",[[1,"jump-tab-item",{"identifier":[1],"iconName":[1,"icon-name"],"iconPosition":[1,"icon-position"],"label":[1],"active":[4],"disabled":[4],"variant":[32]}]]],["jump-accordion-group",[[1,"jump-accordion-group",{"variant":[1],"groupIdentifier":[1,"group-identifier"]}]]],["jump-card",[[4,"jump-card",{"horizontal":[4],"dark":[4],"shadow":[4],"border":[4],"borderRadius":[4,"border-radius"],"topBorderContentRadius":[4,"top-border-content-radius"],"boxed":[4],"roundedMedia":[4,"rounded-media"],"imgSrc":[1,"img-src"],"imgAlt":[1,"img-alt"],"videoSrc":[1,"video-src"]}]]],["jump-card-ecommerce-option",[[1,"jump-card-ecommerce-option",{"code":[1],"imgUrl":[1,"img-url"],"label":[1],"sku":[1],"taxonomy":[1]}]]],["jump-filter-checkbox",[[1,"jump-filter-checkbox",{"value":[1],"label":[1],"checked":[516],"count":[8],"isChecked":[64]}]]],["jump-filter-range",[[1,"jump-filter-range",{"name":[1],"labelMinBefore":[1,"label-min-before"],"labelMinAfter":[1,"label-min-after"],"labelMaxBefore":[1,"label-max-before"],"labelMaxAfter":[1,"label-max-after"],"min":[2],"max":[2],"step":[2],"value":[1040],"disabled":[516],"minVal":[32],"maxVal":[32],"setValue":[64],"getValues":[64],"getName":[64]},null,{"value":["valueWatcher"]}]]],["jump-filter-select",[[1,"jump-filter-select",{"value":[1537],"placeholder":[1],"label":[1],"name":[1],"options":[1],"disabled":[516],"multiple":[4],"required":[4],"loading":[4],"open":[32],"hasSlottedOptions":[32],"values":[32],"getSelectedValue":[64],"getSelectedOption":[64],"getValues":[64],"getName":[64],"setValue":[64]}]]],["jump-filter-switch",[[1,"jump-filter-switch",{"value":[1],"label":[1],"name":[1],"checked":[1540],"disabled":[516],"values":[32],"setValue":[64],"isChecked":[64],"getValues":[64],"getName":[64]},null,{"checked":["checkedChanged"]}]]],["jump-search-bar-dropdown-item",[[1,"jump-search-bar-dropdown-item",{"value":[1],"img":[1],"href":[1],"details":[32]}]]],["jump-tab",[[1,"jump-tab",{"disabled":[4],"alignment":[1],"fullBorder":[4,"full-border"],"tabGroupName":[1,"tab-group-name"],"variant":[1]},[[0,"jump-change-active-tab","changeActiveTabHandler"]]]]],["jump-tab-panel",[[1,"jump-tab-panel",{"identifier":[1],"active":[4]}]]],["jump-side-cart",[[1,"jump-side-cart",{"isOpen":[4,"is-open"],"position":[1],"items":[16],"discountThreshold":[16],"freeShippingThreshold":[2,"free-shipping-threshold"],"progressPercentage":[2,"progress-percentage"],"checkoutLabel":[1,"checkout-label"],"viewCartLabel":[1,"view-cart-label"],"shippingInfo":[1,"shipping-info"],"cartItems":[32]}]]],["jump-badge",[[1,"jump-badge",{"label":[1],"variant":[513],"dimension":[513],"soft":[516],"outline":[516]}]]],["jump-button_2",[[1,"jump-button",{"disabled":[4],"variant":[1],"outline":[4],"size":[1],"full":[4],"pill":[4],"text":[4],"onlyIcon":[4,"only-icon"],"href":[1],"target":[1],"type":[1],"name":[1],"value":[1],"ariaLabel":[1,"aria-label"],"class":[1],"buttonId":[1,"button-id"]}],[1,"jump-icon",{"class":[1],"library":[1],"name":[1],"category":[1],"size":[1],"label":[1],"src":[1]}]]]], options);
19
+ return bootstrapLazy([["jump-card-ecommerce",[[1,"jump-card-ecommerce",{"onlyIconButton":[4,"only-icon-button"],"hasBackground":[4,"has-background"],"badge":[1],"favorite":[1540],"hasFavorite":[4,"has-favorite"],"hasSlotForFavorite":[4,"has-slot-for-favorite"],"hasSlotAddToCart":[4,"has-slot-add-to-cart"],"link":[1],"img":[1],"imgAlt":[1,"img-alt"],"hoverImg":[1,"hover-img"],"hoverImgAlt":[1,"hover-img-alt"],"videoSrc":[1,"video-src"],"notificationUrl":[1,"notification-url"],"notificationText":[1,"notification-text"],"productName":[1,"product-name"],"subtitle":[1],"productId":[1,"product-id"],"price":[2],"salePrice":[2,"sale-price"],"currency":[1],"addToCartColor":[1,"add-to-cart-color"],"badgeColor":[1,"badge-color"],"outOfStock":[1540,"out-of-stock"],"outOfStockText":[1,"out-of-stock-text"],"addToCartText":[1,"add-to-cart-text"],"waitingListText":[1,"waiting-list-text"],"addToWaitingList":[4,"add-to-waiting-list"],"isMini":[4,"is-mini"],"addedToCart":[4,"added-to-cart"],"endAddedToCart":[4,"end-added-to-cart"],"variations":[32],"selectedVariation":[32],"priceFormatted":[32],"salePriceFormatted":[32],"setPrice":[64]},[[0,"jump-card-ecommerce-option-connected","addOption"]]]]],["jump-filter",[[1,"jump-filter",{"direction":[1],"filterHeading":[1,"filter-heading"],"filterButtonLabel":[1,"filter-button-label"],"filterButtonIcon":[1,"filter-button-icon"],"mobileThreshold":[2,"mobile-threshold"],"filters":[8],"showCount":[4,"show-count"],"offCanvasOverlay":[4,"off-canvas-overlay"],"activeFilters":[32],"showMobileFilters":[32],"isMobile":[32],"offCanvasClasses":[32],"getFilters":[64]},[[0,"jump-filterchange","filterChangeHandler"],[9,"resize","handleResize"]],{"showMobileFilters":["watchHandler"]}]]],["jump-filtergroup",[[1,"jump-filtergroup",{"name":[1],"heading":[1],"otherLabel":[1,"other-label"],"lessLabel":[1,"less-label"],"maxElements":[2,"max-elements"],"variant":[1],"label":[32],"values":[32],"value":[32],"slotItems":[32],"inputs":[32],"showMore":[32],"getValues":[64],"getActiveAmount":[64],"getInputs":[64],"getName":[64]},null,{"showMore":["watchShowMore"]}]]],["jump-navbar",[[1,"jump-navbar",{"logo":[16],"navItems":[16],"secondaryNavItems":[16],"mobileThreshold":[2,"mobile-threshold"],"type":[1],"navPosition":[1,"nav-position"],"megaMenuAlignment":[1,"mega-menu-alignment"],"sticky":[4],"stickyThreshold":[2,"sticky-threshold"],"mobileLogo":[16],"user":[16],"isMobile":[32]},[[9,"resize","handleResize"]]]]],["jump-pagination",[[1,"jump-pagination",{"pagLabel":[1,"pag-label"],"last":[2],"showFirstAndLast":[4,"show-first-and-last"],"current":[32]},null,{"current":["watchcurrent"]}]]],["jump-pagination-table",[[0,"jump-pagination-table",{"elementsRanges":[1,"elements-ranges"],"elPerPage":[2,"el-per-page"],"pagLabel":[513,"pag-label"],"labelElementsPerPage":[513,"label-elements-per-page"],"total":[514],"first":[514],"last":[514],"showFirstAndLast":[516,"show-first-and-last"],"elementsRangesArray":[32]},null,{"elementsRanges":["elementsRangesChanged"],"elPerPage":["elPerPageChanged"]}]]],["jump-quantity",[[65,"jump-quantity",{"min":[2],"max":[2],"step":[2],"label":[1],"type":[1],"variant":[1],"showButtons":[4,"show-buttons"],"value":[2],"internalValue":[32],"getValue":[64],"setMax":[64],"reset":[64]},null,{"value":["onValueChange"]}]]],["jump-search-bar",[[1,"jump-search-bar",{"searchValue":[1025,"search-value"],"placeholder":[1],"noResultText":[1,"no-result-text"],"loadingText":[1,"loading-text"],"resultsText":[1,"results-text"],"showAllResText":[1,"show-all-res-text"],"identifier":[1],"debounceTime":[2,"debounce-time"],"variant":[1],"withBtn":[4,"with-btn"],"recentsTitle":[1,"recents-title"],"recents":[16],"results":[16],"dropdown":[4],"linearIconOnly":[4,"linear-icon-only"],"dropdownPosition":[1,"dropdown-position"],"dropdownVisible":[32],"resType":[32],"innerResults":[32],"totalResults":[32],"isExpanded":[32],"setResults":[64]},[[0,"jump-search-bar-dropdown-item-connected","addOption"]],{"searchValue":["searchValueChanged"]}]]],["jump-search-bar-mobile",[[1,"jump-search-bar-mobile",{"identifier":[1],"placeholder":[1],"recents":[16],"recentsTitle":[1,"recents-title"],"debounceTime":[2,"debounce-time"],"loadingText":[1,"loading-text"],"noResultText":[1,"no-result-text"],"results":[16],"resultsText":[1,"results-text"],"showAllResText":[1,"show-all-res-text"],"isOpen":[32],"innerResults":[32],"totalResults":[32],"resType":[32],"searchValue":[32],"setResults":[64]},[[0,"jump-search-bar-dropdown-item-connected","addOption"]],{"searchValue":["searchValueChanged"]}]]],["jump-accordion",[[1,"jump-accordion",{"variant":[1],"summary":[1],"disabled":[4],"open":[516],"icon":[1],"identifier":[1]},[[0,"sl-show","handleShow"]]]]],["jump-side-cart-example",[[1,"jump-side-cart-example",{"isCartOpen":[32],"position":[32],"cartItems":[32]}]]],["jump-tab-item",[[1,"jump-tab-item",{"identifier":[1],"iconName":[1,"icon-name"],"iconPosition":[1,"icon-position"],"label":[1],"active":[4],"disabled":[4],"variant":[32]}]]],["jump-accordion-group",[[1,"jump-accordion-group",{"variant":[1],"groupIdentifier":[1,"group-identifier"]}]]],["jump-card",[[4,"jump-card",{"horizontal":[4],"dark":[4],"shadow":[4],"border":[4],"borderRadius":[4,"border-radius"],"topBorderContentRadius":[4,"top-border-content-radius"],"boxed":[4],"roundedMedia":[4,"rounded-media"],"imgSrc":[1,"img-src"],"imgAlt":[1,"img-alt"],"videoSrc":[1,"video-src"]}]]],["jump-card-ecommerce-option",[[1,"jump-card-ecommerce-option",{"code":[1],"imgUrl":[1,"img-url"],"label":[1],"sku":[1],"taxonomy":[1]}]]],["jump-filter-checkbox",[[1,"jump-filter-checkbox",{"value":[1],"label":[1],"checked":[516],"count":[8],"isChecked":[64]}]]],["jump-filter-range",[[1,"jump-filter-range",{"name":[1],"labelMinBefore":[1,"label-min-before"],"labelMinAfter":[1,"label-min-after"],"labelMaxBefore":[1,"label-max-before"],"labelMaxAfter":[1,"label-max-after"],"min":[2],"max":[2],"step":[2],"value":[1040],"disabled":[516],"minVal":[32],"maxVal":[32],"setValue":[64],"getValues":[64],"getName":[64]},null,{"value":["valueWatcher"]}]]],["jump-filter-select",[[1,"jump-filter-select",{"value":[1537],"placeholder":[1],"label":[1],"name":[1],"options":[1],"disabled":[516],"multiple":[4],"required":[4],"loading":[4],"open":[32],"hasSlottedOptions":[32],"values":[32],"getSelectedValue":[64],"getSelectedOption":[64],"getValues":[64],"getName":[64],"setValue":[64]}]]],["jump-filter-switch",[[1,"jump-filter-switch",{"value":[1],"label":[1],"name":[1],"checked":[1540],"disabled":[516],"values":[32],"setValue":[64],"isChecked":[64],"getValues":[64],"getName":[64]},null,{"checked":["checkedChanged"]}]]],["jump-search-bar-dropdown-item",[[1,"jump-search-bar-dropdown-item",{"value":[1],"img":[1],"href":[1],"details":[32]}]]],["jump-tab",[[1,"jump-tab",{"disabled":[4],"alignment":[1],"fullBorder":[4,"full-border"],"tabGroupName":[1,"tab-group-name"],"variant":[1]},[[0,"jump-change-active-tab","changeActiveTabHandler"]]]]],["jump-tab-panel",[[1,"jump-tab-panel",{"identifier":[1],"active":[4]}]]],["jump-side-cart",[[1,"jump-side-cart",{"isOpen":[4,"is-open"],"position":[1],"items":[16],"discountThreshold":[16],"freeShippingThreshold":[2,"free-shipping-threshold"],"progressPercentage":[2,"progress-percentage"],"checkoutLabel":[1,"checkout-label"],"viewCartLabel":[1,"view-cart-label"],"shippingInfo":[1,"shipping-info"],"cartItems":[32]}]]],["jump-badge",[[1,"jump-badge",{"label":[1],"variant":[513],"dimension":[513],"soft":[516],"outline":[516]}]]],["jump-button_2",[[1,"jump-button",{"disabled":[4],"variant":[1],"outline":[4],"size":[1],"full":[4],"pill":[4],"text":[4],"onlyIcon":[4,"only-icon"],"href":[1],"target":[1],"type":[1],"name":[1],"value":[1],"ariaLabel":[1,"aria-label"],"class":[1],"buttonId":[1,"button-id"]}],[1,"jump-icon",{"class":[1],"library":[1],"name":[1],"category":[1],"size":[1],"label":[1],"src":[1]}]]]], options);
20
20
  });
21
21
 
22
22
  //# sourceMappingURL=jump-design-system.js.map
package/dist/esm/jump-search-bar.entry.js CHANGED
@@ -139,10 +139,10 @@ const JumpSearchBar = class {
139
139
  renderLinearIconOnly() {
140
140
  return (h(Host, { class: "JumpSearchBar ", ref: (el) => (this.componentRef = el) }, h("div", { class: "SearchBar iconOnly " + this.variant + (this.isExpanded ? " expanded" : "") }, h("div", { class: "InputWrapper", onClick: (this.isExpanded && this.dropdown && this.recents.length > 0) ? () => this.openDropdown() : null }, h("jump-icon", { name: "magnifying-glass", category: "light", onClick: () => this.expandSearchBar() }), this.isExpanded &&
141
141
  // Mostra la barra di ricerca con l'animazione di slide
142
- h("input", { 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 }))), (this.dropdown && this.dropdownVisible) && this.renderDropdown()));
142
+ h("input", { placeholder: this.placeholder, type: "search", value: this.searchValue, id: this.identifier, class: "search-input", ref: (el) => { this.jumpSearchBar = el; }, onInput: this.debounce(this.doSearch), onFocus: this.handleFocus, onBlur: this.handleBlur }))), (this.dropdown && this.dropdownVisible) && this.renderDropdown()));
143
143
  }
144
144
  renderDefault() {
145
- return (h(Host, { class: "JumpSearchBar", ref: (el) => (this.componentRef = el) }, h("div", { class: "SearchBar " + this.variant + " " + (this.withBtn ? "withBtn" : "") + (this.isExpanded ? " expanded" : "") }, h("div", { class: "InputWrapper", onClick: (this.dropdown && this.recents.length > 0) ? () => this.openDropdown() : null }, !this.withBtn && h("jump-icon", { name: "magnifying-glass", category: "light" }), h("input", { 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 })), this.withBtn && !this.linearIconOnly && (h("jump-button", { variant: "secondary", size: "medium", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, onClick: () => this.btnOrShowOtherClicked() }, h("jump-icon", { slot: "suffix", name: "magnifying-glass" })))), (this.dropdown && this.dropdownVisible) && this.renderDropdown()));
145
+ return (h(Host, { class: "JumpSearchBar", ref: (el) => (this.componentRef = el) }, h("div", { class: "SearchBar " + this.variant + " " + (this.withBtn ? "withBtn" : "") + (this.isExpanded ? " expanded" : "") }, h("div", { class: "InputWrapper", onClick: (this.dropdown && this.recents.length > 0) ? () => this.openDropdown() : null }, !this.withBtn && h("jump-icon", { name: "magnifying-glass", category: "light" }), h("input", { placeholder: this.placeholder, type: "search", id: this.identifier, class: "search-input", value: this.searchValue, ref: (el) => { this.jumpSearchBar = el; }, onInput: this.debounce(this.doSearch), onFocus: this.handleFocus, onBlur: this.handleBlur })), this.withBtn && !this.linearIconOnly && (h("jump-button", { variant: "secondary", size: "medium", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, onClick: () => this.btnOrShowOtherClicked() }, h("jump-icon", { slot: "suffix", name: "magnifying-glass" })))), (this.dropdown && this.dropdownVisible) && this.renderDropdown()));
146
146
  }
147
147
  renderDropdown() {
148
148
  console.log('POSITION', this.dropdownPosition);