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

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

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

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

@@ -1,148 +0,0 @@
-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"; }
-}