@zanichelli/albe-web-components 6.5.0-offcanvasTest3 → 6.5.1

package/dist/collection/components/navigation/z-app-topbar/index.js

@@ -1,156 +0,0 @@
-import { h, Host } from "@stencil/core";
-import { DividerOrientation, ThemeVariant } from "../../../beans";
-import { mobileBreakpoint } from "../../../constants/breakpoints";
-export class ZAppTopbar {
-  constructor() {
-    /** theme variant, default 'dark' */
-    this.theme = ThemeVariant.DARK;
-    this.topbarLinks = [];
-  }
-  handleResize() {
-    this.isMobile = window.innerWidth <= mobileBreakpoint;
-  }
-  componentWillLoad() {
-    this.isMobile = window.screen.width <= mobileBreakpoint || window.innerWidth <= mobileBreakpoint;
-  }
-  componentWillRender() {
-    if (this.topbarContent) {
-      this.topbarLinks = typeof this.topbarContent === "string" ? JSON.parse(this.topbarContent) : this.topbarContent;
-    }
-  }
-  renderTopbarLinks() {
-    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)));
-  }
-  render() {
-    return (h(Host, { class: {
-        [this.theme]: true,
-        "limited-width": !!this.contentMaxWidth,
-      } }, h("div", { id: "content-container", style: this.contentMaxWidth ? { "--mw": `${this.contentMaxWidth}px` } : {} }, h("div", { id: "left-panel", class: "content-panel" }, h("z-logo", { mobileLogo: this.isMobile, width: this.isMobile ? 32 : 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" })))));
-  }
-  static get is() { return "z-app-topbar"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["styles.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["styles.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "theme": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "ThemeVariant",
-          "resolved": "ThemeVariant.DARK | ThemeVariant.LIGHT",
-          "references": {
-            "ThemeVariant": {
-              "location": "import",
-              "path": "../../../beans"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "theme variant, default 'dark'"
-        },
-        "attribute": "theme",
-        "reflect": false,
-        "defaultValue": "ThemeVariant.DARK"
-      },
-      "contentMaxWidth": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "maximum width of topbar content"
-        },
-        "attribute": "content-max-width",
-        "reflect": false
-      },
-      "topbarContent": {
-        "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 string or MenuItem array to define topbar links"
-        },
-        "attribute": "topbar-content",
-        "reflect": false
-      },
-      "logoLink": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "link URL used by z-logo"
-        },
-        "attribute": "logo-link",
-        "reflect": false
-      },
-      "showAppSwitcher": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "add app-switcher"
-        },
-        "attribute": "show-app-switcher",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "isMobile": {}
-    };
-  }
-  static get listeners() {
-    return [{
-        "name": "resize",
-        "method": "handleResize",
-        "target": "window",
-        "capture": false,
-        "passive": true
-      }];
-  }
-}

package/dist/collection/components/navigation/z-app-topbar/styles.css

@@ -1,65 +0,0 @@
-:host {
-  position: sticky;
-  z-index: 99;
-  top: 0;
-  display: block;
-  height: calc(var(--space-unit) * 6);
-  box-sizing: border-box;
-  padding: calc(var(--space-unit) / 2) calc(var(--space-unit) * 2);
-  background-color: var(--gray900);
-  border-radius: var(--border-no-radius);
-}
-
-:host(.light) {
-  background-color: var(--color-white);
-}
-
-:host > div {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-:host(.limited-width) #content-container {
-  --mw: none;
-
-  max-width: var(--mw);
-  margin: auto;
-}
-
-.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(--font-family-sans);
-  font-size: 14px;
-  font-weight: var(--font-sb);
-  letter-spacing: 0.3px;
-  line-height: 20px;
-}
-
-/* Tablet breakpoint */
-@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: calc(var(--space-unit) * 3);
-  }
-}

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;
-  }
-}