@jumpgroup/jump-design-system 0.2.5 → 0.2.6
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-badge.cjs.entry.js +1 -1
- package/dist/cjs/jump-badge.cjs.entry.js.map +1 -1
- package/dist/cjs/jump-button.cjs.entry.js +1 -1
- package/dist/cjs/jump-button.cjs.entry.js.map +1 -1
- package/dist/cjs/jump-design-system.cjs.js +1 -1
- package/dist/cjs/jump-icon.cjs.entry.js +1 -1
- package/dist/cjs/jump-icon.cjs.entry.js.map +1 -1
- package/dist/cjs/jump-pagination-table.cjs.entry.js +79 -0
- package/dist/cjs/jump-pagination-table.cjs.entry.js.map +1 -0
- package/dist/cjs/jump-pagination.cjs.entry.js +14 -26
- package/dist/cjs/jump-pagination.cjs.entry.js.map +1 -1
- package/dist/cjs/jump-tab.cjs.entry.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/jump-badge/jump-badge.css +1 -1
- package/dist/collection/components/jump-button/jump-button-dimension.stories.js +3 -3
- package/dist/collection/components/jump-button/jump-button-dimension.stories.js.map +1 -1
- package/dist/collection/components/jump-button/jump-button.css +12 -61
- package/dist/collection/components/jump-card/jump-card.stories.js +0 -8
- package/dist/collection/components/jump-card/jump-card.stories.js.map +1 -1
- package/dist/collection/components/jump-icon/jump-icon.css +4 -4
- package/dist/collection/components/jump-pagination/jump-pagination.css +8 -18
- package/dist/collection/components/jump-pagination/jump-pagination.js +20 -125
- package/dist/collection/components/jump-pagination/jump-pagination.js.map +1 -1
- package/dist/collection/components/jump-pagination/jump-pagination.stories.js +68 -0
- package/dist/collection/components/jump-pagination/jump-pagination.stories.js.map +1 -0
- package/dist/collection/components/jump-pagination-table/jump-pagination-table.css +56 -0
- package/dist/collection/components/jump-pagination-table/jump-pagination-table.js +262 -0
- package/dist/collection/components/jump-pagination-table/jump-pagination-table.js.map +1 -0
- package/dist/collection/components/jump-pagination-table/jump-pagination-table.stories.js +90 -0
- package/dist/collection/components/jump-pagination-table/jump-pagination-table.stories.js.map +1 -0
- package/dist/collection/components/jump-pagination-table/test/jump-pagination-table.e2e.js +10 -0
- package/dist/collection/components/jump-pagination-table/test/jump-pagination-table.e2e.js.map +1 -0
- package/dist/collection/components/jump-pagination-table/test/jump-pagination-table.spec.js +18 -0
- package/dist/collection/components/jump-pagination-table/test/jump-pagination-table.spec.js.map +1 -0
- package/dist/collection/components/jump-tab/jump-tab.js +1 -1
- package/dist/components/jump-badge.js +1 -1
- package/dist/components/jump-badge.js.map +1 -1
- package/dist/components/jump-button.js +1 -1
- package/dist/components/jump-button.js.map +1 -1
- package/dist/components/jump-icon2.js +1 -1
- package/dist/components/jump-icon2.js.map +1 -1
- package/dist/components/jump-pagination-table.d.ts +11 -0
- package/dist/components/jump-pagination-table.js +109 -0
- package/dist/components/jump-pagination-table.js.map +1 -0
- package/dist/components/jump-pagination.js +19 -37
- package/dist/components/jump-pagination.js.map +1 -1
- package/dist/components/jump-tab.js +1 -1
- package/dist/esm/jump-badge.entry.js +1 -1
- package/dist/esm/jump-badge.entry.js.map +1 -1
- package/dist/esm/jump-button.entry.js +1 -1
- package/dist/esm/jump-button.entry.js.map +1 -1
- package/dist/esm/jump-design-system.js +1 -1
- package/dist/esm/jump-icon.entry.js +1 -1
- package/dist/esm/jump-icon.entry.js.map +1 -1
- package/dist/esm/jump-pagination-table.entry.js +75 -0
- package/dist/esm/jump-pagination-table.entry.js.map +1 -0
- package/dist/esm/jump-pagination.entry.js +14 -26
- package/dist/esm/jump-pagination.entry.js.map +1 -1
- package/dist/esm/jump-tab.entry.js +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-1a533536.entry.js +2 -0
- package/dist/jump-design-system/p-1a533536.entry.js.map +1 -0
- package/dist/jump-design-system/{p-511d4425.entry.js → p-36c7c94d.entry.js} +2 -2
- package/dist/jump-design-system/{p-511d4425.entry.js.map → p-36c7c94d.entry.js.map} +1 -1
- package/dist/jump-design-system/{p-61729377.entry.js → p-93d8245f.entry.js} +2 -2
- package/dist/jump-design-system/{p-8f5caf32.entry.js → p-9ad27c08.entry.js} +2 -2
- package/dist/jump-design-system/{p-8f5caf32.entry.js.map → p-9ad27c08.entry.js.map} +1 -1
- package/dist/jump-design-system/p-c8244738.entry.js +2 -0
- package/dist/jump-design-system/p-c8244738.entry.js.map +1 -0
- package/dist/jump-design-system/p-eb16952a.entry.js +2 -0
- package/dist/jump-design-system/p-eb16952a.entry.js.map +1 -0
- package/dist/jump-design-system-elements.json +26 -5
- package/dist/types/components/jump-pagination/jump-pagination.d.ts +4 -22
- package/dist/types/components/jump-pagination/jump-pagination.stories.d.ts +30 -0
- package/dist/types/components/jump-pagination-table/jump-pagination-table.d.ts +23 -0
- package/dist/types/components/{jump-pagination/jump-pagination-products.stories.d.ts → jump-pagination-table/jump-pagination-table.stories.d.ts} +11 -39
- package/dist/types/components.d.ts +46 -15
- package/package.json +1 -1
- package/dist/collection/components/jump-pagination/jump-pagination-pages.stories.js +0 -119
- package/dist/collection/components/jump-pagination/jump-pagination-pages.stories.js.map +0 -1
- package/dist/collection/components/jump-pagination/jump-pagination-products.stories.js +0 -102
- package/dist/collection/components/jump-pagination/jump-pagination-products.stories.js.map +0 -1
- package/dist/jump-design-system/p-87256ed6.entry.js +0 -2
- package/dist/jump-design-system/p-87256ed6.entry.js.map +0 -1
- package/dist/jump-design-system/p-960188c6.entry.js +0 -2
- package/dist/jump-design-system/p-960188c6.entry.js.map +0 -1
- package/dist/types/components/jump-pagination/jump-pagination-pages.stories.d.ts +0 -75
- /package/dist/jump-design-system/{p-61729377.entry.js.map → p-93d8245f.entry.js.map} +0 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"jump-pagination-table.js","sourceRoot":"","sources":["../../../src/components/jump-pagination-table/jump-pagination-table.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOrF,MAAM,OAAO,mBAAmB;;8BAK2B,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,CAAC;yBAE9C,EAAE;wBAEc,IAAI;oCAKQ,qBAAqB;qBAEpC,GAAG;qBAGH,CAAC;oBACF,EAAE;gCAEW,KAAK;;IAK1D,gBAAgB,CAAC,QAAgB,EAAE,QAAgB;QACjD,IAAI,QAAQ,KAAK,QAAQ,EAAE,CAAC;YAC1B,6CAA6C;YAC7C,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;YACf,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;QAC7C,CAAC;QAGD,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QACtB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAC,SAAS,EAAE,QAAQ,EAAC,CAAC,CAAC;IACnD,CAAC;IAED,YAAY,CAAC,CAAC;QACZ,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;IAClC,CAAC;IAKD,YAAY,CAAC,GAAG;QACd,IAAI,QAAQ,CAAC;QACb,IAAI,OAAO,CAAC;QAEZ,mBAAmB;QACnB,IAAI,GAAG,KAAK,OAAO,EAAE,CAAC;YACpB,QAAQ,GAAG,CAAC,CAAC;YACb,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;QACjD,CAAC;aAAM,IAAI,GAAG,KAAK,MAAM,EAAE,CAAC;YAC1B,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC;YACrB,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,CAAC;QAC1D,CAAC;aAAM,IAAI,GAAG,KAAK,UAAU,EAAE,CAAC;YAC9B,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC;YACpD,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,QAAQ,GAAG,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,CAAC;QAChE,CAAC;aAAM,IAAI,GAAG,KAAK,MAAM,EAAE,CAAC;YAC1B,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC;YAC3D,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,CAAC;QACvD,CAAC;QAED,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;QACtB,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC;QAEpB,IAAI,OAAO,GAAG;YACZ,KAAK,EAAE,QAAQ;YACf,IAAI,EAAE,OAAO;YACb,SAAS,EAAE,GAAG;SACf,CAAA;QAGD,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAChC,CAAC;IAGD,MAAM;;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAC,qBAAqB;YAC/B,4DAAK,KAAK,EAAC,8BAA8B;gBACvC,4DAAK,KAAK,EAAC,iBAAiB;oBAC1B,8DAAO,OAAO,EAAC,UAAU,IAAE,MAAA,IAAI,CAAC,oBAAoB,mCAAI,mBAAmB,CAAS;oBACpF,+DAAQ,IAAI,EAAC,UAAU,EAAC,EAAE,EAAC,UAAU,EAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IACxE,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAClC,cAAQ,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,IAAI,CAAC,SAAS,IAAI,KAAK,CAAC,IAAI,IAAI,IAAG,KAAK,CAAU,CACpF,CAAC,CACK,CACL;gBACN,4DAAK,KAAK,EAAC,YAAY;oBACrB,4DAAK,KAAK,EAAC,UAAU;wBACnB;4BACE,+DAAO,IAAI,CAAC,KAAK,CAAQ;;4BAAG,+DAAO,IAAI,CAAC,IAAI,CAAQ;;4BAAE,IAAI,CAAC,QAAQ;;4BAAE,+DAAO,IAAI,CAAC,KAAK,CAAQ,CACzF,CACH;oBACN,4DAAK,KAAK,EAAC,OAAO;wBACf,IAAI,CAAC,gBAAgB;4BACpB,+DACE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,EACzC,QAAQ,EAAE,IAAI,CAAC,KAAK,KAAK,CAAC;gCAE1B,kEAAW,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,eAAe,GAAa,CACnD;wBAEX,+DACE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,EAC5C,QAAQ,EAAE,IAAI,CAAC,KAAK,KAAK,CAAC;4BAE1B,kEAAW,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,cAAc,GAAa,CAClD;wBACT,+DACE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,EACxC,QAAQ,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,KAAK;4BAElC,kEAAW,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,eAAe,GAAa,CACnD;wBACR,IAAI,CAAC,gBAAgB;4BACpB,+DACE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,EACxC,QAAQ,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,KAAK;gCAElC,kEAAW,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,gBAAgB,GAAa,CACpD,CAEP,CACF,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["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 /**\n * Values for the elements per page select\n */\n @Prop({ reflect: true }) elementsRanges: Array<number> = [10, 20, 60, 100];\n\n @Prop() elPerPage: number = 10;\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 @Prop({ reflect: true }) total: number = 100; // Totale di elementi, usata se completeVersion = true\n\n\n @Prop({ reflect: true }) first: number = 1;\n @Prop({ reflect: true }) last: number = 10;\n\n @Prop({ reflect: true }) showFirstAndLast: boolean = false;\n\n\n\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\n console.log('quaaaa');\n this.changeElPerPage.emit({elPerPage: newValue});\n }\n\n setElPerPage(e){\n this.elPerPage = e.target.value;\n }\n\n @Event({ eventName: 'jump-change-page' }) changePage: EventEmitter;\n @Event({ eventName: 'jump-change-el-per-page' }) changeElPerPage: EventEmitter;\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\n this.changePage.emit(details);\n }\n\n\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 }\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 <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 }\n </div>\n </div>\n </div>\n </Host>\n );\n }\n\n}\n"]}
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
import { generateAttributesFromArgs, formatHtml } from "../../utils/utils";
|
|
2
|
+
export default {
|
|
3
|
+
title: 'Components/Pagination/PaginationTable',
|
|
4
|
+
tags: ['autodocs'],
|
|
5
|
+
argTypes: {
|
|
6
|
+
pagLabel: {
|
|
7
|
+
name: "pag-label",
|
|
8
|
+
control: 'text',
|
|
9
|
+
description: 'Indica la dicitura di paginazione. Di default è "di".'
|
|
10
|
+
},
|
|
11
|
+
first: {
|
|
12
|
+
name: 'first',
|
|
13
|
+
control: 'number',
|
|
14
|
+
description: 'Indica il primo elemento della lista',
|
|
15
|
+
},
|
|
16
|
+
last: {
|
|
17
|
+
name: 'last',
|
|
18
|
+
control: 'number',
|
|
19
|
+
description: 'Indica l\'ultimo elemento della lista',
|
|
20
|
+
},
|
|
21
|
+
total: {
|
|
22
|
+
name: 'total',
|
|
23
|
+
control: 'number',
|
|
24
|
+
description: 'Indica il numero totale di elementi disponibili. ',
|
|
25
|
+
},
|
|
26
|
+
labelElementsPerPage: {
|
|
27
|
+
name: 'label-elements-per-page',
|
|
28
|
+
control: 'text',
|
|
29
|
+
description: 'Indica l\'etichetta per gli elementi per pagina',
|
|
30
|
+
},
|
|
31
|
+
elementsRanges: {
|
|
32
|
+
name: 'elements-range',
|
|
33
|
+
control: 'multi-select',
|
|
34
|
+
options: [10, 20, 30],
|
|
35
|
+
},
|
|
36
|
+
showFirstAndLast: {
|
|
37
|
+
name: 'show-first-and-last',
|
|
38
|
+
control: 'boolean',
|
|
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
|
+
}
|
|
42
|
+
};
|
|
43
|
+
const TemplatePagTable = (args) => {
|
|
44
|
+
const attributes = generateAttributesFromArgs(args);
|
|
45
|
+
return formatHtml(`<jump-pagination-table ${attributes}></jump-pagination-table>`);
|
|
46
|
+
};
|
|
47
|
+
export const TemplatePagTableWithListenerExample = (args, data) => {
|
|
48
|
+
let id = data.id;
|
|
49
|
+
const attributes = generateAttributesFromArgs(args);
|
|
50
|
+
return formatHtml(`<jump-pagination-table ${attributes}></jump-pagination-table>
|
|
51
|
+
<div>Stai visualizzando <span id="el-per-page">X</span> elementi per volta</div>
|
|
52
|
+
<script>
|
|
53
|
+
(function() {
|
|
54
|
+
let container;
|
|
55
|
+
container = document.querySelector('#story--${id}');
|
|
56
|
+
console.log(container);
|
|
57
|
+
})();
|
|
58
|
+
</script>`);
|
|
59
|
+
};
|
|
60
|
+
export const PlaygroundPagTable = TemplatePagTable.bind({});
|
|
61
|
+
PlaygroundPagTable.args = {
|
|
62
|
+
first: 1,
|
|
63
|
+
last: 10,
|
|
64
|
+
total: 100,
|
|
65
|
+
labelElementsPerPage: "Elementi per pagina",
|
|
66
|
+
elementsRanges: [10, 20, 60, 100],
|
|
67
|
+
pagLabel: 'di',
|
|
68
|
+
showFirstAndLast: false
|
|
69
|
+
};
|
|
70
|
+
export const PaginationTableRidotto = TemplatePagTableWithListenerExample.bind({});
|
|
71
|
+
PaginationTableRidotto.args = {
|
|
72
|
+
first: 1,
|
|
73
|
+
last: 10,
|
|
74
|
+
total: 100,
|
|
75
|
+
labelElementsPerPage: "Elementi per pagina",
|
|
76
|
+
elementsRanges: [10, 20, 60, 100],
|
|
77
|
+
pagLabel: 'di',
|
|
78
|
+
showFirstAndLast: false
|
|
79
|
+
};
|
|
80
|
+
export const PaginationTableCompleto = TemplatePagTableWithListenerExample.bind({});
|
|
81
|
+
PaginationTableCompleto.args = {
|
|
82
|
+
first: 1,
|
|
83
|
+
last: 10,
|
|
84
|
+
total: 100,
|
|
85
|
+
labelElementsPerPage: "Elementi per pagina",
|
|
86
|
+
elementsRanges: [10, 20, 60, 100],
|
|
87
|
+
pagLabel: 'di',
|
|
88
|
+
showFirstAndLast: true
|
|
89
|
+
};
|
|
90
|
+
//# sourceMappingURL=jump-pagination-table.stories.js.map
|
|
@@ -0,0 +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,gBAAgB;YACtB,OAAO,EAAE,cAAc;YACvB,OAAO,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;SACtB;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,CAAC,MAAM,mCAAmC,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE;IAChE,IAAI,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC;IACjB,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,UAAU,CAAC,0BAA0B,UAAU;;;;;4DAKI,EAAE;;;oBAG1C,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,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,CAAC;IACjC,QAAQ,EAAE,IAAI;IACd,gBAAgB,EAAE,KAAK;CACxB,CAAC;AAGF,MAAM,CAAC,MAAM,sBAAsB,GAAG,mCAAmC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEnF,sBAAsB,CAAC,IAAI,GAAG;IAC5B,KAAK,EAAE,CAAC;IACR,IAAI,EAAE,EAAE;IACR,KAAK,EAAE,GAAG;IACV,oBAAoB,EAAE,qBAAqB;IAC3C,cAAc,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,CAAC;IACjC,QAAQ,EAAE,IAAI;IACd,gBAAgB,EAAE,KAAK;CACxB,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,mCAAmC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEpF,uBAAuB,CAAC,IAAI,GAAG;IAC7B,KAAK,EAAE,CAAC;IACR,IAAI,EAAE,EAAE;IACR,KAAK,EAAE,GAAG;IACV,oBAAoB,EAAE,qBAAqB;IAC3C,cAAc,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,CAAC;IACjC,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-range',\n control: 'multi-select', \n options: [10, 20, 30],\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\nexport const TemplatePagTableWithListenerExample = (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 <script>\n (function() {\n let container;\n container = document.querySelector('#story--${id}');\n console.log(container);\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, 60, 100],\n pagLabel: 'di',\n showFirstAndLast: false\n};\n\n\nexport const PaginationTableRidotto = TemplatePagTableWithListenerExample.bind({});\n\nPaginationTableRidotto.args = {\n first: 1,\n last: 10,\n total: 100,\n labelElementsPerPage: \"Elementi per pagina\",\n elementsRanges: [10, 20, 60, 100],\n pagLabel: 'di',\n showFirstAndLast: false\n};\n\nexport const PaginationTableCompleto = TemplatePagTableWithListenerExample.bind({});\n\nPaginationTableCompleto.args = {\n first: 1,\n last: 10,\n total: 100,\n labelElementsPerPage: \"Elementi per pagina\",\n elementsRanges: [10, 20, 60, 100],\n pagLabel: 'di',\n showFirstAndLast: true\n};"]}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { newE2EPage } from "@stencil/core/testing";
|
|
2
|
+
describe('jump-pagination-table', () => {
|
|
3
|
+
it('renders', async () => {
|
|
4
|
+
const page = await newE2EPage();
|
|
5
|
+
await page.setContent('<jump-pagination-table></jump-pagination-table>');
|
|
6
|
+
const element = await page.find('jump-pagination-table');
|
|
7
|
+
expect(element).toHaveClass('hydrated');
|
|
8
|
+
});
|
|
9
|
+
});
|
|
10
|
+
//# sourceMappingURL=jump-pagination-table.e2e.js.map
|
package/dist/collection/components/jump-pagination-table/test/jump-pagination-table.e2e.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"jump-pagination-table.e2e.js","sourceRoot":"","sources":["../../../../src/components/jump-pagination-table/test/jump-pagination-table.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,uBAAuB,EAAE,GAAG,EAAE;IACrC,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;QAChC,MAAM,IAAI,CAAC,UAAU,CAAC,iDAAiD,CAAC,CAAC;QAEzE,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAC;QACzD,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-pagination-table', () => {\n it('renders', async () => {\n const page = await newE2EPage();\n await page.setContent('<jump-pagination-table></jump-pagination-table>');\n\n const element = await page.find('jump-pagination-table');\n expect(element).toHaveClass('hydrated');\n });\n});\n"]}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { newSpecPage } from "@stencil/core/testing";
|
|
2
|
+
import { JumpPaginationTable } from "../jump-pagination-table";
|
|
3
|
+
describe('jump-pagination-table', () => {
|
|
4
|
+
it('renders', async () => {
|
|
5
|
+
const page = await newSpecPage({
|
|
6
|
+
components: [JumpPaginationTable],
|
|
7
|
+
html: `<jump-pagination-table></jump-pagination-table>`,
|
|
8
|
+
});
|
|
9
|
+
expect(page.root).toEqualHtml(`
|
|
10
|
+
<jump-pagination-table>
|
|
11
|
+
<mock:shadow-root>
|
|
12
|
+
<slot></slot>
|
|
13
|
+
</mock:shadow-root>
|
|
14
|
+
</jump-pagination-table>
|
|
15
|
+
`);
|
|
16
|
+
});
|
|
17
|
+
});
|
|
18
|
+
//# sourceMappingURL=jump-pagination-table.spec.js.map
|
package/dist/collection/components/jump-pagination-table/test/jump-pagination-table.spec.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"jump-pagination-table.spec.js","sourceRoot":"","sources":["../../../../src/components/jump-pagination-table/test/jump-pagination-table.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAE/D,QAAQ,CAAC,uBAAuB,EAAE,GAAG,EAAE;IACrC,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,mBAAmB,CAAC;YACjC,IAAI,EAAE,iDAAiD;SACxD,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 { JumpPaginationTable } from '../jump-pagination-table';\n\ndescribe('jump-pagination-table', () => {\n it('renders', async () => {\n const page = await newSpecPage({\n components: [JumpPaginationTable],\n html: `<jump-pagination-table></jump-pagination-table>`,\n });\n expect(page.root).toEqualHtml(`\n <jump-pagination-table>\n <mock:shadow-root>\n <slot></slot>\n </mock:shadow-root>\n </jump-pagination-table>\n `);\n });\n});\n"]}
|
|
@@ -10,7 +10,7 @@ export class JumpTab {
|
|
|
10
10
|
console.log('tabNames', this.tabNames);
|
|
11
11
|
}
|
|
12
12
|
render() {
|
|
13
|
-
return (h(Host, { key: '
|
|
13
|
+
return (h(Host, { key: '6d974852fbbf04550ddd7eaad3dafbf784513c78', class: "JumpTab" }, (this.tabNames && this.activeTab) && this.tabNames.map((tabName) => (h("div", { class: `JumpTab__Tab ${this.activeTab === tabName ? 'active' : ''}` }, tabName)))));
|
|
14
14
|
}
|
|
15
15
|
static get is() { return "jump-tab"; }
|
|
16
16
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
|
|
2
2
|
|
|
3
|
-
const jumpBadgeCss = "jump-badge{--jump-badge-background:var(--primary-standard);--jump-badge-color:#fff;--jump-bafge-border-radius:50px;display:inline-flex;color:var(--jump-badge-color);background-color:var(--jump-badge-background);align-items:center;justify-content:center;font-size:var(--fs-300);font-weight:var(--fw-
|
|
3
|
+
const jumpBadgeCss = "jump-badge{--jump-badge-background:var(--primary-standard);--jump-badge-color:#fff;--jump-bafge-border-radius:50px;display:inline-flex;color:var(--jump-badge-color);background-color:var(--jump-badge-background);align-items:center;justify-content:center;font-size:var(--fs-300);font-weight:var(--fw-900);line-height:1;border-radius:var(--jump-bafge-border-radius);border:solid 1px var(--jump-bafge-border-radius);white-space:nowrap;padding:0.35em 0.6em;user-select:none;cursor:inherit}jump-badge[variant=primary]{--jump-badge-background:var(--primary-standard)}jump-badge[variant=secondary]{--jump-badge-background:var(--secondary-standard)}";
|
|
4
4
|
const JumpBadgeStyle0 = jumpBadgeCss;
|
|
5
5
|
|
|
6
6
|
const AppBadge = /*@__PURE__*/ proxyCustomElement(class AppBadge extends HTMLElement {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"jump-badge.js","mappings":";;AAAA,MAAM,YAAY,GAAG,koBAAkoB,CAAC;AACxpB,wBAAe,YAAY;;MCMd,QAAQ;;;;qBAIK,EAAE;uBAKe,SAAS;;IAElD,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,OAAO,EAAE,IAAI,CAAC,OAAO,IACxB,IAAI,CAAC,KAAK,CACN,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/jump-badge/jump-badge.scss?tag=jump-badge","src/components/jump-badge/jump-badge.tsx"],"sourcesContent":["jump-badge {\n --jump-badge-background: var(--primary-standard);\n --jump-badge-color: #fff;\n --jump-bafge-border-radius: 50px;\n\n display: inline-flex;\n color: var(--jump-badge-color);\n background-color: var(--jump-badge-background);\n align-items: center;\n justify-content: center;\n font-size: var(--fs-300);\n font-weight: var(--fw-
|
|
1
|
+
{"file":"jump-badge.js","mappings":";;AAAA,MAAM,YAAY,GAAG,koBAAkoB,CAAC;AACxpB,wBAAe,YAAY;;MCMd,QAAQ;;;;qBAIK,EAAE;uBAKe,SAAS;;IAElD,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,OAAO,EAAE,IAAI,CAAC,OAAO,IACxB,IAAI,CAAC,KAAK,CACN,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/jump-badge/jump-badge.scss?tag=jump-badge","src/components/jump-badge/jump-badge.tsx"],"sourcesContent":["jump-badge {\n --jump-badge-background: var(--primary-standard);\n --jump-badge-color: #fff;\n --jump-bafge-border-radius: 50px;\n\n display: inline-flex;\n color: var(--jump-badge-color);\n background-color: var(--jump-badge-background);\n align-items: center;\n justify-content: center;\n font-size: var(--fs-300);\n font-weight: var(--fw-900);\n line-height: 1;\n border-radius: var(--jump-bafge-border-radius);\n border: solid 1px var(--jump-bafge-border-radius);\n white-space: nowrap;\n padding: 0.35em 0.6em;\n user-select: none;\n cursor: inherit;\n\n &[variant='primary'] {\n --jump-badge-background: var(--primary-standard);\n }\n\n &[variant='secondary'] {\n --jump-badge-background: var(--secondary-standard);\n }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'jump-badge',\n styleUrl: 'jump-badge.scss',\n shadow: false,\n})\nexport class AppBadge {\n /**\n * Indicates the label of the badge\n */\n @Prop() label: string = '';\n\n /**\n * Indicates the variant of the badge\n */\n @Prop() variant: 'primary'|'secondary' = 'primary';\n\n render() {\n return (\n <Host variant={this.variant}>\n {this.label}\n </Host>\n );\n }\n\n}\n"],"version":3}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
|
|
2
2
|
|
|
3
|
-
const jumpButtonCss = ":
|
|
3
|
+
const jumpButtonCss = ":host button,:host a{background-color:transparent;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer}:host{--jump-button-color:#ffffff;--jump-button-color-disabled:#cbcbcb;--jump-button-background:var(--primary-standard);--jump-button-background-outline:transparent;--jump-button-color-hover:#ffffff;--jump-button-background-hover:var(--primary-hard);--jump-button-border-radius:var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem);--jump-button-padding:1rem 1.25rem}:host button{display:flex}:host a{display:inline-flex;box-sizing:border-box}:host button,:host a{background-color:var(--jump-button-background);border-radius:var(--jump-button-border-radius);color:var(--jump-button-color);position:relative;font-family:var(--ff-primary, \"Arial\"), sans-serif;font-weight:var(--fw-700, 700);font-size:var(--fs-400, 1rem);line-height:var(--lh-400, 1.3);align-items:center;gap:var(--jump-button-gap, 0.5rem);text-decoration:none;padding:var(--jump-button-padding)}:host button:hover,:host a:hover{background-color:var(--jump-button-background-hover);color:var(--jump-button-color-hover)}:host button[data-variant=primary],:host a[data-variant=primary]{--jump-button-color:var(--neutral-white);--jump-button-background:var(--primary-standard);--jump-button-color-hover:var(--neutral-white);--jump-button-background-hover:var(--primary-hard)}:host button[data-variant=secondary],:host a[data-variant=secondary]{--jump-button-color:var(--neutral-white);--jump-button-background:var(--secondary-standard);--jump-button-color-hover:var(--neutral-white);--jump-button-background-hover:var(--secondary-hard)}:host button[data-variant=neutral],:host a[data-variant=neutral]{--jump-button-color:var(--neutral-white);--jump-button-background:var(--neutral-grey-secondary);--jump-button-color-hover:var(--neutral-white);--jump-button-background-hover:var(--neutral-grey-primary)}:host button[data-variant=white],:host a[data-variant=white]{--jump-button-color:var(--neutral-grey-primary);--jump-button-background:var(--neutral-white);--jump-button-color-hover:var(--neutral-grey-primary);--jump-button-background-hover:var(--neutral-grey-background)}:host button[disabled],:host a[disabled]{--jump-button-background:var(--jump-button-color-disabled);--jump-button-background-hover:var(--jump-button-color-disabled);cursor:not-allowed}:host button[data-pill],:host a[data-pill]{border-radius:100rem}:host button[data-size=small],:host a[data-size=small]{font-size:var(--fs-300, 0.875rem);line-height:var(--lh-300, 1.2);--jump-button-padding:0.65rem 1rem}:host button[data-size=medium],:host a[data-size=medium]{font-size:var(--fs-400, 1rem);line-height:var(--lh-400, 1.3);--jump-button-padding:0.75rem 1.25rem}:host button[data-size=large],:host a[data-size=large]{font-size:var(--fs-500, 1.125rem);line-height:var(--lh-500, 1.4);--jump-button-padding:1rem 1.5rem}:host button[data-outline],:host a[data-outline]{background-color:var(--jump-button-background-outline);border:1px solid var(--jump-button-background);color:var(--jump-button-background)}:host button[data-outline]:hover,:host a[data-outline]:hover{background-color:var(--jump-button-background-hover);border:1px solid var(--jump-button-background-hover);color:var(--jump-button-color-hover)}:host button[data-text],:host a[data-text]{background-color:transparent;border:none;color:var(--jump-button-background);padding:0}:host button[data-text]:hover,:host a[data-text]:hover{background-color:transparent;border:none;color:var(--jump-button-background-hover)}:host button[data-only-icon],:host a[data-only-icon]{--jump-button-padding:0.5rem}:host button[data-only-icon][data-size=small],:host a[data-only-icon][data-size=small]{--jump-button-padding:0.5rem}:host button[data-only-icon][data-size=medium],:host a[data-only-icon][data-size=medium]{--jump-button-padding:0.875rem}:host button[data-only-icon][data-size=large],:host a[data-only-icon][data-size=large]{--jump-button-padding:1rem}:host button[data-full],:host a[data-full]{width:100%;justify-content:center}:host button.chat,:host a.chat{--jump-button-color:var(--neutral-white);--jump-button-background:hsla(133, 54%, 58%, 1);--jump-button-color-hover:var(--neutral-white);--jump-button-background-hover:hsla(161, 63%, 31%, 1)}";
|
|
4
4
|
const JumpButtonStyle0 = jumpButtonCss;
|
|
5
5
|
|
|
6
6
|
const JumpButton$1 = /*@__PURE__*/ proxyCustomElement(class JumpButton extends HTMLElement {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"jump-button.js","mappings":";;AAAA,MAAM,aAAa,GAAG,gxKAAgxK,CAAC;AACvyK,yBAAe,aAAa;;MCMfA,YAAU;;;;;wBAIO,KAAK;uBAK0B,SAAS;uBAKzC,KAAK;oBAKT,QAAQ;oBAKP,KAAK;oBAKL,KAAK;oBAKL,KAAK;wBAKD,KAAK;;;oBAeS,QAAQ;oBAK3B,SAAS;qBAKR,SAAS;yBAKL,SAAS;qBAKb,SAAS;wBAKN,SAAS;;IAEpC,iBAAiB;QACf,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC;KACjD;IAED,MAAM;QAEJ,QACE,EAAC,IAAI,uDACF,IAAI,CAAC,IAAI,IACR,SAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,kBAAgB,IAAI,CAAC,OAAO,kBAAgB,IAAI,CAAC,OAAO,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,oBAAkB,IAAI,CAAC,QAAQ,gBAAc,IAAI,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,IACtR,YAAM,IAAI,EAAC,QAAQ,GAAQ,EAC1B,CAAC,IAAI,CAAC,QAAQ,IAAI,eAAa,EAChC,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACzB,KAEJ,cAAQ,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,kBAAgB,IAAI,CAAC,OAAO,kBAAgB,IAAI,CAAC,OAAO,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,oBAAkB,IAAI,CAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,gBAAc,IAAI,CAAC,SAAS,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IACnU,YAAM,IAAI,EAAC,QAAQ,GAAQ,EAC1B,CAAC,IAAI,CAAC,QAAQ,IAAI,eAAa,EAChC,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACpB,CACV,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["JumpButton"],"sources":["src/components/jump-button/jump-button.scss?tag=jump-button&encapsulation=shadow","src/components/jump-button/jump-button.tsx"],"sourcesContent":[":root {\n /*BASE COLOR RULES*/\n --neutral-grey-background: #eeeeee;\n --neutral-grey-disabled: #cbcbcb;\n --neutral-grey-primary: #282828;\n --neutral-grey-secondary: #707070;\n --neutral-white: #ffffff;\n --primary-hard: #e75a50;\n --primary-soft: #ffeae9;\n --primary-standard: #fa7268;\n --secondary-hard: #435171;\n --secondary-soft: #dde3ed;\n --secondary-standard: #5e79ba;\n --status-danger-hard: #ba250a;\n --status-danger-soft: #fdd3d1;\n --status-danger-standard: #d72c0d;\n --status-interaction-hard: #22559e;\n --status-interaction-soft: #f2f7fe;\n --status-interaction-standard: #2c6ecb;\n --status-success-hard: #156048;\n --status-success-soft: #f1f8f5;\n --status-success-standard: #1d7f60;\n --status-warning-hard: #987100;\n --status-warning-soft: #fef5ea;\n --status-warning-standard: #b98900;\n\n /*TYPOGRAPHY RULES*/\n --ff-primary: 'Inter';\n --ff-secondary: 'Prompt';\n\n --lh-300: 1.25rem;\n --lh-400: 1.5rem;\n --lh-500: 1.625rem;\n --lh-600: 2rem;\n --lh-700: 2.75rem;\n --lh-800: 3.5rem;\n --lh-850: 4.375rem;\n --lh-900: 5.5rem;\n --fs-300: 0.875rem;\n --fs-400: 1rem;\n --fs-500: 1.125rem;\n --fs-600: 1.5rem;\n --fs-700: 2.25rem;\n --fs-800: 3rem;\n --fs-850: 3.75rem;\n --fs-900: 4.5rem;\n --fw-300: 300;\n --fw-400: 400;\n --fw-900: 700;\n}\n\n%reset-button {\n background-color: transparent;\n border: none;\n padding: 0;\n margin: 0;\n font: inherit;\n color: inherit;\n cursor: pointer;\n}\n\n:host {\n // display: inline-flex;\n // align-items: center;\n --jump-button-color: #ffffff;\n --jump-button-color-disabled: #cbcbcb;\n --jump-button-background: var(--primary-standard);\n --jump-button-background-outline: transparent;\n --jump-button-color-hover: #ffffff;\n --jump-button-background-hover: var(--primary-hard);\n --jump-button-border-radius: var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem);\n --jump-button-padding: 1rem 1.25rem;\n\n button,\n a {\n @extend %reset-button;\n background-color: var(--jump-button-background);\n border-radius: var(--jump-button-border-radius);\n color: var(--jump-button-color);\n position: relative;\n font-family: var(--ff-primary, 'Arial'), sans-serif;\n font-weight: var(--fw-700, 700);\n font-size: var(--fs-400, 1rem);\n line-height: var(--lh-400, 1.3);\n display: flex;\n align-items: center;\n gap: var(--jump-button-gap, 0.5rem);\n text-decoration: none;\n\n //TODO: internal padding of the button\n padding: var(--jump-button-padding);\n\n // TODO: gestire il focus con un outline\n &:hover {\n background-color: var(--jump-button-background-hover);\n color: var(--jump-button-color-hover);\n }\n\n &[data-variant='primary'] {\n --jump-button-color: var(--neutral-white);\n --jump-button-background: var(--primary-standard);\n --jump-button-color-hover: var(--neutral-white);\n --jump-button-background-hover: var(--primary-hard);\n }\n\n &[data-variant='secondary'] {\n --jump-button-color: var(--neutral-white);\n --jump-button-background: var(--secondary-standard);\n --jump-button-color-hover: var(--neutral-white);\n --jump-button-background-hover: var(--secondary-hard);\n }\n\n &[data-variant='neutral'] {\n --jump-button-color: var(--neutral-white);\n --jump-button-background: var(--neutral-grey-secondary);\n --jump-button-color-hover: var(--neutral-white);\n --jump-button-background-hover: var(--neutral-grey-primary);\n }\n\n &[data-variant='white'] {\n --jump-button-color: var(--neutral-grey-primary);\n --jump-button-background: var(--neutral-white);\n --jump-button-color-hover: var(--neutral-grey-primary);\n --jump-button-background-hover: var(--neutral-grey-background);\n }\n\n &[disabled] {\n --jump-button-background: var(--jump-button-color-disabled);\n --jump-button-background-hover: var(--jump-button-color-disabled);\n cursor: not-allowed;\n }\n\n &[data-pill] {\n border-radius: 100rem;\n }\n\n &[data-size='small'] {\n font-size: var(--fs-300, 0.875rem);\n line-height: var(--lh-300, 1.2);\n --jump-button-padding: 0.65rem 1rem;\n }\n\n &[data-size='medium'] {\n font-size: var(--fs-400, 1rem);\n line-height: var(--lh-400, 1.3);\n --jump-button-padding: 0.75rem 1.25rem;\n }\n\n &[data-size='large'] {\n font-size: var(--fs-500, 1.125rem);\n line-height: var(--lh-500, 1.4);\n --jump-button-padding: 1rem 1.5rem;\n }\n\n &[data-outline] {\n background-color: var(--jump-button-background-outline);\n border: 1px solid var(--jump-button-background);\n color: var(--jump-button-background);\n &:hover {\n background-color: var(--jump-button-background-hover);\n border: 1px solid var(--jump-button-background-hover);\n color: var(--jump-button-color-hover);\n }\n }\n\n &[data-text] {\n background-color: transparent;\n border: none;\n color: var(--jump-button-background);\n padding: 0;\n &:hover {\n background-color: transparent;\n border: none;\n color: var(--jump-button-background-hover);\n }\n }\n\n &[data-only-icon] {\n --jump-button-padding: 0.5rem;\n }\n\n &[data-only-icon][data-size='small'] {\n --jump-button-padding: 0.5rem;\n }\n &[data-only-icon][data-size='medium'] {\n --jump-button-padding: 0.875rem;\n }\n &[data-only-icon][data-size='large'] {\n --jump-button-padding: 1rem;\n }\n\n &.chat {\n --jump-button-color: var(--neutral-white);\n --jump-button-background: hsla(133, 54%, 58%, 1);\n --jump-button-color-hover: var(--neutral-white);\n --jump-button-background-hover: hsla(161, 63%, 31%, 1);\n }\n }\n\n button {\n &[data-full] {\n width: 100%;\n justify-content: center;\n }\n }\n\n a {\n display: inline-flex;\n\n &[data-full] {\n width: 100%;\n justify-content: center;\n }\n }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'jump-button',\n styleUrl: 'jump-button.scss',\n shadow: true,\n})\nexport class JumpButton {\n /**\n * Set the button as disabled; Vale solo per i bottoni\n */\n @Prop() disabled: boolean = false;\n\n /**\n * Indicates the variant of the button\n */\n @Prop() variant: 'primary'|'secondary'|'white'|'neutral' = 'primary';\n\n /**\n * Indicates the button as outline\n */\n @Prop() outline: boolean = false;\n\n /**\n * Indicates the size of the button\n */\n @Prop() size: string = 'medium';\n\n /**\n * Indicates if the button is full width\n */\n @Prop() full: boolean = false;\n\n /**\n * Indicates the button as pill\n */\n @Prop() pill: boolean = false;\n\n /**\n * Indicates the button as text\n */\n @Prop() text: boolean = false;\n\n /**\n * Indicates the button as only icon\n **/\n @Prop() onlyIcon: boolean = false;\n\n /**\n * Indicates if button becames a anchor\n **/\n @Prop() href: string;\n\n /**\n * Indicates the type of anchor's target \n **/\n @Prop() target: '_blank' | '_parent' | '_self' | '_top'\n\n /**\n * Indicates type button\n **/\n @Prop() type: 'button'|'submit'|'reset' = 'button';\n\n /**\n * Indicates the name that the sender button will send\n **/\n @Prop() name: string = undefined;\n\n /**\n * Indicates the value that the sender button will send\n **/\n @Prop() value: string = undefined;\n\n /**\n * Indicates the value of text alternative to an element that has no visible text on the screen\n **/\n @Prop() ariaLabel: string = undefined;\n\n /**\n * Indicates classes of the component\n **/\n @Prop() class: string = undefined;\n\n /**\n * Indicates classes of the component\n **/\n @Prop() buttonId: string = undefined;\n\n componentWillLoad() {\n this.target = this.href ? this.target : '_self';\n }\n\n render() {\n \n return (\n <Host>\n {this.href ? (\n <a href={this.href} id={this.buttonId} class={this.class} data-variant={this.variant} data-outline={this.outline} data-size={this.size} data-full={this.full} data-pill={this.pill} data-text={this.text} data-only-icon={this.onlyIcon} aria-label={this.ariaLabel} target={this.target}>\n <slot name=\"prefix\"></slot>\n {!this.onlyIcon && <slot></slot>}\n <slot name=\"suffix\"></slot>\n </a>\n ) : ( \n <button id={this.buttonId} class={this.class} data-variant={this.variant} data-outline={this.outline} data-size={this.size} data-full={this.full} data-pill={this.pill} data-text={this.text} data-only-icon={this.onlyIcon} disabled={this.disabled} aria-label={this.ariaLabel} type={this.type} name={this.name} value={this.value}>\n <slot name=\"prefix\"></slot>\n {!this.onlyIcon && <slot></slot> }\n <slot name=\"suffix\"></slot>\n </button>\n )}\n </Host>\n );\n }\n\n}\n"],"version":3}
|
|
1
|
+
{"file":"jump-button.js","mappings":";;AAAA,MAAM,aAAa,GAAG,0vIAA0vI,CAAC;AACjxI,yBAAe,aAAa;;MCMfA,YAAU;;;;;wBAIO,KAAK;uBAK0B,SAAS;uBAKzC,KAAK;oBAKT,QAAQ;oBAKP,KAAK;oBAKL,KAAK;oBAKL,KAAK;wBAKD,KAAK;;;oBAeS,QAAQ;oBAK3B,SAAS;qBAKR,SAAS;yBAKL,SAAS;qBAKb,SAAS;wBAKN,SAAS;;IAEpC,iBAAiB;QACf,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC;KACjD;IAED,MAAM;QAEJ,QACE,EAAC,IAAI,uDACF,IAAI,CAAC,IAAI,IACR,SAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,kBAAgB,IAAI,CAAC,OAAO,kBAAgB,IAAI,CAAC,OAAO,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,oBAAkB,IAAI,CAAC,QAAQ,gBAAc,IAAI,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,IACtR,YAAM,IAAI,EAAC,QAAQ,GAAQ,EAC1B,CAAC,IAAI,CAAC,QAAQ,IAAI,eAAa,EAChC,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACzB,KAEJ,cAAQ,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,kBAAgB,IAAI,CAAC,OAAO,kBAAgB,IAAI,CAAC,OAAO,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,oBAAkB,IAAI,CAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,gBAAc,IAAI,CAAC,SAAS,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IACnU,YAAM,IAAI,EAAC,QAAQ,GAAQ,EAC1B,CAAC,IAAI,CAAC,QAAQ,IAAI,eAAa,EAChC,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACpB,CACV,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["JumpButton"],"sources":["src/components/jump-button/jump-button.scss?tag=jump-button&encapsulation=shadow","src/components/jump-button/jump-button.tsx"],"sourcesContent":["%reset-button {\n background-color: transparent;\n border: none;\n padding: 0;\n margin: 0;\n font: inherit;\n color: inherit;\n cursor: pointer;\n}\n\n:host {\n // display: inline-flex;\n // align-items: center;\n --jump-button-color: #ffffff;\n --jump-button-color-disabled: #cbcbcb;\n --jump-button-background: var(--primary-standard);\n --jump-button-background-outline: transparent;\n --jump-button-color-hover: #ffffff;\n --jump-button-background-hover: var(--primary-hard);\n --jump-button-border-radius: var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem);\n --jump-button-padding: 1rem 1.25rem;\n\n button {\n display: flex;\n }\n\n a {\n display: inline-flex;\n box-sizing: border-box;\n }\n\n button,\n a {\n @extend %reset-button;\n background-color: var(--jump-button-background);\n border-radius: var(--jump-button-border-radius);\n color: var(--jump-button-color);\n position: relative;\n font-family: var(--ff-primary, 'Arial'), sans-serif;\n font-weight: var(--fw-700, 700);\n font-size: var(--fs-400, 1rem);\n line-height: var(--lh-400, 1.3);\n align-items: center;\n gap: var(--jump-button-gap, 0.5rem);\n text-decoration: none;\n\n //TODO: internal padding of the button\n padding: var(--jump-button-padding);\n\n // TODO: gestire il focus con un outline\n &:hover {\n background-color: var(--jump-button-background-hover);\n color: var(--jump-button-color-hover);\n }\n\n &[data-variant='primary'] {\n --jump-button-color: var(--neutral-white);\n --jump-button-background: var(--primary-standard);\n --jump-button-color-hover: var(--neutral-white);\n --jump-button-background-hover: var(--primary-hard);\n }\n\n &[data-variant='secondary'] {\n --jump-button-color: var(--neutral-white);\n --jump-button-background: var(--secondary-standard);\n --jump-button-color-hover: var(--neutral-white);\n --jump-button-background-hover: var(--secondary-hard);\n }\n\n &[data-variant='neutral'] {\n --jump-button-color: var(--neutral-white);\n --jump-button-background: var(--neutral-grey-secondary);\n --jump-button-color-hover: var(--neutral-white);\n --jump-button-background-hover: var(--neutral-grey-primary);\n }\n\n &[data-variant='white'] {\n --jump-button-color: var(--neutral-grey-primary);\n --jump-button-background: var(--neutral-white);\n --jump-button-color-hover: var(--neutral-grey-primary);\n --jump-button-background-hover: var(--neutral-grey-background);\n }\n\n &[disabled] {\n --jump-button-background: var(--jump-button-color-disabled);\n --jump-button-background-hover: var(--jump-button-color-disabled);\n cursor: not-allowed;\n }\n\n &[data-pill] {\n border-radius: 100rem;\n }\n\n &[data-size='small'] {\n font-size: var(--fs-300, 0.875rem);\n line-height: var(--lh-300, 1.2);\n --jump-button-padding: 0.65rem 1rem;\n }\n\n &[data-size='medium'] {\n font-size: var(--fs-400, 1rem);\n line-height: var(--lh-400, 1.3);\n --jump-button-padding: 0.75rem 1.25rem;\n }\n\n &[data-size='large'] {\n font-size: var(--fs-500, 1.125rem);\n line-height: var(--lh-500, 1.4);\n --jump-button-padding: 1rem 1.5rem;\n }\n\n &[data-outline] {\n background-color: var(--jump-button-background-outline);\n border: 1px solid var(--jump-button-background);\n color: var(--jump-button-background);\n &:hover {\n background-color: var(--jump-button-background-hover);\n border: 1px solid var(--jump-button-background-hover);\n color: var(--jump-button-color-hover);\n }\n }\n\n &[data-text] {\n background-color: transparent;\n border: none;\n color: var(--jump-button-background);\n padding: 0;\n &:hover {\n background-color: transparent;\n border: none;\n color: var(--jump-button-background-hover);\n }\n }\n\n &[data-only-icon] {\n --jump-button-padding: 0.5rem;\n }\n\n &[data-only-icon][data-size='small'] {\n --jump-button-padding: 0.5rem;\n }\n &[data-only-icon][data-size='medium'] {\n --jump-button-padding: 0.875rem;\n }\n &[data-only-icon][data-size='large'] {\n --jump-button-padding: 1rem;\n }\n\n &[data-full] {\n width: 100%;\n justify-content: center;\n }\n\n &.chat {\n --jump-button-color: var(--neutral-white);\n --jump-button-background: hsla(133, 54%, 58%, 1);\n --jump-button-color-hover: var(--neutral-white);\n --jump-button-background-hover: hsla(161, 63%, 31%, 1);\n }\n }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'jump-button',\n styleUrl: 'jump-button.scss',\n shadow: true,\n})\nexport class JumpButton {\n /**\n * Set the button as disabled; Vale solo per i bottoni\n */\n @Prop() disabled: boolean = false;\n\n /**\n * Indicates the variant of the button\n */\n @Prop() variant: 'primary'|'secondary'|'white'|'neutral' = 'primary';\n\n /**\n * Indicates the button as outline\n */\n @Prop() outline: boolean = false;\n\n /**\n * Indicates the size of the button\n */\n @Prop() size: string = 'medium';\n\n /**\n * Indicates if the button is full width\n */\n @Prop() full: boolean = false;\n\n /**\n * Indicates the button as pill\n */\n @Prop() pill: boolean = false;\n\n /**\n * Indicates the button as text\n */\n @Prop() text: boolean = false;\n\n /**\n * Indicates the button as only icon\n **/\n @Prop() onlyIcon: boolean = false;\n\n /**\n * Indicates if button becames a anchor\n **/\n @Prop() href: string;\n\n /**\n * Indicates the type of anchor's target \n **/\n @Prop() target: '_blank' | '_parent' | '_self' | '_top'\n\n /**\n * Indicates type button\n **/\n @Prop() type: 'button'|'submit'|'reset' = 'button';\n\n /**\n * Indicates the name that the sender button will send\n **/\n @Prop() name: string = undefined;\n\n /**\n * Indicates the value that the sender button will send\n **/\n @Prop() value: string = undefined;\n\n /**\n * Indicates the value of text alternative to an element that has no visible text on the screen\n **/\n @Prop() ariaLabel: string = undefined;\n\n /**\n * Indicates classes of the component\n **/\n @Prop() class: string = undefined;\n\n /**\n * Indicates classes of the component\n **/\n @Prop() buttonId: string = undefined;\n\n componentWillLoad() {\n this.target = this.href ? this.target : '_self';\n }\n\n render() {\n \n return (\n <Host>\n {this.href ? (\n <a href={this.href} id={this.buttonId} class={this.class} data-variant={this.variant} data-outline={this.outline} data-size={this.size} data-full={this.full} data-pill={this.pill} data-text={this.text} data-only-icon={this.onlyIcon} aria-label={this.ariaLabel} target={this.target}>\n <slot name=\"prefix\"></slot>\n {!this.onlyIcon && <slot></slot>}\n <slot name=\"suffix\"></slot>\n </a>\n ) : ( \n <button id={this.buttonId} class={this.class} data-variant={this.variant} data-outline={this.outline} data-size={this.size} data-full={this.full} data-pill={this.pill} data-text={this.text} data-only-icon={this.onlyIcon} disabled={this.disabled} aria-label={this.ariaLabel} type={this.type} name={this.name} value={this.value}>\n <slot name=\"prefix\"></slot>\n {!this.onlyIcon && <slot></slot> }\n <slot name=\"suffix\"></slot>\n </button>\n )}\n </Host>\n );\n }\n\n}\n"],"version":3}
|
|
@@ -2394,7 +2394,7 @@ module.exports = __webpack_require__(/*! /home/runner/work/feather/feather/src/i
|
|
|
2394
2394
|
|
|
2395
2395
|
const feather = /*@__PURE__*/getDefaultExportFromCjs(feather$1.exports);
|
|
2396
2396
|
|
|
2397
|
-
const jumpIconCss = "
|
|
2397
|
+
const jumpIconCss = ":host{display:inline-flex}:host svg{width:1rem;height:1rem}";
|
|
2398
2398
|
const JumpIconStyle0 = jumpIconCss;
|
|
2399
2399
|
|
|
2400
2400
|
const JumpIcon = /*@__PURE__*/ proxyCustomElement(class JumpIcon extends HTMLElement {
|