@zanichelli/albe-web-components 2.33.5-rc2 → 2.34.0

package/dist/cjs/z-panel-elem.cjs.entry.js

@@ -6,25 +6,25 @@ const index = require('./index-dee3e21d.js');
 
 const stylesCss = ":host{font-family:var(--dashboard-font);font-weight:var(--font-rg);width:inherit}.panel-elem-container{width:100%}.panel-elem-icon{margin:auto calc(var(--space-unit) * 3)}.panel-elem-icon img{display:block;object-fit:contain;max-width:96px;height:32px;margin:auto}.panel-elem-link{border-radius:var(--border-no-radius);margin:var(--space-unit) auto 0;text-align:center;font-size:12px}.panel-elem-link>z-link{font-weight:var(--font-sb)}.panel-elem-desc{letter-spacing:0.16px;text-align:center;margin:0;padding-top:var(--space-unit)}";
 
-const ZPanelElem = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /** link target (optional) */
-    this.target = "_blank";
-    /** disabled status flag (optional) */
-    this.isdisabled = false;
-  }
-  renderIcon() {
-    if (this.isdisabled) {
-      return index.h("img", { src: this.imgurl, alt: this.imgalt });
-    }
-    return (index.h("a", { class: "elem-icon", href: this.url, target: this.target }, index.h("img", { src: this.imgurl, alt: this.imgalt })));
-  }
-  render() {
-    const elemId = this.elemid ? this.elemid : "";
-    return (index.h("div", { class: "panel-elem-container" }, (this.imgurl || this.imgalt) && (index.h("div", { class: "panel-elem-icon" }, this.renderIcon())), index.h("div", { class: "panel-elem-link" }, index.h("z-link", { href: this.url, icon: this.linkicon, isdisabled: this.isdisabled, target: this.target, htmlid: elemId + "link_id" }, this.linklabel)), this.descr_slot_name && (index.h("div", { class: "panel-elem-desc body-long-01" }, index.h("slot", { name: this.descr_slot_name })))));
-  }
-};
+const ZPanelElem = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /** link target (optional) */
+    this.target = "_blank";
+    /** disabled status flag (optional) */
+    this.isdisabled = false;
+  }
+  renderIcon() {
+    if (this.isdisabled) {
+      return index.h("img", { src: this.imgurl, alt: this.imgalt });
+    }
+    return (index.h("a", { class: "elem-icon", href: this.url, target: this.target }, index.h("img", { src: this.imgurl, alt: this.imgalt })));
+  }
+  render() {
+    const elemId = this.elemid ? this.elemid : "";
+    return (index.h("div", { class: "panel-elem-container" }, (this.imgurl || this.imgalt) && (index.h("div", { class: "panel-elem-icon" }, this.renderIcon())), index.h("div", { class: "panel-elem-link" }, index.h("z-link", { href: this.url, icon: this.linkicon, isdisabled: this.isdisabled, target: this.target, htmlid: elemId + "link_id" }, this.linklabel)), this.descr_slot_name && (index.h("div", { class: "panel-elem-desc body-long-01" }, index.h("slot", { name: this.descr_slot_name })))));
+  }
+};
 ZPanelElem.style = stylesCss;
 
 exports.z_panel_elem = ZPanelElem;

package/dist/cjs/z-pocket-message.cjs.entry.js

@@ -6,14 +6,14 @@ const index = require('./index-dee3e21d.js');
 
 const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>div{color:var(--color-surface05);fill:var(--color-surface05);font-size:14px;border-bottom:var(--border-size-small) solid var(--color-surface03);padding-top:calc(var(--space-unit) * 1.5);display:grid;grid-template-rows:auto auto;grid-template-columns:36px auto}:host>div>z-icon{grid-row:1 / 2;grid-column:1 / 2}:host>div>div.content{grid-row:1 / 2;grid-column:2 / 3;margin-bottom:var(--space-unit)}:host>div>div.ctaWrapper{grid-row:2 / 3;grid-column:1 / 3;display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;align-items:center;margin-bottom:var(--space-unit)}@media only screen and (min-width: 768px){:host>div>div.ctaWrapper{flex-direction:row;grid-column:2 / 3}}";
 
-const ZPocketMessage = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-  }
-  render() {
-    return (index.h("div", null, index.h("z-icon", { name: "exclamation-circle" }), index.h("div", { class: "content" }, index.h("slot", null)), index.h("div", { class: "ctaWrapper" }, index.h("slot", { name: "cta" }))));
-  }
-};
+const ZPocketMessage = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h("div", null, index.h("z-icon", { name: "exclamation-circle" }), index.h("div", { class: "content" }, index.h("slot", null)), index.h("div", { class: "ctaWrapper" }, index.h("slot", { name: "cta" }))));
+  }
+};
 ZPocketMessage.style = stylesCss;
 
 exports.z_pocket_message = ZPocketMessage;

package/dist/cjs/z-pocket_3.cjs.entry.js

@@ -3,121 +3,121 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-dee3e21d.js');
-const index$1 = require('./index-21817092.js');
-const utils = require('./utils-c3cf6ba2.js');
+const index$1 = require('./index-de6c491e.js');
+const utils = require('./utils-12053886.js');
 const hammer = require('./hammer-54230951.js');
-require('./breakpoints-776c8868.js');
+require('./breakpoints-88c4fd6c.js');
 require('./_commonjsHelpers-119ffc74.js');
 
 const stylesCss$2 = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg);width:inherit;height:100%;margin:inherit}:host>div{width:inherit;height:100%;margin:inherit}:host>div>div.background{position:fixed;left:0;right:0;top:0;bottom:0;z-index:998;width:0;height:0}:host>div>div.background.open{height:100%;width:100%}:host>div>div.contentWrapper{position:fixed;z-index:999;bottom:0;left:0;width:inherit;margin:inherit}:host>div>div.contentWrapper>div{border-radius:var(--space-unit) var(--space-unit) 0px 0px;box-shadow:0px -2px calc(var(--space-unit) * 0.5) 0px rgba(66, 69, 72, 0.4);margin:calc(var(--space-unit) * 0.5) calc(var(--space-unit) * 0.5) 0 calc(var(--space-unit) * 0.5)}";
 
-const ZPocket = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.pocketToggle = index.createEvent(this, "pocketToggle", 7);
-    /** pocket status */
-    this.status = index$1.PocketStatusEnum.preview;
-  }
-  /** open z-pocket */
-  async open() {
-    this.status = index$1.PocketStatusEnum.open;
-  }
-  /** close z-pocket */
-  async close() {
-    this.status = index$1.PocketStatusEnum.closed;
-  }
-  emitPocketToggle(id, status) {
-    this.pocketToggle.emit({ id, status });
-  }
-  handlePocketHeaderClick(e) {
-    if (e.detail.id && e.detail.id === this.pocketid) {
-      switch (this.status) {
-        case index$1.PocketStatusEnum.preview:
-        case index$1.PocketStatusEnum.closed:
-          this.status = index$1.PocketStatusEnum.open;
-          break;
-        case index$1.PocketStatusEnum.open:
-          this.status = index$1.PocketStatusEnum.closed;
-          break;
-      }
-    }
-  }
-  handlePocketHeaderPan(e) {
-    if (e.detail.id && e.detail.id === this.pocketid) {
-      if (e.detail.direction === "up") {
-        this.status = index$1.PocketStatusEnum.open;
-      }
-      else if (e.detail.direction === "down") {
-        this.status = index$1.PocketStatusEnum.closed;
-      }
-    }
-  }
-  watchStatusHandler(newVal) {
-    this.emitPocketToggle(this.pocketid, newVal);
-  }
-  componentWillLoad() {
-    this.emitPocketToggle(this.pocketid, this.status);
-  }
-  handleBackgroundClick(e) {
-    if (e.target.dataset.action == "pocketBackground") {
-      this.close();
-    }
-  }
-  render() {
-    return (index.h("div", null, index.h("div", { "data-action": "pocketBackground", "data-pocket": this.pocketid, class: `background ${this.status}`, onClick: (e) => this.handleBackgroundClick(e) }), index.h("div", { id: this.pocketid, class: "contentWrapper" }, index.h("div", null, index.h("slot", null)))));
-  }
-  get hostElement() { return index.getElement(this); }
-  static get watchers() { return {
-    "status": ["watchStatusHandler"]
-  }; }
-};
+const ZPocket = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.pocketToggle = index.createEvent(this, "pocketToggle", 7);
+    /** pocket status */
+    this.status = index$1.PocketStatusEnum.preview;
+  }
+  /** open z-pocket */
+  async open() {
+    this.status = index$1.PocketStatusEnum.open;
+  }
+  /** close z-pocket */
+  async close() {
+    this.status = index$1.PocketStatusEnum.closed;
+  }
+  emitPocketToggle(id, status) {
+    this.pocketToggle.emit({ id, status });
+  }
+  handlePocketHeaderClick(e) {
+    if (e.detail.id && e.detail.id === this.pocketid) {
+      switch (this.status) {
+        case index$1.PocketStatusEnum.preview:
+        case index$1.PocketStatusEnum.closed:
+          this.status = index$1.PocketStatusEnum.open;
+          break;
+        case index$1.PocketStatusEnum.open:
+          this.status = index$1.PocketStatusEnum.closed;
+          break;
+      }
+    }
+  }
+  handlePocketHeaderPan(e) {
+    if (e.detail.id && e.detail.id === this.pocketid) {
+      if (e.detail.direction === "up") {
+        this.status = index$1.PocketStatusEnum.open;
+      }
+      else if (e.detail.direction === "down") {
+        this.status = index$1.PocketStatusEnum.closed;
+      }
+    }
+  }
+  watchStatusHandler(newVal) {
+    this.emitPocketToggle(this.pocketid, newVal);
+  }
+  componentWillLoad() {
+    this.emitPocketToggle(this.pocketid, this.status);
+  }
+  handleBackgroundClick(e) {
+    if (e.target.dataset.action == "pocketBackground") {
+      this.close();
+    }
+  }
+  render() {
+    return (index.h("div", null, index.h("div", { "data-action": "pocketBackground", "data-pocket": this.pocketid, class: `background ${this.status}`, onClick: (e) => this.handleBackgroundClick(e) }), index.h("div", { id: this.pocketid, class: "contentWrapper" }, index.h("div", null, index.h("slot", null)))));
+  }
+  get hostElement() { return index.getElement(this); }
+  static get watchers() { return {
+    "status": ["watchStatusHandler"]
+  }; }
+};
 ZPocket.style = stylesCss$2;
 
 const stylesCss$1 = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg);display:block;width:100%;box-sizing:border-box}:host>main{background:var(--color-surface01);border-left:var(--border-size-small) solid var(--color-surface03);border-right:var(--border-size-small) solid var(--color-surface03);overflow:auto;scrollbar-width:none}:host>main.preview{max-height:225px;transition:all 200ms ease-in-out, top 200ms ease-in-out}:host>main.open{max-height:calc(100vh - 48px);transition:all 200ms ease-in-out, top 200ms ease-in-out}:host>main.closed{height:0px;transition:all 200ms ease-in-out, top 200ms ease-in-out}:host ::-webkit-scrollbar{width:0}@media only screen and (min-width: 768px){:host>main.preview{max-height:157px}}";
 
-const ZPocketBody = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /** pocket status */
-    this.status = index$1.PocketStatusEnum.preview;
-  }
-  handlePocketToggle(e) {
-    if (e.detail.id && e.detail.id === this.pocketid) {
-      this.status = e.detail.status;
-    }
-  }
-  render() {
-    return (index.h("main", { class: this.status }, index.h("slot", null)));
-  }
-};
+const ZPocketBody = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /** pocket status */
+    this.status = index$1.PocketStatusEnum.preview;
+  }
+  handlePocketToggle(e) {
+    if (e.detail.id && e.detail.id === this.pocketid) {
+      this.status = e.detail.status;
+    }
+  }
+  render() {
+    return (index.h("main", { class: this.status }, index.h("slot", null)));
+  }
+};
 ZPocketBody.style = stylesCss$1;
 
 const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg);display:block;width:100%;box-sizing:border-box}:host>header{background:var(--color-surface01);border:var(--border-size-small) solid var(--color-surface03);border-radius:var(--space-unit) var(--space-unit) 0px 0px;height:36px;cursor:pointer;display:flex;flex-wrap:nowrap;flex-direction:row;justify-content:center;align-items:center}:host>header:focus{outline:none}:host>header::-moz-focus-inner{border:0}";
 
-const ZPocketHeader = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.pocketHeaderClick = index.createEvent(this, "pocketHeaderClick", 7);
-    this.pocketHeaderPan = index.createEvent(this, "pocketHeaderPan", 7);
-    this.emitPocketHeaderClick = this.emitPocketHeaderClick.bind(this);
-  }
-  emitPocketHeaderClick() {
-    this.pocketHeaderClick.emit({ id: this.pocketid });
-  }
-  emitPocketHeaderPan(direction) {
-    this.pocketHeaderPan.emit({ id: this.pocketid, direction });
-  }
-  componentDidLoad() {
-    // INFO: swipe handling
-    const mc = new hammer.hammer(this.swipeWrap);
-    mc.get("pan").set({ direction: hammer.hammer.DIRECTION_VERTICAL });
-    mc.on("panup", () => this.emitPocketHeaderPan("up"));
-    mc.on("pandown", () => this.emitPocketHeaderPan("down"));
-  }
-  render() {
-    return (index.h("header", { role: "button", tabindex: 0, onClick: () => this.emitPocketHeaderClick(), onKeyPress: (ev) => utils.handleKeyboardSubmit(ev, this.emitPocketHeaderClick), ref: el => (this.swipeWrap = el) }, index.h("slot", null)));
-  }
-};
+const ZPocketHeader = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.pocketHeaderClick = index.createEvent(this, "pocketHeaderClick", 7);
+    this.pocketHeaderPan = index.createEvent(this, "pocketHeaderPan", 7);
+    this.emitPocketHeaderClick = this.emitPocketHeaderClick.bind(this);
+  }
+  emitPocketHeaderClick() {
+    this.pocketHeaderClick.emit({ id: this.pocketid });
+  }
+  emitPocketHeaderPan(direction) {
+    this.pocketHeaderPan.emit({ id: this.pocketid, direction });
+  }
+  componentDidLoad() {
+    // INFO: swipe handling
+    const mc = new hammer.hammer(this.swipeWrap);
+    mc.get("pan").set({ direction: hammer.hammer.DIRECTION_VERTICAL });
+    mc.on("panup", () => this.emitPocketHeaderPan("up"));
+    mc.on("pandown", () => this.emitPocketHeaderPan("down"));
+  }
+  render() {
+    return (index.h("header", { role: "button", tabindex: 0, onClick: () => this.emitPocketHeaderClick(), onKeyPress: (ev) => utils.handleKeyboardSubmit(ev, this.emitPocketHeaderClick), ref: el => (this.swipeWrap = el) }, index.h("slot", null)));
+  }
+};
 ZPocketHeader.style = stylesCss;
 
 exports.z_pocket = ZPocket;

package/dist/cjs/z-registro-table-expanded-row.cjs.entry.js

@@ -6,14 +6,14 @@ const index = require('./index-dee3e21d.js');
 
 const stylesCss = ":host{background-color:var(--gray50);display:none}:host>td>div.content-container{box-shadow:var(--shadow-2);margin-bottom:calc(var(--space-unit) / 2)}";
 
-const ZRegistroTableExpandedRow = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-  }
-  render() {
-    return (index.h("td", { colSpan: this.colSpan }, index.h("div", { class: "content-container" }, index.h("slot", null))));
-  }
-};
+const ZRegistroTableExpandedRow = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h("td", { colSpan: this.colSpan }, index.h("div", { class: "content-container" }, index.h("slot", null))));
+  }
+};
 ZRegistroTableExpandedRow.style = stylesCss;
 
 exports.z_registro_table_expanded_row = ZRegistroTableExpandedRow;

package/dist/cjs/z-registro-table-footer.cjs.entry.js

@@ -6,18 +6,18 @@ const index = require('./index-dee3e21d.js');
 
 const stylesCss = ".sc-z-registro-table-footer-h{display:table-footer-group;font-family:var(--dashboard-font);font-weight:var(--font-rg)}";
 
-const ZRegistroTableFooter = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-  }
-  componentWillRender() {
-    this.host.setAttribute("role", "rowgroup");
-  }
-  render() {
-    return index.h("slot", null);
-  }
-  get host() { return index.getElement(this); }
-};
+const ZRegistroTableFooter = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  componentWillRender() {
+    this.host.setAttribute("role", "rowgroup");
+  }
+  render() {
+    return index.h("slot", null);
+  }
+  get host() { return index.getElement(this); }
+};
 ZRegistroTableFooter.style = stylesCss;
 
 exports.z_registro_table_footer = ZRegistroTableFooter;

package/dist/cjs/z-slideshow.cjs.entry.js

@@ -3,110 +3,110 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-dee3e21d.js');
-const index$1 = require('./index-21817092.js');
-const utils = require('./utils-c3cf6ba2.js');
-require('./breakpoints-776c8868.js');
+const index$1 = require('./index-de6c491e.js');
+const utils = require('./utils-12053886.js');
+require('./breakpoints-88c4fd6c.js');
 
 const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg);display:block;width:inherit}:host>div{display:flex;flex-direction:column;width:inherit}main{position:relative;overflow:hidden;width:100%}main z-icon.scroll{position:absolute;top:50%;width:auto;cursor:pointer;transition:0.6s ease;margin:0 var(--space-unit);fill:var(--color-primary01);z-index:10}main .scroll.disabled{opacity:50%;pointer-events:none}main .scroll.right{right:0}#slides{display:flex;flex-wrap:wrap;transition:all 300ms;line-height:0px;overflow-y:hidden}footer{height:56px;width:100%;align-items:center;display:grid;grid-template-columns:2;grid-template-rows:2;grid-template-areas:\"center center\" \"left right\";border-top:var(--border-base) solid var(--color-surface02)}footer>div{align-items:center;width:100%}footer .footerCenter{grid-area:center}footer .footerLeft{grid-area:left}footer .footerRight{grid-area:right}footer .bulletContainer{display:flex;margin:0 auto;justify-content:center;align-items:center;min-height:60px}footer .bulletContainer .bullet{width:8px;height:8px;border-radius:50%;background-color:var(--bg-neutral-150);margin:var(--space-unit) 2px;pointer-events:none}footer .bulletContainer .bullet.selected{background-color:var(--bg-neutral-400)}@media only screen and (min-width: 768px){footer{grid-template-columns:1fr 2fr 1fr;grid-template-rows:1;grid-template-areas:\"left center right\";height:76px;border-top:var(--border-base) solid var(--color-surface02)}footer .bulletContainer .bullet{width:10px;height:10px;margin:var(--space-unit) 3px}}@media only screen and (min-width: 1025px){main z-icon.scroll{margin:0 10px}footer .bulletContainer .bullet{width:16px;height:16px;margin:var(--space-unit) calc(var(--space-unit) * 0.5);pointer-events:auto;cursor:pointer}}";
 
-const ZSlideshow = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.currentSlide = 0;
-  }
-  watchData() {
-    this.parseLinks();
-  }
-  componentWillLoad() {
-    this.parseLinks();
-    this.setDevice();
-    window.addEventListener("resize", this.handleResize.bind(this));
-  }
-  componentDidRender() {
-    this.setStyle();
-  }
-  handleResize() {
-    this.setDevice();
-    this.setStyle();
-  }
-  parseLinks() {
-    var _a;
-    switch (typeof this.data) {
-      case "string":
-        return (this.links = (_a = utils.convertJson(this.data)) !== null && _a !== void 0 ? _a : []);
-      default:
-        return (this.links = this.data);
-    }
-  }
-  setStyle() {
-    const refSlides = this.el.shadowRoot.querySelector("#slides");
-    if (!refSlides)
-      return;
-    const allImages = this.el.shadowRoot.querySelectorAll(".slide");
-    const width = this.el.offsetWidth;
-    const fullwidth = width * this.links.length;
-    refSlides.style.width = `${fullwidth}px`;
-    refSlides.style.transform = `translate(-${width * this.currentSlide}px)`;
-    allImages.forEach((item) => {
-      const img = item.querySelector("img");
-      img.style.width = `${width}px`;
-    });
-  }
-  setDevice() {
-    this.device = utils.getDevice();
-  }
-  setCurrentSlide(index) {
-    this.currentSlide = index;
-  }
-  getBulletDimension() {
-    switch (this.device) {
-      case index$1.DeviceEnum.mobile:
-        return 24;
-      case index$1.DeviceEnum.tablet:
-        return 32;
-      default:
-        return 40;
-    }
-  }
-  renderSlides(items) {
-    return (index.h("div", { id: "slides" }, items.map((item, i) => (index.h("div", { id: "slide" + i, class: `slide ${this.currentSlide !== i && "hide"}` }, index.h("img", { src: item }))))));
-  }
-  renderScroll(direction) {
-    let disabled = false, nextSlide = this.currentSlide;
-    if (direction === "left") {
-      disabled = this.currentSlide === 0;
-      nextSlide--;
-    }
-    else if (direction === "right") {
-      disabled = this.currentSlide === this.links.length - 1;
-      nextSlide++;
-    }
-    return (index.h("z-icon", { class: `scroll ${direction} ${disabled && "disabled"}`, width: this.getBulletDimension(), height: this.getBulletDimension(), name: `chevron-${direction}-circle`, onClick: () => {
-        !disabled && this.setCurrentSlide(nextSlide);
-      }, onKeyUp: (e) => !disabled &&
-        utils.handleKeyboardSubmit(e, () => {
-          this.setCurrentSlide(nextSlide);
-        }), tabindex: 0, role: "button" }));
-  }
-  renderSlideshowMain() {
-    return (index.h("main", null, this.renderScroll("left"), this.renderSlides(this.links), this.renderScroll("right")));
-  }
-  renderBullet(i) {
-    return (index.h("a", { class: `bullet ${this.currentSlide === i && "selected"}`, onClick: () => this.setCurrentSlide(i), onKeyUp: (e) => utils.handleKeyboardSubmit(e, () => this.setCurrentSlide(i)), tabindex: 0, role: "button" }));
-  }
-  renderSlideshowFooter() {
-    return (index.h("footer", null, index.h("div", { class: "footerLeft" }, index.h("slot", { name: "footer-left" })), index.h("div", { class: "footerCenter" }, index.h("div", { class: "bulletContainer" }, Object.keys(this.links).map(i => this.renderBullet(parseInt(i))))), index.h("div", { class: "footerRight" }, index.h("slot", { name: "footer-right" }))));
-  }
-  render() {
-    if (!this.links || !this.links.length)
-      return index.h("div", null);
-    return (index.h("div", { id: this.slideshowid }, this.renderSlideshowMain(), this.renderSlideshowFooter()));
-  }
-  get el() { return index.getElement(this); }
-  static get watchers() { return {
-    "data": ["watchData"]
-  }; }
-};
+const ZSlideshow = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.currentSlide = 0;
+  }
+  watchData() {
+    this.parseLinks();
+  }
+  componentWillLoad() {
+    this.parseLinks();
+    this.setDevice();
+    window.addEventListener("resize", this.handleResize.bind(this));
+  }
+  componentDidRender() {
+    this.setStyle();
+  }
+  handleResize() {
+    this.setDevice();
+    this.setStyle();
+  }
+  parseLinks() {
+    var _a;
+    switch (typeof this.data) {
+      case "string":
+        return (this.links = (_a = utils.convertJson(this.data)) !== null && _a !== void 0 ? _a : []);
+      default:
+        return (this.links = this.data);
+    }
+  }
+  setStyle() {
+    const refSlides = this.el.shadowRoot.querySelector("#slides");
+    if (!refSlides)
+      return;
+    const allImages = this.el.shadowRoot.querySelectorAll(".slide");
+    const width = this.el.offsetWidth;
+    const fullwidth = width * this.links.length;
+    refSlides.style.width = `${fullwidth}px`;
+    refSlides.style.transform = `translate(-${width * this.currentSlide}px)`;
+    allImages.forEach((item) => {
+      const img = item.querySelector("img");
+      img.style.width = `${width}px`;
+    });
+  }
+  setDevice() {
+    this.device = utils.getDevice();
+  }
+  setCurrentSlide(index) {
+    this.currentSlide = index;
+  }
+  getBulletDimension() {
+    switch (this.device) {
+      case index$1.DeviceEnum.mobile:
+        return 24;
+      case index$1.DeviceEnum.tablet:
+        return 32;
+      default:
+        return 40;
+    }
+  }
+  renderSlides(items) {
+    return (index.h("div", { id: "slides" }, items.map((item, i) => (index.h("div", { id: "slide" + i, class: `slide ${this.currentSlide !== i && "hide"}` }, index.h("img", { src: item }))))));
+  }
+  renderScroll(direction) {
+    let disabled = false, nextSlide = this.currentSlide;
+    if (direction === "left") {
+      disabled = this.currentSlide === 0;
+      nextSlide--;
+    }
+    else if (direction === "right") {
+      disabled = this.currentSlide === this.links.length - 1;
+      nextSlide++;
+    }
+    return (index.h("z-icon", { class: `scroll ${direction} ${disabled && "disabled"}`, width: this.getBulletDimension(), height: this.getBulletDimension(), name: `chevron-${direction}-circle`, onClick: () => {
+        !disabled && this.setCurrentSlide(nextSlide);
+      }, onKeyUp: (e) => !disabled &&
+        utils.handleKeyboardSubmit(e, () => {
+          this.setCurrentSlide(nextSlide);
+        }), tabindex: 0, role: "button" }));
+  }
+  renderSlideshowMain() {
+    return (index.h("main", null, this.renderScroll("left"), this.renderSlides(this.links), this.renderScroll("right")));
+  }
+  renderBullet(i) {
+    return (index.h("a", { class: `bullet ${this.currentSlide === i && "selected"}`, onClick: () => this.setCurrentSlide(i), onKeyUp: (e) => utils.handleKeyboardSubmit(e, () => this.setCurrentSlide(i)), tabindex: 0, role: "button" }));
+  }
+  renderSlideshowFooter() {
+    return (index.h("footer", null, index.h("div", { class: "footerLeft" }, index.h("slot", { name: "footer-left" })), index.h("div", { class: "footerCenter" }, index.h("div", { class: "bulletContainer" }, Object.keys(this.links).map(i => this.renderBullet(parseInt(i))))), index.h("div", { class: "footerRight" }, index.h("slot", { name: "footer-right" }))));
+  }
+  render() {
+    if (!this.links || !this.links.length)
+      return index.h("div", null);
+    return (index.h("div", { id: this.slideshowid }, this.renderSlideshowMain(), this.renderSlideshowFooter()));
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "data": ["watchData"]
+  }; }
+};
 ZSlideshow.style = stylesCss;
 
 exports.z_slideshow = ZSlideshow;

package/dist/cjs/z-status-tag.cjs.entry.js

@@ -3,27 +3,27 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-dee3e21d.js');
-const index$1 = require('./index-21817092.js');
+const index$1 = require('./index-de6c491e.js');
 const index$2 = require('./index-9651dba8.js');
 require('./_commonjsHelpers-119ffc74.js');
 
 const stylesCss = ":host{--z-icon-width:14px;--z-icon-height:14px;font-family:var(--font-family-sans);height:22px;border-radius:var(--border-radius);padding-right:4px;padding-left:4px;text-transform:uppercase;display:inline-flex;align-items:center}:host(.expandable)>z-icon{margin-right:0;transition:margin-right 0.3s ease-out 0.2s}:host(:not(.expandable))>z-icon:not(:last-child),:host(.expandable:hover)>z-icon:not(:last-child){margin-right:var(--space-unit);transition:margin-right 0.3s ease-out 0s}:host(.expandable)>span{max-width:0;transition:max-width 0.3s ease-out 0.2s;white-space:nowrap;overflow:hidden}:host(.expandable:hover)>span{max-width:20rem;transition:max-width 0.3s ease-out 0s}:host([status=\"warning\"]){background-color:var(--status-warning-yellow-lighter);color:var(--status-warning-yellow-dark);fill:var(--status-warning-yellow-dark)}:host([status=\"warning\"].light){background-color:transparent;color:var(--status-warning-yellow-dark);fill:var(--status-warning-yellow-dark)}:host([status=\"warning\"].dark){background-color:var(--status-warning-yellow-dark);color:var(--status-warning-yellow-lighter);fill:var(--status-warning-yellow-lighter)}:host([status=\"error\"]){background-color:var(--status-error-red-lighter);color:var(--status-error-red-dark);fill:var(--status-error-red-dark)}:host([status=\"error\"].light){background-color:transparent;color:var(--status-error-red-dark);fill:var(--status-error-red-dark)}:host([status=\"error\"].dark){background-color:var(--status-error-red-dark);color:var(--status-error-red-lighter);fill:var(--status-error-red-lighter)}:host([status=\"success\"]){background-color:var(--status-success-green-lighter);color:var(--status-success-green-dark);fill:var(--status-success-green-dark)}:host([status=\"success\"].light){background-color:transparent;color:var(--status-success-green-dark);fill:var(--status-success-green-dark)}:host([status=\"success\"].dark){background-color:var(--status-success-green-dark);color:var(--status-success-green-lighter);fill:var(--status-success-green-lighter)}:host([status=\"default\"]){background-color:var(--myz-blue-lighter);color:var(--myz-blue-dark);fill:var(--myz-blue-dark)}:host([status=\"default\"].light){background-color:transparent;color:var(--myz-blue-dark);fill:var(--myz-blue-dark)}:host([status=\"default\"].dark){background-color:var(--myz-blue-dark);color:var(--myz-blue-lighter);fill:var(--myz-blue-lighter)}:host([status=\"neutral\"]){background-color:var(--bg-grey-050);color:var(--text-grey-800);fill:var(--text-grey-800)}:host([status=\"neutral\"].light){background-color:transparent;color:var(--text-grey-800);fill:var(--text-grey-800)}:host([status=\"neutral\"].dark){background-color:var(--bg-grey-800);color:var(--text-white);fill:var(--text-white)}";
 
-const ZStatusTag = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /** [optional] Status tag color */
-    this.status = index$1.StatusTagStatus.default;
-    if (!this.icon && !this.text) {
-      console.warn("z-status-tag must contain at least one prop between icon and text");
-    }
-  }
-  render() {
-    return (index.h(index.Host, { class: index$2.classnames(this.variant, "body-5-sb", {
-        expandable: this.expandable && this.icon && this.text,
-      }) }, this.icon && index.h("z-icon", { name: this.icon }), this.text && index.h("span", null, this.text)));
-  }
-};
+const ZStatusTag = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /** [optional] Status tag color */
+    this.status = index$1.StatusTagStatus.default;
+    if (!this.icon && !this.text) {
+      console.warn("z-status-tag must contain at least one prop between icon and text");
+    }
+  }
+  render() {
+    return (index.h(index.Host, { class: index$2.classnames(this.variant, "body-5-sb", {
+        expandable: this.expandable && this.icon && this.text,
+      }) }, this.icon && index.h("z-icon", { name: this.icon }), this.text && index.h("span", null, this.text)));
+  }
+};
 ZStatusTag.style = stylesCss;
 
 exports.z_status_tag = ZStatusTag;

package/dist/cjs/z-stepper-item.cjs.entry.js

@@ -6,17 +6,17 @@ const index = require('./index-dee3e21d.js');
 
 const stylesCss = ":host{position:relative;width:calc(var(--space-unit) * 5);font-family:var(--dashboard-font);font-weight:var(--font-rg)}:host(:not(:last-child)){flex:1}:host(:not(:last-child))::after{position:absolute;top:calc(var(--space-unit) * 4);left:calc(var(--space-unit) * 3);right:calc(var(--space-unit) * 2);z-index:1;content:'';display:block;width:auto;margin:0 calc(-1 * calc(var(--space-unit) * 2)) 0 calc(var(--space-unit) * 2);border-bottom:solid 2px var(--bg-grey-700)}.stepper-item{display:flex;flex-direction:column;align-items:center;width:calc(var(--space-unit) * 5);padding:0;color:inherit;font-family:inherit;font-size:18px;text-decoration:none;line-height:28px;background:transparent;border:0;outline:0;appearance:none}.stepper-item span{display:none;width:calc(100% + calc(var(--space-unit) * 4));text-align:center}:host(:not([disabled])) .stepper-item{cursor:pointer}:host([disabled]) .stepper-item{pointer-events:none}.indicator{content:counter(stepper);box-sizing:border-box;display:flex;justify-content:center;align-items:center;width:calc(var(--space-unit) * 4);height:calc(var(--space-unit) * 4);margin:calc(var(--space-unit) * 2);font-size:14px;font-weight:var(--font-sb);line-height:1;color:var(--myz-blue);background:var(--bg-white);border:2px solid var(--myz-blue);border-radius:50%}:host([pressed]:not([disabled])) .indicator{color:var(--text-white);background:var(--myz-blue-dark);border-color:var(--myz-blue-dark)}:host(:not([disabled]):focus-within) .indicator{box-shadow:0px 0px 2px 2px var(--accent-dark)}:host([disabled]) .indicator{color:var(--text-grey-700);background:var(--bg-grey-200);border-color:currentColor}@media only screen and (min-width: 768px){:host{width:calc(var(--space-unit) * 10)}:host(:not(:last-child))::after{top:calc(var(--space-unit) * 5);left:calc(var(--space-unit) * 8)}.stepper-item{width:calc(var(--space-unit) * 10)}.stepper-item span{display:block}.indicator{width:calc(var(--space-unit) * 6);height:calc(var(--space-unit) * 6);font-size:16px}}";
 
-const ZStepperItem = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-  }
-  render() {
-    if (this.href) {
-      return (index.h("a", { href: !this.disabled && this.href, class: "stepper-item" }, index.h("div", { class: "indicator" }, this.index), index.h("span", null, index.h("slot", null))));
-    }
-    return (index.h("button", { class: "stepper-item", disabled: this.disabled }, index.h("div", { class: "indicator" }, this.index), index.h("span", null, index.h("slot", null))));
-  }
-};
+const ZStepperItem = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    if (this.href) {
+      return (index.h("a", { href: !this.disabled && this.href, class: "stepper-item" }, index.h("div", { class: "indicator" }, this.index), index.h("span", null, index.h("slot", null))));
+    }
+    return (index.h("button", { class: "stepper-item", disabled: this.disabled }, index.h("div", { class: "indicator" }, this.index), index.h("span", null, index.h("slot", null))));
+  }
+};
 ZStepperItem.style = stylesCss;
 
 exports.z_stepper_item = ZStepperItem;