@zanichelli/albe-web-components 6.5.0 → 6.5.2
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 +2153 -0
- package/dist/cjs/index-e3299e0a.js +14 -30
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/web-components-library.cjs.js +1 -1
- package/dist/cjs/z-app-switcher.cjs.entry.js +29 -0
- package/dist/cjs/z-combobox.cjs.entry.js +13 -10
- 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-offcanvas.cjs.entry.js +7 -1
- 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-combobox/index.js +14 -9
- package/dist/collection/components/inputs/z-input/styles.css +3 -0
- package/dist/collection/components/z-offcanvas/index.js +7 -1
- package/dist/collection/components/z-table/z-table-row/index.js +2 -2
- package/dist/esm/index-a2ca4b97.js +14 -30
- 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-switcher.entry.js +25 -0
- package/dist/esm/z-chip.entry.js +1 -1
- package/dist/esm/z-combobox.entry.js +14 -11
- 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-offcanvas.entry.js +7 -1
- 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/inputs/z-combobox/index.d.ts +2 -0
- package/dist/types/components/z-offcanvas/index.d.ts +1 -0
- package/dist/types/components.d.ts +2 -230
- package/dist/web-components-library/index.esm.js +1 -1
- 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-56d2b76d.entry.js +1 -0
- 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-cd43f80d.js → p-8ebe4adf.js} +1 -1
- package/{www/build/p-98c94e81.entry.js → dist/web-components-library/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/dist/web-components-library/{p-411cbcd6.entry.js → 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/dist/web-components-library/{p-8b960526.entry.js → 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/src-react/index.ts +1 -0
- package/www/build/index.esm.js +1 -1
- package/www/build/p-1674fd9c.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-8bf0844b.entry.js → p-53065788.entry.js} +1 -1
- package/www/build/p-56d2b76d.entry.js +1 -0
- 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-cd43f80d.js → p-8ebe4adf.js} +1 -1
- package/{dist/web-components-library/p-98c94e81.entry.js → www/build/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/www/build/{p-411cbcd6.entry.js → 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-8b960526.entry.js → 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 -1
- package/www/pages/file-upload.html +0 -33
- package/www/pages/notification.html +0 -33
- 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-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-4e8fd5be.entry.js +0 -1
- package/dist/web-components-library/p-547d3b1f.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-f20d1242.entry.js +0 -1
- package/www/build/p-13cf5e67.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-4e8fd5be.entry.js +0 -1
- package/www/build/p-547d3b1f.entry.js +0 -1
- package/www/build/p-682528b2.entry.js +0 -1
- 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-f20d1242.entry.js +0 -1
|
@@ -32,39 +32,6 @@
|
|
|
32
32
|
</head>
|
|
33
33
|
|
|
34
34
|
<body style="width: 100%; margin: 0; background-color: #f9f9f9">
|
|
35
|
-
<z-app-topbar hashtag="via crucis">
|
|
36
|
-
<z-logo
|
|
37
|
-
slot="logo"
|
|
38
|
-
width="138"
|
|
39
|
-
height="36"
|
|
40
|
-
imagealt="zanichelli-logo"
|
|
41
|
-
link="https://www.zanichelli.it"
|
|
42
|
-
targetblank
|
|
43
|
-
>
|
|
44
|
-
</z-logo>
|
|
45
|
-
<z-link
|
|
46
|
-
textcolor="white"
|
|
47
|
-
big
|
|
48
|
-
icon="support-filled"
|
|
49
|
-
slot="actions"
|
|
50
|
-
href="./pages/notification.html"
|
|
51
|
-
>Notification
|
|
52
|
-
</z-link>
|
|
53
|
-
<z-link
|
|
54
|
-
textcolor="white"
|
|
55
|
-
big
|
|
56
|
-
icon="shopping-cart-filled"
|
|
57
|
-
slot="actions"
|
|
58
|
-
href="#"
|
|
59
|
-
>Carrello</z-link
|
|
60
|
-
>
|
|
61
|
-
<z-user-dropdown
|
|
62
|
-
userfullname="docente di calabresi per italiani"
|
|
63
|
-
logged="false"
|
|
64
|
-
slot="login"
|
|
65
|
-
></z-user-dropdown>
|
|
66
|
-
<z-app-switcher slot="app-switcher"></z-app-switcher>
|
|
67
|
-
</z-app-topbar>
|
|
68
35
|
<div class="main-container">
|
|
69
36
|
<div style="margin: 10px">
|
|
70
37
|
<!-- <form action="https://api-catalogo.zanichelli.local/v3/file-upload" enctype="multipart/form-data" method="POST"> -->
|
|
@@ -32,39 +32,6 @@
|
|
|
32
32
|
</head>
|
|
33
33
|
|
|
34
34
|
<body style="width: 100%; margin: 0; background-color: #f9f9f9">
|
|
35
|
-
<z-app-topbar>
|
|
36
|
-
<z-logo
|
|
37
|
-
slot="logo"
|
|
38
|
-
width="138"
|
|
39
|
-
height="36"
|
|
40
|
-
image-alt="zanichelli-logo"
|
|
41
|
-
link="https://www.zanichelli.it"
|
|
42
|
-
target-blank
|
|
43
|
-
></z-logo>
|
|
44
|
-
<z-link
|
|
45
|
-
textcolor="white"
|
|
46
|
-
big
|
|
47
|
-
icon="support-filled"
|
|
48
|
-
slot="actions"
|
|
49
|
-
href="./pages/notification.html"
|
|
50
|
-
>Notification
|
|
51
|
-
</z-link>
|
|
52
|
-
<z-link
|
|
53
|
-
textcolor="white"
|
|
54
|
-
big
|
|
55
|
-
icon="shopping-cart-filled"
|
|
56
|
-
slot="actions"
|
|
57
|
-
href="#"
|
|
58
|
-
>Carrello</z-link
|
|
59
|
-
>
|
|
60
|
-
<z-user-dropdown
|
|
61
|
-
user-full-name="docente di calabresi per italiani"
|
|
62
|
-
logged="false"
|
|
63
|
-
slot="login"
|
|
64
|
-
>
|
|
65
|
-
</z-user-dropdown>
|
|
66
|
-
<z-app-switcher slot="app-switcher"></z-app-switcher>
|
|
67
|
-
</z-app-topbar>
|
|
68
35
|
<div class="main-container">
|
|
69
36
|
<z-toast-notification-list position="top-right">
|
|
70
37
|
<z-toast-notification
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
const index = require('./index-e3299e0a.js');
|
|
6
|
-
const index$1 = require('./index-fa110f37.js');
|
|
7
|
-
const breakpoints = require('./breakpoints-88c4fd6c.js');
|
|
8
|
-
|
|
9
|
-
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)}}";
|
|
10
|
-
|
|
11
|
-
const ZAppTopbar = class {
|
|
12
|
-
constructor(hostRef) {
|
|
13
|
-
index.registerInstance(this, hostRef);
|
|
14
|
-
/** theme variant, default 'dark' */
|
|
15
|
-
this.theme = index$1.ThemeVariant.DARK;
|
|
16
|
-
this.topbarLinks = [];
|
|
17
|
-
}
|
|
18
|
-
handleResize() {
|
|
19
|
-
this.isMobile = window.innerWidth <= breakpoints.mobileBreakpoint;
|
|
20
|
-
}
|
|
21
|
-
componentWillLoad() {
|
|
22
|
-
this.isMobile = window.screen.width <= breakpoints.mobileBreakpoint || window.innerWidth <= breakpoints.mobileBreakpoint;
|
|
23
|
-
}
|
|
24
|
-
componentWillRender() {
|
|
25
|
-
if (this.topbarContent) {
|
|
26
|
-
this.topbarLinks = typeof this.topbarContent === "string" ? JSON.parse(this.topbarContent) : this.topbarContent;
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
renderTopbarLinks() {
|
|
30
|
-
return this.topbarLinks.map((link) => (index.h("z-link", { htmlid: link.id, textcolor: this.theme === index$1.ThemeVariant.LIGHT ? "black" : "white", href: link.link, target: link.target, icon: this.isMobile ? link.icon : undefined }, !this.isMobile && link.label)));
|
|
31
|
-
}
|
|
32
|
-
render() {
|
|
33
|
-
return (index.h(index.Host, { class: {
|
|
34
|
-
[this.theme]: true,
|
|
35
|
-
"limited-width": !!this.contentMaxWidth,
|
|
36
|
-
} }, index.h("div", { id: "content-container", style: this.contentMaxWidth ? { "--mw": `${this.contentMaxWidth}px` } : {} }, index.h("div", { id: "left-panel", class: "content-panel" }, index.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()), index.h("div", { id: "right-panel", class: "content-panel" }, !this.isMobile && this.renderTopbarLinks(), this.showAppSwitcher && index.h("z-app-switcher", { theme: this.theme }), index.h("div", { id: "divider-container" }, index.h("z-divider", { orientation: index$1.DividerOrientation.VERTICAL, color: this.theme === index$1.ThemeVariant.LIGHT ? "gray800" : "color-white" })), index.h("slot", { name: "login" })))));
|
|
37
|
-
}
|
|
38
|
-
};
|
|
39
|
-
ZAppTopbar.style = stylesCss;
|
|
40
|
-
|
|
41
|
-
exports.z_app_topbar = ZAppTopbar;
|
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
const index = require('./index-e3299e0a.js');
|
|
6
|
-
|
|
7
|
-
const stylesCss = ":host{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}";
|
|
8
|
-
|
|
9
|
-
const ZDragdropArea = class {
|
|
10
|
-
constructor(hostRef) {
|
|
11
|
-
index.registerInstance(this, hostRef);
|
|
12
|
-
this.fileDropped = index.createEvent(this, "fileDropped", 7);
|
|
13
|
-
}
|
|
14
|
-
fileDroppedHandler(files) {
|
|
15
|
-
this.fileDropped.emit(files);
|
|
16
|
-
}
|
|
17
|
-
renderOnDragOverMessage() {
|
|
18
|
-
return (index.h("div", { class: "dragover-container" }, index.h("div", { class: "dragover-message" }, index.h("z-body", { variant: "semibold", level: 2 }, "Rilascia i file in questa area per allegarli."))));
|
|
19
|
-
}
|
|
20
|
-
render() {
|
|
21
|
-
return (index.h("div", { tabIndex: 0, ref: (val) => (this.dragDropContainer = val), class: "dragdrop", onDragOver: (e) => {
|
|
22
|
-
e.preventDefault();
|
|
23
|
-
this.dragDropContainer.classList.add("dragover");
|
|
24
|
-
}, onDragLeave: () => {
|
|
25
|
-
this.dragDropContainer.classList.remove("dragover");
|
|
26
|
-
}, onDrop: (e) => {
|
|
27
|
-
e.preventDefault();
|
|
28
|
-
if (e.dataTransfer.files.length) {
|
|
29
|
-
this.dragDropContainer.classList.remove("dragover");
|
|
30
|
-
this.fileDroppedHandler(e.dataTransfer.files);
|
|
31
|
-
}
|
|
32
|
-
} }, this.renderOnDragOverMessage(), index.h("slot", null)));
|
|
33
|
-
}
|
|
34
|
-
};
|
|
35
|
-
ZDragdropArea.style = stylesCss;
|
|
36
|
-
|
|
37
|
-
const ZHeading = class {
|
|
38
|
-
constructor(hostRef) {
|
|
39
|
-
index.registerInstance(this, hostRef);
|
|
40
|
-
/** Font weight variant */
|
|
41
|
-
this.variant = "regular";
|
|
42
|
-
}
|
|
43
|
-
render() {
|
|
44
|
-
return (index.h("z-typography", { tabIndex: 0, component: this.component || `h${this.level}`, level: `h${this.level}`, variant: this.variant }, index.h("slot", null)));
|
|
45
|
-
}
|
|
46
|
-
};
|
|
47
|
-
|
|
48
|
-
exports.z_dragdrop_area = ZDragdropArea;
|
|
49
|
-
exports.z_heading = ZHeading;
|
|
@@ -1,59 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
const index = require('./index-e3299e0a.js');
|
|
6
|
-
const index$1 = require('./index-fa110f37.js');
|
|
7
|
-
const utils = require('./utils-600bad93.js');
|
|
8
|
-
require('./breakpoints-88c4fd6c.js');
|
|
9
|
-
|
|
10
|
-
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}}";
|
|
11
|
-
|
|
12
|
-
const ZMenuDropdown = class {
|
|
13
|
-
constructor(hostRef) {
|
|
14
|
-
index.registerInstance(this, hostRef);
|
|
15
|
-
this.ismenuopen = false;
|
|
16
|
-
this.handleToggle = this.handleToggle.bind(this);
|
|
17
|
-
this.handleFocus = this.handleFocus.bind(this);
|
|
18
|
-
}
|
|
19
|
-
componentWillRender() {
|
|
20
|
-
this.linkarray = typeof this.menucontent === "string" ? JSON.parse(this.menucontent) : this.menucontent;
|
|
21
|
-
}
|
|
22
|
-
renderMenuOpen() {
|
|
23
|
-
if (this.ismenuopen) {
|
|
24
|
-
return (index.h("ul", null, this.linkarray.map((bean) => (index.h("li", null, index.h("z-link", { htmlid: bean.id, href: bean.link, icon: bean.icon }, bean.label))))));
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
renderButtonMenu() {
|
|
28
|
-
return (index.h("span", { class: "arrow" }, index.h("z-icon", { name: "caret-down", width: 14, height: 14 })));
|
|
29
|
-
}
|
|
30
|
-
retriveMenuClass() {
|
|
31
|
-
if (this.ismenuopen) {
|
|
32
|
-
return "menu-opened";
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
handleToggle() {
|
|
36
|
-
this.ismenuopen = !this.ismenuopen;
|
|
37
|
-
}
|
|
38
|
-
handleFocus(e) {
|
|
39
|
-
if (e instanceof KeyboardEvent && e.keyCode !== index$1.KeyboardKeyCode.TAB) {
|
|
40
|
-
return;
|
|
41
|
-
}
|
|
42
|
-
const tree = utils.getElementTree(utils.getClickedElement());
|
|
43
|
-
const menuParent = tree.find((elem) => elem.nodeName.toLowerCase() === "z-menu-dropdown");
|
|
44
|
-
if (!menuParent) {
|
|
45
|
-
document.removeEventListener("click", this.handleFocus);
|
|
46
|
-
document.removeEventListener("keyup", this.handleFocus);
|
|
47
|
-
this.ismenuopen = false;
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
render() {
|
|
51
|
-
return (index.h("a", { class: this.retriveMenuClass(), role: "button", tabindex: "0", onFocus: () => {
|
|
52
|
-
document.addEventListener("click", this.handleFocus);
|
|
53
|
-
document.addEventListener("keyup", this.handleFocus);
|
|
54
|
-
}, onKeyUp: (e) => utils.handleKeyboardSubmit(e, this.handleToggle) }, index.h("div", { class: "container", onClick: () => this.handleToggle() }, index.h("span", { class: "user-wrapper" }, index.h("z-icon", { name: "user-avatar", width: 14, height: 14 }), index.h("span", { class: "user" }, this.nomeutente)), this.renderButtonMenu()), this.renderMenuOpen()));
|
|
55
|
-
}
|
|
56
|
-
};
|
|
57
|
-
ZMenuDropdown.style = stylesCss;
|
|
58
|
-
|
|
59
|
-
exports.z_menu_dropdown = ZMenuDropdown;
|
|
@@ -1,84 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
const index = require('./index-e3299e0a.js');
|
|
6
|
-
const index$1 = require('./index-fa110f37.js');
|
|
7
|
-
|
|
8
|
-
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)}}";
|
|
9
|
-
|
|
10
|
-
const ZModalLogin = class {
|
|
11
|
-
constructor(hostRef) {
|
|
12
|
-
index.registerInstance(this, hostRef);
|
|
13
|
-
this.loginSubmit = index.createEvent(this, "loginSubmit", 7);
|
|
14
|
-
this.statusUpdate = index.createEvent(this, "statusUpdate", 7);
|
|
15
|
-
this.signupClick = index.createEvent(this, "signupClick", 7);
|
|
16
|
-
this.zainoDigitaleClick = index.createEvent(this, "zainoDigitaleClick", 7);
|
|
17
|
-
/** Login modal title */
|
|
18
|
-
this.heading = "Entra in MyZanichelli";
|
|
19
|
-
this.externalProviderCheck = false;
|
|
20
|
-
}
|
|
21
|
-
componentDidLoad() {
|
|
22
|
-
this.externalProviderCheck = !!this.hostElement.querySelectorAll('[slot="provider"]').length;
|
|
23
|
-
}
|
|
24
|
-
emitLoginSubmit() {
|
|
25
|
-
const usernameInput = this.hostElement.querySelector("z-input#username");
|
|
26
|
-
const passwordInput = this.hostElement.querySelector("z-input#password");
|
|
27
|
-
// INFO: slotted inputs
|
|
28
|
-
if (!usernameInput || !passwordInput) {
|
|
29
|
-
return;
|
|
30
|
-
}
|
|
31
|
-
let username = usernameInput.value;
|
|
32
|
-
const password = passwordInput.value;
|
|
33
|
-
if (!username || !password) {
|
|
34
|
-
this.status = index$1.InputStatus.ERROR;
|
|
35
|
-
return;
|
|
36
|
-
}
|
|
37
|
-
username = this.cleanUsername(username);
|
|
38
|
-
this.loginSubmit.emit({
|
|
39
|
-
username,
|
|
40
|
-
password,
|
|
41
|
-
originalUsername: usernameInput.value,
|
|
42
|
-
});
|
|
43
|
-
}
|
|
44
|
-
emitStatusUpdate(status) {
|
|
45
|
-
this.statusUpdate.emit(status);
|
|
46
|
-
}
|
|
47
|
-
emitSignupClick() {
|
|
48
|
-
this.signupClick.emit();
|
|
49
|
-
}
|
|
50
|
-
emitZainoDigitaleClick() {
|
|
51
|
-
this.zainoDigitaleClick.emit();
|
|
52
|
-
}
|
|
53
|
-
handleInputKeyUp(e) {
|
|
54
|
-
if (e.code !== "Enter") {
|
|
55
|
-
return;
|
|
56
|
-
}
|
|
57
|
-
this.emitLoginSubmit();
|
|
58
|
-
}
|
|
59
|
-
handleInputChange() {
|
|
60
|
-
this.status = null;
|
|
61
|
-
this.emitStatusUpdate(this.status);
|
|
62
|
-
}
|
|
63
|
-
cleanUsername(username) {
|
|
64
|
-
username = username.trim().toLowerCase();
|
|
65
|
-
const mobileRegex = /^[+]?[\s./0-9]*[(]?[0-9]{1,4}[)]?[(]?[0-9]{1,4}[)]?[-\s./0-9]*$/g;
|
|
66
|
-
if (mobileRegex.test(username)) {
|
|
67
|
-
username = username.replace(/[- .)(]/g, "");
|
|
68
|
-
if (/^[\d ]*$/.test(username)) {
|
|
69
|
-
username = "+39" + username;
|
|
70
|
-
}
|
|
71
|
-
}
|
|
72
|
-
return username;
|
|
73
|
-
}
|
|
74
|
-
renderZainoDigitaleButton() {
|
|
75
|
-
return (index.h("z-button", { variant: index$1.ButtonVariant.SECONDARY, onClick: () => this.emitZainoDigitaleClick(), class: "zainoDigitale" }, index.h("div", { class: "zd" }, index.h("svg", { width: "18px", height: "24px", viewBox: "0 0 18 24" }, index.h("g", { stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" }, index.h("g", { transform: "translate(-313.000000, -329.000000)", fill: "#E2001A", "fill-rule": "nonzero" }, index.h("g", { transform: "translate(25.000000, 191.000000)" }, index.h("g", null, index.h("g", { transform: "translate(0.000000, 100.000000)" }, index.h("g", null, index.h("g", { transform: "translate(276.000000, 28.000000)" }, index.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" }))))))))), index.h("span", null, "ZAINO DIGITALE"))));
|
|
76
|
-
}
|
|
77
|
-
render() {
|
|
78
|
-
return (index.h("z-modal", { modaltitle: this.heading }, index.h("div", { class: "wrapper", slot: "modalContent" }, index.h("form", { method: "post" }, index.h("div", { class: "username" }, index.h("slot", { name: "username" }, index.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() }))), index.h("div", { class: "password" }, index.h("slot", { name: "password" }, index.h("z-input", { id: "password", label: "password", placeholder: "Inserisci la tua password", type: index$1.InputType.PASSWORD, name: "password", autocomplete: "current-password", status: this.status, message: this.pwdmessage, onKeyUp: (e) => this.handleInputKeyUp(e), onInputChange: () => this.handleInputChange() }))), index.h("z-link", { class: "forget", href: this.forgotPasswordUrl }, "Password dimenticata?"), index.h("div", { class: "login" }, index.h("slot", { name: "login" }, index.h("z-button", { variant: index$1.ButtonVariant.PRIMARY, onClick: () => this.emitLoginSubmit() }, "Accedi")))), index.h("hr", null), index.h("z-body", { class: "signup", level: 4, variant: "semibold" }, "Non hai ancora un account?"), index.h("div", { class: "signup" }, index.h("slot", { name: "signup" }, index.h("z-button", { variant: index$1.ButtonVariant.SECONDARY, onClick: () => this.emitSignupClick() }, "Registrati"))), !this.externalProviderCheck && (index.h("div", { class: "providers" }, index.h("z-body", { class: "provider", level: 5, variant: "regular" }, "OPPURE ACCEDI CON:"), index.h("slot", { name: "provider" }, this.renderZainoDigitaleButton(), index.h("z-link", { icon: "informationsource", href: "https://www.zainodigitale.it/#/landing" }, "Cos'\u00E8 Zaino Digitale?")))))));
|
|
79
|
-
}
|
|
80
|
-
get hostElement() { return index.getElement(this); }
|
|
81
|
-
};
|
|
82
|
-
ZModalLogin.style = stylesCss;
|
|
83
|
-
|
|
84
|
-
exports.z_modal_login = ZModalLogin;
|
|
@@ -1,93 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
const index = require('./index-e3299e0a.js');
|
|
6
|
-
const breakpoints = require('./breakpoints-88c4fd6c.js');
|
|
7
|
-
|
|
8
|
-
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)}}";
|
|
9
|
-
|
|
10
|
-
const ZUserDropdown = class {
|
|
11
|
-
constructor(hostRef) {
|
|
12
|
-
index.registerInstance(this, hostRef);
|
|
13
|
-
this.userButtonClick = index.createEvent(this, "userButtonClick", 7);
|
|
14
|
-
this.dropdownMenuLinkClick = index.createEvent(this, "dropdownMenuLinkClick", 7);
|
|
15
|
-
/** if inner components colors are inverted, or not, default false */
|
|
16
|
-
this.useInverseColors = false;
|
|
17
|
-
this.isMenuOpen = false;
|
|
18
|
-
this.handleLoggedButtonClick = this.handleLoggedButtonClick.bind(this);
|
|
19
|
-
this.emitDropdownMenuLinkClick = this.emitDropdownMenuLinkClick.bind(this);
|
|
20
|
-
}
|
|
21
|
-
componentDidLoad() {
|
|
22
|
-
this.setMobileAndDivToResizeWidth();
|
|
23
|
-
}
|
|
24
|
-
componentWillUpdate() {
|
|
25
|
-
this.setMobileAndDivToResizeWidth();
|
|
26
|
-
}
|
|
27
|
-
componentWillRender() {
|
|
28
|
-
if (this.menuContent) {
|
|
29
|
-
this.linkArray = typeof this.menuContent === "string" ? JSON.parse(this.menuContent) : this.menuContent;
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
setMobileAndDivToResizeWidth() {
|
|
33
|
-
var _a;
|
|
34
|
-
if (this.divToResize) {
|
|
35
|
-
this.isMobile = window.screen.width <= breakpoints.mobileBreakpoint || window.innerWidth <= breakpoints.mobileBreakpoint;
|
|
36
|
-
if (this.logged && !this.isMobile && this.isMenuOpen) {
|
|
37
|
-
this.divToResize.style.width = `${(_a = this.userButton) === null || _a === void 0 ? void 0 : _a.offsetWidth}px`;
|
|
38
|
-
}
|
|
39
|
-
else {
|
|
40
|
-
this.divToResize.removeAttribute("style");
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
emitUserButtonClick() {
|
|
45
|
-
this.userButtonClick.emit(this.isMenuOpen);
|
|
46
|
-
}
|
|
47
|
-
emitDropdownMenuLinkClick(e) {
|
|
48
|
-
this.isMenuOpen = false;
|
|
49
|
-
this.dropdownMenuLinkClick.emit({ e, linkId: e.detail.linkId });
|
|
50
|
-
}
|
|
51
|
-
handleResize() {
|
|
52
|
-
this.isMobile = window.innerWidth <= breakpoints.mobileBreakpoint;
|
|
53
|
-
}
|
|
54
|
-
handleOrientationChange() {
|
|
55
|
-
this.isMobile = screen.width <= breakpoints.mobileBreakpoint;
|
|
56
|
-
}
|
|
57
|
-
handleClickOutside(e) {
|
|
58
|
-
if (e.target.nodeName !== "Z-USER-DROPDOWN") {
|
|
59
|
-
this.isMenuOpen = false;
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
handleLoggedButtonClick() {
|
|
63
|
-
this.isMenuOpen = !this.isMenuOpen;
|
|
64
|
-
this.emitUserButtonClick();
|
|
65
|
-
}
|
|
66
|
-
renderGuestButton() {
|
|
67
|
-
return (index.h("button", { id: "guestbutton", class: this.useInverseColors ? "inverse" : "", onClick: () => this.emitUserButtonClick() }, "ENTRA"));
|
|
68
|
-
}
|
|
69
|
-
renderLoggedButton() {
|
|
70
|
-
const direction = this.isMenuOpen ? "up" : "down";
|
|
71
|
-
const colorClass = this.useInverseColors ? "inverse" : "";
|
|
72
|
-
return (index.h("button", { ref: (el) => (this.userButton = el), title: this.userFullName, class: `${colorClass} ${this.isMenuOpen ? "open" : ""}`, onClick: this.handleLoggedButtonClick }, index.h("div", null, index.h("div", { class: "firstline" }, index.h("z-icon", { class: colorClass, name: "user-avatar-filled", height: 16, width: 16 }), !this.isMobile && index.h("div", { class: `userfullname ${colorClass}` }, this.userFullName), index.h("z-icon", { class: colorClass, name: `caret-${direction}-filled`, height: 16, width: 16 })), !this.isMobile && this.isMenuOpen && index.h("div", { class: `useremail ${colorClass}` }, this.userEmail))));
|
|
73
|
-
}
|
|
74
|
-
getZLinkTextcolor() {
|
|
75
|
-
if (this.isMobile) {
|
|
76
|
-
return this.useInverseColors ? "black" : "white";
|
|
77
|
-
}
|
|
78
|
-
return this.useInverseColors ? "white" : "black";
|
|
79
|
-
}
|
|
80
|
-
renderDropdownMenu() {
|
|
81
|
-
const colorClass = this.useInverseColors ? "inverse" : "";
|
|
82
|
-
return (this.isMenuOpen && (index.h("ul", { class: colorClass }, this.isMobile && (index.h("li", { class: colorClass }, index.h("div", { class: `userfullname ${colorClass}` }, this.userFullName), index.h("div", { class: `useremail ${colorClass}` }, this.userEmail))), this.linkArray &&
|
|
83
|
-
this.linkArray.map((link) => (index.h("li", { id: link.id, class: colorClass }, index.h("z-link", { textcolor: this.getZLinkTextcolor(), href: link.link, htmlid: link.id, target: link.target, icon: link.icon, onZLinkClick: this.emitDropdownMenuLinkClick }, link.label)))))));
|
|
84
|
-
}
|
|
85
|
-
render() {
|
|
86
|
-
const openClass = `${this.logged && this.isMenuOpen ? "open" : ""}`;
|
|
87
|
-
const colorClass = this.useInverseColors ? "inverse" : "";
|
|
88
|
-
return (index.h(index.Host, { class: colorClass }, index.h("div", { ref: (el) => (this.divToResize = el), class: openClass }, index.h("div", { class: `${colorClass} ${openClass}` }, this.logged ? this.renderLoggedButton() : this.renderGuestButton(), this.logged && this.renderDropdownMenu()))));
|
|
89
|
-
}
|
|
90
|
-
};
|
|
91
|
-
ZUserDropdown.style = stylesCss;
|
|
92
|
-
|
|
93
|
-
exports.z_user_dropdown = ZUserDropdown;
|