@zanichelli/albe-web-components 2.30.0-rc6 → 2.30.0-rc7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/web-components-library.cjs.js +1 -1
- package/dist/cjs/z-alert_66.cjs.entry.js +53 -43
- package/dist/collection/components/navigation/z-app-topbar/index.js +25 -32
- package/dist/collection/components/navigation/z-app-topbar/styles.css +6 -6
- package/dist/collection/components/navigation/z-user-dropdown/index.js +44 -44
- package/dist/collection/components/navigation/z-user-dropdown/styles.css +11 -13
- package/dist/collection/snowflakes/registro-table/z-registro-table/index.js +6 -1
- package/dist/collection/snowflakes/registro-table/z-registro-table/styles.css +5 -6
- package/dist/collection/snowflakes/registro-table/z-registro-table-empty-box/index.js +9 -4
- package/dist/esm/loader.js +1 -1
- package/dist/esm/web-components-library.js +1 -1
- package/dist/esm/z-alert_66.entry.js +53 -43
- package/dist/types/components/navigation/z-app-topbar/index.d.ts +6 -7
- package/dist/types/components/navigation/z-user-dropdown/index.d.ts +10 -10
- package/dist/types/components.d.ts +17 -17
- package/dist/types/snowflakes/registro-table/z-registro-table-empty-box/index.d.ts +5 -0
- package/dist/web-components-library/{p-a3ba52ce.entry.js → p-9cefa3bf.entry.js} +2 -2
- package/dist/web-components-library/web-components-library.esm.js +1 -1
- package/package.json +1 -1
- package/www/build/p-0b4eabaf.js +1 -0
- package/www/build/{p-a3ba52ce.entry.js → p-9cefa3bf.entry.js} +2 -2
- package/www/build/web-components-library.esm.js +1 -1
- package/www/index.html +3 -3
- package/www/pages/notification.html +1 -1
- package/www/build/p-a58cd1e0.js +0 -1
|
@@ -37,34 +37,34 @@ const ZAppSwitcher = class {
|
|
|
37
37
|
};
|
|
38
38
|
ZAppSwitcher.style = stylesCss$$;
|
|
39
39
|
|
|
40
|
-
const stylesCss$_ = ":host{display:block;position:sticky;box-sizing:border-box;top:0;height:calc(var(--space-unit) * 6);padding:calc(var(--space-unit) / 2) calc(var(--space-unit) * 2);border-radius:var(--border-radius
|
|
40
|
+
const stylesCss$_ = ":host{display:block;position:sticky;box-sizing:border-box;top:0;height:calc(var(--space-unit) * 6);padding:calc(var(--space-unit) / 2) calc(var(--space-unit) * 2);border-radius:var(--border-no-radius);background-color:var(--gray900);z-index:99}:host(.light){background-color:var(--color-white)}:host>div{display:flex;justify-content:space-between;align-items:center}:host(.limited-width) #content-container{margin:auto;max-width:var(--mw)}.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-weight:var(--font-sb);font-size:14px;line-height:20px;letter-spacing:0.3px}@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)}}";
|
|
41
41
|
|
|
42
42
|
const ZAppTopbar = class {
|
|
43
43
|
constructor(hostRef) {
|
|
44
44
|
registerInstance(this, hostRef);
|
|
45
45
|
/** theme variant, default 'dark' */
|
|
46
46
|
this.theme = ThemeVariant.dark;
|
|
47
|
-
this.
|
|
47
|
+
this.topbarLinks = [];
|
|
48
48
|
}
|
|
49
49
|
handleResize() {
|
|
50
|
-
this.
|
|
51
|
-
}
|
|
52
|
-
handleOrientationChange() {
|
|
53
|
-
this.ismobile = screen.width <= mobileBreakpoint;
|
|
50
|
+
this.isMobile = window.innerWidth <= mobileBreakpoint;
|
|
54
51
|
}
|
|
55
52
|
componentWillLoad() {
|
|
56
|
-
this.
|
|
53
|
+
this.isMobile = window.screen.width <= mobileBreakpoint || window.innerWidth <= mobileBreakpoint;
|
|
57
54
|
}
|
|
58
55
|
componentWillRender() {
|
|
59
|
-
if (this.
|
|
60
|
-
this.
|
|
56
|
+
if (this.topbarContent) {
|
|
57
|
+
this.topbarLinks = typeof this.topbarContent === "string" ? JSON.parse(this.topbarContent) : this.topbarContent;
|
|
61
58
|
}
|
|
62
59
|
}
|
|
63
60
|
renderTopbarLinks() {
|
|
64
|
-
return this.
|
|
61
|
+
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));
|
|
65
62
|
}
|
|
66
63
|
render() {
|
|
67
|
-
return (h(Host, { class:
|
|
64
|
+
return (h(Host, { class: {
|
|
65
|
+
[this.theme]: true,
|
|
66
|
+
"limited-width": !!this.contentMaxWidth
|
|
67
|
+
} }, h("div", { id: "content-container", style: this.contentMaxWidth ? { "--mw": `${this.contentMaxWidth}px` } : {} }, h("div", { id: "left-panel", class: "content-panel" }, h("z-logo", { 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" })))));
|
|
68
68
|
}
|
|
69
69
|
};
|
|
70
70
|
ZAppTopbar.style = stylesCss$_;
|
|
@@ -2583,7 +2583,7 @@ const ZPopover = class {
|
|
|
2583
2583
|
};
|
|
2584
2584
|
ZPopover.style = stylesCss$i;
|
|
2585
2585
|
|
|
2586
|
-
const stylesCss$h = "z-registro-table{overflow-x:auto;display:block;width:100%;font-family:var(--dashboard-font);font-weight:var(--font-rg);
|
|
2586
|
+
const stylesCss$h = "z-registro-table{overflow-x:auto;display:block;width:100%;font-family:var(--dashboard-font);font-weight:var(--font-rg);background-color:var(--color-white)}z-registro-table>div.table{display:table;width:100%;border-collapse:separate}z-registro-table>div.table-bordered>z-registro-table-body>z-registro-table-row>z-registro-table-cell:not(:last-child),z-registro-table>div.table-bordered>z-registro-table-head>z-registro-table-header-row>z-registro-table-header:not(:last-child){border-right:var(--border-size-small) solid var(--bg-grey-200)}z-registro-table>div>z-registro-table-body>z-registro-table-row[expandable]>z-registro-table-cell:first-child,z-registro-table>div>z-registro-table-head>z-registro-table-header-row[expandable]>z-registro-table-header:first-child{border-right:none}z-registro-table>div>z-registro-table-body>z-registro-table-row[expanded]>z-registro-table-cell{background-color:var(--gray50)}z-registro-table>div>z-registro-table-body>z-registro-table-row[expanded]+z-registro-table-expanded-row{border-bottom:1px solid var(--gray200)}z-registro-table>div.table-column-sticky>z-registro-table-body>z-registro-table-row>z-registro-table-cell:first-child,z-registro-table>div.table-column-sticky>z-registro-table-head>z-registro-table-header-row>z-registro-table-header:first-child{position:sticky;left:0;box-shadow:1px 0 4px -1px rgba(66, 69, 72, 0.4);z-index:1}z-registro-table>div.table-header-sticky>z-registro-table-head>z-registro-table-header-row>z-registro-table-header{position:sticky;top:0;box-shadow:0 2px 3px -3px rgba(66, 69, 72, 0.4)}z-registro-table>div.table-header-sticky>z-registro-table-head>z-registro-table-header-row>z-registro-table-header{z-index:2}z-registro-table>div.table-header-sticky>z-registro-table-head>z-registro-table-header-row>z-registro-table-header:first-child,z-registro-table>div.table-column-sticky>z-registro-table-head>z-registro-table-header-row>z-registro-table-header:first-child{z-index:5}z-registro-table-body{width:auto;background-color:var(--color-white)}z-registro-table-empty-box{display:flex;flex-direction:column;flex-grow:1;border-bottom:var(--border-size-small) solid var(--bg-grey-200)}z-registro-table-empty-box.bordered{border-left:var(--border-size-small) solid var(--bg-grey-200)}.error-message{margin-top:calc(var(--space-unit) * 2)}.table-content{display:flex;flex-direction:row;width:100%}.error-content{font-family:var(--dashboard-font);padding:calc(var(--space-unit) * 3);display:flex}.error-content>img{width:244px;height:188px;margin-right:calc(var(--space-unit) * 3)}@media only screen and (max-width: 768px){z-registro-table>div.table-empty{display:none}.error-content{display:flex;flex-direction:column}.error-content>img{width:auto;height:auto}.text{padding:calc(var(--space-unit) * 3) 0}}";
|
|
2587
2587
|
|
|
2588
2588
|
const ZRegistroTable = class {
|
|
2589
2589
|
constructor(hostRef) {
|
|
@@ -2614,8 +2614,13 @@ const ZRegistroTable = class {
|
|
|
2614
2614
|
this.isMobile = screen.width <= mobileBreakpoint;
|
|
2615
2615
|
}
|
|
2616
2616
|
componentWillLoad() {
|
|
2617
|
+
var _a;
|
|
2617
2618
|
this.isMobile = window.innerWidth <= mobileBreakpoint;
|
|
2618
|
-
|
|
2619
|
+
const tableBody = this.host.querySelector('[slot="table-body"]');
|
|
2620
|
+
this.hasTableBody = !!((_a = tableBody === null || tableBody === void 0 ? void 0 : tableBody.children) === null || _a === void 0 ? void 0 : _a.length);
|
|
2621
|
+
if (!!tableBody && !this.hasTableBody) {
|
|
2622
|
+
tableBody.remove();
|
|
2623
|
+
}
|
|
2619
2624
|
}
|
|
2620
2625
|
componentWillRender() {
|
|
2621
2626
|
this.host.setAttribute("role", "table");
|
|
@@ -2702,9 +2707,14 @@ const ZRegistroTableEmptyBox = class {
|
|
|
2702
2707
|
/** Sets message */
|
|
2703
2708
|
this.subtitle = "";
|
|
2704
2709
|
}
|
|
2710
|
+
componentWillLoad() {
|
|
2711
|
+
this.hasCta1Slot = !!this.hostElement.querySelector('[slot="cta1"]');
|
|
2712
|
+
this.hasCta2Slot = !!this.hostElement.querySelector('[slot="cta2"]');
|
|
2713
|
+
}
|
|
2705
2714
|
render() {
|
|
2706
|
-
return (h(Host, null, h("z-body", { level: 3, variant: "semibold" }, this.message), h("br", null), h("z-body", { level: 4, variant: "regular" }, this.subtitle), h("div", { class: "cta" }, h("slot", { name: "cta1" }), h("slot", { name: "cta2" }))));
|
|
2715
|
+
return (h(Host, null, h("z-body", { level: 3, variant: "semibold" }, this.message), h("br", null), !!this.subtitle && (h("z-body", { level: 4, variant: "regular" }, this.subtitle)), (!!this.hasCta1Slot || !!this.hasCta2Slot) && (h("div", { class: "cta" }, h("slot", { name: "cta1" }), h("slot", { name: "cta2" })))));
|
|
2707
2716
|
}
|
|
2717
|
+
get hostElement() { return getElement(this); }
|
|
2708
2718
|
};
|
|
2709
2719
|
ZRegistroTableEmptyBox.style = stylesCss$e;
|
|
2710
2720
|
|
|
@@ -3508,7 +3518,7 @@ const ZTypography = class {
|
|
|
3508
3518
|
};
|
|
3509
3519
|
ZTypography.style = stylesCss$1;
|
|
3510
3520
|
|
|
3511
|
-
const stylesCss = ":host{background-color:var(--bg-grey-900)}:host(.inverse){background-color:var(--bg-white)}button{cursor:pointer;display:flex;flex-direction:column;width:100%;margin:0;background-color:var(--bg-grey-900);border:none;padding:0;letter-spacing:0.16px;white-space:nowrap}button.inverse{background-color:var(--bg-white)}button div.firstline{display:flex;justify-content:flex-end;align-items:center;max-width:200px}button.open div.firstline{max-width:none}z-icon{padding:0 2px;fill:var(--text-white)}z-icon.inverse{fill:var(--bg-grey-900)}ul{position:absolute;left:0;padding:calc(var(--space-unit) / 2) calc(var(--space-unit) * 2) 0 calc(var(--space-unit) * 2);width:100%;margin:calc(var(--space-unit) * 1.5) 0 0 0;background-color:var(--bg-grey-900);font-family:var(--
|
|
3521
|
+
const stylesCss = ":host{background-color:var(--bg-grey-900)}:host(.inverse){background-color:var(--bg-white)}button{cursor:pointer;display:flex;flex-direction:column;width:100%;margin:0;background-color:var(--bg-grey-900);border:none;padding:0;letter-spacing:0.16px;white-space:nowrap}button.inverse{background-color:var(--bg-white)}button div.firstline{display:flex;justify-content:flex-end;align-items:center;max-width:200px}button.open div.firstline{max-width:none}z-icon{padding:0 2px;fill:var(--text-white)}z-icon.inverse{fill:var(--bg-grey-900)}ul{box-sizing:border-box;position:absolute;left:0;padding:calc(var(--space-unit) / 2) calc(var(--space-unit) * 2) 0 calc(var(--space-unit) * 2);width:100%;margin:calc(var(--space-unit) * 1.5) 0 0 0;background-color:var(--bg-grey-900);font-family:var(--font-family-sans);font-weight:var(--font-sb);font-size:14px;line-height:20px;letter-spacing:0.3px}ul.inverse{background-color:var(--bg-white)}ul>li{display:flex;justify-content:flex-end;white-space:nowrap;padding:calc(var(--space-unit) * 1.5 - 1px) 0;margin:0;border-bottom:var(--border-base) solid var(--bg-grey-700)}ul>li.inverse{border-bottom-color:var(--gray400)}ul>li:first-child{border-top:none;padding-top:0;padding-bottom:calc(var(--space-unit) + 6px);flex-direction:column;align-items:end}ul>li:last-child{border-bottom:none;margin-bottom:0}#guestbutton{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;width:100%;font-family:var(--font-family-sans);font-weight:var(--font-sb);font-size:14px;line-height:1;letter-spacing:0.3px;border-width:var(--border-size-medium);border-style:solid;border-radius:var(--border-radius);vertical-align:middle;text-transform:uppercase;text-decoration:none;cursor:pointer;outline:none;fill:currentColor;height:32px;min-width:32px;padding:0 calc(var(--space-unit) * 2);background-color:var(--bg-white);border-color:var(--bg-white);color:var(--text-grey-800)}#guestbutton.inverse{background-color:var(--bg-grey-800);border-color:var(--bg-grey-800);color:var(--text-white)}.userfullname{padding:0;overflow:hidden;max-width:250px;text-overflow:ellipsis;width:100%;color:var(--text-white);font-family:var(--font-family-sans);font-weight:var(--font-sb);font-size:16px;line-height:24px;letter-spacing:0;text-align:right}.userfullname.inverse{color:var(--text-grey-800)}.useremail{color:var(--text-white);font-family:var(--font-family-sans);font-weight:var(--font-rg);font-size:12px;line-height:16px;letter-spacing:0.32px;overflow:hidden;text-overflow:ellipsis;width:100%;text-align:right}.useremail.inverse{color:var(--text-grey-800)}@media only screen and (min-width: 768px){:host{height:calc(var(--space-unit) * 4);background-color:var(--bg-grey-900)}:host(.inverse){background-color:var(--bg-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);box-shadow:0px 2px calc(var(--space-unit) * .5) 0px rgba(0, 0, 0, 0.5);background-color:var(--bg-white);margin-top:calc(var(--space-unit) / 2);padding:calc(var(--space-unit) / 2 + 1px) var(--space-unit) 0 var(--space-unit);transform:translate(0, -4px)}:host>div>div.inverse.open{background-color:var(--bg-grey-800)}button{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-end;align-items:end;align-content:center}button.open{background-color:var(--bg-white);border-top:var(--border-size-small) solid var(--bg-white);border-top-left-radius:calc(var(--space-unit) * .5);border-top-right-radius:calc(var(--space-unit) * .5);max-width:initial;margin-left:var(--space-unit);padding-right:var(--space-unit)}button.open.inverse{border-top-color:var(--bg-grey-800);background-color:var(--bg-grey-800)}button:not(.open) z-icon{fill:var(--text-white)}button:not(.open) z-icon.inverse{fill:var(--text-grey-800)}button.open z-icon{fill:var(--text-grey-800)}button.open z-icon.inverse{fill:var(--text-white)}.userfullname{font-family:var(--font-family-sans);font-weight:var(--font-sb);font-size:14px;line-height:20px;letter-spacing:0.16px;padding:0 calc(var(--space-unit) - 6px) 0 calc(var(--space-unit) - 2px);width:auto}.userfullname.inverse{color:var(--text-grey-800)}button.open div.userfullname{color:var(--text-grey-800);max-width:none;text-overflow:clip}button.open div.userfullname.inverse{color:var(--text-white)}.useremail{padding-right:calc(var(--space-unit) * 3 - 2px);box-sizing:border-box}button.open div.useremail{color:var(--text-grey-800)}button.open div.useremail.inverse{color:var(--text-white)}ul{position:initial;left:initial;padding:0;width:100%;background-color:var(--bg-white)}ul.inverse{border-bottom-color:var(--bg-grey-800);background-color:var(--bg-grey-800)}ul>li{color:var(--text-grey-800);border-bottom:var(--border-base) solid var(--gray400);margin:0 var(--space-unit)}ul>li.inverse{color:var(--text-white)}ul>li:first-child{border-top:var(--border-base) solid var(--gray400);padding-top:calc(var(--space-unit) + 3px);padding-bottom:calc(var(--space-unit) + 5px)}}";
|
|
3512
3522
|
|
|
3513
3523
|
const ZUserDropdown = class {
|
|
3514
3524
|
constructor(hostRef) {
|
|
@@ -3516,8 +3526,8 @@ const ZUserDropdown = class {
|
|
|
3516
3526
|
this.userButtonClick = createEvent(this, "userButtonClick", 7);
|
|
3517
3527
|
this.dropdownMenuLinkClick = createEvent(this, "dropdownMenuLinkClick", 7);
|
|
3518
3528
|
/** if inner components colors are inverted, or not, default false */
|
|
3519
|
-
this.
|
|
3520
|
-
this.
|
|
3529
|
+
this.useInverseColors = false;
|
|
3530
|
+
this.isMenuOpen = false;
|
|
3521
3531
|
this.handleLoggedButtonClick = this.handleLoggedButtonClick.bind(this);
|
|
3522
3532
|
this.emitDropdownMenuLinkClick = this.emitDropdownMenuLinkClick.bind(this);
|
|
3523
3533
|
}
|
|
@@ -3528,69 +3538,69 @@ const ZUserDropdown = class {
|
|
|
3528
3538
|
this.setMobileAndDivToResizeWidth();
|
|
3529
3539
|
}
|
|
3530
3540
|
componentWillRender() {
|
|
3531
|
-
if (this.
|
|
3532
|
-
this.
|
|
3541
|
+
if (this.menuContent) {
|
|
3542
|
+
this.linkArray = typeof this.menuContent === "string" ? JSON.parse(this.menuContent) : this.menuContent;
|
|
3533
3543
|
}
|
|
3534
3544
|
}
|
|
3535
3545
|
setMobileAndDivToResizeWidth() {
|
|
3536
3546
|
var _a;
|
|
3537
|
-
if (this.
|
|
3538
|
-
this.
|
|
3539
|
-
if (this.logged && !this.
|
|
3540
|
-
this.
|
|
3547
|
+
if (this.divToResize) {
|
|
3548
|
+
this.isMobile = window.screen.width <= mobileBreakpoint || window.innerWidth <= mobileBreakpoint;
|
|
3549
|
+
if (this.logged && !this.isMobile && this.isMenuOpen) {
|
|
3550
|
+
this.divToResize.style.width = `${(_a = this.userButton) === null || _a === void 0 ? void 0 : _a.offsetWidth}px`;
|
|
3541
3551
|
}
|
|
3542
3552
|
else {
|
|
3543
|
-
this.
|
|
3553
|
+
this.divToResize.removeAttribute('style');
|
|
3544
3554
|
}
|
|
3545
3555
|
}
|
|
3546
3556
|
}
|
|
3547
3557
|
emitUserButtonClick() {
|
|
3548
|
-
this.userButtonClick.emit(this.
|
|
3558
|
+
this.userButtonClick.emit(this.isMenuOpen);
|
|
3549
3559
|
}
|
|
3550
3560
|
emitDropdownMenuLinkClick(e) {
|
|
3551
|
-
this.
|
|
3561
|
+
this.isMenuOpen = false;
|
|
3552
3562
|
this.dropdownMenuLinkClick.emit({ e, linkId: e.detail.linkId });
|
|
3553
3563
|
}
|
|
3554
3564
|
handleResize() {
|
|
3555
|
-
this.
|
|
3565
|
+
this.isMobile = window.innerWidth <= mobileBreakpoint;
|
|
3556
3566
|
}
|
|
3557
3567
|
handleOrientationChange() {
|
|
3558
|
-
this.
|
|
3568
|
+
this.isMobile = screen.width <= mobileBreakpoint;
|
|
3559
3569
|
}
|
|
3560
3570
|
handleClickOutside(e) {
|
|
3561
3571
|
if (e.target.nodeName !== "Z-USER-DROPDOWN") {
|
|
3562
|
-
this.
|
|
3572
|
+
this.isMenuOpen = false;
|
|
3563
3573
|
}
|
|
3564
3574
|
}
|
|
3565
3575
|
handleLoggedButtonClick() {
|
|
3566
|
-
this.
|
|
3576
|
+
this.isMenuOpen = !this.isMenuOpen;
|
|
3567
3577
|
this.emitUserButtonClick();
|
|
3568
3578
|
}
|
|
3569
3579
|
renderGuestButton() {
|
|
3570
|
-
return (h("button", { id: "guestbutton", class: this.
|
|
3580
|
+
return (h("button", { id: "guestbutton", class: this.useInverseColors ? "inverse" : "", onClick: () => this.emitUserButtonClick() }, "ENTRA"));
|
|
3571
3581
|
}
|
|
3572
3582
|
renderLoggedButton() {
|
|
3573
|
-
const direction = this.
|
|
3574
|
-
const colorClass = this.
|
|
3575
|
-
return (h("button", { ref: (el) => (this.
|
|
3583
|
+
const direction = this.isMenuOpen ? "up" : "down";
|
|
3584
|
+
const colorClass = this.useInverseColors ? "inverse" : "";
|
|
3585
|
+
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))));
|
|
3576
3586
|
}
|
|
3577
3587
|
getZLinkTextcolor() {
|
|
3578
|
-
if (this.
|
|
3579
|
-
return this.
|
|
3588
|
+
if (this.isMobile) {
|
|
3589
|
+
return this.useInverseColors ? "black" : "white";
|
|
3580
3590
|
}
|
|
3581
3591
|
else {
|
|
3582
|
-
return this.
|
|
3592
|
+
return this.useInverseColors ? "white" : "black";
|
|
3583
3593
|
}
|
|
3584
3594
|
}
|
|
3585
3595
|
renderDropdownMenu() {
|
|
3586
|
-
const colorClass = this.
|
|
3587
|
-
return (this.
|
|
3588
|
-
h("li", { class: colorClass }, h("div", { class: `userfullname ${colorClass}` }, this.
|
|
3596
|
+
const colorClass = this.useInverseColors ? "inverse" : "";
|
|
3597
|
+
return (this.isMenuOpen && (h("ul", { class: colorClass }, this.isMobile &&
|
|
3598
|
+
h("li", { class: colorClass }, h("div", { class: `userfullname ${colorClass}` }, this.userFullName), h("div", { class: `useremail ${colorClass}` }, this.userEmail)), this.linkArray && 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))))));
|
|
3589
3599
|
}
|
|
3590
3600
|
render() {
|
|
3591
|
-
const openClass = `${this.logged && this.
|
|
3592
|
-
const colorClass = this.
|
|
3593
|
-
return (h(Host, { class: colorClass }, h("div", { ref: (el) => (this.
|
|
3601
|
+
const openClass = `${this.logged && this.isMenuOpen ? "open" : ""}`;
|
|
3602
|
+
const colorClass = this.useInverseColors ? "inverse" : "";
|
|
3603
|
+
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()))));
|
|
3594
3604
|
}
|
|
3595
3605
|
};
|
|
3596
3606
|
ZUserDropdown.style = stylesCss;
|
|
@@ -3,17 +3,16 @@ export declare class ZAppTopbar {
|
|
|
3
3
|
/** theme variant, default 'dark' */
|
|
4
4
|
theme?: ThemeVariant;
|
|
5
5
|
/** maximum width of topbar content */
|
|
6
|
-
|
|
6
|
+
contentMaxWidth?: number;
|
|
7
7
|
/** JSON string or MenuItem array to define topbar links */
|
|
8
|
-
|
|
8
|
+
topbarContent?: string | MenuItem[];
|
|
9
9
|
/** link URL used by z-logo */
|
|
10
|
-
|
|
10
|
+
logoLink?: string;
|
|
11
11
|
/** add app-switcher */
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
private
|
|
12
|
+
showAppSwitcher: boolean;
|
|
13
|
+
isMobile: boolean;
|
|
14
|
+
private topbarLinks;
|
|
15
15
|
handleResize(): void;
|
|
16
|
-
handleOrientationChange(): void;
|
|
17
16
|
componentWillLoad(): void;
|
|
18
17
|
componentWillRender(): void;
|
|
19
18
|
renderTopbarLinks(): any[];
|
|
@@ -4,24 +4,24 @@ export declare class ZUserDropdown {
|
|
|
4
4
|
/** logged status flag */
|
|
5
5
|
logged?: boolean;
|
|
6
6
|
/** user full name */
|
|
7
|
-
|
|
7
|
+
userFullName?: string;
|
|
8
8
|
/** user email */
|
|
9
|
-
|
|
9
|
+
userEmail?: string;
|
|
10
10
|
/** Json stringified or array to fill menu dropdown */
|
|
11
|
-
|
|
11
|
+
menuContent?: string | MenuItem[];
|
|
12
12
|
/** if inner components colors are inverted, or not, default false */
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
private
|
|
17
|
-
private
|
|
18
|
-
private
|
|
13
|
+
useInverseColors?: boolean;
|
|
14
|
+
isMenuOpen: boolean;
|
|
15
|
+
isMobile: boolean;
|
|
16
|
+
private linkArray;
|
|
17
|
+
private userButton;
|
|
18
|
+
private divToResize;
|
|
19
19
|
constructor();
|
|
20
20
|
componentDidLoad(): void;
|
|
21
21
|
componentWillUpdate(): void;
|
|
22
22
|
componentWillRender(): void;
|
|
23
23
|
setMobileAndDivToResizeWidth(): void;
|
|
24
|
-
/** Emitted on enter or user Button click, returns
|
|
24
|
+
/** Emitted on enter or user Button click, returns isMenuOpen (bool) */
|
|
25
25
|
userButtonClick: EventEmitter;
|
|
26
26
|
emitUserButtonClick(): void;
|
|
27
27
|
/** Emitted on dropdown menu zlink click, returns event */
|
|
@@ -48,15 +48,15 @@ export namespace Components {
|
|
|
48
48
|
/**
|
|
49
49
|
* maximum width of topbar content
|
|
50
50
|
*/
|
|
51
|
-
"
|
|
51
|
+
"contentMaxWidth"?: number;
|
|
52
52
|
/**
|
|
53
53
|
* link URL used by z-logo
|
|
54
54
|
*/
|
|
55
|
-
"
|
|
55
|
+
"logoLink"?: string;
|
|
56
56
|
/**
|
|
57
57
|
* add app-switcher
|
|
58
58
|
*/
|
|
59
|
-
"
|
|
59
|
+
"showAppSwitcher": boolean;
|
|
60
60
|
/**
|
|
61
61
|
* theme variant, default 'dark'
|
|
62
62
|
*/
|
|
@@ -64,7 +64,7 @@ export namespace Components {
|
|
|
64
64
|
/**
|
|
65
65
|
* JSON string or MenuItem array to define topbar links
|
|
66
66
|
*/
|
|
67
|
-
"
|
|
67
|
+
"topbarContent"?: string | MenuItem[];
|
|
68
68
|
}
|
|
69
69
|
interface ZAvatar {
|
|
70
70
|
/**
|
|
@@ -1505,19 +1505,19 @@ export namespace Components {
|
|
|
1505
1505
|
/**
|
|
1506
1506
|
* Json stringified or array to fill menu dropdown
|
|
1507
1507
|
*/
|
|
1508
|
-
"
|
|
1508
|
+
"menuContent"?: string | MenuItem[];
|
|
1509
1509
|
/**
|
|
1510
1510
|
* if inner components colors are inverted, or not, default false
|
|
1511
1511
|
*/
|
|
1512
|
-
"
|
|
1512
|
+
"useInverseColors"?: boolean;
|
|
1513
1513
|
/**
|
|
1514
1514
|
* user email
|
|
1515
1515
|
*/
|
|
1516
|
-
"
|
|
1516
|
+
"userEmail"?: string;
|
|
1517
1517
|
/**
|
|
1518
1518
|
* user full name
|
|
1519
1519
|
*/
|
|
1520
|
-
"
|
|
1520
|
+
"userFullName"?: string;
|
|
1521
1521
|
}
|
|
1522
1522
|
}
|
|
1523
1523
|
declare global {
|
|
@@ -2176,15 +2176,15 @@ declare namespace LocalJSX {
|
|
|
2176
2176
|
/**
|
|
2177
2177
|
* maximum width of topbar content
|
|
2178
2178
|
*/
|
|
2179
|
-
"
|
|
2179
|
+
"contentMaxWidth"?: number;
|
|
2180
2180
|
/**
|
|
2181
2181
|
* link URL used by z-logo
|
|
2182
2182
|
*/
|
|
2183
|
-
"
|
|
2183
|
+
"logoLink"?: string;
|
|
2184
2184
|
/**
|
|
2185
2185
|
* add app-switcher
|
|
2186
2186
|
*/
|
|
2187
|
-
"
|
|
2187
|
+
"showAppSwitcher"?: boolean;
|
|
2188
2188
|
/**
|
|
2189
2189
|
* theme variant, default 'dark'
|
|
2190
2190
|
*/
|
|
@@ -2192,7 +2192,7 @@ declare namespace LocalJSX {
|
|
|
2192
2192
|
/**
|
|
2193
2193
|
* JSON string or MenuItem array to define topbar links
|
|
2194
2194
|
*/
|
|
2195
|
-
"
|
|
2195
|
+
"topbarContent"?: string | MenuItem[];
|
|
2196
2196
|
}
|
|
2197
2197
|
interface ZAvatar {
|
|
2198
2198
|
/**
|
|
@@ -3788,27 +3788,27 @@ declare namespace LocalJSX {
|
|
|
3788
3788
|
/**
|
|
3789
3789
|
* Json stringified or array to fill menu dropdown
|
|
3790
3790
|
*/
|
|
3791
|
-
"
|
|
3791
|
+
"menuContent"?: string | MenuItem[];
|
|
3792
3792
|
/**
|
|
3793
3793
|
* Emitted on dropdown menu zlink click, returns event
|
|
3794
3794
|
*/
|
|
3795
3795
|
"onDropdownMenuLinkClick"?: (event: CustomEvent<any>) => void;
|
|
3796
3796
|
/**
|
|
3797
|
-
* Emitted on enter or user Button click, returns
|
|
3797
|
+
* Emitted on enter or user Button click, returns isMenuOpen (bool)
|
|
3798
3798
|
*/
|
|
3799
3799
|
"onUserButtonClick"?: (event: CustomEvent<any>) => void;
|
|
3800
3800
|
/**
|
|
3801
3801
|
* if inner components colors are inverted, or not, default false
|
|
3802
3802
|
*/
|
|
3803
|
-
"
|
|
3803
|
+
"useInverseColors"?: boolean;
|
|
3804
3804
|
/**
|
|
3805
3805
|
* user email
|
|
3806
3806
|
*/
|
|
3807
|
-
"
|
|
3807
|
+
"userEmail"?: string;
|
|
3808
3808
|
/**
|
|
3809
3809
|
* user full name
|
|
3810
3810
|
*/
|
|
3811
|
-
"
|
|
3811
|
+
"userFullName"?: string;
|
|
3812
3812
|
}
|
|
3813
3813
|
interface IntrinsicElements {
|
|
3814
3814
|
"z-alert": ZAlert;
|
|
@@ -1,7 +1,12 @@
|
|
|
1
1
|
export declare class ZRegistroTableEmptyBox {
|
|
2
|
+
hostElement: HTMLElement;
|
|
2
3
|
/** Sets main title message*/
|
|
3
4
|
message?: string;
|
|
4
5
|
/** Sets message */
|
|
5
6
|
subtitle?: string;
|
|
7
|
+
/** Checks if cta1 or cta2 slots exist */
|
|
8
|
+
hasCta1Slot: boolean;
|
|
9
|
+
hasCta2Slot: boolean;
|
|
10
|
+
componentWillLoad(): void;
|
|
6
11
|
render(): any;
|
|
7
12
|
}
|