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

package/dist/collection/components/typography/z-heading/index.js

@@ -1,68 +0,0 @@
-import { h } from "@stencil/core";
-export class ZHeading {
-  constructor() {
-    /** Font weight variant */
-    this.variant = "regular";
-  }
-  render() {
-    return (h("z-typography", { tabIndex: 0, component: this.component || `h${this.level}`, level: `h${this.level}`, variant: this.variant }, h("slot", null)));
-  }
-  static get is() { return "z-heading"; }
-  static get encapsulation() { return "shadow"; }
-  static get properties() {
-    return {
-      "level": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "1 | 2 | 3 | 4",
-          "resolved": "1 | 2 | 3 | 4",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Typography level"
-        },
-        "attribute": "level",
-        "reflect": false
-      },
-      "variant": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "\"regular\" | \"semibold\" | \"light\"",
-          "resolved": "\"light\" | \"regular\" | \"semibold\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Font weight variant"
-        },
-        "attribute": "variant",
-        "reflect": false,
-        "defaultValue": "\"regular\""
-      },
-      "component": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "HTML tag to use to wrap slotted content"
-        },
-        "attribute": "component",
-        "reflect": false
-      }
-    };
-  }
-}

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

@@ -1,91 +0,0 @@
-import { h, Host } from "@stencil/core";
-export class ZTypography {
-  constructor() {
-    /** Font weight variant */
-    this.variant = "regular";
-  }
-  render() {
-    const el = document.createElement(this.component || "span");
-    el.innerHTML = `<slot />`;
-    this.hostElement.shadowRoot.appendChild(el);
-    return (h(Host, { class: {
-        [this.level]: Boolean(this.level),
-        regular: this.variant === "regular",
-        semibold: this.variant === "semibold",
-        light: this.variant === "light",
-      } }));
-  }
-  static get is() { return "z-typography"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["styles.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["styles.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "level": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "ZTypographyLevels",
-          "resolved": "\"b1\" | \"b2\" | \"b3\" | \"b4\" | \"b5\" | \"h1\" | \"h2\" | \"h3\" | \"h4\"",
-          "references": {
-            "ZTypographyLevels": {
-              "location": "local"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Typography level"
-        },
-        "attribute": "level",
-        "reflect": false
-      },
-      "variant": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "\"regular\" | \"semibold\" | \"light\"",
-          "resolved": "\"light\" | \"regular\" | \"semibold\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Font weight variant"
-        },
-        "attribute": "variant",
-        "reflect": false,
-        "defaultValue": "\"regular\""
-      },
-      "component": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "HTML tag to use to wrap slotted content"
-        },
-        "attribute": "component",
-        "reflect": false
-      }
-    };
-  }
-  static get elementRef() { return "hostElement"; }
-}

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

@@ -1,65 +0,0 @@
-:host > * {
-  margin: 0;
-  font-family: var(--dashboard-font);
-}
-
-:host(.regular) > * {
-  font-weight: var(--font-rg);
-}
-
-:host(.semibold) > * {
-  font-weight: 600;
-}
-
-:host(.light) > * {
-  font-weight: 300;
-}
-
-:host(.h1) > * {
-  font-size: 32px;
-  line-height: 40px;
-}
-
-:host(.h2) > * {
-  font-size: 28px;
-  line-height: 36px;
-}
-
-:host(.h3) > * {
-  font-size: 24px;
-  line-height: 32px;
-}
-
-:host(.h4) > * {
-  font-size: 20px;
-  line-height: 28px;
-}
-
-:host(.b1) > * {
-  font-size: 20px;
-  line-height: 28px;
-}
-
-:host(.b2) > * {
-  font-size: 18px;
-  line-height: 28px;
-}
-
-:host(.b3) > * {
-  font-size: 16px;
-  line-height: 24px;
-}
-
-:host(.b4) > * {
-  font-size: 14px;
-  line-height: 20px;
-}
-
-:host(.b5) > * {
-  font-size: 12px;
-  line-height: 16px;
-}
-
-:host(:focus-visible) {
-  outline: none;
-}

package/dist/collection/components/z-anchor-navigation/index.js

@@ -1,95 +0,0 @@
-import { h, Host } from "@stencil/core";
-import { ButtonVariant } from "../../beans";
-/**
- * * Anchor navigation component.
- * @slot Main slot. Put some `<a>` tags inside. If you need an action button/icon, wrap it and the <a> inside another tag.
- * @example
- * ```
- * <z-anchor-navigation>
- *  <div>
- *    <a href="#section-id">Section name</a>
- *    <button type="button">
- *      <z-icon name="share" />
- *    </button>
- *  </div>
- * </z-anchor-navigation>
- * ```
- */
-export class ZAnchorNavigation {
-  constructor() {
-    /**
-     * If enabled, the text of each anchor will be hidden unless
-     * for the current one or the one the user is hovering.
-     */
-    this.hideUnselected = false;
-    /**
-     * Whether the mobile list is collapsed.
-     */
-    this.collapsed = false;
-  }
-  /**
-   * Set aria-current attribute to the anchors and `current` to nav children.
-   */
-  setAriaCurrent() {
-    Array.from(this.nav.children).forEach((item) => {
-      const anchor = item instanceof HTMLAnchorElement ? item : item.querySelector("a");
-      const isCurrent = window.location.href === anchor.href;
-      anchor.setAttribute("aria-current", isCurrent.toString());
-      item.toggleAttribute("current", isCurrent);
-    });
-  }
-  /**
-   * Toggle collapsed state.
-   */
-  toggleCollapsed() {
-    this.collapsed = !this.collapsed;
-  }
-  componentDidLoad() {
-    window.addEventListener("hashchange", this.setAriaCurrent.bind(this));
-    this.setAriaCurrent();
-  }
-  disconnectedCallback() {
-    window.removeEventListener("hashchange", this.setAriaCurrent);
-  }
-  render() {
-    return (h(Host, { collapsed: this.collapsed }, h("z-button", { class: "toggle", variant: ButtonVariant.SECONDARY, icon: this.collapsed ? "chevron-up" : "chevron-down", onClick: this.toggleCollapsed.bind(this) }, "salta a"), h("nav", { ref: (el) => (this.nav = el) }, h("slot", null))));
-  }
-  static get is() { return "z-anchor-navigation"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["styles.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["styles.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "hideUnselected": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "If enabled, the text of each anchor will be hidden unless\nfor the current one or the one the user is hovering."
-        },
-        "attribute": "hide-unselected",
-        "reflect": true,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "collapsed": {}
-    };
-  }
-}

package/dist/collection/components/z-anchor-navigation/styles.css

@@ -1,129 +0,0 @@
-/* stylelint-disable value-no-vendor-prefix */
-html {
-  scroll-behavior: smooth;
-}
-
-z-anchor-navigation nav {
-  display: none;
-  flex-direction: column;
-  justify-content: flex-start;
-  row-gap: calc(var(--space-unit) / 2);
-}
-
-z-anchor-navigation[collapsed] nav {
-  display: flex;
-  margin-top: var(--space-unit);
-}
-
-z-anchor-navigation nav a {
-  display: -webkit-box;
-  overflow: clip;
-  width: 100%;
-  box-sizing: border-box;
-  padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2);
-  -webkit-box-orient: vertical;
-  color: inherit;
-  font-weight: inherit;
-  -webkit-line-clamp: 2;
-  overflow-clip-margin: content-box;
-  text-decoration: none;
-}
-
-z-anchor-navigation nav * a:not(:only-child) {
-  padding-right: calc(var(--space-unit) * 5);
-}
-
-@supports not (overflow-clip-margin: content-box) {
-  z-anchor-navigation nav a {
-    display: inline-block;
-    overflow: hidden;
-    -webkit-line-clamp: none;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-}
-
-z-anchor-navigation nav > * {
-  position: relative;
-  border-left: var(--border-size-large) solid var(--color-surface04);
-  color: var(--color-text01);
-  font-family: var(--font-family-sans);
-  transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, color 0.3s ease-in-out;
-}
-
-z-anchor-navigation nav > [current] {
-  border-left-color: var(--color-primary01);
-  color: var(--color-link-primary);
-  font-weight: var(--font-sb);
-}
-
-z-anchor-navigation nav > * > *:is(z-button, button, z-icon) {
-  position: absolute;
-  top: 50%;
-  right: 0;
-  transform: translateY(-50%);
-  transition: opacity 0.3s ease-in-out;
-}
-
-z-anchor-navigation nav button {
-  padding: 0;
-  border: none;
-  margin: 0;
-  background-color: transparent;
-}
-
-z-anchor-navigation nav z-icon {
-  --z-icon-width: 16px;
-  --z-icon-height: 16px;
-
-  display: flex;
-  padding: calc(var(--space-unit) * 1.5);
-  fill: var(--color-icon02);
-}
-
-@media (min-width: 768px) {
-  z-anchor-navigation z-button.toggle {
-    display: none !important;
-  }
-
-  z-anchor-navigation nav {
-    display: flex;
-  }
-
-  z-anchor-navigation nav a {
-    outline: none;
-  }
-
-  @media (hover: hover) {
-    z-anchor-navigation nav > *:hover {
-      border-left-color: var(--color-hover-secondary);
-      background-color: var(--color-hover-surface);
-      color: var(--color-hover-link);
-    }
-  }
-
-  z-anchor-navigation nav > *:is(:focus, :focus-within),
-  z-anchor-navigation nav :is(z-icon, button):focus:focus-visible {
-    box-shadow: var(--shadow-focus-primary);
-    outline: none;
-  }
-
-  z-anchor-navigation[hide-unselected] nav > *:not([current], :hover, :focus, :focus-within) {
-    color: transparent;
-  }
-
-  z-anchor-navigation
-    nav
-    > *:not([current], :hover, :focus, :focus-within)
-    > *:is(z-button, button, z-icon):not(:focus:focus-visible) {
-    opacity: 0;
-    pointer-events: none;
-  }
-
-  @media (hover: none) {
-    z-anchor-navigation:not([hide-unselected]) nav > * > *:is(z-button, button, z-icon) {
-      opacity: 1;
-      pointer-events: all;
-    }
-  }
-}

package/dist/collection/components/z-aria-alert/index.js

@@ -1,39 +0,0 @@
-import { h, Host } from "@stencil/core";
-import { ZAriaAlertMode } from "../../beans";
-export class ZAriaAlert {
-  constructor() {
-    /** Aria live mode */
-    this.mode = ZAriaAlertMode.POLITE;
-  }
-  render() {
-    return (h(Host, { "aria-live": this.mode, "aria-atomic": "true", "aria-relevant": "additions" }, h("slot", null)));
-  }
-  static get is() { return "z-aria-alert"; }
-  static get properties() {
-    return {
-      "mode": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "ZAriaAlertMode",
-          "resolved": "ZAriaAlertMode.ASSERTIVE | ZAriaAlertMode.POLITE",
-          "references": {
-            "ZAriaAlertMode": {
-              "location": "import",
-              "path": "../../beans"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Aria live mode"
-        },
-        "attribute": "mode",
-        "reflect": false,
-        "defaultValue": "ZAriaAlertMode.POLITE"
-      }
-    };
-  }
-}

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

@@ -1,142 +0,0 @@
-import { h, Host } from "@stencil/core";
-import { AvatarSize } from "../../beans";
-export class ZAvatar {
-  constructor() {
-    var _a, _b;
-    /** [optional] Avatar size */
-    this.size = AvatarSize.MEDIUM;
-    /** [optional] Avatar text color */
-    this.textColor = "text-white";
-    /** [optional] Avatar background color */
-    this.backgroundColor = "bg-grey-700";
-    if (((_a = this.text) === null || _a === void 0 ? void 0 : _a.length) === 0 && ((_b = this.image) === null || _b === void 0 ? void 0 : _b.length) === 0) {
-      console.warn("z-avatar must contain at least one prop between text and image");
-    }
-  }
-  getTextSize() {
-    if (this.size === AvatarSize.SMALL) {
-      return "5";
-    }
-    else if (this.size === AvatarSize.MEDIUM) {
-      return "4";
-    }
-    else if (this.size === AvatarSize.LARGE) {
-      return "2";
-    }
-  }
-  render() {
-    return (h(Host, { class: { [this.size]: true, [`body-${this.getTextSize()}-sb`]: true }, style: {
-        color: `var(--${this.textColor})`,
-        backgroundColor: `var(--${this.backgroundColor})`,
-      } }, this.text && !this.image && h("span", null, this.text.substring(0, 2)), this.image && (h("img", { src: this.image, onError: () => (this.image = "") }))));
-  }
-  static get is() { return "z-avatar"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["styles.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["styles.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "AvatarSize",
-          "resolved": "AvatarSize.LARGE | AvatarSize.MEDIUM | AvatarSize.SMALL",
-          "references": {
-            "AvatarSize": {
-              "location": "import",
-              "path": "../../beans"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "[optional] Avatar size"
-        },
-        "attribute": "size",
-        "reflect": false,
-        "defaultValue": "AvatarSize.MEDIUM"
-      },
-      "text": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "[optional] Avatar text"
-        },
-        "attribute": "text",
-        "reflect": false
-      },
-      "textColor": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "[optional] Avatar text color"
-        },
-        "attribute": "text-color",
-        "reflect": false,
-        "defaultValue": "\"text-white\""
-      },
-      "backgroundColor": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "[optional] Avatar background color"
-        },
-        "attribute": "background-color",
-        "reflect": false,
-        "defaultValue": "\"bg-grey-700\""
-      },
-      "image": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "[optional] Avatar image"
-        },
-        "attribute": "image",
-        "reflect": false
-      }
-    };
-  }
-}

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

@@ -1,32 +0,0 @@
-:host {
-  display: inline-flex;
-  overflow: hidden;
-  align-items: center;
-  justify-content: center;
-  background-color: var(--bg-grey-700);
-  border-radius: 50%;
-  font-family: var(--font-family-sans);
-  text-transform: uppercase;
-}
-
-:host(.small),
-:host(.small) > img {
-  width: calc(var(--space-unit) * 3);
-  height: calc(var(--space-unit) * 3);
-}
-
-:host(.medium),
-:host(.medium) > img {
-  width: calc(var(--space-unit) * 4);
-  height: calc(var(--space-unit) * 4);
-}
-
-:host(.large),
-:host(.large) > img {
-  width: calc(var(--space-unit) * 5);
-  height: calc(var(--space-unit) * 5);
-}
-
-:host > img {
-  object-fit: cover;
-}