@jumpgroup/jump-design-system 0.3.27 → 0.3.28
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/jump-filter.cjs.entry.js +1 -1
- package/dist/cjs/jump-filter.cjs.entry.js.map +1 -1
- package/dist/collection/components/jump-filter/jump-filter.js +1 -1
- package/dist/collection/components/jump-filter/jump-filter.js.map +1 -1
- package/dist/components/jump-filter.js +8 -2
- package/dist/components/jump-filter.js.map +1 -1
- package/dist/esm/jump-filter.entry.js +1 -1
- package/dist/esm/jump-filter.entry.js.map +1 -1
- package/dist/jump-design-system/jump-design-system.esm.js +1 -1
- package/dist/jump-design-system/{p-ff5cab18.entry.js → p-fb02f386.entry.js} +2 -2
- package/dist/jump-design-system/p-fb02f386.entry.js.map +1 -0
- package/package.json +1 -1
- package/dist/jump-design-system/p-ff5cab18.entry.js.map +0 -1
|
@@ -53,7 +53,7 @@ const JumpFilter = class {
|
|
|
53
53
|
}
|
|
54
54
|
render() {
|
|
55
55
|
return (index.h(index.Host, { key: 'b45c2e4a0ed8985f709b5ef0cd6796c73f78080b', mobileFilters: this.showMobileFilters }, this.isMobile && index.h("jump-button", { key: 'a8bf5423d154fe3dc7c91bc12a379fc30ab85992', ref: (el) => { this.mobileToggle = el; }, buttonId: this.filterButtonIcon, variant: 'primary', outline: true, onClick: () => this.showMobileFilters = !this.showMobileFilters }, index.h("slot", { key: 'e9cdf515fe9d1f5f6c557f1b345ccaa5e75ed5ba', name: "prefix" }, this.filterButtonIcon &&
|
|
56
|
-
index.h("jump-
|
|
56
|
+
index.h("jump-badge", { key: 'c5ce28fa3bc0e85195e80ee77d6c21724b2c8590', label: "1", variant: "success", soft: true, dimension: "dot" }, this.filterButtonIcon), this.filterButtonLabel), index.h("slot", { key: '43d5a322cf0d0828b821abfb8bdfe14a9c2bf706', name: "suffix" }, this.activeFilters > 0 ? `(${this.activeFilters})` : '0')), index.h("div", { key: '7abdc1b83c1ecf2d507cc92d7034eaa089d3d4f4', ref: (el) => { this.filtersDrawer = el; }, class: "filtersDrawer", "data-variant": this.direction }, !this.isMobile &&
|
|
57
57
|
index.h("div", { key: 'e74ee758eb1f18afae3b35c4d01ada3883819474', class: 'filtersDrawer__header' }, index.h("jump-icon", { key: 'a9d1632b19d5f01ea3b471b09a1560bb5c8318fa', class: "small", name: this.filterButtonIcon }), index.h("h3", { key: '7447630022854d2ef9f4ec5d13a4b28661e834a5' }, this.filterHeading)), index.h("slot", { key: '06e9e689e54131c31c99bc79faa1c9bb483df084' }))));
|
|
58
58
|
}
|
|
59
59
|
static get watchers() { return {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"jump-filter.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,iuBAAiuB,CAAC;AACxvB,yBAAe,aAAa;;MCMf,UAAU;;;yBAE0B,UAAU;6BACzB,YAAY;iCACR,QAAQ;gCACT,SAAS;+BACV,GAAG;;6BAGJ,CAAC;iCACI,KAAK;wBACd,KAAK;;IAMlC,mBAAmB,CAAC,KAAkB;;QAEpC,IAAI,CAAC,OAAO,mCAAO,IAAI,CAAC,OAAO,KAAE,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC,MAAM,GAAC,CAAC;QAC3E,OAAO,CAAC,GAAG,CAAC,0CAA0C,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;;KAKvE;IAGD,YAAY;QACV,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC,UAAU,GAAG,IAAI,CAAC,eAAe,CAAC;KAC1D;IAGD,YAAY,CAAC,QAAiB,EAAE,QAAiB;;QAC/C,IAAI,QAAQ,KAAK,QAAQ,EAAE;YACzB,IAAI,QAAQ,EAAE;gBACZ,MAAA,IAAI,CAAC,YAAY,0CAAE,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;gBACzD,MAAA,IAAI,CAAC,aAAa,0CAAE,YAAY,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC;aAC1D;iBAAM;gBACL,MAAA,IAAI,CAAC,YAAY,0CAAE,YAAY,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;gBAC1D,MAAA,IAAI,CAAC,aAAa,0CAAE,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;aACzD;SACF;KACF;;;;IAMD,MAAM,UAAU;QACd,OAAO,IAAI,CAAC,OAAO,CAAC;KACrB;IAED,gBAAgB;QACd,IAAI,CAAC,YAAY,EAAE,CAAC;KACrB;IAED,MAAM;QACJ,QACEA,QAACC,UAAI,qDAAC,aAAa,EAAE,IAAI,CAAC,iBAAiB,IACxC,IAAI,CAAC,QAAQ,IAAID,0EAChB,GAAG,EAAE,CAAC,EAAE,OAAM,IAAI,CAAC,YAAY,GAAG,EAAE,CAAA,EAAC,EACrC,QAAQ,EAAE,IAAI,CAAC,gBAAgB,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,QAC5D,OAAO,EAAE,MAAM,IAAI,CAAC,iBAAiB,GAAG,CAAC,IAAI,CAAC,iBAAiB,IAC/DA,mEAAM,IAAI,EAAC,QAAQ,IAChB,IAAI,CAAC,gBAAgB;YACpBA,
|
|
1
|
+
{"file":"jump-filter.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,iuBAAiuB,CAAC;AACxvB,yBAAe,aAAa;;MCMf,UAAU;;;yBAE0B,UAAU;6BACzB,YAAY;iCACR,QAAQ;gCACT,SAAS;+BACV,GAAG;;6BAGJ,CAAC;iCACI,KAAK;wBACd,KAAK;;IAMlC,mBAAmB,CAAC,KAAkB;;QAEpC,IAAI,CAAC,OAAO,mCAAO,IAAI,CAAC,OAAO,KAAE,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC,MAAM,GAAC,CAAC;QAC3E,OAAO,CAAC,GAAG,CAAC,0CAA0C,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;;KAKvE;IAGD,YAAY;QACV,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC,UAAU,GAAG,IAAI,CAAC,eAAe,CAAC;KAC1D;IAGD,YAAY,CAAC,QAAiB,EAAE,QAAiB;;QAC/C,IAAI,QAAQ,KAAK,QAAQ,EAAE;YACzB,IAAI,QAAQ,EAAE;gBACZ,MAAA,IAAI,CAAC,YAAY,0CAAE,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;gBACzD,MAAA,IAAI,CAAC,aAAa,0CAAE,YAAY,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC;aAC1D;iBAAM;gBACL,MAAA,IAAI,CAAC,YAAY,0CAAE,YAAY,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;gBAC1D,MAAA,IAAI,CAAC,aAAa,0CAAE,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;aACzD;SACF;KACF;;;;IAMD,MAAM,UAAU;QACd,OAAO,IAAI,CAAC,OAAO,CAAC;KACrB;IAED,gBAAgB;QACd,IAAI,CAAC,YAAY,EAAE,CAAC;KACrB;IAED,MAAM;QACJ,QACEA,QAACC,UAAI,qDAAC,aAAa,EAAE,IAAI,CAAC,iBAAiB,IACxC,IAAI,CAAC,QAAQ,IAAID,0EAChB,GAAG,EAAE,CAAC,EAAE,OAAM,IAAI,CAAC,YAAY,GAAG,EAAE,CAAA,EAAC,EACrC,QAAQ,EAAE,IAAI,CAAC,gBAAgB,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,QAC5D,OAAO,EAAE,MAAM,IAAI,CAAC,iBAAiB,GAAG,CAAC,IAAI,CAAC,iBAAiB,IAC/DA,mEAAM,IAAI,EAAC,QAAQ,IAChB,IAAI,CAAC,gBAAgB;YACpBA,yEAAY,KAAK,EAAC,GAAG,EAAC,OAAO,EAAC,SAAS,EAAC,IAAI,QAAC,SAAS,EAAC,KAAK,IAAE,IAAI,CAAC,gBAAgB,CAAc,EAClG,IAAI,CAAC,iBAAiB,CAClB,EACPA,mEAAM,IAAI,EAAC,QAAQ,IAChB,IAAI,CAAC,aAAa,GAAG,CAAC,GAAG,IAAI,IAAI,CAAC,aAAa,GAAG,GAAG,GAAG,CACpD,CACK,EAEbA,kEACC,GAAG,EAAE,CAAC,EAAE,OAAM,IAAI,CAAC,aAAa,GAAG,EAAE,CAAA,EAAC,EACtC,KAAK,EAAC,eAAe,kBAAe,IAAI,CAAC,SAAS,IACjD,CAAC,IAAI,CAAC,QAAQ;YACfA,kEAAK,KAAK,EAAE,uBAAuB,IACjCA,wEAAW,KAAK,EAAC,OAAO,EAAC,IAAI,EAAE,IAAI,CAAC,gBAAgB,GAAc,EAClEA,mEAAK,IAAI,CAAC,aAAa,CAAM,CACzB,EACNA,oEAAa,CACT,CACD,EACP;KACH;;;;;;;;;","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 --bg-drawer: var(--bg-drawer, #fff);\n\n h3 {\n margin: 0;\n }\n}\n\n.filtersDrawer {\n position: fixed;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n left: -100vw;\n top: 0;\n height: --webkit-fill-available;\n transition: 0.3s all ease-in-out;\n background-color: var(--bg-drawer, #fff);\n padding: 1rem;\n width: 100%;\n max-width: 240px;\n box-shadow: 8px 0 15px 0 #00000026;\n z-index: 2;\n\n &[aria-hidden=\"false\"] {\n left: 0;\n transition: 0.3s all ease-in-out;\n }\n\n @media (min-width: 768px) { //md breakpoint tailwind\n position: relative;\n left: 0;\n height: auto;\n max-width: initial;\n box-shadow: none;\n }\n\n .filtersDrawer__header {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n gap: 0.5rem;\n }\n}\n","import { Component, Host, Prop, h, State, Listen, Method, Watch } from '@stencil/core';\n\n@Component({\n tag: 'jump-filter',\n styleUrl: 'jump-filter.scss',\n shadow: true,\n})\nexport class JumpFilter {\n\n @Prop() direction: 'horizontal' | 'vertical' = 'vertical';\n @Prop() filterHeading: string = 'Filtra per';\n @Prop() filterButtonLabel: string = 'Filtri';\n @Prop() filterButtonIcon: string = 'sliders';\n @Prop() mobileThreshold: number = 768;\n @Prop() filters: any;\n\n @State() activeFilters: number = 0;\n @State() showMobileFilters: boolean = false;\n @State() isMobile: boolean = false;\n\n mobileToggle: HTMLElement | null;\n filtersDrawer: HTMLElement;\n\n @Listen('jump-filterchange')\n filterChangeHandler(event: CustomEvent) {\n //set this.filter as this.filters[event.detail.name] = event.detail.value; even if not present\n this.filters = {...this.filters, [event.detail.name]: event.detail.values};\n console.log('Received the custom filterChange event: ', this.filters);\n\n\n\n //TODO: increment this.activeFilters\n }\n\n @Listen('resize', { target: 'window' })\n handleResize() {\n this.isMobile = window.innerWidth < this.mobileThreshold;\n }\n\n @Watch('showMobileFilters')\n watchHandler(newValue: boolean, oldValue: boolean) {\n if (newValue !== oldValue) {\n if (newValue) {\n this.mobileToggle?.setAttribute('aria-expanded', 'true');\n this.filtersDrawer?.setAttribute('aria-hidden', 'false');\n } else {\n this.mobileToggle?.setAttribute('aria-expanded', 'false');\n this.filtersDrawer?.setAttribute('aria-hidden', 'true');\n }\n }\n }\n\n /**\n * Get the active filters from the component\n */\n @Method()\n async getFilters() {\n return this.filters;\n }\n\n componentDidLoad(){\n this.handleResize();\n }\n\n render() {\n return (\n <Host mobileFilters={this.showMobileFilters}>\n {this.isMobile && <jump-button\n ref={(el) => {this.mobileToggle = el}}\n buttonId={this.filterButtonIcon} variant={'primary'} outline\n onClick={() => this.showMobileFilters = !this.showMobileFilters}>\n <slot name=\"prefix\">\n {this.filterButtonIcon &&\n <jump-badge label=\"1\" variant=\"success\" soft dimension=\"dot\">{this.filterButtonIcon}</jump-badge>}\n {this.filterButtonLabel}\n </slot>\n <slot name=\"suffix\">\n {this.activeFilters > 0 ? `(${this.activeFilters})` : '0'}\n </slot>\n </jump-button>}\n\n {<div\n ref={(el) => {this.filtersDrawer = el}}\n class=\"filtersDrawer\" data-variant={this.direction}>\n {!this.isMobile &&\n <div class={'filtersDrawer__header'}>\n <jump-icon class=\"small\" name={this.filterButtonIcon}></jump-icon>\n <h3>{this.filterHeading}</h3>\n </div>}\n <slot></slot>\n </div>}\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -44,7 +44,7 @@ export class JumpFilter {
|
|
|
44
44
|
}
|
|
45
45
|
render() {
|
|
46
46
|
return (h(Host, { key: 'b45c2e4a0ed8985f709b5ef0cd6796c73f78080b', mobileFilters: this.showMobileFilters }, this.isMobile && h("jump-button", { key: 'a8bf5423d154fe3dc7c91bc12a379fc30ab85992', ref: (el) => { this.mobileToggle = el; }, buttonId: this.filterButtonIcon, variant: 'primary', outline: true, onClick: () => this.showMobileFilters = !this.showMobileFilters }, h("slot", { key: 'e9cdf515fe9d1f5f6c557f1b345ccaa5e75ed5ba', name: "prefix" }, this.filterButtonIcon &&
|
|
47
|
-
h("jump-
|
|
47
|
+
h("jump-badge", { key: 'c5ce28fa3bc0e85195e80ee77d6c21724b2c8590', label: "1", variant: "success", soft: true, dimension: "dot" }, this.filterButtonIcon), this.filterButtonLabel), h("slot", { key: '43d5a322cf0d0828b821abfb8bdfe14a9c2bf706', name: "suffix" }, this.activeFilters > 0 ? `(${this.activeFilters})` : '0')), h("div", { key: '7abdc1b83c1ecf2d507cc92d7034eaa089d3d4f4', ref: (el) => { this.filtersDrawer = el; }, class: "filtersDrawer", "data-variant": this.direction }, !this.isMobile &&
|
|
48
48
|
h("div", { key: 'e74ee758eb1f18afae3b35c4d01ada3883819474', class: 'filtersDrawer__header' }, h("jump-icon", { key: 'a9d1632b19d5f01ea3b471b09a1560bb5c8318fa', class: "small", name: this.filterButtonIcon }), h("h3", { key: '7447630022854d2ef9f4ec5d13a4b28661e834a5' }, this.filterHeading)), h("slot", { key: '06e9e689e54131c31c99bc79faa1c9bb483df084' }))));
|
|
49
49
|
}
|
|
50
50
|
static get is() { return "jump-filter"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"jump-filter.js","sourceRoot":"","sources":["../../../src/components/jump-filter/jump-filter.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAOvF,MAAM,OAAO,UAAU;;yBAE0B,UAAU;6BACzB,YAAY;iCACR,QAAQ;gCACT,SAAS;+BACV,GAAG;;6BAGJ,CAAC;iCACI,KAAK;wBACd,KAAK;;IAMlC,mBAAmB,CAAC,KAAkB;QACpC,8FAA8F;QAC9F,IAAI,CAAC,OAAO,mCAAO,IAAI,CAAC,OAAO,KAAE,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,GAAC,CAAC;QAC3E,OAAO,CAAC,GAAG,CAAC,0CAA0C,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QAItE,oCAAoC;IACtC,CAAC;IAGD,YAAY;QACV,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC,UAAU,GAAG,IAAI,CAAC,eAAe,CAAC;IAC3D,CAAC;IAGD,YAAY,CAAC,QAAiB,EAAE,QAAiB;;QAC/C,IAAI,QAAQ,KAAK,QAAQ,EAAE,CAAC;YAC1B,IAAI,QAAQ,EAAE,CAAC;gBACb,MAAA,IAAI,CAAC,YAAY,0CAAE,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;gBACzD,MAAA,IAAI,CAAC,aAAa,0CAAE,YAAY,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC;YAC3D,CAAC;iBAAM,CAAC;gBACN,MAAA,IAAI,CAAC,YAAY,0CAAE,YAAY,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;gBAC1D,MAAA,IAAI,CAAC,aAAa,0CAAE,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;YAC1D,CAAC;QACH,CAAC;IACH,CAAC;IAED;;OAEG;IAEH,KAAK,CAAC,UAAU;QACd,OAAO,IAAI,CAAC,OAAO,CAAC;IACtB,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,aAAa,EAAE,IAAI,CAAC,iBAAiB;YACxC,IAAI,CAAC,QAAQ,IAAI,oEAChB,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,GAAE,IAAI,CAAC,YAAY,GAAG,EAAE,CAAA,CAAA,CAAC,EACrC,QAAQ,EAAE,IAAI,CAAC,gBAAgB,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,QAC5D,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,iBAAiB,GAAG,CAAC,IAAI,CAAC,iBAAiB;gBAC/D,6DAAM,IAAI,EAAC,QAAQ;oBAChB,IAAI,CAAC,gBAAgB;wBACpB,
|
|
1
|
+
{"version":3,"file":"jump-filter.js","sourceRoot":"","sources":["../../../src/components/jump-filter/jump-filter.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAOvF,MAAM,OAAO,UAAU;;yBAE0B,UAAU;6BACzB,YAAY;iCACR,QAAQ;gCACT,SAAS;+BACV,GAAG;;6BAGJ,CAAC;iCACI,KAAK;wBACd,KAAK;;IAMlC,mBAAmB,CAAC,KAAkB;QACpC,8FAA8F;QAC9F,IAAI,CAAC,OAAO,mCAAO,IAAI,CAAC,OAAO,KAAE,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,GAAC,CAAC;QAC3E,OAAO,CAAC,GAAG,CAAC,0CAA0C,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QAItE,oCAAoC;IACtC,CAAC;IAGD,YAAY;QACV,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC,UAAU,GAAG,IAAI,CAAC,eAAe,CAAC;IAC3D,CAAC;IAGD,YAAY,CAAC,QAAiB,EAAE,QAAiB;;QAC/C,IAAI,QAAQ,KAAK,QAAQ,EAAE,CAAC;YAC1B,IAAI,QAAQ,EAAE,CAAC;gBACb,MAAA,IAAI,CAAC,YAAY,0CAAE,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;gBACzD,MAAA,IAAI,CAAC,aAAa,0CAAE,YAAY,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC;YAC3D,CAAC;iBAAM,CAAC;gBACN,MAAA,IAAI,CAAC,YAAY,0CAAE,YAAY,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;gBAC1D,MAAA,IAAI,CAAC,aAAa,0CAAE,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;YAC1D,CAAC;QACH,CAAC;IACH,CAAC;IAED;;OAEG;IAEH,KAAK,CAAC,UAAU;QACd,OAAO,IAAI,CAAC,OAAO,CAAC;IACtB,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,aAAa,EAAE,IAAI,CAAC,iBAAiB;YACxC,IAAI,CAAC,QAAQ,IAAI,oEAChB,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,GAAE,IAAI,CAAC,YAAY,GAAG,EAAE,CAAA,CAAA,CAAC,EACrC,QAAQ,EAAE,IAAI,CAAC,gBAAgB,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,QAC5D,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,iBAAiB,GAAG,CAAC,IAAI,CAAC,iBAAiB;gBAC/D,6DAAM,IAAI,EAAC,QAAQ;oBAChB,IAAI,CAAC,gBAAgB;wBACpB,mEAAY,KAAK,EAAC,GAAG,EAAC,OAAO,EAAC,SAAS,EAAC,IAAI,QAAC,SAAS,EAAC,KAAK,IAAE,IAAI,CAAC,gBAAgB,CAAc;oBAClG,IAAI,CAAC,iBAAiB,CAClB;gBACP,6DAAM,IAAI,EAAC,QAAQ,IAChB,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,CAAC,GAAG,CACpD,CACK;YAEb,4DACC,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,GAAE,IAAI,CAAC,aAAa,GAAG,EAAE,CAAA,CAAA,CAAC,EACtC,KAAK,EAAC,eAAe,kBAAe,IAAI,CAAC,SAAS;gBACjD,CAAC,IAAI,CAAC,QAAQ;oBACf,4DAAK,KAAK,EAAE,uBAAuB;wBACjC,kEAAW,KAAK,EAAC,OAAO,EAAC,IAAI,EAAE,IAAI,CAAC,gBAAgB,GAAc;wBAClE,6DAAK,IAAI,CAAC,aAAa,CAAM,CACzB;gBACN,8DAAa,CACT,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h, State, Listen, Method, Watch } from '@stencil/core';\n\n@Component({\n tag: 'jump-filter',\n styleUrl: 'jump-filter.scss',\n shadow: true,\n})\nexport class JumpFilter {\n\n @Prop() direction: 'horizontal' | 'vertical' = 'vertical';\n @Prop() filterHeading: string = 'Filtra per';\n @Prop() filterButtonLabel: string = 'Filtri';\n @Prop() filterButtonIcon: string = 'sliders';\n @Prop() mobileThreshold: number = 768;\n @Prop() filters: any;\n\n @State() activeFilters: number = 0;\n @State() showMobileFilters: boolean = false;\n @State() isMobile: boolean = false;\n\n mobileToggle: HTMLElement | null;\n filtersDrawer: HTMLElement;\n\n @Listen('jump-filterchange')\n filterChangeHandler(event: CustomEvent) {\n //set this.filter as this.filters[event.detail.name] = event.detail.value; even if not present\n this.filters = {...this.filters, [event.detail.name]: event.detail.values};\n console.log('Received the custom filterChange event: ', this.filters);\n\n\n\n //TODO: increment this.activeFilters\n }\n\n @Listen('resize', { target: 'window' })\n handleResize() {\n this.isMobile = window.innerWidth < this.mobileThreshold;\n }\n\n @Watch('showMobileFilters')\n watchHandler(newValue: boolean, oldValue: boolean) {\n if (newValue !== oldValue) {\n if (newValue) {\n this.mobileToggle?.setAttribute('aria-expanded', 'true');\n this.filtersDrawer?.setAttribute('aria-hidden', 'false');\n } else {\n this.mobileToggle?.setAttribute('aria-expanded', 'false');\n this.filtersDrawer?.setAttribute('aria-hidden', 'true');\n }\n }\n }\n\n /**\n * Get the active filters from the component\n */\n @Method()\n async getFilters() {\n return this.filters;\n }\n\n componentDidLoad(){\n this.handleResize();\n }\n\n render() {\n return (\n <Host mobileFilters={this.showMobileFilters}>\n {this.isMobile && <jump-button\n ref={(el) => {this.mobileToggle = el}}\n buttonId={this.filterButtonIcon} variant={'primary'} outline\n onClick={() => this.showMobileFilters = !this.showMobileFilters}>\n <slot name=\"prefix\">\n {this.filterButtonIcon &&\n <jump-badge label=\"1\" variant=\"success\" soft dimension=\"dot\">{this.filterButtonIcon}</jump-badge>}\n {this.filterButtonLabel}\n </slot>\n <slot name=\"suffix\">\n {this.activeFilters > 0 ? `(${this.activeFilters})` : '0'}\n </slot>\n </jump-button>}\n\n {<div\n ref={(el) => {this.filtersDrawer = el}}\n class=\"filtersDrawer\" data-variant={this.direction}>\n {!this.isMobile &&\n <div class={'filtersDrawer__header'}>\n <jump-icon class=\"small\" name={this.filterButtonIcon}></jump-icon>\n <h3>{this.filterHeading}</h3>\n </div>}\n <slot></slot>\n </div>}\n </Host>\n );\n }\n}\n"]}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
|
|
2
|
+
import { d as defineCustomElement$4 } from './jump-badge2.js';
|
|
2
3
|
import { d as defineCustomElement$3 } from './jump-button2.js';
|
|
3
4
|
import { d as defineCustomElement$2 } from './jump-icon2.js';
|
|
4
5
|
|
|
@@ -53,7 +54,7 @@ const JumpFilter$1 = /*@__PURE__*/ proxyCustomElement(class JumpFilter extends H
|
|
|
53
54
|
}
|
|
54
55
|
render() {
|
|
55
56
|
return (h(Host, { key: 'b45c2e4a0ed8985f709b5ef0cd6796c73f78080b', mobileFilters: this.showMobileFilters }, this.isMobile && h("jump-button", { key: 'a8bf5423d154fe3dc7c91bc12a379fc30ab85992', ref: (el) => { this.mobileToggle = el; }, buttonId: this.filterButtonIcon, variant: 'primary', outline: true, onClick: () => this.showMobileFilters = !this.showMobileFilters }, h("slot", { key: 'e9cdf515fe9d1f5f6c557f1b345ccaa5e75ed5ba', name: "prefix" }, this.filterButtonIcon &&
|
|
56
|
-
h("jump-
|
|
57
|
+
h("jump-badge", { key: 'c5ce28fa3bc0e85195e80ee77d6c21724b2c8590', label: "1", variant: "success", soft: true, dimension: "dot" }, this.filterButtonIcon), this.filterButtonLabel), h("slot", { key: '43d5a322cf0d0828b821abfb8bdfe14a9c2bf706', name: "suffix" }, this.activeFilters > 0 ? `(${this.activeFilters})` : '0')), h("div", { key: '7abdc1b83c1ecf2d507cc92d7034eaa089d3d4f4', ref: (el) => { this.filtersDrawer = el; }, class: "filtersDrawer", "data-variant": this.direction }, !this.isMobile &&
|
|
57
58
|
h("div", { key: 'e74ee758eb1f18afae3b35c4d01ada3883819474', class: 'filtersDrawer__header' }, h("jump-icon", { key: 'a9d1632b19d5f01ea3b471b09a1560bb5c8318fa', class: "small", name: this.filterButtonIcon }), h("h3", { key: '7447630022854d2ef9f4ec5d13a4b28661e834a5' }, this.filterHeading)), h("slot", { key: '06e9e689e54131c31c99bc79faa1c9bb483df084' }))));
|
|
58
59
|
}
|
|
59
60
|
static get watchers() { return {
|
|
@@ -78,13 +79,18 @@ function defineCustomElement$1() {
|
|
|
78
79
|
if (typeof customElements === "undefined") {
|
|
79
80
|
return;
|
|
80
81
|
}
|
|
81
|
-
const components = ["jump-filter", "jump-button", "jump-icon"];
|
|
82
|
+
const components = ["jump-filter", "jump-badge", "jump-button", "jump-icon"];
|
|
82
83
|
components.forEach(tagName => { switch (tagName) {
|
|
83
84
|
case "jump-filter":
|
|
84
85
|
if (!customElements.get(tagName)) {
|
|
85
86
|
customElements.define(tagName, JumpFilter$1);
|
|
86
87
|
}
|
|
87
88
|
break;
|
|
89
|
+
case "jump-badge":
|
|
90
|
+
if (!customElements.get(tagName)) {
|
|
91
|
+
defineCustomElement$4();
|
|
92
|
+
}
|
|
93
|
+
break;
|
|
88
94
|
case "jump-button":
|
|
89
95
|
if (!customElements.get(tagName)) {
|
|
90
96
|
defineCustomElement$3();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"jump-filter.js","mappings":"
|
|
1
|
+
{"file":"jump-filter.js","mappings":";;;;;AAAA,MAAM,aAAa,GAAG,iuBAAiuB,CAAC;AACxvB,yBAAe,aAAa;;MCMfA,YAAU;;;;;yBAE0B,UAAU;6BACzB,YAAY;iCACR,QAAQ;gCACT,SAAS;+BACV,GAAG;;6BAGJ,CAAC;iCACI,KAAK;wBACd,KAAK;;IAMlC,mBAAmB,CAAC,KAAkB;;QAEpC,IAAI,CAAC,OAAO,mCAAO,IAAI,CAAC,OAAO,KAAE,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC,MAAM,GAAC,CAAC;QAC3E,OAAO,CAAC,GAAG,CAAC,0CAA0C,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;;KAKvE;IAGD,YAAY;QACV,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC,UAAU,GAAG,IAAI,CAAC,eAAe,CAAC;KAC1D;IAGD,YAAY,CAAC,QAAiB,EAAE,QAAiB;;QAC/C,IAAI,QAAQ,KAAK,QAAQ,EAAE;YACzB,IAAI,QAAQ,EAAE;gBACZ,MAAA,IAAI,CAAC,YAAY,0CAAE,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;gBACzD,MAAA,IAAI,CAAC,aAAa,0CAAE,YAAY,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC;aAC1D;iBAAM;gBACL,MAAA,IAAI,CAAC,YAAY,0CAAE,YAAY,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;gBAC1D,MAAA,IAAI,CAAC,aAAa,0CAAE,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;aACzD;SACF;KACF;;;;IAMD,MAAM,UAAU;QACd,OAAO,IAAI,CAAC,OAAO,CAAC;KACrB;IAED,gBAAgB;QACd,IAAI,CAAC,YAAY,EAAE,CAAC;KACrB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,aAAa,EAAE,IAAI,CAAC,iBAAiB,IACxC,IAAI,CAAC,QAAQ,IAAI,oEAChB,GAAG,EAAE,CAAC,EAAE,OAAM,IAAI,CAAC,YAAY,GAAG,EAAE,CAAA,EAAC,EACrC,QAAQ,EAAE,IAAI,CAAC,gBAAgB,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,QAC5D,OAAO,EAAE,MAAM,IAAI,CAAC,iBAAiB,GAAG,CAAC,IAAI,CAAC,iBAAiB,IAC/D,6DAAM,IAAI,EAAC,QAAQ,IAChB,IAAI,CAAC,gBAAgB;YACpB,mEAAY,KAAK,EAAC,GAAG,EAAC,OAAO,EAAC,SAAS,EAAC,IAAI,QAAC,SAAS,EAAC,KAAK,IAAE,IAAI,CAAC,gBAAgB,CAAc,EAClG,IAAI,CAAC,iBAAiB,CAClB,EACP,6DAAM,IAAI,EAAC,QAAQ,IAChB,IAAI,CAAC,aAAa,GAAG,CAAC,GAAG,IAAI,IAAI,CAAC,aAAa,GAAG,GAAG,GAAG,CACpD,CACK,EAEb,4DACC,GAAG,EAAE,CAAC,EAAE,OAAM,IAAI,CAAC,aAAa,GAAG,EAAE,CAAA,EAAC,EACtC,KAAK,EAAC,eAAe,kBAAe,IAAI,CAAC,SAAS,IACjD,CAAC,IAAI,CAAC,QAAQ;YACf,4DAAK,KAAK,EAAE,uBAAuB,IACjC,kEAAW,KAAK,EAAC,OAAO,EAAC,IAAI,EAAE,IAAI,CAAC,gBAAgB,GAAc,EAClE,6DAAK,IAAI,CAAC,aAAa,CAAM,CACzB,EACN,8DAAa,CACT,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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 --bg-drawer: var(--bg-drawer, #fff);\n\n h3 {\n margin: 0;\n }\n}\n\n.filtersDrawer {\n position: fixed;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n left: -100vw;\n top: 0;\n height: --webkit-fill-available;\n transition: 0.3s all ease-in-out;\n background-color: var(--bg-drawer, #fff);\n padding: 1rem;\n width: 100%;\n max-width: 240px;\n box-shadow: 8px 0 15px 0 #00000026;\n z-index: 2;\n\n &[aria-hidden=\"false\"] {\n left: 0;\n transition: 0.3s all ease-in-out;\n }\n\n @media (min-width: 768px) { //md breakpoint tailwind\n position: relative;\n left: 0;\n height: auto;\n max-width: initial;\n box-shadow: none;\n }\n\n .filtersDrawer__header {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n gap: 0.5rem;\n }\n}\n","import { Component, Host, Prop, h, State, Listen, Method, Watch } from '@stencil/core';\n\n@Component({\n tag: 'jump-filter',\n styleUrl: 'jump-filter.scss',\n shadow: true,\n})\nexport class JumpFilter {\n\n @Prop() direction: 'horizontal' | 'vertical' = 'vertical';\n @Prop() filterHeading: string = 'Filtra per';\n @Prop() filterButtonLabel: string = 'Filtri';\n @Prop() filterButtonIcon: string = 'sliders';\n @Prop() mobileThreshold: number = 768;\n @Prop() filters: any;\n\n @State() activeFilters: number = 0;\n @State() showMobileFilters: boolean = false;\n @State() isMobile: boolean = false;\n\n mobileToggle: HTMLElement | null;\n filtersDrawer: HTMLElement;\n\n @Listen('jump-filterchange')\n filterChangeHandler(event: CustomEvent) {\n //set this.filter as this.filters[event.detail.name] = event.detail.value; even if not present\n this.filters = {...this.filters, [event.detail.name]: event.detail.values};\n console.log('Received the custom filterChange event: ', this.filters);\n\n\n\n //TODO: increment this.activeFilters\n }\n\n @Listen('resize', { target: 'window' })\n handleResize() {\n this.isMobile = window.innerWidth < this.mobileThreshold;\n }\n\n @Watch('showMobileFilters')\n watchHandler(newValue: boolean, oldValue: boolean) {\n if (newValue !== oldValue) {\n if (newValue) {\n this.mobileToggle?.setAttribute('aria-expanded', 'true');\n this.filtersDrawer?.setAttribute('aria-hidden', 'false');\n } else {\n this.mobileToggle?.setAttribute('aria-expanded', 'false');\n this.filtersDrawer?.setAttribute('aria-hidden', 'true');\n }\n }\n }\n\n /**\n * Get the active filters from the component\n */\n @Method()\n async getFilters() {\n return this.filters;\n }\n\n componentDidLoad(){\n this.handleResize();\n }\n\n render() {\n return (\n <Host mobileFilters={this.showMobileFilters}>\n {this.isMobile && <jump-button\n ref={(el) => {this.mobileToggle = el}}\n buttonId={this.filterButtonIcon} variant={'primary'} outline\n onClick={() => this.showMobileFilters = !this.showMobileFilters}>\n <slot name=\"prefix\">\n {this.filterButtonIcon &&\n <jump-badge label=\"1\" variant=\"success\" soft dimension=\"dot\">{this.filterButtonIcon}</jump-badge>}\n {this.filterButtonLabel}\n </slot>\n <slot name=\"suffix\">\n {this.activeFilters > 0 ? `(${this.activeFilters})` : '0'}\n </slot>\n </jump-button>}\n\n {<div\n ref={(el) => {this.filtersDrawer = el}}\n class=\"filtersDrawer\" data-variant={this.direction}>\n {!this.isMobile &&\n <div class={'filtersDrawer__header'}>\n <jump-icon class=\"small\" name={this.filterButtonIcon}></jump-icon>\n <h3>{this.filterHeading}</h3>\n </div>}\n <slot></slot>\n </div>}\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -49,7 +49,7 @@ const JumpFilter = class {
|
|
|
49
49
|
}
|
|
50
50
|
render() {
|
|
51
51
|
return (h(Host, { key: 'b45c2e4a0ed8985f709b5ef0cd6796c73f78080b', mobileFilters: this.showMobileFilters }, this.isMobile && h("jump-button", { key: 'a8bf5423d154fe3dc7c91bc12a379fc30ab85992', ref: (el) => { this.mobileToggle = el; }, buttonId: this.filterButtonIcon, variant: 'primary', outline: true, onClick: () => this.showMobileFilters = !this.showMobileFilters }, h("slot", { key: 'e9cdf515fe9d1f5f6c557f1b345ccaa5e75ed5ba', name: "prefix" }, this.filterButtonIcon &&
|
|
52
|
-
h("jump-
|
|
52
|
+
h("jump-badge", { key: 'c5ce28fa3bc0e85195e80ee77d6c21724b2c8590', label: "1", variant: "success", soft: true, dimension: "dot" }, this.filterButtonIcon), this.filterButtonLabel), h("slot", { key: '43d5a322cf0d0828b821abfb8bdfe14a9c2bf706', name: "suffix" }, this.activeFilters > 0 ? `(${this.activeFilters})` : '0')), h("div", { key: '7abdc1b83c1ecf2d507cc92d7034eaa089d3d4f4', ref: (el) => { this.filtersDrawer = el; }, class: "filtersDrawer", "data-variant": this.direction }, !this.isMobile &&
|
|
53
53
|
h("div", { key: 'e74ee758eb1f18afae3b35c4d01ada3883819474', class: 'filtersDrawer__header' }, h("jump-icon", { key: 'a9d1632b19d5f01ea3b471b09a1560bb5c8318fa', class: "small", name: this.filterButtonIcon }), h("h3", { key: '7447630022854d2ef9f4ec5d13a4b28661e834a5' }, this.filterHeading)), h("slot", { key: '06e9e689e54131c31c99bc79faa1c9bb483df084' }))));
|
|
54
54
|
}
|
|
55
55
|
static get watchers() { return {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"jump-filter.entry.js","mappings":";;AAAA,MAAM,aAAa,GAAG,iuBAAiuB,CAAC;AACxvB,yBAAe,aAAa;;MCMf,UAAU;;;yBAE0B,UAAU;6BACzB,YAAY;iCACR,QAAQ;gCACT,SAAS;+BACV,GAAG;;6BAGJ,CAAC;iCACI,KAAK;wBACd,KAAK;;IAMlC,mBAAmB,CAAC,KAAkB;;QAEpC,IAAI,CAAC,OAAO,mCAAO,IAAI,CAAC,OAAO,KAAE,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC,MAAM,GAAC,CAAC;QAC3E,OAAO,CAAC,GAAG,CAAC,0CAA0C,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;;KAKvE;IAGD,YAAY;QACV,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC,UAAU,GAAG,IAAI,CAAC,eAAe,CAAC;KAC1D;IAGD,YAAY,CAAC,QAAiB,EAAE,QAAiB;;QAC/C,IAAI,QAAQ,KAAK,QAAQ,EAAE;YACzB,IAAI,QAAQ,EAAE;gBACZ,MAAA,IAAI,CAAC,YAAY,0CAAE,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;gBACzD,MAAA,IAAI,CAAC,aAAa,0CAAE,YAAY,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC;aAC1D;iBAAM;gBACL,MAAA,IAAI,CAAC,YAAY,0CAAE,YAAY,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;gBAC1D,MAAA,IAAI,CAAC,aAAa,0CAAE,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;aACzD;SACF;KACF;;;;IAMD,MAAM,UAAU;QACd,OAAO,IAAI,CAAC,OAAO,CAAC;KACrB;IAED,gBAAgB;QACd,IAAI,CAAC,YAAY,EAAE,CAAC;KACrB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,aAAa,EAAE,IAAI,CAAC,iBAAiB,IACxC,IAAI,CAAC,QAAQ,IAAI,oEAChB,GAAG,EAAE,CAAC,EAAE,OAAM,IAAI,CAAC,YAAY,GAAG,EAAE,CAAA,EAAC,EACrC,QAAQ,EAAE,IAAI,CAAC,gBAAgB,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,QAC5D,OAAO,EAAE,MAAM,IAAI,CAAC,iBAAiB,GAAG,CAAC,IAAI,CAAC,iBAAiB,IAC/D,6DAAM,IAAI,EAAC,QAAQ,IAChB,IAAI,CAAC,gBAAgB;YACpB,
|
|
1
|
+
{"file":"jump-filter.entry.js","mappings":";;AAAA,MAAM,aAAa,GAAG,iuBAAiuB,CAAC;AACxvB,yBAAe,aAAa;;MCMf,UAAU;;;yBAE0B,UAAU;6BACzB,YAAY;iCACR,QAAQ;gCACT,SAAS;+BACV,GAAG;;6BAGJ,CAAC;iCACI,KAAK;wBACd,KAAK;;IAMlC,mBAAmB,CAAC,KAAkB;;QAEpC,IAAI,CAAC,OAAO,mCAAO,IAAI,CAAC,OAAO,KAAE,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC,MAAM,GAAC,CAAC;QAC3E,OAAO,CAAC,GAAG,CAAC,0CAA0C,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;;KAKvE;IAGD,YAAY;QACV,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC,UAAU,GAAG,IAAI,CAAC,eAAe,CAAC;KAC1D;IAGD,YAAY,CAAC,QAAiB,EAAE,QAAiB;;QAC/C,IAAI,QAAQ,KAAK,QAAQ,EAAE;YACzB,IAAI,QAAQ,EAAE;gBACZ,MAAA,IAAI,CAAC,YAAY,0CAAE,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;gBACzD,MAAA,IAAI,CAAC,aAAa,0CAAE,YAAY,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC;aAC1D;iBAAM;gBACL,MAAA,IAAI,CAAC,YAAY,0CAAE,YAAY,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;gBAC1D,MAAA,IAAI,CAAC,aAAa,0CAAE,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;aACzD;SACF;KACF;;;;IAMD,MAAM,UAAU;QACd,OAAO,IAAI,CAAC,OAAO,CAAC;KACrB;IAED,gBAAgB;QACd,IAAI,CAAC,YAAY,EAAE,CAAC;KACrB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,aAAa,EAAE,IAAI,CAAC,iBAAiB,IACxC,IAAI,CAAC,QAAQ,IAAI,oEAChB,GAAG,EAAE,CAAC,EAAE,OAAM,IAAI,CAAC,YAAY,GAAG,EAAE,CAAA,EAAC,EACrC,QAAQ,EAAE,IAAI,CAAC,gBAAgB,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,QAC5D,OAAO,EAAE,MAAM,IAAI,CAAC,iBAAiB,GAAG,CAAC,IAAI,CAAC,iBAAiB,IAC/D,6DAAM,IAAI,EAAC,QAAQ,IAChB,IAAI,CAAC,gBAAgB;YACpB,mEAAY,KAAK,EAAC,GAAG,EAAC,OAAO,EAAC,SAAS,EAAC,IAAI,QAAC,SAAS,EAAC,KAAK,IAAE,IAAI,CAAC,gBAAgB,CAAc,EAClG,IAAI,CAAC,iBAAiB,CAClB,EACP,6DAAM,IAAI,EAAC,QAAQ,IAChB,IAAI,CAAC,aAAa,GAAG,CAAC,GAAG,IAAI,IAAI,CAAC,aAAa,GAAG,GAAG,GAAG,CACpD,CACK,EAEb,4DACC,GAAG,EAAE,CAAC,EAAE,OAAM,IAAI,CAAC,aAAa,GAAG,EAAE,CAAA,EAAC,EACtC,KAAK,EAAC,eAAe,kBAAe,IAAI,CAAC,SAAS,IACjD,CAAC,IAAI,CAAC,QAAQ;YACf,4DAAK,KAAK,EAAE,uBAAuB,IACjC,kEAAW,KAAK,EAAC,OAAO,EAAC,IAAI,EAAE,IAAI,CAAC,gBAAgB,GAAc,EAClE,6DAAK,IAAI,CAAC,aAAa,CAAM,CACzB,EACN,8DAAa,CACT,CACD,EACP;KACH;;;;;;;;;","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 --bg-drawer: var(--bg-drawer, #fff);\n\n h3 {\n margin: 0;\n }\n}\n\n.filtersDrawer {\n position: fixed;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n left: -100vw;\n top: 0;\n height: --webkit-fill-available;\n transition: 0.3s all ease-in-out;\n background-color: var(--bg-drawer, #fff);\n padding: 1rem;\n width: 100%;\n max-width: 240px;\n box-shadow: 8px 0 15px 0 #00000026;\n z-index: 2;\n\n &[aria-hidden=\"false\"] {\n left: 0;\n transition: 0.3s all ease-in-out;\n }\n\n @media (min-width: 768px) { //md breakpoint tailwind\n position: relative;\n left: 0;\n height: auto;\n max-width: initial;\n box-shadow: none;\n }\n\n .filtersDrawer__header {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n gap: 0.5rem;\n }\n}\n","import { Component, Host, Prop, h, State, Listen, Method, Watch } from '@stencil/core';\n\n@Component({\n tag: 'jump-filter',\n styleUrl: 'jump-filter.scss',\n shadow: true,\n})\nexport class JumpFilter {\n\n @Prop() direction: 'horizontal' | 'vertical' = 'vertical';\n @Prop() filterHeading: string = 'Filtra per';\n @Prop() filterButtonLabel: string = 'Filtri';\n @Prop() filterButtonIcon: string = 'sliders';\n @Prop() mobileThreshold: number = 768;\n @Prop() filters: any;\n\n @State() activeFilters: number = 0;\n @State() showMobileFilters: boolean = false;\n @State() isMobile: boolean = false;\n\n mobileToggle: HTMLElement | null;\n filtersDrawer: HTMLElement;\n\n @Listen('jump-filterchange')\n filterChangeHandler(event: CustomEvent) {\n //set this.filter as this.filters[event.detail.name] = event.detail.value; even if not present\n this.filters = {...this.filters, [event.detail.name]: event.detail.values};\n console.log('Received the custom filterChange event: ', this.filters);\n\n\n\n //TODO: increment this.activeFilters\n }\n\n @Listen('resize', { target: 'window' })\n handleResize() {\n this.isMobile = window.innerWidth < this.mobileThreshold;\n }\n\n @Watch('showMobileFilters')\n watchHandler(newValue: boolean, oldValue: boolean) {\n if (newValue !== oldValue) {\n if (newValue) {\n this.mobileToggle?.setAttribute('aria-expanded', 'true');\n this.filtersDrawer?.setAttribute('aria-hidden', 'false');\n } else {\n this.mobileToggle?.setAttribute('aria-expanded', 'false');\n this.filtersDrawer?.setAttribute('aria-hidden', 'true');\n }\n }\n }\n\n /**\n * Get the active filters from the component\n */\n @Method()\n async getFilters() {\n return this.filters;\n }\n\n componentDidLoad(){\n this.handleResize();\n }\n\n render() {\n return (\n <Host mobileFilters={this.showMobileFilters}>\n {this.isMobile && <jump-button\n ref={(el) => {this.mobileToggle = el}}\n buttonId={this.filterButtonIcon} variant={'primary'} outline\n onClick={() => this.showMobileFilters = !this.showMobileFilters}>\n <slot name=\"prefix\">\n {this.filterButtonIcon &&\n <jump-badge label=\"1\" variant=\"success\" soft dimension=\"dot\">{this.filterButtonIcon}</jump-badge>}\n {this.filterButtonLabel}\n </slot>\n <slot name=\"suffix\">\n {this.activeFilters > 0 ? `(${this.activeFilters})` : '0'}\n </slot>\n </jump-button>}\n\n {<div\n ref={(el) => {this.filtersDrawer = el}}\n class=\"filtersDrawer\" data-variant={this.direction}>\n {!this.isMobile &&\n <div class={'filtersDrawer__header'}>\n <jump-icon class=\"small\" name={this.filterButtonIcon}></jump-icon>\n <h3>{this.filterHeading}</h3>\n </div>}\n <slot></slot>\n </div>}\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,b as t}from"./p-d4c681a4.js";export{s as setNonce}from"./p-d4c681a4.js";import{g as a}from"./p-e1255160.js";var i=()=>{const t=import.meta.url;const a={};if(t!==""){a.resourcesUrl=new URL(".",t).href}return e(a)};i().then((async e=>{await a();return t([["p-b72b9130",[[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]}]]],["p-52754e07",[[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"],favoriteHref:[1,"favorite-href"],link:[1],img:[1],imgAlt:[1,"img-alt"],hoverImg:[1,"hover-img"],hoverImgAlt:[1,"hover-img-alt"],videoSrc:[1,"video-src"],notificationUrl:[1,"notification-url"],notificationText:[1,"notification-text"],productName:[1,"product-name"],subtitle:[1],productId:[1,"product-id"],price:[2],salePrice:[2,"sale-price"],currency:[1],outOfStock:[1540,"out-of-stock"],outOfStockText:[1,"out-of-stock-text"],addToCartText:[1,"add-to-cart-text"],waitingListText:[1,"waiting-list-text"],addToWaitingList:[4,"add-to-waiting-list"],isMini:[4,"is-mini"],addedToCart:[4,"added-to-cart"],endAddedToCart:[4,"end-added-to-cart"],variations:[32],selectedVariation:[32],priceFormatted:[32],salePriceFormatted:[32]},[[0,"jump-card-ecommerce-option-connected","addOption"]]]]],["p-
|
|
1
|
+
import{p as e,b as t}from"./p-d4c681a4.js";export{s as setNonce}from"./p-d4c681a4.js";import{g as a}from"./p-e1255160.js";var i=()=>{const t=import.meta.url;const a={};if(t!==""){a.resourcesUrl=new URL(".",t).href}return e(a)};i().then((async e=>{await a();return t([["p-b72b9130",[[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]}]]],["p-52754e07",[[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"],favoriteHref:[1,"favorite-href"],link:[1],img:[1],imgAlt:[1,"img-alt"],hoverImg:[1,"hover-img"],hoverImgAlt:[1,"hover-img-alt"],videoSrc:[1,"video-src"],notificationUrl:[1,"notification-url"],notificationText:[1,"notification-text"],productName:[1,"product-name"],subtitle:[1],productId:[1,"product-id"],price:[2],salePrice:[2,"sale-price"],currency:[1],outOfStock:[1540,"out-of-stock"],outOfStockText:[1,"out-of-stock-text"],addToCartText:[1,"add-to-cart-text"],waitingListText:[1,"waiting-list-text"],addToWaitingList:[4,"add-to-waiting-list"],isMini:[4,"is-mini"],addedToCart:[4,"added-to-cart"],endAddedToCart:[4,"end-added-to-cart"],variations:[32],selectedVariation:[32],priceFormatted:[32],salePriceFormatted:[32]},[[0,"jump-card-ecommerce-option-connected","addOption"]]]]],["p-fb02f386",[[1,"jump-filter",{direction:[1],filterHeading:[1,"filter-heading"],filterButtonLabel:[1,"filter-button-label"],filterButtonIcon:[1,"filter-button-icon"],mobileThreshold:[2,"mobile-threshold"],filters:[8],activeFilters:[32],showMobileFilters:[32],isMobile:[32],getFilters:[64]},[[0,"jump-filterchange","filterChangeHandler"],[9,"resize","handleResize"]],{showMobileFilters:["watchHandler"]}]]],["p-273ff8ec",[[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-d1553b58",[[1,"jump-pagination",{pagLabel:[1,"pag-label"],last:[2],showFirstAndLast:[4,"show-first-and-last"],current:[32]},null,{current:["watchcurrent"]}]]],["p-d1586b59",[[0,"jump-pagination-table",{elementsRanges:[1,"elements-ranges"],pagLabel:[513,"pag-label"],labelElementsPerPage:[513,"label-elements-per-page"],total:[514],first:[514],last:[514],showFirstAndLast:[516,"show-first-and-last"],elementsRangesArray:[32],elPerPage:[32]},null,{elementsRanges:["elementsRangesChanged"],elPerPage:["elPerPageChanged"]}]]],["p-91d68f85",[[65,"jump-quantity",{min:[2],max:[2],step:[2],label:[1],type:[1],variant:[1],showButtons:[4,"show-buttons"],value:[2],getValue:[64],reset:[64]},null,{value:["onValueChange"]}]]],["p-8e0e49fb",[[1,"jump-accordion",{variant:[1],summary:[1],disabled:[4],open:[516],icon:[1],identifier:[1]},[[0,"sl-show","handleShow"]]]]],["p-701fa0cf",[[1,"jump-tab-item",{identifier:[1],iconName:[1,"icon-name"],iconPosition:[1,"icon-position"],label:[1],active:[4],disabled:[4],variant:[32]}]]],["p-34cd550e",[[1,"jump-accordion-group",{variant:[1],groupIdentifier:[1,"group-identifier"]}]]],["p-6872b29d",[[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-aedff4de",[[1,"jump-card-ecommerce-option",{code:[1],imgUrl:[1,"img-url"],label:[1],sku:[1],taxonomy:[1]}]]],["p-0f44f465",[[1,"jump-filter-checkbox",{value:[1],label:[1],checked:[516],count:[8],isChecked:[64]}]]],["p-99739ce5",[[1,"jump-tab",{tabGroupName:[1,"tab-group-name"],variant:[1]},[[0,"jump-change-active-tab","changeActiveTabHandler"]]]]],["p-4eda6db0",[[1,"jump-tab-panel",{identifier:[1],active:[4]}]]],["p-7e81b433",[[1,"jump-badge",{label:[1],variant:[513],dimension:[513],soft:[516],outline:[516]}]]]],e)}));
|
|
2
2
|
//# sourceMappingURL=jump-design-system.esm.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as e,h as
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as e,h as i,H as a}from"./p-d4c681a4.js";const t=":host{--primary-standard:var(--secondary-hard, #435171);--jump-button-background-hover:red;--bg-drawer:var(--bg-drawer, #fff)}:host h3{margin:0}.filtersDrawer{position:fixed;display:flex;flex-direction:column;gap:1rem;left:-100vw;top:0;height:--webkit-fill-available;transition:0.3s all ease-in-out;background-color:var(--bg-drawer, #fff);padding:1rem;width:100%;max-width:240px;box-shadow:8px 0 15px 0 rgba(0, 0, 0, 0.1490196078);z-index:2}.filtersDrawer[aria-hidden=false]{left:0;transition:0.3s all ease-in-out}@media (min-width: 768px){.filtersDrawer{position:relative;left:0;height:auto;max-width:initial;box-shadow:none}}.filtersDrawer .filtersDrawer__header{display:flex;justify-content:flex-start;align-items:center;gap:0.5rem}";const s=t;const r=class{constructor(i){e(this,i);this.direction="vertical";this.filterHeading="Filtra per";this.filterButtonLabel="Filtri";this.filterButtonIcon="sliders";this.mobileThreshold=768;this.filters=undefined;this.activeFilters=0;this.showMobileFilters=false;this.isMobile=false}filterChangeHandler(e){this.filters=Object.assign(Object.assign({},this.filters),{[e.detail.name]:e.detail.values});console.log("Received the custom filterChange event: ",this.filters)}handleResize(){this.isMobile=window.innerWidth<this.mobileThreshold}watchHandler(e,i){var a,t,s,r;if(e!==i){if(e){(a=this.mobileToggle)===null||a===void 0?void 0:a.setAttribute("aria-expanded","true");(t=this.filtersDrawer)===null||t===void 0?void 0:t.setAttribute("aria-hidden","false")}else{(s=this.mobileToggle)===null||s===void 0?void 0:s.setAttribute("aria-expanded","false");(r=this.filtersDrawer)===null||r===void 0?void 0:r.setAttribute("aria-hidden","true")}}}async getFilters(){return this.filters}componentDidLoad(){this.handleResize()}render(){return i(a,{key:"b45c2e4a0ed8985f709b5ef0cd6796c73f78080b",mobileFilters:this.showMobileFilters},this.isMobile&&i("jump-button",{key:"a8bf5423d154fe3dc7c91bc12a379fc30ab85992",ref:e=>{this.mobileToggle=e},buttonId:this.filterButtonIcon,variant:"primary",outline:true,onClick:()=>this.showMobileFilters=!this.showMobileFilters},i("slot",{key:"e9cdf515fe9d1f5f6c557f1b345ccaa5e75ed5ba",name:"prefix"},this.filterButtonIcon&&i("jump-badge",{key:"c5ce28fa3bc0e85195e80ee77d6c21724b2c8590",label:"1",variant:"success",soft:true,dimension:"dot"},this.filterButtonIcon),this.filterButtonLabel),i("slot",{key:"43d5a322cf0d0828b821abfb8bdfe14a9c2bf706",name:"suffix"},this.activeFilters>0?`(${this.activeFilters})`:"0")),i("div",{key:"7abdc1b83c1ecf2d507cc92d7034eaa089d3d4f4",ref:e=>{this.filtersDrawer=e},class:"filtersDrawer","data-variant":this.direction},!this.isMobile&&i("div",{key:"e74ee758eb1f18afae3b35c4d01ada3883819474",class:"filtersDrawer__header"},i("jump-icon",{key:"a9d1632b19d5f01ea3b471b09a1560bb5c8318fa",class:"small",name:this.filterButtonIcon}),i("h3",{key:"7447630022854d2ef9f4ec5d13a4b28661e834a5"},this.filterHeading)),i("slot",{key:"06e9e689e54131c31c99bc79faa1c9bb483df084"})))}static get watchers(){return{showMobileFilters:["watchHandler"]}}};r.style=s;export{r as jump_filter};
|
|
2
|
+
//# sourceMappingURL=p-fb02f386.entry.js.map
|
|
@@ -0,0 +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","_c","_d","getFilters","componentDidLoad","render","h","Host","key","mobileFilters","showMobileFilters","ref","el","buttonId","filterButtonIcon","variant","outline","onClick","label","soft","dimension","filterButtonLabel","activeFilters","class","direction","filterHeading"],"sources":["src/components/jump-filter/jump-filter.scss?tag=jump-filter&encapsulation=shadow","src/components/jump-filter/jump-filter.tsx"],"sourcesContent":[":host {\n --primary-standard: var(--secondary-hard, #435171);\n //--jump-button-background-hover: var(--secondary-hard, #435171);\n --jump-button-background-hover: red;\n --bg-drawer: var(--bg-drawer, #fff);\n\n h3 {\n margin: 0;\n }\n}\n\n.filtersDrawer {\n position: fixed;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n left: -100vw;\n top: 0;\n height: --webkit-fill-available;\n transition: 0.3s all ease-in-out;\n background-color: var(--bg-drawer, #fff);\n padding: 1rem;\n width: 100%;\n max-width: 240px;\n box-shadow: 8px 0 15px 0 #00000026;\n z-index: 2;\n\n &[aria-hidden=\"false\"] {\n left: 0;\n transition: 0.3s all ease-in-out;\n }\n\n @media (min-width: 768px) { //md breakpoint tailwind\n position: relative;\n left: 0;\n height: auto;\n max-width: initial;\n box-shadow: none;\n }\n\n .filtersDrawer__header {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n gap: 0.5rem;\n }\n}\n","import { Component, Host, Prop, h, State, Listen, Method, Watch } from '@stencil/core';\n\n@Component({\n tag: 'jump-filter',\n styleUrl: 'jump-filter.scss',\n shadow: true,\n})\nexport class JumpFilter {\n\n @Prop() direction: 'horizontal' | 'vertical' = 'vertical';\n @Prop() filterHeading: string = 'Filtra per';\n @Prop() filterButtonLabel: string = 'Filtri';\n @Prop() filterButtonIcon: string = 'sliders';\n @Prop() mobileThreshold: number = 768;\n @Prop() filters: any;\n\n @State() activeFilters: number = 0;\n @State() showMobileFilters: boolean = false;\n @State() isMobile: boolean = false;\n\n mobileToggle: HTMLElement | null;\n filtersDrawer: HTMLElement;\n\n @Listen('jump-filterchange')\n filterChangeHandler(event: CustomEvent) {\n //set this.filter as this.filters[event.detail.name] = event.detail.value; even if not present\n this.filters = {...this.filters, [event.detail.name]: event.detail.values};\n console.log('Received the custom filterChange event: ', this.filters);\n\n\n\n //TODO: increment this.activeFilters\n }\n\n @Listen('resize', { target: 'window' })\n handleResize() {\n this.isMobile = window.innerWidth < this.mobileThreshold;\n }\n\n @Watch('showMobileFilters')\n watchHandler(newValue: boolean, oldValue: boolean) {\n if (newValue !== oldValue) {\n if (newValue) {\n this.mobileToggle?.setAttribute('aria-expanded', 'true');\n this.filtersDrawer?.setAttribute('aria-hidden', 'false');\n } else {\n this.mobileToggle?.setAttribute('aria-expanded', 'false');\n this.filtersDrawer?.setAttribute('aria-hidden', 'true');\n }\n }\n }\n\n /**\n * Get the active filters from the component\n */\n @Method()\n async getFilters() {\n return this.filters;\n }\n\n componentDidLoad(){\n this.handleResize();\n }\n\n render() {\n return (\n <Host mobileFilters={this.showMobileFilters}>\n {this.isMobile && <jump-button\n ref={(el) => {this.mobileToggle = el}}\n buttonId={this.filterButtonIcon} variant={'primary'} outline\n onClick={() => this.showMobileFilters = !this.showMobileFilters}>\n <slot name=\"prefix\">\n {this.filterButtonIcon &&\n <jump-badge label=\"1\" variant=\"success\" soft dimension=\"dot\">{this.filterButtonIcon}</jump-badge>}\n {this.filterButtonLabel}\n </slot>\n <slot name=\"suffix\">\n {this.activeFilters > 0 ? `(${this.activeFilters})` : '0'}\n </slot>\n </jump-button>}\n\n {<div\n ref={(el) => {this.filtersDrawer = el}}\n class=\"filtersDrawer\" data-variant={this.direction}>\n {!this.isMobile &&\n <div class={'filtersDrawer__header'}>\n <jump-icon class=\"small\" name={this.filterButtonIcon}></jump-icon>\n <h3>{this.filterHeading}</h3>\n </div>}\n <slot></slot>\n </div>}\n </Host>\n );\n }\n}\n"],"mappings":"kDAAA,MAAMA,EAAgB,kuBACtB,MAAAC,EAAeD,E,MCMFE,EAAU,M,wCAE0B,W,mBACf,a,uBACI,S,sBACD,U,qBACD,I,0CAGD,E,uBACK,M,cACT,K,CAM7B,mBAAAC,CAAoBC,GAElBC,KAAKC,QAAOC,OAAAC,OAAAD,OAAAC,OAAA,GAAOH,KAAKC,SAAO,CAAE,CAACF,EAAMK,OAAOC,MAAON,EAAMK,OAAOE,SACnEC,QAAQC,IAAI,2CAA4CR,KAAKC,Q,CAQ/D,YAAAQ,GACET,KAAKU,SAAWC,OAAOC,WAAaZ,KAAKa,e,CAI3C,YAAAC,CAAaC,EAAmBC,G,YAC9B,GAAID,IAAaC,EAAU,CACzB,GAAID,EAAU,EACZE,EAAAjB,KAAKkB,gBAAY,MAAAD,SAAA,SAAAA,EAAEE,aAAa,gBAAiB,SACjDC,EAAApB,KAAKqB,iBAAa,MAAAD,SAAA,SAAAA,EAAED,aAAa,cAAe,Q,KAC3C,EACLG,EAAAtB,KAAKkB,gBAAY,MAAAI,SAAA,SAAAA,EAAEH,aAAa,gBAAiB,UACjDI,EAAAvB,KAAKqB,iBAAa,MAAAE,SAAA,SAAAA,EAAEJ,aAAa,cAAe,O,GAStD,gBAAMK,GACJ,OAAOxB,KAAKC,O,CAGd,gBAAAwB,GACEzB,KAAKS,c,CAGP,MAAAiB,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,cAAe9B,KAAK+B,mBACvB/B,KAAKU,UAAYiB,EAAA,eAAAE,IAAA,2CAChBG,IAAMC,IAAQjC,KAAKkB,aAAee,CAAE,EACpCC,SAAUlC,KAAKmC,iBAAkBC,QAAS,UAAWC,QAAO,KAC5DC,QAAS,IAAMtC,KAAK+B,mBAAqB/B,KAAK+B,mBAC9CJ,EAAA,QAAAE,IAAA,2CAAMxB,KAAK,UACRL,KAAKmC,kBACJR,EAAA,cAAAE,IAAA,2CAAYU,MAAM,IAAIH,QAAQ,UAAUI,KAAI,KAACC,UAAU,OAAOzC,KAAKmC,kBACpEnC,KAAK0C,mBAERf,EAAA,QAAAE,IAAA,2CAAMxB,KAAK,UACRL,KAAK2C,cAAgB,EAAI,IAAI3C,KAAK2C,iBAAmB,MAIzDhB,EAAA,OAAAE,IAAA,2CACCG,IAAMC,IAAQjC,KAAKqB,cAAgBY,CAAE,EACrCW,MAAM,gBAAe,eAAe5C,KAAK6C,YACvC7C,KAAKU,UACPiB,EAAA,OAAAE,IAAA,2CAAKe,MAAO,yBACVjB,EAAA,aAAAE,IAAA,2CAAWe,MAAM,QAAQvC,KAAML,KAAKmC,mBACpCR,EAAA,MAAAE,IAAA,4CAAK7B,KAAK8C,gBAEZnB,EAAA,QAAAE,IAAA,8C"}
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
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","_c","_d","getFilters","componentDidLoad","render","h","Host","key","mobileFilters","showMobileFilters","ref","el","buttonId","filterButtonIcon","variant","outline","onClick","library","category","size","filterButtonLabel","activeFilters","class","direction","filterHeading"],"sources":["src/components/jump-filter/jump-filter.scss?tag=jump-filter&encapsulation=shadow","src/components/jump-filter/jump-filter.tsx"],"sourcesContent":[":host {\n --primary-standard: var(--secondary-hard, #435171);\n //--jump-button-background-hover: var(--secondary-hard, #435171);\n --jump-button-background-hover: red;\n --bg-drawer: var(--bg-drawer, #fff);\n\n h3 {\n margin: 0;\n }\n}\n\n.filtersDrawer {\n position: fixed;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n left: -100vw;\n top: 0;\n height: --webkit-fill-available;\n transition: 0.3s all ease-in-out;\n background-color: var(--bg-drawer, #fff);\n padding: 1rem;\n width: 100%;\n max-width: 240px;\n box-shadow: 8px 0 15px 0 #00000026;\n z-index: 2;\n\n &[aria-hidden=\"false\"] {\n left: 0;\n transition: 0.3s all ease-in-out;\n }\n\n @media (min-width: 768px) { //md breakpoint tailwind\n position: relative;\n left: 0;\n height: auto;\n max-width: initial;\n box-shadow: none;\n }\n\n .filtersDrawer__header {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n gap: 0.5rem;\n }\n}\n","import { Component, Host, Prop, h, State, Listen, Method, Watch } from '@stencil/core';\n\n@Component({\n tag: 'jump-filter',\n styleUrl: 'jump-filter.scss',\n shadow: true,\n})\nexport class JumpFilter {\n\n @Prop() direction: 'horizontal' | 'vertical' = 'vertical';\n @Prop() filterHeading: string = 'Filtra per';\n @Prop() filterButtonLabel: string = 'Filtri';\n @Prop() filterButtonIcon: string = 'sliders';\n @Prop() mobileThreshold: number = 768;\n @Prop() filters: any;\n\n @State() activeFilters: number = 0;\n @State() showMobileFilters: boolean = false;\n @State() isMobile: boolean = false;\n\n mobileToggle: HTMLElement | null;\n filtersDrawer: HTMLElement;\n\n @Listen('jump-filterchange')\n filterChangeHandler(event: CustomEvent) {\n //set this.filter as this.filters[event.detail.name] = event.detail.value; even if not present\n this.filters = {...this.filters, [event.detail.name]: event.detail.values};\n console.log('Received the custom filterChange event: ', this.filters);\n\n\n\n //TODO: increment this.activeFilters\n }\n\n @Listen('resize', { target: 'window' })\n handleResize() {\n this.isMobile = window.innerWidth < this.mobileThreshold;\n }\n\n @Watch('showMobileFilters')\n watchHandler(newValue: boolean, oldValue: boolean) {\n if (newValue !== oldValue) {\n if (newValue) {\n this.mobileToggle?.setAttribute('aria-expanded', 'true');\n this.filtersDrawer?.setAttribute('aria-hidden', 'false');\n } else {\n this.mobileToggle?.setAttribute('aria-expanded', 'false');\n this.filtersDrawer?.setAttribute('aria-hidden', 'true');\n }\n }\n }\n\n /**\n * Get the active filters from the component\n */\n @Method()\n async getFilters() {\n return this.filters;\n }\n\n componentDidLoad(){\n this.handleResize();\n }\n\n render() {\n return (\n <Host mobileFilters={this.showMobileFilters}>\n {this.isMobile && <jump-button\n ref={(el) => {this.mobileToggle = el}}\n buttonId={this.filterButtonIcon} variant={'primary'} outline\n onClick={() => this.showMobileFilters = !this.showMobileFilters}>\n <slot name=\"prefix\">\n {this.filterButtonIcon &&\n <jump-icon library=\"fa\" category=\"regular\" name={this.filterButtonIcon} size=\"small\"></jump-icon>}\n {this.filterButtonLabel}\n </slot>\n <slot name=\"suffix\">\n {this.activeFilters > 0 ? `(${this.activeFilters})` : '0'}\n </slot>\n </jump-button>}\n\n {<div\n ref={(el) => {this.filtersDrawer = el}}\n class=\"filtersDrawer\" data-variant={this.direction}>\n {!this.isMobile &&\n <div class={'filtersDrawer__header'}>\n <jump-icon class=\"small\" name={this.filterButtonIcon}></jump-icon>\n <h3>{this.filterHeading}</h3>\n </div>}\n <slot></slot>\n </div>}\n </Host>\n );\n }\n}\n"],"mappings":"kDAAA,MAAMA,EAAgB,kuBACtB,MAAAC,EAAeD,E,MCMFE,EAAU,M,wCAE0B,W,mBACf,a,uBACI,S,sBACD,U,qBACD,I,0CAGD,E,uBACK,M,cACT,K,CAM7B,mBAAAC,CAAoBC,GAElBC,KAAKC,QAAOC,OAAAC,OAAAD,OAAAC,OAAA,GAAOH,KAAKC,SAAO,CAAE,CAACF,EAAMK,OAAOC,MAAON,EAAMK,OAAOE,SACnEC,QAAQC,IAAI,2CAA4CR,KAAKC,Q,CAQ/D,YAAAQ,GACET,KAAKU,SAAWC,OAAOC,WAAaZ,KAAKa,e,CAI3C,YAAAC,CAAaC,EAAmBC,G,YAC9B,GAAID,IAAaC,EAAU,CACzB,GAAID,EAAU,EACZE,EAAAjB,KAAKkB,gBAAY,MAAAD,SAAA,SAAAA,EAAEE,aAAa,gBAAiB,SACjDC,EAAApB,KAAKqB,iBAAa,MAAAD,SAAA,SAAAA,EAAED,aAAa,cAAe,Q,KAC3C,EACLG,EAAAtB,KAAKkB,gBAAY,MAAAI,SAAA,SAAAA,EAAEH,aAAa,gBAAiB,UACjDI,EAAAvB,KAAKqB,iBAAa,MAAAE,SAAA,SAAAA,EAAEJ,aAAa,cAAe,O,GAStD,gBAAMK,GACJ,OAAOxB,KAAKC,O,CAGd,gBAAAwB,GACEzB,KAAKS,c,CAGP,MAAAiB,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,cAAe9B,KAAK+B,mBACvB/B,KAAKU,UAAYiB,EAAA,eAAAE,IAAA,2CAChBG,IAAMC,IAAQjC,KAAKkB,aAAee,CAAE,EACpCC,SAAUlC,KAAKmC,iBAAkBC,QAAS,UAAWC,QAAO,KAC5DC,QAAS,IAAMtC,KAAK+B,mBAAqB/B,KAAK+B,mBAC9CJ,EAAA,QAAAE,IAAA,2CAAMxB,KAAK,UACRL,KAAKmC,kBACJR,EAAA,aAAAE,IAAA,2CAAWU,QAAQ,KAAKC,SAAS,UAAUnC,KAAML,KAAKmC,iBAAkBM,KAAK,UAC9EzC,KAAK0C,mBAERf,EAAA,QAAAE,IAAA,2CAAMxB,KAAK,UACRL,KAAK2C,cAAgB,EAAI,IAAI3C,KAAK2C,iBAAmB,MAIzDhB,EAAA,OAAAE,IAAA,2CACCG,IAAMC,IAAQjC,KAAKqB,cAAgBY,CAAE,EACrCW,MAAM,gBAAe,eAAe5C,KAAK6C,YACvC7C,KAAKU,UACPiB,EAAA,OAAAE,IAAA,2CAAKe,MAAO,yBACVjB,EAAA,aAAAE,IAAA,2CAAWe,MAAM,QAAQvC,KAAML,KAAKmC,mBACpCR,EAAA,MAAAE,IAAA,4CAAK7B,KAAK8C,gBAEZnB,EAAA,QAAAE,IAAA,8C"}
|