@zanichelli/albe-web-components 7.2.0 → 7.3.0
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-e3299e0a.js +10 -6
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/web-components-library.cjs.js +1 -1
- package/dist/cjs/z-app-header_2.cjs.entry.js +152 -0
- package/dist/cjs/z-button-sort.cjs.entry.js +1 -1
- package/dist/cjs/z-button.cjs.entry.js +43 -0
- package/dist/cjs/z-card.cjs.entry.js +1 -1
- package/dist/cjs/z-chip.cjs.entry.js +6 -3
- package/dist/cjs/z-dragdrop-area_2.cjs.entry.js +25 -4
- package/dist/cjs/z-list_3.cjs.entry.js +1 -1
- package/dist/cjs/z-menu-section.cjs.entry.js +11 -3
- package/dist/cjs/z-menu.cjs.entry.js +26 -14
- package/dist/cjs/z-myz-card-footer.cjs.entry.js +13 -1
- package/dist/cjs/z-myz-card-icon.cjs.entry.js +1 -1
- package/dist/cjs/z-myz-card_4.cjs.entry.js +2 -2
- package/dist/cjs/z-offcanvas.cjs.entry.js +57 -0
- package/dist/cjs/z-searchbar.cjs.entry.js +12 -3
- package/dist/cjs/z-stepper-item.cjs.entry.js +1 -1
- package/dist/cjs/z-toggle-button.cjs.entry.js +4 -2
- package/dist/collection/collection-manifest.json +1 -1
- package/dist/collection/components/buttons/z-button-sort/index.js +2 -2
- package/dist/collection/components/buttons/z-button-sort/styles.css +1 -1
- package/dist/collection/components/buttons/z-chip/index.js +25 -3
- package/dist/collection/components/buttons/z-chip/styles.css +28 -21
- package/dist/collection/components/buttons/z-toggle-button/index.js +21 -1
- package/dist/collection/components/buttons/z-toggle-button/styles.css +1 -3
- package/dist/collection/components/indicators/z-stepper-item/styles.css +1 -1
- package/dist/collection/components/inputs/z-searchbar/index.js +76 -3
- package/dist/collection/components/inputs/z-searchbar/styles.css +23 -0
- package/dist/collection/components/list/z-list-element/index.js +1 -1
- package/dist/collection/components/modal/z-modal/index.js +43 -4
- package/dist/collection/components/navigation/z-app-header/index.js +14 -15
- package/dist/collection/components/navigation/z-app-header/styles.css +2 -3
- package/dist/collection/components/navigation/z-menu/index.js +45 -21
- package/dist/collection/components/navigation/z-menu/styles.css +80 -13
- package/dist/collection/components/navigation/z-menu-section/index.js +13 -4
- package/dist/collection/components/navigation/z-menu-section/styles.css +37 -4
- package/dist/collection/components/notification/z-toast-notification/index.js +1 -1
- package/dist/collection/components/z-card/index.js +9 -0
- package/dist/collection/components/z-card/styles.css +1 -1
- package/dist/collection/components/z-offcanvas/index.js +39 -23
- package/dist/collection/components/z-offcanvas/styles.css +5 -5
- package/dist/collection/snowflakes/myz/card/z-myz-card-footer/index.js +13 -1
- package/dist/collection/snowflakes/myz/card/z-myz-card-header/index.js +1 -1
- package/dist/collection/snowflakes/myz/card/z-myz-card-header/styles.css +12 -0
- package/dist/collection/snowflakes/myz/card/z-myz-card-icon/styles.css +1 -1
- package/dist/collection/utils/storybook-utils.js +1 -1
- package/dist/esm/index-a2ca4b97.js +10 -6
- package/dist/esm/loader.js +1 -1
- package/dist/esm/web-components-library.js +1 -1
- package/dist/esm/z-app-header_2.entry.js +147 -0
- package/dist/esm/z-button-sort.entry.js +1 -1
- package/dist/esm/z-button.entry.js +39 -0
- package/dist/esm/z-card.entry.js +1 -1
- package/dist/esm/z-chip.entry.js +7 -4
- package/dist/esm/z-dragdrop-area_2.entry.js +25 -4
- package/dist/esm/z-list_3.entry.js +1 -1
- package/dist/esm/z-menu-section.entry.js +11 -3
- package/dist/esm/z-menu.entry.js +26 -14
- package/dist/esm/z-myz-card-footer.entry.js +14 -2
- package/dist/esm/z-myz-card-icon.entry.js +1 -1
- package/dist/esm/z-myz-card_4.entry.js +2 -2
- package/dist/esm/z-offcanvas.entry.js +53 -0
- package/dist/esm/z-searchbar.entry.js +13 -4
- package/dist/esm/z-stepper-item.entry.js +1 -1
- package/dist/esm/z-toggle-button.entry.js +4 -2
- package/dist/types/components/buttons/z-button-sort/index.d.ts +2 -2
- package/dist/types/components/buttons/z-chip/index.d.ts +2 -0
- package/dist/types/components/buttons/z-toggle-button/index.d.ts +2 -0
- package/dist/types/components/inputs/z-searchbar/index.d.ts +7 -1
- package/dist/types/components/modal/z-modal/index.d.ts +4 -0
- package/dist/types/components/navigation/z-app-header/index.d.ts +2 -4
- package/dist/types/components/navigation/z-menu/index.d.ts +13 -5
- package/dist/types/components/navigation/z-menu-section/index.d.ts +9 -3
- package/dist/types/components/notification/z-toast-notification/index.d.ts +1 -1
- package/dist/types/components/z-card/index.d.ts +9 -0
- package/dist/types/components/z-offcanvas/index.d.ts +4 -1
- package/dist/types/components.d.ts +65 -17
- package/dist/types/snowflakes/myz/card/z-myz-card-footer/index.d.ts +2 -0
- package/dist/web-components-library/p-068951a7.entry.js +1 -0
- package/dist/web-components-library/p-06b7dad4.entry.js +1 -0
- package/dist/web-components-library/{p-417b1b6c.entry.js → p-10adc1fa.entry.js} +1 -1
- package/dist/web-components-library/p-1570917d.entry.js +1 -0
- package/dist/web-components-library/p-157aea3b.entry.js +1 -0
- package/dist/web-components-library/p-1c8e7c24.entry.js +1 -0
- package/dist/web-components-library/p-20682781.entry.js +1 -0
- package/dist/web-components-library/{p-ede9fbf5.entry.js → p-6736e894.entry.js} +1 -1
- package/dist/web-components-library/{p-810bd730.entry.js → p-9db2bf11.entry.js} +1 -1
- package/dist/web-components-library/p-af283478.entry.js +1 -0
- package/dist/web-components-library/p-c722c5a4.entry.js +1 -0
- package/dist/web-components-library/p-d0760bb1.entry.js +1 -0
- package/dist/web-components-library/p-deda8776.entry.js +1 -0
- package/dist/web-components-library/p-f3a8cc14.entry.js +1 -0
- package/dist/web-components-library/{p-05ced71c.entry.js → p-f5a99b28.entry.js} +1 -1
- package/dist/web-components-library/{p-c081e1f4.entry.js → p-f9f42d17.entry.js} +1 -1
- package/dist/web-components-library/web-components-library.css +1 -1
- package/dist/web-components-library/web-components-library.esm.js +1 -1
- package/package.json +2 -3
- package/readme.md +0 -1
- package/www/build/p-068951a7.entry.js +1 -0
- package/www/build/p-06b7dad4.entry.js +1 -0
- package/www/build/{p-417b1b6c.entry.js → p-10adc1fa.entry.js} +1 -1
- package/www/build/p-1570917d.entry.js +1 -0
- package/www/build/p-157aea3b.entry.js +1 -0
- package/www/build/p-1c8e7c24.entry.js +1 -0
- package/www/build/p-20682781.entry.js +1 -0
- package/www/build/{p-ede9fbf5.entry.js → p-6736e894.entry.js} +1 -1
- package/www/build/p-77d28b14.js +1 -0
- package/www/build/{p-810bd730.entry.js → p-9db2bf11.entry.js} +1 -1
- package/www/build/p-ab4e13f7.css +1 -0
- package/www/build/p-af283478.entry.js +1 -0
- package/www/build/p-c722c5a4.entry.js +1 -0
- package/www/build/p-d0760bb1.entry.js +1 -0
- package/www/build/p-deda8776.entry.js +1 -0
- package/www/build/p-f3a8cc14.entry.js +1 -0
- package/www/build/{p-05ced71c.entry.js → p-f5a99b28.entry.js} +1 -1
- package/www/build/{p-c081e1f4.entry.js → p-f9f42d17.entry.js} +1 -1
- package/www/build/web-components-library.css +1 -1
- package/www/build/web-components-library.esm.js +1 -1
- package/www/index.html +1 -37
- package/CHANGELOG.md +0 -2337
- package/dist/cjs/z-app-header.cjs.entry.js +0 -133
- package/dist/cjs/z-button_3.cjs.entry.js +0 -108
- package/dist/esm/z-app-header.entry.js +0 -129
- package/dist/esm/z-button_3.entry.js +0 -102
- package/dist/web-components-library/p-029e4fba.entry.js +0 -1
- package/dist/web-components-library/p-14a6abe4.entry.js +0 -1
- package/dist/web-components-library/p-19ca449e.entry.js +0 -1
- package/dist/web-components-library/p-3a9cc467.entry.js +0 -1
- package/dist/web-components-library/p-73d9489b.entry.js +0 -1
- package/dist/web-components-library/p-9d03a7d6.entry.js +0 -1
- package/dist/web-components-library/p-f158d205.entry.js +0 -1
- package/dist/web-components-library/p-f95cc914.entry.js +0 -1
- package/dist/web-components-library/p-fa4c203a.entry.js +0 -1
- package/dist/web-components-library/p-fffb14e1.entry.js +0 -1
- package/src-react/index.ts +0 -1
- package/www/build/p-029e4fba.entry.js +0 -1
- package/www/build/p-14a6abe4.entry.js +0 -1
- package/www/build/p-19ca449e.entry.js +0 -1
- package/www/build/p-275801c6.css +0 -1
- package/www/build/p-3a9cc467.entry.js +0 -1
- package/www/build/p-73d9489b.entry.js +0 -1
- package/www/build/p-811ee64f.js +0 -1
- package/www/build/p-9d03a7d6.entry.js +0 -1
- package/www/build/p-f158d205.entry.js +0 -1
- package/www/build/p-f95cc914.entry.js +0 -1
- package/www/build/p-fa4c203a.entry.js +0 -1
- package/www/build/p-fffb14e1.entry.js +0 -1
|
@@ -1,133 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
const index = require('./index-e3299e0a.js');
|
|
6
|
-
|
|
7
|
-
const stylesCss = ":host{--app-header-content-max-width:100%;--app-header-height:auto;--app-header-typography-1-size:24px;--app-header-typography-2-size:28px;--app-header-typography-3-size:32px;--app-header-typography-4-size:36px;--app-header-typography-5-size:42px;--app-header-typography-6-size:48px;--app-header-typography-7-size:54px;--app-header-typography-8-size:60px;--app-header-typography-9-size:68px;--app-header-typography-10-size:76px;--app-header-typography-11-size:84px;--app-header-typography-12-size:92px;--app-header-typography-1-lineheight:1.33;--app-header-typography-2-lineheight:1.29;--app-header-typography-3-lineheight:1.25;--app-header-typography-4-lineheight:1.24;--app-header-typography-5-lineheight:1.24;--app-header-typography-6-lineheight:1.25;--app-header-typography-7-lineheight:1.2;--app-header-typography-8-lineheight:1.26;--app-header-typography-9-lineheight:1.24;--app-header-typography-10-lineheight:1.26;--app-header-typography-11-lineheight:1.2;--app-header-typography-12-lineheight:1.2;--app-header-typography-1-tracking:calc(-0.2 / 1em);--app-header-typography-2-tracking:calc(-0.4 / 1em);--app-header-typography-3-tracking:calc(-0.6 / 1em);--app-header-typography-4-tracking:calc(-0.8 / 1em);--app-header-typography-5-tracking:calc(-1 / 1em);--app-header-typography-6-tracking:calc(-1.2 / 1em);--app-header-typography-7-tracking:calc(-1.4 / 1em);--app-header-typography-8-tracking:calc(-1.6 / 1em);--app-header-typography-9-tracking:calc(-1.8 / 1em);--app-header-typography-10-tracking:calc(-2 / 1em);--app-header-typography-11-tracking:calc(-2.2 / 1em);--app-header-typography-12-tracking:calc(-2.4 / 1em);--app-header-top-offset:48px;--app-header-drawer-trigger-size:calc(var(--space-unit) * 4);--app-header-bg:var(--color-white);--app-header-stucked-bg:var(--color-white);--app-header-text-color:var(--gray800);--app-header-stucked-text-color:var(--gray800);display:block;color:var(--app-header-text-color)}:host,*{box-sizing:border-box}.heading-panel{position:relative;display:flex;width:100%;max-width:var(--app-header-content-max-width);height:var(--app-header-height);flex-direction:column;flex-grow:0;flex-shrink:0;align-items:baseline;justify-content:flex-start;padding:var(--grid-margin);margin:0 auto;background:var(--app-header-bg)}:host(:empty) .heading-panel{padding:0}.heading-title{display:flex;max-width:100%;flex-direction:row;align-items:center}:host(:not([menu-length=\"0\"])) .heading-subtitle{padding-left:calc(var(--app-header-drawer-trigger-size) + (var(--space-unit) * 1.5))}.heading-stuck{position:fixed;z-index:20;top:var(--app-header-top-offset);left:0;width:100%;max-width:100%;animation:slide-stuck-heading-in 250ms ease-out;background:var(--app-header-stucked-bg);box-shadow:var(--shadow-2);color:var(--app-header-stucked-text-color)}.heading-stuck-content{display:flex;max-width:var(--app-header-content-max-width);padding:var(--space-unit) var(--grid-margin);margin:0 auto}.heading-stuck .heading-title,.heading-stuck .heading-title>*,.heading-stuck .heading-title ::slotted([slot=\"stucked-title\"]){display:block;overflow:hidden;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}.heading-stuck .heading-title>*,::slotted([slot=\"title\"]),::slotted([slot=\"stucked-title\"]){margin:0;font-family:\"IBM Plex Serif\", serif;font-size:var(--app-header-typography-3-size);font-weight:700;letter-spacing:var(--app-header-typography-3-tracking)}::slotted([slot=\"title\"]){line-height:1}::slotted([slot=\"subtitle\"]){margin:var(--space-unit) 0 0;font-family:var(--font-family-sans);font-size:20px;font-style:italic;font-weight:500;line-height:1.2}.heading-container{position:relative;z-index:1;display:flex;max-width:100%;flex-direction:column;align-items:flex-start;justify-content:flex-start;margin-right:auto}.menu-container{display:none;flex-flow:row wrap;align-items:baseline}.menu-container ::slotted([open]){position:relative;z-index:3}.menu-container ::slotted(*:not(:last-of-type)){margin-right:calc(var(--space-unit) * 4.5)}.drawer-trigger{padding:0;border:0;margin:0 calc(var(--space-unit) * 1.5) 0 0;appearance:none;background:none;border-radius:0;color:inherit;cursor:pointer}.drawer-trigger z-icon{--z-icon-width:var(--app-header-drawer-trigger-size);--z-icon-height:var(--app-header-drawer-trigger-size);fill:currentcolor}.drawer-container{position:fixed;z-index:100;top:var(--app-header-top-offset);left:0;width:100%;height:100%;pointer-events:none}.drawer-container .drawer-overlay{position:absolute;z-index:1;top:0;left:0;display:block;width:100%;height:100%;background:var(--gray900);opacity:0;pointer-events:none;transition:opacity 400ms ease-out}.drawer-panel{position:absolute;z-index:2;top:0;left:0;display:flex;width:375px;max-width:100%;height:100%;flex-direction:column;align-items:flex-start;padding:calc(var(--space-unit) * 2) var(--space-unit);background:var(--color-white);color:var(--gray800);pointer-events:none;transform:translate3d(-100%, 0, 0);transition:transform 400ms ease-out}.drawer-content{display:flex;overflow:auto;width:100%;flex:1 auto;flex-direction:column;padding:calc(var(--space-unit) * 0.5) var(--space-unit)}.drawer-content::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}.drawer-content::-webkit-scrollbar-track{background-color:transparent}.drawer-content::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}.drawer-content::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}.drawer-content ::slotted(z-menu){width:100%}.drawer-content ::slotted(z-menu:not(:last-of-type)){margin-bottom:calc(var(--space-unit) * 2.5)}.drawer-close{--z-icon-width:var(--app-header-drawer-trigger-size);--z-icon-height:var(--app-header-drawer-trigger-size);padding:0;border:0;margin:0 0 calc(var(--space-unit) * 2.5) var(--space-unit);appearance:none;background:transparent;border-radius:0;color:inherit;cursor:pointer;fill:currentcolor;font-size:inherit;outline:none}.drawer-close:focus-visible{box-shadow:var(--shadow-focus-primary)}:host([drawer-open]) .drawer-container .drawer-overlay{opacity:0.7;pointer-events:all}:host([drawer-open]) .drawer-container .drawer-panel{pointer-events:all;transform:none}.hero-container{position:absolute;z-index:0;top:0;left:0;width:100%;height:100%}:host([overlay]) .heading-panel .drawer-trigger z-icon,:host([overlay]) .heading-panel .heading-container,:host([overlay]) .heading-panel .menu-container{color:var(--color-white);fill:var(--color-white)}:host([overlay]) .heading-panel .menu-container ::slotted(z-menu:not([open])){--color-surface05:var(--color-white)}:host([overlay]) .hero-container::after{position:absolute;z-index:0;top:0;left:0;width:100%;height:100%;background:var(--color-black);content:\"\";opacity:0.5}.hero-container img,.hero-container ::slotted(*){position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:top center;-webkit-user-drag:none}@media (min-width: 768px){:host(:not([flow=\"offcanvas\"])) .heading-subtitle{padding-left:0}:host(:not([flow=\"offcanvas\"])) .menu-container{display:flex}:host(:not([flow=\"offcanvas\"])) .heading-container .drawer-trigger{display:none}:host(:not([flow=\"offcanvas\"],[menu-length=\"0\"])) .heading-container:not(:last-child){margin-bottom:calc(var(--space-unit) * 3)}::slotted([slot=\"title\"]){font-size:var(--app-header-typography-6-size);letter-spacing:var(--app-header-typography-6-tracking)}::slotted([slot=\"subtitle\"]){margin-top:calc(var(--space-unit) * 1.5)}}@media (min-width: 1152px){:host(:not([flow=\"stack\"])) .heading-panel{flex-flow:row wrap}::slotted([slot=\"title\"]){margin-right:var(--grid-gutter);font-size:var(--app-header-typography-7-size);letter-spacing:var(--app-header-typography-7-tracking)}:host(:not([flow=\"offcanvas\"],[menu-length=\"0\"])) .heading-container:not(:last-child){margin-bottom:calc(var(--space-unit) * 2)}.menu-container{margin-top:var(--space-unit)}}@media (min-width: 1366px){::slotted([slot=\"title\"]){font-size:var(--app-header-typography-9-size);letter-spacing:var(--app-header-typography-9-tracking)}:host(:not([flow=\"offcanvas\"],[menu-length=\"0\"])) .heading-container:not(:last-child){margin-bottom:0}}@keyframes slide-stuck-heading-in{0%{transform:translate3d(0, -100%, 0)}100%{transform:none}}";
|
|
8
|
-
|
|
9
|
-
const SUPPORT_INTERSECTION_OBSERVER = typeof IntersectionObserver !== "undefined";
|
|
10
|
-
const ZAppHeader = class {
|
|
11
|
-
constructor(hostRef) {
|
|
12
|
-
index.registerInstance(this, hostRef);
|
|
13
|
-
this.sticking = index.createEvent(this, "sticking", 7);
|
|
14
|
-
/**
|
|
15
|
-
* Stuck mode for the header.
|
|
16
|
-
* You can programmatically set it using an IntersectionObserver.
|
|
17
|
-
* **Optional**
|
|
18
|
-
*/
|
|
19
|
-
this.stuck = false;
|
|
20
|
-
/**
|
|
21
|
-
* Should place an overlay over the hero image.
|
|
22
|
-
* Useful for legibility purpose.
|
|
23
|
-
* **Optional**
|
|
24
|
-
*/
|
|
25
|
-
this.overlay = false;
|
|
26
|
-
/**
|
|
27
|
-
* Control menu bar position in the header.
|
|
28
|
-
* - auto: the menu bar is positioned near the title
|
|
29
|
-
* - stack: the menu bar is positioned below the title
|
|
30
|
-
* - offcanvas: the menu bar is not displayed and a burger icon appears to open the offcanvas menu
|
|
31
|
-
*
|
|
32
|
-
* **Optional**
|
|
33
|
-
*/
|
|
34
|
-
this.flow = "auto";
|
|
35
|
-
/**
|
|
36
|
-
* The opening state of the drawer.
|
|
37
|
-
*/
|
|
38
|
-
this.drawerOpen = false;
|
|
39
|
-
/**
|
|
40
|
-
* The stuck state of the bar.
|
|
41
|
-
*/
|
|
42
|
-
this._stuck = false;
|
|
43
|
-
this.observer = SUPPORT_INTERSECTION_OBSERVER &&
|
|
44
|
-
new IntersectionObserver(([entry]) => {
|
|
45
|
-
this._stuck = !entry.isIntersecting;
|
|
46
|
-
}, {
|
|
47
|
-
threshold: 0.5,
|
|
48
|
-
});
|
|
49
|
-
this.openDrawer = this.openDrawer.bind(this);
|
|
50
|
-
this.closeDrawer = this.closeDrawer.bind(this);
|
|
51
|
-
this.collectMenuElements.bind(this);
|
|
52
|
-
}
|
|
53
|
-
emitStickingEvent() {
|
|
54
|
-
this.sticking.emit(this._stuck);
|
|
55
|
-
}
|
|
56
|
-
componentDidLoad() {
|
|
57
|
-
this.collectMenuElements();
|
|
58
|
-
this.onStuckMode();
|
|
59
|
-
}
|
|
60
|
-
get title() {
|
|
61
|
-
const titleElement = this.hostElement.querySelector('[slot="title"]');
|
|
62
|
-
if (titleElement === null) {
|
|
63
|
-
return "";
|
|
64
|
-
}
|
|
65
|
-
return titleElement.textContent.trim();
|
|
66
|
-
}
|
|
67
|
-
get scrollParent() {
|
|
68
|
-
const parent = this.hostElement.offsetParent;
|
|
69
|
-
if (parent === document.body || parent === document.documentElement) {
|
|
70
|
-
return window;
|
|
71
|
-
}
|
|
72
|
-
return parent;
|
|
73
|
-
}
|
|
74
|
-
collectMenuElements() {
|
|
75
|
-
const menuElements = (this.menuElements = this.hostElement.querySelectorAll('[slot="menu"]'));
|
|
76
|
-
this.menuLength = menuElements.length;
|
|
77
|
-
this.setMenuFloatingMode();
|
|
78
|
-
}
|
|
79
|
-
onStuckMode() {
|
|
80
|
-
if (this.stuck) {
|
|
81
|
-
this.enableStuckObserver();
|
|
82
|
-
}
|
|
83
|
-
else {
|
|
84
|
-
this.disableStuckMode();
|
|
85
|
-
}
|
|
86
|
-
}
|
|
87
|
-
enableStuckObserver() {
|
|
88
|
-
if (this.observer) {
|
|
89
|
-
this.observer.observe(this.container);
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
disableStuckMode() {
|
|
93
|
-
this._stuck = false;
|
|
94
|
-
if (this.observer) {
|
|
95
|
-
this.observer.unobserve(this.container);
|
|
96
|
-
}
|
|
97
|
-
}
|
|
98
|
-
onStuck() {
|
|
99
|
-
const scrollParent = this.scrollParent;
|
|
100
|
-
if (!scrollParent) {
|
|
101
|
-
return;
|
|
102
|
-
}
|
|
103
|
-
this.emitStickingEvent();
|
|
104
|
-
}
|
|
105
|
-
setMenuFloatingMode() {
|
|
106
|
-
if (this.menuElements.length === 0) {
|
|
107
|
-
return;
|
|
108
|
-
}
|
|
109
|
-
const elements = this.menuElements;
|
|
110
|
-
for (let i = 0, len = elements.length; i < len; i++) {
|
|
111
|
-
elements[i].open = false;
|
|
112
|
-
elements[i].floating = !this.drawerOpen;
|
|
113
|
-
}
|
|
114
|
-
}
|
|
115
|
-
render() {
|
|
116
|
-
return (index.h(index.Host, { "menu-length": this.menuLength }, index.h("div", { class: "heading-panel", ref: (el) => (this.container = el) }, index.h("div", { class: "hero-container" }, index.h("slot", { name: "hero" }, this.hero && (index.h("img", { alt: "", src: this.hero })))), index.h("div", { class: "heading-container" }, index.h("div", { class: "heading-title" }, this.menuLength > 0 && (index.h("button", { class: "drawer-trigger", "aria-label": "Apri menu", onClick: this.openDrawer }, index.h("z-icon", { name: "burger-menu" }))), index.h("slot", { name: "title" })), index.h("div", { class: "heading-subtitle" }, index.h("slot", { name: "subtitle" }))), index.h("div", { class: "menu-container" }, !this.drawerOpen && this.flow !== "offcanvas" && (index.h("slot", { name: "menu", onSlotchange: () => this.collectMenuElements() })))), index.h("div", { class: "drawer-container" }, index.h("div", { class: "drawer-overlay", onClick: this.closeDrawer }), index.h("div", { class: "drawer-panel" }, index.h("button", { class: "drawer-close", "aria-label": "Chiudi menu", onClick: this.closeDrawer }, index.h("z-icon", { name: "close" })), index.h("div", { class: "drawer-content" }, this.drawerOpen && (index.h("slot", { name: "menu", onSlotchange: () => this.collectMenuElements() }))))), this._stuck && (index.h("div", { class: "heading-stuck" }, index.h("div", { class: "heading-stuck-content" }, this.menuLength > 0 && (index.h("button", { class: "drawer-trigger", "aria-label": "Apri menu", onClick: this.openDrawer }, index.h("z-icon", { name: "burger-menu" }))), index.h("div", { class: "heading-title" }, index.h("slot", { name: "stucked-title" }, this.title)))))));
|
|
117
|
-
}
|
|
118
|
-
openDrawer() {
|
|
119
|
-
this.drawerOpen = true;
|
|
120
|
-
}
|
|
121
|
-
closeDrawer() {
|
|
122
|
-
this.drawerOpen = false;
|
|
123
|
-
}
|
|
124
|
-
get hostElement() { return index.getElement(this); }
|
|
125
|
-
static get watchers() { return {
|
|
126
|
-
"stuck": ["onStuckMode"],
|
|
127
|
-
"_stuck": ["onStuck"],
|
|
128
|
-
"drawerOpen": ["setMenuFloatingMode"]
|
|
129
|
-
}; }
|
|
130
|
-
};
|
|
131
|
-
ZAppHeader.style = stylesCss;
|
|
132
|
-
|
|
133
|
-
exports.z_app_header = ZAppHeader;
|
|
@@ -1,108 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
const index = require('./index-e3299e0a.js');
|
|
6
|
-
const index$1 = require('./index-7a9a8430.js');
|
|
7
|
-
const icons = require('./icons-a9849a41.js');
|
|
8
|
-
|
|
9
|
-
const stylesCss$2 = ".sc-z-button-h{display:inline-block;--z-icon-width:16px;--z-icon-height:16px;--z-icon-right-margin:0}[disabled].sc-z-button-h:not([disabled=\"false\"]){pointer-events:none}.sc-z-button-h .z-button--container.sc-z-button{display:inline-flex;width:100%;box-sizing:border-box;align-items:center;justify-content:center;padding:0;border-width:var(--border-size-medium);border-style:solid;border-radius:var(--border-radius);cursor:pointer;fill:currentcolor;font-family:var(--font-family-sans);font-size:14px;font-weight:var(--font-sb);letter-spacing:0.3px;line-height:1;outline:none;text-decoration:none;text-transform:uppercase;white-space:nowrap}.sc-z-button-h .z-button--container.sc-z-button:focus:focus-visible{box-shadow:var(--shadow-focus-primary)}.sc-z-button-h .z-button--container.z-button--has-text.sc-z-button{min-width:calc(var(--space-unit) * 8);padding:0 calc(var(--space-unit) * 2)}.sc-z-button-h .z-button--container.z-button--has-text.sc-z-button z-icon.sc-z-button{--z-icon-right-margin:var(--space-unit)}[size=\"big\"].sc-z-button-h .z-button--container.sc-z-button{min-width:44px;height:44px}[size=\"small\"].sc-z-button-h .z-button--container.sc-z-button{min-width:36px;height:36px}[size=\"x-small\"].sc-z-button-h .z-button--container.sc-z-button{min-width:32px;height:32px}[variant=\"primary\"].sc-z-button-h .z-button--container.sc-z-button{border-color:var(--color-primary01);background-color:var(--color-primary01);color:var(--color-text-inverse)}@media (hover: hover){[variant=\"primary\"].sc-z-button-h .z-button--container.sc-z-button:hover{border-color:var(--color-hover-primary);background-color:var(--color-hover-primary);color:var(--color-text-inverse)}}[variant=\"primary\"].sc-z-button-h .z-button--container.sc-z-button:active{border-color:var(--color-pressed-primary);background-color:var(--color-pressed-primary);box-shadow:var(--shadow-2);color:var(--color-text-inverse)}[variant=\"primary\"][disabled].sc-z-button-h:not([disabled=\"false\"]) .z-button--container.sc-z-button{border-color:var(--color-disabled01);background-color:var(--color-disabled01);color:var(--color-disabled02)}[variant=\"secondary\"].sc-z-button-h .z-button--container.sc-z-button{border-color:var(--color-primary01);background-color:var(--color-surface01);color:var(--color-primary01)}@media (hover: hover){[variant=\"secondary\"].sc-z-button-h .z-button--container.sc-z-button:hover{border-color:var(--color-hover-primary);background-color:var(--color-surface01);color:var(--color-hover-primary)}}[variant=\"secondary\"].sc-z-button-h .z-button--container.sc-z-button:active{border-color:var(--color-pressed-primary);background-color:var(--color-surface01);box-shadow:var(--shadow-2);color:var(--color-pressed-primary)}[variant=\"secondary\"][disabled].sc-z-button-h:not([disabled=\"false\"]) .z-button--container.sc-z-button{border-color:var(--color-disabled01);background-color:var(--color-surface01);color:var(--color-disabled02)}[variant=\"tertiary\"].sc-z-button-h .z-button--container.sc-z-button{border-color:transparent;background-color:transparent;color:var(--color-primary01)}@media (hover: hover){[variant=\"tertiary\"].sc-z-button-h .z-button--container.sc-z-button:hover{border-color:var(--color-primary03);background-color:var(--color-primary03);color:var(--color-hover-primary)}}[variant=\"tertiary\"].sc-z-button-h .z-button--container.sc-z-button:focus:focus-visible{border-color:var(--color-surface01);background-color:var(--color-surface01);color:var(--color-primary01)}[variant=\"tertiary\"].sc-z-button-h .z-button--container.sc-z-button:active{border-color:var(--color-surface01);background-color:var(--color-surface01);box-shadow:var(--shadow-2);color:var(--color-primary01)}[variant=\"tertiary\"][disabled].sc-z-button-h:not([disabled=\"false\"]) .z-button--container.sc-z-button{border-color:transparent;background-color:transparent;color:var(--color-disabled02)}";
|
|
10
|
-
|
|
11
|
-
const ZButton = class {
|
|
12
|
-
constructor(hostRef) {
|
|
13
|
-
index.registerInstance(this, hostRef);
|
|
14
|
-
/** defines a string value that labels an interactive element, used for accessibility. */
|
|
15
|
-
this.ariaLabel = "";
|
|
16
|
-
/** HTML button disabled attribute. */
|
|
17
|
-
this.disabled = false;
|
|
18
|
-
/** HTML button type attribute. */
|
|
19
|
-
this.type = index$1.ButtonType.BUTTON;
|
|
20
|
-
/** Graphical variant: `primary`, `secondary`, `tertiary`. Defaults to `primary`. */
|
|
21
|
-
this.variant = index$1.ButtonVariant.PRIMARY;
|
|
22
|
-
/** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */
|
|
23
|
-
this.size = index$1.ControlSize.BIG;
|
|
24
|
-
}
|
|
25
|
-
getAttributes() {
|
|
26
|
-
return {
|
|
27
|
-
id: this.htmlid,
|
|
28
|
-
class: {
|
|
29
|
-
"z-button--container": true,
|
|
30
|
-
"z-button--has-text": !!this.hostElement.textContent.trim(),
|
|
31
|
-
},
|
|
32
|
-
};
|
|
33
|
-
}
|
|
34
|
-
render() {
|
|
35
|
-
if (this.href) {
|
|
36
|
-
return (index.h("a", Object.assign({}, this.getAttributes(), { "aria-label": this.ariaLabel, href: this.href, target: this.target }), this.icon && (index.h("z-icon", { name: this.icon, width: 16, height: 16 })), index.h("slot", null)));
|
|
37
|
-
}
|
|
38
|
-
return (index.h("button", Object.assign({}, this.getAttributes(), { "aria-label": this.ariaLabel, name: this.name, type: this.type, disabled: this.disabled }), this.icon && (index.h("z-icon", { name: this.icon, width: 16, height: 16 })), index.h("slot", null)));
|
|
39
|
-
}
|
|
40
|
-
get hostElement() { return index.getElement(this); }
|
|
41
|
-
};
|
|
42
|
-
ZButton.style = stylesCss$2;
|
|
43
|
-
|
|
44
|
-
const stylesCss$1 = ":host{margin-right:var(--z-icon-right-margin, 0);margin-left:var(--z-icon-left-margin, 0);line-height:0;vertical-align:middle}:host svg:not([width]){width:var(--z-icon-width, 18px)}:host svg:not([height]){height:var(--z-icon-height, 18px)}";
|
|
45
|
-
|
|
46
|
-
const ZIcon = class {
|
|
47
|
-
constructor(hostRef) {
|
|
48
|
-
index.registerInstance(this, hostRef);
|
|
49
|
-
}
|
|
50
|
-
selectPathOrPolygon(iconValue) {
|
|
51
|
-
if (iconValue === null || iconValue === void 0 ? void 0 : iconValue.startsWith("M")) {
|
|
52
|
-
return index.h("path", { d: icons.ICONS[this.name] });
|
|
53
|
-
}
|
|
54
|
-
return index.h("polygon", { points: icons.ICONS[this.name] });
|
|
55
|
-
}
|
|
56
|
-
render() {
|
|
57
|
-
return (index.h(index.Host, { "aria-hidden": "true" }, index.h("svg", { viewBox: "0 0 1000 1000", width: this.width, height: this.height, id: this.iconid, fill: this.fill ? `var(--${this.fill})` : "" }, this.selectPathOrPolygon(icons.ICONS[this.name]))));
|
|
58
|
-
}
|
|
59
|
-
};
|
|
60
|
-
ZIcon.style = stylesCss$1;
|
|
61
|
-
|
|
62
|
-
const stylesCss = ".sc-z-offcanvas-h{--z-offcanvas--container-width:375px;--z-offcanvas--top-space:0;min-width:100%;height:100%;font-family:var(--font-family-sans);font-weight:var(--font-rg);visibility:hidden}.canvas-container.sc-z-offcanvas{display:flex;overflow:-moz-scrollbars-none;overflow:hidden;min-width:100%;height:100%;flex-direction:column;background:var(--color-surface01)}[variant=\"pushcontent\"].sc-z-offcanvas-h{display:none}[open].sc-z-offcanvas-h{display:flex;visibility:visible}[variant=\"overlay\"].sc-z-offcanvas-h{position:fixed;z-index:1000;top:var(--z-offcanvas--top-space);right:0;bottom:0;left:0;display:flex;height:calc(100% - var(--z-offcanvas--top-space))}[variant=\"overlay\"][transitiondirection=\"left\"].sc-z-offcanvas-h{justify-content:end}[variant=\"overlay\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{z-index:1010}[variant=\"overlay\"].sc-z-offcanvas-h .canvas-background.sc-z-offcanvas{position:absolute;left:0;width:100%;height:100%;background-color:var(--gray900);opacity:0.7}.canvas-container.sc-z-offcanvas>.canvas-content.sc-z-offcanvas{overflow:auto;flex:1 auto;padding:0 calc(var(--space-unit) * 2);margin:calc(var(--space-unit) * 2) calc(var(--space-unit) / 2) calc(var(--space-unit) * 2) 0;overflow-x:hidden}[variant=\"overlay\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas>.canvas-content.sc-z-offcanvas{padding:0 calc(var(--space-unit) * 2) calc(var(--space-unit) * 2) calc(var(--space-unit) * 2);margin:calc(var(--space-unit) * 2) calc(var(--space-unit) / 2) 0 0}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar-track{background-color:transparent}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas{scrollbar-color:var(--color-primary01) transparent}@media only screen and (max-width: 768px){[open][transitiondirection=\"left\"].sc-z-offcanvas-h:not([skipAnimationOnLoad])>.canvas-container.sc-z-offcanvas{animation:enter-right 0.4s ease-out}[open][transitiondirection=\"right\"].sc-z-offcanvas-h:not([skipAnimationOnLoad])>.canvas-container.sc-z-offcanvas{animation:enter-left 0.4s ease-out}}@media only screen and (min-width: 768px){.sc-z-offcanvas-h{min-width:auto}.canvas-container.sc-z-offcanvas{width:auto;min-width:max(var(--z-offcanvas--container-width), 375px);max-width:max(var(--z-offcanvas--container-width), 375px);height:auto;min-height:calc(var(--space-unit) * 40)}.sc-z-offcanvas-h:not([variant=\"overlay\"])[open]:not([skipAnimationOnLoad]){width:auto;animation:grow 0.4s ease-out}}@keyframes grow{from{width:0}to{width:max(var(--z-offcanvas--container-width), 375px)}}@keyframes enter-left{from{transform:translateX(-100%)}to{transform:translateX(0)}}@keyframes enter-right{from{transform:translateX(100%)}to{transform:translateX(0)}}[open][variant=\"overlay\"][transitiondirection=\"left\"].sc-z-offcanvas-h:not([skipAnimationOnLoad])>.canvas-container.sc-z-offcanvas{animation:enter-right 0.4s ease-out}[open][transitiondirection=\"right\"].sc-z-offcanvas-h:not([skipAnimationOnLoad])>.canvas-container.sc-z-offcanvas{animation:enter-left 0.4s ease-out}.sc-z-offcanvas-h:not([open])[variant=\"overlay\"][transitiondirection=\"right\"]>.canvas-container.sc-z-offcanvas{transform:translateX(-100%);transition:visibility 0.4s ease-out, transform 0.4s ease-out}.sc-z-offcanvas-h:not([open])[variant=\"overlay\"][transitiondirection=\"left\"]>.canvas-container.sc-z-offcanvas{transform:translateX(100%);transition:visibility 0.4s ease-out, transform 0.4s ease-out}.sc-z-offcanvas-h:not([open])[variant=\"overlay\"] .canvas-background.sc-z-offcanvas{transition:visibility 0.4s ease-out;visibility:hidden}";
|
|
63
|
-
|
|
64
|
-
const ZOffcanvas = class {
|
|
65
|
-
constructor(hostRef) {
|
|
66
|
-
index.registerInstance(this, hostRef);
|
|
67
|
-
this.canvasOpenStatusChanged = index.createEvent(this, "canvasOpenStatusChanged", 7);
|
|
68
|
-
/**
|
|
69
|
-
* Offcanvas variant.
|
|
70
|
-
* Can be one of "overlay", "pushcontent"
|
|
71
|
-
* Default variant: pushcontent
|
|
72
|
-
*/
|
|
73
|
-
this.variant = index$1.OffCanvasVariant.PUSHCONTENT;
|
|
74
|
-
/** open component. Default: false */
|
|
75
|
-
this.open = false;
|
|
76
|
-
/** open content transitioning in a specified direction left | right. Default: left */
|
|
77
|
-
this.transitiondirection = index$1.TransitionDirection.LEFT;
|
|
78
|
-
/** allows you to skip the entry animation on page load, to be used with the open prop at true */
|
|
79
|
-
this.skipanimationonload = false;
|
|
80
|
-
}
|
|
81
|
-
onOpenChanged() {
|
|
82
|
-
if (!this.open && this.hostElement.hasAttribute("skipanimationonload")) {
|
|
83
|
-
this.hostElement.removeAttribute("skipanimationonload");
|
|
84
|
-
}
|
|
85
|
-
if (this.open)
|
|
86
|
-
this.handleOverflowProperty();
|
|
87
|
-
this.canvasOpenStatusChanged.emit(this.open);
|
|
88
|
-
}
|
|
89
|
-
handleOverflowProperty() {
|
|
90
|
-
const overflow = this.variant === index$1.OffCanvasVariant.OVERLAY ? "overflow-y" : "overflow-x";
|
|
91
|
-
document.body.style[overflow] = this.open ? "hidden" : "";
|
|
92
|
-
}
|
|
93
|
-
handledTransitionEnd() {
|
|
94
|
-
this.handleOverflowProperty();
|
|
95
|
-
}
|
|
96
|
-
render() {
|
|
97
|
-
return (index.h(index.Host, null, index.h("div", { role: "presentation", class: "canvas-container", onTransitionEnd: () => this.handledTransitionEnd() }, index.h("div", { role: "presentation", class: "canvas-content" }, index.h("slot", { name: "canvasContent" }))), this.variant == index$1.OffCanvasVariant.OVERLAY && (index.h("div", { class: "canvas-background", "data-action": "canvasBackground", onClick: () => (this.open = false) }))));
|
|
98
|
-
}
|
|
99
|
-
get hostElement() { return index.getElement(this); }
|
|
100
|
-
static get watchers() { return {
|
|
101
|
-
"open": ["onOpenChanged"]
|
|
102
|
-
}; }
|
|
103
|
-
};
|
|
104
|
-
ZOffcanvas.style = stylesCss;
|
|
105
|
-
|
|
106
|
-
exports.z_button = ZButton;
|
|
107
|
-
exports.z_icon = ZIcon;
|
|
108
|
-
exports.z_offcanvas = ZOffcanvas;
|
|
@@ -1,129 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a2ca4b97.js';
|
|
2
|
-
|
|
3
|
-
const stylesCss = ":host{--app-header-content-max-width:100%;--app-header-height:auto;--app-header-typography-1-size:24px;--app-header-typography-2-size:28px;--app-header-typography-3-size:32px;--app-header-typography-4-size:36px;--app-header-typography-5-size:42px;--app-header-typography-6-size:48px;--app-header-typography-7-size:54px;--app-header-typography-8-size:60px;--app-header-typography-9-size:68px;--app-header-typography-10-size:76px;--app-header-typography-11-size:84px;--app-header-typography-12-size:92px;--app-header-typography-1-lineheight:1.33;--app-header-typography-2-lineheight:1.29;--app-header-typography-3-lineheight:1.25;--app-header-typography-4-lineheight:1.24;--app-header-typography-5-lineheight:1.24;--app-header-typography-6-lineheight:1.25;--app-header-typography-7-lineheight:1.2;--app-header-typography-8-lineheight:1.26;--app-header-typography-9-lineheight:1.24;--app-header-typography-10-lineheight:1.26;--app-header-typography-11-lineheight:1.2;--app-header-typography-12-lineheight:1.2;--app-header-typography-1-tracking:calc(-0.2 / 1em);--app-header-typography-2-tracking:calc(-0.4 / 1em);--app-header-typography-3-tracking:calc(-0.6 / 1em);--app-header-typography-4-tracking:calc(-0.8 / 1em);--app-header-typography-5-tracking:calc(-1 / 1em);--app-header-typography-6-tracking:calc(-1.2 / 1em);--app-header-typography-7-tracking:calc(-1.4 / 1em);--app-header-typography-8-tracking:calc(-1.6 / 1em);--app-header-typography-9-tracking:calc(-1.8 / 1em);--app-header-typography-10-tracking:calc(-2 / 1em);--app-header-typography-11-tracking:calc(-2.2 / 1em);--app-header-typography-12-tracking:calc(-2.4 / 1em);--app-header-top-offset:48px;--app-header-drawer-trigger-size:calc(var(--space-unit) * 4);--app-header-bg:var(--color-white);--app-header-stucked-bg:var(--color-white);--app-header-text-color:var(--gray800);--app-header-stucked-text-color:var(--gray800);display:block;color:var(--app-header-text-color)}:host,*{box-sizing:border-box}.heading-panel{position:relative;display:flex;width:100%;max-width:var(--app-header-content-max-width);height:var(--app-header-height);flex-direction:column;flex-grow:0;flex-shrink:0;align-items:baseline;justify-content:flex-start;padding:var(--grid-margin);margin:0 auto;background:var(--app-header-bg)}:host(:empty) .heading-panel{padding:0}.heading-title{display:flex;max-width:100%;flex-direction:row;align-items:center}:host(:not([menu-length=\"0\"])) .heading-subtitle{padding-left:calc(var(--app-header-drawer-trigger-size) + (var(--space-unit) * 1.5))}.heading-stuck{position:fixed;z-index:20;top:var(--app-header-top-offset);left:0;width:100%;max-width:100%;animation:slide-stuck-heading-in 250ms ease-out;background:var(--app-header-stucked-bg);box-shadow:var(--shadow-2);color:var(--app-header-stucked-text-color)}.heading-stuck-content{display:flex;max-width:var(--app-header-content-max-width);padding:var(--space-unit) var(--grid-margin);margin:0 auto}.heading-stuck .heading-title,.heading-stuck .heading-title>*,.heading-stuck .heading-title ::slotted([slot=\"stucked-title\"]){display:block;overflow:hidden;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}.heading-stuck .heading-title>*,::slotted([slot=\"title\"]),::slotted([slot=\"stucked-title\"]){margin:0;font-family:\"IBM Plex Serif\", serif;font-size:var(--app-header-typography-3-size);font-weight:700;letter-spacing:var(--app-header-typography-3-tracking)}::slotted([slot=\"title\"]){line-height:1}::slotted([slot=\"subtitle\"]){margin:var(--space-unit) 0 0;font-family:var(--font-family-sans);font-size:20px;font-style:italic;font-weight:500;line-height:1.2}.heading-container{position:relative;z-index:1;display:flex;max-width:100%;flex-direction:column;align-items:flex-start;justify-content:flex-start;margin-right:auto}.menu-container{display:none;flex-flow:row wrap;align-items:baseline}.menu-container ::slotted([open]){position:relative;z-index:3}.menu-container ::slotted(*:not(:last-of-type)){margin-right:calc(var(--space-unit) * 4.5)}.drawer-trigger{padding:0;border:0;margin:0 calc(var(--space-unit) * 1.5) 0 0;appearance:none;background:none;border-radius:0;color:inherit;cursor:pointer}.drawer-trigger z-icon{--z-icon-width:var(--app-header-drawer-trigger-size);--z-icon-height:var(--app-header-drawer-trigger-size);fill:currentcolor}.drawer-container{position:fixed;z-index:100;top:var(--app-header-top-offset);left:0;width:100%;height:100%;pointer-events:none}.drawer-container .drawer-overlay{position:absolute;z-index:1;top:0;left:0;display:block;width:100%;height:100%;background:var(--gray900);opacity:0;pointer-events:none;transition:opacity 400ms ease-out}.drawer-panel{position:absolute;z-index:2;top:0;left:0;display:flex;width:375px;max-width:100%;height:100%;flex-direction:column;align-items:flex-start;padding:calc(var(--space-unit) * 2) var(--space-unit);background:var(--color-white);color:var(--gray800);pointer-events:none;transform:translate3d(-100%, 0, 0);transition:transform 400ms ease-out}.drawer-content{display:flex;overflow:auto;width:100%;flex:1 auto;flex-direction:column;padding:calc(var(--space-unit) * 0.5) var(--space-unit)}.drawer-content::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}.drawer-content::-webkit-scrollbar-track{background-color:transparent}.drawer-content::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}.drawer-content::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}.drawer-content ::slotted(z-menu){width:100%}.drawer-content ::slotted(z-menu:not(:last-of-type)){margin-bottom:calc(var(--space-unit) * 2.5)}.drawer-close{--z-icon-width:var(--app-header-drawer-trigger-size);--z-icon-height:var(--app-header-drawer-trigger-size);padding:0;border:0;margin:0 0 calc(var(--space-unit) * 2.5) var(--space-unit);appearance:none;background:transparent;border-radius:0;color:inherit;cursor:pointer;fill:currentcolor;font-size:inherit;outline:none}.drawer-close:focus-visible{box-shadow:var(--shadow-focus-primary)}:host([drawer-open]) .drawer-container .drawer-overlay{opacity:0.7;pointer-events:all}:host([drawer-open]) .drawer-container .drawer-panel{pointer-events:all;transform:none}.hero-container{position:absolute;z-index:0;top:0;left:0;width:100%;height:100%}:host([overlay]) .heading-panel .drawer-trigger z-icon,:host([overlay]) .heading-panel .heading-container,:host([overlay]) .heading-panel .menu-container{color:var(--color-white);fill:var(--color-white)}:host([overlay]) .heading-panel .menu-container ::slotted(z-menu:not([open])){--color-surface05:var(--color-white)}:host([overlay]) .hero-container::after{position:absolute;z-index:0;top:0;left:0;width:100%;height:100%;background:var(--color-black);content:\"\";opacity:0.5}.hero-container img,.hero-container ::slotted(*){position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:top center;-webkit-user-drag:none}@media (min-width: 768px){:host(:not([flow=\"offcanvas\"])) .heading-subtitle{padding-left:0}:host(:not([flow=\"offcanvas\"])) .menu-container{display:flex}:host(:not([flow=\"offcanvas\"])) .heading-container .drawer-trigger{display:none}:host(:not([flow=\"offcanvas\"],[menu-length=\"0\"])) .heading-container:not(:last-child){margin-bottom:calc(var(--space-unit) * 3)}::slotted([slot=\"title\"]){font-size:var(--app-header-typography-6-size);letter-spacing:var(--app-header-typography-6-tracking)}::slotted([slot=\"subtitle\"]){margin-top:calc(var(--space-unit) * 1.5)}}@media (min-width: 1152px){:host(:not([flow=\"stack\"])) .heading-panel{flex-flow:row wrap}::slotted([slot=\"title\"]){margin-right:var(--grid-gutter);font-size:var(--app-header-typography-7-size);letter-spacing:var(--app-header-typography-7-tracking)}:host(:not([flow=\"offcanvas\"],[menu-length=\"0\"])) .heading-container:not(:last-child){margin-bottom:calc(var(--space-unit) * 2)}.menu-container{margin-top:var(--space-unit)}}@media (min-width: 1366px){::slotted([slot=\"title\"]){font-size:var(--app-header-typography-9-size);letter-spacing:var(--app-header-typography-9-tracking)}:host(:not([flow=\"offcanvas\"],[menu-length=\"0\"])) .heading-container:not(:last-child){margin-bottom:0}}@keyframes slide-stuck-heading-in{0%{transform:translate3d(0, -100%, 0)}100%{transform:none}}";
|
|
4
|
-
|
|
5
|
-
const SUPPORT_INTERSECTION_OBSERVER = typeof IntersectionObserver !== "undefined";
|
|
6
|
-
const ZAppHeader = class {
|
|
7
|
-
constructor(hostRef) {
|
|
8
|
-
registerInstance(this, hostRef);
|
|
9
|
-
this.sticking = createEvent(this, "sticking", 7);
|
|
10
|
-
/**
|
|
11
|
-
* Stuck mode for the header.
|
|
12
|
-
* You can programmatically set it using an IntersectionObserver.
|
|
13
|
-
* **Optional**
|
|
14
|
-
*/
|
|
15
|
-
this.stuck = false;
|
|
16
|
-
/**
|
|
17
|
-
* Should place an overlay over the hero image.
|
|
18
|
-
* Useful for legibility purpose.
|
|
19
|
-
* **Optional**
|
|
20
|
-
*/
|
|
21
|
-
this.overlay = false;
|
|
22
|
-
/**
|
|
23
|
-
* Control menu bar position in the header.
|
|
24
|
-
* - auto: the menu bar is positioned near the title
|
|
25
|
-
* - stack: the menu bar is positioned below the title
|
|
26
|
-
* - offcanvas: the menu bar is not displayed and a burger icon appears to open the offcanvas menu
|
|
27
|
-
*
|
|
28
|
-
* **Optional**
|
|
29
|
-
*/
|
|
30
|
-
this.flow = "auto";
|
|
31
|
-
/**
|
|
32
|
-
* The opening state of the drawer.
|
|
33
|
-
*/
|
|
34
|
-
this.drawerOpen = false;
|
|
35
|
-
/**
|
|
36
|
-
* The stuck state of the bar.
|
|
37
|
-
*/
|
|
38
|
-
this._stuck = false;
|
|
39
|
-
this.observer = SUPPORT_INTERSECTION_OBSERVER &&
|
|
40
|
-
new IntersectionObserver(([entry]) => {
|
|
41
|
-
this._stuck = !entry.isIntersecting;
|
|
42
|
-
}, {
|
|
43
|
-
threshold: 0.5,
|
|
44
|
-
});
|
|
45
|
-
this.openDrawer = this.openDrawer.bind(this);
|
|
46
|
-
this.closeDrawer = this.closeDrawer.bind(this);
|
|
47
|
-
this.collectMenuElements.bind(this);
|
|
48
|
-
}
|
|
49
|
-
emitStickingEvent() {
|
|
50
|
-
this.sticking.emit(this._stuck);
|
|
51
|
-
}
|
|
52
|
-
componentDidLoad() {
|
|
53
|
-
this.collectMenuElements();
|
|
54
|
-
this.onStuckMode();
|
|
55
|
-
}
|
|
56
|
-
get title() {
|
|
57
|
-
const titleElement = this.hostElement.querySelector('[slot="title"]');
|
|
58
|
-
if (titleElement === null) {
|
|
59
|
-
return "";
|
|
60
|
-
}
|
|
61
|
-
return titleElement.textContent.trim();
|
|
62
|
-
}
|
|
63
|
-
get scrollParent() {
|
|
64
|
-
const parent = this.hostElement.offsetParent;
|
|
65
|
-
if (parent === document.body || parent === document.documentElement) {
|
|
66
|
-
return window;
|
|
67
|
-
}
|
|
68
|
-
return parent;
|
|
69
|
-
}
|
|
70
|
-
collectMenuElements() {
|
|
71
|
-
const menuElements = (this.menuElements = this.hostElement.querySelectorAll('[slot="menu"]'));
|
|
72
|
-
this.menuLength = menuElements.length;
|
|
73
|
-
this.setMenuFloatingMode();
|
|
74
|
-
}
|
|
75
|
-
onStuckMode() {
|
|
76
|
-
if (this.stuck) {
|
|
77
|
-
this.enableStuckObserver();
|
|
78
|
-
}
|
|
79
|
-
else {
|
|
80
|
-
this.disableStuckMode();
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
enableStuckObserver() {
|
|
84
|
-
if (this.observer) {
|
|
85
|
-
this.observer.observe(this.container);
|
|
86
|
-
}
|
|
87
|
-
}
|
|
88
|
-
disableStuckMode() {
|
|
89
|
-
this._stuck = false;
|
|
90
|
-
if (this.observer) {
|
|
91
|
-
this.observer.unobserve(this.container);
|
|
92
|
-
}
|
|
93
|
-
}
|
|
94
|
-
onStuck() {
|
|
95
|
-
const scrollParent = this.scrollParent;
|
|
96
|
-
if (!scrollParent) {
|
|
97
|
-
return;
|
|
98
|
-
}
|
|
99
|
-
this.emitStickingEvent();
|
|
100
|
-
}
|
|
101
|
-
setMenuFloatingMode() {
|
|
102
|
-
if (this.menuElements.length === 0) {
|
|
103
|
-
return;
|
|
104
|
-
}
|
|
105
|
-
const elements = this.menuElements;
|
|
106
|
-
for (let i = 0, len = elements.length; i < len; i++) {
|
|
107
|
-
elements[i].open = false;
|
|
108
|
-
elements[i].floating = !this.drawerOpen;
|
|
109
|
-
}
|
|
110
|
-
}
|
|
111
|
-
render() {
|
|
112
|
-
return (h(Host, { "menu-length": this.menuLength }, h("div", { class: "heading-panel", ref: (el) => (this.container = el) }, h("div", { class: "hero-container" }, h("slot", { name: "hero" }, this.hero && (h("img", { alt: "", src: this.hero })))), h("div", { class: "heading-container" }, h("div", { class: "heading-title" }, this.menuLength > 0 && (h("button", { class: "drawer-trigger", "aria-label": "Apri menu", onClick: this.openDrawer }, h("z-icon", { name: "burger-menu" }))), h("slot", { name: "title" })), h("div", { class: "heading-subtitle" }, h("slot", { name: "subtitle" }))), h("div", { class: "menu-container" }, !this.drawerOpen && this.flow !== "offcanvas" && (h("slot", { name: "menu", onSlotchange: () => this.collectMenuElements() })))), h("div", { class: "drawer-container" }, h("div", { class: "drawer-overlay", onClick: this.closeDrawer }), h("div", { class: "drawer-panel" }, h("button", { class: "drawer-close", "aria-label": "Chiudi menu", onClick: this.closeDrawer }, h("z-icon", { name: "close" })), h("div", { class: "drawer-content" }, this.drawerOpen && (h("slot", { name: "menu", onSlotchange: () => this.collectMenuElements() }))))), this._stuck && (h("div", { class: "heading-stuck" }, h("div", { class: "heading-stuck-content" }, this.menuLength > 0 && (h("button", { class: "drawer-trigger", "aria-label": "Apri menu", onClick: this.openDrawer }, h("z-icon", { name: "burger-menu" }))), h("div", { class: "heading-title" }, h("slot", { name: "stucked-title" }, this.title)))))));
|
|
113
|
-
}
|
|
114
|
-
openDrawer() {
|
|
115
|
-
this.drawerOpen = true;
|
|
116
|
-
}
|
|
117
|
-
closeDrawer() {
|
|
118
|
-
this.drawerOpen = false;
|
|
119
|
-
}
|
|
120
|
-
get hostElement() { return getElement(this); }
|
|
121
|
-
static get watchers() { return {
|
|
122
|
-
"stuck": ["onStuckMode"],
|
|
123
|
-
"_stuck": ["onStuck"],
|
|
124
|
-
"drawerOpen": ["setMenuFloatingMode"]
|
|
125
|
-
}; }
|
|
126
|
-
};
|
|
127
|
-
ZAppHeader.style = stylesCss;
|
|
128
|
-
|
|
129
|
-
export { ZAppHeader as z_app_header };
|
|
@@ -1,102 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, h, g as getElement, H as Host, c as createEvent } from './index-a2ca4b97.js';
|
|
2
|
-
import { b as ButtonType, B as ButtonVariant, d as ControlSize, O as OffCanvasVariant, v as TransitionDirection } from './index-e36ec4a4.js';
|
|
3
|
-
import { I as ICONS } from './icons-6cd265c6.js';
|
|
4
|
-
|
|
5
|
-
const stylesCss$2 = ".sc-z-button-h{display:inline-block;--z-icon-width:16px;--z-icon-height:16px;--z-icon-right-margin:0}[disabled].sc-z-button-h:not([disabled=\"false\"]){pointer-events:none}.sc-z-button-h .z-button--container.sc-z-button{display:inline-flex;width:100%;box-sizing:border-box;align-items:center;justify-content:center;padding:0;border-width:var(--border-size-medium);border-style:solid;border-radius:var(--border-radius);cursor:pointer;fill:currentcolor;font-family:var(--font-family-sans);font-size:14px;font-weight:var(--font-sb);letter-spacing:0.3px;line-height:1;outline:none;text-decoration:none;text-transform:uppercase;white-space:nowrap}.sc-z-button-h .z-button--container.sc-z-button:focus:focus-visible{box-shadow:var(--shadow-focus-primary)}.sc-z-button-h .z-button--container.z-button--has-text.sc-z-button{min-width:calc(var(--space-unit) * 8);padding:0 calc(var(--space-unit) * 2)}.sc-z-button-h .z-button--container.z-button--has-text.sc-z-button z-icon.sc-z-button{--z-icon-right-margin:var(--space-unit)}[size=\"big\"].sc-z-button-h .z-button--container.sc-z-button{min-width:44px;height:44px}[size=\"small\"].sc-z-button-h .z-button--container.sc-z-button{min-width:36px;height:36px}[size=\"x-small\"].sc-z-button-h .z-button--container.sc-z-button{min-width:32px;height:32px}[variant=\"primary\"].sc-z-button-h .z-button--container.sc-z-button{border-color:var(--color-primary01);background-color:var(--color-primary01);color:var(--color-text-inverse)}@media (hover: hover){[variant=\"primary\"].sc-z-button-h .z-button--container.sc-z-button:hover{border-color:var(--color-hover-primary);background-color:var(--color-hover-primary);color:var(--color-text-inverse)}}[variant=\"primary\"].sc-z-button-h .z-button--container.sc-z-button:active{border-color:var(--color-pressed-primary);background-color:var(--color-pressed-primary);box-shadow:var(--shadow-2);color:var(--color-text-inverse)}[variant=\"primary\"][disabled].sc-z-button-h:not([disabled=\"false\"]) .z-button--container.sc-z-button{border-color:var(--color-disabled01);background-color:var(--color-disabled01);color:var(--color-disabled02)}[variant=\"secondary\"].sc-z-button-h .z-button--container.sc-z-button{border-color:var(--color-primary01);background-color:var(--color-surface01);color:var(--color-primary01)}@media (hover: hover){[variant=\"secondary\"].sc-z-button-h .z-button--container.sc-z-button:hover{border-color:var(--color-hover-primary);background-color:var(--color-surface01);color:var(--color-hover-primary)}}[variant=\"secondary\"].sc-z-button-h .z-button--container.sc-z-button:active{border-color:var(--color-pressed-primary);background-color:var(--color-surface01);box-shadow:var(--shadow-2);color:var(--color-pressed-primary)}[variant=\"secondary\"][disabled].sc-z-button-h:not([disabled=\"false\"]) .z-button--container.sc-z-button{border-color:var(--color-disabled01);background-color:var(--color-surface01);color:var(--color-disabled02)}[variant=\"tertiary\"].sc-z-button-h .z-button--container.sc-z-button{border-color:transparent;background-color:transparent;color:var(--color-primary01)}@media (hover: hover){[variant=\"tertiary\"].sc-z-button-h .z-button--container.sc-z-button:hover{border-color:var(--color-primary03);background-color:var(--color-primary03);color:var(--color-hover-primary)}}[variant=\"tertiary\"].sc-z-button-h .z-button--container.sc-z-button:focus:focus-visible{border-color:var(--color-surface01);background-color:var(--color-surface01);color:var(--color-primary01)}[variant=\"tertiary\"].sc-z-button-h .z-button--container.sc-z-button:active{border-color:var(--color-surface01);background-color:var(--color-surface01);box-shadow:var(--shadow-2);color:var(--color-primary01)}[variant=\"tertiary\"][disabled].sc-z-button-h:not([disabled=\"false\"]) .z-button--container.sc-z-button{border-color:transparent;background-color:transparent;color:var(--color-disabled02)}";
|
|
6
|
-
|
|
7
|
-
const ZButton = class {
|
|
8
|
-
constructor(hostRef) {
|
|
9
|
-
registerInstance(this, hostRef);
|
|
10
|
-
/** defines a string value that labels an interactive element, used for accessibility. */
|
|
11
|
-
this.ariaLabel = "";
|
|
12
|
-
/** HTML button disabled attribute. */
|
|
13
|
-
this.disabled = false;
|
|
14
|
-
/** HTML button type attribute. */
|
|
15
|
-
this.type = ButtonType.BUTTON;
|
|
16
|
-
/** Graphical variant: `primary`, `secondary`, `tertiary`. Defaults to `primary`. */
|
|
17
|
-
this.variant = ButtonVariant.PRIMARY;
|
|
18
|
-
/** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */
|
|
19
|
-
this.size = ControlSize.BIG;
|
|
20
|
-
}
|
|
21
|
-
getAttributes() {
|
|
22
|
-
return {
|
|
23
|
-
id: this.htmlid,
|
|
24
|
-
class: {
|
|
25
|
-
"z-button--container": true,
|
|
26
|
-
"z-button--has-text": !!this.hostElement.textContent.trim(),
|
|
27
|
-
},
|
|
28
|
-
};
|
|
29
|
-
}
|
|
30
|
-
render() {
|
|
31
|
-
if (this.href) {
|
|
32
|
-
return (h("a", Object.assign({}, this.getAttributes(), { "aria-label": this.ariaLabel, href: this.href, target: this.target }), this.icon && (h("z-icon", { name: this.icon, width: 16, height: 16 })), h("slot", null)));
|
|
33
|
-
}
|
|
34
|
-
return (h("button", Object.assign({}, this.getAttributes(), { "aria-label": this.ariaLabel, name: this.name, type: this.type, disabled: this.disabled }), this.icon && (h("z-icon", { name: this.icon, width: 16, height: 16 })), h("slot", null)));
|
|
35
|
-
}
|
|
36
|
-
get hostElement() { return getElement(this); }
|
|
37
|
-
};
|
|
38
|
-
ZButton.style = stylesCss$2;
|
|
39
|
-
|
|
40
|
-
const stylesCss$1 = ":host{margin-right:var(--z-icon-right-margin, 0);margin-left:var(--z-icon-left-margin, 0);line-height:0;vertical-align:middle}:host svg:not([width]){width:var(--z-icon-width, 18px)}:host svg:not([height]){height:var(--z-icon-height, 18px)}";
|
|
41
|
-
|
|
42
|
-
const ZIcon = class {
|
|
43
|
-
constructor(hostRef) {
|
|
44
|
-
registerInstance(this, hostRef);
|
|
45
|
-
}
|
|
46
|
-
selectPathOrPolygon(iconValue) {
|
|
47
|
-
if (iconValue === null || iconValue === void 0 ? void 0 : iconValue.startsWith("M")) {
|
|
48
|
-
return h("path", { d: ICONS[this.name] });
|
|
49
|
-
}
|
|
50
|
-
return h("polygon", { points: ICONS[this.name] });
|
|
51
|
-
}
|
|
52
|
-
render() {
|
|
53
|
-
return (h(Host, { "aria-hidden": "true" }, h("svg", { viewBox: "0 0 1000 1000", width: this.width, height: this.height, id: this.iconid, fill: this.fill ? `var(--${this.fill})` : "" }, this.selectPathOrPolygon(ICONS[this.name]))));
|
|
54
|
-
}
|
|
55
|
-
};
|
|
56
|
-
ZIcon.style = stylesCss$1;
|
|
57
|
-
|
|
58
|
-
const stylesCss = ".sc-z-offcanvas-h{--z-offcanvas--container-width:375px;--z-offcanvas--top-space:0;min-width:100%;height:100%;font-family:var(--font-family-sans);font-weight:var(--font-rg);visibility:hidden}.canvas-container.sc-z-offcanvas{display:flex;overflow:-moz-scrollbars-none;overflow:hidden;min-width:100%;height:100%;flex-direction:column;background:var(--color-surface01)}[variant=\"pushcontent\"].sc-z-offcanvas-h{display:none}[open].sc-z-offcanvas-h{display:flex;visibility:visible}[variant=\"overlay\"].sc-z-offcanvas-h{position:fixed;z-index:1000;top:var(--z-offcanvas--top-space);right:0;bottom:0;left:0;display:flex;height:calc(100% - var(--z-offcanvas--top-space))}[variant=\"overlay\"][transitiondirection=\"left\"].sc-z-offcanvas-h{justify-content:end}[variant=\"overlay\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{z-index:1010}[variant=\"overlay\"].sc-z-offcanvas-h .canvas-background.sc-z-offcanvas{position:absolute;left:0;width:100%;height:100%;background-color:var(--gray900);opacity:0.7}.canvas-container.sc-z-offcanvas>.canvas-content.sc-z-offcanvas{overflow:auto;flex:1 auto;padding:0 calc(var(--space-unit) * 2);margin:calc(var(--space-unit) * 2) calc(var(--space-unit) / 2) calc(var(--space-unit) * 2) 0;overflow-x:hidden}[variant=\"overlay\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas>.canvas-content.sc-z-offcanvas{padding:0 calc(var(--space-unit) * 2) calc(var(--space-unit) * 2) calc(var(--space-unit) * 2);margin:calc(var(--space-unit) * 2) calc(var(--space-unit) / 2) 0 0}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar-track{background-color:transparent}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas{scrollbar-color:var(--color-primary01) transparent}@media only screen and (max-width: 768px){[open][transitiondirection=\"left\"].sc-z-offcanvas-h:not([skipAnimationOnLoad])>.canvas-container.sc-z-offcanvas{animation:enter-right 0.4s ease-out}[open][transitiondirection=\"right\"].sc-z-offcanvas-h:not([skipAnimationOnLoad])>.canvas-container.sc-z-offcanvas{animation:enter-left 0.4s ease-out}}@media only screen and (min-width: 768px){.sc-z-offcanvas-h{min-width:auto}.canvas-container.sc-z-offcanvas{width:auto;min-width:max(var(--z-offcanvas--container-width), 375px);max-width:max(var(--z-offcanvas--container-width), 375px);height:auto;min-height:calc(var(--space-unit) * 40)}.sc-z-offcanvas-h:not([variant=\"overlay\"])[open]:not([skipAnimationOnLoad]){width:auto;animation:grow 0.4s ease-out}}@keyframes grow{from{width:0}to{width:max(var(--z-offcanvas--container-width), 375px)}}@keyframes enter-left{from{transform:translateX(-100%)}to{transform:translateX(0)}}@keyframes enter-right{from{transform:translateX(100%)}to{transform:translateX(0)}}[open][variant=\"overlay\"][transitiondirection=\"left\"].sc-z-offcanvas-h:not([skipAnimationOnLoad])>.canvas-container.sc-z-offcanvas{animation:enter-right 0.4s ease-out}[open][transitiondirection=\"right\"].sc-z-offcanvas-h:not([skipAnimationOnLoad])>.canvas-container.sc-z-offcanvas{animation:enter-left 0.4s ease-out}.sc-z-offcanvas-h:not([open])[variant=\"overlay\"][transitiondirection=\"right\"]>.canvas-container.sc-z-offcanvas{transform:translateX(-100%);transition:visibility 0.4s ease-out, transform 0.4s ease-out}.sc-z-offcanvas-h:not([open])[variant=\"overlay\"][transitiondirection=\"left\"]>.canvas-container.sc-z-offcanvas{transform:translateX(100%);transition:visibility 0.4s ease-out, transform 0.4s ease-out}.sc-z-offcanvas-h:not([open])[variant=\"overlay\"] .canvas-background.sc-z-offcanvas{transition:visibility 0.4s ease-out;visibility:hidden}";
|
|
59
|
-
|
|
60
|
-
const ZOffcanvas = class {
|
|
61
|
-
constructor(hostRef) {
|
|
62
|
-
registerInstance(this, hostRef);
|
|
63
|
-
this.canvasOpenStatusChanged = createEvent(this, "canvasOpenStatusChanged", 7);
|
|
64
|
-
/**
|
|
65
|
-
* Offcanvas variant.
|
|
66
|
-
* Can be one of "overlay", "pushcontent"
|
|
67
|
-
* Default variant: pushcontent
|
|
68
|
-
*/
|
|
69
|
-
this.variant = OffCanvasVariant.PUSHCONTENT;
|
|
70
|
-
/** open component. Default: false */
|
|
71
|
-
this.open = false;
|
|
72
|
-
/** open content transitioning in a specified direction left | right. Default: left */
|
|
73
|
-
this.transitiondirection = TransitionDirection.LEFT;
|
|
74
|
-
/** allows you to skip the entry animation on page load, to be used with the open prop at true */
|
|
75
|
-
this.skipanimationonload = false;
|
|
76
|
-
}
|
|
77
|
-
onOpenChanged() {
|
|
78
|
-
if (!this.open && this.hostElement.hasAttribute("skipanimationonload")) {
|
|
79
|
-
this.hostElement.removeAttribute("skipanimationonload");
|
|
80
|
-
}
|
|
81
|
-
if (this.open)
|
|
82
|
-
this.handleOverflowProperty();
|
|
83
|
-
this.canvasOpenStatusChanged.emit(this.open);
|
|
84
|
-
}
|
|
85
|
-
handleOverflowProperty() {
|
|
86
|
-
const overflow = this.variant === OffCanvasVariant.OVERLAY ? "overflow-y" : "overflow-x";
|
|
87
|
-
document.body.style[overflow] = this.open ? "hidden" : "";
|
|
88
|
-
}
|
|
89
|
-
handledTransitionEnd() {
|
|
90
|
-
this.handleOverflowProperty();
|
|
91
|
-
}
|
|
92
|
-
render() {
|
|
93
|
-
return (h(Host, null, h("div", { role: "presentation", class: "canvas-container", onTransitionEnd: () => this.handledTransitionEnd() }, h("div", { role: "presentation", class: "canvas-content" }, h("slot", { name: "canvasContent" }))), this.variant == OffCanvasVariant.OVERLAY && (h("div", { class: "canvas-background", "data-action": "canvasBackground", onClick: () => (this.open = false) }))));
|
|
94
|
-
}
|
|
95
|
-
get hostElement() { return getElement(this); }
|
|
96
|
-
static get watchers() { return {
|
|
97
|
-
"open": ["onOpenChanged"]
|
|
98
|
-
}; }
|
|
99
|
-
};
|
|
100
|
-
ZOffcanvas.style = stylesCss;
|
|
101
|
-
|
|
102
|
-
export { ZButton as z_button, ZIcon as z_icon, ZOffcanvas as z_offcanvas };
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as t,h as e,H as n,g as i,c as s}from"./p-d17ebc2f.js";import{h as o,m as a,j as l,l as c,D as r,E as h,f as u}from"./p-e1ac5c4e.js";const d=class{constructor(e){t(this,e),this.size=o.MEDIUM,this.listType=a.NONE}setChildrenSizeType(){const t=this.host.children;for(let e=0;e<t.length;e++)t[e].setAttribute("size",this.size),t[e].setAttribute("list-type",this.listType),t[e].setAttribute("list-element-position",(e+1).toString())}componentDidLoad(){this.setChildrenSizeType()}render(){return e(n,{role:"list"},e("slot",null))}get host(){return i(this)}};d.style=":host{display:flex;flex-direction:column;font-family:var(--font-family-sans);font-weight:var(--font-rg)}";const p=class{constructor(e){t(this,e),this.accessibleFocus=s(this,"accessibleFocus",7),this.clickItem=s(this,"clickItem",7),this.alignButton=l.LEFT,this.clickable=!1,this.dividerColor="color-surface03",this.dividerType=c.NONE,this.dividerSize=r.SMALL,this.expandable=!1,this.expandableStyle=h.ACCORDION,this.size=o.MEDIUM,this.color="none",this.disabled=!1,this.isContextualMenu=!1,this.listElementPosition="0",this.listType=a.NONE,this.showInnerContent=!1,this.openElementConfig={accordion:{open:"minus-circled",close:"plus-circled"},menu:{open:"chevron-up",close:"chevron-down"}},this.handleClick=this.handleClick.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this)}accessibleFocusHandler(t){this.listElementId===t.detail&&this.host.shadowRoot.getElementById(`z-list-element-id-${t.detail}`).focus()}handleClick(){this.clickItem.emit(this.listElementId),this.expandable&&(this.showInnerContent=!this.showInnerContent)}calculateClass(){return this.isContextualMenu?"container-contextual-menu":"container"}handleKeyDown(t){const e=t.code===u.ENTER;switch(t.code){case u.ARROW_DOWN:t.preventDefault(),this.accessibleFocus.emit(this.listElementId+1);break;case u.ARROW_UP:t.preventDefault(),this.accessibleFocus.emit(this.listElementId-1);break;case u.ENTER:t.preventDefault(),this.clickItem.emit(this.listElementId)}this.expandable&&e&&(this.showInnerContent=!this.showInnerContent)}renderExpandableButton(){return this.expandable?e("z-icon",{name:this.showInnerContent?this.openElementConfig[this.expandableStyle].open:this.openElementConfig[this.expandableStyle].close}):null}renderExpandedContent(){return this.expandable?e("div",{class:{"z-list-element-inner-container":!0,expanded:this.showInnerContent}},e("slot",{name:"inner-content"})):null}renderContent(){return this.listType===a.NONE?e("slot",null):this.listType===a.ORDERED?e("div",{class:"z-list-content-container"},e("div",null,this.listElementPosition,". "),e("slot",null)):this.listType===a.UNORDERED?e("div",{class:"z-list-content-container"},e("span",null,"• "),e("slot",null)):void 0}render(){return e(n,{role:"listitem","aria-expanded":this.expandable?this.showInnerContent:null,onClick:this.handleClick,onKeyDown:this.handleKeyDown,clickable:this.clickable&&!this.disabled,tabIndex:this.isContextualMenu?null:"0"},e("div",{class:`${this.calculateClass()}`,style:{color:`var(--${this.color})`},tabindex:this.isContextualMenu?"0":"-1",id:`z-list-element-id-${this.listElementId}`},e("div",{class:"z-list-element-container"},this.renderExpandableButton(),this.renderContent()),this.renderExpandedContent()),this.dividerType===c.ELEMENT&&e("z-divider",{color:this.dividerColor,size:this.dividerSize}))}get host(){return i(this)}};p.style=':host{outline:none}:host>.container,:host>.container-contextual-menu{--background-color-list-element:var(--bg-white);--background-hover-color-list-element:var(--color-surface02);--background-active-color-list-element:var(--color-surface02);display:flex;box-sizing:border-box;flex-direction:column;justify-content:center;font-family:var(--font-family-sans);font-weight:var(--font-rg);outline:none}:host([size="small"])>.container{min-height:calc(var(--space-unit) * 4);padding:calc(var(--space-unit) / 2) 0}:host([size="medium"])>.container{min-height:calc(var(--space-unit) * 5);padding:var(--space-unit) 0}:host([size="large"])>.container{min-height:calc(var(--space-unit) * 7);padding:calc(var(--space-unit) * 2) 0}:host([size="x-large"])>.container{min-height:calc(var(--space-unit) * 9);padding:calc(var(--space-unit) * 3) 0}:host([expandable])>.container,:host([expandable])>.container-contextual-menu,:host([clickable])>.container,:host([clickable])>.container-contextual-menu{cursor:pointer}:host([expandable]:hover)>.container,:host([expandable]:hover)>.container-contextual-menu,:host([clickable]:hover)>.container,:host([clickable]:hover)>.container-contextual-menu{background-color:var(--background-hover-color-list-element)}:host([expandable]:focus:focus-visible)>.container,:host([expandable]:focus:focus-visible)>.container-contextual-menu,:host([clickable]:focus:focus-visible)>.container,:host([clickable]:focus:focus-visible)>.container-contextual-menu{box-shadow:var(--shadow-focus-primary)}:host([clickable]:not([expandable]))>.container.clicked,:host([clickable]:not([expandable]))>.container-contextual-menu.clicked{box-shadow:var(--shadow-focus-primary)}:host([expandable]:active)>.container,:host([expandable]:active)>.container-contextual-menu,:host([clickable]:active)>.container,:host([clickable]:active)>.container-contextual-menu{background-color:var(--background-active-color-list-element)}:host([align-button="left"][expandable])>.container>.z-list-element-container,:host([align-button="left"][expandable])>.container-contextual-menu>.z-list-element-container{display:flex}:host([align-button="right"][expandable])>.container>.z-list-element-container,:host([align-button="right"][expandable])>.container-contextual-menu>.z-list-element-container{display:flex;flex-direction:row-reverse;justify-content:space-between}:host([align-button="left"][expandable])>.container>.z-list-element-container>z-icon,:host([align-button="left"][expandable])>.container-contextual-menu>.z-list-element-container>z-icon{margin-right:var(--space-unit)}:host([align-button="right"][expandable])>.container>.z-list-element-container>z-icon,:host([align-button="right"][expandable])>.container-contextual-menu>.z-list-element-container>z-icon{margin-left:var(--space-unit)}:host>.container>.z-list-element-inner-container,:host>.container-contextual-menu>.z-list-element-inner-container{display:none}:host>.container>.z-list-element-inner-container.expanded,:host>.container-contextual-menu>.z-list-element-inner-container.expanded{display:block}:host([clickable]:hover)>.container-contextual-menu{background-color:var(--color-surface03)}.container-contextual-menu:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}.z-list-content-container{display:flex;align-items:center}';const m=class{constructor(e){t(this,e),this.size=o.MEDIUM,this.dividerType=c.NONE,this.dividerSize=r.SMALL,this.dividerColor="gray200",this.listType=a.NONE}componentDidLoad(){const t=this.host.children;for(let e=0;e<t.length;e++)t.length-1>e&&(t[e].setAttribute("divider-type",this.dividerType),t[e].setAttribute("divider-size",this.dividerSize),t[e].setAttribute("divider-color",this.dividerColor)),t[e].setAttribute("size",this.size),t[e].setAttribute("list-type",this.listType),t[e].setAttribute("list-element-position",e.toString())}componentWillLoad(){this.hasHeader=!!this.host.querySelector('[slot="header-title"]')}render(){return e(n,{role:"group"},e("div",{class:{"z-list-group-header-container":!0,"has-header":this.hasHeader}},e("slot",{name:"header-title"}),this.dividerType===c.HEADER&&e("z-divider",{color:this.dividerColor,size:this.dividerSize})),e("slot",null))}get host(){return i(this)}};m.style=":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>.z-list-group-header-container{color:var(--gray700);font-size:var(--font-size-2);font-weight:var(--font-sb) !important;letter-spacing:0.16px;line-height:1.4}:host>.z-list-group-header-container.has-header{padding-top:var(--space-unit);padding-bottom:var(--space-unit)}:host>.z-list-group-header-container.has-header>z-divider{margin-top:var(--space-unit)}";export{d as z_list,p as z_list_element,m as z_list_group}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as a,h as o,g as t,H as n,c as r}from"./p-d17ebc2f.js";import{b as i,B as s,d as c,O as e,v as l}from"./p-e1ac5c4e.js";import{I as v}from"./p-bb85c467.js";const h=class{constructor(o){a(this,o),this.ariaLabel="",this.disabled=!1,this.type=i.BUTTON,this.variant=s.PRIMARY,this.size=c.BIG}getAttributes(){return{id:this.htmlid,class:{"z-button--container":!0,"z-button--has-text":!!this.hostElement.textContent.trim()}}}render(){return this.href?o("a",Object.assign({},this.getAttributes(),{"aria-label":this.ariaLabel,href:this.href,target:this.target}),this.icon&&o("z-icon",{name:this.icon,width:16,height:16}),o("slot",null)):o("button",Object.assign({},this.getAttributes(),{"aria-label":this.ariaLabel,name:this.name,type:this.type,disabled:this.disabled}),this.icon&&o("z-icon",{name:this.icon,width:16,height:16}),o("slot",null))}get hostElement(){return t(this)}};h.style='.sc-z-button-h{display:inline-block;--z-icon-width:16px;--z-icon-height:16px;--z-icon-right-margin:0}[disabled].sc-z-button-h:not([disabled="false"]){pointer-events:none}.sc-z-button-h .z-button--container.sc-z-button{display:inline-flex;width:100%;box-sizing:border-box;align-items:center;justify-content:center;padding:0;border-width:var(--border-size-medium);border-style:solid;border-radius:var(--border-radius);cursor:pointer;fill:currentcolor;font-family:var(--font-family-sans);font-size:14px;font-weight:var(--font-sb);letter-spacing:0.3px;line-height:1;outline:none;text-decoration:none;text-transform:uppercase;white-space:nowrap}.sc-z-button-h .z-button--container.sc-z-button:focus:focus-visible{box-shadow:var(--shadow-focus-primary)}.sc-z-button-h .z-button--container.z-button--has-text.sc-z-button{min-width:calc(var(--space-unit) * 8);padding:0 calc(var(--space-unit) * 2)}.sc-z-button-h .z-button--container.z-button--has-text.sc-z-button z-icon.sc-z-button{--z-icon-right-margin:var(--space-unit)}[size="big"].sc-z-button-h .z-button--container.sc-z-button{min-width:44px;height:44px}[size="small"].sc-z-button-h .z-button--container.sc-z-button{min-width:36px;height:36px}[size="x-small"].sc-z-button-h .z-button--container.sc-z-button{min-width:32px;height:32px}[variant="primary"].sc-z-button-h .z-button--container.sc-z-button{border-color:var(--color-primary01);background-color:var(--color-primary01);color:var(--color-text-inverse)}@media (hover: hover){[variant="primary"].sc-z-button-h .z-button--container.sc-z-button:hover{border-color:var(--color-hover-primary);background-color:var(--color-hover-primary);color:var(--color-text-inverse)}}[variant="primary"].sc-z-button-h .z-button--container.sc-z-button:active{border-color:var(--color-pressed-primary);background-color:var(--color-pressed-primary);box-shadow:var(--shadow-2);color:var(--color-text-inverse)}[variant="primary"][disabled].sc-z-button-h:not([disabled="false"]) .z-button--container.sc-z-button{border-color:var(--color-disabled01);background-color:var(--color-disabled01);color:var(--color-disabled02)}[variant="secondary"].sc-z-button-h .z-button--container.sc-z-button{border-color:var(--color-primary01);background-color:var(--color-surface01);color:var(--color-primary01)}@media (hover: hover){[variant="secondary"].sc-z-button-h .z-button--container.sc-z-button:hover{border-color:var(--color-hover-primary);background-color:var(--color-surface01);color:var(--color-hover-primary)}}[variant="secondary"].sc-z-button-h .z-button--container.sc-z-button:active{border-color:var(--color-pressed-primary);background-color:var(--color-surface01);box-shadow:var(--shadow-2);color:var(--color-pressed-primary)}[variant="secondary"][disabled].sc-z-button-h:not([disabled="false"]) .z-button--container.sc-z-button{border-color:var(--color-disabled01);background-color:var(--color-surface01);color:var(--color-disabled02)}[variant="tertiary"].sc-z-button-h .z-button--container.sc-z-button{border-color:transparent;background-color:transparent;color:var(--color-primary01)}@media (hover: hover){[variant="tertiary"].sc-z-button-h .z-button--container.sc-z-button:hover{border-color:var(--color-primary03);background-color:var(--color-primary03);color:var(--color-hover-primary)}}[variant="tertiary"].sc-z-button-h .z-button--container.sc-z-button:focus:focus-visible{border-color:var(--color-surface01);background-color:var(--color-surface01);color:var(--color-primary01)}[variant="tertiary"].sc-z-button-h .z-button--container.sc-z-button:active{border-color:var(--color-surface01);background-color:var(--color-surface01);box-shadow:var(--shadow-2);color:var(--color-primary01)}[variant="tertiary"][disabled].sc-z-button-h:not([disabled="false"]) .z-button--container.sc-z-button{border-color:transparent;background-color:transparent;color:var(--color-disabled02)}';const d=class{constructor(o){a(this,o)}selectPathOrPolygon(a){return(null==a?void 0:a.startsWith("M"))?o("path",{d:v[this.name]}):o("polygon",{points:v[this.name]})}render(){return o(n,{"aria-hidden":"true"},o("svg",{viewBox:"0 0 1000 1000",width:this.width,height:this.height,id:this.iconid,fill:this.fill?`var(--${this.fill})`:""},this.selectPathOrPolygon(v[this.name])))}};d.style=":host{margin-right:var(--z-icon-right-margin, 0);margin-left:var(--z-icon-left-margin, 0);line-height:0;vertical-align:middle}:host svg:not([width]){width:var(--z-icon-width, 18px)}:host svg:not([height]){height:var(--z-icon-height, 18px)}";const f=class{constructor(o){a(this,o),this.canvasOpenStatusChanged=r(this,"canvasOpenStatusChanged",7),this.variant=e.PUSHCONTENT,this.open=!1,this.transitiondirection=l.LEFT,this.skipanimationonload=!1}onOpenChanged(){!this.open&&this.hostElement.hasAttribute("skipanimationonload")&&this.hostElement.removeAttribute("skipanimationonload"),this.open&&this.handleOverflowProperty(),this.canvasOpenStatusChanged.emit(this.open)}handleOverflowProperty(){document.body.style[this.variant===e.OVERLAY?"overflow-y":"overflow-x"]=this.open?"hidden":""}handledTransitionEnd(){this.handleOverflowProperty()}render(){return o(n,null,o("div",{role:"presentation",class:"canvas-container",onTransitionEnd:()=>this.handledTransitionEnd()},o("div",{role:"presentation",class:"canvas-content"},o("slot",{name:"canvasContent"}))),this.variant==e.OVERLAY&&o("div",{class:"canvas-background","data-action":"canvasBackground",onClick:()=>this.open=!1}))}get hostElement(){return t(this)}static get watchers(){return{open:["onOpenChanged"]}}};f.style='.sc-z-offcanvas-h{--z-offcanvas--container-width:375px;--z-offcanvas--top-space:0;min-width:100%;height:100%;font-family:var(--font-family-sans);font-weight:var(--font-rg);visibility:hidden}.canvas-container.sc-z-offcanvas{display:flex;overflow:-moz-scrollbars-none;overflow:hidden;min-width:100%;height:100%;flex-direction:column;background:var(--color-surface01)}[variant="pushcontent"].sc-z-offcanvas-h{display:none}[open].sc-z-offcanvas-h{display:flex;visibility:visible}[variant="overlay"].sc-z-offcanvas-h{position:fixed;z-index:1000;top:var(--z-offcanvas--top-space);right:0;bottom:0;left:0;display:flex;height:calc(100% - var(--z-offcanvas--top-space))}[variant="overlay"][transitiondirection="left"].sc-z-offcanvas-h{justify-content:end}[variant="overlay"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{z-index:1010}[variant="overlay"].sc-z-offcanvas-h .canvas-background.sc-z-offcanvas{position:absolute;left:0;width:100%;height:100%;background-color:var(--gray900);opacity:0.7}.canvas-container.sc-z-offcanvas>.canvas-content.sc-z-offcanvas{overflow:auto;flex:1 auto;padding:0 calc(var(--space-unit) * 2);margin:calc(var(--space-unit) * 2) calc(var(--space-unit) / 2) calc(var(--space-unit) * 2) 0;overflow-x:hidden}[variant="overlay"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas>.canvas-content.sc-z-offcanvas{padding:0 calc(var(--space-unit) * 2) calc(var(--space-unit) * 2) calc(var(--space-unit) * 2);margin:calc(var(--space-unit) * 2) calc(var(--space-unit) / 2) 0 0}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar-track{background-color:transparent}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}.canvas-container.sc-z-offcanvas .canvas-content.sc-z-offcanvas{scrollbar-color:var(--color-primary01) transparent}@media only screen and (max-width: 768px){[open][transitiondirection="left"].sc-z-offcanvas-h:not([skipAnimationOnLoad])>.canvas-container.sc-z-offcanvas{animation:enter-right 0.4s ease-out}[open][transitiondirection="right"].sc-z-offcanvas-h:not([skipAnimationOnLoad])>.canvas-container.sc-z-offcanvas{animation:enter-left 0.4s ease-out}}@media only screen and (min-width: 768px){.sc-z-offcanvas-h{min-width:auto}.canvas-container.sc-z-offcanvas{width:auto;min-width:max(var(--z-offcanvas--container-width), 375px);max-width:max(var(--z-offcanvas--container-width), 375px);height:auto;min-height:calc(var(--space-unit) * 40)}.sc-z-offcanvas-h:not([variant="overlay"])[open]:not([skipAnimationOnLoad]){width:auto;animation:grow 0.4s ease-out}}@keyframes grow{from{width:0}to{width:max(var(--z-offcanvas--container-width), 375px)}}@keyframes enter-left{from{transform:translateX(-100%)}to{transform:translateX(0)}}@keyframes enter-right{from{transform:translateX(100%)}to{transform:translateX(0)}}[open][variant="overlay"][transitiondirection="left"].sc-z-offcanvas-h:not([skipAnimationOnLoad])>.canvas-container.sc-z-offcanvas{animation:enter-right 0.4s ease-out}[open][transitiondirection="right"].sc-z-offcanvas-h:not([skipAnimationOnLoad])>.canvas-container.sc-z-offcanvas{animation:enter-left 0.4s ease-out}.sc-z-offcanvas-h:not([open])[variant="overlay"][transitiondirection="right"]>.canvas-container.sc-z-offcanvas{transform:translateX(-100%);transition:visibility 0.4s ease-out, transform 0.4s ease-out}.sc-z-offcanvas-h:not([open])[variant="overlay"][transitiondirection="left"]>.canvas-container.sc-z-offcanvas{transform:translateX(100%);transition:visibility 0.4s ease-out, transform 0.4s ease-out}.sc-z-offcanvas-h:not([open])[variant="overlay"] .canvas-background.sc-z-offcanvas{transition:visibility 0.4s ease-out;visibility:hidden}';export{h as z_button,d as z_icon,f as z_offcanvas}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as t,h as o}from"./p-d17ebc2f.js";import{L as e}from"./p-e1ac5c4e.js";const i=class{constructor(o){t(this,o),this.opened=!1,this.customContent=!1,this.isOpen=!1,this.allowTooltipAuthors=!1}handleToggle(){this.isOpen=!this.isOpen}getTitleAuthors(){return this.allowTooltipAuthors?this.autori:""}componentWillLoad(){this.opened&&(this.isOpen=!0)}elementsEllipsis(){this.allowTooltipAuthors=!!this.elementAuthorsHasEllipsis()}elementAuthorsHasEllipsis(){return this.ellipsisAuthors.offsetWidth<this.ellipsisAuthors.scrollWidth}retrieveClass(){return{isopen:this.isOpen,real:this.cardtype===e.REAL,trial:this.cardtype===e.TRIAL,temp:this.cardtype===e.TEMP,"custom-content":this.customContent}}footerTransitionHandler(t){["visibility","height"].includes(t.propertyName)&&this.elementsEllipsis()}render(){return o("div",{class:Object.assign(Object.assign({},this.retrieveClass()),{wrapper:!0})},o("footer",{class:this.retrieveClass(),onTransitionEnd:t=>this.footerTransitionHandler(t)},o("span",{class:"toggle"},o("slot",{name:"toggle"})),this.titolo&&o("p",{class:{"custom-content":this.customContent}},this.titolo),o("div",{class:{content:!0,"custom-content":this.customContent}},o("div",null,o("p",{class:"authors",ref:t=>this.ellipsisAuthors=t},o("span",{title:this.getTitleAuthors()},o("span",{class:"bold"},this.autori))),o("p",{class:"year-isbn"},o("span",{class:"isbn"},o("span",null,o("span",{class:"bold"},this.isbn)," (ed. cartacea)")))),o("div",{class:"slot-handler "+(this.isOpen?"visible":"hidden")},o("slot",{name:"list"})))),this.customContent&&o("slot",{name:"content"}))}};i.style='footer{position:relative;z-index:5;top:0;width:auto;height:calc(var(--space-unit) * 6);padding:0;border-top:var(--border-size-medium) solid var(--color-surface03);margin:0;background-color:var(--color-surface01);border-radius:0 0 var(--border-radius) var(--border-radius);color:var(--color-surface05);font-family:var(--font-family-sans);font-weight:var(--font-rg);transition:height 500ms ease-in-out, top 500ms ease-in-out}footer.real,footer.trial,footer.temp{border-top:var(--border-size-medium) solid var(--accent)}footer .bold{font-family:var(--font-family-sans);font-weight:var(--font-sb)}footer>p{overflow:hidden;height:40px;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 2) var(--space-unit) calc(var(--space-unit) * 2);margin:0;background-color:var(--color-surface01);font-family:var(--font-family-sans);font-size:16px;font-weight:var(--font-rg);line-height:22px;transition:all 200ms linear}footer.isopen>p{background-color:var(--bg-neutral-200);font-size:14px;font-weight:var(--font-sb);transition:all 200ms linear}footer.isopen.real>p,footer.isopen.trial>p,footer.isopen.temp>p{background-color:var(--accent)}footer .visible{display:block}footer .hidden{display:none}footer>div.content{overflow:hidden;height:60px}footer>div.content>div:not(.slot-handler){padding:var(--space-unit) calc(var(--space-unit) * 2)}footer>div.content>div>p{overflow:hidden;height:20px;padding:0;margin:0;font-size:14px;line-height:20px;text-overflow:ellipsis;white-space:nowrap}footer>div.content>div>p.year-isbn{display:flex;flex-direction:row;justify-content:space-between;padding-top:var(--space-unit)}footer>div.content>div>p.year-isbn>span.isbn{overflow:hidden;text-overflow:ellipsis}footer.isopen>div.content>div:not(.slot-handler){height:68px}footer.isopen>div.content>div>p.authors{height:40px;text-overflow:initial;white-space:initial}footer.isopen>div.content>div>p.year-isbn{height:50px;flex-direction:column;padding-left:0}footer.isopen>div.content>div>p.year-isbn>span.isbn{display:inline-grid;padding-left:0}footer.isopen{top:-212px;height:295px;transition:height 500ms ease-in-out, top 500ms ease-in-out}footer.isopen.custom-content{top:-292px}footer.isopen>div.content{height:280px;transition:height 500ms ease-in-out, top 500ms ease-in-out}footer.isopen.custom-content>div.content{height:230px}.toggle{position:absolute;z-index:10;top:-24px;left:16px}.faded{opacity:0.3;pointer-events:none}footer>p.custom-content,footer .content.custom-content{display:none}footer.isopen>p.custom-content,footer.isopen .content.custom-content{display:block}div.wrapper{position:relative;height:100%}div.wrapper ::slotted([slot="content"]){position:absolute;z-index:10;top:calc(var(--space-unit) * 2);display:block;width:100%;height:112px;box-sizing:border-box;padding:0 calc(var(--space-unit) * 2);border-top:var(--border-size-medium) solid transparent;background:var(--color-white)}div.wrapper.isopen ::slotted([slot="content"]){top:0;bottom:0;height:128px;padding:calc(var(--space-unit) * 2);border-color:var(--accent)}';export{i as z_myz_card_footer}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as i,c,h as s,g as h}from"./p-d17ebc2f.js";import{x as t,p as r}from"./p-e1ac5c4e.js";import{g as o,h as e}from"./p-dfc69cc3.js";import"./p-d69e14fb.js";const a=class{constructor(s){i(this,s),this.interactiveIconClick=c(this,"interactiveIconClick",7),this.type=t.DEFAULT,this.disabled=!1}emitinteractiveIconClick(){this.interactiveIconClick.emit()}getIconSize(){return o()!==r.DESKTOP?22:14}render(){return this.interactiveIcon?s("button",{class:this.type,disabled:this.disabled,tabindex:"0",type:"button"},this.icon&&s("z-icon",{class:"icon-sx",name:this.icon,width:this.getIconSize(),height:this.getIconSize()}),s("slot",null),s("z-icon",{tabIndex:this.disabled?-1:0,onClick:()=>this.emitinteractiveIconClick(),onKeyUp:i=>e(i,this.emitinteractiveIconClick.bind(this)),name:this.interactiveIcon,width:this.getIconSize(),height:this.getIconSize()})):s("div",{class:`${this.type}`,tabindex:"0"},this.icon&&s("z-icon",{name:this.icon,width:this.getIconSize(),height:this.getIconSize()}),s("slot",null))}get el(){return h(this)}};a.style=".sc-z-chip-h>button.sc-z-chip{display:inline-flex;align-items:center;padding:0 calc(var(--space-unit) * 1.5);border:var(--border-size-small) solid var(--gray400);background-color:var(--bg-white);border-radius:14px;color:var(--text-grey-800);fill:var(--text-grey-800);font-family:var(--dashboard-font);font-size:14px;font-weight:var(--font-sb)}.sc-z-chip-h>button.sc-z-chip:not(:disabled)>z-icon.sc-z-chip:last-child:hover{color:var(--color-hover-primary);fill:var(--color-hover-primary)}.sc-z-chip-h>button.sc-z-chip:hover:not(:disabled)>z-icon.sc-z-chip:first-child{fill:var(--color-icon02)}.sc-z-chip-h>button.sc-z-chip>z-icon.icon-sx.sc-z-chip{margin-right:calc(var(--space-unit) / 2)}.sc-z-chip-h>button.sc-z-chip>z-icon.sc-z-chip:last-child{margin-left:var(--space-unit);cursor:pointer;fill:var(--color-primary01)}.sc-z-chip-h>button.sc-z-chip:disabled,.sc-z-chip-h>button.sc-z-chip:disabled>z-icon.sc-z-chip{color:var(--color-disabled03);fill:var(--color-disabled03)}.sc-z-chip-h>button.sc-z-chip:disabled>z-icon.sc-z-chip{cursor:auto}.sc-z-chip-h>button.sc-z-chip:disabled{border:var(--border-size-small) solid var(--color-disabled01)}.sc-z-chip-h>button.sc-z-chip:focus:focus-visible,.sc-z-chip-h>div.sc-z-chip:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}.sc-z-chip-h>button.sc-z-chip:hover:not(:disabled):active:hover>z-icon.sc-z-chip:last-child{color:var(--color-primary01);fill:var(--color-primary01)}.sc-z-chip-h>div.sc-z-chip{display:inline-flex;min-height:28px;align-items:center;padding:0 calc(var(--space-unit) * 1.5);border:var(--border-size-small) solid var(--bg-grey-200);background-color:var(--bg-white);border-radius:14px;color:var(--text-grey-800);fill:var(--text-grey-800);font-family:var(--dashboard-font);font-size:14px;line-height:28px}.sc-z-chip-h>div.sc-z-chip>z-icon.sc-z-chip{margin-right:calc(var(--space-unit) / 2)}.sc-z-chip-h>button.default.sc-z-chip,.sc-z-chip-h>div.default.sc-z-chip{min-height:44px;border-radius:22px;line-height:44px}.sc-z-chip-h>button.medium.sc-z-chip,.sc-z-chip-h>div.medium.sc-z-chip{min-height:40px;border-radius:22px;line-height:40px}.sc-z-chip-h>button.small.sc-z-chip,.sc-z-chip-h>div.small.sc-z-chip{min-height:36px;border-radius:22px;line-height:36px}@media only screen and (min-width: 1152px){.sc-z-chip-h>button.sc-z-chip{font-size:12px}.sc-z-chip-h>div.sc-z-chip{font-size:12px}.sc-z-chip-h>button.default.sc-z-chip,.sc-z-chip-h>div.default.sc-z-chip{min-height:32px;border-radius:16px;line-height:32px}.sc-z-chip-h>button.medium.sc-z-chip,.sc-z-chip-h>div.medium.sc-z-chip{min-height:28px;border-radius:16px;line-height:28px}.sc-z-chip-h>button.small.sc-z-chip,.sc-z-chip-h>div.small.sc-z-chip{min-height:24px;border-radius:16px;line-height:24px}}";export{a as z_chip}
|