@zanichelli/albe-web-components 6.5.0 → 6.5.2

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

@@ -1,124 +0,0 @@
-import { h } from "@stencil/core";
-import { KeyboardKeyCode } from "../../../beans/index";
-import { handleKeyboardSubmit, getClickedElement, getElementTree } from "../../../utils/utils";
-export class ZMenuDropdown {
-  constructor() {
-    this.ismenuopen = false;
-    this.handleToggle = this.handleToggle.bind(this);
-    this.handleFocus = this.handleFocus.bind(this);
-  }
-  componentWillRender() {
-    this.linkarray = typeof this.menucontent === "string" ? JSON.parse(this.menucontent) : this.menucontent;
-  }
-  renderMenuOpen() {
-    if (this.ismenuopen) {
-      return (h("ul", null, this.linkarray.map((bean) => (h("li", null, h("z-link", { htmlid: bean.id, href: bean.link, icon: bean.icon }, bean.label))))));
-    }
-  }
-  renderButtonMenu() {
-    return (h("span", { class: "arrow" }, h("z-icon", { name: "caret-down", width: 14, height: 14 })));
-  }
-  retriveMenuClass() {
-    if (this.ismenuopen) {
-      return "menu-opened";
-    }
-  }
-  handleToggle() {
-    this.ismenuopen = !this.ismenuopen;
-  }
-  handleFocus(e) {
-    if (e instanceof KeyboardEvent && e.keyCode !== KeyboardKeyCode.TAB) {
-      return;
-    }
-    const tree = getElementTree(getClickedElement());
-    const menuParent = tree.find((elem) => elem.nodeName.toLowerCase() === "z-menu-dropdown");
-    if (!menuParent) {
-      document.removeEventListener("click", this.handleFocus);
-      document.removeEventListener("keyup", this.handleFocus);
-      this.ismenuopen = false;
-    }
-  }
-  render() {
-    return (h("a", { class: this.retriveMenuClass(), role: "button", tabindex: "0", onFocus: () => {
-        document.addEventListener("click", this.handleFocus);
-        document.addEventListener("keyup", this.handleFocus);
-      }, onKeyUp: (e) => handleKeyboardSubmit(e, this.handleToggle) }, h("div", { class: "container", onClick: () => this.handleToggle() }, h("span", { class: "user-wrapper" }, h("z-icon", { name: "user-avatar", width: 14, height: 14 }), h("span", { class: "user" }, this.nomeutente)), this.renderButtonMenu()), this.renderMenuOpen()));
-  }
-  static get is() { return "z-menu-dropdown"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["styles.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["styles.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "nomeutente": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "user name text"
-        },
-        "attribute": "nomeutente",
-        "reflect": false
-      },
-      "menucontent": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string | MenuItem[]",
-          "resolved": "MenuItem[] | string",
-          "references": {
-            "MenuItem": {
-              "location": "import",
-              "path": "../../../beans/index"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Json stringified or array to fill menu dropdown"
-        },
-        "attribute": "menucontent",
-        "reflect": false
-      },
-      "buttonid": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "unique button id"
-        },
-        "attribute": "buttonid",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "ismenuopen": {}
-    };
-  }
-}

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

@@ -1,146 +0,0 @@
-:host {
-  width: inherit;
-  height: 32px;
-  font-family: var(--dashboard-font);
-  font-size: 12px;
-  font-weight: var(--font-sb);
-  letter-spacing: 0.17px;
-}
-
-a,
-a:visited,
-a:active {
-  color: inherit;
-  text-decoration: none;
-}
-
-:host > a {
-  display: block;
-  border: var(--border-size-small) solid transparent;
-  background: var(--bg-grey-050);
-  border-radius: var(--border-radius);
-  color: var(--text-grey-800);
-  outline: none;
-}
-
-:host > a::-moz-focus-inner {
-  border: 0;
-}
-
-:host > a:hover,
-:host > a.menu-opened:hover {
-  color: var(--myz-blue-dark);
-  fill: var(--myz-blue-dark);
-}
-
-:host > a:focus {
-  border: var(--border-size-small) solid var(--myz-blue);
-  box-shadow: 0 0 2px 2px var(--myz-blue-light);
-  color: var(--myz-blue);
-  fill: var(--myz-blue);
-}
-
-:host > a:active {
-  border: var(--border-size-small) solid var(--myz-blue-light);
-  box-shadow: 0 2px 4px 0 rgb(0 0 0 / 40%);
-  color: var(--myz-blue-light);
-  fill: var(--myz-blue-light);
-}
-
-div.container {
-  position: relative;
-  display: flex;
-  height: 32px;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 var(--basex1);
-}
-
-div.container > span.user-wrapper {
-  display: flex;
-}
-
-div.container > span.user-wrapper > span.user {
-  overflow: hidden;
-  width: 30px;
-  padding: 0 var(--basex1);
-  cursor: pointer;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-div.container > span.arrow {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-div.container > span.arrow > z-icon {
-  transform: rotate(360deg);
-  transition: all 200ms linear;
-}
-
-ul {
-  padding: 0 calc(var(--space-unit) * 2);
-  margin: 0;
-  list-style: none;
-}
-
-li {
-  display: flex;
-  width: max-content;
-  height: var(--basex3);
-  align-items: center;
-  padding: calc(var(--space-unit) / 4) 0;
-}
-
-/* Expanded dropdown menu */
-.menu-opened {
-  position: inherit;
-  width: auto !important;
-  min-width: 147px;
-  padding-bottom: calc(var(--space-unit) * 2);
-}
-
-.menu-opened a,
-.menu-opened a:active,
-.menu-opened a:visited {
-  color: var(--myz-blue);
-  fill: var(--myz-blue);
-}
-
-.menu-opened a:hover {
-  color: var(--myz-blue-dark);
-  fill: var(--myz-blue-dark);
-}
-
-.menu-opened > div.container {
-  margin-bottom: var(--basex1);
-}
-
-.menu-opened > div.container > span.user-wrapper > span.user {
-  width: auto;
-}
-
-.menu-opened > div.container > span.arrow > z-icon {
-  transform: rotate(180deg);
-  transition: all 200ms linear;
-}
-
-/* Desktop breakpoint */
-
-@media only screen and (min-width: 1152px) {
-  :host > a {
-    width: 147px;
-    padding: 0 calc(var(--space-unit) / 4);
-  }
-
-  :host > a.menu-opened {
-    width: 147px;
-    padding-bottom: calc(var(--space-unit) * 2);
-  }
-
-  div.container > span.user-wrapper > span.user {
-    width: 80px;
-  }
-}

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

@@ -1,247 +0,0 @@
-import { 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";
-    }
-    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
-      }];
-  }
-}