@zanichelli/albe-web-components 2.33.1 → 2.33.3

package/dist/collection/components/footer/z-footer-section/styles.css

@@ -0,0 +1,163 @@
+:host {
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-rg);
+}
+
+:host > nav {
+  background-color: var(--gray900);
+  display: flex;
+  flex-direction: column;
+  justify-items: flex-start;
+  overflow: hidden;
+  margin: calc(var(--space-unit) / 2) 0;
+  padding: 0;
+}
+
+:host > nav > .header {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-items: stretch;
+  align-content: flex-start;
+  height: calc(var(--space-unit) * 4);
+  border-bottom: 1px solid var(--gray50);
+  line-height: 1;
+}
+
+:host > nav > .header > h2 {
+  color: var(--color-white);
+  font-size: 16px;
+  margin: var(--space-unit) 0;
+}
+
+:host > nav > .header {
+  fill: var(--color-white);
+}
+
+:host > nav > .header > button {
+  position: absolute;
+  top: var(--space-unit);
+  right: 0;
+  margin: 0;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  appearance: none;
+  cursor: pointer;
+}
+
+:host > nav > .header > z-icon {
+  display: block;
+}
+
+:host > nav > .content {
+  background-color: var(--gray800);
+  display: none;
+  height: 0;
+  transition: 0.3s ease;
+  padding: calc(var(--space-unit) * 3) calc(var(--space-unit) * 2);
+}
+
+:host > nav > .content.show {
+  display: block;
+  height: auto;
+  transition: 0.3s ease;
+}
+
+/* Tablet breakpoint */
+@media only screen and (min-width: 768px) {
+  :host > nav {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: 1fr;
+    grid-column-gap: var(--grid-tablet-margin);
+    padding: calc(var(--space-unit) * 2) 0;
+    border-bottom: 1px solid var(--color-white);
+    margin: 0;
+    background-color: var(--gray800);
+  }
+
+  :host > nav > .header > button.toggleButton {
+    display: none;
+  }
+
+  :host > nav > .header {
+    border-bottom: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  :host > nav > .header > h2 {
+    border: none;
+  }
+
+  :host > nav > .content,
+  :host > nav > .content.show {
+    grid-column: span 3;
+    width: 100%;
+    padding: 0;
+    margin: 0;
+
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-column-gap: var(--grid-tablet-margin);
+    grid-row-gap: var(--space-unit);
+    height: auto;
+    align-items: stretch;
+    align-content: stretch;
+    margin: 0;
+  }
+}
+
+/* Desktop breakpoint */
+@media only screen and (min-width: 1152px) {
+  :host > nav {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 40px 4fr;
+    padding: 0;
+    border-bottom: none;
+  }
+
+  :host > nav > .header {
+    position: relative;
+    display: inline-flex;
+    height: 24px;
+  }
+
+  :host > nav > .header > h2 {
+    width: auto;
+    font-size: 16px;
+    line-height: 1;
+    font-weight: 600;
+    color: var(--gray50);
+    padding: 0 0 var(--space-unit);
+    margin: 0;
+  }
+
+  :host > nav > .header::after {
+    content: "";
+    display: block;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 120px;
+    border-bottom: 1px solid var(--gray50);
+  }
+
+  :host > nav > .content,
+  :host > nav > .content.show {
+    grid-column: auto;
+
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+  }
+}
+
+/* Wide breakpoint */
+@media only screen and (min-width: 1366px) {
+}

package/dist/collection/components/footer/z-footer-social/index.js

@@ -0,0 +1,68 @@
+import { Component, Prop, h } from "@stencil/core";
+export class ZFooterSocial {
+  render() {
+    return (h("a", { href: this.href, target: "_blank" },
+      h("img", { src: this.icon, alt: this.description })));
+  }
+  static get is() { return "z-footer-social"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get properties() { return {
+    "icon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "icon url"
+      },
+      "attribute": "icon",
+      "reflect": false
+    },
+    "href": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "social link"
+      },
+      "attribute": "href",
+      "reflect": false
+    },
+    "description": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "social description"
+      },
+      "attribute": "description",
+      "reflect": false
+    }
+  }; }
+}

package/dist/collection/components/footer/z-footer-social/styles.css

@@ -0,0 +1,23 @@
+:host {
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-rg);
+}
+
+:host > a > img {
+  width: calc(var(--space-unit) * 3);
+}
+
+/* Tablet breakpoint */
+@media only screen and (min-width: 768px) {
+}
+
+/* Desktop breakpoint */
+@media only screen and (min-width: 1152px) {
+  :host > a > img {
+    width: 16px;
+  }
+}
+
+/* Wide breakpoint */
+@media only screen and (min-width: 1366px) {
+}

package/dist/{web-components-library/icons-9a191d79.js → collection/components/icons/icons.js}

@@ -1,4 +1,4 @@
-const icons = {
+export const icons = {
   "add-image": "M0 198C0 307 88 395 198 395C307 395 395 307 395 198C395 88 307 0 198 0C88 0 0 88 0 198ZM20 764V408H96V782H170V447H246V635L385 427C405 398 439 396 458 428L628 714L706 594C732 555 765 554 787 593L904 798V218H446V150H702V88H406V20H694C748 20 780 52 780 106V150H894C948 150 980 182 980 236V894C980 948 948 980 894 980H256C200 980 170 948 170 894V850H106C50 850 20 818 20 764ZM86 218V176H173V74H223V176H309V218H223V309H173V218ZM246 912H903L747 651L666 775C643 810 616 812 594 775L422 489L246 750ZM629 380C629 442 678 491 740 491C801 491 850 442 850 380C850 319 801 270 740 270C678 270 629 319 629 380ZM693 380C693 353 714 331 740 331C765 331 786 353 786 380C786 408 765 430 740 430C714 430 693 408 693 380Z",
   "app-switcher": "M0 120Q0 178 31.5 208 63 238 119 238 174 238 206.5 208 239 178 239 120 239 63 206.5 31.5 174 0 119 0 63 0 31.5 31 0 62 0 120ZM380 120Q380 178 412 208 444 238 499 238 554 238 587 208 620 178 620 120 620 63 587 31.5 554 0 499 0 445 0 412.5 31.5 380 63 380 120ZM761 120Q761 178 793 208 825 238 880 238 936 238 968 208 1000 178 1000 120 1000 63 967.5 31.5 935 0 880 0 825 0 793 31 761 62 761 120ZM0 501Q0 559 31.5 589 63 619 119 619 174 619 206.5 589 239 559 239 501 239 442 206.5 410.5 174 379 119 379 63 379 31.5 410.5 0 442 0 501ZM380 501Q380 559 412 589 444 619 499 619 555 619 587.5 589 620 559 620 501 620 442 587 410.5 554 379 499 379 444 379 412 410.5 380 442 380 501ZM761 501Q761 559 793 589 825 619 880 619 936 619 968 589 1000 559 1000 501 1000 442 967.5 410.5 935 379 880 379 825 379 793 410.5 761 442 761 501ZM0 882Q0 940 31.5 970 63 1000 119 1000 174 1000 206.5 970 239 940 239 882 239 824 206.5 793 174 762 119 762 63 762 31.5 793 0 824 0 882ZM380 882Q380 940 412 970 444 1000 499 1000 554 1000 587 970 620 940 620 882 620 824 587 793 554 762 499 762 444 762 412 793 380 824 380 882ZM761 882Q761 940 793 970 825 1000 880 1000 936 1000 968 970 1000 940 1000 882 1000 824 967.5 793 935 762 880 762 825 762 793 793 761 824 761 882Z",
   "arrow-clockwise-down-left": "M0 466C0 143 258 2 510 2C800 2 1000 186 1000 468C1000 769 824 872 746 928L698 864C768 823 918 721 918 524V412C918 247 745 76 508 76C289 76 82 227 82 412V524C82 694 265 797 376 838V736V592H454V982H66V904H220L334 906C203 861 0 730 0 466Z",
@@ -471,5 +471,3 @@ icons["close"] = icons["multiply"];
 icons["cross"] = icons["multiply"];
 icons["exit"] = icons["logout"];
 icons["enter"] = icons["login"];
-
-export { icons as i };

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;
+  }
+}