@baloise/ds-core 17.2.1 → 17.2.2-nightly.20250109

package/components/bal-navbar.js

@@ -30,7 +30,7 @@ const Navbar = /*@__PURE__*/ proxyCustomElement(class Navbar extends HTMLElement
     }
     render() {
         const navbarEl = BEM.block('navbar');
-        return (h(Host, { key: 'dddbbeaef348b9ff101743f71451f6d84ac72951', class: Object.assign(Object.assign(Object.assign({}, navbarEl.class()), navbarEl.modifier(`context-${this.interface}`).class()), navbarEl.modifier(`is-light`).class(this.light)) }, h("nav", { key: 'ba4bb4f5ea156b0a2b4ba5f54f8d80b41477ee6b', role: "navigation", "aria-label": "main navigation", class: Object.assign(Object.assign({}, navbarEl.element('nav').class()), { container: true, [`is-${this.container}`]: this.container !== '' }) }, h("slot", { key: '647ff400273d4cd92574d5f46aff07aad2b2c810' }))));
+        return (h(Host, { key: 'c0a7e51b1f0b6cf601943198f5c116325c5115ce', class: Object.assign(Object.assign(Object.assign({}, navbarEl.class()), navbarEl.modifier(`context-${this.interface}`).class()), navbarEl.modifier(`is-light`).class(this.light)) }, h("nav", { key: 'c042e875f2b62bc58fd06851bd1a4d371a2e8080', role: "navigation", "aria-label": "main navigation", class: Object.assign(Object.assign({}, navbarEl.element('nav').class()), { container: true, [`is-${this.container}`]: this.container !== '' }) }, h("slot", { key: '84e0ffcd250b6f4806d8c5d6ca4fc86bb3dbfe4a' }))));
     }
     get element() { return this; }
     static get watchers() { return {

package/components/bal-notices.js

@@ -10,11 +10,11 @@ const Notices = /*@__PURE__*/ proxyCustomElement(class Notices extends HTMLEleme
         this.interface = 'toast';
     }
     render() {
-        return (h(Host, { key: 'f907ea5288441ecace35e9041ca37c50e249a9eb', class: {
+        return (h(Host, { key: '2f40e609d0b26b17d7b46c55fb5d509ad02920b6', class: {
                 'bal-app': true,
                 'bal-notices': true,
                 [`has-${this.interface}`]: true,
-            } }, h("slot", { key: '9f6fdf15e464f2682750f57812a4ff45e40b9612' })));
+            } }, h("slot", { key: 'f761cd73d1cfc480e0992c9b32cc6fd30eeca51e' })));
     }
     static get style() { return BalNoticesStyle0; }
 }, [4, "bal-notices", {

package/components/bal-notification.js

@@ -10,7 +10,7 @@ const Notification = /*@__PURE__*/ proxyCustomElement(class Notification extends
         this.color = '';
     }
     render() {
-        return (h(Host, { key: '053bf4393f0f7a11eadd2ff98f870b0d7de1452c', class: "bal-notification" }, h("div", { key: 'afcaa942e5970f510df5e65aa5fdbf6fd9744919', class: `bal-notification__inner bal-notification__inner--color-${this.color}`, "data-testid": "bal-notification-content" }, h("slot", { key: 'ee85e21689e226931c4c3dcbbbaa43741d05340a' }))));
+        return (h(Host, { key: '7afb73a04a3bc6174ad6945bb2e9cfd362acf360', class: "bal-notification" }, h("div", { key: '7707822b7569a46d1b35a76fd4be41f0ed366495', class: `bal-notification__inner bal-notification__inner--color-${this.color}`, "data-testid": "bal-notification-content" }, h("slot", { key: 'e04c72f6f0b97f5df99ad9c8ce7aeacb9bf088b9' }))));
     }
     static get style() { return BalNotificationStyle0; }
 }, [4, "bal-notification", {

package/components/bal-number-input.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
 import { f as inputHandleClick, b as inputHandleHostClick, c as inputHandleFocus, d as inputHandleBlur, e as inputHandleChange, l as getNativeInputValue, m as getUpcomingValue, s as stopEventBubbling, j as inputListenOnClick, k as inputHandleReset, i as inputSetFocus, a as inputSetBlur } from './form-input.js';
-import { n as debounceEvent } from './helpers.js';
+import { o as debounceEvent } from './helpers.js';
 import { i as inheritAttributes } from './attributes.js';
 import { g as getNegativeSymbol, a as getDecimalSeparator, b as getThousandSeparator, f as formatLocaleNumber } from './number.js';
 import { B as BEM } from './bem.js';
@@ -10,7 +10,6 @@ import { L as Logger } from './log.js';
 import { l as lodash_isnil } from './index3.js';
 import { N as NUMBER_KEYS, A as ACTION_KEYS } from './keys.constant.js';
 import { i as isEmpty } from './index2.js';
-import { L as ListenTo } from './listen.js';
 import { d as defaultConfig } from './config.default.js';
 import { L as ListenToConfig } from './config.decorator.js';
 
@@ -447,7 +446,7 @@ const NumberInput = /*@__PURE__*/ proxyCustomElement(class NumberInput extends H
      */
     render() {
         const block = BEM.block('number-input');
-        return (h(Host, { key: '25a122a19c18a933d55991cb22b29f6e2a96eb02', onClick: this.handleClick, "aria-disabled": this.disabled ? 'true' : null, class: Object.assign({}, block.class()) }, h("input", Object.assign({ key: 'd9ef6e1d970f4ada012b65d2518fd793b44024c3', class: {
+        return (h(Host, { key: '6c70b82d9eb15c47fc4aee5246819c0a4fecc7fb', onClick: this.handleClick, "aria-disabled": this.disabled ? 'true' : null, class: Object.assign({}, block.class()) }, h("input", Object.assign({ key: '254dee1b9cb3c99f10e0c4b835e69552314ed6c4', class: {
                 'input': true,
                 'is-disabled': this.disabled || this.readonly,
                 'is-danger': this.invalid,
@@ -486,7 +485,7 @@ const NumberInput = /*@__PURE__*/ proxyCustomElement(class NumberInput extends H
         "setBlur": [64],
         "getInputElement": [64],
         "setAriaForm": [64]
-    }, undefined, {
+    }, [[6, "click", "listenOnClick"], [6, "reset", "resetHandler"]], {
         "debounce": ["debounceChanged"],
         "value": ["valueChanged"]
     }]);
@@ -496,18 +495,6 @@ __decorate([
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)
 ], NumberInput.prototype, "createLogger", null);
-__decorate([
-    ListenTo('click', { capture: true, target: 'document' }),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [UIEvent]),
-    __metadata("design:returntype", void 0)
-], NumberInput.prototype, "listenOnClick", null);
-__decorate([
-    ListenTo('reset', { capture: true, target: 'document' }),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [UIEvent]),
-    __metadata("design:returntype", void 0)
-], NumberInput.prototype, "resetHandler", null);
 __decorate([
     ListenToConfig(),
     __metadata("design:type", Function),

package/components/bal-option-list.js

@@ -3,11 +3,10 @@ import { _ as __decorate, a as __metadata } from './tslib.es6.js';
 import { l as lodash_isnil } from './index3.js';
 import { i as inheritAttributes } from './attributes.js';
 import { B as BEM } from './bem.js';
-import { b as waitAfterFramePaint, m as raf } from './helpers.js';
+import { b as waitAfterFramePaint, n as raf } from './helpers.js';
 import { L as Logger } from './log.js';
 import { s as startsWith, i as includes } from './utils.js';
 import { d as defaultBalAriaForm } from './form.js';
-import { L as ListenTo } from './listen.js';
 
 const balOptionListCss = ".bal-option-list{display:block;position:relative;width:100%;list-style:none;margin:0;outline:0;max-height:var(--bal-option-list-max-height);border-radius:var(--bal-radius-normal);overflow:hidden auto}";
 const BalOptionListStyle0 = balOptionListCss;
@@ -421,7 +420,7 @@ const OptionList = /*@__PURE__*/ proxyCustomElement(class OptionList extends HTM
     render() {
         const block = BEM.block('option-list');
         const labelledby = this.labelledby || this.ariaForm.labelId;
-        return (h(Host, { key: '7a07652540fa56fedaee410917d90d83e1979a39', class: Object.assign({}, block.class()), id: this.inputId }, h("div", Object.assign({ key: '4dfd52f5cd7b87a1732fcba95d3db376d955be58', role: "listbox", "aria-labelledby": labelledby, "aria-disabled": this.disabled, class: Object.assign({}, block.element('container').class()) }, this.inheritAttributes), h("slot", { key: '3f190f2b005335d2f1072f0857ea95c10ae0157d' }))));
+        return (h(Host, { key: '946ff4a59bf7e9202317d7898791f34006c90ee1', class: Object.assign({}, block.class()), id: this.inputId }, h("div", Object.assign({ key: '078d3ec40ac98bd470666e941b84119f89b9b5f9', role: "listbox", "aria-labelledby": labelledby, "aria-disabled": this.disabled, class: Object.assign({}, block.element('container').class()) }, this.inheritAttributes), h("slot", { key: '18ddbc132a73787221f6bb7dbf483e1e26883a43' }))));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -455,7 +454,7 @@ const OptionList = /*@__PURE__*/ proxyCustomElement(class OptionList extends HTM
         "getOptions": [64],
         "selectByFocus": [64],
         "setAriaForm": [64]
-    }, undefined, {
+    }, [[1, "balOptionFocus", "listenToMouseEnter"], [0, "balOptionChange", "listenToOptionChange"]], {
         "contentHeight": ["contentHeightChanged"]
     }]);
 __decorate([
@@ -464,18 +463,6 @@ __decorate([
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)
 ], OptionList.prototype, "createLogger", null);
-__decorate([
-    ListenTo('balOptionFocus', { passive: true }),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", void 0)
-], OptionList.prototype, "listenToMouseEnter", null);
-__decorate([
-    ListenTo('balOptionChange', { passive: false }),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", void 0)
-], OptionList.prototype, "listenToOptionChange", null);
 let balOptionListIds = 0;
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/components/bal-option2.js

@@ -5,7 +5,6 @@ import { L as Logger } from './log.js';
 import { a as ariaBooleanToString } from './aria.js';
 import { s as stopEventBubbling } from './form-input.js';
 import { B as BalElementStateListener, L as ListenToElementStates } from './element-states.decorator.js';
-import { L as ListenTo } from './listen.js';
 import { d as defineCustomElement$3 } from './bal-checkbox2.js';
 import { d as defineCustomElement$2 } from './bal-icon2.js';
 import { d as defineCustomElement$1 } from './bal-stack2.js';
@@ -107,7 +106,7 @@ const Option = /*@__PURE__*/ proxyCustomElement(class Option extends HTMLElement
      */
     render() {
         const block = BEM.block('option');
-        return (h(Host, { key: 'b69ef765d0cfd4e4e29743026b68c5c6c64f685c', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('checkbox').class(this.checkbox)), block.modifier('focused').class(this.focused)), block.modifier('invalid').class(this.invalid)), block.modifier('selected').class(this.selected)), block.modifier('disabled').class(this.disabled)), block.modifier('hidden').class(this.hidden)), role: "option", id: this.inputId, "data-value": this.value, "data-label": this.label, "aria-label": this.label, "aria-hidden": ariaBooleanToString(this.hidden), "aria-selected": ariaBooleanToString(this.selected), "aria-checked": ariaBooleanToString(this.selected), "aria-disabled": ariaBooleanToString(this.disabled), "aria-invalid": ariaBooleanToString(this.invalid), tabIndex: -1, onClick: this.onClick }, h("bal-stack", { key: 'fc345d890d6392f12c47c6775343170cf9ef9fce', py: "small", space: "x-small" }, this.checkbox ? (h("bal-checkbox", { flat: true, nonSubmit: true, "label-hidden": true, checked: this.selected, disabled: this.disabled, invalid: this.invalid, tabindex: -1 })) : (''), h("div", { key: 'd77888278aa8b163914eb3e58d852fc706563186', class: Object.assign(Object.assign({}, block.element('inner').class()), block.element('inner').modifier('multiline').class(this.multiline)) }, h("slot", { key: 'efb92bbd5efb31efec3c374ca0c123c9a2b1df3f' })), this.selected && !this.checkbox ? (h("bal-icon", { name: "check", size: "small", color: this.disabled ? 'grey' : this.invalid ? 'danger' : 'primary' })) : (''))));
+        return (h(Host, { key: '2dbf49c5030c61a24ce0b2b8cb2fe0f1ede9895b', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('checkbox').class(this.checkbox)), block.modifier('focused').class(this.focused)), block.modifier('invalid').class(this.invalid)), block.modifier('selected').class(this.selected)), block.modifier('disabled').class(this.disabled)), block.modifier('hidden').class(this.hidden)), role: "option", id: this.inputId, "data-value": this.value, "data-label": this.label, "aria-label": this.label, "aria-hidden": ariaBooleanToString(this.hidden), "aria-selected": ariaBooleanToString(this.selected), "aria-checked": ariaBooleanToString(this.selected), "aria-disabled": ariaBooleanToString(this.disabled), "aria-invalid": ariaBooleanToString(this.invalid), tabIndex: -1, onClick: this.onClick }, h("bal-stack", { key: '1ed42549cea2542e4eb56d7cfc6c1024dd13aa71', py: "small", space: "x-small" }, this.checkbox ? (h("bal-checkbox", { flat: true, nonSubmit: true, "label-hidden": true, checked: this.selected, disabled: this.disabled, invalid: this.invalid, tabindex: -1 })) : (''), h("div", { key: '3f3c59ec2f04e77bd0400ec58b8294c3ecd7a1b7', class: Object.assign(Object.assign({}, block.element('inner').class()), block.element('inner').modifier('multiline').class(this.multiline)) }, h("slot", { key: '04e84d67e23ba2e5bd59e5ddb7c4549327e77ce0' })), this.selected && !this.checkbox ? (h("bal-icon", { name: "check", size: "small", color: this.disabled ? 'grey' : this.invalid ? 'danger' : 'primary' })) : (''))));
     }
     get el() { return this; }
     static get style() { return BalOptionStyle0; }
@@ -123,19 +122,13 @@ const Option = /*@__PURE__*/ proxyCustomElement(class Option extends HTMLElement
         "checkbox": [32],
         "interactionState": [32],
         "select": [64]
-    }]);
+    }, [[1, "mouseenter", "listenToMouseEnter"]]]);
 __decorate([
     Logger('bal-option'),
     __metadata("design:type", Function),
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)
 ], Option.prototype, "createLogger", null);
-__decorate([
-    ListenTo('mouseenter'),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", void 0)
-], Option.prototype, "listenToMouseEnter", null);
 __decorate([
     ListenToElementStates(),
     __metadata("design:type", Function),

package/components/bal-pagination.js

@@ -1,4 +1,314 @@
-import { P as Pagination, d as defineCustomElement$1 } from './bal-pagination2.js';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { _ as __decorate, a as __metadata } from './tslib.es6.js';
+import { B as BEM } from './bem.js';
+import { d as defineCustomElement$5 } from './bal-button2.js';
+import { d as defineCustomElement$4 } from './bal-icon2.js';
+import { d as defineCustomElement$3 } from './bal-spinner2.js';
+import { d as defineCustomElement$2 } from './bal-text2.js';
+import { b as balBreakpoints } from './breakpoints.subject.js';
+import { d as defaultConfig } from './config.default.js';
+import { L as ListenToBreakpoints } from './breakpoints.decorator.js';
+import { L as ListenToConfig } from './config.decorator.js';
+
+function generatePaginationControl(value, totalPages, pageRange) {
+    const paginationArray = [];
+    if (value > totalPages || value < 0) {
+        value = 1;
+    }
+    if (totalPages <= 0) {
+        totalPages = 10;
+    }
+    if (pageRange <= 0) {
+        pageRange = 2;
+    }
+    const numberOfPages = 5 + pageRange * 2;
+    if (totalPages <= numberOfPages) {
+        for (let i = 1; i <= totalPages; i++) {
+            paginationArray.push({
+                type: 'page',
+                label: i.toString(),
+                active: i === value,
+            });
+        }
+    }
+    else {
+        if (value <= numberOfPages - 2 - pageRange) {
+            for (let i = 1; i <= numberOfPages - 2; i++) {
+                paginationArray.push({
+                    type: 'page',
+                    label: i.toString(),
+                    active: i === value,
+                });
+            }
+            paginationArray.push({ type: 'dots', label: '...', active: false });
+            paginationArray.push({
+                type: 'page',
+                label: totalPages.toString(),
+                active: false,
+            });
+        }
+        else if (value >= totalPages - 3) {
+            paginationArray.push({
+                type: 'page',
+                label: '1',
+                active: false,
+            });
+            paginationArray.push({ type: 'dots', label: '...', active: false });
+            for (let i = totalPages - numberOfPages + 3; i <= totalPages; i++) {
+                paginationArray.push({
+                    type: 'page',
+                    label: i.toString(),
+                    active: i === value,
+                });
+            }
+        }
+        else {
+            paginationArray.push({
+                type: 'page',
+                label: '1',
+                active: false,
+            });
+            paginationArray.push({ type: 'dots', label: '...', active: false });
+            const page = Number(value);
+            for (let i = page - pageRange; i <= page + pageRange; i++) {
+                paginationArray.push({
+                    type: 'page',
+                    label: i.toString(),
+                    active: i === value,
+                });
+            }
+            paginationArray.push({ type: 'dots', label: '...', active: false });
+            paginationArray.push({
+                type: 'page',
+                label: totalPages.toString(),
+                active: false,
+            });
+        }
+    }
+    return paginationArray;
+}
+
+const i18nControlLabel = {
+    de: {
+        left: 'Vorherige Seite',
+        right: 'Nächste Seite',
+    },
+    en: {
+        left: 'Previous Page',
+        right: 'Next Page',
+    },
+    fr: {
+        left: 'Page précédente',
+        right: 'Page suivante',
+    },
+    it: {
+        left: 'Pagina precedente',
+        right: 'Pagina successiva',
+    },
+    nl: {
+        left: 'Vorige pagina',
+        right: 'Volgende pagina',
+    },
+    es: {
+        left: 'Página anterior',
+        right: 'Página siguiente',
+    },
+    pl: {
+        left: 'Poprzednia strona',
+        right: 'Następna strona',
+    },
+    pt: {
+        left: 'Página anterior',
+        right: 'Próxima página',
+    },
+    sv: {
+        left: 'Föregående sida',
+        right: 'Nästa sida',
+    },
+    fi: {
+        left: 'Edellinen sivu',
+        right: 'Seuraava sivu',
+    },
+};
+
+const balPaginationCss = ":root{--bal-pagination-small-background:var(--bal-color-grey);--bal-pagination-small-radius:var(--bal-radius-normal);--bal-pagination-tabs-background:var(--bal-color-white);--bal-pagination-tabs-shadow:var(--bal-shadow-normal);--bal-pagination-tabs-radius:var(--bal-radius-large);--bal-pagination-dot-radius:var(--bal-radius-rounded);--bal-pagination-dot-background-active:var(--bal-color-primary);--bal-pagination-dot-background-inactive:var(--bal-color-white)}.bal-pagination{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block}.bal-pagination--is-sticky{position:-webkit-sticky;position:sticky;z-index:var(--bal-z-index-sticky)}.bal-pagination__nav{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;text-align:center}.bal-pagination__nav--align-start{-ms-flex-pack:start;justify-content:flex-start}.bal-pagination__nav--align-end{-ms-flex-pack:end;justify-content:flex-end}.bal-pagination__nav--context-small{padding-top:1rem}.bal-pagination__nav__pagination-previous{-ms-flex-order:1;order:1}.bal-pagination__nav__pagination-previous--context-small[disabled] button:hover{background-color:rgba(0,0,0,0);border-color:rgba(0,0,0,0)}.bal-pagination__nav__pagination-next{-ms-flex-order:3;order:3}.bal-pagination__nav__pagination-next--context-small[disabled] button:hover{background-color:rgba(0,0,0,0);border-color:rgba(0,0,0,0)}.bal-pagination__nav__pagination-list{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;gap:4px;padding-left:8px;padding-right:8px;-ms-flex-order:2;order:2;width:unset;text-align:center}.bal-pagination__nav__pagination-list>span{font-weight:var(--bal-font-weight-bold)}@media screen and (min-width: 769px),print{.bal-pagination__nav__pagination-list{gap:8px}}@media screen and (min-width: 1024px){.bal-pagination__nav__pagination-list{gap:8px}}.bal-pagination__nav__pagination-list--context-small{gap:8px;max-width:88px;min-width:63px;min-height:1.25rem;margin:0 20px 0 !important;background:var(--bal-pagination-small-background);border-radius:var(--bal-pagination-small-radius)}.bal-pagination__nav__pagination-list--context-tabs{-ms-flex-positive:1;flex-grow:1;padding:8px;background:var(--bal-pagination-tabs-background);-webkit-box-shadow:var(--bal-pagination-tabs-shadow);box-shadow:var(--bal-pagination-tabs-shadow);border-radius:var(--bal-pagination-tabs-radius)}.bal-pagination__nav__pagination-list__dot{cursor:pointer;height:8px;width:8px;gap:30px;border-radius:var(--bal-pagination-dot-radius);display:block}.bal-pagination__nav__pagination-list__dot--active{background-color:var(--bal-pagination-dot-background-active)}.bal-pagination__nav__pagination-list__dot--inactive{background-color:var(--bal-pagination-dot-background-inactive)}.bal-pagination__nav__pagination-list--more{width:2rem}@media screen and (min-width: 769px),print{.bal-pagination__nav__pagination-list--more{width:2rem}}@media screen and (min-width: 1024px){.bal-pagination__nav__pagination-list--more{width:3rem}}.bal-pagination__nav__pagination-list__tab{-ms-flex:1;flex:1}.bal-pagination__nav__pagination-list.is-disabled li{pointer-events:none}";
+const BalPaginationStyle0 = balPaginationCss;
+
+const Pagination = /*@__PURE__*/ proxyCustomElement(class Pagination extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.balChangeEventEmitter = createEvent(this, "balChange", 7);
+        this._value = 1;
+        this.isMobile = balBreakpoints.isMobile;
+        this.language = defaultConfig.language;
+        this.align = '';
+        this.size = '';
+        this.interface = '';
+        this.disabled = false;
+        this.value = 1;
+        this.totalPages = 1;
+        this.pageRange = 2;
+        this.sticky = false;
+        this.top = 0;
+    }
+    valueChanged(newValue) {
+        this._value = newValue;
+    }
+    topValueChanged(newValue) {
+        if (this.sticky) {
+            this.el.style.top = `${newValue}px`;
+        }
+    }
+    componentWillLoad() {
+        this._value = this.value;
+        this.topValueChanged(this.top);
+    }
+    breakpointListener(breakpoints) {
+        this.isMobile = breakpoints.mobile;
+    }
+    /**
+     * Go to the next page
+     */
+    async next() {
+        if (this._value < this.totalPages) {
+            this._value = this._value + 1;
+            this.balChangeEventEmitter.emit(this._value);
+        }
+    }
+    /**
+     * Go to the previous page
+     */
+    async previous() {
+        if (this._value !== 1) {
+            this._value = this._value - 1;
+            this.balChangeEventEmitter.emit(this._value);
+        }
+    }
+    /**
+     * @internal define config for the component
+     */
+    async configChanged(state) {
+        this.language = state.language;
+    }
+    selectPage(pageNumber) {
+        this._value = pageNumber;
+        this.balChangeEventEmitter.emit(this._value);
+    }
+    getItems(pageRange = 2) {
+        const controls = generatePaginationControl(this._value, this.totalPages, pageRange);
+        return controls.map((control) => {
+            if (control.type === 'page') {
+                return this.renderPageElement(Number(control.label));
+            }
+            else {
+                return this.renderEllipsisElement();
+            }
+        });
+    }
+    renderEllipsisElement() {
+        const more = BEM.block('pagination').element('nav').element('pagination-list').modifier('more');
+        return (h("li", { "aria-hidden": 'true' }, h("div", { class: Object.assign({}, more.class()) }, h("bal-text", { bold: true, heading: true, inline: true, space: "none" }, "\u2026"))));
+    }
+    renderPageElement(pageNumber) {
+        const isActive = this._value === pageNumber;
+        const dot = BEM.block('pagination').element('nav').element('pagination-list').element('dot');
+        if (this.interface === 'small') {
+            return (h("li", null, h("span", { role: "button", "aria-current": isActive ? 'true' : undefined, class: Object.assign(Object.assign(Object.assign({}, dot.class()), dot.modifier('active').class(isActive)), dot.modifier('inactive').class(!isActive)), "aria-label": pageNumber, onClick: () => this.selectPage(pageNumber) })));
+        }
+        return (h("li", null, h("bal-button", { square: true, color: isActive ? 'primary' : 'text', "aria-current": isActive ? 'true' : undefined, onClick: () => this.selectPage(pageNumber), "data-testid": "bal-pagination-page-number", size: this.isMobile || this.size === 'small' ? 'small' : '' }, pageNumber)));
+    }
+    render() {
+        const mobileItems = this.getItems(1);
+        const tabletItems = this.getItems(this.pageRange);
+        const block = BEM.block('pagination');
+        const elNav = block.element('nav');
+        const elPrevious = elNav.element('pagination-previous');
+        const elNext = elNav.element('pagination-next');
+        const elList = elNav.element('pagination-list');
+        const isSmall = this.interface === 'small';
+        const buttonColor = isSmall ? 'link' : 'text';
+        const buttonSize = isSmall || this.size === 'small' || this.isMobile ? 'small' : '';
+        const flat = isSmall;
+        const leftControlTitle = i18nControlLabel[this.language].left;
+        const rightControlTitle = i18nControlLabel[this.language].right;
+        const hasBasicNavigationButtons = this.interface === '' || (isSmall && this.totalPages <= 5);
+        const SmallWithText = () => (h("span", { key: '6fd9b27bbc3078a95b6a1af21c4e11bef1c79e4d', class: Object.assign(Object.assign({}, elList.class()), elList.modifier(`context-${this.interface}`).class()) }, h("span", { key: 'f33eb6a8a51bd338c062bf3ac142b31ec170b4bf' }, this._value), ' / ' + this.totalPages));
+        const PaginationTablet = () => (h("ul", { key: 'af2f5c1c4582c9f87a34ae8d9e18e6f153d6c079', class: Object.assign(Object.assign(Object.assign({}, elList.class()), elList.modifier(`context-${this.interface}`).class()), { 'is-disabled': this.disabled }), "data-testid": "bal-pagination-list" }, tabletItems));
+        const PaginationMobile = () => (h("ul", { key: 'e60525e50e001e65e0f3dfdcab2be7c577d1cb34', class: Object.assign(Object.assign(Object.assign({}, elList.class()), elList.modifier(`context-${this.interface}`).class()), { 'is-disabled': this.disabled }), "data-testid": "bal-pagination-list" }, mobileItems));
+        return (h(Host, { key: 'a82c3987b261b090d73a6a326b0628e9f4431de7', class: Object.assign(Object.assign({}, block.class()), block.modifier('is-sticky').class(this.sticky)) }, h("nav", { key: '3558d69404ce4877651363ffe60f5bf37428a316', class: Object.assign(Object.assign(Object.assign({}, elNav.class()), elNav.modifier(`context-${this.interface}`).class(this.interface !== '')), elNav.modifier(`align-${this.align}`).class(this.align !== '')), role: "navigation", "aria-label": "pagination" }, h("bal-button", { key: 'a7e00cae2c81d3970f946ac21ab56564a10786a7', square: true, color: buttonColor, size: buttonSize, flat: flat, class: Object.assign(Object.assign({}, elPrevious.class()), elPrevious.modifier(`context-${this.interface}`).class()), disabled: this._value < 2 || this.disabled, onClick: () => this.previous(), "data-testid": "bal-pagination-controls-left", title: leftControlTitle }, h("bal-icon", { key: '3b3974da7c2f8d195711d912083ef8021e3d71ca', name: "nav-go-left", size: "small" })), h("bal-button", { key: '1fb819a459e3851768a5664b0bcb8ae6bdfffc83', square: true, color: buttonColor, size: buttonSize, flat: flat, class: Object.assign(Object.assign({}, elNext.class()), elNext.modifier(`context-${this.interface}`).class()), disabled: this._value === this.totalPages || this.disabled, onClick: () => this.next(), "data-testid": "bal-pagination-controls-right", title: rightControlTitle }, h("bal-icon", { key: '28bb33f69928d49ea196efc60f0a539c985c6936', name: "nav-go-right", size: "small" })), hasBasicNavigationButtons && this.isMobile ? h(PaginationMobile, null) : '', hasBasicNavigationButtons && !this.isMobile ? h(PaginationTablet, null) : '', !hasBasicNavigationButtons ? h(SmallWithText, null) : '')));
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "value": ["valueChanged"],
+        "top": ["topValueChanged"]
+    }; }
+    static get style() { return BalPaginationStyle0; }
+}, [0, "bal-pagination", {
+        "align": [1],
+        "size": [1],
+        "interface": [1],
+        "disabled": [4],
+        "value": [2],
+        "totalPages": [2, "total-pages"],
+        "pageRange": [2, "page-range"],
+        "sticky": [4],
+        "top": [2],
+        "_value": [32],
+        "isMobile": [32],
+        "language": [32],
+        "next": [64],
+        "previous": [64],
+        "configChanged": [64]
+    }, undefined, {
+        "value": ["valueChanged"],
+        "top": ["topValueChanged"]
+    }]);
+__decorate([
+    ListenToBreakpoints(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", void 0)
+], Pagination.prototype, "breakpointListener", null);
+__decorate([
+    ListenToConfig(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", Promise)
+], Pagination.prototype, "configChanged", null);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bal-pagination", "bal-button", "bal-icon", "bal-spinner", "bal-text"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bal-pagination":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Pagination);
+            }
+            break;
+        case "bal-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "bal-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "bal-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "bal-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
 
 const BalPagination = Pagination;
 const defineCustomElement = defineCustomElement$1;

package/components/bal-popover-content2.js

@@ -57,7 +57,7 @@ const PopoverContent = /*@__PURE__*/ proxyCustomElement(class PopoverContent ext
     }
     render() {
         const block = BEM.block('popover').element('content');
-        return (h(Host, { key: 'c47c5a6aa96c52a4460894ab274a167be0927d35', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('expanded').class(this.expanded)), block.modifier('spaceless').class(this.spaceless)), block.modifier('no-shadow').class(this.noShadow)), block.modifier(`radius-${this.radius}`).class()), block.modifier(`color-${this.color}`).class()), block.modifier('on-top').class(this.mobileTop)), "data-testid": "bal-popover-content", role: "tooltip", style: this.contentStyle }, h("div", { key: 'dec823beec17dfe48195c3e794dbcfe4725f83d4', class: Object.assign({}, block.element('inner').class()), style: this.innerStyle }, h("slot", { key: 'd8200f831b8569736e27486fd5e975a0f21b76e2' })), h("div", { key: '5cd3727753fa2cf5a841c11b8d48aa7eee31cf2d', class: Object.assign({}, block.element('arrow').class()), "data-popper-arrow": true })));
+        return (h(Host, { key: 'a6a40a129dadcbe55d6d75c64572b1c1aeedf944', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('expanded').class(this.expanded)), block.modifier('spaceless').class(this.spaceless)), block.modifier('no-shadow').class(this.noShadow)), block.modifier(`radius-${this.radius}`).class()), block.modifier(`color-${this.color}`).class()), block.modifier('on-top').class(this.mobileTop)), "data-testid": "bal-popover-content", role: "tooltip", style: this.contentStyle }, h("div", { key: '6204b4d421004e6f3cf1541ed6a2023f3b3bdef1', class: Object.assign({}, block.element('inner').class()), style: this.innerStyle }, h("slot", { key: '71183eaf21a740ed7e20457e9fc3ec302ed2536f' })), h("div", { key: '821519a57d42152641d759aaa350537f7cad59b1', class: Object.assign({}, block.element('arrow').class()), "data-popper-arrow": true })));
     }
     get el() { return this; }
 }, [4, "bal-popover-content", {

package/components/bal-popover2.js

@@ -3,9 +3,8 @@ import { _ as __decorate, a as __metadata } from './tslib.es6.js';
 import { B as BEM } from './bem.js';
 import { b as balBrowser } from './browser.js';
 import { L as Logger } from './log.js';
-import { L as ListenTo } from './listen.js';
-import { b as balBreakpoints } from './breakpoints.subject.js';
 import { L as ListenToBreakpoints } from './breakpoints.decorator.js';
+import { b as balBreakpoints } from './breakpoints.subject.js';
 
 var top = 'top';
 var bottom = 'bottom';
@@ -2044,11 +2043,11 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends HTMLEleme
      */
     render() {
         const block = BEM.block('popover');
-        return (h(Host, { key: '997e5fefb0e6fe103b1732f084f8a7963eb319e5', "aria-presented": this.active ? 'true' : null, "data-id": this.popoverId, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('active').class(this.active)), block.modifier('tooltip').class(this.tooltip)), block.modifier('arrow').class(this.arrow)), block.modifier('hint').class(this.hint)), block.modifier('backdrop').class(this.backdrop)) }, !this.mobileTop && (h("div", { key: 'd5cb75c1951b9fe7cfd22ef86ee677461eecf5fc', ref: el => {
+        return (h(Host, { key: '7f7adc347e2bcc9f8acacc57f7e5e3d878e706c8', "aria-presented": this.active ? 'true' : null, "data-id": this.popoverId, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('active').class(this.active)), block.modifier('tooltip').class(this.tooltip)), block.modifier('arrow').class(this.arrow)), block.modifier('hint').class(this.hint)), block.modifier('backdrop').class(this.backdrop)) }, !this.mobileTop && (h("div", { key: '4caa1176851cfca5ea5bc51cb5cbf503572686e9', ref: el => {
                 this.backdropElement = el;
             }, class: Object.assign({}, block.element('backdrop').class(this.backdrop && this.active)), style: {
                 '--bal-popover-backdrop-height': `${this.backdropHeight}rem`,
-            } })), h("slot", { key: '41482b0196b230235349f86cfb413cc8b35a8dad' })));
+            } })), h("slot", { key: '36ec1137ffb8bc0439bbebcaa39144b9bcf7ed45' })));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -2074,7 +2073,7 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends HTMLEleme
         "present": [64],
         "dismiss": [64],
         "toggle": [64]
-    }, undefined, {
+    }, [[4, "balPopoverPrepare", "handlePopoverPrepare"], [4, "click", "clickOnOutside"], [8, "keydown", "handleKeyUp"], [4, "keyup", "tabOutside"]], {
         "active": ["activeChanged"]
     }]);
 __decorate([
@@ -2083,30 +2082,6 @@ __decorate([
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)
 ], Popover.prototype, "createLogger", null);
-__decorate([
-    ListenTo('balPopoverPrepare', { target: 'document' }),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [CustomEvent]),
-    __metadata("design:returntype", void 0)
-], Popover.prototype, "handlePopoverPrepare", null);
-__decorate([
-    ListenTo('click', { target: 'document' }),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [UIEvent]),
-    __metadata("design:returntype", Promise)
-], Popover.prototype, "clickOnOutside", null);
-__decorate([
-    ListenTo('keydown', { target: 'window' }),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [KeyboardEvent]),
-    __metadata("design:returntype", void 0)
-], Popover.prototype, "handleKeyUp", null);
-__decorate([
-    ListenTo('keyup', { target: 'document' }),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [KeyboardEvent]),
-    __metadata("design:returntype", Promise)
-], Popover.prototype, "tabOutside", null);
 __decorate([
     ListenToBreakpoints(),
     __metadata("design:type", Function),