@zanichelli/albe-web-components 5.5.5 → 5.5.6-cs1

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

@@ -1,5 +1,4 @@
-import { Component, Prop, h, Event, Element } from "@stencil/core";
-import { Host, State } from "@stencil/core/internal";
+import { h } from "@stencil/core";
 /**
  * @slot - link content
  */
@@ -27,7 +26,7 @@ export class ZLink {
     this.emitZLinkClick = this.emitZLinkClick.bind(this);
     this.emitZLinkInteraction = this.emitZLinkInteraction.bind(this);
   }
-  componentWillRender() {
+  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");
     }
@@ -41,9 +40,9 @@ export class ZLink {
   emitZLinkInteraction(e, linkId) {
     this.zLinkClick.emit({ e, linkId });
   }
-  componentDidRender() {
+  componentDidLoad() {
     if (this.icon) {
-      const height = parseFloat(window.getComputedStyle(this.hostElement).getPropertyValue('font-size'));
+      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;
@@ -51,259 +50,268 @@ export class ZLink {
     }
   }
   render() {
-    const style = this.big ? { "--font-size-link": "16px", "--font-weight-link": "600" } : {};
-    return (h(Host, { style: style },
-      h("a", { id: this.htmlid, href: this.href ? this.href : null, class: `${this.isdisabled ? "disabled" : ""}
-            ${this.isactive ? "active" : ""}
-            ${this.textcolor}
-            ${this.iswhite ? "white" : ""}
-            ${this.underline ? "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.toString(), "--z-icon-height": this.iconSize.toString() }, name: this.icon, height: this.iconSize, width: this.iconSize }),
-        this.iconposition === "left" && h("slot", null))));
+    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": {}
+  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
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "link text variant (optional)"
+      "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
       },
-      "attribute": "textcolor",
-      "reflect": false,
-      "defaultValue": "\"primary\""
-    },
-    "icon": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "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\""
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "link icon name (optional)"
+      "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"
       },
-      "attribute": "icon",
-      "reflect": false
-    },
-    "big": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "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"
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "big link version"
+      "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"
       },
-      "attribute": "big",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "iconposition": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "\"left\" | \"right\"",
-        "resolved": "\"left\" | \"right\"",
-        "references": {}
+      "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"
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "link icon position (optional)"
+      "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\""
       },
-      "attribute": "iconposition",
-      "reflect": false,
-      "defaultValue": "\"left\""
-    },
-    "underline": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "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
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "draw underline on text (optional)"
+      "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"
       },
-      "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"
+      "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\""
       },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
+      "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,26 +1,29 @@
 :host {
   --font-size-link: inherit;
   --font-weight-link: inherit;
-}
 
-:host {
-  font-family: var(--dashboard-font);
-  font-weight: var(--font-weight-link);
+  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 {
-  cursor: pointer;
-  color: var(--color-link-primary);
-  fill: var(--color-link-primary);
   display: inline-flex;
   align-items: center;
-  text-decoration: none;
   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,
@@ -52,10 +55,10 @@ a:visited {
 
 a.disabled,
 a.inverse.disabled {
-  cursor: default;
-  pointer-events: none;
   color: var(--color-disabled03);
+  cursor: default;
   fill: var(--color-disabled03);
+  pointer-events: none;
 }
 
 a.underline,
@@ -156,9 +159,9 @@ a.black.disabled {
 }
 
 a > z-icon:first-child {
-  margin-right: 8px;
+  margin-right: var(--space-unit);
 }
 
 a > z-icon:last-child {
-  margin-left: 8px;
+  margin-left: var(--space-unit);
 }