@zanichelli/albe-web-components 2.31.0 → 2.31.1

package/dist/cjs/z-navigation-tabs.cjs.entry.js

@@ -3,99 +3,99 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-dee3e21d.js');
-const index$1 = require('./index-8f7af00e.js');
+const index$1 = require('./index-8f4b351d.js');
 
 const stylesCss = ":host{--safe-scroll-area:4px;--negative-safe-scroll-area:calc(-1 * var(--safe-scroll-area));position:relative;display:flex;flex-direction:row;z-index:0;margin:var(--negative-safe-scroll-area);padding:var(--safe-scroll-area);font-family:var(--font-family-sans);font-weight:var(--font-rg);overflow:hidden}:host,:host *,::slotted(*){box-sizing:border-box}::-webkit-scrollbar{display:none}button.navigation{position:absolute;display:flex;align-items:center;justify-content:center;margin:0;padding:0;background:var(--color-white);border:none;outline:none;fill:var(--color-primary01);border-radius:var(--border-no-radius);cursor:pointer;z-index:1}button.navigation:focus{fill:var(--color-primary01);box-shadow:var(--shadow-focus-primary)}button.navigation:disabled{display:none}nav{display:flex;align-items:center;justify-content:flex-start;overflow:auto;margin:var(--negative-safe-scroll-area);padding:var(--safe-scroll-area);scroll-padding:var(--safe-scroll-area);scrollbar-width:none}:host([orientation='horizontal']) nav{width:100%}:host([orientation='horizontal']) button.navigation{top:0;height:100%;width:calc((var(--space-unit) * 4) + var(--safe-scroll-area))}:host([orientation='horizontal']) button.navigation:first-child{left:0;padding-left:var(--safe-scroll-area);box-shadow:5px 0px var(--safe-scroll-area) var(--negative-safe-scroll-area) rgba(66, 69, 72, 0.40)}:host([orientation='horizontal']) button.navigation:last-child{right:0;padding-right:4px;box-shadow:-5px 0px var(--safe-scroll-area) var(--negative-safe-scroll-area) rgba(66, 69, 72, 0.40)}:host([orientation='vertical']){flex-direction:column}:host([orientation='vertical']) nav{flex-direction:column;align-items:stretch;height:100%}:host([orientation='vertical']) button.navigation{left:0;width:100%;height:calc((var(--space-unit) * 4) + var(--safe-scroll-area))}:host([orientation='vertical']) button.navigation:first-child{top:0;padding-top:var(--safe-scroll-area);box-shadow:0px 5px var(--safe-scroll-area) var(--negative-safe-scroll-area) rgba(66, 69, 72, 0.40)}:host([orientation='vertical']) button.navigation:last-child{bottom:0;padding-bottom:var(--safe-scroll-area);box-shadow:0px -5px var(--safe-scroll-area) var(--negative-safe-scroll-area) rgba(66, 69, 72, 0.40)}:host([size='small'][orientation='vertical']) button.navigation{height:calc(var(--space-unit) * 4)}";
 
-const ZNavigationTabs = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /** Available orientation: `horizontal` and `vertical`. Defaults to `horizontal`. */
-    this.orientation = index$1.TabOrientationEnum.horizontal;
-    /** Available sizes: `big` and `small`. Defaults to `big`. */
-    this.size = index$1.TabSizeEnum.big;
-    this.direction = this.orientation == index$1.TabOrientationEnum.vertical ? 'Top' : 'Left';
-    this.dimension = this.orientation == index$1.TabOrientationEnum.vertical ? 'Height' : 'Width';
-  }
-  /** Set all childrens (tab) size attribute : big (default) or small */
-  setChildrenSize() {
-    const children = this.host.children;
-    for (let i = 0; i < children.length; i++) {
-      children[i].setAttribute('size', this.size);
-    }
-  }
-  /** Set all childrens (tab) orientation attribute : horizontal (default) or vertical */
-  setChildrenOrientation() {
-    const children = this.host.children;
-    for (let i = 0; i < children.length; i++) {
-      children[i].setAttribute('orientation', this.orientation);
-    }
-  }
-  /** When resize check if the navigation buttons are needed */
-  checkScrollVisible() {
-    if (!this.tabsNav) {
-      return;
-    }
-    this.canNavigate = this.tabsNav[`scroll${this.dimension}`] > this.tabsNav[`client${this.dimension}`];
-    this.checkScrollEnabled();
-  }
-  /** Check if navigation buttons can be enabled for each orientation */
-  checkScrollEnabled() {
-    if (!this.tabsNav) {
-      return;
-    }
-    this.canNavigateNext = this.tabsNav[`scroll${this.direction}`] +
-      this.tabsNav[`client${this.dimension}`] < this.tabsNav[`scroll${this.dimension}`];
-    this.canNavigatePrev = this.tabsNav[`scroll${this.direction}`] > 0;
-  }
-  selectedTabHandler(event) {
-    this.select(event.target);
-  }
-  /** Select a tab child and deselect the others */
-  select(tab) {
-    const children = this.host.children;
-    for (let i = 0; i < children.length; i++) {
-      const child = children[i];
-      if (child.tagName === 'Z-NAVIGATION-TAB') {
-        if (child !== tab) {
-          child.selected = false;
-        }
-      }
-    }
-  }
-  /** Scroll the navigation bar (half of its size) backward, based on orientation */
-  navigatePrevious() {
-    this.tabsNav.scrollBy({
-      [this.direction.toLowerCase()]: 0 - (this.tabsNav[`client${this.dimension}`] / 2),
-      behavior: 'smooth',
-    });
-  }
-  /** Scroll the navigation bar (half of its size) forward, based on orientation */
-  navigateNext() {
-    this.tabsNav.scrollBy({
-      [this.direction.toLowerCase()]: this.tabsNav.scrollTop + (this.tabsNav[`client${this.dimension}`] / 2),
-      behavior: 'smooth',
-    });
-  }
-  componentDidLoad() {
-    this.setChildrenSize();
-    this.setChildrenOrientation();
-    this.checkScrollVisible();
-  }
-  render() {
-    return index.h(index.Host, { class: {
-        'interactive-2': this.size === 'small',
-        'interactive-1': this.size !== 'small'
-      }, scrollable: this.canNavigate }, this.canNavigate && index.h("button", { class: "navigation", onClick: () => this.navigatePrevious(), tabindex: "-1", disabled: !this.canNavigatePrev }, index.h("z-icon", { name: this.orientation == 'horizontal' ? 'chevron-left' : 'chevron-up', width: 16, height: 16 })), index.h("nav", { role: "tablist", ref: (el) => this.tabsNav = el !== null && el !== void 0 ? el : this.tabsNav, onScroll: this.checkScrollEnabled.bind(this) }, index.h("slot", null)), this.canNavigate && index.h("button", { class: "navigation", onClick: () => { this.navigateNext(); }, tabindex: "-1", disabled: !this.canNavigateNext }, index.h("z-icon", { name: this.orientation == 'horizontal' ? 'chevron-right' : 'chevron-down', width: 16, height: 16 })));
-  }
-  get host() { return index.getElement(this); }
-  static get watchers() { return {
-    "size": ["setChildrenSize"],
-    "orientation": ["setChildrenOrientation"],
-    "direction": ["checkScrollEnabled"],
-    "dimension": ["checkScrollEnabled"]
-  }; }
-};
+const ZNavigationTabs = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /** Available orientation: `horizontal` and `vertical`. Defaults to `horizontal`. */
+    this.orientation = index$1.TabOrientationEnum.horizontal;
+    /** Available sizes: `big` and `small`. Defaults to `big`. */
+    this.size = index$1.TabSizeEnum.big;
+    this.direction = this.orientation == index$1.TabOrientationEnum.vertical ? 'Top' : 'Left';
+    this.dimension = this.orientation == index$1.TabOrientationEnum.vertical ? 'Height' : 'Width';
+  }
+  /** Set all childrens (tab) size attribute : big (default) or small */
+  setChildrenSize() {
+    const children = this.host.children;
+    for (let i = 0; i < children.length; i++) {
+      children[i].setAttribute('size', this.size);
+    }
+  }
+  /** Set all childrens (tab) orientation attribute : horizontal (default) or vertical */
+  setChildrenOrientation() {
+    const children = this.host.children;
+    for (let i = 0; i < children.length; i++) {
+      children[i].setAttribute('orientation', this.orientation);
+    }
+  }
+  /** When resize check if the navigation buttons are needed */
+  checkScrollVisible() {
+    if (!this.tabsNav) {
+      return;
+    }
+    this.canNavigate = this.tabsNav[`scroll${this.dimension}`] > this.tabsNav[`client${this.dimension}`];
+    this.checkScrollEnabled();
+  }
+  /** Check if navigation buttons can be enabled for each orientation */
+  checkScrollEnabled() {
+    if (!this.tabsNav) {
+      return;
+    }
+    this.canNavigateNext = this.tabsNav[`scroll${this.direction}`] +
+      this.tabsNav[`client${this.dimension}`] < this.tabsNav[`scroll${this.dimension}`];
+    this.canNavigatePrev = this.tabsNav[`scroll${this.direction}`] > 0;
+  }
+  selectedTabHandler(event) {
+    this.select(event.target);
+  }
+  /** Select a tab child and deselect the others */
+  select(tab) {
+    const children = this.host.children;
+    for (let i = 0; i < children.length; i++) {
+      const child = children[i];
+      if (child.tagName === 'Z-NAVIGATION-TAB') {
+        if (child !== tab) {
+          child.selected = false;
+        }
+      }
+    }
+  }
+  /** Scroll the navigation bar (half of its size) backward, based on orientation */
+  navigatePrevious() {
+    this.tabsNav.scrollBy({
+      [this.direction.toLowerCase()]: 0 - (this.tabsNav[`client${this.dimension}`] / 2),
+      behavior: 'smooth',
+    });
+  }
+  /** Scroll the navigation bar (half of its size) forward, based on orientation */
+  navigateNext() {
+    this.tabsNav.scrollBy({
+      [this.direction.toLowerCase()]: this.tabsNav.scrollTop + (this.tabsNav[`client${this.dimension}`] / 2),
+      behavior: 'smooth',
+    });
+  }
+  componentDidLoad() {
+    this.setChildrenSize();
+    this.setChildrenOrientation();
+    this.checkScrollVisible();
+  }
+  render() {
+    return index.h(index.Host, { class: {
+        'interactive-2': this.size === 'small',
+        'interactive-1': this.size !== 'small'
+      }, scrollable: this.canNavigate }, this.canNavigate && index.h("button", { class: "navigation", onClick: () => this.navigatePrevious(), tabindex: "-1", disabled: !this.canNavigatePrev }, index.h("z-icon", { name: this.orientation == 'horizontal' ? 'chevron-left' : 'chevron-up', width: 16, height: 16 })), index.h("nav", { role: "tablist", ref: (el) => this.tabsNav = el !== null && el !== void 0 ? el : this.tabsNav, onScroll: this.checkScrollEnabled.bind(this) }, index.h("slot", null)), this.canNavigate && index.h("button", { class: "navigation", onClick: () => { this.navigateNext(); }, tabindex: "-1", disabled: !this.canNavigateNext }, index.h("z-icon", { name: this.orientation == 'horizontal' ? 'chevron-right' : 'chevron-down', width: 16, height: 16 })));
+  }
+  get host() { return index.getElement(this); }
+  static get watchers() { return {
+    "size": ["setChildrenSize"],
+    "orientation": ["setChildrenOrientation"],
+    "direction": ["checkScrollEnabled"],
+    "dimension": ["checkScrollEnabled"]
+  }; }
+};
 ZNavigationTabs.style = stylesCss;
 
 exports.z_navigation_tabs = ZNavigationTabs;

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

@@ -3,39 +3,39 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-dee3e21d.js');
-const index$1 = require('./index-8f7af00e.js');
+const index$1 = require('./index-8f4b351d.js');
 
 const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}.digits-container{display:flex;justify-content:flex-start}input{height:72px;width:calc(var(--space-unit) * 5);font-size:32px;font-weight:300;font-family:var(--font-family-sans);text-align:center;caret-color:transparent;box-sizing:border-box;padding:0;color:var(--color-surface05)}input.error{border:1px solid;border-radius:4px;border-color:var(--color-error01);background-color:var(--color-error-inverse)}input:not(:last-of-type){margin-right:var(--space-unit)}@media only screen and (min-width: 768px){input:not(:last-of-type){margin-right:calc(var(--space-unit) * 2)}}@media only screen and (min-width: 1025px){input{width:calc(var(--space-unit) * 6)}}";
 
-const ZOtp = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.otpChange = index.createEvent(this, "otpChange", 7);
-    this.inputNum = 6;
-  }
-  emitInputChange(value) {
-    this.otpChange.emit({ value });
-  }
-  componentWillLoad() {
-    this.otp = Array.apply(null, Array(this.inputNum));
-    this.otpRef = Array.apply(null, Array(this.inputNum));
-  }
-  render() {
-    return (index.h("div", { class: "otp-container" }, index.h("div", { class: "digits-container" }, this.otp.map((_elem, i) => {
-      return (index.h("input", { class: this.status == index$1.InputStatusEnum.error ? "error" : null, onKeyDown: (e) => {
-          if (e.keyCode > 47)
-            this.otpRef[i].value = "";
-        }, onKeyUp: (e) => {
-          if (e.keyCode > 47) {
-            i < this.inputNum - 1 && this.otpRef[i + 1].focus();
-          }
-        }, onInput: (e) => {
-          this.otp[i] = e.target.value;
-          this.emitInputChange(this.otp.join(""));
-        }, type: "text", minlength: "1", maxlength: "1", autoComplete: "off", ref: input => (this.otpRef[i] = input) }));
-    })), index.h("z-input-message", { message: this.message, status: this.status })));
-  }
-};
+const ZOtp = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.otpChange = index.createEvent(this, "otpChange", 7);
+    this.inputNum = 6;
+  }
+  emitInputChange(value) {
+    this.otpChange.emit({ value });
+  }
+  componentWillLoad() {
+    this.otp = Array.apply(null, Array(this.inputNum));
+    this.otpRef = Array.apply(null, Array(this.inputNum));
+  }
+  render() {
+    return (index.h("div", { class: "otp-container" }, index.h("div", { class: "digits-container" }, this.otp.map((_elem, i) => {
+      return (index.h("input", { class: this.status == index$1.InputStatusEnum.error ? "error" : null, onKeyDown: (e) => {
+          if (e.keyCode > 47)
+            this.otpRef[i].value = "";
+        }, onKeyUp: (e) => {
+          if (e.keyCode > 47) {
+            i < this.inputNum - 1 && this.otpRef[i + 1].focus();
+          }
+        }, onInput: (e) => {
+          this.otp[i] = e.target.value;
+          this.emitInputChange(this.otp.join(""));
+        }, type: "text", minlength: "1", maxlength: "1", autoComplete: "off", ref: input => (this.otpRef[i] = input) }));
+    })), index.h("z-input-message", { message: this.message, status: this.status })));
+  }
+};
 ZOtp.style = stylesCss;
 
 exports.z_otp = ZOtp;

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,120 +3,120 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-dee3e21d.js');
-const index$1 = require('./index-8f7af00e.js');
-const utils = require('./utils-98538463.js');
+const index$1 = require('./index-8f4b351d.js');
+const utils = require('./utils-6d6841cc.js');
 const hammer = require('./hammer-6e321f0b.js');
-require('./breakpoints-776c8868.js');
+require('./breakpoints-88c4fd6c.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-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;