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

package/dist/{web-components-library/z-navigation-tabs.entry.js → cjs/z-navigation-tabs.cjs.entry.js}

@@ -1,97 +1,101 @@
-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';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-dee3e21d.js');
+const index$1 = require('./index-de6c491e.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) {
-    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"]
-  }; }
-};
+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;
 
-export { ZNavigationTabs as z_navigation_tabs };
+exports.z_navigation_tabs = ZNavigationTabs;

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

@@ -1,38 +1,42 @@
-import { r as registerInstance, f as createEvent, h } from './index-44936066.js';
-import { N as NotificationType } from './index-08d9a3bf.js';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-dee3e21d.js');
+const index$1 = require('./index-de6c491e.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) }))));
-  }
-};
+const ZNotification = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.notificationAction = index.createEvent(this, "notificationAction", 7);
+    this.notificationClose = index.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 (index.h("div", { class: {
+        "notification-container": true,
+        "success-notification": this.type === index$1.NotificationType.success,
+        "warning-notification": this.type === index$1.NotificationType.warning,
+        "error-notification": this.type === index$1.NotificationType.error,
+        "shadow": this.showshadow
+      } }, this.contenticonname && (index.h("z-icon", { name: this.contenticonname, width: 16, height: 16 })), index.h("div", { class: "content-container" }, index.h("z-body", { class: "content-text", level: 4 }, index.h("slot", null)), this.actiontext && !!this.actiontext.trim().length && (index.h("z-body", { class: "action-text", role: "button", tabindex: "0", onClick: (e) => {
+        this.handleActionButtonClick(e);
+      }, level: 5, variant: "semibold" }, this.actiontext))), this.showclose && (index.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 };
+exports.z_notification = ZNotification;

package/dist/{web-components-library/z-otp.entry.js → cjs/z-otp.cjs.entry.js}

@@ -1,37 +1,41 @@
-import { r as registerInstance, f as createEvent, h } from './index-44936066.js';
-import { d as InputStatusEnum } from './index-08d9a3bf.js';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-dee3e21d.js');
+const index$1 = require('./index-de6c491e.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) {
-    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 })));
-  }
-};
+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;
 
-export { ZOtp as z_otp };
+exports.z_otp = ZOtp;

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

@@ -1,126 +1,128 @@
-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';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-dee3e21d.js');
+const hammer = require('./hammer-54230951.js');
+const utils = require('./utils-12053886.js');
+require('./_commonjsHelpers-119ffc74.js');
+require('./index-de6c491e.js');
+require('./breakpoints-88c4fd6c.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 })));
-  }
-};
+const ZPaginationBar = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.goToPage = index.createEvent(this, "goToPage", 7);
+    this.changeStartPage = index.createEvent(this, "changeStartPage", 7);
+    this.addPageToHistory = index.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.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;
+    }
+  }
+  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 (index.h("div", { ref: el => (this.bar = el) }, index.h("z-icon", { name: "chevron-left", class: !this.canNavigateLeft() && "disabled", onClick: () => this.navigateLeft(), onKeyPress: (ev) => utils.handleKeyboardSubmit(ev, this.navigateLeft), tabindex: this.canNavigateLeft() ? 0 : -1 }), this.currentPages.map(page => (index.h("z-pagination-page", { value: page, isselected: page === this.currentpage, onClick: () => this.emitGoToPage(page), onKeyDown: (ev) => utils.handleKeyboardSubmit(ev, this.emitGoToPage, page), isvisited: this.listhistoryrow.includes(page) }))), index.h("z-icon", { name: "chevron-right", class: !this.canNavigateRight() && "disabled", onClick: () => this.navigateRight(), onKeyPress: (ev) => utils.handleKeyboardSubmit(ev, this.navigateRight), tabindex: this.canNavigateRight() ? 0 : -1 })));
+  }
+};
 ZPaginationBar.style = stylesCss;
 
-export { ZPaginationBar as z_pagination_bar };
+exports.z_pagination_bar = ZPaginationBar;