@baloise/ds-core 16.5.2-nightly.20241016 → 16.6.0

package/components/all.d.ts

@@ -28,7 +28,6 @@ import { BalDateCalendar, defineCustomElement as defineBalDateCalendar } from '.
 import { BalDateCalendarCell, defineCustomElement as defineBalDateCalendarCell } from './bal-date-calendar-cell'
 import { BalDatepicker, defineCustomElement as defineBalDatepicker } from './bal-datepicker'
 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'
@@ -147,7 +146,6 @@ export { BalDateCalendar, defineBalDateCalendar }
 export { BalDateCalendarCell, defineBalDateCalendarCell }
 export { BalDatepicker, defineBalDatepicker }
 export { BalDivider, defineBalDivider }
-export { BalDocApp, defineBalDocApp }
 export { BalDropdown, defineBalDropdown }
 export { BalField, defineBalField }
 export { BalFieldControl, defineBalFieldControl }

package/components/all.js

@@ -28,7 +28,6 @@ import { BalDateCalendar, defineCustomElement as defineBalDateCalendar } from '.
 import { BalDateCalendarCell, defineCustomElement as defineBalDateCalendarCell } from './bal-date-calendar-cell'
 import { BalDatepicker, defineCustomElement as defineBalDatepicker } from './bal-datepicker'
 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'
@@ -147,7 +146,6 @@ export { BalDateCalendar, defineBalDateCalendar }
 export { BalDateCalendarCell, defineBalDateCalendarCell }
 export { BalDatepicker, defineBalDatepicker }
 export { BalDivider, defineBalDivider }
-export { BalDocApp, defineBalDocApp }
 export { BalDropdown, defineBalDropdown }
 export { BalField, defineBalField }
 export { BalFieldControl, defineBalFieldControl }
@@ -267,7 +265,6 @@ export const defineAllComponents = () => {
   defineBalDateCalendarCell()
   defineBalDatepicker()
   defineBalDivider()
-  defineBalDocApp()
   defineBalDropdown()
   defineBalField()
   defineBalFieldControl()

package/components/bal-app.js

@@ -1,4 +1,88 @@
-import { A as App, d as defineCustomElement$1 } from './bal-app2.js';
+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 { h as debounce, k as rIC } 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;display:block}";
+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() {
+        updateBalAnimated(this.animated);
+        if (balBrowser.hasWindow) {
+            window.addEventListener('resize', this.debouncedNotify);
+            this.debouncedNotify();
+        }
+    }
+    componentDidLoad() {
+        rIC(async () => {
+            this.ready = true;
+            startFocusVisible();
+        });
+    }
+    disconnectedCallback() {
+        if (balBrowser.hasWindow) {
+            window.removeEventListener('resize', this.debouncedNotify);
+        }
+    }
+    async setFocus(elements) {
+        if (this.focusVisible) {
+            this.focusVisible.setFocus(elements);
+        }
+    }
+    render() {
+        return (h(Host, { class: {
+                'bal-app': true,
+                'bal-app--safari': balBrowser.isSafari,
+                'bal-app--touch': balDevice.hasTouchScreen,
+            } }, h("slot", null)));
+    }
+    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$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;
+    } });
+}
 
 const BalApp = App;
 const defineCustomElement = defineCustomElement$1;

package/components/bal-divider.js

@@ -3,7 +3,7 @@ import { _ as __decorate, a as __metadata } from './tslib.es6.js';
 import { B as BEM } from './bem.js';
 import { L as Logger } from './log.js';
 
-const balDividerCss = ":root{--bal-divider-border-width:var(--bal-border-width-normal);--bal-divider-background-primary:var(--bal-color-border-primary);--bal-divider-background-primary-light:var(--bal-color-border-primary-light);--bal-divider-background-primary-dark:var(--bal-color-border-primary-pressed);--bal-divider-background-grey-light:var(--bal-color-border-divider);--bal-divider-background-grey:var(--bal-color-border);--bal-divider-background-grey-dark:var(--bal-color-border-grey-dark);--bal-divider-background-warning:var(--bal-color-border-warning);--bal-divider-background-success:var(--bal-color-border-success);--bal-divider-background-danger:var(--bal-color-border-danger);--bal-divider-background-danger-dark:var(--bal-color-border-danger-hovered);--bal-divider-background-danger-darker:var(--bal-color-border-danger-pressed);--bal-divider-background-white:var(--bal-color-border-inverted);--bal-divider-background-light-blue:var(--bal-color-border-primary-hovered);--bal-divider-radius:var(--bal-radius-rounded)}.bal-divider{margin:0;display:block;border-radius:var(--bal-divider-radius)}.bal-divider--color-primary{background:var(--bal-divider-background-primary)}.bal-divider--color-primary-light{background:var(--bal-divider-background-primary-light)}.bal-divider--color-primary-dark{background:var(--bal-divider-background-primary-dark)}.bal-divider--color-grey-light{background:var(--bal-divider-background-grey-light)}.bal-divider--color-grey{background:var(--bal-divider-background-grey)}.bal-divider--color-grey-dark{background:var(--bal-divider-background-grey-dark)}.bal-divider--color-warning{background:var(--bal-divider-background-warning)}.bal-divider--color-success{background:var(--bal-divider-background-success)}.bal-divider--color-danger{background:var(--bal-divider-background-danger)}.bal-divider--color-danger-dark{background:var(--bal-divider-background-danger-dark)}.bal-divider--color-danger-darker{background:var(--bal-divider-background-danger-darker)}.bal-divider--color-white{background:var(--bal-divider-background-white)}.bal-divider--color-light-blue{background:var(--bal-divider-background-light-blue)}.bal-divider--layout-horizontal{-ms-flex:1 0 100%;flex:1 0 100%;width:100%;min-height:var(--bal-divider-border-width);height:var(--bal-divider-border-width)}.bal-divider--layout-vertical{height:auto;-ms-flex-negative:0;flex-shrink:0;-ms-flex-item-align:stretch;align-self:stretch;width:var(--bal-divider-border-width)}.bal-divider--space-none{margin:0}.bal-divider--space-xx-small{margin:var(--bal-space-xx-small) 0}@media screen and (min-width: 769px),print{.bal-divider--space-xx-small{margin:var(--bal-space-xx-small-tablet) 0}}@media screen and (min-width: 1024px){.bal-divider--space-xx-small{margin:var(--bal-space-xx-small-desktop) 0}}.bal-divider--space-x-small{margin:var(--bal-space-x-small) 0}@media screen and (min-width: 769px),print{.bal-divider--space-x-small{margin:var(--bal-space-x-small-tablet) 0}}@media screen and (min-width: 1024px){.bal-divider--space-x-small{margin:var(--bal-space-x-small-desktop) 0}}.bal-divider--space-small{margin:var(--bal-space-small) 0}@media screen and (min-width: 769px),print{.bal-divider--space-small{margin:var(--bal-space-small-tablet) 0}}@media screen and (min-width: 1024px){.bal-divider--space-small{margin:var(--bal-space-small-desktop) 0}}.bal-divider--space-normal{margin:var(--bal-space-normal) 0}@media screen and (min-width: 769px),print{.bal-divider--space-normal{margin:var(--bal-space-normal-tablet) 0}}@media screen and (min-width: 1024px){.bal-divider--space-normal{margin:var(--bal-space-normal-desktop) 0}}.bal-divider--space-medium{margin:var(--bal-space-medium) 0}@media screen and (min-width: 769px),print{.bal-divider--space-medium{margin:var(--bal-space-medium-tablet) 0}}@media screen and (min-width: 1024px){.bal-divider--space-medium{margin:var(--bal-space-medium-desktop) 0}}.bal-divider--space-large{margin:var(--bal-space-large) 0}@media screen and (min-width: 769px),print{.bal-divider--space-large{margin:var(--bal-space-large-tablet) 0}}@media screen and (min-width: 1024px){.bal-divider--space-large{margin:var(--bal-space-large-desktop) 0}}.bal-divider--space-x-large{margin:var(--bal-space-x-large) 0}@media screen and (min-width: 769px),print{.bal-divider--space-x-large{margin:var(--bal-space-x-large-tablet) 0}}@media screen and (min-width: 1024px){.bal-divider--space-x-large{margin:var(--bal-space-x-large-desktop) 0}}.bal-divider--space-xx-large{margin:var(--bal-space-xx-large) 0}@media screen and (min-width: 769px),print{.bal-divider--space-xx-large{margin:var(--bal-space-xx-large-tablet) 0}}@media screen and (min-width: 1024px){.bal-divider--space-xx-large{margin:var(--bal-space-xx-large-desktop) 0}}.bal-divider--space-xxx-large{margin:var(--bal-space-xxx-large) 0}@media screen and (min-width: 769px),print{.bal-divider--space-xxx-large{margin:var(--bal-space-xxx-large-tablet) 0}}@media screen and (min-width: 1024px){.bal-divider--space-xxx-large{margin:var(--bal-space-xxx-large-desktop) 0}}.bal-divider--layout-vertical.bal-divider--space-none{margin:0}.bal-divider--layout-vertical.bal-divider--space-xx-small{margin:0 var(--bal-space-xx-small)}@media screen and (min-width: 769px),print{.bal-divider--layout-vertical.bal-divider--space-xx-small{margin:0 var(--bal-space-xx-small-tablet)}}@media screen and (min-width: 1024px){.bal-divider--layout-vertical.bal-divider--space-xx-small{margin:0 var(--bal-space-xx-small-desktop)}}.bal-divider--layout-vertical.bal-divider--space-x-small{margin:0 var(--bal-space-x-small)}@media screen and (min-width: 769px),print{.bal-divider--layout-vertical.bal-divider--space-x-small{margin:0 var(--bal-space-x-small-tablet)}}@media screen and (min-width: 1024px){.bal-divider--layout-vertical.bal-divider--space-x-small{margin:0 var(--bal-space-x-small-desktop)}}.bal-divider--layout-vertical.bal-divider--space-small{margin:0 var(--bal-space-small)}@media screen and (min-width: 769px),print{.bal-divider--layout-vertical.bal-divider--space-small{margin:0 var(--bal-space-small-tablet)}}@media screen and (min-width: 1024px){.bal-divider--layout-vertical.bal-divider--space-small{margin:0 var(--bal-space-small-desktop)}}.bal-divider--layout-vertical.bal-divider--space-normal{margin:0 var(--bal-space-normal)}@media screen and (min-width: 769px),print{.bal-divider--layout-vertical.bal-divider--space-normal{margin:0 var(--bal-space-normal-tablet)}}@media screen and (min-width: 1024px){.bal-divider--layout-vertical.bal-divider--space-normal{margin:0 var(--bal-space-normal-desktop)}}.bal-divider--layout-vertical.bal-divider--space-medium{margin:0 var(--bal-space-medium)}@media screen and (min-width: 769px),print{.bal-divider--layout-vertical.bal-divider--space-medium{margin:0 var(--bal-space-medium-tablet)}}@media screen and (min-width: 1024px){.bal-divider--layout-vertical.bal-divider--space-medium{margin:0 var(--bal-space-medium-desktop)}}.bal-divider--layout-vertical.bal-divider--space-large{margin:0 var(--bal-space-large)}@media screen and (min-width: 769px),print{.bal-divider--layout-vertical.bal-divider--space-large{margin:0 var(--bal-space-large-tablet)}}@media screen and (min-width: 1024px){.bal-divider--layout-vertical.bal-divider--space-large{margin:0 var(--bal-space-large-desktop)}}.bal-divider--layout-vertical.bal-divider--space-x-large{margin:0 var(--bal-space-x-large)}@media screen and (min-width: 769px),print{.bal-divider--layout-vertical.bal-divider--space-x-large{margin:0 var(--bal-space-x-large-tablet)}}@media screen and (min-width: 1024px){.bal-divider--layout-vertical.bal-divider--space-x-large{margin:0 var(--bal-space-x-large-desktop)}}.bal-divider--layout-vertical.bal-divider--space-xx-large{margin:0 var(--bal-space-xx-large)}@media screen and (min-width: 769px),print{.bal-divider--layout-vertical.bal-divider--space-xx-large{margin:0 var(--bal-space-xx-large-tablet)}}@media screen and (min-width: 1024px){.bal-divider--layout-vertical.bal-divider--space-xx-large{margin:0 var(--bal-space-xx-large-desktop)}}.bal-divider--layout-vertical.bal-divider--space-xxx-large{margin:0 var(--bal-space-xxx-large)}@media screen and (min-width: 769px),print{.bal-divider--layout-vertical.bal-divider--space-xxx-large{margin:0 var(--bal-space-xxx-large-tablet)}}@media screen and (min-width: 1024px){.bal-divider--layout-vertical.bal-divider--space-xxx-large{margin:0 var(--bal-space-xxx-large-desktop)}}";
+const balDividerCss = ":root{--bal-divider-border-width:var(--bal-border-width-normal);--bal-divider-background-primary:var(--bal-color-border-primary);--bal-divider-background-primary-light:var(--bal-color-border-primary-light);--bal-divider-background-primary-dark:var(--bal-color-border-primary-pressed);--bal-divider-background-grey-light:var(--bal-color-border-divider);--bal-divider-background-grey:var(--bal-color-border);--bal-divider-background-grey-dark:var(--bal-color-border-grey-dark);--bal-divider-background-warning:var(--bal-color-border-warning);--bal-divider-background-success:var(--bal-color-border-success);--bal-divider-background-danger:var(--bal-color-border-danger);--bal-divider-background-danger-dark:var(--bal-color-border-danger-hovered);--bal-divider-background-danger-darker:var(--bal-color-border-danger-pressed);--bal-divider-background-white:var(--bal-color-border-inverted);--bal-divider-background-light-blue:var(--bal-color-border-primary-hovered);--bal-divider-radius:var(--bal-radius-rounded)}.bal-divider{margin:0;display:block;border-radius:var(--bal-divider-radius)}.bal-divider--color-primary{background:var(--bal-divider-background-primary)}.bal-divider--color-primary-light{background:var(--bal-divider-background-primary-light)}.bal-divider--color-primary-dark{background:var(--bal-divider-background-primary-dark)}.bal-divider--color-grey-light{background:var(--bal-divider-background-grey-light)}.bal-divider--color-grey{background:var(--bal-divider-background-grey)}.bal-divider--color-grey-dark{background:var(--bal-divider-background-grey-dark)}.bal-divider--color-warning{background:var(--bal-divider-background-warning)}.bal-divider--color-success{background:var(--bal-divider-background-success)}.bal-divider--color-danger{background:var(--bal-divider-background-danger)}.bal-divider--color-danger-dark{background:var(--bal-divider-background-danger-dark)}.bal-divider--color-danger-darker{background:var(--bal-divider-background-danger-darker)}.bal-divider--color-white{background:var(--bal-divider-background-white)}.bal-divider--color-light-blue{background:var(--bal-divider-background-light-blue)}.bal-divider--layout-horizontal{-ms-flex:1 0 100%;flex:1 0 100%;width:100%;min-height:var(--bal-divider-border-width);height:var(--bal-divider-border-width)}.bal-divider--layout-vertical{height:auto;-ms-flex-negative:0;flex-shrink:0;-ms-flex-item-align:stretch;align-self:stretch;width:var(--bal-divider-border-width)}.bal-divider--border-style-dashed.bal-divider--color-primary{background:repeating-linear-gradient(90deg, var(--bal-divider-background-primary) 0px, var(--bal-divider-background-grey) 8px, transparent 8px, transparent 16px)}.bal-divider--border-style-dashed.bal-divider--color-primary-light{background:repeating-linear-gradient(90deg, var(--bal-divider-background-primary-light) 0px, var(--bal-divider-background-grey) 8px, transparent 8px, transparent 16px)}.bal-divider--border-style-dashed.bal-divider--color-primary-dark{background:repeating-linear-gradient(90deg, var(--bal-divider-background-primary-dark) 0px, var(--bal-divider-background-grey) 8px, transparent 8px, transparent 16px)}.bal-divider--border-style-dashed.bal-divider--color-grey-light{background:repeating-linear-gradient(90deg, var(--bal-divider-background-grey-light) 0px, var(--bal-divider-background-grey) 8px, transparent 8px, transparent 16px)}.bal-divider--border-style-dashed.bal-divider--color-grey{background:repeating-linear-gradient(90deg, var(--bal-divider-background-grey) 0px, var(--bal-divider-background-grey) 8px, transparent 8px, transparent 16px)}.bal-divider--border-style-dashed.bal-divider--color-grey-dark{background:repeating-linear-gradient(90deg, var(--bal-divider-background-grey-dark) 0px, var --bal-divider-background-grey 8px, transparent 8px, transparent 16px)}.bal-divider--border-style-dashed.bal-divider--color-warning{background:repeating-linear-gradient(90deg, var(--bal-divider-background-warning) 0px, var(--bal-divider-background-grey) 8px, transparent 8px, transparent 16px)}.bal-divider--border-style-dashed.bal-divider--color-success{background:repeating-linear-gradient(90deg, var(--bal-divider-background-success) 0px, var(--bal-divider-background-grey) 8px, transparent 8px, transparent 16px)}.bal-divider--border-style-dashed.bal-divider--color-danger{background:repeating-linear-gradient(90deg, var(--bal-divider-background-danger) 0px, var(--bal-divider-background-grey) 8px, transparent 8px, transparent 16px)}.bal-divider--border-style-dashed.bal-divider--color-danger-dark{background:repeating-linear-gradient(90deg, var(--bal-divider-background-danger-dark) 0px, var(--bal-divider-background-grey) 8px, transparent 8px, transparent 16px)}.bal-divider--border-style-dashed.bal-divider--color-danger-darker{background:repeating-linear-gradient(90deg, var(--bal-divider-background-danger-darker) 0px, var(--bal-divider-background-grey) 8px, transparent 8px, transparent 16px)}.bal-divider--border-style-dashed.bal-divider--color-white{background:repeating-linear-gradient(90deg, var(--bal-divider-background-white) 0px, var(--bal-divider-background-grey) 8px, transparent 8px, transparent 16px)}.bal-divider--border-style-dashed.bal-divider--color-light-blue{background:repeating-linear-gradient(90deg, var(--bal-divider-background-light-blue) 0px, var(--bal-divider-background-grey) 8px, transparent 8px, transparent 16px)}.bal-divider--space-none{margin:0}.bal-divider--space-xx-small{margin:var(--bal-space-xx-small) 0}@media screen and (min-width: 769px),print{.bal-divider--space-xx-small{margin:var(--bal-space-xx-small-tablet) 0}}@media screen and (min-width: 1024px){.bal-divider--space-xx-small{margin:var(--bal-space-xx-small-desktop) 0}}.bal-divider--space-x-small{margin:var(--bal-space-x-small) 0}@media screen and (min-width: 769px),print{.bal-divider--space-x-small{margin:var(--bal-space-x-small-tablet) 0}}@media screen and (min-width: 1024px){.bal-divider--space-x-small{margin:var(--bal-space-x-small-desktop) 0}}.bal-divider--space-small{margin:var(--bal-space-small) 0}@media screen and (min-width: 769px),print{.bal-divider--space-small{margin:var(--bal-space-small-tablet) 0}}@media screen and (min-width: 1024px){.bal-divider--space-small{margin:var(--bal-space-small-desktop) 0}}.bal-divider--space-normal{margin:var(--bal-space-normal) 0}@media screen and (min-width: 769px),print{.bal-divider--space-normal{margin:var(--bal-space-normal-tablet) 0}}@media screen and (min-width: 1024px){.bal-divider--space-normal{margin:var(--bal-space-normal-desktop) 0}}.bal-divider--space-medium{margin:var(--bal-space-medium) 0}@media screen and (min-width: 769px),print{.bal-divider--space-medium{margin:var(--bal-space-medium-tablet) 0}}@media screen and (min-width: 1024px){.bal-divider--space-medium{margin:var(--bal-space-medium-desktop) 0}}.bal-divider--space-large{margin:var(--bal-space-large) 0}@media screen and (min-width: 769px),print{.bal-divider--space-large{margin:var(--bal-space-large-tablet) 0}}@media screen and (min-width: 1024px){.bal-divider--space-large{margin:var(--bal-space-large-desktop) 0}}.bal-divider--space-x-large{margin:var(--bal-space-x-large) 0}@media screen and (min-width: 769px),print{.bal-divider--space-x-large{margin:var(--bal-space-x-large-tablet) 0}}@media screen and (min-width: 1024px){.bal-divider--space-x-large{margin:var(--bal-space-x-large-desktop) 0}}.bal-divider--space-xx-large{margin:var(--bal-space-xx-large) 0}@media screen and (min-width: 769px),print{.bal-divider--space-xx-large{margin:var(--bal-space-xx-large-tablet) 0}}@media screen and (min-width: 1024px){.bal-divider--space-xx-large{margin:var(--bal-space-xx-large-desktop) 0}}.bal-divider--space-xxx-large{margin:var(--bal-space-xxx-large) 0}@media screen and (min-width: 769px),print{.bal-divider--space-xxx-large{margin:var(--bal-space-xxx-large-tablet) 0}}@media screen and (min-width: 1024px){.bal-divider--space-xxx-large{margin:var(--bal-space-xxx-large-desktop) 0}}.bal-divider--layout-vertical.bal-divider--space-none{margin:0}.bal-divider--layout-vertical.bal-divider--space-xx-small{margin:0 var(--bal-space-xx-small)}@media screen and (min-width: 769px),print{.bal-divider--layout-vertical.bal-divider--space-xx-small{margin:0 var(--bal-space-xx-small-tablet)}}@media screen and (min-width: 1024px){.bal-divider--layout-vertical.bal-divider--space-xx-small{margin:0 var(--bal-space-xx-small-desktop)}}.bal-divider--layout-vertical.bal-divider--space-x-small{margin:0 var(--bal-space-x-small)}@media screen and (min-width: 769px),print{.bal-divider--layout-vertical.bal-divider--space-x-small{margin:0 var(--bal-space-x-small-tablet)}}@media screen and (min-width: 1024px){.bal-divider--layout-vertical.bal-divider--space-x-small{margin:0 var(--bal-space-x-small-desktop)}}.bal-divider--layout-vertical.bal-divider--space-small{margin:0 var(--bal-space-small)}@media screen and (min-width: 769px),print{.bal-divider--layout-vertical.bal-divider--space-small{margin:0 var(--bal-space-small-tablet)}}@media screen and (min-width: 1024px){.bal-divider--layout-vertical.bal-divider--space-small{margin:0 var(--bal-space-small-desktop)}}.bal-divider--layout-vertical.bal-divider--space-normal{margin:0 var(--bal-space-normal)}@media screen and (min-width: 769px),print{.bal-divider--layout-vertical.bal-divider--space-normal{margin:0 var(--bal-space-normal-tablet)}}@media screen and (min-width: 1024px){.bal-divider--layout-vertical.bal-divider--space-normal{margin:0 var(--bal-space-normal-desktop)}}.bal-divider--layout-vertical.bal-divider--space-medium{margin:0 var(--bal-space-medium)}@media screen and (min-width: 769px),print{.bal-divider--layout-vertical.bal-divider--space-medium{margin:0 var(--bal-space-medium-tablet)}}@media screen and (min-width: 1024px){.bal-divider--layout-vertical.bal-divider--space-medium{margin:0 var(--bal-space-medium-desktop)}}.bal-divider--layout-vertical.bal-divider--space-large{margin:0 var(--bal-space-large)}@media screen and (min-width: 769px),print{.bal-divider--layout-vertical.bal-divider--space-large{margin:0 var(--bal-space-large-tablet)}}@media screen and (min-width: 1024px){.bal-divider--layout-vertical.bal-divider--space-large{margin:0 var(--bal-space-large-desktop)}}.bal-divider--layout-vertical.bal-divider--space-x-large{margin:0 var(--bal-space-x-large)}@media screen and (min-width: 769px),print{.bal-divider--layout-vertical.bal-divider--space-x-large{margin:0 var(--bal-space-x-large-tablet)}}@media screen and (min-width: 1024px){.bal-divider--layout-vertical.bal-divider--space-x-large{margin:0 var(--bal-space-x-large-desktop)}}.bal-divider--layout-vertical.bal-divider--space-xx-large{margin:0 var(--bal-space-xx-large)}@media screen and (min-width: 769px),print{.bal-divider--layout-vertical.bal-divider--space-xx-large{margin:0 var(--bal-space-xx-large-tablet)}}@media screen and (min-width: 1024px){.bal-divider--layout-vertical.bal-divider--space-xx-large{margin:0 var(--bal-space-xx-large-desktop)}}.bal-divider--layout-vertical.bal-divider--space-xxx-large{margin:0 var(--bal-space-xxx-large)}@media screen and (min-width: 769px),print{.bal-divider--layout-vertical.bal-divider--space-xxx-large{margin:0 var(--bal-space-xxx-large-tablet)}}@media screen and (min-width: 1024px){.bal-divider--layout-vertical.bal-divider--space-xxx-large{margin:0 var(--bal-space-xxx-large-desktop)}}";
 const BalDividerStyle0 = balDividerCss;
 
 const Divider = /*@__PURE__*/ proxyCustomElement(class Divider extends HTMLElement {
@@ -13,6 +13,7 @@ const Divider = /*@__PURE__*/ proxyCustomElement(class Divider extends HTMLEleme
         this.layout = 'horizontal';
         this.space = 'none';
         this.color = 'grey';
+        this.borderStyle = 'solid';
     }
     createLogger(log) {
         this.log = log;
@@ -26,13 +27,15 @@ const Divider = /*@__PURE__*/ proxyCustomElement(class Divider extends HTMLEleme
         const layout = !!this.layout;
         const space = !!this.space;
         const color = !!this.color;
-        return (h(Host, { role: "separator", class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`layout-${this.layout}`).class(layout)), block.modifier(`space-${this.space}`).class(space)), block.modifier(`color-${this.color}`).class(color)) }, h("slot", null)));
+        const borderStyle = !!this.borderStyle;
+        return (h(Host, { role: "separator", class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`layout-${this.layout}`).class(layout)), block.modifier(`space-${this.space}`).class(space)), block.modifier(`color-${this.color}`).class(color)), block.modifier(`border-style-${this.borderStyle}`).class(borderStyle)) }, h("slot", null)));
     }
     static get style() { return BalDividerStyle0; }
 }, [4, "bal-divider", {
         "layout": [1],
         "space": [1],
-        "color": [1]
+        "color": [1],
+        "borderStyle": [1, "border-style"]
     }]);
 __decorate([
     Logger('bal-divider'),

package/components/index.js

@@ -1,3 +1,4 @@
+import { setPlatformHelpers } from '@stencil/core/internal/client';
 export { getAssetPath, setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
 export { F as FileUploadRejectionReason } from './bal-file-upload.type.js';
 export { i as i18nBalDate } from './bal-date.i18n.js';
@@ -6,7 +7,10 @@ export { i as i18nBalDatepicker } from './bal-datepicker.i18n.js';
 export { i as i18nBalTimeInput } from './bal-time-input.i18n.js';
 export { i as i18nBalInputStepper } from './bal-input-stepper.i18n.js';
 export { i as i18nBalLabel } from './bal-label.i18n.js';
-export { a as BalSnackbarController, B as BalToastController, c as balSnackbarController, b as balToastController, i as initialize, i as initializeBaloiseDesignSystem, s as setupConfig } from './initialize.js';
+import { b as balBrowser } from './browser.js';
+export { b as balBrowser } from './browser.js';
+import { d as defaultConfig } from './config.default.js';
+export { d as defaultConfig } from './config.default.js';
 export { n as newBalOption } from './option.js';
 export { n as newBalStepOption } from './bal-step.util.js';
 export { n as newBalTabOption } from './bal-tab.util.js';
@@ -14,8 +18,6 @@ import { g as getAppRoot, c as componentOnReady } from './helpers.js';
 export { c as componentOnReady, e as deepReady, g as getAppRoot, i as isDescendant, s as shallowReady, f as wait, b as waitAfterFramePaint, d as waitAfterIdleCallback, w as waitForComponent, a as waitForDesignSystem } from './helpers.js';
 export { s as scrollToFirstInvalidField } from './form.js';
 export { B as BalScrollHandler } from './scroll.js';
-import { b as balBrowser } from './browser.js';
-export { b as balBrowser } from './browser.js';
 import { b as balDevice } from './device.js';
 export { B as BalDevice, b as balDevice } from './device.js';
 export { I as INVALID_VALUE } from './mask-util.js';
@@ -23,11 +25,160 @@ import { g as getOverlays, a as getOverlay } from './overlays.js';
 import { B as BalWindowResizeListener, b as balBreakpoints } from './breakpoints.subject.js';
 export { c as BalBreakpointSubject, d as BalBreakpointsUtil, a as balBreakpointSubject, b as balBreakpoints } from './breakpoints.subject.js';
 export { a as attachToConfig, d as detachFromConfig, o as onBalConfigChange, u as updateBalAllowedLanguages, b as updateBalAnimated, c as updateBalIcons, e as updateBalLanguage, f as updateBalRegion, g as useBalConfig } from './config.utils.js';
-export { d as defaultConfig } from './config.default.js';
 import { S as Subject } from './listener.js';
 export { B as BalSwipeSubject } from './swipe.subject.js';
 export { B as BalDate } from './date.js';
 
+const BALOISE_SESSION_KEY = 'baloise-persist-config';
+
+class Config {
+    constructor() {
+        this._componentObservers = [];
+        this._observers = [];
+        this._config = defaultConfig;
+    }
+    get locale() {
+        return `${this._config.language}-${this._config.region}`;
+    }
+    get region() {
+        return this._config.region;
+    }
+    set region(region) {
+        if (region !== this._config.region) {
+            this._config.region = region;
+            this._notify();
+        }
+    }
+    get language() {
+        return this._config.language;
+    }
+    set language(language) {
+        if (language !== this._config.language) {
+            if (this._config.allowedLanguages.includes(language)) {
+                this._config.language = language;
+            }
+            else {
+                this._config.language = this._config.fallbackLanguage;
+            }
+            this._notify();
+        }
+    }
+    get allowedLanguages() {
+        return this._config.allowedLanguages;
+    }
+    set allowedLanguages(allowedLanguages) {
+        if (allowedLanguages !== this._config.allowedLanguages) {
+            this._config.allowedLanguages = allowedLanguages;
+            this._notify();
+        }
+    }
+    get icons() {
+        return this._config.icons;
+    }
+    set icons(icons) {
+        this._config.icons = Object.assign(Object.assign({}, this._config.icons), icons);
+        this._notify();
+    }
+    get logger() {
+        return this._config.logger;
+    }
+    set logger(logger) {
+        this._config.logger = Object.assign({}, logger);
+        this._notify();
+    }
+    get animated() {
+        return this._config.animated;
+    }
+    set animated(animated) {
+        this._config.animated = animated;
+        this._notify();
+    }
+    get httpFormSubmit() {
+        return this._config.httpFormSubmit;
+    }
+    set httpFormSubmit(httpFormSubmit) {
+        this._config.httpFormSubmit = httpFormSubmit;
+        this._notify();
+    }
+    attach(observer) {
+        const isExist = this._observers.includes(observer);
+        if (isExist) {
+            return console.log('Subject: Observer has been attached already.');
+        }
+        this._observers.push(observer);
+        observer.configChanged(this._config);
+    }
+    detach(observer) {
+        const observerIndex = this._observers.indexOf(observer);
+        if (observerIndex === -1) {
+            return console.log('Subject: Nonexistent observer.');
+        }
+        this._observers.splice(observerIndex, 1);
+    }
+    attachComponent(observer) {
+        const isExist = this._componentObservers.includes(observer);
+        if (isExist) {
+            return console.log('Subject: Observer has been attached already.');
+        }
+        this._componentObservers.push(observer);
+        observer.configChanged(this._config);
+    }
+    detachComponent(observer) {
+        const observerIndex = this._componentObservers.indexOf(observer);
+        if (observerIndex === -1) {
+            return console.log('Subject: Nonexistent observer.');
+        }
+        this._componentObservers.splice(observerIndex, 1);
+    }
+    toString() {
+        return JSON.stringify(this._config);
+    }
+    reset(config) {
+        this._config = Object.assign(Object.assign(Object.assign({}, this._config), config), { icons: Object.assign(Object.assign({}, this._config.icons), config.icons) });
+        this._notify(false);
+    }
+    _notify(all = true) {
+        for (const observer of this._componentObservers) {
+            observer.configChanged(this._config);
+        }
+        if (all) {
+            for (const observer of this._observers) {
+                observer.configChanged(this._config);
+            }
+        }
+        if (balBrowser.hasWindow) {
+            saveConfig(window, this._config);
+        }
+    }
+}
+const config = /*@__PURE__*/ new Config();
+const configFromSession = (win) => {
+    try {
+        const configStr = win.sessionStorage.getItem(BALOISE_SESSION_KEY);
+        return configStr !== null ? JSON.parse(configStr) : {};
+    }
+    catch (e) {
+        return {};
+    }
+};
+const saveConfig = (win, c) => {
+    try {
+        win.sessionStorage.setItem(BALOISE_SESSION_KEY, JSON.stringify(c));
+    }
+    catch (e) {
+        return;
+    }
+};
+
+const setupConfig = (userConfig = {}, win = {}) => {
+    if (Object.keys(win).length === 0 && balBrowser.hasWindow) {
+        win = window;
+    }
+    win.BaloiseDesignSystem = win.BaloiseDesignSystem || {};
+    config.reset(Object.assign(Object.assign(Object.assign({}, configFromSession(win)), userConfig), { icons: Object.assign(Object.assign({}, configFromSession(win).icons), userConfig.icons) }));
+    win.BaloiseDesignSystem.config = config;
+};
+
 const i18nBalFieldLabel = {
     de: {
         optional: ' (optional)',
@@ -61,6 +212,139 @@ const i18nBalFieldLabel = {
     },
 };
 
+class BalNoticeController {
+    constructor(options) {
+        this.options = options;
+        this.container = null;
+        this.queue = [];
+        this.preQueue = [];
+        this.queueLimit = 5;
+    }
+    create(options) {
+        if (balBrowser.hasDocument) {
+            this.setupContainer();
+            const clone = this.findClone(options);
+            if (clone === undefined) {
+                const el = document.createElement(this.options.tag);
+                Object.assign(el, options);
+                el.addEventListener('balClose', ev => {
+                    this.removeFromQueue(ev.detail);
+                });
+                this.preQueue.push(el);
+                this.updateQueue();
+                return el;
+            }
+            return clone;
+        }
+    }
+    setQueue(queueLimit) {
+        this.queueLimit = queueLimit;
+    }
+    async dismissAll() {
+        var _a;
+        const elements = (_a = this.container) === null || _a === void 0 ? void 0 : _a.querySelectorAll(this.options.tag);
+        if (elements) {
+            const closingQueue = [];
+            for (let index = 0; index < elements.length; index++) {
+                const el = elements[index];
+                if (el.close) {
+                    closingQueue.push(el.close());
+                }
+            }
+            await Promise.all(closingQueue);
+        }
+    }
+    /**
+     * @deprecated use dismissAll instead
+     */
+    async clearAll() {
+        console.warn('[DEPRECATED] - use dismissAll() instead');
+        return this.dismissAll();
+    }
+    findClone(options) {
+        for (let index = 0; index < this.queue.length; index++) {
+            const el = this.queue[index];
+            if (el.message === options.message && el.color === options.color) {
+                return el;
+            }
+        }
+        return undefined;
+    }
+    setupContainer() {
+        if (balBrowser.hasDocument) {
+            const containerId = `${this.options.tag}-container`;
+            this.container = document.getElementById(containerId);
+            if (this.container)
+                return;
+            if (!this.container) {
+                this.container = document.createElement('bal-notices');
+                this.container.setAttribute('interface', this.options.tag.replace('bal-', ''));
+                this.container.id = containerId;
+            }
+            document.body.appendChild(this.container);
+        }
+    }
+    updateQueue() {
+        var _a;
+        if (this.queue.length < this.queueLimit) {
+            const el = this.preQueue.shift();
+            if (el && this.container) {
+                this.queue.push(el);
+                this.container.insertAdjacentElement('beforeend', el);
+            }
+        }
+        if (this.queue.length === 0) {
+            (_a = this.container) === null || _a === void 0 ? void 0 : _a.remove();
+        }
+    }
+    removeFromQueue(toastId) {
+        this.queue = this.queue.filter(el => el.id !== toastId);
+        setTimeout(() => this.updateQueue(), 0);
+    }
+}
+
+class BalToastController extends BalNoticeController {
+    constructor() {
+        super({
+            tag: 'bal-toast',
+        });
+    }
+    create(options) {
+        return super.create(options);
+    }
+}
+const balToastController = new BalToastController();
+
+class BalSnackbarController extends BalNoticeController {
+    constructor() {
+        super({
+            tag: 'bal-snackbar',
+        });
+    }
+    create(options) {
+        return super.create(options);
+    }
+}
+const balSnackbarController = new BalSnackbarController();
+
+// generated by .build/version.js
+const VERSION = '16.6.0';
+
+const initializeBaloiseDesignSystem = (userConfig = {}, platformConfig = undefined, win = {}) => {
+    if (Object.keys(win).length === 0 && balBrowser.hasWindow) {
+        win = window;
+    }
+    win.BaloiseDesignSystem = win.BaloiseDesignSystem || {};
+    if (platformConfig) {
+        setPlatformHelpers(platformConfig);
+    }
+    setupConfig(Object.assign(Object.assign({}, userConfig), platformConfig), win);
+    win.BaloiseDesignSystem.toastController = balToastController;
+    win.BaloiseDesignSystem.snackbarController = balSnackbarController;
+    win.BaloiseDesignSystem.initialize = () => setupConfig(win.BaloiseDesignSystem.config, win);
+    win.BaloiseDesignSystem.version = VERSION;
+};
+
 const newBalCheckboxOption = (option) => {
     return Object.assign(Object.assign({ interface: 'checkbox', labelHidden: false, flat: false, disabled: false, readonly: false, required: false, nonSubmit: false, invalid: false, checked: false }, option), { label: '', html: option.label });
 };
@@ -178,4 +462,4 @@ const isPlatform = (winOrPlatform, platform) => {
 const NewBalOptionValue = newBalOptionValue;
 const NewBalSingleOptionValue = newBalSingleOptionValue;
 
-export { BalModalController, BalOrientationSubject, NewBalOptionValue, NewBalSingleOptionValue, balModalController, balOrientationSubject, getPlatforms, hasTouchSupport, i18nBalFieldLabel, isBrowser, isPlatform, newBalCheckboxOption, newBalOptionValue, newBalRadioOption, newBalSingleOptionValue };
+export { BalModalController, BalOrientationSubject, BalSnackbarController, BalToastController, NewBalOptionValue, NewBalSingleOptionValue, balModalController, balOrientationSubject, balSnackbarController, balToastController, getPlatforms, hasTouchSupport, i18nBalFieldLabel, initializeBaloiseDesignSystem as initialize, initializeBaloiseDesignSystem, isBrowser, isPlatform, newBalCheckboxOption, newBalOptionValue, newBalRadioOption, newBalSingleOptionValue, setupConfig };

package/components/tokens.esm.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 16 Oct 2024 06:14:13 GMT
+ * Generated on Wed, 16 Oct 2024 08:59:28 GMT
  */
 const balColorGreen3 = "#94e3d4";
 const balColorGreen6 = "#1b5951";