npm - @jumpgroup/jump-design-system - Versions diffs - 0.3.41 → 0.3.43 - Mend

@jumpgroup/jump-design-system 0.3.41 → 0.3.43

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 (115) hide show

package/dist/collection/components/jump-filter/jump-filter.js CHANGED Viewed

@@ -7,9 +7,12 @@ export class JumpFilter {
         this.filterButtonIcon = 'sliders';
         this.mobileThreshold = 768;
         this.filters = undefined;
+        this.showCount = false;
+        this.offCanvasOverlay = false;
         this.activeFilters = 0;
         this.showMobileFilters = false;
         this.isMobile = false;
+        this.offCanvasClasses = 'filtersDrawer__overlay';
     }
     filterChangeHandler(event) {
         //set this.filter as this.filters[event.detail.name] = event.detail.value; even if not present
@@ -26,10 +29,12 @@ export class JumpFilter {
             if (newValue) {
                 (_a = this.mobileToggle) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-expanded', 'true');
                 (_b = this.filtersDrawer) === null || _b === void 0 ? void 0 : _b.setAttribute('aria-hidden', 'false');
+                this.offCanvasClasses = 'filtersDrawer__overlay filtersDrawer__overlay--active';
             }
             else {
                 (_c = this.mobileToggle) === null || _c === void 0 ? void 0 : _c.setAttribute('aria-expanded', 'false');
                 (_d = this.filtersDrawer) === null || _d === void 0 ? void 0 : _d.setAttribute('aria-hidden', 'true');
+                this.offCanvasClasses = 'filtersDrawer__overlay';
             }
         }
     }
@@ -43,10 +48,15 @@ export class JumpFilter {
         this.handleResize();
     }
     render() {
-        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 &&
-            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 &&
-            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 &&
-            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' }))));
+        return (h(Host, { key: 'a6887d6f754cdba0e3ec854c0e553d4805c62c63', mobileFilters: this.showMobileFilters }, this.isMobile && h("jump-button", { key: '0194221f6ba4be2f547d8b6495f94c9d716e8be1', ref: (el) => {
+                this.mobileToggle = el;
+            }, buttonId: this.filterButtonIcon, variant: 'primary', outline: true, onClick: () => this.showMobileFilters = !this.showMobileFilters }, h("slot", { key: '5b60281b75d958d605c97b69be6576f177538740', name: "prefix" }, this.filterButtonIcon &&
+            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 &&
+            h("jump-badge", { key: '8c01c39288672210dc546ecb72fa7ef4d9c60bef', label: this.activeFilters.toString(), variant: "success", soft: true, dimension: "dot" }, "1"))), this.offCanvasOverlay &&
+            h("div", { key: 'b588e7ab489541c92a04df32ad40a5c31238451a', class: this.offCanvasClasses, onClick: () => this.showMobileFilters = false }), h("div", { key: 'af8c4b52c7a87461e98a63d2040999b179c6c372', ref: (el) => {
+                this.filtersDrawer = el;
+            }, class: "filtersDrawer", "data-variant": this.direction }, !this.isMobile &&
+            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' }))));
     }
     static get is() { return "jump-filter"; }
     static get encapsulation() { return "shadow"; }
@@ -168,6 +178,42 @@ export class JumpFilter {
                 },
                 "attribute": "filters",
                 "reflect": false
+            },
+            "showCount": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "show-count",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "offCanvasOverlay": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "off-canvas-overlay",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }
@@ -175,7 +221,8 @@ export class JumpFilter {
         return {
             "activeFilters": {},
             "showMobileFilters": {},
-            "isMobile": {}
+            "isMobile": {},
+            "offCanvasClasses": {}
         };
     }
     static get methods() {

package/dist/collection/components/jump-filter/jump-filter.js.map CHANGED Viewed

	@@ -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"]}

package/dist/collection/components/jump-filter/jump-filter.stories.js CHANGED Viewed

@@ -120,4 +120,9 @@ const TemplateWithMoreFilters = (args) => {
   </jump-filter>`);
 };
 export const WithMoreFilters = TemplateWithMoreFilters.bind({});
+WithMoreFilters.args = {
+    filterButtonIcon: 'filter',
+    showCount: true,
+    offCanvasOverlay: true,
+};
 //# sourceMappingURL=jump-filter.stories.js.map

package/dist/collection/components/jump-filter/jump-filter.stories.js.map CHANGED Viewed

	@@ -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"]}

package/dist/collection/components/jump-filter-checkbox/jump-filter-checkbox.js CHANGED Viewed

@@ -29,8 +29,8 @@ export class JumpFilterCheckbox {
         return this.el.checked;
     }
     render() {
-        return (h(Host, { key: '046c23b0b66c4699aa0962a8113e682e42714452', ref: (host) => this.host = host }, this.value && this.label &&
-            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)));
+        return (h(Host, { key: 'c1ed5c7a59979dbe46338b2df91e5ab73c0547bd', ref: (host) => this.host = host }, this.value && this.label &&
+            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)));
     }
     static get is() { return "jump-filter-checkbox"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/jump-filtergroup/jump-filtergroup.js CHANGED Viewed

@@ -126,10 +126,10 @@ export class JumpFiltergroup {
         //this.toggleHiddenItems();
     }
     render() {
-        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 &&
-            h("jump-button", { key: '6501171c07fc582145449de789b5a6d65e4288e2', variant: "primary", size: "small", text: true, name: this.label, "aria-label": this.label, ref: (showMoreBtn) => {
+        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 &&
+            h("jump-button", { key: 'c04e54b74f4441b390bfa91794a775c10dc32ba0', variant: "primary", size: "small", text: true, name: this.label, "aria-label": this.label, ref: (showMoreBtn) => {
                     this.showMoreBtn = showMoreBtn;
-                }, onClick: () => this.handleShowMore() }, this.label, h("jump-icon", { key: 'f58c9913533102fa524f25d8e713224875e05ca1', slot: "suffix", name: !this.showMore ? 'chevron-down' : 'chevron-up' }))));
+                }, onClick: () => this.handleShowMore() }, this.label, h("jump-icon", { key: '231791a78b2ecefb2c7c841d5440162766dc0ad4', slot: "suffix", name: !this.showMore ? 'chevron-down' : 'chevron-up' }))));
     }
     static get is() { return "jump-filtergroup"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/jump-navbar/jump-navbar.js CHANGED Viewed

@@ -19,14 +19,14 @@ export class JumpNavbar {
     }
     render() {
         var _a, _b;
-        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 &&
-            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 &&
-                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) => {
+        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 &&
+            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 &&
+                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) => {
                 this.navbar = el;
-            } }, 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) &&
+            } }, 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) &&
             h("jump-icon", { slot: "suffix", library: "lucide", name: "chevron-down", size: "small" })), this.secondaryNavItems.map((secondaryItem) => (secondaryItem.parent === item.id &&
             h("ul", { "data-parent": secondaryItem.parent }, secondaryItem.title &&
-                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" }))));
+                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" }))));
     }
     static get is() { return "jump-navbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/jump-pagination/jump-pagination.js CHANGED Viewed

@@ -22,7 +22,7 @@ export class JumpPagination {
     }
     /* --------------------- RENDER ------------------------------- */
     render() {
-        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 &&
+        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 &&
             // <button
             //   onClick={() => {this.current = 1} }
             //   disabled={(this.current === 1) ? true : false}>
@@ -30,14 +30,14 @@ export class JumpPagination {
             //     disabled={(this.current === 1) ? true : false}
             //     ></jump-icon>
             // </button>
-            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 &&
+            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 &&
             // <button
             //   onClick={() => {this.current = this.last}}
             //   disabled={(this.current === this.last) ? true : false}
             //   >
             //   <jump-icon library="fa" category="regular" name="chevrons-right" size="small" slot="prefix"></jump-icon>
             // </button>
-            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" }), " "))))));
+            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" }), " "))))));
     }
     static get is() { return "jump-pagination"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/jump-pagination/jump-pagination.stories.js CHANGED Viewed

@@ -6,22 +6,38 @@ export default {
         pagLabel: {
             name: "pag-label",
             control: 'text',
-            description: 'Indica la dicitura di paginazione. Di default è "di".'
+            description: 'Indica la dicitura di paginazione. Di default è "di".',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'di' },
+            },
         },
         showFirstAndLast: {
             name: 'show-first-and-last',
             control: 'boolean',
-            description: 'Indica se mostrare le frecce aggiuntive per navigare rapidamente nella prima o ultima pagina. Da preferire con un numero elevato di pagine.'
+            description: 'Indica se mostrare le frecce aggiuntive per navigare rapidamente nella prima o ultima pagina. Da preferire con un numero elevato di pagine.',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
         },
         current: {
             name: 'current-page',
             control: 'number',
-            description: 'Pagina corrente'
+            description: 'Pagina corrente',
+            table: {
+                type: { summary: 'number' },
+                defaultValue: { summary: 1 },
+            },
         },
         last: {
             name: 'last',
             control: 'number',
             description: 'Indica l\'ultima pagina',
+            table: {
+                type: { summary: 'number' },
+                defaultValue: { summary: 10 },
+            },
         },
     }
 };

package/dist/collection/components/jump-pagination/jump-pagination.stories.js.map CHANGED Viewed

	@@ -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};"]}

package/dist/collection/components/jump-pagination-table/jump-pagination-table.js CHANGED Viewed

@@ -70,9 +70,9 @@ export class JumpPaginationTable {
     /* --------------------- RENDER ------------------------------- */
     render() {
         var _a;
-        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 &&
-            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 &&
-            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" }), " "))))));
+        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 &&
+            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 &&
+            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" }), " "))))));
     }
     static get is() { return "jump-pagination-table"; }
     static get originalStyleUrls() {

package/dist/collection/components/jump-pagination-table/jump-pagination-table.stories.js CHANGED Viewed

@@ -6,37 +6,65 @@ export default {
         pagLabel: {
             name: "pag-label",
             control: 'text',
-            description: 'Indica la dicitura di paginazione. Di default è "di".'
+            description: 'Indica la dicitura di paginazione.',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'di' },
+            },
         },
         first: {
             name: 'first',
             control: 'number',
             description: 'Indica il primo elemento della lista',
+            table: {
+                type: { summary: 'number' },
+                defaultValue: { summary: 1 },
+            },
         },
         last: {
             name: 'last',
             control: 'number',
             description: 'Indica l\'ultimo elemento della lista',
+            table: {
+                type: { summary: 'number' },
+                defaultValue: { summary: 10 },
+            },
         },
         total: {
             name: 'total',
             control: 'number',
             description: 'Indica il numero totale di elementi disponibili. ',
+            table: {
+                type: { summary: 'number' },
+                defaultValue: { summary: 100 },
+            },
         },
         labelElementsPerPage: {
             name: 'label-elements-per-page',
             control: 'text',
             description: 'Indica l\'etichetta per gli elementi per pagina',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'Elementi per pagina' },
+            },
         },
         elementsRanges: {
             name: 'elements-ranges',
             control: 'text',
-            description: "Indica i valori per la selezione degli elementi per pagina"
+            description: "Indica i valori per la selezione degli elementi per pagina",
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: '10,20,60,100' },
+            },
         },
         showFirstAndLast: {
             name: 'show-first-and-last',
             control: 'boolean',
-            description: 'Indica se mostrare le frecce aggiuntive per navigare rapidamente nella prima o ultima pagina. Da preferire con un numero elevato di pagine.'
+            description: 'Indica se mostrare le frecce aggiuntive per navigare rapidamente nella prima o ultima pagina. Da preferire con un numero elevato di pagine.',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: false },
+            },
         }
     }
 };

package/dist/collection/components/jump-pagination-table/jump-pagination-table.stories.js.map CHANGED Viewed

	@@ -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};"]}

package/dist/collection/components/jump-quantity/jump-quantity.js CHANGED Viewed

@@ -57,11 +57,11 @@ export class JumpQuantity {
         }
     }
     render() {
-        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 &&
-            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) => {
+        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 &&
+            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) => {
                 this.inputEl = el;
             }, 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 &&
-            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" })))));
+            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" })))));
     }
     static get is() { return "jump-quantity"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/jump-search-bar/jump-search-bar.js CHANGED Viewed

@@ -39,8 +39,8 @@ export class JumpSearchBar {
     ;
     /* -------------------- RENDER ------------------------- */
     render() {
-        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' &&
-            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" }))));
+        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' &&
+            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" }))));
     }
     static get is() { return "jump-search-bar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/jump-search-bar/jump-search-bar.stories.js CHANGED Viewed

@@ -7,17 +7,29 @@ export default {
             name: 'identifier',
             control: 'text',
             description: 'L\'id dell\'elemento',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'search-bar' },
+            },
         },
         placeholder: {
             name: 'placeholder',
             control: 'text',
             description: 'Il testo del placeholder',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'Cerca...' },
+            },
         },
         searchType: {
             name: 'searchType',
             control: 'select',
             options: ['auto', 'manual'],
             description: "Scelta della modalità di ricerca tra quella automatica e quella manuale.",
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'auto' },
+            },
         },
         variant: {
             name: 'variant',
@@ -27,16 +39,24 @@ export default {
                 arg: 'searchType',
                 eq: 'auto',
             },
-            description: 'Solo se tipologia "auto", Scelta dello stile della barra di ricerca tra filled, linear e outline.'
+            description: 'Solo se tipologia "auto", Scelta dello stile della barra di ricerca tra filled, linear e outline.',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'linear' },
+            },
         },
         debounceTime: {
             name: 'debounce-time',
             control: 'number',
-            description: 'Il tempo di attesa per l\'invio della ricerca in caso di ricerca automatica.',
+            description: 'Il tempo di attesa per l\'invio della ricerca in caso di ricerca automatica. In millisecondi.',
             if: {
                 arg: 'searchType',
                 eq: 'auto',
-            }
+            },
+            table: {
+                type: { summary: 'number' },
+                defaultValue: { summary: 500 },
+            },
         }
     }
 };