@zanichelli/albe-web-components 2.30.0-rc1 → 2.30.0-rc2

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

@@ -0,0 +1,86 @@
+:host {
+  display: block;
+  position: sticky;
+  box-sizing: border-box;
+  top: 0;
+  height: calc(var(--space-unit) * 6);
+  padding: calc(var(--space-unit) / 2) calc(var(--space-unit) * 2);
+  border-radius: var(--border-radius-min);
+  background-color: var(--bg-grey-900);
+  z-index: 99;
+}
+
+:host(.light) {
+  background-color: var(--bg-white);
+}
+
+:host > div {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+#left-panel {
+  display: flex;
+  gap: calc(var(--space-unit) + 2px);
+  align-items: center
+}
+
+#right-panel {
+  display: flex;
+  gap: calc(var(--space-unit) * 2);
+  align-items: center;
+}
+
+.right-action {
+  display: none;
+}
+
+#divider-container {
+  display: none;
+}
+
+z-link {
+  font-family: var(--dashboard-font);
+  font-weight: var(--font-sb);
+  font-size: 14px;
+  line-height: 20px;
+  letter-spacing: 0.3px;
+}
+
+z-logo {
+  margin-right: calc(var(--space-unit) - 2px);
+}
+
+/* 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);
+  }
+
+  .left-action {
+    display: none;
+  }
+
+  .right-action {
+    display: block;
+  }
+
+  #divider-container {
+    display: block;
+    height: 24px;
+  }
+}
+
+/* Desktop breakpoint */
+@media only screen and (min-width: 1152px) {
+}
+
+/* Wide breakpoint */
+@media only screen and (min-width: 1366px) {
+  #content-container.limited-width {
+    margin: auto;
+    max-width: var(--mw);
+  }
+  
+}

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

@@ -0,0 +1,309 @@
+import { Component, Prop, h, Event, Element } from "@stencil/core";
+import { Host, State } from "@stencil/core/internal";
+/**
+ * @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);
+  }
+  componentWillRender() {
+    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 });
+  }
+  componentDidRender() {
+    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() {
+    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))));
+  }
+  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": false,
+      "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

@@ -0,0 +1,160 @@
+:host {
+  --font-size-link: inherit;
+  --font-weight-link: inherit;
+}
+
+:host {
+  font-family: var(--dashboard-font);
+  font-weight: var(--font-weight-link);
+  font-size: var(--font-size-link);
+  line-height: inherit;
+  outline: none;
+}
+
+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) * .5) 0;
+  border-top: var(--border-size-medium) solid transparent;
+  border-bottom: var(--border-size-medium) solid transparent;
+}
+
+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 {
+  cursor: default;
+  pointer-events: none;
+  color: var(--color-disabled03);
+  fill: var(--color-disabled03);
+}
+
+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,
+a.black:visited {
+  color: var(--color-black);
+  fill: var(--color-black);
+}
+
+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(--gray300);
+  fill: var(--gray300);
+}
+
+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: 8px;
+}
+
+a > z-icon:last-child {
+  margin-left: 8px;
+}