@jumpgroup/jump-design-system 0.3.40 → 0.3.42

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (123) hide show
  1. package/dist/cjs/jump-design-system.cjs.js +1 -1
  2. package/dist/cjs/jump-filter-checkbox.cjs.entry.js +2 -2
  3. package/dist/cjs/jump-filter.cjs.entry.js +15 -5
  4. package/dist/cjs/jump-filter.cjs.entry.js.map +1 -1
  5. package/dist/cjs/jump-filtergroup.cjs.entry.js +3 -3
  6. package/dist/cjs/jump-navbar.cjs.entry.js +5 -5
  7. package/dist/cjs/jump-pagination-table.cjs.entry.js +3 -3
  8. package/dist/cjs/jump-pagination.cjs.entry.js +3 -3
  9. package/dist/cjs/jump-quantity.cjs.entry.js +3 -3
  10. package/dist/cjs/jump-search-bar.cjs.entry.js +2 -2
  11. package/dist/cjs/jump-tab-item.cjs.entry.js +2 -2
  12. package/dist/cjs/jump-tab-panel.cjs.entry.js +1 -1
  13. package/dist/cjs/jump-tab.cjs.entry.js +2 -2
  14. package/dist/cjs/jump-tab.cjs.entry.js.map +1 -1
  15. package/dist/cjs/loader.cjs.js +1 -1
  16. package/dist/collection/components/jump-accordion/jump-accordion.stories.js +18 -0
  17. package/dist/collection/components/jump-accordion/jump-accordion.stories.js.map +1 -1
  18. package/dist/collection/components/jump-accordion-group/jump-accordion-group.stories.js +8 -1
  19. package/dist/collection/components/jump-accordion-group/jump-accordion-group.stories.js.map +1 -1
  20. package/dist/collection/components/jump-filter/jump-filter.css +23 -0
  21. package/dist/collection/components/jump-filter/jump-filter.js +52 -5
  22. package/dist/collection/components/jump-filter/jump-filter.js.map +1 -1
  23. package/dist/collection/components/jump-filter/jump-filter.stories.js +5 -0
  24. package/dist/collection/components/jump-filter/jump-filter.stories.js.map +1 -1
  25. package/dist/collection/components/jump-filter-checkbox/jump-filter-checkbox.js +2 -2
  26. package/dist/collection/components/jump-filtergroup/jump-filtergroup.js +3 -3
  27. package/dist/collection/components/jump-navbar/jump-navbar.js +5 -5
  28. package/dist/collection/components/jump-pagination/jump-pagination.js +3 -3
  29. package/dist/collection/components/jump-pagination/jump-pagination.stories.js +19 -3
  30. package/dist/collection/components/jump-pagination/jump-pagination.stories.js.map +1 -1
  31. package/dist/collection/components/jump-pagination-table/jump-pagination-table.js +3 -3
  32. package/dist/collection/components/jump-pagination-table/jump-pagination-table.stories.js +31 -3
  33. package/dist/collection/components/jump-pagination-table/jump-pagination-table.stories.js.map +1 -1
  34. package/dist/collection/components/jump-quantity/jump-quantity.js +3 -3
  35. package/dist/collection/components/jump-search-bar/jump-search-bar.js +2 -2
  36. package/dist/collection/components/jump-search-bar/jump-search-bar.stories.js +23 -3
  37. package/dist/collection/components/jump-search-bar/jump-search-bar.stories.js.map +1 -1
  38. package/dist/collection/components/jump-tab/jump-tab.css +1 -0
  39. package/dist/collection/components/jump-tab/jump-tab.js +1 -1
  40. package/dist/collection/components/jump-tab/jump-tab.js.map +1 -1
  41. package/dist/collection/components/jump-tab/jump-tab.stories.js +1 -0
  42. package/dist/collection/components/jump-tab/jump-tab.stories.js.map +1 -1
  43. package/dist/collection/components/jump-tab-item/jump-tab-item-boxed.stories.js +25 -4
  44. package/dist/collection/components/jump-tab-item/jump-tab-item-boxed.stories.js.map +1 -1
  45. package/dist/collection/components/jump-tab-item/jump-tab-item-inline.stories.js +25 -4
  46. package/dist/collection/components/jump-tab-item/jump-tab-item-inline.stories.js.map +1 -1
  47. package/dist/collection/components/jump-tab-item/jump-tab-item-rounded.stories.js +16 -2
  48. package/dist/collection/components/jump-tab-item/jump-tab-item-rounded.stories.js.map +1 -1
  49. package/dist/collection/components/jump-tab-item/jump-tab-item-sheet.stories.js +16 -2
  50. package/dist/collection/components/jump-tab-item/jump-tab-item-sheet.stories.js.map +1 -1
  51. package/dist/collection/components/jump-tab-item/jump-tab-item.js +2 -2
  52. package/dist/collection/components/jump-tab-panel/jump-tab-panel.js +1 -1
  53. package/dist/components/jump-filter-checkbox.js +2 -2
  54. package/dist/components/jump-filter.js +18 -5
  55. package/dist/components/jump-filter.js.map +1 -1
  56. package/dist/components/jump-filtergroup.js +3 -3
  57. package/dist/components/jump-navbar.js +5 -5
  58. package/dist/components/jump-pagination-table.js +3 -3
  59. package/dist/components/jump-pagination.js +3 -3
  60. package/dist/components/jump-quantity.js +3 -3
  61. package/dist/components/jump-search-bar.js +2 -2
  62. package/dist/components/jump-tab-item.js +2 -2
  63. package/dist/components/jump-tab-panel.js +1 -1
  64. package/dist/components/jump-tab.js +2 -2
  65. package/dist/components/jump-tab.js.map +1 -1
  66. package/dist/esm/jump-design-system.js +1 -1
  67. package/dist/esm/jump-filter-checkbox.entry.js +2 -2
  68. package/dist/esm/jump-filter.entry.js +15 -5
  69. package/dist/esm/jump-filter.entry.js.map +1 -1
  70. package/dist/esm/jump-filtergroup.entry.js +3 -3
  71. package/dist/esm/jump-navbar.entry.js +5 -5
  72. package/dist/esm/jump-pagination-table.entry.js +3 -3
  73. package/dist/esm/jump-pagination.entry.js +3 -3
  74. package/dist/esm/jump-quantity.entry.js +3 -3
  75. package/dist/esm/jump-search-bar.entry.js +2 -2
  76. package/dist/esm/jump-tab-item.entry.js +2 -2
  77. package/dist/esm/jump-tab-panel.entry.js +1 -1
  78. package/dist/esm/jump-tab.entry.js +2 -2
  79. package/dist/esm/jump-tab.entry.js.map +1 -1
  80. package/dist/esm/loader.js +1 -1
  81. package/dist/jump-design-system/jump-design-system.esm.js +1 -1
  82. package/dist/jump-design-system/jump-design-system.esm.js.map +1 -1
  83. package/dist/jump-design-system/{p-15416bf7.entry.js → p-134e548b.entry.js} +2 -2
  84. package/dist/jump-design-system/{p-4cd128b5.entry.js → p-1c882126.entry.js} +2 -2
  85. package/dist/jump-design-system/p-26d18480.entry.js +2 -0
  86. package/dist/jump-design-system/p-26d18480.entry.js.map +1 -0
  87. package/dist/jump-design-system/{p-6def596d.entry.js → p-30c9d7c7.entry.js} +2 -2
  88. package/dist/jump-design-system/{p-eb71b342.entry.js → p-396d2541.entry.js} +2 -2
  89. package/dist/jump-design-system/p-5f12bbbb.entry.js +2 -0
  90. package/dist/jump-design-system/{p-54230a70.entry.js → p-745c61b2.entry.js} +2 -2
  91. package/dist/jump-design-system/{p-6563f128.entry.js → p-87d6c01a.entry.js} +2 -2
  92. package/dist/jump-design-system/{p-5d9817a2.entry.js → p-8bdb9702.entry.js} +2 -2
  93. package/dist/jump-design-system/p-dc4a3920.entry.js +2 -0
  94. package/dist/jump-design-system/p-dc4a3920.entry.js.map +1 -0
  95. package/dist/jump-design-system/{p-ce3c1ff9.entry.js → p-f371718a.entry.js} +2 -2
  96. package/dist/jump-design-system-elements.json +8 -0
  97. package/dist/types/components/jump-accordion/jump-accordion.stories.d.ts +34 -0
  98. package/dist/types/components/jump-accordion-group/jump-accordion-group.stories.d.ts +13 -0
  99. package/dist/types/components/jump-filter/jump-filter.d.ts +3 -0
  100. package/dist/types/components/jump-pagination/jump-pagination.stories.d.ts +32 -0
  101. package/dist/types/components/jump-pagination-table/jump-pagination-table.stories.d.ts +56 -0
  102. package/dist/types/components/jump-search-bar/jump-search-bar.stories.d.ts +40 -0
  103. package/dist/types/components/jump-tab-item/jump-tab-item-boxed.stories.d.ts +39 -0
  104. package/dist/types/components/jump-tab-item/jump-tab-item-inline.stories.d.ts +39 -0
  105. package/dist/types/components/jump-tab-item/jump-tab-item-rounded.stories.d.ts +26 -0
  106. package/dist/types/components/jump-tab-item/jump-tab-item-sheet.stories.d.ts +26 -0
  107. package/dist/types/components.d.ts +4 -0
  108. package/package.json +1 -1
  109. package/readme.md +33 -0
  110. package/dist/jump-design-system/p-7b43933f.entry.js +0 -2
  111. package/dist/jump-design-system/p-8893a85e.entry.js +0 -2
  112. package/dist/jump-design-system/p-8893a85e.entry.js.map +0 -1
  113. package/dist/jump-design-system/p-fbd2cbb8.entry.js +0 -2
  114. package/dist/jump-design-system/p-fbd2cbb8.entry.js.map +0 -1
  115. /package/dist/jump-design-system/{p-15416bf7.entry.js.map → p-134e548b.entry.js.map} +0 -0
  116. /package/dist/jump-design-system/{p-4cd128b5.entry.js.map → p-1c882126.entry.js.map} +0 -0
  117. /package/dist/jump-design-system/{p-6def596d.entry.js.map → p-30c9d7c7.entry.js.map} +0 -0
  118. /package/dist/jump-design-system/{p-eb71b342.entry.js.map → p-396d2541.entry.js.map} +0 -0
  119. /package/dist/jump-design-system/{p-7b43933f.entry.js.map → p-5f12bbbb.entry.js.map} +0 -0
  120. /package/dist/jump-design-system/{p-54230a70.entry.js.map → p-745c61b2.entry.js.map} +0 -0
  121. /package/dist/jump-design-system/{p-6563f128.entry.js.map → p-87d6c01a.entry.js.map} +0 -0
  122. /package/dist/jump-design-system/{p-5d9817a2.entry.js.map → p-8bdb9702.entry.js.map} +0 -0
  123. /package/dist/jump-design-system/{p-ce3c1ff9.entry.js.map → p-f371718a.entry.js.map} +0 -0
@@ -1 +1 @@
1
- {"version":3,"file":"jump-accordion-group.stories.js","sourceRoot":"","sources":["../../../src/components/jump-accordion-group/jump-accordion-group.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAC,MAAM,mBAAmB,CAAC;AAE9D,eAAe;IACb,KAAK,EAAE,4BAA4B;IACnC,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,IAAI,EAAE,SAAS;YACf,WAAW,EAAE,oCAAoC;YACjD,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,aAAa,EAAE,YAAY,CAAC;SAC3D;QACD,eAAe,EAAE;YACf,IAAI,EAAE,iBAAiB;YACvB,WAAW,EAAE,wCAAwC;YACrD,OAAO,EAAE,MAAM;SAChB;KACF;CACF,CAAC;AAEF,MAAM,sBAAsB,GAAG,CAAC,IAAI,EAAE,EAAE;IACxC,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,CAAC,GAAG,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IAC1B,gDAAgD;IAC9C,OAAO,yBAAyB,UAAU;iEACqB,IAAI,CAAC,OAAO;;;mEAGV,IAAI,CAAC,OAAO;;;0BAGrD,CAAA;AAC1B,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC1D,UAAU,CAAC,IAAI,GAAG;IAChB,OAAO,EAAE,OAAO;IAChB,eAAe,EAAE,iBAAiB;CACnC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC5D,YAAY,CAAC,IAAI,GAAG;IAClB,OAAO,EAAE,SAAS;IAClB,eAAe,EAAE,iBAAiB;CACnC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC/D,eAAe,CAAC,IAAI,GAAG;IACrB,OAAO,EAAE,YAAY;IACrB,eAAe,EAAE,iBAAiB;CACnC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChE,gBAAgB,CAAC,IAAI,GAAG;IACtB,OAAO,EAAE,aAAa;IACtB,eAAe,EAAE,iBAAiB;CACnC,CAAC","sourcesContent":["import { generateAttributesFromArgs} from '../../utils/utils';\n\nexport default {\n title: 'Components/Accordion/Group',\n tags: ['autodocs'],\n argTypes: {\n variant: {\n name: 'variant',\n description: 'scegliere lo stile dell\\'accordion',\n control: 'select',\n options: ['divider', 'boxed', 'boxedheader', 'sidestroke'],\n },\n groupIdentifier: {\n name: 'groupIdentifier',\n description: 'identificativo del gruppo di accordion',\n control: 'text'\n }\n }\n};\n\nconst TemplateAccordionGroup = (args) => {\nconst attributes = generateAttributesFromArgs(args);\nconsole.log('args', args);\n// console.log('attribtes', attributes.variant);\n return `<jump-accordion-group ${attributes}>\n <jump-accordion summary=\"Titolo accordion\" variant=${args.variant} icon=\"chevron\" identifier=\"accordion1\">\n <div slot=\"acc-content\">Contenuto dell'accordion</div> \n </jump-accordion>\n <jump-accordion summary=\"Titolo accordion 2\" variant=${args.variant} icon=\"chevron\" identifier=\"accordion1\">\n <div slot=\"acc-content\">Contenuto dell'accordion 2</div> \n </jump-accordion>\n </jump-accordion-group>`\n}\n\nexport const GroupBoxed = TemplateAccordionGroup.bind({});\nGroupBoxed.args = {\n variant: 'boxed',\n groupIdentifier: 'accordionGroup1',\n};\n\nexport const GroupDivider = TemplateAccordionGroup.bind({});\nGroupDivider.args = {\n variant: 'divider',\n groupIdentifier: 'accordionGroup1',\n};\n\nexport const GroupSidestroke = TemplateAccordionGroup.bind({});\nGroupSidestroke.args = {\n variant: 'sidestroke',\n groupIdentifier: 'accordionGroup1',\n};\n\nexport const GroupBoxedHeader = TemplateAccordionGroup.bind({});\nGroupBoxedHeader.args = {\n variant: 'boxedheader',\n groupIdentifier: 'accordionGroup1',\n};\n"]}
1
+ {"version":3,"file":"jump-accordion-group.stories.js","sourceRoot":"","sources":["../../../src/components/jump-accordion-group/jump-accordion-group.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAC,MAAM,mBAAmB,CAAC;AAE9D,eAAe;IACb,KAAK,EAAE,4BAA4B;IACnC,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,IAAI,EAAE,SAAS;YACf,WAAW,EAAE,oCAAoC;YACjD,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,aAAa,EAAE,YAAY,CAAC;YAC1D,KAAK,EAAE;gBACD,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;gBAC3B,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;aACrC;SACJ;QACD,eAAe,EAAE;YACf,IAAI,EAAE,iBAAiB;YACvB,WAAW,EAAE,wCAAwC;YACrD,OAAO,EAAE,MAAM;YACf,KAAK,EAAE;gBACL,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;aAC5B;SACF;KACF;CACF,CAAC;AAEF,MAAM,sBAAsB,GAAG,CAAC,IAAI,EAAE,EAAE;IACxC,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,CAAC,GAAG,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IAC1B,gDAAgD;IAC9C,OAAO,yBAAyB,UAAU;iEACqB,IAAI,CAAC,OAAO;;;mEAGV,IAAI,CAAC,OAAO;;;0BAGrD,CAAA;AAC1B,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC1D,UAAU,CAAC,IAAI,GAAG;IAChB,OAAO,EAAE,OAAO;IAChB,eAAe,EAAE,iBAAiB;CACnC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC5D,YAAY,CAAC,IAAI,GAAG;IAClB,OAAO,EAAE,SAAS;IAClB,eAAe,EAAE,iBAAiB;CACnC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC/D,eAAe,CAAC,IAAI,GAAG;IACrB,OAAO,EAAE,YAAY;IACrB,eAAe,EAAE,iBAAiB;CACnC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChE,gBAAgB,CAAC,IAAI,GAAG;IACtB,OAAO,EAAE,aAAa;IACtB,eAAe,EAAE,iBAAiB;CACnC,CAAC","sourcesContent":["import { generateAttributesFromArgs} from '../../utils/utils';\n\nexport default {\n title: 'Components/Accordion/Group',\n tags: ['autodocs'],\n argTypes: {\n variant: {\n name: 'variant',\n description: 'scegliere lo stile dell\\'accordion',\n control: 'select',\n options: ['divider', 'boxed', 'boxedheader', 'sidestroke'],\n table: {\n type: { summary: 'string' },\n defaultValue: { summary: 'boxed' },\n },\n },\n groupIdentifier: {\n name: 'groupIdentifier',\n description: 'identificativo del gruppo di accordion',\n control: 'text',\n table: {\n type: { summary: 'string' },\n },\n }\n }\n};\n\nconst TemplateAccordionGroup = (args) => {\nconst attributes = generateAttributesFromArgs(args);\nconsole.log('args', args);\n// console.log('attribtes', attributes.variant);\n return `<jump-accordion-group ${attributes}>\n <jump-accordion summary=\"Titolo accordion\" variant=${args.variant} icon=\"chevron\" identifier=\"accordion1\">\n <div slot=\"acc-content\">Contenuto dell'accordion</div> \n </jump-accordion>\n <jump-accordion summary=\"Titolo accordion 2\" variant=${args.variant} icon=\"chevron\" identifier=\"accordion1\">\n <div slot=\"acc-content\">Contenuto dell'accordion 2</div> \n </jump-accordion>\n </jump-accordion-group>`\n}\n\nexport const GroupBoxed = TemplateAccordionGroup.bind({});\nGroupBoxed.args = {\n variant: 'boxed',\n groupIdentifier: 'accordionGroup1',\n};\n\nexport const GroupDivider = TemplateAccordionGroup.bind({});\nGroupDivider.args = {\n variant: 'divider',\n groupIdentifier: 'accordionGroup1',\n};\n\nexport const GroupSidestroke = TemplateAccordionGroup.bind({});\nGroupSidestroke.args = {\n variant: 'sidestroke',\n groupIdentifier: 'accordionGroup1',\n};\n\nexport const GroupBoxedHeader = TemplateAccordionGroup.bind({});\nGroupBoxedHeader.args = {\n variant: 'boxedheader',\n groupIdentifier: 'accordionGroup1',\n};\n"]}
@@ -4,11 +4,32 @@
4
4
  --bg-drawer: var(--bg-drawer, #fff);
5
5
  --header-height: var(--header-height, 80px);
6
6
  --drawer-width: var(--drawer-width, 240px);
7
+ --overlay-bg-color: var(--overlay-bg-color, rgba(0, 0, 0, 0.35));
7
8
  }
8
9
  :host h3 {
9
10
  margin: 0;
10
11
  }
11
12
 
13
+ .filtersDrawer__overlay {
14
+ position: fixed;
15
+ top: 50%;
16
+ left: 50%;
17
+ transform: translate(-50%, -50%);
18
+ background-color: var(--overlay-bg-color, rgba(0, 0, 0, 0.35));
19
+ z-index: 1;
20
+ width: 100vw;
21
+ height: 100vh;
22
+ display: none;
23
+ opacity: 0;
24
+ transition: opacity 0.3s ease-in-out;
25
+ }
26
+ .filtersDrawer__overlay.filtersDrawer__overlay--active {
27
+ display: block;
28
+ }
29
+ .filtersDrawer__overlay.filtersDrawer__overlay--active {
30
+ opacity: 1;
31
+ }
32
+
12
33
  .filtersDrawer {
13
34
  position: fixed;
14
35
  display: flex;
@@ -29,6 +50,8 @@
29
50
  }
30
51
  .filtersDrawer[aria-hidden=false] {
31
52
  left: 0;
53
+ right: 0;
54
+ width: auto;
32
55
  transition: 0.3s all ease-in-out;
33
56
  }
34
57
  .filtersDrawer[aria-hidden=false] .filtersDrawer__close {
@@ -7,9 +7,12 @@ export class JumpFilter {
7
7
  this.filterButtonIcon = 'sliders';
8
8
  this.mobileThreshold = 768;
9
9
  this.filters = undefined;
10
+ this.showCount = false;
11
+ this.offCanvasOverlay = false;
10
12
  this.activeFilters = 0;
11
13
  this.showMobileFilters = false;
12
14
  this.isMobile = false;
15
+ this.offCanvasClasses = 'filtersDrawer__overlay';
13
16
  }
14
17
  filterChangeHandler(event) {
15
18
  //set this.filter as this.filters[event.detail.name] = event.detail.value; even if not present
@@ -26,10 +29,12 @@ export class JumpFilter {
26
29
  if (newValue) {
27
30
  (_a = this.mobileToggle) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-expanded', 'true');
28
31
  (_b = this.filtersDrawer) === null || _b === void 0 ? void 0 : _b.setAttribute('aria-hidden', 'false');
32
+ this.offCanvasClasses = 'filtersDrawer__overlay filtersDrawer__overlay--active';
29
33
  }
30
34
  else {
31
35
  (_c = this.mobileToggle) === null || _c === void 0 ? void 0 : _c.setAttribute('aria-expanded', 'false');
32
36
  (_d = this.filtersDrawer) === null || _d === void 0 ? void 0 : _d.setAttribute('aria-hidden', 'true');
37
+ this.offCanvasClasses = 'filtersDrawer__overlay';
33
38
  }
34
39
  }
35
40
  }
@@ -43,10 +48,15 @@ export class JumpFilter {
43
48
  this.handleResize();
44
49
  }
45
50
  render() {
46
- return (h(Host, { key: 'b45c2e4a0ed8985f709b5ef0cd6796c73f78080b', mobileFilters: this.showMobileFilters }, this.isMobile && h("jump-button", { key: 'a8bf5423d154fe3dc7c91bc12a379fc30ab85992', ref: (el) => { this.mobileToggle = el; }, buttonId: this.filterButtonIcon, variant: 'primary', outline: true, onClick: () => this.showMobileFilters = !this.showMobileFilters }, h("slot", { key: 'e9cdf515fe9d1f5f6c557f1b345ccaa5e75ed5ba', name: "prefix" }, this.filterButtonIcon &&
47
- h("jump-icon", { key: '7175bf68ccc5cba19384ac74de269a83a9321f9c', library: "fa", category: "regular", name: this.filterButtonIcon, size: "small" }), this.filterButtonLabel), h("slot", { key: '43d5a322cf0d0828b821abfb8bdfe14a9c2bf706', name: "suffix" }, this.activeFilters > 0 &&
48
- h("jump-badge", { key: '2d27ab99d6980334ca33b7d75ccceef9561005b0', label: this.activeFilters.toString(), variant: "success", soft: true, dimension: "dot" }, "1"))), h("div", { key: 'b960e02353e147de8dc633b6f3fa74e8aebd4fc1', ref: (el) => { this.filtersDrawer = el; }, class: "filtersDrawer", "data-variant": this.direction }, !this.isMobile &&
49
- h("div", { key: '6c86c707343eab1720d49208d487dacfed2c7a69', class: 'filtersDrawer__header' }, h("jump-icon", { key: '44e43addc3beecc57cc0b5a4bbc1f004df9f4ea3', class: "small", name: this.filterButtonIcon }), h("h3", { key: '49893521129b517c91caa15fb38d7c1bfc17be2c' }, this.filterHeading)), this.isMobile && h("jump-icon", { key: '91d6bfe0b195cad204df517eb4e2ab02b141a3a8', library: "lucide", name: "x", size: "small", label: "", class: 'filtersDrawer__close', onClick: () => this.showMobileFilters = false }), h("slot", { key: '5691db6520a4ea84d3b3ea5b1b4c622893770317' }))));
51
+ return (h(Host, { key: 'a6887d6f754cdba0e3ec854c0e553d4805c62c63', mobileFilters: this.showMobileFilters }, this.isMobile && h("jump-button", { key: '0194221f6ba4be2f547d8b6495f94c9d716e8be1', ref: (el) => {
52
+ this.mobileToggle = el;
53
+ }, buttonId: this.filterButtonIcon, variant: 'primary', outline: true, onClick: () => this.showMobileFilters = !this.showMobileFilters }, h("slot", { key: '5b60281b75d958d605c97b69be6576f177538740', name: "prefix" }, this.filterButtonIcon &&
54
+ h("jump-icon", { key: 'c85beb03fd5132192bfa5f2d83c1e5cec64c4f4e', library: "fa", category: "regular", name: this.filterButtonIcon, size: "small" }), this.filterButtonLabel), h("slot", { key: '9bf612b73c9c0d69172ed6caff94e1f34541c539', name: "suffix" }, this.activeFilters > 0 &&
55
+ h("jump-badge", { key: '8c01c39288672210dc546ecb72fa7ef4d9c60bef', label: this.activeFilters.toString(), variant: "success", soft: true, dimension: "dot" }, "1"))), this.offCanvasOverlay &&
56
+ h("div", { key: 'b588e7ab489541c92a04df32ad40a5c31238451a', class: this.offCanvasClasses, onClick: () => this.showMobileFilters = false }), h("div", { key: 'af8c4b52c7a87461e98a63d2040999b179c6c372', ref: (el) => {
57
+ this.filtersDrawer = el;
58
+ }, class: "filtersDrawer", "data-variant": this.direction }, !this.isMobile &&
59
+ h("div", { key: 'fde6a476ff39c470b91030a2ea00c73392a7644d', class: 'filtersDrawer__header' }, h("jump-icon", { key: '4173961bcb0943d9de12c853968e503917bf6063', class: "small", name: this.filterButtonIcon }), h("h3", { key: 'c7e1982a2805e714acab2d9ca5ba3a3c8b925e6e' }, this.filterHeading)), this.isMobile && h("jump-icon", { key: '95e0e48852c12f9474482410e0a4aec7dd348d1f', library: "lucide", name: "x", size: "small", label: "", class: 'filtersDrawer__close', onClick: () => this.showMobileFilters = false }), h("slot", { key: '0185bb00a4bd55193ff3cf9594f45a3d2da9f8d9' }))));
50
60
  }
51
61
  static get is() { return "jump-filter"; }
52
62
  static get encapsulation() { return "shadow"; }
@@ -168,6 +178,42 @@ export class JumpFilter {
168
178
  },
169
179
  "attribute": "filters",
170
180
  "reflect": false
181
+ },
182
+ "showCount": {
183
+ "type": "boolean",
184
+ "mutable": false,
185
+ "complexType": {
186
+ "original": "boolean",
187
+ "resolved": "boolean",
188
+ "references": {}
189
+ },
190
+ "required": false,
191
+ "optional": false,
192
+ "docs": {
193
+ "tags": [],
194
+ "text": ""
195
+ },
196
+ "attribute": "show-count",
197
+ "reflect": false,
198
+ "defaultValue": "false"
199
+ },
200
+ "offCanvasOverlay": {
201
+ "type": "boolean",
202
+ "mutable": false,
203
+ "complexType": {
204
+ "original": "boolean",
205
+ "resolved": "boolean",
206
+ "references": {}
207
+ },
208
+ "required": false,
209
+ "optional": false,
210
+ "docs": {
211
+ "tags": [],
212
+ "text": ""
213
+ },
214
+ "attribute": "off-canvas-overlay",
215
+ "reflect": false,
216
+ "defaultValue": "false"
171
217
  }
172
218
  };
173
219
  }
@@ -175,7 +221,8 @@ export class JumpFilter {
175
221
  return {
176
222
  "activeFilters": {},
177
223
  "showMobileFilters": {},
178
- "isMobile": {}
224
+ "isMobile": {},
225
+ "offCanvasClasses": {}
179
226
  };
180
227
  }
181
228
  static get methods() {
@@ -1 +1 @@
1
- {"version":3,"file":"jump-filter.js","sourceRoot":"","sources":["../../../src/components/jump-filter/jump-filter.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAOvF,MAAM,OAAO,UAAU;;yBAE0B,UAAU;6BACzB,YAAY;iCACR,QAAQ;gCACT,SAAS;+BACV,GAAG;;6BAGJ,CAAC;iCACI,KAAK;wBACd,KAAK;;IAMlC,mBAAmB,CAAC,KAAkB;QACpC,8FAA8F;QAC9F,IAAI,CAAC,OAAO,mCAAO,IAAI,CAAC,OAAO,KAAE,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,GAAC,CAAC;QAC3E,OAAO,CAAC,GAAG,CAAC,0CAA0C,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QAItE,oCAAoC;IACtC,CAAC;IAGD,YAAY;QACV,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC,UAAU,GAAG,IAAI,CAAC,eAAe,CAAC;IAC3D,CAAC;IAGD,YAAY,CAAC,QAAiB,EAAE,QAAiB;;QAC/C,IAAI,QAAQ,KAAK,QAAQ,EAAE,CAAC;YAC1B,IAAI,QAAQ,EAAE,CAAC;gBACb,MAAA,IAAI,CAAC,YAAY,0CAAE,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;gBACzD,MAAA,IAAI,CAAC,aAAa,0CAAE,YAAY,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC;YAC3D,CAAC;iBAAM,CAAC;gBACN,MAAA,IAAI,CAAC,YAAY,0CAAE,YAAY,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;gBAC1D,MAAA,IAAI,CAAC,aAAa,0CAAE,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;YAC1D,CAAC;QACH,CAAC;IACH,CAAC;IAED;;OAEG;IAEH,KAAK,CAAC,UAAU;QACd,OAAO,IAAI,CAAC,OAAO,CAAC;IACtB,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,aAAa,EAAE,IAAI,CAAC,iBAAiB;YACxC,IAAI,CAAC,QAAQ,IAAI,oEAChB,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,GAAE,IAAI,CAAC,YAAY,GAAG,EAAE,CAAA,CAAA,CAAC,EACrC,QAAQ,EAAE,IAAI,CAAC,gBAAgB,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,QAC5D,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,iBAAiB,GAAG,CAAC,IAAI,CAAC,iBAAiB;gBAC/D,6DAAM,IAAI,EAAC,QAAQ;oBAChB,IAAI,CAAC,gBAAgB;wBACpB,kEAAW,OAAO,EAAC,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAC,IAAI,EAAE,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAC,OAAO,GAAa;oBAClG,IAAI,CAAC,iBAAiB,CAClB;gBACP,6DAAM,IAAI,EAAC,QAAQ,IAChB,IAAI,CAAC,aAAa,GAAG,CAAC;oBACrB,mEAAY,KAAK,EAAE,IAAI,CAAC,aAAa,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAC,SAAS,EAAC,IAAI,QAAC,SAAS,EAAC,KAAK,QAAe,CAChG,CACO;YAEf,4DACC,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,GAAE,IAAI,CAAC,aAAa,GAAG,EAAE,CAAA,CAAA,CAAC,EAC1C,KAAK,EAAC,eAAe,kBAAe,IAAI,CAAC,SAAS;gBACjD,CAAC,IAAI,CAAC,QAAQ;oBACf,4DAAK,KAAK,EAAE,uBAAuB;wBACjC,kEAAW,KAAK,EAAC,OAAO,EAAC,IAAI,EAAE,IAAI,CAAC,gBAAgB,GAAc;wBAClE,6DAAK,IAAI,CAAC,aAAa,CAAM,CACzB;gBACD,IAAI,CAAC,QAAQ,IAAI,kEAAW,OAAO,EAAC,QAAQ,EAAC,IAAI,EAAC,GAAG,EAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,EAAE,EAAC,KAAK,EAAE,sBAAsB,EAC1G,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,iBAAiB,GAAG,KAAK,GAAc;gBAC3D,8DAAa,CACT,CACL,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h, State, Listen, Method, Watch } from '@stencil/core';\n\n@Component({\n tag: 'jump-filter',\n styleUrl: 'jump-filter.scss',\n shadow: true,\n})\nexport class JumpFilter {\n\n @Prop() direction: 'horizontal' | 'vertical' = 'vertical';\n @Prop() filterHeading: string = 'Filtra per';\n @Prop() filterButtonLabel: string = 'Filtri';\n @Prop() filterButtonIcon: string = 'sliders';\n @Prop() mobileThreshold: number = 768;\n @Prop() filters: any;\n\n @State() activeFilters: number = 0;\n @State() showMobileFilters: boolean = false;\n @State() isMobile: boolean = false;\n\n mobileToggle: HTMLElement | null;\n filtersDrawer: HTMLElement;\n\n @Listen('jump-filterchange')\n filterChangeHandler(event: CustomEvent) {\n //set this.filter as this.filters[event.detail.name] = event.detail.value; even if not present\n this.filters = {...this.filters, [event.detail.name]: event.detail.values};\n console.log('Received the custom filterChange event: ', this.filters);\n\n\n\n //TODO: increment this.activeFilters\n }\n\n @Listen('resize', { target: 'window' })\n handleResize() {\n this.isMobile = window.innerWidth < this.mobileThreshold;\n }\n\n @Watch('showMobileFilters')\n watchHandler(newValue: boolean, oldValue: boolean) {\n if (newValue !== oldValue) {\n if (newValue) {\n this.mobileToggle?.setAttribute('aria-expanded', 'true');\n this.filtersDrawer?.setAttribute('aria-hidden', 'false');\n } else {\n this.mobileToggle?.setAttribute('aria-expanded', 'false');\n this.filtersDrawer?.setAttribute('aria-hidden', 'true');\n }\n }\n }\n\n /**\n * Get the active filters from the component\n */\n @Method()\n async getFilters() {\n return this.filters;\n }\n\n componentDidLoad(){\n this.handleResize();\n }\n\n render() {\n return (\n <Host mobileFilters={this.showMobileFilters}>\n {this.isMobile && <jump-button\n ref={(el) => {this.mobileToggle = el}}\n buttonId={this.filterButtonIcon} variant={'primary'} outline\n onClick={() => this.showMobileFilters = !this.showMobileFilters}>\n <slot name=\"prefix\">\n {this.filterButtonIcon &&\n <jump-icon library=\"fa\" category=\"regular\" name={this.filterButtonIcon} size=\"small\"></jump-icon>}\n {this.filterButtonLabel}\n </slot>\n <slot name=\"suffix\">\n {this.activeFilters > 0 &&\n <jump-badge label={this.activeFilters.toString()} variant=\"success\" soft dimension=\"dot\">1</jump-badge>}\n </slot>\n </jump-button>}\n\n {<div\n ref={(el) => {this.filtersDrawer = el}}\n class=\"filtersDrawer\" data-variant={this.direction}>\n {!this.isMobile &&\n <div class={'filtersDrawer__header'}>\n <jump-icon class=\"small\" name={this.filterButtonIcon}></jump-icon>\n <h3>{this.filterHeading}</h3>\n </div>}\n {this.isMobile && <jump-icon library=\"lucide\" name=\"x\" size=\"small\" label=\"\" class={'filtersDrawer__close'}\n onClick={() => this.showMobileFilters = false}></jump-icon>}\n <slot></slot>\n </div>}\n </Host>\n );\n }\n}\n"]}
1
+ {"version":3,"file":"jump-filter.js","sourceRoot":"","sources":["../../../src/components/jump-filter/jump-filter.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, State, Listen, Method, Watch } from '@stencil/core';\n\n@Component({\n tag: 'jump-filter',\n styleUrl: 'jump-filter.scss',\n shadow: true,\n})\nexport class JumpFilter {\n\n @Prop() direction: 'horizontal' | 'vertical' = 'vertical';\n @Prop() filterHeading: string = 'Filtra per';\n @Prop() filterButtonLabel: string = 'Filtri';\n @Prop() filterButtonIcon: string = 'sliders';\n @Prop() mobileThreshold: number = 768;\n @Prop() filters: any;\n @Prop() showCount: boolean = false;\n @Prop() offCanvasOverlay: boolean = false;\n\n @State() activeFilters: number = 0;\n @State() showMobileFilters: boolean = false;\n @State() isMobile: boolean = false;\n @State() offCanvasClasses: string = 'filtersDrawer__overlay';\n\n mobileToggle: HTMLElement | null;\n filtersDrawer: HTMLElement;\n\n @Listen('jump-filterchange')\n filterChangeHandler(event: CustomEvent) {\n //set this.filter as this.filters[event.detail.name] = event.detail.value; even if not present\n this.filters = { ...this.filters, [event.detail.name]: event.detail.values };\n console.log('Received the custom filterChange event: ', this.filters);\n\n\n //TODO: increment this.activeFilters\n }\n\n @Listen('resize', { target: 'window' })\n handleResize() {\n this.isMobile = window.innerWidth < this.mobileThreshold;\n }\n\n @Watch('showMobileFilters')\n watchHandler(newValue: boolean, oldValue: boolean) {\n if (newValue !== oldValue) {\n if (newValue) {\n this.mobileToggle?.setAttribute('aria-expanded', 'true');\n this.filtersDrawer?.setAttribute('aria-hidden', 'false');\n this.offCanvasClasses = 'filtersDrawer__overlay filtersDrawer__overlay--active';\n } else {\n this.mobileToggle?.setAttribute('aria-expanded', 'false');\n this.filtersDrawer?.setAttribute('aria-hidden', 'true');\n this.offCanvasClasses = 'filtersDrawer__overlay';\n }\n }\n }\n\n /**\n * Get the active filters from the component\n */\n @Method()\n async getFilters() {\n return this.filters;\n }\n\n componentDidLoad() {\n this.handleResize();\n }\n\n render() {\n return (\n <Host mobileFilters={this.showMobileFilters}>\n {this.isMobile && <jump-button\n ref={(el) => {\n this.mobileToggle = el;\n }}\n buttonId={this.filterButtonIcon} variant={'primary'} outline\n onClick={() => this.showMobileFilters = !this.showMobileFilters}>\n <slot name=\"prefix\">\n {this.filterButtonIcon &&\n <jump-icon library=\"fa\" category=\"regular\" name={this.filterButtonIcon} size=\"small\"></jump-icon>}\n {this.filterButtonLabel}\n </slot>\n <slot name=\"suffix\">\n {this.activeFilters > 0 &&\n <jump-badge label={this.activeFilters.toString()} variant=\"success\" soft dimension=\"dot\">1</jump-badge>}\n </slot>\n </jump-button>}\n\n {this.offCanvasOverlay &&\n <div class={this.offCanvasClasses}\n onClick={() => this.showMobileFilters = false}></div>}\n\n {<div\n ref={(el) => {\n this.filtersDrawer = el;\n }}\n class=\"filtersDrawer\" data-variant={this.direction}>\n {!this.isMobile &&\n <div class={'filtersDrawer__header'}>\n <jump-icon class=\"small\" name={this.filterButtonIcon}></jump-icon>\n <h3>{this.filterHeading}</h3>\n </div>}\n {this.isMobile && <jump-icon library=\"lucide\" name=\"x\" size=\"small\" label=\"\" class={'filtersDrawer__close'}\n onClick={() => this.showMobileFilters = false}></jump-icon>}\n <slot></slot>\n </div>}\n </Host>\n );\n }\n}\n"]}
@@ -120,4 +120,9 @@ const TemplateWithMoreFilters = (args) => {
120
120
  </jump-filter>`);
121
121
  };
122
122
  export const WithMoreFilters = TemplateWithMoreFilters.bind({});
123
+ WithMoreFilters.args = {
124
+ filterButtonIcon: 'filter',
125
+ showCount: true,
126
+ offCanvasOverlay: true,
127
+ };
123
128
  //# sourceMappingURL=jump-filter.stories.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"jump-filter.stories.js","sourceRoot":"","sources":["../../../src/components/jump-filter/jump-filter.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,UAAU,EAAC,MAAM,mBAAmB,CAAC;AAE1E,eAAe;IACb,KAAK,EAAE,+BAA+B;IACtC,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,gBAAgB;QAChB,SAAS,EAAE;YACT,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;gBACd,OAAO,EAAE,CAAC,YAAY,EAAE,UAAU,CAAC;aACpC;SACF;QACD,aAAa,EAAE;YACb,OAAO,EAAE;gBACP,IAAI,EAAE,MAAM;gBACZ,WAAW,EAAE,gCAAgC;aAC9C;SACF;QACD,iBAAiB,EAAE;YACjB,OAAO,EAAE;gBACP,IAAI,EAAE,MAAM;aACb;SACF;QACD,gBAAgB,EAAE;YAChB,OAAO,EAAE;gBACP,IAAI,EAAE,MAAM;aACb;SACF;QACD,eAAe,EAAE;YACf,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;YACD,YAAY,EAAE,GAAG;SAClB;KACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;IACxB,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,UAAU,CAAC,gBAAgB,UAAU;;;;;;;;;eAS/B,CAAC,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEzC,MAAM,wBAAwB,GAAG,CAAC,IAAI,EAAE,EAAE;IACxC,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,UAAU,CAAC,qBAAqB,UAAU;;;;;;;oBAO/B,CAAC,CAAC;AACtB,CAAC,CAAA;AACD,MAAM,CAAC,MAAM,gBAAgB,GAAG,wBAAwB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAElE,MAAM,0BAA0B,GAAG,CAAC,IAAI,EAAE,EAAE;IAC1C,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,UAAU,CAAC;iBACH,UAAU;;;;;;iBAMV,CAAC,CAAC;AACnB,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,kBAAkB,GAAG,0BAA0B,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEtE,uBAAuB;AACvB,MAAM,wBAAwB,GAAG,CAAC,IAAI,EAAE,EAAE;IACxC,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,UAAU,CAAC,gBAAgB,UAAU;;;;;;;;;;;;;;;;;;;;;iBAqB7B,CAAC,CAAC;AACnB,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAG,wBAAwB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAGlE,MAAM,uBAAuB,GAAG,CAAC,IAAI,EAAE,EAAE;IACvC,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,UAAU,CAAC,gBAAgB,UAAU;;;;;;;;;;;;;;;;iBAgB7B,CAAC,CAAC;AACnB,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,uBAAuB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { generateAttributesFromArgs, formatHtml} from '../../utils/utils';\n\nexport default {\n title: 'Components/Filters/JumpFilter',\n tags: ['autodocs'],\n argTypes: {\n //list all props\n direction: {\n control: {\n type: 'select',\n options: ['horizontal', 'vertical']\n }\n },\n filterHeading: {\n control: {\n type: 'text',\n description: 'Intestazione drawer dei filtri'\n }\n },\n filterButtonLabel: {\n control: {\n type: 'text'\n }\n },\n filterButtonIcon: {\n control: {\n type: 'text'\n }\n },\n mobileThreshold: {\n control: {\n type: 'number'\n },\n defaultValue: 768\n },\n }\n};\n\nconst Template = (args) => {\n const attributes = generateAttributesFromArgs(args);\n return formatHtml(`<jump-filter ${attributes}>\n <!-- TODO: Replace with jump components -->\n <jump-filtergroup class='filterGroup' name=\"tax-name\" title=\"Titolo del filtro\" other-label=\"Mostra di più\" max-elements=3>\n <select label=\"Ordina per\" variant=\"primary\" size=\"small\">\n <option value=\"0\">Ordina per</option>\n <option value=\"latest\">Più recenti</option>\n <option value=\"oldest\">Più vecchi</option>\n </select>\n </jump-filtergroup>\n</jump-filter>`);\n};\n\nexport const Default = Template.bind({});\n\nconst TemplateWithSelectFilter = (args) => {\n const attributes = generateAttributesFromArgs(args);\n return formatHtml(`<jump-filtergroup ${attributes} name='sort' title='Ordina per'>\n <select class='filterGroupSelect' label=\"Ordina per\" variant=\"primary\" size=\"small\">\n <option value=\"0\">Ordina per</option>\n <option value=\"latest\">Più recenti</option>\n <option value=\"oldest\">Più vecchi</option>\n </select>\n </jump-filtergroup>\n</jump-filtergroup>`);\n}\nexport const WithSelectFilter = TemplateWithSelectFilter.bind({});\n\nconst TemplateWithCheckboxFilter = (args) => {\n const attributes = generateAttributesFromArgs(args);\n return formatHtml(`\n <jump-filter ${attributes} name='sort' title='Ordina per'>\n <jump-filtergroup class='filterGroupCheckbox' name='animal' title='Animale' other-label='Mostra di più' max-elements='3'>\n <jump-filter-checkbox value=\"cane\" label=\"Cane\" count=\"12\"></jump-filter-checkbox>\n <jump-filter-checkbox value=\"gatto\" label=\"Gatto\"></jump-filter-checkbox>\n <jump-filter-checkbox value=\"pesce\" label=\"Pesce\"></jump-filter-checkbox>\n </jump-filtergroup>\n </jump-filter>`);\n}\n\nexport const WithCheckboxFilter = TemplateWithCheckboxFilter.bind({});\n\n//mixed kind of filters\nconst TemplateWithMixedFilters = (args) => {\n const attributes = generateAttributesFromArgs(args);\n return formatHtml(`<jump-filter ${attributes} name='sort' title='Ordina per'>\n <!-- select group -->\n <jump-filtergroup class='filterGroupSelect' name=\"tax-select-sample\" title=\"Ordinamento\" other-label=\"Mostra di più\" max-elements=3>\n <select class='filterGroupSelect' label=\"Ordina per\" variant=\"primary\" size=\"small\">\n <option value=\"0\">Ordina per</option>\n <option value=\"latest\">Più recenti</option>\n <option value=\"oldest\">Più vecchi</option>\n </select>\n </jump-filtergroup>\n\n <jump-filtergroup class='filterGroupCheckbox' name=\"tax-animal-sample-checkbox\" title=\"Animali\" other-label=\"Mostra di più\" max-elements=3>\n <label><input type='checkbox' value='cane'>Cane</label>\n <label><input type='checkbox' value='gatto'>Gatto</label>\n <label><input type='checkbox' value='pesce'>Pesce</label>\n </jump-filtergroup>\n\n <!-- radio group -->\n <jump-filtergroup class='filterGroupRadio' name=\"tax-animal-sample-radio\" title=\"Animali 2\" other-label=\"Mostra di più\" max-elements=3>\n <label><input type='radio' value='snakes'>Serpenti</label>\n <label><input type='radio' value='spiders'>Ragni</label>\n </jump-filtergroup>\n </jump-filter>`);\n}\n\nexport const WithMixedFilters = TemplateWithMixedFilters.bind({});\n\n\nconst TemplateWithMoreFilters = (args) => {\n const attributes = generateAttributesFromArgs(args);\n return formatHtml(`<jump-filter ${attributes} name='sort' title='Ordina per'>\n <jump-filtergroup class='filterGroupCheckbox' name=\"tax-animal-sample-checkbox\" title=\"Animali\" other-label=\"Mostra di più\" max-elements=8>\n <label><input type='checkbox' value='cane'>Cane</label>\n <label><input type='checkbox' value='gatto'>Gatto</label>\n <label><input type='checkbox' value='pesce'>Pesce</label>\n <label><input type='checkbox' value='cavallo'>Cavallo</label>\n <label><input type='checkbox' value='topo'>Topo</label>\n <label><input type='checkbox' value='coniglio'>Coniglio</label>\n <label><input type='checkbox' value='pappagallo'>Pappagallo</label>\n <label><input type='checkbox' value='tartaruga'>Tartaruga</label>\n <label><input type='checkbox' value='criceto'>Criceto</label>\n <label><input type='checkbox' value='canarino'>Canarino</label>\n <label><input type='checkbox' value='pesciolino'>Pesciolino</label>\n <label><input type='checkbox' value='pappagallino'>Pappagallino</label>\n <label><input type='checkbox' value='tartarughina'>Tartarughina</label>\n </jump-filtergroup>\n </jump-filter>`);\n}\n\nexport const WithMoreFilters = TemplateWithMoreFilters.bind({});\n"]}
1
+ {"version":3,"file":"jump-filter.stories.js","sourceRoot":"","sources":["../../../src/components/jump-filter/jump-filter.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,UAAU,EAAC,MAAM,mBAAmB,CAAC;AAE1E,eAAe;IACb,KAAK,EAAE,+BAA+B;IACtC,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,gBAAgB;QAChB,SAAS,EAAE;YACT,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;gBACd,OAAO,EAAE,CAAC,YAAY,EAAE,UAAU,CAAC;aACpC;SACF;QACD,aAAa,EAAE;YACb,OAAO,EAAE;gBACP,IAAI,EAAE,MAAM;gBACZ,WAAW,EAAE,gCAAgC;aAC9C;SACF;QACD,iBAAiB,EAAE;YACjB,OAAO,EAAE;gBACP,IAAI,EAAE,MAAM;aACb;SACF;QACD,gBAAgB,EAAE;YAChB,OAAO,EAAE;gBACP,IAAI,EAAE,MAAM;aACb;SACF;QACD,eAAe,EAAE;YACf,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;YACD,YAAY,EAAE,GAAG;SAClB;KACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;IACxB,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,UAAU,CAAC,gBAAgB,UAAU;;;;;;;;;eAS/B,CAAC,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEzC,MAAM,wBAAwB,GAAG,CAAC,IAAI,EAAE,EAAE;IACxC,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,UAAU,CAAC,qBAAqB,UAAU;;;;;;;oBAO/B,CAAC,CAAC;AACtB,CAAC,CAAA;AACD,MAAM,CAAC,MAAM,gBAAgB,GAAG,wBAAwB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAElE,MAAM,0BAA0B,GAAG,CAAC,IAAI,EAAE,EAAE;IAC1C,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,UAAU,CAAC;iBACH,UAAU;;;;;;iBAMV,CAAC,CAAC;AACnB,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,kBAAkB,GAAG,0BAA0B,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEtE,uBAAuB;AACvB,MAAM,wBAAwB,GAAG,CAAC,IAAI,EAAE,EAAE;IACxC,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,UAAU,CAAC,gBAAgB,UAAU;;;;;;;;;;;;;;;;;;;;;iBAqB7B,CAAC,CAAC;AACnB,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAG,wBAAwB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAGlE,MAAM,uBAAuB,GAAG,CAAC,IAAI,EAAE,EAAE;IACvC,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,UAAU,CAAC,gBAAgB,UAAU;;;;;;;;;;;;;;;;iBAgB7B,CAAC,CAAC;AACnB,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,uBAAuB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChE,eAAe,CAAC,IAAI,GAAG;IACrB,gBAAgB,EAAE,QAAQ;IAC1B,SAAS,EAAE,IAAI;IACf,gBAAgB,EAAE,IAAI;CACvB,CAAC","sourcesContent":["import { generateAttributesFromArgs, formatHtml} from '../../utils/utils';\n\nexport default {\n title: 'Components/Filters/JumpFilter',\n tags: ['autodocs'],\n argTypes: {\n //list all props\n direction: {\n control: {\n type: 'select',\n options: ['horizontal', 'vertical']\n }\n },\n filterHeading: {\n control: {\n type: 'text',\n description: 'Intestazione drawer dei filtri'\n }\n },\n filterButtonLabel: {\n control: {\n type: 'text'\n }\n },\n filterButtonIcon: {\n control: {\n type: 'text'\n }\n },\n mobileThreshold: {\n control: {\n type: 'number'\n },\n defaultValue: 768\n },\n }\n};\n\nconst Template = (args) => {\n const attributes = generateAttributesFromArgs(args);\n return formatHtml(`<jump-filter ${attributes}>\n <!-- TODO: Replace with jump components -->\n <jump-filtergroup class='filterGroup' name=\"tax-name\" title=\"Titolo del filtro\" other-label=\"Mostra di più\" max-elements=3>\n <select label=\"Ordina per\" variant=\"primary\" size=\"small\">\n <option value=\"0\">Ordina per</option>\n <option value=\"latest\">Più recenti</option>\n <option value=\"oldest\">Più vecchi</option>\n </select>\n </jump-filtergroup>\n</jump-filter>`);\n};\n\nexport const Default = Template.bind({});\n\nconst TemplateWithSelectFilter = (args) => {\n const attributes = generateAttributesFromArgs(args);\n return formatHtml(`<jump-filtergroup ${attributes} name='sort' title='Ordina per'>\n <select class='filterGroupSelect' label=\"Ordina per\" variant=\"primary\" size=\"small\">\n <option value=\"0\">Ordina per</option>\n <option value=\"latest\">Più recenti</option>\n <option value=\"oldest\">Più vecchi</option>\n </select>\n </jump-filtergroup>\n</jump-filtergroup>`);\n}\nexport const WithSelectFilter = TemplateWithSelectFilter.bind({});\n\nconst TemplateWithCheckboxFilter = (args) => {\n const attributes = generateAttributesFromArgs(args);\n return formatHtml(`\n <jump-filter ${attributes} name='sort' title='Ordina per'>\n <jump-filtergroup class='filterGroupCheckbox' name='animal' title='Animale' other-label='Mostra di più' max-elements='3'>\n <jump-filter-checkbox value=\"cane\" label=\"Cane\" count=\"12\"></jump-filter-checkbox>\n <jump-filter-checkbox value=\"gatto\" label=\"Gatto\"></jump-filter-checkbox>\n <jump-filter-checkbox value=\"pesce\" label=\"Pesce\"></jump-filter-checkbox>\n </jump-filtergroup>\n </jump-filter>`);\n}\n\nexport const WithCheckboxFilter = TemplateWithCheckboxFilter.bind({});\n\n//mixed kind of filters\nconst TemplateWithMixedFilters = (args) => {\n const attributes = generateAttributesFromArgs(args);\n return formatHtml(`<jump-filter ${attributes} name='sort' title='Ordina per'>\n <!-- select group -->\n <jump-filtergroup class='filterGroupSelect' name=\"tax-select-sample\" title=\"Ordinamento\" other-label=\"Mostra di più\" max-elements=3>\n <select class='filterGroupSelect' label=\"Ordina per\" variant=\"primary\" size=\"small\">\n <option value=\"0\">Ordina per</option>\n <option value=\"latest\">Più recenti</option>\n <option value=\"oldest\">Più vecchi</option>\n </select>\n </jump-filtergroup>\n\n <jump-filtergroup class='filterGroupCheckbox' name=\"tax-animal-sample-checkbox\" title=\"Animali\" other-label=\"Mostra di più\" max-elements=3>\n <label><input type='checkbox' value='cane'>Cane</label>\n <label><input type='checkbox' value='gatto'>Gatto</label>\n <label><input type='checkbox' value='pesce'>Pesce</label>\n </jump-filtergroup>\n\n <!-- radio group -->\n <jump-filtergroup class='filterGroupRadio' name=\"tax-animal-sample-radio\" title=\"Animali 2\" other-label=\"Mostra di più\" max-elements=3>\n <label><input type='radio' value='snakes'>Serpenti</label>\n <label><input type='radio' value='spiders'>Ragni</label>\n </jump-filtergroup>\n </jump-filter>`);\n}\n\nexport const WithMixedFilters = TemplateWithMixedFilters.bind({});\n\n\nconst TemplateWithMoreFilters = (args) => {\n const attributes = generateAttributesFromArgs(args);\n return formatHtml(`<jump-filter ${attributes} name='sort' title='Ordina per'>\n <jump-filtergroup class='filterGroupCheckbox' name=\"tax-animal-sample-checkbox\" title=\"Animali\" other-label=\"Mostra di più\" max-elements=8>\n <label><input type='checkbox' value='cane'>Cane</label>\n <label><input type='checkbox' value='gatto'>Gatto</label>\n <label><input type='checkbox' value='pesce'>Pesce</label>\n <label><input type='checkbox' value='cavallo'>Cavallo</label>\n <label><input type='checkbox' value='topo'>Topo</label>\n <label><input type='checkbox' value='coniglio'>Coniglio</label>\n <label><input type='checkbox' value='pappagallo'>Pappagallo</label>\n <label><input type='checkbox' value='tartaruga'>Tartaruga</label>\n <label><input type='checkbox' value='criceto'>Criceto</label>\n <label><input type='checkbox' value='canarino'>Canarino</label>\n <label><input type='checkbox' value='pesciolino'>Pesciolino</label>\n <label><input type='checkbox' value='pappagallino'>Pappagallino</label>\n <label><input type='checkbox' value='tartarughina'>Tartarughina</label>\n </jump-filtergroup>\n </jump-filter>`);\n}\n\nexport const WithMoreFilters = TemplateWithMoreFilters.bind({});\nWithMoreFilters.args = {\n filterButtonIcon: 'filter',\n showCount: true,\n offCanvasOverlay: true,\n};\n"]}
@@ -29,8 +29,8 @@ export class JumpFilterCheckbox {
29
29
  return this.el.checked;
30
30
  }
31
31
  render() {
32
- return (h(Host, { key: '046c23b0b66c4699aa0962a8113e682e42714452', ref: (host) => this.host = host }, this.value && this.label &&
33
- h("sl-checkbox", { key: 'c3a433acde331fa96f433339c56ab2a37e474fbd', value: this.value, ref: (el) => this.el = el, checked: this.checked }, this.label), this.count && h("span", { key: '3dfa72e71a55d99a0b54c6ae31bc9c696025264d', class: "count" }, this.count)));
32
+ return (h(Host, { key: 'c1ed5c7a59979dbe46338b2df91e5ab73c0547bd', ref: (host) => this.host = host }, this.value && this.label &&
33
+ h("sl-checkbox", { key: 'de838d7ec4dedc45935bca737c71251028adc658', value: this.value, ref: (el) => this.el = el, checked: this.checked }, this.label), this.count && h("span", { key: '4e7ca6acfdc390a1a9511d52c00135783e57b1cd', class: "count" }, this.count)));
34
34
  }
35
35
  static get is() { return "jump-filter-checkbox"; }
36
36
  static get encapsulation() { return "shadow"; }
@@ -126,10 +126,10 @@ export class JumpFiltergroup {
126
126
  //this.toggleHiddenItems();
127
127
  }
128
128
  render() {
129
- return (h(Host, { key: '617ff708e4d0d0e253ffc68ef6b09454979b825c' }, this.heading && h("h5", { key: '3b52d2bd28904d992a9e6484dffd4fd843912460' }, this.heading), h("div", { key: 'c58c3529632b7a12f5672f003db9c2796dfd3ab9', class: "filterGroup" }, h("slot", { key: '9a670a5c3413cb70509ce46c9e9120f11d274f00', ref: (el) => (this.slotItemsWrapper = el) })), this.inputs.length > this.maxElements &&
130
- h("jump-button", { key: '6501171c07fc582145449de789b5a6d65e4288e2', variant: "primary", size: "small", text: true, name: this.label, "aria-label": this.label, ref: (showMoreBtn) => {
129
+ return (h(Host, { key: 'd9c404b2cf02f6ccf99ee90fa016f3be62ca744d' }, this.heading && h("h5", { key: 'cbb0fcd303422832ad6a95a3659da5009a31a01f' }, this.heading), h("div", { key: '48581de8b6c699f5292cbeec105732da52afce2e', class: "filterGroup" }, h("slot", { key: '1d9891b55f19aba6bc3996d68c69f0bcda162729', ref: (el) => (this.slotItemsWrapper = el) })), this.inputs.length > this.maxElements &&
130
+ h("jump-button", { key: 'c04e54b74f4441b390bfa91794a775c10dc32ba0', variant: "primary", size: "small", text: true, name: this.label, "aria-label": this.label, ref: (showMoreBtn) => {
131
131
  this.showMoreBtn = showMoreBtn;
132
- }, onClick: () => this.handleShowMore() }, this.label, h("jump-icon", { key: 'f58c9913533102fa524f25d8e713224875e05ca1', slot: "suffix", name: !this.showMore ? 'chevron-down' : 'chevron-up' }))));
132
+ }, onClick: () => this.handleShowMore() }, this.label, h("jump-icon", { key: '231791a78b2ecefb2c7c841d5440162766dc0ad4', slot: "suffix", name: !this.showMore ? 'chevron-down' : 'chevron-up' }))));
133
133
  }
134
134
  static get is() { return "jump-filtergroup"; }
135
135
  static get encapsulation() { return "shadow"; }
@@ -19,14 +19,14 @@ export class JumpNavbar {
19
19
  }
20
20
  render() {
21
21
  var _a, _b;
22
- return (h(Host, { key: '87fa483a27dc0314a3fadcc0b7c4cf61013ad98d' }, h("jump-button", { key: 'b2756659bde1018ea284a59d0919729e593364ac', variant: "primary", size: "small", text: true, href: this.logo['link'], target: (_a = this.logo['target']) !== null && _a !== void 0 ? _a : '_self' }, h("img", { key: 'b3b7d8f6028d16d0967d7fdb71068cd9f2a0636c', src: this.logo['image_url'], alt: this.logo['alt'] })), this.isMobile &&
23
- h("div", { key: '9ff3e44a80259536f2bbb58ccc6be5967a3dc189', class: "MobileMenuOffCanvas" }, h("div", { key: 'c8e35bfbea3eb84d9df53fe8f18fa5cdccfe31c0', class: "MobileMenuOffCanvas__Header" }, "/* TODO: ricerca + pulsante chiusura + profilo utente con immagine */"), h("div", { key: 'ac6ad3c511ce635f4aa541a8326e97a77d3c4f2b', class: "MobileMenuOffCanvas__Navbar" }, this.navbar.cloneNode(true)), h("div", { key: 'f0f1ef266da0efa437c08df92a7d481b68892329', class: "MobileMenuOffCanvas__Footer" }, "/* TODO: langswitcher */", this.mobileLogo &&
24
- h("jump-button", { key: '6eaa0a821b15ea28e8a8672e03cf51c5e57a1ca1', variant: "primary", size: "small", text: true, href: this.mobileLogo['link'], target: (_b = this.mobileLogo['target']) !== null && _b !== void 0 ? _b : '_self' }, h("img", { key: '7ef8f3187b555bc27172d062fb19a20423409bbc', src: this.mobileLogo['image_url'], alt: this.mobileLogo['alt'] })))), h("nav", { key: 'ab7a9bcbd9e907448a6dc393f1efa32e80752856', ref: (el) => {
22
+ return (h(Host, { key: '4d846e61a027637ebe6023e9e155d754a716a0cb' }, h("jump-button", { key: '590ef7421967e36e061d4d2d49d9d8b10b0cb7d3', variant: "primary", size: "small", text: true, href: this.logo['link'], target: (_a = this.logo['target']) !== null && _a !== void 0 ? _a : '_self' }, h("img", { key: '951c8ad45b8e3cd754fd4426c73358541d7bb612', src: this.logo['image_url'], alt: this.logo['alt'] })), this.isMobile &&
23
+ h("div", { key: '4deeaa5bbdf1b9434dd8a4afbf32953aa7eabbe6', class: "MobileMenuOffCanvas" }, h("div", { key: '284504331b55f1fcb79408da6616c85b7d9542ee', class: "MobileMenuOffCanvas__Header" }, "/* TODO: ricerca + pulsante chiusura + profilo utente con immagine */"), h("div", { key: 'a8ba842d267d77aecf0a211e9c37052617b3ffd8', class: "MobileMenuOffCanvas__Navbar" }, this.navbar.cloneNode(true)), h("div", { key: '7b08ba459362c3c6ee68ad2915f9a8addadafbde', class: "MobileMenuOffCanvas__Footer" }, "/* TODO: langswitcher */", this.mobileLogo &&
24
+ h("jump-button", { key: '28ca557df1446898114567a84813c41cc1d47d73', variant: "primary", size: "small", text: true, href: this.mobileLogo['link'], target: (_b = this.mobileLogo['target']) !== null && _b !== void 0 ? _b : '_self' }, h("img", { key: '315be508f2902a9a5a69aff78b4c36d8daf3e1aa', src: this.mobileLogo['image_url'], alt: this.mobileLogo['alt'] })))), h("nav", { key: '19ece653a9c3c6d7728a12744ffe8c06618c1f97', ref: (el) => {
25
25
  this.navbar = el;
26
- } }, h("ul", { key: '70c90191941c1b371218a69216f30921c5e097af' }, this.navItems.map((item) => (h("li", null, h("jump-button", { variant: "primary", size: "small", text: true, href: item.link, target: item.target, class: item.class }, item.text, this.secondaryNavItems.some(secondaryItem => secondaryItem.parent === item.id) &&
26
+ } }, h("ul", { key: 'e60bf04441e02eca702dcc7760df97388c1f1043' }, this.navItems.map((item) => (h("li", null, h("jump-button", { variant: "primary", size: "small", text: true, href: item.link, target: item.target, class: item.class }, item.text, this.secondaryNavItems.some(secondaryItem => secondaryItem.parent === item.id) &&
27
27
  h("jump-icon", { slot: "suffix", library: "lucide", name: "chevron-down", size: "small" })), this.secondaryNavItems.map((secondaryItem) => (secondaryItem.parent === item.id &&
28
28
  h("ul", { "data-parent": secondaryItem.parent }, secondaryItem.title &&
29
- h("h4", null, secondaryItem.title), " /* TODO: utilizzare jump-heading? */", secondaryItem.items.map((subItem) => (h("li", null, h("jump-button", { variant: "primary", size: "small", text: true, href: subItem.link, target: subItem.target, class: subItem.class }, subItem.text)))))))))))), h("slot", { key: '7edb581eab5c8942b9670129f893e92eefe9b5f3', name: "actions" }, h("slot", { key: '9e1eaf7c15bd2767d78d00a594a28f1d867ebb6d', name: "lang_switcher" }), h("slot", { key: '9cff169f4012c9dc87e9b6b78497f3c0e53dae58', name: "search" }), h("slot", { key: '465d61b9266c7ff12cfd434decd44579b84ab908', name: "buttons" }), h("slot", { key: 'c7e66e9bc83921f327f4f7fe74e3e68ac3d4a44a', name: "cart" }))));
29
+ h("h4", null, secondaryItem.title), " /* TODO: utilizzare jump-heading? */", secondaryItem.items.map((subItem) => (h("li", null, h("jump-button", { variant: "primary", size: "small", text: true, href: subItem.link, target: subItem.target, class: subItem.class }, subItem.text)))))))))))), h("slot", { key: 'cde57eeb4d6586c370fbfb5d10e02dc423427af5', name: "actions" }, h("slot", { key: 'ad86ec7167939e4624489d0db2cbd3a7aa6bc721', name: "lang_switcher" }), h("slot", { key: 'c87b4a71d6183f21aff9155143e22a1fbe6cc7c4', name: "search" }), h("slot", { key: 'ac62a46a3aac954fb915e134ffcc149ece432a5f', name: "buttons" }), h("slot", { key: '0d49662ba2bba745efbd9d8151917c780cdfd632', name: "cart" }))));
30
30
  }
31
31
  static get is() { return "jump-navbar"; }
32
32
  static get encapsulation() { return "shadow"; }
@@ -22,7 +22,7 @@ export class JumpPagination {
22
22
  }
23
23
  /* --------------------- RENDER ------------------------------- */
24
24
  render() {
25
- return (h(Host, { key: 'e7b289bce3ef2bcfe2b45135b463feb2390c50a3', class: "JumpPagination" }, h("div", { key: '6559e463bf9d9973dd037f6b6a23f20816ef1882', class: "JumpPagination__Wrapper" }, h("div", { key: '5650bf9580bd470604e8841faf33e6b029549cda', class: "indicators" }, h("div", { key: 'b40e74ede39cd17fd770cf1fc46d46644a86fc63', class: "elements" }, h("span", { key: 'af919f31f94448c99291a830dd35da7169cd24ec' }, h("span", { key: '96b8773daf276e9285b91f06cf6f5fa28a5d6727' }, this.current), " ", this.pagLabel, " ", h("span", { key: 'e7dd92a3a48e23d5c28d1b6e0f3c07cddd837598' }, this.last))), h("div", { key: '1a3338a3e913f9c92a530203f91e93f6085b607c', class: "arrow" }, this.showFirstAndLast &&
25
+ return (h(Host, { key: '0d8a0a487d41050eff65c41bff0e20e7f8abe433', class: "JumpPagination" }, h("div", { key: 'c1c91aac8d9ad943ba38f17299d413f6b3a1d5aa', class: "JumpPagination__Wrapper" }, h("div", { key: '8dbead9e599c4750a30c7490c4a704d43c7ca9bb', class: "indicators" }, h("div", { key: '895b683174acd6517689a1b2e3f69378d5cf2b48', class: "elements" }, h("span", { key: 'b0ce7fb257a15f3a1e35548f976bf6baa2308017' }, h("span", { key: '84e42742f53628b69f90b88a88817d3c4d2ea5f1' }, this.current), " ", this.pagLabel, " ", h("span", { key: 'f85a4f32cf66fec16efa76bfc88e21d4c41e3406' }, this.last))), h("div", { key: 'd33612fdd1a9d917256ce8e9f7fce45c158243dc', class: "arrow" }, this.showFirstAndLast &&
26
26
  // <button
27
27
  // onClick={() => {this.current = 1} }
28
28
  // disabled={(this.current === 1) ? true : false}>
@@ -30,14 +30,14 @@ export class JumpPagination {
30
30
  // disabled={(this.current === 1) ? true : false}
31
31
  // ></jump-icon>
32
32
  // </button>
33
- h("jump-button", { key: '23075cb5a2513048e7ee690242f0ce5a54c95538', onClick: () => { this.current = 1; }, variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: (this.current === 1) ? true : false }, " ", h("jump-icon", { key: '0e834c3117fca9d2dd593a4b5ceb3934e7eb547a', slot: "suffix", name: "chevrons-left" }), " "), h("jump-button", { key: 'fc27582a142ed6051187692f6a31a2c51f91e4af', onClick: () => { this.current--; }, variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: (this.current === 1) ? true : false }, " ", h("jump-icon", { key: 'a2998274cf27c33b80f7fd0c917a5583b70ef8f0', slot: "suffix", name: "chevron-left" }), " "), h("jump-button", { key: '26d7a56a2a0312cf526dcf9bc432679c756534f1', onClick: () => { this.current++; }, variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: (this.current === this.last) ? true : false }, " ", h("jump-icon", { key: '6769d3484fdd63d2fff5268392111137273b9541', slot: "suffix", name: "chevron-right" }), " "), this.showFirstAndLast &&
33
+ h("jump-button", { key: '26db97e47f3254b72643f7bb73bbdecdc733c2d6', onClick: () => { this.current = 1; }, variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: (this.current === 1) ? true : false }, " ", h("jump-icon", { key: '16c2e37bd1726c5c6852d74eec67d042cba25d46', slot: "suffix", name: "chevrons-left" }), " "), h("jump-button", { key: '105c2ea910ffbfe4d00957158d546c198e3f11b6', onClick: () => { this.current--; }, variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: (this.current === 1) ? true : false }, " ", h("jump-icon", { key: 'b0066718df5f60bd148dffad1c9485f631d0a840', slot: "suffix", name: "chevron-left" }), " "), h("jump-button", { key: '00f6565f368c82a16d9819208b3babfef09fe1cf', onClick: () => { this.current++; }, variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: (this.current === this.last) ? true : false }, " ", h("jump-icon", { key: '337627fd7d3486776f609153522df3ba77c44ce0', slot: "suffix", name: "chevron-right" }), " "), this.showFirstAndLast &&
34
34
  // <button
35
35
  // onClick={() => {this.current = this.last}}
36
36
  // disabled={(this.current === this.last) ? true : false}
37
37
  // >
38
38
  // <jump-icon library="fa" category="regular" name="chevrons-right" size="small" slot="prefix"></jump-icon>
39
39
  // </button>
40
- h("jump-button", { key: '7e3c33e8a7c7d7c1dbaeb6009781602023f71133', onClick: () => { this.current = this.last; }, variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: (this.current === this.last) ? true : false }, " ", h("jump-icon", { key: '418f61b2481e76f5766a92e6b7c8d0fad5dcd70a', slot: "suffix", name: "chevrons-right" }), " "))))));
40
+ h("jump-button", { key: '2c052d95c792f43f7899b0503ddbfed79c187ef2', onClick: () => { this.current = this.last; }, variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: (this.current === this.last) ? true : false }, " ", h("jump-icon", { key: 'f77d6a81d0a9e281dd8a845b100cce5a107085cc', slot: "suffix", name: "chevrons-right" }), " "))))));
41
41
  }
42
42
  static get is() { return "jump-pagination"; }
43
43
  static get encapsulation() { return "shadow"; }
@@ -6,22 +6,38 @@ export default {
6
6
  pagLabel: {
7
7
  name: "pag-label",
8
8
  control: 'text',
9
- description: 'Indica la dicitura di paginazione. Di default è "di".'
9
+ description: 'Indica la dicitura di paginazione. Di default è "di".',
10
+ table: {
11
+ type: { summary: 'string' },
12
+ defaultValue: { summary: 'di' },
13
+ },
10
14
  },
11
15
  showFirstAndLast: {
12
16
  name: 'show-first-and-last',
13
17
  control: 'boolean',
14
- description: 'Indica se mostrare le frecce aggiuntive per navigare rapidamente nella prima o ultima pagina. Da preferire con un numero elevato di pagine.'
18
+ description: 'Indica se mostrare le frecce aggiuntive per navigare rapidamente nella prima o ultima pagina. Da preferire con un numero elevato di pagine.',
19
+ table: {
20
+ type: { summary: 'boolean' },
21
+ defaultValue: { summary: 'false' },
22
+ },
15
23
  },
16
24
  current: {
17
25
  name: 'current-page',
18
26
  control: 'number',
19
- description: 'Pagina corrente'
27
+ description: 'Pagina corrente',
28
+ table: {
29
+ type: { summary: 'number' },
30
+ defaultValue: { summary: 1 },
31
+ },
20
32
  },
21
33
  last: {
22
34
  name: 'last',
23
35
  control: 'number',
24
36
  description: 'Indica l\'ultima pagina',
37
+ table: {
38
+ type: { summary: 'number' },
39
+ defaultValue: { summary: 10 },
40
+ },
25
41
  },
26
42
  }
27
43
  };
@@ -1 +1 @@
1
- {"version":3,"file":"jump-pagination.stories.js","sourceRoot":"","sources":["../../../src/components/jump-pagination/jump-pagination.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,UAAU,EAAC,MAAM,mBAAmB,CAAC;AAE1E,eAAe;IACb,KAAK,EAAE,sCAAsC;IAC7C,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,QAAQ,EAAC;YACP,IAAI,EAAE,WAAW;YACjB,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,uDAAuD;SACrE;QAED,gBAAgB,EAAE;YAChB,IAAI,EAAE,qBAAqB;YAC3B,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,6IAA6I;SAC3J;QACD,OAAO,EAAE;YACP,IAAI,EAAE,cAAc;YACpB,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,iBAAiB;SAC/B;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,MAAM;YACZ,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,yBAAyB;SACvC;KACF;CACF,CAAC;AAEF,MAAM,WAAW,GAAG,CAAC,IAAI,EAAE,EAAE;IAC3B,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,UAAU,CAAC,oBAAoB,UAAU,qBAAqB,CAAC,CAAC;AACzE,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,oBAAoB,UAAU;;;;;4DAKU,EAAE;oEACM,IAAI,CAAC,OAAO;;;;;;;oBAO5D,CAAC,CAAC;AACtB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE/C,UAAU,CAAC,IAAI,GAAG;IAChB,gBAAgB,EAAE,KAAK;IACvB,OAAO,EAAE,CAAC;IACV,IAAI,EAAE,EAAE;IACR,QAAQ,EAAE,IAAI;CACf,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,2BAA2B,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEtE,iBAAiB,CAAC,IAAI,GAAG;IACvB,gBAAgB,EAAE,KAAK;IACvB,OAAO,EAAE,CAAC;IACV,IAAI,EAAC,EAAE;IACP,QAAQ,EAAE,IAAI;CACf,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,2BAA2B,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEvE,kBAAkB,CAAC,IAAI,GAAG;IACxB,gBAAgB,EAAE,IAAI;IACtB,OAAO,EAAE,CAAC;IACV,IAAI,EAAE,EAAE;IACR,QAAQ,EAAE,IAAI;CACf,CAAC","sourcesContent":["import { generateAttributesFromArgs, formatHtml} from '../../utils/utils';\n\nexport default {\n title: 'Components/Pagination/PaginationBase',\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 \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 current: {\n name: 'current-page',\n control: 'number',\n description: 'Pagina corrente'\n },\n last: {\n name: 'last',\n control: 'number',\n description: 'Indica l\\'ultima pagina',\n },\n }\n};\n\nconst TemplatePag = (args) => {\n const attributes = generateAttributesFromArgs(args);\n return formatHtml(`<jump-pagination ${attributes}></jump-pagination>`);\n};\n\nconst TemplateWithListenerExample = (args, data) => {\n let id = data.id;\n const attributes = generateAttributesFromArgs(args);\n return formatHtml(`<jump-pagination ${attributes}></jump-pagination>\n <div>La pagina corrente è: <span id=\"page-number\">loading..<span></div>\n <script>\n (function() {\n let container;\n container = document.querySelector('#story--${id}');\n container.querySelector('#page-number').innerText = ${args.current};\n\n container.querySelector('jump-pagination').addEventListener('jump-accordion-open', (ev) => {\n console.log('ev', ev.detail);\n // container.querySelector('#page-number').innerText = ev.detail.current;\n });\n })();\n </script>`);\n};\n\nexport const Playground = TemplatePag.bind({});\n\nPlayground.args = {\n showFirstAndLast: false,\n current: 1,\n last: 10,\n pagLabel: 'di'\n};\n\nexport const PaginationRidotto = TemplateWithListenerExample.bind({});\n\nPaginationRidotto.args = {\n showFirstAndLast: false,\n current: 1,\n last:10,\n pagLabel: 'di'\n};\n\nexport const PaginationCompleto = TemplateWithListenerExample.bind({});\n\nPaginationCompleto.args = {\n showFirstAndLast: true,\n current: 1,\n last: 10,\n pagLabel: 'di'\n};"]}
1
+ {"version":3,"file":"jump-pagination.stories.js","sourceRoot":"","sources":["../../../src/components/jump-pagination/jump-pagination.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,UAAU,EAAC,MAAM,mBAAmB,CAAC;AAE1E,eAAe;IACb,KAAK,EAAE,sCAAsC;IAC7C,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,QAAQ,EAAC;YACP,IAAI,EAAE,WAAW;YACjB,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,uDAAuD;YAChE,KAAK,EAAE;gBACD,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;gBAC3B,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;aAClC;SACR;QAED,gBAAgB,EAAE;YAChB,IAAI,EAAE,qBAAqB;YAC3B,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,6IAA6I;YAC1J,KAAK,EAAE;gBACD,IAAI,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;gBAC5B,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;aACrC;SACJ;QACD,OAAO,EAAE;YACP,IAAI,EAAE,cAAc;YACpB,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,iBAAiB;YAC1B,KAAK,EAAE;gBACD,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;gBAC3B,YAAY,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;aAC/B;SACR;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,MAAM;YACZ,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,yBAAyB;YAClC,KAAK,EAAE;gBACD,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;gBAC3B,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE;aAChC;SACR;KACF;CACF,CAAC;AAEF,MAAM,WAAW,GAAG,CAAC,IAAI,EAAE,EAAE;IAC3B,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,UAAU,CAAC,oBAAoB,UAAU,qBAAqB,CAAC,CAAC;AACzE,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,oBAAoB,UAAU;;;;;4DAKU,EAAE;oEACM,IAAI,CAAC,OAAO;;;;;;;oBAO5D,CAAC,CAAC;AACtB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE/C,UAAU,CAAC,IAAI,GAAG;IAChB,gBAAgB,EAAE,KAAK;IACvB,OAAO,EAAE,CAAC;IACV,IAAI,EAAE,EAAE;IACR,QAAQ,EAAE,IAAI;CACf,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,2BAA2B,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEtE,iBAAiB,CAAC,IAAI,GAAG;IACvB,gBAAgB,EAAE,KAAK;IACvB,OAAO,EAAE,CAAC;IACV,IAAI,EAAC,EAAE;IACP,QAAQ,EAAE,IAAI;CACf,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,2BAA2B,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEvE,kBAAkB,CAAC,IAAI,GAAG;IACxB,gBAAgB,EAAE,IAAI;IACtB,OAAO,EAAE,CAAC;IACV,IAAI,EAAE,EAAE;IACR,QAAQ,EAAE,IAAI;CACf,CAAC","sourcesContent":["import { generateAttributesFromArgs, formatHtml} from '../../utils/utils';\n\nexport default {\n title: 'Components/Pagination/PaginationBase',\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 table: {\n type: { summary: 'string' },\n defaultValue: { summary: 'di' },\n },\n },\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 table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: 'false' },\n },\n },\n current: {\n name: 'current-page',\n control: 'number',\n description: 'Pagina corrente',\n table: {\n type: { summary: 'number' },\n defaultValue: { summary: 1 },\n },\n },\n last: {\n name: 'last',\n control: 'number',\n description: 'Indica l\\'ultima pagina',\n table: {\n type: { summary: 'number' },\n defaultValue: { summary: 10 },\n },\n },\n }\n};\n\nconst TemplatePag = (args) => {\n const attributes = generateAttributesFromArgs(args);\n return formatHtml(`<jump-pagination ${attributes}></jump-pagination>`);\n};\n\nconst TemplateWithListenerExample = (args, data) => {\n let id = data.id;\n const attributes = generateAttributesFromArgs(args);\n return formatHtml(`<jump-pagination ${attributes}></jump-pagination>\n <div>La pagina corrente è: <span id=\"page-number\">loading..<span></div>\n <script>\n (function() {\n let container;\n container = document.querySelector('#story--${id}');\n container.querySelector('#page-number').innerText = ${args.current};\n\n container.querySelector('jump-pagination').addEventListener('jump-accordion-open', (ev) => {\n console.log('ev', ev.detail);\n // container.querySelector('#page-number').innerText = ev.detail.current;\n });\n })();\n </script>`);\n};\n\nexport const Playground = TemplatePag.bind({});\n\nPlayground.args = {\n showFirstAndLast: false,\n current: 1,\n last: 10,\n pagLabel: 'di'\n};\n\nexport const PaginationRidotto = TemplateWithListenerExample.bind({});\n\nPaginationRidotto.args = {\n showFirstAndLast: false,\n current: 1,\n last:10,\n pagLabel: 'di'\n};\n\nexport const PaginationCompleto = TemplateWithListenerExample.bind({});\n\nPaginationCompleto.args = {\n showFirstAndLast: true,\n current: 1,\n last: 10,\n pagLabel: 'di'\n};"]}
@@ -70,9 +70,9 @@ export class JumpPaginationTable {
70
70
  /* --------------------- RENDER ------------------------------- */
71
71
  render() {
72
72
  var _a;
73
- return (h(Host, { key: '68cfdc8f670c77a14605e4f151b41e2d551531e5', class: "JumpPaginationTable" }, h("div", { key: '80d51c132999625d22b6e7ed73867e79a043ae99', class: "JumpPaginationTable__Wrapper" }, h("div", { key: '709e412acf386ad3149e7a04208a0ea4948b4f0b', class: "elementsPerPage" }, h("label", { key: '73985f2877b3c242b8deccb68ac11c878780e6ee', htmlFor: "elements" }, (_a = this.labelElementsPerPage) !== null && _a !== void 0 ? _a : 'Elements per page'), h("select", { key: '0def3077b6dc04018aecd2f50b0301bc19c29527', 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: 'c2691bc0e79d043625977b276ac38ec10a41d73b', class: "indicators" }, h("div", { key: 'd9d62ca7b06479244bb396d38fc01dd86236515d', class: "elements" }, h("span", { key: '51ea23a9d77319738404c8b6ead86ea0a9052e1c' }, h("span", { key: '8fd64ef028151ae61c31998f72036ff4c9c9f151' }, this.first), " - ", h("span", { key: 'a001b2a509920566c34a41afb24a823e0445c3e2' }, this.last), " ", this.pagLabel, " ", h("span", { key: '9a27e142353e7d410655f270988183a82c0792a1' }, this.total))), h("div", { key: 'ba778721da92c9147449de9d0869a06d65615602', class: "arrow" }, this.showFirstAndLast &&
74
- h("jump-button", { key: '76dfd54bfa05a6c33489aa41f9150c793fac5f85', 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: '0aee871e37e2e5b5190fc62cd8c8617d209f57ed', slot: "suffix", name: "chevrons-left" }), " "), h("jump-button", { key: '9e82cf38238d358a4084078b975a3f75bf55e9fe', 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: '7303a4371e0540dfa28feaf4a1f69662b646e64b', slot: "suffix", name: "chevron-left" }), " "), h("jump-button", { key: '4bfb0713a9a374c30873e046b7ded26965cfce84', 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: '52c929962accd14480152a0dfd2e03904fd79fc4', slot: "suffix", name: "chevron-right" }), " "), this.showFirstAndLast &&
75
- h("jump-button", { key: '6f0c43ef094c622447cd1095ab70ce6bfd2c464a', 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: 'cb05b4a61efdebf03a17b353f17572d038df251f', slot: "suffix", name: "chevrons-right" }), " "))))));
73
+ return (h(Host, { key: '1dda2093aa5db80f7f6260ec3b7b5bd72d4052e0', class: "JumpPaginationTable" }, h("div", { key: '5a2b79b4edae8d0e57634adebf82420e0af35c70', class: "JumpPaginationTable__Wrapper" }, h("div", { key: 'a850c96c7271cb8a1c397a9a2ddc73bdf2ee7c29', class: "elementsPerPage" }, h("label", { key: '6492f9b966c7d478294d94e094738326c61cdccd', htmlFor: "elements" }, (_a = this.labelElementsPerPage) !== null && _a !== void 0 ? _a : 'Elements per page'), h("select", { key: '9267913fac8a30d4a9c0808311cadcc1bbaf3040', 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: 'b537b63284129d72b74f5840c746e8c2af64ad5b', class: "indicators" }, h("div", { key: '953b71539236ec5568aa05c27c6013b410cf1bb2', class: "elements" }, h("span", { key: 'a4a7e076ae54547c28efe931abc6c47e46a10210' }, h("span", { key: '9aef003d0e4ae086054ed93474f41f41c9a8c9a0' }, this.first), " - ", h("span", { key: '8b21dcbe189896770d960f234be75b79aa472488' }, this.last), " ", this.pagLabel, " ", h("span", { key: '5bed4022d88261ba0f81ea1c4efe638e7b618256' }, this.total))), h("div", { key: 'e5e9157e33a0bc378ce23c067ca1697118f8e60a', class: "arrow" }, this.showFirstAndLast &&
74
+ h("jump-button", { key: '425e0f5133d814a6d4ebc73a0286cddbb377e778', 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: '042d40650b7e22c7039f7a36f6bd139219ae7ee6', slot: "suffix", name: "chevrons-left" }), " "), h("jump-button", { key: '766ebbcfa2d5dec6094fa38f42b1a4fa41bc96d3', 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: 'f7e98586070a619cc614c2aaaf7cc8176f8c8737', slot: "suffix", name: "chevron-left" }), " "), h("jump-button", { key: 'e72ab0fd379b3ba4028ea454218f75d7d9871988', 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: '92c2a994bbadbdb6ac40044426587bfe8ecf790d', slot: "suffix", name: "chevron-right" }), " "), this.showFirstAndLast &&
75
+ h("jump-button", { key: '7028f82644633bfb112f62f2fba3bc7eef9754cf', 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: '4240630bbd9a0c0c219d15a0ea6eeb65883c0a4b', slot: "suffix", name: "chevrons-right" }), " "))))));
76
76
  }
77
77
  static get is() { return "jump-pagination-table"; }
78
78
  static get originalStyleUrls() {
@@ -6,37 +6,65 @@ export default {
6
6
  pagLabel: {
7
7
  name: "pag-label",
8
8
  control: 'text',
9
- description: 'Indica la dicitura di paginazione. Di default è "di".'
9
+ description: 'Indica la dicitura di paginazione.',
10
+ table: {
11
+ type: { summary: 'string' },
12
+ defaultValue: { summary: 'di' },
13
+ },
10
14
  },
11
15
  first: {
12
16
  name: 'first',
13
17
  control: 'number',
14
18
  description: 'Indica il primo elemento della lista',
19
+ table: {
20
+ type: { summary: 'number' },
21
+ defaultValue: { summary: 1 },
22
+ },
15
23
  },
16
24
  last: {
17
25
  name: 'last',
18
26
  control: 'number',
19
27
  description: 'Indica l\'ultimo elemento della lista',
28
+ table: {
29
+ type: { summary: 'number' },
30
+ defaultValue: { summary: 10 },
31
+ },
20
32
  },
21
33
  total: {
22
34
  name: 'total',
23
35
  control: 'number',
24
36
  description: 'Indica il numero totale di elementi disponibili. ',
37
+ table: {
38
+ type: { summary: 'number' },
39
+ defaultValue: { summary: 100 },
40
+ },
25
41
  },
26
42
  labelElementsPerPage: {
27
43
  name: 'label-elements-per-page',
28
44
  control: 'text',
29
45
  description: 'Indica l\'etichetta per gli elementi per pagina',
46
+ table: {
47
+ type: { summary: 'string' },
48
+ defaultValue: { summary: 'Elementi per pagina' },
49
+ },
30
50
  },
31
51
  elementsRanges: {
32
52
  name: 'elements-ranges',
33
53
  control: 'text',
34
- description: "Indica i valori per la selezione degli elementi per pagina"
54
+ description: "Indica i valori per la selezione degli elementi per pagina",
55
+ table: {
56
+ type: { summary: 'string' },
57
+ defaultValue: { summary: '10,20,60,100' },
58
+ },
35
59
  },
36
60
  showFirstAndLast: {
37
61
  name: 'show-first-and-last',
38
62
  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.'
63
+ description: 'Indica se mostrare le frecce aggiuntive per navigare rapidamente nella prima o ultima pagina. Da preferire con un numero elevato di pagine.',
64
+ table: {
65
+ type: { summary: 'boolean' },
66
+ defaultValue: { summary: false },
67
+ },
40
68
  }
41
69
  }
42
70
  };
@@ -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,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};"]}
1
+ {"version":3,"file":"jump-pagination-table.stories.js","sourceRoot":"","sources":["../../../src/components/jump-pagination-table/jump-pagination-table.stories.ts"],"names":[],"mappings":"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","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.',\n table: {\n type: { summary: 'string' },\n defaultValue: { summary: 'di' },\n },\n },\n first: {\n name: 'first',\n control: 'number',\n description: 'Indica il primo elemento della lista',\n table: {\n type: { summary: 'number' },\n defaultValue: { summary: 1 },\n },\n },\n last: {\n name: 'last',\n control: 'number',\n description: 'Indica l\\'ultimo elemento della lista',\n table: {\n type: { summary: 'number' },\n defaultValue: { summary: 10 },\n },\n },\n total: {\n name: 'total',\n control: 'number',\n description: 'Indica il numero totale di elementi disponibili. ',\n table: {\n type: { summary: 'number' },\n defaultValue: { summary: 100 },\n },\n },\n labelElementsPerPage: {\n name: 'label-elements-per-page',\n control: 'text',\n description: 'Indica l\\'etichetta per gli elementi per pagina',\n table: {\n type: { summary: 'string' },\n defaultValue: { summary: 'Elementi per pagina' },\n },\n },\n elementsRanges: {\n name: 'elements-ranges',\n control: 'text', \n description:\"Indica i valori per la selezione degli elementi per pagina\",\n table: {\n type: { summary: 'string' },\n defaultValue: { summary: '10,20,60,100' },\n },\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 table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\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};"]}
@@ -57,11 +57,11 @@ export class JumpQuantity {
57
57
  }
58
58
  }
59
59
  render() {
60
- return (h(Host, { key: 'c8c5cbaed22ce180cc74a88fe785a1f7b1846c1c', value: this.value, "data-variant": this.variant, "data-hasbuttons": this.showButtons }, this.label && h("label", { key: '92006694c00522d202fba822c843365ab6e0d51b' }, this.label), h("div", { key: '6299b0b6c5a5b64fbcc7c2206a5d4af5c9f45113', class: `jump-quantity__InnerWrapper` }, this.showButtons &&
61
- h("jump-button", { key: '8d8d7b4a24d527ebc10ea47500de30ed9cc39040', onClick: () => this.currentValue = this.currentValue - this.step, disabled: this.currentValue <= this.min, variant: 'neutral', size: 'custom' }, h("jump-icon", { key: '34037f49b6b3cba457b2b6c5db774da655c25b3b', library: "lucide", name: "minus", size: "small" })), h("input", { key: '93a3a85df493c9d10f98fc93f694d7962162eedd', ref: (el) => {
60
+ return (h(Host, { key: 'ead75876fa94102bc05c2edda9c77ade65673d3e', value: this.value, "data-variant": this.variant, "data-hasbuttons": this.showButtons }, this.label && h("label", { key: '2a7248865a105f2bfd714fefcb91b84627880558' }, this.label), h("div", { key: '3bc3f242e8ff48e56effcc0dd2826ea864ffc09a', class: `jump-quantity__InnerWrapper` }, this.showButtons &&
61
+ h("jump-button", { key: 'ede33ddf99123df709159d1321ad8296008031b7', onClick: () => this.currentValue = this.currentValue - this.step, disabled: this.currentValue <= this.min, variant: 'neutral', size: 'custom' }, h("jump-icon", { key: '84ec5d8030d67e774217141e19ba65d8830eac2e', library: "lucide", name: "minus", size: "small" })), h("input", { key: '7d68b98ef548a479496c10d88fe9055a3d070851', ref: (el) => {
62
62
  this.inputEl = el;
63
63
  }, type: 'number', value: this.currentValue, onInput: (event) => this.handleChange(event), min: this.min, max: this.max, step: this.step, "aria-hasbuttons": this.showButtons }), this.showButtons &&
64
- h("jump-button", { key: '76105e10b7432b7fcf0161e44f0e298296b18a6d', onClick: () => this.currentValue = this.currentValue + this.step, disabled: this.currentValue >= this.max, variant: 'neutral', size: 'custom' }, h("jump-icon", { key: '5431d4f069b27f418aca9856099e12a777954009', library: "lucide", name: "plus", size: "small" })))));
64
+ h("jump-button", { key: '5b8861e22252a67b9ccd79f52af83afa4ebade05', onClick: () => this.currentValue = this.currentValue + this.step, disabled: this.currentValue >= this.max, variant: 'neutral', size: 'custom' }, h("jump-icon", { key: '0b771717df4d441a500a0176e43e6fdf26cf9514', library: "lucide", name: "plus", size: "small" })))));
65
65
  }
66
66
  static get is() { return "jump-quantity"; }
67
67
  static get encapsulation() { return "shadow"; }
@@ -39,8 +39,8 @@ export class JumpSearchBar {
39
39
  ;
40
40
  /* -------------------- RENDER ------------------------- */
41
41
  render() {
42
- return (h(Host, { key: 'efa1c6cdd7f2cb5d22b50707aee020bab23609b0', class: "JumpSearchBar " + (this.searchType == 'manual' ? 'manual outline' : (this.searchType + " " + this.variant)) }, h("input", { key: '823778b4c704a72ff14662dff408b41b4fe79fb1', placeholder: this.placeholder, type: "search", id: this.identifier, class: "search-input", ref: (el) => { this.jumpSearchBar = el; }, onInput: this.searchType === 'auto' ? this.debounce(this.doSearch) : undefined }), this.searchType === 'manual' &&
43
- h("jump-button", { key: '8f940966131504f605b0aadb272e0c590fb2b32f', variant: "secondary", size: "medium", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, onClick: () => this.doSearch() }, h("jump-icon", { key: 'df8a23cd6a3b8374bfb18fc2a9061ef4af5f887a', slot: "suffix", name: "magnifying-glass" }))));
42
+ return (h(Host, { key: 'a6ed47f15cdd659528d60d3c4d2b977d3afa5c49', class: "JumpSearchBar " + (this.searchType == 'manual' ? 'manual outline' : (this.searchType + " " + this.variant)) }, h("input", { key: '0667503e17f20d6f897c209a4f5c689adf55d00a', placeholder: this.placeholder, type: "search", id: this.identifier, class: "search-input", ref: (el) => { this.jumpSearchBar = el; }, onInput: this.searchType === 'auto' ? this.debounce(this.doSearch) : undefined }), this.searchType === 'manual' &&
43
+ h("jump-button", { key: 'a5ba6b253e4d427fa91612412cf98308fc164c05', variant: "secondary", size: "medium", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, onClick: () => this.doSearch() }, h("jump-icon", { key: '28d875402acb92e9e76baf97207db9d8880dd258', slot: "suffix", name: "magnifying-glass" }))));
44
44
  }
45
45
  static get is() { return "jump-search-bar"; }
46
46
  static get encapsulation() { return "shadow"; }