@baloise/ds-core 17.2.4-nightly.20250114 → 17.2.5

package/dist/types/components/bal-segment/bal-segment.d.ts

@@ -5,7 +5,9 @@ import { BalWindowResizeObserver } from '../../utils/resize';
 import { BalBreakpointObserver, BalBreakpoints } from '../../utils/breakpoints';
 import { BalFocusObserver } from '../../utils/focus';
 import { BalAriaForm } from '../../utils/form';
-export declare class Segment implements ComponentInterface, BalWindowResizeObserver, BalBreakpointObserver, BalFocusObserver {
+import { BalVisibilityObserver } from '../../utils/visibility';
+import { BalAnimationObserver } from '../../utils/animation';
+export declare class Segment implements ComponentInterface, BalWindowResizeObserver, BalBreakpointObserver, BalFocusObserver, BalVisibilityObserver, BalAnimationObserver {
     el: HTMLElement;
     log: LogInstance;
     createLogger(log: LogInstance): void;
@@ -86,7 +88,8 @@ export declare class Segment implements ComponentInterface, BalWindowResizeObser
     hasFocus: boolean;
     focusInListener(ev: FocusEvent): void;
     focusOutListener(ev: FocusEvent): void;
-    listenToDidAnimate(ev: UIEvent): void;
+    animationListener(): void;
+    visibilityListener(): void;
     breakpointListener(breakpoints: BalBreakpoints): void;
     windowResizeListener(): void;
     listenOnKeyDownOutside(): void;

package/dist/types/components/bal-tabs/bal-tabs.d.ts

@@ -8,7 +8,9 @@ import { AccordionState } from '../../interfaces';
 import { BalResizeInfo, BalResizeObserver } from '../../utils/resize';
 import { SwiperChildItem, SwiperInterface, SwiperUtil } from '../../utils/swiper';
 import { BalSwipeInfo } from '../../utils/swipe';
-export declare class Tabs implements ComponentInterface, Loggable, BalConfigObserver, BalMutationObserver, BalBreakpointObserver, BalResizeObserver, SwiperInterface {
+import { BalVisibilityObserver } from '../../utils/visibility';
+import { BalAnimationObserverInfo } from '../../utils/animation';
+export declare class Tabs implements ComponentInterface, Loggable, BalConfigObserver, BalMutationObserver, BalBreakpointObserver, BalResizeObserver, BalVisibilityObserver, SwiperInterface {
     private tabsId;
     private currentRaf;
     swiper: SwiperUtil;
@@ -138,11 +140,11 @@ export declare class Tabs implements ComponentInterface, Loggable, BalConfigObse
      */
     mutationObserverActive: boolean;
     mutationListener(): void;
+    visibilityListener(): void;
     breakpointListener(breakpoints: BalBreakpoints): void;
     resizeListener(info: BalResizeInfo): void;
     swipeListener({ left, right }: BalSwipeInfo): void;
-    listenToWillAnimate(ev: UIEvent): void;
-    listenToDidAnimate(ev: UIEvent): void;
+    animationListener(info: BalAnimationObserverInfo): void;
     listenToKeyDown(ev: KeyboardEvent): void;
     /**
      * PUBLIC METHODS

package/dist/types/components.d.ts

@@ -880,20 +880,6 @@ export namespace Components {
          */
         "space": BalProps.BalDividerSpace;
     }
-    interface BalDocApp {
-        /**
-          * Disables all animation inside the bal-app. Can be used for simplify e2e testing.
-         */
-        "animated": boolean;
-        "language"?: string;
-        "logComponents": string;
-        "logCustom": boolean;
-        "logEvents": boolean;
-        "logLifecycle": boolean;
-        "logRender": boolean;
-        "region"?: string;
-        "stickyFooter": boolean;
-    }
     interface BalDropdown {
         /**
           * Indicates whether the value of the control can be automatically completed by the browser.
@@ -4009,12 +3995,6 @@ declare global {
         prototype: HTMLBalDividerElement;
         new (): HTMLBalDividerElement;
     };
-    interface HTMLBalDocAppElement extends Components.BalDocApp, HTMLStencilElement {
-    }
-    var HTMLBalDocAppElement: {
-        prototype: HTMLBalDocAppElement;
-        new (): HTMLBalDocAppElement;
-    };
     interface HTMLBalDropdownElementEventMap {
         "balChange": BalEvents.BalDropdownChangeDetail;
         "balFocus": BalEvents.BalDropdownFocusDetail;
@@ -4991,7 +4971,6 @@ declare global {
         "bal-date-calendar": HTMLBalDateCalendarElement;
         "bal-date-calendar-cell": HTMLBalDateCalendarCellElement;
         "bal-divider": HTMLBalDividerElement;
-        "bal-doc-app": HTMLBalDocAppElement;
         "bal-dropdown": HTMLBalDropdownElement;
         "bal-field": HTMLBalFieldElement;
         "bal-field-control": HTMLBalFieldControlElement;
@@ -5963,20 +5942,6 @@ declare namespace LocalJSX {
          */
         "space"?: BalProps.BalDividerSpace;
     }
-    interface BalDocApp {
-        /**
-          * Disables all animation inside the bal-app. Can be used for simplify e2e testing.
-         */
-        "animated"?: boolean;
-        "language"?: string;
-        "logComponents"?: string;
-        "logCustom"?: boolean;
-        "logEvents"?: boolean;
-        "logLifecycle"?: boolean;
-        "logRender"?: boolean;
-        "region"?: string;
-        "stickyFooter"?: boolean;
-    }
     interface BalDropdown {
         /**
           * Indicates whether the value of the control can be automatically completed by the browser.
@@ -8592,7 +8557,6 @@ declare namespace LocalJSX {
         "bal-date-calendar": BalDateCalendar;
         "bal-date-calendar-cell": BalDateCalendarCell;
         "bal-divider": BalDivider;
-        "bal-doc-app": BalDocApp;
         "bal-dropdown": BalDropdown;
         "bal-field": BalField;
         "bal-field-control": BalFieldControl;
@@ -8715,7 +8679,6 @@ declare module "@stencil/core" {
             "bal-date-calendar": LocalJSX.BalDateCalendar & JSXBase.HTMLAttributes<HTMLBalDateCalendarElement>;
             "bal-date-calendar-cell": LocalJSX.BalDateCalendarCell & JSXBase.HTMLAttributes<HTMLBalDateCalendarCellElement>;
             "bal-divider": LocalJSX.BalDivider & JSXBase.HTMLAttributes<HTMLBalDividerElement>;
-            "bal-doc-app": LocalJSX.BalDocApp & JSXBase.HTMLAttributes<HTMLBalDocAppElement>;
             "bal-dropdown": LocalJSX.BalDropdown & JSXBase.HTMLAttributes<HTMLBalDropdownElement>;
             "bal-field": LocalJSX.BalField & JSXBase.HTMLAttributes<HTMLBalFieldElement>;
             "bal-field-control": LocalJSX.BalFieldControl & JSXBase.HTMLAttributes<HTMLBalFieldControlElement>;

package/dist/types/utils/animation/animation.decorator.d.ts

@@ -0,0 +1,3 @@
+import { ComponentInterface } from '../../stencil-public-runtime';
+import { BalAnimationObserver } from './animation.interfaces';
+export declare function ListenToAnimation(): (target: ComponentInterface & BalAnimationObserver, _propertyKey: string, _descriptor: PropertyDescriptor) => void;

package/dist/types/utils/animation/animation.interfaces.d.ts

@@ -0,0 +1,7 @@
+export interface BalAnimationObserver {
+    el: HTMLElement;
+    animationListener(data: BalAnimationObserverInfo): void;
+}
+export interface BalAnimationObserverInfo {
+    target: HTMLElement;
+}

package/dist/types/utils/animation/animation.listener.d.ts

@@ -0,0 +1,9 @@
+import { ListenerAbstract } from '../types/listener';
+import { BalAnimationObserverInfo } from './animation.interfaces';
+export declare class BalAnimationListener extends ListenerAbstract<unknown, BalAnimationObserverInfo> {
+    private debouncedNotify;
+    private callbackWillAnimate;
+    private callbackDidAnimate;
+    connect(el?: HTMLElement | Window | Document): void;
+    disconnect(): void;
+}

package/dist/types/utils/animation/animation.subject.d.ts

@@ -0,0 +1,9 @@
+import { SingleSubject } from '../types/signal';
+import { BalAnimationObserver, BalAnimationObserverInfo } from './animation.interfaces';
+export declare class BalAnimationSubject extends SingleSubject<BalAnimationObserver, BalAnimationObserverInfo> {
+    private listener;
+    constructor();
+    attach(observer: BalAnimationObserver): void;
+    detach(): void;
+}
+export declare const balAnimationSubject: BalAnimationSubject;

package/dist/types/utils/animation/index.d.ts

@@ -0,0 +1,2 @@
+export * from './animation.decorator';
+export * from './animation.interfaces';

package/dist/types/utils/helpers.d.ts

@@ -39,7 +39,7 @@ export declare const removeEventListener: (el: any, eventName: string, callback:
 export declare const shallowReady: (el: any | undefined) => Promise<any>;
 export declare const deepReady: (el: any | undefined, full?: boolean) => Promise<void>;
 export declare const waitForComponent: (el: HTMLElement | null) => Promise<void>;
-export declare const isChildOfEventTarget: (ev: any, el: HTMLElement, callback: () => void) => Promise<void>;
+export declare const isChildOfEventTarget: (ev: any, el: HTMLElement | Window | Document, callback: (target: HTMLElement) => void) => Promise<void>;
 export declare const waitForDesignSystem: (el: any | null, _config?: BalConfig) => Promise<void>;
 export declare const waitAfterFramePaint: () => Promise<unknown>;
 export declare const waitAfterIdleCallback: () => Promise<unknown>;

package/dist/types/utils/swiper/swiper.util.d.ts

@@ -21,7 +21,6 @@ export declare class SwiperUtil {
      * ------------------------------------------------------
      */
     connectedCallback(component: SwiperInterface): void;
-    componentDidLoad(): void;
     disconnectedCallback(): void;
     /**
      * EVENTS

package/dist/types/utils/visibility/index.d.ts

@@ -0,0 +1,2 @@
+export * from './visibility.interfaces';
+export * from './visibility.decorator';

package/dist/types/utils/visibility/visibility.decorator.d.ts

@@ -0,0 +1,3 @@
+import { ComponentInterface } from '../../stencil-public-runtime';
+import { BalVisibilityObserver } from './visibility.interfaces';
+export declare function ListenToVisibility(): (target: ComponentInterface & BalVisibilityObserver, _propertyKey: string, _descriptor: PropertyDescriptor) => void;

package/dist/types/utils/visibility/visibility.interfaces.d.ts

@@ -0,0 +1,4 @@
+export interface BalVisibilityObserver {
+    el: HTMLElement;
+    visibilityListener(): void;
+}

package/dist/types/utils/visibility/visibility.listener.d.ts

@@ -0,0 +1,9 @@
+import { ListenerAbstract } from '../types/listener';
+export declare class BalVisibilityListener extends ListenerAbstract {
+    private waitAfterFramePrint;
+    private intersectionObserver;
+    connect(el: HTMLElement): Promise<void>;
+    disconnect(): void;
+    private intersectionCallback;
+    private destroyMutationObserver;
+}

package/dist/types/utils/visibility/visibility.subject.d.ts

@@ -0,0 +1,9 @@
+import { SingleSubject } from '../types/signal';
+import { BalVisibilityObserver } from './visibility.interfaces';
+export declare class BalVisibilitySubject extends SingleSubject<BalVisibilityObserver> {
+    private listener?;
+    private debouncedNotify;
+    constructor();
+    attach(observer: BalVisibilityObserver): void;
+    detach(): void;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@baloise/ds-core",
-  "version": "17.2.4-nightly.20250114",
+  "version": "17.2.5",
   "description": "The Baloise Design-System is an open source project for styling awesome web applications that follow the Baloise corporate styling guidelines.",
   "repository": {
     "type": "git",
@@ -28,8 +28,8 @@
     "test:ui": "vitest --ui"
   },
   "dependencies": {
-    "@baloise/ds-styles": "17.2.4-nightly.20250114",
-    "@baloise/ds-icons": "17.2.4-nightly.20250114",
+    "@baloise/ds-styles": "17.2.5",
+    "@baloise/ds-icons": "17.2.5",
     "@baloise/web-app-utils": "3.15.0",
     "@floating-ui/dom": "~1.6.3",
     "@popperjs/core": "~2.11.4",
@@ -54,10 +54,10 @@
     "@baloise/output-target-react": "0.0.0",
     "@baloise/output-target-vue": "0.0.0",
     "@baloise/output-target-web": "0.0.0",
-    "@baloise/ds-css": "17.2.4-nightly.20250114",
-    "@baloise/ds-maps": "17.2.4-nightly.20250114",
-    "@baloise/ds-brand-icons": "17.2.4-nightly.20250114",
-    "@baloise/ds-favicons": "17.2.4-nightly.20250114"
+    "@baloise/ds-css": "17.2.5",
+    "@baloise/ds-maps": "17.2.5",
+    "@baloise/ds-brand-icons": "17.2.5",
+    "@baloise/ds-favicons": "17.2.5"
   },
   "sideEffects": false
 }

package/components/bal-app2.js

@@ -1,95 +0,0 @@
-import { proxyCustomElement, HTMLElement, 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 { k as debounce, p as rIC, m as rOnLoad } from './helpers.js';
-import { L as Logger } from './log.js';
-import { s as startFocusVisible } from './focus-visible.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 BalAppStyle0 = balAppCss;
-
-const App = /*@__PURE__*/ proxyCustomElement(class App extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.debouncedNotify = debounce(() => this.notifyResize(), 100);
-        this.notifyResize = async () => {
-            if (balBrowser.hasDocument && balBrowser.hasWindow) {
-                const doc = document.documentElement;
-                doc.style.setProperty('--bal-app-height', `${window.innerHeight}px`);
-            }
-        };
-        this.animated = true;
-        this.ready = false;
-    }
-    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');
-            }
-        });
-    }
-    disconnectedCallback() {
-        if (balBrowser.hasWindow) {
-            window.removeEventListener('resize', this.debouncedNotify);
-        }
-    }
-    async setFocus(elements) {
-        if (this.focusVisible) {
-            this.focusVisible.setFocus(elements);
-        }
-    }
-    render() {
-        return (h(Host, { key: '29fef05a451290e2e20dc6808d1cce03ec1b1c4c', class: {
-                'bal-app': true,
-                'bal-app--safari': balBrowser.isSafari,
-                'bal-app--touch': balDevice.hasTouchScreen,
-            } }, h("slot", { key: 'd54179394cb4d9882647d497e09495193d57a12d' })));
-    }
-    get el() { return this; }
-    static get style() { return BalAppStyle0; }
-}, [4, "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-doc-app.d.ts

@@ -1,11 +0,0 @@
-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;