@jumpgroup/jump-design-system 0.3.77 → 0.3.79
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/{index-230bcbae.js → index-e9479989.js} +5 -5
- package/dist/cjs/index-e9479989.js.map +1 -0
- package/dist/cjs/jump-accordion-group.cjs.entry.js +1 -1
- package/dist/cjs/jump-accordion.cjs.entry.js +1 -1
- package/dist/cjs/jump-badge.cjs.entry.js +1 -1
- package/dist/cjs/jump-button_2.cjs.entry.js +1 -1
- package/dist/cjs/jump-card-ecommerce-option.cjs.entry.js +1 -1
- package/dist/cjs/jump-card-ecommerce.cjs.entry.js +1 -1
- package/dist/cjs/jump-card.cjs.entry.js +1 -1
- package/dist/cjs/jump-design-system.cjs.js +2 -2
- package/dist/cjs/jump-filter-checkbox.cjs.entry.js +1 -1
- package/dist/cjs/jump-filter-range.cjs.entry.js +1 -1
- package/dist/cjs/jump-filter-select.cjs.entry.js +61 -21
- package/dist/cjs/jump-filter-select.cjs.entry.js.map +1 -1
- package/dist/cjs/jump-filter-switch.cjs.entry.js +2 -2
- package/dist/cjs/jump-filter.cjs.entry.js +1 -1
- package/dist/cjs/jump-filtergroup.cjs.entry.js +4 -4
- package/dist/cjs/jump-navbar.cjs.entry.js +6 -6
- package/dist/cjs/jump-pagination-table.cjs.entry.js +4 -4
- package/dist/cjs/jump-pagination.cjs.entry.js +4 -4
- package/dist/cjs/jump-quantity.cjs.entry.js +4 -4
- package/dist/cjs/jump-search-bar-dropdown-item.cjs.entry.js +2 -2
- package/dist/cjs/jump-search-bar-mobile.cjs.entry.js +5 -5
- package/dist/cjs/jump-search-bar.cjs.entry.js +3 -3
- package/dist/cjs/jump-search-bar.cjs.entry.js.map +1 -1
- package/dist/cjs/jump-side-cart-example.cjs.entry.js +2 -2
- package/dist/cjs/jump-side-cart.cjs.entry.js +1 -1
- package/dist/cjs/jump-tab-item.cjs.entry.js +3 -3
- package/dist/cjs/jump-tab-panel.cjs.entry.js +2 -2
- package/dist/cjs/jump-tab.cjs.entry.js +2 -2
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/collection/components/jump-filter-select/jump-filter-select.js +60 -21
- package/dist/collection/components/jump-filter-select/jump-filter-select.js.map +1 -1
- package/dist/collection/components/jump-filter-select/jump-filter-select.stories.js +28 -10
- package/dist/collection/components/jump-filter-switch/jump-filter-switch.js +1 -1
- package/dist/collection/components/jump-filtergroup/jump-filtergroup.js +3 -3
- package/dist/collection/components/jump-navbar/jump-navbar.js +5 -5
- package/dist/collection/components/jump-pagination/jump-pagination.js +3 -3
- package/dist/collection/components/jump-pagination-table/jump-pagination-table.js +3 -3
- package/dist/collection/components/jump-quantity/jump-quantity.js +3 -3
- package/dist/collection/components/jump-search-bar/jump-search-bar.js +20 -3
- package/dist/collection/components/jump-search-bar/jump-search-bar.js.map +1 -1
- package/dist/collection/components/jump-search-bar/jump-search-bar.stories.js +9 -0
- package/dist/collection/components/jump-search-bar/jump-search-bar.stories.js.map +1 -1
- package/dist/collection/components/jump-search-bar-dropdown-item/jump-search-bar-dropdown-item.js +1 -1
- package/dist/collection/components/jump-search-bar-mobile/jump-search-bar-mobile.js +4 -4
- package/dist/collection/components/jump-side-cart/jump-side-cart.example.js +1 -1
- package/dist/collection/components/jump-tab/jump-tab.js +1 -1
- package/dist/collection/components/jump-tab-item/jump-tab-item.js +2 -2
- package/dist/collection/components/jump-tab-panel/jump-tab-panel.js +1 -1
- package/dist/collection/utils/utils.js +4 -0
- package/dist/collection/utils/utils.js.map +1 -1
- package/dist/components/jump-filter-select.js +60 -21
- package/dist/components/jump-filter-select.js.map +1 -1
- package/dist/components/jump-filter-switch.js +1 -1
- package/dist/components/jump-filtergroup.js +3 -3
- package/dist/components/jump-navbar.js +5 -5
- package/dist/components/jump-pagination-table.js +3 -3
- package/dist/components/jump-pagination.js +3 -3
- package/dist/components/jump-quantity.js +3 -3
- package/dist/components/jump-search-bar-dropdown-item.js +1 -1
- package/dist/components/jump-search-bar-mobile.js +4 -4
- package/dist/components/jump-search-bar.js +3 -3
- package/dist/components/jump-search-bar.js.map +1 -1
- package/dist/components/jump-side-cart-example.js +1 -1
- package/dist/components/jump-tab-item.js +2 -2
- package/dist/components/jump-tab-panel.js +1 -1
- package/dist/components/jump-tab.js +1 -1
- package/dist/esm/{index-4363ffe4.js → index-a94b3471.js} +5 -5
- package/dist/esm/index-a94b3471.js.map +1 -0
- package/dist/esm/jump-accordion-group.entry.js +1 -1
- package/dist/esm/jump-accordion.entry.js +1 -1
- package/dist/esm/jump-badge.entry.js +1 -1
- package/dist/esm/jump-button_2.entry.js +1 -1
- package/dist/esm/jump-card-ecommerce-option.entry.js +1 -1
- package/dist/esm/jump-card-ecommerce.entry.js +1 -1
- package/dist/esm/jump-card.entry.js +1 -1
- package/dist/esm/jump-design-system.js +3 -3
- package/dist/esm/jump-filter-checkbox.entry.js +1 -1
- package/dist/esm/jump-filter-range.entry.js +1 -1
- package/dist/esm/jump-filter-select.entry.js +61 -21
- package/dist/esm/jump-filter-select.entry.js.map +1 -1
- package/dist/esm/jump-filter-switch.entry.js +2 -2
- package/dist/esm/jump-filter.entry.js +1 -1
- package/dist/esm/jump-filtergroup.entry.js +4 -4
- package/dist/esm/jump-navbar.entry.js +6 -6
- package/dist/esm/jump-pagination-table.entry.js +4 -4
- package/dist/esm/jump-pagination.entry.js +4 -4
- package/dist/esm/jump-quantity.entry.js +4 -4
- package/dist/esm/jump-search-bar-dropdown-item.entry.js +2 -2
- package/dist/esm/jump-search-bar-mobile.entry.js +5 -5
- package/dist/esm/jump-search-bar.entry.js +3 -3
- package/dist/esm/jump-search-bar.entry.js.map +1 -1
- package/dist/esm/jump-side-cart-example.entry.js +2 -2
- package/dist/esm/jump-side-cart.entry.js +1 -1
- package/dist/esm/jump-tab-item.entry.js +3 -3
- package/dist/esm/jump-tab-panel.entry.js +2 -2
- package/dist/esm/jump-tab.entry.js +2 -2
- package/dist/esm/loader.js +3 -3
- 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-048d87ee.entry.js → p-0140b32c.entry.js} +2 -2
- package/dist/jump-design-system/{p-d40c487f.entry.js → p-02ab8fb7.entry.js} +2 -2
- package/dist/jump-design-system/p-038a2a14.entry.js +2 -0
- package/dist/jump-design-system/p-038a2a14.entry.js.map +1 -0
- package/dist/jump-design-system/{p-e7b3ebb1.entry.js → p-0d86819c.entry.js} +2 -2
- package/dist/jump-design-system/{p-79e5dac6.entry.js → p-18c359e3.entry.js} +2 -2
- package/dist/jump-design-system/{p-ae1435a6.entry.js → p-1ef1fc5c.entry.js} +2 -2
- package/dist/jump-design-system/{p-1f824808.entry.js → p-264fa972.entry.js} +2 -2
- package/dist/jump-design-system/{p-e7d1e3d8.entry.js → p-421ebb5a.entry.js} +2 -2
- package/dist/jump-design-system/{p-5092836a.entry.js → p-55fcebb1.entry.js} +5 -5
- package/dist/jump-design-system/p-55fcebb1.entry.js.map +1 -0
- package/dist/jump-design-system/{p-5fb2a919.entry.js → p-629835ac.entry.js} +2 -2
- package/dist/jump-design-system/{p-a7d5e687.entry.js → p-6905cee4.entry.js} +2 -2
- package/dist/jump-design-system/{p-6e497dd6.entry.js → p-6b8fccdb.entry.js} +2 -2
- package/dist/jump-design-system/{p-9035201c.entry.js → p-6d82feb3.entry.js} +2 -2
- package/dist/jump-design-system/{p-8f02eb5e.entry.js → p-7ac9382b.entry.js} +2 -2
- package/dist/jump-design-system/{p-48bb1cbf.entry.js → p-7e35d9f1.entry.js} +3 -3
- package/dist/jump-design-system/{p-a0237406.entry.js → p-87903fff.entry.js} +2 -2
- package/dist/jump-design-system/{p-40ca24a6.js → p-98d5dd1f.js} +3 -3
- package/dist/jump-design-system/{p-40ca24a6.js.map → p-98d5dd1f.js.map} +1 -1
- package/dist/jump-design-system/{p-66c79fb9.entry.js → p-b3765945.entry.js} +4 -4
- package/dist/jump-design-system/{p-b03b8328.entry.js → p-bb18f919.entry.js} +2 -2
- package/dist/jump-design-system/{p-0cc799f3.entry.js → p-bd692b1f.entry.js} +2 -2
- package/dist/jump-design-system/{p-83b3a560.entry.js → p-cdc5daf7.entry.js} +2 -2
- package/dist/jump-design-system/p-d0ea0f54.entry.js +2 -0
- package/dist/jump-design-system/p-d1fc1ddf.entry.js +2 -0
- package/dist/jump-design-system/{p-37b7b679.entry.js → p-d70793e3.entry.js} +2 -2
- package/dist/jump-design-system/{p-916742f5.entry.js → p-f36de1a8.entry.js} +2 -2
- package/dist/jump-design-system/{p-cdc53aae.entry.js → p-ff62e250.entry.js} +2 -2
- package/dist/jump-design-system-elements.json +4 -0
- package/dist/types/components/jump-filter-select/jump-filter-select.d.ts +1 -6
- package/dist/types/components/jump-search-bar/jump-search-bar.stories.d.ts +13 -0
- package/dist/types/components.d.ts +2 -0
- package/package.json +1 -1
- package/dist/cjs/index-230bcbae.js.map +0 -1
- package/dist/esm/index-4363ffe4.js.map +0 -1
- package/dist/jump-design-system/p-5092836a.entry.js.map +0 -1
- package/dist/jump-design-system/p-5b54b1f4.entry.js +0 -2
- package/dist/jump-design-system/p-5b54b1f4.entry.js.map +0 -1
- package/dist/jump-design-system/p-6134b84b.entry.js +0 -2
- package/dist/jump-design-system/p-64024e67.entry.js +0 -2
- /package/dist/jump-design-system/{p-048d87ee.entry.js.map → p-0140b32c.entry.js.map} +0 -0
- /package/dist/jump-design-system/{p-d40c487f.entry.js.map → p-02ab8fb7.entry.js.map} +0 -0
- /package/dist/jump-design-system/{p-e7b3ebb1.entry.js.map → p-0d86819c.entry.js.map} +0 -0
- /package/dist/jump-design-system/{p-79e5dac6.entry.js.map → p-18c359e3.entry.js.map} +0 -0
- /package/dist/jump-design-system/{p-ae1435a6.entry.js.map → p-1ef1fc5c.entry.js.map} +0 -0
- /package/dist/jump-design-system/{p-1f824808.entry.js.map → p-264fa972.entry.js.map} +0 -0
- /package/dist/jump-design-system/{p-e7d1e3d8.entry.js.map → p-421ebb5a.entry.js.map} +0 -0
- /package/dist/jump-design-system/{p-5fb2a919.entry.js.map → p-629835ac.entry.js.map} +0 -0
- /package/dist/jump-design-system/{p-a7d5e687.entry.js.map → p-6905cee4.entry.js.map} +0 -0
- /package/dist/jump-design-system/{p-6e497dd6.entry.js.map → p-6b8fccdb.entry.js.map} +0 -0
- /package/dist/jump-design-system/{p-9035201c.entry.js.map → p-6d82feb3.entry.js.map} +0 -0
- /package/dist/jump-design-system/{p-8f02eb5e.entry.js.map → p-7ac9382b.entry.js.map} +0 -0
- /package/dist/jump-design-system/{p-48bb1cbf.entry.js.map → p-7e35d9f1.entry.js.map} +0 -0
- /package/dist/jump-design-system/{p-a0237406.entry.js.map → p-87903fff.entry.js.map} +0 -0
- /package/dist/jump-design-system/{p-66c79fb9.entry.js.map → p-b3765945.entry.js.map} +0 -0
- /package/dist/jump-design-system/{p-b03b8328.entry.js.map → p-bb18f919.entry.js.map} +0 -0
- /package/dist/jump-design-system/{p-0cc799f3.entry.js.map → p-bd692b1f.entry.js.map} +0 -0
- /package/dist/jump-design-system/{p-83b3a560.entry.js.map → p-cdc5daf7.entry.js.map} +0 -0
- /package/dist/jump-design-system/{p-64024e67.entry.js.map → p-d0ea0f54.entry.js.map} +0 -0
- /package/dist/jump-design-system/{p-6134b84b.entry.js.map → p-d1fc1ddf.entry.js.map} +0 -0
- /package/dist/jump-design-system/{p-37b7b679.entry.js.map → p-d70793e3.entry.js.map} +0 -0
- /package/dist/jump-design-system/{p-916742f5.entry.js.map → p-f36de1a8.entry.js.map} +0 -0
- /package/dist/jump-design-system/{p-cdc53aae.entry.js.map → p-ff62e250.entry.js.map} +0 -0
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, H as Host } from './index-
|
|
1
|
+
import { r as registerInstance, c as createEvent, h, H as Host } from './index-a94b3471.js';
|
|
2
2
|
import { i, c as component_styles_default, _ as __decorateClass, w as watch, S as ShoelaceElement, x, r, n } from './directive-helpers-d80c2187.js';
|
|
3
3
|
import { f as form_control_styles_default, F as FormControlController, H as HasSlotController, o, d as defaultValue } from './if-defined-85ab7b97.js';
|
|
4
4
|
import { e, a as e$1 } from './class-map-a2676e27.js';
|
|
@@ -525,7 +525,7 @@ const JumpFilterSwitch = class {
|
|
|
525
525
|
return this.name;
|
|
526
526
|
}
|
|
527
527
|
render() {
|
|
528
|
-
return (h(Host, { key: '
|
|
528
|
+
return (h(Host, { key: '8f226d3fe4682e7e62eb4a389e2951b6aaf41566', ref: (host) => (this.host = host) }, this.value && this.label && (h("sl-switch", { key: 'b12cb3cc7785e582da5917ebec5ff88c0dd91b30', value: this.value, ref: (el) => (this.el = el), checked: this.checked, disabled: this.disabled }, this.label))));
|
|
529
529
|
}
|
|
530
530
|
static get watchers() { return {
|
|
531
531
|
"checked": ["checkedChanged"]
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, h, H as Host } from './index-
|
|
1
|
+
import { r as registerInstance, h, H as Host } from './index-a94b3471.js';
|
|
2
2
|
|
|
3
3
|
const jumpFilterCss = ":host{--primary-standard:var(--secondary-hard, #435171);--jump-button-background-hover:red;--bg-drawer:var(--bg-drawer, #fff);--header-height:var(--header-height, 80px);--drawer-width:var(--drawer-width, 240px);--overlay-bg-color:var(--overlay-bg-color, rgba(0, 0, 0, 0.35))}:host h3{margin:0}.filtersDrawer__overlay{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);background-color:var(--overlay-bg-color, rgba(0, 0, 0, 0.35));z-index:1;width:100vw;height:100vh;display:none;opacity:0;transition:opacity 0.3s ease-in-out}.filtersDrawer__overlay.filtersDrawer__overlay--active{display:block}.filtersDrawer__overlay.filtersDrawer__overlay--active{opacity:1}.filtersDrawer{position:fixed;display:flex;flex-direction:column;gap:2.5rem;left:-100vw;top:0;height:-webkit-fill-available;max-height:calc(100vh - var(--header-height));transition:0.3s all ease-in-out;background-color:var(--bg-drawer, #fff);padding:1rem;width:100%;max-width:var(--drawer-width);box-shadow:8px 0 15px 0 rgba(0, 0, 0, 0.1490196078);z-index:2;overflow:auto}.filtersDrawer[aria-hidden=false]{left:0;right:0;width:auto;transition:0.3s all ease-in-out}.filtersDrawer[aria-hidden=false] .filtersDrawer__close{position:fixed;top:calc(var(--header-height) + 1rem);left:calc(var(--drawer-width) - 2rem)}@media (min-width: 768px){.filtersDrawer{position:relative;left:0;height:auto;max-width:initial;max-height:initial;box-shadow:none}}@media (max-width: 767px){.filtersDrawer{top:var(--header-height)}}.filtersDrawer .filtersDrawer__header{display:flex;justify-content:flex-start;align-items:center;gap:0.5rem}";
|
|
4
4
|
const JumpFilterStyle0 = jumpFilterCss;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, H as Host } from './index-
|
|
1
|
+
import { r as registerInstance, c as createEvent, h, H as Host } from './index-a94b3471.js';
|
|
2
2
|
|
|
3
3
|
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}";
|
|
4
4
|
const JumpFiltergroupStyle0 = jumpFiltergroupCss;
|
|
@@ -132,10 +132,10 @@ const JumpFiltergroup = class {
|
|
|
132
132
|
//this.toggleHiddenItems();
|
|
133
133
|
}
|
|
134
134
|
render() {
|
|
135
|
-
return (h(Host, { key: '
|
|
136
|
-
h("jump-button", { key: '
|
|
135
|
+
return (h(Host, { key: '9d03f151bffb805154f063a84bd714da00d2cf9f' }, this.heading && h("h5", { key: '473a7d0a040e46b3259f1085e1864340b3b59fc9' }, this.heading), h("div", { key: '554a6625704319500a216ece1cc13aeb06d0fef4', class: "filterGroup" }, h("slot", { key: '213781fec2a1faa8aaafd87958ffbd1983eb1b14', ref: (el) => (this.slotItemsWrapper = el) })), this.inputs.length > this.maxElements &&
|
|
136
|
+
h("jump-button", { key: 'd26b6ce118a5bf19208cb96394fd5972a56cf4ab', variant: "primary", size: "small", text: true, name: this.label, "aria-label": this.label, ref: (showMoreBtn) => {
|
|
137
137
|
this.showMoreBtn = showMoreBtn;
|
|
138
|
-
}, onClick: () => this.handleShowMore() }, this.label, h("jump-icon", { key: '
|
|
138
|
+
}, onClick: () => this.handleShowMore() }, this.label, h("jump-icon", { key: 'bb7a17a36943ffac73e5889eb69016771a6612cf', slot: "suffix", name: !this.showMore ? 'chevron-down' : 'chevron-up' }))));
|
|
139
139
|
}
|
|
140
140
|
static get watchers() { return {
|
|
141
141
|
"showMore": ["watchShowMore"]
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, h, H as Host } from './index-
|
|
1
|
+
import { r as registerInstance, h, H as Host } from './index-a94b3471.js';
|
|
2
2
|
|
|
3
3
|
const jumpNavbarCss = ":host{--jump-navbar-height:var(--header-height, 100px);--jump-navbar-background:var(--bg-drawer, #fff);--jump-navbar-width:var(--drawer-width, 240px);--jump-navbar-shadow:8px 0 15px 0 #00000026;--jump-navbar-zindex:2;--jump-navbar-transition:0.3s all ease-in-out;--jump-navbar-gap:2.5rem;--jump-navbar-padding:1rem;--jump-navbar-close-top:calc(var(--header-height) + 1rem);--jump-navbar-close-left:calc(var(--drawer-width) - 2rem);--jump-navbar-close-gap:0.5rem}";
|
|
4
4
|
const JumpNavbarStyle0 = jumpNavbarCss;
|
|
@@ -24,14 +24,14 @@ const JumpNavbar = class {
|
|
|
24
24
|
}
|
|
25
25
|
render() {
|
|
26
26
|
var _a, _b;
|
|
27
|
-
return (h(Host, { key: '
|
|
28
|
-
h("div", { key: '
|
|
29
|
-
h("jump-button", { key: '
|
|
27
|
+
return (h(Host, { key: 'c3ca42acda8ec6b651b5aed19917da6f2e3b593d' }, h("jump-button", { key: 'a0bfb27d783b855384298cddea88bf8530dac309', variant: "primary", size: "small", text: true, href: this.logo['link'], target: (_a = this.logo['target']) !== null && _a !== void 0 ? _a : '_self' }, h("img", { key: '2341978b73481036ca8ff8705c18b532a258e0f2', src: this.logo['image_url'], alt: this.logo['alt'] })), this.isMobile &&
|
|
28
|
+
h("div", { key: '8c0f8a79828f53e0cddc70a282188c4795e626d7', class: "MobileMenuOffCanvas" }, h("div", { key: 'dd44366b3adc201a60f72e51d853ebc1ed492492', class: "MobileMenuOffCanvas__Header" }, "/* TODO: ricerca + pulsante chiusura + profilo utente con immagine */"), h("div", { key: '8fbd221bb8f3f574015c8d94976236f4557534ca', class: "MobileMenuOffCanvas__Navbar" }, this.navbar.cloneNode(true)), h("div", { key: '26e1fe3e3654d1d355780e09010fd9dbbcce91c8', class: "MobileMenuOffCanvas__Footer" }, "/* TODO: langswitcher */", this.mobileLogo &&
|
|
29
|
+
h("jump-button", { key: 'cc5738f24ab07fa9aa1e3a89b90e2310d3f570d2', variant: "primary", size: "small", text: true, href: this.mobileLogo['link'], target: (_b = this.mobileLogo['target']) !== null && _b !== void 0 ? _b : '_self' }, h("img", { key: 'f3dc96e3229fcdfd6a963b93d776d2611d87721b', src: this.mobileLogo['image_url'], alt: this.mobileLogo['alt'] })))), h("nav", { key: 'eb4c284f0e58f4a336c9076d47176f2660ef8c9c', ref: (el) => {
|
|
30
30
|
this.navbar = el;
|
|
31
|
-
} }, h("ul", { key: '
|
|
31
|
+
} }, h("ul", { key: 'e5745a9c684740c03b63431f250776ae7836779b' }, this.navItems.map((item) => (h("li", null, h("jump-button", { variant: "primary", size: "small", text: true, href: item.link, target: item.target, class: item.class }, item.text, this.secondaryNavItems.some(secondaryItem => secondaryItem.parent === item.id) &&
|
|
32
32
|
h("jump-icon", { slot: "suffix", library: "lucide", name: "chevron-down", size: "small" })), this.secondaryNavItems.map((secondaryItem) => (secondaryItem.parent === item.id &&
|
|
33
33
|
h("ul", { "data-parent": secondaryItem.parent }, secondaryItem.title &&
|
|
34
|
-
h("h4", null, secondaryItem.title), " /* TODO: utilizzare jump-heading? */", secondaryItem.items.map((subItem) => (h("li", null, h("jump-button", { variant: "primary", size: "small", text: true, href: subItem.link, target: subItem.target, class: subItem.class }, subItem.text)))))))))))), h("slot", { key: '
|
|
34
|
+
h("h4", null, secondaryItem.title), " /* TODO: utilizzare jump-heading? */", secondaryItem.items.map((subItem) => (h("li", null, h("jump-button", { variant: "primary", size: "small", text: true, href: subItem.link, target: subItem.target, class: subItem.class }, subItem.text)))))))))))), h("slot", { key: '09a7005e63bb12d5d1f8b35fa7db7178498359a2', name: "actions" }, h("slot", { key: '2dfabc1a5a007abb5b11b04e0b2457daae3938b4', name: "lang_switcher" }), h("slot", { key: '572997fa2c14881c73e39ca02bc233ac655d7214', name: "search" }), h("slot", { key: '4b5b99f65a35e86030b84a5c2500c68402f7aea4', name: "buttons" }), h("slot", { key: '838333c326920f01917c9d2f896c74e1d898cc9f', name: "cart" }))));
|
|
35
35
|
}
|
|
36
36
|
};
|
|
37
37
|
JumpNavbar.style = JumpNavbarStyle0;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, H as Host } from './index-
|
|
1
|
+
import { r as registerInstance, c as createEvent, h, H as Host } from './index-a94b3471.js';
|
|
2
2
|
|
|
3
3
|
const jumpPaginationTableCss = ":host{display:block}.JumpPaginationTable{--jump-pagination-table-label:var(--neutral-grey-secondary);--jump-pagination-table-arrows:var(--neutral-grey-secondary);--jump-pagination-table-arrows-disabled:var(--neutral-grey-disabled);font-family:var(--ff-primary)}.JumpPaginationTable__Wrapper{display:flex;justify-content:space-between}.JumpPaginationTable__Wrapper .elementsPerPage{display:flex;gap:1rem;align-items:center}.JumpPaginationTable__Wrapper .elementsPerPage label{color:var(--jump-pagination-table-label);font-size:var(--fs-300);font-weight:normal}.JumpPaginationTable__Wrapper .indicators{font-size:var(--fs-400);font-weight:normal;display:flex;justify-content:space-between;gap:20px;color:var(--jump-pagination-table-label)}.JumpPaginationTable__Wrapper .indicators .arrow{color:var(--jump-pagination-table-arrows);display:flex;align-items:center;gap:10px}.JumpPaginationTable__Wrapper .indicators .arrow button{background-color:transparent;border:none;cursor:pointer;padding:0px;display:flex;align-items:center}.JumpPaginationTable__Wrapper .indicators .arrow button:disabled{cursor:not-allowed;color:var(--jump-pagination-table-arrows-disabled)}.JumpPaginationTable__Wrapper .indicators .elements{color:var(--jump-pagination-table-label);display:flex;align-items:center;gap:5px}";
|
|
4
4
|
const JumpPaginationTableStyle0 = jumpPaginationTableCss;
|
|
@@ -77,9 +77,9 @@ const JumpPaginationTable = class {
|
|
|
77
77
|
/* --------------------- RENDER ------------------------------- */
|
|
78
78
|
render() {
|
|
79
79
|
var _a;
|
|
80
|
-
return (h(Host, { key: '
|
|
81
|
-
h("jump-button", { key: '
|
|
82
|
-
h("jump-button", { key: '
|
|
80
|
+
return (h(Host, { key: 'd127efd95559a5c741d63bd2b869b69a5b39c128', class: "JumpPaginationTable" }, h("div", { key: '6ae695734996467308c3ece3d931ea4773fb48f3', class: "JumpPaginationTable__Wrapper" }, h("div", { key: '20e32d72f26642116c5e1800ab1971f48cc1ed3e', class: "elementsPerPage" }, h("label", { key: 'f1836c0aedf64ac928cb6e7c27ca0af7b50f49f3', htmlFor: "elements" }, (_a = this.labelElementsPerPage) !== null && _a !== void 0 ? _a : 'Elements per page'), h("select", { key: 'e7bb459c1abbb5d2ee710519225379f336834c12', name: "elements", id: "elements", onChange: (e) => this.setElPerPage(e) }, this.elementsRangesArray.map((range) => (h("option", { value: range, selected: (this.elPerPage == range) && true }, range))))), h("div", { key: 'fe26f7119c313f7859fcf9effd7137d094dc4cee', class: "indicators" }, h("div", { key: 'b3ce48db1000836ae2ac10c870a1fe52419570b4', class: "elements" }, h("span", { key: 'ba414ac0d2b7133f1bcf9860807fbbb4c22745d4' }, h("span", { key: 'e3015bcb81df21d87950600a041140a165932742' }, this.first), " - ", h("span", { key: 'fb382f5773e9129dc4f3e7be6bca548d40140a1d' }, this.last), " ", this.pagLabel, " ", h("span", { key: '5bb6a635e9007f953c02bbbce227d34338d06598' }, this.total))), h("div", { key: '227fb2bad3a3357ee028e023a06df0f541d485d3', class: "arrow" }, this.showFirstAndLast &&
|
|
81
|
+
h("jump-button", { key: '834c49e3ecaed5c00329246b4404ad56cbb14468', onClick: () => this.doChangePage('first'), variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: this.first === 1 }, " ", h("jump-icon", { key: '9e7518f27d91f012dc9eb39f80bf5f442820c6b4', slot: "suffix", name: "chevrons-left" }), " "), h("jump-button", { key: 'e96effd01cbdaed601b84df41a99b19ca8e8cd99', onClick: () => this.doChangePage('previous'), variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: this.first === 1 }, " ", h("jump-icon", { key: '5431958c1b2efc1e10bf88c42a401ad599e26e10', slot: "suffix", name: "chevron-left" }), " "), h("jump-button", { key: '8220b582ecdcd455f56d589d2c40ce20afd2f3d8', onClick: () => this.doChangePage('next'), variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: this.last === this.total }, " ", h("jump-icon", { key: '8720edbe060dd5d89a0166f71a728539c743f1c3', slot: "suffix", name: "chevron-right" }), " "), this.showFirstAndLast &&
|
|
82
|
+
h("jump-button", { key: '82db4d99ccff98c3982bfb31b124a08a58332c1a', onClick: () => this.doChangePage('last'), variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: this.last === this.total }, " ", h("jump-icon", { key: '58bd9a9f71f852201052699d0683a9aa8ce6ee39', slot: "suffix", name: "chevrons-right" }), " "))))));
|
|
83
83
|
}
|
|
84
84
|
static get watchers() { return {
|
|
85
85
|
"elementsRanges": ["elementsRangesChanged"],
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, H as Host } from './index-
|
|
1
|
+
import { r as registerInstance, c as createEvent, h, H as Host } from './index-a94b3471.js';
|
|
2
2
|
|
|
3
3
|
const jumpPaginationCss = ":host{display:block;--jump-button-color:yellow}.JumpPagination{--jump-pagination-label:var(--neutral-grey-secondary);--jump-pagination-arrows-color:var(--neutral-grey-secondary);--jump-pagination-arrows-disabled:var(--neutral-grey-disabled);font-family:var(--ff-primary)}.JumpPagination__Wrapper{display:flex;justify-content:space-between}.JumpPagination__Wrapper .indicators{font-size:var(--fs-400);font-weight:normal;display:flex;justify-content:space-between;gap:20px;color:var(--jump-pagination-label)}.JumpPagination__Wrapper .indicators .arrow{color:var(--jump-pagination-arrows-color);display:flex;align-items:center;gap:10px}.JumpPagination__Wrapper .indicators .arrow button{background-color:transparent;border:none;cursor:pointer;padding:0px;display:flex;align-items:center}.JumpPagination__Wrapper .indicators .arrow button:disabled{cursor:not-allowed;color:var(--jump-pagination-arrows-disabled)}.JumpPagination__Wrapper .indicators .elements{color:var(--jump-pagination-label);display:flex;align-items:center;gap:5px}";
|
|
4
4
|
const JumpPaginationStyle0 = jumpPaginationCss;
|
|
@@ -28,7 +28,7 @@ const JumpPagination = class {
|
|
|
28
28
|
}
|
|
29
29
|
/* --------------------- RENDER ------------------------------- */
|
|
30
30
|
render() {
|
|
31
|
-
return (h(Host, { key: '
|
|
31
|
+
return (h(Host, { key: '2c1e0c33955bc82a9371ccf1eca0c5350d05b136', class: "JumpPagination" }, h("div", { key: '85eb248c9268624057f16fc5e50f0ce058e06eac', class: "JumpPagination__Wrapper" }, h("div", { key: 'dd568d3a6f0f32fbed16705cef38f8f1a8613a1e', class: "indicators" }, h("div", { key: '0315ee98935597733bfba159e813699d3ab098e0', class: "elements" }, h("span", { key: '003e190b73aad2d0b88dab5575ce673a75efb35c' }, h("span", { key: 'a32cc0529a7f4ea719ee269425323b629bd0cd5a' }, this.current), " ", this.pagLabel, " ", h("span", { key: '11f60aecd7bdf4b8335bc6376ab25175a8a5fbc0' }, this.last))), h("div", { key: '8497b1df6e084bee3f7169b8112be2e958b9ead6', class: "arrow" }, this.showFirstAndLast &&
|
|
32
32
|
// <button
|
|
33
33
|
// onClick={() => {this.current = 1} }
|
|
34
34
|
// disabled={(this.current === 1) ? true : false}>
|
|
@@ -36,14 +36,14 @@ const JumpPagination = class {
|
|
|
36
36
|
// disabled={(this.current === 1) ? true : false}
|
|
37
37
|
// ></jump-icon>
|
|
38
38
|
// </button>
|
|
39
|
-
h("jump-button", { key: '
|
|
39
|
+
h("jump-button", { key: 'aff51b684e01e98a22fc78a801a16cef92c89740', onClick: () => { this.current = 1; }, variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: (this.current === 1) ? true : false }, " ", h("jump-icon", { key: '82fe2c7d55e3aeea6688249be096fff04d4e8a9e', slot: "suffix", name: "chevrons-left" }), " "), h("jump-button", { key: 'a6fa825586501964b252afe4c59d0b4ed6319cf5', onClick: () => { this.current--; }, variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: (this.current === 1) ? true : false }, " ", h("jump-icon", { key: 'ad4fbb998ac7002620712352f0802f8e614988fc', slot: "suffix", name: "chevron-left" }), " "), h("jump-button", { key: 'ea53f48221f4282174a55ff6d3a4dc3b22ba193d', onClick: () => { this.current++; }, variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: (this.current === this.last) ? true : false }, " ", h("jump-icon", { key: '2ae20415c41150bf4ad3c7edc6fcf2bae8cf7ea3', slot: "suffix", name: "chevron-right" }), " "), this.showFirstAndLast &&
|
|
40
40
|
// <button
|
|
41
41
|
// onClick={() => {this.current = this.last}}
|
|
42
42
|
// disabled={(this.current === this.last) ? true : false}
|
|
43
43
|
// >
|
|
44
44
|
// <jump-icon library="fa" category="regular" name="chevrons-right" size="small" slot="prefix"></jump-icon>
|
|
45
45
|
// </button>
|
|
46
|
-
h("jump-button", { key: '
|
|
46
|
+
h("jump-button", { key: '527c3431dbc4770eeed3dfcdfe19354d8164f1a0', onClick: () => { this.current = this.last; }, variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: (this.current === this.last) ? true : false }, " ", h("jump-icon", { key: 'cd722d6c312b6c6511cd93da1dbcfe445d8998e2', slot: "suffix", name: "chevrons-right" }), " "))))));
|
|
47
47
|
}
|
|
48
48
|
static get watchers() { return {
|
|
49
49
|
"current": ["watchcurrent"]
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-
|
|
1
|
+
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a94b3471.js';
|
|
2
2
|
|
|
3
3
|
const jumpQuantityCss = ":host{display:inline-flex;align-items:flex-start;justify-content:center;flex-direction:column;gap:0.5rem}:host jump-button,:host button{--jump-button-padding:0.5rem}:host [data-variant=horizontal]{flex-direction:row}:host label{color:var(--neutral-grey-secondary);font-size:0.875rem}:host input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;margin:0;outline:none;border:1px solid transparent;border-radius:3px;padding:0.5rem;height:14px;width:36px;font-size:0.875rem;text-align:center}:host input::-webkit-inner-spin-button,:host input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}:host input:focus{border-color:var(--secondary-standard)}:host input:not([aria-hasbuttons]){border-color:var(--neutral-grey-secondary)}:host input[type=button]{cursor:pointer}:host ::slotted(jump-button){--jump-button-padding:0}:host .jump-quantity__InnerWrapper{display:flex;flex-direction:row;align-items:flex-start;justify-content:center;gap:0}";
|
|
4
4
|
const JumpQuantityStyle0 = jumpQuantityCss;
|
|
@@ -77,11 +77,11 @@ const JumpQuantity = class {
|
|
|
77
77
|
}
|
|
78
78
|
}
|
|
79
79
|
render() {
|
|
80
|
-
return (h(Host, { key: '
|
|
81
|
-
h("jump-button", { key: '
|
|
80
|
+
return (h(Host, { key: '021ef771d6b764fc0038a82ab6342e52d4db9ca5', value: this.value, "data-variant": this.variant, "data-hasbuttons": this.showButtons }, this.label && h("label", { key: '861cb1566ead946d22146a46df9f3cc2a0ba5e7d' }, this.label), h("div", { key: '0b8f3ba368946a370d42237f79c4554381c4b34b', class: `jump-quantity__InnerWrapper` }, this.showButtons &&
|
|
81
|
+
h("jump-button", { key: 'd83c253c36c743ea4099e7116de9205ade6c4cb8', onClick: () => this.value = this.value - this.step, disabled: this.value <= this.min, variant: 'neutral', size: 'custom' }, h("jump-icon", { key: '5b51a4d777716767a4850afa196a9b3aa3b86eec', library: "lucide", name: "minus", size: "small" })), h("input", { key: 'a0a1f28ef43a4486a8a7fea980f8e4c28a31c11f', ref: (el) => {
|
|
82
82
|
this.inputEl = el;
|
|
83
83
|
}, type: 'number', value: this.internalValue, onInput: (event) => this.handleChange(event), min: this.min, max: this.max, step: this.step, "aria-hasbuttons": this.showButtons }), this.showButtons &&
|
|
84
|
-
h("jump-button", { key: '
|
|
84
|
+
h("jump-button", { key: '7d3feb5f929661778bbb6f14711bc0acf2f3d74d', onClick: () => this.value = this.value + this.step, disabled: this.value >= this.max, variant: 'neutral', size: 'custom' }, h("jump-icon", { key: '09e8032c6e0e81c24bed6cf41f01ef1c9f0ec607', library: "lucide", name: "plus", size: "small" })))));
|
|
85
85
|
}
|
|
86
86
|
static get formAssociated() { return true; }
|
|
87
87
|
get el() { return getElement(this); }
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, H as Host } from './index-
|
|
1
|
+
import { r as registerInstance, c as createEvent, h, H as Host } from './index-a94b3471.js';
|
|
2
2
|
|
|
3
3
|
const jumpSearchBarDropdownItemCss = ":host{display:block}";
|
|
4
4
|
const JumpSearchBarDropdownItemStyle0 = jumpSearchBarDropdownItemCss;
|
|
@@ -32,7 +32,7 @@ const JumpSearchBarDropdownItem = class {
|
|
|
32
32
|
});
|
|
33
33
|
}
|
|
34
34
|
render() {
|
|
35
|
-
return (h(Host, { key: '
|
|
35
|
+
return (h(Host, { key: '8cbba459dbe5ca9f8785b67e04520dd54832ce52', ref: (el) => this.componentRef = el }));
|
|
36
36
|
}
|
|
37
37
|
};
|
|
38
38
|
JumpSearchBarDropdownItem.style = JumpSearchBarDropdownItemStyle0;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, H as Host } from './index-
|
|
1
|
+
import { r as registerInstance, c as createEvent, h, H as Host } from './index-a94b3471.js';
|
|
2
2
|
|
|
3
3
|
const jumpSearchBarMobileCss = ":host{display:block;position:relative;--jump-search-bar-mobile-focus-color:var(--secondary-standard, #5E79BA);--jump-search-bar-mobile-background-color:var(--gray-ultralight, #FFFFFF);--jump-search-bar-mobile-border-color:var(--neutral-grey-secondary, #707070);font-family:var(--ff-primary)}:host .DropdownWrapper{background-color:var(--jump-search-bar-mobile-background-color);padding:16px;position:fixed;top:0;left:0;height:100vh;z-index:1000;}:host .DropdownWrapper .closeButton{cursor:pointer}:host .DropdownWrapper.open{display:block}:host .DropdownWrapper:not(.open){display:none}:host .DropdownWrapper .InputWrapper{background-color:white;width:100%;display:flex;gap:12px;border-bottom:1px solid var(--jump-search-bar-mobile-border-color);padding-bottom:4px}:host .DropdownWrapper .InputWrapper.focused{border-color:var(--jump-search-bar-mobile-focus-color) !important}:host .DropdownWrapper .InputWrapper.focused jump-icon{color:var(--jump-search-bar-mobile-focus-color) !important}:host .DropdownWrapper .InputWrapper.focused input{outline:none !important}:host .DropdownWrapper input{width:100%;border:none}:host .DropdownWrapper .Results{margin-top:12px}:host .DropdownWrapper .Results__Recents .title{color:#707070;font-size:14px;line-height:20px;padding:8px 0;font-weight:700;display:flex}:host .DropdownWrapper .Results__Results .totalRes{display:flex;justify-content:space-between}:host .DropdownWrapper .Results .ResWrapper{display:flex;flex-direction:column}:host .DropdownWrapper .Results .ResWrapper div{padding:8px 0;color:#707070;font-size:14px;display:flex;gap:12px;align-items:center}:host .DropdownWrapper .Results .ResWrapper div img{width:40px;height:48px;object-fit:cover;border-radius:3px}:host .DropdownWrapper .Results .ResWrapper div:hover{cursor:pointer}:host .DropdownWrapper .Results .ResWrapper .helperText{color:#CBCBCB}:host .DropdownWrapper .Results .ResWrapper .helperText svg{width:25px;height:25px}";
|
|
4
4
|
const JumpSearchBarMobileStyle0 = jumpSearchBarMobileCss;
|
|
@@ -104,16 +104,16 @@ const JumpSearchBarMobile = class {
|
|
|
104
104
|
;
|
|
105
105
|
/* --------------------- RENDER ------------------------------- */
|
|
106
106
|
render() {
|
|
107
|
-
return (h(Host, { key: '
|
|
108
|
-
h("div", { key: '
|
|
109
|
-
h("div", { key: '
|
|
107
|
+
return (h(Host, { key: '8e82f7b1d5faddaa1fa8dd7c0d21c5254db63993', class: "JumpSearchBarMobile", ref: (el) => (this.componentRef = el) }, h("jump-icon", { key: '8c15dd4bce72244f49c727e73da4f19bbe0e5de7', name: "magnifying-glass", category: "light", onClick: () => this.openDropdown() }), h("div", { key: '1b90590142feb43a4ed879230fe8a4831e5b6948', class: "DropdownWrapper " + (this.isOpen ? 'open' : '') }, h("div", { key: '5f809148e2ee236ffe98afc5cfbdf44c4cdb38b8', class: "InputWrapper" }, h("jump-icon", { key: '8d57238a39ff3ee9dd00459acffb5a50be1becce', class: "closeButton", category: "light", name: "arrow-left", onClick: () => this.closeDropdown() }), h("input", { key: 'd0a99536bb0890827a9862178fa33308aab58889', placeholder: this.placeholder, type: "search", id: this.identifier, class: "search-input", ref: (el) => { this.jumpSearchBar = el; }, onInput: this.debounce(this.doSearch), onFocus: this.handleFocus, onBlur: this.handleBlur }), h("jump-icon", { key: '831143def53982970c40bc31f4dc7d79cf936ab2', name: "magnifying-glass", category: "light" })), h("div", { key: '148b2510523f6b714241e5ad36328ef5b4316b9a', class: "Results" }, (this.resType == 'recents') &&
|
|
108
|
+
h("div", { key: '3d9aab39538877fb350415fba9b57ccab85768d0', class: "Results__Recents" }, this.recents.length != 0 && h("span", { key: 'd50cf48b74a63371d2684dbfcae843b13b14dcc6', class: "title" }, this.recentsTitle), h("div", { key: 'ec2557a3c524105797075015a98217f14b6b194a', class: "ResWrapper" }, this.innerResults.length > 0 && this.innerResults.map((item) => (h("div", { onClick: () => this.handleResClicked(item) }, h("jump-icon", { name: "magnifying-glass", category: "light" }), item['value']))))), this.resType == 'results' &&
|
|
109
|
+
h("div", { key: 'f9b1c5de942cc3ecffb707991b839c8481d08cd2', class: "Results__Results" }, h("div", { key: 'dc80f4b4e2dc62671ac55bec72726c0fa4f9efd5', class: "ResWrapper" }, this.innerResults === undefined ?
|
|
110
110
|
h("div", { class: "helperText" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 100 100", preserveAspectRatio: "xMidYMid", width: "252", height: "252" }, h("g", null, h("g", { transform: "rotate(0 50 50)" }, h("rect", { fill: "#707070", height: "11", width: "4", ry: "1.87", rx: "1.87", y: "27.5", x: "48" }, h("animate", { repeatCount: "indefinite", begin: "-0.9s", dur: "1s", keyTimes: "0;1", values: "1;0", attributeName: "opacity" }))), h("g", { transform: "rotate(36 50 50)" }, h("rect", { fill: "#707070", height: "11", width: "4", ry: "1.87", rx: "1.87", y: "27.5", x: "48" }, h("animate", { repeatCount: "indefinite", begin: "-0.8s", dur: "1s", keyTimes: "0;1", values: "1;0", attributeName: "opacity" }))), h("g", { transform: "rotate(72 50 50)" }, h("rect", { fill: "#707070", height: "11", width: "4", ry: "1.87", rx: "1.87", y: "27.5", x: "48" }, h("animate", { repeatCount: "indefinite", begin: "-0.7s", dur: "1s", keyTimes: "0;1", values: "1;0", attributeName: "opacity" }))), h("g", { transform: "rotate(108 50 50)" }, h("rect", { fill: "#707070", height: "11", width: "4", ry: "1.87", rx: "1.87", y: "27.5", x: "48" }, h("animate", { repeatCount: "indefinite", begin: "-0.6s", dur: "1s", keyTimes: "0;1", values: "1;0", attributeName: "opacity" }))), h("g", { transform: "rotate(144 50 50)" }, h("rect", { fill: "#707070", height: "11", width: "4", ry: "1.87", rx: "1.87", y: "27.5", x: "48" }, h("animate", { repeatCount: "indefinite", begin: "-0.5s", dur: "1s", keyTimes: "0;1", values: "1;0", attributeName: "opacity" }))), h("g", { transform: "rotate(180 50 50)" }, h("rect", { fill: "#707070", height: "11", width: "4", ry: "1.87", rx: "1.87", y: "27.5", x: "48" }, h("animate", { repeatCount: "indefinite", begin: "-0.4s", dur: "1s", keyTimes: "0;1", values: "1;0", attributeName: "opacity" }))), h("g", { transform: "rotate(216 50 50)" }, h("rect", { fill: "#707070", height: "11", width: "4", ry: "1.87", rx: "1.87", y: "27.5", x: "48" }, h("animate", { repeatCount: "indefinite", begin: "-0.3s", dur: "1s", keyTimes: "0;1", values: "1;0", attributeName: "opacity" }))), h("g", { transform: "rotate(252 50 50)" }, h("rect", { fill: "#707070", height: "11", width: "4", ry: "1.87", rx: "1.87", y: "27.5", x: "48" }, h("animate", { repeatCount: "indefinite", begin: "-0.2s", dur: "1s", keyTimes: "0;1", values: "1;0", attributeName: "opacity" }))), h("g", { transform: "rotate(288 50 50)" }, h("rect", { fill: "#707070", height: "11", width: "4", ry: "1.87", rx: "1.87", y: "27.5", x: "48" }, h("animate", { repeatCount: "indefinite", begin: "-0.1s", dur: "1s", keyTimes: "0;1", values: "1;0", attributeName: "opacity" }))), h("g", { transform: "rotate(324 50 50)" }, h("rect", { fill: "#707070", height: "11", width: "4", ry: "1.87", rx: "1.87", y: "27.5", x: "48" }, h("animate", { repeatCount: "indefinite", begin: "0s", dur: "1s", keyTimes: "0;1", values: "1;0", attributeName: "opacity" }))), h("g", null))), this.loadingText)
|
|
111
111
|
:
|
|
112
112
|
(this.innerResults.length > 0 ?
|
|
113
113
|
this.innerResults.map((item) => (h("div", { onClick: () => this.handleResClicked(item), key: item['id'] }, item['img'] && h("img", { src: item['img'], alt: "result" }), item['value'])))
|
|
114
114
|
:
|
|
115
115
|
h("div", { class: "helperText" }, this.noResultText)), (this.innerResults && this.innerResults.length > 0) &&
|
|
116
|
-
h("div", { key: '
|
|
116
|
+
h("div", { key: 'd465037752274907f4c5aa19175c868b93b8d79f', class: "totalRes" }, h("jump-button", { key: '6e8bfc6e61979f92b0c96de2698e2adda1a53ce2', variant: "secondary", size: "small", text: true, onClick: () => this.btnOrShowOtherClicked(), target: "_blank" }, " ", this.showAllResText, " "), this.totalResults && h("div", { key: '4dca3e806f427d7fa7d9b1d2a3b35d000f9d58b7' }, this.totalResults, " ", this.resultsText))))))));
|
|
117
117
|
}
|
|
118
118
|
static get watchers() { return {
|
|
119
119
|
"searchValue": ["searchValueChanged"]
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, H as Host } from './index-
|
|
1
|
+
import { r as registerInstance, c as createEvent, h, H as Host } from './index-a94b3471.js';
|
|
2
2
|
|
|
3
3
|
const jumpSearchBarCss = ":host{display:block;--jump-search-bar-focus-color:var(--secondary-standard, #5E79BA);--jump-search-bar-border-color:var(--neutral-grey-secondary, #707070);--jump-search-bar-bg-color:var(--gray-ultralight, #F8F8F8);--jump-search-bar-dropdown-border-color:var(--neutral-grey-disabled, #CBCBCB);font-family:var(--ff-primary);}:host jump-button{--jump-button-border-radius:0px 3px 3px 0px}:host .SearchBar{position:relative}:host .SearchBar.focused .InputWrapper{border-color:var(--jump-search-bar-focus-color) !important}:host .SearchBar.focused .InputWrapper jump-icon{color:var(--jump-search-bar-focus-color) !important}:host .SearchBar.focused .InputWrapper input{outline:none !important}:host .SearchBar:not(.iconOnly){display:flex;width:100%;}:host .SearchBar:not(.iconOnly) .InputWrapper{width:100%;display:flex}:host .SearchBar:not(.iconOnly) input{width:100%;border:none}:host .SearchBar:not(.iconOnly).outline .InputWrapper{border:1px solid var(--jump-search-bar-border-color);border-radius:3px;padding:12px;gap:8px}:host .SearchBar:not(.iconOnly).outline .InputWrapper jump-icon{color:var(--jump-search-bar-border-color)}:host .SearchBar:not(.iconOnly).outline.withBtn .InputWrapper{border-radius:3px 0px 0px 3px}:host .SearchBar:not(.iconOnly).filled .InputWrapper{border:1px solid var(--jump-search-bar-bg-color);background-color:var(--jump-search-bar-bg-color);border-radius:3px;padding:12px;gap:8px}:host .SearchBar:not(.iconOnly).filled .InputWrapper input{background-color:var(--jump-search-bar-bg-color)}:host .SearchBar:not(.iconOnly).filled .InputWrapper jump-icon{color:var(--jump-search-bar-border-color)}:host .SearchBar:not(.iconOnly).filled.focused.withBtn .InputWrapper{border-radius:3px 0px 0px 3px !important}:host .SearchBar:not(.iconOnly).linear .InputWrapper{border-bottom:1px solid var(--jump-search-bar-border-color);padding-bottom:4px}:host .SearchBar:not(.iconOnly).linear .InputWrapper jump-icon{padding-right:6px}:host .Dropdown{margin-top:10px;border-radius:3px;border:1px solid var(--jump-search-bar-dropdown-border-color);padding:4px 16px;background-color:white}:host .Dropdown.dropAbsolute{position:absolute;box-sizing:border-box;position:absolute;left:0;width:100%}:host .Dropdown.dropRelative{position:relative}:host .Dropdown__Recents .title{color:#707070;font-size:14px;line-height:20px;padding:8px 0;font-weight:700;display:flex}:host .Dropdown__Results .totalRes{display:flex;justify-content:space-between}:host .Dropdown .ResWrapper{display:flex;flex-direction:column}:host .Dropdown .ResWrapper div{padding:8px 0;color:#707070;font-size:14px;display:flex;gap:12px;align-items:center}:host .Dropdown .ResWrapper div img{width:40px;height:48px;object-fit:cover;border-radius:3px}:host .Dropdown .ResWrapper div:hover{cursor:pointer}:host .Dropdown .ResWrapper .helperText{color:#CBCBCB}:host .Dropdown .ResWrapper .helperText svg{width:25px;height:25px}:host .SearchBar.iconOnly.linear{display:flex;width:100%}:host .SearchBar.iconOnly.linear .InputWrapper{width:100%;display:flex;align-items:center;transition:border-bottom 0.3s ease;border-bottom:1px solid transparent;padding-bottom:4px;overflow:hidden;}:host .SearchBar.iconOnly.linear .InputWrapper jump-icon{padding-right:6px;}:host .SearchBar.iconOnly.linear .InputWrapper input{width:0;border:none;transform:translateX(-100%);transition:width 0.3s ease, transform 0.3s ease;animation:none;}:host .SearchBar.iconOnly.linear.expanded .InputWrapper{border-bottom:1px solid var(--jump-search-bar-border-color);transition:border-bottom 0.3s ease;}:host .SearchBar.iconOnly.linear.expanded .InputWrapper input{width:100%;transform:translateX(0);animation:slide-right 0.3s ease forwards;}@keyframes slide-right{from{transform:translateX(-100%);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes border-slide-right{from{border-bottom-width:0}to{border-bottom-width:1px}}";
|
|
4
4
|
const JumpSearchBarStyle0 = jumpSearchBarCss;
|
|
@@ -139,10 +139,10 @@ const JumpSearchBar = class {
|
|
|
139
139
|
renderLinearIconOnly() {
|
|
140
140
|
return (h(Host, { class: "JumpSearchBar ", ref: (el) => (this.componentRef = el) }, h("div", { class: "SearchBar iconOnly " + this.variant + (this.isExpanded ? " expanded" : "") }, h("div", { class: "InputWrapper", onClick: (this.isExpanded && this.dropdown && this.recents.length > 0) ? () => this.openDropdown() : null }, h("jump-icon", { name: "magnifying-glass", category: "light", onClick: () => this.expandSearchBar() }), this.isExpanded &&
|
|
141
141
|
// Mostra la barra di ricerca con l'animazione di slide
|
|
142
|
-
h("input", { placeholder: this.placeholder, type: "search", id: this.identifier, class: "search-input", ref: (el) => { this.jumpSearchBar = el; }, onInput: this.debounce(this.doSearch), onFocus: this.handleFocus, onBlur: this.handleBlur }))), (this.dropdown && this.dropdownVisible) && this.renderDropdown()));
|
|
142
|
+
h("input", { placeholder: this.placeholder, type: "search", value: this.searchValue, id: this.identifier, class: "search-input", ref: (el) => { this.jumpSearchBar = el; }, onInput: this.debounce(this.doSearch), onFocus: this.handleFocus, onBlur: this.handleBlur }))), (this.dropdown && this.dropdownVisible) && this.renderDropdown()));
|
|
143
143
|
}
|
|
144
144
|
renderDefault() {
|
|
145
|
-
return (h(Host, { class: "JumpSearchBar", ref: (el) => (this.componentRef = el) }, h("div", { class: "SearchBar " + this.variant + " " + (this.withBtn ? "withBtn" : "") + (this.isExpanded ? " expanded" : "") }, h("div", { class: "InputWrapper", onClick: (this.dropdown && this.recents.length > 0) ? () => this.openDropdown() : null }, !this.withBtn && h("jump-icon", { name: "magnifying-glass", category: "light" }), h("input", { placeholder: this.placeholder, type: "search", id: this.identifier, class: "search-input", ref: (el) => { this.jumpSearchBar = el; }, onInput: this.debounce(this.doSearch), onFocus: this.handleFocus, onBlur: this.handleBlur })), this.withBtn && !this.linearIconOnly && (h("jump-button", { variant: "secondary", size: "medium", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, onClick: () => this.btnOrShowOtherClicked() }, h("jump-icon", { slot: "suffix", name: "magnifying-glass" })))), (this.dropdown && this.dropdownVisible) && this.renderDropdown()));
|
|
145
|
+
return (h(Host, { class: "JumpSearchBar", ref: (el) => (this.componentRef = el) }, h("div", { class: "SearchBar " + this.variant + " " + (this.withBtn ? "withBtn" : "") + (this.isExpanded ? " expanded" : "") }, h("div", { class: "InputWrapper", onClick: (this.dropdown && this.recents.length > 0) ? () => this.openDropdown() : null }, !this.withBtn && h("jump-icon", { name: "magnifying-glass", category: "light" }), h("input", { placeholder: this.placeholder, type: "search", id: this.identifier, class: "search-input", value: this.searchValue, ref: (el) => { this.jumpSearchBar = el; }, onInput: this.debounce(this.doSearch), onFocus: this.handleFocus, onBlur: this.handleBlur })), this.withBtn && !this.linearIconOnly && (h("jump-button", { variant: "secondary", size: "medium", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, onClick: () => this.btnOrShowOtherClicked() }, h("jump-icon", { slot: "suffix", name: "magnifying-glass" })))), (this.dropdown && this.dropdownVisible) && this.renderDropdown()));
|
|
146
146
|
}
|
|
147
147
|
renderDropdown() {
|
|
148
148
|
console.log('POSITION', this.dropdownPosition);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"jump-search-bar.entry.js","mappings":"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","names":[],"sources":["src/components/jump-search-bar/jump-search-bar.scss?tag=jump-search-bar&encapsulation=shadow","src/components/jump-search-bar/jump-search-bar.tsx"],"sourcesContent":[":host {\n display: block;\n\n --jump-search-bar-focus-color: var(--secondary-standard, #5E79BA);\n --jump-search-bar-border-color: var(--neutral-grey-secondary, #707070);\n --jump-search-bar-bg-color: var(--gray-ultralight, #F8F8F8);\n --jump-search-bar-dropdown-border-color: var(--neutral-grey-disabled, #CBCBCB);\n\n font-family: var(--ff-primary);\n\n jump-button {\n --jump-button-border-radius: 0px 3px 3px 0px;\n }\n\n .SearchBar {\n position: relative;\n\n &.focused .InputWrapper {\n border-color: var(--jump-search-bar-focus-color) !important;\n \n jump-icon {\n color: var(--jump-search-bar-focus-color) !important;\n }\n \n input {\n outline: none !important;\n }\n }\n }\n\n .SearchBar:not(.iconOnly) {\n display: flex;\n width: 100%;\n \n .InputWrapper {\n width: 100%;\n display: flex;\n }\n \n input {\n width: 100%;\n border: none;\n }\n \n /* Stile outline*/\n &.outline .InputWrapper {\n border: 1px solid var(--jump-search-bar-border-color);\n border-radius: 3px;\n padding: 12px;\n gap: 8px;\n \n jump-icon {\n color: var(--jump-search-bar-border-color);\n }\n }\n \n &.outline.withBtn .InputWrapper {\n border-radius: 3px 0px 0px 3px;\n }\n \n \n /* Stile filled */\n &.filled .InputWrapper {\n border: 1px solid var(--jump-search-bar-bg-color);\n background-color: var(--jump-search-bar-bg-color);\n border-radius: 3px;\n padding: 12px;\n gap: 8px;\n \n input {\n background-color: var(--jump-search-bar-bg-color);\n }\n \n jump-icon {\n color: var(--jump-search-bar-border-color);\n }\n }\n \n &.filled.focused.withBtn .InputWrapper {\n border-radius: 3px 0px 0px 3px !important;\n }\n \n /* Stile linear */\n &.linear .InputWrapper {\n border-bottom: 1px solid var(--jump-search-bar-border-color);\n padding-bottom: 4px;\n \n jump-icon {\n padding-right: 6px;\n }\n }\n }\n \n \n .Dropdown {\n\n &.dropAbsolute {\n position: absolute;\n box-sizing: border-box;\n position: absolute;\n left: 0;\n width: 100%;\n }\n\n &.dropRelative {\n position: relative;\n }\n\n // position: absolute; la tolgo per il test\n margin-top: 10px;\n border-radius: 3px;\n border: 1px solid var(--jump-search-bar-dropdown-border-color);\n padding: 4px 16px;\n background-color: white;\n\n &__Recents {\n .title {\n color: #707070;\n font-size: 14px;\n line-height: 20px;\n padding: 8px 0;\n font-weight: 700;\n display: flex;\n }\n }\n\n &__Results {\n .totalRes {\n display: flex; \n justify-content: space-between;\n }\n }\n \n\n .ResWrapper {\n display: flex;\n flex-direction: column;\n\n div {\n padding: 8px 0;\n color: #707070;\n font-size: 14px;\n display: flex;\n gap: 12px;\n align-items: center;\n\n img {\n width: 40px;\n height: 48px;\n object-fit: cover;\n border-radius: 3px;\n }\n }\n\n div:hover {\n cursor: pointer;\n }\n\n .helperText {\n color: #CBCBCB;\n\n svg {\n width: 25px;\n height: 25px;\n }\n }\n }\n }\n\n/* Applicazione dell'animazione alla SearchBar.iconOnly.linear */\n.SearchBar.iconOnly.linear {\n display: flex;\n width: 100%;\n\n .InputWrapper {\n width: 100%;\n display: flex;\n align-items: center;\n transition: border-bottom 0.3s ease;\n /* Transizione solo per il bordo inferiore */\n border-bottom: 1px solid transparent;\n /* Nessun bordo inizialmente */\n padding-bottom: 4px;\n overflow: hidden;\n /* Per nascondere il contenuto che esce dai limiti dell'InputWrapper */\n\n jump-icon {\n padding-right: 6px;\n /* Padding dell'icona */\n }\n\n input {\n width: 0;\n /* Imposta la larghezza iniziale a 0 */\n border: none;\n transform: translateX(-100%);\n /* Sposta l'input fuori dalla vista */\n transition: width 0.3s ease, transform 0.3s ease;\n /* Transizioni separate per width e transform */\n animation: none;\n /* Disabilita l'animazione predefinita */\n }\n }\n\n &.expanded {\n .InputWrapper {\n border-bottom: 1px solid var(--jump-search-bar-border-color);\n /* Mostra il bordo inferiore quando espanso */\n transition: border-bottom 0.3s ease;\n /* Transizione per il bordo inferiore */\n\n input {\n width: 100%;\n /* Espande l'input a tutta la larghezza disponibile */\n transform: translateX(0);\n /* Riposiziona l'input nella vista */\n animation: slide-right 0.3s ease forwards;\n /* Applicazione dell'animazione slide-right */\n }\n }\n }\n}\n \n}\n\n@keyframes slide-right {\n from {\n transform: translateX(-100%);\n opacity: 0;\n }\n\n to {\n transform: translateX(0);\n opacity: 1;\n }\n}\n\n@keyframes border-slide-right {\n from {\n border-bottom-width: 0;\n }\n\n to {\n border-bottom-width: 1px;\n }\n}","import { Component, Method, Watch, Listen, State, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'jump-search-bar',\n styleUrl: 'jump-search-bar.scss',\n shadow: true,\n})\nexport class JumpSearchBar {\n\n /* ---------------------- @OWN PROPERTIES ------------------------- */\n jumpSearchBar: HTMLInputElement;\n private componentRef: HTMLElement;\n\n /* ---------------------- @STATE ------------------------- */\n @State() dropdownVisible: boolean = false;\n @State() searchValue: string = undefined;\n\n @Watch('searchValue')\n searchValueChanged(newValue: string) {\n if (newValue === '') {\n // Create a new array reference to trigger re-render\n this.innerResults = [...this.recents];\n this.results = [];\n }\n }\n\n @State() resType: string = 'recents';\n @State() innerResults: Array<object> = [];\n @State() totalResults: number = 0;\n @State() isExpanded: boolean = false; \n\n /* ---------------------- @PROPERTIES ------------------------- */\n @Prop() placeholder: string = 'Cerca...'; //Il testo del placeholder dell\\'input della searchbar\n @Prop() noResultText: string = 'Nessun risultato corrispondente'; // Il testo da mostrare in caso nessun risultato sia stato recuperato.\n @Prop() loadingText: string = 'Sto caricando...'; // Il testo mostrato durante il caricamento dei risultati.\n @Prop() resultsText: string = 'risultati'; // Il testo mostrato accanto al numero di risultati totali.\n @Prop() showAllResText: string = 'Mostra tutti i risultati'; // La label da mostrare per il pulsante che mostra tutti i risultati.\n @Prop() identifier: string = 'search-bar'; // Identificatore della searchbar\n @Prop() debounceTime: number = 500; // 'Il tempo di attesa per l\\'invio della ricerca in caso di ricerca automatica. In millisecondi.\n @Prop() variant: string = 'outline'; // Scelta dello stile della barra di ricerca tra filled, linear e outline.\n @Prop() withBtn: boolean = false; // Se true, aggiunge un pulsante alla barra di ricerca\n @Prop() recentsTitle: string = 'Recenti'; // Serve per il titolo del dropwdown quando si vedono le ricerche recenti\n @Prop() recents: Array<object> = []; // Serve per il dropdown quando si vedono le ricerche recenti\n @Prop() results: Array<object> = []; // Serve per il dropdown quando si vedono i risultati della ricerca\n @Prop() dropdown: boolean = false; // Se true, mostra il dropdown con i risultati della ricerca.\n @Prop() linearIconOnly: boolean = false; // Se true, mostra solo l'icona nella barra di ricerca lineare\n @Prop() dropdownPosition: string = 'relative'; // Posizione del dropdown rispetto alla searchbar. \"relative\" o \"absolute\"\n\n\n /* ---------------------- @EVENTS ------------------------- */\n\n /**\n * Evento emesso quando l'utente clicca sull'icona in variant linear e linearIconOnly\n */\n @Event({ eventName: 'jump-search-bar-expanded' }) searchbarExpanded: EventEmitter;\n\n /**\n * Evento emesso quando l'utente effettua una ricerca \n * Emette un oggetto contenenente il valore della ricerca alla chiave 'search'\n * */\n @Event({ eventName: 'jump-search-bar' }) search: EventEmitter;\n @Event({ eventName: 'jump-filterchange' }) searchFilters: EventEmitter; // E' analoga a quella sopra ma serve per i filtri\n\n /** \n * Evento emesso quando l'utente clicca sul pulsante (se presente) o nel pulsante del dropdown per vedere tutti i risultati \n * Emette un oggetto contenenente il valore della ricerca alla chiave 'search'\n */\n @Event({ eventName: 'jump-search-bar-show-all' }) showFullSearch: EventEmitter;\n\n /* \n * Evento da ascoltare per recuperare il dato cliccato\n * Emette un oggetto contenente tutti i dati relativi al risultato cliccato.\n */\n @Event({ eventName: 'jump-search-bar-res-clicked'}) resultClicked: EventEmitter; \n\n /* ---------------------- @LIFECYCLE ------------------------- */\n componentDidLoad() {\n // Aggiungi l'event listener per il clic al di fuori del componente\n document.addEventListener('click', this.handleOutsideClick.bind(this));\n }\n\n disconnectedCallback() {\n // Rimuovi l'event listener per evitare perdite di memoria\n document.removeEventListener('click', this.handleOutsideClick.bind(this));\n }\n\n /* -------------------- @LISTEN ------------------------------- */\n @Listen(\"jump-search-bar-dropdown-item-connected\")\n addOption(e) {\n let props = e.detail; // es {code: 'sku1', imageUrl: 'https://google.com/'}\n\n // Aggiungi l'elemento solo a `recents`\n this.recents = [...this.recents, { ...props }];\n\n // Aggiorna `innerResults` basandoti solo su `recents`\n this.innerResults = [...this.recents];\n }\n\n\n /* -------------------- @METHOD ------------------------------- */\n\n /** Imposta i risultati della ricerca all'interno della dropdown */\n @Method()\n async setResults(results, tot?: number) {\n this.results = results;\n this.innerResults = results;\n this.totalResults = tot;\n }\n\n /* -------------------- LOCAL METHODS ------------------------- */\n handleOutsideClick(event: MouseEvent) {\n // Controlla se il clic è fuori dal componente\n if (this.componentRef && !this.componentRef.contains(event.target as Node)) {\n this.dropdownVisible = false;\n }\n }\n\n // Gestisce l'evento focus sull'input\n handleFocus = () => {\n const searchBarContainer = this.jumpSearchBar.closest('.SearchBar');\n if (searchBarContainer) {\n searchBarContainer.classList.add('focused');\n }\n };\n\n // Gestisce l'evento blur sull'input\n handleBlur = () => {\n const searchBarContainer = this.jumpSearchBar.closest('.SearchBar');\n if (searchBarContainer) {\n searchBarContainer.classList.remove('focused');\n }\n };\n\n doSearch = () => {\n if (this.jumpSearchBar) {\n this.searchValue = this.jumpSearchBar.value;\n \n // Iniziare la ricerca solamente se ci sono almeno tre caratteri \n if (this.searchValue.length >= 3) {\n this.resType = 'results';\n\n this.innerResults = undefined;\n \n this.search.emit({ search: this.searchValue });\n this.searchFilters.emit({ name: 's', values: this.searchValue });\n \n // Se il dropdown è chiuso, aprilo. Potrebbe essere chiuso perchè non ci sono recenti\n if (!this.dropdownVisible) {\n this.dropdownVisible = true;\n }\n } else if(this.searchValue.length == 0) {\n this.dropdownVisible = false;\n }\n }\n };\n\n debounce(fn, delay = this.debounceTime) {\n let timeoutId;\n\n return (...args) => {\n if (timeoutId) {\n clearTimeout(timeoutId);\n }\n timeoutId = setTimeout(() => {\n fn.apply(null, args);\n }, delay);\n };\n };\n\n openDropdown() {\n this.resType = 'recents';\n this.dropdownVisible = true;\n }\n\n /** Emette l'evento di click su un risultato, mandandone tutti i dati */\n handleResClicked(item) {\n this.resultClicked.emit({ clicked: item });\n } \n\n /** Emette l'evento quando l'utente clicca sul pulsante (se presente) o nel pulsante del dropdown per vedere tutti i risultati */\n btnOrShowOtherClicked(){\n this.showFullSearch.emit({ search: this.searchValue });\n }\n\n /**\n * Se clicco l'icona espando la searchbar ed emetto un evento dedicato\n */\n expandSearchBar() {\n this.isExpanded = true;\n this.searchbarExpanded.emit();\n }\n\n\n /* --------------------- RENDER ------------------------------- */\n renderLinearIconOnly() {\n return (\n <Host class={\"JumpSearchBar \"} ref={(el) => (this.componentRef = el as HTMLElement)}>\n <div class={\"SearchBar iconOnly \" + this.variant + (this.isExpanded ? \" expanded\" : \"\")}>\n <div class=\"InputWrapper\" onClick={(this.isExpanded && this.dropdown && this.recents.length > 0) ? () => this.openDropdown() : null}>\n <jump-icon\n name=\"magnifying-glass\"\n category=\"light\"\n onClick={() => this.expandSearchBar()}\n ></jump-icon>\n {this.isExpanded &&\n // Mostra la barra di ricerca con l'animazione di slide\n <input\n placeholder={this.placeholder}\n type=\"search\"\n id={this.identifier}\n class=\"search-input\"\n ref={(el) => { this.jumpSearchBar = el as HTMLInputElement }}\n onInput={this.debounce(this.doSearch)}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n />\n }\n </div>\n </div>\n {(this.dropdown && this.dropdownVisible) && this.renderDropdown()} \n </Host>\n );\n }\n\n renderDefault() {\n return (\n <Host class={\"JumpSearchBar\"} ref={(el) => (this.componentRef = el as HTMLElement)}>\n <div class={\"SearchBar \" + this.variant + \" \" + (this.withBtn ? \"withBtn\" : \"\") + (this.isExpanded ? \" expanded\" : \"\")}>\n <div class=\"InputWrapper\" onClick={(this.dropdown && this.recents.length > 0) ? () => this.openDropdown() : null}>\n {!this.withBtn && <jump-icon name=\"magnifying-glass\" category=\"light\"></jump-icon>}\n <input\n placeholder={this.placeholder}\n type=\"search\"\n id={this.identifier}\n class=\"search-input\"\n ref={(el) => { this.jumpSearchBar = el as HTMLInputElement }}\n onInput={this.debounce(this.doSearch)}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n />\n </div>\n {this.withBtn && !this.linearIconOnly && (\n <jump-button\n variant=\"secondary\"\n size=\"medium\"\n name=\"scopri\"\n value=\"value\"\n aria-label=\"Scopri di più\"\n id=\"button\"\n onlyIcon\n onClick={() => this.btnOrShowOtherClicked()}\n >\n <jump-icon slot=\"suffix\" name=\"magnifying-glass\"></jump-icon>\n </jump-button>\n )}\n </div>\n {(this.dropdown && this.dropdownVisible) && this.renderDropdown()} \n </Host>\n );\n }\n\n renderDropdown(){\n console.log('POSITION', this.dropdownPosition);\n return <div class={\"Dropdown \" + (this.dropdownPosition == 'absolute' ? 'dropAbsolute' : 'dropRelative' ) }>\n {(this.resType == 'recents') &&\n <div class=\"Dropdown__Recents\">\n <span class=\"title\">{this.recentsTitle}</span>\n <div class=\"ResWrapper\">\n {this.innerResults.length > 0 && this.innerResults.map((item) => (\n <div onClick={() => this.handleResClicked(item)}>\n <jump-icon name=\"magnifying-glass\" category=\"light\"></jump-icon>\n {item['value']}\n </div>\n ))}\n </div>\n </div>\n }\n {this.resType == 'results' &&\n <div class=\"Dropdown__Results\">\n <div class=\"ResWrapper\">\n {this.innerResults === undefined ?\n <div class=\"helperText\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"xMidYMid\" width=\"252\" height=\"252\" ><g><g transform=\"rotate(0 50 50)\">\n <rect fill=\"#707070\" height=\"11\" width=\"4\" ry=\"1.87\" rx=\"1.87\" y=\"27.5\" x=\"48\">\n <animate repeatCount=\"indefinite\" begin=\"-0.9s\" dur=\"1s\" keyTimes=\"0;1\" values=\"1;0\" attributeName=\"opacity\"></animate>\n </rect>\n </g><g transform=\"rotate(36 50 50)\">\n <rect fill=\"#707070\" height=\"11\" width=\"4\" ry=\"1.87\" rx=\"1.87\" y=\"27.5\" x=\"48\">\n <animate repeatCount=\"indefinite\" begin=\"-0.8s\" dur=\"1s\" keyTimes=\"0;1\" values=\"1;0\" attributeName=\"opacity\"></animate>\n </rect>\n </g><g transform=\"rotate(72 50 50)\">\n <rect fill=\"#707070\" height=\"11\" width=\"4\" ry=\"1.87\" rx=\"1.87\" y=\"27.5\" x=\"48\">\n <animate repeatCount=\"indefinite\" begin=\"-0.7s\" dur=\"1s\" keyTimes=\"0;1\" values=\"1;0\" attributeName=\"opacity\"></animate>\n </rect>\n </g><g transform=\"rotate(108 50 50)\">\n <rect fill=\"#707070\" height=\"11\" width=\"4\" ry=\"1.87\" rx=\"1.87\" y=\"27.5\" x=\"48\">\n <animate repeatCount=\"indefinite\" begin=\"-0.6s\" dur=\"1s\" keyTimes=\"0;1\" values=\"1;0\" attributeName=\"opacity\"></animate>\n </rect>\n </g><g transform=\"rotate(144 50 50)\">\n <rect fill=\"#707070\" height=\"11\" width=\"4\" ry=\"1.87\" rx=\"1.87\" y=\"27.5\" x=\"48\">\n <animate repeatCount=\"indefinite\" begin=\"-0.5s\" dur=\"1s\" keyTimes=\"0;1\" values=\"1;0\" attributeName=\"opacity\"></animate>\n </rect>\n </g><g transform=\"rotate(180 50 50)\">\n <rect fill=\"#707070\" height=\"11\" width=\"4\" ry=\"1.87\" rx=\"1.87\" y=\"27.5\" x=\"48\">\n <animate repeatCount=\"indefinite\" begin=\"-0.4s\" dur=\"1s\" keyTimes=\"0;1\" values=\"1;0\" attributeName=\"opacity\"></animate>\n </rect>\n </g><g transform=\"rotate(216 50 50)\">\n <rect fill=\"#707070\" height=\"11\" width=\"4\" ry=\"1.87\" rx=\"1.87\" y=\"27.5\" x=\"48\">\n <animate repeatCount=\"indefinite\" begin=\"-0.3s\" dur=\"1s\" keyTimes=\"0;1\" values=\"1;0\" attributeName=\"opacity\"></animate>\n </rect>\n </g><g transform=\"rotate(252 50 50)\">\n <rect fill=\"#707070\" height=\"11\" width=\"4\" ry=\"1.87\" rx=\"1.87\" y=\"27.5\" x=\"48\">\n <animate repeatCount=\"indefinite\" begin=\"-0.2s\" dur=\"1s\" keyTimes=\"0;1\" values=\"1;0\" attributeName=\"opacity\"></animate>\n </rect>\n </g><g transform=\"rotate(288 50 50)\">\n <rect fill=\"#707070\" height=\"11\" width=\"4\" ry=\"1.87\" rx=\"1.87\" y=\"27.5\" x=\"48\">\n <animate repeatCount=\"indefinite\" begin=\"-0.1s\" dur=\"1s\" keyTimes=\"0;1\" values=\"1;0\" attributeName=\"opacity\"></animate>\n </rect>\n </g><g transform=\"rotate(324 50 50)\">\n <rect fill=\"#707070\" height=\"11\" width=\"4\" ry=\"1.87\" rx=\"1.87\" y=\"27.5\" x=\"48\">\n <animate repeatCount=\"indefinite\" begin=\"0s\" dur=\"1s\" keyTimes=\"0;1\" values=\"1;0\" attributeName=\"opacity\"></animate>\n </rect>\n </g><g></g></g></svg>{this.loadingText}</div>\n :\n (this.innerResults.length > 0 ?\n this.innerResults.map((item) => (\n <div onClick={() => this.handleResClicked(item)} key={item['id']}>\n {item['img'] && <img src={item['img']} alt=\"result\" />}\n {item['value']}\n </div>\n ))\n :\n <div class=\"helperText\">{this.noResultText}</div>\n )\n }\n {(this.innerResults && this.innerResults.length > 0) &&\n <div class=\"totalRes\">\n <jump-button variant=\"secondary\" size=\"small\" text onClick={() => this.btnOrShowOtherClicked()} target=\"_blank\"> {this.showAllResText} </jump-button>\n {this.totalResults && <div>{this.totalResults} {this.resultsText}</div>}\n </div>\n }\n </div>\n </div>\n }\n </div>\n }\n\n render() {\n if (this.variant === 'linear' && this.linearIconOnly) {\n return this.renderLinearIconOnly();\n } else {\n return this.renderDefault();\n }\n }\n}"],"version":3}
|
|
1
|
+
{"file":"jump-search-bar.entry.js","mappings":"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","names":[],"sources":["src/components/jump-search-bar/jump-search-bar.scss?tag=jump-search-bar&encapsulation=shadow","src/components/jump-search-bar/jump-search-bar.tsx"],"sourcesContent":[":host {\n display: block;\n\n --jump-search-bar-focus-color: var(--secondary-standard, #5E79BA);\n --jump-search-bar-border-color: var(--neutral-grey-secondary, #707070);\n --jump-search-bar-bg-color: var(--gray-ultralight, #F8F8F8);\n --jump-search-bar-dropdown-border-color: var(--neutral-grey-disabled, #CBCBCB);\n\n font-family: var(--ff-primary);\n\n jump-button {\n --jump-button-border-radius: 0px 3px 3px 0px;\n }\n\n .SearchBar {\n position: relative;\n\n &.focused .InputWrapper {\n border-color: var(--jump-search-bar-focus-color) !important;\n \n jump-icon {\n color: var(--jump-search-bar-focus-color) !important;\n }\n \n input {\n outline: none !important;\n }\n }\n }\n\n .SearchBar:not(.iconOnly) {\n display: flex;\n width: 100%;\n \n .InputWrapper {\n width: 100%;\n display: flex;\n }\n \n input {\n width: 100%;\n border: none;\n }\n \n /* Stile outline*/\n &.outline .InputWrapper {\n border: 1px solid var(--jump-search-bar-border-color);\n border-radius: 3px;\n padding: 12px;\n gap: 8px;\n \n jump-icon {\n color: var(--jump-search-bar-border-color);\n }\n }\n \n &.outline.withBtn .InputWrapper {\n border-radius: 3px 0px 0px 3px;\n }\n \n \n /* Stile filled */\n &.filled .InputWrapper {\n border: 1px solid var(--jump-search-bar-bg-color);\n background-color: var(--jump-search-bar-bg-color);\n border-radius: 3px;\n padding: 12px;\n gap: 8px;\n \n input {\n background-color: var(--jump-search-bar-bg-color);\n }\n \n jump-icon {\n color: var(--jump-search-bar-border-color);\n }\n }\n \n &.filled.focused.withBtn .InputWrapper {\n border-radius: 3px 0px 0px 3px !important;\n }\n \n /* Stile linear */\n &.linear .InputWrapper {\n border-bottom: 1px solid var(--jump-search-bar-border-color);\n padding-bottom: 4px;\n \n jump-icon {\n padding-right: 6px;\n }\n }\n }\n \n \n .Dropdown {\n\n &.dropAbsolute {\n position: absolute;\n box-sizing: border-box;\n position: absolute;\n left: 0;\n width: 100%;\n }\n\n &.dropRelative {\n position: relative;\n }\n\n // position: absolute; la tolgo per il test\n margin-top: 10px;\n border-radius: 3px;\n border: 1px solid var(--jump-search-bar-dropdown-border-color);\n padding: 4px 16px;\n background-color: white;\n\n &__Recents {\n .title {\n color: #707070;\n font-size: 14px;\n line-height: 20px;\n padding: 8px 0;\n font-weight: 700;\n display: flex;\n }\n }\n\n &__Results {\n .totalRes {\n display: flex; \n justify-content: space-between;\n }\n }\n \n\n .ResWrapper {\n display: flex;\n flex-direction: column;\n\n div {\n padding: 8px 0;\n color: #707070;\n font-size: 14px;\n display: flex;\n gap: 12px;\n align-items: center;\n\n img {\n width: 40px;\n height: 48px;\n object-fit: cover;\n border-radius: 3px;\n }\n }\n\n div:hover {\n cursor: pointer;\n }\n\n .helperText {\n color: #CBCBCB;\n\n svg {\n width: 25px;\n height: 25px;\n }\n }\n }\n }\n\n/* Applicazione dell'animazione alla SearchBar.iconOnly.linear */\n.SearchBar.iconOnly.linear {\n display: flex;\n width: 100%;\n\n .InputWrapper {\n width: 100%;\n display: flex;\n align-items: center;\n transition: border-bottom 0.3s ease;\n /* Transizione solo per il bordo inferiore */\n border-bottom: 1px solid transparent;\n /* Nessun bordo inizialmente */\n padding-bottom: 4px;\n overflow: hidden;\n /* Per nascondere il contenuto che esce dai limiti dell'InputWrapper */\n\n jump-icon {\n padding-right: 6px;\n /* Padding dell'icona */\n }\n\n input {\n width: 0;\n /* Imposta la larghezza iniziale a 0 */\n border: none;\n transform: translateX(-100%);\n /* Sposta l'input fuori dalla vista */\n transition: width 0.3s ease, transform 0.3s ease;\n /* Transizioni separate per width e transform */\n animation: none;\n /* Disabilita l'animazione predefinita */\n }\n }\n\n &.expanded {\n .InputWrapper {\n border-bottom: 1px solid var(--jump-search-bar-border-color);\n /* Mostra il bordo inferiore quando espanso */\n transition: border-bottom 0.3s ease;\n /* Transizione per il bordo inferiore */\n\n input {\n width: 100%;\n /* Espande l'input a tutta la larghezza disponibile */\n transform: translateX(0);\n /* Riposiziona l'input nella vista */\n animation: slide-right 0.3s ease forwards;\n /* Applicazione dell'animazione slide-right */\n }\n }\n }\n}\n \n}\n\n@keyframes slide-right {\n from {\n transform: translateX(-100%);\n opacity: 0;\n }\n\n to {\n transform: translateX(0);\n opacity: 1;\n }\n}\n\n@keyframes border-slide-right {\n from {\n border-bottom-width: 0;\n }\n\n to {\n border-bottom-width: 1px;\n }\n}","import { Component, Method, Watch, Listen, State, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'jump-search-bar',\n styleUrl: 'jump-search-bar.scss',\n shadow: true,\n})\nexport class JumpSearchBar {\n\n /* ---------------------- @OWN PROPERTIES ------------------------- */\n jumpSearchBar: HTMLInputElement;\n private componentRef: HTMLElement;\n\n /* ---------------------- @STATE ------------------------- */\n @State() dropdownVisible: boolean = false;\n @Prop({ mutable: true }) searchValue: string = undefined;\n\n @Watch('searchValue')\n searchValueChanged(newValue: string) {\n if (newValue === '') {\n // Create a new array reference to trigger re-render\n this.innerResults = [...this.recents];\n this.results = [];\n }\n }\n\n @State() resType: string = 'recents';\n @State() innerResults: Array<object> = [];\n @State() totalResults: number = 0;\n @State() isExpanded: boolean = false; \n\n /* ---------------------- @PROPERTIES ------------------------- */\n @Prop() placeholder: string = 'Cerca...'; //Il testo del placeholder dell\\'input della searchbar\n @Prop() noResultText: string = 'Nessun risultato corrispondente'; // Il testo da mostrare in caso nessun risultato sia stato recuperato.\n @Prop() loadingText: string = 'Sto caricando...'; // Il testo mostrato durante il caricamento dei risultati.\n @Prop() resultsText: string = 'risultati'; // Il testo mostrato accanto al numero di risultati totali.\n @Prop() showAllResText: string = 'Mostra tutti i risultati'; // La label da mostrare per il pulsante che mostra tutti i risultati.\n @Prop() identifier: string = 'search-bar'; // Identificatore della searchbar\n @Prop() debounceTime: number = 500; // 'Il tempo di attesa per l\\'invio della ricerca in caso di ricerca automatica. In millisecondi.\n @Prop() variant: string = 'outline'; // Scelta dello stile della barra di ricerca tra filled, linear e outline.\n @Prop() withBtn: boolean = false; // Se true, aggiunge un pulsante alla barra di ricerca\n @Prop() recentsTitle: string = 'Recenti'; // Serve per il titolo del dropwdown quando si vedono le ricerche recenti\n @Prop() recents: Array<object> = []; // Serve per il dropdown quando si vedono le ricerche recenti\n @Prop() results: Array<object> = []; // Serve per il dropdown quando si vedono i risultati della ricerca\n @Prop() dropdown: boolean = false; // Se true, mostra il dropdown con i risultati della ricerca.\n @Prop() linearIconOnly: boolean = false; // Se true, mostra solo l'icona nella barra di ricerca lineare\n @Prop() dropdownPosition: string = 'relative'; // Posizione del dropdown rispetto alla searchbar. \"relative\" o \"absolute\"\n\n\n /* ---------------------- @EVENTS ------------------------- */\n\n /**\n * Evento emesso quando l'utente clicca sull'icona in variant linear e linearIconOnly\n */\n @Event({ eventName: 'jump-search-bar-expanded' }) searchbarExpanded: EventEmitter;\n\n /**\n * Evento emesso quando l'utente effettua una ricerca \n * Emette un oggetto contenenente il valore della ricerca alla chiave 'search'\n * */\n @Event({ eventName: 'jump-search-bar' }) search: EventEmitter;\n @Event({ eventName: 'jump-filterchange' }) searchFilters: EventEmitter; // E' analoga a quella sopra ma serve per i filtri\n\n /** \n * Evento emesso quando l'utente clicca sul pulsante (se presente) o nel pulsante del dropdown per vedere tutti i risultati \n * Emette un oggetto contenenente il valore della ricerca alla chiave 'search'\n */\n @Event({ eventName: 'jump-search-bar-show-all' }) showFullSearch: EventEmitter;\n\n /* \n * Evento da ascoltare per recuperare il dato cliccato\n * Emette un oggetto contenente tutti i dati relativi al risultato cliccato.\n */\n @Event({ eventName: 'jump-search-bar-res-clicked'}) resultClicked: EventEmitter; \n\n /* ---------------------- @LIFECYCLE ------------------------- */\n componentDidLoad() {\n // Aggiungi l'event listener per il clic al di fuori del componente\n document.addEventListener('click', this.handleOutsideClick.bind(this));\n }\n\n disconnectedCallback() {\n // Rimuovi l'event listener per evitare perdite di memoria\n document.removeEventListener('click', this.handleOutsideClick.bind(this));\n }\n\n /* -------------------- @LISTEN ------------------------------- */\n @Listen(\"jump-search-bar-dropdown-item-connected\")\n addOption(e) {\n let props = e.detail; // es {code: 'sku1', imageUrl: 'https://google.com/'}\n\n // Aggiungi l'elemento solo a `recents`\n this.recents = [...this.recents, { ...props }];\n\n // Aggiorna `innerResults` basandoti solo su `recents`\n this.innerResults = [...this.recents];\n }\n\n\n /* -------------------- @METHOD ------------------------------- */\n\n /** Imposta i risultati della ricerca all'interno della dropdown */\n @Method()\n async setResults(results, tot?: number) {\n this.results = results;\n this.innerResults = results;\n this.totalResults = tot;\n }\n\n /* -------------------- LOCAL METHODS ------------------------- */\n handleOutsideClick(event: MouseEvent) {\n // Controlla se il clic è fuori dal componente\n if (this.componentRef && !this.componentRef.contains(event.target as Node)) {\n this.dropdownVisible = false;\n }\n }\n\n // Gestisce l'evento focus sull'input\n handleFocus = () => {\n const searchBarContainer = this.jumpSearchBar.closest('.SearchBar');\n if (searchBarContainer) {\n searchBarContainer.classList.add('focused');\n }\n };\n\n // Gestisce l'evento blur sull'input\n handleBlur = () => {\n const searchBarContainer = this.jumpSearchBar.closest('.SearchBar');\n if (searchBarContainer) {\n searchBarContainer.classList.remove('focused');\n }\n };\n\n doSearch = () => {\n if (this.jumpSearchBar) {\n this.searchValue = this.jumpSearchBar.value;\n \n // Iniziare la ricerca solamente se ci sono almeno tre caratteri \n if (this.searchValue.length >= 3) {\n this.resType = 'results';\n\n this.innerResults = undefined;\n \n this.search.emit({ search: this.searchValue });\n this.searchFilters.emit({ name: 's', values: this.searchValue });\n \n // Se il dropdown è chiuso, aprilo. Potrebbe essere chiuso perchè non ci sono recenti\n if (!this.dropdownVisible) {\n this.dropdownVisible = true;\n }\n } else if(this.searchValue.length == 0) {\n this.dropdownVisible = false;\n }\n }\n };\n\n debounce(fn, delay = this.debounceTime) {\n let timeoutId;\n\n return (...args) => {\n if (timeoutId) {\n clearTimeout(timeoutId);\n }\n timeoutId = setTimeout(() => {\n fn.apply(null, args);\n }, delay);\n };\n };\n\n openDropdown() {\n this.resType = 'recents';\n this.dropdownVisible = true;\n }\n\n /** Emette l'evento di click su un risultato, mandandone tutti i dati */\n handleResClicked(item) {\n this.resultClicked.emit({ clicked: item });\n } \n\n /** Emette l'evento quando l'utente clicca sul pulsante (se presente) o nel pulsante del dropdown per vedere tutti i risultati */\n btnOrShowOtherClicked(){\n this.showFullSearch.emit({ search: this.searchValue });\n }\n\n /**\n * Se clicco l'icona espando la searchbar ed emetto un evento dedicato\n */\n expandSearchBar() {\n this.isExpanded = true;\n this.searchbarExpanded.emit();\n }\n\n\n /* --------------------- RENDER ------------------------------- */\n renderLinearIconOnly() {\n return (\n <Host class={\"JumpSearchBar \"} ref={(el) => (this.componentRef = el as HTMLElement)}>\n <div class={\"SearchBar iconOnly \" + this.variant + (this.isExpanded ? \" expanded\" : \"\")}>\n <div class=\"InputWrapper\" onClick={(this.isExpanded && this.dropdown && this.recents.length > 0) ? () => this.openDropdown() : null}>\n <jump-icon\n name=\"magnifying-glass\"\n category=\"light\"\n onClick={() => this.expandSearchBar()}\n ></jump-icon>\n {this.isExpanded &&\n // Mostra la barra di ricerca con l'animazione di slide\n <input\n placeholder={this.placeholder}\n type=\"search\"\n value={this.searchValue}\n id={this.identifier}\n class=\"search-input\"\n ref={(el) => { this.jumpSearchBar = el as HTMLInputElement }}\n onInput={this.debounce(this.doSearch)}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n />\n }\n </div>\n </div>\n {(this.dropdown && this.dropdownVisible) && this.renderDropdown()} \n </Host>\n );\n }\n\n renderDefault() {\n return (\n <Host class={\"JumpSearchBar\"} ref={(el) => (this.componentRef = el as HTMLElement)}>\n <div class={\"SearchBar \" + this.variant + \" \" + (this.withBtn ? \"withBtn\" : \"\") + (this.isExpanded ? \" expanded\" : \"\")}>\n <div class=\"InputWrapper\" onClick={(this.dropdown && this.recents.length > 0) ? () => this.openDropdown() : null}>\n {!this.withBtn && <jump-icon name=\"magnifying-glass\" category=\"light\"></jump-icon>}\n <input\n placeholder={this.placeholder}\n type=\"search\"\n id={this.identifier}\n class=\"search-input\"\n value={this.searchValue}\n ref={(el) => { this.jumpSearchBar = el as HTMLInputElement }}\n onInput={this.debounce(this.doSearch)}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n />\n </div>\n {this.withBtn && !this.linearIconOnly && (\n <jump-button\n variant=\"secondary\"\n size=\"medium\"\n name=\"scopri\"\n value=\"value\"\n aria-label=\"Scopri di più\"\n id=\"button\"\n onlyIcon\n onClick={() => this.btnOrShowOtherClicked()}\n >\n <jump-icon slot=\"suffix\" name=\"magnifying-glass\"></jump-icon>\n </jump-button>\n )}\n </div>\n {(this.dropdown && this.dropdownVisible) && this.renderDropdown()} \n </Host>\n );\n }\n\n renderDropdown(){\n console.log('POSITION', this.dropdownPosition);\n return <div class={\"Dropdown \" + (this.dropdownPosition == 'absolute' ? 'dropAbsolute' : 'dropRelative' ) }>\n {(this.resType == 'recents') &&\n <div class=\"Dropdown__Recents\">\n <span class=\"title\">{this.recentsTitle}</span>\n <div class=\"ResWrapper\">\n {this.innerResults.length > 0 && this.innerResults.map((item) => (\n <div onClick={() => this.handleResClicked(item)}>\n <jump-icon name=\"magnifying-glass\" category=\"light\"></jump-icon>\n {item['value']}\n </div>\n ))}\n </div>\n </div>\n }\n {this.resType == 'results' &&\n <div class=\"Dropdown__Results\">\n <div class=\"ResWrapper\">\n {this.innerResults === undefined ?\n <div class=\"helperText\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"xMidYMid\" width=\"252\" height=\"252\" ><g><g transform=\"rotate(0 50 50)\">\n <rect fill=\"#707070\" height=\"11\" width=\"4\" ry=\"1.87\" rx=\"1.87\" y=\"27.5\" x=\"48\">\n <animate repeatCount=\"indefinite\" begin=\"-0.9s\" dur=\"1s\" keyTimes=\"0;1\" values=\"1;0\" attributeName=\"opacity\"></animate>\n </rect>\n </g><g transform=\"rotate(36 50 50)\">\n <rect fill=\"#707070\" height=\"11\" width=\"4\" ry=\"1.87\" rx=\"1.87\" y=\"27.5\" x=\"48\">\n <animate repeatCount=\"indefinite\" begin=\"-0.8s\" dur=\"1s\" keyTimes=\"0;1\" values=\"1;0\" attributeName=\"opacity\"></animate>\n </rect>\n </g><g transform=\"rotate(72 50 50)\">\n <rect fill=\"#707070\" height=\"11\" width=\"4\" ry=\"1.87\" rx=\"1.87\" y=\"27.5\" x=\"48\">\n <animate repeatCount=\"indefinite\" begin=\"-0.7s\" dur=\"1s\" keyTimes=\"0;1\" values=\"1;0\" attributeName=\"opacity\"></animate>\n </rect>\n </g><g transform=\"rotate(108 50 50)\">\n <rect fill=\"#707070\" height=\"11\" width=\"4\" ry=\"1.87\" rx=\"1.87\" y=\"27.5\" x=\"48\">\n <animate repeatCount=\"indefinite\" begin=\"-0.6s\" dur=\"1s\" keyTimes=\"0;1\" values=\"1;0\" attributeName=\"opacity\"></animate>\n </rect>\n </g><g transform=\"rotate(144 50 50)\">\n <rect fill=\"#707070\" height=\"11\" width=\"4\" ry=\"1.87\" rx=\"1.87\" y=\"27.5\" x=\"48\">\n <animate repeatCount=\"indefinite\" begin=\"-0.5s\" dur=\"1s\" keyTimes=\"0;1\" values=\"1;0\" attributeName=\"opacity\"></animate>\n </rect>\n </g><g transform=\"rotate(180 50 50)\">\n <rect fill=\"#707070\" height=\"11\" width=\"4\" ry=\"1.87\" rx=\"1.87\" y=\"27.5\" x=\"48\">\n <animate repeatCount=\"indefinite\" begin=\"-0.4s\" dur=\"1s\" keyTimes=\"0;1\" values=\"1;0\" attributeName=\"opacity\"></animate>\n </rect>\n </g><g transform=\"rotate(216 50 50)\">\n <rect fill=\"#707070\" height=\"11\" width=\"4\" ry=\"1.87\" rx=\"1.87\" y=\"27.5\" x=\"48\">\n <animate repeatCount=\"indefinite\" begin=\"-0.3s\" dur=\"1s\" keyTimes=\"0;1\" values=\"1;0\" attributeName=\"opacity\"></animate>\n </rect>\n </g><g transform=\"rotate(252 50 50)\">\n <rect fill=\"#707070\" height=\"11\" width=\"4\" ry=\"1.87\" rx=\"1.87\" y=\"27.5\" x=\"48\">\n <animate repeatCount=\"indefinite\" begin=\"-0.2s\" dur=\"1s\" keyTimes=\"0;1\" values=\"1;0\" attributeName=\"opacity\"></animate>\n </rect>\n </g><g transform=\"rotate(288 50 50)\">\n <rect fill=\"#707070\" height=\"11\" width=\"4\" ry=\"1.87\" rx=\"1.87\" y=\"27.5\" x=\"48\">\n <animate repeatCount=\"indefinite\" begin=\"-0.1s\" dur=\"1s\" keyTimes=\"0;1\" values=\"1;0\" attributeName=\"opacity\"></animate>\n </rect>\n </g><g transform=\"rotate(324 50 50)\">\n <rect fill=\"#707070\" height=\"11\" width=\"4\" ry=\"1.87\" rx=\"1.87\" y=\"27.5\" x=\"48\">\n <animate repeatCount=\"indefinite\" begin=\"0s\" dur=\"1s\" keyTimes=\"0;1\" values=\"1;0\" attributeName=\"opacity\"></animate>\n </rect>\n </g><g></g></g></svg>{this.loadingText}</div>\n :\n (this.innerResults.length > 0 ?\n this.innerResults.map((item) => (\n <div onClick={() => this.handleResClicked(item)} key={item['id']}>\n {item['img'] && <img src={item['img']} alt=\"result\" />}\n {item['value']}\n </div>\n ))\n :\n <div class=\"helperText\">{this.noResultText}</div>\n )\n }\n {(this.innerResults && this.innerResults.length > 0) &&\n <div class=\"totalRes\">\n <jump-button variant=\"secondary\" size=\"small\" text onClick={() => this.btnOrShowOtherClicked()} target=\"_blank\"> {this.showAllResText} </jump-button>\n {this.totalResults && <div>{this.totalResults} {this.resultsText}</div>}\n </div>\n }\n </div>\n </div>\n }\n </div>\n }\n\n render() {\n if (this.variant === 'linear' && this.linearIconOnly) {\n return this.renderLinearIconOnly();\n } else {\n return this.renderDefault();\n }\n }\n}"],"version":3}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, h } from './index-
|
|
1
|
+
import { r as registerInstance, h } from './index-a94b3471.js';
|
|
2
2
|
|
|
3
3
|
const jumpSideCartExampleCss = ":host{display:block}.example-container{display:flex;min-height:100vh;align-items:center;justify-content:center;gap:1rem;padding:2rem;background-color:#f5f5f5}.example-button{padding:0.75rem 1.5rem;background-color:#80bb55;color:white;border:none;border-radius:6px;cursor:pointer;font-weight:500;transition:background-color 0.2s ease}.example-button:hover{background-color:#68a03b}.example-button:active{transform:translateY(1px)}";
|
|
4
4
|
const JumpSideCartExampleStyle0 = jumpSideCartExampleCss;
|
|
@@ -56,7 +56,7 @@ const JumpSideCartExample = class {
|
|
|
56
56
|
];
|
|
57
57
|
}
|
|
58
58
|
render() {
|
|
59
|
-
return (h("div", { key: '
|
|
59
|
+
return (h("div", { key: '5efee94d4b2b177e44dd4de1fdb99facf24af210', class: "example-container" }, h("button", { key: '42d849157bb43fd022e8febfd0abe61ff4f3edf2', class: "example-button", onClick: this.openCartFromRight }, "Open Cart from Right"), h("button", { key: '9067c8fa80e8649e74885c9dc3dd057d42752018', class: "example-button", onClick: this.openCartFromLeft }, "Open Cart from Left"), h("jump-side-cart", { key: '28379da2a29089c10f2cb4f8311a25e508f07277', isOpen: this.isCartOpen, items: this.cartItems, position: this.position, discountThreshold: {
|
|
60
60
|
amount: 170,
|
|
61
61
|
percentage: 3
|
|
62
62
|
}, progressPercentage: 30, checkoutLabel: "Vai al Checkout", viewCartLabel: "Vedi carrello", onCartClosed: this.handleCartClosed, onItemQuantityChanged: this.handleUpdateQuantity, onItemRemoved: this.handleRemoveItem, onCheckoutClicked: this.handleCheckout, onViewCartClicked: this.handleViewCart })));
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h } from './index-
|
|
1
|
+
import { r as registerInstance, c as createEvent, h } from './index-a94b3471.js';
|
|
2
2
|
|
|
3
3
|
const jumpSideCartCss = ":host{--cart-width:400px;--cart-bg:#ffffff;--overlay-bg:rgba(0, 0, 0, 0.5);--border-color:#e5e5e5;--text-primary:#333333;--text-secondary:#666666;--primary-color:#80bb55;--secondary-color:#f5f5f5;--error-color:#dc3545;--success-color:#28a745}.side-cart{position:fixed;top:0;bottom:0;width:100%;z-index:1000;pointer-events:none}.side-cart--open{pointer-events:all}.side-cart--right{right:0}.side-cart--right .side-cart__content{right:0;transform:translateX(100%)}.side-cart--right.side-cart--open .side-cart__content{transform:translateX(0)}.side-cart--left{left:0}.side-cart--left .side-cart__content{left:0;transform:translateX(-100%)}.side-cart--left.side-cart--open .side-cart__content{transform:translateX(0)}.side-cart__overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:var(--overlay-bg);opacity:0;transition:opacity 0.3s ease}.side-cart--open .side-cart__overlay{opacity:1}.side-cart__content{position:absolute;top:0;bottom:0;width:var(--cart-width);max-width:90vw;background:var(--cart-bg);box-shadow:-2px 0 10px rgba(0, 0, 0, 0.1);transition:transform 0.3s ease;display:flex;flex-direction:column}.side-cart--left .side-cart__content{box-shadow:2px 0 10px rgba(0, 0, 0, 0.1)}.side-cart__header{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid var(--border-color)}.side-cart__header h2{margin:0;font-size:1.25rem;font-weight:600;color:var(--text-primary)}.side-cart__header .close-btn{background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--text-secondary);padding:0.25rem;line-height:1}.side-cart__header .close-btn:hover{color:var(--text-primary)}.side-cart__body{flex:1;overflow-y:auto;padding:1rem}.empty-cart{text-align:center;padding:2rem 0;color:var(--text-secondary)}.cart-items{display:flex;flex-direction:column;gap:1rem}.cart-item{display:flex;gap:0.75rem;padding:1rem;border:1px solid var(--border-color);border-radius:8px}.cart-item__image{flex-shrink:0;width:80px;height:80px}.cart-item__image img{width:100%;height:100%;object-fit:cover;border-radius:4px}.cart-item__details{flex:1;min-width:0}.cart-item__brand{font-size:0.75rem;color:var(--text-secondary);margin-bottom:0.25rem;text-transform:uppercase;font-weight:500}.cart-item__name{font-size:0.875rem;font-weight:500;color:var(--text-primary);margin-bottom:0.25rem;line-height:1.3}.cart-item__description{font-size:0.75rem;color:var(--text-secondary);margin-bottom:0.5rem}.cart-item__price{font-weight:600;color:var(--text-primary)}.cart-item__original-price{margin-left:0.5rem;text-decoration:line-through;color:var(--text-secondary);font-weight:normal}.cart-item__controls{flex-shrink:0;display:flex;flex-direction:column;gap:0.5rem;align-items:center}.quantity-controls{display:flex;align-items:center;border:1px solid var(--border-color);border-radius:4px}.quantity-controls .quantity-btn{background:none;border:none;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-primary)}.quantity-controls .quantity-btn:hover:not(:disabled){background:var(--secondary-color)}.quantity-controls .quantity-btn:disabled{opacity:0.5;cursor:not-allowed}.quantity-controls .quantity{min-width:40px;text-align:center;padding:0 0.5rem;border-left:1px solid var(--border-color);border-right:1px solid var(--border-color);font-weight:500}.remove-btn{background:none;border:none;color:var(--error-color);font-size:0.75rem;cursor:pointer;padding:0.25rem 0.5rem;border-radius:4px}.remove-btn:hover{background:rgba(220, 53, 69, 0.1)}.progress-section{margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--border-color)}.progress-bar{width:100%;height:8px;background:var(--secondary-color);border-radius:4px;overflow:hidden;margin-bottom:0.5rem}.progress-bar .progress-fill{height:100%;background:var(--primary-color);transition:width 0.3s ease}.progress-text{font-size:0.875rem;color:var(--text-secondary);text-align:center}.side-cart__footer{border-top:1px solid var(--border-color);padding:1rem}.totals{margin-bottom:1rem}.totals .subtotal,.totals .savings{display:flex;justify-content:space-between;margin-bottom:0.5rem}.totals .subtotal{font-weight:600;font-size:1.125rem}.totals .savings{color:var(--success-color);font-size:0.875rem}.actions{display:flex;gap:0.75rem}.actions .btn{flex:1;padding:0.75rem;border:none;border-radius:6px;font-weight:500;cursor:pointer;transition:all 0.2s ease}.actions .btn--primary{background:var(--primary-color);color:white}.actions .btn--primary:hover{background:#68a03b;filter:brightness(0.9)}.actions .btn--secondary{background:var(--secondary-color);color:var(--text-primary);border:1px solid var(--border-color)}.actions .btn--secondary:hover{background:#e8e8e8;filter:brightness(0.95)}@media (max-width: 768px){.side-cart__content{width:100vw;max-width:none}.cart-item__details{font-size:0.8rem}.cart-item__name{font-size:0.8rem}}";
|
|
4
4
|
const JumpSideCartStyle0 = jumpSideCartCss;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, H as Host } from './index-
|
|
1
|
+
import { r as registerInstance, c as createEvent, h, H as Host } from './index-a94b3471.js';
|
|
2
2
|
|
|
3
3
|
const jumpTabItemCss = ":host{display:block;--jump-tabitem-active-color:var(--secondary-standard);--jump-tabitem-color:var(--neutral-grey-secondary);--jump-tabitem-hover-color:var(--neutral-grey-disabled, #CBCBCB);--jump-tabitem-boxed-bg-color:var(--secondary-soft, #EDF2FA);--jump-tabitem-rounded-bg-color:white;--jump-tabitem-border-inline-color:var(--neutral-grey-disabled, #CBCBCB);--jump-tabitem-font-size:16px;--jump-tabitem-inline-padding:12px 24px;--jump-tabitem-boxed-padding:15px 39px;--jump-tabitem-rounded-padding:12px 32px;--jump-tabitem-sheet-padding:12px 32px;font-family:var(--ff-primary);flex:0 0 auto}:host .Content{display:flex;}:host .Content:hover:not(.disabled){cursor:pointer}:host .Content .label{font-size:var(--jump-tabitem-font-size)}:host .Content.left{flex-direction:row;gap:6px;align-items:center}:host .Content.top{flex-direction:column;gap:2px;align-items:center}:host .Content.inline{color:var(--jump-tabitem-color);padding:var(--jump-tabitem-inline-padding);border-bottom:1px solid var(--jump-tabitem-border-inline-color)}:host .Content.inline:not(.active){padding-bottom:14px}:host .Content.inline.active{color:var(--jump-tabitem-active-color);border-bottom:3px solid var(--jump-tabitem-active-color)}:host .Content.inline.active span{font-weight:bold}:host .Content.inline:hover:not(.disabled):not(.active){border-bottom:3px solid var(--jump-tabitem-hover-color);cursor:pointer;padding-bottom:12px}:host .Content.boxed{color:var(--jump-tabitem-color);padding:var(--jump-tabitem-boxed-padding);background-color:transparent;border:1px solid var(--jump-tabitem-boxed-bg-color)}:host .Content.boxed:hover:not(.disabled),:host .Content.boxed:hover:not(.active){background-color:transparent}:host .Content.boxed:hover:not(.disabled) span,:host .Content.boxed:hover:not(.active) span{font-weight:bold}:host .Content.boxed.active{color:var(--jump-tabitem-active-color);background-color:var(--jump-tabitem-boxed-bg-color);border:1px solid var(--jump-tabitem-boxed-bg-color)}:host .Content.boxed.active span{font-weight:bold}:host .Content.rounded{padding:var(--jump-tabitem-rounded-padding);color:var(--jump-tabitem-color)}:host .Content.rounded:hover:not(.disabled){cursor:pointer}:host .Content.rounded:hover:not(.disabled) span{font-weight:bold}:host .Content.rounded.active{color:var(--jump-tabitem-active-color);background-color:var(--jump-tabitem-rounded-bg-color);border:1px solid var(--jump-tabitem-active-color);border-radius:50px}:host .Content.sheet{padding:var(--jump-tabitem-sheet-padding);color:var(--neutral-grey-secondary)}:host .Content.sheet:hover:not(.disabled){cursor:pointer}:host .Content.sheet:hover:not(.disabled) span{font-weight:bold}:host .Content.sheet.active{color:var(--jump-tabitem-active-color);background-color:var(--jump-tabitem-rounded-bg-color);border-radius:8px 8px 0px 0px}:host(.disabled){cursor:not-allowed;opacity:0.5;pointer-events:none}";
|
|
4
4
|
const JumpTabItemStyle0 = jumpTabItemCss;
|
|
@@ -24,8 +24,8 @@ const JumpTabItem = class {
|
|
|
24
24
|
this.variant = parentVariant;
|
|
25
25
|
}
|
|
26
26
|
render() {
|
|
27
|
-
return (h(Host, { key: '
|
|
28
|
-
h("jump-icon", { key: '
|
|
27
|
+
return (h(Host, { key: 'e5cc92e20d207f5a77ae4ef8365cd05e5697ad43', ref: (el) => { this.tabEl = el; }, class: "JumpTabItem " + (this.active ? 'active' : '') + " " + (this.variant) + " " + (this.disabled ? 'disabled' : '') }, h("div", { key: '935051a19cc3feae5745e2ac7d0ea0270e3d9849', class: "Content " + (this.iconName ? this.iconPosition : '') + " " + (this.variant) + " " + (this.active ? 'active' : '') + " " + (this.disabled ? 'disabled' : ''), onClick: () => this.changeTab(this.identifier), id: this.identifier }, (this.iconName && (this.variant == 'inline' || this.variant == 'boxed')) &&
|
|
28
|
+
h("jump-icon", { key: 'bdd907209efa74af1bb0cfd93b3cd85e02ec9f41', library: "fa", category: "regular", name: this.iconName, size: "small" }), h("span", { key: '6d4747a618f8f2b38a8c4adfc710bdf743f197a0', class: "label" }, this.label))));
|
|
29
29
|
}
|
|
30
30
|
};
|
|
31
31
|
JumpTabItem.style = JumpTabItemStyle0;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, h, H as Host } from './index-
|
|
1
|
+
import { r as registerInstance, h, H as Host } from './index-a94b3471.js';
|
|
2
2
|
|
|
3
3
|
const jumpTabPanelCss = ":host{display:block}.JumpTabPanel__Content{display:none;padding:1rem 0}.JumpTabPanel__Content.active{display:block}";
|
|
4
4
|
const JumpTabPanelStyle0 = jumpTabPanelCss;
|
|
@@ -10,7 +10,7 @@ const JumpTabPanel = class {
|
|
|
10
10
|
this.active = false;
|
|
11
11
|
}
|
|
12
12
|
render() {
|
|
13
|
-
return (h(Host, { key: '
|
|
13
|
+
return (h(Host, { key: 'bde92a51266193503b490c29e2f5658625f7091e', class: "JumpTabPanel", id: this.identifier }, h("div", { key: '28668409b16c37eea9f10f602a83978412baad9a', class: "JumpTabPanel__Content " + (this.active ? 'active' : '') }, h("slot", { key: 'bb06f4ada692c89437dfd980253414240b52f375' }))));
|
|
14
14
|
}
|
|
15
15
|
};
|
|
16
16
|
JumpTabPanel.style = JumpTabPanelStyle0;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, H as Host } from './index-
|
|
1
|
+
import { r as registerInstance, c as createEvent, h, H as Host } from './index-a94b3471.js';
|
|
2
2
|
|
|
3
3
|
const jumpTabCss = ":host{display:block;--jump-tab-bg-color:var(--gray-ultralight, #f8f8f8);--jump-tab-border-color:var(--neutral-grey-disabled, #CBCBCB);overflow-x:auto;scrollbar-width:none;}:host::-webkit-scrollbar{display:none;}.Wrapper{display:flex;flex-direction:column;overflow-x:auto;scrollbar-width:none;}.Wrapper::-webkit-scrollbar{display:none;}.ContentWrapper{display:flex;flex-direction:column;width:100%;justify-content:var(--alignment, flex-start)}@media (max-width: 768px){.ContentWrapper.ContentWrapper--Items{justify-content:flex-start;overflow-x:auto}.ContentWrapper.ContentWrapper--Items .fullBorder{justify-content:flex-start}}.Content{display:flex;flex-direction:row;align-items:flex-end;width:fit-content}.Content.fullBorder{width:100%;border-bottom:1px solid var(--jump-tab-border-color);justify-content:var(--alignment, flex-start)}.Content.fullBorder.inline ::slotted([slot=tab-item]){margin-bottom:-1px}.Content.rounded{border-radius:50px;background-color:var(--jump-tab-bg-color)}.Content.disabled{cursor:not-allowed;opacity:0.5;pointer-events:none}jump-tab-item{display:flex;align-items:flex-end;overflow:hidden}jump-tab-item .tab-title{display:block;white-space:normal;text-align:center}";
|
|
4
4
|
const JumpTabStyle0 = jumpTabCss;
|
|
@@ -72,7 +72,7 @@ const JumpTab = class {
|
|
|
72
72
|
}
|
|
73
73
|
}
|
|
74
74
|
render() {
|
|
75
|
-
return (h(Host, { key: '
|
|
75
|
+
return (h(Host, { key: '59e43d82c8b42b021901c38df7e011b4214322c4', class: "JumpTab " + this.variant, id: this.tabGroupName, ref: (el) => { this.JumpTabEl = el; } }, h("div", { key: 'bf856ca2cdf08bedac4de091665a76fad3839035', class: "Wrapper " + (this.fullBorder ? 'fullBorder' : '') }, h("div", { key: 'e9972902f6be1b6e389a84cc13ebe0d143fd30ec', class: "ContentWrapper ContentWrapper--Items", style: { '--alignment': this.getAlignment(this.alignment) } }, h("div", { key: '7e2bbecf1a4ba7ca854edf4b632039300e3987ed', class: "Content " + this.variant + " " + (this.disabled ? 'disabled' : '') + " " + (this.fullBorder ? 'fullBorder' : ''), style: { '--alignment': this.getAlignment(this.alignment) } }, h("slot", { key: '99ed84c1151955db9c2df9b5ef992fa57ffdb49b', name: "tab-item" }))), h("div", { key: '6881b2bfa14e188654c31088c4a27b8de7ba14f1', class: "ContentWrapper ContentWrapper--Panel" }, h("slot", { key: 'c33f6ee0952db88e1237593a1e264beb9f8c7ed3', name: "tab-content" })))));
|
|
76
76
|
}
|
|
77
77
|
getAlignment(alignment) {
|
|
78
78
|
switch (alignment) {
|