@jumpgroup/jump-design-system 0.3.8 → 0.3.14

package/dist/cjs/jump-tab.cjs.entry.js

@@ -82,7 +82,7 @@ const JumpTab = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '141d0932c588a4644d67abf4378858eb8a3771f7', class: "JumpTab", id: this.tabGroupName, ref: (el) => { this.JumpTabEl = el; } }, index.h("div", { key: '2b84773fbb263e8a593793da0db59c0110566ad7', class: "Wrapper " + this.variant }, index.h("slot", { key: '559a5801972af5c746cfca3d0a387855316d10ee', name: "tab-item" })), index.h("div", { key: '5d2c365e4e6d9694faa073025560e1984135af47' }, index.h("slot", { key: 'ebf5b38c8a196ed002c88c24360942d05eb04ef7', name: "tab-content" }))));
+        return (index.h(index.Host, { key: '8bee60d35e49d0afbc66a258108abc0242897206', class: "JumpTab", id: this.tabGroupName, ref: (el) => { this.JumpTabEl = el; } }, index.h("div", { key: '8328fe6bee0408102e0cba38f90c58b883908d3d', class: "Wrapper " + this.variant }, index.h("slot", { key: '0e4fd0e4d93148cdf01ff78abc36373dda53ae93', name: "tab-item" })), index.h("div", { key: '9540449ea09f1373e8aefd3fa1c503553e2077ae' }, index.h("slot", { key: 'e3bca29c3edb9f3ac12816ddebc8ac7b760d40a2', name: "tab-content" }))));
     }
 };
 JumpTab.style = JumpTabStyle0;

package/dist/cjs/loader.cjs.js

@@ -8,7 +8,7 @@ const appGlobals = require('./app-globals-3a1e7e63.js');
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["jump-button_2.cjs",[[1,"jump-button",{"disabled":[4],"variant":[1],"outline":[4],"size":[1],"full":[4],"pill":[4],"text":[4],"onlyIcon":[4,"only-icon"],"href":[1],"target":[1],"type":[1],"name":[1],"value":[1],"ariaLabel":[1,"aria-label"],"class":[1],"buttonId":[1,"button-id"]}],[1,"jump-icon",{"class":[1],"library":[1],"name":[1],"category":[1],"size":[1],"label":[1],"src":[1]}]]],["jump-card-ecommerce.cjs",[[1,"jump-card-ecommerce",{"onlyIconButton":[4,"only-icon-button"],"hasBackground":[4,"has-background"],"badge":[1],"favorite":[1540],"hasFavorite":[4,"has-favorite"],"favoriteBtnClass":[1,"favorite-btn-class"],"link":[1],"img":[1],"imgAlt":[1,"img-alt"],"hoverImg":[1,"hover-img"],"hoverImgAlt":[1,"hover-img-alt"],"videoSrc":[1,"video-src"],"notificationUrl":[1,"notification-url"],"notificationText":[1,"notification-text"],"productName":[1,"product-name"],"subtitle":[1],"productId":[1,"product-id"],"price":[2],"salePrice":[2,"sale-price"],"currency":[1],"outOfStock":[1540,"out-of-stock"],"outOfStockText":[1,"out-of-stock-text"],"addToCartText":[1,"add-to-cart-text"],"waitingListText":[1,"waiting-list-text"],"addToWaitingList":[4,"add-to-waiting-list"],"addedToCart":[4,"added-to-cart"],"endAddedToCart":[4,"end-added-to-cart"],"variations":[32],"selectedVariation":[32]},[[0,"jump-card-ecommerce-option-connected","addOption"]]]]],["jump-filter.cjs",[[1,"jump-filter",{"direction":[1],"filterHeading":[1,"filter-heading"],"filterButtonLabel":[1,"filter-button-label"],"filterButtonIcon":[1,"filter-button-icon"],"mobileThreshold":[2,"mobile-threshold"],"filters":[8],"activeFilters":[32],"showMobileFilters":[32],"isMobile":[32],"getFilters":[64]},[[0,"jump-filterchange","filterChangeHandler"],[9,"resize","handleResize"]]]]],["jump-filtergroup.cjs",[[1,"jump-filtergroup",{"name":[1],"title":[1],"otherLabel":[1,"other-label"],"lessLabel":[1,"less-label"],"maxElements":[2,"max-elements"],"variant":[1],"values":[32],"value":[32],"slotItems":[32],"inputs":[32],"showMore":[32],"getValues":[64],"getActiveAmount":[64],"getInputs":[64],"getName":[64]}]]],["jump-pagination.cjs",[[1,"jump-pagination",{"pagLabel":[1,"pag-label"],"last":[2],"showFirstAndLast":[4,"show-first-and-last"],"current":[32]},null,{"current":["watchcurrent"]}]]],["jump-pagination-table.cjs",[[0,"jump-pagination-table",{"elementsRanges":[16],"elPerPage":[2,"el-per-page"],"pagLabel":[513,"pag-label"],"labelElementsPerPage":[513,"label-elements-per-page"],"total":[514],"first":[514],"last":[514],"showFirstAndLast":[516,"show-first-and-last"]},null,{"elPerPage":["elPerPageChanged"]}]]],["jump-quantity.cjs",[[65,"jump-quantity",{"min":[2],"max":[2],"step":[2],"label":[1],"type":[1],"variant":[1],"showButtons":[4,"show-buttons"],"value":[2],"getValue":[64],"reset":[64]},null,{"value":["onValueChange"]}]]],["jump-tab-item.cjs",[[1,"jump-tab-item",{"identifier":[1],"iconName":[1,"icon-name"],"iconPosition":[1,"icon-position"],"label":[1],"active":[4],"disabled":[4],"variant":[32]}]]],["jump-accordion.cjs",[[1,"jump-accordion"]]],["jump-card.cjs",[[4,"jump-card",{"horizontal":[4],"dark":[4],"shadow":[4],"border":[4],"borderRadius":[4,"border-radius"],"topBorderContentRadius":[4,"top-border-content-radius"],"boxed":[4],"roundedMedia":[4,"rounded-media"],"imgSrc":[1,"img-src"],"imgAlt":[1,"img-alt"],"videoSrc":[1,"video-src"]}]]],["jump-card-ecommerce-option.cjs",[[1,"jump-card-ecommerce-option",{"code":[1],"imgUrl":[1,"img-url"],"label":[1],"sku":[1],"taxonomy":[1]}]]],["jump-tab.cjs",[[1,"jump-tab",{"tabGroupName":[1,"tab-group-name"],"variant":[1]},[[0,"jump-change-active-tab","changeActiveTabHandler"]]]]],["jump-tab-panel.cjs",[[1,"jump-tab-panel",{"identifier":[1],"active":[4]}]]],["jump-badge.cjs",[[1,"jump-badge",{"label":[1],"variant":[513],"dimension":[513],"soft":[516],"outline":[516]}]]]], options);
+  return index.bootstrapLazy([["jump-card-ecommerce.cjs",[[1,"jump-card-ecommerce",{"onlyIconButton":[4,"only-icon-button"],"hasBackground":[4,"has-background"],"badge":[1],"favorite":[1540],"hasFavorite":[4,"has-favorite"],"favoriteBtnClass":[1,"favorite-btn-class"],"link":[1],"img":[1],"imgAlt":[1,"img-alt"],"hoverImg":[1,"hover-img"],"hoverImgAlt":[1,"hover-img-alt"],"videoSrc":[1,"video-src"],"notificationUrl":[1,"notification-url"],"notificationText":[1,"notification-text"],"productName":[1,"product-name"],"subtitle":[1],"productId":[1,"product-id"],"price":[2],"salePrice":[2,"sale-price"],"currency":[1],"outOfStock":[1540,"out-of-stock"],"outOfStockText":[1,"out-of-stock-text"],"addToCartText":[1,"add-to-cart-text"],"waitingListText":[1,"waiting-list-text"],"addToWaitingList":[4,"add-to-waiting-list"],"addedToCart":[4,"added-to-cart"],"endAddedToCart":[4,"end-added-to-cart"],"variations":[32],"selectedVariation":[32]},[[0,"jump-card-ecommerce-option-connected","addOption"]]]]],["jump-filter.cjs",[[1,"jump-filter",{"direction":[1],"filterHeading":[1,"filter-heading"],"filterButtonLabel":[1,"filter-button-label"],"filterButtonIcon":[1,"filter-button-icon"],"mobileThreshold":[2,"mobile-threshold"],"filters":[8],"activeFilters":[32],"showMobileFilters":[32],"isMobile":[32],"getFilters":[64]},[[0,"jump-filterchange","filterChangeHandler"],[9,"resize","handleResize"]]]]],["jump-filtergroup.cjs",[[1,"jump-filtergroup",{"name":[1],"heading":[1],"otherLabel":[1,"other-label"],"lessLabel":[1,"less-label"],"maxElements":[2,"max-elements"],"variant":[1],"values":[32],"value":[32],"slotItems":[32],"inputs":[32],"showMore":[32],"getValues":[64],"getActiveAmount":[64],"getInputs":[64],"getName":[64]}]]],["jump-pagination.cjs",[[1,"jump-pagination",{"pagLabel":[1,"pag-label"],"last":[2],"showFirstAndLast":[4,"show-first-and-last"],"current":[32]},null,{"current":["watchcurrent"]}]]],["jump-pagination-table.cjs",[[0,"jump-pagination-table",{"elementsRanges":[1,"elements-ranges"],"pagLabel":[513,"pag-label"],"labelElementsPerPage":[513,"label-elements-per-page"],"total":[514],"first":[514],"last":[514],"showFirstAndLast":[516,"show-first-and-last"],"elementsRangesArray":[32],"elPerPage":[32]},null,{"elementsRanges":["elementsRangesChanged"],"elPerPage":["elPerPageChanged"]}]]],["jump-quantity.cjs",[[65,"jump-quantity",{"min":[2],"max":[2],"step":[2],"label":[1],"type":[1],"variant":[1],"showButtons":[4,"show-buttons"],"value":[2],"getValue":[64],"reset":[64]},null,{"value":["onValueChange"]}]]],["jump-tab-item.cjs",[[1,"jump-tab-item",{"identifier":[1],"iconName":[1,"icon-name"],"iconPosition":[1,"icon-position"],"label":[1],"active":[4],"disabled":[4],"variant":[32]}]]],["jump-accordion.cjs",[[1,"jump-accordion"]]],["jump-card.cjs",[[4,"jump-card",{"horizontal":[4],"dark":[4],"shadow":[4],"border":[4],"borderRadius":[4,"border-radius"],"topBorderContentRadius":[4,"top-border-content-radius"],"boxed":[4],"roundedMedia":[4,"rounded-media"],"imgSrc":[1,"img-src"],"imgAlt":[1,"img-alt"],"videoSrc":[1,"video-src"]}]]],["jump-card-ecommerce-option.cjs",[[1,"jump-card-ecommerce-option",{"code":[1],"imgUrl":[1,"img-url"],"label":[1],"sku":[1],"taxonomy":[1]}]]],["jump-filter-checkbox.cjs",[[1,"jump-filter-checkbox",{"value":[1],"label":[1],"checked":[516],"count":[8],"isChecked":[64]}]]],["jump-tab.cjs",[[1,"jump-tab",{"tabGroupName":[1,"tab-group-name"],"variant":[1]},[[0,"jump-change-active-tab","changeActiveTabHandler"]]]]],["jump-tab-panel.cjs",[[1,"jump-tab-panel",{"identifier":[1],"active":[4]}]]],["jump-badge.cjs",[[1,"jump-badge",{"label":[1],"variant":[513],"dimension":[513],"soft":[516],"outline":[516]}]]],["jump-button_2.cjs",[[1,"jump-button",{"disabled":[4],"variant":[1],"outline":[4],"size":[1],"full":[4],"pill":[4],"text":[4],"onlyIcon":[4,"only-icon"],"href":[1],"target":[1],"type":[1],"name":[1],"value":[1],"ariaLabel":[1,"aria-label"],"class":[1],"buttonId":[1,"button-id"]}],[1,"jump-icon",{"class":[1],"library":[1],"name":[1],"category":[1],"size":[1],"label":[1],"src":[1]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -7,6 +7,7 @@
     "components/jump-card-ecommerce/jump-card-ecommerce.js",
     "components/jump-card-ecommerce-option/jump-card-ecommerce-option.js",
     "components/jump-filter/jump-filter.js",
+    "components/jump-filter-checkbox/jump-filter-checkbox.js",
     "components/jump-filtergroup/jump-filtergroup.js",
     "components/jump-icon/jump-icon.js",
     "components/jump-pagination/jump-pagination.js",

package/dist/collection/components/jump-filter/jump-filter.css

@@ -1,8 +1,15 @@
 :host h3 {
   margin: 0;
 }
-:host .filtersDrawer {
+
+.filtersDrawer {
   display: flex;
   flex-direction: column;
   gap: 1rem;
+}
+.filtersDrawer .filtersDrawer__header {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 0.5rem;
 }

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

@@ -4,7 +4,7 @@ export class JumpFilter {
         this.direction = 'vertical';
         this.filterHeading = 'Filtra per';
         this.filterButtonLabel = 'Filtri';
-        this.filterButtonIcon = 'filter';
+        this.filterButtonIcon = 'sliders';
         this.mobileThreshold = 768;
         this.filters = undefined;
         this.activeFilters = 0;
@@ -39,8 +39,9 @@ export class JumpFilter {
         }
     }
     render() {
-        return (h(Host, { key: 'a8a5a1f52c55e0a4673950ccc8bf97ced277b5e1', mobileFilters: this.showMobileFilters }, this.isMobile && h("jump-button", { key: '8cb3ab66f4d8c8e7f40799c4ba75a1c4ae9afcdb', ref: (el) => { this.mobileToggle = el; }, buttonId: this.filterButtonIcon, variant: 'primary', outline: true }, h("slot", { key: '9e04e5f5ae56d7b902bec14c5552cf6741569f0e', name: "prefix" }, this.filterButtonIcon && h("jump-icon", { key: '48ed3066dc3cf124dcbe331e75b173ff66e11ced', class: "small", name: this.filterButtonIcon }), this.filterButtonLabel), h("slot", { key: '05e6c49117d6a1d2948177c76b3cb147bcf56229', name: "suffix" }, this.activeFilters > 0 ? `(${this.activeFilters})` : '0')), h("div", { key: '7cd87540e56dc46be79ea0ffce82b242d11d105a', ref: (el) => { this.filtersDrawer = el; }, class: "filtersDrawer", "data-variant": this.direction }, !this.isMobile &&
-            h("div", { key: '315a7e739cb230f14dd02f965bebe8be357de3f7', class: 'filtersDrawer__header' }, h("jump-icon", { key: '931920029b78afd420d0aac3f20b050096de9e3c', class: "small", name: this.filterButtonIcon }), h("h3", { key: '634402d897250a72a282b79188d48a1813c27337' }, this.filterHeading)), h("slot", { key: '48db024bd7aeb2e29d537d59cd8556599613a8ba' }))));
+        return (h(Host, { key: '792f2607cc6d4e4987884b4e1bf06a63e447b296', mobileFilters: this.showMobileFilters }, this.isMobile && h("jump-button", { key: '02e4a491b2d1593a26353ff3886ca5c07319596e', ref: (el) => { this.mobileToggle = el; }, buttonId: this.filterButtonIcon, variant: 'primary', outline: true }, h("slot", { key: 'bf26e0b6de709eb73245754b7bc01fc800a65f54', name: "prefix" }, this.filterButtonIcon &&
+            h("jump-icon", { key: '7a6897ca7dcc5ae3e3d7665e938db135e80d05a2', library: "fa", category: "regular", name: this.filterButtonIcon, size: "small" }), this.filterButtonLabel), h("slot", { key: '07639a79439659f99621cbdb187f2c3774c858f7', name: "suffix" }, this.activeFilters > 0 ? `(${this.activeFilters})` : '0')), h("div", { key: '1ad1334d892c929d449cbe24763e28c31b049d47', ref: (el) => { this.filtersDrawer = el; }, class: "filtersDrawer", "data-variant": this.direction }, !this.isMobile &&
+            h("div", { key: '7132ae093a15f6fa699beda14b6ca54f568a4fac', class: 'filtersDrawer__header' }, h("jump-icon", { key: '2ec24b4c6fe935de64048e71aff5f02be14655e9', class: "small", name: this.filterButtonIcon }), h("h3", { key: '188eb63f15bfd8426d071ab6dcc43740cd049157' }, this.filterHeading)), h("slot", { key: '6f5d6b88d61a4534060973eef110bc2891b6083b' }))));
     }
     static get is() { return "jump-filter"; }
     static get encapsulation() { return "shadow"; }
@@ -126,7 +127,7 @@ export class JumpFilter {
                 },
                 "attribute": "filter-button-icon",
                 "reflect": false,
-                "defaultValue": "'filter'"
+                "defaultValue": "'sliders'"
             },
             "mobileThreshold": {
                 "type": "number",

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

@@ -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,MAAM,eAAe,CAAC;AAOhF,MAAM,OAAO,UAAU;;yBAE0B,UAAU;6BACzB,YAAY;iCACR,QAAQ;gCACT,QAAQ;+BACT,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;IAED;;OAEG;IAEH,KAAK,CAAC,UAAU;QACd,OAAO,IAAI,CAAC,OAAO,CAAC;IACtB,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC7B,CAAC;IAED,mBAAmB;QACjB,IAAG,IAAI,CAAC,YAAY,EAAC,CAAC;YACpB,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;gBAC/C,IAAG,CAAC,IAAI,CAAC,QAAQ;oBAAE,OAAO;gBAC1B,IAAI,CAAC,iBAAiB,GAAG,CAAC,IAAI,CAAC,iBAAiB,CAAC;YACnD,CAAC,CAAC,CAAC;QACL,CAAC;IACH,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,EAAE,IAAI;gBAClE,6DAAM,IAAI,EAAC,QAAQ;oBAChB,IAAI,CAAC,gBAAgB,IAAI,kEAAW,KAAK,EAAC,OAAO,EAAC,IAAI,EAAE,IAAI,CAAC,gBAAgB,GAAc;oBAC3F,IAAI,CAAC,iBAAiB,CAClB;gBACP,6DAAM,IAAI,EAAC,QAAQ,IAChB,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,CAAC,GAAG,CACpD,CACK;YAEb,4DACC,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,GAAE,IAAI,CAAC,aAAa,GAAG,EAAE,CAAA,CAAA,CAAC,EACtC,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;gBACN,8DAAa,CACT,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h, State, Listen, Method } 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 = 'filter';\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  /**\n   * Get the active filters from the component\n   */\n  @Method()\n  async getFilters() {\n    return this.filters;\n  }\n\n  componentDidLoad(){\n    this.toggleMobileFilters();\n  }\n\n  toggleMobileFilters() {\n    if(this.mobileToggle){\n      this.mobileToggle.addEventListener('click', () => {\n        if(!this.isMobile) return;\n        this.showMobileFilters = !this.showMobileFilters;\n      });\n    }\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={true}>\n          <slot name=\"prefix\">\n            {this.filterButtonIcon && <jump-icon class=\"small\" name={this.filterButtonIcon}></jump-icon>}\n            {this.filterButtonLabel}\n          </slot>\n          <slot name=\"suffix\">\n            {this.activeFilters > 0 ? `(${this.activeFilters})` : '0'}\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          <slot></slot>\n        </div>}\n      </Host>\n    );\n  }\n}\n"]}
+{"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,MAAM,eAAe,CAAC;AAOhF,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;IAED;;OAEG;IAEH,KAAK,CAAC,UAAU;QACd,OAAO,IAAI,CAAC,OAAO,CAAC;IACtB,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC7B,CAAC;IAED,mBAAmB;QACjB,IAAG,IAAI,CAAC,YAAY,EAAC,CAAC;YACpB,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;gBAC/C,IAAG,CAAC,IAAI,CAAC,QAAQ;oBAAE,OAAO;gBAC1B,IAAI,CAAC,iBAAiB,GAAG,CAAC,IAAI,CAAC,iBAAiB,CAAC;YACnD,CAAC,CAAC,CAAC;QACL,CAAC;IACH,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,EAAE,IAAI;gBAClE,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,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,CAAC,GAAG,CACpD,CACK;YAEb,4DACC,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,GAAE,IAAI,CAAC,aAAa,GAAG,EAAE,CAAA,CAAA,CAAC,EACtC,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;gBACN,8DAAa,CACT,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h, State, Listen, Method } 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  /**\n   * Get the active filters from the component\n   */\n  @Method()\n  async getFilters() {\n    return this.filters;\n  }\n\n  componentDidLoad(){\n    this.toggleMobileFilters();\n  }\n\n  toggleMobileFilters() {\n    if(this.mobileToggle){\n      this.mobileToggle.addEventListener('click', () => {\n        if(!this.isMobile) return;\n        this.showMobileFilters = !this.showMobileFilters;\n      });\n    }\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={true}>\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 ? `(${this.activeFilters})` : '0'}\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          <slot></slot>\n        </div>}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -62,11 +62,12 @@ const TemplateWithSelectFilter = (args) => {
 export const WithSelectFilter = TemplateWithSelectFilter.bind({});
 const TemplateWithCheckboxFilter = (args) => {
     const attributes = generateAttributesFromArgs(args);
-    return formatHtml(`<jump-filter ${attributes} name='sort' title='Ordina per'>
+    return formatHtml(`
+  <jump-filter ${attributes} name='sort' title='Ordina per'>
     <jump-filtergroup class='filterGroupCheckbox' name='animal' title='Animale' other-label='Mostra di più' max-elements='3'>
-      <label><input type='checkbox' value='cane'>Cane</label>
-      <label><input type='checkbox' value='gatto'>Gatto</label>
-      <label><input type='checkbox' value='pesce'>Pesce</label>
+     <jump-filter-checkbox value="cane" label="Cane" count="12"></jump-filter-checkbox>
+     <jump-filter-checkbox value="gatto" label="Gatto"></jump-filter-checkbox>
+     <jump-filter-checkbox value="pesce" label="Pesce"></jump-filter-checkbox>
     </jump-filtergroup>
   </jump-filter>`);
 };

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

@@ -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,gBAAgB,UAAU;;;;;;iBAM7B,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(`<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      <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  </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"]}
+{"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"]}

package/dist/collection/components/jump-filter-checkbox/jump-filter-checkbox.css

@@ -0,0 +1,31 @@
+:host {
+  display: flex;
+  width: 100%;
+}
+:host .count {
+  color: var(--neutral-grey-secondary, #707070);
+}
+:host sl-checkbox {
+  display: flex;
+  width: 100%;
+}
+:host sl-checkbox::part(control) {
+  height: 1rem;
+  width: 1rem;
+  border: 1px solid var(--neutral-grey-secondary, #707070);
+  border-radius: 3px;
+}
+:host sl-checkbox::part(control--checked) {
+  background-color: var(--status-interaction-standard, #2C6ECB);
+  border-color: var(--status-interaction-standard, #2C6ECB);
+  color: var(--neutral-ultralight, #fff);
+}
+:host sl-checkbox::part(label) {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: flex-start;
+  flex-grow: 1;
+  color: var(--neutral-grey-primary, #1d1d1d);
+  font-family: var(--ff-primary), serif;
+}

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

@@ -0,0 +1,161 @@
+import { Host, h } from "@stencil/core";
+import "@shoelace-style/shoelace/dist/components/checkbox/checkbox.js";
+export class JumpFilterCheckbox {
+    constructor() {
+        this.value = undefined;
+        this.label = undefined;
+        this.checked = false;
+        this.count = null;
+    }
+    componentDidLoad() {
+        this.listenSLChange();
+    }
+    listenSLChange() {
+        if (this.host) {
+            this.host.addEventListener('sl-change', () => {
+                //invert the checked value
+                this.checked = !this.checked;
+                this.toggleCheckbox.emit({
+                    //@ts-ignore
+                    value: this.el.value,
+                    //@ts-ignore
+                    checked: this.checked,
+                });
+            });
+        }
+    }
+    async isChecked() {
+        // @ts-ignore
+        return this.el.checked;
+    }
+    render() {
+        return (h(Host, { key: '8c7ea463a6e26c6f77962cd0295dcb41411fa074', ref: (host) => this.host = host }, this.value && this.label &&
+            h("sl-checkbox", { key: '7467e1c364d868c7d58a58937411daf4f8c4e397', value: this.value, ref: (el) => this.el = el, checked: this.checked }, this.label), this.count && h("span", { key: 'e3add7e4ad2024096d8484b93cb276ac714d57d8', class: "count" }, "(", this.count, ")")));
+    }
+    static get is() { return "jump-filter-checkbox"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["jump-filter-checkbox.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["jump-filter-checkbox.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "value",
+                "reflect": false
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "checked": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "checked",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "count": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | string",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "count",
+                "reflect": false,
+                "defaultValue": "null"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "toggleCheckbox",
+                "name": "jump-checkbox-change",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "isChecked": {
+                "complexType": {
+                    "signature": "() => Promise<any>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<any>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+}
+//# sourceMappingURL=jump-filter-checkbox.js.map

package/dist/collection/components/jump-filter-checkbox/jump-filter-checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jump-filter-checkbox.js","sourceRoot":"","sources":["../../../src/components/jump-filter-checkbox/jump-filter-checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAgB,MAAM,EAAE,MAAM,eAAe,CAAC;AACtF,OAAO,+DAA+D,CAAC;AAOvE,MAAM,OAAO,kBAAkB;;;;uBAIe,KAAK;qBAChB,IAAI;;IAKrC,gBAAgB;QACd,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAED,cAAc;QACZ,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE,GAAG,EAAE;gBAC3C,0BAA0B;gBAC1B,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;gBAC7B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC;oBACvB,YAAY;oBACZ,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC,KAAK;oBACpB,YAAY;oBACZ,OAAO,EAAE,IAAI,CAAC,OAAO;iBACtB,CAAC,CAAC;YACL,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAKD,KAAK,CAAC,SAAS;QACb,aAAa;QACb,OAAO,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC;IACzB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,GAAG,EAAE,CAAC,IAAiB,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI;YAC/C,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK;gBACvB,oEAAa,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,CAAC,EAAe,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,EACpE,OAAO,EAAE,IAAI,CAAC,OAAO,IACpB,IAAI,CAAC,KAAK,CACC;YACf,IAAI,CAAC,KAAK,IAAI,6DAAM,KAAK,EAAC,OAAO;;gBAAG,IAAI,CAAC,KAAK;oBAAS,CACnD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter, Method } from '@stencil/core';\nimport '@shoelace-style/shoelace/dist/components/checkbox/checkbox.js';\n\n@Component({\n  tag: 'jump-filter-checkbox',\n  styleUrl: 'jump-filter-checkbox.scss',\n  shadow: true,\n})\nexport class JumpFilterCheckbox {\n\n  @Prop() value: string;\n  @Prop() label: string;\n  @Prop({ reflect: true }) checked: boolean = false;\n  @Prop() count: number | string = null;\n\n  host: HTMLElement;\n  el: HTMLElement;\n\n  componentDidLoad() {\n    this.listenSLChange();\n  }\n\n  listenSLChange() {\n    if (this.host) {\n      this.host.addEventListener('sl-change', () => {\n        //invert the checked value\n        this.checked = !this.checked;\n        this.toggleCheckbox.emit({\n          //@ts-ignore\n          value: this.el.value,\n          //@ts-ignore\n          checked: this.checked,\n        });\n      });\n    }\n  }\n\n  @Event({ eventName: 'jump-checkbox-change' }) toggleCheckbox: EventEmitter;\n\n  @Method()\n  async isChecked() {\n    // @ts-ignore\n    return this.el.checked;\n  }\n\n  render() {\n    return (\n      <Host ref={(host: HTMLElement) => this.host = host}>\n        {this.value && this.label &&\n          <sl-checkbox value={this.value} ref={(el: HTMLElement) => this.el = el}\n            checked={this.checked}>\n            {this.label}\n          </sl-checkbox>}\n        {this.count && <span class=\"count\">({this.count})</span>}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/jump-filter-checkbox/jump-filter-checkbox.stories.js

@@ -0,0 +1,51 @@
+import { generateAttributesFromArgs, formatHtml } from "../../utils/utils";
+export default {
+    title: 'Components/Filters/JumpFilterCheckbox',
+    tags: ['autodocs'],
+    argTypes: {
+        value: {
+            name: 'value',
+            control: 'text',
+            description: 'Il valore del checkbox',
+            label: 'ciao',
+        },
+        label: {
+            name: 'label',
+            control: 'text',
+            description: 'Il testo del label',
+        },
+        checked: {
+            name: 'checked',
+            control: 'boolean',
+            description: 'Il valore iniziale del checkbox',
+        },
+        count: {
+            name: 'count',
+            control: 'number',
+            description: 'Il numero da visualizzare',
+        },
+    }
+};
+const Template = (args) => {
+    const attributes = generateAttributesFromArgs(args);
+    return formatHtml(`<jump-filter-checkbox ${attributes}>
+</jump-filter-checkbox>`);
+};
+export const Default = Template.bind({});
+const TemplateSampleMultiple = () => {
+    return formatHtml(`
+  <script>
+    document.addEventListener('jump-checkbox-change', (event) => {
+      alert('Received the custom jump-checkbox-change event: ' + JSON.stringify(event.detail));
+      console.log('Received the custom jump-checkbox-change event: ', event.detail);
+    });
+  </script>
+  <div style="max-width: 200px;">
+    <jump-filter-checkbox value="1" label="Dieci" count="10"></jump-filter-checkbox>
+    <jump-filter-checkbox value="2" label="Venti" count="20" checked></jump-filter-checkbox>
+    <jump-filter-checkbox value="3" label="Trenta" count="30"></jump-filter-checkbox>
+  </div>
+`);
+};
+export const TemplateSampleMulti = TemplateSampleMultiple.bind({});
+//# sourceMappingURL=jump-filter-checkbox.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"jump-filter-checkbox.stories.js","sourceRoot":"","sources":["../../../src/components/jump-filter-checkbox/jump-filter-checkbox.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,KAAK,EAAE;YACL,IAAI,EAAE,OAAO;YACb,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,wBAAwB;YACrC,KAAK,EAAE,MAAM;SACd;QACD,KAAK,EAAE;YACL,IAAI,EAAE,OAAO;YACb,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,oBAAoB;SAClC;QACD,OAAO,EAAE;YACP,IAAI,EAAE,SAAS;YACf,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,iCAAiC;SAC/C;QACD,KAAK,EAAE;YACL,IAAI,EAAE,OAAO;YACb,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,2BAA2B;SACzC;KACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;IACxB,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,UAAU,CAAC,yBAAyB,UAAU;wBAC/B,CAAC,CAAC;AAC1B,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAGzC,MAAM,sBAAsB,GAAG,GAAG,EAAE;IAClC,OAAO,UAAU,CAAC;;;;;;;;;;;;CAYnB,CAAC,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { generateAttributesFromArgs, formatHtml} from '../../utils/utils';\n\nexport default {\n  title: 'Components/Filters/JumpFilterCheckbox',\n  tags: ['autodocs'],\n  argTypes: {\n    value: {\n      name: 'value',\n      control: 'text',\n      description: 'Il valore del checkbox',\n      label: 'ciao',\n    },\n    label: {\n      name: 'label',\n      control: 'text',\n      description: 'Il testo del label',\n    },\n    checked: {\n      name: 'checked',\n      control: 'boolean',\n      description: 'Il valore iniziale del checkbox',\n    },\n    count: {\n      name: 'count',\n      control: 'number',\n      description: 'Il numero da visualizzare',\n    },\n  }\n};\n\nconst Template = (args) => {\n  const attributes = generateAttributesFromArgs(args);\n  return formatHtml(`<jump-filter-checkbox ${attributes}>\n</jump-filter-checkbox>`);\n};\n\nexport const Default = Template.bind({});\n\n\nconst TemplateSampleMultiple = () => {\n  return formatHtml(`\n  <script>\n    document.addEventListener('jump-checkbox-change', (event) => {\n      alert('Received the custom jump-checkbox-change event: ' + JSON.stringify(event.detail));\n      console.log('Received the custom jump-checkbox-change event: ', event.detail);\n    });\n  </script>\n  <div style=\"max-width: 200px;\">\n    <jump-filter-checkbox value=\"1\" label=\"Dieci\" count=\"10\"></jump-filter-checkbox>\n    <jump-filter-checkbox value=\"2\" label=\"Venti\" count=\"20\" checked></jump-filter-checkbox>\n    <jump-filter-checkbox value=\"3\" label=\"Trenta\" count=\"30\"></jump-filter-checkbox>\n  </div>\n`);\n};\n\nexport const TemplateSampleMulti = TemplateSampleMultiple.bind({});\n"]}

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

@@ -2,7 +2,7 @@ import { Host, h } from "@stencil/core";
 export class JumpFiltergroup {
     constructor() {
         this.name = 'tax-name';
-        this.title = 'Titolo del filtro';
+        this.heading = 'Titolo del filtro';
         this.otherLabel = 'Mostra altro';
         this.lessLabel = 'Mostra meno';
         this.maxElements = 8;
@@ -69,9 +69,25 @@ export class JumpFiltergroup {
             values: this.values,
         });
     }
+    handleCheckboxChange(event) {
+        if (event.detail.checked && !this.values.includes(event.detail.value)) {
+            this.values.push(event.detail.value);
+        }
+        else if (!event.detail.checked && this.values.includes(event.detail.value)) {
+            const index = this.values.indexOf(event.detail.value);
+            if (index !== -1) {
+                this.values.splice(index, 1);
+            }
+        }
+        this.change.emit({
+            name: this.name,
+            values: this.values,
+        });
+    }
     componentDidLoad() {
         this.slotItems = this.slotItemsWrapper.assignedElements();
         this.slotItemsWrapper.addEventListener('change', this.handleChange.bind(this));
+        this.slotItemsWrapper.addEventListener('jump-checkbox-change', this.handleCheckboxChange.bind(this));
         let index = 0;
         this.slotItems.forEach((item) => {
             if (index > this.maxElements) {
@@ -98,8 +114,8 @@ export class JumpFiltergroup {
         });
     }
     render() {
-        return (h(Host, { key: 'aa5959350948a2325f4b646ab8e6d31311df03a0' }, this.title && h("h5", { key: '43dff28c8b63b311b673390fabfec1dfaf933386' }, this.title), h("div", { key: '4b93f3ab110f6646977e00590eb8bee9e7b1ce28', class: "filterGroup" }, h("slot", { key: '459320fd46540ac84ab5e2ba3cd911e0bfcd663c', ref: (el) => (this.slotItemsWrapper = el) })), this.inputs.length > this.maxElements &&
-            h("jump-button", { key: '24999d7f0a79eeefd25ecd6c677f1170e14df6b5', variant: "primary", size: "small", text: true, name: this.showMore ? this.otherLabel : this.lessLabel, "aria-label": this.showMore ? this.otherLabel : this.lessLabel, onClick: () => this.handleShowMore() }, this.showMore ? this.otherLabel : this.lessLabel, h("jump-icon", { key: '7731006e80030c6d6a9fc8ce4b49fc60f792834e', slot: "suffix", name: this.showMore ? 'chevron-down' : 'chevron-down' }))));
+        return (h(Host, { key: 'dea99beebc67c24f7d4dd7e72e8c87a2504d8beb' }, this.heading && h("h5", { key: '62e6239ba68ed6a8b3bcbd4a09fb504e0d2546bc' }, this.heading), h("div", { key: '4556c42ac238fe081d09a434d39973a84eb5de7d', class: "filterGroup" }, h("slot", { key: 'e62ab17b893a61bd7db190a0110c7b54827b88c2', ref: (el) => (this.slotItemsWrapper = el) })), this.inputs.length > this.maxElements &&
+            h("jump-button", { key: '452b3a669ac521aa3f421bd2d59915fd61af2534', variant: "primary", size: "small", text: true, name: this.showMore ? this.otherLabel : this.lessLabel, "aria-label": this.showMore ? this.otherLabel : this.lessLabel, onClick: () => this.handleShowMore() }, this.showMore ? this.otherLabel : this.lessLabel, h("jump-icon", { key: '55c462c090eb7f2531365cc4618b68ec626af432', slot: "suffix", name: this.showMore ? 'chevron-down' : 'chevron-down' }))));
     }
     static get is() { return "jump-filtergroup"; }
     static get encapsulation() { return "shadow"; }
@@ -133,7 +149,7 @@ export class JumpFiltergroup {
                 "reflect": false,
                 "defaultValue": "'tax-name'"
             },
-            "title": {
+            "heading": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -147,7 +163,7 @@ export class JumpFiltergroup {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "title",
+                "attribute": "heading",
                 "reflect": false,
                 "defaultValue": "'Titolo del filtro'"
             },

package/dist/collection/components/jump-filtergroup/jump-filtergroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"jump-filtergroup.js","sourceRoot":"","sources":["../../../src/components/jump-filtergroup/jump-filtergroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Event, Method } from '@stencil/core';\n\n@Component({\n  tag: 'jump-filtergroup',\n  styleUrl: 'jump-filtergroup.scss',\n  shadow: true,\n})\nexport class JumpFiltergroup {\n  @Prop() name: string = 'tax-name';\n  @Prop() title: string = 'Titolo del filtro';\n  @Prop() otherLabel: string = 'Mostra altro';\n  @Prop() lessLabel: string = 'Mostra meno';\n  @Prop() maxElements: number = 8;\n  //TODO: Add Accordion variant within jump-acccordion component\n  @Prop() variant: 'accordion' | 'default' = 'default';\n\n  @State() values: string[] = [];\n  @State() value: string = '';\n  @State() slotItems: any;\n  @State() inputs: any = [];\n  @State() showMore: boolean = true;\n\n  @Event({ eventName: 'jump-filterchange' }) change;\n\n  slotItemsWrapper: HTMLSlotElement;\n\n  @Method('getValues')\n  async getValues() {\n    return this.values;\n  }\n\n  @Method('getActiveAmount')\n  async getActiveAmount() {\n    return this.values.length;\n  }\n\n  @Method('getInputs')\n  async getInputs() {\n    return this.inputs;\n  }\n\n  @Method('getName')\n  async getName() {\n    return this.name;\n  }\n\n  toggleHiddenItems() {\n    this.slotItemsWrapper.assignedElements().forEach((item, index) => {\n      if(index > this.maxElements) {\n        item.setAttribute('data-hide', this.showMore ? 'true' : 'false');\n      }\n    });\n  }\n\n  handleShowMore() {\n    this.showMore = !this.showMore;\n    this.toggleHiddenItems();\n  }\n\n  handleChange(event: Event) {\n    const target = event.target as HTMLInputElement | HTMLSelectElement;\n    const newValue = target.value;\n\n    if (target.tagName === 'INPUT') {\n      if (target.type === 'checkbox') {\n        // @ts-ignore\n        if (target.checked) {\n          this.values.push(newValue);\n        } else {\n          const index = this.values.indexOf(newValue);\n          if (index !== -1) {\n            this.values.splice(index, 1);\n          }\n        }\n      } else if (target.type === 'radio') {\n        // Se è un input radio selezionato, imposta il valore e aggiorna this.values\n        this.value = newValue;\n        this.values = [newValue]; // Assicurati che this.values contenga solo il valore selezionato\n      }\n    } else if (target.tagName === 'SELECT') {\n      // Se è un select, aggiorna semplicemente il valore\n      this.value = newValue;\n      this.values = [newValue];\n    }\n\n    // Emit event con i valori aggiornati\n    this.change.emit({\n      name: this.name,\n      values: this.values,\n    });\n  }\n\n  componentDidLoad() {\n    this.slotItems = this.slotItemsWrapper.assignedElements();\n    this.slotItemsWrapper.addEventListener('change', this.handleChange.bind(this));\n\n    let index = 0;\n    this.slotItems.forEach((item) => {\n      if(index > this.maxElements) {\n        item.setAttribute('data-hide', 'true');\n      }\n      if (item.tagName === 'INPUT' || item.tagName === 'SELECT') {\n        this.inputs.push(item);\n        if (item.tagName === 'INPUT' && item.type === 'radio') {\n          item.name = this.name;\n        }\n      } else {\n        const inputs = item.querySelectorAll('input, select');\n        if (inputs.length > 0) {\n          inputs.forEach((input) => {\n            this.inputs.push(input);\n\n            if (input.tagName === 'INPUT' && input.type === 'radio') {\n              input.name = this.name;\n            }\n          });\n        }\n      }\n      index++;\n    });\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.title && <h5>{this.title}</h5>}\n        <div class=\"filterGroup\">\n          <slot ref={(el) => (this.slotItemsWrapper = el as HTMLSlotElement)}></slot>\n        </div>\n        {this.inputs.length > this.maxElements &&\n          <jump-button variant=\"primary\" size=\"small\" text name={this.showMore ? this.otherLabel : this.lessLabel}\n                       aria-label={this.showMore ? this.otherLabel : this.lessLabel}\n                       onClick={() => this.handleShowMore() }>\n            {this.showMore ? this.otherLabel : this.lessLabel}\n            <jump-icon slot=\"suffix\" name={this.showMore ? 'chevron-down' : 'chevron-down'}></jump-icon>\n          </jump-button>\n        }\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"jump-filtergroup.js","sourceRoot":"","sources":["../../../src/components/jump-filtergroup/jump-filtergroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Event, Method } from '@stencil/core';\n\n@Component({\n  tag: 'jump-filtergroup',\n  styleUrl: 'jump-filtergroup.scss',\n  shadow: true,\n})\nexport class JumpFiltergroup {\n  @Prop() name: string = 'tax-name';\n  @Prop() heading: string = 'Titolo del filtro';\n  @Prop() otherLabel: string = 'Mostra altro';\n  @Prop() lessLabel: string = 'Mostra meno';\n  @Prop() maxElements: number = 8;\n  //TODO: Add Accordion variant within jump-acccordion component\n  @Prop() variant: 'accordion' | 'default' = 'default';\n\n  @State() values: string[] = [];\n  @State() value: string = '';\n  @State() slotItems: any;\n  @State() inputs: any = [];\n  @State() showMore: boolean = true;\n\n  @Event({ eventName: 'jump-filterchange' }) change;\n\n  slotItemsWrapper: HTMLSlotElement;\n\n  @Method('getValues')\n  async getValues() {\n    return this.values;\n  }\n\n  @Method('getActiveAmount')\n  async getActiveAmount() {\n    return this.values.length;\n  }\n\n  @Method('getInputs')\n  async getInputs() {\n    return this.inputs;\n  }\n\n  @Method('getName')\n  async getName() {\n    return this.name;\n  }\n\n  toggleHiddenItems() {\n    this.slotItemsWrapper.assignedElements().forEach((item, index) => {\n      if(index > this.maxElements) {\n        item.setAttribute('data-hide', this.showMore ? 'true' : 'false');\n      }\n    });\n  }\n\n  handleShowMore() {\n    this.showMore = !this.showMore;\n    this.toggleHiddenItems();\n  }\n\n  handleChange(event: Event) {\n    const target = event.target as HTMLInputElement | HTMLSelectElement;\n    const newValue = target.value;\n\n    if (target.tagName === 'INPUT') {\n      if (target.type === 'checkbox') {\n        // @ts-ignore\n        if (target.checked) {\n          this.values.push(newValue);\n        } else {\n          const index = this.values.indexOf(newValue);\n          if (index !== -1) {\n            this.values.splice(index, 1);\n          }\n        }\n      } else if (target.type === 'radio') {\n        // Se è un input radio selezionato, imposta il valore e aggiorna this.values\n        this.value = newValue;\n        this.values = [newValue]; // Assicurati che this.values contenga solo il valore selezionato\n      }\n    } else if (target.tagName === 'SELECT') {\n      // Se è un select, aggiorna semplicemente il valore\n      this.value = newValue;\n      this.values = [newValue];\n    }\n\n    // Emit event con i valori aggiornati\n    this.change.emit({\n      name: this.name,\n      values: this.values,\n    });\n  }\n\n  handleCheckboxChange(event: CustomEvent) {\n    if (event.detail.checked && !this.values.includes(event.detail.value)) {\n      this.values.push(event.detail.value);\n    } else if (!event.detail.checked && this.values.includes(event.detail.value)) {\n      const index = this.values.indexOf(event.detail.value);\n      if (index !== -1) {\n        this.values.splice(index, 1);\n      }\n    }\n    this.change.emit({\n      name: this.name,\n      values: this.values,\n    });\n  }\n\n  componentDidLoad() {\n    this.slotItems = this.slotItemsWrapper.assignedElements();\n    this.slotItemsWrapper.addEventListener('change', this.handleChange.bind(this));\n    this.slotItemsWrapper.addEventListener('jump-checkbox-change', this.handleCheckboxChange.bind(this));\n\n    let index = 0;\n    this.slotItems.forEach((item) => {\n      if(index > this.maxElements) {\n        item.setAttribute('data-hide', 'true');\n      }\n      if (item.tagName === 'INPUT' || item.tagName === 'SELECT') {\n        this.inputs.push(item);\n        if (item.tagName === 'INPUT' && item.type === 'radio') {\n          item.name = this.name;\n        }\n      } else {\n        const inputs = item.querySelectorAll('input, select');\n        if (inputs.length > 0) {\n          inputs.forEach((input) => {\n            this.inputs.push(input);\n\n            if (input.tagName === 'INPUT' && input.type === 'radio') {\n              input.name = this.name;\n            }\n          });\n        }\n      }\n      index++;\n    });\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.heading && <h5>{this.heading}</h5>}\n        <div class=\"filterGroup\">\n          <slot ref={(el) => (this.slotItemsWrapper = el as HTMLSlotElement)}></slot>\n        </div>\n        {this.inputs.length > this.maxElements &&\n          <jump-button variant=\"primary\" size=\"small\" text name={this.showMore ? this.otherLabel : this.lessLabel}\n                       aria-label={this.showMore ? this.otherLabel : this.lessLabel}\n                       onClick={() => this.handleShowMore() }>\n            {this.showMore ? this.otherLabel : this.lessLabel}\n            <jump-icon slot=\"suffix\" name={this.showMore ? 'chevron-down' : 'chevron-down'}></jump-icon>\n          </jump-button>\n        }\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/jump-filtergroup/jump-filtergroup.stories.js

@@ -11,7 +11,7 @@ export default {
                 defaultValue: 'tax-name'
             }
         },
-        title: {
+        heading: {
             control: {
                 type: 'text',
                 description: 'Titolo del gruppo di filtri',

package/dist/collection/components/jump-filtergroup/jump-filtergroup.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"jump-filtergroup.stories.js","sourceRoot":"","sources":["../../../src/components/jump-filtergroup/jump-filtergroup.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,UAAU,EAAC,MAAM,mBAAmB,CAAC;AAE1E,eAAe;IACb,KAAK,EAAE,oCAAoC;IAC3C,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,gBAAgB;QAChB,IAAI,EAAE;YACJ,OAAO,EAAE;gBACP,IAAI,EAAE,MAAM;gBACZ,WAAW,EAAE,iBAAiB;gBAC9B,YAAY,EAAE,UAAU;aACzB;SACF;QACD,KAAK,EAAE;YACL,OAAO,EAAE;gBACP,IAAI,EAAE,MAAM;gBACZ,WAAW,EAAE,6BAA6B;gBAC1C,YAAY,EAAE,6BAA6B;aAC5C;SACF;QACD,UAAU,EAAE;YACV,OAAO,EAAE;gBACP,IAAI,EAAE,MAAM;gBACZ,WAAW,EAAE,qCAAqC;gBAClD,YAAY,EAAE,cAAc;aAC7B;SACF;QACD,SAAS,EAAE;YACT,OAAO,EAAE;gBACP,IAAI,EAAE,MAAM;gBACZ,WAAW,EAAE,mCAAmC;gBAChD,YAAY,EAAE,aAAa;aAC5B;SACF;QACD,WAAW,EAAE;YACX,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;gBACd,WAAW,EAAE,qCAAqC;aACnD;YACD,YAAY,EAAE,CAAC;SAChB;KACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;IACxB,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,UAAU,CAAC,qBAAqB,UAAU,sBAAsB,CAAC,CAAC;AAC3E,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { generateAttributesFromArgs, formatHtml} from '../../utils/utils';\n\nexport default {\n  title: 'Components/Filters/JumpFilterGroup',\n  tags: ['autodocs'],\n  argTypes: {\n    //list all props\n    name: {\n      control: {\n        type: 'text',\n        description: 'Nome del filtro',\n        defaultValue: 'tax-name'\n      }\n    },\n    title: {\n      control: {\n        type: 'text',\n        description: 'Titolo del gruppo di filtri',\n        defaultValue: 'Titolo del gruppo di filtri'\n      }\n    },\n    otherLabel: {\n      control: {\n        type: 'text',\n        description: 'Label per il pulsante di espansione',\n        defaultValue: 'Mostra altro'\n      }\n    },\n    lessLabel: {\n      control: {\n        type: 'text',\n        description: 'Label per il pulsante di chiusura',\n        defaultValue: 'Mostra meno'\n      }\n    },\n    maxElements: {\n      control: {\n        type: 'number',\n        description: 'Numero massimo di elementi visibili'\n      },\n      defaultValue: 8\n    }\n  }\n};\n\nconst Template = (args) => {\n  const attributes = generateAttributesFromArgs(args);\n  return formatHtml(`<jump-filtergroup ${attributes}></jump-filtergroup>`);\n};\n\nexport const Default = Template.bind({});\n"]}
+{"version":3,"file":"jump-filtergroup.stories.js","sourceRoot":"","sources":["../../../src/components/jump-filtergroup/jump-filtergroup.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,UAAU,EAAC,MAAM,mBAAmB,CAAC;AAE1E,eAAe;IACb,KAAK,EAAE,oCAAoC;IAC3C,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,gBAAgB;QAChB,IAAI,EAAE;YACJ,OAAO,EAAE;gBACP,IAAI,EAAE,MAAM;gBACZ,WAAW,EAAE,iBAAiB;gBAC9B,YAAY,EAAE,UAAU;aACzB;SACF;QACD,OAAO,EAAE;YACP,OAAO,EAAE;gBACP,IAAI,EAAE,MAAM;gBACZ,WAAW,EAAE,6BAA6B;gBAC1C,YAAY,EAAE,6BAA6B;aAC5C;SACF;QACD,UAAU,EAAE;YACV,OAAO,EAAE;gBACP,IAAI,EAAE,MAAM;gBACZ,WAAW,EAAE,qCAAqC;gBAClD,YAAY,EAAE,cAAc;aAC7B;SACF;QACD,SAAS,EAAE;YACT,OAAO,EAAE;gBACP,IAAI,EAAE,MAAM;gBACZ,WAAW,EAAE,mCAAmC;gBAChD,YAAY,EAAE,aAAa;aAC5B;SACF;QACD,WAAW,EAAE;YACX,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;gBACd,WAAW,EAAE,qCAAqC;aACnD;YACD,YAAY,EAAE,CAAC;SAChB;KACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;IACxB,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,UAAU,CAAC,qBAAqB,UAAU,sBAAsB,CAAC,CAAC;AAC3E,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { generateAttributesFromArgs, formatHtml} from '../../utils/utils';\n\nexport default {\n  title: 'Components/Filters/JumpFilterGroup',\n  tags: ['autodocs'],\n  argTypes: {\n    //list all props\n    name: {\n      control: {\n        type: 'text',\n        description: 'Nome del filtro',\n        defaultValue: 'tax-name'\n      }\n    },\n    heading: {\n      control: {\n        type: 'text',\n        description: 'Titolo del gruppo di filtri',\n        defaultValue: 'Titolo del gruppo di filtri'\n      }\n    },\n    otherLabel: {\n      control: {\n        type: 'text',\n        description: 'Label per il pulsante di espansione',\n        defaultValue: 'Mostra altro'\n      }\n    },\n    lessLabel: {\n      control: {\n        type: 'text',\n        description: 'Label per il pulsante di chiusura',\n        defaultValue: 'Mostra meno'\n      }\n    },\n    maxElements: {\n      control: {\n        type: 'number',\n        description: 'Numero massimo di elementi visibili'\n      },\n      defaultValue: 8\n    }\n  }\n};\n\nconst Template = (args) => {\n  const attributes = generateAttributesFromArgs(args);\n  return formatHtml(`<jump-filtergroup ${attributes}></jump-filtergroup>`);\n};\n\nexport const Default = Template.bind({});\n"]}