@baloise/ds-core 19.9.2 → 19.9.3-nightly.20260403

package/components/all.d.ts

@@ -27,6 +27,7 @@ import { BalDate, defineCustomElement as defineBalDate } from './bal-date'
 import { BalDateCalendar, defineCustomElement as defineBalDateCalendar } from './bal-date-calendar'
 import { BalDateCalendarCell, defineCustomElement as defineBalDateCalendarCell } from './bal-date-calendar-cell'
 import { BalDivider, defineCustomElement as defineBalDivider } from './bal-divider'
+import { BalDocApp, defineCustomElement as defineBalDocApp } from './bal-doc-app'
 import { BalDropdown, defineCustomElement as defineBalDropdown } from './bal-dropdown'
 import { BalField, defineCustomElement as defineBalField } from './bal-field'
 import { BalFieldControl, defineCustomElement as defineBalFieldControl } from './bal-field-control'
@@ -145,6 +146,7 @@ export { BalDate, defineBalDate }
 export { BalDateCalendar, defineBalDateCalendar }
 export { BalDateCalendarCell, defineBalDateCalendarCell }
 export { BalDivider, defineBalDivider }
+export { BalDocApp, defineBalDocApp }
 export { BalDropdown, defineBalDropdown }
 export { BalField, defineBalField }
 export { BalFieldControl, defineBalFieldControl }

package/components/all.js

@@ -27,6 +27,7 @@ import { BalDate, defineCustomElement as defineBalDate } from './bal-date'
 import { BalDateCalendar, defineCustomElement as defineBalDateCalendar } from './bal-date-calendar'
 import { BalDateCalendarCell, defineCustomElement as defineBalDateCalendarCell } from './bal-date-calendar-cell'
 import { BalDivider, defineCustomElement as defineBalDivider } from './bal-divider'
+import { BalDocApp, defineCustomElement as defineBalDocApp } from './bal-doc-app'
 import { BalDropdown, defineCustomElement as defineBalDropdown } from './bal-dropdown'
 import { BalField, defineCustomElement as defineBalField } from './bal-field'
 import { BalFieldControl, defineCustomElement as defineBalFieldControl } from './bal-field-control'
@@ -145,6 +146,7 @@ export { BalDate, defineBalDate }
 export { BalDateCalendar, defineBalDateCalendar }
 export { BalDateCalendarCell, defineBalDateCalendarCell }
 export { BalDivider, defineBalDivider }
+export { BalDocApp, defineBalDocApp }
 export { BalDropdown, defineBalDropdown }
 export { BalField, defineBalField }
 export { BalFieldControl, defineBalFieldControl }
@@ -264,6 +266,7 @@ export const defineAllComponents = () => {
   defineBalDateCalendar()
   defineBalDateCalendarCell()
   defineBalDivider()
+  defineBalDocApp()
   defineBalDropdown()
   defineBalField()
   defineBalFieldControl()

package/components/animation.decorator.js

@@ -1,4 +1,4 @@
-import { l as debounce, v as isChildOfEventTarget, p as addEventListener, q as removeEventListener } from './helpers.js';
+import { q as debounce, v as isChildOfEventTarget, o as addEventListener, p as removeEventListener } from './helpers.js';
 import { L as ListenerAbstract, a as SingleSubject } from './listener.js';
 
 class BalAnimationListener extends ListenerAbstract {

package/components/bal-accordion.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 { B as BEM } from './bem.js';
-import { r as raf, k as debounceEvent, w as waitForComponent, t as transitionEndAsync } from './helpers.js';
+import { r as raf, k as debounceEvent, f as waitForComponent, t as transitionEndAsync } from './helpers.js';
 import { L as Logger } from './log.js';
 import { d as defineCustomElement$4 } from './bal-button2.js';
 import { d as defineCustomElement$3 } from './bal-icon2.js';
@@ -20,6 +20,7 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends HTMLE
         this.balWillAnimate = createEvent(this, "balWillAnimate", 7);
         this.balDidAnimate = createEvent(this, "balDidAnimate", 7);
         this.componentId = `bal-accordion-${accordionIds++}`;
+        this.animationGeneration = 0;
         this.state = 1 /* AccordionState.Collapsed */;
         this.animated = true;
         /**
@@ -101,6 +102,17 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends HTMLE
                 summaryElement.active = this.active;
             }
         };
+        this.cancelAnimation = () => {
+            if (this.currentRaf !== undefined) {
+                cancelAnimationFrame(this.currentRaf);
+                this.currentRaf = undefined;
+            }
+            if (this.currentRafInner !== undefined) {
+                cancelAnimationFrame(this.currentRafInner);
+                this.currentRafInner = undefined;
+            }
+            this.animationGeneration++;
+        };
         this.expand = (initialUpdate = false) => {
             this.active = true;
             const detailsElement = this.detailsElement;
@@ -112,18 +124,23 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends HTMLE
             if (this.state === 4 /* AccordionState.Expanded */) {
                 return this.active;
             }
-            if (this.currentRaf !== undefined) {
-                cancelAnimationFrame(this.currentRaf);
-            }
+            this.cancelAnimation();
+            const generation = this.animationGeneration;
             if (this.shouldAnimate()) {
-                raf(() => {
+                this.currentRaf = raf(() => {
+                    if (generation !== this.animationGeneration)
+                        return;
                     this.setState(8 /* AccordionState.Expanding */);
                     this.balWillAnimate.emit(this.active);
-                    this.currentRaf = raf(async () => {
+                    this.currentRafInner = raf(async () => {
+                        if (generation !== this.animationGeneration)
+                            return;
                         const contentHeight = detailsWrapperElement.offsetHeight;
                         const waitForTransition = transitionEndAsync(detailsElement, 300);
                         detailsElement.style.setProperty('max-height', `${contentHeight}px`);
                         await waitForTransition;
+                        if (generation !== this.animationGeneration)
+                            return;
                         this.setState(4 /* AccordionState.Expanded */);
                         detailsElement.style.removeProperty('max-height');
                         this.balDidAnimate.emit(this.active);
@@ -147,18 +164,23 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends HTMLE
             if (this.state === 1 /* AccordionState.Collapsed */) {
                 return this.active;
             }
-            if (this.currentRaf !== undefined) {
-                cancelAnimationFrame(this.currentRaf);
-            }
+            this.cancelAnimation();
+            const generation = this.animationGeneration;
             if (this.shouldAnimate()) {
                 this.currentRaf = raf(async () => {
+                    if (generation !== this.animationGeneration)
+                        return;
                     const contentHeight = detailsElement.offsetHeight;
                     detailsElement.style.setProperty('max-height', `${contentHeight}px`);
-                    raf(async () => {
+                    this.currentRafInner = raf(async () => {
+                        if (generation !== this.animationGeneration)
+                            return;
                         const waitForTransition = transitionEndAsync(detailsElement, 300);
                         this.setState(2 /* AccordionState.Collapsing */);
-                        this.balDidAnimate.emit(this.active);
+                        this.balWillAnimate.emit(this.active);
                         await waitForTransition;
+                        if (generation !== this.animationGeneration)
+                            return;
                         this.setState(1 /* AccordionState.Collapsed */);
                         detailsElement.style.removeProperty('max-height');
                         this.balDidAnimate.emit(this.active);
@@ -166,7 +188,7 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends HTMLE
                 });
             }
             else {
-                this.balDidAnimate.emit(this.active);
+                this.balWillAnimate.emit(this.active);
                 this.setState(1 /* AccordionState.Collapsed */);
                 this.balDidAnimate.emit(this.active);
             }

package/components/bal-app.js

@@ -1,105 +1,4 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { _ as __decorate, a as __metadata } from './tslib.es6.js';
-import { b as balBrowser } from './browser.js';
-import { b as balDevice } from './device.js';
-import { s as startFocusVisible } from './focus-visible.js';
-import { l as debounce, m as rIC, n as rOnLoad } from './helpers.js';
-import { L as Logger } from './log.js';
-import { b as updateBalAnimated } from './config.utils.js';
-
-const balAppCss = ":root{--bal-app-height:100%}.bal-app{position:relative}.lcp-wait{opacity:0;visibility:hidden;display:none}.lcp-ready .lcp-wait{opacity:inherit;visibility:inherit;display:inherit}";
-
-const App = /*@__PURE__*/ proxyCustomElement(class App extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.balAppReady = createEvent(this, "balAppReady", 7);
-        this.debouncedNotify = debounce(() => this.notifyResize(), 100);
-        /**
-         * Disables all animation inside the bal-app. Can be used for simplify e2e testing.
-         */
-        this.animated = true;
-        /**
-         * @internal Is `true` when DS components are ready to be shown.
-         */
-        this.ready = false;
-        this.notifyResize = async () => {
-            if (balBrowser.hasDocument && balBrowser.hasWindow) {
-                const doc = document.documentElement;
-                doc.style.setProperty('--bal-app-height', `${window.innerHeight}px`);
-            }
-        };
-    }
-    createLogger(log) {
-        this.log = log;
-    }
-    connectedCallback() {
-        if (this.animated === false) {
-            updateBalAnimated(this.animated);
-        }
-        if (balBrowser.hasWindow) {
-            window.addEventListener('resize', this.debouncedNotify);
-            this.debouncedNotify();
-        }
-    }
-    componentDidLoad() {
-        rIC(() => {
-            this.ready = true;
-            startFocusVisible();
-        });
-        rOnLoad(() => {
-            if (balBrowser.hasDocument && balBrowser.hasWindow) {
-                const doc = document.documentElement;
-                doc.classList.add('lcp-ready');
-                this.balAppReady.emit();
-            }
-        });
-    }
-    disconnectedCallback() {
-        if (balBrowser.hasWindow) {
-            window.removeEventListener('resize', this.debouncedNotify);
-        }
-    }
-    async setFocus(elements) {
-        if (this.focusVisible) {
-            this.focusVisible.setFocus(elements);
-        }
-    }
-    render() {
-        return (h(Host, { key: 'e6229236201fea92c4ccb1812f2f280a06130889', class: {
-                'bal-app': true,
-                'bal-app--safari': balBrowser.isSafari,
-                'bal-app--touch': balDevice.hasTouchScreen,
-            } }, h("slot", { key: '7712c7609c709dbe754eaf5700fd43ca3992a39f' })));
-    }
-    get el() { return this; }
-    static get style() { return balAppCss; }
-}, [260, "bal-app", {
-        "animated": [516],
-        "ready": [1540],
-        "setFocus": [64]
-    }]);
-__decorate([
-    Logger('bal-app'),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Function]),
-    __metadata("design:returntype", void 0)
-], App.prototype, "createLogger", null);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["bal-app"];
-    components.forEach(tagName => { switch (tagName) {
-        case "bal-app":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, App);
-            }
-            break;
-    } });
-}
+import { A as App, d as defineCustomElement$1 } from './bal-app2.js';
 
 const BalApp = App;
 const defineCustomElement = defineCustomElement$1;

package/components/bal-app2.js

@@ -0,0 +1,104 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { _ as __decorate, a as __metadata } from './tslib.es6.js';
+import { b as balBrowser } from './browser.js';
+import { b as balDevice } from './device.js';
+import { s as startFocusVisible } from './focus-visible.js';
+import { q as debounce, n as rIC, l as rOnLoad } from './helpers.js';
+import { L as Logger } from './log.js';
+import { b as updateBalAnimated } from './config.utils.js';
+
+const balAppCss = ":root{--bal-app-height:100%}.bal-app{position:relative}.lcp-wait{opacity:0;visibility:hidden;display:none}.lcp-ready .lcp-wait{opacity:inherit;visibility:inherit;display:inherit}";
+
+const App = /*@__PURE__*/ proxyCustomElement(class App extends HTMLElement {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.balAppReady = createEvent(this, "balAppReady", 7);
+        this.debouncedNotify = debounce(() => this.notifyResize(), 100);
+        /**
+         * Disables all animation inside the bal-app. Can be used for simplify e2e testing.
+         */
+        this.animated = true;
+        /**
+         * @internal Is `true` when DS components are ready to be shown.
+         */
+        this.ready = false;
+        this.notifyResize = async () => {
+            if (balBrowser.hasDocument && balBrowser.hasWindow) {
+                const doc = document.documentElement;
+                doc.style.setProperty('--bal-app-height', `${window.innerHeight}px`);
+            }
+        };
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    connectedCallback() {
+        if (this.animated === false) {
+            updateBalAnimated(this.animated);
+        }
+        if (balBrowser.hasWindow) {
+            window.addEventListener('resize', this.debouncedNotify);
+            this.debouncedNotify();
+        }
+    }
+    componentDidLoad() {
+        rIC(() => {
+            this.ready = true;
+            startFocusVisible();
+        });
+        rOnLoad(() => {
+            if (balBrowser.hasDocument && balBrowser.hasWindow) {
+                const doc = document.documentElement;
+                doc.classList.add('lcp-ready');
+                this.balAppReady.emit();
+            }
+        });
+    }
+    disconnectedCallback() {
+        if (balBrowser.hasWindow) {
+            window.removeEventListener('resize', this.debouncedNotify);
+        }
+    }
+    async setFocus(elements) {
+        if (this.focusVisible) {
+            this.focusVisible.setFocus(elements);
+        }
+    }
+    render() {
+        return (h(Host, { key: 'e6229236201fea92c4ccb1812f2f280a06130889', class: {
+                'bal-app': true,
+                'bal-app--safari': balBrowser.isSafari,
+                'bal-app--touch': balDevice.hasTouchScreen,
+            } }, h("slot", { key: '7712c7609c709dbe754eaf5700fd43ca3992a39f' })));
+    }
+    get el() { return this; }
+    static get style() { return balAppCss; }
+}, [260, "bal-app", {
+        "animated": [516],
+        "ready": [1540],
+        "setFocus": [64]
+    }]);
+__decorate([
+    Logger('bal-app'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function]),
+    __metadata("design:returntype", void 0)
+], App.prototype, "createLogger", null);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bal-app"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bal-app":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, App);
+            }
+            break;
+    } });
+}
+
+export { App as A, defineCustomElement as d };

package/components/bal-button2.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { a as ariaBooleanToString } from './aria.js';
 import { i as inheritAttributes } from './attributes.js';
-import { n as rOnLoad } from './helpers.js';
+import { l as rOnLoad } from './helpers.js';
 import { d as defineCustomElement$2 } from './bal-icon2.js';
 import { d as defineCustomElement$1 } from './bal-spinner2.js';
 

package/components/bal-carousel-item.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { s as sanitizeSvg } from './svg.js';
 import { i as inheritAttributes } from './attributes.js';
 import { B as BEM } from './bem.js';
-import { n as rOnLoad, b as waitAfterFramePaint } from './helpers.js';
+import { l as rOnLoad, a as waitAfterFramePaint } from './helpers.js';
 import { t as toKebabCase } from './string.js';
 
 const CarouselItem = /*@__PURE__*/ proxyCustomElement(class CarouselItem extends HTMLElement {

package/components/bal-checkbox-group.js

@@ -6,7 +6,7 @@ import { i as inheritAttributes } from './attributes.js';
 import { B as BEM } from './bem.js';
 import { d as defaultBalAriaForm } from './form.js';
 import { s as stopEventBubbling } from './form-input.js';
-import { i as isDescendant, o as hasTagName } from './helpers.js';
+import { i as isDescendant, m as hasTagName } from './helpers.js';
 import { L as Logger } from './log.js';
 import { d as defineCustomElement$2 } from './bal-checkbox2.js';
 import { L as ListenToFocus } from './focus.decorator.js';

package/components/bal-date-calendar2.js

@@ -1,7 +1,7 @@
 import { h, proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
 import { B as BEM } from './bem.js';
-import { b as waitAfterFramePaint } from './helpers.js';
+import { a as waitAfterFramePaint } from './helpers.js';
 import { L as Logger } from './log.js';
 import { p as padStart } from './index3.js';
 import { i as isNil } from './index2.js';

package/components/bal-date.js

@@ -9,7 +9,7 @@ import { b as balFloatingUi } from './floating-ui.js';
 import { F as FOCUS_KEYS } from './focus-visible.js';
 import { d as defaultBalAriaForm } from './form.js';
 import { s as stopEventBubbling } from './form-input.js';
-import { m as rIC, k as debounceEvent, p as addEventListener, q as removeEventListener, e as waitAfterIdleCallback } from './helpers.js';
+import { n as rIC, k as debounceEvent, o as addEventListener, p as removeEventListener, b as waitAfterIdleCallback } from './helpers.js';
 import { L as Logger } from './log.js';
 import { i as i18nBalDate } from './bal-date.i18n.js';
 import { d as defineCustomElement$6 } from './bal-date-calendar2.js';

package/components/bal-doc-app.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface BalDocApp extends Components.BalDocApp, HTMLElement {}
+export const BalDocApp: {
+    prototype: BalDocApp;
+    new (): BalDocApp;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;