@zanichelli/albe-web-components 6.6.9 → 6.6.10-test

package/dist/collection/components/navigation/z-link/index.js

@@ -1,317 +0,0 @@
-import { h } from "@stencil/core";
-/**
- * @slot - link content
- */
-export class ZLink {
-  constructor() {
-    /** link target (optional) */
-    this.target = "_self";
-    /** tabindex link attribute (optional) */
-    this.htmltabindex = 0;
-    /** disable link flag (optional) */
-    this.isdisabled = false;
-    /** active link flag (optional) */
-    this.isactive = false;
-    /** white variant flag (optional) */
-    this.iswhite = false;
-    /** link text variant (optional) */
-    this.textcolor = "primary";
-    /** big link version */
-    this.big = false;
-    /** link icon position (optional) */
-    this.iconposition = "left";
-    /** draw underline on text (optional) */
-    this.underline = false;
-    this.iconSize = 18;
-    this.emitZLinkClick = this.emitZLinkClick.bind(this);
-    this.emitZLinkInteraction = this.emitZLinkInteraction.bind(this);
-  }
-  componentWillLoad() {
-    if (this.iswhite) {
-      console.warn("z-link iswhite prop is deprecated and will be dropped in a next release, please use textcolor prop instead");
-    }
-    if (this.big) {
-      console.warn("z-link big prop is deprecated and will be dropped in a next release, please override --font-size-link and --font-weight-link variables instead");
-    }
-  }
-  emitZLinkClick(e, linkId) {
-    this.emitZLinkInteraction(e, linkId);
-  }
-  emitZLinkInteraction(e, linkId) {
-    this.zLinkClick.emit({ e, linkId });
-  }
-  componentDidLoad() {
-    if (this.icon) {
-      const height = parseFloat(window.getComputedStyle(this.hostElement).getPropertyValue("font-size"));
-      const currentSize = this.big ? 18 : Math.round(height * 1.125);
-      if (!Number.isNaN(currentSize) && this.iconSize !== currentSize) {
-        this.iconSize = currentSize;
-      }
-    }
-  }
-  render() {
-    return (h("a", { id: this.htmlid, href: this.href ? this.href : null, class: {
-        disabled: this.isdisabled,
-        active: this.isactive,
-        white: this.iswhite,
-        [this.textcolor || ""]: true,
-        underline: this.underline,
-      }, target: this.target, role: this.href ? "link" : "button", tabindex: this.isdisabled ? -1 : this.htmltabindex, onClick: (e) => this.emitZLinkClick(e, this.htmlid) }, this.iconposition === "right" && h("slot", null), this.icon && (h("z-icon", { style: {
-        "--z-icon-width": `${this.iconSize}px`,
-        "--z-icon-height": `${this.iconSize}px`,
-      }, name: this.icon })), this.iconposition === "left" && h("slot", null)));
-  }
-  static get is() { return "z-link"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["styles.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["styles.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "htmlid": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "link id (optional)"
-        },
-        "attribute": "htmlid",
-        "reflect": false
-      },
-      "href": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "link url (optional)"
-        },
-        "attribute": "href",
-        "reflect": false
-      },
-      "target": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "link target (optional)"
-        },
-        "attribute": "target",
-        "reflect": false,
-        "defaultValue": "\"_self\""
-      },
-      "htmltabindex": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "tabindex link attribute (optional)"
-        },
-        "attribute": "htmltabindex",
-        "reflect": false,
-        "defaultValue": "0"
-      },
-      "isdisabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "disable link flag (optional)"
-        },
-        "attribute": "isdisabled",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "isactive": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "active link flag (optional)"
-        },
-        "attribute": "isactive",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "iswhite": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "white variant flag (optional)"
-        },
-        "attribute": "iswhite",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "textcolor": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "\"primary\" | \"inverse\" | \"white\" | \"black\"",
-          "resolved": "\"black\" | \"inverse\" | \"primary\" | \"white\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "link text variant (optional)"
-        },
-        "attribute": "textcolor",
-        "reflect": false,
-        "defaultValue": "\"primary\""
-      },
-      "icon": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "link icon name (optional)"
-        },
-        "attribute": "icon",
-        "reflect": false
-      },
-      "big": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "big link version"
-        },
-        "attribute": "big",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "iconposition": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "\"left\" | \"right\"",
-          "resolved": "\"left\" | \"right\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "link icon position (optional)"
-        },
-        "attribute": "iconposition",
-        "reflect": false,
-        "defaultValue": "\"left\""
-      },
-      "underline": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "draw underline on text (optional)"
-        },
-        "attribute": "underline",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "iconSize": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "zLinkClick",
-        "name": "zLinkClick",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "emitted on link click, returns linkId"
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }];
-  }
-  static get elementRef() { return "hostElement"; }
-}

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

@@ -1,167 +0,0 @@
-:host {
-  --font-size-link: inherit;
-  --font-weight-link: inherit;
-
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-link);
-  font-weight: var(--font-weight-link);
-  line-height: inherit;
-  outline: none;
-}
-
-:host([big]) {
-  --font-size-link: 16px;
-  --font-weight-link: var(--font-sb);
-}
-
-a {
-  display: inline-flex;
-  align-items: center;
-  padding: calc(var(--space-unit) * 0.5) 0;
-  border-top: var(--border-size-medium) solid transparent;
-  border-bottom: var(--border-size-medium) solid transparent;
-  color: var(--color-link-primary);
-  cursor: pointer;
-  fill: var(--color-link-primary);
-  text-decoration: none;
-}
-
-a:hover,
-a:focus,
-a:active {
-  text-decoration: underline;
-}
-
-a.active {
-  color: var(--color-active-link);
-  fill: var(--color-active-link);
-}
-
-a:hover,
-a:focus {
-  color: var(--color-hover-link);
-  fill: var(--color-hover-link);
-}
-
-a:active {
-  color: var(--color-pressed-link);
-  fill: var(--color-pressed-link);
-}
-
-a:visited {
-  color: var(--color-visited-link);
-  fill: var(--color-visited-link);
-}
-
-a.disabled,
-a.inverse.disabled {
-  color: var(--color-disabled03);
-  cursor: default;
-  fill: var(--color-disabled03);
-  pointer-events: none;
-}
-
-a.underline,
-a.underline:active,
-a.underline:hover,
-a.underline:visited,
-a.underline.disabled,
-a.underline.black,
-a.underline.white {
-  text-decoration: underline;
-}
-
-a.disabled,
-a.disabled:active,
-a.disabled:visited,
-a.disabled:hover {
-  text-decoration: none;
-}
-
-a.inverse {
-  color: var(--color-inverse-link);
-  fill: var(--color-inverse-link);
-}
-
-a.inverse.active {
-  color: var(--color-inverse-active-link);
-  fill: var(--color-inverse-active-link);
-}
-
-a.inverse:hover,
-a.inverse:focus {
-  color: var(--color-inverse-hover-link);
-  fill: var(--color-inverse-hover-link);
-}
-
-a.inverse:active {
-  color: var(--color-inverse-pressed-link);
-  fill: var(--color-inverse-pressed-link);
-}
-
-a.inverse:visited {
-  color: var(--color-inverse-visited-link);
-  fill: var(--color-inverse-visited-link);
-}
-
-a.black {
-  color: var(--gray800);
-  fill: var(--gray800);
-  text-decoration: none;
-}
-
-a.black:hover,
-a.black.active {
-  color: var(--color-black);
-  fill: var(--color-black);
-}
-
-a.black:visited {
-  color: var(--gray800);
-  fill: var(--gray800);
-}
-
-a.black:hover,
-a.black:focus,
-a.black:active {
-  text-decoration: underline;
-}
-
-a.black:active {
-  color: var(--gray700);
-  fill: var(--gray700);
-}
-
-a.white,
-a.white:active,
-a.white:hover,
-a.white.active {
-  color: var(--bg-white);
-  fill: var(--bg-white);
-  text-decoration: none;
-}
-
-a.white:visited {
-  color: var(--bg-white);
-  fill: var(--bg-white);
-}
-
-a.white:hover,
-a.white:focus,
-a.white:active {
-  text-decoration: underline;
-}
-
-a.white.disabled,
-a.black.disabled {
-  color: var(--gray500);
-  fill: var(--gray500);
-}
-
-a > z-icon:first-child {
-  margin-right: var(--space-unit);
-}
-
-a > z-icon:last-child {
-  margin-left: var(--space-unit);
-}

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

@@ -1,225 +0,0 @@
-import { h, Host } from "@stencil/core";
-/**
- * @slot - Menu label
- * @slot header - Header to display as the first entry of the open menu.
- * @slot item - Single entry of the section. Can be slotted multiple times to insert items onto the menu. Use `z-menu-section` for submenus.
- */
-export class ZMenu {
-  constructor() {
-    /**
-     * Flag to set the display mode of the list.
-     * If true, the list will be absolutely positioned under the menu label,
-     * stacked beneath it otherwise.
-     * @default false
-     */
-    this.floating = false;
-    /**
-     * The opening state of the menu.
-     * @default false
-     */
-    this.open = false;
-    this.toggle = this.toggle.bind(this);
-    this.checkContent = this.checkContent.bind(this);
-    this.onItemsChange = this.onItemsChange.bind(this);
-  }
-  toggle() {
-    if (!this.hasContent) {
-      return;
-    }
-    this.open = !this.open;
-    this.open ? this.opened.emit() : this.closed.emit();
-  }
-  /** Close the floating list when a click is performed outside of this Element. */
-  handleClick(ev) {
-    if (!this.floating || !this.open || this.hostElement.contains(ev.target)) {
-      return;
-    }
-    this.reflow();
-    this.open = false;
-    this.closed.emit();
-  }
-  onOpenChanged() {
-    if (this.open) {
-      this.reflow(true);
-    }
-    else {
-      cancelAnimationFrame(this.raf);
-    }
-  }
-  componentWillLoad() {
-    this.checkContent();
-  }
-  /**
-   * Correctly set position of the floating menu in order to prevent overflow.
-   * @param live Should run the method on every refresh frame.
-   */
-  reflow(live = false) {
-    if (this.content) {
-      const { style } = this.content;
-      const { left } = this.hostElement.getBoundingClientRect();
-      const widthPx = getComputedStyle(this.content).width;
-      const width = widthPx ? parseFloat(widthPx.replace("px", "")) : 375;
-      const safeScrollbarSpace = 30;
-      style.left = `${Math.min(window.innerWidth - left - width - safeScrollbarSpace, 0)}px`;
-    }
-    if (live) {
-      this.raf = requestAnimationFrame(this.reflow.bind(this, live));
-    }
-  }
-  /**
-   * Check if some content slot is set.
-   */
-  checkContent() {
-    this.hasHeader = !!this.hostElement.querySelectorAll('[slot="header"]').length;
-    this.hasContent = !!this.hostElement.querySelectorAll('[slot="item"]').length || this.hasHeader;
-  }
-  /**
-   * Set `menuitem` role to all menu items.
-   */
-  onItemsChange() {
-    this.checkContent();
-    const items = this.hostElement.querySelectorAll('[slot="item"]');
-    items === null || items === void 0 ? void 0 : items.forEach((item) => item.setAttribute("role", "menuitem"));
-  }
-  renderMenuLabel() {
-    if (this.hasContent) {
-      return (h("button", { class: "menu-label", "aria-expanded": this.open ? "true" : "false", "aria-label": this.open ? "Chiudi menù" : "Apri menù", onClick: this.toggle }, h("div", { class: "menu-label-content" }, h("slot", null), h("z-icon", { name: this.open ? "chevron-up" : "chevron-down" }))));
-    }
-    return (h("div", { class: "menu-label" }, h("div", { class: "menu-label-content" }, h("slot", null))));
-  }
-  render() {
-    return (h(Host, null, this.renderMenuLabel(), h("div", { class: "content", ref: (el) => {
-        this.content = el;
-      }, hidden: !this.open }, this.hasHeader && (h("header", { class: "header" }, h("slot", { name: "header", onSlotchange: this.checkContent }))), h("div", { class: "items", role: "menu" }, h("slot", { name: "item", onSlotchange: this.onItemsChange })))));
-  }
-  static get is() { return "z-menu"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["styles.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["styles.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "active": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Flag to set the active status of the menu."
-        },
-        "attribute": "active",
-        "reflect": true
-      },
-      "floating": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "false"
-            }],
-          "text": "Flag to set the display mode of the list.\nIf true, the list will be absolutely positioned under the menu label,\nstacked beneath it otherwise."
-        },
-        "attribute": "floating",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "open": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "false"
-            }],
-          "text": "The opening state of the menu."
-        },
-        "attribute": "open",
-        "reflect": true,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "hasHeader": {},
-      "hasContent": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "opened",
-        "name": "opened",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "The menu has been opened."
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }, {
-        "method": "closed",
-        "name": "closed",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "The menu has been closed."
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }];
-  }
-  static get elementRef() { return "hostElement"; }
-  static get watchers() {
-    return [{
-        "propName": "open",
-        "methodName": "onOpenChanged"
-      }];
-  }
-  static get listeners() {
-    return [{
-        "name": "click",
-        "method": "handleClick",
-        "target": "document",
-        "capture": false,
-        "passive": false
-      }];
-  }
-}