@zanichelli/albe-web-components 2.33.1 → 2.33.3

package/dist/collection/components/pagination/z-pagination-page/index.js

@@ -0,0 +1,129 @@
+import { Component, Prop, h } from "@stencil/core";
+export class ZPaginationPage {
+  constructor() {
+    /** selected status flag */
+    this.isselected = false;
+    /** disabled status flag */
+    this.isdisabled = false;
+    /** visited status flag */
+    this.isvisited = false;
+  }
+  render() {
+    return (h("button", { id: this.pageid, "aria-label": this.ariaLabel ? this.ariaLabel : `Go to page ${this.value}`, class: { selected: this.isselected, visited: this.isvisited }, disabled: this.isdisabled, type: "button" }, this.value));
+  }
+  static get is() { return "z-pagination-page"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get properties() { return {
+    "pageid": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "html id"
+      },
+      "attribute": "pageid",
+      "reflect": false
+    },
+    "value": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "numeric page value (optional)"
+      },
+      "attribute": "value",
+      "reflect": false
+    },
+    "isselected": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "selected status flag"
+      },
+      "attribute": "isselected",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "isdisabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "disabled status flag"
+      },
+      "attribute": "isdisabled",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "isvisited": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "visited status flag"
+      },
+      "attribute": "isvisited",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "ariaLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "aria-label string"
+      },
+      "attribute": "aria-label",
+      "reflect": false
+    }
+  }; }
+}

package/dist/collection/components/pagination/z-pagination-page/styles.css

@@ -0,0 +1,57 @@
+:host {
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-sb);
+  display: inline-block;
+}
+
+:host > button {
+  cursor: pointer;
+  outline: none;
+  display: inline-block;
+  box-sizing: border-box;
+  margin: 0;
+  height: 48px;
+  line-height: 48px;
+  text-align: center;
+  border: none;
+  border-bottom: var(--border-size-large) solid transparent;
+  color: var(--color-primary01);
+  font-size: var(--font-size-2);
+  font-family: var(--font-family-sans);
+  font-weight: inherit;
+  background: transparent;
+  text-decoration: none;
+  transition: border-bottom 0.2s ease, font-size 0.2s ease;
+  min-width: 56px;
+}
+
+:host > button[disabled] {
+  pointer-events: none;
+  cursor: default;
+  color: var(--color-disabled02);
+}
+
+:host > button:hover {
+  border-bottom: var(--border-size-large) solid var(--color-hover-light);
+  background-color: var(--color-background);
+  text-decoration: none;
+  transition: border-bottom 0.2s ease, background-color 0.2s ease;
+}
+
+:host > button:focus {
+  border-bottom: var(--border-size-large) solid var(--color-hover-light);
+  box-shadow: var(--shadow-focus-primary);
+  background-color: var(--color-background);
+  text-decoration: none;
+}
+
+:host > button.visited {
+  border-color: var(--color-hover-light);
+  text-decoration: none;
+}
+
+:host > button.selected {
+  border-bottom: var(--border-size-large) solid var(--color-primary01);
+  font-size: var(--font-size-7);
+  transition: border-bottom 0.2s ease, font-size 0.2s ease;
+}

package/dist/collection/components/panel/z-panel-elem/index.js

@@ -0,0 +1,193 @@
+import { Component, Prop, h } from "@stencil/core";
+/**
+ * @slot `descr_slot_name` - description content
+ */
+export class ZPanelElem {
+  constructor() {
+    /** link target (optional) */
+    this.target = "_blank";
+    /** disabled status flag (optional) */
+    this.isdisabled = false;
+  }
+  renderIcon() {
+    if (this.isdisabled) {
+      return h("img", { src: this.imgurl, alt: this.imgalt });
+    }
+    return (h("a", { class: "elem-icon", href: this.url, target: this.target },
+      h("img", { src: this.imgurl, alt: this.imgalt })));
+  }
+  render() {
+    const elemId = this.elemid ? this.elemid : "";
+    return (h("div", { class: "panel-elem-container" },
+      (this.imgurl || this.imgalt) && (h("div", { class: "panel-elem-icon" }, this.renderIcon())),
+      h("div", { class: "panel-elem-link" },
+        h("z-link", { href: this.url, icon: this.linkicon, isdisabled: this.isdisabled, target: this.target, htmlid: elemId + "link_id" }, this.linklabel)),
+      this.descr_slot_name && (h("div", { class: "panel-elem-desc body-long-01" },
+        h("slot", { name: this.descr_slot_name })))));
+  }
+  static get is() { return "z-panel-elem"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get properties() { return {
+    "elemid": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "html element id (optional)"
+      },
+      "attribute": "elemid",
+      "reflect": false
+    },
+    "imgurl": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "image url source (optional)"
+      },
+      "attribute": "imgurl",
+      "reflect": false
+    },
+    "imgalt": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "alternative image text (optional)"
+      },
+      "attribute": "imgalt",
+      "reflect": false
+    },
+    "linkicon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "icon link name (optional)"
+      },
+      "attribute": "linkicon",
+      "reflect": false
+    },
+    "linklabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "link label text"
+      },
+      "attribute": "linklabel",
+      "reflect": false
+    },
+    "url": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "link url"
+      },
+      "attribute": "url",
+      "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": "\"_blank\""
+    },
+    "isdisabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "disabled status flag (optional)"
+      },
+      "attribute": "isdisabled",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "descr_slot_name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "name of slot container (optional)"
+      },
+      "attribute": "descr_slot_name",
+      "reflect": false
+    }
+  }; }
+}

package/dist/collection/components/panel/z-panel-elem/styles.css

@@ -0,0 +1,39 @@
+:host {
+  font-family: var(--dashboard-font);
+  font-weight: var(--font-rg);
+  width: inherit;
+}
+
+.panel-elem-container {
+  width: 100%;
+}
+
+.panel-elem-icon {
+  margin: auto calc(var(--space-unit) * 3);
+}
+
+.panel-elem-icon img {
+  display: block;
+  object-fit: contain;
+  max-width: 96px;
+  height: 32px;
+  margin: auto;
+}
+
+.panel-elem-link {
+  border-radius: var(--border-no-radius);
+  margin: var(--space-unit) auto 0;
+  text-align: center;
+  font-size: 12px;
+}
+
+.panel-elem-link > z-link {
+  font-weight: var(--font-sb);
+}
+
+.panel-elem-desc {
+  letter-spacing: 0.16px;
+  text-align: center;
+  margin: 0;
+  padding-top: var(--space-unit);
+}

package/dist/collection/components/typography/z-body/index.js

@@ -0,0 +1,66 @@
+import { Component, Prop, h } from "@stencil/core";
+export class ZBody {
+  constructor() {
+    this.variant = "regular";
+  }
+  render() {
+    return (h("z-typography", { component: this.component || "span", level: `b${this.level}`, variant: this.variant },
+      h("slot", null)));
+  }
+  static get is() { return "z-body"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "level": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "1 | 2 | 3 | 4 | 5",
+        "resolved": "1 | 2 | 3 | 4 | 5",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "level",
+      "reflect": false
+    },
+    "variant": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"regular\" | \"semibold\"",
+        "resolved": "\"regular\" | \"semibold\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "variant",
+      "reflect": false,
+      "defaultValue": "\"regular\""
+    },
+    "component": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "component",
+      "reflect": false
+    }
+  }; }
+}

package/dist/collection/components/typography/z-heading/index.js

@@ -0,0 +1,66 @@
+import { Component, Prop, h } from "@stencil/core";
+export class ZHeading {
+  constructor() {
+    this.variant = "regular";
+  }
+  render() {
+    return (h("z-typography", { component: this.component || `h${this.level}`, level: `h${this.level}`, variant: this.variant },
+      h("slot", null)));
+  }
+  static get is() { return "z-heading"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "level": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "1 | 2 | 3 | 4",
+        "resolved": "1 | 2 | 3 | 4",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "level",
+      "reflect": false
+    },
+    "variant": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"regular\" | \"semibold\" | \"light\"",
+        "resolved": "\"light\" | \"regular\" | \"semibold\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "variant",
+      "reflect": false,
+      "defaultValue": "\"regular\""
+    },
+    "component": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "component",
+      "reflect": false
+    }
+  }; }
+}

package/dist/collection/components/typography/z-typography/index.js

@@ -0,0 +1,84 @@
+import { Component, Element, Prop, h, Host } from "@stencil/core";
+export class ZTypography {
+  constructor() {
+    this.variant = "regular";
+  }
+  render() {
+    const el = document.createElement(this.component || "span");
+    el.innerHTML = `<slot />`;
+    this.hostElement.shadowRoot.appendChild(el);
+    return (h(Host, { class: {
+        [this.level]: Boolean(this.level),
+        regular: this.variant === "regular",
+        semibold: this.variant === "semibold",
+        light: this.variant === "light"
+      } }));
+  }
+  static get is() { return "z-typography"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get properties() { return {
+    "component": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "component",
+      "reflect": false
+    },
+    "variant": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"regular\" | \"semibold\" | \"light\"",
+        "resolved": "\"light\" | \"regular\" | \"semibold\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "variant",
+      "reflect": false,
+      "defaultValue": "\"regular\""
+    },
+    "level": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "ZTypographyLevels",
+        "resolved": "\"b1\" | \"b2\" | \"b3\" | \"b4\" | \"b5\" | \"h1\" | \"h2\" | \"h3\" | \"h4\"",
+        "references": {
+          "ZTypographyLevels": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "level",
+      "reflect": false
+    }
+  }; }
+  static get elementRef() { return "hostElement"; }
+}

package/dist/collection/components/typography/z-typography/styles.css

@@ -0,0 +1,61 @@
+:host > * {
+  font-family: var(--dashboard-font);
+  margin: 0;
+}
+
+:host(.regular)>* {
+  font-weight: var(--font-rg);
+}
+
+:host(.semibold)>* {
+  font-weight: 600;
+}
+
+:host(.light)>* {
+  font-weight: 300;
+}
+
+:host(.h1)>* {
+  font-size: 32px;
+  line-height: 40px;
+}
+
+:host(.h2)>* {
+  font-size: 28px;
+  line-height: 36px;
+}
+
+:host(.h3)>* {
+  font-size: 24px;
+  line-height: 32px;
+}
+
+:host(.h4)>* {
+  font-size: 20px;
+  line-height: 28px;
+}
+
+:host(.b1)>* {
+  font-size: 20px;
+  line-height: 28px;
+}
+
+:host(.b2)>* {
+  font-size: 18px;
+  line-height: 28px;
+}
+
+:host(.b3)>* {
+  font-size: 16px;
+  line-height: 24px;
+}
+
+:host(.b4)>* {
+  font-size: 14px;
+  line-height: 20px;
+}
+
+:host(.b5)>* {
+  font-size: 12px;
+  line-height: 16px;
+}