@jumpgroup/jump-design-system 0.3.94 → 0.3.95

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e9479989.js');
 
-const jumpFilterCss = ":host{--primary-standard:var(--secondary-hard, #435171);--jump-button-background-hover:red;--jump-filter-close-btn-bg:white;--bg-drawer:var(--bg-drawer, #fff);--header-height:var(--header-height, 80px);--drawer-width:var(--drawer-width, 240px);--overlay-bg-color:var(--overlay-bg-color, rgba(0, 0, 0, 0.35))}:host h3{margin:0}.filtersDrawer__overlay{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);background-color:var(--overlay-bg-color, rgba(0, 0, 0, 0.35));z-index:1;width:100vw;height:100vh;display:none;opacity:0;transition:opacity 0.3s ease-in-out}.filtersDrawer__overlay.filtersDrawer__overlay--active{display:block}.filtersDrawer__overlay.filtersDrawer__overlay--active{opacity:1}.filtersDrawer{position:fixed;display:flex;flex-direction:column;gap:2.5rem;left:-100vw;top:0;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;right:0;width:auto;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);background-color:var(--jump-filter-close-btn-bg, white);padding:0.5rem;box-shadow:8px 0 15px 0 rgba(0, 0, 0, 0.1490196078)}@media (min-width: 768px){.filtersDrawer{position:relative;left:0;height:auto;max-width:initial;max-height:initial;box-shadow:none}}@media (max-width: 767px){.filtersDrawer{top:var(--header-height)}}.filtersDrawer .filtersDrawer__header{display:flex;justify-content:flex-start;align-items:center;gap:0.5rem}";
+const jumpFilterCss = ":host{--primary-standard:var(--secondary-hard, #435171);--jump-button-background-hover:red;--jump-filter-close-btn-bg:white;--bg-drawer:var(--bg-drawer, #fff);--header-height:var(--header-height, 80px);--drawer-width:var(--drawer-width, 240px);--overlay-bg-color:var(--overlay-bg-color, rgba(0, 0, 0, 0.35))}:host h3{margin:0}.filtersDrawer__overlay{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);background-color:var(--overlay-bg-color, rgba(0, 0, 0, 0.35));z-index:1;width:100vw;height:100vh;display:none;opacity:0;transition:opacity 0.3s ease-in-out}.filtersDrawer__overlay.filtersDrawer__overlay--active{display:block}.filtersDrawer__overlay.filtersDrawer__overlay--active{opacity:1}.filtersDrawer{position:fixed;display:flex;flex-direction:column;gap:2.5rem;left:-100vw;top:0;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;right:0;width:auto;transition:0.3s all ease-in-out}.filtersDrawer[aria-hidden=false] .filtersDrawer__close{position:fixed;top:calc(var(--header-height) + 0rem);left:calc(var(--drawer-width) + 2rem);background-color:var(--jump-filter-close-btn-bg, white);padding:0.5rem;box-shadow:8px 0 15px 0 rgba(0, 0, 0, 0.1490196078)}@media (min-width: 768px){.filtersDrawer{position:relative;left:0;height:auto;max-width:initial;max-height:initial;box-shadow:none}}@media (max-width: 767px){.filtersDrawer{top:var(--header-height)}}.filtersDrawer .filtersDrawer__header{display:flex;justify-content:flex-start;align-items:center;gap:0.5rem}";
 const JumpFilterStyle0 = jumpFilterCss;
 
 const JumpFilter = class {

package/dist/cjs/jump-filter.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"jump-filter.entry.cjs.js","mappings":"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","names":["h","Host"],"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  --jump-filter-close-btn-bg: white;\n  --bg-drawer: var(--bg-drawer, #fff);\n  --header-height: var(--header-height, 80px);\n  --drawer-width: var(--drawer-width, 240px);\n  --overlay-bg-color: var(--overlay-bg-color, rgba(0, 0, 0, 0.35));\n\n  h3 {\n    margin: 0;\n  }\n}\n\n@mixin fade-in-out($duration: 0.3s, $ease: ease-in-out) {\n  opacity: 0;\n  transition: opacity $duration $ease;\n\n  &.filtersDrawer__overlay--active {\n    opacity: 1;\n  }\n}\n\n.filtersDrawer__overlay {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background-color: var(--overlay-bg-color, rgba(0, 0, 0, 0.35));\n  z-index: 1;\n  width: 100vw;\n  height: 100vh;\n  display: none;\n\n  &.filtersDrawer__overlay--active {\n    display: block;\n  }\n\n  @include fade-in-out();\n}\n\n.filtersDrawer {\n  position: fixed;\n  display: flex;\n  flex-direction: column;\n  gap: 2.5rem;\n  left: -100vw;\n  top: 0;\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    right: 0;\n    width: auto;\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      background-color: var(--jump-filter-close-btn-bg, white);\n      padding: 0.5rem;\n      box-shadow: 8px 0 15px 0 #00000026;\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    max-height: initial;\n    box-shadow: none;\n  }\n\n  @media (max-width: 767px) {\n    top: var(--header-height);\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  @Prop() showCount: boolean = false;\n  @Prop() offCanvasOverlay: boolean = false;\n\n  @State() activeFilters: number = 0;\n  @State() showMobileFilters: boolean = false;\n  @State() isMobile: boolean = false;\n  @State() offCanvasClasses: string = 'filtersDrawer__overlay';\n\n  mobileToggle: HTMLElement | null;\n  filtersDrawer: HTMLElement;\n\n  @Listen('jump-filterchange')\n  filterChangeHandler(event: CustomEvent) {\n    //set this.filter as this.filters[event.detail.name] = event.detail.value; even if not present\n    this.filters = { ...this.filters, [event.detail.name]: event.detail.values };\n    console.log('Received the custom filterChange event: ', this.filters);\n\n\n    //TODO: increment this.activeFilters\n  }\n\n  @Listen('resize', { target: 'window' })\n  handleResize() {\n    this.isMobile = window.innerWidth < this.mobileThreshold;\n  }\n\n  @Watch('showMobileFilters')\n  watchHandler(newValue: boolean, oldValue: boolean) {\n    if (newValue !== oldValue) {\n      if (newValue) {\n        this.mobileToggle?.setAttribute('aria-expanded', 'true');\n        this.filtersDrawer?.setAttribute('aria-hidden', 'false');\n        this.offCanvasClasses = 'filtersDrawer__overlay filtersDrawer__overlay--active';\n      } else {\n        this.mobileToggle?.setAttribute('aria-expanded', 'false');\n        this.filtersDrawer?.setAttribute('aria-hidden', 'true');\n        this.offCanvasClasses = 'filtersDrawer__overlay';\n      }\n    }\n  }\n\n  /**\n   * Get the active filters from the component\n   */\n  @Method()\n  async getFilters() {\n    return this.filters;\n  }\n\n  componentDidLoad() {\n    this.handleResize();\n  }\n\n  render() {\n    return (\n      <Host mobileFilters={this.showMobileFilters}>\n        {this.isMobile && <jump-button\n          ref={(el) => {\n            this.mobileToggle = el;\n          }}\n          buttonId={this.filterButtonIcon} variant={'primary'} outline\n          onClick={() => this.showMobileFilters = !this.showMobileFilters}>\n          <slot name=\"prefix\">\n            {this.filterButtonIcon &&\n              <jump-icon library=\"fa\" category=\"regular\" name={this.filterButtonIcon} size=\"small\"></jump-icon>}\n            {this.filterButtonLabel}\n          </slot>\n          <slot name=\"suffix\">\n            {this.activeFilters > 0 &&\n              <jump-badge label={this.activeFilters.toString()} variant=\"success\" soft dimension=\"dot\">1</jump-badge>}\n          </slot>\n        </jump-button>}\n\n        {this.offCanvasOverlay &&\n          <div class={this.offCanvasClasses}\n               onClick={() => this.showMobileFilters = false}></div>}\n\n        {<div\n          ref={(el) => {\n            this.filtersDrawer = el;\n          }}\n          class=\"filtersDrawer\" data-variant={this.direction}>\n          {!this.isMobile &&\n            <div class={'filtersDrawer__header'}>\n              <jump-icon class=\"small\" name={this.filterButtonIcon}></jump-icon>\n              <h3>{this.filterHeading}</h3>\n            </div>}\n          {this.isMobile && <jump-icon library=\"lucide\" name=\"x\" size=\"medium\" label=\"\" class={'filtersDrawer__close'}\n                                       onClick={() => this.showMobileFilters = false}></jump-icon>}\n          <slot></slot>\n        </div>}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"jump-filter.entry.cjs.js","mappings":"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","names":["h","Host"],"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  --jump-filter-close-btn-bg: white;\n  --bg-drawer: var(--bg-drawer, #fff);\n  --header-height: var(--header-height, 80px);\n  --drawer-width: var(--drawer-width, 240px);\n  --overlay-bg-color: var(--overlay-bg-color, rgba(0, 0, 0, 0.35));\n\n  h3 {\n    margin: 0;\n  }\n}\n\n@mixin fade-in-out($duration: 0.3s, $ease: ease-in-out) {\n  opacity: 0;\n  transition: opacity $duration $ease;\n\n  &.filtersDrawer__overlay--active {\n    opacity: 1;\n  }\n}\n\n.filtersDrawer__overlay {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background-color: var(--overlay-bg-color, rgba(0, 0, 0, 0.35));\n  z-index: 1;\n  width: 100vw;\n  height: 100vh;\n  display: none;\n\n  &.filtersDrawer__overlay--active {\n    display: block;\n  }\n\n  @include fade-in-out();\n}\n\n.filtersDrawer {\n  position: fixed;\n  display: flex;\n  flex-direction: column;\n  gap: 2.5rem;\n  left: -100vw;\n  top: 0;\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    right: 0;\n    width: auto;\n    transition: 0.3s all ease-in-out;\n\n    .filtersDrawer__close {\n      position: fixed;\n      top: calc(var(--header-height) + 0rem);\n      left: calc(var(--drawer-width) + 2rem);\n      background-color: var(--jump-filter-close-btn-bg, white);\n      padding: 0.5rem;\n      box-shadow: 8px 0 15px 0 #00000026;\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    max-height: initial;\n    box-shadow: none;\n  }\n\n  @media (max-width: 767px) {\n    top: var(--header-height);\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  @Prop() showCount: boolean = false;\n  @Prop() offCanvasOverlay: boolean = false;\n\n  @State() activeFilters: number = 0;\n  @State() showMobileFilters: boolean = false;\n  @State() isMobile: boolean = false;\n  @State() offCanvasClasses: string = 'filtersDrawer__overlay';\n\n  mobileToggle: HTMLElement | null;\n  filtersDrawer: HTMLElement;\n\n  @Listen('jump-filterchange')\n  filterChangeHandler(event: CustomEvent) {\n    //set this.filter as this.filters[event.detail.name] = event.detail.value; even if not present\n    this.filters = { ...this.filters, [event.detail.name]: event.detail.values };\n    console.log('Received the custom filterChange event: ', this.filters);\n\n\n    //TODO: increment this.activeFilters\n  }\n\n  @Listen('resize', { target: 'window' })\n  handleResize() {\n    this.isMobile = window.innerWidth < this.mobileThreshold;\n  }\n\n  @Watch('showMobileFilters')\n  watchHandler(newValue: boolean, oldValue: boolean) {\n    if (newValue !== oldValue) {\n      if (newValue) {\n        this.mobileToggle?.setAttribute('aria-expanded', 'true');\n        this.filtersDrawer?.setAttribute('aria-hidden', 'false');\n        this.offCanvasClasses = 'filtersDrawer__overlay filtersDrawer__overlay--active';\n      } else {\n        this.mobileToggle?.setAttribute('aria-expanded', 'false');\n        this.filtersDrawer?.setAttribute('aria-hidden', 'true');\n        this.offCanvasClasses = 'filtersDrawer__overlay';\n      }\n    }\n  }\n\n  /**\n   * Get the active filters from the component\n   */\n  @Method()\n  async getFilters() {\n    return this.filters;\n  }\n\n  componentDidLoad() {\n    this.handleResize();\n  }\n\n  render() {\n    return (\n      <Host mobileFilters={this.showMobileFilters}>\n        {this.isMobile && <jump-button\n          ref={(el) => {\n            this.mobileToggle = el;\n          }}\n          buttonId={this.filterButtonIcon} variant={'primary'} outline\n          onClick={() => this.showMobileFilters = !this.showMobileFilters}>\n          <slot name=\"prefix\">\n            {this.filterButtonIcon &&\n              <jump-icon library=\"fa\" category=\"regular\" name={this.filterButtonIcon} size=\"small\"></jump-icon>}\n            {this.filterButtonLabel}\n          </slot>\n          <slot name=\"suffix\">\n            {this.activeFilters > 0 &&\n              <jump-badge label={this.activeFilters.toString()} variant=\"success\" soft dimension=\"dot\">1</jump-badge>}\n          </slot>\n        </jump-button>}\n\n        {this.offCanvasOverlay &&\n          <div class={this.offCanvasClasses}\n               onClick={() => this.showMobileFilters = false}></div>}\n\n        {<div\n          ref={(el) => {\n            this.filtersDrawer = el;\n          }}\n          class=\"filtersDrawer\" data-variant={this.direction}>\n          {!this.isMobile &&\n            <div class={'filtersDrawer__header'}>\n              <jump-icon class=\"small\" name={this.filterButtonIcon}></jump-icon>\n              <h3>{this.filterHeading}</h3>\n            </div>}\n          {this.isMobile && <jump-icon library=\"lucide\" name=\"x\" size=\"medium\" label=\"\" class={'filtersDrawer__close'}\n                                       onClick={() => this.showMobileFilters = false}></jump-icon>}\n          <slot></slot>\n        </div>}\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -57,8 +57,8 @@
 }
 .filtersDrawer[aria-hidden=false] .filtersDrawer__close {
   position: fixed;
-  top: calc(var(--header-height) + 1rem);
-  left: calc(var(--drawer-width) - 2rem);
+  top: calc(var(--header-height) + 0rem);
+  left: calc(var(--drawer-width) + 2rem);
   background-color: var(--jump-filter-close-btn-bg, white);
   padding: 0.5rem;
   box-shadow: 8px 0 15px 0 rgba(0, 0, 0, 0.1490196078);

package/dist/components/jump-filter.js

@@ -3,7 +3,7 @@ import { d as defineCustomElement$4 } from './jump-badge2.js';
 import { d as defineCustomElement$3 } from './jump-button2.js';
 import { d as defineCustomElement$2 } from './jump-icon2.js';
 
-const jumpFilterCss = ":host{--primary-standard:var(--secondary-hard, #435171);--jump-button-background-hover:red;--jump-filter-close-btn-bg:white;--bg-drawer:var(--bg-drawer, #fff);--header-height:var(--header-height, 80px);--drawer-width:var(--drawer-width, 240px);--overlay-bg-color:var(--overlay-bg-color, rgba(0, 0, 0, 0.35))}:host h3{margin:0}.filtersDrawer__overlay{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);background-color:var(--overlay-bg-color, rgba(0, 0, 0, 0.35));z-index:1;width:100vw;height:100vh;display:none;opacity:0;transition:opacity 0.3s ease-in-out}.filtersDrawer__overlay.filtersDrawer__overlay--active{display:block}.filtersDrawer__overlay.filtersDrawer__overlay--active{opacity:1}.filtersDrawer{position:fixed;display:flex;flex-direction:column;gap:2.5rem;left:-100vw;top:0;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;right:0;width:auto;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);background-color:var(--jump-filter-close-btn-bg, white);padding:0.5rem;box-shadow:8px 0 15px 0 rgba(0, 0, 0, 0.1490196078)}@media (min-width: 768px){.filtersDrawer{position:relative;left:0;height:auto;max-width:initial;max-height:initial;box-shadow:none}}@media (max-width: 767px){.filtersDrawer{top:var(--header-height)}}.filtersDrawer .filtersDrawer__header{display:flex;justify-content:flex-start;align-items:center;gap:0.5rem}";
+const jumpFilterCss = ":host{--primary-standard:var(--secondary-hard, #435171);--jump-button-background-hover:red;--jump-filter-close-btn-bg:white;--bg-drawer:var(--bg-drawer, #fff);--header-height:var(--header-height, 80px);--drawer-width:var(--drawer-width, 240px);--overlay-bg-color:var(--overlay-bg-color, rgba(0, 0, 0, 0.35))}:host h3{margin:0}.filtersDrawer__overlay{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);background-color:var(--overlay-bg-color, rgba(0, 0, 0, 0.35));z-index:1;width:100vw;height:100vh;display:none;opacity:0;transition:opacity 0.3s ease-in-out}.filtersDrawer__overlay.filtersDrawer__overlay--active{display:block}.filtersDrawer__overlay.filtersDrawer__overlay--active{opacity:1}.filtersDrawer{position:fixed;display:flex;flex-direction:column;gap:2.5rem;left:-100vw;top:0;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;right:0;width:auto;transition:0.3s all ease-in-out}.filtersDrawer[aria-hidden=false] .filtersDrawer__close{position:fixed;top:calc(var(--header-height) + 0rem);left:calc(var(--drawer-width) + 2rem);background-color:var(--jump-filter-close-btn-bg, white);padding:0.5rem;box-shadow:8px 0 15px 0 rgba(0, 0, 0, 0.1490196078)}@media (min-width: 768px){.filtersDrawer{position:relative;left:0;height:auto;max-width:initial;max-height:initial;box-shadow:none}}@media (max-width: 767px){.filtersDrawer{top:var(--header-height)}}.filtersDrawer .filtersDrawer__header{display:flex;justify-content:flex-start;align-items:center;gap:0.5rem}";
 const JumpFilterStyle0 = jumpFilterCss;
 
 const JumpFilter$1 = /*@__PURE__*/ proxyCustomElement(class JumpFilter extends HTMLElement {

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

@@ -1 +1 @@
-{"file":"jump-filter.js","mappings":"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","names":["JumpFilter"],"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  --jump-filter-close-btn-bg: white;\n  --bg-drawer: var(--bg-drawer, #fff);\n  --header-height: var(--header-height, 80px);\n  --drawer-width: var(--drawer-width, 240px);\n  --overlay-bg-color: var(--overlay-bg-color, rgba(0, 0, 0, 0.35));\n\n  h3 {\n    margin: 0;\n  }\n}\n\n@mixin fade-in-out($duration: 0.3s, $ease: ease-in-out) {\n  opacity: 0;\n  transition: opacity $duration $ease;\n\n  &.filtersDrawer__overlay--active {\n    opacity: 1;\n  }\n}\n\n.filtersDrawer__overlay {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background-color: var(--overlay-bg-color, rgba(0, 0, 0, 0.35));\n  z-index: 1;\n  width: 100vw;\n  height: 100vh;\n  display: none;\n\n  &.filtersDrawer__overlay--active {\n    display: block;\n  }\n\n  @include fade-in-out();\n}\n\n.filtersDrawer {\n  position: fixed;\n  display: flex;\n  flex-direction: column;\n  gap: 2.5rem;\n  left: -100vw;\n  top: 0;\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    right: 0;\n    width: auto;\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      background-color: var(--jump-filter-close-btn-bg, white);\n      padding: 0.5rem;\n      box-shadow: 8px 0 15px 0 #00000026;\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    max-height: initial;\n    box-shadow: none;\n  }\n\n  @media (max-width: 767px) {\n    top: var(--header-height);\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  @Prop() showCount: boolean = false;\n  @Prop() offCanvasOverlay: boolean = false;\n\n  @State() activeFilters: number = 0;\n  @State() showMobileFilters: boolean = false;\n  @State() isMobile: boolean = false;\n  @State() offCanvasClasses: string = 'filtersDrawer__overlay';\n\n  mobileToggle: HTMLElement | null;\n  filtersDrawer: HTMLElement;\n\n  @Listen('jump-filterchange')\n  filterChangeHandler(event: CustomEvent) {\n    //set this.filter as this.filters[event.detail.name] = event.detail.value; even if not present\n    this.filters = { ...this.filters, [event.detail.name]: event.detail.values };\n    console.log('Received the custom filterChange event: ', this.filters);\n\n\n    //TODO: increment this.activeFilters\n  }\n\n  @Listen('resize', { target: 'window' })\n  handleResize() {\n    this.isMobile = window.innerWidth < this.mobileThreshold;\n  }\n\n  @Watch('showMobileFilters')\n  watchHandler(newValue: boolean, oldValue: boolean) {\n    if (newValue !== oldValue) {\n      if (newValue) {\n        this.mobileToggle?.setAttribute('aria-expanded', 'true');\n        this.filtersDrawer?.setAttribute('aria-hidden', 'false');\n        this.offCanvasClasses = 'filtersDrawer__overlay filtersDrawer__overlay--active';\n      } else {\n        this.mobileToggle?.setAttribute('aria-expanded', 'false');\n        this.filtersDrawer?.setAttribute('aria-hidden', 'true');\n        this.offCanvasClasses = 'filtersDrawer__overlay';\n      }\n    }\n  }\n\n  /**\n   * Get the active filters from the component\n   */\n  @Method()\n  async getFilters() {\n    return this.filters;\n  }\n\n  componentDidLoad() {\n    this.handleResize();\n  }\n\n  render() {\n    return (\n      <Host mobileFilters={this.showMobileFilters}>\n        {this.isMobile && <jump-button\n          ref={(el) => {\n            this.mobileToggle = el;\n          }}\n          buttonId={this.filterButtonIcon} variant={'primary'} outline\n          onClick={() => this.showMobileFilters = !this.showMobileFilters}>\n          <slot name=\"prefix\">\n            {this.filterButtonIcon &&\n              <jump-icon library=\"fa\" category=\"regular\" name={this.filterButtonIcon} size=\"small\"></jump-icon>}\n            {this.filterButtonLabel}\n          </slot>\n          <slot name=\"suffix\">\n            {this.activeFilters > 0 &&\n              <jump-badge label={this.activeFilters.toString()} variant=\"success\" soft dimension=\"dot\">1</jump-badge>}\n          </slot>\n        </jump-button>}\n\n        {this.offCanvasOverlay &&\n          <div class={this.offCanvasClasses}\n               onClick={() => this.showMobileFilters = false}></div>}\n\n        {<div\n          ref={(el) => {\n            this.filtersDrawer = el;\n          }}\n          class=\"filtersDrawer\" data-variant={this.direction}>\n          {!this.isMobile &&\n            <div class={'filtersDrawer__header'}>\n              <jump-icon class=\"small\" name={this.filterButtonIcon}></jump-icon>\n              <h3>{this.filterHeading}</h3>\n            </div>}\n          {this.isMobile && <jump-icon library=\"lucide\" name=\"x\" size=\"medium\" label=\"\" class={'filtersDrawer__close'}\n                                       onClick={() => this.showMobileFilters = false}></jump-icon>}\n          <slot></slot>\n        </div>}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"jump-filter.js","mappings":"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","names":["JumpFilter"],"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  --jump-filter-close-btn-bg: white;\n  --bg-drawer: var(--bg-drawer, #fff);\n  --header-height: var(--header-height, 80px);\n  --drawer-width: var(--drawer-width, 240px);\n  --overlay-bg-color: var(--overlay-bg-color, rgba(0, 0, 0, 0.35));\n\n  h3 {\n    margin: 0;\n  }\n}\n\n@mixin fade-in-out($duration: 0.3s, $ease: ease-in-out) {\n  opacity: 0;\n  transition: opacity $duration $ease;\n\n  &.filtersDrawer__overlay--active {\n    opacity: 1;\n  }\n}\n\n.filtersDrawer__overlay {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background-color: var(--overlay-bg-color, rgba(0, 0, 0, 0.35));\n  z-index: 1;\n  width: 100vw;\n  height: 100vh;\n  display: none;\n\n  &.filtersDrawer__overlay--active {\n    display: block;\n  }\n\n  @include fade-in-out();\n}\n\n.filtersDrawer {\n  position: fixed;\n  display: flex;\n  flex-direction: column;\n  gap: 2.5rem;\n  left: -100vw;\n  top: 0;\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    right: 0;\n    width: auto;\n    transition: 0.3s all ease-in-out;\n\n    .filtersDrawer__close {\n      position: fixed;\n      top: calc(var(--header-height) + 0rem);\n      left: calc(var(--drawer-width) + 2rem);\n      background-color: var(--jump-filter-close-btn-bg, white);\n      padding: 0.5rem;\n      box-shadow: 8px 0 15px 0 #00000026;\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    max-height: initial;\n    box-shadow: none;\n  }\n\n  @media (max-width: 767px) {\n    top: var(--header-height);\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  @Prop() showCount: boolean = false;\n  @Prop() offCanvasOverlay: boolean = false;\n\n  @State() activeFilters: number = 0;\n  @State() showMobileFilters: boolean = false;\n  @State() isMobile: boolean = false;\n  @State() offCanvasClasses: string = 'filtersDrawer__overlay';\n\n  mobileToggle: HTMLElement | null;\n  filtersDrawer: HTMLElement;\n\n  @Listen('jump-filterchange')\n  filterChangeHandler(event: CustomEvent) {\n    //set this.filter as this.filters[event.detail.name] = event.detail.value; even if not present\n    this.filters = { ...this.filters, [event.detail.name]: event.detail.values };\n    console.log('Received the custom filterChange event: ', this.filters);\n\n\n    //TODO: increment this.activeFilters\n  }\n\n  @Listen('resize', { target: 'window' })\n  handleResize() {\n    this.isMobile = window.innerWidth < this.mobileThreshold;\n  }\n\n  @Watch('showMobileFilters')\n  watchHandler(newValue: boolean, oldValue: boolean) {\n    if (newValue !== oldValue) {\n      if (newValue) {\n        this.mobileToggle?.setAttribute('aria-expanded', 'true');\n        this.filtersDrawer?.setAttribute('aria-hidden', 'false');\n        this.offCanvasClasses = 'filtersDrawer__overlay filtersDrawer__overlay--active';\n      } else {\n        this.mobileToggle?.setAttribute('aria-expanded', 'false');\n        this.filtersDrawer?.setAttribute('aria-hidden', 'true');\n        this.offCanvasClasses = 'filtersDrawer__overlay';\n      }\n    }\n  }\n\n  /**\n   * Get the active filters from the component\n   */\n  @Method()\n  async getFilters() {\n    return this.filters;\n  }\n\n  componentDidLoad() {\n    this.handleResize();\n  }\n\n  render() {\n    return (\n      <Host mobileFilters={this.showMobileFilters}>\n        {this.isMobile && <jump-button\n          ref={(el) => {\n            this.mobileToggle = el;\n          }}\n          buttonId={this.filterButtonIcon} variant={'primary'} outline\n          onClick={() => this.showMobileFilters = !this.showMobileFilters}>\n          <slot name=\"prefix\">\n            {this.filterButtonIcon &&\n              <jump-icon library=\"fa\" category=\"regular\" name={this.filterButtonIcon} size=\"small\"></jump-icon>}\n            {this.filterButtonLabel}\n          </slot>\n          <slot name=\"suffix\">\n            {this.activeFilters > 0 &&\n              <jump-badge label={this.activeFilters.toString()} variant=\"success\" soft dimension=\"dot\">1</jump-badge>}\n          </slot>\n        </jump-button>}\n\n        {this.offCanvasOverlay &&\n          <div class={this.offCanvasClasses}\n               onClick={() => this.showMobileFilters = false}></div>}\n\n        {<div\n          ref={(el) => {\n            this.filtersDrawer = el;\n          }}\n          class=\"filtersDrawer\" data-variant={this.direction}>\n          {!this.isMobile &&\n            <div class={'filtersDrawer__header'}>\n              <jump-icon class=\"small\" name={this.filterButtonIcon}></jump-icon>\n              <h3>{this.filterHeading}</h3>\n            </div>}\n          {this.isMobile && <jump-icon library=\"lucide\" name=\"x\" size=\"medium\" label=\"\" class={'filtersDrawer__close'}\n                                       onClick={() => this.showMobileFilters = false}></jump-icon>}\n          <slot></slot>\n        </div>}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/jump-filter.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host } from './index-a94b3471.js';
 
-const jumpFilterCss = ":host{--primary-standard:var(--secondary-hard, #435171);--jump-button-background-hover:red;--jump-filter-close-btn-bg:white;--bg-drawer:var(--bg-drawer, #fff);--header-height:var(--header-height, 80px);--drawer-width:var(--drawer-width, 240px);--overlay-bg-color:var(--overlay-bg-color, rgba(0, 0, 0, 0.35))}:host h3{margin:0}.filtersDrawer__overlay{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);background-color:var(--overlay-bg-color, rgba(0, 0, 0, 0.35));z-index:1;width:100vw;height:100vh;display:none;opacity:0;transition:opacity 0.3s ease-in-out}.filtersDrawer__overlay.filtersDrawer__overlay--active{display:block}.filtersDrawer__overlay.filtersDrawer__overlay--active{opacity:1}.filtersDrawer{position:fixed;display:flex;flex-direction:column;gap:2.5rem;left:-100vw;top:0;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;right:0;width:auto;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);background-color:var(--jump-filter-close-btn-bg, white);padding:0.5rem;box-shadow:8px 0 15px 0 rgba(0, 0, 0, 0.1490196078)}@media (min-width: 768px){.filtersDrawer{position:relative;left:0;height:auto;max-width:initial;max-height:initial;box-shadow:none}}@media (max-width: 767px){.filtersDrawer{top:var(--header-height)}}.filtersDrawer .filtersDrawer__header{display:flex;justify-content:flex-start;align-items:center;gap:0.5rem}";
+const jumpFilterCss = ":host{--primary-standard:var(--secondary-hard, #435171);--jump-button-background-hover:red;--jump-filter-close-btn-bg:white;--bg-drawer:var(--bg-drawer, #fff);--header-height:var(--header-height, 80px);--drawer-width:var(--drawer-width, 240px);--overlay-bg-color:var(--overlay-bg-color, rgba(0, 0, 0, 0.35))}:host h3{margin:0}.filtersDrawer__overlay{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);background-color:var(--overlay-bg-color, rgba(0, 0, 0, 0.35));z-index:1;width:100vw;height:100vh;display:none;opacity:0;transition:opacity 0.3s ease-in-out}.filtersDrawer__overlay.filtersDrawer__overlay--active{display:block}.filtersDrawer__overlay.filtersDrawer__overlay--active{opacity:1}.filtersDrawer{position:fixed;display:flex;flex-direction:column;gap:2.5rem;left:-100vw;top:0;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;right:0;width:auto;transition:0.3s all ease-in-out}.filtersDrawer[aria-hidden=false] .filtersDrawer__close{position:fixed;top:calc(var(--header-height) + 0rem);left:calc(var(--drawer-width) + 2rem);background-color:var(--jump-filter-close-btn-bg, white);padding:0.5rem;box-shadow:8px 0 15px 0 rgba(0, 0, 0, 0.1490196078)}@media (min-width: 768px){.filtersDrawer{position:relative;left:0;height:auto;max-width:initial;max-height:initial;box-shadow:none}}@media (max-width: 767px){.filtersDrawer{top:var(--header-height)}}.filtersDrawer .filtersDrawer__header{display:flex;justify-content:flex-start;align-items:center;gap:0.5rem}";
 const JumpFilterStyle0 = jumpFilterCss;
 
 const JumpFilter = class {

package/dist/esm/jump-filter.entry.js.map

@@ -1 +1 @@
-{"file":"jump-filter.entry.js","mappings":"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","names":[],"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  --jump-filter-close-btn-bg: white;\n  --bg-drawer: var(--bg-drawer, #fff);\n  --header-height: var(--header-height, 80px);\n  --drawer-width: var(--drawer-width, 240px);\n  --overlay-bg-color: var(--overlay-bg-color, rgba(0, 0, 0, 0.35));\n\n  h3 {\n    margin: 0;\n  }\n}\n\n@mixin fade-in-out($duration: 0.3s, $ease: ease-in-out) {\n  opacity: 0;\n  transition: opacity $duration $ease;\n\n  &.filtersDrawer__overlay--active {\n    opacity: 1;\n  }\n}\n\n.filtersDrawer__overlay {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background-color: var(--overlay-bg-color, rgba(0, 0, 0, 0.35));\n  z-index: 1;\n  width: 100vw;\n  height: 100vh;\n  display: none;\n\n  &.filtersDrawer__overlay--active {\n    display: block;\n  }\n\n  @include fade-in-out();\n}\n\n.filtersDrawer {\n  position: fixed;\n  display: flex;\n  flex-direction: column;\n  gap: 2.5rem;\n  left: -100vw;\n  top: 0;\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    right: 0;\n    width: auto;\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      background-color: var(--jump-filter-close-btn-bg, white);\n      padding: 0.5rem;\n      box-shadow: 8px 0 15px 0 #00000026;\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    max-height: initial;\n    box-shadow: none;\n  }\n\n  @media (max-width: 767px) {\n    top: var(--header-height);\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  @Prop() showCount: boolean = false;\n  @Prop() offCanvasOverlay: boolean = false;\n\n  @State() activeFilters: number = 0;\n  @State() showMobileFilters: boolean = false;\n  @State() isMobile: boolean = false;\n  @State() offCanvasClasses: string = 'filtersDrawer__overlay';\n\n  mobileToggle: HTMLElement | null;\n  filtersDrawer: HTMLElement;\n\n  @Listen('jump-filterchange')\n  filterChangeHandler(event: CustomEvent) {\n    //set this.filter as this.filters[event.detail.name] = event.detail.value; even if not present\n    this.filters = { ...this.filters, [event.detail.name]: event.detail.values };\n    console.log('Received the custom filterChange event: ', this.filters);\n\n\n    //TODO: increment this.activeFilters\n  }\n\n  @Listen('resize', { target: 'window' })\n  handleResize() {\n    this.isMobile = window.innerWidth < this.mobileThreshold;\n  }\n\n  @Watch('showMobileFilters')\n  watchHandler(newValue: boolean, oldValue: boolean) {\n    if (newValue !== oldValue) {\n      if (newValue) {\n        this.mobileToggle?.setAttribute('aria-expanded', 'true');\n        this.filtersDrawer?.setAttribute('aria-hidden', 'false');\n        this.offCanvasClasses = 'filtersDrawer__overlay filtersDrawer__overlay--active';\n      } else {\n        this.mobileToggle?.setAttribute('aria-expanded', 'false');\n        this.filtersDrawer?.setAttribute('aria-hidden', 'true');\n        this.offCanvasClasses = 'filtersDrawer__overlay';\n      }\n    }\n  }\n\n  /**\n   * Get the active filters from the component\n   */\n  @Method()\n  async getFilters() {\n    return this.filters;\n  }\n\n  componentDidLoad() {\n    this.handleResize();\n  }\n\n  render() {\n    return (\n      <Host mobileFilters={this.showMobileFilters}>\n        {this.isMobile && <jump-button\n          ref={(el) => {\n            this.mobileToggle = el;\n          }}\n          buttonId={this.filterButtonIcon} variant={'primary'} outline\n          onClick={() => this.showMobileFilters = !this.showMobileFilters}>\n          <slot name=\"prefix\">\n            {this.filterButtonIcon &&\n              <jump-icon library=\"fa\" category=\"regular\" name={this.filterButtonIcon} size=\"small\"></jump-icon>}\n            {this.filterButtonLabel}\n          </slot>\n          <slot name=\"suffix\">\n            {this.activeFilters > 0 &&\n              <jump-badge label={this.activeFilters.toString()} variant=\"success\" soft dimension=\"dot\">1</jump-badge>}\n          </slot>\n        </jump-button>}\n\n        {this.offCanvasOverlay &&\n          <div class={this.offCanvasClasses}\n               onClick={() => this.showMobileFilters = false}></div>}\n\n        {<div\n          ref={(el) => {\n            this.filtersDrawer = el;\n          }}\n          class=\"filtersDrawer\" data-variant={this.direction}>\n          {!this.isMobile &&\n            <div class={'filtersDrawer__header'}>\n              <jump-icon class=\"small\" name={this.filterButtonIcon}></jump-icon>\n              <h3>{this.filterHeading}</h3>\n            </div>}\n          {this.isMobile && <jump-icon library=\"lucide\" name=\"x\" size=\"medium\" label=\"\" class={'filtersDrawer__close'}\n                                       onClick={() => this.showMobileFilters = false}></jump-icon>}\n          <slot></slot>\n        </div>}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"jump-filter.entry.js","mappings":"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","names":[],"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  --jump-filter-close-btn-bg: white;\n  --bg-drawer: var(--bg-drawer, #fff);\n  --header-height: var(--header-height, 80px);\n  --drawer-width: var(--drawer-width, 240px);\n  --overlay-bg-color: var(--overlay-bg-color, rgba(0, 0, 0, 0.35));\n\n  h3 {\n    margin: 0;\n  }\n}\n\n@mixin fade-in-out($duration: 0.3s, $ease: ease-in-out) {\n  opacity: 0;\n  transition: opacity $duration $ease;\n\n  &.filtersDrawer__overlay--active {\n    opacity: 1;\n  }\n}\n\n.filtersDrawer__overlay {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background-color: var(--overlay-bg-color, rgba(0, 0, 0, 0.35));\n  z-index: 1;\n  width: 100vw;\n  height: 100vh;\n  display: none;\n\n  &.filtersDrawer__overlay--active {\n    display: block;\n  }\n\n  @include fade-in-out();\n}\n\n.filtersDrawer {\n  position: fixed;\n  display: flex;\n  flex-direction: column;\n  gap: 2.5rem;\n  left: -100vw;\n  top: 0;\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    right: 0;\n    width: auto;\n    transition: 0.3s all ease-in-out;\n\n    .filtersDrawer__close {\n      position: fixed;\n      top: calc(var(--header-height) + 0rem);\n      left: calc(var(--drawer-width) + 2rem);\n      background-color: var(--jump-filter-close-btn-bg, white);\n      padding: 0.5rem;\n      box-shadow: 8px 0 15px 0 #00000026;\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    max-height: initial;\n    box-shadow: none;\n  }\n\n  @media (max-width: 767px) {\n    top: var(--header-height);\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  @Prop() showCount: boolean = false;\n  @Prop() offCanvasOverlay: boolean = false;\n\n  @State() activeFilters: number = 0;\n  @State() showMobileFilters: boolean = false;\n  @State() isMobile: boolean = false;\n  @State() offCanvasClasses: string = 'filtersDrawer__overlay';\n\n  mobileToggle: HTMLElement | null;\n  filtersDrawer: HTMLElement;\n\n  @Listen('jump-filterchange')\n  filterChangeHandler(event: CustomEvent) {\n    //set this.filter as this.filters[event.detail.name] = event.detail.value; even if not present\n    this.filters = { ...this.filters, [event.detail.name]: event.detail.values };\n    console.log('Received the custom filterChange event: ', this.filters);\n\n\n    //TODO: increment this.activeFilters\n  }\n\n  @Listen('resize', { target: 'window' })\n  handleResize() {\n    this.isMobile = window.innerWidth < this.mobileThreshold;\n  }\n\n  @Watch('showMobileFilters')\n  watchHandler(newValue: boolean, oldValue: boolean) {\n    if (newValue !== oldValue) {\n      if (newValue) {\n        this.mobileToggle?.setAttribute('aria-expanded', 'true');\n        this.filtersDrawer?.setAttribute('aria-hidden', 'false');\n        this.offCanvasClasses = 'filtersDrawer__overlay filtersDrawer__overlay--active';\n      } else {\n        this.mobileToggle?.setAttribute('aria-expanded', 'false');\n        this.filtersDrawer?.setAttribute('aria-hidden', 'true');\n        this.offCanvasClasses = 'filtersDrawer__overlay';\n      }\n    }\n  }\n\n  /**\n   * Get the active filters from the component\n   */\n  @Method()\n  async getFilters() {\n    return this.filters;\n  }\n\n  componentDidLoad() {\n    this.handleResize();\n  }\n\n  render() {\n    return (\n      <Host mobileFilters={this.showMobileFilters}>\n        {this.isMobile && <jump-button\n          ref={(el) => {\n            this.mobileToggle = el;\n          }}\n          buttonId={this.filterButtonIcon} variant={'primary'} outline\n          onClick={() => this.showMobileFilters = !this.showMobileFilters}>\n          <slot name=\"prefix\">\n            {this.filterButtonIcon &&\n              <jump-icon library=\"fa\" category=\"regular\" name={this.filterButtonIcon} size=\"small\"></jump-icon>}\n            {this.filterButtonLabel}\n          </slot>\n          <slot name=\"suffix\">\n            {this.activeFilters > 0 &&\n              <jump-badge label={this.activeFilters.toString()} variant=\"success\" soft dimension=\"dot\">1</jump-badge>}\n          </slot>\n        </jump-button>}\n\n        {this.offCanvasOverlay &&\n          <div class={this.offCanvasClasses}\n               onClick={() => this.showMobileFilters = false}></div>}\n\n        {<div\n          ref={(el) => {\n            this.filtersDrawer = el;\n          }}\n          class=\"filtersDrawer\" data-variant={this.direction}>\n          {!this.isMobile &&\n            <div class={'filtersDrawer__header'}>\n              <jump-icon class=\"small\" name={this.filterButtonIcon}></jump-icon>\n              <h3>{this.filterHeading}</h3>\n            </div>}\n          {this.isMobile && <jump-icon library=\"lucide\" name=\"x\" size=\"medium\" label=\"\" class={'filtersDrawer__close'}\n                                       onClick={() => this.showMobileFilters = false}></jump-icon>}\n          <slot></slot>\n        </div>}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/jump-design-system/jump-design-system.esm.js

@@ -1,2 +1,2 @@
-import{p as e,b as a}from"./p-98d5dd1f.js";export{s as setNonce}from"./p-98d5dd1f.js";import{g as t}from"./p-e1255160.js";var l=()=>{const a=import.meta.url;const t={};if(a!==""){t.resourcesUrl=new URL(".",a).href}return e(t)};l().then((async e=>{await t();return a([["p-04194e1a",[[1,"jump-card-ecommerce",{onlyIconButton:[4,"only-icon-button"],hasBackground:[4,"has-background"],badge:[1],favorite:[1540],hasFavorite:[4,"has-favorite"],hasSlotForFavorite:[4,"has-slot-for-favorite"],hasSlotAddToCart:[4,"has-slot-add-to-cart"],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],addToCartColor:[1,"add-to-cart-color"],badgeColor:[1,"badge-color"],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"],isMini:[4,"is-mini"],disallowAddToCart:[4,"disallow-add-to-cart"],disallowAddToCartLabel:[1,"disallow-add-to-cart-label"],enableZoom:[4,"enable-zoom"],imageObjectFit:[1,"image-object-fit"],autoSelectFirstVariation:[4,"auto-select-first-variation"],addedToCart:[4,"added-to-cart"],endAddedToCart:[4,"end-added-to-cart"],variations:[32],selectedVariation:[32],priceFormatted:[32],salePriceFormatted:[32],optionsOrdered:[32],setPrice:[64],forceVariationsOrder:[64],selectVariation:[64],selectFirstVariation:[64],getSelectedVariation:[64]},[[0,"jump-card-ecommerce-option-connected","addOption"]]]]],["p-f797234e",[[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],showCount:[4,"show-count"],offCanvasOverlay:[4,"off-canvas-overlay"],activeFilters:[32],showMobileFilters:[32],isMobile:[32],offCanvasClasses:[32],getFilters:[64]},[[0,"jump-filterchange","filterChangeHandler"],[9,"resize","handleResize"]],{showMobileFilters:["watchHandler"]}]]],["p-0140b32c",[[1,"jump-filtergroup",{name:[1],heading:[1],otherLabel:[1,"other-label"],lessLabel:[1,"less-label"],maxElements:[2,"max-elements"],variant:[1],label:[32],values:[32],value:[32],slotItems:[32],inputs:[32],showMore:[32],getValues:[64],getActiveAmount:[64],getInputs:[64],getName:[64]},null,{showMore:["watchShowMore"]}]]],["p-bb18f919",[[1,"jump-navbar",{logo:[16],navItems:[16],secondaryNavItems:[16],mobileThreshold:[2,"mobile-threshold"],type:[1],navPosition:[1,"nav-position"],megaMenuAlignment:[1,"mega-menu-alignment"],sticky:[4],stickyThreshold:[2,"sticky-threshold"],mobileLogo:[16],user:[16],isMobile:[32]},[[9,"resize","handleResize"]]]]],["p-f36de1a8",[[1,"jump-pagination",{pagLabel:[1,"pag-label"],last:[2],showFirstAndLast:[4,"show-first-and-last"],current:[32]},null,{current:["watchcurrent"]}]]],["p-629835ac",[[0,"jump-pagination-table",{elementsRanges:[1,"elements-ranges"],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"],elementsRangesArray:[32]},null,{elementsRanges:["elementsRangesChanged"],elPerPage:["elPerPageChanged"]}]]],["p-b6c7ffcd",[[65,"jump-quantity",{min:[2],max:[2],step:[2],label:[1],type:[1],variant:[1],showButtons:[4,"show-buttons"],value:[2],internalValue:[32],getValue:[64],setMax:[64],reset:[64]},null,{value:["onValueChange"]}]]],["p-038a2a14",[[1,"jump-search-bar",{searchValue:[1025,"search-value"],placeholder:[1],noResultText:[1,"no-result-text"],loadingText:[1,"loading-text"],resultsText:[1,"results-text"],showAllResText:[1,"show-all-res-text"],identifier:[1],debounceTime:[2,"debounce-time"],variant:[1],withBtn:[4,"with-btn"],recentsTitle:[1,"recents-title"],recents:[16],results:[16],dropdown:[4],linearIconOnly:[4,"linear-icon-only"],dropdownPosition:[1,"dropdown-position"],dropdownVisible:[32],resType:[32],innerResults:[32],totalResults:[32],isExpanded:[32],setResults:[64]},[[0,"jump-search-bar-dropdown-item-connected","addOption"]],{searchValue:["searchValueChanged"]}]]],["p-6b8fccdb",[[1,"jump-search-bar-mobile",{identifier:[1],placeholder:[1],recents:[16],recentsTitle:[1,"recents-title"],debounceTime:[2,"debounce-time"],loadingText:[1,"loading-text"],noResultText:[1,"no-result-text"],results:[16],resultsText:[1,"results-text"],showAllResText:[1,"show-all-res-text"],isOpen:[32],innerResults:[32],totalResults:[32],resType:[32],searchValue:[32],setResults:[64]},[[0,"jump-search-bar-dropdown-item-connected","addOption"]],{searchValue:["searchValueChanged"]}]]],["p-b3765945",[[1,"jump-accordion",{variant:[1],summary:[1],disabled:[4],open:[516],icon:[1],identifier:[1]},[[0,"sl-show","handleShow"]]]]],["p-ff62e250",[[1,"jump-side-cart-example",{isCartOpen:[32],position:[32],cartItems:[32]}]]],["p-264fa972",[[1,"jump-tab-item",{identifier:[1],iconName:[1,"icon-name"],iconPosition:[1,"icon-position"],label:[1],active:[4],disabled:[4],variant:[32]}]]],["p-bd692b1f",[[1,"jump-accordion-group",{variant:[1],groupIdentifier:[1,"group-identifier"]}]]],["p-6905cee4",[[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"]}]]],["p-f7310fd5",[[1,"jump-card-ecommerce-option",{code:[1],imgUrl:[1,"img-url"],label:[1],sku:[1],taxonomy:[1],order:[2]}]]],["p-0d86819c",[[1,"jump-filter-checkbox",{value:[1],label:[1],checked:[516],count:[8],isChecked:[64]}]]],["p-e30da431",[[1,"jump-filter-range",{name:[1],labelMinBefore:[1,"label-min-before"],labelMinAfter:[1,"label-min-after"],labelMaxBefore:[1,"label-max-before"],labelMaxAfter:[1,"label-max-after"],min:[2],max:[2],step:[2],minVal:[2,"min-val"],maxVal:[2,"max-val"],disabled:[516],internalMinVal:[32],internalMaxVal:[32],getValues:[64]},null,{minVal:["watchMinVal"],maxVal:["watchMaxVal"]}]]],["p-55fcebb1",[[1,"jump-filter-select",{value:[1537],placeholder:[1],label:[1],name:[1],options:[1],disabled:[516],multiple:[4],required:[4],loading:[4],open:[32],values:[32],getSelectedValue:[64],getSelectedOption:[64],getValues:[64],getName:[64],setValue:[64]}]]],["p-7e35d9f1",[[1,"jump-filter-switch",{value:[1],label:[1],name:[1],checked:[1540],disabled:[516],values:[32],setValue:[64],isChecked:[64],getValues:[64],getName:[64]},null,{checked:["checkedChanged"]}]]],["p-02ab8fb7",[[1,"jump-search-bar-dropdown-item",{value:[1],img:[1],href:[1],details:[32]}]]],["p-d1fc1ddf",[[1,"jump-tab",{disabled:[4],alignment:[1],fullBorder:[4,"full-border"],tabGroupName:[1,"tab-group-name"],variant:[1]},[[0,"jump-change-active-tab","changeActiveTabHandler"]]]]],["p-d0ea0f54",[[1,"jump-tab-panel",{identifier:[1],active:[4]}]]],["p-421ebb5a",[[1,"jump-side-cart",{isOpen:[4,"is-open"],position:[1],items:[16],discountThreshold:[16],freeShippingThreshold:[2,"free-shipping-threshold"],progressPercentage:[2,"progress-percentage"],checkoutLabel:[1,"checkout-label"],viewCartLabel:[1,"view-cart-label"],shippingInfo:[1,"shipping-info"],cartItems:[32]}]]],["p-6d82feb3",[[1,"jump-badge",{label:[1],variant:[513],dimension:[513],soft:[516],outline:[516]}]]],["p-18c359e3",[[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]}]]]],e)}));
+import{p as e,b as a}from"./p-98d5dd1f.js";export{s as setNonce}from"./p-98d5dd1f.js";import{g as t}from"./p-e1255160.js";var l=()=>{const a=import.meta.url;const t={};if(a!==""){t.resourcesUrl=new URL(".",a).href}return e(t)};l().then((async e=>{await t();return a([["p-04194e1a",[[1,"jump-card-ecommerce",{onlyIconButton:[4,"only-icon-button"],hasBackground:[4,"has-background"],badge:[1],favorite:[1540],hasFavorite:[4,"has-favorite"],hasSlotForFavorite:[4,"has-slot-for-favorite"],hasSlotAddToCart:[4,"has-slot-add-to-cart"],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],addToCartColor:[1,"add-to-cart-color"],badgeColor:[1,"badge-color"],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"],isMini:[4,"is-mini"],disallowAddToCart:[4,"disallow-add-to-cart"],disallowAddToCartLabel:[1,"disallow-add-to-cart-label"],enableZoom:[4,"enable-zoom"],imageObjectFit:[1,"image-object-fit"],autoSelectFirstVariation:[4,"auto-select-first-variation"],addedToCart:[4,"added-to-cart"],endAddedToCart:[4,"end-added-to-cart"],variations:[32],selectedVariation:[32],priceFormatted:[32],salePriceFormatted:[32],optionsOrdered:[32],setPrice:[64],forceVariationsOrder:[64],selectVariation:[64],selectFirstVariation:[64],getSelectedVariation:[64]},[[0,"jump-card-ecommerce-option-connected","addOption"]]]]],["p-5def5339",[[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],showCount:[4,"show-count"],offCanvasOverlay:[4,"off-canvas-overlay"],activeFilters:[32],showMobileFilters:[32],isMobile:[32],offCanvasClasses:[32],getFilters:[64]},[[0,"jump-filterchange","filterChangeHandler"],[9,"resize","handleResize"]],{showMobileFilters:["watchHandler"]}]]],["p-0140b32c",[[1,"jump-filtergroup",{name:[1],heading:[1],otherLabel:[1,"other-label"],lessLabel:[1,"less-label"],maxElements:[2,"max-elements"],variant:[1],label:[32],values:[32],value:[32],slotItems:[32],inputs:[32],showMore:[32],getValues:[64],getActiveAmount:[64],getInputs:[64],getName:[64]},null,{showMore:["watchShowMore"]}]]],["p-bb18f919",[[1,"jump-navbar",{logo:[16],navItems:[16],secondaryNavItems:[16],mobileThreshold:[2,"mobile-threshold"],type:[1],navPosition:[1,"nav-position"],megaMenuAlignment:[1,"mega-menu-alignment"],sticky:[4],stickyThreshold:[2,"sticky-threshold"],mobileLogo:[16],user:[16],isMobile:[32]},[[9,"resize","handleResize"]]]]],["p-f36de1a8",[[1,"jump-pagination",{pagLabel:[1,"pag-label"],last:[2],showFirstAndLast:[4,"show-first-and-last"],current:[32]},null,{current:["watchcurrent"]}]]],["p-629835ac",[[0,"jump-pagination-table",{elementsRanges:[1,"elements-ranges"],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"],elementsRangesArray:[32]},null,{elementsRanges:["elementsRangesChanged"],elPerPage:["elPerPageChanged"]}]]],["p-b6c7ffcd",[[65,"jump-quantity",{min:[2],max:[2],step:[2],label:[1],type:[1],variant:[1],showButtons:[4,"show-buttons"],value:[2],internalValue:[32],getValue:[64],setMax:[64],reset:[64]},null,{value:["onValueChange"]}]]],["p-038a2a14",[[1,"jump-search-bar",{searchValue:[1025,"search-value"],placeholder:[1],noResultText:[1,"no-result-text"],loadingText:[1,"loading-text"],resultsText:[1,"results-text"],showAllResText:[1,"show-all-res-text"],identifier:[1],debounceTime:[2,"debounce-time"],variant:[1],withBtn:[4,"with-btn"],recentsTitle:[1,"recents-title"],recents:[16],results:[16],dropdown:[4],linearIconOnly:[4,"linear-icon-only"],dropdownPosition:[1,"dropdown-position"],dropdownVisible:[32],resType:[32],innerResults:[32],totalResults:[32],isExpanded:[32],setResults:[64]},[[0,"jump-search-bar-dropdown-item-connected","addOption"]],{searchValue:["searchValueChanged"]}]]],["p-6b8fccdb",[[1,"jump-search-bar-mobile",{identifier:[1],placeholder:[1],recents:[16],recentsTitle:[1,"recents-title"],debounceTime:[2,"debounce-time"],loadingText:[1,"loading-text"],noResultText:[1,"no-result-text"],results:[16],resultsText:[1,"results-text"],showAllResText:[1,"show-all-res-text"],isOpen:[32],innerResults:[32],totalResults:[32],resType:[32],searchValue:[32],setResults:[64]},[[0,"jump-search-bar-dropdown-item-connected","addOption"]],{searchValue:["searchValueChanged"]}]]],["p-b3765945",[[1,"jump-accordion",{variant:[1],summary:[1],disabled:[4],open:[516],icon:[1],identifier:[1]},[[0,"sl-show","handleShow"]]]]],["p-ff62e250",[[1,"jump-side-cart-example",{isCartOpen:[32],position:[32],cartItems:[32]}]]],["p-264fa972",[[1,"jump-tab-item",{identifier:[1],iconName:[1,"icon-name"],iconPosition:[1,"icon-position"],label:[1],active:[4],disabled:[4],variant:[32]}]]],["p-bd692b1f",[[1,"jump-accordion-group",{variant:[1],groupIdentifier:[1,"group-identifier"]}]]],["p-6905cee4",[[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"]}]]],["p-f7310fd5",[[1,"jump-card-ecommerce-option",{code:[1],imgUrl:[1,"img-url"],label:[1],sku:[1],taxonomy:[1],order:[2]}]]],["p-0d86819c",[[1,"jump-filter-checkbox",{value:[1],label:[1],checked:[516],count:[8],isChecked:[64]}]]],["p-e30da431",[[1,"jump-filter-range",{name:[1],labelMinBefore:[1,"label-min-before"],labelMinAfter:[1,"label-min-after"],labelMaxBefore:[1,"label-max-before"],labelMaxAfter:[1,"label-max-after"],min:[2],max:[2],step:[2],minVal:[2,"min-val"],maxVal:[2,"max-val"],disabled:[516],internalMinVal:[32],internalMaxVal:[32],getValues:[64]},null,{minVal:["watchMinVal"],maxVal:["watchMaxVal"]}]]],["p-55fcebb1",[[1,"jump-filter-select",{value:[1537],placeholder:[1],label:[1],name:[1],options:[1],disabled:[516],multiple:[4],required:[4],loading:[4],open:[32],values:[32],getSelectedValue:[64],getSelectedOption:[64],getValues:[64],getName:[64],setValue:[64]}]]],["p-7e35d9f1",[[1,"jump-filter-switch",{value:[1],label:[1],name:[1],checked:[1540],disabled:[516],values:[32],setValue:[64],isChecked:[64],getValues:[64],getName:[64]},null,{checked:["checkedChanged"]}]]],["p-02ab8fb7",[[1,"jump-search-bar-dropdown-item",{value:[1],img:[1],href:[1],details:[32]}]]],["p-d1fc1ddf",[[1,"jump-tab",{disabled:[4],alignment:[1],fullBorder:[4,"full-border"],tabGroupName:[1,"tab-group-name"],variant:[1]},[[0,"jump-change-active-tab","changeActiveTabHandler"]]]]],["p-d0ea0f54",[[1,"jump-tab-panel",{identifier:[1],active:[4]}]]],["p-421ebb5a",[[1,"jump-side-cart",{isOpen:[4,"is-open"],position:[1],items:[16],discountThreshold:[16],freeShippingThreshold:[2,"free-shipping-threshold"],progressPercentage:[2,"progress-percentage"],checkoutLabel:[1,"checkout-label"],viewCartLabel:[1,"view-cart-label"],shippingInfo:[1,"shipping-info"],cartItems:[32]}]]],["p-6d82feb3",[[1,"jump-badge",{label:[1],variant:[513],dimension:[513],soft:[516],outline:[516]}]]],["p-18c359e3",[[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]}]]]],e)}));
 //# sourceMappingURL=jump-design-system.esm.js.map

package/dist/jump-design-system/{p-f797234e.entry.js → p-5def5339.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,h as a,H as i}from"./p-98d5dd1f.js";const r=":host{--primary-standard:var(--secondary-hard, #435171);--jump-button-background-hover:red;--jump-filter-close-btn-bg:white;--bg-drawer:var(--bg-drawer, #fff);--header-height:var(--header-height, 80px);--drawer-width:var(--drawer-width, 240px);--overlay-bg-color:var(--overlay-bg-color, rgba(0, 0, 0, 0.35))}:host h3{margin:0}.filtersDrawer__overlay{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);background-color:var(--overlay-bg-color, rgba(0, 0, 0, 0.35));z-index:1;width:100vw;height:100vh;display:none;opacity:0;transition:opacity 0.3s ease-in-out}.filtersDrawer__overlay.filtersDrawer__overlay--active{display:block}.filtersDrawer__overlay.filtersDrawer__overlay--active{opacity:1}.filtersDrawer{position:fixed;display:flex;flex-direction:column;gap:2.5rem;left:-100vw;top:0;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;right:0;width:auto;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);background-color:var(--jump-filter-close-btn-bg, white);padding:0.5rem;box-shadow:8px 0 15px 0 rgba(0, 0, 0, 0.1490196078)}@media (min-width: 768px){.filtersDrawer{position:relative;left:0;height:auto;max-width:initial;max-height:initial;box-shadow:none}}@media (max-width: 767px){.filtersDrawer{top:var(--header-height)}}.filtersDrawer .filtersDrawer__header{display:flex;justify-content:flex-start;align-items:center;gap:0.5rem}";const t=r;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.showCount=false;this.offCanvasOverlay=false;this.activeFilters=0;this.showMobileFilters=false;this.isMobile=false;this.offCanvasClasses="filtersDrawer__overlay"}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,r,t,s;if(e!==a){if(e){(i=this.mobileToggle)===null||i===void 0?void 0:i.setAttribute("aria-expanded","true");(r=this.filtersDrawer)===null||r===void 0?void 0:r.setAttribute("aria-hidden","false");this.offCanvasClasses="filtersDrawer__overlay filtersDrawer__overlay--active"}else{(t=this.mobileToggle)===null||t===void 0?void 0:t.setAttribute("aria-expanded","false");(s=this.filtersDrawer)===null||s===void 0?void 0:s.setAttribute("aria-hidden","true");this.offCanvasClasses="filtersDrawer__overlay"}}}async getFilters(){return this.filters}componentDidLoad(){this.handleResize()}render(){return a(i,{key:"a6887d6f754cdba0e3ec854c0e553d4805c62c63",mobileFilters:this.showMobileFilters},this.isMobile&&a("jump-button",{key:"0194221f6ba4be2f547d8b6495f94c9d716e8be1",ref:e=>{this.mobileToggle=e},buttonId:this.filterButtonIcon,variant:"primary",outline:true,onClick:()=>this.showMobileFilters=!this.showMobileFilters},a("slot",{key:"5b60281b75d958d605c97b69be6576f177538740",name:"prefix"},this.filterButtonIcon&&a("jump-icon",{key:"c85beb03fd5132192bfa5f2d83c1e5cec64c4f4e",library:"fa",category:"regular",name:this.filterButtonIcon,size:"small"}),this.filterButtonLabel),a("slot",{key:"9bf612b73c9c0d69172ed6caff94e1f34541c539",name:"suffix"},this.activeFilters>0&&a("jump-badge",{key:"8c01c39288672210dc546ecb72fa7ef4d9c60bef",label:this.activeFilters.toString(),variant:"success",soft:true,dimension:"dot"},"1"))),this.offCanvasOverlay&&a("div",{key:"b588e7ab489541c92a04df32ad40a5c31238451a",class:this.offCanvasClasses,onClick:()=>this.showMobileFilters=false}),a("div",{key:"af8c4b52c7a87461e98a63d2040999b179c6c372",ref:e=>{this.filtersDrawer=e},class:"filtersDrawer","data-variant":this.direction},!this.isMobile&&a("div",{key:"fde6a476ff39c470b91030a2ea00c73392a7644d",class:"filtersDrawer__header"},a("jump-icon",{key:"4173961bcb0943d9de12c853968e503917bf6063",class:"small",name:this.filterButtonIcon}),a("h3",{key:"c7e1982a2805e714acab2d9ca5ba3a3c8b925e6e"},this.filterHeading)),this.isMobile&&a("jump-icon",{key:"c4cf8592159c2168ef96a38863f11f3ff9becdfd",library:"lucide",name:"x",size:"medium",label:"",class:"filtersDrawer__close",onClick:()=>this.showMobileFilters=false}),a("slot",{key:"e78555090e26aab2ea4d72f3db0c3175062796f8"})))}static get watchers(){return{showMobileFilters:["watchHandler"]}}};s.style=t;export{s as jump_filter};
-//# sourceMappingURL=p-f797234e.entry.js.map
+import{r as e,h as a,H as i}from"./p-98d5dd1f.js";const r=":host{--primary-standard:var(--secondary-hard, #435171);--jump-button-background-hover:red;--jump-filter-close-btn-bg:white;--bg-drawer:var(--bg-drawer, #fff);--header-height:var(--header-height, 80px);--drawer-width:var(--drawer-width, 240px);--overlay-bg-color:var(--overlay-bg-color, rgba(0, 0, 0, 0.35))}:host h3{margin:0}.filtersDrawer__overlay{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);background-color:var(--overlay-bg-color, rgba(0, 0, 0, 0.35));z-index:1;width:100vw;height:100vh;display:none;opacity:0;transition:opacity 0.3s ease-in-out}.filtersDrawer__overlay.filtersDrawer__overlay--active{display:block}.filtersDrawer__overlay.filtersDrawer__overlay--active{opacity:1}.filtersDrawer{position:fixed;display:flex;flex-direction:column;gap:2.5rem;left:-100vw;top:0;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;right:0;width:auto;transition:0.3s all ease-in-out}.filtersDrawer[aria-hidden=false] .filtersDrawer__close{position:fixed;top:calc(var(--header-height) + 0rem);left:calc(var(--drawer-width) + 2rem);background-color:var(--jump-filter-close-btn-bg, white);padding:0.5rem;box-shadow:8px 0 15px 0 rgba(0, 0, 0, 0.1490196078)}@media (min-width: 768px){.filtersDrawer{position:relative;left:0;height:auto;max-width:initial;max-height:initial;box-shadow:none}}@media (max-width: 767px){.filtersDrawer{top:var(--header-height)}}.filtersDrawer .filtersDrawer__header{display:flex;justify-content:flex-start;align-items:center;gap:0.5rem}";const t=r;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.showCount=false;this.offCanvasOverlay=false;this.activeFilters=0;this.showMobileFilters=false;this.isMobile=false;this.offCanvasClasses="filtersDrawer__overlay"}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,r,t,s;if(e!==a){if(e){(i=this.mobileToggle)===null||i===void 0?void 0:i.setAttribute("aria-expanded","true");(r=this.filtersDrawer)===null||r===void 0?void 0:r.setAttribute("aria-hidden","false");this.offCanvasClasses="filtersDrawer__overlay filtersDrawer__overlay--active"}else{(t=this.mobileToggle)===null||t===void 0?void 0:t.setAttribute("aria-expanded","false");(s=this.filtersDrawer)===null||s===void 0?void 0:s.setAttribute("aria-hidden","true");this.offCanvasClasses="filtersDrawer__overlay"}}}async getFilters(){return this.filters}componentDidLoad(){this.handleResize()}render(){return a(i,{key:"a6887d6f754cdba0e3ec854c0e553d4805c62c63",mobileFilters:this.showMobileFilters},this.isMobile&&a("jump-button",{key:"0194221f6ba4be2f547d8b6495f94c9d716e8be1",ref:e=>{this.mobileToggle=e},buttonId:this.filterButtonIcon,variant:"primary",outline:true,onClick:()=>this.showMobileFilters=!this.showMobileFilters},a("slot",{key:"5b60281b75d958d605c97b69be6576f177538740",name:"prefix"},this.filterButtonIcon&&a("jump-icon",{key:"c85beb03fd5132192bfa5f2d83c1e5cec64c4f4e",library:"fa",category:"regular",name:this.filterButtonIcon,size:"small"}),this.filterButtonLabel),a("slot",{key:"9bf612b73c9c0d69172ed6caff94e1f34541c539",name:"suffix"},this.activeFilters>0&&a("jump-badge",{key:"8c01c39288672210dc546ecb72fa7ef4d9c60bef",label:this.activeFilters.toString(),variant:"success",soft:true,dimension:"dot"},"1"))),this.offCanvasOverlay&&a("div",{key:"b588e7ab489541c92a04df32ad40a5c31238451a",class:this.offCanvasClasses,onClick:()=>this.showMobileFilters=false}),a("div",{key:"af8c4b52c7a87461e98a63d2040999b179c6c372",ref:e=>{this.filtersDrawer=e},class:"filtersDrawer","data-variant":this.direction},!this.isMobile&&a("div",{key:"fde6a476ff39c470b91030a2ea00c73392a7644d",class:"filtersDrawer__header"},a("jump-icon",{key:"4173961bcb0943d9de12c853968e503917bf6063",class:"small",name:this.filterButtonIcon}),a("h3",{key:"c7e1982a2805e714acab2d9ca5ba3a3c8b925e6e"},this.filterHeading)),this.isMobile&&a("jump-icon",{key:"c4cf8592159c2168ef96a38863f11f3ff9becdfd",library:"lucide",name:"x",size:"medium",label:"",class:"filtersDrawer__close",onClick:()=>this.showMobileFilters=false}),a("slot",{key:"e78555090e26aab2ea4d72f3db0c3175062796f8"})))}static get watchers(){return{showMobileFilters:["watchHandler"]}}};s.style=t;export{s as jump_filter};
+//# sourceMappingURL=p-5def5339.entry.js.map

package/dist/jump-design-system/{p-f797234e.entry.js.map → p-5def5339.entry.js.map}

@@ -1 +1 @@
-{"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","offCanvasClasses","_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","offCanvasOverlay","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  --jump-filter-close-btn-bg: white;\n  --bg-drawer: var(--bg-drawer, #fff);\n  --header-height: var(--header-height, 80px);\n  --drawer-width: var(--drawer-width, 240px);\n  --overlay-bg-color: var(--overlay-bg-color, rgba(0, 0, 0, 0.35));\n\n  h3 {\n    margin: 0;\n  }\n}\n\n@mixin fade-in-out($duration: 0.3s, $ease: ease-in-out) {\n  opacity: 0;\n  transition: opacity $duration $ease;\n\n  &.filtersDrawer__overlay--active {\n    opacity: 1;\n  }\n}\n\n.filtersDrawer__overlay {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background-color: var(--overlay-bg-color, rgba(0, 0, 0, 0.35));\n  z-index: 1;\n  width: 100vw;\n  height: 100vh;\n  display: none;\n\n  &.filtersDrawer__overlay--active {\n    display: block;\n  }\n\n  @include fade-in-out();\n}\n\n.filtersDrawer {\n  position: fixed;\n  display: flex;\n  flex-direction: column;\n  gap: 2.5rem;\n  left: -100vw;\n  top: 0;\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    right: 0;\n    width: auto;\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      background-color: var(--jump-filter-close-btn-bg, white);\n      padding: 0.5rem;\n      box-shadow: 8px 0 15px 0 #00000026;\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    max-height: initial;\n    box-shadow: none;\n  }\n\n  @media (max-width: 767px) {\n    top: var(--header-height);\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  @Prop() showCount: boolean = false;\n  @Prop() offCanvasOverlay: boolean = false;\n\n  @State() activeFilters: number = 0;\n  @State() showMobileFilters: boolean = false;\n  @State() isMobile: boolean = false;\n  @State() offCanvasClasses: string = 'filtersDrawer__overlay';\n\n  mobileToggle: HTMLElement | null;\n  filtersDrawer: HTMLElement;\n\n  @Listen('jump-filterchange')\n  filterChangeHandler(event: CustomEvent) {\n    //set this.filter as this.filters[event.detail.name] = event.detail.value; even if not present\n    this.filters = { ...this.filters, [event.detail.name]: event.detail.values };\n    console.log('Received the custom filterChange event: ', this.filters);\n\n\n    //TODO: increment this.activeFilters\n  }\n\n  @Listen('resize', { target: 'window' })\n  handleResize() {\n    this.isMobile = window.innerWidth < this.mobileThreshold;\n  }\n\n  @Watch('showMobileFilters')\n  watchHandler(newValue: boolean, oldValue: boolean) {\n    if (newValue !== oldValue) {\n      if (newValue) {\n        this.mobileToggle?.setAttribute('aria-expanded', 'true');\n        this.filtersDrawer?.setAttribute('aria-hidden', 'false');\n        this.offCanvasClasses = 'filtersDrawer__overlay filtersDrawer__overlay--active';\n      } else {\n        this.mobileToggle?.setAttribute('aria-expanded', 'false');\n        this.filtersDrawer?.setAttribute('aria-hidden', 'true');\n        this.offCanvasClasses = 'filtersDrawer__overlay';\n      }\n    }\n  }\n\n  /**\n   * Get the active filters from the component\n   */\n  @Method()\n  async getFilters() {\n    return this.filters;\n  }\n\n  componentDidLoad() {\n    this.handleResize();\n  }\n\n  render() {\n    return (\n      <Host mobileFilters={this.showMobileFilters}>\n        {this.isMobile && <jump-button\n          ref={(el) => {\n            this.mobileToggle = el;\n          }}\n          buttonId={this.filterButtonIcon} variant={'primary'} outline\n          onClick={() => this.showMobileFilters = !this.showMobileFilters}>\n          <slot name=\"prefix\">\n            {this.filterButtonIcon &&\n              <jump-icon library=\"fa\" category=\"regular\" name={this.filterButtonIcon} size=\"small\"></jump-icon>}\n            {this.filterButtonLabel}\n          </slot>\n          <slot name=\"suffix\">\n            {this.activeFilters > 0 &&\n              <jump-badge label={this.activeFilters.toString()} variant=\"success\" soft dimension=\"dot\">1</jump-badge>}\n          </slot>\n        </jump-button>}\n\n        {this.offCanvasOverlay &&\n          <div class={this.offCanvasClasses}\n               onClick={() => this.showMobileFilters = false}></div>}\n\n        {<div\n          ref={(el) => {\n            this.filtersDrawer = el;\n          }}\n          class=\"filtersDrawer\" data-variant={this.direction}>\n          {!this.isMobile &&\n            <div class={'filtersDrawer__header'}>\n              <jump-icon class=\"small\" name={this.filterButtonIcon}></jump-icon>\n              <h3>{this.filterHeading}</h3>\n            </div>}\n          {this.isMobile && <jump-icon library=\"lucide\" name=\"x\" size=\"medium\" 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,otDACtB,MAAAC,EAAeD,E,MCMFE,EAAU,M,wCAE0B,W,mBACf,a,uBACI,S,sBACD,U,qBACD,I,sCAEL,M,sBACO,M,mBAEH,E,uBACK,M,cACT,M,sBACO,wB,CAMpC,mBAAAC,CAAoBC,GAElBC,KAAKC,QAAOC,OAAAC,OAAAD,OAAAC,OAAA,GAAQH,KAAKC,SAAO,CAAE,CAACF,EAAMK,OAAOC,MAAON,EAAMK,OAAOE,SACpEC,QAAQC,IAAI,2CAA4CR,KAAKC,Q,CAO/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,SAChDnB,KAAKsB,iBAAmB,uD,KACnB,EACLC,EAAAvB,KAAKkB,gBAAY,MAAAK,SAAA,SAAAA,EAAEJ,aAAa,gBAAiB,UACjDK,EAAAxB,KAAKqB,iBAAa,MAAAG,SAAA,SAAAA,EAAEL,aAAa,cAAe,QAChDnB,KAAKsB,iBAAmB,wB,GAS9B,gBAAMG,GACJ,OAAOzB,KAAKC,O,CAGd,gBAAAyB,GACE1B,KAAKS,c,CAGP,MAAAkB,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,cAAe/B,KAAKgC,mBACvBhC,KAAKU,UAAYkB,EAAA,eAAAE,IAAA,2CAChBG,IAAMC,IACJlC,KAAKkB,aAAegB,CAAE,EAExBC,SAAUnC,KAAKoC,iBAAkBC,QAAS,UAAWC,QAAO,KAC5DC,QAAS,IAAMvC,KAAKgC,mBAAqBhC,KAAKgC,mBAC9CJ,EAAA,QAAAE,IAAA,2CAAMzB,KAAK,UACRL,KAAKoC,kBACJR,EAAA,aAAAE,IAAA,2CAAWU,QAAQ,KAAKC,SAAS,UAAUpC,KAAML,KAAKoC,iBAAkBM,KAAK,UAC9E1C,KAAK2C,mBAERf,EAAA,QAAAE,IAAA,2CAAMzB,KAAK,UACRL,KAAK4C,cAAgB,GACpBhB,EAAA,cAAAE,IAAA,2CAAYe,MAAO7C,KAAK4C,cAAcE,WAAYT,QAAQ,UAAUU,KAAI,KAACC,UAAU,OAAK,OAI7FhD,KAAKiD,kBACJrB,EAAA,OAAAE,IAAA,2CAAKoB,MAAOlD,KAAKsB,iBACZiB,QAAS,IAAMvC,KAAKgC,kBAAoB,QAE9CJ,EAAA,OAAAE,IAAA,2CACCG,IAAMC,IACJlC,KAAKqB,cAAgBa,CAAE,EAEzBgB,MAAM,gBAAe,eAAelD,KAAKmD,YACvCnD,KAAKU,UACLkB,EAAA,OAAAE,IAAA,2CAAKoB,MAAO,yBACVtB,EAAA,aAAAE,IAAA,2CAAWoB,MAAM,QAAQ7C,KAAML,KAAKoC,mBACpCR,EAAA,MAAAE,IAAA,4CAAK9B,KAAKoD,gBAEbpD,KAAKU,UAAYkB,EAAA,aAAAE,IAAA,2CAAWU,QAAQ,SAASnC,KAAK,IAAIqC,KAAK,SAASG,MAAM,GAAGK,MAAO,uBACxDX,QAAS,IAAMvC,KAAKgC,kBAAoB,QACrEJ,EAAA,QAAAE,IAAA,8C"}
+{"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","offCanvasClasses","_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","offCanvasOverlay","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  --jump-filter-close-btn-bg: white;\n  --bg-drawer: var(--bg-drawer, #fff);\n  --header-height: var(--header-height, 80px);\n  --drawer-width: var(--drawer-width, 240px);\n  --overlay-bg-color: var(--overlay-bg-color, rgba(0, 0, 0, 0.35));\n\n  h3 {\n    margin: 0;\n  }\n}\n\n@mixin fade-in-out($duration: 0.3s, $ease: ease-in-out) {\n  opacity: 0;\n  transition: opacity $duration $ease;\n\n  &.filtersDrawer__overlay--active {\n    opacity: 1;\n  }\n}\n\n.filtersDrawer__overlay {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background-color: var(--overlay-bg-color, rgba(0, 0, 0, 0.35));\n  z-index: 1;\n  width: 100vw;\n  height: 100vh;\n  display: none;\n\n  &.filtersDrawer__overlay--active {\n    display: block;\n  }\n\n  @include fade-in-out();\n}\n\n.filtersDrawer {\n  position: fixed;\n  display: flex;\n  flex-direction: column;\n  gap: 2.5rem;\n  left: -100vw;\n  top: 0;\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    right: 0;\n    width: auto;\n    transition: 0.3s all ease-in-out;\n\n    .filtersDrawer__close {\n      position: fixed;\n      top: calc(var(--header-height) + 0rem);\n      left: calc(var(--drawer-width) + 2rem);\n      background-color: var(--jump-filter-close-btn-bg, white);\n      padding: 0.5rem;\n      box-shadow: 8px 0 15px 0 #00000026;\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    max-height: initial;\n    box-shadow: none;\n  }\n\n  @media (max-width: 767px) {\n    top: var(--header-height);\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  @Prop() showCount: boolean = false;\n  @Prop() offCanvasOverlay: boolean = false;\n\n  @State() activeFilters: number = 0;\n  @State() showMobileFilters: boolean = false;\n  @State() isMobile: boolean = false;\n  @State() offCanvasClasses: string = 'filtersDrawer__overlay';\n\n  mobileToggle: HTMLElement | null;\n  filtersDrawer: HTMLElement;\n\n  @Listen('jump-filterchange')\n  filterChangeHandler(event: CustomEvent) {\n    //set this.filter as this.filters[event.detail.name] = event.detail.value; even if not present\n    this.filters = { ...this.filters, [event.detail.name]: event.detail.values };\n    console.log('Received the custom filterChange event: ', this.filters);\n\n\n    //TODO: increment this.activeFilters\n  }\n\n  @Listen('resize', { target: 'window' })\n  handleResize() {\n    this.isMobile = window.innerWidth < this.mobileThreshold;\n  }\n\n  @Watch('showMobileFilters')\n  watchHandler(newValue: boolean, oldValue: boolean) {\n    if (newValue !== oldValue) {\n      if (newValue) {\n        this.mobileToggle?.setAttribute('aria-expanded', 'true');\n        this.filtersDrawer?.setAttribute('aria-hidden', 'false');\n        this.offCanvasClasses = 'filtersDrawer__overlay filtersDrawer__overlay--active';\n      } else {\n        this.mobileToggle?.setAttribute('aria-expanded', 'false');\n        this.filtersDrawer?.setAttribute('aria-hidden', 'true');\n        this.offCanvasClasses = 'filtersDrawer__overlay';\n      }\n    }\n  }\n\n  /**\n   * Get the active filters from the component\n   */\n  @Method()\n  async getFilters() {\n    return this.filters;\n  }\n\n  componentDidLoad() {\n    this.handleResize();\n  }\n\n  render() {\n    return (\n      <Host mobileFilters={this.showMobileFilters}>\n        {this.isMobile && <jump-button\n          ref={(el) => {\n            this.mobileToggle = el;\n          }}\n          buttonId={this.filterButtonIcon} variant={'primary'} outline\n          onClick={() => this.showMobileFilters = !this.showMobileFilters}>\n          <slot name=\"prefix\">\n            {this.filterButtonIcon &&\n              <jump-icon library=\"fa\" category=\"regular\" name={this.filterButtonIcon} size=\"small\"></jump-icon>}\n            {this.filterButtonLabel}\n          </slot>\n          <slot name=\"suffix\">\n            {this.activeFilters > 0 &&\n              <jump-badge label={this.activeFilters.toString()} variant=\"success\" soft dimension=\"dot\">1</jump-badge>}\n          </slot>\n        </jump-button>}\n\n        {this.offCanvasOverlay &&\n          <div class={this.offCanvasClasses}\n               onClick={() => this.showMobileFilters = false}></div>}\n\n        {<div\n          ref={(el) => {\n            this.filtersDrawer = el;\n          }}\n          class=\"filtersDrawer\" data-variant={this.direction}>\n          {!this.isMobile &&\n            <div class={'filtersDrawer__header'}>\n              <jump-icon class=\"small\" name={this.filterButtonIcon}></jump-icon>\n              <h3>{this.filterHeading}</h3>\n            </div>}\n          {this.isMobile && <jump-icon library=\"lucide\" name=\"x\" size=\"medium\" 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,otDACtB,MAAAC,EAAeD,E,MCMFE,EAAU,M,wCAE0B,W,mBACf,a,uBACI,S,sBACD,U,qBACD,I,sCAEL,M,sBACO,M,mBAEH,E,uBACK,M,cACT,M,sBACO,wB,CAMpC,mBAAAC,CAAoBC,GAElBC,KAAKC,QAAOC,OAAAC,OAAAD,OAAAC,OAAA,GAAQH,KAAKC,SAAO,CAAE,CAACF,EAAMK,OAAOC,MAAON,EAAMK,OAAOE,SACpEC,QAAQC,IAAI,2CAA4CR,KAAKC,Q,CAO/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,SAChDnB,KAAKsB,iBAAmB,uD,KACnB,EACLC,EAAAvB,KAAKkB,gBAAY,MAAAK,SAAA,SAAAA,EAAEJ,aAAa,gBAAiB,UACjDK,EAAAxB,KAAKqB,iBAAa,MAAAG,SAAA,SAAAA,EAAEL,aAAa,cAAe,QAChDnB,KAAKsB,iBAAmB,wB,GAS9B,gBAAMG,GACJ,OAAOzB,KAAKC,O,CAGd,gBAAAyB,GACE1B,KAAKS,c,CAGP,MAAAkB,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,cAAe/B,KAAKgC,mBACvBhC,KAAKU,UAAYkB,EAAA,eAAAE,IAAA,2CAChBG,IAAMC,IACJlC,KAAKkB,aAAegB,CAAE,EAExBC,SAAUnC,KAAKoC,iBAAkBC,QAAS,UAAWC,QAAO,KAC5DC,QAAS,IAAMvC,KAAKgC,mBAAqBhC,KAAKgC,mBAC9CJ,EAAA,QAAAE,IAAA,2CAAMzB,KAAK,UACRL,KAAKoC,kBACJR,EAAA,aAAAE,IAAA,2CAAWU,QAAQ,KAAKC,SAAS,UAAUpC,KAAML,KAAKoC,iBAAkBM,KAAK,UAC9E1C,KAAK2C,mBAERf,EAAA,QAAAE,IAAA,2CAAMzB,KAAK,UACRL,KAAK4C,cAAgB,GACpBhB,EAAA,cAAAE,IAAA,2CAAYe,MAAO7C,KAAK4C,cAAcE,WAAYT,QAAQ,UAAUU,KAAI,KAACC,UAAU,OAAK,OAI7FhD,KAAKiD,kBACJrB,EAAA,OAAAE,IAAA,2CAAKoB,MAAOlD,KAAKsB,iBACZiB,QAAS,IAAMvC,KAAKgC,kBAAoB,QAE9CJ,EAAA,OAAAE,IAAA,2CACCG,IAAMC,IACJlC,KAAKqB,cAAgBa,CAAE,EAEzBgB,MAAM,gBAAe,eAAelD,KAAKmD,YACvCnD,KAAKU,UACLkB,EAAA,OAAAE,IAAA,2CAAKoB,MAAO,yBACVtB,EAAA,aAAAE,IAAA,2CAAWoB,MAAM,QAAQ7C,KAAML,KAAKoC,mBACpCR,EAAA,MAAAE,IAAA,4CAAK9B,KAAKoD,gBAEbpD,KAAKU,UAAYkB,EAAA,aAAAE,IAAA,2CAAWU,QAAQ,SAASnC,KAAK,IAAIqC,KAAK,SAASG,MAAM,GAAGK,MAAO,uBACxDX,QAAS,IAAMvC,KAAKgC,kBAAoB,QACrEJ,EAAA,QAAAE,IAAA,8C"}

package/package.json

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