@zanichelli/albe-web-components 2.28.0 → 2.29.3
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 +55 -47
- package/dist/cjs/z-app-header.cjs.entry.js +1 -1
- package/dist/collection/components/logo/z-logo/index.js +1 -1
- package/dist/collection/components/navigation/z-app-header/styles.css +63 -44
- package/dist/collection/components/navigation/z-menu/styles.css +17 -13
- package/dist/collection/components/navigation/z-menu-section/styles.css +9 -3
- package/dist/collection/components/navigation/z-user-dropdown/index.js +82 -66
- package/dist/collection/components/navigation/z-user-dropdown/styles.css +198 -69
- 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 +55 -47
- package/dist/esm/z-app-header.entry.js +1 -1
- package/dist/types/components/logo/z-logo/index.d.ts +1 -1
- package/dist/types/components/navigation/z-user-dropdown/index.d.ts +11 -12
- package/dist/types/components.d.ts +14 -6
- package/dist/types/snowflakes/registro-table/z-registro-table-empty-box/index.d.ts +5 -0
- package/dist/web-components-library/{p-787b1b39.entry.js → p-427c5b9e.entry.js} +2 -2
- package/dist/web-components-library/p-6c3a77ef.entry.js +1 -0
- package/dist/web-components-library/web-components-library.esm.js +1 -1
- package/package.json +1 -1
- package/www/build/{p-787b1b39.entry.js → p-427c5b9e.entry.js} +2 -2
- package/www/build/p-6c3a77ef.entry.js +1 -0
- package/www/build/p-89b24792.js +122 -0
- package/www/build/web-components-library.esm.js +1 -1
- package/www/index.html +3 -8
- package/dist/web-components-library/p-ccf4d1e7.entry.js +0 -1
- package/www/build/p-3ea8117a.js +0 -122
- package/www/build/p-ccf4d1e7.entry.js +0 -1
|
@@ -1780,7 +1780,7 @@ const ZLogo = class {
|
|
|
1780
1780
|
};
|
|
1781
1781
|
ZLogo.style = stylesCss$B;
|
|
1782
1782
|
|
|
1783
|
-
const stylesCss$A = ":host,::slotted(*),*{box-sizing:border-box}:host{display:inline-flex;flex-direction:column;position:relative}::slotted(a){color:var(--color-text01);text-decoration:none}::slotted(*){font-family:var(--font-family-sans);font-weight:var(--font-rg)}
|
|
1783
|
+
const stylesCss$A = ":host,::slotted(*),*{box-sizing:border-box}:host{display:inline-flex;flex-direction:column;position:relative}::slotted(a){color:var(--color-text01);text-decoration:none}::slotted(*){font-family:var(--font-family-sans);font-weight:var(--font-rg)}.menu-label{margin:0;padding:0;color:inherit;background:transparent;border:0;border-radius:0;outline:none;text-align:left}button.menu-label{cursor:pointer}.menu-label:focus-within{z-index:1;box-shadow:var(--shadow-focus-primary);margin-right:calc(var(--space-unit) * -0.5);margin-left:calc(var(--space-unit) * -0.5);padding-right:calc(var(--space-unit) * 0.5);padding-left:calc(var(--space-unit) * 0.5)}.menu-label .menu-label-content{display:flex;align-items:center;padding:var(--space-unit) 0;border-bottom:var(--border-size-large) solid var(--color-surface05)}:host([active]) .menu-label-content,:host([open]) .menu-label-content,.menu-label:hover .menu-label-content,.menu-label:focus-within .menu-label-content{border-color:var(--color-secondary01)}.menu-label ::slotted(*){width:100%;margin:0;appearance:none;font-size:var(--font-size-5);line-height:1.2;outline:none}.menu-label z-icon{margin-left:calc(var(--space-unit) * 4);fill:currentColor}.content{background:var(--color-surface01)}.content[hidden]{display:none}:host([floating]) .content{width:375px;max-width:100vw;padding:var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2)}:host(:not([floating])) .content{width:100%}:host([floating]) .content{position:absolute;top:100%;left:0;box-shadow:var(--shadow-2);min-width:100%}.header{display:flex;align-items:center;padding:var(--space-unit) 0 calc(var(--space-unit) * 2)}.header ::slotted(img[slot='header']){width:calc(var(--space-unit) * 11.25);object-fit:contain;height:auto}.header ::slotted([slot='header']:not(:first-child)){margin:auto 0;margin-left:calc(var(--space-unit) * 2.5);font-weight:var(--font-sb);font-size:var(--font-size-3);line-height:1.5}.items{display:flex;flex-direction:column;align-items:flex-start;background:inherit}.items>::slotted([slot='item']){display:inline-flex;width:100%;margin:0;font-size:var(--font-size-3);line-height:1.25;outline:none}.items>::slotted([slot='item']:focus:focus-visible){box-shadow:var(--shadow-focus-primary)}.items>::slotted([slot='item']:not(z-menu-section)){padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5);border-bottom:var(--border-size-small) solid var(--color-surface05)}.items>::slotted([slot='item']:hover),.items>::slotted([slot='item']:active){border-color:var(--color-secondary01)}";
|
|
1784
1784
|
|
|
1785
1785
|
const ZMenu = class {
|
|
1786
1786
|
constructor(hostRef) {
|
|
@@ -1933,7 +1933,7 @@ const ZMenuDropdown = class {
|
|
|
1933
1933
|
};
|
|
1934
1934
|
ZMenuDropdown.style = stylesCss$z;
|
|
1935
1935
|
|
|
1936
|
-
const stylesCss$y = ":host{display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:0;font-family:var(--font-family-sans)}:host,::slotted(*),*{box-sizing:border-box}::slotted(a){text-decoration:none}::slotted(*){font-family:var(--font-family-sans);font-weight:var(--font-rg);color:var(--color-text01)}:host([active]) .label,:host([open]) .label,.label:hover{border-color:var(--color-secondary01)}.label{display:flex;align-items:center;width:100%;margin:0;padding:calc(var(--space-unit) * 2) calc(var(--space-unit)
|
|
1936
|
+
const stylesCss$y = ":host{display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:0;font-family:var(--font-family-sans)}:host,::slotted(*),*{box-sizing:border-box}::slotted(a){text-decoration:none}::slotted(*){font-family:var(--font-family-sans);font-weight:var(--font-rg);color:var(--color-text01)}:host([active]) .label,:host([open]) .label,.label:hover{border-color:var(--color-secondary01)}.label{display:flex;align-items:center;width:100%;margin:0;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5);text-align:left;background:transparent;border-radius:0;border:0;border-bottom:var(--border-size-small) solid var(--color-surface05);cursor:pointer}.label ::slotted(*){width:100%;margin:0;font-size:var(--font-size-3);line-height:1.25}.label:focus:focus-visible{outline:none;box-shadow:var(--shadow-focus-primary)}.label z-icon{margin-left:calc(var(--space-unit) * 4);fill:currentColor}.items{display:flex;flex-direction:column;width:100%;padding:calc(var(--space-unit) * 0.5);padding-bottom:calc(var(--space-unit) * 2)}.items>::slotted([slot='item']){display:inline-flex;margin:0;padding:calc(var(--space-unit) * 0.5);font-size:var(--font-size-2);line-height:1.4;outline:none}.items>::slotted([slot='item']:last-child){padding-bottom:0}.items>::slotted([slot='item']:focus:focus-visible){box-shadow:var(--shadow-focus-primary);color:var(--color-secondary01)}.items>::slotted([slot='item']:hover){color:var(--color-secondary01)}";
|
|
1937
1937
|
|
|
1938
1938
|
const ZMenuSection = class {
|
|
1939
1939
|
constructor(hostRef) {
|
|
@@ -2596,7 +2596,7 @@ const ZPopover = class {
|
|
|
2596
2596
|
};
|
|
2597
2597
|
ZPopover.style = stylesCss$i;
|
|
2598
2598
|
|
|
2599
|
-
const stylesCss$h = "z-registro-table{overflow-x:auto;display:block;width:100%;font-family:var(--dashboard-font);font-weight:var(--font-rg);
|
|
2599
|
+
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}}";
|
|
2600
2600
|
|
|
2601
2601
|
const ZRegistroTable = class {
|
|
2602
2602
|
constructor(hostRef) {
|
|
@@ -2627,8 +2627,13 @@ const ZRegistroTable = class {
|
|
|
2627
2627
|
this.isMobile = screen.width <= mobileBreakpoint;
|
|
2628
2628
|
}
|
|
2629
2629
|
componentWillLoad() {
|
|
2630
|
+
var _a;
|
|
2630
2631
|
this.isMobile = window.innerWidth <= mobileBreakpoint;
|
|
2631
|
-
|
|
2632
|
+
const tableBody = this.host.querySelector('[slot="table-body"]');
|
|
2633
|
+
this.hasTableBody = !!((_a = tableBody === null || tableBody === void 0 ? void 0 : tableBody.children) === null || _a === void 0 ? void 0 : _a.length);
|
|
2634
|
+
if (!!tableBody && !this.hasTableBody) {
|
|
2635
|
+
tableBody.remove();
|
|
2636
|
+
}
|
|
2632
2637
|
}
|
|
2633
2638
|
componentWillRender() {
|
|
2634
2639
|
this.host.setAttribute("role", "table");
|
|
@@ -2715,9 +2720,14 @@ const ZRegistroTableEmptyBox = class {
|
|
|
2715
2720
|
/** Sets message */
|
|
2716
2721
|
this.subtitle = "";
|
|
2717
2722
|
}
|
|
2723
|
+
componentWillLoad() {
|
|
2724
|
+
this.hasCta1Slot = !!this.hostElement.querySelector('[slot="cta1"]');
|
|
2725
|
+
this.hasCta2Slot = !!this.hostElement.querySelector('[slot="cta2"]');
|
|
2726
|
+
}
|
|
2718
2727
|
render() {
|
|
2719
|
-
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" }))));
|
|
2728
|
+
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" })))));
|
|
2720
2729
|
}
|
|
2730
|
+
get hostElement() { return getElement(this); }
|
|
2721
2731
|
};
|
|
2722
2732
|
ZRegistroTableEmptyBox.style = stylesCss$e;
|
|
2723
2733
|
|
|
@@ -3521,91 +3531,89 @@ const ZTypography = class {
|
|
|
3521
3531
|
};
|
|
3522
3532
|
ZTypography.style = stylesCss$1;
|
|
3523
3533
|
|
|
3524
|
-
const stylesCss = ":host{
|
|
3534
|
+
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}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(--dashboard-font);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;padding:calc(var(--space-unit) * 1.5 - 1px) 0;margin:0 calc(var(--space-unit) * 4) 0 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;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(--dashboard-font);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;white-space:nowrap;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;white-space:nowrap;overflow:hidden;max-width:250px;text-overflow:ellipsis;color:var(--text-white);font-family:var(--dashboard-font);font-weight:var(--font-sb);font-size:16px;line-height:24px;letter-spacing:0}.userfullname.inverse{color:var(--text-grey-800)}.useremail{color:var(--text-white);font-family:var(--dashboard-font);font-weight:var(--font-rg);font-size:12px;line-height:16px;letter-spacing:0.32px}.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);padding-bottom:calc(var(--space-unit) * 2)}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(--dashboard-font);font-weight:var(--font-sb);font-size:14px;line-height:20px;letter-spacing:0.16px;padding:0 calc(var(--space-unit) - 2px)}.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{margin-right:calc(var(--space-unit) * 3 + 2px);text-align:end}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;margin-top:0;width:100%;background-color:var(--bg-white);border-bottom:var(--border-size-small) solid var(--bg-white);border-bottom-left-radius:var(--border-radius-base);border-bottom-right-radius:var(--border-radius-base)}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)}}";
|
|
3525
3535
|
|
|
3526
3536
|
const ZUserDropdown = class {
|
|
3527
3537
|
constructor(hostRef) {
|
|
3528
3538
|
registerInstance(this, hostRef);
|
|
3529
3539
|
this.userButtonClick = createEvent(this, "userButtonClick", 7);
|
|
3530
3540
|
this.dropdownMenuLinkClick = createEvent(this, "dropdownMenuLinkClick", 7);
|
|
3531
|
-
/**
|
|
3532
|
-
this.
|
|
3541
|
+
/** if inner components colors are inverted, or not, default false */
|
|
3542
|
+
this.useinversecolors = false;
|
|
3533
3543
|
this.ismenuopen = false;
|
|
3534
|
-
this.
|
|
3544
|
+
this.handleLoggedButtonClick = this.handleLoggedButtonClick.bind(this);
|
|
3535
3545
|
this.emitDropdownMenuLinkClick = this.emitDropdownMenuLinkClick.bind(this);
|
|
3536
3546
|
}
|
|
3537
|
-
componentWillLoad() {
|
|
3538
|
-
this.setMobileAndGhostDivWidth();
|
|
3539
|
-
}
|
|
3540
3547
|
componentDidLoad() {
|
|
3541
|
-
this.
|
|
3548
|
+
this.setMobileAndDivToResizeWidth();
|
|
3542
3549
|
}
|
|
3543
3550
|
componentWillUpdate() {
|
|
3544
|
-
this.
|
|
3551
|
+
this.setMobileAndDivToResizeWidth();
|
|
3545
3552
|
}
|
|
3546
3553
|
componentWillRender() {
|
|
3547
|
-
this.
|
|
3548
|
-
typeof this.menucontent === "string"
|
|
3549
|
-
|
|
3550
|
-
: this.menucontent;
|
|
3554
|
+
if (this.menucontent) {
|
|
3555
|
+
this.linkarray = typeof this.menucontent === "string" ? JSON.parse(this.menucontent) : this.menucontent;
|
|
3556
|
+
}
|
|
3551
3557
|
}
|
|
3552
|
-
|
|
3558
|
+
setMobileAndDivToResizeWidth() {
|
|
3553
3559
|
var _a;
|
|
3554
|
-
this.
|
|
3555
|
-
window.screen.width <= mobileBreakpoint ||
|
|
3556
|
-
|
|
3557
|
-
|
|
3558
|
-
|
|
3559
|
-
|
|
3560
|
-
|
|
3561
|
-
|
|
3560
|
+
if (this.divtoresize) {
|
|
3561
|
+
this.ismobile = window.screen.width <= mobileBreakpoint || window.innerWidth <= mobileBreakpoint;
|
|
3562
|
+
if (this.logged && !this.ismobile && this.ismenuopen) {
|
|
3563
|
+
this.divtoresize.style.width = `${(_a = this.userbutton) === null || _a === void 0 ? void 0 : _a.offsetWidth}px`;
|
|
3564
|
+
}
|
|
3565
|
+
else {
|
|
3566
|
+
this.divtoresize.removeAttribute('style');
|
|
3567
|
+
}
|
|
3568
|
+
}
|
|
3562
3569
|
}
|
|
3563
3570
|
emitUserButtonClick() {
|
|
3564
3571
|
this.userButtonClick.emit(this.ismenuopen);
|
|
3565
3572
|
}
|
|
3566
3573
|
emitDropdownMenuLinkClick(e) {
|
|
3574
|
+
this.ismenuopen = false;
|
|
3567
3575
|
this.dropdownMenuLinkClick.emit({ e, linkId: e.detail.linkId });
|
|
3568
3576
|
}
|
|
3569
3577
|
handleResize() {
|
|
3570
|
-
this.
|
|
3578
|
+
this.ismobile = window.innerWidth <= mobileBreakpoint;
|
|
3571
3579
|
}
|
|
3572
3580
|
handleOrientationChange() {
|
|
3573
|
-
this.
|
|
3581
|
+
this.ismobile = screen.width <= mobileBreakpoint;
|
|
3574
3582
|
}
|
|
3575
3583
|
handleClickOutside(e) {
|
|
3576
3584
|
if (e.target.nodeName !== "Z-USER-DROPDOWN") {
|
|
3577
3585
|
this.ismenuopen = false;
|
|
3578
3586
|
}
|
|
3579
3587
|
}
|
|
3580
|
-
|
|
3588
|
+
handleLoggedButtonClick() {
|
|
3581
3589
|
this.ismenuopen = !this.ismenuopen;
|
|
3582
3590
|
this.emitUserButtonClick();
|
|
3583
3591
|
}
|
|
3584
|
-
renderCaretIcon() {
|
|
3585
|
-
const direction = this.ismenuopen ? "up" : "down";
|
|
3586
|
-
return (h("z-icon", { name: `caret-${direction}-filled`, height: 18, width: 18 }));
|
|
3587
|
-
}
|
|
3588
3592
|
renderGuestButton() {
|
|
3589
|
-
return (h("
|
|
3593
|
+
return (h("button", { id: "guestbutton", class: this.useinversecolors ? "inverse" : "", onClick: () => this.emitUserButtonClick() }, "ENTRA"));
|
|
3590
3594
|
}
|
|
3591
3595
|
renderLoggedButton() {
|
|
3592
|
-
|
|
3593
|
-
|
|
3594
|
-
|
|
3595
|
-
if (this.theme === ThemeVariant.light)
|
|
3596
|
-
return "black";
|
|
3597
|
-
return this.isMobile ? "white" : "black";
|
|
3596
|
+
const direction = this.ismenuopen ? "up" : "down";
|
|
3597
|
+
const colorClass = this.useinversecolors ? "inverse" : "";
|
|
3598
|
+
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))));
|
|
3598
3599
|
}
|
|
3599
|
-
|
|
3600
|
-
|
|
3600
|
+
getZLinkTextcolor() {
|
|
3601
|
+
if (this.ismobile) {
|
|
3602
|
+
return this.useinversecolors ? "black" : "white";
|
|
3603
|
+
}
|
|
3604
|
+
else {
|
|
3605
|
+
return this.useinversecolors ? "white" : "black";
|
|
3606
|
+
}
|
|
3601
3607
|
}
|
|
3602
3608
|
renderDropdownMenu() {
|
|
3603
|
-
|
|
3604
|
-
|
|
3605
|
-
|
|
3609
|
+
const colorClass = this.useinversecolors ? "inverse" : "";
|
|
3610
|
+
return (this.ismenuopen && (h("ul", { class: colorClass }, this.ismobile &&
|
|
3611
|
+
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))))));
|
|
3606
3612
|
}
|
|
3607
3613
|
render() {
|
|
3608
|
-
|
|
3614
|
+
const openClass = `${this.logged && this.ismenuopen ? "open" : ""}`;
|
|
3615
|
+
const colorClass = this.useinversecolors ? "inverse" : "";
|
|
3616
|
+
return (h(Host, { class: colorClass }, h("div", { ref: (el) => (this.divtoresize = el), class: openClass, onClick: (e) => e.stopPropagation() }, h("div", { class: `${colorClass} ${openClass}` }, this.logged ? this.renderLoggedButton() : this.renderGuestButton(), this.logged && this.renderDropdownMenu()))));
|
|
3609
3617
|
}
|
|
3610
3618
|
};
|
|
3611
3619
|
ZUserDropdown.style = stylesCss;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, h, H as Host, g as getElement } from './index-fa9e549c.js';
|
|
2
2
|
|
|
3
|
-
const stylesCss = ":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:var(var(--app-header-top-offset), 0);--app-header-drawer-trigger-size:calc(var(--space-unit) * 4);--app-header-bg:var(--color-white);--app-header-text-color:var(--gray800);display:block;color:var(--app-header-text-color)}:host,*{box-sizing:border-box}
|
|
3
|
+
const stylesCss = ":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:var(var(--app-header-top-offset), 0);--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;flex-direction:column;justify-content:flex-start;align-items:baseline;flex-shrink:0;flex-grow:0;width:100%;height:var(--app-header-height);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;flex-direction:row;align-items:center;max-width:100%}: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;top:var(--app-header-top-offset);left:0;z-index:5;display:flex;flex-direction:row;width:100%;max-width:100%;color:var(--app-header-stucked-text-color);padding:var(--space-unit) var(--grid-mobile-margin);background:var(--app-header-stucked-bg);box-shadow:var(--shadow-2);animation:slideStuckedHeadingIn 250ms ease-out}.heading-stucked .heading-title,.heading-stucked .heading-title>*,.heading-stucked .heading-title ::slotted([slot='stucked-title']){display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.heading-stucked .heading-title>*,::slotted([slot='title']),::slotted([slot='stucked-title']){margin:0;font-weight:700;font-family:'IBM Plex Serif', serif;font-size:var(--app-header-typography-5-size);letter-spacing:var(--app-header-typography-5-tracking);line-height:1}::slotted([slot='subtitle']){margin:var(--space-unit) 0 0;font-family:var(--font-family-sans);font-style:italic;font-weight:500;font-size:20px;line-height:1.2}.heading-container{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;max-width:100%;margin-right:auto}.menu-container{display:none;flex-direction:row;flex-wrap: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{margin:0 calc(var(--space-unit) * 1.5) 0 0;padding:0;background:none;border:0;border-radius:0;color:inherit;appearance:none;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;top:var(--app-header-top-offset);left:0;width:100%;height:100%;z-index:100;pointer-events:none}.drawer-container .drawer-overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;display:block;background:var(--gray900);opacity:0;transition:opacity 400ms ease-out;pointer-events:none}.drawer-panel{position:absolute;top:0;left:0;z-index:2;display:flex;flex-direction:column;align-items:flex-start;width:375px;max-width:100%;height:100%;padding:calc(var(--space-unit) * 2) var(--space-unit);background:var(--color-white);color:var(--gray800);transform:translate3d(-100%, 0, 0);transition:transform 400ms ease-out;pointer-events:none}.drawer-content{display:flex;flex-direction:column;flex:1 auto;width:100%;padding:calc(var(--space-unit) * 0.5) var(--space-unit);overflow:auto}.drawer-content::-webkit-scrollbar{background:linear-gradient(\n to right,\n transparent 0 3px,\n var(--gray200) 3px 7px,\n transparent 7px 10px\n );width: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);margin:0 0 calc(var(--space-unit) * 2.5) var(--space-unit);padding:0;font-size:inherit;background:transparent;color:inherit;fill:currentColor;border:0;border-radius:0;appearance:none;cursor:pointer;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{transform:none;pointer-events:all}.hero-container{position:absolute;top:0;left:0;z-index: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{content:'';position:absolute;top:0;left:0;z-index:0;width:100%;height:100%;background:var(--color-black);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-left:var(--grid-tablet-margin);padding-right: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']):not([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-left:var(--grid-desktop-margin);padding-right:var(--grid-desktop-margin)}:host(:not([flow='stack'])) .heading-panel{flex-direction:row;flex-wrap:wrap}::slotted([slot='title']){font-size:var(--app-header-typography-7-size);letter-spacing:var(--app-header-typography-7-tracking);margin-right:var(--grid-desktop-gutter)}:host(:not([flow='offcanvas']):not([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-left:var(--grid-wide-margin);padding-right:var(--grid-wide-margin)}::slotted([slot='title']){font-size:var(--app-header-typography-9-size);letter-spacing:var(--app-header-typography-9-tracking);margin-right:var(--grid-wide-gutter)}:host(:not([flow='offcanvas']):not([menu-length='0'])) .heading-container:not(:last-child){margin-bottom:0}}@keyframes slideStuckedHeadingIn{0%{transform:translate3d(0, -100%, 0)}100%{transform:none}}";
|
|
4
4
|
|
|
5
5
|
const SUPPORT_INTERSECTION_OBSERVER = typeof IntersectionObserver !== 'undefined';
|
|
6
6
|
const ZAppHeader = class {
|
|
@@ -1,25 +1,26 @@
|
|
|
1
1
|
import { EventEmitter } from "../../../stencil-public-runtime";
|
|
2
|
-
import { MenuItem
|
|
2
|
+
import { MenuItem } from "../../../beans";
|
|
3
3
|
export declare class ZUserDropdown {
|
|
4
4
|
/** logged status flag */
|
|
5
5
|
logged?: boolean;
|
|
6
6
|
/** user full name */
|
|
7
7
|
userfullname?: string;
|
|
8
|
+
/** user email */
|
|
9
|
+
useremail?: string;
|
|
8
10
|
/** Json stringified or array to fill menu dropdown */
|
|
9
11
|
menucontent?: string | MenuItem[];
|
|
10
|
-
/**
|
|
11
|
-
|
|
12
|
+
/** if inner components colors are inverted, or not, default false */
|
|
13
|
+
useinversecolors?: boolean;
|
|
12
14
|
ismenuopen: boolean;
|
|
13
|
-
|
|
15
|
+
ismobile: boolean;
|
|
14
16
|
private linkarray;
|
|
15
|
-
private
|
|
16
|
-
private
|
|
17
|
+
private userbutton;
|
|
18
|
+
private divtoresize;
|
|
17
19
|
constructor();
|
|
18
|
-
componentWillLoad(): void;
|
|
19
20
|
componentDidLoad(): void;
|
|
20
21
|
componentWillUpdate(): void;
|
|
21
22
|
componentWillRender(): void;
|
|
22
|
-
|
|
23
|
+
setMobileAndDivToResizeWidth(): void;
|
|
23
24
|
/** Emitted on enter or user Button click, returns ismenuopen (bool) */
|
|
24
25
|
userButtonClick: EventEmitter;
|
|
25
26
|
emitUserButtonClick(): void;
|
|
@@ -29,12 +30,10 @@ export declare class ZUserDropdown {
|
|
|
29
30
|
handleResize(): void;
|
|
30
31
|
handleOrientationChange(): void;
|
|
31
32
|
handleClickOutside(e: MouseEvent): void;
|
|
32
|
-
|
|
33
|
-
renderCaretIcon(): any;
|
|
33
|
+
handleLoggedButtonClick(): void;
|
|
34
34
|
renderGuestButton(): any;
|
|
35
35
|
renderLoggedButton(): any;
|
|
36
|
-
|
|
37
|
-
renderGhostDiv(): any;
|
|
36
|
+
getZLinkTextcolor(): "white" | "black";
|
|
38
37
|
renderDropdownMenu(): any;
|
|
39
38
|
render(): any;
|
|
40
39
|
}
|
|
@@ -642,7 +642,7 @@ export namespace Components {
|
|
|
642
642
|
*/
|
|
643
643
|
"link"?: string;
|
|
644
644
|
/**
|
|
645
|
-
* link target
|
|
645
|
+
* link target: true means _blank, false means _self
|
|
646
646
|
*/
|
|
647
647
|
"targetblank"?: boolean;
|
|
648
648
|
/**
|
|
@@ -1499,9 +1499,13 @@ export namespace Components {
|
|
|
1499
1499
|
*/
|
|
1500
1500
|
"menucontent"?: string | MenuItem[];
|
|
1501
1501
|
/**
|
|
1502
|
-
*
|
|
1502
|
+
* if inner components colors are inverted, or not, default false
|
|
1503
1503
|
*/
|
|
1504
|
-
"
|
|
1504
|
+
"useinversecolors"?: boolean;
|
|
1505
|
+
/**
|
|
1506
|
+
* user email
|
|
1507
|
+
*/
|
|
1508
|
+
"useremail"?: string;
|
|
1505
1509
|
/**
|
|
1506
1510
|
* user full name
|
|
1507
1511
|
*/
|
|
@@ -2806,7 +2810,7 @@ declare namespace LocalJSX {
|
|
|
2806
2810
|
*/
|
|
2807
2811
|
"link"?: string;
|
|
2808
2812
|
/**
|
|
2809
|
-
* link target
|
|
2813
|
+
* link target: true means _blank, false means _self
|
|
2810
2814
|
*/
|
|
2811
2815
|
"targetblank"?: boolean;
|
|
2812
2816
|
/**
|
|
@@ -3778,9 +3782,13 @@ declare namespace LocalJSX {
|
|
|
3778
3782
|
*/
|
|
3779
3783
|
"onUserButtonClick"?: (event: CustomEvent<any>) => void;
|
|
3780
3784
|
/**
|
|
3781
|
-
*
|
|
3785
|
+
* if inner components colors are inverted, or not, default false
|
|
3782
3786
|
*/
|
|
3783
|
-
"
|
|
3787
|
+
"useinversecolors"?: boolean;
|
|
3788
|
+
/**
|
|
3789
|
+
* user email
|
|
3790
|
+
*/
|
|
3791
|
+
"useremail"?: string;
|
|
3784
3792
|
/**
|
|
3785
3793
|
* user full name
|
|
3786
3794
|
*/
|
|
@@ -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
|
}
|