@zanichelli/albe-web-components 2.33.5-rc1 → 2.34.1

package/dist/collection/components/icons/z-icon/index.js

@@ -0,0 +1,110 @@
+import { Component, Prop, h } from "@stencil/core";
+import { icons } from "../icons";
+export class ZIcon {
+  selectPathOrPolygon(iconName) {
+    if (iconName && iconName.startsWith("M")) {
+      return h("path", { d: icons[this.name] });
+    }
+    else {
+      return h("polygon", { points: icons[this.name] });
+    }
+  }
+  render() {
+    return (h("svg", { viewBox: "0 0 1000 1000", width: this.width, height: this.height, id: this.iconid, fill: this.fill ? `var(--${this.fill})` : "" }, this.selectPathOrPolygon(icons[this.name])));
+  }
+  static get is() { return "z-icon"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get properties() { return {
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "icon name (choice between available icons)"
+      },
+      "attribute": "name",
+      "reflect": false
+    },
+    "height": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "icon height (optional)"
+      },
+      "attribute": "height",
+      "reflect": false
+    },
+    "width": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "icon width (optional)"
+      },
+      "attribute": "width",
+      "reflect": false
+    },
+    "iconid": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "icon id (optional)"
+      },
+      "attribute": "iconid",
+      "reflect": false
+    },
+    "fill": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "icon fill (optional)"
+      },
+      "attribute": "fill",
+      "reflect": false
+    }
+  }; }
+}

package/dist/collection/components/icons/z-icon/styles.css

@@ -0,0 +1,14 @@
+:host {
+  line-height: 0;
+  vertical-align: middle;
+  margin-right: var(--z-icon-right-margin, 0);
+  margin-left: var(--z-icon-left-margin, 0);
+}
+
+:host svg:not([width]) {
+  width: var(--z-icon-width, 18px);
+}
+
+:host svg:not([height]) {
+  height: var(--z-icon-height, 18px);
+}

package/dist/collection/components/icons/z-icon-package/index.js

@@ -0,0 +1,20 @@
+import { Component, h } from '@stencil/core';
+import { icons } from '../icons';
+export class ZIconPackage {
+  render() {
+    const iconsNames = Object.keys(icons);
+    return (h("div", null, iconsNames.map((icon) => {
+      return (h("div", null,
+        h("z-icon", { name: icon }),
+        h("label", null, icon)));
+    })));
+  }
+  static get is() { return "z-icon-package"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+}

package/dist/collection/components/icons/z-icon-package/styles.css

@@ -0,0 +1,16 @@
+:host>div {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: flex-start;
+  font-family: Verdana, Arial, Helvetica, sans-serif;
+  font-size: 12px;
+}
+
+:host>div>div {
+  width: 300px;
+  margin: 5px;
+}
+
+:host>div>div>label {
+  margin: 0 10px;
+}

package/dist/collection/components/indicators/z-stepper/index.js

@@ -0,0 +1,17 @@
+import { Component, h } from '@stencil/core';
+/**
+ * @slot - z-stepper-item
+ */
+export class ZStepper {
+  render() {
+    return (h("slot", null));
+  }
+  static get is() { return "z-stepper"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+}

package/dist/collection/components/indicators/z-stepper/styles.css

@@ -0,0 +1,19 @@
+:host {
+  box-sizing: border-box;
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  max-width: 100%;
+  margin: 0;
+  padding: 0;
+  font-family: var(--dashboard-font);
+  font-weight: var(--font-rg);
+  list-style: none;
+}
+
+@media only screen and (min-width: 768px) {
+  :host {
+    padding: 0 calc(var(--space-unit) * 2);
+  }
+}

package/dist/collection/components/indicators/z-stepper-item/index.js

@@ -0,0 +1,93 @@
+import { Component, Prop, h } from '@stencil/core';
+export class ZStepperItem {
+  render() {
+    if (this.href) {
+      return (h("a", { href: !this.disabled && this.href, class: "stepper-item" },
+        h("div", { class: "indicator" }, this.index),
+        h("span", null,
+          h("slot", null))));
+    }
+    return (h("button", { class: "stepper-item", disabled: this.disabled },
+      h("div", { class: "indicator" }, this.index),
+      h("span", null,
+        h("slot", null))));
+  }
+  static get is() { return "z-stepper-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get properties() { return {
+    "index": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The number of the step item."
+      },
+      "attribute": "index",
+      "reflect": false
+    },
+    "href": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The href to navigate on click."
+      },
+      "attribute": "href",
+      "reflect": false
+    },
+    "pressed": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The pressed state of the item."
+      },
+      "attribute": "pressed",
+      "reflect": false
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The disabled state of the item."
+      },
+      "attribute": "disabled",
+      "reflect": false
+    }
+  }; }
+}

package/dist/collection/components/indicators/z-stepper-item/styles.css

@@ -0,0 +1,115 @@
+:host {
+  position: relative;
+  width: calc(var(--space-unit) * 5);
+  font-family: var(--dashboard-font);
+  font-weight: var(--font-rg);
+}
+
+:host(:not(:last-child)) {
+  flex: 1;
+}
+
+:host(:not(:last-child))::after {
+  position: absolute;
+  top: calc(var(--space-unit) * 4);
+  left: calc(var(--space-unit) * 3);
+  right: calc(var(--space-unit) * 2);
+  z-index: 1;
+  content: '';
+  display: block;
+  width: auto;
+  margin: 0 calc(-1 * calc(var(--space-unit) * 2)) 0 calc(var(--space-unit) * 2);
+  border-bottom: solid 2px var(--bg-grey-700);
+}
+
+.stepper-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: calc(var(--space-unit) * 5);
+  padding: 0;
+  color: inherit;
+  font-family: inherit;
+  font-size: 18px;
+  text-decoration: none;
+  line-height: 28px;
+  background: transparent;
+  border: 0;
+  outline: 0;
+  appearance: none;
+}
+
+.stepper-item span {
+  display: none;
+  width: calc(100% + calc(var(--space-unit) * 4));
+  text-align: center;
+}
+
+:host(:not([disabled])) .stepper-item {
+  cursor: pointer;
+}
+
+
+:host([disabled]) .stepper-item {
+  pointer-events: none;
+}
+
+.indicator {
+  content: counter(stepper);
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: calc(var(--space-unit) * 4);
+  height: calc(var(--space-unit) * 4);
+  margin: calc(var(--space-unit) * 2);
+  font-size: 14px;
+  font-weight: var(--font-sb);
+  line-height: 1;
+  color: var(--myz-blue);
+  background: var(--bg-white);
+  border: 2px solid var(--myz-blue);
+  border-radius: 50%;
+}
+
+:host([pressed]:not([disabled])) .indicator {
+  color: var(--text-white);
+  background: var(--myz-blue-dark);
+  border-color: var(--myz-blue-dark);
+}
+
+:host(:not([disabled]):focus-within) .indicator {
+  box-shadow: 0px 0px 2px 2px var(--accent-dark);
+}
+
+:host([disabled]) .indicator {
+  color: var(--text-grey-700);
+  background: var(--bg-grey-200);
+  border-color: currentColor;
+}
+
+/* Tablet breakpoint */
+@media only screen and (min-width: 768px) {
+  :host {
+    width: calc(var(--space-unit) * 10);
+  }
+
+  :host(:not(:last-child))::after {
+    top: calc(var(--space-unit) * 5);
+    left: calc(var(--space-unit) * 8);
+  }
+
+  .stepper-item {
+    width: calc(var(--space-unit) * 10);
+  }
+
+  .stepper-item span {
+    display: block;
+  }
+
+  .indicator {
+    width: calc(var(--space-unit) * 6);
+    height: calc(var(--space-unit) * 6);
+    font-size: 16px;
+  }
+}