@jumpgroup/jump-design-system 0.3.7 → 0.3.9
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/jump-design-system.cjs.js +1 -1
- package/dist/cjs/jump-filtergroup.cjs.entry.js +3 -3
- package/dist/cjs/jump-filtergroup.cjs.entry.js.map +1 -1
- package/dist/cjs/jump-pagination-table.cjs.entry.js +17 -18
- package/dist/cjs/jump-pagination-table.cjs.entry.js.map +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/jump-filtergroup/jump-filtergroup.js +5 -5
- package/dist/collection/components/jump-filtergroup/jump-filtergroup.js.map +1 -1
- package/dist/collection/components/jump-pagination-table/jump-pagination-table.js +31 -45
- package/dist/collection/components/jump-pagination-table/jump-pagination-table.js.map +1 -1
- package/dist/collection/components/jump-pagination-table/jump-pagination-table.stories.js +6 -14
- package/dist/collection/components/jump-pagination-table/jump-pagination-table.stories.js.map +1 -1
- package/dist/components/jump-filtergroup.js +4 -4
- package/dist/components/jump-filtergroup.js.map +1 -1
- package/dist/components/jump-pagination-table.js +22 -21
- package/dist/components/jump-pagination-table.js.map +1 -1
- package/dist/esm/jump-design-system.js +1 -1
- package/dist/esm/jump-filtergroup.entry.js +3 -3
- package/dist/esm/jump-filtergroup.entry.js.map +1 -1
- package/dist/esm/jump-pagination-table.entry.js +17 -18
- package/dist/esm/jump-pagination-table.entry.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- 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-37114ce3.entry.js +2 -0
- package/dist/jump-design-system/p-37114ce3.entry.js.map +1 -0
- package/dist/jump-design-system/p-d1e411fd.entry.js +2 -0
- package/dist/jump-design-system/p-d1e411fd.entry.js.map +1 -0
- package/dist/jump-design-system-elements.json +6 -6
- package/dist/types/components/jump-filtergroup/jump-filtergroup.d.ts +1 -1
- package/dist/types/components/jump-pagination-table/jump-pagination-table.d.ts +3 -1
- package/dist/types/components/jump-pagination-table/jump-pagination-table.stories.d.ts +1 -6
- package/dist/types/components.d.ts +4 -12
- package/package.json +1 -1
- package/dist/jump-design-system/p-594b15ee.entry.js +0 -2
- package/dist/jump-design-system/p-594b15ee.entry.js.map +0 -1
- package/dist/jump-design-system/p-65ac4e72.entry.js +0 -2
- package/dist/jump-design-system/p-65ac4e72.entry.js.map +0 -1
|
@@ -29,19 +29,14 @@ export default {
|
|
|
29
29
|
description: 'Indica l\'etichetta per gli elementi per pagina',
|
|
30
30
|
},
|
|
31
31
|
elementsRanges: {
|
|
32
|
-
name: 'elements-
|
|
33
|
-
control: '
|
|
34
|
-
|
|
32
|
+
name: 'elements-ranges',
|
|
33
|
+
control: 'text',
|
|
34
|
+
description: "Indica i valori per la selezione degli elementi per pagina"
|
|
35
35
|
},
|
|
36
36
|
showFirstAndLast: {
|
|
37
37
|
name: 'show-first-and-last',
|
|
38
38
|
control: 'boolean',
|
|
39
39
|
description: 'Indica se mostrare le frecce aggiuntive per navigare rapidamente nella prima o ultima pagina. Da preferire con un numero elevato di pagine.'
|
|
40
|
-
},
|
|
41
|
-
elPerPage: {
|
|
42
|
-
name: 'el-per-page',
|
|
43
|
-
control: 'number',
|
|
44
|
-
description: 'Indica il numero scelto di elementi per pagina'
|
|
45
40
|
}
|
|
46
41
|
}
|
|
47
42
|
};
|
|
@@ -78,10 +73,9 @@ PlaygroundPagTable.args = {
|
|
|
78
73
|
last: 10,
|
|
79
74
|
total: 100,
|
|
80
75
|
labelElementsPerPage: "Elementi per pagina",
|
|
81
|
-
elementsRanges:
|
|
76
|
+
elementsRanges: "10,20",
|
|
82
77
|
pagLabel: 'di',
|
|
83
78
|
showFirstAndLast: false,
|
|
84
|
-
elPerPage: 10
|
|
85
79
|
};
|
|
86
80
|
export const PaginationTableRidotto = TemplateWithListenerExample.bind({});
|
|
87
81
|
PaginationTableRidotto.args = {
|
|
@@ -89,10 +83,9 @@ PaginationTableRidotto.args = {
|
|
|
89
83
|
last: 10,
|
|
90
84
|
total: 100,
|
|
91
85
|
labelElementsPerPage: "Elementi per pagina",
|
|
92
|
-
elementsRanges:
|
|
86
|
+
elementsRanges: "10,20",
|
|
93
87
|
pagLabel: 'di',
|
|
94
88
|
showFirstAndLast: false,
|
|
95
|
-
elPerPage: 10
|
|
96
89
|
};
|
|
97
90
|
export const PaginationTableCompleto = TemplateWithListenerExample.bind({});
|
|
98
91
|
PaginationTableCompleto.args = {
|
|
@@ -100,9 +93,8 @@ PaginationTableCompleto.args = {
|
|
|
100
93
|
last: 10,
|
|
101
94
|
total: 100,
|
|
102
95
|
labelElementsPerPage: "Elementi per pagina",
|
|
103
|
-
elementsRanges:
|
|
96
|
+
elementsRanges: "10,20",
|
|
104
97
|
pagLabel: 'di',
|
|
105
98
|
showFirstAndLast: true,
|
|
106
|
-
elPerPage: 10
|
|
107
99
|
};
|
|
108
100
|
//# sourceMappingURL=jump-pagination-table.stories.js.map
|
package/dist/collection/components/jump-pagination-table/jump-pagination-table.stories.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"jump-pagination-table.stories.js","sourceRoot":"","sources":["../../../src/components/jump-pagination-table/jump-pagination-table.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,UAAU,EAAC,MAAM,mBAAmB,CAAC;AAE1E,eAAe;IACb,KAAK,EAAE,uCAAuC;IAC9C,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,QAAQ,EAAC;YACP,IAAI,EAAE,WAAW;YACjB,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,uDAAuD;SACrE;QACD,KAAK,EAAE;YACL,IAAI,EAAE,OAAO;YACb,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,sCAAsC;SACpD;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,MAAM;YACZ,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,uCAAuC;SACrD;QACD,KAAK,EAAE;YACL,IAAI,EAAE,OAAO;YACb,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,mDAAmD;SACjE;QACD,oBAAoB,EAAE;YACpB,IAAI,EAAE,yBAAyB;YAC/B,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,iDAAiD;SAC/D;QACD,cAAc,EAAE;YACd,IAAI,EAAE,
|
|
1
|
+
{"version":3,"file":"jump-pagination-table.stories.js","sourceRoot":"","sources":["../../../src/components/jump-pagination-table/jump-pagination-table.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,UAAU,EAAC,MAAM,mBAAmB,CAAC;AAE1E,eAAe;IACb,KAAK,EAAE,uCAAuC;IAC9C,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,QAAQ,EAAC;YACP,IAAI,EAAE,WAAW;YACjB,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,uDAAuD;SACrE;QACD,KAAK,EAAE;YACL,IAAI,EAAE,OAAO;YACb,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,sCAAsC;SACpD;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,MAAM;YACZ,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,uCAAuC;SACrD;QACD,KAAK,EAAE;YACL,IAAI,EAAE,OAAO;YACb,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,mDAAmD;SACjE;QACD,oBAAoB,EAAE;YACpB,IAAI,EAAE,yBAAyB;YAC/B,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,iDAAiD;SAC/D;QACD,cAAc,EAAE;YACd,IAAI,EAAE,iBAAiB;YACvB,OAAO,EAAE,MAAM;YACf,WAAW,EAAC,4DAA4D;SACzE;QACD,gBAAgB,EAAE;YAChB,IAAI,EAAE,qBAAqB;YAC3B,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,6IAA6I;SAC3J;KACF;CACF,CAAC;AAEF,MAAM,gBAAgB,GAAG,CAAC,IAAI,EAAE,EAAE;IAChC,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,UAAU,CAAC,0BAA0B,UAAU,2BAA2B,CAAC,CAAC;AACrF,CAAC,CAAC;AAEF,MAAM,2BAA2B,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE;IACjD,IAAI,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC;IACjB,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,UAAU,CAAC,0BAA0B,UAAU;;;;;;4DAMI,EAAE;oEACM,IAAI,CAAC,SAAS;iEACjB,IAAI,CAAC,KAAK;;;;;;;;;;oBAUvD,CAAC,CAAC;AACtB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC5D,kBAAkB,CAAC,IAAI,GAAG;IACxB,KAAK,EAAE,CAAC;IACR,IAAI,EAAE,EAAE;IACR,KAAK,EAAE,GAAG;IACV,oBAAoB,EAAE,qBAAqB;IAC3C,cAAc,EAAE,OAAO;IACvB,QAAQ,EAAE,IAAI;IACd,gBAAgB,EAAE,KAAK;CACxB,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,2BAA2B,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE3E,sBAAsB,CAAC,IAAI,GAAG;IAC5B,KAAK,EAAE,CAAC;IACR,IAAI,EAAE,EAAE;IACR,KAAK,EAAE,GAAG;IACV,oBAAoB,EAAE,qBAAqB;IAC3C,cAAc,EAAE,OAAO;IACvB,QAAQ,EAAE,IAAI;IACd,gBAAgB,EAAE,KAAK;CACxB,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,2BAA2B,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE5E,uBAAuB,CAAC,IAAI,GAAG;IAC7B,KAAK,EAAE,CAAC;IACR,IAAI,EAAE,EAAE;IACR,KAAK,EAAE,GAAG;IACV,oBAAoB,EAAE,qBAAqB;IAC3C,cAAc,EAAE,OAAO;IACvB,QAAQ,EAAE,IAAI;IACd,gBAAgB,EAAE,IAAI;CACvB,CAAC","sourcesContent":["import { generateAttributesFromArgs, formatHtml} from '../../utils/utils';\n\nexport default {\n title: 'Components/Pagination/PaginationTable',\n tags: ['autodocs'],\n argTypes: {\n pagLabel:{\n name: \"pag-label\",\n control: 'text',\n description: 'Indica la dicitura di paginazione. Di default è \"di\".'\n },\n first: {\n name: 'first',\n control: 'number',\n description: 'Indica il primo elemento della lista',\n },\n last: {\n name: 'last',\n control: 'number',\n description: 'Indica l\\'ultimo elemento della lista',\n },\n total: {\n name: 'total',\n control: 'number',\n description: 'Indica il numero totale di elementi disponibili. ',\n },\n labelElementsPerPage: {\n name: 'label-elements-per-page',\n control: 'text',\n description: 'Indica l\\'etichetta per gli elementi per pagina',\n },\n elementsRanges: {\n name: 'elements-ranges',\n control: 'text', \n description:\"Indica i valori per la selezione degli elementi per pagina\"\n },\n showFirstAndLast: {\n name: 'show-first-and-last',\n control: 'boolean',\n description: 'Indica se mostrare le frecce aggiuntive per navigare rapidamente nella prima o ultima pagina. Da preferire con un numero elevato di pagine.'\n }\n }\n};\n\nconst TemplatePagTable = (args) => {\n const attributes = generateAttributesFromArgs(args);\n return formatHtml(`<jump-pagination-table ${attributes}></jump-pagination-table>`);\n};\n\nconst TemplateWithListenerExample = (args, data) => {\n let id = data.id;\n const attributes = generateAttributesFromArgs(args);\n return formatHtml(`<jump-pagination-table ${attributes}></jump-pagination-table>\n <div>Stai visualizzando <span id=\"el-per-page\">X</span> elementi per volta</div>\n <div>Il primo elemento visualizzato è <span id=\"first-el\">X</span></div>\n <script>\n (function() {\n let container;\n container = document.querySelector('#story--${id}');\n container.querySelector('#el-per-page').innerText = ${args.elPerPage};\n container.querySelector('#first-el').innerText = ${args.first};\n\n container.querySelector('jump-pagination-table').addEventListener('jump-change-el-per-page', (ev) => {\n container.querySelector('#el-per-page').innerText = ev.detail.elPerPage;\n });\n\n container.querySelector('jump-pagination-table').addEventListener('jump-change-page', (ev) => {\n container.querySelector('#first-el').innerText = ev.detail.first;\n });\n })();\n </script>`);\n};\n\nexport const PlaygroundPagTable = TemplatePagTable.bind({});\nPlaygroundPagTable.args = {\n first: 1,\n last: 10,\n total: 100,\n labelElementsPerPage: \"Elementi per pagina\",\n elementsRanges: \"10,20\",\n pagLabel: 'di',\n showFirstAndLast: false,\n};\n\nexport const PaginationTableRidotto = TemplateWithListenerExample.bind({});\n\nPaginationTableRidotto.args = {\n first: 1,\n last: 10,\n total: 100,\n labelElementsPerPage: \"Elementi per pagina\",\n elementsRanges: \"10,20\",\n pagLabel: 'di',\n showFirstAndLast: false,\n};\n\nexport const PaginationTableCompleto = TemplateWithListenerExample.bind({});\n\nPaginationTableCompleto.args = {\n first: 1,\n last: 10,\n total: 100,\n labelElementsPerPage: \"Elementi per pagina\",\n elementsRanges: \"10,20\",\n pagLabel: 'di',\n showFirstAndLast: true,\n};"]}
|
|
@@ -12,7 +12,7 @@ const JumpFiltergroup$1 = /*@__PURE__*/ proxyCustomElement(class JumpFiltergroup
|
|
|
12
12
|
this.__attachShadow();
|
|
13
13
|
this.change = createEvent(this, "jump-filterchange", 7);
|
|
14
14
|
this.name = 'tax-name';
|
|
15
|
-
this.
|
|
15
|
+
this.title = 'Titolo del filtro';
|
|
16
16
|
this.otherLabel = 'Mostra altro';
|
|
17
17
|
this.lessLabel = 'Mostra meno';
|
|
18
18
|
this.maxElements = 8;
|
|
@@ -108,13 +108,13 @@ const JumpFiltergroup$1 = /*@__PURE__*/ proxyCustomElement(class JumpFiltergroup
|
|
|
108
108
|
});
|
|
109
109
|
}
|
|
110
110
|
render() {
|
|
111
|
-
return (h(Host, { key: '
|
|
112
|
-
h("jump-button", { key: '
|
|
111
|
+
return (h(Host, { key: 'aa5959350948a2325f4b646ab8e6d31311df03a0' }, this.title && h("h5", { key: '43dff28c8b63b311b673390fabfec1dfaf933386' }, this.title), h("div", { key: '4b93f3ab110f6646977e00590eb8bee9e7b1ce28', class: "filterGroup" }, h("slot", { key: '459320fd46540ac84ab5e2ba3cd911e0bfcd663c', ref: (el) => (this.slotItemsWrapper = el) })), this.inputs.length > this.maxElements &&
|
|
112
|
+
h("jump-button", { key: '24999d7f0a79eeefd25ecd6c677f1170e14df6b5', variant: "primary", size: "small", text: true, name: this.showMore ? this.otherLabel : this.lessLabel, "aria-label": this.showMore ? this.otherLabel : this.lessLabel, onClick: () => this.handleShowMore() }, this.showMore ? this.otherLabel : this.lessLabel, h("jump-icon", { key: '7731006e80030c6d6a9fc8ce4b49fc60f792834e', slot: "suffix", name: this.showMore ? 'chevron-down' : 'chevron-down' }))));
|
|
113
113
|
}
|
|
114
114
|
static get style() { return JumpFiltergroupStyle0; }
|
|
115
115
|
}, [1, "jump-filtergroup", {
|
|
116
116
|
"name": [1],
|
|
117
|
-
"
|
|
117
|
+
"title": [1],
|
|
118
118
|
"otherLabel": [1, "other-label"],
|
|
119
119
|
"lessLabel": [1, "less-label"],
|
|
120
120
|
"maxElements": [2, "max-elements"],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"jump-filtergroup.js","mappings":";;;;AAAA,MAAM,kBAAkB,GAAG,uJAAuJ,CAAC;AACnL,8BAAe,kBAAkB;;MCMpBA,iBAAe;;;;;;oBACH,UAAU;
|
|
1
|
+
{"file":"jump-filtergroup.js","mappings":"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","names":["JumpFiltergroup"],"sources":["src/components/jump-filtergroup/jump-filtergroup.scss?tag=jump-filtergroup&encapsulation=shadow","src/components/jump-filtergroup/jump-filtergroup.tsx"],"sourcesContent":[":host {\n display: block;\n\n slot {\n display: flex;\n flex-direction: column;\n gap: .25rem;\n margin-bottom: 1rem;\n }\n}\n\nh5 {\n margin: 0 0 .25rem;\n}\n//TODO: capire perché non prende questo stile\n[data-hide=\"true\"] {\n display: none;\n}\n\n\n","import { Component, Host, h, Prop, State, Event, Method } from '@stencil/core';\n\n@Component({\n tag: 'jump-filtergroup',\n styleUrl: 'jump-filtergroup.scss',\n shadow: true,\n})\nexport class JumpFiltergroup {\n @Prop() name: string = 'tax-name';\n @Prop() title: string = 'Titolo del filtro';\n @Prop() otherLabel: string = 'Mostra altro';\n @Prop() lessLabel: string = 'Mostra meno';\n @Prop() maxElements: number = 8;\n //TODO: Add Accordion variant within jump-acccordion component\n @Prop() variant: 'accordion' | 'default' = 'default';\n\n @State() values: string[] = [];\n @State() value: string = '';\n @State() slotItems: any;\n @State() inputs: any = [];\n @State() showMore: boolean = true;\n\n @Event({ eventName: 'jump-filterchange' }) change;\n\n slotItemsWrapper: HTMLSlotElement;\n\n @Method('getValues')\n async getValues() {\n return this.values;\n }\n\n @Method('getActiveAmount')\n async getActiveAmount() {\n return this.values.length;\n }\n\n @Method('getInputs')\n async getInputs() {\n return this.inputs;\n }\n\n @Method('getName')\n async getName() {\n return this.name;\n }\n\n toggleHiddenItems() {\n this.slotItemsWrapper.assignedElements().forEach((item, index) => {\n if(index > this.maxElements) {\n item.setAttribute('data-hide', this.showMore ? 'true' : 'false');\n }\n });\n }\n\n handleShowMore() {\n this.showMore = !this.showMore;\n this.toggleHiddenItems();\n }\n\n handleChange(event: Event) {\n const target = event.target as HTMLInputElement | HTMLSelectElement;\n const newValue = target.value;\n\n if (target.tagName === 'INPUT') {\n if (target.type === 'checkbox') {\n // @ts-ignore\n if (target.checked) {\n this.values.push(newValue);\n } else {\n const index = this.values.indexOf(newValue);\n if (index !== -1) {\n this.values.splice(index, 1);\n }\n }\n } else if (target.type === 'radio') {\n // Se è un input radio selezionato, imposta il valore e aggiorna this.values\n this.value = newValue;\n this.values = [newValue]; // Assicurati che this.values contenga solo il valore selezionato\n }\n } else if (target.tagName === 'SELECT') {\n // Se è un select, aggiorna semplicemente il valore\n this.value = newValue;\n this.values = [newValue];\n }\n\n // Emit event con i valori aggiornati\n this.change.emit({\n name: this.name,\n values: this.values,\n });\n }\n\n componentDidLoad() {\n this.slotItems = this.slotItemsWrapper.assignedElements();\n this.slotItemsWrapper.addEventListener('change', this.handleChange.bind(this));\n\n let index = 0;\n this.slotItems.forEach((item) => {\n if(index > this.maxElements) {\n item.setAttribute('data-hide', 'true');\n }\n if (item.tagName === 'INPUT' || item.tagName === 'SELECT') {\n this.inputs.push(item);\n if (item.tagName === 'INPUT' && item.type === 'radio') {\n item.name = this.name;\n }\n } else {\n const inputs = item.querySelectorAll('input, select');\n if (inputs.length > 0) {\n inputs.forEach((input) => {\n this.inputs.push(input);\n\n if (input.tagName === 'INPUT' && input.type === 'radio') {\n input.name = this.name;\n }\n });\n }\n }\n index++;\n });\n }\n\n render() {\n return (\n <Host>\n {this.title && <h5>{this.title}</h5>}\n <div class=\"filterGroup\">\n <slot ref={(el) => (this.slotItemsWrapper = el as HTMLSlotElement)}></slot>\n </div>\n {this.inputs.length > this.maxElements &&\n <jump-button variant=\"primary\" size=\"small\" text name={this.showMore ? this.otherLabel : this.lessLabel}\n aria-label={this.showMore ? this.otherLabel : this.lessLabel}\n onClick={() => this.handleShowMore() }>\n {this.showMore ? this.otherLabel : this.lessLabel}\n <jump-icon slot=\"suffix\" name={this.showMore ? 'chevron-down' : 'chevron-down'}></jump-icon>\n </jump-button>\n }\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -11,8 +11,9 @@ const JumpPaginationTable$1 = /*@__PURE__*/ proxyCustomElement(class JumpPaginat
|
|
|
11
11
|
this.__registerHost();
|
|
12
12
|
this.changePage = createEvent(this, "jump-change-page", 7);
|
|
13
13
|
this.changeElPerPage = createEvent(this, "jump-change-el-per-page", 7);
|
|
14
|
-
this.elementsRanges =
|
|
15
|
-
this.
|
|
14
|
+
this.elementsRanges = "10,20,60,100";
|
|
15
|
+
this.elementsRangesArray = undefined;
|
|
16
|
+
this.elPerPage = undefined;
|
|
16
17
|
this.pagLabel = 'di';
|
|
17
18
|
this.labelElementsPerPage = 'Elementi per pagina';
|
|
18
19
|
this.total = 100;
|
|
@@ -20,6 +21,14 @@ const JumpPaginationTable$1 = /*@__PURE__*/ proxyCustomElement(class JumpPaginat
|
|
|
20
21
|
this.last = 10;
|
|
21
22
|
this.showFirstAndLast = false;
|
|
22
23
|
}
|
|
24
|
+
elementsRangesChanged(newValue, oldValue) {
|
|
25
|
+
console.log('dentro el');
|
|
26
|
+
if (newValue !== oldValue) {
|
|
27
|
+
this.elementsRangesArray = newValue.split(',').map(Number);
|
|
28
|
+
}
|
|
29
|
+
this.elementsRangesArray = [...this.elementsRangesArray];
|
|
30
|
+
console.log('elementsRangesChanged', newValue, oldValue);
|
|
31
|
+
}
|
|
23
32
|
elPerPageChanged(newValue, oldValue) {
|
|
24
33
|
if (newValue !== oldValue) {
|
|
25
34
|
// Riporta la paginazione allo stato iniziale
|
|
@@ -30,7 +39,8 @@ const JumpPaginationTable$1 = /*@__PURE__*/ proxyCustomElement(class JumpPaginat
|
|
|
30
39
|
}
|
|
31
40
|
/* -------------------- LYFECYCLE EVENTS ---------------------- */
|
|
32
41
|
componentWillLoad() {
|
|
33
|
-
this.
|
|
42
|
+
this.elementsRangesArray = this.elementsRanges.split(',').map(Number);
|
|
43
|
+
this.elPerPage = this.elementsRangesArray[0];
|
|
34
44
|
}
|
|
35
45
|
/* -------------------- @LISTEN ------------------------------- */
|
|
36
46
|
/* -------------------- @METHOD ------------------------------- */
|
|
@@ -70,36 +80,27 @@ const JumpPaginationTable$1 = /*@__PURE__*/ proxyCustomElement(class JumpPaginat
|
|
|
70
80
|
/* --------------------- RENDER ------------------------------- */
|
|
71
81
|
render() {
|
|
72
82
|
var _a;
|
|
73
|
-
return (h(Host, { key: '
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
// disabled={this.first === 1}
|
|
77
|
-
// >
|
|
78
|
-
// <jump-icon slot="prefix" name="chevrons-left"></jump-icon>
|
|
79
|
-
// </button>
|
|
80
|
-
h("jump-button", { key: 'c7a833acee791a25257e237d88aef4e5bf5b5cc8', onClick: () => this.doChangePage('first'), variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: this.first === 1 }, " ", h("jump-icon", { key: 'ffb50e27e476c8ca8d58ff18ce30c96ff6330872', slot: "suffix", name: "chevrons-left" }), " "), h("jump-button", { key: '46bf715a0803deef866d90a1523675ab24c1793f', onClick: () => this.doChangePage('previous'), variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: this.first === 1 }, " ", h("jump-icon", { key: '223bf0f161ffce6ee0e17fbae7b8467cae790be3', slot: "suffix", name: "chevron-left" }), " "), h("jump-button", { key: '97696457a54e5808a0c252eeda2c8d915bcfe2e8', onClick: () => this.doChangePage('next'), variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: this.last === this.total }, " ", h("jump-icon", { key: '9e01f45cc02450c41bf3ffc2f14cfd6606ab5a96', slot: "suffix", name: "chevron-right" }), " "), this.showFirstAndLast &&
|
|
81
|
-
// <button
|
|
82
|
-
// onClick={() => this.doChangePage('last')}
|
|
83
|
-
// disabled={this.last === this.total}
|
|
84
|
-
// >
|
|
85
|
-
// <jump-icon slot="prefix" name="chevrons-right"></jump-icon>
|
|
86
|
-
// </button>
|
|
87
|
-
h("jump-button", { key: '05a745e26f5f14383e745a744c0c23e5598b0623', onClick: () => this.doChangePage('last'), variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: this.last === this.total }, " ", h("jump-icon", { key: '0ba46ee7053a3aed0091c05a20444c767738dc2f', slot: "suffix", name: "chevrons-right" }), " "))))));
|
|
83
|
+
return (h(Host, { key: 'fd4a13e65dfbcc334ace661e61297ff05d78624d', class: "JumpPaginationTable" }, h("div", { key: 'ae50a5dbac84be7f7f02c5c93f1e7cbd73a1fc6f', class: "JumpPaginationTable__Wrapper" }, h("div", { key: '2eade4e3a54fb4c84f3c7718d827d6e5295508bf', class: "elementsPerPage" }, h("label", { key: '4211a782ce895731ed90d52c88a278ccf69e03fc', htmlFor: "elements" }, (_a = this.labelElementsPerPage) !== null && _a !== void 0 ? _a : 'Elements per page'), h("select", { key: '6ce02a5ad892bf1d6b48b3ccb2605e1e1de3416b', name: "elements", id: "elements", onChange: (e) => this.setElPerPage(e) }, this.elementsRangesArray.map((range) => (h("option", { value: range, selected: (this.elPerPage == range) && true }, range))))), h("div", { key: '915e8eefc53385620b2d554935ab6f81f9571407', class: "indicators" }, h("div", { key: '02b3867d0fe90a6408aced6bd7b639d92cec61a6', class: "elements" }, h("span", { key: 'e1d25f5be0f4fbdd995588642d1ba1583e90a280' }, h("span", { key: '775b964a3dcc29be4d914c9ff309f6809555683b' }, this.first), " - ", h("span", { key: '31886227817ee097c5594bc1a81f271ac185531c' }, this.last), " ", this.pagLabel, " ", h("span", { key: 'a6525640edea1672b429732d2e23c72b1fbacf04' }, this.total))), h("div", { key: '9231615ab10231842136b4d64ce2a5e87a502c3f', class: "arrow" }, this.showFirstAndLast &&
|
|
84
|
+
h("jump-button", { key: 'cd9d9073f37b561464dfe5209cb43bc351392b40', onClick: () => this.doChangePage('first'), variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: this.first === 1 }, " ", h("jump-icon", { key: '48ece4b1628154ea80b33698c2de4a473e433d25', slot: "suffix", name: "chevrons-left" }), " "), h("jump-button", { key: '69c9b009244d96aa5c5e770d38ed9535330c1904', onClick: () => this.doChangePage('previous'), variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: this.first === 1 }, " ", h("jump-icon", { key: 'd5b18f4b7809af2032b4c955c59b0de2fb81b1b0', slot: "suffix", name: "chevron-left" }), " "), h("jump-button", { key: '95bf121ea17a00e01f4d47c256191665850dfcb6', onClick: () => this.doChangePage('next'), variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: this.last === this.total }, " ", h("jump-icon", { key: '64ac86934180ce2203c06472c00ec33334d128dd', slot: "suffix", name: "chevron-right" }), " "), this.showFirstAndLast &&
|
|
85
|
+
h("jump-button", { key: '2de71c60a69f5dc61088e2e4a27591e8b442967a', onClick: () => this.doChangePage('last'), variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: this.last === this.total }, " ", h("jump-icon", { key: 'c2113c26705cfafe41c9cb5c92527856dc7ee433', slot: "suffix", name: "chevrons-right" }), " "))))));
|
|
88
86
|
}
|
|
89
87
|
static get watchers() { return {
|
|
88
|
+
"elementsRanges": ["elementsRangesChanged"],
|
|
90
89
|
"elPerPage": ["elPerPageChanged"]
|
|
91
90
|
}; }
|
|
92
91
|
static get style() { return JumpPaginationTableStyle0; }
|
|
93
92
|
}, [0, "jump-pagination-table", {
|
|
94
|
-
"elementsRanges": [
|
|
95
|
-
"elPerPage": [2, "el-per-page"],
|
|
93
|
+
"elementsRanges": [1, "elements-ranges"],
|
|
96
94
|
"pagLabel": [513, "pag-label"],
|
|
97
95
|
"labelElementsPerPage": [513, "label-elements-per-page"],
|
|
98
96
|
"total": [514],
|
|
99
97
|
"first": [514],
|
|
100
98
|
"last": [514],
|
|
101
|
-
"showFirstAndLast": [516, "show-first-and-last"]
|
|
99
|
+
"showFirstAndLast": [516, "show-first-and-last"],
|
|
100
|
+
"elementsRangesArray": [32],
|
|
101
|
+
"elPerPage": [32]
|
|
102
102
|
}, undefined, {
|
|
103
|
+
"elementsRanges": ["elementsRangesChanged"],
|
|
103
104
|
"elPerPage": ["elPerPageChanged"]
|
|
104
105
|
}]);
|
|
105
106
|
function defineCustomElement$1() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"jump-pagination-table.js","mappings":"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","names":["JumpPaginationTable"],"sources":["src/components/jump-pagination-table/jump-pagination-table.scss?tag=jump-pagination-table","src/components/jump-pagination-table/jump-pagination-table.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.JumpPaginationTable {\n --jump-pagination-table-label: var(--neutral-grey-secondary);\n --jump-pagination-table-arrows: var(--neutral-grey-secondary);\n --jump-pagination-table-arrows-disabled: var(--neutral-grey-disabled); //mappare una variabile del design system\n\n font-family: var(--ff-primary);\n\n &__Wrapper {\n display: flex;\n justify-content: space-between;\n \n .elementsPerPage {\n display: flex;\n gap: 1rem;\n align-items: center;\n \n label {\n color: var(--jump-pagination-table-label);\n font-size: var(--fs-300);\n font-weight: normal;\n }\n }\n \n .indicators {\n font-size: var(--fs-400);\n font-weight: normal;\n display: flex;\n justify-content: space-between;\n gap: 20px;\n \n color: var(--jump-pagination-table-label);\n \n .arrow {\n color: var(--jump-pagination-table-arrows);\n display: flex;\n align-items: center;\n gap: 10px;\n \n button {\n background-color: transparent;\n border: none;\n cursor: pointer;\n padding: 0px;\n display: flex;\n align-items: center;\n }\n \n button:disabled {\n cursor: not-allowed;\n color: var(--jump-pagination-table-arrows-disabled);\n \n }\n }\n \n .elements {\n color: var(--jump-pagination-table-label);\n display: flex;\n align-items: center;\n gap: 5px;\n }\n }\n \n }\n}","import { Component, Event, EventEmitter, Watch, Host, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'jump-pagination-table',\n styleUrl: 'jump-pagination-table.scss',\n shadow: false,\n})\nexport class JumpPaginationTable {\n\n /* ---------------------- OWN PROPERTIES ---------------------- */\n\n /* ---------------------- @ELEMENT ---------------------------- */\n\n /* ---------------------- @STATE ------------------------------ */\n\n /* ---------------------- @PROPERTIES ------------------------- */\n\n /**\n * Values for the elements per page select\n */\n @Prop({ reflect: true }) elementsRanges: Array<number> = [10, 20, 60, 100];\n\n /**\n * Number of elements per page selected\n */\n @Prop() elPerPage: number = 10;\n @Watch('elPerPage')\n elPerPageChanged(newValue: number, oldValue: number) {\n if (newValue !== oldValue) {\n // Riporta la paginazione allo stato iniziale\n this.first = 1;\n this.last = Math.min(this.total, newValue);\n }\n\n this.changeElPerPage.emit({ elPerPage: newValue });\n }\n\n @Prop({ reflect: true }) pagLabel: string = 'di'; // Identifica la label testuale di pagination. \n\n /**\n * Label for the elements per page select\n */\n @Prop({ reflect: true }) labelElementsPerPage: string = 'Elementi per pagina';\n\n /**\n * Total of elements\n */\n @Prop({ reflect: true }) total: number = 100; \n\n /**\n * First element of the page\n */\n @Prop({ reflect: true }) first: number = 1;\n\n /**\n * Last element of the page\n */\n @Prop({ reflect: true }) last: number = 10;\n\n /**\n * Show button to navigate so first e last page\n */\n @Prop({ reflect: true }) showFirstAndLast: boolean = false;\n\n /* ---------------------- @EVENTS ------------------------- */\n @Event({ eventName: 'jump-change-page' }) changePage: EventEmitter;\n @Event({ eventName: 'jump-change-el-per-page' }) changeElPerPage: EventEmitter;\n\n /* -------------------- LYFECYCLE EVENTS ---------------------- */\n componentWillLoad() {\n this.elPerPage = this.elementsRanges[0];\n }\n\n /* -------------------- @LISTEN ------------------------------- */\n\n /* -------------------- @METHOD ------------------------------- */\n\n /* -------------------- LOCAL METHODS ------------------------- */\n setElPerPage(e) {\n this.elPerPage = e.target.value;\n }\n\n doChangePage(dir) {\n let newFirst;\n let newLast;\n\n //TODO refactorare \n if (dir === 'first') {\n newFirst = 1;\n newLast = Math.min(this.total, this.elPerPage);\n } else if (dir === 'last') {\n newLast = this.total;\n newFirst = Math.max(1, this.total - this.elPerPage + 1);\n } else if (dir === 'previous') {\n newFirst = Math.max(1, this.first - this.elPerPage);\n newLast = Math.min(this.total, newFirst + this.elPerPage - 1);\n } else if (dir === 'next') {\n newLast = Math.min(this.total, this.last + this.elPerPage);\n newFirst = Math.max(1, newLast - this.elPerPage + 1);\n }\n\n this.first = newFirst;\n this.last = newLast;\n\n let details = {\n first: newFirst,\n last: newLast,\n direction: dir\n }\n\n this.changePage.emit(details);\n }\n\n /* --------------------- RENDER ------------------------------- */\n render() {\n return (\n <Host class=\"JumpPaginationTable\">\n <div class=\"JumpPaginationTable__Wrapper\">\n <div class=\"elementsPerPage\">\n <label htmlFor=\"elements\">{this.labelElementsPerPage ?? 'Elements per page'}</label>\n <select name=\"elements\" id=\"elements\" onChange={(e) => this.setElPerPage(e)}>\n {this.elementsRanges.map((range) => (\n <option value={range} selected={(this.elPerPage == range) && true}>{range}</option>\n ))}\n </select>\n </div> \n <div class=\"indicators\">\n <div class=\"elements\">\n <span>\n <span>{this.first}</span> - <span>{this.last}</span> {this.pagLabel} <span>{this.total}</span>\n </span>\n </div>\n <div class=\"arrow\">\n {this.showFirstAndLast &&\n // <button \n // onClick={() => this.doChangePage('first')}\n // disabled={this.first === 1}\n // >\n // <jump-icon slot=\"prefix\" name=\"chevrons-left\"></jump-icon>\n // </button>\n <jump-button onClick={() => this.doChangePage('first')} variant=\"primary\" text size=\"small\" name=\"scopri\" value=\"value\" aria-label=\"Scopri di più\" id=\"button\" onlyIcon disabled={this.first === 1}> <jump-icon slot=\"suffix\" name=\"chevrons-left\" ></jump-icon> </jump-button>\n }\n {/* <button\n onClick={() => this.doChangePage('previous')}\n disabled={this.first === 1}\n >\n <jump-icon slot=\"prefix\" name=\"chevron-left\"></jump-icon>\n </button> */}\n <jump-button onClick={() => this.doChangePage('previous')} variant=\"primary\" text size=\"small\" name=\"scopri\" value=\"value\" aria-label=\"Scopri di più\" id=\"button\" onlyIcon disabled={this.first === 1}> <jump-icon slot=\"suffix\" name=\"chevron-left\" ></jump-icon> </jump-button>\n <jump-button onClick={() => this.doChangePage('next')} variant=\"primary\" text size=\"small\" name=\"scopri\" value=\"value\" aria-label=\"Scopri di più\" id=\"button\" onlyIcon disabled={this.last === this.total}> <jump-icon slot=\"suffix\" name=\"chevron-right\" ></jump-icon> </jump-button>\n {/* <button\n onClick={() => this.doChangePage('next')}\n disabled={this.last === this.total}\n >\n <jump-icon slot=\"prefix\" name=\"chevron-right\"></jump-icon>\n </button> */}\n {this.showFirstAndLast &&\n // <button\n // onClick={() => this.doChangePage('last')}\n // disabled={this.last === this.total}\n // >\n // <jump-icon slot=\"prefix\" name=\"chevrons-right\"></jump-icon>\n // </button>\n <jump-button onClick={() => this.doChangePage('last')} variant=\"primary\" text size=\"small\" name=\"scopri\" value=\"value\" aria-label=\"Scopri di più\" id=\"button\" onlyIcon disabled={this.last === this.total}> <jump-icon slot=\"suffix\" name=\"chevrons-right\" ></jump-icon> </jump-button>\n }\n </div>\n </div>\n </div>\n </Host>\n );\n }\n\n}\n"],"version":3}
|
|
1
|
+
{"file":"jump-pagination-table.js","mappings":"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","names":["JumpPaginationTable"],"sources":["src/components/jump-pagination-table/jump-pagination-table.scss?tag=jump-pagination-table","src/components/jump-pagination-table/jump-pagination-table.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.JumpPaginationTable {\n --jump-pagination-table-label: var(--neutral-grey-secondary);\n --jump-pagination-table-arrows: var(--neutral-grey-secondary);\n --jump-pagination-table-arrows-disabled: var(--neutral-grey-disabled); //mappare una variabile del design system\n\n font-family: var(--ff-primary);\n\n &__Wrapper {\n display: flex;\n justify-content: space-between;\n \n .elementsPerPage {\n display: flex;\n gap: 1rem;\n align-items: center;\n \n label {\n color: var(--jump-pagination-table-label);\n font-size: var(--fs-300);\n font-weight: normal;\n }\n }\n \n .indicators {\n font-size: var(--fs-400);\n font-weight: normal;\n display: flex;\n justify-content: space-between;\n gap: 20px;\n \n color: var(--jump-pagination-table-label);\n \n .arrow {\n color: var(--jump-pagination-table-arrows);\n display: flex;\n align-items: center;\n gap: 10px;\n \n button {\n background-color: transparent;\n border: none;\n cursor: pointer;\n padding: 0px;\n display: flex;\n align-items: center;\n }\n \n button:disabled {\n cursor: not-allowed;\n color: var(--jump-pagination-table-arrows-disabled);\n \n }\n }\n \n .elements {\n color: var(--jump-pagination-table-label);\n display: flex;\n align-items: center;\n gap: 5px;\n }\n }\n \n }\n}","import { Component, State, Event, EventEmitter, Watch, Host, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'jump-pagination-table',\n styleUrl: 'jump-pagination-table.scss',\n shadow: false,\n})\nexport class JumpPaginationTable {\n\n /* ---------------------- OWN PROPERTIES ---------------------- */\n\n /* ---------------------- @ELEMENT ---------------------------- */\n\n /* ---------------------- @STATE ------------------------------ */\n\n /* ---------------------- @PROPERTIES ------------------------- */\n\n /**\n * Values for the elements per page select\n */\n @Prop() elementsRanges: string = \"10,20,60,100\";\n\n @State() elementsRangesArray: number[];\n @Watch('elementsRanges')\n elementsRangesChanged(newValue, oldValue) {\n console.log('dentro el');\n if(newValue !== oldValue) {\n this.elementsRangesArray = newValue.split(',').map(Number);\n }\n this.elementsRangesArray = [...this.elementsRangesArray]\n console.log('elementsRangesChanged', newValue, oldValue);\n }\n\n /**\n * Number of elements per page selected\n */\n @State() elPerPage: number;\n @Watch('elPerPage')\n elPerPageChanged(newValue: number, oldValue: number) {\n if (newValue !== oldValue) {\n // Riporta la paginazione allo stato iniziale\n this.first = 1;\n this.last = Math.min(this.total, newValue);\n }\n\n this.changeElPerPage.emit({ elPerPage: newValue });\n }\n\n @Prop({ reflect: true }) pagLabel: string = 'di'; // Identifica la label testuale di pagination. \n\n /**\n * Label for the elements per page select\n */\n @Prop({ reflect: true }) labelElementsPerPage: string = 'Elementi per pagina';\n\n /**\n * Total of elements\n */\n @Prop({ reflect: true }) total: number = 100; \n\n /**\n * First element of the page\n */\n @Prop({ reflect: true }) first: number = 1;\n\n /**\n * Last element of the page\n */\n @Prop({ reflect: true }) last: number = 10;\n\n /**\n * Show button to navigate so first e last page\n */\n @Prop({ reflect: true }) showFirstAndLast: boolean = false;\n\n /* ---------------------- @EVENTS ------------------------- */\n @Event({ eventName: 'jump-change-page' }) changePage: EventEmitter;\n @Event({ eventName: 'jump-change-el-per-page' }) changeElPerPage: EventEmitter;\n\n /* -------------------- LYFECYCLE EVENTS ---------------------- */\n componentWillLoad() {\n this.elementsRangesArray = this.elementsRanges.split(',').map(Number);\n this.elPerPage = this.elementsRangesArray[0];\n }\n\n /* -------------------- @LISTEN ------------------------------- */\n\n /* -------------------- @METHOD ------------------------------- */\n\n /* -------------------- LOCAL METHODS ------------------------- */\n setElPerPage(e) {\n this.elPerPage = e.target.value;\n }\n\n doChangePage(dir) {\n let newFirst;\n let newLast;\n\n //TODO refactorare \n if (dir === 'first') {\n newFirst = 1;\n newLast = Math.min(this.total, this.elPerPage);\n } else if (dir === 'last') {\n newLast = this.total;\n newFirst = Math.max(1, this.total - this.elPerPage + 1);\n } else if (dir === 'previous') {\n newFirst = Math.max(1, this.first - this.elPerPage);\n newLast = Math.min(this.total, newFirst + this.elPerPage - 1);\n } else if (dir === 'next') {\n newLast = Math.min(this.total, this.last + this.elPerPage);\n newFirst = Math.max(1, newLast - this.elPerPage + 1);\n }\n\n this.first = newFirst;\n this.last = newLast;\n\n let details = {\n first: newFirst,\n last: newLast,\n direction: dir\n }\n\n this.changePage.emit(details);\n }\n\n /* --------------------- RENDER ------------------------------- */\n render() {\n return (\n <Host class=\"JumpPaginationTable\">\n <div class=\"JumpPaginationTable__Wrapper\">\n <div class=\"elementsPerPage\">\n <label htmlFor=\"elements\">{this.labelElementsPerPage ?? 'Elements per page'}</label>\n <select name=\"elements\" id=\"elements\" onChange={(e) => this.setElPerPage(e)}>\n {this.elementsRangesArray.map((range) => (\n <option value={range} selected={(this.elPerPage == range) && true}>{range}</option>\n ))}\n </select>\n </div> \n <div class=\"indicators\">\n <div class=\"elements\">\n <span>\n <span>{this.first}</span> - <span>{this.last}</span> {this.pagLabel} <span>{this.total}</span>\n </span>\n </div>\n <div class=\"arrow\">\n {this.showFirstAndLast &&\n <jump-button onClick={() => this.doChangePage('first')} variant=\"primary\" text size=\"small\" name=\"scopri\" value=\"value\" aria-label=\"Scopri di più\" id=\"button\" onlyIcon disabled={this.first === 1}> <jump-icon slot=\"suffix\" name=\"chevrons-left\" ></jump-icon> </jump-button>\n }\n <jump-button onClick={() => this.doChangePage('previous')} variant=\"primary\" text size=\"small\" name=\"scopri\" value=\"value\" aria-label=\"Scopri di più\" id=\"button\" onlyIcon disabled={this.first === 1}> <jump-icon slot=\"suffix\" name=\"chevron-left\" ></jump-icon> </jump-button>\n <jump-button onClick={() => this.doChangePage('next')} variant=\"primary\" text size=\"small\" name=\"scopri\" value=\"value\" aria-label=\"Scopri di più\" id=\"button\" onlyIcon disabled={this.last === this.total}> <jump-icon slot=\"suffix\" name=\"chevron-right\" ></jump-icon> </jump-button>\n {this.showFirstAndLast &&\n <jump-button onClick={() => this.doChangePage('last')} variant=\"primary\" text size=\"small\" name=\"scopri\" value=\"value\" aria-label=\"Scopri di più\" id=\"button\" onlyIcon disabled={this.last === this.total}> <jump-icon slot=\"suffix\" name=\"chevrons-right\" ></jump-icon> </jump-button>\n }\n </div>\n </div>\n </div>\n </Host>\n );\n }\n\n}\n"],"version":3}
|
|
@@ -16,7 +16,7 @@ const patchBrowser = () => {
|
|
|
16
16
|
|
|
17
17
|
patchBrowser().then(async (options) => {
|
|
18
18
|
await globalScripts();
|
|
19
|
-
return bootstrapLazy([["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]}]]],["jump-card-ecommerce",[[1,"jump-card-ecommerce",{"onlyIconButton":[4,"only-icon-button"],"hasBackground":[4,"has-background"],"badge":[1],"favorite":[1540],"hasFavorite":[4,"has-favorite"],"favoriteBtnClass":[1,"favorite-btn-class"],"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],"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"],"addedToCart":[4,"added-to-cart"],"endAddedToCart":[4,"end-added-to-cart"],"variations":[32],"selectedVariation":[32]},[[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],"activeFilters":[32],"showMobileFilters":[32],"isMobile":[32],"getFilters":[64]},[[0,"jump-filterchange","filterChangeHandler"],[9,"resize","handleResize"]]]]],["jump-filtergroup",[[1,"jump-filtergroup",{"name":[1],"
|
|
19
|
+
return bootstrapLazy([["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]}]]],["jump-card-ecommerce",[[1,"jump-card-ecommerce",{"onlyIconButton":[4,"only-icon-button"],"hasBackground":[4,"has-background"],"badge":[1],"favorite":[1540],"hasFavorite":[4,"has-favorite"],"favoriteBtnClass":[1,"favorite-btn-class"],"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],"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"],"addedToCart":[4,"added-to-cart"],"endAddedToCart":[4,"end-added-to-cart"],"variations":[32],"selectedVariation":[32]},[[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],"activeFilters":[32],"showMobileFilters":[32],"isMobile":[32],"getFilters":[64]},[[0,"jump-filterchange","filterChangeHandler"],[9,"resize","handleResize"]]]]],["jump-filtergroup",[[1,"jump-filtergroup",{"name":[1],"title":[1],"otherLabel":[1,"other-label"],"lessLabel":[1,"less-label"],"maxElements":[2,"max-elements"],"variant":[1],"values":[32],"value":[32],"slotItems":[32],"inputs":[32],"showMore":[32],"getValues":[64],"getActiveAmount":[64],"getInputs":[64],"getName":[64]}]]],["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"],"pagLabel":[513,"pag-label"],"labelElementsPerPage":[513,"label-elements-per-page"],"total":[514],"first":[514],"last":[514],"showFirstAndLast":[516,"show-first-and-last"],"elementsRangesArray":[32],"elPerPage":[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],"getValue":[64],"reset":[64]},null,{"value":["onValueChange"]}]]],["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",[[1,"jump-accordion"]]],["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-tab",[[1,"jump-tab",{"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-badge",[[1,"jump-badge",{"label":[1],"variant":[513],"dimension":[513],"soft":[516],"outline":[516]}]]]], options);
|
|
20
20
|
});
|
|
21
21
|
|
|
22
22
|
//# sourceMappingURL=jump-design-system.js.map
|
|
@@ -8,7 +8,7 @@ const JumpFiltergroup = class {
|
|
|
8
8
|
registerInstance(this, hostRef);
|
|
9
9
|
this.change = createEvent(this, "jump-filterchange", 7);
|
|
10
10
|
this.name = 'tax-name';
|
|
11
|
-
this.
|
|
11
|
+
this.title = 'Titolo del filtro';
|
|
12
12
|
this.otherLabel = 'Mostra altro';
|
|
13
13
|
this.lessLabel = 'Mostra meno';
|
|
14
14
|
this.maxElements = 8;
|
|
@@ -104,8 +104,8 @@ const JumpFiltergroup = class {
|
|
|
104
104
|
});
|
|
105
105
|
}
|
|
106
106
|
render() {
|
|
107
|
-
return (h(Host, { key: '
|
|
108
|
-
h("jump-button", { key: '
|
|
107
|
+
return (h(Host, { key: 'aa5959350948a2325f4b646ab8e6d31311df03a0' }, this.title && h("h5", { key: '43dff28c8b63b311b673390fabfec1dfaf933386' }, this.title), h("div", { key: '4b93f3ab110f6646977e00590eb8bee9e7b1ce28', class: "filterGroup" }, h("slot", { key: '459320fd46540ac84ab5e2ba3cd911e0bfcd663c', ref: (el) => (this.slotItemsWrapper = el) })), this.inputs.length > this.maxElements &&
|
|
108
|
+
h("jump-button", { key: '24999d7f0a79eeefd25ecd6c677f1170e14df6b5', variant: "primary", size: "small", text: true, name: this.showMore ? this.otherLabel : this.lessLabel, "aria-label": this.showMore ? this.otherLabel : this.lessLabel, onClick: () => this.handleShowMore() }, this.showMore ? this.otherLabel : this.lessLabel, h("jump-icon", { key: '7731006e80030c6d6a9fc8ce4b49fc60f792834e', slot: "suffix", name: this.showMore ? 'chevron-down' : 'chevron-down' }))));
|
|
109
109
|
}
|
|
110
110
|
};
|
|
111
111
|
JumpFiltergroup.style = JumpFiltergroupStyle0;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"jump-filtergroup.entry.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,uJAAuJ,CAAC;AACnL,8BAAe,kBAAkB;;MCMpB,eAAe;;;;oBACH,UAAU;
|
|
1
|
+
{"file":"jump-filtergroup.entry.js","mappings":"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","names":[],"sources":["src/components/jump-filtergroup/jump-filtergroup.scss?tag=jump-filtergroup&encapsulation=shadow","src/components/jump-filtergroup/jump-filtergroup.tsx"],"sourcesContent":[":host {\n display: block;\n\n slot {\n display: flex;\n flex-direction: column;\n gap: .25rem;\n margin-bottom: 1rem;\n }\n}\n\nh5 {\n margin: 0 0 .25rem;\n}\n//TODO: capire perché non prende questo stile\n[data-hide=\"true\"] {\n display: none;\n}\n\n\n","import { Component, Host, h, Prop, State, Event, Method } from '@stencil/core';\n\n@Component({\n tag: 'jump-filtergroup',\n styleUrl: 'jump-filtergroup.scss',\n shadow: true,\n})\nexport class JumpFiltergroup {\n @Prop() name: string = 'tax-name';\n @Prop() title: string = 'Titolo del filtro';\n @Prop() otherLabel: string = 'Mostra altro';\n @Prop() lessLabel: string = 'Mostra meno';\n @Prop() maxElements: number = 8;\n //TODO: Add Accordion variant within jump-acccordion component\n @Prop() variant: 'accordion' | 'default' = 'default';\n\n @State() values: string[] = [];\n @State() value: string = '';\n @State() slotItems: any;\n @State() inputs: any = [];\n @State() showMore: boolean = true;\n\n @Event({ eventName: 'jump-filterchange' }) change;\n\n slotItemsWrapper: HTMLSlotElement;\n\n @Method('getValues')\n async getValues() {\n return this.values;\n }\n\n @Method('getActiveAmount')\n async getActiveAmount() {\n return this.values.length;\n }\n\n @Method('getInputs')\n async getInputs() {\n return this.inputs;\n }\n\n @Method('getName')\n async getName() {\n return this.name;\n }\n\n toggleHiddenItems() {\n this.slotItemsWrapper.assignedElements().forEach((item, index) => {\n if(index > this.maxElements) {\n item.setAttribute('data-hide', this.showMore ? 'true' : 'false');\n }\n });\n }\n\n handleShowMore() {\n this.showMore = !this.showMore;\n this.toggleHiddenItems();\n }\n\n handleChange(event: Event) {\n const target = event.target as HTMLInputElement | HTMLSelectElement;\n const newValue = target.value;\n\n if (target.tagName === 'INPUT') {\n if (target.type === 'checkbox') {\n // @ts-ignore\n if (target.checked) {\n this.values.push(newValue);\n } else {\n const index = this.values.indexOf(newValue);\n if (index !== -1) {\n this.values.splice(index, 1);\n }\n }\n } else if (target.type === 'radio') {\n // Se è un input radio selezionato, imposta il valore e aggiorna this.values\n this.value = newValue;\n this.values = [newValue]; // Assicurati che this.values contenga solo il valore selezionato\n }\n } else if (target.tagName === 'SELECT') {\n // Se è un select, aggiorna semplicemente il valore\n this.value = newValue;\n this.values = [newValue];\n }\n\n // Emit event con i valori aggiornati\n this.change.emit({\n name: this.name,\n values: this.values,\n });\n }\n\n componentDidLoad() {\n this.slotItems = this.slotItemsWrapper.assignedElements();\n this.slotItemsWrapper.addEventListener('change', this.handleChange.bind(this));\n\n let index = 0;\n this.slotItems.forEach((item) => {\n if(index > this.maxElements) {\n item.setAttribute('data-hide', 'true');\n }\n if (item.tagName === 'INPUT' || item.tagName === 'SELECT') {\n this.inputs.push(item);\n if (item.tagName === 'INPUT' && item.type === 'radio') {\n item.name = this.name;\n }\n } else {\n const inputs = item.querySelectorAll('input, select');\n if (inputs.length > 0) {\n inputs.forEach((input) => {\n this.inputs.push(input);\n\n if (input.tagName === 'INPUT' && input.type === 'radio') {\n input.name = this.name;\n }\n });\n }\n }\n index++;\n });\n }\n\n render() {\n return (\n <Host>\n {this.title && <h5>{this.title}</h5>}\n <div class=\"filterGroup\">\n <slot ref={(el) => (this.slotItemsWrapper = el as HTMLSlotElement)}></slot>\n </div>\n {this.inputs.length > this.maxElements &&\n <jump-button variant=\"primary\" size=\"small\" text name={this.showMore ? this.otherLabel : this.lessLabel}\n aria-label={this.showMore ? this.otherLabel : this.lessLabel}\n onClick={() => this.handleShowMore() }>\n {this.showMore ? this.otherLabel : this.lessLabel}\n <jump-icon slot=\"suffix\" name={this.showMore ? 'chevron-down' : 'chevron-down'}></jump-icon>\n </jump-button>\n }\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -8,8 +8,9 @@ const JumpPaginationTable = class {
|
|
|
8
8
|
registerInstance(this, hostRef);
|
|
9
9
|
this.changePage = createEvent(this, "jump-change-page", 7);
|
|
10
10
|
this.changeElPerPage = createEvent(this, "jump-change-el-per-page", 7);
|
|
11
|
-
this.elementsRanges =
|
|
12
|
-
this.
|
|
11
|
+
this.elementsRanges = "10,20,60,100";
|
|
12
|
+
this.elementsRangesArray = undefined;
|
|
13
|
+
this.elPerPage = undefined;
|
|
13
14
|
this.pagLabel = 'di';
|
|
14
15
|
this.labelElementsPerPage = 'Elementi per pagina';
|
|
15
16
|
this.total = 100;
|
|
@@ -17,6 +18,14 @@ const JumpPaginationTable = class {
|
|
|
17
18
|
this.last = 10;
|
|
18
19
|
this.showFirstAndLast = false;
|
|
19
20
|
}
|
|
21
|
+
elementsRangesChanged(newValue, oldValue) {
|
|
22
|
+
console.log('dentro el');
|
|
23
|
+
if (newValue !== oldValue) {
|
|
24
|
+
this.elementsRangesArray = newValue.split(',').map(Number);
|
|
25
|
+
}
|
|
26
|
+
this.elementsRangesArray = [...this.elementsRangesArray];
|
|
27
|
+
console.log('elementsRangesChanged', newValue, oldValue);
|
|
28
|
+
}
|
|
20
29
|
elPerPageChanged(newValue, oldValue) {
|
|
21
30
|
if (newValue !== oldValue) {
|
|
22
31
|
// Riporta la paginazione allo stato iniziale
|
|
@@ -27,7 +36,8 @@ const JumpPaginationTable = class {
|
|
|
27
36
|
}
|
|
28
37
|
/* -------------------- LYFECYCLE EVENTS ---------------------- */
|
|
29
38
|
componentWillLoad() {
|
|
30
|
-
this.
|
|
39
|
+
this.elementsRangesArray = this.elementsRanges.split(',').map(Number);
|
|
40
|
+
this.elPerPage = this.elementsRangesArray[0];
|
|
31
41
|
}
|
|
32
42
|
/* -------------------- @LISTEN ------------------------------- */
|
|
33
43
|
/* -------------------- @METHOD ------------------------------- */
|
|
@@ -67,23 +77,12 @@ const JumpPaginationTable = class {
|
|
|
67
77
|
/* --------------------- RENDER ------------------------------- */
|
|
68
78
|
render() {
|
|
69
79
|
var _a;
|
|
70
|
-
return (h(Host, { key: '
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
// disabled={this.first === 1}
|
|
74
|
-
// >
|
|
75
|
-
// <jump-icon slot="prefix" name="chevrons-left"></jump-icon>
|
|
76
|
-
// </button>
|
|
77
|
-
h("jump-button", { key: 'c7a833acee791a25257e237d88aef4e5bf5b5cc8', onClick: () => this.doChangePage('first'), variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: this.first === 1 }, " ", h("jump-icon", { key: 'ffb50e27e476c8ca8d58ff18ce30c96ff6330872', slot: "suffix", name: "chevrons-left" }), " "), h("jump-button", { key: '46bf715a0803deef866d90a1523675ab24c1793f', onClick: () => this.doChangePage('previous'), variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: this.first === 1 }, " ", h("jump-icon", { key: '223bf0f161ffce6ee0e17fbae7b8467cae790be3', slot: "suffix", name: "chevron-left" }), " "), h("jump-button", { key: '97696457a54e5808a0c252eeda2c8d915bcfe2e8', onClick: () => this.doChangePage('next'), variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: this.last === this.total }, " ", h("jump-icon", { key: '9e01f45cc02450c41bf3ffc2f14cfd6606ab5a96', slot: "suffix", name: "chevron-right" }), " "), this.showFirstAndLast &&
|
|
78
|
-
// <button
|
|
79
|
-
// onClick={() => this.doChangePage('last')}
|
|
80
|
-
// disabled={this.last === this.total}
|
|
81
|
-
// >
|
|
82
|
-
// <jump-icon slot="prefix" name="chevrons-right"></jump-icon>
|
|
83
|
-
// </button>
|
|
84
|
-
h("jump-button", { key: '05a745e26f5f14383e745a744c0c23e5598b0623', onClick: () => this.doChangePage('last'), variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: this.last === this.total }, " ", h("jump-icon", { key: '0ba46ee7053a3aed0091c05a20444c767738dc2f', slot: "suffix", name: "chevrons-right" }), " "))))));
|
|
80
|
+
return (h(Host, { key: 'fd4a13e65dfbcc334ace661e61297ff05d78624d', class: "JumpPaginationTable" }, h("div", { key: 'ae50a5dbac84be7f7f02c5c93f1e7cbd73a1fc6f', class: "JumpPaginationTable__Wrapper" }, h("div", { key: '2eade4e3a54fb4c84f3c7718d827d6e5295508bf', class: "elementsPerPage" }, h("label", { key: '4211a782ce895731ed90d52c88a278ccf69e03fc', htmlFor: "elements" }, (_a = this.labelElementsPerPage) !== null && _a !== void 0 ? _a : 'Elements per page'), h("select", { key: '6ce02a5ad892bf1d6b48b3ccb2605e1e1de3416b', name: "elements", id: "elements", onChange: (e) => this.setElPerPage(e) }, this.elementsRangesArray.map((range) => (h("option", { value: range, selected: (this.elPerPage == range) && true }, range))))), h("div", { key: '915e8eefc53385620b2d554935ab6f81f9571407', class: "indicators" }, h("div", { key: '02b3867d0fe90a6408aced6bd7b639d92cec61a6', class: "elements" }, h("span", { key: 'e1d25f5be0f4fbdd995588642d1ba1583e90a280' }, h("span", { key: '775b964a3dcc29be4d914c9ff309f6809555683b' }, this.first), " - ", h("span", { key: '31886227817ee097c5594bc1a81f271ac185531c' }, this.last), " ", this.pagLabel, " ", h("span", { key: 'a6525640edea1672b429732d2e23c72b1fbacf04' }, this.total))), h("div", { key: '9231615ab10231842136b4d64ce2a5e87a502c3f', class: "arrow" }, this.showFirstAndLast &&
|
|
81
|
+
h("jump-button", { key: 'cd9d9073f37b561464dfe5209cb43bc351392b40', onClick: () => this.doChangePage('first'), variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: this.first === 1 }, " ", h("jump-icon", { key: '48ece4b1628154ea80b33698c2de4a473e433d25', slot: "suffix", name: "chevrons-left" }), " "), h("jump-button", { key: '69c9b009244d96aa5c5e770d38ed9535330c1904', onClick: () => this.doChangePage('previous'), variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: this.first === 1 }, " ", h("jump-icon", { key: 'd5b18f4b7809af2032b4c955c59b0de2fb81b1b0', slot: "suffix", name: "chevron-left" }), " "), h("jump-button", { key: '95bf121ea17a00e01f4d47c256191665850dfcb6', onClick: () => this.doChangePage('next'), variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: this.last === this.total }, " ", h("jump-icon", { key: '64ac86934180ce2203c06472c00ec33334d128dd', slot: "suffix", name: "chevron-right" }), " "), this.showFirstAndLast &&
|
|
82
|
+
h("jump-button", { key: '2de71c60a69f5dc61088e2e4a27591e8b442967a', onClick: () => this.doChangePage('last'), variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: this.last === this.total }, " ", h("jump-icon", { key: 'c2113c26705cfafe41c9cb5c92527856dc7ee433', slot: "suffix", name: "chevrons-right" }), " "))))));
|
|
85
83
|
}
|
|
86
84
|
static get watchers() { return {
|
|
85
|
+
"elementsRanges": ["elementsRangesChanged"],
|
|
87
86
|
"elPerPage": ["elPerPageChanged"]
|
|
88
87
|
}; }
|
|
89
88
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"jump-pagination-table.entry.js","mappings":"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","names":[],"sources":["src/components/jump-pagination-table/jump-pagination-table.scss?tag=jump-pagination-table","src/components/jump-pagination-table/jump-pagination-table.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.JumpPaginationTable {\n --jump-pagination-table-label: var(--neutral-grey-secondary);\n --jump-pagination-table-arrows: var(--neutral-grey-secondary);\n --jump-pagination-table-arrows-disabled: var(--neutral-grey-disabled); //mappare una variabile del design system\n\n font-family: var(--ff-primary);\n\n &__Wrapper {\n display: flex;\n justify-content: space-between;\n \n .elementsPerPage {\n display: flex;\n gap: 1rem;\n align-items: center;\n \n label {\n color: var(--jump-pagination-table-label);\n font-size: var(--fs-300);\n font-weight: normal;\n }\n }\n \n .indicators {\n font-size: var(--fs-400);\n font-weight: normal;\n display: flex;\n justify-content: space-between;\n gap: 20px;\n \n color: var(--jump-pagination-table-label);\n \n .arrow {\n color: var(--jump-pagination-table-arrows);\n display: flex;\n align-items: center;\n gap: 10px;\n \n button {\n background-color: transparent;\n border: none;\n cursor: pointer;\n padding: 0px;\n display: flex;\n align-items: center;\n }\n \n button:disabled {\n cursor: not-allowed;\n color: var(--jump-pagination-table-arrows-disabled);\n \n }\n }\n \n .elements {\n color: var(--jump-pagination-table-label);\n display: flex;\n align-items: center;\n gap: 5px;\n }\n }\n \n }\n}","import { Component, Event, EventEmitter, Watch, Host, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'jump-pagination-table',\n styleUrl: 'jump-pagination-table.scss',\n shadow: false,\n})\nexport class JumpPaginationTable {\n\n /* ---------------------- OWN PROPERTIES ---------------------- */\n\n /* ---------------------- @ELEMENT ---------------------------- */\n\n /* ---------------------- @STATE ------------------------------ */\n\n /* ---------------------- @PROPERTIES ------------------------- */\n\n /**\n * Values for the elements per page select\n */\n @Prop({ reflect: true }) elementsRanges: Array<number> = [10, 20, 60, 100];\n\n /**\n * Number of elements per page selected\n */\n @Prop() elPerPage: number = 10;\n @Watch('elPerPage')\n elPerPageChanged(newValue: number, oldValue: number) {\n if (newValue !== oldValue) {\n // Riporta la paginazione allo stato iniziale\n this.first = 1;\n this.last = Math.min(this.total, newValue);\n }\n\n this.changeElPerPage.emit({ elPerPage: newValue });\n }\n\n @Prop({ reflect: true }) pagLabel: string = 'di'; // Identifica la label testuale di pagination. \n\n /**\n * Label for the elements per page select\n */\n @Prop({ reflect: true }) labelElementsPerPage: string = 'Elementi per pagina';\n\n /**\n * Total of elements\n */\n @Prop({ reflect: true }) total: number = 100; \n\n /**\n * First element of the page\n */\n @Prop({ reflect: true }) first: number = 1;\n\n /**\n * Last element of the page\n */\n @Prop({ reflect: true }) last: number = 10;\n\n /**\n * Show button to navigate so first e last page\n */\n @Prop({ reflect: true }) showFirstAndLast: boolean = false;\n\n /* ---------------------- @EVENTS ------------------------- */\n @Event({ eventName: 'jump-change-page' }) changePage: EventEmitter;\n @Event({ eventName: 'jump-change-el-per-page' }) changeElPerPage: EventEmitter;\n\n /* -------------------- LYFECYCLE EVENTS ---------------------- */\n componentWillLoad() {\n this.elPerPage = this.elementsRanges[0];\n }\n\n /* -------------------- @LISTEN ------------------------------- */\n\n /* -------------------- @METHOD ------------------------------- */\n\n /* -------------------- LOCAL METHODS ------------------------- */\n setElPerPage(e) {\n this.elPerPage = e.target.value;\n }\n\n doChangePage(dir) {\n let newFirst;\n let newLast;\n\n //TODO refactorare \n if (dir === 'first') {\n newFirst = 1;\n newLast = Math.min(this.total, this.elPerPage);\n } else if (dir === 'last') {\n newLast = this.total;\n newFirst = Math.max(1, this.total - this.elPerPage + 1);\n } else if (dir === 'previous') {\n newFirst = Math.max(1, this.first - this.elPerPage);\n newLast = Math.min(this.total, newFirst + this.elPerPage - 1);\n } else if (dir === 'next') {\n newLast = Math.min(this.total, this.last + this.elPerPage);\n newFirst = Math.max(1, newLast - this.elPerPage + 1);\n }\n\n this.first = newFirst;\n this.last = newLast;\n\n let details = {\n first: newFirst,\n last: newLast,\n direction: dir\n }\n\n this.changePage.emit(details);\n }\n\n /* --------------------- RENDER ------------------------------- */\n render() {\n return (\n <Host class=\"JumpPaginationTable\">\n <div class=\"JumpPaginationTable__Wrapper\">\n <div class=\"elementsPerPage\">\n <label htmlFor=\"elements\">{this.labelElementsPerPage ?? 'Elements per page'}</label>\n <select name=\"elements\" id=\"elements\" onChange={(e) => this.setElPerPage(e)}>\n {this.elementsRanges.map((range) => (\n <option value={range} selected={(this.elPerPage == range) && true}>{range}</option>\n ))}\n </select>\n </div> \n <div class=\"indicators\">\n <div class=\"elements\">\n <span>\n <span>{this.first}</span> - <span>{this.last}</span> {this.pagLabel} <span>{this.total}</span>\n </span>\n </div>\n <div class=\"arrow\">\n {this.showFirstAndLast &&\n // <button \n // onClick={() => this.doChangePage('first')}\n // disabled={this.first === 1}\n // >\n // <jump-icon slot=\"prefix\" name=\"chevrons-left\"></jump-icon>\n // </button>\n <jump-button onClick={() => this.doChangePage('first')} variant=\"primary\" text size=\"small\" name=\"scopri\" value=\"value\" aria-label=\"Scopri di più\" id=\"button\" onlyIcon disabled={this.first === 1}> <jump-icon slot=\"suffix\" name=\"chevrons-left\" ></jump-icon> </jump-button>\n }\n {/* <button\n onClick={() => this.doChangePage('previous')}\n disabled={this.first === 1}\n >\n <jump-icon slot=\"prefix\" name=\"chevron-left\"></jump-icon>\n </button> */}\n <jump-button onClick={() => this.doChangePage('previous')} variant=\"primary\" text size=\"small\" name=\"scopri\" value=\"value\" aria-label=\"Scopri di più\" id=\"button\" onlyIcon disabled={this.first === 1}> <jump-icon slot=\"suffix\" name=\"chevron-left\" ></jump-icon> </jump-button>\n <jump-button onClick={() => this.doChangePage('next')} variant=\"primary\" text size=\"small\" name=\"scopri\" value=\"value\" aria-label=\"Scopri di più\" id=\"button\" onlyIcon disabled={this.last === this.total}> <jump-icon slot=\"suffix\" name=\"chevron-right\" ></jump-icon> </jump-button>\n {/* <button\n onClick={() => this.doChangePage('next')}\n disabled={this.last === this.total}\n >\n <jump-icon slot=\"prefix\" name=\"chevron-right\"></jump-icon>\n </button> */}\n {this.showFirstAndLast &&\n // <button\n // onClick={() => this.doChangePage('last')}\n // disabled={this.last === this.total}\n // >\n // <jump-icon slot=\"prefix\" name=\"chevrons-right\"></jump-icon>\n // </button>\n <jump-button onClick={() => this.doChangePage('last')} variant=\"primary\" text size=\"small\" name=\"scopri\" value=\"value\" aria-label=\"Scopri di più\" id=\"button\" onlyIcon disabled={this.last === this.total}> <jump-icon slot=\"suffix\" name=\"chevrons-right\" ></jump-icon> </jump-button>\n }\n </div>\n </div>\n </div>\n </Host>\n );\n }\n\n}\n"],"version":3}
|
|
1
|
+
{"file":"jump-pagination-table.entry.js","mappings":"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","names":[],"sources":["src/components/jump-pagination-table/jump-pagination-table.scss?tag=jump-pagination-table","src/components/jump-pagination-table/jump-pagination-table.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.JumpPaginationTable {\n --jump-pagination-table-label: var(--neutral-grey-secondary);\n --jump-pagination-table-arrows: var(--neutral-grey-secondary);\n --jump-pagination-table-arrows-disabled: var(--neutral-grey-disabled); //mappare una variabile del design system\n\n font-family: var(--ff-primary);\n\n &__Wrapper {\n display: flex;\n justify-content: space-between;\n \n .elementsPerPage {\n display: flex;\n gap: 1rem;\n align-items: center;\n \n label {\n color: var(--jump-pagination-table-label);\n font-size: var(--fs-300);\n font-weight: normal;\n }\n }\n \n .indicators {\n font-size: var(--fs-400);\n font-weight: normal;\n display: flex;\n justify-content: space-between;\n gap: 20px;\n \n color: var(--jump-pagination-table-label);\n \n .arrow {\n color: var(--jump-pagination-table-arrows);\n display: flex;\n align-items: center;\n gap: 10px;\n \n button {\n background-color: transparent;\n border: none;\n cursor: pointer;\n padding: 0px;\n display: flex;\n align-items: center;\n }\n \n button:disabled {\n cursor: not-allowed;\n color: var(--jump-pagination-table-arrows-disabled);\n \n }\n }\n \n .elements {\n color: var(--jump-pagination-table-label);\n display: flex;\n align-items: center;\n gap: 5px;\n }\n }\n \n }\n}","import { Component, State, Event, EventEmitter, Watch, Host, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'jump-pagination-table',\n styleUrl: 'jump-pagination-table.scss',\n shadow: false,\n})\nexport class JumpPaginationTable {\n\n /* ---------------------- OWN PROPERTIES ---------------------- */\n\n /* ---------------------- @ELEMENT ---------------------------- */\n\n /* ---------------------- @STATE ------------------------------ */\n\n /* ---------------------- @PROPERTIES ------------------------- */\n\n /**\n * Values for the elements per page select\n */\n @Prop() elementsRanges: string = \"10,20,60,100\";\n\n @State() elementsRangesArray: number[];\n @Watch('elementsRanges')\n elementsRangesChanged(newValue, oldValue) {\n console.log('dentro el');\n if(newValue !== oldValue) {\n this.elementsRangesArray = newValue.split(',').map(Number);\n }\n this.elementsRangesArray = [...this.elementsRangesArray]\n console.log('elementsRangesChanged', newValue, oldValue);\n }\n\n /**\n * Number of elements per page selected\n */\n @State() elPerPage: number;\n @Watch('elPerPage')\n elPerPageChanged(newValue: number, oldValue: number) {\n if (newValue !== oldValue) {\n // Riporta la paginazione allo stato iniziale\n this.first = 1;\n this.last = Math.min(this.total, newValue);\n }\n\n this.changeElPerPage.emit({ elPerPage: newValue });\n }\n\n @Prop({ reflect: true }) pagLabel: string = 'di'; // Identifica la label testuale di pagination. \n\n /**\n * Label for the elements per page select\n */\n @Prop({ reflect: true }) labelElementsPerPage: string = 'Elementi per pagina';\n\n /**\n * Total of elements\n */\n @Prop({ reflect: true }) total: number = 100; \n\n /**\n * First element of the page\n */\n @Prop({ reflect: true }) first: number = 1;\n\n /**\n * Last element of the page\n */\n @Prop({ reflect: true }) last: number = 10;\n\n /**\n * Show button to navigate so first e last page\n */\n @Prop({ reflect: true }) showFirstAndLast: boolean = false;\n\n /* ---------------------- @EVENTS ------------------------- */\n @Event({ eventName: 'jump-change-page' }) changePage: EventEmitter;\n @Event({ eventName: 'jump-change-el-per-page' }) changeElPerPage: EventEmitter;\n\n /* -------------------- LYFECYCLE EVENTS ---------------------- */\n componentWillLoad() {\n this.elementsRangesArray = this.elementsRanges.split(',').map(Number);\n this.elPerPage = this.elementsRangesArray[0];\n }\n\n /* -------------------- @LISTEN ------------------------------- */\n\n /* -------------------- @METHOD ------------------------------- */\n\n /* -------------------- LOCAL METHODS ------------------------- */\n setElPerPage(e) {\n this.elPerPage = e.target.value;\n }\n\n doChangePage(dir) {\n let newFirst;\n let newLast;\n\n //TODO refactorare \n if (dir === 'first') {\n newFirst = 1;\n newLast = Math.min(this.total, this.elPerPage);\n } else if (dir === 'last') {\n newLast = this.total;\n newFirst = Math.max(1, this.total - this.elPerPage + 1);\n } else if (dir === 'previous') {\n newFirst = Math.max(1, this.first - this.elPerPage);\n newLast = Math.min(this.total, newFirst + this.elPerPage - 1);\n } else if (dir === 'next') {\n newLast = Math.min(this.total, this.last + this.elPerPage);\n newFirst = Math.max(1, newLast - this.elPerPage + 1);\n }\n\n this.first = newFirst;\n this.last = newLast;\n\n let details = {\n first: newFirst,\n last: newLast,\n direction: dir\n }\n\n this.changePage.emit(details);\n }\n\n /* --------------------- RENDER ------------------------------- */\n render() {\n return (\n <Host class=\"JumpPaginationTable\">\n <div class=\"JumpPaginationTable__Wrapper\">\n <div class=\"elementsPerPage\">\n <label htmlFor=\"elements\">{this.labelElementsPerPage ?? 'Elements per page'}</label>\n <select name=\"elements\" id=\"elements\" onChange={(e) => this.setElPerPage(e)}>\n {this.elementsRangesArray.map((range) => (\n <option value={range} selected={(this.elPerPage == range) && true}>{range}</option>\n ))}\n </select>\n </div> \n <div class=\"indicators\">\n <div class=\"elements\">\n <span>\n <span>{this.first}</span> - <span>{this.last}</span> {this.pagLabel} <span>{this.total}</span>\n </span>\n </div>\n <div class=\"arrow\">\n {this.showFirstAndLast &&\n <jump-button onClick={() => this.doChangePage('first')} variant=\"primary\" text size=\"small\" name=\"scopri\" value=\"value\" aria-label=\"Scopri di più\" id=\"button\" onlyIcon disabled={this.first === 1}> <jump-icon slot=\"suffix\" name=\"chevrons-left\" ></jump-icon> </jump-button>\n }\n <jump-button onClick={() => this.doChangePage('previous')} variant=\"primary\" text size=\"small\" name=\"scopri\" value=\"value\" aria-label=\"Scopri di più\" id=\"button\" onlyIcon disabled={this.first === 1}> <jump-icon slot=\"suffix\" name=\"chevron-left\" ></jump-icon> </jump-button>\n <jump-button onClick={() => this.doChangePage('next')} variant=\"primary\" text size=\"small\" name=\"scopri\" value=\"value\" aria-label=\"Scopri di più\" id=\"button\" onlyIcon disabled={this.last === this.total}> <jump-icon slot=\"suffix\" name=\"chevron-right\" ></jump-icon> </jump-button>\n {this.showFirstAndLast &&\n <jump-button onClick={() => this.doChangePage('last')} variant=\"primary\" text size=\"small\" name=\"scopri\" value=\"value\" aria-label=\"Scopri di più\" id=\"button\" onlyIcon disabled={this.last === this.total}> <jump-icon slot=\"suffix\" name=\"chevrons-right\" ></jump-icon> </jump-button>\n }\n </div>\n </div>\n </div>\n </Host>\n );\n }\n\n}\n"],"version":3}
|