@jumpgroup/jump-design-system 0.3.40 → 0.3.42

package/dist/types/components.d.ts

@@ -291,6 +291,8 @@ export namespace Components {
          */
         "getFilters": () => Promise<any>;
         "mobileThreshold": number;
+        "offCanvasOverlay": boolean;
+        "showCount": boolean;
     }
     interface JumpFilterCheckbox {
         "checked": boolean;
@@ -1070,6 +1072,8 @@ declare namespace LocalJSX {
         "filterHeading"?: string;
         "filters"?: any;
         "mobileThreshold"?: number;
+        "offCanvasOverlay"?: boolean;
+        "showCount"?: boolean;
     }
     interface JumpFilterCheckbox {
         "checked"?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jumpgroup/jump-design-system",
-  "version": "0.3.40",
+  "version": "0.3.42",
   "description": "Stencil Component Starter",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

package/readme.md

@@ -31,6 +31,39 @@ When creating new component tags, use `jump` as component name prefix (ex: `<jum
 When passing a `@Prop()` to the component within `nomecomponente.stories.ts`, it is necessary to do so using the notation with `-`.
 So, if the prop inside `nomecomponente.tsx` is `currentPage`, in the story, it should be passed as follows: `current-page="${args.currentPage}"`
 
+## Info utili sulle storie
+
+### Associare un default nella tabella degli argomenti
+Per associare un default nella tabella degli argomenti associata alla storia, inserire all'interno della Prop, il seguente codice
+```
+table: {
+    type: { summary: 'string' },
+    defaultValue: { summary: 'inline' },
+},
+```
+
+Es:
+
+```
+argTypes: {
+        ….
+        variant: {
+            name: 'variant',
+            control: 'select',
+            options: ['inline', 'boxed', 'sheet', 'rounded'],
+            description: 'Stile del tab e di tutti i suoi item',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'inline' },
+            },
+        },
+….
+}
+```
+
+La riga **type** fa apparire la tipologia di variabile sotto la colonna della descrizione.
+La riga **defaultValue** popola la colonna Default.
+
 ## Using this component
 
 ### Script tag

package/dist/jump-design-system/p-7b43933f.entry.js

@@ -1,2 +0,0 @@
-import{r as a,h as e,H as s}from"./p-1c5db8d3.js";const t=":host{display:block}.JumpTabPanel__Content{display:none;padding:1rem 0}.JumpTabPanel__Content.active{display:block}";const n=t;const d=class{constructor(e){a(this,e);this.identifier=undefined;this.active=false}render(){return e(s,{key:"c307478192ab5d9b581de68902723c04dcd33278",class:"JumpTabPanel",id:this.identifier},e("div",{key:"ed8748df27a43e0b68be3eacb614eba1aa64d887",class:"JumpTabPanel__Content "+(this.active?"active":"")},e("slot",{key:"22a5c9f17117ea16bbbda5bb067ea4a998f62a32"})))}};d.style=n;export{d as jump_tab_panel};
-//# sourceMappingURL=p-7b43933f.entry.js.map

package/dist/jump-design-system/p-8893a85e.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as t,h as i,H as a}from"./p-1c5db8d3.js";const s=":host{display:block;--jump-tab-bg-color:var(--gray-ultralight, #f8f8f8);--jump-tab-border-color:var(--neutral-grey-disabled, #CBCBCB)}:host .Wrapper{display:flex;flex-direction:column}:host .ContentWrapper{display:flex;width:100%;justify-content:var(--alignment, flex-start)}:host .Content{display:flex;flex-direction:row;align-items:flex-end;width:fit-content}:host .Content.fullBorder{width:100%;border-bottom:1px solid var(--jump-tab-border-color)}:host .Content.fullBorder.inline ::slotted([slot=tab-item]){margin-bottom:-1px}:host .Content.rounded{border-radius:50px;background-color:var(--jump-tab-bg-color)}:host .Content.disabled{cursor:not-allowed;opacity:0.5;pointer-events:none}:host jump-tab-item{display:flex;align-items:flex-end;overflow:hidden}:host jump-tab-item .tab-title{display:block;white-space:normal;text-align:center}";const n=s;const o=class{constructor(i){e(this,i);this.setActiveTab=t(this,"jump-change-activetab",7);this.disabled=false;this.alignment="left";this.fullBorder=false;this.tabGroupName=undefined;this.variant="inline"}changeActiveTabHandler(e){this.setActiveTab.emit(e.detail);const t=getComputedStyle(document.documentElement);const i=t.getPropertyValue("--neutral-grey-secondary").trim();let a=this.JumpTabEl.querySelectorAll("jump-tab-item");if(a.length>0){a.forEach((t=>{if(t.getAttribute("identifier")===e.detail.id){t.setAttribute("active","");if(this.variant==="sheet"){a.forEach(((e,s)=>{if(e!==t&&s!==a.length-1){e.style.borderRight=`1px solid ${i}`}else{e.style.borderRight="1px solid transparent"}}));let e=t.previousElementSibling;if(e){e.style.borderRight="1px solid transparent"}}}else{t.removeAttribute("active")}}))}let s=this.JumpTabEl.querySelectorAll("jump-tab-panel");if(s.length>0){s.forEach((t=>{if(t.getAttribute("identifier")===e.detail.id){t.setAttribute("active","")}else{t.removeAttribute("active")}}))}}componentDidLoad(){if(this.variant==="sheet"){const e=getComputedStyle(document.documentElement);const t=e.getPropertyValue("--neutral-grey-secondary").trim();let i=this.JumpTabEl.querySelectorAll("jump-tab-item");if(i.length>0){i.forEach(((e,a)=>{if(a===i.length-1||e.classList.contains("active")){e.style.borderRight="1px solid transparent"}else{e.style.borderRight=`1px solid ${t}`}}))}}}render(){return i(a,{key:"beb020fdd6c31ad90be02ebcee610df87164d90d",class:"JumpTab "+this.variant,id:this.tabGroupName,ref:e=>{this.JumpTabEl=e}},i("div",{key:"f35ed1271bbe668b86ce881181c823e2e360d01a",class:"Wrapper "+(this.fullBorder?"fullBorder":"")},i("div",{key:"334884fcec4a4c45da838679d7331117f7e17846",class:"ContentWrapper",style:{"--alignment":this.getAlignment(this.alignment)}},i("div",{key:"a115d0cf84c671a892db304e7203fe25ff7ffc3f",class:"Content "+this.variant+" "+(this.disabled?"disabled":"")+" "+(this.fullBorder?"fullBorder":"")},i("slot",{key:"1394f8cab6f79c6799906c5f04dc180685fd5bef",name:"tab-item"}))),i("div",{key:"880f63d36aba524ec864323f6fa259d49b87840c",class:"ContentWrapper"},i("slot",{key:"64060015cb968819ea9d6f7411ad654cd92337ba",name:"tab-content"}))))}getAlignment(e){switch(e){case"center":return"center";case"right":return"flex-end";default:return"flex-start"}}};o.style=n;export{o as jump_tab};
-//# sourceMappingURL=p-8893a85e.entry.js.map

package/dist/jump-design-system/p-8893a85e.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["jumpTabCss","JumpTabStyle0","JumpTab","undefined","changeActiveTabHandler","event","this","setActiveTab","emit","detail","rootStyles","getComputedStyle","document","documentElement","primaryColor","getPropertyValue","trim","items","JumpTabEl","querySelectorAll","length","forEach","item","getAttribute","id","setAttribute","variant","sibling","index","style","borderRight","previousSibling","previousElementSibling","removeAttribute","panel","componentDidLoad","classList","contains","render","h","Host","key","class","tabGroupName","ref","el","fullBorder","getAlignment","alignment","disabled","name"],"sources":["src/components/jump-tab/jump-tab.scss?tag=jump-tab&encapsulation=shadow","src/components/jump-tab/jump-tab.tsx"],"sourcesContent":[":host {\n  display: block;\n\n  --jump-tab-bg-color: var(--gray-ultralight, #f8f8f8);\n  --jump-tab-border-color: var(--neutral-grey-disabled, #CBCBCB);\n\n  .Wrapper {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .ContentWrapper {\n    display: flex;\n    width: 100%;\n    justify-content: var(--alignment, flex-start);\n  }\n\n  .Content {\n    display: flex;\n    flex-direction: row;\n    align-items: flex-end;\n    width: fit-content;\n\n    &.fullBorder {\n      width: 100%;\n      border-bottom: 1px solid var(--jump-tab-border-color);\n    }\n\n         &.fullBorder.inline ::slotted([slot=\"tab-item\"]) {\n           margin-bottom: -1px;\n         }\n\n    &.rounded {\n      border-radius: 50px;\n      background-color: var(--jump-tab-bg-color);\n    }\n\n    &.disabled {\n      cursor: not-allowed;\n      opacity: 0.5;\n      pointer-events: none;\n    }\n  }\n\n  jump-tab-item {\n    display: flex;\n    align-items: flex-end;\n    overflow: hidden;\n\n    .tab-title {\n      display: block;\n      white-space: normal;\n      text-align: center;\n    }\n  }\n}","import { Component, Host, Event, EventEmitter, Prop, h, Listen } from '@stencil/core';\n\n@Component({\n  tag: 'jump-tab',\n  styleUrl: 'jump-tab.scss',\n  shadow: true,\n})\nexport class JumpTab {\n  JumpTabEl: HTMLElement;\n\n  @Prop() disabled: boolean = false;\n  @Prop() alignment: string = 'left';\n  @Prop() fullBorder: boolean = false;\n  @Prop() tabGroupName: string = undefined;\n  @Prop() variant: string = 'inline';\n\n  @Event({ eventName: 'jump-change-activetab' }) setActiveTab: EventEmitter;\n\n  @Listen('jump-change-active-tab')\n  changeActiveTabHandler(event: CustomEvent) {\n    this.setActiveTab.emit(event.detail);\n\n    const rootStyles = getComputedStyle(document.documentElement);\n    const primaryColor = rootStyles.getPropertyValue('--neutral-grey-secondary').trim();\n\n    let items = this.JumpTabEl.querySelectorAll('jump-tab-item');\n    if (items.length > 0) {\n      items.forEach((item) => {\n        if (item.getAttribute('identifier') === event.detail.id) {\n          item.setAttribute('active', '');\n\n          if (this.variant === 'sheet') {\n            items.forEach((sibling, index) => {\n              if (sibling !== item && index !== items.length - 1) {\n                sibling.style.borderRight = `1px solid ${primaryColor}`;\n              } else {\n                sibling.style.borderRight = '1px solid transparent';\n              }\n            });\n\n            let previousSibling = item.previousElementSibling as any;\n            if (previousSibling) {\n              previousSibling.style.borderRight = '1px solid transparent';\n            }\n          }\n\n        } else {\n          item.removeAttribute('active');\n        }\n      });\n    }\n\n    let panel = this.JumpTabEl.querySelectorAll('jump-tab-panel');\n    if (panel.length > 0) {\n      panel.forEach((panel) => {\n        if (panel.getAttribute('identifier') === event.detail.id) {\n          panel.setAttribute('active', '');\n        } else {\n          panel.removeAttribute('active');\n        }\n      });\n    }\n  }\n\n  componentDidLoad() {\n    if (this.variant === 'sheet') {\n      const rootStyles = getComputedStyle(document.documentElement);\n      const primaryColor = rootStyles.getPropertyValue('--neutral-grey-secondary').trim();\n\n      let items = this.JumpTabEl.querySelectorAll('jump-tab-item');\n      if (items.length > 0) {\n        items.forEach((item, index) => {\n          if (index === items.length - 1 || item.classList.contains('active')) {\n            item.style.borderRight = '1px solid transparent';\n          } else {\n            item.style.borderRight = `1px solid ${primaryColor}`;\n          }\n        });\n      }\n    }\n  }\n\n  render() {\n    return (\n      <Host class={\"JumpTab \" + this.variant} id={this.tabGroupName} ref={(el) => { this.JumpTabEl = el; }}>\n        <div class={\"Wrapper \" + (this.fullBorder ? 'fullBorder' : '')}>\n          <div class={\"ContentWrapper\"} style={{ '--alignment': this.getAlignment(this.alignment) }}>\n            <div class={\"Content \" + this.variant + \" \" + (this.disabled ? 'disabled' : '') + \" \" + (this.fullBorder ? 'fullBorder' : '')}>\n              <slot name=\"tab-item\"></slot>\n            </div>\n          </div>\n          <div class=\"ContentWrapper\">\n            <slot name=\"tab-content\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n\n  private getAlignment(alignment: string): string {\n    switch (alignment) {\n      case 'center':\n        return 'center';\n      case 'right':\n        return 'flex-end';\n      default:\n        return 'flex-start';\n    }\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAa,40BACnB,MAAAC,EAAeD,E,MCMFE,EAAO,M,2FAGU,M,eACA,O,gBACE,M,kBACCC,U,aACL,Q,CAK1B,sBAAAC,CAAuBC,GACrBC,KAAKC,aAAaC,KAAKH,EAAMI,QAE7B,MAAMC,EAAaC,iBAAiBC,SAASC,iBAC7C,MAAMC,EAAeJ,EAAWK,iBAAiB,4BAA4BC,OAE7E,IAAIC,EAAQX,KAAKY,UAAUC,iBAAiB,iBAC5C,GAAIF,EAAMG,OAAS,EAAG,CACpBH,EAAMI,SAASC,IACb,GAAIA,EAAKC,aAAa,gBAAkBlB,EAAMI,OAAOe,GAAI,CACvDF,EAAKG,aAAa,SAAU,IAE5B,GAAInB,KAAKoB,UAAY,QAAS,CAC5BT,EAAMI,SAAQ,CAACM,EAASC,KACtB,GAAID,IAAYL,GAAQM,IAAUX,EAAMG,OAAS,EAAG,CAClDO,EAAQE,MAAMC,YAAc,aAAahB,G,KACpC,CACLa,EAAQE,MAAMC,YAAc,uB,KAIhC,IAAIC,EAAkBT,EAAKU,uBAC3B,GAAID,EAAiB,CACnBA,EAAgBF,MAAMC,YAAc,uB,OAInC,CACLR,EAAKW,gBAAgB,S,KAK3B,IAAIC,EAAQ5B,KAAKY,UAAUC,iBAAiB,kBAC5C,GAAIe,EAAMd,OAAS,EAAG,CACpBc,EAAMb,SAASa,IACb,GAAIA,EAAMX,aAAa,gBAAkBlB,EAAMI,OAAOe,GAAI,CACxDU,EAAMT,aAAa,SAAU,G,KACxB,CACLS,EAAMD,gBAAgB,S,MAM9B,gBAAAE,GACE,GAAI7B,KAAKoB,UAAY,QAAS,CAC5B,MAAMhB,EAAaC,iBAAiBC,SAASC,iBAC7C,MAAMC,EAAeJ,EAAWK,iBAAiB,4BAA4BC,OAE7E,IAAIC,EAAQX,KAAKY,UAAUC,iBAAiB,iBAC5C,GAAIF,EAAMG,OAAS,EAAG,CACpBH,EAAMI,SAAQ,CAACC,EAAMM,KACnB,GAAIA,IAAUX,EAAMG,OAAS,GAAKE,EAAKc,UAAUC,SAAS,UAAW,CACnEf,EAAKO,MAAMC,YAAc,uB,KACpB,CACLR,EAAKO,MAAMC,YAAc,aAAahB,G,OAOhD,MAAAwB,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAO,WAAapC,KAAKoB,QAASF,GAAIlB,KAAKqC,aAAcC,IAAMC,IAASvC,KAAKY,UAAY2B,CAAE,GAC/FN,EAAA,OAAAE,IAAA,2CAAKC,MAAO,YAAcpC,KAAKwC,WAAa,aAAe,KACzDP,EAAA,OAAAE,IAAA,2CAAKC,MAAO,iBAAkBb,MAAO,CAAE,cAAevB,KAAKyC,aAAazC,KAAK0C,aAC3ET,EAAA,OAAAE,IAAA,2CAAKC,MAAO,WAAapC,KAAKoB,QAAU,KAAOpB,KAAK2C,SAAW,WAAa,IAAM,KAAO3C,KAAKwC,WAAa,aAAe,KACxHP,EAAA,QAAAE,IAAA,2CAAMS,KAAK,eAGfX,EAAA,OAAAE,IAAA,2CAAKC,MAAM,kBACTH,EAAA,QAAAE,IAAA,2CAAMS,KAAK,kB,CAOb,YAAAH,CAAaC,GACnB,OAAQA,GACN,IAAK,SACH,MAAO,SACT,IAAK,QACH,MAAO,WACT,QACE,MAAO,a"}

package/dist/jump-design-system/p-fbd2cbb8.entry.js

@@ -1,2 +0,0 @@
-import{r as e,h as a,H as i}from"./p-1c5db8d3.js";const t=":host{--primary-standard:var(--secondary-hard, #435171);--jump-button-background-hover:red;--bg-drawer:var(--bg-drawer, #fff);--header-height:var(--header-height, 80px);--drawer-width:var(--drawer-width, 240px)}:host h3{margin:0}.filtersDrawer{position:fixed;display:flex;flex-direction:column;gap:2.5rem;left:-100vw;top:var(--header-height);height:-webkit-fill-available;max-height:calc(100vh - var(--header-height));transition:0.3s all ease-in-out;background-color:var(--bg-drawer, #fff);padding:1rem;width:100%;max-width:var(--drawer-width);box-shadow:8px 0 15px 0 rgba(0, 0, 0, 0.1490196078);z-index:2;overflow:auto}.filtersDrawer[aria-hidden=false]{left:0;transition:0.3s all ease-in-out}.filtersDrawer[aria-hidden=false] .filtersDrawer__close{position:fixed;top:calc(var(--header-height) + 1rem);left:calc(var(--drawer-width) - 2rem)}@media (min-width: 768px){.filtersDrawer{position:relative;left:0;height:auto;max-width:initial;box-shadow:none}}.filtersDrawer .filtersDrawer__header{display:flex;justify-content:flex-start;align-items:center;gap:0.5rem}";const r=t;const s=class{constructor(a){e(this,a);this.direction="vertical";this.filterHeading="Filtra per";this.filterButtonLabel="Filtri";this.filterButtonIcon="sliders";this.mobileThreshold=768;this.filters=undefined;this.activeFilters=0;this.showMobileFilters=false;this.isMobile=false}filterChangeHandler(e){this.filters=Object.assign(Object.assign({},this.filters),{[e.detail.name]:e.detail.values});console.log("Received the custom filterChange event: ",this.filters)}handleResize(){this.isMobile=window.innerWidth<this.mobileThreshold}watchHandler(e,a){var i,t,r,s;if(e!==a){if(e){(i=this.mobileToggle)===null||i===void 0?void 0:i.setAttribute("aria-expanded","true");(t=this.filtersDrawer)===null||t===void 0?void 0:t.setAttribute("aria-hidden","false")}else{(r=this.mobileToggle)===null||r===void 0?void 0:r.setAttribute("aria-expanded","false");(s=this.filtersDrawer)===null||s===void 0?void 0:s.setAttribute("aria-hidden","true")}}}async getFilters(){return this.filters}componentDidLoad(){this.handleResize()}render(){return a(i,{key:"b45c2e4a0ed8985f709b5ef0cd6796c73f78080b",mobileFilters:this.showMobileFilters},this.isMobile&&a("jump-button",{key:"a8bf5423d154fe3dc7c91bc12a379fc30ab85992",ref:e=>{this.mobileToggle=e},buttonId:this.filterButtonIcon,variant:"primary",outline:true,onClick:()=>this.showMobileFilters=!this.showMobileFilters},a("slot",{key:"e9cdf515fe9d1f5f6c557f1b345ccaa5e75ed5ba",name:"prefix"},this.filterButtonIcon&&a("jump-icon",{key:"7175bf68ccc5cba19384ac74de269a83a9321f9c",library:"fa",category:"regular",name:this.filterButtonIcon,size:"small"}),this.filterButtonLabel),a("slot",{key:"43d5a322cf0d0828b821abfb8bdfe14a9c2bf706",name:"suffix"},this.activeFilters>0&&a("jump-badge",{key:"2d27ab99d6980334ca33b7d75ccceef9561005b0",label:this.activeFilters.toString(),variant:"success",soft:true,dimension:"dot"},"1"))),a("div",{key:"b960e02353e147de8dc633b6f3fa74e8aebd4fc1",ref:e=>{this.filtersDrawer=e},class:"filtersDrawer","data-variant":this.direction},!this.isMobile&&a("div",{key:"6c86c707343eab1720d49208d487dacfed2c7a69",class:"filtersDrawer__header"},a("jump-icon",{key:"44e43addc3beecc57cc0b5a4bbc1f004df9f4ea3",class:"small",name:this.filterButtonIcon}),a("h3",{key:"49893521129b517c91caa15fb38d7c1bfc17be2c"},this.filterHeading)),this.isMobile&&a("jump-icon",{key:"91d6bfe0b195cad204df517eb4e2ab02b141a3a8",library:"lucide",name:"x",size:"small",label:"",class:"filtersDrawer__close",onClick:()=>this.showMobileFilters=false}),a("slot",{key:"5691db6520a4ea84d3b3ea5b1b4c622893770317"})))}static get watchers(){return{showMobileFilters:["watchHandler"]}}};s.style=r;export{s as jump_filter};
-//# sourceMappingURL=p-fbd2cbb8.entry.js.map

package/dist/jump-design-system/p-fbd2cbb8.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["jumpFilterCss","JumpFilterStyle0","JumpFilter","filterChangeHandler","event","this","filters","Object","assign","detail","name","values","console","log","handleResize","isMobile","window","innerWidth","mobileThreshold","watchHandler","newValue","oldValue","_a","mobileToggle","setAttribute","_b","filtersDrawer","_c","_d","getFilters","componentDidLoad","render","h","Host","key","mobileFilters","showMobileFilters","ref","el","buttonId","filterButtonIcon","variant","outline","onClick","library","category","size","filterButtonLabel","activeFilters","label","toString","soft","dimension","class","direction","filterHeading"],"sources":["src/components/jump-filter/jump-filter.scss?tag=jump-filter&encapsulation=shadow","src/components/jump-filter/jump-filter.tsx"],"sourcesContent":[":host {\n  --primary-standard: var(--secondary-hard, #435171);\n  //--jump-button-background-hover: var(--secondary-hard, #435171);\n  --jump-button-background-hover: red;\n  --bg-drawer: var(--bg-drawer, #fff);\n  --header-height: var(--header-height, 80px);\n  --drawer-width: var(--drawer-width, 240px);\n\n  h3 {\n    margin: 0;\n  }\n}\n\n.filtersDrawer {\n  position: fixed;\n  display: flex;\n  flex-direction: column;\n  gap: 2.5rem;\n  left: -100vw;\n  top: var(--header-height);\n  height: -webkit-fill-available;\n  max-height: calc(100vh - var(--header-height));\n  transition: 0.3s all ease-in-out;\n  background-color: var(--bg-drawer, #fff);\n  padding: 1rem;\n  width: 100%;\n  max-width: var(--drawer-width);\n  box-shadow: 8px 0 15px 0 #00000026;\n  z-index: 2;\n  overflow: auto;\n\n  &[aria-hidden=\"false\"] {\n    left: 0;\n    transition: 0.3s all ease-in-out;\n\n    .filtersDrawer__close {\n      position: fixed;\n      top: calc(var(--header-height) + 1rem);\n      left: calc(var(--drawer-width) - 2rem);\n    }\n  }\n\n  @media (min-width: 768px) { //md breakpoint tailwind\n    position: relative;\n    left: 0;\n    height: auto;\n    max-width: initial;\n    box-shadow: none;\n  }\n\n  .filtersDrawer__header {\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    gap: 0.5rem;\n  }\n}\n","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"],"mappings":"kDAAA,MAAMA,EAAgB,wiCACtB,MAAAC,EAAeD,E,MCMFE,EAAU,M,wCAE0B,W,mBACf,a,uBACI,S,sBACD,U,qBACD,I,0CAGD,E,uBACK,M,cACT,K,CAM7B,mBAAAC,CAAoBC,GAElBC,KAAKC,QAAOC,OAAAC,OAAAD,OAAAC,OAAA,GAAOH,KAAKC,SAAO,CAAE,CAACF,EAAMK,OAAOC,MAAON,EAAMK,OAAOE,SACnEC,QAAQC,IAAI,2CAA4CR,KAAKC,Q,CAQ/D,YAAAQ,GACET,KAAKU,SAAWC,OAAOC,WAAaZ,KAAKa,e,CAI3C,YAAAC,CAAaC,EAAmBC,G,YAC9B,GAAID,IAAaC,EAAU,CACzB,GAAID,EAAU,EACZE,EAAAjB,KAAKkB,gBAAY,MAAAD,SAAA,SAAAA,EAAEE,aAAa,gBAAiB,SACjDC,EAAApB,KAAKqB,iBAAa,MAAAD,SAAA,SAAAA,EAAED,aAAa,cAAe,Q,KAC3C,EACLG,EAAAtB,KAAKkB,gBAAY,MAAAI,SAAA,SAAAA,EAAEH,aAAa,gBAAiB,UACjDI,EAAAvB,KAAKqB,iBAAa,MAAAE,SAAA,SAAAA,EAAEJ,aAAa,cAAe,O,GAStD,gBAAMK,GACJ,OAAOxB,KAAKC,O,CAGd,gBAAAwB,GACEzB,KAAKS,c,CAGP,MAAAiB,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,cAAe9B,KAAK+B,mBACvB/B,KAAKU,UAAYiB,EAAA,eAAAE,IAAA,2CAChBG,IAAMC,IAAQjC,KAAKkB,aAAee,CAAE,EACpCC,SAAUlC,KAAKmC,iBAAkBC,QAAS,UAAWC,QAAO,KAC5DC,QAAS,IAAMtC,KAAK+B,mBAAqB/B,KAAK+B,mBAC9CJ,EAAA,QAAAE,IAAA,2CAAMxB,KAAK,UACRL,KAAKmC,kBACJR,EAAA,aAAAE,IAAA,2CAAWU,QAAQ,KAAKC,SAAS,UAAUnC,KAAML,KAAKmC,iBAAkBM,KAAK,UAC9EzC,KAAK0C,mBAERf,EAAA,QAAAE,IAAA,2CAAMxB,KAAK,UACRL,KAAK2C,cAAgB,GACpBhB,EAAA,cAAAE,IAAA,2CAAYe,MAAO5C,KAAK2C,cAAcE,WAAYT,QAAQ,UAAUU,KAAI,KAACC,UAAU,OAAK,OAIzFpB,EAAA,OAAAE,IAAA,2CACCG,IAAMC,IAAQjC,KAAKqB,cAAgBY,CAAE,EACzCe,MAAM,gBAAe,eAAehD,KAAKiD,YACvCjD,KAAKU,UACPiB,EAAA,OAAAE,IAAA,2CAAKmB,MAAO,yBACVrB,EAAA,aAAAE,IAAA,2CAAWmB,MAAM,QAAQ3C,KAAML,KAAKmC,mBACpCR,EAAA,MAAAE,IAAA,4CAAK7B,KAAKkD,gBAEPlD,KAAKU,UAAYiB,EAAA,aAAAE,IAAA,2CAAWU,QAAQ,SAASlC,KAAK,IAAIoC,KAAK,QAAQG,MAAM,GAAGI,MAAO,uBACpFV,QAAS,IAAMtC,KAAK+B,kBAAoB,QACxCJ,EAAA,QAAAE,IAAA,8C"}