@zanichelli/albe-web-components 2.28.0 → 2.30.0-rc3

package/dist/collection/components/navigation/z-user-dropdown/index.js

@@ -1,94 +1,98 @@
-import { Component, Prop, State, Event, Listen, h, } from "@stencil/core";
-import { ThemeVariant } from "../../../beans";
+import { Component, Prop, State, Event, Listen, h, Host } from "@stencil/core";
 import { mobileBreakpoint } from "../../../constants/breakpoints";
 export class ZUserDropdown {
   constructor() {
-    /** theme variant, default 'dark' */
-    this.theme = ThemeVariant.dark;
+    /** if inner components colors are inverted, or not, default false */
+    this.useinversecolors = false;
     this.ismenuopen = false;
-    this.handleToggle = this.handleToggle.bind(this);
+    this.handleLoggedButtonClick = this.handleLoggedButtonClick.bind(this);
     this.emitDropdownMenuLinkClick = this.emitDropdownMenuLinkClick.bind(this);
   }
-  componentWillLoad() {
-    this.setMobileAndGhostDivWidth();
-  }
   componentDidLoad() {
-    this.setMobileAndGhostDivWidth();
+    this.setMobileAndDivToResizeWidth();
   }
   componentWillUpdate() {
-    this.setMobileAndGhostDivWidth();
+    this.setMobileAndDivToResizeWidth();
   }
   componentWillRender() {
-    this.linkarray =
-      typeof this.menucontent === "string"
-        ? JSON.parse(this.menucontent)
-        : this.menucontent;
+    if (this.menucontent) {
+      this.linkarray = typeof this.menucontent === "string" ? JSON.parse(this.menucontent) : this.menucontent;
+    }
   }
-  setMobileAndGhostDivWidth() {
+  setMobileAndDivToResizeWidth() {
     var _a;
-    this.isMobile =
-      window.screen.width <= mobileBreakpoint ||
-        window.innerWidth <= mobileBreakpoint;
-    if (this.gosthDiv)
-      this.gosthDiv.style.width =
-        this.logged && !this.isMobile && this.ismenuopen
-          ? `${(_a = this.userButton) === null || _a === void 0 ? void 0 : _a.offsetWidth}px`
-          : "";
+    if (this.divtoresize) {
+      this.ismobile = window.screen.width <= mobileBreakpoint || window.innerWidth <= mobileBreakpoint;
+      if (this.logged && !this.ismobile && this.ismenuopen) {
+        this.divtoresize.style.width = `${(_a = this.userbutton) === null || _a === void 0 ? void 0 : _a.offsetWidth}px`;
+      }
+      else {
+        this.divtoresize.removeAttribute('style');
+      }
+    }
   }
   emitUserButtonClick() {
     this.userButtonClick.emit(this.ismenuopen);
   }
   emitDropdownMenuLinkClick(e) {
+    this.ismenuopen = false;
     this.dropdownMenuLinkClick.emit({ e, linkId: e.detail.linkId });
   }
   handleResize() {
-    this.isMobile = window.innerWidth <= mobileBreakpoint;
+    this.ismobile = window.innerWidth <= mobileBreakpoint;
   }
   handleOrientationChange() {
-    this.isMobile = screen.width <= mobileBreakpoint;
+    this.ismobile = screen.width <= mobileBreakpoint;
   }
   handleClickOutside(e) {
     if (e.target.nodeName !== "Z-USER-DROPDOWN") {
       this.ismenuopen = false;
     }
   }
-  handleToggle() {
+  handleLoggedButtonClick() {
     this.ismenuopen = !this.ismenuopen;
     this.emitUserButtonClick();
   }
-  renderCaretIcon() {
-    const direction = this.ismenuopen ? "up" : "down";
-    return (h("z-icon", { name: `caret-${direction}-filled`, height: 18, width: 18 }));
-  }
   renderGuestButton() {
-    return (h("z-link", { onClick: () => this.emitUserButtonClick(), big: true, icon: "enter", textcolor: this.theme === ThemeVariant.light ? "black" : "white" }, "Entra"));
+    return (h("button", { id: "guestbutton", class: this.useinversecolors ? "inverse" : "", onClick: () => this.emitUserButtonClick() }, "ENTRA"));
   }
   renderLoggedButton() {
-    return (h("button", { ref: (el) => (this.userButton = el), title: this.userfullname, class: `${this.ismenuopen ? "open" : ""} ${this.theme}`, onClick: () => this.handleToggle() },
-      h("z-icon", { name: "user-avatar-filled", height: 18, width: 18 }),
-      h("span", { class: "userfullname" }, this.userfullname),
-      this.renderCaretIcon()));
-  }
-  retrieveLiTextColor() {
-    if (this.theme === ThemeVariant.light)
-      return "black";
-    return this.isMobile ? "white" : "black";
-  }
-  renderGhostDiv() {
-    return h("div", { ref: (el) => (this.gosthDiv = el) });
+    const direction = this.ismenuopen ? "up" : "down";
+    const colorClass = this.useinversecolors ? "inverse" : "";
+    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))));
+  }
+  getZLinkTextcolor() {
+    if (this.ismobile) {
+      return this.useinversecolors ? "black" : "white";
+    }
+    else {
+      return this.useinversecolors ? "white" : "black";
+    }
   }
   renderDropdownMenu() {
-    return (this.ismenuopen && (h("ul", { class: this.theme }, this.linkarray.map((link) => {
-      return (h("li", { id: link.id },
-        h("z-link", { textcolor: this.retrieveLiTextColor(), big: true, href: link.link, htmlid: link.id, target: link.target, icon: link.icon, onZLinkClick: this.emitDropdownMenuLinkClick }, link.label)));
-    }))));
+    const colorClass = this.useinversecolors ? "inverse" : "";
+    return (this.ismenuopen && (h("ul", { class: colorClass },
+      this.ismobile &&
+        h("li", { class: colorClass },
+          h("div", { class: `userfullname ${colorClass}` }, this.userfullname),
+          h("div", { class: `useremail ${colorClass}` }, this.useremail)),
+      this.linkarray && 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))))));
   }
   render() {
-    return (h("div", null,
-      this.logged && !this.isMobile && this.renderGhostDiv(),
-      h("div", { class: `${this.logged && this.ismenuopen ? "open" : ""}` },
-        this.logged ? this.renderLoggedButton() : this.renderGuestButton(),
-        this.logged && this.renderDropdownMenu())));
+    const openClass = `${this.logged && this.ismenuopen ? "open" : ""}`;
+    const colorClass = this.useinversecolors ? "inverse" : "";
+    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()))));
   }
   static get is() { return "z-user-dropdown"; }
   static get encapsulation() { return "shadow"; }
@@ -133,6 +137,23 @@ export class ZUserDropdown {
       "attribute": "userfullname",
       "reflect": false
     },
+    "useremail": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "user email"
+      },
+      "attribute": "useremail",
+      "reflect": false
+    },
     "menucontent": {
       "type": "string",
       "mutable": false,
@@ -155,33 +176,28 @@ export class ZUserDropdown {
       "attribute": "menucontent",
       "reflect": false
     },
-    "theme": {
-      "type": "string",
+    "useinversecolors": {
+      "type": "boolean",
       "mutable": false,
       "complexType": {
-        "original": "ThemeVariantBean",
-        "resolved": "\"dark\" | \"light\"",
-        "references": {
-          "ThemeVariantBean": {
-            "location": "import",
-            "path": "../../../beans"
-          }
-        }
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
       },
       "required": false,
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "theme variant, default 'dark'"
+        "text": "if inner components colors are inverted, or not, default false"
       },
-      "attribute": "theme",
+      "attribute": "useinversecolors",
       "reflect": false,
-      "defaultValue": "ThemeVariant.dark"
+      "defaultValue": "false"
     }
   }; }
   static get states() { return {
     "ismenuopen": {},
-    "isMobile": {}
+    "ismobile": {}
   }; }
   static get events() { return [{
       "method": "userButtonClick",

package/dist/collection/components/navigation/z-user-dropdown/styles.css

@@ -1,83 +1,175 @@
 :host {
-  font-family: var(--dashboard-font);
-  font-weight: var(--font-rg);
+  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: var(--bg-grey-900);
+  background-color: var(--bg-grey-900);
   border: none;
-  font-size: calc(var(--space-unit) * 2);
-  padding: calc(var(--space-unit) - 2px) 0;
+  padding: 0;
+  letter-spacing: 0.16px;
+  white-space: nowrap;
 }
 
-button > z-icon {
-  padding: 0 2px;
-  fill: var(--bg-white);
-}
-
-button > span {
-  padding: 0 6px;
-  color: var(--text-white);
-  font-weight: var(--font-sb);
-  line-height: 19px;
+button.inverse {
+  background-color: var(--bg-white);
 }
 
-button.light {
-  background: var(--bg-white);
+button div.firstline {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  max-width: 200px;
 }
 
-button.light > z-icon {
-  fill: var(--bg-grey-900);
+button.open div.firstline {
+  max-width: none;
 }
 
-button.light > span {
-  color: var(--bg-grey-900);
+z-icon {
+  padding: 0 2px;
+  fill: var(--text-white);
 }
 
-button > .userfullname {
-  display: none;
+z-icon.inverse {
+  fill: var(--bg-grey-900);
 }
 
 ul {
   position: absolute;
   left: 0;
-  padding: var(--space-unit)  0 0 0;
+  padding: calc(var(--space-unit) / 2) calc(var(--space-unit) * 2) 0 calc(var(--space-unit) * 2);
   width: 100%;
-  margin: 0;
-  background: var(--bg-grey-900);
+  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.light {
-  background: var(--bg-white);
+ul.inverse {
+  background-color: var(--bg-white);
 }
 
 ul > li {
   display: flex;
   justify-content: flex-end;
-  padding: var(--space-unit);
-  margin: 0 var(--space-unit);
+  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: var(--border-base) solid var(--bg-grey-700);
+  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);
 }
 
 /* Tablet breakpoint */
 @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 {
@@ -85,22 +177,19 @@ ul > li:last-child {
   }
 
   :host > div > div.open {
-    display: flex;
-    flex-direction: column;
-    flex-wrap: nowrap;
-    justify-content: flex-start;
-    align-items: flex-end;
-    align-content: stretch;
-    width: min-content;
     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: var(--bg-white);
-    border-radius: calc(var(--space-unit) * .5);
-    padding: calc(var(--space-unit) * .5) var(--space-unit);
+    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;
@@ -108,34 +197,74 @@ ul > li:last-child {
     justify-content: flex-end;
     align-items: end;
     align-content: center;
-    max-width: 200px;
   }
 
-  button > span {
-    padding: 0 var(--space-unit);
-  }
   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 > .userfullname {
-    display: initial;
-    white-space: nowrap;
-    overflow: hidden;
-    max-width: 250px;
-    text-overflow: ellipsis;
+  button.open.inverse {
+    border-top-color: var(--bg-grey-800);
+    background-color: var(--bg-grey-800);
   }
 
-  button.open > z-icon {
-    fill: var(--gray900);
+  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);
   }
 
-  button.open > span {
-    color: var(--gray900);
+  .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 {
@@ -150,31 +279,30 @@ ul > li:last-child {
     border-bottom-right-radius: var(--border-radius-base);
   }
 
-  ul > li {
-    color: var(--gray900);
-    border-bottom: var(--border-base) solid rgb(202, 204, 206);
-    padding: calc(var(--space-unit) * .5);
-    margin: unset;
+  ul.inverse {
+    border-bottom-color: var(--bg-grey-800);
+    background-color: var(--bg-grey-800);
   }
 
-  ul > li > * {
-    width: max-content;
+  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: none;
+    border-top: var(--border-base) solid var(--gray400);
+    padding-top: calc(var(--space-unit) + 3px);
   }
 
-  ul > li:last-child {
-    border-bottom: none;
-  }
 }
 
 /* Desktop breakpoint */
 @media only screen and (min-width: 1152px) {
-  button {
-    max-width: initial;
-  }
 }
 
 /* Wide breakpoint */

package/dist/esm/{index-ac6e10aa.js → index-0258069c.js}

@@ -248,4 +248,4 @@ var ZRegistroTableRowExpandedType;
   ZRegistroTableRowExpandedType["none"] = "none";
 })(ZRegistroTableRowExpandedType || (ZRegistroTableRowExpandedType = {}));
 
-export { AvatarSize as A, ButtonTypeEnum as B, CardVariants as C, DeviceEnum as D, ExpandableListButtonAlign as E, InputTypeEnum as I, KeyboardKeys as K, ListSize as L, NotificationType as N, PopoverPosition as P, SortDirectionEnum as S, ThemeVariant as T, ZRegistroTableRowExpandedType as Z, ButtonVariantEnum as a, ButtonSizeEnum as b, DividerSize as c, DividerOrientation as d, ListDividerType as e, ExpandableListStyle as f, LicenseTypeEnum as g, AlertTypesEnum as h, PopoverBorderRadius as i, PopoverShadow as j, keybordKeyCodeEnum as k, TableHeaderSize as l, InputStatusEnum as m, StatusTagStatus as n, TooltipPosition as o, PocketStatusEnum as p, TabOrientationEnum as q, TabSizeEnum as r, ToastNotificationTransitionsEnum as s, ToastNotificationPositionsEnum as t };
+export { AvatarSize as A, ButtonTypeEnum as B, CardVariants as C, DeviceEnum as D, ExpandableListButtonAlign as E, InputTypeEnum as I, KeyboardKeys as K, ListSize as L, NotificationType as N, PopoverPosition as P, SortDirectionEnum as S, ThemeVariant as T, ZRegistroTableRowExpandedType as Z, DividerOrientation as a, ButtonVariantEnum as b, ButtonSizeEnum as c, DividerSize as d, ListDividerType as e, ExpandableListStyle as f, LicenseTypeEnum as g, AlertTypesEnum as h, PopoverBorderRadius as i, PopoverShadow as j, keybordKeyCodeEnum as k, TableHeaderSize as l, InputStatusEnum as m, StatusTagStatus as n, TooltipPosition as o, PocketStatusEnum as p, TabOrientationEnum as q, TabSizeEnum as r, ToastNotificationTransitionsEnum as s, ToastNotificationPositionsEnum as t };

package/dist/esm/index.js

@@ -1,5 +1,5 @@
-import { c as colorFromId } from './utils-4da869b8.js';
-import './index-ac6e10aa.js';
+import { c as colorFromId } from './utils-0345e333.js';
+import './index-0258069c.js';
 import './breakpoints-c386984e.js';
 
 const Utils = {