@zanichelli/albe-web-components 12.1.3-rc → 12.2.0-rc

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

@@ -0,0 +1,392 @@
+import { h, Host } from "@stencil/core";
+import { BreadcrumbHomepageVariant, BreadcrumbPathStyle, Device, KeyboardCode, ListSize, PopoverPosition, } from "../../beans";
+import { getDevice, handleKeyboardSubmit } from "../../utils/utils";
+export class ZBreadcrumb {
+  constructor() {
+    /** [optional] Sets the path style */
+    this.pathStyle = BreadcrumbPathStyle.UNDERLINED;
+    /** [optional] Variant of first node */
+    this.homepageVariant = BreadcrumbHomepageVariant.ICON;
+    /** [optional] Sets max number of element to show */
+    this.maxNodesToShow = 5;
+    /** [optional] Controls the behaviour on <a> tag click/enter */
+    this.preventFollowUrl = false;
+    /** [optional] Sets max number of row for each path inside the popover. Zero equals unlimited */
+    this.overflowMenuItemRows = 0;
+    /** [optional] Sets the maximun number of chars per single node */
+    this.truncateChar = 30;
+    /** Detect whether the length of the nodes shown exceeds the container length */
+    this.hasOverflow = false;
+    this.popoverEllipsisOpen = false;
+    this.collapsedElements = [];
+    this.currentIndex = 0;
+    this.truncatePosition = null;
+  }
+  handleResize() {
+    this.viewPortWidth = getDevice();
+    if (this.viewPortWidth !== Device.MOBILE &&
+      this.wrapElement &&
+      this.wrapElement.scrollWidth > this.wrapElement.clientWidth) {
+      this.hasOverflow = true;
+    }
+  }
+  // eslint-disable-next-line lines-between-class-members
+  handlePropChange() {
+    this.initializeBreadcrumb(this.viewPortWidth === Device.MOBILE);
+  }
+  handleResizeUp(newValue, oldValue) {
+    if (newValue === Device.MOBILE ||
+      (oldValue === Device.MOBILE && newValue === Device.TABLET) ||
+      (oldValue === Device.MOBILE && newValue === Device.DESKTOP) ||
+      (oldValue === Device.MOBILE && newValue === Device.DESKTOP_WIDE) ||
+      (oldValue === Device.TABLET && newValue === Device.DESKTOP) ||
+      (oldValue === Device.TABLET && newValue === Device.DESKTOP_WIDE) ||
+      (oldValue === Device.DESKTOP && newValue === Device.DESKTOP_WIDE)) {
+      this.initializeBreadcrumb(this.viewPortWidth === Device.MOBILE);
+    }
+  }
+  componentWillLoad() {
+    this.viewPortWidth = getDevice();
+    this.initializeBreadcrumb(this.viewPortWidth === Device.MOBILE);
+  }
+  componentWillRender() {
+    if (this.viewPortWidth !== Device.MOBILE && this.hasOverflow) {
+      this.checkEllipsisOrOverflowMenu();
+      this.hasOverflow = false;
+    }
+  }
+  componentDidRender() {
+    if (this.collapsedElementsRef) {
+      this.anchorElements = Array.from(this.hostElement.shadowRoot.querySelectorAll("z-list-group a"));
+    }
+    if (this.viewPortWidth !== Device.MOBILE && this.wrapElement.scrollWidth > this.wrapElement.clientWidth) {
+      this.hasOverflow = true;
+    }
+  }
+  initializeBreadcrumb(isMobile) {
+    if (isMobile) {
+      this.pathsList = this.getPathsItemsList().filter((item) => !!item.path);
+    }
+    else {
+      this.pathsList = this.getPathsItemsList();
+    }
+    this.totalLenght = this.pathsList.length;
+    this.homepageNode = this.pathsList.shift();
+    this.pathListCopy = JSON.parse(JSON.stringify(this.pathsList));
+    this.collapsedElements = [];
+    if (this.totalLenght > this.maxNodesToShow) {
+      this.collapsedElements = this.pathsList.splice(0, this.pathsList.length - 2);
+    }
+  }
+  checkEllipsisOrOverflowMenu() {
+    if (this.pathListCopy.length > 0) {
+      for (let i = 0; i < this.pathsList.length; i++) {
+        if (this.pathsList[i].text.length > this.truncateChar) {
+          if (this.truncatePosition !== null) {
+            if (this.truncatePosition > 0) {
+              const arrayToPush = this.pathListCopy.splice(0, this.truncatePosition);
+              arrayToPush.forEach((item) => {
+                this.collapsedElements.push(item);
+              });
+              this.pathsList.splice(0, this.truncatePosition);
+              this.truncatePosition = 0;
+              return;
+            }
+            if (this.truncatePosition === 0) {
+              const arrayToPush = this.pathListCopy.splice(0, this.truncatePosition + 1);
+              this.collapsedElements.push(...arrayToPush);
+              this.pathsList.splice(0, this.truncatePosition + 1);
+              this.truncatePosition = null;
+              return;
+            }
+          }
+          if (i !== this.pathsList.length - 1) {
+            const truncatedString = this.truncateWithEllipsis(this.pathsList[i].text, this.truncateChar);
+            this.currentEllipsisText = this.pathsList[i].text;
+            this.pathsList[i].text = truncatedString;
+            this.pathsList[i].hasTooltip = true;
+            this.truncatePosition = i;
+            return;
+          }
+        }
+      }
+    }
+  }
+  truncateWithEllipsis(str, length) {
+    const ending = "&mldr;";
+    if (str.length > length) {
+      return str.substring(0, length - 1) + ending;
+    }
+    return str;
+  }
+  getPathsItemsList() {
+    return Array.from(this.hostElement.children).map((item) => {
+      return {
+        text: item.textContent,
+        path: item.href,
+        hasTooltip: false,
+      };
+    });
+  }
+  renderMobileBreadcrumb() {
+    const lastPath = this.pathsList[this.pathsList.length - 1];
+    return (h("nav", { "aria-label": "Breadcrumb", class: {
+        underlined: this.pathStyle === BreadcrumbPathStyle.UNDERLINED,
+        semibold: this.pathStyle === BreadcrumbPathStyle.SEMIBOLD,
+      } }, h("ol", null, this.renderNode(lastPath, true))));
+  }
+  renderHomepageNode(item) {
+    return (h("li", null, h("a", { class: {
+        "homepage-icon": this.homepageVariant === BreadcrumbHomepageVariant.ICON,
+        "homepage-text": this.homepageVariant === BreadcrumbHomepageVariant.TEXT,
+      }, href: item.path, onClick: (e) => this.handlePreventFollowUrl(e, item) }, this.homepageVariant === BreadcrumbHomepageVariant.ICON ? (h("z-icon", { name: "home", fill: "color-link-primary", height: 16, width: 16 })) : ("Home"))));
+  }
+  renderNode(item, mobile) {
+    return (h("li", null, item.hasTooltip && (h("z-popover", { class: "full-path-tooltip", "bind-to": this.triggerEllipsis, open: this.popoverEllipsisOpen, position: PopoverPosition.BOTTOM_RIGHT, closable: false, showArrow: true }, h("span", { class: "tooltip-content" }, this.currentEllipsisText))), h("a", { class: {
+        "missing-path": !item.path,
+        "text-ellipsis": mobile,
+      }, ref: (val) => (this.triggerEllipsis = val), "aria-current": item.path ? undefined : "page", href: item.path, onClick: (e) => this.handlePreventFollowUrl(e, item), onMouseOver: () => {
+        if (item.hasTooltip) {
+          this.popoverEllipsisOpen = true;
+        }
+      }, onMouseLeave: () => {
+        if (item.hasTooltip) {
+          this.popoverEllipsisOpen = false;
+        }
+      }, innerHTML: mobile ? `<z-icon fill="color-link-primary" name="chevron-left"></z-icon>${item.text}` : item.text })));
+  }
+  renderBreadcrumb() {
+    return (h("nav", { ref: (val) => (this.wrapElement = val), "aria-label": "Breadcrumb", class: {
+        underlined: this.pathStyle === BreadcrumbPathStyle.UNDERLINED,
+        semibold: this.pathStyle === BreadcrumbPathStyle.SEMIBOLD,
+      } }, h("ol", null, this.renderHomepageNode(this.homepageNode), this.collapsedElements.length ? this.renderOverflowMenu() : "", this.pathsList.map((item) => this.renderNode(item, false)))));
+  }
+  togglePopover() {
+    if (!this.collapsedElementsRef.open) {
+      this.collapsedElementsRef.open = true;
+    }
+  }
+  handlePreventFollowUrl(e, item) {
+    if (this.preventFollowUrl) {
+      e.preventDefault();
+      this.clickOnNode.emit(item.path);
+    }
+  }
+  handleOverflowMenuAccessibility(e) {
+    const anchorElementsLenght = this.anchorElements.length;
+    if (e.key === KeyboardCode.TAB) {
+      e.preventDefault();
+      return;
+    }
+    e.stopPropagation();
+    const arrows = [KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP];
+    if (arrows.includes(e.key)) {
+      e.preventDefault();
+      if (e.key === KeyboardCode.ARROW_DOWN) {
+        this.currentIndex = anchorElementsLenght === this.currentIndex + 1 ? 0 : this.currentIndex + 1;
+      }
+      if (e.key === KeyboardCode.ARROW_UP) {
+        this.currentIndex = this.currentIndex <= 0 ? anchorElementsLenght - 1 : this.currentIndex - 1;
+      }
+      this.anchorElements[this.currentIndex].focus();
+    }
+    if (e.key === KeyboardCode.ESC) {
+      this.triggerButton.focus();
+    }
+  }
+  renderOverflowMenu() {
+    if (this.collapsedElements.length) {
+      return (h("li", null, h("z-popover", { class: "hidden-paths-popover", ref: (val) => (this.collapsedElementsRef = val), "bind-to": this.triggerButton, position: PopoverPosition.BOTTOM_RIGHT, closable: true, showArrow: true }, h("div", { class: "popover-content" }, h("z-list", null, h("z-list-group", { size: ListSize.SMALL }, this.collapsedElements.map((item, index, array) => {
+        return (h("div", null, h("z-list-element", { clickable: true }, h("a", { class: "text-ellipsis", href: item.path, onClick: (e) => this.handlePreventFollowUrl(e, item), onKeyDown: (e) => this.handleOverflowMenuAccessibility(e) }, item.text)), index < array.length - 1 && h("z-divider", { color: "color-surface03" })));
+      }))))), h("button", { "aria-label": "Mostra pi\u00F9 breadcrumb", "aria-haspopup": "true", ref: (el) => (this.triggerButton = el), class: "dots", onClick: () => {
+          this.togglePopover();
+        }, onKeyDown: (e) => {
+          handleKeyboardSubmit(e, this.togglePopover.bind(this));
+          setTimeout(() => {
+            this.anchorElements[0].focus();
+          }, 100);
+        } }, "...")));
+    }
+  }
+  render() {
+    return (h(Host, { style: { "--line-clamp-popover": `${this.overflowMenuItemRows}` } }, this.viewPortWidth === Device.MOBILE ? this.renderMobileBreadcrumb() : this.renderBreadcrumb()));
+  }
+  static get is() { return "z-breadcrumb"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "pathStyle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "BreadcrumbPathStyle",
+          "resolved": "BreadcrumbPathStyle.SEMIBOLD | BreadcrumbPathStyle.UNDERLINED",
+          "references": {
+            "BreadcrumbPathStyle": {
+              "location": "import",
+              "path": "../../beans"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "[optional] Sets the path style"
+        },
+        "attribute": "path-style",
+        "reflect": true,
+        "defaultValue": "BreadcrumbPathStyle.UNDERLINED"
+      },
+      "homepageVariant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "BreadcrumbHomepageVariant",
+          "resolved": "BreadcrumbHomepageVariant.ICON | BreadcrumbHomepageVariant.TEXT",
+          "references": {
+            "BreadcrumbHomepageVariant": {
+              "location": "import",
+              "path": "../../beans"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "[optional] Variant of first node"
+        },
+        "attribute": "homepage-variant",
+        "reflect": false,
+        "defaultValue": "BreadcrumbHomepageVariant.ICON"
+      },
+      "maxNodesToShow": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "[optional] Sets max number of element to show"
+        },
+        "attribute": "max-nodes-to-show",
+        "reflect": false,
+        "defaultValue": "5"
+      },
+      "preventFollowUrl": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "[optional] Controls the behaviour on <a> tag click/enter"
+        },
+        "attribute": "prevent-follow-url",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "overflowMenuItemRows": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "[optional] Sets max number of row for each path inside the popover. Zero equals unlimited"
+        },
+        "attribute": "overflow-menu-item-rows",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "truncateChar": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "[optional] Sets the maximun number of chars per single node"
+        },
+        "attribute": "truncate-char",
+        "reflect": false,
+        "defaultValue": "30"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "viewPortWidth": {},
+      "hasOverflow": {},
+      "popoverEllipsisOpen": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "clickOnNode",
+        "name": "clickOnNode",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when preventFollowUrl=true to handle custom page transition"
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "hostElement"; }
+  static get watchers() {
+    return [{
+        "propName": "maxNodesToShow",
+        "methodName": "handlePropChange"
+      }, {
+        "propName": "viewPortWidth",
+        "methodName": "handleResizeUp"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "resize",
+        "method": "handleResize",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }];
+  }
+}

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

@@ -0,0 +1,146 @@
+:host {
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-rg);
+
+  --line-clamp-popover: 0;
+  --line-clamp-mobile: 1;
+}
+
+button {
+  padding: 0;
+  border: none;
+  margin: 0;
+  background-color: transparent;
+}
+
+nav {
+  display: flex;
+  height: 30px;
+  align-items: center;
+  padding-left: calc(var(--space-unit) / 2);
+  overflow-x: hidden;
+}
+
+li {
+  display: flex;
+  align-items: baseline;
+}
+
+:host a:focus,
+:host button:focus {
+  box-shadow: var(--shadow-focus-primary);
+  outline: 0;
+}
+
+:host a {
+  color: var(--color-link-primary);
+  font-size: var(--font-size-2);
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+:host a.homepage-icon {
+  display: list-item;
+}
+
+:host a.homepage-text {
+  display: initial;
+  margin-top: calc(var(--space-unit) / 4);
+  margin-right: var(--space-unit);
+}
+
+:host a.missing-path {
+  color: var(--color-text01);
+}
+
+:host a.text-ellipsis {
+  display: -webkit-box !important;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--line-clamp-mobile);
+  text-overflow: ellipsis;
+  white-space: normal;
+}
+
+:host ol {
+  display: flex;
+  padding: 0;
+  margin: 0;
+  list-style-type: none;
+}
+
+:host ol > li:not(:first-child, :last-child) {
+  margin-right: var(--space-unit);
+}
+
+nav.underlined > ol > li a:not(.missing-path),
+nav.underlined > ol > li button {
+  text-decoration: underline;
+}
+
+nav.semibold > ol > li a:not(.missing-path),
+nav.semibold > ol > li button {
+  font-weight: var(--font-sb);
+}
+
+:host z-icon {
+  margin-right: var(--space-unit);
+
+  --z-icon-width: 12px;
+  --z-icon-height: 12px;
+}
+
+:host button.dots {
+  display: inline-block;
+  color: var(--color-link-primary);
+  cursor: pointer;
+}
+
+:host .hidden-paths-popover .popover-content {
+  max-width: 302px;
+  padding: calc(var(--space-unit) / 2) var(--space-unit);
+  text-align: left;
+}
+
+:host .hidden-paths-popover .popover-content a {
+  font-weight: var(--font-rg);
+  text-decoration: none;
+}
+
+:host .hidden-paths-popover {
+  --z-popover-theme--surface: var(--color-surface02);
+  --z-popover-padding: 0;
+}
+
+:host .hidden-paths-popover::before,
+.full-path-tooltip::before {
+  --arrow-edge-offset: calc(100% - (var(--space-unit) * 2.55));
+}
+
+:host .full-path-tooltip {
+  --z-popover-theme--surface: var(--color-surface05);
+  --z-popover-theme--text: var(--color-text-inverse);
+  --z-popover-padding: 0;
+}
+
+:host .tooltip-content {
+  padding: 0 var(--space-unit);
+  font-size: var(--font-size-2);
+}
+
+@media (min-width: 768px) {
+  /* https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/examples/breadcrumb/#accessibilityfeatures */
+  :host ol > li + li::before {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    flex: 1;
+    margin-right: 2px;
+    color: var(--color-disabled03);
+    content: "\203A";
+  }
+
+  :host a.text-ellipsis {
+    -webkit-line-clamp: var(--line-clamp-popover);
+  }
+}

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

@@ -0,0 +1,148 @@
+import { h, Host } from "@stencil/core";
+import { CardVariant } from "../../beans";
+/**
+ * ZCard component.
+ * @cssprop --aspect-ratio - Cover aspect ratio. Default: `1.62`
+ * @cssprop --z-card--border-color - Default: `var(--gray200)`
+ * @cssprop --z-card--color-cover-background - Cover color. Default: `var(--color-surface01)`
+ * @cssprop --z-card--text-background - Background color for the `text` variant. Default: `var(--color-surface01)`
+ * @cssprop --z-card--text-border-radius - Default: `none`
+ * @cssprop --z-card--text-border - Configure CSS `border`. Default: `none`
+ * @cssprop --z-card--text-padding - Configure CSS `padding`. Default: `none`
+ */
+export class ZCard {
+  constructor() {
+    /** Enable shadow. Default: false. */
+    this.showShadow = false;
+    /** Enable 'clickable' style like hover and focus style. */
+    this.clickable = false;
+  }
+  componentWillLoad() {
+    this.hasCoverImage = this.host.querySelector('[slot="cover"]') !== null;
+  }
+  /**
+   * Template for a card without image cover.
+   * A colored background replaces the image and some data is moved over it.
+   */
+  renderColorCoverCard() {
+    return [
+      h("div", { class: "cover-container" }, h("div", { class: "color-cover" }, h("div", { class: "cover-content" }, h("slot", { name: "metadata" }), h("slot", { name: "title" })))),
+      h("div", { class: "content" }, h("slot", { name: "text" }), h("div", { class: "actions" }, h("slot", { name: "action" }))),
+    ];
+  }
+  /**
+   * Template for the content div.
+   */
+  renderContentDiv() {
+    return (h("div", { class: "content" }, h("slot", { name: "metadata" }), h("slot", { name: "title" }), h("slot", { name: "text" }), h("div", { class: "actions" }, h("slot", { name: "action" }))));
+  }
+  render() {
+    if (this.variant === CardVariant.TEXT) {
+      return h(Host, null, this.renderContentDiv());
+    }
+    if (this.variant === CardVariant.OVERLAY || this.hasCoverImage) {
+      return (h(Host, null, h("div", { class: "cover-container" }, this.hasCoverImage && [
+        h("slot", { name: "cover" }),
+        this.variant !== CardVariant.OVERLAY && this.coverIcon && h("z-icon", { name: this.coverIcon }),
+      ], !this.hasCoverImage && h("div", { class: "color-cover" })), this.renderContentDiv()));
+    }
+    return h(Host, null, this.renderColorCoverCard());
+  }
+  static get is() { return "z-card"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "CardVariant",
+          "resolved": "CardVariant.BORDER | CardVariant.OVERLAY | CardVariant.SHADOW | CardVariant.TEXT",
+          "references": {
+            "CardVariant": {
+              "location": "import",
+              "path": "../../beans"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Card variant.\nCan be one of \"text\", \"border\", \"shadow\", \"overlay\".\nLeave it undefined for the default card."
+        },
+        "attribute": "variant",
+        "reflect": true
+      },
+      "coverIcon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Name of the icon to place over the image cover"
+        },
+        "attribute": "cover-icon",
+        "reflect": false
+      },
+      "showShadow": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Enable shadow. Default: false."
+        },
+        "attribute": "show-shadow",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "clickable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Enable 'clickable' style like hover and focus style."
+        },
+        "attribute": "clickable",
+        "reflect": true,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "hasCoverImage": {}
+    };
+  }
+  static get elementRef() { return "host"; }
+}