@zanichelli/albe-web-components 2.33.2 → 2.33.5-rc1

package/{dist/cjs/z-navigation-tabs.cjs.entry.js → www/build/z-navigation-tabs.entry.js}

@@ -1,101 +1,97 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-dee3e21d.js');
-const index$1 = require('./index-11a8a536.js');
+import { r as registerInstance, h, e as Host, g as getElement } from './index-44936066.js';
+import { g as TabOrientationEnum, h as TabSizeEnum } from './index-08d9a3bf.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) {
+    registerInstance(this, hostRef);
+    /** Available orientation: `horizontal` and `vertical`. Defaults to `horizontal`. */
+    this.orientation = TabOrientationEnum.horizontal;
+    /** Available sizes: `big` and `small`. Defaults to `big`. */
+    this.size = TabSizeEnum.big;
+    this.direction = this.orientation == TabOrientationEnum.vertical ? 'Top' : 'Left';
+    this.dimension = this.orientation == 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 h(Host, { class: {
+        'interactive-2': this.size === 'small',
+        'interactive-1': this.size !== 'small'
+      }, scrollable: this.canNavigate }, this.canNavigate && h("button", { class: "navigation", onClick: () => this.navigatePrevious(), tabindex: "-1", disabled: !this.canNavigatePrev }, h("z-icon", { name: this.orientation == 'horizontal' ? 'chevron-left' : 'chevron-up', width: 16, height: 16 })), h("nav", { role: "tablist", ref: (el) => this.tabsNav = el !== null && el !== void 0 ? el : this.tabsNav, onScroll: this.checkScrollEnabled.bind(this) }, h("slot", null)), this.canNavigate && h("button", { class: "navigation", onClick: () => { this.navigateNext(); }, tabindex: "-1", disabled: !this.canNavigateNext }, h("z-icon", { name: this.orientation == 'horizontal' ? 'chevron-right' : 'chevron-down', width: 16, height: 16 })));
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "size": ["setChildrenSize"],
+    "orientation": ["setChildrenOrientation"],
+    "direction": ["checkScrollEnabled"],
+    "dimension": ["checkScrollEnabled"]
+  }; }
+};
 ZNavigationTabs.style = stylesCss;
 
-exports.z_navigation_tabs = ZNavigationTabs;
+export { ZNavigationTabs as z_navigation_tabs };

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

@@ -0,0 +1,38 @@
+import { r as registerInstance, f as createEvent, h } from './index-44936066.js';
+import { N as NotificationType } from './index-08d9a3bf.js';
+
+const stylesCss = ":host{width:100%;color:var(--color-text01)}.notification-container{display:flex;padding:0 0 calc(var(--space-unit) * 2) calc(var(--space-unit) * 2);outline:none;border-bottom:var(--border-size-medium) solid var(--color-surface03)}.shadow{box-shadow:var(--shadow-3)}.content-container{display:flex;justify-content:space-between;flex:1 1 auto;flex-wrap:wrap}.content-text{max-width:800px;margin-top:calc(var(--space-unit) * 2);margin-right:calc(var(--space-unit) * 2)}.action-text{margin-top:calc(var(--space-unit) * 2);margin-right:calc(var(--space-unit) * 2);height:fit-content;color:var(--color-primary01);cursor:pointer;white-space:nowrap}:host div>z-icon{justify-self:center;margin-top:calc(var(--space-unit) * 2);margin-right:calc(var(--space-unit))}:host div.success-notification{background:var(--color-success-inverse)}:host div.warning-notification{background:var(--color-warning-inverse)}:host div.error-notification{background:var(--color-error-inverse)}:host div.success-notification>z-icon{fill:var(--color-success01)}:host div.warning-notification>z-icon{fill:var(--color-warning02)}:host div.error-notification>z-icon{fill:var(--color-error01)}:host div>z-icon.close-icon{cursor:pointer;fill:var(--color-primary01);margin-right:calc(var(--space-unit) * 2)}@media only screen and (min-width: 768px){.content-container{flex-wrap:nowrap}.content-text{margin-right:calc(var(--space-unit) * 5)}}";
+
+const ZNotification = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.notificationAction = createEvent(this, "notificationAction", 7);
+    this.notificationClose = createEvent(this, "notificationClose", 7);
+    /** enable close icon */
+    this.showclose = false;
+    /** enable shadow */
+    this.showshadow = false;
+  }
+  handleActionButtonClick(e) {
+    e.preventDefault();
+    this.notificationAction.emit();
+  }
+  handleCloseButtonClick(e) {
+    e.preventDefault();
+    this.notificationClose.emit();
+  }
+  render() {
+    return (h("div", { class: {
+        "notification-container": true,
+        "success-notification": this.type === NotificationType.success,
+        "warning-notification": this.type === NotificationType.warning,
+        "error-notification": this.type === NotificationType.error,
+        "shadow": this.showshadow
+      } }, this.contenticonname && (h("z-icon", { name: this.contenticonname, width: 16, height: 16 })), h("div", { class: "content-container" }, h("z-body", { class: "content-text", level: 4 }, h("slot", null)), this.actiontext && !!this.actiontext.trim().length && (h("z-body", { class: "action-text", role: "button", tabindex: "0", onClick: (e) => {
+        this.handleActionButtonClick(e);
+      }, level: 5, variant: "semibold" }, this.actiontext))), this.showclose && (h("z-icon", { class: "close-icon", name: "multiply-circle", width: 16, height: 16, onClick: (e) => this.handleCloseButtonClick(e) }))));
+  }
+};
+ZNotification.style = stylesCss;
+
+export { ZNotification as z_notification };

package/{dist/cjs/z-otp.cjs.entry.js → www/build/z-otp.entry.js}

@@ -1,41 +1,37 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-dee3e21d.js');
-const index$1 = require('./index-11a8a536.js');
+import { r as registerInstance, f as createEvent, h } from './index-44936066.js';
+import { d as InputStatusEnum } from './index-08d9a3bf.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) {
+    registerInstance(this, hostRef);
+    this.otpChange = 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 (h("div", { class: "otp-container" }, h("div", { class: "digits-container" }, this.otp.map((_elem, i) => {
+      return (h("input", { class: this.status == 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) }));
+    })), h("z-input-message", { message: this.message, status: this.status })));
+  }
+};
 ZOtp.style = stylesCss;
 
-exports.z_otp = ZOtp;
+export { ZOtp as z_otp };

package/www/build/z-pagination-bar.entry.js

@@ -0,0 +1,126 @@
+import { r as registerInstance, f as createEvent, h } from './index-44936066.js';
+import { h as hammer } from './hammer-52e2c4fe.js';
+import { h as handleKeyboardSubmit } from './utils-2e0fffb8.js';
+import './_commonjsHelpers-cb1cd7bb.js';
+import './index-08d9a3bf.js';
+import './breakpoints-14432d05.js';
+
+const stylesCss = ":host>div{height:48px;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-around;align-items:center;align-content:center}:host>div>z-icon{cursor:pointer;margin:calc(var(--space-unit) * 2) 0;color:var(--color-primary01);fill:var(--color-primary01)}:host>div>z-icon.disabled{cursor:default;pointer-events:none;color:var(--color-disabled01);fill:var(--color-disabled01)}";
+
+const ZPaginationBar = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.goToPage = createEvent(this, "goToPage", 7);
+    this.changeStartPage = createEvent(this, "changeStartPage", 7);
+    this.addPageToHistory = createEvent(this, "addPageToHistory", 7);
+    /** current displayed page (mutable) */
+    this.currentpage = 1;
+    /** initial page (mutable) */
+    this.startpage = 1;
+    /** array of history of visited pages (mutable, optional) */
+    this.listhistoryrow = [];
+    this.currentPages = [];
+    this.velocityConstantMultiplier = 2;
+    this.navigateRight = this.navigateRight.bind(this);
+    this.navigateLeft = this.navigateLeft.bind(this);
+    this.emitGoToPage = this.emitGoToPage.bind(this);
+  }
+  componentDidLoad() {
+    this.scrollPage = this.scrollPage.bind(this);
+    let mc = new hammer(this.bar);
+    // listen to events...
+    mc.on("swiperight", this.scrollPage);
+    mc.on("swipeleft", this.scrollPage);
+  }
+  componentWillRender() {
+    this.initPagination();
+  }
+  componentWillUpdate() {
+    this.initPagination();
+  }
+  initPagination() {
+    this.loadPages();
+    if (this.historyraw) {
+      this.parsehistoryraw(this.historyraw);
+    }
+  }
+  parsehistoryraw(historyraw) {
+    this.listhistoryrow = [...JSON.parse(historyraw)];
+  }
+  scrollPage(ev) {
+    let vel = Math.round(Math.abs(ev.velocity)) * this.velocityConstantMultiplier;
+    const deltaPage = Math.max(1, vel);
+    switch (ev.type) {
+      case "swiperight":
+        if (!this.canNavigateLeft())
+          break;
+        const newstartPage1 = this.startpage - deltaPage;
+        if (newstartPage1 > 1)
+          this.emitChangeStartPage(newstartPage1);
+        else
+          this.emitChangeStartPage(1);
+        break;
+      case "swipeleft":
+        if (!this.canNavigateRight())
+          break;
+        const newstartPage2 = this.startpage + deltaPage;
+        if (newstartPage2 < this.pages - this.visiblepages + 1)
+          this.emitChangeStartPage(newstartPage2);
+        else
+          this.emitChangeStartPage(this.pages - this.visiblepages + 1);
+        break;
+      default:
+        break;
+    }
+  }
+  emitGoToPage(page) {
+    this.currentpage = page;
+    this.goToPage.emit({ page: page });
+    this.addPageToHistory.emit({ page: page });
+  }
+  emitChangeStartPage(startpage) {
+    this.startpage = startpage;
+    this.changeStartPage.emit({ startpage: startpage });
+  }
+  emitAddPageToHistory(page) {
+    this.listhistoryrow.push(page);
+    this.changeStartPage.emit({ page: page });
+  }
+  loadPages() {
+    this.currentPages.splice(0);
+    const lastPage = this.pageWindow();
+    let i;
+    for (i = 0; i < lastPage; i++) {
+      this.currentPages.push(i + this.startpage);
+    }
+  }
+  pageWindow() {
+    return Math.min(this.pages, this.visiblepages); //How many pages are there to show?
+  }
+  canNavigateLeft() {
+    return this.startpage > 1;
+  }
+  canNavigateRight() {
+    return this.startpage + this.visiblepages - 1 < this.pages;
+  }
+  navigateLeft() {
+    if (this.canNavigateLeft()) {
+      this.startpage--;
+      this.emitChangeStartPage(this.startpage);
+      this.loadPages();
+    }
+  }
+  navigateRight() {
+    if (this.canNavigateRight()) {
+      this.startpage++;
+      this.emitChangeStartPage(this.startpage);
+      this.loadPages();
+    }
+  }
+  render() {
+    return (h("div", { ref: el => (this.bar = el) }, h("z-icon", { name: "chevron-left", class: !this.canNavigateLeft() && "disabled", onClick: () => this.navigateLeft(), onKeyPress: (ev) => handleKeyboardSubmit(ev, this.navigateLeft), tabindex: this.canNavigateLeft() ? 0 : -1 }), this.currentPages.map(page => (h("z-pagination-page", { value: page, isselected: page === this.currentpage, onClick: () => this.emitGoToPage(page), onKeyDown: (ev) => handleKeyboardSubmit(ev, this.emitGoToPage, page), isvisited: this.listhistoryrow.includes(page) }))), h("z-icon", { name: "chevron-right", class: !this.canNavigateRight() && "disabled", onClick: () => this.navigateRight(), onKeyPress: (ev) => handleKeyboardSubmit(ev, this.navigateRight), tabindex: this.canNavigateRight() ? 0 : -1 })));
+  }
+};
+ZPaginationBar.style = stylesCss;
+
+export { ZPaginationBar as z_pagination_bar };

package/www/build/z-pagination-page.entry.js

@@ -0,0 +1,21 @@
+import { r as registerInstance, h } from './index-44936066.js';
+
+const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-sb);display:inline-block}:host>button{cursor:pointer;outline:none;display:inline-block;box-sizing:border-box;margin:0;height:48px;line-height:48px;text-align:center;border:none;border-bottom:var(--border-size-large) solid transparent;color:var(--color-primary01);font-size:var(--font-size-2);font-family:var(--font-family-sans);font-weight:inherit;background:transparent;text-decoration:none;transition:border-bottom 0.2s ease, font-size 0.2s ease;min-width:56px}:host>button[disabled]{pointer-events:none;cursor:default;color:var(--color-disabled02)}:host>button:hover{border-bottom:var(--border-size-large) solid var(--color-hover-light);background-color:var(--color-background);text-decoration:none;transition:border-bottom 0.2s ease, background-color 0.2s ease}:host>button:focus{border-bottom:var(--border-size-large) solid var(--color-hover-light);box-shadow:var(--shadow-focus-primary);background-color:var(--color-background);text-decoration:none}:host>button.visited{border-color:var(--color-hover-light);text-decoration:none}:host>button.selected{border-bottom:var(--border-size-large) solid var(--color-primary01);font-size:var(--font-size-7);transition:border-bottom 0.2s ease, font-size 0.2s ease}";
+
+const ZPaginationPage = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /** selected status flag */
+    this.isselected = false;
+    /** disabled status flag */
+    this.isdisabled = false;
+    /** visited status flag */
+    this.isvisited = false;
+  }
+  render() {
+    return (h("button", { id: this.pageid, "aria-label": this.ariaLabel ? this.ariaLabel : `Go to page ${this.value}`, class: { selected: this.isselected, visited: this.isvisited }, disabled: this.isdisabled, type: "button" }, this.value));
+  }
+};
+ZPaginationPage.style = stylesCss;
+
+export { ZPaginationPage as z_pagination_page };

package/www/build/z-panel-elem.entry.js

@@ -0,0 +1,26 @@
+import { r as registerInstance, h } from './index-44936066.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) {
+    registerInstance(this, hostRef);
+    /** link target (optional) */
+    this.target = "_blank";
+    /** disabled status flag (optional) */
+    this.isdisabled = false;
+  }
+  renderIcon() {
+    if (this.isdisabled) {
+      return h("img", { src: this.imgurl, alt: this.imgalt });
+    }
+    return (h("a", { class: "elem-icon", href: this.url, target: this.target }, h("img", { src: this.imgurl, alt: this.imgalt })));
+  }
+  render() {
+    const elemId = this.elemid ? this.elemid : "";
+    return (h("div", { class: "panel-elem-container" }, (this.imgurl || this.imgalt) && (h("div", { class: "panel-elem-icon" }, this.renderIcon())), h("div", { class: "panel-elem-link" }, 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 && (h("div", { class: "panel-elem-desc body-long-01" }, h("slot", { name: this.descr_slot_name })))));
+  }
+};
+ZPanelElem.style = stylesCss;
+
+export { ZPanelElem as z_panel_elem };

package/www/build/z-pocket-body.entry.js

@@ -0,0 +1,23 @@
+import { r as registerInstance, h } from './index-44936066.js';
+import { c as PocketStatusEnum } from './index-08d9a3bf.js';
+
+const stylesCss = ":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) {
+    registerInstance(this, hostRef);
+    /** pocket status */
+    this.status = PocketStatusEnum.preview;
+  }
+  handlePocketToggle(e) {
+    if (e.detail.id && e.detail.id === this.pocketid) {
+      this.status = e.detail.status;
+    }
+  }
+  render() {
+    return (h("main", { class: this.status }, h("slot", null)));
+  }
+};
+ZPocketBody.style = stylesCss;
+
+export { ZPocketBody as z_pocket_body };

package/www/build/z-pocket-header.entry.js

@@ -0,0 +1,36 @@
+import { r as registerInstance, f as createEvent, h } from './index-44936066.js';
+import { h as handleKeyboardSubmit } from './utils-2e0fffb8.js';
+import { h as hammer } from './hammer-52e2c4fe.js';
+import './index-08d9a3bf.js';
+import './breakpoints-14432d05.js';
+import './_commonjsHelpers-cb1cd7bb.js';
+
+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) {
+    registerInstance(this, hostRef);
+    this.pocketHeaderClick = createEvent(this, "pocketHeaderClick", 7);
+    this.pocketHeaderPan = 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(this.swipeWrap);
+    mc.get("pan").set({ direction: hammer.DIRECTION_VERTICAL });
+    mc.on("panup", () => this.emitPocketHeaderPan("up"));
+    mc.on("pandown", () => this.emitPocketHeaderPan("down"));
+  }
+  render() {
+    return (h("header", { role: "button", tabindex: 0, onClick: () => this.emitPocketHeaderClick(), onKeyPress: (ev) => handleKeyboardSubmit(ev, this.emitPocketHeaderClick), ref: el => (this.swipeWrap = el) }, h("slot", null)));
+  }
+};
+ZPocketHeader.style = stylesCss;
+
+export { ZPocketHeader as z_pocket_header };

package/{dist/cjs/z-pocket-message.cjs.entry.js → www/build/z-pocket-message.entry.js}

@@ -1,19 +1,15 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-dee3e21d.js');
+import { r as registerInstance, h } from './index-44936066.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) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h("div", null, h("z-icon", { name: "exclamation-circle" }), h("div", { class: "content" }, h("slot", null)), h("div", { class: "ctaWrapper" }, h("slot", { name: "cta" }))));
+  }
+};
 ZPocketMessage.style = stylesCss;
 
-exports.z_pocket_message = ZPocketMessage;
+export { ZPocketMessage as z_pocket_message };