@zanichelli/albe-web-components 2.33.1 → 2.33.3

package/dist/collection/snowflakes/myz/pocket/z-pocket-header/index.js

@@ -0,0 +1,86 @@
+import { Component, Prop, h, Event } from "@stencil/core";
+import { handleKeyboardSubmit } from "../../../../utils/utils";
+import Hammer from "hammerjs";
+/**
+ * @slot  - pocket header content
+ */
+export class ZPocketHeader {
+  constructor() {
+    this.emitPocketHeaderClick = this.emitPocketHeaderClick.bind(this);
+  }
+  emitPocketHeaderClick() {
+    this.pocketHeaderClick.emit({ id: this.pocketid });
+  }
+  emitPocketHeaderPan(direction) {
+    this.pocketHeaderPan.emit({ id: this.pocketid, direction });
+  }
+  componentDidLoad() {
+    // INFO: swipe handling
+    const mc = new Hammer(this.swipeWrap);
+    mc.get("pan").set({ direction: Hammer.DIRECTION_VERTICAL });
+    mc.on("panup", () => this.emitPocketHeaderPan("up"));
+    mc.on("pandown", () => this.emitPocketHeaderPan("down"));
+  }
+  render() {
+    return (h("header", { role: "button", tabindex: 0, onClick: () => this.emitPocketHeaderClick(), onKeyPress: (ev) => handleKeyboardSubmit(ev, this.emitPocketHeaderClick), ref: el => (this.swipeWrap = el) },
+      h("slot", null)));
+  }
+  static get is() { return "z-pocket-header"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get properties() { return {
+    "pocketid": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "pocket id"
+      },
+      "attribute": "pocketid",
+      "reflect": false
+    }
+  }; }
+  static get events() { return [{
+      "method": "pocketHeaderClick",
+      "name": "pocketHeaderClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted on pocket header click"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "pocketHeaderPan",
+      "name": "pocketHeaderPan",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted on pocket header pan"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+}

package/dist/collection/snowflakes/myz/pocket/z-pocket-header/styles.css

@@ -0,0 +1,40 @@
+:host {
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-rg);
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+:host > header {
+  background: var(--color-surface01);
+  border: var(--border-size-small) solid var(--color-surface03);
+  border-radius: var(--space-unit) var(--space-unit) 0px 0px;
+  height: 36px;
+  cursor: pointer;
+  display: flex;
+  flex-wrap: nowrap;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+
+:host > header:focus {
+  outline: none;
+}
+
+:host > header::-moz-focus-inner {
+  border: 0;
+}
+
+/* Tablet breakpoint */
+@media only screen and (min-width: 768px) {
+}
+
+/* Desktop breakpoint */
+@media only screen and (min-width: 1152px) {
+}
+
+/* Wide breakpoint */
+@media only screen and (min-width: 1366px) {
+}

package/dist/collection/snowflakes/myz/pocket/z-pocket-message/index.js

@@ -0,0 +1,23 @@
+import { Component, h } from "@stencil/core";
+/**
+ * @slot  - message body
+ * @slot cta - message CTAs
+ */
+export class ZPocketMessage {
+  render() {
+    return (h("div", null,
+      h("z-icon", { name: "exclamation-circle" }),
+      h("div", { class: "content" },
+        h("slot", null)),
+      h("div", { class: "ctaWrapper" },
+        h("slot", { name: "cta" }))));
+  }
+  static get is() { return "z-pocket-message"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+}

package/dist/collection/snowflakes/myz/pocket/z-pocket-message/styles.css

@@ -0,0 +1,53 @@
+:host {
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-rg);
+}
+
+:host > div {
+  color: var(--color-surface05);
+  fill: var(--color-surface05);
+  font-size: 14px;
+  border-bottom: var(--border-size-small) solid var(--color-surface03);
+  padding-top: calc(var(--space-unit) * 1.5);
+  display: grid;
+  grid-template-rows: auto auto;
+  grid-template-columns: 36px auto;
+}
+
+:host > div > z-icon {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+}
+
+:host > div > div.content {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  margin-bottom: var(--space-unit);
+}
+
+:host > div > div.ctaWrapper {
+  grid-row: 2 / 3;
+  grid-column: 1 / 3;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  margin-bottom: var(--space-unit);
+}
+
+/* Tablet breakpoint */
+@media only screen and (min-width: 768px) {
+  :host > div > div.ctaWrapper {
+    flex-direction: row;
+    grid-column: 2 / 3;
+  }
+}
+
+/* Desktop breakpoint */
+@media only screen and (min-width: 1152px) {
+}
+
+/* Wide breakpoint */
+@media only screen and (min-width: 1366px) {
+}

package/dist/collection/snowflakes/myz/topbar/index.js

@@ -0,0 +1,428 @@
+import { Component, Prop, h, State, Element, Listen, Watch, } from "@stencil/core";
+import { ButtonVariantEnum, } from "../../../beans";
+import { mobileBreakpoint, tabletBreakpoint, } from "../../../constants/breakpoints";
+/**
+ * @slot editors - top menu editors images bar (only with ismyz prop === true)
+ */
+export class ZMyzTopbar {
+  constructor() {
+    this.isMobile = true;
+    this.isMenuMobileOpen = false;
+    this.intMenuData = [];
+    this.extMenuData = [];
+    this.isLogged = false;
+  }
+  activeIntLinkChange(newValue) {
+    this.activeMenuItem = this.currentMenuItem = this.intMenuData.find((item) => item.id === newValue);
+  }
+  handleResize() {
+    this.isMobile = window.innerWidth <= mobileBreakpoint;
+  }
+  handleZListItemLinkClick() {
+    this.isMenuMobileOpen = false;
+  }
+  handleZListItemClick() {
+    this.isMenuMobileOpen = false;
+  }
+  componentWillLoad() {
+    if (this.intlinkdata) {
+      this.intMenuData =
+        typeof this.intlinkdata === "string"
+          ? JSON.parse(this.intlinkdata)
+          : this.intlinkdata;
+    }
+    this.activeMenuItem = this.currentMenuItem = this.intMenuData.find((item) => item.id === this.activeintlinkid);
+    if (this.extlinkdata) {
+      this.extMenuData =
+        typeof this.extlinkdata === "string"
+          ? JSON.parse(this.extlinkdata)
+          : this.extlinkdata;
+    }
+    if (this.userdata) {
+      this.userData =
+        typeof this.userdata === "string"
+          ? JSON.parse(this.userdata)
+          : this.userdata;
+      this.isLogged = this.userData.islogged;
+    }
+    this.handleResize();
+  }
+  renderLogoDiv() {
+    return (h("div", { class: "logo" },
+      h("z-logo", { link: this.logolink ? this.logolink : null, "target-blank": true, width: 144, height: 36, "image-alt": this.imagealt })));
+  }
+  renderIntMenu(menuItems) {
+    if (!this.isLogged || !this.ismyz)
+      return;
+    return (h("div", { id: "link-int", class: "link-int" }, menuItems.map((item) => this.renderIntMenuItem(item))));
+  }
+  renderIntMenuItem(menuItem) {
+    const { id, label, link } = menuItem;
+    return (h("span", null,
+      h("a", { href: link ? link : null, id: id, class: "menu-item", onClick: () => {
+          this.activeMenuItem = this.currentMenuItem = menuItem;
+          this.activeintlinkid = menuItem.id;
+          if (menuItem.subMenu)
+            this.handleToggleMobileMenuItem(menuItem.id);
+        }, onMouseEnter: () => {
+          this.activeMenuItem = menuItem;
+        }, onMouseLeave: () => {
+          this.activeMenuItem = this.currentMenuItem;
+        }, role: link ? "link" : "button", tabindex: this.getIntMenuItemTabindex(menuItem) },
+        h("span", null, label),
+        menuItem.subMenu ? h("i", null) : null),
+      h("svg", { height: "8", width: "16", class: {
+          hidden: !this.activeMenuItem || this.activeMenuItem.id !== id,
+        } },
+        h("polygon", { points: "8,0 16,8 0,8", class: "arrow" })),
+      this.isMobile && this.renderMenuItemsData(menuItem)));
+  }
+  getIntMenuItemTabindex(item) {
+    return this.intMenuData.indexOf(item) + 1;
+  }
+  handleToggleMobileMenuItem(elementId) {
+    if (!this.isMobile)
+      return;
+    this.element.shadowRoot
+      .querySelector(`#${elementId}`)
+      .classList.toggle("isopen");
+    this.element.shadowRoot
+      .querySelector("#mobile-dropdown-" + elementId)
+      .classList.toggle("visible");
+  }
+  renderMenuItemsData(menuItem) {
+    if (!menuItem.subMenu)
+      return null;
+    const listItems = menuItem.subMenu.map((item) => {
+      return {
+        id: item.id,
+        text: item.label,
+        link: item.link,
+        listitemid: item.id,
+      };
+    });
+    return this.renderMobileSubMenu(listItems, menuItem.id);
+  }
+  renderMobileSubMenu(menuItems, id) {
+    return (h("span", { class: "mobile-dropdown", id: id ? `mobile-dropdown-${id}` : "" },
+      h("z-myz-list", { list: menuItems })));
+  }
+  renderSubMenu(menuItem) {
+    if (!this.ismyz || !this.isLogged)
+      return;
+    if (!menuItem || !menuItem["subMenu"]) {
+      return h("div", { id: "dropdown-menu", class: `dropdown-menu hidden` });
+    }
+    return (h("div", { id: "dropdown-menu", class: `dropdown-menu` },
+      h("ul", { class: "dropdown-links" }, menuItem.subMenu.map((item) => (h("li", null,
+        h("a", { id: item.id, class: item.id === this.activesublinkid ? "active" : "", href: item.link ? item.link : null, role: item.link ? "link" : "button", tabindex: this.getIntMenuItemTabindex(menuItem) }, item.label)))))));
+  }
+  renderExtLinksIcons(icon) {
+    const width = window.innerWidth > 0 ? window.innerWidth : screen.width;
+    const hideIcons = width > mobileBreakpoint && width < tabletBreakpoint;
+    return !hideIcons && { icon };
+  }
+  renderExtMenu(menuItems) {
+    if (!this.isLogged)
+      return h("div", null);
+    return (h("div", { id: "link-ext", class: "link-ext" }, menuItems.map((menuItem) => {
+      const { id, label, link, icon } = menuItem;
+      return (h("span", { class: `link-ext-span${this.ismyz ? " myz" : ""}` },
+        h("z-link", Object.assign({ id: id, htmlid: id, href: link, iswhite: !!this.ismyz, target: "_blank", htmltabindex: 10 }, this.renderExtLinksIcons(icon)), label)));
+    })));
+  }
+  renderLoginDiv(userData) {
+    return (h("div", { class: "login" }, this.isLogged ? (h("z-menu-dropdown", { nomeutente: userData.name, menucontent: JSON.stringify(userData.userlinks) })) : (this.renderLoginButton())));
+  }
+  renderLoginButton() {
+    if (this.hideloginbutton) {
+      return;
+    }
+    return (h("z-button", { htmlid: "login-button", variant: this.ismyz ? ButtonVariantEnum.secondary : ButtonVariantEnum.tertiary, icon: "login", issmall: true }, "entra"));
+  }
+  renderMobileLoginDiv(userData) {
+    return (h("div", { id: "mobile-login", class: "mobile-login" },
+      h("span", null,
+        h("a", { class: "menu-item", id: "user-data", onClick: () => this.handleToggleMobileMenuItem("user-data"), role: "button" },
+          h("span", null,
+            h("z-icon", { name: "user-avatar", height: 16, width: 16 }),
+            userData.name),
+          h("i", null)),
+        this.renderUserData(userData))));
+  }
+  renderUserData(userData) {
+    if (this.isMobile && !userData)
+      return null;
+    const listItems = userData.userlinks.map((item) => {
+      return {
+        text: item.label,
+        link: item.link,
+        icon: item.icon,
+        listitemid: item.id,
+      };
+    });
+    return this.renderMobileSubMenu(listItems, "user-data");
+  }
+  renderDesktopHeader() {
+    return (h("header", { class: !this.ismyz ? "myz-out" : "" },
+      this.renderMainHeader(),
+      this.renderSubMenu(this.activeMenuItem)));
+  }
+  renderMainHeader() {
+    return (h("div", { id: "main-header", class: {
+        "main-header": true,
+        "myz-out": !this.ismyz,
+      } },
+      this.renderLogoDiv(),
+      this.renderIntMenu(this.intMenuData),
+      this.renderExtMenu(this.extMenuData),
+      this.renderLoginDiv(this.userData)));
+  }
+  renderMobileHeader() {
+    return (h("header", null,
+      this.renderMobileMenu(),
+      this.renderMobileMenuContent()));
+  }
+  renderMobileMenu() {
+    return (h("div", { id: "mobile-header", class: `mobile-header${this.ismyz ? "" : " myz-out"}` },
+      this.renderLogoDiv(),
+      this.renderMobileMenuToggle()));
+  }
+  renderMobileMenuToggle() {
+    if (!this.isLogged)
+      return this.renderLoginButton();
+    return (h("div", { class: "menu-mobile", id: "mobile-menu-wrapper", onClick: () => (this.isMenuMobileOpen = !this.isMenuMobileOpen) },
+      h("div", { class: `menu-toggle${this.isMenuMobileOpen ? " is-active" : ""}`, id: "mobile-menu" },
+        h("span", { class: "bar" }),
+        h("span", { class: "bar" }),
+        h("span", { class: "bar" })),
+      h("span", null, "Menu")));
+  }
+  renderMobileMenuContent() {
+    if (!this.isLogged)
+      return null;
+    return (h("div", { id: "mobile-content", class: {
+        "mobile-content": true,
+        open: this.isMenuMobileOpen,
+        "myz-out": !this.ismyz,
+      } },
+      this.renderMobileLoginDiv(this.userData),
+      this.ismyz && h("hr", null),
+      this.renderIntMenu(this.intMenuData),
+      h("hr", null),
+      this.renderExtMenu(this.extMenuData)));
+  }
+  render() {
+    return this.isMobile
+      ? this.renderMobileHeader()
+      : this.renderDesktopHeader();
+  }
+  static get is() { return "z-myz-topbar"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get properties() { return {
+    "intlinkdata": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string | MenuItem[]",
+        "resolved": "MenuItem[] | string",
+        "references": {
+          "MenuItem": {
+            "location": "import",
+            "path": "../../../beans"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "data to fill internal navigation links"
+      },
+      "attribute": "intlinkdata",
+      "reflect": false
+    },
+    "extlinkdata": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string | MenuItem[]",
+        "resolved": "MenuItem[] | string",
+        "references": {
+          "MenuItem": {
+            "location": "import",
+            "path": "../../../beans"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "data to fill external navigation links"
+      },
+      "attribute": "extlinkdata",
+      "reflect": false
+    },
+    "userdata": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string | HeaderUserData",
+        "resolved": "string | { islogged: boolean; id?: number; name?: string; usergroup: number; userlinks: MenuItem[]; }",
+        "references": {
+          "HeaderUserData": {
+            "location": "import",
+            "path": "../../../beans"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "data to fill user dropdown menu (optional)"
+      },
+      "attribute": "userdata",
+      "reflect": false
+    },
+    "ismyz": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "graphic flag to set myzanichelli style"
+      },
+      "attribute": "ismyz",
+      "reflect": false
+    },
+    "logolink": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "url to attach to logo (optional)"
+      },
+      "attribute": "logolink",
+      "reflect": false
+    },
+    "imagealt": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "alternative logo title text (optional)"
+      },
+      "attribute": "imagealt",
+      "reflect": false
+    },
+    "activeintlinkid": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "set current active menu link (optional)"
+      },
+      "attribute": "activeintlinkid",
+      "reflect": false
+    },
+    "activesublinkid": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "set current active sub menu link (optional)"
+      },
+      "attribute": "activesublinkid",
+      "reflect": false
+    },
+    "hideloginbutton": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "hide login button if true (optional)"
+      },
+      "attribute": "hideloginbutton",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "activeMenuItem": {},
+    "currentMenuItem": {},
+    "isMobile": {},
+    "isMenuMobileOpen": {}
+  }; }
+  static get elementRef() { return "element"; }
+  static get watchers() { return [{
+      "propName": "activeintlinkid",
+      "methodName": "activeIntLinkChange"
+    }]; }
+  static get listeners() { return [{
+      "name": "resize",
+      "method": "handleResize",
+      "target": "window",
+      "capture": false,
+      "passive": true
+    }, {
+      "name": "zListItemLinkClick",
+      "method": "handleZListItemLinkClick",
+      "target": undefined,
+      "capture": true,
+      "passive": false
+    }, {
+      "name": "zListItemClick",
+      "method": "handleZListItemClick",
+      "target": undefined,
+      "capture": true,
+      "passive": false
+    }]; }
+}