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

package/www/build/z-typography.entry.js

@@ -1,25 +0,0 @@
-import { r as registerInstance, h, e as Host, g as getElement } from './index-44936066.js';
-
-const stylesCss = ":host>*{font-family:var(--dashboard-font);margin:0}:host(.regular)>*{font-weight:var(--font-rg)}:host(.semibold)>*{font-weight:600}:host(.light)>*{font-weight:300}:host(.h1)>*{font-size:32px;line-height:40px}:host(.h2)>*{font-size:28px;line-height:36px}:host(.h3)>*{font-size:24px;line-height:32px}:host(.h4)>*{font-size:20px;line-height:28px}:host(.b1)>*{font-size:20px;line-height:28px}:host(.b2)>*{font-size:18px;line-height:28px}:host(.b3)>*{font-size:16px;line-height:24px}:host(.b4)>*{font-size:14px;line-height:20px}:host(.b5)>*{font-size:12px;line-height:16px}";
-
-const ZTypography = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.variant = "regular";
-  }
-  render() {
-    const el = document.createElement(this.component || "span");
-    el.innerHTML = `<slot />`;
-    this.hostElement.shadowRoot.appendChild(el);
-    return (h(Host, { class: {
-        [this.level]: Boolean(this.level),
-        regular: this.variant === "regular",
-        semibold: this.variant === "semibold",
-        light: this.variant === "light"
-      } }));
-  }
-  get hostElement() { return getElement(this); }
-};
-ZTypography.style = stylesCss;
-
-export { ZTypography as z_typography };

package/www/build/z-user-dropdown.entry.js

@@ -1,91 +0,0 @@
-import { r as registerInstance, f as createEvent, h, e as Host } from './index-44936066.js';
-import { m as mobileBreakpoint } from './breakpoints-c386984e.js';
-
-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)}}";
-
-const ZUserDropdown = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.userButtonClick = createEvent(this, "userButtonClick", 7);
-    this.dropdownMenuLinkClick = createEvent(this, "dropdownMenuLinkClick", 7);
-    /** if inner components colors are inverted, or not, default false */
-    this.useinversecolors = false;
-    this.ismenuopen = false;
-    this.handleLoggedButtonClick = this.handleLoggedButtonClick.bind(this);
-    this.emitDropdownMenuLinkClick = this.emitDropdownMenuLinkClick.bind(this);
-  }
-  componentDidLoad() {
-    this.setMobileAndDivToResizeWidth();
-  }
-  componentWillUpdate() {
-    this.setMobileAndDivToResizeWidth();
-  }
-  componentWillRender() {
-    if (this.menucontent) {
-      this.linkarray = typeof this.menucontent === "string" ? JSON.parse(this.menucontent) : this.menucontent;
-    }
-  }
-  setMobileAndDivToResizeWidth() {
-    var _a;
-    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;
-  }
-  handleOrientationChange() {
-    this.ismobile = screen.width <= mobileBreakpoint;
-  }
-  handleClickOutside(e) {
-    if (e.target.nodeName !== "Z-USER-DROPDOWN") {
-      this.ismenuopen = false;
-    }
-  }
-  handleLoggedButtonClick() {
-    this.ismenuopen = !this.ismenuopen;
-    this.emitUserButtonClick();
-  }
-  renderGuestButton() {
-    return (h("button", { id: "guestbutton", class: this.useinversecolors ? "inverse" : "", onClick: () => this.emitUserButtonClick() }, "ENTRA"));
-  }
-  renderLoggedButton() {
-    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() {
-    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() {
-    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()))));
-  }
-};
-ZUserDropdown.style = stylesCss;
-
-export { ZUserDropdown as z_user_dropdown };