@zanichelli/albe-web-components 7.2.0-offcanvas-RC2 → 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-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-stepper-item.cjs.entry.js +1 -1
- package/dist/cjs/z-toggle-button.cjs.entry.js +4 -2
- 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/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 +5 -4
- 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-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-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/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 -3
- package/dist/types/components.d.ts +22 -6
- 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-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-c722c5a4.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.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-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-c722c5a4.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.esm.js +1 -1
- package/www/index.html +1 -40
- package/CHANGELOG.md +0 -2389
- package/dist/cjs/z-app-header.cjs.entry.js +0 -132
- package/dist/cjs/z-button_3.cjs.entry.js +0 -113
- package/dist/esm/z-app-header.entry.js +0 -128
- package/dist/esm/z-button_3.entry.js +0 -107
- package/dist/web-components-library/p-0446752e.entry.js +0 -1
- package/dist/web-components-library/p-19ca449e.entry.js +0 -1
- package/dist/web-components-library/p-26b39ec3.entry.js +0 -1
- package/dist/web-components-library/p-3a9cc467.entry.js +0 -1
- package/dist/web-components-library/p-9d03a7d6.entry.js +0 -1
- package/src-react/index.ts +0 -1
- package/www/build/p-0446752e.entry.js +0 -1
- package/www/build/p-19ca449e.entry.js +0 -1
- package/www/build/p-26b39ec3.entry.js +0 -1
- package/www/build/p-3a9cc467.entry.js +0 -1
- package/www/build/p-9bc44095.js +0 -1
- package/www/build/p-9d03a7d6.entry.js +0 -1
|
@@ -1,132 +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
|
-
this.flow = "auto";
|
|
33
|
-
/**
|
|
34
|
-
* The opening state of the drawer.
|
|
35
|
-
*/
|
|
36
|
-
this.drawerOpen = false;
|
|
37
|
-
/**
|
|
38
|
-
* The stuck state of the bar.
|
|
39
|
-
*/
|
|
40
|
-
this._stuck = false;
|
|
41
|
-
this.observer = SUPPORT_INTERSECTION_OBSERVER &&
|
|
42
|
-
new IntersectionObserver(([entry]) => {
|
|
43
|
-
this._stuck = !entry.isIntersecting;
|
|
44
|
-
}, {
|
|
45
|
-
threshold: 0.5,
|
|
46
|
-
});
|
|
47
|
-
this.openDrawer = this.openDrawer.bind(this);
|
|
48
|
-
this.closeDrawer = this.closeDrawer.bind(this);
|
|
49
|
-
this.collectMenuElements = this.collectMenuElements.bind(this);
|
|
50
|
-
}
|
|
51
|
-
emitStickingEvent() {
|
|
52
|
-
this.sticking.emit(this._stuck);
|
|
53
|
-
}
|
|
54
|
-
openDrawer() {
|
|
55
|
-
this.drawerOpen = true;
|
|
56
|
-
}
|
|
57
|
-
closeDrawer() {
|
|
58
|
-
this.drawerOpen = false;
|
|
59
|
-
}
|
|
60
|
-
componentDidLoad() {
|
|
61
|
-
this.collectMenuElements();
|
|
62
|
-
this.onStuckMode();
|
|
63
|
-
}
|
|
64
|
-
get title() {
|
|
65
|
-
const titleElement = this.hostElement.querySelector('[slot="title"]');
|
|
66
|
-
if (titleElement === null) {
|
|
67
|
-
return "";
|
|
68
|
-
}
|
|
69
|
-
return titleElement.textContent.trim();
|
|
70
|
-
}
|
|
71
|
-
get scrollParent() {
|
|
72
|
-
const parent = this.hostElement.offsetParent;
|
|
73
|
-
if (parent === document.body || parent === document.documentElement) {
|
|
74
|
-
return window;
|
|
75
|
-
}
|
|
76
|
-
return parent;
|
|
77
|
-
}
|
|
78
|
-
collectMenuElements() {
|
|
79
|
-
const menuElements = (this.menuElements = this.hostElement.querySelectorAll('[slot="menu"]'));
|
|
80
|
-
this.menuLength = menuElements.length;
|
|
81
|
-
this.setMenuFloatingMode();
|
|
82
|
-
}
|
|
83
|
-
onStuckMode() {
|
|
84
|
-
if (this.stuck) {
|
|
85
|
-
this.enableStuckObserver();
|
|
86
|
-
}
|
|
87
|
-
else {
|
|
88
|
-
this.disableStuckMode();
|
|
89
|
-
}
|
|
90
|
-
}
|
|
91
|
-
enableStuckObserver() {
|
|
92
|
-
if (this.observer) {
|
|
93
|
-
this.observer.observe(this.container);
|
|
94
|
-
}
|
|
95
|
-
}
|
|
96
|
-
disableStuckMode() {
|
|
97
|
-
this._stuck = false;
|
|
98
|
-
if (this.observer) {
|
|
99
|
-
this.observer.unobserve(this.container);
|
|
100
|
-
}
|
|
101
|
-
}
|
|
102
|
-
onStuck() {
|
|
103
|
-
const scrollParent = this.scrollParent;
|
|
104
|
-
if (!scrollParent) {
|
|
105
|
-
return;
|
|
106
|
-
}
|
|
107
|
-
this.emitStickingEvent();
|
|
108
|
-
}
|
|
109
|
-
setMenuFloatingMode() {
|
|
110
|
-
if (this.menuElements.length === 0) {
|
|
111
|
-
return;
|
|
112
|
-
}
|
|
113
|
-
const elements = this.menuElements;
|
|
114
|
-
elements.forEach((element) => {
|
|
115
|
-
element.open = false;
|
|
116
|
-
element.floating = !this.drawerOpen;
|
|
117
|
-
element.verticalContext = this.drawerOpen;
|
|
118
|
-
});
|
|
119
|
-
}
|
|
120
|
-
render() {
|
|
121
|
-
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)))))));
|
|
122
|
-
}
|
|
123
|
-
get hostElement() { return index.getElement(this); }
|
|
124
|
-
static get watchers() { return {
|
|
125
|
-
"stuck": ["onStuckMode"],
|
|
126
|
-
"_stuck": ["onStuck"],
|
|
127
|
-
"drawerOpen": ["setMenuFloatingMode"]
|
|
128
|
-
}; }
|
|
129
|
-
};
|
|
130
|
-
ZAppHeader.style = stylesCss;
|
|
131
|
-
|
|
132
|
-
exports.z_app_header = ZAppHeader;
|
|
@@ -1,113 +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(.skip-animation)>.canvas-container.sc-z-offcanvas{animation:enter-right 0.4s ease-out}[open][transitiondirection=\"right\"].sc-z-offcanvas-h:not(.skip-animation)>.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(.skip-animation){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(.skip-animation)>.canvas-container.sc-z-offcanvas{animation:enter-right 0.4s ease-out}[open][transitiondirection=\"right\"].sc-z-offcanvas-h:not(.skip-animation)>.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
|
-
/** allows you to skip the entry animation on page load, to be used with the open prop at true */
|
|
77
|
-
this.skipanimationonload = false;
|
|
78
|
-
/** open content transitioning in a specified direction left | right. Default: left */
|
|
79
|
-
this.transitiondirection = index$1.TransitionDirection.LEFT;
|
|
80
|
-
}
|
|
81
|
-
/** set skipAnimation */
|
|
82
|
-
async setSkipAanimationOnLoad(value) {
|
|
83
|
-
this.skipanimationonload = value;
|
|
84
|
-
}
|
|
85
|
-
onOpenChanged() {
|
|
86
|
-
if (!this.open && this.skipanimationonload) {
|
|
87
|
-
this.skipanimationonload = false;
|
|
88
|
-
}
|
|
89
|
-
if (this.open) {
|
|
90
|
-
this.handleOverflowProperty();
|
|
91
|
-
}
|
|
92
|
-
this.canvasOpenStatusChanged.emit(this.open);
|
|
93
|
-
}
|
|
94
|
-
handleOverflowProperty() {
|
|
95
|
-
const overflow = this.variant === index$1.OffCanvasVariant.OVERLAY ? "overflow-y" : "overflow-x";
|
|
96
|
-
document.body.style[overflow] = this.open ? "hidden" : "";
|
|
97
|
-
}
|
|
98
|
-
handledTransitionEnd() {
|
|
99
|
-
this.handleOverflowProperty();
|
|
100
|
-
}
|
|
101
|
-
render() {
|
|
102
|
-
return (index.h(index.Host, { class: { "skip-animation": this.skipanimationonload } }, 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) }))));
|
|
103
|
-
}
|
|
104
|
-
get hostElement() { return index.getElement(this); }
|
|
105
|
-
static get watchers() { return {
|
|
106
|
-
"open": ["onOpenChanged"]
|
|
107
|
-
}; }
|
|
108
|
-
};
|
|
109
|
-
ZOffcanvas.style = stylesCss;
|
|
110
|
-
|
|
111
|
-
exports.z_button = ZButton;
|
|
112
|
-
exports.z_icon = ZIcon;
|
|
113
|
-
exports.z_offcanvas = ZOffcanvas;
|
|
@@ -1,128 +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
|
-
this.flow = "auto";
|
|
29
|
-
/**
|
|
30
|
-
* The opening state of the drawer.
|
|
31
|
-
*/
|
|
32
|
-
this.drawerOpen = false;
|
|
33
|
-
/**
|
|
34
|
-
* The stuck state of the bar.
|
|
35
|
-
*/
|
|
36
|
-
this._stuck = false;
|
|
37
|
-
this.observer = SUPPORT_INTERSECTION_OBSERVER &&
|
|
38
|
-
new IntersectionObserver(([entry]) => {
|
|
39
|
-
this._stuck = !entry.isIntersecting;
|
|
40
|
-
}, {
|
|
41
|
-
threshold: 0.5,
|
|
42
|
-
});
|
|
43
|
-
this.openDrawer = this.openDrawer.bind(this);
|
|
44
|
-
this.closeDrawer = this.closeDrawer.bind(this);
|
|
45
|
-
this.collectMenuElements = this.collectMenuElements.bind(this);
|
|
46
|
-
}
|
|
47
|
-
emitStickingEvent() {
|
|
48
|
-
this.sticking.emit(this._stuck);
|
|
49
|
-
}
|
|
50
|
-
openDrawer() {
|
|
51
|
-
this.drawerOpen = true;
|
|
52
|
-
}
|
|
53
|
-
closeDrawer() {
|
|
54
|
-
this.drawerOpen = false;
|
|
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
|
-
elements.forEach((element) => {
|
|
111
|
-
element.open = false;
|
|
112
|
-
element.floating = !this.drawerOpen;
|
|
113
|
-
element.verticalContext = this.drawerOpen;
|
|
114
|
-
});
|
|
115
|
-
}
|
|
116
|
-
render() {
|
|
117
|
-
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)))))));
|
|
118
|
-
}
|
|
119
|
-
get hostElement() { return getElement(this); }
|
|
120
|
-
static get watchers() { return {
|
|
121
|
-
"stuck": ["onStuckMode"],
|
|
122
|
-
"_stuck": ["onStuck"],
|
|
123
|
-
"drawerOpen": ["setMenuFloatingMode"]
|
|
124
|
-
}; }
|
|
125
|
-
};
|
|
126
|
-
ZAppHeader.style = stylesCss;
|
|
127
|
-
|
|
128
|
-
export { ZAppHeader as z_app_header };
|
|
@@ -1,107 +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(.skip-animation)>.canvas-container.sc-z-offcanvas{animation:enter-right 0.4s ease-out}[open][transitiondirection=\"right\"].sc-z-offcanvas-h:not(.skip-animation)>.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(.skip-animation){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(.skip-animation)>.canvas-container.sc-z-offcanvas{animation:enter-right 0.4s ease-out}[open][transitiondirection=\"right\"].sc-z-offcanvas-h:not(.skip-animation)>.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
|
-
/** allows you to skip the entry animation on page load, to be used with the open prop at true */
|
|
73
|
-
this.skipanimationonload = false;
|
|
74
|
-
/** open content transitioning in a specified direction left | right. Default: left */
|
|
75
|
-
this.transitiondirection = TransitionDirection.LEFT;
|
|
76
|
-
}
|
|
77
|
-
/** set skipAnimation */
|
|
78
|
-
async setSkipAanimationOnLoad(value) {
|
|
79
|
-
this.skipanimationonload = value;
|
|
80
|
-
}
|
|
81
|
-
onOpenChanged() {
|
|
82
|
-
if (!this.open && this.skipanimationonload) {
|
|
83
|
-
this.skipanimationonload = false;
|
|
84
|
-
}
|
|
85
|
-
if (this.open) {
|
|
86
|
-
this.handleOverflowProperty();
|
|
87
|
-
}
|
|
88
|
-
this.canvasOpenStatusChanged.emit(this.open);
|
|
89
|
-
}
|
|
90
|
-
handleOverflowProperty() {
|
|
91
|
-
const overflow = this.variant === OffCanvasVariant.OVERLAY ? "overflow-y" : "overflow-x";
|
|
92
|
-
document.body.style[overflow] = this.open ? "hidden" : "";
|
|
93
|
-
}
|
|
94
|
-
handledTransitionEnd() {
|
|
95
|
-
this.handleOverflowProperty();
|
|
96
|
-
}
|
|
97
|
-
render() {
|
|
98
|
-
return (h(Host, { class: { "skip-animation": this.skipanimationonload } }, 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) }))));
|
|
99
|
-
}
|
|
100
|
-
get hostElement() { return getElement(this); }
|
|
101
|
-
static get watchers() { return {
|
|
102
|
-
"open": ["onOpenChanged"]
|
|
103
|
-
}; }
|
|
104
|
-
};
|
|
105
|
-
ZOffcanvas.style = stylesCss;
|
|
106
|
-
|
|
107
|
-
export { ZButton as z_button, ZIcon as z_icon, ZOffcanvas as z_offcanvas };
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as e,c as t,h as a,H as r,g as i}from"./p-d17ebc2f.js";const n="undefined"!=typeof IntersectionObserver,o=class{constructor(a){e(this,a),this.sticking=t(this,"sticking",7),this.stuck=!1,this.overlay=!1,this.flow="auto",this.drawerOpen=!1,this._stuck=!1,this.observer=n&&new IntersectionObserver((([e])=>{this._stuck=!e.isIntersecting}),{threshold:.5}),this.openDrawer=this.openDrawer.bind(this),this.closeDrawer=this.closeDrawer.bind(this),this.collectMenuElements=this.collectMenuElements.bind(this)}emitStickingEvent(){this.sticking.emit(this._stuck)}openDrawer(){this.drawerOpen=!0}closeDrawer(){this.drawerOpen=!1}componentDidLoad(){this.collectMenuElements(),this.onStuckMode()}get title(){const e=this.hostElement.querySelector('[slot="title"]');return null===e?"":e.textContent.trim()}get scrollParent(){const e=this.hostElement.offsetParent;return e===document.body||e===document.documentElement?window:e}collectMenuElements(){const e=this.menuElements=this.hostElement.querySelectorAll('[slot="menu"]');this.menuLength=e.length,this.setMenuFloatingMode()}onStuckMode(){this.stuck?this.enableStuckObserver():this.disableStuckMode()}enableStuckObserver(){this.observer&&this.observer.observe(this.container)}disableStuckMode(){this._stuck=!1,this.observer&&this.observer.unobserve(this.container)}onStuck(){this.scrollParent&&this.emitStickingEvent()}setMenuFloatingMode(){0!==this.menuElements.length&&this.menuElements.forEach((e=>{e.open=!1,e.floating=!this.drawerOpen,e.verticalContext=this.drawerOpen}))}render(){return a(r,{"menu-length":this.menuLength},a("div",{class:"heading-panel",ref:e=>this.container=e},a("div",{class:"hero-container"},a("slot",{name:"hero"},this.hero&&a("img",{alt:"",src:this.hero}))),a("div",{class:"heading-container"},a("div",{class:"heading-title"},this.menuLength>0&&a("button",{class:"drawer-trigger","aria-label":"Apri menu",onClick:this.openDrawer},a("z-icon",{name:"burger-menu"})),a("slot",{name:"title"})),a("div",{class:"heading-subtitle"},a("slot",{name:"subtitle"}))),a("div",{class:"menu-container"},!this.drawerOpen&&"offcanvas"!==this.flow&&a("slot",{name:"menu",onSlotchange:this.collectMenuElements}))),a("div",{class:"drawer-container"},a("div",{class:"drawer-overlay",onClick:this.closeDrawer}),a("div",{class:"drawer-panel"},a("button",{class:"drawer-close","aria-label":"Chiudi menu",onClick:this.closeDrawer},a("z-icon",{name:"close"})),a("div",{class:"drawer-content"},this.drawerOpen&&a("slot",{name:"menu",onSlotchange:this.collectMenuElements})))),this._stuck&&a("div",{class:"heading-stuck"},a("div",{class:"heading-stuck-content"},this.menuLength>0&&a("button",{class:"drawer-trigger","aria-label":"Apri menu",onClick:this.openDrawer},a("z-icon",{name:"burger-menu"})),a("div",{class:"heading-title"},a("slot",{name:"stucked-title"},this.title)))))}get hostElement(){return i(this)}static get watchers(){return{stuck:["onStuckMode"],_stuck:["onStuck"],drawerOpen:["setMenuFloatingMode"]}}};o.style=':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}}';export{o as z_app_header}
|
|
@@ -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 a,h as o,g as t,H as r,c as n}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(r,{"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=n(this,"canvasOpenStatusChanged",7),this.variant=e.PUSHCONTENT,this.open=!1,this.skipanimationonload=!1,this.transitiondirection=l.LEFT}async setSkipAanimationOnLoad(a){this.skipanimationonload=a}onOpenChanged(){!this.open&&this.skipanimationonload&&(this.skipanimationonload=!1),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(r,{class:{"skip-animation":this.skipanimationonload}},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(.skip-animation)>.canvas-container.sc-z-offcanvas{animation:enter-right 0.4s ease-out}[open][transitiondirection="right"].sc-z-offcanvas-h:not(.skip-animation)>.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(.skip-animation){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(.skip-animation)>.canvas-container.sc-z-offcanvas{animation:enter-right 0.4s ease-out}[open][transitiondirection="right"].sc-z-offcanvas-h:not(.skip-animation)>.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 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}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r,c as t,h as o}from"./p-d17ebc2f.js";const i=class{constructor(o){r(this,o),this.toggleClick=t(this,"toggleClick",7),this.isdisabled=!1,this.opened=!1}emitToggleClick(){this.isdisabled||(this.opened=!this.opened,this.toggleClick.emit(this.opened))}render(){return o("button",{tabindex:this.avoidclick?"-1":"0",class:{isopen:this.opened,"avoid-clicks":this.avoidclick},disabled:this.isdisabled,onClick:()=>this.emitToggleClick()},o("z-icon",{name:this.opened?"chevron-down":"chevron-up",width:16,height:16}),this.label)}};i.style="button{height:36px;padding-right:calc(var(--space-unit) * 2);padding-left:0;border:var(--border-size-medium) solid;border-color:transparent;background-color:var(--bg-white);border-radius:var(--border-radius);box-shadow:0 0 4px 0 rgb(0 0 0 / 20%);color:var(--myz-blue);cursor:pointer;fill:var(--myz-blue);font-family:var(--dashboard-font);font-size:14px;font-weight:var(--font-sb);outline:none;text-transform:uppercase;transition:all 200ms linear}button::-moz-focus-inner{border:0}button:hover{color:var(--myz-blue-dark);fill:var(--myz-blue-dark)}button:focus{border-color:var(--myz-blue);box-shadow:0 0 2px 2px var(--accent-dark);color:var(--myz-blue);fill:var(--myz-blue)}button:active{border-color:var(--myz-blue-light);box-shadow:0 2px 4px 0 rgb(0 0 0 / 40%);color:var(--myz-blue-light);fill:var(--myz-blue-light)}button:disabled{color:var(--text-grey-700);fill:var(--text-grey-700)}z-icon{display:inline-block;margin:0 var(--space-unit) 0 calc(var(--space-unit) * 2);transform:rotate(360deg);transition:all 200ms linear}button.isopen{top:-20px}button.avoid-clicks{pointer-events:none}";export{i as z_toggle_button}
|