@zanichelli/albe-web-components 2.31.2 → 2.33.1

package/dist/collection/components/navigation/z-navigation-tabs/styles.css

@@ -1,117 +0,0 @@
-:host {
-  --safe-scroll-area: 4px;
-  --negative-safe-scroll-area: calc(-1 * var(--safe-scroll-area));
-
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  z-index: 0;
-  margin: var(--negative-safe-scroll-area);
-  padding: var(--safe-scroll-area);
-  font-family: var(--font-family-sans);
-  font-weight: var(--font-rg);
-  overflow: hidden;
-}
-
-:host,
-:host *,
-::slotted(*) {
-  box-sizing: border-box;
-}
-
-::-webkit-scrollbar {
-  display: none;
-}
-
-button.navigation {
-  position: absolute;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 0;
-  padding: 0;
-  background: var(--color-white);
-  border: none;
-  outline: none;
-  fill: var(--color-primary01);
-  border-radius: var(--border-no-radius);
-  cursor: pointer;
-  z-index: 1;
-}
-
-button.navigation:focus {
-  fill: var(--color-primary01);
-  box-shadow: var(--shadow-focus-primary);
-}
-
-button.navigation:disabled {
-  display: none;
-}
-
-nav {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  overflow: auto;
-  margin: var(--negative-safe-scroll-area);
-  padding: var(--safe-scroll-area);
-  scroll-padding: var(--safe-scroll-area);
-
-  /* hide scrollbar in Firefox */
-  scrollbar-width: none;
-}
-
-:host([orientation='horizontal']) nav {
-  width: 100%;
-}
-
-:host([orientation='horizontal']) button.navigation {
-  top: 0;
-  height: 100%;
-  width: calc((var(--space-unit) * 4) + var(--safe-scroll-area));
-}
-
-:host([orientation='horizontal']) button.navigation:first-child {
-  left: 0;
-  padding-left: var(--safe-scroll-area);
-  box-shadow: 5px 0px var(--safe-scroll-area) var(--negative-safe-scroll-area) rgba(66, 69, 72, 0.40);
-}
-
-:host([orientation='horizontal']) button.navigation:last-child {
-  right: 0;
-  padding-right: 4px;
-  box-shadow: -5px 0px var(--safe-scroll-area) var(--negative-safe-scroll-area) rgba(66, 69, 72, 0.40);
-}
-
-/* Orientation vertical */
-:host([orientation='vertical']) {
-  flex-direction: column;
-}
-
-:host([orientation='vertical']) nav {
-  flex-direction: column;
-  align-items: stretch;
-  height: 100%;
-}
-
-:host([orientation='vertical']) button.navigation {
-  left: 0;
-  width: 100%;
-  height: calc((var(--space-unit) * 4) + var(--safe-scroll-area));
-}
-
-:host([orientation='vertical']) button.navigation:first-child {
-  top: 0;
-  padding-top: var(--safe-scroll-area);
-  box-shadow: 0px 5px var(--safe-scroll-area) var(--negative-safe-scroll-area) rgba(66, 69, 72, 0.40);
-}
-
-:host([orientation='vertical']) button.navigation:last-child {
-  bottom: 0;
-  padding-bottom: var(--safe-scroll-area);
-  box-shadow: 0px -5px var(--safe-scroll-area) var(--negative-safe-scroll-area) rgba(66, 69, 72, 0.40);
-}
-
-:host([size='small'][orientation='vertical']) button.navigation {
-  height: calc(var(--space-unit) * 4);
-}

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

@@ -1,252 +0,0 @@
-import { Component, Prop, State, Event, Listen, h, Host } from "@stencil/core";
-import { mobileBreakpoint } from "../../../constants/breakpoints";
-export class ZUserDropdown {
-  constructor() {
-    /** 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 },
-        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"; }
-  static get originalStyleUrls() { return {
-    "$": ["styles.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["styles.css"]
-  }; }
-  static get properties() { return {
-    "logged": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "logged status flag"
-      },
-      "attribute": "logged",
-      "reflect": false
-    },
-    "userFullName": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "user full name"
-      },
-      "attribute": "user-full-name",
-      "reflect": false
-    },
-    "userEmail": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "user email"
-      },
-      "attribute": "user-email",
-      "reflect": false
-    },
-    "menuContent": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string | MenuItem[]",
-        "resolved": "MenuItem[] | string",
-        "references": {
-          "MenuItem": {
-            "location": "import",
-            "path": "../../../beans"
-          }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Json stringified or array to fill menu dropdown"
-      },
-      "attribute": "menu-content",
-      "reflect": false
-    },
-    "useInverseColors": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "if inner components colors are inverted, or not, default false"
-      },
-      "attribute": "use-inverse-colors",
-      "reflect": false,
-      "defaultValue": "false"
-    }
-  }; }
-  static get states() { return {
-    "isMenuOpen": {},
-    "isMobile": {}
-  }; }
-  static get events() { return [{
-      "method": "userButtonClick",
-      "name": "userButtonClick",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted on enter or user Button click, returns isMenuOpen (bool)"
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "dropdownMenuLinkClick",
-      "name": "dropdownMenuLinkClick",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted on dropdown menu zlink click, returns event"
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }]; }
-  static get listeners() { return [{
-      "name": "resize",
-      "method": "handleResize",
-      "target": "window",
-      "capture": false,
-      "passive": true
-    }, {
-      "name": "orientationchange",
-      "method": "handleOrientationChange",
-      "target": "window",
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "click",
-      "method": "handleClickOutside",
-      "target": "window",
-      "capture": false,
-      "passive": false
-    }]; }
-}

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

@@ -1,315 +0,0 @@
-:host {
-  background-color: var(--gray900);
-}
-
-:host(.inverse) {
-  background-color: var(--color-white);
-}
-
-button {
-  cursor: pointer;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  margin: 0;
-  background-color: var(--gray900);
-  border: none;
-  padding: 0;
-  letter-spacing: 0.16px;
-  white-space: nowrap;
-}
-
-button.inverse {
-  background-color: var(--color-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(--color-white);
-}
-
-z-icon.inverse {
-  fill: var(--gray900);
-}
-
-ul {
-  box-sizing: border-box;
-  position: absolute;
-  left: 0;
-  padding: calc(var(--space-unit) / 2) calc(var(--space-unit) * 2) 0 calc(var(--space-unit) * 2);
-  width: 100%;
-  margin: calc(var(--space-unit) * 1.5) 0 0 0;
-  background-color: var(--gray900);
-  font-family: var(--font-family-sans);
-  font-weight: var(--font-sb);
-  font-size: 14px;
-  line-height: 20px;
-  letter-spacing: 0.3px;
-}
-
-ul.inverse {
-  background-color: var(--color-white);
-}
-
-ul > li {
-  display: flex;
-  justify-content: flex-end;
-  white-space: nowrap;
-  padding: calc(var(--space-unit) * 1.5 - 1px) 0;
-  margin: 0;
-  border-bottom: var(--border-base) solid var(--gray700);
-}
-
-ul > li.inverse {
-  border-bottom-color: var(--gray400);
-}
-
-ul > li:first-child {
-  border-top: none;
-  padding-top: 0;
-  padding-bottom: calc(var(--space-unit) + 6px);
-  flex-direction: column;
-  align-items: end;
-}
-
-ul > li:last-child {
-  border-bottom: none;
-  margin-bottom: 0;
-}
-
-#guestbutton {
-  box-sizing: border-box;
-  display: inline-flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  font-family: var(--font-family-sans);
-  font-weight: var(--font-sb);
-  font-size: 14px;
-  line-height: 1;
-  letter-spacing: 0.3px;
-  border-width: var(--border-size-medium);
-  border-style: solid;
-  border-radius: var(--border-radius);
-  vertical-align: middle;
-  text-transform: uppercase;
-  text-decoration: none;
-  cursor: pointer;
-  outline: none;
-  fill: currentColor;
-  height: 32px;
-  min-width: 32px;
-  padding: 0 calc(var(--space-unit) * 2);
-  background-color: var(--color-white);
-  border-color: var(--color-white);
-  color: var(--gray800);
-}
-
-#guestbutton.inverse {
-  background-color: var(--gray800);
-  border-color: var(--gray800);
-  color: var(--color-white);
-}
-
-.userfullname {
-  padding: 0;
-  overflow: hidden;
-  max-width: 250px;
-  text-overflow: ellipsis;
-  width: 100%;
-  color: var(--color-white);
-  font-family: var(--font-family-sans);
-  font-weight: var(--font-sb);
-  font-size: 16px;
-  line-height: 24px;
-  letter-spacing: 0;
-  text-align: right;
-}
-
-.userfullname.inverse {
-  color: var(--gray800);
-}
-
-.useremail {
-  color: var(--color-white);
-  font-family: var(--font-family-sans);
-  font-weight: var(--font-rg);
-  font-size: 12px;
-  line-height: 16px;
-  letter-spacing: 0.32px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  width: 100%;
-  text-align: right;
-}
-
-.useremail.inverse {
-  color: var(--gray800);
-}
-
-/* Tablet breakpoint */
-@media only screen and (min-width: 768px) {
-  :host {
-    height: calc(var(--space-unit) * 4);
-    background-color: var(--gray900);
-  }
-
-  :host(.inverse) {
-    background-color: var(--color-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(--color-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(--gray800);
-  }
-
-  button {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    justify-content: flex-end;
-    align-items: end;
-    align-content: center;
-  }
-
-  button.open {
-    background-color: var(--color-white);
-    border-top: var(--border-size-small) solid var(--color-white);
-    border-top-left-radius: calc(var(--space-unit) * .5);
-    border-top-right-radius: calc(var(--space-unit) * .5);
-    max-width: initial;
-    margin-left: var(--space-unit);
-    padding-right: var(--space-unit);
-  }
-
-  button.open.inverse {
-    border-top-color: var(--gray800);
-    background-color: var(--gray800);
-  }
-
-  button:not(.open) z-icon {
-    fill: var(--color-white);
-  }
-
-  button:not(.open) z-icon.inverse {
-    fill: var(--gray800);
-  }
-
-  button.open z-icon {
-    fill: var(--gray800);
-  }
-
-  button.open z-icon.inverse {
-    fill: var(--color-white);
-  }
-
-  .userfullname {
-    font-family: var(--font-family-sans);
-    font-weight: var(--font-sb);
-    font-size: 14px;
-    line-height: 20px;
-    letter-spacing: 0.16px;
-    padding: 0 calc(var(--space-unit) - 6px) 0 calc(var(--space-unit) - 2px);
-    width: auto;
-  }
-
-  .userfullname.inverse {
-    color: var(--gray800);
-  }
-
-  button.open div.userfullname {
-    color: var(--gray800);
-    max-width: none;
-    text-overflow: clip;
-  }
-
-  button.open div.userfullname.inverse {
-    color: var(--color-white);
-  }
-
-  .useremail {
-    padding-right: calc(var(--space-unit) * 3 - 2px);
-    box-sizing: border-box;
-  }
-
-  button.open div.useremail {
-    color: var(--gray800);
-  }
-
-  button.open div.useremail.inverse {
-    color: var(--color-white);
-  }
-
-  ul {
-    position: initial;
-    left: initial;
-    padding: 0;
-    width: 100%;
-    background-color: var(--color-white);
-  }
-
-  ul.inverse {
-    border-bottom-color: var(--gray800);
-    background-color: var(--gray800);
-  }
-
-  ul > li {
-    color: var(--gray800);
-    border-bottom: var(--border-base) solid var(--gray400);
-    margin: 0 var(--space-unit);
-  }
-
-  ul > li.inverse {
-    color: var(--color-white);
-  }
-
-  ul > li:first-child {
-    border-top: var(--border-base) solid var(--gray400);
-    padding-top: calc(var(--space-unit) + 3px);
-    padding-bottom: calc(var(--space-unit) + 5px);
-  }
-}
-
-/* Desktop breakpoint */
-@media only screen and (min-width: 1152px) {
-}
-
-/* Wide breakpoint */
-@media only screen and (min-width: 1366px) {
-}

package/dist/collection/components/notification/z-candybar/index.js

@@ -1,18 +0,0 @@
-import { Component, h } from "@stencil/core";
-/**
- * @slot content - fill the content of the candybar (full width, full height)
- */
-export class ZCandybar {
-  render() {
-    return (h("div", null,
-      h("slot", { name: "content" })));
-  }
-  static get is() { return "z-candybar"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["styles.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["styles.css"]
-  }; }
-}