@zanichelli/albe-web-components 6.5.0-offcanvasTest3 → 6.5.1
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/CHANGELOG.md +15 -0
- package/dist/cjs/index-e3299e0a.js +20 -36
- 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 +153 -0
- package/dist/cjs/z-app-switcher.cjs.entry.js +29 -0
- package/dist/cjs/{z-modal.cjs.entry.js → z-dragdrop-area_3.cjs.entry.js} +43 -0
- package/dist/cjs/z-input_2.cjs.entry.js +1 -1
- package/dist/cjs/{z-app-switcher_2.cjs.entry.js → z-logo.cjs.entry.js} +0 -23
- package/dist/cjs/{z-icon_2.cjs.entry.js → z-offcanvas.cjs.entry.js} +0 -20
- package/dist/cjs/z-table-row.cjs.entry.js +2 -2
- package/dist/collection/collection-manifest.json +0 -4
- package/dist/collection/components/inputs/z-input/styles.css +3 -0
- package/dist/collection/components/z-table/z-table-row/index.js +2 -2
- package/dist/esm/index-a2ca4b97.js +20 -36
- package/dist/esm/index.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/{utils-ccb4d66f.js → utils-6cf7efe2.js} +1 -1
- package/dist/esm/web-components-library.js +1 -1
- package/dist/esm/z-app-header_2.entry.js +148 -0
- package/dist/esm/z-app-switcher.entry.js +25 -0
- package/dist/esm/z-chip.entry.js +1 -1
- package/dist/esm/z-combobox.entry.js +1 -1
- package/dist/esm/{z-modal.entry.js → z-dragdrop-area_3.entry.js} +42 -1
- package/dist/esm/z-file-upload.entry.js +1 -1
- package/dist/esm/z-input_2.entry.js +2 -2
- package/dist/esm/{z-app-switcher_2.entry.js → z-logo.entry.js} +2 -24
- package/dist/esm/z-myz-card-info.entry.js +1 -1
- package/dist/esm/z-myz-list-item.entry.js +1 -1
- package/dist/esm/{z-icon_2.entry.js → z-offcanvas.entry.js} +2 -21
- package/dist/esm/z-pocket_3.entry.js +1 -1
- package/dist/esm/z-popover.entry.js +1 -1
- package/dist/esm/z-select.entry.js +1 -1
- package/dist/esm/z-skip-to-content.entry.js +1 -1
- package/dist/esm/z-slideshow.entry.js +1 -1
- package/dist/esm/z-table-header.entry.js +1 -1
- package/dist/esm/z-table-row.entry.js +2 -2
- package/dist/esm/z-toggle-switch.entry.js +1 -1
- package/dist/types/components.d.ts +2 -230
- package/dist/web-components-library/index.esm.js +1 -1
- package/dist/web-components-library/p-1cb23bbb.entry.js +1 -0
- package/dist/web-components-library/p-1d66b265.entry.js +1 -0
- package/{www/build/p-9965827d.entry.js → dist/web-components-library/p-26033729.entry.js} +1 -1
- package/dist/web-components-library/{p-8bf0844b.entry.js → p-53065788.entry.js} +1 -1
- package/dist/web-components-library/{p-1b6279a6.entry.js → p-5c62387a.entry.js} +1 -1
- package/dist/web-components-library/{p-20a3247c.entry.js → p-6c163539.entry.js} +1 -1
- package/dist/web-components-library/{p-279655eb.entry.js → p-7b3b99ee.entry.js} +1 -1
- package/{www/build/p-3d9ecc23.entry.js → dist/web-components-library/p-7ea553e9.entry.js} +1 -1
- package/dist/web-components-library/{p-547d3b1f.entry.js → p-8305bbcc.entry.js} +1 -1
- package/dist/web-components-library/{p-cd43f80d.js → p-8ebe4adf.js} +1 -1
- package/dist/web-components-library/{p-98c94e81.entry.js → p-91a74348.entry.js} +1 -1
- package/dist/web-components-library/{p-c25b0b2a.entry.js → p-93142fac.entry.js} +1 -1
- package/dist/web-components-library/p-9a613586.entry.js +1 -0
- package/{www/build/p-411cbcd6.entry.js → dist/web-components-library/p-a05ce0a6.entry.js} +1 -1
- package/{www/build/p-bdc6f2e5.entry.js → dist/web-components-library/p-a6c0f149.entry.js} +1 -1
- package/dist/web-components-library/p-ae79573a.entry.js +1 -0
- package/dist/web-components-library/p-bdefe224.entry.js +1 -0
- package/dist/web-components-library/{p-8980398c.entry.js → p-d2127d84.entry.js} +1 -1
- package/{www/build/p-8b960526.entry.js → dist/web-components-library/p-dd000757.entry.js} +1 -1
- package/dist/web-components-library/p-de55c171.entry.js +1 -0
- package/dist/web-components-library/web-components-library.esm.js +1 -1
- package/package.json +1 -1
- package/react/components.d.ts +0 -4
- package/react/components.js +2 -6
- package/react/components.js.map +1 -1
- package/www/build/index.esm.js +1 -1
- package/www/build/p-1cb23bbb.entry.js +1 -0
- package/www/build/p-1d66b265.entry.js +1 -0
- package/{dist/web-components-library/p-9965827d.entry.js → www/build/p-26033729.entry.js} +1 -1
- package/www/build/p-4b159cbd.css +1 -0
- package/www/build/{p-8bf0844b.entry.js → p-53065788.entry.js} +1 -1
- package/www/build/{p-1b6279a6.entry.js → p-5c62387a.entry.js} +1 -1
- package/www/build/{p-20a3247c.entry.js → p-6c163539.entry.js} +1 -1
- package/www/build/{p-279655eb.entry.js → p-7b3b99ee.entry.js} +1 -1
- package/{dist/web-components-library/p-3d9ecc23.entry.js → www/build/p-7ea553e9.entry.js} +1 -1
- package/www/build/{p-547d3b1f.entry.js → p-8305bbcc.entry.js} +1 -1
- package/www/build/{p-cd43f80d.js → p-8ebe4adf.js} +1 -1
- package/www/build/{p-98c94e81.entry.js → p-91a74348.entry.js} +1 -1
- package/www/build/{p-c25b0b2a.entry.js → p-93142fac.entry.js} +1 -1
- package/www/build/p-9a613586.entry.js +1 -0
- package/{dist/web-components-library/p-411cbcd6.entry.js → www/build/p-a05ce0a6.entry.js} +1 -1
- package/{dist/web-components-library/p-bdc6f2e5.entry.js → www/build/p-a6c0f149.entry.js} +1 -1
- package/www/build/p-ae79573a.entry.js +1 -0
- package/www/build/p-bdefe224.entry.js +1 -0
- package/www/build/{p-8980398c.entry.js → p-d2127d84.entry.js} +1 -1
- package/www/build/p-dbb8bcb2.js +1 -0
- package/{dist/web-components-library/p-8b960526.entry.js → www/build/p-dd000757.entry.js} +1 -1
- package/www/build/p-de55c171.entry.js +1 -0
- package/www/build/web-components-library.esm.js +1 -1
- package/www/index.html +1 -8
- package/www/pages/file-upload.html +0 -33
- package/www/pages/notification.html +0 -33
- package/dist/cjs/z-app-header.cjs.entry.js +0 -133
- package/dist/cjs/z-app-topbar.cjs.entry.js +0 -41
- package/dist/cjs/z-dragdrop-area_2.cjs.entry.js +0 -49
- package/dist/cjs/z-menu-dropdown.cjs.entry.js +0 -59
- package/dist/cjs/z-modal-login.cjs.entry.js +0 -84
- package/dist/cjs/z-user-dropdown.cjs.entry.js +0 -93
- package/dist/collection/components/modal/z-modal-login/index.js +0 -251
- package/dist/collection/components/modal/z-modal-login/styles.css +0 -150
- package/dist/collection/components/navigation/z-app-topbar/index.js +0 -156
- package/dist/collection/components/navigation/z-app-topbar/styles.css +0 -65
- package/dist/collection/components/navigation/z-menu-dropdown/index.js +0 -124
- package/dist/collection/components/navigation/z-menu-dropdown/styles.css +0 -146
- package/dist/collection/components/navigation/z-user-dropdown/index.js +0 -247
- package/dist/collection/components/navigation/z-user-dropdown/styles.css +0 -306
- package/dist/esm/z-app-header.entry.js +0 -129
- package/dist/esm/z-app-topbar.entry.js +0 -37
- package/dist/esm/z-dragdrop-area_2.entry.js +0 -44
- package/dist/esm/z-menu-dropdown.entry.js +0 -55
- package/dist/esm/z-modal-login.entry.js +0 -80
- package/dist/esm/z-user-dropdown.entry.js +0 -89
- package/dist/types/components/modal/z-modal-login/index.d.ts +0 -41
- package/dist/types/components/navigation/z-app-topbar/index.d.ts +0 -20
- package/dist/types/components/navigation/z-menu-dropdown/index.d.ts +0 -19
- package/dist/types/components/navigation/z-user-dropdown/index.d.ts +0 -39
- package/dist/web-components-library/p-1ba8d432.entry.js +0 -1
- package/dist/web-components-library/p-3c2d438b.entry.js +0 -1
- package/dist/web-components-library/p-4cd6c6f4.entry.js +0 -1
- package/dist/web-components-library/p-682528b2.entry.js +0 -1
- package/dist/web-components-library/p-9ed27651.entry.js +0 -1
- package/dist/web-components-library/p-a2b67e2d.entry.js +0 -1
- package/dist/web-components-library/p-b17981a4.entry.js +0 -1
- package/dist/web-components-library/p-d3c72572.entry.js +0 -1
- package/dist/web-components-library/p-edf0195b.entry.js +0 -1
- package/dist/web-components-library/p-f20d1242.entry.js +0 -1
- package/www/build/p-1ba8d432.entry.js +0 -1
- package/www/build/p-3c2d438b.entry.js +0 -1
- package/www/build/p-4cd6c6f4.entry.js +0 -1
- package/www/build/p-682528b2.entry.js +0 -1
- package/www/build/p-99d3834c.js +0 -129
- package/www/build/p-9ed27651.entry.js +0 -1
- package/www/build/p-a2b67e2d.entry.js +0 -1
- package/www/build/p-b17981a4.entry.js +0 -1
- package/www/build/p-d3c72572.entry.js +0 -1
- package/www/build/p-e680285b.css +0 -1636
- package/www/build/p-edf0195b.entry.js +0 -1
- package/www/build/p-f20d1242.entry.js +0 -1
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, h, H as Host } from './index-a2ca4b97.js';
|
|
2
|
-
import { T as ThemeVariant, f as DividerOrientation } from './index-968a240f.js';
|
|
3
|
-
import { m as mobileBreakpoint } from './breakpoints-c386984e.js';
|
|
4
|
-
|
|
5
|
-
const stylesCss = ":host{position:sticky;z-index:99;top:0;display:block;height:calc(var(--space-unit) * 6);box-sizing:border-box;padding:calc(var(--space-unit) / 2) calc(var(--space-unit) * 2);background-color:var(--gray900);border-radius:var(--border-no-radius)}:host(.light){background-color:var(--color-white)}:host>div{display:flex;align-items:center;justify-content:space-between}:host(.limited-width) #content-container{--mw:none;max-width:var(--mw);margin:auto}.content-panel{display:flex;align-items:center}.content-panel>:not(:last-child){margin-right:calc(var(--space-unit) * 2)}#divider-container{display:none}z-link{font-family:var(--font-family-sans);font-size:14px;font-weight:var(--font-sb);letter-spacing:0.3px;line-height:20px}@media only screen and (min-width: 768px){:host{padding:var(--space-unit) calc(var(--space-unit) * 2) var(--space-unit) var(--space-unit)}:host(.limited-width){padding:var(--space-unit)}#divider-container{display:block;height:calc(var(--space-unit) * 3)}}";
|
|
6
|
-
|
|
7
|
-
const ZAppTopbar = class {
|
|
8
|
-
constructor(hostRef) {
|
|
9
|
-
registerInstance(this, hostRef);
|
|
10
|
-
/** theme variant, default 'dark' */
|
|
11
|
-
this.theme = ThemeVariant.DARK;
|
|
12
|
-
this.topbarLinks = [];
|
|
13
|
-
}
|
|
14
|
-
handleResize() {
|
|
15
|
-
this.isMobile = window.innerWidth <= mobileBreakpoint;
|
|
16
|
-
}
|
|
17
|
-
componentWillLoad() {
|
|
18
|
-
this.isMobile = window.screen.width <= mobileBreakpoint || window.innerWidth <= mobileBreakpoint;
|
|
19
|
-
}
|
|
20
|
-
componentWillRender() {
|
|
21
|
-
if (this.topbarContent) {
|
|
22
|
-
this.topbarLinks = typeof this.topbarContent === "string" ? JSON.parse(this.topbarContent) : this.topbarContent;
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
renderTopbarLinks() {
|
|
26
|
-
return this.topbarLinks.map((link) => (h("z-link", { htmlid: link.id, textcolor: this.theme === ThemeVariant.LIGHT ? "black" : "white", href: link.link, target: link.target, icon: this.isMobile ? link.icon : undefined }, !this.isMobile && link.label)));
|
|
27
|
-
}
|
|
28
|
-
render() {
|
|
29
|
-
return (h(Host, { class: {
|
|
30
|
-
[this.theme]: true,
|
|
31
|
-
"limited-width": !!this.contentMaxWidth,
|
|
32
|
-
} }, h("div", { id: "content-container", style: this.contentMaxWidth ? { "--mw": `${this.contentMaxWidth}px` } : {} }, h("div", { id: "left-panel", class: "content-panel" }, h("z-logo", { mobileLogo: this.isMobile, width: this.isMobile ? 32 : 128, height: this.isMobile ? 40 : 32, imageAlt: "zanichelli-logo", link: this.logoLink, targetBlank: true }), this.isMobile && this.renderTopbarLinks()), h("div", { id: "right-panel", class: "content-panel" }, !this.isMobile && this.renderTopbarLinks(), this.showAppSwitcher && h("z-app-switcher", { theme: this.theme }), h("div", { id: "divider-container" }, h("z-divider", { orientation: DividerOrientation.VERTICAL, color: this.theme === ThemeVariant.LIGHT ? "gray800" : "color-white" })), h("slot", { name: "login" })))));
|
|
33
|
-
}
|
|
34
|
-
};
|
|
35
|
-
ZAppTopbar.style = stylesCss;
|
|
36
|
-
|
|
37
|
-
export { ZAppTopbar as z_app_topbar };
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h } from './index-a2ca4b97.js';
|
|
2
|
-
|
|
3
|
-
const stylesCss = ":host{margin-top:calc(var(--space-unit) * 3);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>.dragdrop{position:relative;display:flex;height:228px;flex-direction:column;border-color:var(--color-surface04);background-color:var(--color-surface02);background-image:url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='2' ry='2' stroke='%23CACCCEFF' stroke-width='2' stroke-dasharray='15%2c 10%2c 14%2c 11' stroke-dashoffset='3' stroke-linecap='square'/%3e%3c/svg%3e\");border-radius:2px;color:var(--color-text01)}:host>.dragdrop.dragover *{pointer-events:none}:host>.dragdrop .dragover-container{position:absolute;z-index:10;top:0;left:0;display:none;width:100%;height:100%;background-color:var(--color-primary03);box-shadow:var(--shadow-focus-primary)}:host>.dragdrop .dragover-container .dragover-message{padding:10px 28px;background-color:var(--color-link-primary);color:var(--color-text04)}:host>.dragdrop.dragover .dragover-container{display:flex;align-items:center;justify-content:center}";
|
|
4
|
-
|
|
5
|
-
const ZDragdropArea = class {
|
|
6
|
-
constructor(hostRef) {
|
|
7
|
-
registerInstance(this, hostRef);
|
|
8
|
-
this.fileDropped = createEvent(this, "fileDropped", 7);
|
|
9
|
-
}
|
|
10
|
-
fileDroppedHandler(files) {
|
|
11
|
-
this.fileDropped.emit(files);
|
|
12
|
-
}
|
|
13
|
-
renderOnDragOverMessage() {
|
|
14
|
-
return (h("div", { class: "dragover-container" }, h("div", { class: "dragover-message" }, h("z-body", { variant: "semibold", level: 2 }, "Rilascia i file in questa area per allegarli."))));
|
|
15
|
-
}
|
|
16
|
-
render() {
|
|
17
|
-
return (h("div", { tabIndex: 0, ref: (val) => (this.dragDropContainer = val), class: "dragdrop", onDragOver: (e) => {
|
|
18
|
-
e.preventDefault();
|
|
19
|
-
this.dragDropContainer.classList.add("dragover");
|
|
20
|
-
}, onDragLeave: () => {
|
|
21
|
-
this.dragDropContainer.classList.remove("dragover");
|
|
22
|
-
}, onDrop: (e) => {
|
|
23
|
-
e.preventDefault();
|
|
24
|
-
if (e.dataTransfer.files.length) {
|
|
25
|
-
this.dragDropContainer.classList.remove("dragover");
|
|
26
|
-
this.fileDroppedHandler(e.dataTransfer.files);
|
|
27
|
-
}
|
|
28
|
-
} }, this.renderOnDragOverMessage(), h("slot", null)));
|
|
29
|
-
}
|
|
30
|
-
};
|
|
31
|
-
ZDragdropArea.style = stylesCss;
|
|
32
|
-
|
|
33
|
-
const ZHeading = class {
|
|
34
|
-
constructor(hostRef) {
|
|
35
|
-
registerInstance(this, hostRef);
|
|
36
|
-
/** Font weight variant */
|
|
37
|
-
this.variant = "regular";
|
|
38
|
-
}
|
|
39
|
-
render() {
|
|
40
|
-
return (h("z-typography", { tabIndex: 0, component: this.component || `h${this.level}`, level: `h${this.level}`, variant: this.variant }, h("slot", null)));
|
|
41
|
-
}
|
|
42
|
-
};
|
|
43
|
-
|
|
44
|
-
export { ZDragdropArea as z_dragdrop_area, ZHeading as z_heading };
|
|
@@ -1,55 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, h } from './index-a2ca4b97.js';
|
|
2
|
-
import { K as KeyboardKeyCode } from './index-968a240f.js';
|
|
3
|
-
import { a as getElementTree, h as handleKeyboardSubmit, b as getClickedElement } from './utils-ccb4d66f.js';
|
|
4
|
-
import './breakpoints-c386984e.js';
|
|
5
|
-
|
|
6
|
-
const stylesCss = ":host{width:inherit;height:32px;font-family:var(--dashboard-font);font-size:12px;font-weight:var(--font-sb);letter-spacing:0.17px}a,a:visited,a:active{color:inherit;text-decoration:none}:host>a{display:block;border:var(--border-size-small) solid transparent;background:var(--bg-grey-050);border-radius:var(--border-radius);color:var(--text-grey-800);outline:none}:host>a::-moz-focus-inner{border:0}:host>a:hover,:host>a.menu-opened:hover{color:var(--myz-blue-dark);fill:var(--myz-blue-dark)}:host>a:focus{border:var(--border-size-small) solid var(--myz-blue);box-shadow:0 0 2px 2px var(--myz-blue-light);color:var(--myz-blue);fill:var(--myz-blue)}:host>a:active{border:var(--border-size-small) solid 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)}div.container{position:relative;display:flex;height:32px;align-items:center;justify-content:space-between;padding:0 var(--basex1)}div.container>span.user-wrapper{display:flex}div.container>span.user-wrapper>span.user{overflow:hidden;width:30px;padding:0 var(--basex1);cursor:pointer;text-overflow:ellipsis;white-space:nowrap}div.container>span.arrow{display:flex;align-items:center;justify-content:center}div.container>span.arrow>z-icon{transform:rotate(360deg);transition:all 200ms linear}ul{padding:0 calc(var(--space-unit) * 2);margin:0;list-style:none}li{display:flex;width:max-content;height:var(--basex3);align-items:center;padding:calc(var(--space-unit) / 4) 0}.menu-opened{position:inherit;width:auto !important;min-width:147px;padding-bottom:calc(var(--space-unit) * 2)}.menu-opened a,.menu-opened a:active,.menu-opened a:visited{color:var(--myz-blue);fill:var(--myz-blue)}.menu-opened a:hover{color:var(--myz-blue-dark);fill:var(--myz-blue-dark)}.menu-opened>div.container{margin-bottom:var(--basex1)}.menu-opened>div.container>span.user-wrapper>span.user{width:auto}.menu-opened>div.container>span.arrow>z-icon{transform:rotate(180deg);transition:all 200ms linear}@media only screen and (min-width: 1152px){:host>a{width:147px;padding:0 calc(var(--space-unit) / 4)}:host>a.menu-opened{width:147px;padding-bottom:calc(var(--space-unit) * 2)}div.container>span.user-wrapper>span.user{width:80px}}";
|
|
7
|
-
|
|
8
|
-
const ZMenuDropdown = class {
|
|
9
|
-
constructor(hostRef) {
|
|
10
|
-
registerInstance(this, hostRef);
|
|
11
|
-
this.ismenuopen = false;
|
|
12
|
-
this.handleToggle = this.handleToggle.bind(this);
|
|
13
|
-
this.handleFocus = this.handleFocus.bind(this);
|
|
14
|
-
}
|
|
15
|
-
componentWillRender() {
|
|
16
|
-
this.linkarray = typeof this.menucontent === "string" ? JSON.parse(this.menucontent) : this.menucontent;
|
|
17
|
-
}
|
|
18
|
-
renderMenuOpen() {
|
|
19
|
-
if (this.ismenuopen) {
|
|
20
|
-
return (h("ul", null, this.linkarray.map((bean) => (h("li", null, h("z-link", { htmlid: bean.id, href: bean.link, icon: bean.icon }, bean.label))))));
|
|
21
|
-
}
|
|
22
|
-
}
|
|
23
|
-
renderButtonMenu() {
|
|
24
|
-
return (h("span", { class: "arrow" }, h("z-icon", { name: "caret-down", width: 14, height: 14 })));
|
|
25
|
-
}
|
|
26
|
-
retriveMenuClass() {
|
|
27
|
-
if (this.ismenuopen) {
|
|
28
|
-
return "menu-opened";
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
handleToggle() {
|
|
32
|
-
this.ismenuopen = !this.ismenuopen;
|
|
33
|
-
}
|
|
34
|
-
handleFocus(e) {
|
|
35
|
-
if (e instanceof KeyboardEvent && e.keyCode !== KeyboardKeyCode.TAB) {
|
|
36
|
-
return;
|
|
37
|
-
}
|
|
38
|
-
const tree = getElementTree(getClickedElement());
|
|
39
|
-
const menuParent = tree.find((elem) => elem.nodeName.toLowerCase() === "z-menu-dropdown");
|
|
40
|
-
if (!menuParent) {
|
|
41
|
-
document.removeEventListener("click", this.handleFocus);
|
|
42
|
-
document.removeEventListener("keyup", this.handleFocus);
|
|
43
|
-
this.ismenuopen = false;
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
render() {
|
|
47
|
-
return (h("a", { class: this.retriveMenuClass(), role: "button", tabindex: "0", onFocus: () => {
|
|
48
|
-
document.addEventListener("click", this.handleFocus);
|
|
49
|
-
document.addEventListener("keyup", this.handleFocus);
|
|
50
|
-
}, onKeyUp: (e) => handleKeyboardSubmit(e, this.handleToggle) }, h("div", { class: "container", onClick: () => this.handleToggle() }, h("span", { class: "user-wrapper" }, h("z-icon", { name: "user-avatar", width: 14, height: 14 }), h("span", { class: "user" }, this.nomeutente)), this.renderButtonMenu()), this.renderMenuOpen()));
|
|
51
|
-
}
|
|
52
|
-
};
|
|
53
|
-
ZMenuDropdown.style = stylesCss;
|
|
54
|
-
|
|
55
|
-
export { ZMenuDropdown as z_menu_dropdown };
|
|
@@ -1,80 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, g as getElement } from './index-a2ca4b97.js';
|
|
2
|
-
import { d as InputStatus, B as ButtonVariant, I as InputType } from './index-968a240f.js';
|
|
3
|
-
|
|
4
|
-
const stylesCss = ".sc-z-modal-login-h{font-family:var(--dashboard-font);font-weight:var(--font-rg)}.sc-z-modal-login-h div.wrapper.sc-z-modal-login{display:flex;box-sizing:border-box;flex-flow:column nowrap;align-items:stretch;justify-content:flex-start;padding:calc(var(--space-unit) * 4) calc(var(--space-unit) * 2) calc(var(--space-unit) * 3)\n calc(var(--space-unit) * 2);color:var(--text-grey-800)}z-button.sc-z-modal-login,z-input.sc-z-modal-login,.sc-z-modal-login-s>z-button,.sc-z-modal-login-s>z-input{display:inline-block;width:100%}z-link.sc-z-modal-login,.sc-z-modal-login-s>z-link{font-size:12px}.sc-z-modal-login-h div.wrapper.sc-z-modal-login>form.sc-z-modal-login{display:flex;flex-flow:column nowrap;align-items:stretch;justify-content:flex-start}div.wrapper>form>div.username.sc-z-modal-login-s>z-input,div.wrapper>form>div.password.sc-z-modal-login-s>z-input,.sc-z-modal-login-h div.wrapper.sc-z-modal-login>form.sc-z-modal-login>div.username.sc-z-modal-login z-input.sc-z-modal-login,.sc-z-modal-login-h div.wrapper.sc-z-modal-login>form.sc-z-modal-login>div.password.sc-z-modal-login z-input.sc-z-modal-login{margin-bottom:var(--space-unit)}.sc-z-modal-login-h div.wrapper.sc-z-modal-login>form.sc-z-modal-login>z-link.forget.sc-z-modal-login{align-self:flex-end;font-size:12px}div.wrapper>form>div.login.sc-z-modal-login-s>z-button,.sc-z-modal-login-h div.wrapper.sc-z-modal-login>form.sc-z-modal-login>div.login.sc-z-modal-login z-button.sc-z-modal-login{align-self:flex-start;margin:calc(var(--space-unit) * 3) 0}.sc-z-modal-login-h div.wrapper.sc-z-modal-login>hr.sc-z-modal-login{width:100%;border:none;border-top:var(--border-size-medium) solid var(--bg-grey-200);margin-bottom:calc(var(--space-unit) * 3);margin-block-start:unset}div.wrapper>div.signup.sc-z-modal-login-s>z-button,.sc-z-modal-login-h div.wrapper.sc-z-modal-login>div.signup.sc-z-modal-login z-button.sc-z-modal-login{display:inline-block;margin:calc(var(--space-unit) * 2) 0}.sc-z-modal-login-h div.providers.sc-z-modal-login{display:grid;gap:calc(var(--space-unit) * 2) 0;grid-auto-rows:auto;grid-template-columns:1fr}slot-fb[name=\"provider\"].sc-z-modal-login{display:grid;gap:calc(var(--space-unit) * 2) 0;grid-auto-rows:auto;grid-template-columns:1fr}.sc-z-modal-login-h div.providers.sc-z-modal-login>z-body.sc-z-modal-login{padding-top:calc(var(--space-unit) * 2)}.sc-z-modal-login-h div.wrapper.sc-z-modal-login>div.providers.sc-z-modal-login .zd.sc-z-modal-login{display:flex;flex-flow:row nowrap;align-content:center;align-items:center;justify-content:center}.sc-z-modal-login-h div.wrapper.sc-z-modal-login>div.providers.sc-z-modal-login .zd.sc-z-modal-login>svg.sc-z-modal-login{margin-right:var(--space-unit)}@media only screen and (min-width: 768px){z-button.sc-z-modal-login,.sc-z-modal-login-s>z-button{width:initial}.sc-z-modal-login-h div.wrapper.sc-z-modal-login{width:396px;padding:calc(var(--space-unit) * 3)}.sc-z-modal-login-h div.providers.sc-z-modal-login{display:grid;align-items:center;justify-content:center;gap:var(--space-unit);grid-auto-rows:auto;grid-template-columns:1fr 1fr}.sc-z-modal-login-h div.providers.sc-z-modal-login>z-body.sc-z-modal-login{padding-bottom:var(--space-unit);grid-column:1 / 3}.sc-z-modal-login-s>[slot=\"provider\"]{width:100%}slot-fb[name=\"provider\"].sc-z-modal-login{display:grid;align-items:center;justify-content:center;gap:var(--space-unit);grid-auto-rows:auto;grid-column:1 / 3;grid-template-columns:1fr 1fr}slot-fb[name=\"provider\"].sc-z-modal-login>*.sc-z-modal-login{width:100%}}@media only screen and (min-width: 1366px){.sc-z-modal-login-h div.wrapper.sc-z-modal-login{width:477px;padding:calc(var(--space-unit) * 4)}}";
|
|
5
|
-
|
|
6
|
-
const ZModalLogin = class {
|
|
7
|
-
constructor(hostRef) {
|
|
8
|
-
registerInstance(this, hostRef);
|
|
9
|
-
this.loginSubmit = createEvent(this, "loginSubmit", 7);
|
|
10
|
-
this.statusUpdate = createEvent(this, "statusUpdate", 7);
|
|
11
|
-
this.signupClick = createEvent(this, "signupClick", 7);
|
|
12
|
-
this.zainoDigitaleClick = createEvent(this, "zainoDigitaleClick", 7);
|
|
13
|
-
/** Login modal title */
|
|
14
|
-
this.heading = "Entra in MyZanichelli";
|
|
15
|
-
this.externalProviderCheck = false;
|
|
16
|
-
}
|
|
17
|
-
componentDidLoad() {
|
|
18
|
-
this.externalProviderCheck = !!this.hostElement.querySelectorAll('[slot="provider"]').length;
|
|
19
|
-
}
|
|
20
|
-
emitLoginSubmit() {
|
|
21
|
-
const usernameInput = this.hostElement.querySelector("z-input#username");
|
|
22
|
-
const passwordInput = this.hostElement.querySelector("z-input#password");
|
|
23
|
-
// INFO: slotted inputs
|
|
24
|
-
if (!usernameInput || !passwordInput) {
|
|
25
|
-
return;
|
|
26
|
-
}
|
|
27
|
-
let username = usernameInput.value;
|
|
28
|
-
const password = passwordInput.value;
|
|
29
|
-
if (!username || !password) {
|
|
30
|
-
this.status = InputStatus.ERROR;
|
|
31
|
-
return;
|
|
32
|
-
}
|
|
33
|
-
username = this.cleanUsername(username);
|
|
34
|
-
this.loginSubmit.emit({
|
|
35
|
-
username,
|
|
36
|
-
password,
|
|
37
|
-
originalUsername: usernameInput.value,
|
|
38
|
-
});
|
|
39
|
-
}
|
|
40
|
-
emitStatusUpdate(status) {
|
|
41
|
-
this.statusUpdate.emit(status);
|
|
42
|
-
}
|
|
43
|
-
emitSignupClick() {
|
|
44
|
-
this.signupClick.emit();
|
|
45
|
-
}
|
|
46
|
-
emitZainoDigitaleClick() {
|
|
47
|
-
this.zainoDigitaleClick.emit();
|
|
48
|
-
}
|
|
49
|
-
handleInputKeyUp(e) {
|
|
50
|
-
if (e.code !== "Enter") {
|
|
51
|
-
return;
|
|
52
|
-
}
|
|
53
|
-
this.emitLoginSubmit();
|
|
54
|
-
}
|
|
55
|
-
handleInputChange() {
|
|
56
|
-
this.status = null;
|
|
57
|
-
this.emitStatusUpdate(this.status);
|
|
58
|
-
}
|
|
59
|
-
cleanUsername(username) {
|
|
60
|
-
username = username.trim().toLowerCase();
|
|
61
|
-
const mobileRegex = /^[+]?[\s./0-9]*[(]?[0-9]{1,4}[)]?[(]?[0-9]{1,4}[)]?[-\s./0-9]*$/g;
|
|
62
|
-
if (mobileRegex.test(username)) {
|
|
63
|
-
username = username.replace(/[- .)(]/g, "");
|
|
64
|
-
if (/^[\d ]*$/.test(username)) {
|
|
65
|
-
username = "+39" + username;
|
|
66
|
-
}
|
|
67
|
-
}
|
|
68
|
-
return username;
|
|
69
|
-
}
|
|
70
|
-
renderZainoDigitaleButton() {
|
|
71
|
-
return (h("z-button", { variant: ButtonVariant.SECONDARY, onClick: () => this.emitZainoDigitaleClick(), class: "zainoDigitale" }, h("div", { class: "zd" }, h("svg", { width: "18px", height: "24px", viewBox: "0 0 18 24" }, h("g", { stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" }, h("g", { transform: "translate(-313.000000, -329.000000)", fill: "#E2001A", "fill-rule": "nonzero" }, h("g", { transform: "translate(25.000000, 191.000000)" }, h("g", null, h("g", { transform: "translate(0.000000, 100.000000)" }, h("g", null, h("g", { transform: "translate(276.000000, 28.000000)" }, h("path", { d: "M29.8953704,30.5632326 C29.9143039,30.3327754 29.5356326,30.0447041 29.1380277,29.8142469 C29.2516291,28.7963947 29.4409647,26.9719425 29.2705626,26.3189807 C29.0433598,25.416357 28.3428178,24.8018047 28.380685,23.822362 C28.4185521,22.8429193 28.1913493,16.5437582 27.0364017,15.1802202 C26.1654576,14.162368 25.4649156,12.8372396 23.4390239,12.2418921 C23.4390239,12.0498445 23.4390239,11.8770016 23.4200903,11.7425683 C23.3822232,10.9167637 21.9622056,10.090959 21.6214014,10.0525495 C21.2805972,10.01414 20.371786,9.95652568 20.0309818,10.0525495 C19.6901775,10.1293685 19.0464362,11.128016 18.7434992,11.4352922 C18.5920306,11.5889302 18.5541635,11.9538207 18.5730971,12.3187111 C17.437083,12.6836015 16.1306669,13.4325871 15.4490584,14.9497631 C14.2941108,17.676839 13.4799674,18.9251483 13.6693031,24.1680477 C13.5935688,25.1090809 13.2906318,25.6084046 13.1012961,25.6852237 C12.9119604,25.7620427 12.798359,25.9156808 12.7604919,26.1077284 C12.7226247,26.2805712 12.5522226,28.37389 12.7415583,29.8718612 C12.3818205,30.1023183 12.0788834,30.3519802 12.097817,30.5632326 C12.1546177,31.0625563 11.8516806,31.7731324 12.097817,32.0612038 C12.230352,32.2148419 12.7226247,32.5413228 13.3284989,32.8293942 C13.6125024,33.4631512 14.199443,33.9240655 15.467992,33.9816797 C18.1565586,34.0584988 26.2601254,33.8664512 26.5630625,33.9048607 C26.847066,33.9432702 28.4374857,34.0008845 28.683622,32.8293942 C29.2894962,32.5413228 29.781769,32.2148419 29.9143039,32.0612038 C30.1415067,31.7731324 29.8385697,31.0625563 29.8953704,30.5632326 Z M12.0319858,31.2 C12.1173988,31.1230769 12.3736379,31.0461538 12.743761,31 C12.857645,31.3230769 12.914587,31.6615385 13,32 C12.4021089,31.8153846 11.8611598,31.5692308 12.0319858,31.2 Z M21.1618497,12.8394441 C21.1618497,12.8394441 20.6763006,12.8165075 20,13 L20,12.9770634 C20,12.5642053 20.3121387,11.3256309 20.3988439,11.1192018 C20.4855491,10.9127728 21.265896,11.0274556 21.8554913,11.0733287 C22.6358382,11.0503922 22.4624277,11.2568212 22.8092486,11.9907912 C22.9306358,12.2889666 22.982659,12.6559516 23,13 C22.4797688,12.8623806 21.8728324,12.8165075 21.1618497,12.8394441 Z M28.3324094,30 C28.6648189,30.0833333 28.9085858,30.2222222 28.9750677,30.3888889 C29.1301921,31.1666667 28.5318551,31.6388889 28,32 C28.0221606,31.5 28.0664819,31.1111111 28.0664819,31.1111111 L28.2437669,30.6111111 L28.3324094,30 Z M21.8571429,23 L21.8571429,23.8 L22.7142857,23.8 L22.7142857,24.6 L23.5714286,24.6 L23.5714286,25.4 L24.4285714,25.4 L24.4285714,26.2 L25.2857143,26.2 L25.2857143,27 L26.1428571,27 L26.1428571,27.8 L27,27.8 L27,28.6 L24.4285714,28.6 L24.4285714,29.4 L25.2857143,29.4 L25.2857143,31 L24.4285714,31 L24.4285714,30.2 L23.5714286,30.2 L23.5714286,29.4 L22.7142857,29.4 L22.7142857,30.2 L21.8571429,30.2 L21.8571429,31 L21,31 L21,23 L21.8571429,23 Z" }))))))))), h("span", null, "ZAINO DIGITALE"))));
|
|
72
|
-
}
|
|
73
|
-
render() {
|
|
74
|
-
return (h("z-modal", { modaltitle: this.heading }, h("div", { class: "wrapper", slot: "modalContent" }, h("form", { method: "post" }, h("div", { class: "username" }, h("slot", { name: "username" }, h("z-input", { id: "username", label: "email o numero di cellulare", placeholder: "Inserisci l'email o il cellulare", autocomplete: "username", name: "username", status: this.status, message: this.message, onKeyUp: (e) => this.handleInputKeyUp(e), onInputChange: () => this.handleInputChange() }))), h("div", { class: "password" }, h("slot", { name: "password" }, h("z-input", { id: "password", label: "password", placeholder: "Inserisci la tua password", type: InputType.PASSWORD, name: "password", autocomplete: "current-password", status: this.status, message: this.pwdmessage, onKeyUp: (e) => this.handleInputKeyUp(e), onInputChange: () => this.handleInputChange() }))), h("z-link", { class: "forget", href: this.forgotPasswordUrl }, "Password dimenticata?"), h("div", { class: "login" }, h("slot", { name: "login" }, h("z-button", { variant: ButtonVariant.PRIMARY, onClick: () => this.emitLoginSubmit() }, "Accedi")))), h("hr", null), h("z-body", { class: "signup", level: 4, variant: "semibold" }, "Non hai ancora un account?"), h("div", { class: "signup" }, h("slot", { name: "signup" }, h("z-button", { variant: ButtonVariant.SECONDARY, onClick: () => this.emitSignupClick() }, "Registrati"))), !this.externalProviderCheck && (h("div", { class: "providers" }, h("z-body", { class: "provider", level: 5, variant: "regular" }, "OPPURE ACCEDI CON:"), h("slot", { name: "provider" }, this.renderZainoDigitaleButton(), h("z-link", { icon: "informationsource", href: "https://www.zainodigitale.it/#/landing" }, "Cos'\u00E8 Zaino Digitale?")))))));
|
|
75
|
-
}
|
|
76
|
-
get hostElement() { return getElement(this); }
|
|
77
|
-
};
|
|
78
|
-
ZModalLogin.style = stylesCss;
|
|
79
|
-
|
|
80
|
-
export { ZModalLogin as z_modal_login };
|
|
@@ -1,89 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, H as Host } from './index-a2ca4b97.js';
|
|
2
|
-
import { m as mobileBreakpoint } from './breakpoints-c386984e.js';
|
|
3
|
-
|
|
4
|
-
const stylesCss = ":host{background-color:var(--gray900)}:host(.inverse){background-color:var(--color-white)}button{display:flex;width:100%;flex-direction:column;padding:0;border:none;margin:0;background-color:var(--gray900);cursor:pointer;letter-spacing:0.16px;white-space:nowrap}button.inverse{background-color:var(--color-white)}button div.firstline{display:flex;max-width:200px;align-items:center;justify-content:flex-end}button.open div.firstline{max-width:none}z-icon{padding:0 2px;fill:var(--color-white)}z-icon.inverse{fill:var(--gray900)}ul{position:absolute;left:0;width:100%;box-sizing:border-box;padding:calc(var(--space-unit) / 2) calc(var(--space-unit) * 2) 0 calc(var(--space-unit) * 2);margin:calc(var(--space-unit) * 1.5) 0 0 0;background-color:var(--gray900);font-family:var(--font-family-sans);font-size:14px;font-weight:var(--font-sb);letter-spacing:0.3px;line-height:20px}ul.inverse{background-color:var(--color-white)}ul>li{display:flex;justify-content:flex-end;padding:calc(var(--space-unit) * 1.5 - 1px) 0;border-bottom:var(--border-base) solid var(--gray700);margin:0;white-space:nowrap}ul>li.inverse{border-bottom-color:var(--gray400)}ul>li:first-child{flex-direction:column;align-items:end;padding-top:0;padding-bottom:calc(var(--space-unit) + 6px);border-top:none}ul>li:last-child{border-bottom:none;margin-bottom:0}#guestbutton{display:inline-flex;width:100%;min-width:32px;height:32px;box-sizing:border-box;flex-direction:row;align-items:center;justify-content:center;padding:0 calc(var(--space-unit) * 2);border-width:var(--border-size-medium);border-style:solid;border-color:var(--color-white);background-color:var(--color-white);border-radius:var(--border-radius);color:var(--gray800);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;vertical-align:middle}#guestbutton.inverse{border-color:var(--gray800);background-color:var(--gray800);color:var(--color-white)}.userfullname{overflow:hidden;width:100%;max-width:250px;padding:0;color:var(--color-white);font-family:var(--font-family-sans);font-size:16px;font-weight:var(--font-sb);letter-spacing:0;line-height:24px;text-align:right;text-overflow:ellipsis}.userfullname.inverse{color:var(--gray800)}.useremail{overflow:hidden;width:100%;color:var(--color-white);font-family:var(--font-family-sans);font-size:12px;font-weight:var(--font-rg);letter-spacing:0.32px;line-height:16px;text-align:right;text-overflow:ellipsis}.useremail.inverse{color:var(--gray800)}@media only screen and (min-width: 768px){:host{height:calc(var(--space-unit) * 4);background-color:var(--gray900)}:host(.inverse){background-color:var(--color-white)}:host>div{position:relative;top:50%;transform:translateY(-50%)}:host>div.open{top:auto;transform:none}:host>div>div{padding:0}:host>div>div.open{position:absolute;right:calc(var(--space-unit) * -1);padding:calc(var(--space-unit) / 2 + 1px) var(--space-unit) 0 var(--space-unit);margin-top:calc(var(--space-unit) / 2);background-color:var(--color-white);box-shadow:0 2px calc(var(--space-unit) * 0.5) 0 rgb(0 0 0 / 50%);transform:translate(0, -4px)}:host>div>div.inverse.open{background-color:var(--gray800)}button{display:flex;flex-flow:row nowrap;align-content:center;align-items:end;justify-content:flex-end}button.open{max-width:initial;padding-right:var(--space-unit);border-top:var(--border-size-small) solid var(--color-white);margin-left:var(--space-unit);background-color:var(--color-white);border-top-left-radius:calc(var(--space-unit) * 0.5);border-top-right-radius:calc(var(--space-unit) * 0.5)}button.open.inverse{border-top-color:var(--gray800);background-color:var(--gray800)}button:not(.open) z-icon{fill:var(--color-white)}button:not(.open) z-icon.inverse{fill:var(--gray800)}button.open z-icon{fill:var(--gray800)}button.open z-icon.inverse{fill:var(--color-white)}.userfullname{width:auto;padding:0 calc(var(--space-unit) - 6px) 0 calc(var(--space-unit) - 2px);font-family:var(--font-family-sans);font-size:14px;font-weight:var(--font-sb);letter-spacing:0.16px;line-height:20px}.userfullname.inverse{color:var(--gray800)}button.open div.userfullname{max-width:none;color:var(--gray800);text-overflow:clip}button.open div.userfullname.inverse{color:var(--color-white)}.useremail{box-sizing:border-box;padding-right:calc(var(--space-unit) * 3 - 2px)}button.open div.useremail{color:var(--gray800)}button.open div.useremail.inverse{color:var(--color-white)}ul{position:initial;left:initial;width:100%;padding:0;background-color:var(--color-white)}ul.inverse{border-bottom-color:var(--gray800);background-color:var(--gray800)}ul>li{border-bottom:var(--border-base) solid var(--gray400);margin:0 var(--space-unit);color:var(--gray800)}ul>li.inverse{color:var(--color-white)}ul>li:first-child{padding-top:calc(var(--space-unit) + 3px);padding-bottom:calc(var(--space-unit) + 5px);border-top:var(--border-base) solid var(--gray400)}}";
|
|
5
|
-
|
|
6
|
-
const ZUserDropdown = class {
|
|
7
|
-
constructor(hostRef) {
|
|
8
|
-
registerInstance(this, hostRef);
|
|
9
|
-
this.userButtonClick = createEvent(this, "userButtonClick", 7);
|
|
10
|
-
this.dropdownMenuLinkClick = createEvent(this, "dropdownMenuLinkClick", 7);
|
|
11
|
-
/** if inner components colors are inverted, or not, default false */
|
|
12
|
-
this.useInverseColors = false;
|
|
13
|
-
this.isMenuOpen = false;
|
|
14
|
-
this.handleLoggedButtonClick = this.handleLoggedButtonClick.bind(this);
|
|
15
|
-
this.emitDropdownMenuLinkClick = this.emitDropdownMenuLinkClick.bind(this);
|
|
16
|
-
}
|
|
17
|
-
componentDidLoad() {
|
|
18
|
-
this.setMobileAndDivToResizeWidth();
|
|
19
|
-
}
|
|
20
|
-
componentWillUpdate() {
|
|
21
|
-
this.setMobileAndDivToResizeWidth();
|
|
22
|
-
}
|
|
23
|
-
componentWillRender() {
|
|
24
|
-
if (this.menuContent) {
|
|
25
|
-
this.linkArray = typeof this.menuContent === "string" ? JSON.parse(this.menuContent) : this.menuContent;
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
setMobileAndDivToResizeWidth() {
|
|
29
|
-
var _a;
|
|
30
|
-
if (this.divToResize) {
|
|
31
|
-
this.isMobile = window.screen.width <= mobileBreakpoint || window.innerWidth <= mobileBreakpoint;
|
|
32
|
-
if (this.logged && !this.isMobile && this.isMenuOpen) {
|
|
33
|
-
this.divToResize.style.width = `${(_a = this.userButton) === null || _a === void 0 ? void 0 : _a.offsetWidth}px`;
|
|
34
|
-
}
|
|
35
|
-
else {
|
|
36
|
-
this.divToResize.removeAttribute("style");
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
emitUserButtonClick() {
|
|
41
|
-
this.userButtonClick.emit(this.isMenuOpen);
|
|
42
|
-
}
|
|
43
|
-
emitDropdownMenuLinkClick(e) {
|
|
44
|
-
this.isMenuOpen = false;
|
|
45
|
-
this.dropdownMenuLinkClick.emit({ e, linkId: e.detail.linkId });
|
|
46
|
-
}
|
|
47
|
-
handleResize() {
|
|
48
|
-
this.isMobile = window.innerWidth <= mobileBreakpoint;
|
|
49
|
-
}
|
|
50
|
-
handleOrientationChange() {
|
|
51
|
-
this.isMobile = screen.width <= mobileBreakpoint;
|
|
52
|
-
}
|
|
53
|
-
handleClickOutside(e) {
|
|
54
|
-
if (e.target.nodeName !== "Z-USER-DROPDOWN") {
|
|
55
|
-
this.isMenuOpen = false;
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
handleLoggedButtonClick() {
|
|
59
|
-
this.isMenuOpen = !this.isMenuOpen;
|
|
60
|
-
this.emitUserButtonClick();
|
|
61
|
-
}
|
|
62
|
-
renderGuestButton() {
|
|
63
|
-
return (h("button", { id: "guestbutton", class: this.useInverseColors ? "inverse" : "", onClick: () => this.emitUserButtonClick() }, "ENTRA"));
|
|
64
|
-
}
|
|
65
|
-
renderLoggedButton() {
|
|
66
|
-
const direction = this.isMenuOpen ? "up" : "down";
|
|
67
|
-
const colorClass = this.useInverseColors ? "inverse" : "";
|
|
68
|
-
return (h("button", { ref: (el) => (this.userButton = el), title: this.userFullName, class: `${colorClass} ${this.isMenuOpen ? "open" : ""}`, onClick: this.handleLoggedButtonClick }, h("div", null, h("div", { class: "firstline" }, h("z-icon", { class: colorClass, name: "user-avatar-filled", height: 16, width: 16 }), !this.isMobile && h("div", { class: `userfullname ${colorClass}` }, this.userFullName), h("z-icon", { class: colorClass, name: `caret-${direction}-filled`, height: 16, width: 16 })), !this.isMobile && this.isMenuOpen && h("div", { class: `useremail ${colorClass}` }, this.userEmail))));
|
|
69
|
-
}
|
|
70
|
-
getZLinkTextcolor() {
|
|
71
|
-
if (this.isMobile) {
|
|
72
|
-
return this.useInverseColors ? "black" : "white";
|
|
73
|
-
}
|
|
74
|
-
return this.useInverseColors ? "white" : "black";
|
|
75
|
-
}
|
|
76
|
-
renderDropdownMenu() {
|
|
77
|
-
const colorClass = this.useInverseColors ? "inverse" : "";
|
|
78
|
-
return (this.isMenuOpen && (h("ul", { class: colorClass }, this.isMobile && (h("li", { class: colorClass }, h("div", { class: `userfullname ${colorClass}` }, this.userFullName), h("div", { class: `useremail ${colorClass}` }, this.userEmail))), this.linkArray &&
|
|
79
|
-
this.linkArray.map((link) => (h("li", { id: link.id, class: colorClass }, h("z-link", { textcolor: this.getZLinkTextcolor(), href: link.link, htmlid: link.id, target: link.target, icon: link.icon, onZLinkClick: this.emitDropdownMenuLinkClick }, link.label)))))));
|
|
80
|
-
}
|
|
81
|
-
render() {
|
|
82
|
-
const openClass = `${this.logged && this.isMenuOpen ? "open" : ""}`;
|
|
83
|
-
const colorClass = this.useInverseColors ? "inverse" : "";
|
|
84
|
-
return (h(Host, { class: colorClass }, h("div", { ref: (el) => (this.divToResize = el), class: openClass }, h("div", { class: `${colorClass} ${openClass}` }, this.logged ? this.renderLoggedButton() : this.renderGuestButton(), this.logged && this.renderDropdownMenu()))));
|
|
85
|
-
}
|
|
86
|
-
};
|
|
87
|
-
ZUserDropdown.style = stylesCss;
|
|
88
|
-
|
|
89
|
-
export { ZUserDropdown as z_user_dropdown };
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
import { EventEmitter } from "../../../stencil-public-runtime";
|
|
2
|
-
import { InputStatus } from "../../../beans";
|
|
3
|
-
/**
|
|
4
|
-
* @slot username - username input
|
|
5
|
-
* @slot password - password input
|
|
6
|
-
* @slot login - login button
|
|
7
|
-
* @slot signup - signup button
|
|
8
|
-
* @slot provider - expternal providers login buttons
|
|
9
|
-
*/
|
|
10
|
-
export declare class ZModalLogin {
|
|
11
|
-
hostElement: HTMLZModalLoginElement;
|
|
12
|
-
/** Forgot Password Url */
|
|
13
|
-
forgotPasswordUrl: string;
|
|
14
|
-
/** Login modal title */
|
|
15
|
-
heading?: string;
|
|
16
|
-
/** Username/password input status */
|
|
17
|
-
status?: InputStatus;
|
|
18
|
-
/** Username helper message */
|
|
19
|
-
message?: string;
|
|
20
|
-
/** Password helper message */
|
|
21
|
-
pwdmessage?: string;
|
|
22
|
-
externalProviderCheck: boolean;
|
|
23
|
-
componentDidLoad(): void;
|
|
24
|
-
/** Emitted on login submit */
|
|
25
|
-
loginSubmit: EventEmitter;
|
|
26
|
-
private emitLoginSubmit;
|
|
27
|
-
/** Emitted on status update */
|
|
28
|
-
statusUpdate: EventEmitter;
|
|
29
|
-
private emitStatusUpdate;
|
|
30
|
-
/** Emitted on signup button click */
|
|
31
|
-
signupClick: EventEmitter;
|
|
32
|
-
private emitSignupClick;
|
|
33
|
-
/** Emitted on zaino digitale button click */
|
|
34
|
-
zainoDigitaleClick: EventEmitter;
|
|
35
|
-
private emitZainoDigitaleClick;
|
|
36
|
-
private handleInputKeyUp;
|
|
37
|
-
private handleInputChange;
|
|
38
|
-
private cleanUsername;
|
|
39
|
-
private renderZainoDigitaleButton;
|
|
40
|
-
render(): HTMLZModalElement;
|
|
41
|
-
}
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import { MenuItem, ThemeVariant } from "../../../beans";
|
|
2
|
-
export declare class ZAppTopbar {
|
|
3
|
-
/** theme variant, default 'dark' */
|
|
4
|
-
theme?: ThemeVariant;
|
|
5
|
-
/** maximum width of topbar content */
|
|
6
|
-
contentMaxWidth?: number;
|
|
7
|
-
/** JSON string or MenuItem array to define topbar links */
|
|
8
|
-
topbarContent?: string | MenuItem[];
|
|
9
|
-
/** link URL used by z-logo */
|
|
10
|
-
logoLink?: string;
|
|
11
|
-
/** add app-switcher */
|
|
12
|
-
showAppSwitcher: boolean;
|
|
13
|
-
isMobile: boolean;
|
|
14
|
-
private topbarLinks;
|
|
15
|
-
handleResize(): void;
|
|
16
|
-
componentWillLoad(): void;
|
|
17
|
-
componentWillRender(): void;
|
|
18
|
-
private renderTopbarLinks;
|
|
19
|
-
render(): HTMLZAppTopbarElement;
|
|
20
|
-
}
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import { MenuItem } from "../../../beans/index";
|
|
2
|
-
export declare class ZMenuDropdown {
|
|
3
|
-
/** user name text */
|
|
4
|
-
nomeutente: string;
|
|
5
|
-
/** Json stringified or array to fill menu dropdown */
|
|
6
|
-
menucontent: string | MenuItem[];
|
|
7
|
-
/** unique button id */
|
|
8
|
-
buttonid: string;
|
|
9
|
-
ismenuopen: boolean;
|
|
10
|
-
private linkarray;
|
|
11
|
-
constructor();
|
|
12
|
-
componentWillRender(): void;
|
|
13
|
-
private renderMenuOpen;
|
|
14
|
-
private renderButtonMenu;
|
|
15
|
-
private retriveMenuClass;
|
|
16
|
-
private handleToggle;
|
|
17
|
-
private handleFocus;
|
|
18
|
-
render(): HTMLAnchorElement;
|
|
19
|
-
}
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
import { EventEmitter } from "../../../stencil-public-runtime";
|
|
2
|
-
import { MenuItem } from "../../../beans";
|
|
3
|
-
export declare class ZUserDropdown {
|
|
4
|
-
/** logged status flag */
|
|
5
|
-
logged?: boolean;
|
|
6
|
-
/** user full name */
|
|
7
|
-
userFullName?: string;
|
|
8
|
-
/** user email */
|
|
9
|
-
userEmail?: string;
|
|
10
|
-
/** Json stringified or array to fill menu dropdown */
|
|
11
|
-
menuContent?: string | MenuItem[];
|
|
12
|
-
/** if inner components colors are inverted, or not, default false */
|
|
13
|
-
useInverseColors?: boolean;
|
|
14
|
-
isMenuOpen: boolean;
|
|
15
|
-
isMobile: boolean;
|
|
16
|
-
private linkArray;
|
|
17
|
-
private userButton;
|
|
18
|
-
private divToResize;
|
|
19
|
-
constructor();
|
|
20
|
-
componentDidLoad(): void;
|
|
21
|
-
componentWillUpdate(): void;
|
|
22
|
-
componentWillRender(): void;
|
|
23
|
-
private setMobileAndDivToResizeWidth;
|
|
24
|
-
/** Emitted on enter or user Button click, returns isMenuOpen (bool) */
|
|
25
|
-
userButtonClick: EventEmitter;
|
|
26
|
-
private emitUserButtonClick;
|
|
27
|
-
/** Emitted on dropdown menu zlink click, returns event */
|
|
28
|
-
dropdownMenuLinkClick: EventEmitter;
|
|
29
|
-
private emitDropdownMenuLinkClick;
|
|
30
|
-
handleResize(): void;
|
|
31
|
-
handleOrientationChange(): void;
|
|
32
|
-
handleClickOutside(e: MouseEvent): void;
|
|
33
|
-
private handleLoggedButtonClick;
|
|
34
|
-
private renderGuestButton;
|
|
35
|
-
private renderLoggedButton;
|
|
36
|
-
private getZLinkTextcolor;
|
|
37
|
-
private renderDropdownMenu;
|
|
38
|
-
render(): HTMLZUserDropdownElement;
|
|
39
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as i,h as t,H as e}from"./p-d17ebc2f.js";import{T as n,f as a}from"./p-a23e9115.js";import{m as s}from"./p-d69e14fb.js";const o=class{constructor(t){i(this,t),this.theme=n.DARK,this.topbarLinks=[]}handleResize(){this.isMobile=window.innerWidth<=s}componentWillLoad(){this.isMobile=window.screen.width<=s||window.innerWidth<=s}componentWillRender(){this.topbarContent&&(this.topbarLinks="string"==typeof this.topbarContent?JSON.parse(this.topbarContent):this.topbarContent)}renderTopbarLinks(){return this.topbarLinks.map((i=>t("z-link",{htmlid:i.id,textcolor:this.theme===n.LIGHT?"black":"white",href:i.link,target:i.target,icon:this.isMobile?i.icon:void 0},!this.isMobile&&i.label)))}render(){return t(e,{class:{[this.theme]:!0,"limited-width":!!this.contentMaxWidth}},t("div",{id:"content-container",style:this.contentMaxWidth?{"--mw":`${this.contentMaxWidth}px`}:{}},t("div",{id:"left-panel",class:"content-panel"},t("z-logo",{mobileLogo:this.isMobile,width:this.isMobile?32:128,height:this.isMobile?40:32,imageAlt:"zanichelli-logo",link:this.logoLink,targetBlank:!0}),this.isMobile&&this.renderTopbarLinks()),t("div",{id:"right-panel",class:"content-panel"},!this.isMobile&&this.renderTopbarLinks(),this.showAppSwitcher&&t("z-app-switcher",{theme:this.theme}),t("div",{id:"divider-container"},t("z-divider",{orientation:a.VERTICAL,color:this.theme===n.LIGHT?"gray800":"color-white"})),t("slot",{name:"login"}))))}};o.style=":host{position:sticky;z-index:99;top:0;display:block;height:calc(var(--space-unit) * 6);box-sizing:border-box;padding:calc(var(--space-unit) / 2) calc(var(--space-unit) * 2);background-color:var(--gray900);border-radius:var(--border-no-radius)}:host(.light){background-color:var(--color-white)}:host>div{display:flex;align-items:center;justify-content:space-between}:host(.limited-width) #content-container{--mw:none;max-width:var(--mw);margin:auto}.content-panel{display:flex;align-items:center}.content-panel>:not(:last-child){margin-right:calc(var(--space-unit) * 2)}#divider-container{display:none}z-link{font-family:var(--font-family-sans);font-size:14px;font-weight:var(--font-sb);letter-spacing:0.3px;line-height:20px}@media only screen and (min-width: 768px){:host{padding:var(--space-unit) calc(var(--space-unit) * 2) var(--space-unit) var(--space-unit)}:host(.limited-width){padding:var(--space-unit)}#divider-container{display:block;height:calc(var(--space-unit) * 3)}}";export{o as z_app_topbar}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as i,c as t,h as r,H as o}from"./p-d17ebc2f.js";import{m as e}from"./p-d69e14fb.js";const n=class{constructor(r){i(this,r),this.userButtonClick=t(this,"userButtonClick",7),this.dropdownMenuLinkClick=t(this,"dropdownMenuLinkClick",7),this.useInverseColors=!1,this.isMenuOpen=!1,this.handleLoggedButtonClick=this.handleLoggedButtonClick.bind(this),this.emitDropdownMenuLinkClick=this.emitDropdownMenuLinkClick.bind(this)}componentDidLoad(){this.setMobileAndDivToResizeWidth()}componentWillUpdate(){this.setMobileAndDivToResizeWidth()}componentWillRender(){this.menuContent&&(this.linkArray="string"==typeof this.menuContent?JSON.parse(this.menuContent):this.menuContent)}setMobileAndDivToResizeWidth(){var i;this.divToResize&&(this.isMobile=window.screen.width<=e||window.innerWidth<=e,this.logged&&!this.isMobile&&this.isMenuOpen?this.divToResize.style.width=`${null===(i=this.userButton)||void 0===i?void 0:i.offsetWidth}px`:this.divToResize.removeAttribute("style"))}emitUserButtonClick(){this.userButtonClick.emit(this.isMenuOpen)}emitDropdownMenuLinkClick(i){this.isMenuOpen=!1,this.dropdownMenuLinkClick.emit({e:i,linkId:i.detail.linkId})}handleResize(){this.isMobile=window.innerWidth<=e}handleOrientationChange(){this.isMobile=screen.width<=e}handleClickOutside(i){"Z-USER-DROPDOWN"!==i.target.nodeName&&(this.isMenuOpen=!1)}handleLoggedButtonClick(){this.isMenuOpen=!this.isMenuOpen,this.emitUserButtonClick()}renderGuestButton(){return r("button",{id:"guestbutton",class:this.useInverseColors?"inverse":"",onClick:()=>this.emitUserButtonClick()},"ENTRA")}renderLoggedButton(){const i=this.isMenuOpen?"up":"down",t=this.useInverseColors?"inverse":"";return r("button",{ref:i=>this.userButton=i,title:this.userFullName,class:`${t} ${this.isMenuOpen?"open":""}`,onClick:this.handleLoggedButtonClick},r("div",null,r("div",{class:"firstline"},r("z-icon",{class:t,name:"user-avatar-filled",height:16,width:16}),!this.isMobile&&r("div",{class:`userfullname ${t}`},this.userFullName),r("z-icon",{class:t,name:`caret-${i}-filled`,height:16,width:16})),!this.isMobile&&this.isMenuOpen&&r("div",{class:`useremail ${t}`},this.userEmail)))}getZLinkTextcolor(){return this.isMobile?this.useInverseColors?"black":"white":this.useInverseColors?"white":"black"}renderDropdownMenu(){const i=this.useInverseColors?"inverse":"";return this.isMenuOpen&&r("ul",{class:i},this.isMobile&&r("li",{class:i},r("div",{class:`userfullname ${i}`},this.userFullName),r("div",{class:`useremail ${i}`},this.userEmail)),this.linkArray&&this.linkArray.map((t=>r("li",{id:t.id,class:i},r("z-link",{textcolor:this.getZLinkTextcolor(),href:t.link,htmlid:t.id,target:t.target,icon:t.icon,onZLinkClick:this.emitDropdownMenuLinkClick},t.label)))))}render(){const i=this.logged&&this.isMenuOpen?"open":"",t=this.useInverseColors?"inverse":"";return r(o,{class:t},r("div",{ref:i=>this.divToResize=i,class:i},r("div",{class:`${t} ${i}`},this.logged?this.renderLoggedButton():this.renderGuestButton(),this.logged&&this.renderDropdownMenu())))}};n.style=":host{background-color:var(--gray900)}:host(.inverse){background-color:var(--color-white)}button{display:flex;width:100%;flex-direction:column;padding:0;border:none;margin:0;background-color:var(--gray900);cursor:pointer;letter-spacing:0.16px;white-space:nowrap}button.inverse{background-color:var(--color-white)}button div.firstline{display:flex;max-width:200px;align-items:center;justify-content:flex-end}button.open div.firstline{max-width:none}z-icon{padding:0 2px;fill:var(--color-white)}z-icon.inverse{fill:var(--gray900)}ul{position:absolute;left:0;width:100%;box-sizing:border-box;padding:calc(var(--space-unit) / 2) calc(var(--space-unit) * 2) 0 calc(var(--space-unit) * 2);margin:calc(var(--space-unit) * 1.5) 0 0 0;background-color:var(--gray900);font-family:var(--font-family-sans);font-size:14px;font-weight:var(--font-sb);letter-spacing:0.3px;line-height:20px}ul.inverse{background-color:var(--color-white)}ul>li{display:flex;justify-content:flex-end;padding:calc(var(--space-unit) * 1.5 - 1px) 0;border-bottom:var(--border-base) solid var(--gray700);margin:0;white-space:nowrap}ul>li.inverse{border-bottom-color:var(--gray400)}ul>li:first-child{flex-direction:column;align-items:end;padding-top:0;padding-bottom:calc(var(--space-unit) + 6px);border-top:none}ul>li:last-child{border-bottom:none;margin-bottom:0}#guestbutton{display:inline-flex;width:100%;min-width:32px;height:32px;box-sizing:border-box;flex-direction:row;align-items:center;justify-content:center;padding:0 calc(var(--space-unit) * 2);border-width:var(--border-size-medium);border-style:solid;border-color:var(--color-white);background-color:var(--color-white);border-radius:var(--border-radius);color:var(--gray800);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;vertical-align:middle}#guestbutton.inverse{border-color:var(--gray800);background-color:var(--gray800);color:var(--color-white)}.userfullname{overflow:hidden;width:100%;max-width:250px;padding:0;color:var(--color-white);font-family:var(--font-family-sans);font-size:16px;font-weight:var(--font-sb);letter-spacing:0;line-height:24px;text-align:right;text-overflow:ellipsis}.userfullname.inverse{color:var(--gray800)}.useremail{overflow:hidden;width:100%;color:var(--color-white);font-family:var(--font-family-sans);font-size:12px;font-weight:var(--font-rg);letter-spacing:0.32px;line-height:16px;text-align:right;text-overflow:ellipsis}.useremail.inverse{color:var(--gray800)}@media only screen and (min-width: 768px){:host{height:calc(var(--space-unit) * 4);background-color:var(--gray900)}:host(.inverse){background-color:var(--color-white)}:host>div{position:relative;top:50%;transform:translateY(-50%)}:host>div.open{top:auto;transform:none}:host>div>div{padding:0}:host>div>div.open{position:absolute;right:calc(var(--space-unit) * -1);padding:calc(var(--space-unit) / 2 + 1px) var(--space-unit) 0 var(--space-unit);margin-top:calc(var(--space-unit) / 2);background-color:var(--color-white);box-shadow:0 2px calc(var(--space-unit) * 0.5) 0 rgb(0 0 0 / 50%);transform:translate(0, -4px)}:host>div>div.inverse.open{background-color:var(--gray800)}button{display:flex;flex-flow:row nowrap;align-content:center;align-items:end;justify-content:flex-end}button.open{max-width:initial;padding-right:var(--space-unit);border-top:var(--border-size-small) solid var(--color-white);margin-left:var(--space-unit);background-color:var(--color-white);border-top-left-radius:calc(var(--space-unit) * 0.5);border-top-right-radius:calc(var(--space-unit) * 0.5)}button.open.inverse{border-top-color:var(--gray800);background-color:var(--gray800)}button:not(.open) z-icon{fill:var(--color-white)}button:not(.open) z-icon.inverse{fill:var(--gray800)}button.open z-icon{fill:var(--gray800)}button.open z-icon.inverse{fill:var(--color-white)}.userfullname{width:auto;padding:0 calc(var(--space-unit) - 6px) 0 calc(var(--space-unit) - 2px);font-family:var(--font-family-sans);font-size:14px;font-weight:var(--font-sb);letter-spacing:0.16px;line-height:20px}.userfullname.inverse{color:var(--gray800)}button.open div.userfullname{max-width:none;color:var(--gray800);text-overflow:clip}button.open div.userfullname.inverse{color:var(--color-white)}.useremail{box-sizing:border-box;padding-right:calc(var(--space-unit) * 3 - 2px)}button.open div.useremail{color:var(--gray800)}button.open div.useremail.inverse{color:var(--color-white)}ul{position:initial;left:initial;width:100%;padding:0;background-color:var(--color-white)}ul.inverse{border-bottom-color:var(--gray800);background-color:var(--gray800)}ul>li{border-bottom:var(--border-base) solid var(--gray400);margin:0 var(--space-unit);color:var(--gray800)}ul>li.inverse{color:var(--color-white)}ul>li:first-child{padding-top:calc(var(--space-unit) + 3px);padding-bottom:calc(var(--space-unit) + 5px);border-top:var(--border-base) solid var(--gray400)}}";export{n as z_user_dropdown}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as a,c as o,h as t,H as i}from"./p-d17ebc2f.js";const e=class{constructor(t){a(this,t),this.modalClose=o(this,"modalClose",7),this.modalHeaderActive=o(this,"modalHeaderActive",7),this.modalBackgroundClick=o(this,"modalBackgroundClick",7),this.closeButtonLabel="close modal"}emitModalClose(){this.modalClose.emit({modalid:this.modalid})}emitModalHeaderActive(){this.modalHeaderActive.emit({modalid:this.modalid})}emitBackgroundClick(){this.modalBackgroundClick.emit({modalid:this.modalid})}render(){return t(i,null,t("div",{class:"modal-container",id:this.modalid,role:"dialog"},t("header",{onClick:this.emitModalHeaderActive.bind(this)},t("div",null,this.modaltitle&&t("h1",null,this.modaltitle),this.modalsubtitle&&t("h2",null,this.modalsubtitle)),t("slot",{name:"modalCloseButton"},t("button",{"aria-label":this.closeButtonLabel,onClick:this.emitModalClose.bind(this)},t("z-icon",{name:"multiply-circle-filled"})))),t("div",{class:"modal-content"},t("slot",{name:"modalContent"}))),t("div",{class:"modal-background","data-action":"modalBackground","data-modal":this.modalid,onClick:this.emitBackgroundClick.bind(this)}))}};e.style=":host{position:fixed;z-index:1000;top:0;right:0;bottom:0;left:0;display:flex;width:100%;height:100%;flex-direction:row;justify-content:center;font-family:var(--font-family-sans);font-weight:var(--font-rg)}.modal-background{position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--gray900);opacity:0.7}.modal-container{z-index:1010;display:flex;overflow:-moz-scrollbars-none;overflow:hidden;width:100%;height:100vh;flex-direction:column}.modal-container>header{display:flex;flex-flow:row nowrap;align-items:flex-start;justify-content:flex-start;padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2);background:var(--color-surface02)}.modal-container>header button{padding:0;border:none;margin:0;margin-left:auto;background:transparent;cursor:pointer}.modal-container>header z-icon{--z-icon-width:calc(var(--space-unit) * 2.5);--z-icon-height:calc(var(--space-unit) * 2.5);display:flex;fill:var(--color-icon01)}.modal-container>header>div{display:flex;width:100%;flex-direction:column;margin-right:calc(var(--space-unit) * 2)}.modal-container>header h1,.modal-container>header h2{padding:0;margin:0;color:var(--color-text01);font-weight:var(--font-rg)}.modal-container>header h1{font-size:var(--font-size-5);letter-spacing:0;line-height:1.4}.modal-container>header h2{font-size:var(--font-size-3);letter-spacing:0;line-height:1.5}.modal-container>header>div *:empty{display:none}.modal-container>header h1+h2{margin-top:calc(var(--space-unit) * 0.5)}.modal-container>.modal-content{overflow:auto;flex:1 auto;background:var(--color-surface01);overflow-x:hidden}.modal-container .modal-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)}.modal-container .modal-content::-webkit-scrollbar-track{background-color:transparent}.modal-container .modal-content::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}.modal-container .modal-content::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}.modal-container .modal-content{scrollbar-color:var(--color-primary01) transparent}@media only screen and (min-width: 768px){.modal-container{position:fixed;top:calc(var(--space-unit) * 6);left:50%;width:auto;min-width:calc(var(--space-unit) * 40);height:auto;min-height:calc(var(--space-unit) * 40);max-height:calc(100vh - calc(var(--space-unit) * 6 * 2));border-radius:var(--border-radius);transform:translateX(-50%)}.modal-container>header z-icon{--z-icon-width:calc(var(--space-unit) * 3);--z-icon-height:calc(var(--space-unit) * 3)}}@media only screen and (min-width: 768px) and (max-width: 1151px){.modal-container>header{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 3)}}@media only screen and (min-width: 1152px){.modal-container>header{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 4)}.modal-container>header h1{font-size:var(--font-size-6);letter-spacing:0;line-height:1.33}.modal-container>header h2{font-size:var(--font-size-4);letter-spacing:0;line-height:1.5}.modal-container>header h1+h2{margin-top:0}}";export{e as z_modal}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as e,h as a}from"./p-d17ebc2f.js";import{K as r}from"./p-a23e9115.js";import{a as i,h as t,b as n}from"./p-cd43f80d.js";import"./p-d69e14fb.js";const o=class{constructor(a){e(this,a),this.ismenuopen=!1,this.handleToggle=this.handleToggle.bind(this),this.handleFocus=this.handleFocus.bind(this)}componentWillRender(){this.linkarray="string"==typeof this.menucontent?JSON.parse(this.menucontent):this.menucontent}renderMenuOpen(){if(this.ismenuopen)return a("ul",null,this.linkarray.map((e=>a("li",null,a("z-link",{htmlid:e.id,href:e.link,icon:e.icon},e.label)))))}renderButtonMenu(){return a("span",{class:"arrow"},a("z-icon",{name:"caret-down",width:14,height:14}))}retriveMenuClass(){if(this.ismenuopen)return"menu-opened"}handleToggle(){this.ismenuopen=!this.ismenuopen}handleFocus(e){e instanceof KeyboardEvent&&e.keyCode!==r.TAB||i(n()).find((e=>"z-menu-dropdown"===e.nodeName.toLowerCase()))||(document.removeEventListener("click",this.handleFocus),document.removeEventListener("keyup",this.handleFocus),this.ismenuopen=!1)}render(){return a("a",{class:this.retriveMenuClass(),role:"button",tabindex:"0",onFocus:()=>{document.addEventListener("click",this.handleFocus),document.addEventListener("keyup",this.handleFocus)},onKeyUp:e=>t(e,this.handleToggle)},a("div",{class:"container",onClick:()=>this.handleToggle()},a("span",{class:"user-wrapper"},a("z-icon",{name:"user-avatar",width:14,height:14}),a("span",{class:"user"},this.nomeutente)),this.renderButtonMenu()),this.renderMenuOpen())}};o.style=":host{width:inherit;height:32px;font-family:var(--dashboard-font);font-size:12px;font-weight:var(--font-sb);letter-spacing:0.17px}a,a:visited,a:active{color:inherit;text-decoration:none}:host>a{display:block;border:var(--border-size-small) solid transparent;background:var(--bg-grey-050);border-radius:var(--border-radius);color:var(--text-grey-800);outline:none}:host>a::-moz-focus-inner{border:0}:host>a:hover,:host>a.menu-opened:hover{color:var(--myz-blue-dark);fill:var(--myz-blue-dark)}:host>a:focus{border:var(--border-size-small) solid var(--myz-blue);box-shadow:0 0 2px 2px var(--myz-blue-light);color:var(--myz-blue);fill:var(--myz-blue)}:host>a:active{border:var(--border-size-small) solid 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)}div.container{position:relative;display:flex;height:32px;align-items:center;justify-content:space-between;padding:0 var(--basex1)}div.container>span.user-wrapper{display:flex}div.container>span.user-wrapper>span.user{overflow:hidden;width:30px;padding:0 var(--basex1);cursor:pointer;text-overflow:ellipsis;white-space:nowrap}div.container>span.arrow{display:flex;align-items:center;justify-content:center}div.container>span.arrow>z-icon{transform:rotate(360deg);transition:all 200ms linear}ul{padding:0 calc(var(--space-unit) * 2);margin:0;list-style:none}li{display:flex;width:max-content;height:var(--basex3);align-items:center;padding:calc(var(--space-unit) / 4) 0}.menu-opened{position:inherit;width:auto !important;min-width:147px;padding-bottom:calc(var(--space-unit) * 2)}.menu-opened a,.menu-opened a:active,.menu-opened a:visited{color:var(--myz-blue);fill:var(--myz-blue)}.menu-opened a:hover{color:var(--myz-blue-dark);fill:var(--myz-blue-dark)}.menu-opened>div.container{margin-bottom:var(--basex1)}.menu-opened>div.container>span.user-wrapper>span.user{width:auto}.menu-opened>div.container>span.arrow>z-icon{transform:rotate(180deg);transition:all 200ms linear}@media only screen and (min-width: 1152px){:host>a{width:147px;padding:0 calc(var(--space-unit) / 4)}:host>a.menu-opened{width:147px;padding-bottom:calc(var(--space-unit) * 2)}div.container>span.user-wrapper>span.user{width:80px}}";export{o as z_menu_dropdown}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as e,c as t,h as a,H as l}from"./p-d17ebc2f.js";import{Z as d}from"./p-a23e9115.js";const r=class{constructor(a){e(this,a),this.expand=t(this,"expand",7),this.expandedType=d.NONE,this.expanded=!1}emitOnExpand(){this.expand.emit({expanded:this.expanded})}handleExpand(){this.expanded=!this.expanded,this.emitOnExpand()}renderExpandButton(){return a("z-table-cell",{style:{borderRight:"none"}},this.expandedType==d.EXPANDABLE?a("z-icon",{name:this.expanded?"minus-circled":"plus-circled"}):a("div",{class:"z-icon-placeholder"}))}render(){return a(l,{role:"row",expanded:this.expanded,onClick:e=>{this.expandedType===d.EXPANDABLE&&"Z-CONTEXTUAL-MENU"!==e.target.nodeName&&this.handleExpand()}},this.expandedType!==d.NONE&&this.renderExpandButton(),a("slot",null))}};r.style='z-table-row{display:table-row;font-family:var(--font-family-sans)}z-table-row[expanded-type="expandable"]:hover{cursor:pointer}z-table-row[expanded-type="expandable"]>z-table-cell:first-child,z-table-row[expanded-type="padding"]>z-table-cell:first-child{--z-icon-width:16px;--z-icon-height:16px;width:24px;box-sizing:border-box;padding-right:0;padding-left:16px;fill:var(--gray800);text-align:center;user-select:none}.z-icon-placeholder{width:24px;padding-right:0}z-table-row[expanded-type="expandable"]>z-table-cell:nth-child(2),z-table-row[expanded-type="padding"]>z-table-cell:nth-child(2){padding-left:8px}z-table-row[expanded-type]:hover>z-table-cell:first-child{fill:var(--myz-blue-dark)}z-table-row[expanded]>z-table-cell{border-bottom:none;background-color:var(--gray50)}z-table-row[expanded]+z-table-expanded-row{display:table-row}';export{r as z_table_row}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as t,c as i,h as o,H as s}from"./p-d17ebc2f.js";import{T as L}from"./p-a23e9115.js";const e=class{constructor(o){t(this,o),this.appButtonClick=i(this,"appButtonClick",7),this.theme=L.DARK,this.isopen=!1,this.emitAppButtonClick=this.emitAppButtonClick.bind(this)}emitAppButtonClick(){this.isopen=!this.isopen,this.appButtonClick.emit({isopen:this.isopen})}render(){return o("button",{title:"app-switcher",onClick:()=>this.emitAppButtonClick()},o("z-icon",{name:"app-switcher",class:this.theme}))}};e.style=":host{font-family:var(--dashboard-font);font-weight:var(--font-rg)}button{display:flex;align-content:center;justify-content:center;padding:0;border:none;background-color:transparent}button>z-icon{color:var(--bg-white);fill:currentcolor}button>z-icon.light{color:var(--bg-grey-900);fill:currentcolor}";const l=class{constructor(i){t(this,i)}render(){const t={};return this.width&&(t.width=t["max-width"]=`${this.width}px`),this.height&&(t.height=t["max-height"]=`${this.height}px`),o(s,{style:t,class:{mobile:!!this.mobileLogo}},this.link?o("a",{href:this.link,target:this.targetBlank?"_blank":"_self"},o("img",{alt:this.imageAlt})):o("img",{alt:this.imageAlt}))}};l.style=":host{display:inline-block;width:255px;height:64px;vertical-align:top}img{display:block;width:100%;height:100%;margin:auto;content:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='255px' height='64px' viewBox='0 0 255 64'%3E%3Cg id='Logo/Zanichelli/Centered-(reworked)' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Group'%3E%3Cpolygon id='Background' fill='%23E2001A' points='1.70530257e-13 64 254.39 64 254.39 0 1.70530257e-13 0'%3E%3C/polygon%3E%3Cpath d='M233.36,51.3553859 L242.390252,51.3553859 L242.390252,12.6427292 L233.36,12.6427292 L233.36,51.3553859 Z M211.120346,51.3553859 L230.477617,51.3553859 L230.477617,44.5040053 L220.685891,44.5040053 L220.685891,12.6427292 L211.120346,12.6427292 L211.120346,51.3553859 Z M188.880124,51.3553859 L208.23551,51.3553859 L208.23551,44.5040053 L198.445669,44.5040053 L198.445669,12.6427292 L188.880124,12.6427292 L188.880124,51.3553859 Z M165.354444,12.6427292 L165.354444,51.3553859 L185.999058,51.3553859 L185.999058,44.5021204 L175.027425,44.5021204 L175.027425,35.1778343 L185.377062,35.1778343 L185.377062,28.2699086 L175.027425,28.2699086 L175.027425,19.4978796 L185.999058,19.4978796 L185.999058,12.6427292 L165.354444,12.6427292 Z M136.666196,51.3553859 L146.239281,51.3553859 L146.239281,35.1778343 L152.902178,35.1778343 L152.902178,51.3553859 L162.473377,51.3553859 L162.473377,12.6427292 L152.902178,12.6427292 L152.902178,28.2717934 L146.239281,28.2717934 L146.239281,12.6427292 L136.666196,12.6427292 L136.666196,51.3553859 Z M96.064744,51.3553859 L105.098765,51.3553859 L105.098765,12.6427292 L96.064744,12.6427292 L96.064744,51.3553859 Z M53.2364527,36.5160682 L50.6824993,19.7429083 L48.0757704,36.5160682 L53.2364527,36.5160682 Z M65.4935444,51.3553859 L56.2710395,51.3553859 L54.9441146,42.5286966 L47.7101121,42.5286966 L46.3304118,51.3553859 L37.1060221,51.3553859 L45.0053718,12.6427292 L57.5960795,12.6427292 L65.4935444,51.3553859 Z M85.0468382,37.7581755 L76.7969089,12.6427292 L67.3764961,12.6427292 L67.3764961,51.3553859 L75.4040147,51.3553859 L75.4040147,26.132504 L83.5955141,51.3553859 L93.1855622,51.3553859 L93.1855622,12.6427292 L85.0468382,12.6427292 L85.0468382,37.7581755 Z M107.977948,32 C107.977948,34.5200264 107.977948,36.7893695 108.187165,39.1246819 C108.396382,41.4713034 108.818585,43.6878711 109.678071,45.6009801 C111.423429,49.487513 114.932995,52 121.708982,52 C129.508435,52 133.787014,48.4753558 133.787014,38.0220526 L133.787014,37.5640373 L124.937707,37.5640373 L124.922628,38.0050891 C124.894356,38.7571388 124.884931,39.6185091 124.826501,40.4855339 C124.769956,41.3431345 124.66629,42.1875412 124.460843,42.9301668 C124.048064,44.3965696 123.279051,45.3559514 121.708982,45.3559514 C117.743286,45.3559514 117.057205,42.0574875 117.057205,32 C117.057205,21.9425125 117.743286,18.6440486 121.708982,18.6440486 C123.605127,18.6440486 124.547546,20.0030157 124.547546,25.1806616 L124.547546,25.6424465 L133.344077,25.6424465 L133.361041,25.1995099 C133.689003,16.7855998 130.235982,12 121.708982,12 C114.934879,12 111.427199,14.4823297 109.678071,18.3594383 C108.818585,20.265008 108.396382,22.4778061 108.187165,24.830082 C107.977948,27.1710489 107.977948,29.4554707 107.977948,32 L107.977948,32 Z M34.9007634,12.6446141 L34.9007634,20.3196683 L21.6051268,44.5040053 L35.2268401,44.5040053 L35.2268401,51.3553859 L12,51.3553859 L12,43.7915371 L25.2975214,19.4997644 L13.683159,19.4997644 L13.683159,12.6446141 L34.9007634,12.6446141 Z' id='Logotipo-(reworked)' fill='%23FFFFFF'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E\")}a{display:block;width:100%;height:100%}:host(.mobile){width:31px;height:40px}:host(.mobile) img{content:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31px' height='40px' viewBox='0 0 31 40'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Topbar/Mobile/Logged' transform='translate(-16.000000, -4.000000)'%3E%3Cg id='Group' transform='translate(16.000000, 4.000000)'%3E%3Cpolygon id='Fill-1' fill='%23E2001A' points='0 40 30.625 40 30.625 0 0 0'%3E%3C/polygon%3E%3Cpolygon id='Fill-2' fill='%23FEFEFE' points='8.17111587 6.20689655 23.4311708 6.20689655 23.4311708 11.671267 13.8691261 28.9163861 23.6647727 28.9163861 23.6647727 33.7931034 6.96022727 33.7931034 6.96022727 28.408218 16.522272 11.0831673 8.17111587 11.0831673'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E\")}";export{e as z_app_switcher,l as z_logo}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r,c as o,h as e}from"./p-d17ebc2f.js";const a=class{constructor(e){r(this,e),this.fileDropped=o(this,"fileDropped",7)}fileDroppedHandler(r){this.fileDropped.emit(r)}renderOnDragOverMessage(){return e("div",{class:"dragover-container"},e("div",{class:"dragover-message"},e("z-body",{variant:"semibold",level:2},"Rilascia i file in questa area per allegarli.")))}render(){return e("div",{tabIndex:0,ref:r=>this.dragDropContainer=r,class:"dragdrop",onDragOver:r=>{r.preventDefault(),this.dragDropContainer.classList.add("dragover")},onDragLeave:()=>{this.dragDropContainer.classList.remove("dragover")},onDrop:r=>{r.preventDefault(),r.dataTransfer.files.length&&(this.dragDropContainer.classList.remove("dragover"),this.fileDroppedHandler(r.dataTransfer.files))}},this.renderOnDragOverMessage(),e("slot",null))}};a.style=":host{margin-top:calc(var(--space-unit) * 3);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>.dragdrop{position:relative;display:flex;height:228px;flex-direction:column;border-color:var(--color-surface04);background-color:var(--color-surface02);background-image:url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='2' ry='2' stroke='%23CACCCEFF' stroke-width='2' stroke-dasharray='15%2c 10%2c 14%2c 11' stroke-dashoffset='3' stroke-linecap='square'/%3e%3c/svg%3e\");border-radius:2px;color:var(--color-text01)}:host>.dragdrop.dragover *{pointer-events:none}:host>.dragdrop .dragover-container{position:absolute;z-index:10;top:0;left:0;display:none;width:100%;height:100%;background-color:var(--color-primary03);box-shadow:var(--shadow-focus-primary)}:host>.dragdrop .dragover-container .dragover-message{padding:10px 28px;background-color:var(--color-link-primary);color:var(--color-text04)}:host>.dragdrop.dragover .dragover-container{display:flex;align-items:center;justify-content:center}";const t=class{constructor(o){r(this,o),this.variant="regular"}render(){return e("z-typography",{tabIndex:0,component:this.component||`h${this.level}`,level:`h${this.level}`,variant:this.variant},e("slot",null))}};export{a as z_dragdrop_area,t as z_heading}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as a,h as n,c as t,H as o,g as i}from"./p-d17ebc2f.js";import{I as s}from"./p-b2d16b41.js";import{O as r,u as c}from"./p-a23e9115.js";const e=class{constructor(n){a(this,n)}selectPathOrPolygon(a){return(null==a?void 0:a.startsWith("M"))?n("path",{d:s[this.name]}):n("polygon",{points:s[this.name]})}render(){return n("svg",{viewBox:"0 0 1000 1000",width:this.width,height:this.height,id:this.iconid,fill:this.fill?`var(--${this.fill})`:""},this.selectPathOrPolygon(s[this.name]))}};e.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(n){a(this,n),this.canvasOpenStatusChanged=t(this,"canvasOpenStatusChanged",7),this.variant=r.PUSHCONTENT,this.open=!1,this.transitiondirection=c.LEFT}componentWillLoad(){this.handleOpenStatus()}onOpenChanged(){this.handleOpenStatus(),this.canvasOpenStatusChanged.emit(this.open)}handleOpenStatus(){this.open?(this.hostElement.style.opacity="0",this.hostElement.style.display="flex"):this.variant===r.PUSHCONTENT&&(this.hostElement.style.display="none",document.body.style.overflowX="hidden")}handleAnimationEnd(){this.hostElement.hasAttribute("open")?this.hostElement.querySelector(".canvas-content").focus():this.variant===r.OVERLAY&&(this.hostElement.style.display="none",document.body.style.overflowX="initial")}handleAnimationStart(){this.hostElement.hasAttribute("open")&&(this.hostElement.style.opacity="1")}render(){return n(o,null,n("div",{class:"canvas-container",onAnimationEnd:()=>this.handleAnimationEnd(),onAnimationStart:()=>this.handleAnimationStart()},n("div",{class:"canvas-content"},n("slot",{name:"canvasContent"}))),n("div",{class:"canvas-background","data-action":"canvasBackground",onClick:()=>this.open=!1}))}get hostElement(){return i(this)}static get watchers(){return{open:["onOpenChanged"]}}};f.style='.sc-z-offcanvas-h{--z-offcanvas--container-width:375px;--z-offcanvas--top-space:0;display:none;min-width:100%;height:100%;justify-content:end;font-family:var(--font-family-sans);font-weight:var(--font-rg)}.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);transform:translateX(100%)}@keyframes enter-right{from{transform:translateX(100%)}to{transform:translateX(0)}}[open].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{animation-duration:0.4s;animation-name:enter-right;animation-timing-function:ease-out;transform:translateX(0)}@keyframes exit-right{from{transform:translateX(0)}to{transform:translateX(100%)}}.sc-z-offcanvas-h:not([open])[variant="overlay"]>.canvas-container.sc-z-offcanvas{animation-duration:0.4s;animation-name:exit-right;animation-timing-function:ease-out;transform:translateX(100%)}[variant="overlay"].sc-z-offcanvas-h{position:fixed;z-index:1000;top:var(--z-offcanvas--top-space);right:0;bottom:0;left:0;height:calc(100% - var(--z-offcanvas--top-space))}[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}[transitiondirection="right"].sc-z-offcanvas-h{justify-content:start}[transitiondirection="right"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{transform:translateX(-100%)}@keyframes enter-left{from{transform:translateX(-100%)}to{transform:translateX(0)}}[transitiondirection="right"][open].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{animation-duration:0.4s;animation-name:enter-left;animation-timing-function:ease-out;transform:translateX(0)}@keyframes exit-left{from{transform:translateX(0)}to{transform:translateX(-100%)}}.sc-z-offcanvas-h:not([open])[variant="overlay"][transitiondirection="right"]>.canvas-container.sc-z-offcanvas{animation-duration:0.4s;animation-name:exit-left;animation-timing-function:ease-out;transform:translateX(-100%)}.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}.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 (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)}@keyframes grow{from{width:0}to{width:max(var(--z-offcanvas--container-width), 375px)}}.sc-z-offcanvas-h:not([variant="overlay"])[open]{width:auto;animation-duration:0.4s;animation-name:grow;animation-timing-function:ease-out}}';export{e as z_icon,f 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.stucked=!1,this.observer=n&&new IntersectionObserver((([e])=>{this.stucked=!e.isIntersecting}),{threshold:.5}),this.openDrawer=this.openDrawer.bind(this),this.closeDrawer=this.closeDrawer.bind(this),this.collectMenuElements.bind(this)}emitStickingEvent(){this.sticking.emit(this.stucked)}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.stucked=!1,this.observer&&this.observer.unobserve(this.container)}onStucked(){this.scrollParent&&this.emitStickingEvent()}setMenuFloatingMode(){if(0===this.menuElements.length)return;const e=this.menuElements;for(let t=0,a=e.length;t<a;t++)e[t].open=!1,e[t].floating=!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.stucked&&a("div",{class:"heading-stucked"},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))))}openDrawer(){this.drawerOpen=!0}closeDrawer(){this.drawerOpen=!1}get hostElement(){return i(this)}static get watchers(){return{stuck:["onStuckMode"],stucked:["onStucked"],drawerOpen:["setMenuFloatingMode"]}}};o.style=':host{--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%;height:var(--app-header-height);flex-direction:column;flex-grow:0;flex-shrink:0;align-items:baseline;justify-content:flex-start;padding:calc(var(--space-unit) * 2) var(--grid-mobile-margin);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-stucked{position:fixed;z-index:20;top:var(--app-header-top-offset);left:0;display:flex;width:100%;max-width:100%;flex-direction:row;padding:var(--space-unit) var(--grid-mobile-margin);animation:slide-stucked-heading-in 250ms ease-out;background:var(--app-header-stucked-bg);box-shadow:var(--shadow-2);color:var(--app-header-stucked-text-color)}.heading-stucked .heading-title,.heading-stucked .heading-title>*,.heading-stucked .heading-title ::slotted([slot="stucked-title"]){display:block;overflow:hidden;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}.heading-stucked .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 only screen and (min-width: 768px){.heading-panel{padding:calc(var(--space-unit) * 3) var(--grid-tablet-margin)}.heading-stucked{padding-right:var(--grid-tablet-margin);padding-left:var(--grid-tablet-margin)}: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 only screen and (min-width: 1152px){.heading-panel,.heading-stucked{padding-right:var(--grid-desktop-margin);padding-left:var(--grid-desktop-margin)}:host(:not([flow="stack"])) .heading-panel{flex-flow:row wrap}::slotted([slot="title"]){margin-right:var(--grid-desktop-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 only screen and (min-width: 1366px){.heading-panel,.heading-stucked{padding-right:var(--grid-wide-margin);padding-left:var(--grid-wide-margin)}::slotted([slot="title"]){margin-right:var(--grid-wide-gutter);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-stucked-heading-in{0%{transform:translate3d(0, -100%, 0)}100%{transform:none}}';export{o as z_app_header}
|