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

package/dist/collection/utils/swiper/swiper.util.js

@@ -0,0 +1,322 @@
+import { h } from "@stencil/core";
+import { addEventListener, debounce, isDescendant, raf, removeEventListener } from "../helpers";
+import { getComputedWidth } from "../style";
+import { i18nSwiperControlLabel } from "./swiper.i18n";
+import { SmallControl } from "./controls/small-control";
+import { LargeControl } from "./controls/large-control";
+import { DotControl } from "./controls/dot-control";
+import { BEM } from "../bem";
+import { isTabKey } from "../keyboard";
+import { stopEventBubbling } from "../form-input";
+export class SwiperUtil {
+    constructor() {
+        this.previousTransformValue = 0;
+        this.active = true;
+        this.id = `bal-swiper-${SwiperIds++}`;
+        this.containerId = `${this.id}-container`;
+        this.index = 0;
+        this.gapSize = 0;
+        this.steps = 1;
+        this.noNeedForSlide = true;
+        this.isLastSlideVisible = false;
+        this.itemsPerView = 1;
+        this.controls = 'none';
+        /**
+         * EVENTS
+         * ------------------------------------------------------
+         */
+        this.keyboardMode = false;
+        this.shiftMode = false;
+        this.isInsideContainer = false;
+        this.focusByKey = false;
+        this.pointerDown = () => {
+            this.keyboardMode = false;
+            this.shiftMode = false;
+            this.focusByKey = false;
+            this.isInsideContainer = false;
+        };
+        this.listenToKeyDown = (ev) => {
+            this.keyboardMode = isTabKey(ev);
+            this.shiftMode = ev.shiftKey;
+            this.focusByKey = false;
+            this.isInsideContainer = isDescendant(this.containerEl, ev.target);
+            if (this.active) {
+                if (this.controls !== 'dots' && this.controls !== 'tabs') {
+                    if (this.isInsideContainer && this.keyboardMode) {
+                        if (this.shiftMode && this.index > 0) {
+                            this.focusByKey = true;
+                            this.focusPreviousItem(ev);
+                        }
+                        else if (!this.shiftMode && this.index < this.lastIndex()) {
+                            this.focusByKey = true;
+                            this.focusNextItem(ev);
+                        }
+                    }
+                }
+            }
+        };
+        /**
+         * PRIVATE METHODS
+         * ------------------------------------------------------
+         */
+        this.updateFocus = (ev) => {
+            if (this.active) {
+                const focusByKey = this.focusByKey;
+                const backwards = this.shiftMode;
+                const isInsideContainer = this.isInsideContainer;
+                // when the focus enters the component we focus
+                // the last focused item
+                if (this.controls !== 'dots' && this.controls !== 'tabs' && focusByKey && !isInsideContainer) {
+                    if (backwards) {
+                        this.focusItem(this.lastIndex());
+                    }
+                    else {
+                        this.focusItem(0);
+                    }
+                }
+            }
+        };
+        /**
+         * CSS Classes
+         * ------------------------------------------------------
+         */
+        this.cssBlock = BEM.block('swiper');
+        this.cssSwiper = () => (Object.assign({}, this.cssBlock.class(this.active)));
+        this.cssInnerSwiper = () => (Object.assign(Object.assign(Object.assign(Object.assign({}, this.cssBlock.element('inner').class(this.active)), this.cssBlock.element('inner').modifier(`items-per-view-${this.itemsPerView}`).class(this.active)), this.cssBlock.element('inner').modifier(`shadow-left`).class(this.hasShadowLeft())), this.cssBlock.element('inner').modifier(`shadow-right`).class(this.hasShadowRight())));
+        this.cssSwiperContainer = () => (Object.assign({}, this.cssBlock.element('container').class(this.active)));
+        /**
+         * PUBLIC METHODS
+         * ------------------------------------------------------
+         */
+        this.notifyChange = debounce(() => this.notifyChangeInternal(), 100);
+        this.onControlChange = (selectedValue) => {
+            if (selectedValue !== this.index) {
+                const isForward = selectedValue > this.index;
+                if (isForward) {
+                    this.next(selectedValue - this.index);
+                }
+                else {
+                    this.previous(this.index - selectedValue);
+                }
+            }
+        };
+        this.onPreviousButtonClick = () => this.previous();
+        this.onNextButtonClick = () => this.next();
+    }
+    /**
+     * LIFECYCLE
+     * ------------------------------------------------------
+     */
+    connectedCallback(component) {
+        this.component = component;
+        addEventListener(window, 'keydown', this.listenToKeyDown);
+        addEventListener(this.component.el, 'focusin', this.updateFocus);
+        addEventListener(window, 'touchstart', this.pointerDown);
+        addEventListener(window, 'mousedown', this.pointerDown);
+    }
+    disconnectedCallback() {
+        removeEventListener(window, 'keydown', this.listenToKeyDown);
+        removeEventListener(this.component.el, 'focusin', this.updateFocus);
+        removeEventListener(window, 'touchstart', this.pointerDown);
+        removeEventListener(window, 'mousedown', this.pointerDown);
+    }
+    /**
+     * PUBLIC METHODS
+     * ------------------------------------------------------
+     */
+    isActive() {
+        return this.active;
+    }
+    async activate() {
+        this.active = true;
+    }
+    async disable() {
+        this.active = false;
+    }
+    async focusItem(index) {
+        const slide = await this.goTo(index);
+        if (slide && slide.el) {
+            await this.setFocusToEl(slide.el);
+        }
+    }
+    async focusNextItem(ev) {
+        const slide = await this.next(1);
+        if (slide && slide.el) {
+            stopEventBubbling(ev);
+            await this.setFocusToEl(slide.el);
+        }
+    }
+    async focusPreviousItem(ev) {
+        const slide = await this.previous(1);
+        if (slide && slide.el) {
+            stopEventBubbling(ev);
+            await this.setFocusToEl(slide.el);
+        }
+    }
+    async setFocusToEl(el) {
+        if (el.setFocus) {
+            await el.setFocus();
+        }
+    }
+    isFirst() {
+        return this.index === 0;
+    }
+    hasShadowLeft() {
+        return this.hasShadow() && this.index !== 0 && this.active;
+    }
+    hasShadowRight() {
+        return this.hasShadow() && !this.isLastSlideVisible && this.active;
+    }
+    isLast() {
+        return this.isLastSlideVisible;
+    }
+    async previous(steps = this.steps) {
+        let previousValue = this.index - steps;
+        if (previousValue < 0) {
+            previousValue = 0;
+        }
+        return this.goTo(previousValue);
+    }
+    async next(steps = this.steps) {
+        const items = this.component.swiperGetAllChildrenElements();
+        const length = items.length;
+        let nextValue = this.index + steps;
+        if (nextValue >= length) {
+            nextValue = length - 1;
+        }
+        return this.goTo(nextValue);
+    }
+    async updateIndex(index = this.index) {
+        if (this.index !== index) {
+            this.goTo(index);
+            this.index = index;
+            this.component.swiperOnChange(this.index);
+        }
+    }
+    async goTo(index = this.index) {
+        if (this.active) {
+            const activeSlide = await this.buildSlide(index);
+            if (activeSlide) {
+                const didAnimate = await this.animate(activeSlide.transformActive, true);
+                if (didAnimate || this.index !== index) {
+                    this.index = index;
+                    this.component.swiperOnChange(this.index);
+                }
+            }
+            return activeSlide;
+        }
+    }
+    renderControls() {
+        if (!this.active || this.noNeedForSlide || !this.component.hasAnimated) {
+            return '';
+        }
+        const leftControlTitle = i18nSwiperControlLabel[this.component.language].left;
+        const rightControlTitle = i18nSwiperControlLabel[this.component.language].right;
+        switch (this.controls) {
+            case 'small':
+                return (h(SmallControl, { isFirst: this.isFirst(), isLast: this.isLast(), inverted: this.component.inverted, leftControlTitle: leftControlTitle, rightControlTitle: rightControlTitle, containerId: this.containerId, onNextClick: () => this.onNextButtonClick(), onPreviousClick: () => this.onPreviousButtonClick() }));
+            case 'large':
+                return (h(LargeControl, { isFirst: this.isFirst(), isLast: this.isLast(), inverted: this.component.inverted, areControlsHidden: !this.component.isMobile, leftControlTitle: leftControlTitle, rightControlTitle: rightControlTitle, containerId: this.containerId, onNextClick: () => this.onNextButtonClick(), onPreviousClick: () => this.onPreviousButtonClick() }));
+            case 'dots':
+                return (h(DotControl, { value: this.index, items: this.getAllControlItems(), containerId: this.containerId, onControlChange: item => this.onControlChange(item.value) }));
+            default:
+                return '';
+        }
+    }
+    getAllControlItems() {
+        const items = this.component.swiperGetAllChildrenElements();
+        return items.map((item, index) => ({ value: index, label: item.label }));
+    }
+    /**
+     * PRIVATE METHODS
+     * ------------------------------------------------------
+     */
+    lastIndex() {
+        const items = this.component.swiperGetAllChildrenElements();
+        return items.length - 1;
+    }
+    hasShadow() {
+        return !this.component.inverted && (this.itemsPerView === 'auto' || this.itemsPerView > 1);
+    }
+    async notifyChangeInternal() {
+        const activeSlide = await this.buildSlide(this.index);
+        if (activeSlide) {
+            this.animate(activeSlide.transformActive, false);
+        }
+    }
+    async buildSlide(slideIndex) {
+        const items = this.component.swiperGetAllChildrenElements();
+        const index = slideIndex === undefined ? this.lastIndex() : slideIndex;
+        if (items.length > index && index >= 0) {
+            const gapSize = this.gapSize;
+            const transformNext = items
+                .filter((_, n) => n < index + 1)
+                .reduce((acc, item) => acc + getComputedWidth(item) + gapSize, 0);
+            const transformActive = items
+                .filter((_, n) => n < index)
+                .reduce((acc, item) => acc + getComputedWidth(item) + gapSize, 0);
+            return {
+                el: items[index],
+                transformNext,
+                transformActive,
+                isFirst: index === 0,
+                isLast: index === this.lastIndex(),
+                total: this.lastIndex() + 1,
+                index,
+            };
+        }
+        return undefined;
+    }
+    async animate(pixels = 0, animated = true) {
+        return new Promise(resolve => {
+            if (this.currentRaf !== undefined) {
+                cancelAnimationFrame(this.currentRaf);
+            }
+            this.currentRaf = raf(async () => {
+                if (this.containerEl && this.innerEl) {
+                    const lastSlide = await this.buildSlide();
+                    if (lastSlide) {
+                        const totalWidth = lastSlide.transformNext || 0;
+                        const overflowWindowWidth = this.innerEl.clientWidth || 0;
+                        // get max amount of pixel to move the items container to the left or right
+                        let maxAmountOfPixel = totalWidth - overflowWindowWidth;
+                        // -1 one is needed for example when we use items per view 3 with 33.333%
+                        if (this.itemsPerView === 3) {
+                            maxAmountOfPixel = totalWidth - overflowWindowWidth - 1;
+                        }
+                        // last item is visible if the overflow window moved more than the diff
+                        const isLastSlideVisible = maxAmountOfPixel <= pixels;
+                        const isFirst = pixels === 0 || maxAmountOfPixel <= 2;
+                        if (isFirst) {
+                            this.index = 0;
+                        }
+                        const hasSmallControls = this.controls === 'small';
+                        const hasLargeControls = this.controls === 'large';
+                        this.noNeedForSlide = totalWidth <= overflowWindowWidth;
+                        let transformValue = this.noNeedForSlide ? 0 : isLastSlideVisible ? maxAmountOfPixel : pixels;
+                        if (!isFirst &&
+                            !this.noNeedForSlide &&
+                            (hasSmallControls || (hasLargeControls && !this.component.isMobile))) {
+                            transformValue = transformValue - (isLastSlideVisible ? 0 : hasLargeControls ? 56 : 48);
+                        }
+                        this.containerEl.style.transitionDuration = animated ? '0.6s' : '0';
+                        this.containerEl.style.transform = `translate3d(-${transformValue}px, 0px, 0px)`;
+                        const didAnimate = transformValue !== this.previousTransformValue;
+                        this.previousTransformValue = transformValue;
+                        this.isLastSlideVisible = isLastSlideVisible;
+                        if (this.borderEl) {
+                            this.borderEl.style.transitionDuration = animated ? '0.6s' : '0';
+                            this.borderEl.style.transform = `translate3d(${transformValue}px, 0px, 0px)`;
+                        }
+                        this.component.hasAnimated = true;
+                        if (!didAnimate) {
+                            return resolve(false);
+                        }
+                        return resolve(true);
+                    }
+                }
+            });
+        });
+    }
+}
+let SwiperIds = 0;

package/dist/esm/app-globals-83570026.js

@@ -0,0 +1,5 @@
+import { g as globalScript } from './global-88c7b04e.js';
+
+const globalScripts = globalScript;
+
+export { globalScripts as g };

package/dist/esm/bal-accordion_4.entry.js

@@ -1,11 +1,11 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-5b1faf93.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-8d2a7ce7.js';
 import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
-import { n as raf, t as transitionEndAsync, o as debounceEvent, w as waitForComponent } from './helpers-72ae7307.js';
+import { o as raf, t as transitionEndAsync, p as debounceEvent, w as waitForComponent } from './helpers-32d9e1cc.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
 import { L as Logger } from './log-dfd1c19f.js';
 import { L as ListenToConfig } from './config.decorator-d18abfe1.js';
-import { s as stopEventBubbling } from './form-input-264ad739.js';
-import { b as isEnterKey, d as isSpaceKey } from './keyboard.helpers-b2dd6393.js';
+import { s as stopEventBubbling } from './form-input-1f3d8337.js';
+import { b as isEnterKey, d as isSpaceKey } from './keyboard.helpers-159e517d.js';
 import './browser-a8073d92.js';
 import './icons.constant-a7885631.js';
 import './config.utils-6ac6c9bd.js';

package/dist/esm/bal-app.entry.js

@@ -1,8 +1,8 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-5b1faf93.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-8d2a7ce7.js';
 import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
 import { b as balBrowser } from './browser-a8073d92.js';
 import { b as balDevice } from './device-8c6d2881.js';
-import { j as debounce, m as rIC, l as rLCP } from './helpers-72ae7307.js';
+import { k as debounce, n as rIC, m as rOnLoad } from './helpers-32d9e1cc.js';
 import { L as Logger } from './log-dfd1c19f.js';
 import { s as startFocusVisible } from './focus-visible-f0cdd043.js';
 import { b as updateBalAnimated } from './config.utils-6ac6c9bd.js';
@@ -41,7 +41,7 @@ const App = class {
             this.ready = true;
             startFocusVisible();
         });
-        rLCP(() => {
+        rOnLoad(() => {
             if (balBrowser.hasDocument && balBrowser.hasWindow) {
                 const doc = document.documentElement;
                 doc.classList.add('lcp-ready');
@@ -59,11 +59,11 @@ const App = class {
         }
     }
     render() {
-        return (h(Host, { key: '8e124474f0e95f8fdcd4546d7998556764d81d71', class: {
+        return (h(Host, { key: '29fef05a451290e2e20dc6808d1cce03ec1b1c4c', class: {
                 'bal-app': true,
                 'bal-app--safari': balBrowser.isSafari,
                 'bal-app--touch': balDevice.hasTouchScreen,
-            } }, h("slot", { key: 'e4a8974a3f55ec71c4ff7c46f2a9728d7efd4408' })));
+            } }, h("slot", { key: 'd54179394cb4d9882647d497e09495193d57a12d' })));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/bal-badge.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-5b1faf93.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-8d2a7ce7.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
 
 const balBadgeCss = ":root{--bal-badge-background:var(--bal-color-red-3);--bal-badge-background-grey:var(--bal-color-grey-3);--bal-badge-background-red:var(--bal-color-red-3);--bal-badge-background-yellow:var(--bal-color-yellow-3);--bal-badge-background-green:var(--bal-color-green-3);--bal-badge-background-purple:var(--bal-color-purple-3);--bal-badge-radius:var(--bal-radius-rounded);--bal-badge-text-color:var(--bal-color-text-primary);--bal-badge-color-grey:var(--bal-color-text-grey-dark);--bal-badge-color-red:var(--bal-color-text-primary);--bal-badge-color-yellow:var(--bal-color-text-primary);--bal-badge-color-green:var(--bal-color-text-primary);--bal-badge-color-purple:var(--bal-color-text-primary)}.bal-badge{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;min-width:1.5rem;height:1.5rem;border-radius:var(--bal-badge-radius);background:var(--bal-badge-background);padding:.25rem}.bal-badge--size-small{width:.75rem;max-width:.75rem;min-width:.75rem;height:.75rem}.bal-badge--size-large{width:2rem;height:2rem}.bal-badge--background-red,.bal-badge--background-danger{background:var(--bal-badge-background-red)}.bal-badge--background-yellow,.bal-badge--background-warning{background:var(--bal-badge-background-yellow)}.bal-badge--background-green,.bal-badge--background-success{background:var(--bal-badge-background-green)}.bal-badge--background-purple{background:var(--bal-badge-background-purple)}.bal-badge--background-grey{background:var(--bal-badge-background-grey)}.bal-badge--position-card,.bal-badge--position-button{position:absolute;right:-0.5rem;top:-0.5rem}.bal-badge--position-tabs{margin-top:-0.25rem;position:absolute;right:-1.625rem}.bal-badge--position-tabs.bal-badge--size-small{right:-1rem}span.bal-badge__label{font-weight:var(--bal-font-weight-bold) !important;font-family:var(--bal-font-family-text) !important;font-size:var(--bal-text-size-small) !important;color:var(--bal-badge-text-color);line-height:1.5rem !important;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}span.bal-badge__label--hidden{display:none !important}span.bal-badge__label--color-red,span.bal-badge__label--color-danger{color:var(--bal-badge-color-red)}span.bal-badge__label--color-yellow,span.bal-badge__label--color-warning{color:var(--bal-badge-color-yellow)}span.bal-badge__label--color-green,span.bal-badge__label--color-success{color:var(--bal-badge-color-green)}span.bal-badge__label--color-grey{color:var(--bal-badge-color-grey)}span.bal-badge__label--color-purple{color:var(--bal-badge-color-purple)}.bal-badge__icon--hidden{display:none !important}";

package/dist/esm/bal-button_2.entry.js

@@ -1,8 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-5b1faf93.js';
-import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-8d2a7ce7.js';
 import { i as inheritAttributes } from './attributes-4fa7040f.js';
-import { l as rLCP } from './helpers-72ae7307.js';
-import { L as ListenTo } from './listen-d1712e70.js';
+import { m as rOnLoad } from './helpers-32d9e1cc.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
 import './browser-a8073d92.js';
 import './icons.constant-a7885631.js';
@@ -63,7 +61,7 @@ const Button = class {
         }
     }
     componentDidLoad() {
-        rLCP(() => (this.isLargestContentPaintDone = true));
+        rOnLoad(() => (this.isLargestContentPaintDone = true));
     }
     componentWillLoad() {
         this.inheritAttributes = inheritAttributes(this.el, [
@@ -173,12 +171,6 @@ const Button = class {
     }
     get el() { return getElement(this); }
 };
-__decorate([
-    ListenTo('click', { capture: true, target: 'document' }),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [UIEvent]),
-    __metadata("design:returntype", void 0)
-], Button.prototype, "listenOnClick", null);
 Button.style = BalButtonStyle0;
 
 const ButtonGroup = class {

package/dist/esm/bal-card_6.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-5b1faf93.js';
+import { r as registerInstance, h, H as Host } from './index-8d2a7ce7.js';
 import { i as isEmpty } from './index-db06fb0e.js';
 import './_commonjsHelpers-1c8beb5f.js';