@zanichelli/albe-web-components 6.6.10-test → 6.8.0

package/dist/collection/components/z-section-title/index.js

@@ -0,0 +1,88 @@
+import { h, Host } from "@stencil/core";
+import { DividerSize, ZSectionTitleDividerPosition } from "../../beans";
+/**
+ * Section title component.
+ * An optional secondary title can be put over the primary one.
+ *
+ * @slot secondary-title - Slot for the secondary title. When present, the divider is always displayed under it,
+ * following its width and removing the one for the primary title.
+ * @slot primary-title - Slot for the primary title.
+ * @cssprop --z-section-title--divider-color - Color of the divider. Use a CSS prop string like `"--red500"`. Default is `"--red500"`.
+ */
+export class ZSectionTitle {
+  constructor() {
+    /**
+     * Divider position for the primary title.
+     * This prop only works if the secondary title is not set.
+     */
+    this.dividerPosition = ZSectionTitleDividerPosition.BEFORE;
+    /**
+     * Whether the primary title text is uppercase.
+     */
+    this.uppercase = true;
+  }
+  componentWillRender() {
+    this.hasSecondaryTitle = !!this.host.querySelector("[slot=secondary-title]");
+  }
+  render() {
+    return (h(Host, null, h("slot", { name: "secondary-title" }), !this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.BEFORE && (h("z-divider", { size: DividerSize.LARGE, color: "z-section-title--divider-color" })), h("slot", { name: "primary-title" }), !this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.AFTER && (h("z-divider", { size: DividerSize.LARGE, color: "z-section-title--divider-color" }))));
+  }
+  static get is() { return "z-section-title"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "dividerPosition": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ZSectionTitleDividerPosition",
+          "resolved": "ZSectionTitleDividerPosition.AFTER | ZSectionTitleDividerPosition.BEFORE",
+          "references": {
+            "ZSectionTitleDividerPosition": {
+              "location": "import",
+              "path": "../../beans"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Divider position for the primary title.\nThis prop only works if the secondary title is not set."
+        },
+        "attribute": "divider-position",
+        "reflect": false,
+        "defaultValue": "ZSectionTitleDividerPosition.BEFORE"
+      },
+      "uppercase": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether the primary title text is uppercase."
+        },
+        "attribute": "uppercase",
+        "reflect": true,
+        "defaultValue": "true"
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+}

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

@@ -0,0 +1,44 @@
+:host {
+  --z-section-title--divider-color: var(--red500);
+
+  display: flex;
+  width: fit-content;
+  flex-direction: column;
+  align-items: flex-start;
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-rg);
+}
+
+:host,
+:host ::slotted(*) {
+  box-sizing: border-box;
+}
+
+::slotted(*) {
+  margin: 0;
+}
+
+::slotted([slot="secondary-title"]) {
+  padding-bottom: calc(var(--space-unit) / 2);
+  border-bottom: var(--border-size-large) solid var(--z-section-title--divider-color);
+  font-size: var(--font-size-3);
+  line-height: 1.5rem;
+  text-transform: uppercase;
+}
+
+::slotted([slot="primary-title"]) {
+  font-size: var(--font-size-6);
+  line-height: 2rem;
+}
+
+:host([uppercase]:not([uppercase="false"])) ::slotted([slot="primary-title"]) {
+  text-transform: uppercase;
+}
+
+/* Desktop breakpoint */
+@media (min-width: 1152px) {
+  ::slotted([slot="primary-title"]) {
+    font-size: var(--font-size-7);
+    line-height: 2.25rem;
+  }
+}

package/dist/collection/components/z-skip-to-content/index.js

@@ -0,0 +1,139 @@
+import { h, Host } from "@stencil/core";
+import { getElementTree, handleKeyboardSubmit } from "../../utils/utils";
+import { ThemeVariant } from "../../beans";
+/**
+ * Component short description.
+ */
+export class ZSkipToContent {
+  constructor() {
+    /** Array to fill link into skip-content */
+    this.links = [];
+    this.visible = false;
+    this.visibleLink = "";
+  }
+  handleFocusOutSkipToContent(e) {
+    if (this.isInSkipToContent(e.target)) {
+      this.visible = false;
+    }
+  }
+  handleFocusSkipToContent(e) {
+    if (this.isInSkipToContent(e.target)) {
+      this.visible = true;
+    }
+  }
+  componentDidLoad() {
+    this.showFirstChild();
+  }
+  componentWillRender() {
+    if (this.links) {
+      this.links = typeof this.links === "string" ? JSON.parse(this.links) : this.links;
+    }
+  }
+  isInSkipToContent(elem) {
+    const tree = getElementTree(elem);
+    const menuParent = tree.find((elem) => elem.nodeName.toLowerCase() === "z-skip-to-content");
+    return !!menuParent;
+  }
+  showFirstChild() {
+    var _a;
+    const firstChild = (_a = this.hostElement.children) === null || _a === void 0 ? void 0 : _a[0];
+    if (firstChild) {
+      this.visibleLink = firstChild.id;
+    }
+  }
+  handleLinkClick() {
+    this.visible = false;
+  }
+  render() {
+    return (h(Host, { class: {
+        [this.variant]: true,
+        "skip-to-content-visible": this.visible,
+      } }, this.links.map((link, i) => {
+      const id = `skip-to-content-${i}`;
+      return (h("z-link", { id: id, underline: true, "aria-label": link.ariaLabel || link.label, class: `body-1-sb ${id == this.visibleLink ? "link-visible" : "link-invisible"}`, href: link.href, textcolor: this.variant === ThemeVariant.DARK ? "white" : "black", onFocus: () => (this.visibleLink = id), onClick: () => this.handleLinkClick(), onKeyUp: (e) => handleKeyboardSubmit(e, this.handleLinkClick.bind(this)) }, link.label));
+    })));
+  }
+  static get is() { return "z-skip-to-content"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ThemeVariant",
+          "resolved": "ThemeVariant.DARK | ThemeVariant.LIGHT",
+          "references": {
+            "ThemeVariant": {
+              "location": "import",
+              "path": "../../beans"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Graphical variant: `dark`, `light`."
+        },
+        "attribute": "variant",
+        "reflect": true
+      },
+      "links": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string | SkipToContentLink[]",
+          "resolved": "SkipToContentLink[] | string",
+          "references": {
+            "SkipToContentLink": {
+              "location": "import",
+              "path": "../../beans"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Array to fill link into skip-content"
+        },
+        "attribute": "links",
+        "reflect": false,
+        "defaultValue": "[]"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "visible": {},
+      "visibleLink": {}
+    };
+  }
+  static get elementRef() { return "hostElement"; }
+  static get listeners() {
+    return [{
+        "name": "focusout",
+        "method": "handleFocusOutSkipToContent",
+        "target": "document",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "focusin",
+        "method": "handleFocusSkipToContent",
+        "target": "document",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

package/dist/collection/components/z-skip-to-content/styles.css

@@ -0,0 +1,80 @@
+:host {
+  position: absolute;
+  left: -100%;
+  height: 60px;
+  box-sizing: border-box;
+  padding: calc(var(--space-unit) * 1.25) calc(var(--space-unit) * 3);
+  background-color: #24f4ff;
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-rg);
+}
+
+:host.skip-to-content-visible,
+:host:focus {
+  position: static;
+  display: block;
+}
+
+:host > z-link {
+  display: block;
+  text-align: center;
+}
+
+:host > z-link.link-invisible {
+  overflow: hidden;
+  width: 0;
+  height: 0;
+}
+
+:host > z-link.link-visible {
+  width: initial;
+  height: initial;
+}
+
+:host.dark {
+  background-color: var(--bg-grey-800);
+  color: var(--color-white);
+}
+
+:host.light {
+  border: 2px solid var(--text-grey-800);
+  background-color: var(--bg-white);
+  color: var(--text-grey-800);
+}
+
+/* Tablet breakpoint */
+@media (min-width: 768px) {
+  :host > z-link {
+    text-align: left;
+  }
+}
+
+/* Desktop breakpoint */
+@media (min-width: 1152px) {
+  :host > z-link {
+    display: inline-block;
+    padding: 0 calc(var(--space-unit) * 3);
+    border-right: 1px solid var(--bg-grey-800);
+  }
+
+  :host > z-link.link-invisible {
+    overflow: initial;
+    width: initial;
+    height: initial;
+  }
+
+  :host > z-link:first-child {
+    padding-left: 0;
+  }
+
+  :host > z-link:last-child,
+  :host.dark > z-link:last-child,
+  :host.light > z-link:last-child {
+    padding-right: 0;
+    border-right: none;
+  }
+
+  :host.dark > z-link {
+    border-right: 1px solid var(--bg-white);
+  }
+}

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

@@ -0,0 +1,352 @@
+import { Host, h } from "@stencil/core";
+import { ButtonSize, ButtonVariant } from "../../../beans";
+import { mobileBreakpoint } from "../../../constants/breakpoints";
+/**
+ * @slot - table elements
+ * @slot sticky-footer - set the content of the sticky footer
+ */
+export class ZTable {
+  constructor() {
+    /** Error message */
+    this.errorMessage = "Siamo spiacenti, non siamo riusciti a caricare il contenuto richiesto";
+    /** Sets table with border */
+    this.bordered = false;
+    /** Sets first column sticky */
+    this.columnSticky = false;
+    /** Sets empty table */
+    this.empty = false;
+    /** Set error status */
+    this.error = false;
+    /** Sets header sticky */
+    this.headerSticky = false;
+    /** Set message */
+    this.message = "Siamo spiacenti, al momento non sono presenti dati da visualizzare";
+    /** Set subtitle */
+    this.subtitle = "";
+  }
+  handleResize() {
+    this.isMobile = window.innerWidth <= mobileBreakpoint;
+  }
+  handleOrientationChange() {
+    this.isMobile = screen.width <= mobileBreakpoint;
+  }
+  componentWillLoad() {
+    var _a;
+    this.isMobile = window.innerWidth <= mobileBreakpoint;
+    const tableBody = this.host.querySelector('[slot="table-body"]');
+    this.hasTableBody = !!((_a = tableBody === null || tableBody === void 0 ? void 0 : tableBody.children) === null || _a === void 0 ? void 0 : _a.length);
+    if (!!tableBody && !this.hasTableBody) {
+      tableBody.remove();
+    }
+  }
+  componentWillRender() {
+    this.host.setAttribute("role", "table");
+  }
+  renderError(tableClass) {
+    const minHeight = this.lines ? `calc(40px * ${this.lines})` : "auto";
+    return (h(Host, null, h("div", { class: tableClass }, h("slot", { name: "table-header" })), h("z-table-error", null, h("div", { class: "error-content", style: { minHeight } }, h("slot", { name: "error-image" }), h("div", { class: "text" }, h("z-body", { class: "error-message", level: 3, variant: "semibold" }, this.errorMessage), h("slot", { name: "error-action" }))))));
+  }
+  renderEmpty(tableClass) {
+    const buttonSize = this.isMobile ? ButtonSize.SMALL : ButtonSize.BIG;
+    const tableContentClass = `${this.hasTableBody ? "table-content" : ""}`;
+    if (this.hasTableBody) {
+      return (h(Host, null, h("div", { class: tableClass }, h("slot", { name: "table-header" }), h("div", { class: tableContentClass }, h("slot", { name: "table-body" }), h("z-table-empty-box", { class: this.bordered && "bordered", message: this.message, subtitle: this.subtitle }, !!this.callToActionLabel && (h("z-button", { slot: "cta1", variant: ButtonVariant.TERTIARY, onClick: () => this.callToAction.emit(), size: buttonSize }, this.callToActionLabel)), !!this.callToActionTwoLabel && (h("z-button", { slot: "cta2", variant: ButtonVariant.TERTIARY, onClick: () => this.callToActionTwo.emit(), size: buttonSize }, this.callToActionTwoLabel)))))));
+    }
+    return (h(Host, null, h("div", { class: tableClass }, h("slot", { name: "table-header" })), h("z-table-empty-box", { class: this.bordered && "bordered", message: this.message, subtitle: this.subtitle }, !!this.callToActionLabel && (h("z-button", { slot: "cta1", variant: ButtonVariant.TERTIARY, onClick: () => this.callToAction.emit(), size: buttonSize }, this.callToActionLabel)), !!this.callToActionTwoLabel && (h("z-button", { slot: "cta2", variant: ButtonVariant.TERTIARY, onClick: () => this.callToActionTwo.emit(), size: buttonSize }, this.callToActionTwoLabel)))));
+  }
+  render() {
+    const tableClass = `table ${this.empty ? "table-empty" : ""} ${this.bordered ? "table-bordered" : ""}
+    ${this.columnSticky ? "table-column-sticky" : ""}
+    ${this.headerSticky ? "table-header-sticky" : ""}`;
+    if (this.error) {
+      return this.renderError(tableClass);
+    }
+    if (this.empty) {
+      return this.renderEmpty(tableClass);
+    }
+    return (h(Host, null, h("div", { class: tableClass }, h("slot", null)), h("slot", { name: "sticky-footer" })));
+  }
+  static get is() { return "z-table"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get assetsDirs() { return ["assets"]; }
+  static get properties() {
+    return {
+      "lines": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Number of lines of element"
+        },
+        "attribute": "lines",
+        "reflect": true
+      },
+      "errorMessage": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Error message"
+        },
+        "attribute": "error-message",
+        "reflect": false,
+        "defaultValue": "\"Siamo spiacenti, non siamo riusciti a caricare il contenuto richiesto\""
+      },
+      "bordered": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Sets table with border"
+        },
+        "attribute": "bordered",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "callToActionLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Sets call to action label"
+        },
+        "attribute": "call-to-action-label",
+        "reflect": false
+      },
+      "callToActionTwoLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Sets call to action label"
+        },
+        "attribute": "call-to-action-two-label",
+        "reflect": false
+      },
+      "columnSticky": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Sets first column sticky"
+        },
+        "attribute": "column-sticky",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "empty": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Sets empty table"
+        },
+        "attribute": "empty",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "error": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Set error status"
+        },
+        "attribute": "error",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "errorLink": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Set error status"
+        },
+        "attribute": "error-link",
+        "reflect": false
+      },
+      "headerSticky": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Sets header sticky"
+        },
+        "attribute": "header-sticky",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "message": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Set message"
+        },
+        "attribute": "message",
+        "reflect": false,
+        "defaultValue": "\"Siamo spiacenti, al momento non sono presenti dati da visualizzare\""
+      },
+      "subtitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Set subtitle"
+        },
+        "attribute": "subtitle",
+        "reflect": false,
+        "defaultValue": "\"\""
+      }
+    };
+  }
+  static get states() {
+    return {
+      "hasTableBody": {},
+      "isMobile": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "callToAction",
+        "name": "callToAction",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "remove call to action event"
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "callToActionTwo",
+        "name": "callToActionTwo",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "remove call to action event"
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "host"; }
+  static get listeners() {
+    return [{
+        "name": "resize",
+        "method": "handleResize",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }, {
+        "name": "orientationchange",
+        "method": "handleOrientationChange",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}