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

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

@@ -1,88 +0,0 @@
-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

@@ -1,44 +0,0 @@
-: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

@@ -1,139 +0,0 @@
-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

@@ -1,80 +0,0 @@
-: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

@@ -1,352 +0,0 @@
-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
-      }];
-  }
-}