@zanichelli/albe-web-components 2.30.0-rc2 → 2.30.0-rc6

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.
Files changed (14) hide show
  1. package/dist/cjs/z-alert_66.cjs.entry.js +5 -7
  2. package/dist/collection/components/navigation/z-app-topbar/index.js +9 -12
  3. package/dist/collection/components/navigation/z-app-topbar/styles.css +9 -24
  4. package/dist/collection/components/navigation/z-user-dropdown/styles.css +13 -6
  5. package/dist/esm/z-alert_66.entry.js +5 -7
  6. package/dist/types/components/navigation/z-app-topbar/index.d.ts +3 -3
  7. package/dist/types/components.d.ts +4 -4
  8. package/dist/web-components-library/{p-8fc23084.entry.js → p-a3ba52ce.entry.js} +2 -2
  9. package/dist/web-components-library/web-components-library.esm.js +1 -1
  10. package/package.json +1 -1
  11. package/www/build/{p-8fc23084.entry.js → p-a3ba52ce.entry.js} +2 -2
  12. package/www/build/{p-7e8a1b76.js → p-a58cd1e0.js} +1 -1
  13. package/www/build/web-components-library.esm.js +1 -1
  14. package/www/index.html +3 -3
package/dist/cjs/z-alert_66.cjs.entry.js CHANGED
@@ -41,15 +41,13 @@ const ZAppSwitcher = class {
41
41
  };
42
42
  ZAppSwitcher.style = stylesCss$$;
43
43
 
44
- 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-min);background-color:var(--bg-grey-900);z-index:99}:host(.light){background-color:var(--bg-white)}:host>div{display:flex;justify-content:space-between;align-items:center}#left-panel{display:flex;gap:calc(var(--space-unit) + 2px);align-items:center}#right-panel{display:flex;gap:calc(var(--space-unit) * 2);align-items:center}.right-action{display:none}#divider-container{display:none}z-link{font-family:var(--dashboard-font);font-weight:var(--font-sb);font-size:14px;line-height:20px;letter-spacing:0.3px}z-logo{margin-right:calc(var(--space-unit) - 2px)}@media only screen and (min-width: 768px){:host{padding:var(--space-unit) calc(var(--space-unit) * 2) var(--space-unit) var(--space-unit)}.left-action{display:none}.right-action{display:block}#divider-container{display:block;height:24px}}@media only screen and (min-width: 1366px){#content-container.limited-width{margin:auto;max-width:var(--mw)}}";
44
+ 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-min);background-color:var(--bg-grey-900);z-index:99}:host(.light){background-color:var(--bg-white)}:host>div{display:flex;justify-content:space-between;align-items:center}#content-container.limited-width{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(--dashboard-font);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:24px}}";
45
45
 
46
46
  const ZAppTopbar = class {
47
47
  constructor(hostRef) {
48
48
  index.registerInstance(this, hostRef);
49
49
  /** theme variant, default 'dark' */
50
50
  this.theme = index$1.ThemeVariant.dark;
51
- /** add app-switcher */
52
- this.showappswitcher = true;
53
51
  this.topbarlinks = [];
54
52
  }
55
53
  handleResize() {
@@ -66,11 +64,11 @@ const ZAppTopbar = class {
66
64
  this.topbarlinks = typeof this.topbarcontent === "string" ? JSON.parse(this.topbarcontent) : this.topbarcontent;
67
65
  }
68
66
  }
69
- renderTopbarLinks(className, showIcons, showLabels) {
70
- 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: showIcons ? link.icon : undefined, class: className }, showLabels && link.label));
67
+ renderTopbarLinks() {
68
+ 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));
71
69
  }
72
70
  render() {
73
- return (index.h(index.Host, { class: `${this.theme} ${this.contentmaxwidth ? "limited-width" : ""}` }, index.h("div", { id: "content-container", class: `${this.contentmaxwidth ? "limited-width" : ""}`, style: this.contentmaxwidth ? { "--mw": `${this.contentmaxwidth}px` } : {} }, index.h("div", { id: "left-panel" }, index.h("z-logo", { width: this.ismobile ? 31 : 128, height: this.ismobile ? 40 : 32, imagealt: "zanichelli-logo", link: this.logolink, targetblank: true }), this.renderTopbarLinks("left-action", true, false)), index.h("div", { id: "right-panel" }, this.renderTopbarLinks("right-action", false, true), 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" })))));
71
+ return (index.h(index.Host, { class: `${this.theme} ${this.contentmaxwidth ? "limited-width" : ""}` }, index.h("div", { id: "content-container", class: `${this.contentmaxwidth ? "limited-width" : ""}`, style: this.contentmaxwidth ? { "--mw": `${this.contentmaxwidth}px` } : {} }, index.h("div", { id: "left-panel", class: "content-panel" }, index.h("z-logo", { width: this.ismobile ? 31 : 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" })))));
74
72
  }
75
73
  };
76
74
  ZAppTopbar.style = stylesCss$_;
@@ -3514,7 +3512,7 @@ const ZTypography = class {
3514
3512
  };
3515
3513
  ZTypography.style = stylesCss$1;
3516
3514
 
3517
- 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(--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;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;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)}}";
3515
+ 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(--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;white-space:nowrap;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;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(--dashboard-font);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(--dashboard-font);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);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);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;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)}}";
3518
3516
 
3519
3517
  const ZUserDropdown = class {
3520
3518
  constructor(hostRef) {
package/dist/collection/components/navigation/z-app-topbar/index.js CHANGED
@@ -6,8 +6,6 @@ export class ZAppTopbar {
6
6
  constructor() {
7
7
  /** theme variant, default 'dark' */
8
8
  this.theme = ThemeVariant.dark;
9
- /** add app-switcher */
10
- this.showappswitcher = true;
11
9
  this.topbarlinks = [];
12
10
  }
13
11
  handleResize() {
@@ -24,17 +22,17 @@ export class ZAppTopbar {
24
22
  this.topbarlinks = typeof this.topbarcontent === "string" ? JSON.parse(this.topbarcontent) : this.topbarcontent;
25
23
  }
26
24
  }
27
- renderTopbarLinks(className, showIcons, showLabels) {
28
- 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: showIcons ? link.icon : undefined, class: className }, showLabels && link.label));
25
+ renderTopbarLinks() {
26
+ return this.topbarlinks.map((link) => h("z-link", { htmlid: link.id, textcolor: this.theme === ThemeVariant.light ? "black" : "white", href: link.link, target: link.target, icon: this.ismobile ? link.icon : undefined }, !this.ismobile && link.label));
29
27
  }
30
28
  render() {
31
29
  return (h(Host, { class: `${this.theme} ${this.contentmaxwidth ? "limited-width" : ""}` },
32
30
  h("div", { id: "content-container", class: `${this.contentmaxwidth ? "limited-width" : ""}`, style: this.contentmaxwidth ? { "--mw": `${this.contentmaxwidth}px` } : {} },
33
- h("div", { id: "left-panel" },
31
+ h("div", { id: "left-panel", class: "content-panel" },
34
32
  h("z-logo", { width: this.ismobile ? 31 : 128, height: this.ismobile ? 40 : 32, imagealt: "zanichelli-logo", link: this.logolink, targetblank: true }),
35
- this.renderTopbarLinks("left-action", true, false)),
36
- h("div", { id: "right-panel" },
37
- this.renderTopbarLinks("right-action", false, true),
33
+ this.ismobile && this.renderTopbarLinks()),
34
+ h("div", { id: "right-panel", class: "content-panel" },
35
+ !this.ismobile && this.renderTopbarLinks(),
38
36
  this.showappswitcher && h("z-app-switcher", { theme: this.theme }),
39
37
  h("div", { id: "divider-container" },
40
38
  h("z-divider", { orientation: DividerOrientation.vertical, color: this.theme === ThemeVariant.light ? "gray800" : "color-white" })),
@@ -106,7 +104,7 @@ export class ZAppTopbar {
106
104
  "optional": true,
107
105
  "docs": {
108
106
  "tags": [],
109
- "text": "Json stringified or array to fill topbar links"
107
+ "text": "JSON string or MenuItem array to define topbar links"
110
108
  },
111
109
  "attribute": "topbarcontent",
112
110
  "reflect": false
@@ -123,7 +121,7 @@ export class ZAppTopbar {
123
121
  "optional": true,
124
122
  "docs": {
125
123
  "tags": [],
126
- "text": "the link used by z-logo"
124
+ "text": "link URL used by z-logo"
127
125
  },
128
126
  "attribute": "logolink",
129
127
  "reflect": false
@@ -143,8 +141,7 @@ export class ZAppTopbar {
143
141
  "text": "add app-switcher"
144
142
  },
145
143
  "attribute": "showappswitcher",
146
- "reflect": false,
147
- "defaultValue": "true"
144
+ "reflect": false
148
145
  }
149
146
  }; }
150
147
  static get states() { return {
package/dist/collection/components/navigation/z-app-topbar/styles.css CHANGED
@@ -20,20 +20,18 @@
20
20
  align-items: center;
21
21
  }
22
22
 
23
- #left-panel {
24
- display: flex;
25
- gap: calc(var(--space-unit) + 2px);
26
- align-items: center
23
+ #content-container.limited-width {
24
+ margin: auto;
25
+ max-width: var(--mw);
27
26
  }
28
27
 
29
- #right-panel {
28
+ .content-panel {
30
29
  display: flex;
31
- gap: calc(var(--space-unit) * 2);
32
- align-items: center;
30
+ align-items: center
33
31
  }
34
32
 
35
- .right-action {
36
- display: none;
33
+ .content-panel > :not(:last-child) {
34
+ margin-right: calc(var(--space-unit) * 2);
37
35
  }
38
36
 
39
37
  #divider-container {
@@ -48,22 +46,14 @@ z-link {
48
46
  letter-spacing: 0.3px;
49
47
  }
50
48
 
51
- z-logo {
52
- margin-right: calc(var(--space-unit) - 2px);
53
- }
54
-
55
49
  /* Tablet breakpoint */
56
50
  @media only screen and (min-width: 768px) {
57
51
  :host {
58
52
  padding: var(--space-unit) calc(var(--space-unit) * 2) var(--space-unit) var(--space-unit);
59
53
  }
60
54
 
61
- .left-action {
62
- display: none;
63
- }
64
-
65
- .right-action {
66
- display: block;
55
+ :host(.limited-width) {
56
+ padding: var(--space-unit);
67
57
  }
68
58
 
69
59
  #divider-container {
@@ -78,9 +68,4 @@ z-logo {
78
68
 
79
69
  /* Wide breakpoint */
80
70
  @media only screen and (min-width: 1366px) {
81
- #content-container.limited-width {
82
- margin: auto;
83
- max-width: var(--mw);
84
- }
85
-
86
71
  }
package/dist/collection/components/navigation/z-user-dropdown/styles.css CHANGED
@@ -64,6 +64,7 @@ ul.inverse {
64
64
  ul > li {
65
65
  display: flex;
66
66
  justify-content: flex-end;
67
+ white-space: nowrap;
67
68
  padding: calc(var(--space-unit) * 1.5 - 1px) 0;
68
69
  margin: 0 calc(var(--space-unit) * 4) 0 0;
69
70
  border-bottom: var(--border-base) solid var(--bg-grey-700);
@@ -125,12 +126,14 @@ ul > li:last-child {
125
126
  overflow: hidden;
126
127
  max-width: 250px;
127
128
  text-overflow: ellipsis;
129
+ width: 100%;
128
130
  color: var(--text-white);
129
131
  font-family: var(--dashboard-font);
130
132
  font-weight: var(--font-sb);
131
133
  font-size: 16px;
132
134
  line-height: 24px;
133
135
  letter-spacing: 0;
136
+ text-align: right;
134
137
  }
135
138
 
136
139
  .userfullname.inverse {
@@ -144,6 +147,10 @@ ul > li:last-child {
144
147
  font-size: 12px;
145
148
  line-height: 16px;
146
149
  letter-spacing: 0.32px;
150
+ overflow: hidden;
151
+ text-overflow: ellipsis;
152
+ width: 100%;
153
+ text-align: right;
147
154
  }
148
155
 
149
156
  .useremail.inverse {
@@ -226,7 +233,7 @@ ul > li:last-child {
226
233
  button.open z-icon {
227
234
  fill: var(--text-grey-800);
228
235
  }
229
-
236
+
230
237
  button.open z-icon.inverse {
231
238
  fill: var(--text-white);
232
239
  }
@@ -238,6 +245,7 @@ ul > li:last-child {
238
245
  line-height: 20px;
239
246
  letter-spacing: 0.16px;
240
247
  padding: 0 calc(var(--space-unit) - 2px);
248
+ width: auto;
241
249
  }
242
250
 
243
251
  .userfullname.inverse {
@@ -255,8 +263,8 @@ ul > li:last-child {
255
263
  }
256
264
 
257
265
  .useremail {
258
- margin-right: calc(var(--space-unit) * 3 + 2px);
259
- text-align: end;
266
+ padding-right: calc(var(--space-unit) * 3 + 2px);
267
+ box-sizing: border-box;
260
268
  }
261
269
 
262
270
  button.open div.useremail {
@@ -290,15 +298,14 @@ ul > li:last-child {
290
298
  margin: 0 var(--space-unit);
291
299
  }
292
300
 
293
- ul > li.inverse {
301
+ ul > li.inverse {
294
302
  color: var(--text-white);
295
- }
303
+ }
296
304
 
297
305
  ul > li:first-child {
298
306
  border-top: var(--border-base) solid var(--gray400);
299
307
  padding-top: calc(var(--space-unit) + 3px);
300
308
  }
301
-
302
309
  }
303
310
 
304
311
  /* Desktop breakpoint */
package/dist/esm/z-alert_66.entry.js CHANGED
@@ -37,15 +37,13 @@ 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-min);background-color:var(--bg-grey-900);z-index:99}:host(.light){background-color:var(--bg-white)}:host>div{display:flex;justify-content:space-between;align-items:center}#left-panel{display:flex;gap:calc(var(--space-unit) + 2px);align-items:center}#right-panel{display:flex;gap:calc(var(--space-unit) * 2);align-items:center}.right-action{display:none}#divider-container{display:none}z-link{font-family:var(--dashboard-font);font-weight:var(--font-sb);font-size:14px;line-height:20px;letter-spacing:0.3px}z-logo{margin-right:calc(var(--space-unit) - 2px)}@media only screen and (min-width: 768px){:host{padding:var(--space-unit) calc(var(--space-unit) * 2) var(--space-unit) var(--space-unit)}.left-action{display:none}.right-action{display:block}#divider-container{display:block;height:24px}}@media only screen and (min-width: 1366px){#content-container.limited-width{margin:auto;max-width:var(--mw)}}";
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-min);background-color:var(--bg-grey-900);z-index:99}:host(.light){background-color:var(--bg-white)}:host>div{display:flex;justify-content:space-between;align-items:center}#content-container.limited-width{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(--dashboard-font);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:24px}}";
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
- /** add app-switcher */
48
- this.showappswitcher = true;
49
47
  this.topbarlinks = [];
50
48
  }
51
49
  handleResize() {
@@ -62,11 +60,11 @@ const ZAppTopbar = class {
62
60
  this.topbarlinks = typeof this.topbarcontent === "string" ? JSON.parse(this.topbarcontent) : this.topbarcontent;
63
61
  }
64
62
  }
65
- renderTopbarLinks(className, showIcons, showLabels) {
66
- 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: showIcons ? link.icon : undefined, class: className }, showLabels && link.label));
63
+ renderTopbarLinks() {
64
+ 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));
67
65
  }
68
66
  render() {
69
- return (h(Host, { class: `${this.theme} ${this.contentmaxwidth ? "limited-width" : ""}` }, h("div", { id: "content-container", class: `${this.contentmaxwidth ? "limited-width" : ""}`, style: this.contentmaxwidth ? { "--mw": `${this.contentmaxwidth}px` } : {} }, h("div", { id: "left-panel" }, h("z-logo", { width: this.ismobile ? 31 : 128, height: this.ismobile ? 40 : 32, imagealt: "zanichelli-logo", link: this.logolink, targetblank: true }), this.renderTopbarLinks("left-action", true, false)), h("div", { id: "right-panel" }, this.renderTopbarLinks("right-action", false, true), 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" })))));
67
+ return (h(Host, { class: `${this.theme} ${this.contentmaxwidth ? "limited-width" : ""}` }, h("div", { id: "content-container", class: `${this.contentmaxwidth ? "limited-width" : ""}`, style: this.contentmaxwidth ? { "--mw": `${this.contentmaxwidth}px` } : {} }, h("div", { id: "left-panel", class: "content-panel" }, h("z-logo", { width: this.ismobile ? 31 : 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" })))));
70
68
  }
71
69
  };
72
70
  ZAppTopbar.style = stylesCss$_;
@@ -3510,7 +3508,7 @@ const ZTypography = class {
3510
3508
  };
3511
3509
  ZTypography.style = stylesCss$1;
3512
3510
 
3513
- 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(--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;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;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)}}";
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(--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;white-space:nowrap;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;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(--dashboard-font);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(--dashboard-font);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);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);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;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)}}";
3514
3512
 
3515
3513
  const ZUserDropdown = class {
3516
3514
  constructor(hostRef) {
package/dist/types/components/navigation/z-app-topbar/index.d.ts CHANGED
@@ -4,9 +4,9 @@ export declare class ZAppTopbar {
4
4
  theme?: ThemeVariant;
5
5
  /** maximum width of topbar content */
6
6
  contentmaxwidth?: number;
7
- /** Json stringified or array to fill topbar links */
7
+ /** JSON string or MenuItem array to define topbar links */
8
8
  topbarcontent?: string | MenuItem[];
9
- /** the link used by z-logo */
9
+ /** link URL used by z-logo */
10
10
  logolink?: string;
11
11
  /** add app-switcher */
12
12
  showappswitcher: boolean;
@@ -16,6 +16,6 @@ export declare class ZAppTopbar {
16
16
  handleOrientationChange(): void;
17
17
  componentWillLoad(): void;
18
18
  componentWillRender(): void;
19
- renderTopbarLinks(className: string, showIcons: boolean, showLabels: boolean): any[];
19
+ renderTopbarLinks(): any[];
20
20
  render(): any;
21
21
  }
package/dist/types/components.d.ts CHANGED
@@ -50,7 +50,7 @@ export namespace Components {
50
50
  */
51
51
  "contentmaxwidth"?: number;
52
52
  /**
53
- * the link used by z-logo
53
+ * link URL used by z-logo
54
54
  */
55
55
  "logolink"?: string;
56
56
  /**
@@ -62,7 +62,7 @@ export namespace Components {
62
62
  */
63
63
  "theme"?: ThemeVariant;
64
64
  /**
65
- * Json stringified or array to fill topbar links
65
+ * JSON string or MenuItem array to define topbar links
66
66
  */
67
67
  "topbarcontent"?: string | MenuItem[];
68
68
  }
@@ -2178,7 +2178,7 @@ declare namespace LocalJSX {
2178
2178
  */
2179
2179
  "contentmaxwidth"?: number;
2180
2180
  /**
2181
- * the link used by z-logo
2181
+ * link URL used by z-logo
2182
2182
  */
2183
2183
  "logolink"?: string;
2184
2184
  /**
@@ -2190,7 +2190,7 @@ declare namespace LocalJSX {
2190
2190
  */
2191
2191
  "theme"?: ThemeVariant;
2192
2192
  /**
2193
- * Json stringified or array to fill topbar links
2193
+ * JSON string or MenuItem array to define topbar links
2194
2194
  */
2195
2195
  "topbarcontent"?: string | MenuItem[];
2196
2196
  }