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

package/components/bal-pagination2.js

@@ -1,313 +0,0 @@
-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$4 } from './bal-button2.js';
-import { d as defineCustomElement$3 } from './bal-icon2.js';
-import { d as defineCustomElement$2 } from './bal-spinner2.js';
-import { d as defineCustomElement$1 } from './bal-text2.js';
-import { L as ListenToBreakpoints } from './breakpoints.decorator.js';
-import { b as balBreakpoints } from './breakpoints.subject.js';
-import { d as defaultConfig } from './config.default.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: '8d0f477acb2db965fe7ca9a323db754dadb8c2d1', class: Object.assign(Object.assign({}, elList.class()), elList.modifier(`context-${this.interface}`).class()) }, h("span", { key: '25bc274a3580f3103acb6aa21bb0f132da31a4cd' }, this._value), ' / ' + this.totalPages));
-        const PaginationTablet = () => (h("ul", { key: '635a052d90c4d86104752eedf70d28d60a3ea194', 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: '36bc734dd92d55f93cae88e34c032fbae5239ae2', 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: '1f6888814e691b8f4b46987055e3d474078bac38', class: Object.assign(Object.assign({}, block.class()), block.modifier('is-sticky').class(this.sticky)) }, h("nav", { key: '00eba4def4d24082f102861ef471043c3646a18a', 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: '068a1d8b79deecd129b3280ac4eefb4e6c7ef814', 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: '0ceeb68b1426edc0b1425b6bb1236941534ead5d', name: "nav-go-left", size: "small" })), h("bal-button", { key: '3eb18c38c467b0f8bfc2326341e93e236567c060', 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: 'fa8feb6b44def140d75218f387fcfdbb984bd99a', 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() {
-    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$4();
-            }
-            break;
-        case "bal-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "bal-spinner":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "bal-text":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { Pagination as P, defineCustomElement as d };

package/components/bal-select-option2.js

@@ -1,47 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { _ as __decorate, a as __metadata } from './tslib.es6.js';
-import { L as Logger } from './log.js';
-
-const SelectOption = /*@__PURE__*/ proxyCustomElement(class SelectOption extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.label = undefined;
-        this.disabled = false;
-        this.value = undefined;
-        this.for = `bal-selopt-${selectOptionIds++}`;
-    }
-    createLogger(log) {
-        this.log = log;
-    }
-    render() {
-        return (h(Host, { key: 'e576fb51e73b23cbfd86911da7b8ddbd337e72a3', style: { display: 'none' } }, h("slot", { key: 'e6ad28fa2cd69ebf97968985267fd363097f88f3' })));
-    }
-}, [4, "bal-select-option", {
-        "label": [513],
-        "disabled": [4],
-        "value": [513],
-        "for": [513]
-    }]);
-__decorate([
-    Logger('bal-select-option'),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Function]),
-    __metadata("design:returntype", void 0)
-], SelectOption.prototype, "createLogger", null);
-let selectOptionIds = 0;
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["bal-select-option"];
-    components.forEach(tagName => { switch (tagName) {
-        case "bal-select-option":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SelectOption);
-            }
-            break;
-    } });
-}
-
-export { SelectOption as S, defineCustomElement as d };