@jumpgroup/jump-design-system 0.3.52 → 0.3.53
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.
- package/dist/cjs/{index-97b3526b.js → index-e91b2b41.js} +26 -4
- package/dist/cjs/index-e91b2b41.js.map +1 -0
- package/dist/cjs/jump-accordion-group.cjs.entry.js +1 -1
- package/dist/cjs/jump-accordion.cjs.entry.js +1 -1
- package/dist/cjs/jump-badge.cjs.entry.js +1 -1
- package/dist/cjs/jump-button_2.cjs.entry.js +1 -1
- package/dist/cjs/jump-card-ecommerce-option.cjs.entry.js +1 -1
- package/dist/cjs/jump-card-ecommerce.cjs.entry.js +1 -1
- package/dist/cjs/jump-card.cjs.entry.js +1 -1
- package/dist/cjs/jump-design-system.cjs.js +2 -2
- package/dist/cjs/jump-filter-checkbox.cjs.entry.js +1 -1
- package/dist/cjs/jump-filter.cjs.entry.js +1 -1
- package/dist/cjs/jump-filtergroup.cjs.entry.js +1 -1
- package/dist/cjs/jump-navbar.cjs.entry.js +1 -1
- package/dist/cjs/jump-pagination-table.cjs.entry.js +1 -1
- package/dist/cjs/jump-pagination.cjs.entry.js +1 -1
- package/dist/cjs/jump-quantity.cjs.entry.js +1 -1
- package/dist/cjs/jump-search-bar-dropdown-item.cjs.entry.js +46 -0
- package/dist/cjs/jump-search-bar-dropdown-item.cjs.entry.js.map +1 -0
- package/dist/cjs/jump-search-bar-mobile.cjs.entry.js +130 -0
- package/dist/cjs/jump-search-bar-mobile.cjs.entry.js.map +1 -0
- package/dist/cjs/jump-search-bar.cjs.entry.js +139 -21
- package/dist/cjs/jump-search-bar.cjs.entry.js.map +1 -1
- package/dist/cjs/jump-tab-item.cjs.entry.js +4 -4
- package/dist/cjs/jump-tab-item.cjs.entry.js.map +1 -1
- package/dist/cjs/jump-tab-panel.cjs.entry.js +2 -2
- package/dist/cjs/jump-tab.cjs.entry.js +2 -2
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/collection/collection-manifest.json +2 -0
- package/dist/collection/components/jump-search-bar/jump-search-bar.css +173 -47
- package/dist/collection/components/jump-search-bar/jump-search-bar.js +424 -27
- package/dist/collection/components/jump-search-bar/jump-search-bar.js.map +1 -1
- package/dist/collection/components/jump-search-bar/jump-search-bar.stories.js +320 -49
- package/dist/collection/components/jump-search-bar/jump-search-bar.stories.js.map +1 -1
- package/dist/collection/components/jump-search-bar-dropdown-item/jump-search-bar-dropdown-item.css +3 -0
- package/dist/collection/components/jump-search-bar-dropdown-item/jump-search-bar-dropdown-item.js +122 -0
- package/dist/collection/components/jump-search-bar-dropdown-item/jump-search-bar-dropdown-item.js.map +1 -0
- package/dist/collection/components/jump-search-bar-dropdown-item/jump-search-bar-dropdown-item.stories.js +13 -0
- package/dist/collection/components/jump-search-bar-dropdown-item/jump-search-bar-dropdown-item.stories.js.map +1 -0
- package/dist/collection/components/jump-search-bar-dropdown-item/test/jump-search-bar-dropdown-item.e2e.js +10 -0
- package/dist/collection/components/jump-search-bar-dropdown-item/test/jump-search-bar-dropdown-item.e2e.js.map +1 -0
- package/dist/collection/components/jump-search-bar-dropdown-item/test/jump-search-bar-dropdown-item.spec.js +18 -0
- package/dist/collection/components/jump-search-bar-dropdown-item/test/jump-search-bar-dropdown-item.spec.js.map +1 -0
- package/dist/collection/components/jump-search-bar-mobile/jump-search-bar-mobile.css +91 -0
- package/dist/collection/components/jump-search-bar-mobile/jump-search-bar-mobile.js +414 -0
- package/dist/collection/components/jump-search-bar-mobile/jump-search-bar-mobile.js.map +1 -0
- package/dist/collection/components/jump-search-bar-mobile/jump-search-bar-mobile.stories.js +192 -0
- package/dist/collection/components/jump-search-bar-mobile/jump-search-bar-mobile.stories.js.map +1 -0
- package/dist/collection/components/jump-search-bar-mobile/test/jump-search-bar-mobile.e2e.js +10 -0
- package/dist/collection/components/jump-search-bar-mobile/test/jump-search-bar-mobile.e2e.js.map +1 -0
- package/dist/collection/components/jump-search-bar-mobile/test/jump-search-bar-mobile.spec.js +18 -0
- package/dist/collection/components/jump-search-bar-mobile/test/jump-search-bar-mobile.spec.js.map +1 -0
- package/dist/collection/components/jump-tab/jump-tab.js +1 -1
- package/dist/collection/components/jump-tab-item/jump-tab-item.css +11 -6
- package/dist/collection/components/jump-tab-item/jump-tab-item.js +2 -2
- package/dist/collection/components/jump-tab-panel/jump-tab-panel.js +1 -1
- package/dist/components/jump-search-bar-dropdown-item.d.ts +11 -0
- package/dist/components/jump-search-bar-dropdown-item.js +65 -0
- package/dist/components/jump-search-bar-dropdown-item.js.map +1 -0
- package/dist/components/jump-search-bar-mobile.d.ts +11 -0
- package/dist/components/jump-search-bar-mobile.js +175 -0
- package/dist/components/jump-search-bar-mobile.js.map +1 -0
- package/dist/components/jump-search-bar.js +159 -22
- package/dist/components/jump-search-bar.js.map +1 -1
- package/dist/components/jump-tab-item.js +3 -3
- package/dist/components/jump-tab-item.js.map +1 -1
- package/dist/components/jump-tab-panel.js +1 -1
- package/dist/components/jump-tab.js +1 -1
- package/dist/esm/{index-14b73bd6.js → index-9a1da0f0.js} +26 -4
- package/dist/esm/index-9a1da0f0.js.map +1 -0
- package/dist/esm/jump-accordion-group.entry.js +1 -1
- package/dist/esm/jump-accordion.entry.js +1 -1
- package/dist/esm/jump-badge.entry.js +1 -1
- package/dist/esm/jump-button_2.entry.js +1 -1
- package/dist/esm/jump-card-ecommerce-option.entry.js +1 -1
- package/dist/esm/jump-card-ecommerce.entry.js +1 -1
- package/dist/esm/jump-card.entry.js +1 -1
- package/dist/esm/jump-design-system.js +3 -3
- package/dist/esm/jump-filter-checkbox.entry.js +1 -1
- package/dist/esm/jump-filter.entry.js +1 -1
- package/dist/esm/jump-filtergroup.entry.js +1 -1
- package/dist/esm/jump-navbar.entry.js +1 -1
- package/dist/esm/jump-pagination-table.entry.js +1 -1
- package/dist/esm/jump-pagination.entry.js +1 -1
- package/dist/esm/jump-quantity.entry.js +1 -1
- package/dist/esm/jump-search-bar-dropdown-item.entry.js +42 -0
- package/dist/esm/jump-search-bar-dropdown-item.entry.js.map +1 -0
- package/dist/esm/jump-search-bar-mobile.entry.js +126 -0
- package/dist/esm/jump-search-bar-mobile.entry.js.map +1 -0
- package/dist/esm/jump-search-bar.entry.js +139 -21
- package/dist/esm/jump-search-bar.entry.js.map +1 -1
- package/dist/esm/jump-tab-item.entry.js +4 -4
- package/dist/esm/jump-tab-item.entry.js.map +1 -1
- package/dist/esm/jump-tab-panel.entry.js +2 -2
- package/dist/esm/jump-tab.entry.js +2 -2
- package/dist/esm/loader.js +3 -3
- package/dist/jump-design-system/jump-design-system.esm.js +1 -1
- package/dist/jump-design-system/jump-design-system.esm.js.map +1 -1
- package/dist/jump-design-system/{p-18df1585.entry.js → p-02e863db.entry.js} +2 -2
- package/dist/jump-design-system/p-07633158.entry.js +2 -0
- package/dist/jump-design-system/p-07633158.entry.js.map +1 -0
- package/dist/jump-design-system/p-1aa5fb8a.entry.js +2 -0
- package/dist/jump-design-system/p-1aa5fb8a.entry.js.map +1 -0
- package/dist/jump-design-system/{p-6e26f3ef.entry.js → p-1da9811d.entry.js} +2 -2
- package/dist/jump-design-system/p-21aa0095.js +3 -0
- package/dist/jump-design-system/p-21aa0095.js.map +1 -0
- package/dist/jump-design-system/p-2e2bd8a9.entry.js +2 -0
- package/dist/jump-design-system/{p-6f1c7238.entry.js → p-3f6d50d5.entry.js} +2 -2
- package/dist/jump-design-system/{p-8bdb9702.entry.js → p-466e0ade.entry.js} +2 -2
- package/dist/jump-design-system/{p-396d2541.entry.js → p-506950ea.entry.js} +2 -2
- package/dist/jump-design-system/{p-4b284def.entry.js → p-6acb16c6.entry.js} +3 -3
- package/dist/jump-design-system/{p-7b6c9e01.entry.js → p-6b1ab8c3.entry.js} +2 -2
- package/dist/jump-design-system/{p-53129684.entry.js → p-6dc529fc.entry.js} +2 -2
- package/dist/jump-design-system/{p-30c9d7c7.entry.js → p-6e7c80a3.entry.js} +2 -2
- package/dist/jump-design-system/p-8f581228.entry.js +2 -0
- package/dist/jump-design-system/{p-8873623c.entry.js → p-a1c25113.entry.js} +2 -2
- package/dist/jump-design-system/{p-1c882126.entry.js → p-a826c477.entry.js} +2 -2
- package/dist/jump-design-system/{p-e0e82d36.entry.js → p-b03c5b24.entry.js} +2 -2
- package/dist/jump-design-system/{p-174d297f.entry.js → p-bdafe87d.entry.js} +2 -2
- package/dist/jump-design-system/p-c77d216c.entry.js +2 -0
- package/dist/jump-design-system/p-c77d216c.entry.js.map +1 -0
- package/dist/jump-design-system/p-f7c323d2.entry.js +2 -0
- package/dist/jump-design-system/p-f7c323d2.entry.js.map +1 -0
- package/dist/jump-design-system/{p-f371718a.entry.js → p-feb825e0.entry.js} +2 -2
- package/dist/jump-design-system-elements.json +97 -3
- package/dist/types/components/jump-search-bar/jump-search-bar.d.ts +51 -11
- package/dist/types/components/jump-search-bar/jump-search-bar.stories.d.ts +137 -10
- package/dist/types/components/jump-search-bar-dropdown-item/jump-search-bar-dropdown-item.d.ts +10 -0
- package/dist/types/components/jump-search-bar-dropdown-item/jump-search-bar-dropdown-item.stories.d.ts +7 -0
- package/dist/types/components/jump-search-bar-mobile/jump-search-bar-mobile.d.ts +46 -0
- package/dist/types/components/jump-search-bar-mobile/jump-search-bar-mobile.stories.d.ts +131 -0
- package/dist/types/components.d.ts +135 -10
- package/package.json +1 -1
- package/dist/cjs/index-97b3526b.js.map +0 -1
- package/dist/esm/index-14b73bd6.js.map +0 -1
- package/dist/jump-design-system/p-134e548b.entry.js +0 -2
- package/dist/jump-design-system/p-134e548b.entry.js.map +0 -1
- package/dist/jump-design-system/p-1c5db8d3.js +0 -3
- package/dist/jump-design-system/p-1c5db8d3.js.map +0 -1
- package/dist/jump-design-system/p-3dd1f9a0.entry.js +0 -2
- package/dist/jump-design-system/p-5f12bbbb.entry.js +0 -2
- package/dist/jump-design-system/p-6363b6ee.entry.js +0 -2
- package/dist/jump-design-system/p-6363b6ee.entry.js.map +0 -1
- /package/dist/jump-design-system/{p-18df1585.entry.js.map → p-02e863db.entry.js.map} +0 -0
- /package/dist/jump-design-system/{p-6e26f3ef.entry.js.map → p-1da9811d.entry.js.map} +0 -0
- /package/dist/jump-design-system/{p-3dd1f9a0.entry.js.map → p-2e2bd8a9.entry.js.map} +0 -0
- /package/dist/jump-design-system/{p-6f1c7238.entry.js.map → p-3f6d50d5.entry.js.map} +0 -0
- /package/dist/jump-design-system/{p-8bdb9702.entry.js.map → p-466e0ade.entry.js.map} +0 -0
- /package/dist/jump-design-system/{p-396d2541.entry.js.map → p-506950ea.entry.js.map} +0 -0
- /package/dist/jump-design-system/{p-4b284def.entry.js.map → p-6acb16c6.entry.js.map} +0 -0
- /package/dist/jump-design-system/{p-7b6c9e01.entry.js.map → p-6b1ab8c3.entry.js.map} +0 -0
- /package/dist/jump-design-system/{p-53129684.entry.js.map → p-6dc529fc.entry.js.map} +0 -0
- /package/dist/jump-design-system/{p-30c9d7c7.entry.js.map → p-6e7c80a3.entry.js.map} +0 -0
- /package/dist/jump-design-system/{p-5f12bbbb.entry.js.map → p-8f581228.entry.js.map} +0 -0
- /package/dist/jump-design-system/{p-8873623c.entry.js.map → p-a1c25113.entry.js.map} +0 -0
- /package/dist/jump-design-system/{p-1c882126.entry.js.map → p-a826c477.entry.js.map} +0 -0
- /package/dist/jump-design-system/{p-e0e82d36.entry.js.map → p-b03c5b24.entry.js.map} +0 -0
- /package/dist/jump-design-system/{p-174d297f.entry.js.map → p-bdafe87d.entry.js.map} +0 -0
- /package/dist/jump-design-system/{p-f371718a.entry.js.map → p-feb825e0.entry.js.map} +0 -0
|
@@ -0,0 +1,192 @@
|
|
|
1
|
+
import { generateAttributesFromArgs, formatHtml } from "../../utils/utils";
|
|
2
|
+
export default {
|
|
3
|
+
title: 'Components/SearchBar/SearchBarMobile',
|
|
4
|
+
tags: ['autodocs'],
|
|
5
|
+
argTypes: {
|
|
6
|
+
identifier: {
|
|
7
|
+
name: 'identifier',
|
|
8
|
+
control: 'text',
|
|
9
|
+
description: 'Identificatore della searchbar',
|
|
10
|
+
table: {
|
|
11
|
+
type: { summary: 'string' },
|
|
12
|
+
defaultValue: { summary: 'search-bar' },
|
|
13
|
+
},
|
|
14
|
+
},
|
|
15
|
+
placeholder: {
|
|
16
|
+
name: 'placeholder',
|
|
17
|
+
control: 'text',
|
|
18
|
+
description: 'Il testo del placeholder dell\'input della searchbar.',
|
|
19
|
+
table: {
|
|
20
|
+
type: { summary: 'string' },
|
|
21
|
+
defaultValue: { summary: 'Cerca...' },
|
|
22
|
+
},
|
|
23
|
+
},
|
|
24
|
+
recents: {
|
|
25
|
+
name: 'recents',
|
|
26
|
+
control: 'object',
|
|
27
|
+
description: 'Serve per il dropdown quando si vedono le ricerche recenti',
|
|
28
|
+
if: {
|
|
29
|
+
arg: 'dropdown',
|
|
30
|
+
eq: 'true',
|
|
31
|
+
},
|
|
32
|
+
},
|
|
33
|
+
recentsTitle: {
|
|
34
|
+
name: 'recents-title',
|
|
35
|
+
control: 'text',
|
|
36
|
+
description: 'Serve per il titolo del dropwdown quando si vedono le ricerche recenti',
|
|
37
|
+
if: {
|
|
38
|
+
arg: 'dropdown',
|
|
39
|
+
eq: 'true',
|
|
40
|
+
},
|
|
41
|
+
},
|
|
42
|
+
debounceTime: {
|
|
43
|
+
name: 'debounce-time',
|
|
44
|
+
control: 'number',
|
|
45
|
+
description: 'Il tempo di attesa per l\'invio della ricerca in caso di ricerca automatica. In millisecondi.',
|
|
46
|
+
if: {
|
|
47
|
+
arg: 'searchType',
|
|
48
|
+
eq: 'auto',
|
|
49
|
+
},
|
|
50
|
+
table: {
|
|
51
|
+
type: { summary: 'number' },
|
|
52
|
+
defaultValue: { summary: 500 },
|
|
53
|
+
},
|
|
54
|
+
},
|
|
55
|
+
loadingText: {
|
|
56
|
+
name: 'loading-text',
|
|
57
|
+
control: 'text',
|
|
58
|
+
description: 'Il testo mostrato durante il caricamento dei risultati.',
|
|
59
|
+
table: {
|
|
60
|
+
type: { summary: 'string' },
|
|
61
|
+
defaultValue: { summary: 'Caricamento...' },
|
|
62
|
+
},
|
|
63
|
+
},
|
|
64
|
+
noResultText: {
|
|
65
|
+
name: 'no-result-text',
|
|
66
|
+
control: 'text',
|
|
67
|
+
description: 'Il testo mostrato in caso nessun risultato sia stato recuperato.',
|
|
68
|
+
table: {
|
|
69
|
+
type: { summary: 'string' },
|
|
70
|
+
defaultValue: { summary: 'Nessun risultato corrispondente' },
|
|
71
|
+
},
|
|
72
|
+
},
|
|
73
|
+
resultsText: {
|
|
74
|
+
name: 'results-text',
|
|
75
|
+
control: 'text',
|
|
76
|
+
description: 'Il testo mostrato accanto al numero di risultati totali.',
|
|
77
|
+
table: {
|
|
78
|
+
type: { summary: 'string' },
|
|
79
|
+
defaultValue: { summary: 'risultati' },
|
|
80
|
+
},
|
|
81
|
+
},
|
|
82
|
+
results: {
|
|
83
|
+
name: 'results',
|
|
84
|
+
control: 'object',
|
|
85
|
+
description: 'Serve per il dropdown quando si vedono i risultati della ricerca',
|
|
86
|
+
if: {
|
|
87
|
+
arg: 'dropdown',
|
|
88
|
+
eq: 'true',
|
|
89
|
+
},
|
|
90
|
+
},
|
|
91
|
+
showAllResText: {
|
|
92
|
+
name: 'show-all-res-text',
|
|
93
|
+
control: 'text',
|
|
94
|
+
description: 'La label da mostrare per il pulsante che mostra tutti i risultati.',
|
|
95
|
+
table: {
|
|
96
|
+
type: { summary: 'string' },
|
|
97
|
+
defaultValue: { summary: 'Mostra tutti i risultati' },
|
|
98
|
+
},
|
|
99
|
+
},
|
|
100
|
+
}
|
|
101
|
+
};
|
|
102
|
+
const Template = (args) => {
|
|
103
|
+
const attributes = generateAttributesFromArgs(args);
|
|
104
|
+
return formatHtml(`<jump-search-bar-mobile ${attributes}></jump-search-bar-mobile>`);
|
|
105
|
+
};
|
|
106
|
+
export const SearchBar = Template.bind({});
|
|
107
|
+
SearchBar.args = {
|
|
108
|
+
identifier: 'search-bar-mobile',
|
|
109
|
+
};
|
|
110
|
+
const TemplateWithDropdownPopulated = (args, data) => {
|
|
111
|
+
let id = data.id;
|
|
112
|
+
console.log('id', id);
|
|
113
|
+
console.log('query', document.querySelector('#story--' + id));
|
|
114
|
+
const attributes = generateAttributesFromArgs(args);
|
|
115
|
+
return formatHtml(`<jump-search-bar-mobile ${attributes}>
|
|
116
|
+
<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>
|
|
117
|
+
<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>
|
|
118
|
+
<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>
|
|
119
|
+
<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>
|
|
120
|
+
</jump-search-bar-mobile>
|
|
121
|
+
<div>L'utente ha cercato per le parole: <span id="search">loading..<span></div>
|
|
122
|
+
<div>L'utente ha selezionato il risultato: <span id="result">loading..<span></div>
|
|
123
|
+
<script>
|
|
124
|
+
(function(){
|
|
125
|
+
let container = document.querySelector('#story--${id}');
|
|
126
|
+
container.querySelector('jump-search-bar-mobile').addEventListener('jump-search-bar-mobile', (ev) => {
|
|
127
|
+
container.querySelector('#search').innerText = ev.detail.search;
|
|
128
|
+
if(ev.detail.search != ''){
|
|
129
|
+
|
|
130
|
+
// Il timeout è inserito a scopo dimostrativo per far vedere il caricamento dei risultati
|
|
131
|
+
setTimeout(() => {
|
|
132
|
+
console.log("Delayed for 2 second.");
|
|
133
|
+
container.querySelector('jump-search-bar-mobile').setResults([
|
|
134
|
+
{
|
|
135
|
+
"value": "Primo risultato",
|
|
136
|
+
"img": "https://t4.ftcdn.net/jpg/06/30/49/51/360_F_630495183_8pznBkSto7BmBYyhtVfAKbptBXlNxACy.jpg",
|
|
137
|
+
"href": "https://www.google.com",
|
|
138
|
+
"details": {
|
|
139
|
+
"key:": "value",
|
|
140
|
+
"key1:": "value1"
|
|
141
|
+
}
|
|
142
|
+
},
|
|
143
|
+
{
|
|
144
|
+
"value": "Seconda risultato",
|
|
145
|
+
"img": "https://as2.ftcdn.net/v2/jpg/03/72/38/41/1000_F_372384189_UFzmQZQKD13dzTWILcDqbsRGDX868F5T.jpg",
|
|
146
|
+
"href": "https://www.google.com",
|
|
147
|
+
"details": {
|
|
148
|
+
"key:": "value",
|
|
149
|
+
"key1:": "value1"
|
|
150
|
+
}
|
|
151
|
+
},
|
|
152
|
+
{
|
|
153
|
+
"value": "Terza risultato",
|
|
154
|
+
"img": "https://as2.ftcdn.net/v2/jpg/06/14/79/27/1000_F_614792718_QAEYmOvD6BFhfTGD0bFNJfWDcubKNSFv.jpg",
|
|
155
|
+
"href": "https://www.google.com",
|
|
156
|
+
"details": {
|
|
157
|
+
"key:": "value",
|
|
158
|
+
"key1:": "value1"
|
|
159
|
+
}
|
|
160
|
+
},
|
|
161
|
+
{
|
|
162
|
+
"value": "quarto risultato",
|
|
163
|
+
"img": "https://as2.ftcdn.net/v2/jpg/07/85/54/73/1000_F_785547378_iHd50UIEpMx3dXabLFcglBfGr2unpHDd.jpg",
|
|
164
|
+
"href": "https://www.google.com",
|
|
165
|
+
"details": {
|
|
166
|
+
"key:": "value",
|
|
167
|
+
"key1:": "value1"
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
], 23)
|
|
171
|
+
|
|
172
|
+
}, "2000");
|
|
173
|
+
|
|
174
|
+
|
|
175
|
+
}
|
|
176
|
+
});
|
|
177
|
+
container.querySelector('jump-search-bar-mobile').addEventListener('jump-search-bar-mobile-res-clicked', (ev) => {
|
|
178
|
+
console.log('jump-search-bar-mobile-res-clicked | cliccato sul risultato', ev.detail.clicked);
|
|
179
|
+
container.querySelector('#result').innerText = ev.detail.clicked.value;
|
|
180
|
+
});
|
|
181
|
+
|
|
182
|
+
container.querySelector('jump-search-bar-mobile').addEventListener('jump-search-bar-mobile-show-all', (ev) => {
|
|
183
|
+
console.log('jump-search-bar-mobile-show-all | vai nella pagina di ricerca', ev.detail);
|
|
184
|
+
});
|
|
185
|
+
})();
|
|
186
|
+
</script>`);
|
|
187
|
+
};
|
|
188
|
+
export const SearchBarWithDropdown = TemplateWithDropdownPopulated.bind({});
|
|
189
|
+
SearchBarWithDropdown.args = {
|
|
190
|
+
identifier: 'search-bar-mobile',
|
|
191
|
+
};
|
|
192
|
+
//# sourceMappingURL=jump-search-bar-mobile.stories.js.map
|
package/dist/collection/components/jump-search-bar-mobile/jump-search-bar-mobile.stories.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"jump-search-bar-mobile.stories.js","sourceRoot":"","sources":["../../../src/components/jump-search-bar-mobile/jump-search-bar-mobile.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { generateAttributesFromArgs, formatHtml} from '../../utils/utils';\n\nexport default {\n title: 'Components/SearchBar/SearchBarMobile',\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 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 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 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 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 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 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 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 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 }\n}\n\nconst Template = (args) => {\n const attributes = generateAttributesFromArgs(args);\n return formatHtml(`<jump-search-bar-mobile ${attributes}></jump-search-bar-mobile>`);\n}\n\nexport const SearchBar = Template.bind({});\nSearchBar.args = {\n identifier: 'search-bar-mobile',\n};\n\nconst TemplateWithDropdownPopulated = (args, data) => {\n let id = data.id;\n console.log('id', id);\n console.log('query',document.querySelector('#story--'+id));\n const attributes = generateAttributesFromArgs(args);\n return formatHtml(`<jump-search-bar-mobile ${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-mobile>\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-mobile').addEventListener('jump-search-bar-mobile', (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-mobile').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-mobile').addEventListener('jump-search-bar-mobile-res-clicked', (ev) => {\n console.log('jump-search-bar-mobile-res-clicked | cliccato sul risultato', ev.detail.clicked);\n container.querySelector('#result').innerText = ev.detail.clicked.value;\n });\n\n container.querySelector('jump-search-bar-mobile').addEventListener('jump-search-bar-mobile-show-all', (ev) => {\n console.log('jump-search-bar-mobile-show-all | vai nella pagina di ricerca', ev.detail);\n });\n })();\n </script>`);\n}\n\nexport const SearchBarWithDropdown = TemplateWithDropdownPopulated.bind({});\nSearchBarWithDropdown.args = {\n identifier: 'search-bar-mobile',\n};\n"]}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { newE2EPage } from "@stencil/core/testing";
|
|
2
|
+
describe('jump-search-bar-mobile', () => {
|
|
3
|
+
it('renders', async () => {
|
|
4
|
+
const page = await newE2EPage();
|
|
5
|
+
await page.setContent('<jump-search-bar-mobile></jump-search-bar-mobile>');
|
|
6
|
+
const element = await page.find('jump-search-bar-mobile');
|
|
7
|
+
expect(element).toHaveClass('hydrated');
|
|
8
|
+
});
|
|
9
|
+
});
|
|
10
|
+
//# sourceMappingURL=jump-search-bar-mobile.e2e.js.map
|
package/dist/collection/components/jump-search-bar-mobile/test/jump-search-bar-mobile.e2e.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"jump-search-bar-mobile.e2e.js","sourceRoot":"","sources":["../../../../src/components/jump-search-bar-mobile/test/jump-search-bar-mobile.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,wBAAwB,EAAE,GAAG,EAAE;IACtC,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;QAChC,MAAM,IAAI,CAAC,UAAU,CAAC,mDAAmD,CAAC,CAAC;QAE3E,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,wBAAwB,CAAC,CAAC;QAC1D,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAC1C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\n\ndescribe('jump-search-bar-mobile', () => {\n it('renders', async () => {\n const page = await newE2EPage();\n await page.setContent('<jump-search-bar-mobile></jump-search-bar-mobile>');\n\n const element = await page.find('jump-search-bar-mobile');\n expect(element).toHaveClass('hydrated');\n });\n});\n"]}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { newSpecPage } from "@stencil/core/testing";
|
|
2
|
+
import { JumpSearchBarMobile } from "../jump-search-bar-mobile";
|
|
3
|
+
describe('jump-search-bar-mobile', () => {
|
|
4
|
+
it('renders', async () => {
|
|
5
|
+
const page = await newSpecPage({
|
|
6
|
+
components: [JumpSearchBarMobile],
|
|
7
|
+
html: `<jump-search-bar-mobile></jump-search-bar-mobile>`,
|
|
8
|
+
});
|
|
9
|
+
expect(page.root).toEqualHtml(`
|
|
10
|
+
<jump-search-bar-mobile>
|
|
11
|
+
<mock:shadow-root>
|
|
12
|
+
<slot></slot>
|
|
13
|
+
</mock:shadow-root>
|
|
14
|
+
</jump-search-bar-mobile>
|
|
15
|
+
`);
|
|
16
|
+
});
|
|
17
|
+
});
|
|
18
|
+
//# sourceMappingURL=jump-search-bar-mobile.spec.js.map
|
package/dist/collection/components/jump-search-bar-mobile/test/jump-search-bar-mobile.spec.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"jump-search-bar-mobile.spec.js","sourceRoot":"","sources":["../../../../src/components/jump-search-bar-mobile/test/jump-search-bar-mobile.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAEhE,QAAQ,CAAC,wBAAwB,EAAE,GAAG,EAAE;IACtC,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,mBAAmB,CAAC;YACjC,IAAI,EAAE,mDAAmD;SAC1D,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;KAM7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { JumpSearchBarMobile } from '../jump-search-bar-mobile';\n\ndescribe('jump-search-bar-mobile', () => {\n it('renders', async () => {\n const page = await newSpecPage({\n components: [JumpSearchBarMobile],\n html: `<jump-search-bar-mobile></jump-search-bar-mobile>`,\n });\n expect(page.root).toEqualHtml(`\n <jump-search-bar-mobile>\n <mock:shadow-root>\n <slot></slot>\n </mock:shadow-root>\n </jump-search-bar-mobile>\n `);\n });\n});\n"]}
|
|
@@ -66,7 +66,7 @@ export class JumpTab {
|
|
|
66
66
|
}
|
|
67
67
|
}
|
|
68
68
|
render() {
|
|
69
|
-
return (h(Host, { key: '
|
|
69
|
+
return (h(Host, { key: '497e52126ca025e5bd75ec2d611eb7e31288e165', class: "JumpTab " + this.variant, id: this.tabGroupName, ref: (el) => { this.JumpTabEl = el; } }, h("div", { key: 'f466e49311a54ec21317237335cbbdf5518766fb', class: "Wrapper " + (this.fullBorder ? 'fullBorder' : '') }, h("div", { key: '9ea2361990221d411600a19858c61ea70bc4701f', class: "ContentWrapper ContentWrapper--Items", style: { '--alignment': this.getAlignment(this.alignment) } }, h("div", { key: '9190d13fc70bec3709e3b7603836806349172e8d', class: "Content " + this.variant + " " + (this.disabled ? 'disabled' : '') + " " + (this.fullBorder ? 'fullBorder' : ''), style: { '--alignment': this.getAlignment(this.alignment) } }, h("slot", { key: '52c0f5898b72fc938a0bf082ba43bd88d2ff30c6', name: "tab-item" }))), h("div", { key: '27ea1ebf944e2ccf856b1b7704e16493171ef6c9', class: "ContentWrapper ContentWrapper--Panel" }, h("slot", { key: '6f96926996d8efb7e11e6c78d60d18dd142ee38a', name: "tab-content" })))));
|
|
70
70
|
}
|
|
71
71
|
getAlignment(alignment) {
|
|
72
72
|
switch (alignment) {
|
|
@@ -6,6 +6,11 @@
|
|
|
6
6
|
--jump-tabitem-boxed-bg-color: var(--secondary-soft, #EDF2FA);
|
|
7
7
|
--jump-tabitem-rounded-bg-color: white;
|
|
8
8
|
--jump-tabitem-border-inline-color: var(--neutral-grey-disabled, #CBCBCB);
|
|
9
|
+
--jump-tabitem-font-size: 16px;
|
|
10
|
+
--jump-tabitem-inline-padding: 12px 24px;
|
|
11
|
+
--jump-tabitem-boxed-padding: 15px 39px;
|
|
12
|
+
--jump-tabitem-rounded-padding: 12px 32px;
|
|
13
|
+
--jump-tabitem-sheet-padding: 12px 32px;
|
|
9
14
|
font-family: var(--ff-primary);
|
|
10
15
|
flex: 0 0 auto;
|
|
11
16
|
}
|
|
@@ -19,8 +24,8 @@
|
|
|
19
24
|
:host .Content:hover:not(.disabled) {
|
|
20
25
|
cursor: pointer;
|
|
21
26
|
}
|
|
22
|
-
:host .Content label {
|
|
23
|
-
font-size:
|
|
27
|
+
:host .Content .label {
|
|
28
|
+
font-size: var(--jump-tabitem-font-size);
|
|
24
29
|
}
|
|
25
30
|
:host .Content.left {
|
|
26
31
|
flex-direction: row;
|
|
@@ -34,7 +39,7 @@
|
|
|
34
39
|
}
|
|
35
40
|
:host .Content.inline {
|
|
36
41
|
color: var(--jump-tabitem-color);
|
|
37
|
-
padding:
|
|
42
|
+
padding: var(--jump-tabitem-inline-padding);
|
|
38
43
|
border-bottom: 1px solid var(--jump-tabitem-border-inline-color);
|
|
39
44
|
}
|
|
40
45
|
:host .Content.inline:not(.active) {
|
|
@@ -54,7 +59,7 @@
|
|
|
54
59
|
}
|
|
55
60
|
:host .Content.boxed {
|
|
56
61
|
color: var(--jump-tabitem-color);
|
|
57
|
-
padding:
|
|
62
|
+
padding: var(--jump-tabitem-boxed-padding);
|
|
58
63
|
background-color: transparent;
|
|
59
64
|
border: 1px solid var(--jump-tabitem-boxed-bg-color);
|
|
60
65
|
}
|
|
@@ -73,7 +78,7 @@
|
|
|
73
78
|
font-weight: bold;
|
|
74
79
|
}
|
|
75
80
|
:host .Content.rounded {
|
|
76
|
-
padding:
|
|
81
|
+
padding: var(--jump-tabitem-rounded-padding);
|
|
77
82
|
color: var(--jump-tabitem-color);
|
|
78
83
|
}
|
|
79
84
|
:host .Content.rounded:hover:not(.disabled) {
|
|
@@ -89,7 +94,7 @@
|
|
|
89
94
|
border-radius: 50px;
|
|
90
95
|
}
|
|
91
96
|
:host .Content.sheet {
|
|
92
|
-
padding:
|
|
97
|
+
padding: var(--jump-tabitem-sheet-padding);
|
|
93
98
|
color: var(--neutral-grey-secondary);
|
|
94
99
|
}
|
|
95
100
|
:host .Content.sheet:hover:not(.disabled) {
|
|
@@ -18,8 +18,8 @@ export class JumpTabItem {
|
|
|
18
18
|
this.variant = parentVariant;
|
|
19
19
|
}
|
|
20
20
|
render() {
|
|
21
|
-
return (h(Host, { key: '
|
|
22
|
-
h("jump-icon", { key: '
|
|
21
|
+
return (h(Host, { key: '0a4383e01bea0539424876f8b0d8d04d4482c957', ref: (el) => { this.tabEl = el; }, class: "JumpTabItem " + (this.active ? 'active' : '') + " " + (this.variant) + " " + (this.disabled ? 'disabled' : '') }, h("div", { key: 'cee073351151f5468e4b72d4af2deacc7e080d22', class: "Content " + (this.iconName ? this.iconPosition : '') + " " + (this.variant) + " " + (this.active ? 'active' : '') + " " + (this.disabled ? 'disabled' : ''), onClick: () => this.changeTab(this.identifier), id: this.identifier }, (this.iconName && (this.variant == 'inline' || this.variant == 'boxed')) &&
|
|
22
|
+
h("jump-icon", { key: 'c65754b06a1b2404f146c71adc7498d4c8c6423c', library: "fa", category: "regular", name: this.iconName, size: "small" }), h("span", { key: 'd256f97d32910c594e12a6ca8b9de1fe483989b5', class: "label" }, this.label))));
|
|
23
23
|
}
|
|
24
24
|
static get is() { return "jump-tab-item"; }
|
|
25
25
|
static get encapsulation() { return "shadow"; }
|
|
@@ -5,7 +5,7 @@ export class JumpTabPanel {
|
|
|
5
5
|
this.active = false;
|
|
6
6
|
}
|
|
7
7
|
render() {
|
|
8
|
-
return (h(Host, { key: '
|
|
8
|
+
return (h(Host, { key: '75fb1adb1af140bba218b890891234b01be1534f', class: "JumpTabPanel", id: this.identifier }, h("div", { key: '08ddae107776c29aa2b869e7b2e541e43e33b6a8', class: "JumpTabPanel__Content " + (this.active ? 'active' : '') }, h("slot", { key: 'bdf0d20e086f2b9def8df7f9abdae1df293a78c8' }))));
|
|
9
9
|
}
|
|
10
10
|
static get is() { return "jump-tab-panel"; }
|
|
11
11
|
static get encapsulation() { return "shadow"; }
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { Components, JSX } from "../types/components";
|
|
2
|
+
|
|
3
|
+
interface JumpSearchBarDropdownItem extends Components.JumpSearchBarDropdownItem, HTMLElement {}
|
|
4
|
+
export const JumpSearchBarDropdownItem: {
|
|
5
|
+
prototype: JumpSearchBarDropdownItem;
|
|
6
|
+
new (): JumpSearchBarDropdownItem;
|
|
7
|
+
};
|
|
8
|
+
/**
|
|
9
|
+
* Used to define this component and all nested components recursively.
|
|
10
|
+
*/
|
|
11
|
+
export const defineCustomElement: () => void;
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
|
|
2
|
+
|
|
3
|
+
const jumpSearchBarDropdownItemCss = ":host{display:block}";
|
|
4
|
+
const JumpSearchBarDropdownItemStyle0 = jumpSearchBarDropdownItemCss;
|
|
5
|
+
|
|
6
|
+
const JumpSearchBarDropdownItem$1 = /*@__PURE__*/ proxyCustomElement(class JumpSearchBarDropdownItem extends HTMLElement {
|
|
7
|
+
constructor() {
|
|
8
|
+
super();
|
|
9
|
+
this.__registerHost();
|
|
10
|
+
this.__attachShadow();
|
|
11
|
+
this.connectedEvent = createEvent(this, "jump-search-bar-dropdown-item-connected", 7);
|
|
12
|
+
this.value = undefined;
|
|
13
|
+
this.img = undefined;
|
|
14
|
+
this.href = undefined;
|
|
15
|
+
this.details = undefined;
|
|
16
|
+
}
|
|
17
|
+
componentDidLoad() {
|
|
18
|
+
// devo recuperare da host tutti gli attributi che hanno davanti "details" e creare un oggetto con chiave e valore
|
|
19
|
+
if (this.componentRef.hasAttributes()) {
|
|
20
|
+
const attributes = this.componentRef.attributes;
|
|
21
|
+
this.details = {};
|
|
22
|
+
for (let i = 0; i < attributes.length; i++) {
|
|
23
|
+
if (attributes[i].name.includes('details')) {
|
|
24
|
+
// Come nome della chiave vorrei dare solo quello che c'è dopo details-
|
|
25
|
+
this.details[attributes[i].name.split('details-')[1]] = attributes[i].value;
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
this.connectedEvent.emit({
|
|
30
|
+
value: this.value,
|
|
31
|
+
details: this.details,
|
|
32
|
+
img: this.img,
|
|
33
|
+
href: this.href,
|
|
34
|
+
});
|
|
35
|
+
}
|
|
36
|
+
render() {
|
|
37
|
+
return (h(Host, { key: '2cd1b4ef033699ffa631a6529da6c167756ca77b', ref: (el) => this.componentRef = el }));
|
|
38
|
+
}
|
|
39
|
+
static get style() { return JumpSearchBarDropdownItemStyle0; }
|
|
40
|
+
}, [1, "jump-search-bar-dropdown-item", {
|
|
41
|
+
"value": [1],
|
|
42
|
+
"img": [1],
|
|
43
|
+
"href": [1],
|
|
44
|
+
"details": [32]
|
|
45
|
+
}]);
|
|
46
|
+
function defineCustomElement$1() {
|
|
47
|
+
if (typeof customElements === "undefined") {
|
|
48
|
+
return;
|
|
49
|
+
}
|
|
50
|
+
const components = ["jump-search-bar-dropdown-item"];
|
|
51
|
+
components.forEach(tagName => { switch (tagName) {
|
|
52
|
+
case "jump-search-bar-dropdown-item":
|
|
53
|
+
if (!customElements.get(tagName)) {
|
|
54
|
+
customElements.define(tagName, JumpSearchBarDropdownItem$1);
|
|
55
|
+
}
|
|
56
|
+
break;
|
|
57
|
+
} });
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
const JumpSearchBarDropdownItem = JumpSearchBarDropdownItem$1;
|
|
61
|
+
const defineCustomElement = defineCustomElement$1;
|
|
62
|
+
|
|
63
|
+
export { JumpSearchBarDropdownItem, defineCustomElement };
|
|
64
|
+
|
|
65
|
+
//# sourceMappingURL=jump-search-bar-dropdown-item.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"file":"jump-search-bar-dropdown-item.js","mappings":";;AAAA,MAAM,4BAA4B,GAAG,sBAAsB,CAAC;AAC5D,wCAAe,4BAA4B;;MCM9BA,2BAAyB;;;;;;;;;;;IAUpC,gBAAgB;;QAEd,IAAG,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,EAAE;YACpC,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;gBAC1C,IAAI,UAAU,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE;;oBAG1C,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;iBAC7E;aACF;SACF;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;KACJ;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,GAAG,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,YAAY,GAAG,EAAiB,GACjD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["JumpSearchBarDropdownItem"],"sources":["src/components/jump-search-bar-dropdown-item/jump-search-bar-dropdown-item.scss?tag=jump-search-bar-dropdown-item&encapsulation=shadow","src/components/jump-search-bar-dropdown-item/jump-search-bar-dropdown-item.tsx"],"sourcesContent":[":host {\n display: block;\n}\n","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"],"version":3}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { Components, JSX } from "../types/components";
|
|
2
|
+
|
|
3
|
+
interface JumpSearchBarMobile extends Components.JumpSearchBarMobile, HTMLElement {}
|
|
4
|
+
export const JumpSearchBarMobile: {
|
|
5
|
+
prototype: JumpSearchBarMobile;
|
|
6
|
+
new (): JumpSearchBarMobile;
|
|
7
|
+
};
|
|
8
|
+
/**
|
|
9
|
+
* Used to define this component and all nested components recursively.
|
|
10
|
+
*/
|
|
11
|
+
export const defineCustomElement: () => void;
|