@zanichelli/albe-web-components 9.2.1 → 9.2.2

package/dist/esm/{utils-2f109041.js → utils-4d2d99d9.js}

@@ -1,100 +1,100 @@
-import { g as KeyboardCode, p as Device } from './index-a8cda90b.js';
-import { d as desktopBreakpoint, t as tabletBreakpoint, m as mobileBreakpoint } from './breakpoints-572720f6.js';
+import { g as KeyboardCode, p as Device } from './index-03c8b0f0.js';
+import { d as desktopBreakpoint, t as tabletBreakpoint, m as mobileBreakpoint } from './breakpoints-9b81eb1b.js';
 
-/**
- * Return boolean value for passed value if a boolean corresponding value is found
- * Return passed value otherwise
- */
-function boolean(value) {
-  switch (value) {
-    case true:
-    case "true":
-    case 1:
-    case "1":
-    case "on":
-    case "yes":
-      return true;
-    case false:
-    case "false":
-    case 0:
-    case "0":
-    case "off":
-    case "no":
-      return false;
-    default:
-      return value;
-  }
-}
-function randomId() {
-  return Math.random().toString(36).replace("0.", "");
-}
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function handleKeyboardSubmit(ev, callback, ...args) {
-  if (ev.code === KeyboardCode.ENTER || ev.code === KeyboardCode.SPACE) {
-    ev.preventDefault();
-    callback(...args);
-  }
-}
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function handleEnterKeydSubmit(ev, callback, ...args) {
-  if (ev.code === KeyboardCode.ENTER) {
-    ev.preventDefault();
-    callback(...args);
-  }
-}
-function getClickedElement(elem = null) {
-  if (!elem) {
-    elem = document.activeElement;
-  }
-  if (elem && elem.shadowRoot && elem.shadowRoot.activeElement) {
-    elem = elem.shadowRoot.activeElement;
-    return getClickedElement(elem);
-  }
-  return elem;
-}
-function getElementTree(elem, tree = []) {
-  tree.push(elem);
-  if (elem.parentElement) {
-    elem = elem.parentElement;
-    return getElementTree(elem, tree);
-  }
-  else if (elem.parentNode && elem.parentNode.host) {
-    elem = elem.parentNode.host;
-    return getElementTree(elem, tree);
-  }
-  return tree;
-}
-function getDevice() {
-  switch (true) {
-    case window.innerWidth <= mobileBreakpoint:
-      return Device.MOBILE;
-    case window.innerWidth <= tabletBreakpoint:
-      return Device.TABLET;
-    case window.innerWidth <= desktopBreakpoint:
-      return Device.DESKTOP;
-    default:
-      return Device.DESKTOP_WIDE;
-  }
-}
-function convertJson(data) {
-  try {
-    return JSON.parse(data);
-  }
-  catch (_a) {
-    return false;
-  }
-}
-function colorFromId(id) {
-  const prefix = "avatar-C"; // prefix for color vars name
-  const colorsCount = 19; // available colors
-  const seed = Math.ceil(2 ** 31 - 1) * parseFloat(`0.${id}`);
-  let color = Math.ceil(colorsCount * (seed % 1));
-  // if result of mc is 0
-  // es.: 3895229
-  if (color === 0) {
-    color = 1;
-  }
-  return `${prefix}${color.toString().padStart(2, "0")}`;
+/**
+ * Return boolean value for passed value if a boolean corresponding value is found
+ * Return passed value otherwise
+ */
+function boolean(value) {
+  switch (value) {
+    case true:
+    case "true":
+    case 1:
+    case "1":
+    case "on":
+    case "yes":
+      return true;
+    case false:
+    case "false":
+    case 0:
+    case "0":
+    case "off":
+    case "no":
+      return false;
+    default:
+      return value;
+  }
+}
+function randomId() {
+  return Math.random().toString(36).replace("0.", "");
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function handleKeyboardSubmit(ev, callback, ...args) {
+  if (ev.code === KeyboardCode.ENTER || ev.code === KeyboardCode.SPACE) {
+    ev.preventDefault();
+    callback(...args);
+  }
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function handleEnterKeydSubmit(ev, callback, ...args) {
+  if (ev.code === KeyboardCode.ENTER) {
+    ev.preventDefault();
+    callback(...args);
+  }
+}
+function getClickedElement(elem = null) {
+  if (!elem) {
+    elem = document.activeElement;
+  }
+  if (elem && elem.shadowRoot && elem.shadowRoot.activeElement) {
+    elem = elem.shadowRoot.activeElement;
+    return getClickedElement(elem);
+  }
+  return elem;
+}
+function getElementTree(elem, tree = []) {
+  tree.push(elem);
+  if (elem.parentElement) {
+    elem = elem.parentElement;
+    return getElementTree(elem, tree);
+  }
+  else if (elem.parentNode && elem.parentNode.host) {
+    elem = elem.parentNode.host;
+    return getElementTree(elem, tree);
+  }
+  return tree;
+}
+function getDevice() {
+  switch (true) {
+    case window.innerWidth <= mobileBreakpoint:
+      return Device.MOBILE;
+    case window.innerWidth <= tabletBreakpoint:
+      return Device.TABLET;
+    case window.innerWidth <= desktopBreakpoint:
+      return Device.DESKTOP;
+    default:
+      return Device.DESKTOP_WIDE;
+  }
+}
+function convertJson(data) {
+  try {
+    return JSON.parse(data);
+  }
+  catch (_a) {
+    return false;
+  }
+}
+function colorFromId(id) {
+  const prefix = "avatar-C"; // prefix for color vars name
+  const colorsCount = 19; // available colors
+  const seed = Math.ceil(2 ** 31 - 1) * parseFloat(`0.${id}`);
+  let color = Math.ceil(colorsCount * (seed % 1));
+  // if result of mc is 0
+  // es.: 3895229
+  if (color === 0) {
+    color = 1;
+  }
+  return `${prefix}${color.toString().padStart(2, "0")}`;
 }
 
 export { handleKeyboardSubmit as a, boolean as b, colorFromId as c, getElementTree as d, getClickedElement as e, convertJson as f, getDevice as g, handleEnterKeydSubmit as h, randomId as r };

package/dist/esm/z-accordion.entry.js

@@ -1,63 +1,63 @@
 import { r as registerInstance, c as createEvent, h } from './index-a2ca4b97.js';
-import { e as ControlSize, _ as AccordionVariant } from './index-a8cda90b.js';
+import { e as ControlSize, _ as AccordionVariant } from './index-03c8b0f0.js';
 
 const stylesCss = ":host,:host *,:host ::slotted(*){box-sizing:border-box}:host{--z-accordion-highlight-color:transparent;--z-accordion-bg:var(--color-surface01);display:block;border-top:var(--border-size-small) solid var(--color-surface03);border-bottom:var(--border-size-small) solid var(--color-surface03);background-color:var(--z-accordion-bg);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host([variant=\"background\"]){border:var(--border-size-small) solid var(--color-surface03);border-radius:var(--border-radius)}:host([variant=\"background\"][shadow]){box-shadow:var(--shadow-2)}details{background-color:transparent}summary{--summary-x-small-height:32px;--summary-small-height:36px;--summary-big-height:44px;--summary-height:var(--summary-big-height);--summary-y-padding:var(--space-unit);position:relative;display:flex;height:var(--summary-height);align-items:center;padding:var(--summary-y-padding) var(--space-unit) var(--summary-y-padding) calc(var(--space-unit) * 2);column-gap:var(--space-unit);cursor:pointer;list-style:none}:host([size=\"x-small\"]) summary{--summary-height:var(--summary-x-small-height)}:host([size=\"small\"]) summary{--summary-height:var(--summary-small-height)}:host(:is([size=\"x-small\"],[size=\"small\"])) summary{--summary-y-padding:calc(var(--space-unit) / 2)}:host([variant=\"background\"]) summary{padding-right:calc(var(--space-unit) * 2);border-radius:calc(var(--border-radius) - var(--border-size-small))}:host([variant=\"background\"][open]) summary{border-bottom-left-radius:0;border-bottom-right-radius:0}:host([is-disabled]) summary{cursor:default}summary:focus:focus-visible{background-color:var(--color-surface03);box-shadow:var(--shadow-focus-primary);outline:none}summary::before,:host([highlight][variant=\"background\"]) .z-accordion-content::before{position:absolute;top:0;left:0;display:block;width:var(--space-unit);height:100%;content:\"\"}:host([highlight][variant=\"background\"]) summary::before{border-top-left-radius:calc(var(--border-radius) - var(--border-size-small))}:host([highlight][variant=\"background\"]:not([open])) summary::before,:host([highlight][variant=\"background\"][open]) .z-accordion-content::before{border-bottom-left-radius:calc(var(--border-radius) - var(--border-size-small))}:host([highlight]) summary::before,:host([highlight][variant=\"background\"]) .z-accordion-content::before{background-color:var(--z-accordion-highlight-color, transparent)}:host([is-disabled][highlight]) summary::before,:host([is-disabled][highlight][variant=\"background\"]) .z-accordion-content::before{background-color:var(--color-text03)}summary>z-icon{fill:var(--color-text01)}:host([is-disabled]) summary>z-icon{fill:var(--color-text03)}.z-accordion-label{color:var(--color-text01);font-size:var(--font-size-3);font-weight:var(--font-sb)}:host([size=\"x-small\"]) .z-accordion-label{font-size:var(--font-size-2)}:host([size=\"x-small\"]) :is(.z-accordion-label-icon,.z-accordion-chevron){--z-icon-width:16px;--z-icon-height:16px}.z-accordion-tags{display:flex;align-items:center;column-gap:calc(var(--space-unit) / 2)}summary z-icon.z-accordion-chevron{margin-left:auto}.z-accordion-content{position:relative;padding:var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2) calc(var(--space-unit) * 2);font-size:var(--font-size-2);}:host(:is([size=\"x-small\"],[size=\"small\"])) .z-accordion-content{padding-bottom:var(--space-unit)}:host([size=\"x-small\"]) .z-accordion-content{font-size:var(--font-size-1)}:host([variant=\"background\"]) .z-accordion-content{padding-right:calc(var(--space-unit) * 2)}:host([is-disabled]) .z-accordion-label{color:var(--color-text03)}:host([is-disabled]) .z-accordion-tags ::slotted(z-tag[slot=\"tag\"]){--z-tag-bg:var(--color-text03) !important;--z-tag-text-color:var(--color-text-inverse) !important}@media (hover: hover){summary:focus:focus-visible{position:relative;z-index:1}:host(:not([is-disabled])) summary:hover{background-color:var(--color-surface03)}:host(:not([is-disabled])) summary:hover .z-accordion-label{text-decoration:underline}}@media (hover: none){:host([size]) summary{--summary-height:var(--summary-big-height);--summary-y-padding:var(--space-unit)}:host([size]) .z-accordion-label{font-size:var(--font-size-3)}:host([size]) .z-accordion-content{font-size:var(--font-size-2)}:host([size]) :is(.z-accordion-label-icon,.z-accordion-chevron){--z-icon-width:18px;--z-icon-height:18px}}z-accordion+z-accordion{border-top:none}z-accordion[variant=\"background\"]+z-accordion[variant=\"background\"]{border-radius:0}z-accordion[variant=\"background\"]:first-of-type:not(:last-of-type){border-bottom-left-radius:0;border-bottom-right-radius:0}z-accordion[variant=\"background\"]+z-accordion[variant=\"background\"]:last-of-type{border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}z-accordion[variant=\"background\"]:first-of-type:not(:last-of-type)::part(summary){border-bottom-left-radius:0;border-bottom-right-radius:0}z-accordion[variant=\"background\"]+z-accordion[variant=\"background\"]::part(summary){border-radius:0}z-accordion[variant=\"background\"]+z-accordion[variant=\"background\"]:last-of-type:not([open])::part(summary){border-bottom-left-radius:calc(var(--border-radius) - var(--border-size-small));border-bottom-right-radius:calc(var(--border-radius) - var(--border-size-small))}";
 
-const ZAccordion = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.toggled = createEvent(this, "toggled", 7);
-    /**
-     * Size of the component.
-     */
-    this.size = ControlSize.BIG;
-    /**
-     * Disabled state of the accordion.
-     */
-    this.isDisabled = false;
-    /**
-     * The open state of the accordion.
-     */
-    this.open = false;
-    /**
-     * Enable highlight band on the `summary`'s left edge.
-     */
-    this.highlight = false;
-    /**
-     * Accordion variant.
-     */
-    this.variant = AccordionVariant.DEFAULT;
-    /**
-     * Enable box-shadow on the accordion. Only applies when `variant` is `BACKGROUND`.
-     */
-    this.shadow = true;
-  }
-  onDisabledChange() {
-    if (this.isDisabled) {
-      this.open = false;
-    }
-  }
-  /**
-   * Handle `details` element toggle.
-   * If currently disabled, prevent toggling by forcing the `open` state to `false`.
-   * Unfortunately the "toggle" event is not cancelable and when catched, the `open` state is already changed.
-   */
-  onDetailsToggle() {
-    if (this.isDisabled) {
-      this.open = false;
-      this.detailsElm.open = false;
-      return;
-    }
-    this.open = this.detailsElm.open;
-    this.toggled.emit(this.open);
-  }
-  render() {
-    return (h("details", { ref: (elm) => (this.detailsElm = elm), onToggle: this.onDetailsToggle.bind(this), open: this.open }, h("summary", { tabIndex: this.isDisabled ? -1 : null, part: "summary" }, this.icon && (h("z-icon", { class: "z-accordion-label-icon", name: this.icon })), h("span", { class: "z-accordion-label" }, this.label), h("span", { class: "z-accordion-tags" }, h("slot", { name: "tag" })), h("z-icon", { class: "z-accordion-chevron", name: this.open ? "chevron-up" : "chevron-down" })), !this.isDisabled && (h("div", { class: "z-accordion-content", part: "content" }, h("slot", null)))));
-  }
-  static get watchers() { return {
-    "isDisabled": ["onDisabledChange"]
-  }; }
-};
+const ZAccordion = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.toggled = createEvent(this, "toggled", 7);
+    /**
+     * Size of the component.
+     */
+    this.size = ControlSize.BIG;
+    /**
+     * Disabled state of the accordion.
+     */
+    this.isDisabled = false;
+    /**
+     * The open state of the accordion.
+     */
+    this.open = false;
+    /**
+     * Enable highlight band on the `summary`'s left edge.
+     */
+    this.highlight = false;
+    /**
+     * Accordion variant.
+     */
+    this.variant = AccordionVariant.DEFAULT;
+    /**
+     * Enable box-shadow on the accordion. Only applies when `variant` is `BACKGROUND`.
+     */
+    this.shadow = true;
+  }
+  onDisabledChange() {
+    if (this.isDisabled) {
+      this.open = false;
+    }
+  }
+  /**
+   * Handle `details` element toggle.
+   * If currently disabled, prevent toggling by forcing the `open` state to `false`.
+   * Unfortunately the "toggle" event is not cancelable and when catched, the `open` state is already changed.
+   */
+  onDetailsToggle() {
+    if (this.isDisabled) {
+      this.open = false;
+      this.detailsElm.open = false;
+      return;
+    }
+    this.open = this.detailsElm.open;
+    this.toggled.emit(this.open);
+  }
+  render() {
+    return (h("details", { ref: (elm) => (this.detailsElm = elm), onToggle: this.onDetailsToggle.bind(this), open: this.open }, h("summary", { tabIndex: this.isDisabled ? -1 : null, part: "summary" }, this.icon && (h("z-icon", { class: "z-accordion-label-icon", name: this.icon })), h("span", { class: "z-accordion-label" }, this.label), h("span", { class: "z-accordion-tags" }, h("slot", { name: "tag" })), h("z-icon", { class: "z-accordion-chevron", name: this.open ? "chevron-up" : "chevron-down" })), !this.isDisabled && (h("div", { class: "z-accordion-content", part: "content" }, h("slot", null)))));
+  }
+  static get watchers() { return {
+    "isDisabled": ["onDisabledChange"]
+  }; }
+};
 ZAccordion.style = stylesCss;
 
 export { ZAccordion as z_accordion };

package/dist/esm/z-alert.entry.js

@@ -2,14 +2,14 @@ import { r as registerInstance, h } from './index-a2ca4b97.js';
 
 const stylesCss = ":host{display:block;box-sizing:border-box;color:var(--color-surface05);font-family:var(--font-family-sans);font-size:14px;font-weight:var(--font-rg);line-height:calc(var(--space-unit) * 2)}:host>div{padding:calc(var(--space-unit) * 2)}:host>.success{background:var(--color-success-inverse);fill:var(--color-success01)}:host>.warning{background:var(--color-warning-inverse);fill:var(--color-warning01)}:host>.error{background:var(--color-error-inverse);fill:var(--color-error01)}";
 
-const ZAlert = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-  }
-  render() {
-    return (h("div", { class: this.type }, h("slot", null)));
-  }
-};
+const ZAlert = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h("div", { class: this.type }, h("slot", null)));
+  }
+};
 ZAlert.style = stylesCss;
 
 export { ZAlert as z_alert };

package/dist/esm/z-anchor-navigation.entry.js

@@ -1,49 +1,49 @@
 import { r as registerInstance, h, H as Host } from './index-a2ca4b97.js';
-import { B as ButtonVariant } from './index-a8cda90b.js';
+import { B as ButtonVariant } from './index-03c8b0f0.js';
 
 const stylesCss = "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}}}";
 
-const ZAnchorNavigation = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /**
-     * 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))));
-  }
-};
+const ZAnchorNavigation = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * 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))));
+  }
+};
 ZAnchorNavigation.style = stylesCss;
 
 export { ZAnchorNavigation as z_anchor_navigation };