@zanichelli/albe-web-components 2.31.2 → 2.33.1

package/www/build/z-tooltip.entry.js

@@ -0,0 +1,270 @@
+import { r as registerInstance, f as createEvent, h, e as Host, g as getElement } from './index-44936066.js';
+import { f as TooltipPosition } from './index-8f67b3da.js';
+
+const stylesCss = ":host{--z-tooltip-theme--surface:var(--color-surface01);--z-tooltip-theme--text:var(--color-text01);--arrow-size:6px;--edge-offset:calc(-1 * (var(--arrow-size) + calc(var(--space-unit) * 2)));position:relative;display:none;align-items:center;justify-content:center;padding:var(--space-unit);min-width:calc(var(--space-unit) * 8);min-height:calc(var(--space-unit) * 4);color:var(--z-tooltip-theme--text);fill:currentColor;font-family:var(--font-family-sans);text-align:center;border-radius:var(--border-radius-small);background:var(--z-tooltip-theme--surface);filter:drop-shadow(0 4px 8px var(--shadow-color-base));will-change:filter}:host(.legacy){display:inline-flex;padding:calc(var(--space-unit) * 2);min-width:auto;min-height:auto;max-width:200px;font-style:italic;line-height:16px;letter-spacing:0.32px;font-size:12px;border:var(--border-size-small) solid var(--gray200);border-radius:var(--border-radius);filter:drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.08))}:host(.legacy)::before{--arrow-size:14px}:host([position])::before{--arrow-edge-offset:calc(100% - var(--arrow-size) - var(--space-unit));--arrow-center-x-offset:calc(50% - calc(var(--arrow-size) / 2));--arrow-center-y-offset:calc(100% - calc(var(--arrow-size) / 2));content:'';position:absolute;width:var(--arrow-size);height:var(--arrow-size);background:inherit;transform:rotate(45deg)}:host([open][style*='top:']),:host([open][style*='inset:']){display:inline-flex}:host([position^='top']){margin-bottom:var(--space-unit)}:host([position='right']){margin-left:var(--space-unit)}:host([position='top_right']),:host([position='bottom_right']){margin-left:var(--edge-offset)}:host([position^='bottom']){margin-top:var(--space-unit)}:host([position='left']){margin-right:var(--space-unit)}:host([position='top_left']),:host([position='bottom_left']){margin-right:var(--edge-offset)}:host([position^='top'])::before{top:var(--arrow-center-y-offset)}:host([position^='bottom'])::before{bottom:var(--arrow-center-y-offset)}:host([position='top'])::before,:host([position='bottom'])::before{left:var(--arrow-center-x-offset)}:host([position='right'])::before,:host([position='left'])::before{top:var(--arrow-center-x-offset)}:host([position='right'])::before{right:var(--arrow-center-y-offset)}:host([position='top_right'])::before,:host([position='bottom_right'])::before{right:var(--arrow-edge-offset)}:host([position='left'])::before{left:var(--arrow-center-y-offset)}:host([position='top_left'])::before,:host([position='bottom_left'])::before{left:var(--arrow-edge-offset)}::slotted(*){flex:1 auto;overflow:auto}";
+
+const documentElement = document.documentElement;
+/**
+ * Find the closest scrollable parent of a node.
+ *
+ * @param {Element} element The node
+ */
+function findScrollableParent(element) {
+  let parent = element.parentNode;
+  while (parent && parent !== documentElement) {
+    const { overflow, overflowX, overflowY } = window.getComputedStyle(parent);
+    if (overflow === 'hidden' ||
+      overflowY === 'hidden' ||
+      overflowX === 'hidden') {
+      return parent;
+    }
+    if ((parent.scrollHeight > parent.clientHeight && overflow !== 'visible' && overflowY !== 'visible') ||
+      (parent.scrollWidth > parent.clientWidth && overflow !== 'visible' && overflowX !== 'visible')) {
+      return parent;
+    }
+    parent = parent.parentNode;
+  }
+  return documentElement;
+}
+/**
+ * Calculate computed offset.
+ * It includes matrix transformations.
+ * @param element The target element.
+ * @param targetParentOffset The relative offset parent.
+ * @return A client rect object.
+ */
+function computeOffset(element, targetParentOffset) {
+  const rect = element.getBoundingClientRect();
+  const width = rect.width;
+  const height = rect.height;
+  let top = 0;
+  let left = 0;
+  let offsetParent = element;
+  while (offsetParent && offsetParent != targetParentOffset) {
+    left += offsetParent.offsetLeft;
+    // document.body sometimes has offsetTop == 0 but still has an
+    // offset because of children margins!
+    if (offsetParent === document.body) {
+      top += offsetParent.getBoundingClientRect().top + window.scrollY;
+    }
+    else {
+      top += offsetParent.offsetTop;
+    }
+    if (window.DOMMatrix) {
+      const style = window.getComputedStyle(offsetParent);
+      const transform = style.transform || style.webkitTransform;
+      const domMatrix = new DOMMatrix(transform);
+      if (domMatrix) {
+        left += domMatrix.m41;
+        if (offsetParent !== document.body) {
+          top += domMatrix.m42;
+        }
+      }
+    }
+    if (!offsetParent.offsetParent) {
+      break;
+    }
+    offsetParent = offsetParent.offsetParent;
+  }
+  let parentWidth;
+  let parentHeight;
+  if (offsetParent === document.body) {
+    parentWidth = window.innerWidth;
+    parentHeight = window.innerHeight;
+  }
+  else {
+    parentWidth = offsetParent.offsetWidth;
+    parentHeight = offsetParent.offsetHeight;
+  }
+  const right = parentWidth - left - rect.width;
+  const bottom = parentHeight - top - rect.height;
+  return { top, right, bottom, left, width, height };
+}
+const ZTooltip = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.positionChange = createEvent(this, "positionChange", 7);
+    /** Tooltip position. */
+    this.type = TooltipPosition.AUTO;
+    /**
+     * The open state of the tooltip.
+     */
+    this.open = false;
+  }
+  validateType(newValue) {
+    if (newValue &&
+      Object
+        .values(TooltipPosition)
+        .every((position) => newValue !== position)) {
+      this.type = TooltipPosition.AUTO;
+    }
+  }
+  onPositionChange() {
+    this.positionChange.emit({ position: this.position });
+  }
+  disconnectedCallback() {
+    cancelAnimationFrame(this.animationFrameRequestId);
+  }
+  /**
+   * Setup tooltip behaviors on opening.
+   */
+  onOpen() {
+    cancelAnimationFrame(this.animationFrameRequestId);
+    if (this.content) {
+      return;
+    }
+    if (this.open) {
+      const setPosition = () => {
+        if (this.open) {
+          this.setPosition();
+          this.animationFrameRequestId = requestAnimationFrame(setPosition);
+        }
+      };
+      setPosition();
+    }
+    else {
+      const style = this.host.style;
+      style.removeProperty("top");
+      style.removeProperty("right");
+      style.removeProperty("bottom");
+      style.removeProperty("left");
+    }
+  }
+  /**
+   * Set the position of the tooltip.
+   */
+  setPosition() {
+    let element;
+    if (typeof this.bindTo === "string") {
+      element = this.host.ownerDocument.querySelector(this.bindTo);
+    }
+    else if (this.bindTo) {
+      element = this.bindTo;
+    }
+    else {
+      element = this.host.parentElement;
+    }
+    if (!element) {
+      return;
+    }
+    const scrollContainer = findScrollableParent(element);
+    const scrollingBoundingRect = scrollContainer.getBoundingClientRect();
+    const offsetContainer = this.host.offsetParent;
+    const relativeBoundingRect = offsetContainer ? computeOffset(offsetContainer, scrollContainer) : { top: 0, right: 0, bottom: 0, left: 0 };
+    const boundingRect = computeOffset(element, scrollContainer);
+    const top = boundingRect.top - scrollContainer.scrollTop;
+    const bottom = scrollingBoundingRect.height - (boundingRect.top + boundingRect.height) + scrollContainer.scrollTop;
+    const left = boundingRect.left - scrollContainer.scrollLeft;
+    const right = scrollingBoundingRect.width - (boundingRect.left + boundingRect.width) + scrollContainer.scrollLeft;
+    const overflowBottom = Math.max(0, scrollingBoundingRect.top + scrollingBoundingRect.height - window.innerHeight);
+    const overflowRight = Math.max(0, scrollingBoundingRect.left + scrollingBoundingRect.width - window.innerWidth);
+    const availableTop = Math.min(top, top + scrollingBoundingRect.top);
+    const availableBottom = Math.min(bottom, bottom - overflowBottom);
+    const availableLeft = Math.min(left, left + scrollingBoundingRect.left);
+    const availableRight = Math.min(right, right - overflowRight);
+    const availableHeight = availableTop + availableBottom + boundingRect.height;
+    const availableWidth = availableLeft + availableRight + boundingRect.width;
+    let position = this.type;
+    if (position === TooltipPosition.AUTO) {
+      /**
+       * The `AUTO` position tries to place the tooltip in the "safest" area,
+       * where there's more space available.
+       */
+      const positions = [];
+      if (availableTop / availableHeight > 0.9) {
+        positions.unshift(TooltipPosition.TOP);
+      }
+      else if (availableTop / availableHeight > 0.6) {
+        positions.push(TooltipPosition.TOP);
+      }
+      else if (availableTop / availableHeight < 0.1) {
+        positions.unshift(TooltipPosition.BOTTOM);
+      }
+      else {
+        positions.push(TooltipPosition.BOTTOM);
+      }
+      if (availableLeft / availableWidth > 0.6) {
+        positions.push(TooltipPosition.LEFT);
+      }
+      else if (availableLeft / availableWidth < 0.4) {
+        positions.push(TooltipPosition.RIGHT);
+      }
+      position = positions.join("_");
+    }
+    const style = this.host.style;
+    if (!this.content) {
+      style.position = "absolute";
+    }
+    const offsetTop = boundingRect.top - relativeBoundingRect.top;
+    const offsetRight = boundingRect.right - relativeBoundingRect.right;
+    const offsetBottom = boundingRect.bottom - relativeBoundingRect.bottom;
+    const offsetLeft = boundingRect.left - relativeBoundingRect.left;
+    if (position === TooltipPosition.TOP ||
+      position === TooltipPosition.TOP_RIGHT ||
+      position === TooltipPosition.TOP_LEFT) {
+      style.top = "auto";
+      style.bottom = `${offsetBottom + boundingRect.height}px`;
+    }
+    if (position === TooltipPosition.BOTTOM ||
+      position === TooltipPosition.BOTTOM_RIGHT ||
+      position === TooltipPosition.BOTTOM_LEFT) {
+      style.top = `${offsetTop + boundingRect.height}px`;
+      style.bottom = "auto";
+    }
+    if (position === TooltipPosition.TOP ||
+      position === TooltipPosition.BOTTOM) {
+      style.left = `${offsetLeft +
+        (boundingRect.width / 2) -
+        (this.host.clientWidth / 2)}px`;
+    }
+    if (position === TooltipPosition.TOP_RIGHT ||
+      position === TooltipPosition.BOTTOM_RIGHT) {
+      style.right = "auto";
+      style.left = `${offsetLeft + boundingRect.width}px`;
+    }
+    if (position === TooltipPosition.TOP_LEFT ||
+      position === TooltipPosition.BOTTOM_LEFT) {
+      style.left = "auto";
+      style.right = `${offsetRight + boundingRect.width}px`;
+    }
+    if (position === TooltipPosition.RIGHT ||
+      position === TooltipPosition.LEFT) {
+      style.top = `${offsetTop +
+        (boundingRect.height / 2) -
+        (this.host.clientHeight / 2)}px`;
+      style.bottom = "auto";
+    }
+    if (position === TooltipPosition.RIGHT) {
+      style.right = "auto";
+      style.left = `${offsetLeft + boundingRect.width}px`;
+    }
+    if (position === TooltipPosition.LEFT) {
+      style.left = "auto";
+      style.right = `${offsetRight + boundingRect.width}px`;
+    }
+    this.position = position;
+  }
+  componentWillLoad() {
+    // Keep backward compatibility
+    if (this.content) {
+      this.open = true;
+    }
+    this.validateType(this.type);
+    this.onOpen();
+  }
+  render() {
+    if (this.content) {
+      return (h(Host, { class: "legacy", position: this.type }, this.content));
+    }
+    return (h(Host, { position: this.position }, h("slot", null)));
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "type": ["validateType"],
+    "position": ["onPositionChange"],
+    "open": ["onOpen"]
+  }; }
+};
+ZTooltip.style = stylesCss;
+
+export { ZTooltip as z_tooltip };

package/www/build/z-typography.entry.js

@@ -0,0 +1,25 @@
+import { r as registerInstance, h, e as Host, g as getElement } from './index-44936066.js';
+
+const stylesCss = ":host>*{font-family:var(--dashboard-font);margin:0}: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}";
+
+const ZTypography = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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"
+      } }));
+  }
+  get hostElement() { return getElement(this); }
+};
+ZTypography.style = stylesCss;
+
+export { ZTypography as z_typography };

package/www/build/z-user-dropdown.entry.js

@@ -0,0 +1,91 @@
+import { r as registerInstance, f as createEvent, h, e as Host } from './index-44936066.js';
+import { m as mobileBreakpoint } from './breakpoints-c386984e.js';
+
+const stylesCss = ":host{background-color:var(--gray900)}:host(.inverse){background-color:var(--color-white)}button{cursor:pointer;display:flex;flex-direction:column;width:100%;margin:0;background-color:var(--gray900);border:none;padding:0;letter-spacing:0.16px;white-space:nowrap}button.inverse{background-color:var(--color-white)}button div.firstline{display:flex;justify-content:flex-end;align-items:center;max-width:200px}button.open div.firstline{max-width:none}z-icon{padding:0 2px;fill:var(--color-white)}z-icon.inverse{fill:var(--gray900)}ul{box-sizing:border-box;position:absolute;left:0;padding:calc(var(--space-unit) / 2) calc(var(--space-unit) * 2) 0 calc(var(--space-unit) * 2);width:100%;margin:calc(var(--space-unit) * 1.5) 0 0 0;background-color:var(--gray900);font-family:var(--font-family-sans);font-weight:var(--font-sb);font-size:14px;line-height:20px;letter-spacing:0.3px}ul.inverse{background-color:var(--color-white)}ul>li{display:flex;justify-content:flex-end;white-space:nowrap;padding:calc(var(--space-unit) * 1.5 - 1px) 0;margin:0;border-bottom:var(--border-base) solid var(--gray700)}ul>li.inverse{border-bottom-color:var(--gray400)}ul>li:first-child{border-top:none;padding-top:0;padding-bottom:calc(var(--space-unit) + 6px);flex-direction:column;align-items:end}ul>li:last-child{border-bottom:none;margin-bottom:0}#guestbutton{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;width:100%;font-family:var(--font-family-sans);font-weight:var(--font-sb);font-size:14px;line-height:1;letter-spacing:0.3px;border-width:var(--border-size-medium);border-style:solid;border-radius:var(--border-radius);vertical-align:middle;text-transform:uppercase;text-decoration:none;cursor:pointer;outline:none;fill:currentColor;height:32px;min-width:32px;padding:0 calc(var(--space-unit) * 2);background-color:var(--color-white);border-color:var(--color-white);color:var(--gray800)}#guestbutton.inverse{background-color:var(--gray800);border-color:var(--gray800);color:var(--color-white)}.userfullname{padding:0;overflow:hidden;max-width:250px;text-overflow:ellipsis;width:100%;color:var(--color-white);font-family:var(--font-family-sans);font-weight:var(--font-sb);font-size:16px;line-height:24px;letter-spacing:0;text-align:right}.userfullname.inverse{color:var(--gray800)}.useremail{color:var(--color-white);font-family:var(--font-family-sans);font-weight:var(--font-rg);font-size:12px;line-height:16px;letter-spacing:0.32px;overflow:hidden;text-overflow:ellipsis;width:100%;text-align:right}.useremail.inverse{color:var(--gray800)}@media only screen and (min-width: 768px){:host{height:calc(var(--space-unit) * 4);background-color:var(--gray900)}:host(.inverse){background-color:var(--color-white)}:host>div{position:relative;top:50%;transform:translateY(-50%)}:host>div.open{top:auto;transform:none}:host>div>div{padding:0}:host>div>div.open{position:absolute;right:calc(var(--space-unit) * -1);box-shadow:0px 2px calc(var(--space-unit) * .5) 0px rgba(0, 0, 0, 0.5);background-color:var(--color-white);margin-top:calc(var(--space-unit) / 2);padding:calc(var(--space-unit) / 2 + 1px) var(--space-unit) 0 var(--space-unit);transform:translate(0, -4px)}:host>div>div.inverse.open{background-color:var(--gray800)}button{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-end;align-items:end;align-content:center}button.open{background-color:var(--color-white);border-top:var(--border-size-small) solid var(--color-white);border-top-left-radius:calc(var(--space-unit) * .5);border-top-right-radius:calc(var(--space-unit) * .5);max-width:initial;margin-left:var(--space-unit);padding-right:var(--space-unit)}button.open.inverse{border-top-color:var(--gray800);background-color:var(--gray800)}button:not(.open) z-icon{fill:var(--color-white)}button:not(.open) z-icon.inverse{fill:var(--gray800)}button.open z-icon{fill:var(--gray800)}button.open z-icon.inverse{fill:var(--color-white)}.userfullname{font-family:var(--font-family-sans);font-weight:var(--font-sb);font-size:14px;line-height:20px;letter-spacing:0.16px;padding:0 calc(var(--space-unit) - 6px) 0 calc(var(--space-unit) - 2px);width:auto}.userfullname.inverse{color:var(--gray800)}button.open div.userfullname{color:var(--gray800);max-width:none;text-overflow:clip}button.open div.userfullname.inverse{color:var(--color-white)}.useremail{padding-right:calc(var(--space-unit) * 3 - 2px);box-sizing:border-box}button.open div.useremail{color:var(--gray800)}button.open div.useremail.inverse{color:var(--color-white)}ul{position:initial;left:initial;padding:0;width:100%;background-color:var(--color-white)}ul.inverse{border-bottom-color:var(--gray800);background-color:var(--gray800)}ul>li{color:var(--gray800);border-bottom:var(--border-base) solid var(--gray400);margin:0 var(--space-unit)}ul>li.inverse{color:var(--color-white)}ul>li:first-child{border-top:var(--border-base) solid var(--gray400);padding-top:calc(var(--space-unit) + 3px);padding-bottom:calc(var(--space-unit) + 5px)}}";
+
+const ZUserDropdown = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.userButtonClick = createEvent(this, "userButtonClick", 7);
+    this.dropdownMenuLinkClick = createEvent(this, "dropdownMenuLinkClick", 7);
+    /** if inner components colors are inverted, or not, default false */
+    this.useInverseColors = false;
+    this.isMenuOpen = false;
+    this.handleLoggedButtonClick = this.handleLoggedButtonClick.bind(this);
+    this.emitDropdownMenuLinkClick = this.emitDropdownMenuLinkClick.bind(this);
+  }
+  componentDidLoad() {
+    this.setMobileAndDivToResizeWidth();
+  }
+  componentWillUpdate() {
+    this.setMobileAndDivToResizeWidth();
+  }
+  componentWillRender() {
+    if (this.menuContent) {
+      this.linkArray = typeof this.menuContent === "string" ? JSON.parse(this.menuContent) : this.menuContent;
+    }
+  }
+  setMobileAndDivToResizeWidth() {
+    var _a;
+    if (this.divToResize) {
+      this.isMobile = window.screen.width <= mobileBreakpoint || window.innerWidth <= mobileBreakpoint;
+      if (this.logged && !this.isMobile && this.isMenuOpen) {
+        this.divToResize.style.width = `${(_a = this.userButton) === null || _a === void 0 ? void 0 : _a.offsetWidth}px`;
+      }
+      else {
+        this.divToResize.removeAttribute('style');
+      }
+    }
+  }
+  emitUserButtonClick() {
+    this.userButtonClick.emit(this.isMenuOpen);
+  }
+  emitDropdownMenuLinkClick(e) {
+    this.isMenuOpen = false;
+    this.dropdownMenuLinkClick.emit({ e, linkId: e.detail.linkId });
+  }
+  handleResize() {
+    this.isMobile = window.innerWidth <= mobileBreakpoint;
+  }
+  handleOrientationChange() {
+    this.isMobile = screen.width <= mobileBreakpoint;
+  }
+  handleClickOutside(e) {
+    if (e.target.nodeName !== "Z-USER-DROPDOWN") {
+      this.isMenuOpen = false;
+    }
+  }
+  handleLoggedButtonClick() {
+    this.isMenuOpen = !this.isMenuOpen;
+    this.emitUserButtonClick();
+  }
+  renderGuestButton() {
+    return (h("button", { id: "guestbutton", class: this.useInverseColors ? "inverse" : "", onClick: () => this.emitUserButtonClick() }, "ENTRA"));
+  }
+  renderLoggedButton() {
+    const direction = this.isMenuOpen ? "up" : "down";
+    const colorClass = this.useInverseColors ? "inverse" : "";
+    return (h("button", { ref: (el) => (this.userButton = el), title: this.userFullName, class: `${colorClass} ${this.isMenuOpen ? "open" : ""}`, onClick: this.handleLoggedButtonClick }, h("div", null, h("div", { class: "firstline" }, h("z-icon", { class: colorClass, name: "user-avatar-filled", height: 16, width: 16 }), !this.isMobile && h("div", { class: `userfullname ${colorClass}` }, this.userFullName), h("z-icon", { class: colorClass, name: `caret-${direction}-filled`, height: 16, width: 16 })), !this.isMobile && this.isMenuOpen && h("div", { class: `useremail ${colorClass}` }, this.userEmail))));
+  }
+  getZLinkTextcolor() {
+    if (this.isMobile) {
+      return this.useInverseColors ? "black" : "white";
+    }
+    else {
+      return this.useInverseColors ? "white" : "black";
+    }
+  }
+  renderDropdownMenu() {
+    const colorClass = this.useInverseColors ? "inverse" : "";
+    return (this.isMenuOpen && (h("ul", { class: colorClass }, this.isMobile &&
+      h("li", { class: colorClass }, h("div", { class: `userfullname ${colorClass}` }, this.userFullName), h("div", { class: `useremail ${colorClass}` }, this.userEmail)), this.linkArray && this.linkArray.map((link) => h("li", { id: link.id, class: colorClass }, h("z-link", { textcolor: this.getZLinkTextcolor(), href: link.link, htmlid: link.id, target: link.target, icon: link.icon, onZLinkClick: this.emitDropdownMenuLinkClick }, link.label))))));
+  }
+  render() {
+    const openClass = `${this.logged && this.isMenuOpen ? "open" : ""}`;
+    const colorClass = this.useInverseColors ? "inverse" : "";
+    return (h(Host, { class: colorClass }, h("div", { ref: (el) => (this.divToResize = el), class: openClass }, h("div", { class: `${colorClass} ${openClass}` }, this.logged ? this.renderLoggedButton() : this.renderGuestButton(), this.logged && this.renderDropdownMenu()))));
+  }
+};
+ZUserDropdown.style = stylesCss;
+
+export { ZUserDropdown as z_user_dropdown };

package/www/build/z-visually-hidden.entry.js

@@ -0,0 +1,15 @@
+import { r as registerInstance, h } from './index-44936066.js';
+
+const stylesCss = ":host{border:0;clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;margin:0 -1px -1px 0;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}";
+
+const ZVisuallyHidden = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return h("slot", null);
+  }
+};
+ZVisuallyHidden.style = stylesCss;
+
+export { ZVisuallyHidden as z_visually_hidden };

package/www/index.html

@@ -1,4 +1,4 @@
-<!doctype html><html dir="ltr" lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"> <title>Stencil Component Starter</title> <link rel="stylesheet" type="text/css" href="/build/p-ea943cbd.css"> <link rel="modulepreload" href="/build/p-7206f897.js"><script type="module" src="/build/p-7206f897.js" data-stencil data-resources-url="/build/" data-stencil-namespace="web-components-library"></script> <script nomodule="" src="/build/web-components-library.js" data-stencil></script> </head> <body style="width: 100%; margin: 0; background-color: #f9f9f9;"> <z-logo></z-logo> <z-logo image-alt="Ciaoooo!" link="https://www.google.com" target-blank=""></z-logo> <z-logo width="128" height="32" image-alt="Ciaoooo!"></z-logo> <z-logo width="128" height="32" image-alt="Ciaoooo!" link="https://www.google.com" target-blank=""></z-logo> <z-logo width="128" image-alt="Ciaoooo!"></z-logo> <z-logo height="32" image-alt="Ciaoooo!" link="https://www.google.com" target-blank=""></z-logo> <z-logo width="31" height="40" image-alt="Ciaoooo!"></z-logo> <z-logo width="31" height="40" image-alt="Ciaoooo!" link="https://www.google.com" target-blank=""></z-logo> <z-logo width="300" height="100" image-alt="Ciaoooo!"></z-logo> <z-logo width="300" height="100" image-alt="Ciaoooo!" link="https://www.google.com" target-blank=""></z-logo> <a href="#bottom">bottom</a> <h1>Table</h1> <h2>Empty table</h2> <z-registro-table bordered="true" call-to-action-label="Action 1" call-to-action-two-label="Action 2" empty="true" id="empty-table" message="Siamo spiacenti, al momento non sono presenti dati da visualizzare!" subtitle="Eventuale testo"> <z-registro-table-head slot="table-header"> <z-registro-table-header-row> <z-registro-table-header> <span>Titolo 1</span> </z-registro-table-header> </z-registro-table-header-row> </z-registro-table-head> <z-registro-table-body slot="table-body"> <z-registro-table-row> <z-registro-table-cell> <z-avatar text="AS" size="medium" background-color="avatar-C11" style="color: var(--text-white); background-color: var(--avatar-C11);"></z-avatar> <span>Contenuto 1-1</span> </z-registro-table-cell> </z-registro-table-row> <z-registro-table-row> <z-registro-table-cell> <z-avatar text="FF" size="medium" background-color="avatar-C12" style="color: var(--text-white); background-color: var(--avatar-C12);"></z-avatar> <span>Contenuto 1-2</span> </z-registro-table-cell> </z-registro-table-row> <z-registro-table-row> <z-registro-table-cell> <z-avatar text="AS" size="medium" background-color="avatar-C13" style="color: var(--text-white); background-color: var(--avatar-C13);"></z-avatar> <span>Contenuto 1-3</span> </z-registro-table-cell> </z-registro-table-row> <z-registro-table-row> <z-registro-table-cell> <z-avatar text="AS" size="medium" background-color="avatar-C14" class="sc-fbkiRW ccsChj medium body-4-sb hydrated" style="color: var(--text-white); background-color: var(--avatar-C14);"></z-avatar> <span>Contenuto 1-4</span> </z-registro-table-cell> </z-registro-table-row> </z-registro-table-body> </z-registro-table> <hr> <h2>Empty table one cta</h2> <z-registro-table empty="true" call-to-action-label="Action 1" id="empty-table-two"></z-registro-table> <h2>Empty table no column</h2> <z-registro-table empty="true"> <z-registro-table-head></z-registro-table-head> </z-registro-table> <h2>Simple table</h2> <z-registro-table bordered="true" header-sticky="false" column-sticky="false"> <z-registro-table-head> <z-registro-table-header-row> <z-registro-table-header style="width: 1000px;"> <span>T300 </span> </z-registro-table-header> <z-registro-table-header> <span>Titolo 2</span> </z-registro-table-header> <z-registro-table-header> <span>Titolo 3</span> </z-registro-table-header> <z-registro-table-header> <span>Titolo 4</span> </z-registro-table-header> </z-registro-table-header-row> </z-registro-table-head> <z-registro-table-body> <z-registro-table-row> <z-registro-table-cell> <span>Contenuto 1-1</span> </z-registro-table-cell> <z-registro-table-cell> <span>Contenuto 1-2</span> </z-registro-table-cell> <z-registro-table-cell> <span>Contenuto 1-3</span> </z-registro-table-cell> <z-registro-table-cell> <span>Contenuto 1-4</span> </z-registro-table-cell> </z-registro-table-row> <z-registro-table-row> <z-registro-table-cell> <span>Contenuto 2-1</span> </z-registro-table-cell> <z-registro-table-cell> <span>Contenuto 2-2</span> </z-registro-table-cell> <z-registro-table-cell> <span>Contenuto 2-3</span> </z-registro-table-cell> <z-registro-table-cell> <span>Contenuto 2-4</span> </z-registro-table-cell> </z-registro-table-row> <z-registro-table-row> <z-registro-table-cell> <span>Contenuto 3-1</span> </z-registro-table-cell> <z-registro-table-cell> <span>Contenuto 3-2</span> </z-registro-table-cell> <z-registro-table-cell> <span>Contenuto 3-3</span> </z-registro-table-cell> <z-registro-table-cell> <span>Contenuto 3-4</span> </z-registro-table-cell> </z-registro-table-row> <z-registro-table-row> <z-registro-table-cell show-button="${boolean(" show-button",="" false)}"=""> <span>Contenuto 4-1</span> </z-registro-table-cell> <z-registro-table-cell show-button="${boolean(" show-button",="" false)}"=""> <span>Contenuto 4-2</span> </z-registro-table-cell> <z-registro-table-cell show-button="${boolean(" show-button",="" false)}"=""> <span>Contenuto 4-3</span> </z-registro-table-cell> <z-registro-table-cell show-button="${boolean(" show-button",="" false)}"=""> <span>Contenuto 4-4</span> </z-registro-table-cell> </z-registro-table-row> </z-registro-table-body> <z-registro-table-sticky-footer slot="sticky-footer"> <span>This is a sticky footer</span> </z-registro-table-sticky-footer> </z-registro-table> <h2>Error table</h2> <z-registro-table error="true" lines="8"> <img src="./assets/images/png/zanichelli-error-image.png" slot="error-image"> </z-registro-table> <hr> <h2>Error table header</h2> <z-registro-table error="true" id="error-table"> <z-registro-table-head slot="table-header"> <z-registro-table-header-row> <z-registro-table-header> <span>Titolo 1</span> </z-registro-table-header> <z-registro-table-header> <span>Titolo 2</span> </z-registro-table-header> <z-registro-table-header> <span>Titolo 2</span> </z-registro-table-header> <z-registro-table-header> <span>Titolo 2</span> </z-registro-table-header> <z-registro-table-header> <span>Titolo 2</span> </z-registro-table-header> <z-registro-table-header> <span>Titolo 2</span> </z-registro-table-header> <z-registro-table-header> <span>Titolo 2</span> </z-registro-table-header> <z-registro-table-header> <span>Titolo 2</span> </z-registro-table-header> <z-registro-table-header> <span>Titolo last</span> </z-registro-table-header> </z-registro-table-header-row> </z-registro-table-head> <div slot="error-action"> <z-body level="{4}"> <a href="#" target="_blank">Clicca qui</a> per ricaricare la pagina </z-body> </div> </z-registro-table> <!--    --> <!-- Contextual menu --> <h2>ZContextualMenu</h2> <div style="padding-left: 280px; width: 80%;"> <z-contextual-menu id="contextual-menu-1" elements="[{&quot;icon&quot;: &quot;share&quot;, &quot;text&quot;: &quot;Element 1&quot;}, {&quot;icon&quot;: &quot;delete&quot;, &quot;text&quot;: &quot;Elemento 2&quot;}, {&quot;icon&quot;: &quot;delete&quot;, &quot;text&quot;: &quot;Elemento 2&quot;, &quot;disabled&quot;: &quot;true&quot;}]"></z-contextual-menu> </div> <br><br><br> <h2>Z-List</h2> <div style="padding-left: 280px; width: 150px;"> <z-list size="large"> <z-list-group size="large" divider-type="header" divider-size="large" divider-color="status-error-red-lighter"> <z-list-element> <z-avatar text="AB"></z-avatar><span>no header 123456</span> </z-list-element> <z-list-element> <z-avatar text="AB"></z-avatar><span>no header 123456</span> </z-list-element> <z-list-element> <z-avatar text="AB"></z-avatar><span>no header 123456</span> </z-list-element> </z-list-group> <z-list-group size="large" divider-type="element"> <p slot="header-title">Z-LIST-GROUP TITOLO 1</p> <z-list-element> <z-avatar text="AB"></z-avatar><span>7890</span> </z-list-element> <z-list-element> <z-avatar text="AB"></z-avatar><span>7890</span> </z-list-element> <z-list-element expandable="false"> <z-avatar text="AB"></z-avatar><span>7890</span> </z-list-element> </z-list-group> </z-list> </div> <div style="padding-left: 280px; width: 80%;"> <z-list size="large"> <z-list-group size="large" divider-type="header" divider-size="large" divider-color="status-error-red-lighter"> <p slot="header-title">Z-LIST-GROUP TITOLO 1</p> <z-list-element> <z-avatar text="AB"></z-avatar><span>no clickable</span> </z-list-element> <z-list-element expandable="" align-button="right"><span>123456</span> <p slot="inner-content">testo espanso</p> </z-list-element> <z-list-element expandable="" align-button="left"> <z-avatar text="AB"></z-avatar><span>123456</span> <p slot="inner-content">testo espanso</p> </z-list-element> </z-list-group> <z-list-group size="large" divider-type="element"> <p slot="header-title">Z-LIST-GROUP TITOLO 1</p> <z-list-element background-color="myz-blue" expandable-style="menu" expandable=""> <z-avatar text="AB"></z-avatar><span>7890</span> <p slot="inner-content">testo espanso</p> </z-list-element> <z-list-element expandable-style="menu" expandable=""> <z-avatar text="AB"></z-avatar><span>7890</span> <p slot="inner-content">testo espanso</p> </z-list-element> <z-list-element expandable-style="menu" expandable=""> <z-avatar text="AB"></z-avatar><span>7890</span> <p slot="inner-content">testo espanso</p> </z-list-element> <z-list-element expandable-style="menu" expandable=""> <z-avatar text="AB"></z-avatar><span>7890</span> <p slot="inner-content">testo espanso</p> </z-list-element> </z-list-group> </z-list> </div> <h1>Table</h1> <h2>Empty table</h2> <z-registro-table empty="true" call-to-action-label="Action 1" call-to-action-two-label="Action 2" id="empty-table"> <z-registro-table-head> <z-registro-table-header-row> <z-registro-table-header> <span>Titolo 1</span> </z-registro-table-header> <z-registro-table-header> <span>Titolo 2</span> </z-registro-table-header> <z-registro-table-header> <span>Titolo 3</span> </z-registro-table-header> <z-registro-table-header> <span>Titolo 4</span> </z-registro-table-header> </z-registro-table-header-row> </z-registro-table-head> </z-registro-table> <h2>Empty table one cta</h2> <z-registro-table empty="true" call-to-action-label="Action 1" id="empty-table-two"></z-registro-table> <h2>Empty table no column</h2> <z-registro-table empty="true"> <z-registro-table-head></z-registro-table-head> </z-registro-table> <h2>Simple table</h2> <z-registro-table bordered="true" header-sticky="false" column-sticky="false"> <z-registro-table-head> <z-registro-table-header-row expandable="true"> <z-registro-table-header style="width: 1000px;"> <span>T300 </span> </z-registro-table-header> <z-registro-table-header> <span>Titolo 2</span> </z-registro-table-header> <z-registro-table-header> <span>Titolo 3</span> </z-registro-table-header> <z-registro-table-header> <span>Titolo 4</span> </z-registro-table-header> </z-registro-table-header-row> </z-registro-table-head> <z-registro-table-body> <z-registro-table-row expanded-type="expandable"> <z-registro-table-cell> <span>Contenuto 1-1</span> <z-button variant="tertiary">button</z-button> </z-registro-table-cell> <z-registro-table-cell> <span>Contenuto 1-2</span> </z-registro-table-cell> <z-registro-table-cell> <span>Contenuto 1-3</span> </z-registro-table-cell> <z-registro-table-cell> <span>Contenuto 1-4</span> </z-registro-table-cell> </z-registro-table-row> <z-registro-table-expanded-row col-span="5"> <div>Contenuto aggiuntivo 1</div> </z-registro-table-expanded-row> <z-registro-table-row expanded-type="expandable"> <z-registro-table-cell> <span>Contenuto 2-1</span> </z-registro-table-cell> <z-registro-table-cell> <span>Contenuto 2-2</span> </z-registro-table-cell> <z-registro-table-cell> <span>Contenuto 2-3</span> </z-registro-table-cell> <z-registro-table-cell> <span>Contenuto 2-4</span> </z-registro-table-cell> </z-registro-table-row> <z-registro-table-expanded-row col-span="5"> <div>Contenuto aggiuntivo 1</div> </z-registro-table-expanded-row> <z-registro-table-row expanded-type="padding"> <z-registro-table-cell> <span>Contenuto 3-1</span> </z-registro-table-cell> <z-registro-table-cell> <span>Contenuto 3-2</span> </z-registro-table-cell> <z-registro-table-cell> <span>Contenuto 3-3</span> </z-registro-table-cell> <z-registro-table-cell> <span>Contenuto 3-4</span> </z-registro-table-cell> </z-registro-table-row> <z-registro-table-row expanded-type="expandable"> <z-registro-table-cell> <span>Contenuto 4-1</span> </z-registro-table-cell> <z-registro-table-cell> <span>Contenuto 4-2</span> </z-registro-table-cell> <z-registro-table-cell> <span>Contenuto 4-3</span> </z-registro-table-cell> <z-registro-table-cell> <span>Contenuto 4-4</span> </z-registro-table-cell> </z-registro-table-row> <z-registro-table-expanded-row col-span="5"> <div>Contenuto aggiuntivo 1</div> </z-registro-table-expanded-row> </z-registro-table-body> <z-registro-table-sticky-footer slot="sticky-footer"> <span>This is a sticky footer</span> </z-registro-table-sticky-footer> </z-registro-table> <!-- <z-candybar>
+<!doctype html><html dir="ltr" lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"> <title>Stencil Component Starter</title> <link rel="stylesheet" type="text/css" href="/build/web-components-library.css"> <script type="module" src="/build/web-components-library.esm.js" data-stencil></script> <script nomodule="" src="/build/web-components-library.js" data-stencil></script> </head> <body style="width: 100%; margin: 0; background-color: #f9f9f9;"> <z-logo></z-logo> <z-logo image-alt="Ciaoooo!" link="https://www.google.com" target-blank=""></z-logo> <z-logo width="128" height="32" image-alt="Ciaoooo!"></z-logo> <z-logo width="128" height="32" image-alt="Ciaoooo!" link="https://www.google.com" target-blank=""></z-logo> <z-logo width="128" image-alt="Ciaoooo!"></z-logo> <z-logo height="32" image-alt="Ciaoooo!" link="https://www.google.com" target-blank=""></z-logo> <z-logo width="31" height="40" image-alt="Ciaoooo!"></z-logo> <z-logo width="31" height="40" image-alt="Ciaoooo!" link="https://www.google.com" target-blank=""></z-logo> <z-logo width="300" height="100" image-alt="Ciaoooo!"></z-logo> <z-logo width="300" height="100" image-alt="Ciaoooo!" link="https://www.google.com" target-blank=""></z-logo> <a href="#bottom">bottom</a> <h1>Table</h1> <h2>Empty table</h2> <z-registro-table bordered="true" call-to-action-label="Action 1" call-to-action-two-label="Action 2" empty="true" id="empty-table" message="Siamo spiacenti, al momento non sono presenti dati da visualizzare!" subtitle="Eventuale testo"> <z-registro-table-head slot="table-header"> <z-registro-table-header-row> <z-registro-table-header> <span>Titolo 1</span> </z-registro-table-header> </z-registro-table-header-row> </z-registro-table-head> <z-registro-table-body slot="table-body"> <z-registro-table-row> <z-registro-table-cell> <z-avatar text="AS" size="medium" background-color="avatar-C11" style="color: var(--text-white); background-color: var(--avatar-C11);"></z-avatar> <span>Contenuto 1-1</span> </z-registro-table-cell> </z-registro-table-row> <z-registro-table-row> <z-registro-table-cell> <z-avatar text="FF" size="medium" background-color="avatar-C12" style="color: var(--text-white); background-color: var(--avatar-C12);"></z-avatar> <span>Contenuto 1-2</span> </z-registro-table-cell> </z-registro-table-row> <z-registro-table-row> <z-registro-table-cell> <z-avatar text="AS" size="medium" background-color="avatar-C13" style="color: var(--text-white); background-color: var(--avatar-C13);"></z-avatar> <span>Contenuto 1-3</span> </z-registro-table-cell> </z-registro-table-row> <z-registro-table-row> <z-registro-table-cell> <z-avatar text="AS" size="medium" background-color="avatar-C14" class="sc-fbkiRW ccsChj medium body-4-sb hydrated" style="color: var(--text-white); background-color: var(--avatar-C14);"></z-avatar> <span>Contenuto 1-4</span> </z-registro-table-cell> </z-registro-table-row> </z-registro-table-body> </z-registro-table> <hr> <h2>Empty table one cta</h2> <z-registro-table empty="true" call-to-action-label="Action 1" id="empty-table-two"></z-registro-table> <h2>Empty table no column</h2> <z-registro-table empty="true"> <z-registro-table-head></z-registro-table-head> </z-registro-table> <h2>Simple table</h2> <z-registro-table bordered="true" header-sticky="false" column-sticky="false"> <z-registro-table-head> <z-registro-table-header-row> <z-registro-table-header style="width: 1000px;"> <span>T300 </span> </z-registro-table-header> <z-registro-table-header> <span>Titolo 2</span> </z-registro-table-header> <z-registro-table-header> <span>Titolo 3</span> </z-registro-table-header> <z-registro-table-header> <span>Titolo 4</span> </z-registro-table-header> </z-registro-table-header-row> </z-registro-table-head> <z-registro-table-body> <z-registro-table-row> <z-registro-table-cell> <span>Contenuto 1-1</span> </z-registro-table-cell> <z-registro-table-cell> <span>Contenuto 1-2</span> </z-registro-table-cell> <z-registro-table-cell> <span>Contenuto 1-3</span> </z-registro-table-cell> <z-registro-table-cell> <span>Contenuto 1-4</span> </z-registro-table-cell> </z-registro-table-row> <z-registro-table-row> <z-registro-table-cell> <span>Contenuto 2-1</span> </z-registro-table-cell> <z-registro-table-cell> <span>Contenuto 2-2</span> </z-registro-table-cell> <z-registro-table-cell> <span>Contenuto 2-3</span> </z-registro-table-cell> <z-registro-table-cell> <span>Contenuto 2-4</span> </z-registro-table-cell> </z-registro-table-row> <z-registro-table-row> <z-registro-table-cell> <span>Contenuto 3-1</span> </z-registro-table-cell> <z-registro-table-cell> <span>Contenuto 3-2</span> </z-registro-table-cell> <z-registro-table-cell> <span>Contenuto 3-3</span> </z-registro-table-cell> <z-registro-table-cell> <span>Contenuto 3-4</span> </z-registro-table-cell> </z-registro-table-row> <z-registro-table-row> <z-registro-table-cell show-button="${boolean(" show-button",="" false)}"=""> <span>Contenuto 4-1</span> </z-registro-table-cell> <z-registro-table-cell show-button="${boolean(" show-button",="" false)}"=""> <span>Contenuto 4-2</span> </z-registro-table-cell> <z-registro-table-cell show-button="${boolean(" show-button",="" false)}"=""> <span>Contenuto 4-3</span> </z-registro-table-cell> <z-registro-table-cell show-button="${boolean(" show-button",="" false)}"=""> <span>Contenuto 4-4</span> </z-registro-table-cell> </z-registro-table-row> </z-registro-table-body> <z-registro-table-sticky-footer slot="sticky-footer"> <span>This is a sticky footer</span> </z-registro-table-sticky-footer> </z-registro-table> <h2>Error table</h2> <z-registro-table error="true" lines="8"> <img src="./assets/images/png/zanichelli-error-image.png" slot="error-image"> </z-registro-table> <hr> <h2>Error table header</h2> <z-registro-table error="true" id="error-table"> <z-registro-table-head slot="table-header"> <z-registro-table-header-row> <z-registro-table-header> <span>Titolo 1</span> </z-registro-table-header> <z-registro-table-header> <span>Titolo 2</span> </z-registro-table-header> <z-registro-table-header> <span>Titolo 2</span> </z-registro-table-header> <z-registro-table-header> <span>Titolo 2</span> </z-registro-table-header> <z-registro-table-header> <span>Titolo 2</span> </z-registro-table-header> <z-registro-table-header> <span>Titolo 2</span> </z-registro-table-header> <z-registro-table-header> <span>Titolo 2</span> </z-registro-table-header> <z-registro-table-header> <span>Titolo 2</span> </z-registro-table-header> <z-registro-table-header> <span>Titolo last</span> </z-registro-table-header> </z-registro-table-header-row> </z-registro-table-head> <div slot="error-action"> <z-body level="{4}"> <a href="#" target="_blank">Clicca qui</a> per ricaricare la pagina </z-body> </div> </z-registro-table> <!--    --> <!-- Contextual menu --> <h2>ZContextualMenu</h2> <div style="padding-left: 280px; width: 80%;"> <z-contextual-menu id="contextual-menu-1" elements="[{&quot;icon&quot;: &quot;share&quot;, &quot;text&quot;: &quot;Element 1&quot;}, {&quot;icon&quot;: &quot;delete&quot;, &quot;text&quot;: &quot;Elemento 2&quot;}, {&quot;icon&quot;: &quot;delete&quot;, &quot;text&quot;: &quot;Elemento 2&quot;, &quot;disabled&quot;: &quot;true&quot;}]"></z-contextual-menu> </div> <br><br><br> <h2>Z-List</h2> <div style="padding-left: 280px; width: 150px;"> <z-list size="large"> <z-list-group size="large" divider-type="header" divider-size="large" divider-color="status-error-red-lighter"> <z-list-element> <z-avatar text="AB"></z-avatar><span>no header 123456</span> </z-list-element> <z-list-element> <z-avatar text="AB"></z-avatar><span>no header 123456</span> </z-list-element> <z-list-element> <z-avatar text="AB"></z-avatar><span>no header 123456</span> </z-list-element> </z-list-group> <z-list-group size="large" divider-type="element"> <p slot="header-title">Z-LIST-GROUP TITOLO 1</p> <z-list-element> <z-avatar text="AB"></z-avatar><span>7890</span> </z-list-element> <z-list-element> <z-avatar text="AB"></z-avatar><span>7890</span> </z-list-element> <z-list-element expandable="false"> <z-avatar text="AB"></z-avatar><span>7890</span> </z-list-element> </z-list-group> </z-list> </div> <div style="padding-left: 280px; width: 80%;"> <z-list size="large"> <z-list-group size="large" divider-type="header" divider-size="large" divider-color="status-error-red-lighter"> <p slot="header-title">Z-LIST-GROUP TITOLO 1</p> <z-list-element> <z-avatar text="AB"></z-avatar><span>no clickable</span> </z-list-element> <z-list-element expandable="" align-button="right"><span>123456</span> <p slot="inner-content">testo espanso</p> </z-list-element> <z-list-element expandable="" align-button="left"> <z-avatar text="AB"></z-avatar><span>123456</span> <p slot="inner-content">testo espanso</p> </z-list-element> </z-list-group> <z-list-group size="large" divider-type="element"> <p slot="header-title">Z-LIST-GROUP TITOLO 1</p> <z-list-element background-color="myz-blue" expandable-style="menu" expandable=""> <z-avatar text="AB"></z-avatar><span>7890</span> <p slot="inner-content">testo espanso</p> </z-list-element> <z-list-element expandable-style="menu" expandable=""> <z-avatar text="AB"></z-avatar><span>7890</span> <p slot="inner-content">testo espanso</p> </z-list-element> <z-list-element expandable-style="menu" expandable=""> <z-avatar text="AB"></z-avatar><span>7890</span> <p slot="inner-content">testo espanso</p> </z-list-element> <z-list-element expandable-style="menu" expandable=""> <z-avatar text="AB"></z-avatar><span>7890</span> <p slot="inner-content">testo espanso</p> </z-list-element> </z-list-group> </z-list> </div> <h1>Table</h1> <h2>Empty table</h2> <z-registro-table empty="true" call-to-action-label="Action 1" call-to-action-two-label="Action 2" id="empty-table"> <z-registro-table-head> <z-registro-table-header-row> <z-registro-table-header> <span>Titolo 1</span> </z-registro-table-header> <z-registro-table-header> <span>Titolo 2</span> </z-registro-table-header> <z-registro-table-header> <span>Titolo 3</span> </z-registro-table-header> <z-registro-table-header> <span>Titolo 4</span> </z-registro-table-header> </z-registro-table-header-row> </z-registro-table-head> </z-registro-table> <h2>Empty table one cta</h2> <z-registro-table empty="true" call-to-action-label="Action 1" id="empty-table-two"></z-registro-table> <h2>Empty table no column</h2> <z-registro-table empty="true"> <z-registro-table-head></z-registro-table-head> </z-registro-table> <h2>Simple table</h2> <z-registro-table bordered="true" header-sticky="false" column-sticky="false"> <z-registro-table-head> <z-registro-table-header-row expandable="true"> <z-registro-table-header style="width: 1000px;"> <span>T300 </span> </z-registro-table-header> <z-registro-table-header> <span>Titolo 2</span> </z-registro-table-header> <z-registro-table-header> <span>Titolo 3</span> </z-registro-table-header> <z-registro-table-header> <span>Titolo 4</span> </z-registro-table-header> </z-registro-table-header-row> </z-registro-table-head> <z-registro-table-body> <z-registro-table-row expanded-type="expandable"> <z-registro-table-cell> <span>Contenuto 1-1</span> <z-button variant="tertiary">button</z-button> </z-registro-table-cell> <z-registro-table-cell> <span>Contenuto 1-2</span> </z-registro-table-cell> <z-registro-table-cell> <span>Contenuto 1-3</span> </z-registro-table-cell> <z-registro-table-cell> <span>Contenuto 1-4</span> </z-registro-table-cell> </z-registro-table-row> <z-registro-table-expanded-row col-span="5"> <div>Contenuto aggiuntivo 1</div> </z-registro-table-expanded-row> <z-registro-table-row expanded-type="expandable"> <z-registro-table-cell> <span>Contenuto 2-1</span> </z-registro-table-cell> <z-registro-table-cell> <span>Contenuto 2-2</span> </z-registro-table-cell> <z-registro-table-cell> <span>Contenuto 2-3</span> </z-registro-table-cell> <z-registro-table-cell> <span>Contenuto 2-4</span> </z-registro-table-cell> </z-registro-table-row> <z-registro-table-expanded-row col-span="5"> <div>Contenuto aggiuntivo 1</div> </z-registro-table-expanded-row> <z-registro-table-row expanded-type="padding"> <z-registro-table-cell> <span>Contenuto 3-1</span> </z-registro-table-cell> <z-registro-table-cell> <span>Contenuto 3-2</span> </z-registro-table-cell> <z-registro-table-cell> <span>Contenuto 3-3</span> </z-registro-table-cell> <z-registro-table-cell> <span>Contenuto 3-4</span> </z-registro-table-cell> </z-registro-table-row> <z-registro-table-row expanded-type="expandable"> <z-registro-table-cell> <span>Contenuto 4-1</span> </z-registro-table-cell> <z-registro-table-cell> <span>Contenuto 4-2</span> </z-registro-table-cell> <z-registro-table-cell> <span>Contenuto 4-3</span> </z-registro-table-cell> <z-registro-table-cell> <span>Contenuto 4-4</span> </z-registro-table-cell> </z-registro-table-row> <z-registro-table-expanded-row col-span="5"> <div>Contenuto aggiuntivo 1</div> </z-registro-table-expanded-row> </z-registro-table-body> <z-registro-table-sticky-footer slot="sticky-footer"> <span>This is a sticky footer</span> </z-registro-table-sticky-footer> </z-registro-table> <!-- <z-candybar>
     <div class="content" slot="content">
       <div>
         <h2>Titolo</h2>
@@ -22,7 +22,11 @@
   </z-candybar> --> <!-- <z-cookiebar
     cookiepolicyurl="https://my.zanichelli.it/privacy#Cookie"
     hide="false">
-  </z-cookiebar> --> <z-modal onclick="closeModal(this)" modaltitle="NOT FIXED" modalsubtitle="sottotitolo" id="mymodal" style="display: none;"> <div slot="modalContent">Sunt officia excepteur fugiat velit enim ut duis magna qui voluptate nulla id pariatur veniam. Sunt nisi ad duis deserunt non minim. Do nulla id ea cupidatat laborum incididunt aliqua sint. Ea amet aliqua aliqua non duis quis magna eu incididunt nisi deserunt non aliqua elit. Ipsum officia elit in officia tempor aliquip est velit proident quis commodo. Aliqua proident id laboris exercitation dolore. Amet reprehenderit anim exercitation occaecat.</div> </z-modal> <!-- <z-modal-login></z-modal-login> --> <!-- <z-modal-login>
+  </z-cookiebar> --> <z-modal onclick="closeModal(this)" modaltitle="NOT FIXED" modalsubtitle="sottotitolo" id="mymodal" style="display: none;"> <div slot="modalContent">Sunt officia excepteur fugiat velit enim ut duis magna qui voluptate nulla id pariatur
+      veniam. Sunt nisi ad duis deserunt non minim. Do nulla id ea cupidatat laborum incididunt aliqua sint. Ea amet
+      aliqua aliqua non duis quis magna eu incididunt nisi deserunt non aliqua elit. Ipsum officia elit in officia
+      tempor aliquip est velit proident quis commodo. Aliqua proident id laboris exercitation dolore. Amet reprehenderit
+      anim exercitation occaecat.</div> </z-modal> <!-- <z-modal-login></z-modal-login> --> <!-- <z-modal-login>
     <z-input
       slot="username"
       label="username slottato"
@@ -447,33 +451,42 @@
           &quot;link&quot;: &quot;https://my.zanichelli.it/privacy&quot;
       }]
   }"></z-footer> <script>
-      function openModal(e) {
-        const m = document.getElementById("mymodal");
-        m.style = "display: block";
-        console.log(e);
-      }
-      
-      function closeModal(e) {
-        const m = document.getElementById("mymodal");
-        m.style = "display: none";
-        console.log(e);
-      }
-      const appMenu = document.getElementById("app-switcher");
-      appMenu.addEventListener("appButtonClick", (e) => openModal(e));
+    function openModal(e) {
+      const m = document.getElementById("mymodal");
+      m.style = "display: block";
+      console.log(e);
+    }
+
+    function closeModal(e) {
+      const m = document.getElementById("mymodal");
+      m.style = "display: none";
+      console.log(e);
+    }
+    const appMenu = document.getElementById("app-switcher");
+    appMenu.addEventListener("appButtonClick", (e) => openModal(e));
 
-      const contextualMenu = document.getElementById("contextual-menu-1");
-      contextualMenu.addEventListener("clickContextualMenu", (e) =>
-        console.log("LOG id ", e.detail)
-      );
-      const emptytable = document.getElementById("empty-table");
-      emptytable.addEventListener("callToAction", () =>
-        console.log("call to action 1")
-      );
-      emptytable.addEventListener("callToActionTwo", () =>
-        console.log("call to action 2")
-      );
-      const emptytable_due = document.getElementById("empty-table-two");
-      emptytable_due.addEventListener("callToAction", () =>
-        console.log("call to action per seconda tabella")
-      );
-    </script> </body></html>
+    const contextualMenu = document.getElementById("contextual-menu-1");
+    contextualMenu.addEventListener("clickContextualMenu", (e) =>
+      console.log("LOG id ", e.detail)
+    );
+    const emptytable = document.getElementById("empty-table");
+    emptytable.addEventListener("callToAction", () =>
+      console.log("call to action 1")
+    );
+    emptytable.addEventListener("callToActionTwo", () =>
+      console.log("call to action 2")
+    );
+    const emptytable_due = document.getElementById("empty-table-two");
+    emptytable_due.addEventListener("callToAction", () =>
+      console.log("call to action per seconda tabella")
+    );
+  </script> <script>
+if ('serviceWorker' in navigator && location.protocol !== 'file:') {
+  // auto-unregister service worker during dev mode
+  navigator.serviceWorker.getRegistration().then(function(registration) {
+  if (registration) {
+    registration.unregister().then(function() { location.reload(true) });
+  }
+  });
+}
+</script></body></html>

package/dist/cjs/breakpoints-88c4fd6c.js

@@ -1,7 +0,0 @@
-'use strict';
-
-const mobileBreakpoint = 767;
-const tabletBreakpoint = 1023;
-
-exports.mobileBreakpoint = mobileBreakpoint;
-exports.tabletBreakpoint = tabletBreakpoint;