@jumpgroup/jump-design-system 0.3.25 → 0.3.27
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-design-system.cjs.js +1 -1
- package/dist/cjs/jump-filter.cjs.entry.js +21 -14
- package/dist/cjs/jump-filter.cjs.entry.js.map +1 -1
- package/dist/cjs/jump-filtergroup.cjs.entry.js +25 -15
- package/dist/cjs/jump-filtergroup.cjs.entry.js.map +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/jump-filter/jump-filter.css +29 -0
- package/dist/collection/components/jump-filter/jump-filter.js +23 -13
- package/dist/collection/components/jump-filter/jump-filter.js.map +1 -1
- package/dist/collection/components/jump-filtergroup/jump-filtergroup.css +23 -11
- package/dist/collection/components/jump-filtergroup/jump-filtergroup.js +28 -14
- package/dist/collection/components/jump-filtergroup/jump-filtergroup.js.map +1 -1
- package/dist/components/jump-filter.js +24 -15
- package/dist/components/jump-filter.js.map +1 -1
- package/dist/components/jump-filtergroup.js +28 -15
- package/dist/components/jump-filtergroup.js.map +1 -1
- package/dist/esm/jump-design-system.js +1 -1
- package/dist/esm/jump-filter.entry.js +21 -14
- package/dist/esm/jump-filter.entry.js.map +1 -1
- package/dist/esm/jump-filtergroup.entry.js +25 -15
- package/dist/esm/jump-filtergroup.entry.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/jump-design-system/jump-design-system.esm.js +1 -1
- package/dist/jump-design-system/jump-design-system.esm.js.map +1 -1
- package/dist/jump-design-system/p-273ff8ec.entry.js +2 -0
- package/dist/jump-design-system/p-273ff8ec.entry.js.map +1 -0
- package/dist/jump-design-system/p-ff5cab18.entry.js +2 -0
- package/dist/jump-design-system/p-ff5cab18.entry.js.map +1 -0
- package/dist/types/components/jump-filter/jump-filter.d.ts +1 -1
- package/dist/types/components/jump-filtergroup/jump-filtergroup.d.ts +3 -1
- package/package.json +1 -1
- package/dist/jump-design-system/p-93c35d1f.entry.js +0 -2
- package/dist/jump-design-system/p-93c35d1f.entry.js.map +0 -1
- package/dist/jump-design-system/p-fa75b346.entry.js +0 -2
- package/dist/jump-design-system/p-fa75b346.entry.js.map +0 -1
|
@@ -19,7 +19,7 @@ var patchBrowser = () => {
|
|
|
19
19
|
|
|
20
20
|
patchBrowser().then(async (options) => {
|
|
21
21
|
await appGlobals.globalScripts();
|
|
22
|
-
return index.bootstrapLazy([["jump-button_2.cjs",[[1,"jump-button",{"disabled":[4],"variant":[1],"outline":[4],"size":[1],"full":[4],"pill":[4],"text":[4],"onlyIcon":[4,"only-icon"],"href":[1],"target":[1],"type":[1],"name":[1],"value":[1],"ariaLabel":[1,"aria-label"],"class":[1],"buttonId":[1,"button-id"]}],[1,"jump-icon",{"class":[1],"library":[1],"name":[1],"category":[1],"size":[1],"label":[1],"src":[1]}]]],["jump-card-ecommerce.cjs",[[1,"jump-card-ecommerce",{"onlyIconButton":[4,"only-icon-button"],"hasBackground":[4,"has-background"],"badge":[1],"favorite":[1540],"hasFavorite":[4,"has-favorite"],"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"]]]]],["jump-filter.cjs",[[1,"jump-filter",{"direction":[1],"filterHeading":[1,"filter-heading"],"filterButtonLabel":[1,"filter-button-label"],"filterButtonIcon":[1,"filter-button-icon"],"mobileThreshold":[2,"mobile-threshold"],"filters":[8],"activeFilters":[32],"showMobileFilters":[32],"isMobile":[32],"getFilters":[64]},[[0,"jump-filterchange","filterChangeHandler"],[9,"resize","handleResize"]]]]],["jump-filtergroup.cjs",[[1,"jump-filtergroup",{"name":[1],"heading":[1],"otherLabel":[1,"other-label"],"lessLabel":[1,"less-label"],"maxElements":[2,"max-elements"],"variant":[1],"values":[32],"value":[32],"slotItems":[32],"inputs":[32],"showMore":[32],"getValues":[64],"getActiveAmount":[64],"getInputs":[64],"getName":[64]}]]],["jump-pagination.cjs",[[1,"jump-pagination",{"pagLabel":[1,"pag-label"],"last":[2],"showFirstAndLast":[4,"show-first-and-last"],"current":[32]},null,{"current":["watchcurrent"]}]]],["jump-pagination-table.cjs",[[0,"jump-pagination-table",{"elementsRanges":[1,"elements-ranges"],"pagLabel":[513,"pag-label"],"labelElementsPerPage":[513,"label-elements-per-page"],"total":[514],"first":[514],"last":[514],"showFirstAndLast":[516,"show-first-and-last"],"elementsRangesArray":[32],"elPerPage":[32]},null,{"elementsRanges":["elementsRangesChanged"],"elPerPage":["elPerPageChanged"]}]]],["jump-quantity.cjs",[[65,"jump-quantity",{"min":[2],"max":[2],"step":[2],"label":[1],"type":[1],"variant":[1],"showButtons":[4,"show-buttons"],"value":[2],"getValue":[64],"reset":[64]},null,{"value":["onValueChange"]}]]],["jump-accordion.cjs",[[1,"jump-accordion",{"variant":[1],"summary":[1],"disabled":[4],"open":[516],"icon":[1],"identifier":[1]},[[0,"sl-show","handleShow"]]]]],["jump-tab-item.cjs",[[1,"jump-tab-item",{"identifier":[1],"iconName":[1,"icon-name"],"iconPosition":[1,"icon-position"],"label":[1],"active":[4],"disabled":[4],"variant":[32]}]]],["jump-accordion-group.cjs",[[1,"jump-accordion-group",{"variant":[1],"groupIdentifier":[1,"group-identifier"]}]]],["jump-card.cjs",[[4,"jump-card",{"horizontal":[4],"dark":[4],"shadow":[4],"border":[4],"borderRadius":[4,"border-radius"],"topBorderContentRadius":[4,"top-border-content-radius"],"boxed":[4],"roundedMedia":[4,"rounded-media"],"imgSrc":[1,"img-src"],"imgAlt":[1,"img-alt"],"videoSrc":[1,"video-src"]}]]],["jump-card-ecommerce-option.cjs",[[1,"jump-card-ecommerce-option",{"code":[1],"imgUrl":[1,"img-url"],"label":[1],"sku":[1],"taxonomy":[1]}]]],["jump-filter-checkbox.cjs",[[1,"jump-filter-checkbox",{"value":[1],"label":[1],"checked":[516],"count":[8],"isChecked":[64]}]]],["jump-tab.cjs",[[1,"jump-tab",{"tabGroupName":[1,"tab-group-name"],"variant":[1]},[[0,"jump-change-active-tab","changeActiveTabHandler"]]]]],["jump-tab-panel.cjs",[[1,"jump-tab-panel",{"identifier":[1],"active":[4]}]]],["jump-badge.cjs",[[1,"jump-badge",{"label":[1],"variant":[513],"dimension":[513],"soft":[516],"outline":[516]}]]]], options);
|
|
22
|
+
return index.bootstrapLazy([["jump-button_2.cjs",[[1,"jump-button",{"disabled":[4],"variant":[1],"outline":[4],"size":[1],"full":[4],"pill":[4],"text":[4],"onlyIcon":[4,"only-icon"],"href":[1],"target":[1],"type":[1],"name":[1],"value":[1],"ariaLabel":[1,"aria-label"],"class":[1],"buttonId":[1,"button-id"]}],[1,"jump-icon",{"class":[1],"library":[1],"name":[1],"category":[1],"size":[1],"label":[1],"src":[1]}]]],["jump-card-ecommerce.cjs",[[1,"jump-card-ecommerce",{"onlyIconButton":[4,"only-icon-button"],"hasBackground":[4,"has-background"],"badge":[1],"favorite":[1540],"hasFavorite":[4,"has-favorite"],"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"]]]]],["jump-filter.cjs",[[1,"jump-filter",{"direction":[1],"filterHeading":[1,"filter-heading"],"filterButtonLabel":[1,"filter-button-label"],"filterButtonIcon":[1,"filter-button-icon"],"mobileThreshold":[2,"mobile-threshold"],"filters":[8],"activeFilters":[32],"showMobileFilters":[32],"isMobile":[32],"getFilters":[64]},[[0,"jump-filterchange","filterChangeHandler"],[9,"resize","handleResize"]],{"showMobileFilters":["watchHandler"]}]]],["jump-filtergroup.cjs",[[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"]}]]],["jump-pagination.cjs",[[1,"jump-pagination",{"pagLabel":[1,"pag-label"],"last":[2],"showFirstAndLast":[4,"show-first-and-last"],"current":[32]},null,{"current":["watchcurrent"]}]]],["jump-pagination-table.cjs",[[0,"jump-pagination-table",{"elementsRanges":[1,"elements-ranges"],"pagLabel":[513,"pag-label"],"labelElementsPerPage":[513,"label-elements-per-page"],"total":[514],"first":[514],"last":[514],"showFirstAndLast":[516,"show-first-and-last"],"elementsRangesArray":[32],"elPerPage":[32]},null,{"elementsRanges":["elementsRangesChanged"],"elPerPage":["elPerPageChanged"]}]]],["jump-quantity.cjs",[[65,"jump-quantity",{"min":[2],"max":[2],"step":[2],"label":[1],"type":[1],"variant":[1],"showButtons":[4,"show-buttons"],"value":[2],"getValue":[64],"reset":[64]},null,{"value":["onValueChange"]}]]],["jump-accordion.cjs",[[1,"jump-accordion",{"variant":[1],"summary":[1],"disabled":[4],"open":[516],"icon":[1],"identifier":[1]},[[0,"sl-show","handleShow"]]]]],["jump-tab-item.cjs",[[1,"jump-tab-item",{"identifier":[1],"iconName":[1,"icon-name"],"iconPosition":[1,"icon-position"],"label":[1],"active":[4],"disabled":[4],"variant":[32]}]]],["jump-accordion-group.cjs",[[1,"jump-accordion-group",{"variant":[1],"groupIdentifier":[1,"group-identifier"]}]]],["jump-card.cjs",[[4,"jump-card",{"horizontal":[4],"dark":[4],"shadow":[4],"border":[4],"borderRadius":[4,"border-radius"],"topBorderContentRadius":[4,"top-border-content-radius"],"boxed":[4],"roundedMedia":[4,"rounded-media"],"imgSrc":[1,"img-src"],"imgAlt":[1,"img-alt"],"videoSrc":[1,"video-src"]}]]],["jump-card-ecommerce-option.cjs",[[1,"jump-card-ecommerce-option",{"code":[1],"imgUrl":[1,"img-url"],"label":[1],"sku":[1],"taxonomy":[1]}]]],["jump-filter-checkbox.cjs",[[1,"jump-filter-checkbox",{"value":[1],"label":[1],"checked":[516],"count":[8],"isChecked":[64]}]]],["jump-tab.cjs",[[1,"jump-tab",{"tabGroupName":[1,"tab-group-name"],"variant":[1]},[[0,"jump-change-active-tab","changeActiveTabHandler"]]]]],["jump-tab-panel.cjs",[[1,"jump-tab-panel",{"identifier":[1],"active":[4]}]]],["jump-badge.cjs",[[1,"jump-badge",{"label":[1],"variant":[513],"dimension":[513],"soft":[516],"outline":[516]}]]]], options);
|
|
23
23
|
});
|
|
24
24
|
|
|
25
25
|
exports.setNonce = index.setNonce;
|
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-86f59981.js');
|
|
6
6
|
|
|
7
|
-
const jumpFilterCss = ":host h3{margin:0}.filtersDrawer{display:flex;flex-direction:column;gap:1rem}.filtersDrawer .filtersDrawer__header{display:flex;justify-content:flex-start;align-items:center;gap:0.5rem}";
|
|
7
|
+
const jumpFilterCss = ":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}";
|
|
8
8
|
const JumpFilterStyle0 = jumpFilterCss;
|
|
9
9
|
|
|
10
10
|
const JumpFilter = class {
|
|
@@ -29,6 +29,19 @@ const JumpFilter = class {
|
|
|
29
29
|
handleResize() {
|
|
30
30
|
this.isMobile = window.innerWidth < this.mobileThreshold;
|
|
31
31
|
}
|
|
32
|
+
watchHandler(newValue, oldValue) {
|
|
33
|
+
var _a, _b, _c, _d;
|
|
34
|
+
if (newValue !== oldValue) {
|
|
35
|
+
if (newValue) {
|
|
36
|
+
(_a = this.mobileToggle) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-expanded', 'true');
|
|
37
|
+
(_b = this.filtersDrawer) === null || _b === void 0 ? void 0 : _b.setAttribute('aria-hidden', 'false');
|
|
38
|
+
}
|
|
39
|
+
else {
|
|
40
|
+
(_c = this.mobileToggle) === null || _c === void 0 ? void 0 : _c.setAttribute('aria-expanded', 'false');
|
|
41
|
+
(_d = this.filtersDrawer) === null || _d === void 0 ? void 0 : _d.setAttribute('aria-hidden', 'true');
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
}
|
|
32
45
|
/**
|
|
33
46
|
* Get the active filters from the component
|
|
34
47
|
*/
|
|
@@ -36,22 +49,16 @@ const JumpFilter = class {
|
|
|
36
49
|
return this.filters;
|
|
37
50
|
}
|
|
38
51
|
componentDidLoad() {
|
|
39
|
-
this.
|
|
40
|
-
}
|
|
41
|
-
toggleMobileFilters() {
|
|
42
|
-
if (this.mobileToggle) {
|
|
43
|
-
this.mobileToggle.addEventListener('click', () => {
|
|
44
|
-
if (!this.isMobile)
|
|
45
|
-
return;
|
|
46
|
-
this.showMobileFilters = !this.showMobileFilters;
|
|
47
|
-
});
|
|
48
|
-
}
|
|
52
|
+
this.handleResize();
|
|
49
53
|
}
|
|
50
54
|
render() {
|
|
51
|
-
return (index.h(index.Host, { key: '
|
|
52
|
-
index.h("jump-icon", { key: '
|
|
53
|
-
index.h("div", { key: '
|
|
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-icon", { key: '7175bf68ccc5cba19384ac74de269a83a9321f9c', library: "fa", category: "regular", name: this.filterButtonIcon, size: "small" }), 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
|
+
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' }))));
|
|
54
58
|
}
|
|
59
|
+
static get watchers() { return {
|
|
60
|
+
"showMobileFilters": ["watchHandler"]
|
|
61
|
+
}; }
|
|
55
62
|
};
|
|
56
63
|
JumpFilter.style = JumpFilterStyle0;
|
|
57
64
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"jump-filter.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,
|
|
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,wEAAW,OAAO,EAAC,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAC,IAAI,EAAE,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAC,OAAO,GAAa,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-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"],"version":3}
|
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-86f59981.js');
|
|
6
6
|
|
|
7
|
-
const jumpFiltergroupCss = ":host{--hidden-display:none;display:block}:host h5{font-family:var(--
|
|
7
|
+
const jumpFiltergroupCss = ":host{--hidden-display:none;--font-family:var(--ff-primary, \"Inter\"), serif;--font-size:var(--fs-400, 16px);--line-height:var(--lh-300, 1.2);--font-weight:var(--fw-900, 700);--color:var(--neutral-grey-primary, #282828);--distance-items:.25rem;display:block}:host h5{font-family:var(--font-family);font-size:var(--font-size);line-height:var(--line-height);font-weight:var(--font-weight);color:var(--color);margin:0 0 var(--distance-items, 0.25rem)}:host slot{display:flex;flex-direction:column;margin-bottom:1rem}:host ::slotted(.item){max-height:500px;transition:all 0.3s ease-in-out;margin-top:var(--distance-items, 0.25rem);display:flex;align-items:center;justify-content:flex-start;gap:0.25rem}:host ::slotted(.hidden){max-height:0;overflow:hidden}";
|
|
8
8
|
const JumpFiltergroupStyle0 = jumpFiltergroupCss;
|
|
9
9
|
|
|
10
10
|
const JumpFiltergroup = class {
|
|
@@ -17,11 +17,15 @@ const JumpFiltergroup = class {
|
|
|
17
17
|
this.lessLabel = 'Mostra meno';
|
|
18
18
|
this.maxElements = 8;
|
|
19
19
|
this.variant = 'default';
|
|
20
|
+
this.label = this.otherLabel;
|
|
20
21
|
this.values = [];
|
|
21
22
|
this.value = '';
|
|
22
23
|
this.slotItems = undefined;
|
|
23
24
|
this.inputs = [];
|
|
24
|
-
this.showMore =
|
|
25
|
+
this.showMore = false;
|
|
26
|
+
}
|
|
27
|
+
watchShowMore(newValue) {
|
|
28
|
+
this.label = newValue ? this.lessLabel : this.otherLabel;
|
|
25
29
|
}
|
|
26
30
|
async getValues() {
|
|
27
31
|
return this.values;
|
|
@@ -35,19 +39,21 @@ const JumpFiltergroup = class {
|
|
|
35
39
|
async getName() {
|
|
36
40
|
return this.name;
|
|
37
41
|
}
|
|
38
|
-
toggleHiddenItems(
|
|
42
|
+
toggleHiddenItems() {
|
|
39
43
|
this.slotItemsWrapper.assignedElements().forEach((item, index) => {
|
|
40
|
-
if (index > this.maxElements
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
44
|
+
if (index > this.maxElements) {
|
|
45
|
+
if (this.showMore) {
|
|
46
|
+
item.classList.remove('hidden');
|
|
47
|
+
}
|
|
48
|
+
else {
|
|
49
|
+
item.classList.add('hidden');
|
|
50
|
+
}
|
|
45
51
|
}
|
|
46
52
|
});
|
|
47
53
|
}
|
|
48
54
|
handleShowMore() {
|
|
49
55
|
this.showMore = !this.showMore;
|
|
50
|
-
this.toggleHiddenItems(
|
|
56
|
+
this.toggleHiddenItems();
|
|
51
57
|
}
|
|
52
58
|
handleChange(event) {
|
|
53
59
|
const target = event.target;
|
|
@@ -103,11 +109,12 @@ const JumpFiltergroup = class {
|
|
|
103
109
|
this.slotItemsWrapper.addEventListener('jump-checkbox-change', this.handleCheckboxChange.bind(this));
|
|
104
110
|
let index = 0;
|
|
105
111
|
this.slotItems.forEach((item) => {
|
|
112
|
+
item.classList.add('item');
|
|
106
113
|
if (index > this.maxElements) {
|
|
107
|
-
|
|
108
|
-
item.style.display = 'none';
|
|
114
|
+
item.classList.add('hidden');
|
|
109
115
|
}
|
|
110
|
-
if (item.tagName
|
|
116
|
+
//if (item.tagName start with jump-
|
|
117
|
+
if (item.tagName === 'INPUT' || item.tagName === 'SELECT' || item.tagName.startsWith('JUMP-') || item.tagName === 'LABEL') {
|
|
111
118
|
this.inputs.push(item);
|
|
112
119
|
if (item.tagName === 'INPUT' && item.type === 'radio') {
|
|
113
120
|
item.name = this.name;
|
|
@@ -129,11 +136,14 @@ const JumpFiltergroup = class {
|
|
|
129
136
|
//this.toggleHiddenItems();
|
|
130
137
|
}
|
|
131
138
|
render() {
|
|
132
|
-
return (index.h(index.Host, { key: '
|
|
133
|
-
index.h("jump-button", { key: '
|
|
139
|
+
return (index.h(index.Host, { key: '7d3b79b574cb9b46501ea0482c6d3cc1fbb98e1f' }, this.heading && index.h("h5", { key: '68f2dd39f94fb905d9ea151cfbf946080abf1883' }, this.heading), index.h("div", { key: '3975c6ca04b3bd077eef48dd93311299c4cb2308', class: "filterGroup" }, index.h("slot", { key: 'c45798ed4fa32dc7baa18aa183740b5ad589b87b', ref: (el) => (this.slotItemsWrapper = el) })), this.inputs.length > this.maxElements &&
|
|
140
|
+
index.h("jump-button", { key: '068c3456f098fd7d58f943964338ff0416507797', variant: "primary", size: "small", text: true, name: this.label, "aria-label": this.label, ref: (showMoreBtn) => {
|
|
134
141
|
this.showMoreBtn = showMoreBtn;
|
|
135
|
-
}, onClick: () => this.handleShowMore() }, this.
|
|
142
|
+
}, onClick: () => this.handleShowMore() }, this.label, index.h("jump-icon", { key: '7e0b01f499ff2af6948120711d09f84dd70e4039', slot: "suffix", name: !this.showMore ? 'chevron-down' : 'chevron-up' }))));
|
|
136
143
|
}
|
|
144
|
+
static get watchers() { return {
|
|
145
|
+
"showMore": ["watchShowMore"]
|
|
146
|
+
}; }
|
|
137
147
|
};
|
|
138
148
|
JumpFiltergroup.style = JumpFiltergroupStyle0;
|
|
139
149
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"jump-filtergroup.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/jump-filtergroup/jump-filtergroup.scss?tag=jump-filtergroup&encapsulation=shadow","src/components/jump-filtergroup/jump-filtergroup.tsx"],"sourcesContent":[":host {\n --hidden-display: none;\n\n display: block;\n\n h5{\n font-family: var(--ff-primary), serif;\n font-size: var(--fs-400);\n line-height: var(--lh-300);\n font-weight: var(--fw-900);\n }\n\n slot {\n display: flex;\n flex-direction: column;\n gap: .25rem;\n margin-bottom: 1rem;\n }\n\n}\n\n*[data-hide=\"true\"] {\n display: var(--hidden-display);\n}\n\nh5 {\n margin: 0 0 .25rem;\n}\n\n//TODO: capire perché non prende questo stile\n\n\n","import { Component, Host, h, Prop, State, Event, Method } from '@stencil/core';\n\n@Component({\n tag: 'jump-filtergroup',\n styleUrl: 'jump-filtergroup.scss',\n shadow: true,\n})\nexport class JumpFiltergroup {\n @Prop() name: string = 'tax-name';\n @Prop() heading: string = 'Titolo del filtro';\n @Prop() otherLabel: string = 'Mostra altro';\n @Prop() lessLabel: string = 'Mostra meno';\n @Prop() maxElements: number = 8;\n //TODO: Add Accordion variant within jump-acccordion component\n @Prop() variant: 'accordion' | 'default' = 'default';\n\n @State() values: string[] = [];\n @State() value: string = '';\n @State() slotItems: any;\n @State() inputs: any = [];\n @State() showMore: boolean = true;\n\n @Event({ eventName: 'jump-filterchange' }) change;\n\n slotItemsWrapper: HTMLSlotElement;\n showMoreBtn: HTMLElement;\n\n @Method('getValues')\n async getValues() {\n return this.values;\n }\n\n @Method('getActiveAmount')\n async getActiveAmount() {\n return this.values.length;\n }\n\n @Method('getInputs')\n async getInputs() {\n return this.inputs;\n }\n\n @Method('getName')\n async getName() {\n return this.name;\n }\n\n toggleHiddenItems(showAll = true) {\n this.slotItemsWrapper.assignedElements().forEach((item, index) => {\n if (index > this.maxElements && !showAll) {\n item.setAttribute('style', 'display: none');\n } else {\n item.setAttribute('style', 'display: initial');\n }\n });\n }\n\n handleShowMore() {\n this.showMore = !this.showMore;\n this.toggleHiddenItems(this.showMore);\n }\n\n handleChange(event: Event) {\n const target = event.target as HTMLInputElement | HTMLSelectElement;\n const newValue = target.value;\n\n if (target.tagName === 'INPUT') {\n if (target.type === 'checkbox') {\n // @ts-ignore\n if (target.checked) {\n this.values.push(newValue);\n } else {\n const index = this.values.indexOf(newValue);\n if (index !== -1) {\n this.values.splice(index, 1);\n }\n }\n } else if (target.type === 'radio') {\n // Se è un input radio selezionato, imposta il valore e aggiorna this.values\n this.value = newValue;\n this.values = [newValue]; // Assicurati che this.values contenga solo il valore selezionato\n }\n } else if (target.tagName === 'SELECT') {\n // Se è un select, aggiorna semplicemente il valore\n this.value = newValue;\n this.values = [newValue];\n }\n\n // Emit event con i valori aggiornati\n this.change.emit({\n name: this.name,\n values: this.values,\n });\n }\n\n handleCheckboxChange(event: CustomEvent) {\n if (event.detail.checked && !this.values.includes(event.detail.value)) {\n this.values.push(event.detail.value);\n } else if (!event.detail.checked && this.values.includes(event.detail.value)) {\n const index = this.values.indexOf(event.detail.value);\n if (index !== -1) {\n this.values.splice(index, 1);\n }\n }\n this.change.emit({\n name: this.name,\n values: this.values,\n });\n }\n\n componentDidLoad() {\n this.slotItems = this.slotItemsWrapper.assignedElements();\n this.slotItemsWrapper.addEventListener('change', this.handleChange.bind(this));\n this.slotItemsWrapper.addEventListener('jump-checkbox-change', this.handleCheckboxChange.bind(this));\n\n let index = 0;\n this.slotItems.forEach((item) => {\n if (index > this.maxElements) {\n //item.setAttribute('data-hide', 'true');\n item.style.display = 'none';\n }\n if (item.tagName === 'INPUT' || item.tagName === 'SELECT') {\n this.inputs.push(item);\n if (item.tagName === 'INPUT' && item.type === 'radio') {\n item.name = this.name;\n }\n } else {\n const inputs = item.querySelectorAll('input, select');\n if (inputs.length > 0) {\n inputs.forEach((input) => {\n this.inputs.push(input);\n\n if (input.tagName === 'INPUT' && input.type === 'radio') {\n input.name = this.name;\n }\n });\n }\n }\n index++;\n });\n\n //this.toggleHiddenItems();\n }\n\n render() {\n return (\n <Host>\n {this.heading && <h5>{this.heading}</h5>}\n <div class=\"filterGroup\">\n <slot ref={(el) => (this.slotItemsWrapper = el as HTMLSlotElement)}></slot>\n </div>\n {this.inputs.length > this.maxElements &&\n <jump-button variant=\"primary\" size=\"small\" text name={this.showMore ? this.otherLabel : this.lessLabel}\n aria-label={this.showMore ? this.otherLabel : this.lessLabel}\n ref={(showMoreBtn) => {\n this.showMoreBtn = showMoreBtn;\n }}\n onClick={() => this.handleShowMore()}>\n {this.showMore ? this.otherLabel : this.lessLabel}\n <jump-icon slot=\"suffix\" name={this.showMore ? 'chevron-down' : 'chevron-up'}></jump-icon>\n </jump-button>\n }\n </Host>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"jump-filtergroup.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/jump-filtergroup/jump-filtergroup.scss?tag=jump-filtergroup&encapsulation=shadow","src/components/jump-filtergroup/jump-filtergroup.tsx"],"sourcesContent":[":host {\n --hidden-display: none;\n --font-family: var(--ff-primary, 'Inter'), serif;\n --font-size: var(--fs-400, 16px);\n --line-height: var(--lh-300, 1.2);\n --font-weight: var(--fw-900, 700);\n --color: var(--neutral-grey-primary, #282828);\n --distance-items: .25rem;\n\n display: block;\n\n h5 {\n font-family: var(--font-family);\n font-size: var(--font-size);\n line-height: var(--line-height);\n font-weight: var(--font-weight);\n color: var(--color);\n margin: 0 0 var(--distance-items, .25rem);\n }\n\n slot {\n display: flex;\n flex-direction: column;\n margin-bottom: 1rem;\n }\n\n ::slotted(.item) {\n max-height: 500px;\n transition: all 0.3s ease-in-out;\n margin-top: var(--distance-items, .25rem);\n display: flex;\n align-items: center;\n justify-content: flex-start;\n gap: .25rem;\n }\n\n ::slotted(.hidden) {\n max-height: 0;\n overflow: hidden;\n }\n}\n\n\n","import { Component, Host, h, Prop, State, Event, Method, Watch } from '@stencil/core';\n\n@Component({\n tag: 'jump-filtergroup',\n styleUrl: 'jump-filtergroup.scss',\n shadow: true,\n})\nexport class JumpFiltergroup {\n @Prop() name: string = 'tax-name';\n @Prop() heading: string = 'Titolo del filtro';\n @Prop() otherLabel: string = 'Mostra altro';\n @Prop() lessLabel: string = 'Mostra meno';\n @Prop() maxElements: number = 8;\n //TODO: Add Accordion variant within jump-acccordion component\n @Prop() variant: 'accordion' | 'default' = 'default';\n\n @State() label: string = this.otherLabel;\n @State() values: string[] = [];\n @State() value: string = '';\n @State() slotItems: any;\n @State() inputs: any = [];\n @State() showMore: boolean = false;\n\n @Event({ eventName: 'jump-filterchange' }) change;\n\n slotItemsWrapper: HTMLSlotElement;\n showMoreBtn: HTMLElement;\n\n @Watch('showMore')\n watchShowMore(newValue: boolean) {\n this.label = newValue ? this.lessLabel : this.otherLabel;\n }\n\n @Method('getValues')\n async getValues() {\n return this.values;\n }\n\n @Method('getActiveAmount')\n async getActiveAmount() {\n return this.values.length;\n }\n\n @Method('getInputs')\n async getInputs() {\n return this.inputs;\n }\n\n @Method('getName')\n async getName() {\n return this.name;\n }\n\n toggleHiddenItems() {\n this.slotItemsWrapper.assignedElements().forEach((item, index) => {\n if (index > this.maxElements) {\n if (this.showMore) {\n item.classList.remove('hidden');\n } else {\n item.classList.add('hidden');\n }\n }\n });\n }\n\n handleShowMore() {\n this.showMore = !this.showMore;\n this.toggleHiddenItems();\n }\n\n handleChange(event: Event) {\n const target = event.target as HTMLInputElement | HTMLSelectElement;\n const newValue = target.value;\n\n if (target.tagName === 'INPUT') {\n if (target.type === 'checkbox') {\n // @ts-ignore\n if (target.checked) {\n this.values.push(newValue);\n } else {\n const index = this.values.indexOf(newValue);\n if (index !== -1) {\n this.values.splice(index, 1);\n }\n }\n } else if (target.type === 'radio') {\n // Se è un input radio selezionato, imposta il valore e aggiorna this.values\n this.value = newValue;\n this.values = [newValue]; // Assicurati che this.values contenga solo il valore selezionato\n }\n } else if (target.tagName === 'SELECT') {\n // Se è un select, aggiorna semplicemente il valore\n this.value = newValue;\n this.values = [newValue];\n }\n\n // Emit event con i valori aggiornati\n this.change.emit({\n name: this.name,\n values: this.values,\n });\n }\n\n handleCheckboxChange(event: CustomEvent) {\n if (event.detail.checked && !this.values.includes(event.detail.value)) {\n this.values.push(event.detail.value);\n } else if (!event.detail.checked && this.values.includes(event.detail.value)) {\n const index = this.values.indexOf(event.detail.value);\n if (index !== -1) {\n this.values.splice(index, 1);\n }\n }\n this.change.emit({\n name: this.name,\n values: this.values,\n });\n }\n\n componentDidLoad() {\n this.slotItems = this.slotItemsWrapper.assignedElements();\n this.slotItemsWrapper.addEventListener('change', this.handleChange.bind(this));\n this.slotItemsWrapper.addEventListener('jump-checkbox-change', this.handleCheckboxChange.bind(this));\n\n let index = 0;\n this.slotItems.forEach((item) => {\n item.classList.add('item');\n if (index > this.maxElements) {\n item.classList.add('hidden');\n }\n //if (item.tagName start with jump-\n if (item.tagName === 'INPUT' || item.tagName === 'SELECT' || item.tagName.startsWith('JUMP-') || item.tagName === 'LABEL') {\n this.inputs.push(item);\n if (item.tagName === 'INPUT' && item.type === 'radio') {\n item.name = this.name;\n }\n } else {\n const inputs = item.querySelectorAll('input, select');\n if (inputs.length > 0) {\n inputs.forEach((input) => {\n this.inputs.push(input);\n\n if (input.tagName === 'INPUT' && input.type === 'radio') {\n input.name = this.name;\n }\n });\n }\n }\n index++;\n });\n\n //this.toggleHiddenItems();\n }\n\n render() {\n return (\n <Host>\n {this.heading && <h5>{this.heading}</h5>}\n <div class=\"filterGroup\">\n <slot ref={(el) => (this.slotItemsWrapper = el as HTMLSlotElement)}></slot>\n </div>\n {this.inputs.length > this.maxElements &&\n <jump-button variant=\"primary\" size=\"small\" text name={this.label}\n aria-label={this.label}\n ref={(showMoreBtn) => {\n this.showMoreBtn = showMoreBtn;\n }}\n onClick={() => this.handleShowMore()}>\n {this.label}\n <jump-icon slot=\"suffix\" name={!this.showMore ? 'chevron-down' : 'chevron-up'}></jump-icon>\n </jump-button>\n }\n </Host>\n );\n }\n}\n"],"version":3}
|
package/dist/cjs/loader.cjs.js
CHANGED
|
@@ -8,7 +8,7 @@ const appGlobals = require('./app-globals-3a1e7e63.js');
|
|
|
8
8
|
const defineCustomElements = async (win, options) => {
|
|
9
9
|
if (typeof window === 'undefined') return undefined;
|
|
10
10
|
await appGlobals.globalScripts();
|
|
11
|
-
return index.bootstrapLazy([["jump-button_2.cjs",[[1,"jump-button",{"disabled":[4],"variant":[1],"outline":[4],"size":[1],"full":[4],"pill":[4],"text":[4],"onlyIcon":[4,"only-icon"],"href":[1],"target":[1],"type":[1],"name":[1],"value":[1],"ariaLabel":[1,"aria-label"],"class":[1],"buttonId":[1,"button-id"]}],[1,"jump-icon",{"class":[1],"library":[1],"name":[1],"category":[1],"size":[1],"label":[1],"src":[1]}]]],["jump-card-ecommerce.cjs",[[1,"jump-card-ecommerce",{"onlyIconButton":[4,"only-icon-button"],"hasBackground":[4,"has-background"],"badge":[1],"favorite":[1540],"hasFavorite":[4,"has-favorite"],"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"]]]]],["jump-filter.cjs",[[1,"jump-filter",{"direction":[1],"filterHeading":[1,"filter-heading"],"filterButtonLabel":[1,"filter-button-label"],"filterButtonIcon":[1,"filter-button-icon"],"mobileThreshold":[2,"mobile-threshold"],"filters":[8],"activeFilters":[32],"showMobileFilters":[32],"isMobile":[32],"getFilters":[64]},[[0,"jump-filterchange","filterChangeHandler"],[9,"resize","handleResize"]]]]],["jump-filtergroup.cjs",[[1,"jump-filtergroup",{"name":[1],"heading":[1],"otherLabel":[1,"other-label"],"lessLabel":[1,"less-label"],"maxElements":[2,"max-elements"],"variant":[1],"values":[32],"value":[32],"slotItems":[32],"inputs":[32],"showMore":[32],"getValues":[64],"getActiveAmount":[64],"getInputs":[64],"getName":[64]}]]],["jump-pagination.cjs",[[1,"jump-pagination",{"pagLabel":[1,"pag-label"],"last":[2],"showFirstAndLast":[4,"show-first-and-last"],"current":[32]},null,{"current":["watchcurrent"]}]]],["jump-pagination-table.cjs",[[0,"jump-pagination-table",{"elementsRanges":[1,"elements-ranges"],"pagLabel":[513,"pag-label"],"labelElementsPerPage":[513,"label-elements-per-page"],"total":[514],"first":[514],"last":[514],"showFirstAndLast":[516,"show-first-and-last"],"elementsRangesArray":[32],"elPerPage":[32]},null,{"elementsRanges":["elementsRangesChanged"],"elPerPage":["elPerPageChanged"]}]]],["jump-quantity.cjs",[[65,"jump-quantity",{"min":[2],"max":[2],"step":[2],"label":[1],"type":[1],"variant":[1],"showButtons":[4,"show-buttons"],"value":[2],"getValue":[64],"reset":[64]},null,{"value":["onValueChange"]}]]],["jump-accordion.cjs",[[1,"jump-accordion",{"variant":[1],"summary":[1],"disabled":[4],"open":[516],"icon":[1],"identifier":[1]},[[0,"sl-show","handleShow"]]]]],["jump-tab-item.cjs",[[1,"jump-tab-item",{"identifier":[1],"iconName":[1,"icon-name"],"iconPosition":[1,"icon-position"],"label":[1],"active":[4],"disabled":[4],"variant":[32]}]]],["jump-accordion-group.cjs",[[1,"jump-accordion-group",{"variant":[1],"groupIdentifier":[1,"group-identifier"]}]]],["jump-card.cjs",[[4,"jump-card",{"horizontal":[4],"dark":[4],"shadow":[4],"border":[4],"borderRadius":[4,"border-radius"],"topBorderContentRadius":[4,"top-border-content-radius"],"boxed":[4],"roundedMedia":[4,"rounded-media"],"imgSrc":[1,"img-src"],"imgAlt":[1,"img-alt"],"videoSrc":[1,"video-src"]}]]],["jump-card-ecommerce-option.cjs",[[1,"jump-card-ecommerce-option",{"code":[1],"imgUrl":[1,"img-url"],"label":[1],"sku":[1],"taxonomy":[1]}]]],["jump-filter-checkbox.cjs",[[1,"jump-filter-checkbox",{"value":[1],"label":[1],"checked":[516],"count":[8],"isChecked":[64]}]]],["jump-tab.cjs",[[1,"jump-tab",{"tabGroupName":[1,"tab-group-name"],"variant":[1]},[[0,"jump-change-active-tab","changeActiveTabHandler"]]]]],["jump-tab-panel.cjs",[[1,"jump-tab-panel",{"identifier":[1],"active":[4]}]]],["jump-badge.cjs",[[1,"jump-badge",{"label":[1],"variant":[513],"dimension":[513],"soft":[516],"outline":[516]}]]]], options);
|
|
11
|
+
return index.bootstrapLazy([["jump-button_2.cjs",[[1,"jump-button",{"disabled":[4],"variant":[1],"outline":[4],"size":[1],"full":[4],"pill":[4],"text":[4],"onlyIcon":[4,"only-icon"],"href":[1],"target":[1],"type":[1],"name":[1],"value":[1],"ariaLabel":[1,"aria-label"],"class":[1],"buttonId":[1,"button-id"]}],[1,"jump-icon",{"class":[1],"library":[1],"name":[1],"category":[1],"size":[1],"label":[1],"src":[1]}]]],["jump-card-ecommerce.cjs",[[1,"jump-card-ecommerce",{"onlyIconButton":[4,"only-icon-button"],"hasBackground":[4,"has-background"],"badge":[1],"favorite":[1540],"hasFavorite":[4,"has-favorite"],"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"]]]]],["jump-filter.cjs",[[1,"jump-filter",{"direction":[1],"filterHeading":[1,"filter-heading"],"filterButtonLabel":[1,"filter-button-label"],"filterButtonIcon":[1,"filter-button-icon"],"mobileThreshold":[2,"mobile-threshold"],"filters":[8],"activeFilters":[32],"showMobileFilters":[32],"isMobile":[32],"getFilters":[64]},[[0,"jump-filterchange","filterChangeHandler"],[9,"resize","handleResize"]],{"showMobileFilters":["watchHandler"]}]]],["jump-filtergroup.cjs",[[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"]}]]],["jump-pagination.cjs",[[1,"jump-pagination",{"pagLabel":[1,"pag-label"],"last":[2],"showFirstAndLast":[4,"show-first-and-last"],"current":[32]},null,{"current":["watchcurrent"]}]]],["jump-pagination-table.cjs",[[0,"jump-pagination-table",{"elementsRanges":[1,"elements-ranges"],"pagLabel":[513,"pag-label"],"labelElementsPerPage":[513,"label-elements-per-page"],"total":[514],"first":[514],"last":[514],"showFirstAndLast":[516,"show-first-and-last"],"elementsRangesArray":[32],"elPerPage":[32]},null,{"elementsRanges":["elementsRangesChanged"],"elPerPage":["elPerPageChanged"]}]]],["jump-quantity.cjs",[[65,"jump-quantity",{"min":[2],"max":[2],"step":[2],"label":[1],"type":[1],"variant":[1],"showButtons":[4,"show-buttons"],"value":[2],"getValue":[64],"reset":[64]},null,{"value":["onValueChange"]}]]],["jump-accordion.cjs",[[1,"jump-accordion",{"variant":[1],"summary":[1],"disabled":[4],"open":[516],"icon":[1],"identifier":[1]},[[0,"sl-show","handleShow"]]]]],["jump-tab-item.cjs",[[1,"jump-tab-item",{"identifier":[1],"iconName":[1,"icon-name"],"iconPosition":[1,"icon-position"],"label":[1],"active":[4],"disabled":[4],"variant":[32]}]]],["jump-accordion-group.cjs",[[1,"jump-accordion-group",{"variant":[1],"groupIdentifier":[1,"group-identifier"]}]]],["jump-card.cjs",[[4,"jump-card",{"horizontal":[4],"dark":[4],"shadow":[4],"border":[4],"borderRadius":[4,"border-radius"],"topBorderContentRadius":[4,"top-border-content-radius"],"boxed":[4],"roundedMedia":[4,"rounded-media"],"imgSrc":[1,"img-src"],"imgAlt":[1,"img-alt"],"videoSrc":[1,"video-src"]}]]],["jump-card-ecommerce-option.cjs",[[1,"jump-card-ecommerce-option",{"code":[1],"imgUrl":[1,"img-url"],"label":[1],"sku":[1],"taxonomy":[1]}]]],["jump-filter-checkbox.cjs",[[1,"jump-filter-checkbox",{"value":[1],"label":[1],"checked":[516],"count":[8],"isChecked":[64]}]]],["jump-tab.cjs",[[1,"jump-tab",{"tabGroupName":[1,"tab-group-name"],"variant":[1]},[[0,"jump-change-active-tab","changeActiveTabHandler"]]]]],["jump-tab-panel.cjs",[[1,"jump-tab-panel",{"identifier":[1],"active":[4]}]]],["jump-badge.cjs",[[1,"jump-badge",{"label":[1],"variant":[513],"dimension":[513],"soft":[516],"outline":[516]}]]]], options);
|
|
12
12
|
};
|
|
13
13
|
|
|
14
14
|
exports.setNonce = index.setNonce;
|
|
@@ -1,11 +1,40 @@
|
|
|
1
|
+
:host {
|
|
2
|
+
--primary-standard: var(--secondary-hard, #435171);
|
|
3
|
+
--jump-button-background-hover: red;
|
|
4
|
+
--bg-drawer: var(--bg-drawer, #fff);
|
|
5
|
+
}
|
|
1
6
|
:host h3 {
|
|
2
7
|
margin: 0;
|
|
3
8
|
}
|
|
4
9
|
|
|
5
10
|
.filtersDrawer {
|
|
11
|
+
position: fixed;
|
|
6
12
|
display: flex;
|
|
7
13
|
flex-direction: column;
|
|
8
14
|
gap: 1rem;
|
|
15
|
+
left: -100vw;
|
|
16
|
+
top: 0;
|
|
17
|
+
height: --webkit-fill-available;
|
|
18
|
+
transition: 0.3s all ease-in-out;
|
|
19
|
+
background-color: var(--bg-drawer, #fff);
|
|
20
|
+
padding: 1rem;
|
|
21
|
+
width: 100%;
|
|
22
|
+
max-width: 240px;
|
|
23
|
+
box-shadow: 8px 0 15px 0 rgba(0, 0, 0, 0.1490196078);
|
|
24
|
+
z-index: 2;
|
|
25
|
+
}
|
|
26
|
+
.filtersDrawer[aria-hidden=false] {
|
|
27
|
+
left: 0;
|
|
28
|
+
transition: 0.3s all ease-in-out;
|
|
29
|
+
}
|
|
30
|
+
@media (min-width: 768px) {
|
|
31
|
+
.filtersDrawer {
|
|
32
|
+
position: relative;
|
|
33
|
+
left: 0;
|
|
34
|
+
height: auto;
|
|
35
|
+
max-width: initial;
|
|
36
|
+
box-shadow: none;
|
|
37
|
+
}
|
|
9
38
|
}
|
|
10
39
|
.filtersDrawer .filtersDrawer__header {
|
|
11
40
|
display: flex;
|
|
@@ -20,6 +20,19 @@ export class JumpFilter {
|
|
|
20
20
|
handleResize() {
|
|
21
21
|
this.isMobile = window.innerWidth < this.mobileThreshold;
|
|
22
22
|
}
|
|
23
|
+
watchHandler(newValue, oldValue) {
|
|
24
|
+
var _a, _b, _c, _d;
|
|
25
|
+
if (newValue !== oldValue) {
|
|
26
|
+
if (newValue) {
|
|
27
|
+
(_a = this.mobileToggle) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-expanded', 'true');
|
|
28
|
+
(_b = this.filtersDrawer) === null || _b === void 0 ? void 0 : _b.setAttribute('aria-hidden', 'false');
|
|
29
|
+
}
|
|
30
|
+
else {
|
|
31
|
+
(_c = this.mobileToggle) === null || _c === void 0 ? void 0 : _c.setAttribute('aria-expanded', 'false');
|
|
32
|
+
(_d = this.filtersDrawer) === null || _d === void 0 ? void 0 : _d.setAttribute('aria-hidden', 'true');
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
}
|
|
23
36
|
/**
|
|
24
37
|
* Get the active filters from the component
|
|
25
38
|
*/
|
|
@@ -27,21 +40,12 @@ export class JumpFilter {
|
|
|
27
40
|
return this.filters;
|
|
28
41
|
}
|
|
29
42
|
componentDidLoad() {
|
|
30
|
-
this.
|
|
31
|
-
}
|
|
32
|
-
toggleMobileFilters() {
|
|
33
|
-
if (this.mobileToggle) {
|
|
34
|
-
this.mobileToggle.addEventListener('click', () => {
|
|
35
|
-
if (!this.isMobile)
|
|
36
|
-
return;
|
|
37
|
-
this.showMobileFilters = !this.showMobileFilters;
|
|
38
|
-
});
|
|
39
|
-
}
|
|
43
|
+
this.handleResize();
|
|
40
44
|
}
|
|
41
45
|
render() {
|
|
42
|
-
return (h(Host, { key: '
|
|
43
|
-
h("jump-icon", { key: '
|
|
44
|
-
h("div", { key: '
|
|
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-icon", { key: '7175bf68ccc5cba19384ac74de269a83a9321f9c', library: "fa", category: "regular", name: this.filterButtonIcon, size: "small" }), 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
|
+
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' }))));
|
|
45
49
|
}
|
|
46
50
|
static get is() { return "jump-filter"; }
|
|
47
51
|
static get encapsulation() { return "shadow"; }
|
|
@@ -194,6 +198,12 @@ export class JumpFilter {
|
|
|
194
198
|
}
|
|
195
199
|
};
|
|
196
200
|
}
|
|
201
|
+
static get watchers() {
|
|
202
|
+
return [{
|
|
203
|
+
"propName": "showMobileFilters",
|
|
204
|
+
"methodName": "watchHandler"
|
|
205
|
+
}];
|
|
206
|
+
}
|
|
197
207
|
static get listeners() {
|
|
198
208
|
return [{
|
|
199
209
|
"name": "jump-filterchange",
|
|
@@ -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,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"jump-filter.js","sourceRoot":"","sources":["../../../src/components/jump-filter/jump-filter.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAOvF,MAAM,OAAO,UAAU;;yBAE0B,UAAU;6BACzB,YAAY;iCACR,QAAQ;gCACT,SAAS;+BACV,GAAG;;6BAGJ,CAAC;iCACI,KAAK;wBACd,KAAK;;IAMlC,mBAAmB,CAAC,KAAkB;QACpC,8FAA8F;QAC9F,IAAI,CAAC,OAAO,mCAAO,IAAI,CAAC,OAAO,KAAE,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,GAAC,CAAC;QAC3E,OAAO,CAAC,GAAG,CAAC,0CAA0C,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QAItE,oCAAoC;IACtC,CAAC;IAGD,YAAY;QACV,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC,UAAU,GAAG,IAAI,CAAC,eAAe,CAAC;IAC3D,CAAC;IAGD,YAAY,CAAC,QAAiB,EAAE,QAAiB;;QAC/C,IAAI,QAAQ,KAAK,QAAQ,EAAE,CAAC;YAC1B,IAAI,QAAQ,EAAE,CAAC;gBACb,MAAA,IAAI,CAAC,YAAY,0CAAE,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;gBACzD,MAAA,IAAI,CAAC,aAAa,0CAAE,YAAY,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC;YAC3D,CAAC;iBAAM,CAAC;gBACN,MAAA,IAAI,CAAC,YAAY,0CAAE,YAAY,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;gBAC1D,MAAA,IAAI,CAAC,aAAa,0CAAE,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;YAC1D,CAAC;QACH,CAAC;IACH,CAAC;IAED;;OAEG;IAEH,KAAK,CAAC,UAAU;QACd,OAAO,IAAI,CAAC,OAAO,CAAC;IACtB,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,aAAa,EAAE,IAAI,CAAC,iBAAiB;YACxC,IAAI,CAAC,QAAQ,IAAI,oEAChB,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,GAAE,IAAI,CAAC,YAAY,GAAG,EAAE,CAAA,CAAA,CAAC,EACrC,QAAQ,EAAE,IAAI,CAAC,gBAAgB,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,QAC5D,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,iBAAiB,GAAG,CAAC,IAAI,CAAC,iBAAiB;gBAC/D,6DAAM,IAAI,EAAC,QAAQ;oBAChB,IAAI,CAAC,gBAAgB;wBACpB,kEAAW,OAAO,EAAC,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAC,IAAI,EAAE,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAC,OAAO,GAAa;oBAClG,IAAI,CAAC,iBAAiB,CAClB;gBACP,6DAAM,IAAI,EAAC,QAAQ,IAChB,IAAI,CAAC,aAAa,GAAG,CAAC,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-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"]}
|
|
@@ -1,24 +1,36 @@
|
|
|
1
1
|
:host {
|
|
2
2
|
--hidden-display: none;
|
|
3
|
+
--font-family: var(--ff-primary, "Inter"), serif;
|
|
4
|
+
--font-size: var(--fs-400, 16px);
|
|
5
|
+
--line-height: var(--lh-300, 1.2);
|
|
6
|
+
--font-weight: var(--fw-900, 700);
|
|
7
|
+
--color: var(--neutral-grey-primary, #282828);
|
|
8
|
+
--distance-items: .25rem;
|
|
3
9
|
display: block;
|
|
4
10
|
}
|
|
5
11
|
:host h5 {
|
|
6
|
-
font-family: var(--
|
|
7
|
-
font-size: var(--
|
|
8
|
-
line-height: var(--
|
|
9
|
-
font-weight: var(--
|
|
12
|
+
font-family: var(--font-family);
|
|
13
|
+
font-size: var(--font-size);
|
|
14
|
+
line-height: var(--line-height);
|
|
15
|
+
font-weight: var(--font-weight);
|
|
16
|
+
color: var(--color);
|
|
17
|
+
margin: 0 0 var(--distance-items, 0.25rem);
|
|
10
18
|
}
|
|
11
19
|
:host slot {
|
|
12
20
|
display: flex;
|
|
13
21
|
flex-direction: column;
|
|
14
|
-
gap: 0.25rem;
|
|
15
22
|
margin-bottom: 1rem;
|
|
16
23
|
}
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
24
|
+
:host ::slotted(.item) {
|
|
25
|
+
max-height: 500px;
|
|
26
|
+
transition: all 0.3s ease-in-out;
|
|
27
|
+
margin-top: var(--distance-items, 0.25rem);
|
|
28
|
+
display: flex;
|
|
29
|
+
align-items: center;
|
|
30
|
+
justify-content: flex-start;
|
|
31
|
+
gap: 0.25rem;
|
|
20
32
|
}
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
33
|
+
:host ::slotted(.hidden) {
|
|
34
|
+
max-height: 0;
|
|
35
|
+
overflow: hidden;
|
|
24
36
|
}
|
|
@@ -7,11 +7,15 @@ export class JumpFiltergroup {
|
|
|
7
7
|
this.lessLabel = 'Mostra meno';
|
|
8
8
|
this.maxElements = 8;
|
|
9
9
|
this.variant = 'default';
|
|
10
|
+
this.label = this.otherLabel;
|
|
10
11
|
this.values = [];
|
|
11
12
|
this.value = '';
|
|
12
13
|
this.slotItems = undefined;
|
|
13
14
|
this.inputs = [];
|
|
14
|
-
this.showMore =
|
|
15
|
+
this.showMore = false;
|
|
16
|
+
}
|
|
17
|
+
watchShowMore(newValue) {
|
|
18
|
+
this.label = newValue ? this.lessLabel : this.otherLabel;
|
|
15
19
|
}
|
|
16
20
|
async getValues() {
|
|
17
21
|
return this.values;
|
|
@@ -25,19 +29,21 @@ export class JumpFiltergroup {
|
|
|
25
29
|
async getName() {
|
|
26
30
|
return this.name;
|
|
27
31
|
}
|
|
28
|
-
toggleHiddenItems(
|
|
32
|
+
toggleHiddenItems() {
|
|
29
33
|
this.slotItemsWrapper.assignedElements().forEach((item, index) => {
|
|
30
|
-
if (index > this.maxElements
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
34
|
+
if (index > this.maxElements) {
|
|
35
|
+
if (this.showMore) {
|
|
36
|
+
item.classList.remove('hidden');
|
|
37
|
+
}
|
|
38
|
+
else {
|
|
39
|
+
item.classList.add('hidden');
|
|
40
|
+
}
|
|
35
41
|
}
|
|
36
42
|
});
|
|
37
43
|
}
|
|
38
44
|
handleShowMore() {
|
|
39
45
|
this.showMore = !this.showMore;
|
|
40
|
-
this.toggleHiddenItems(
|
|
46
|
+
this.toggleHiddenItems();
|
|
41
47
|
}
|
|
42
48
|
handleChange(event) {
|
|
43
49
|
const target = event.target;
|
|
@@ -93,11 +99,12 @@ export class JumpFiltergroup {
|
|
|
93
99
|
this.slotItemsWrapper.addEventListener('jump-checkbox-change', this.handleCheckboxChange.bind(this));
|
|
94
100
|
let index = 0;
|
|
95
101
|
this.slotItems.forEach((item) => {
|
|
102
|
+
item.classList.add('item');
|
|
96
103
|
if (index > this.maxElements) {
|
|
97
|
-
|
|
98
|
-
item.style.display = 'none';
|
|
104
|
+
item.classList.add('hidden');
|
|
99
105
|
}
|
|
100
|
-
if (item.tagName
|
|
106
|
+
//if (item.tagName start with jump-
|
|
107
|
+
if (item.tagName === 'INPUT' || item.tagName === 'SELECT' || item.tagName.startsWith('JUMP-') || item.tagName === 'LABEL') {
|
|
101
108
|
this.inputs.push(item);
|
|
102
109
|
if (item.tagName === 'INPUT' && item.type === 'radio') {
|
|
103
110
|
item.name = this.name;
|
|
@@ -119,10 +126,10 @@ export class JumpFiltergroup {
|
|
|
119
126
|
//this.toggleHiddenItems();
|
|
120
127
|
}
|
|
121
128
|
render() {
|
|
122
|
-
return (h(Host, { key: '
|
|
123
|
-
h("jump-button", { key: '
|
|
129
|
+
return (h(Host, { key: '7d3b79b574cb9b46501ea0482c6d3cc1fbb98e1f' }, this.heading && h("h5", { key: '68f2dd39f94fb905d9ea151cfbf946080abf1883' }, this.heading), h("div", { key: '3975c6ca04b3bd077eef48dd93311299c4cb2308', class: "filterGroup" }, h("slot", { key: 'c45798ed4fa32dc7baa18aa183740b5ad589b87b', ref: (el) => (this.slotItemsWrapper = el) })), this.inputs.length > this.maxElements &&
|
|
130
|
+
h("jump-button", { key: '068c3456f098fd7d58f943964338ff0416507797', variant: "primary", size: "small", text: true, name: this.label, "aria-label": this.label, ref: (showMoreBtn) => {
|
|
124
131
|
this.showMoreBtn = showMoreBtn;
|
|
125
|
-
}, onClick: () => this.handleShowMore() }, this.
|
|
132
|
+
}, onClick: () => this.handleShowMore() }, this.label, h("jump-icon", { key: '7e0b01f499ff2af6948120711d09f84dd70e4039', slot: "suffix", name: !this.showMore ? 'chevron-down' : 'chevron-up' }))));
|
|
126
133
|
}
|
|
127
134
|
static get is() { return "jump-filtergroup"; }
|
|
128
135
|
static get encapsulation() { return "shadow"; }
|
|
@@ -250,6 +257,7 @@ export class JumpFiltergroup {
|
|
|
250
257
|
}
|
|
251
258
|
static get states() {
|
|
252
259
|
return {
|
|
260
|
+
"label": {},
|
|
253
261
|
"values": {},
|
|
254
262
|
"value": {},
|
|
255
263
|
"slotItems": {},
|
|
@@ -347,5 +355,11 @@ export class JumpFiltergroup {
|
|
|
347
355
|
}
|
|
348
356
|
};
|
|
349
357
|
}
|
|
358
|
+
static get watchers() {
|
|
359
|
+
return [{
|
|
360
|
+
"propName": "showMore",
|
|
361
|
+
"methodName": "watchShowMore"
|
|
362
|
+
}];
|
|
363
|
+
}
|
|
350
364
|
}
|
|
351
365
|
//# sourceMappingURL=jump-filtergroup.js.map
|