@baloise/ds-core 16.3.0 → 16.4.0-nightly.20240917

package/dist/collection/components/docs/bal-doc-app/bal-doc-app.js

@@ -0,0 +1,229 @@
+import { Host, h } from "@stencil/core";
+import * as balIcons from "../../../../../../icons/src/index";
+import { updateBalIcons } from "../../../utils/config";
+import { balBrowser } from "../../../utils/browser";
+import globalScript from "../../../global";
+/**
+ * @internal
+ */
+export class DocApp {
+    constructor() {
+        this.logComponents = '';
+        this.logLifecycle = true;
+        this.logEvents = true;
+        this.logRender = true;
+        this.logCustom = true;
+        this.stickyFooter = false;
+        this.region = undefined;
+        this.language = undefined;
+        this.animated = true;
+    }
+    connectedCallback() {
+        globalScript();
+        updateBalIcons(balIcons);
+    }
+    componentDidRender() {
+        const logConfig = {
+            components: this.logComponents
+                .split(',')
+                .map(c => c.trim())
+                .filter(c => c !== ''),
+            lifecycle: this.logLifecycle,
+            event: this.logEvents,
+            render: this.logRender,
+            custom: this.logCustom,
+        };
+        if (balBrowser.hasWindow) {
+            if (this.logComponents) {
+                ;
+                window.BaloiseDesignSystem.config.logger = logConfig;
+            }
+            if (this.region) {
+                ;
+                window.BaloiseDesignSystem.config.region = this.region;
+            }
+            if (this.language) {
+                ;
+                window.BaloiseDesignSystem.config.language = this.language;
+            }
+        }
+    }
+    render() {
+        return (h(Host, null, h("bal-app", { animated: this.animated }, h("div", { class: { 'has-sticky-footer': this.stickyFooter } }, h("slot", null)))));
+    }
+    static get is() { return "bal-doc-app"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bal-doc-app.sass"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bal-doc-app.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "logComponents": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "log-components",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "logLifecycle": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "log-lifecycle",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "logEvents": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "log-events",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "logRender": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "log-render",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "logCustom": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "log-custom",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "stickyFooter": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "sticky-footer",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "region": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "region",
+                "reflect": false
+            },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "language",
+                "reflect": false
+            },
+            "animated": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables all animation inside the bal-app. Can be used for simplify e2e testing."
+                },
+                "attribute": "animated",
+                "reflect": true,
+                "defaultValue": "true"
+            }
+        };
+    }
+}

package/dist/collection/utils/constants/version.constant.js

@@ -1,2 +1,2 @@
 // generated by .build/version.js
-export const VERSION = '16.3.0';
+export const VERSION = '16.4.0-nightly.20240917';

package/dist/collection/utils/date/date.spec.js

@@ -70,7 +70,6 @@ describe('balDate', () => {
                 const year = new Date().getFullYear();
                 const cutoff = year + 10;
                 const cutoffTwoDigits = cutoff % 100;
-                console.log('cutoff', cutoff);
                 expect(BalDate.fromAnyFormat(`1.1.${cutoffTwoDigits}`).toISODate()).toStrictEqual(`20${cutoffTwoDigits}-01-01`);
                 expect(BalDate.fromAnyFormat(`1.1.${cutoffTwoDigits - 1}`).toISODate()).toStrictEqual(`20${cutoffTwoDigits - 1}-01-01`);
                 expect(BalDate.fromAnyFormat(`1.1.${cutoffTwoDigits + 1}`).toISODate()).toStrictEqual(`19${cutoffTwoDigits + 1}-01-01`);

package/dist/collection/utils/dropdown/option.js

@@ -33,12 +33,15 @@ export class DropdownOptionUtil {
         this.component.rawOptions = this.component.options.map(mapOption);
         await this.component.valueUtil.updateInputContent();
     }
-    async listenToOptionChange(_ev) {
+    async listenToOptionChange(ev) {
         var _a;
         const newSelectedValues = (await ((_a = this.component.listEl) === null || _a === void 0 ? void 0 : _a.getSelectedValues())) || [];
         this.component.valueUtil.updateRawValueBySelection(newSelectedValues);
         if (!this.component.multiple) {
             this.component.popupUtil.collapseList();
+            if (this.component.hasFocus) {
+                this.component.balBlur.emit(new FocusEvent('blur', { relatedTarget: this.component.el }));
+            }
         }
     }
 }

package/dist/collection/utils/dropdown/popup.js

@@ -26,13 +26,13 @@ export class DropdownPopupUtil {
             }
         }
     }
-    expandList() {
+    async expandList() {
         var _a;
         if (this.component.panelEl) {
             this.component.panelCleanup = autoUpdate(this.component.el, this.component.panelEl, this.updatePanelPosition(this.component.el, this.component.panelEl));
         }
         this.component.isExpanded = true;
-        (_a = this.component.listEl) === null || _a === void 0 ? void 0 : _a.focusFirst();
+        await ((_a = this.component.listEl) === null || _a === void 0 ? void 0 : _a.focusSelected());
     }
     collapseList() {
         var _a;

package/dist/collection/utils/resize/index.js

@@ -1,5 +1,8 @@
-export * from './window-resize.listener';
+export * from './window-resize.decorator';
 export * from './window-resize.handler';
+export * from './window-resize.interfaces';
+export * from './window-resize.listener';
+export * from './window-resize.subject';
 export * from './resize.interfaces';
 export * from './resize.decorator';
 export * from './resize.subject';

package/dist/collection/utils/resize/window-resize.decorator.js

@@ -0,0 +1,20 @@
+import { BalWindowResizeSubject } from "./window-resize.subject";
+export function ListenToWindowResize() {
+    return function (target, _propertyKey, _descriptor) {
+        const { connectedCallback, disconnectedCallback } = target;
+        target.connectedCallback = function () {
+            if (!this._balWindowResizeSubject) {
+                this._balWindowResizeSubject = new BalWindowResizeSubject();
+                this._balWindowResizeSubject.attach(this);
+            }
+            return connectedCallback && connectedCallback.call(this);
+        };
+        target.disconnectedCallback = function () {
+            if (this._balWindowResizeSubject) {
+                this._balWindowResizeSubject.detach();
+                this._balWindowResizeSubject = undefined;
+            }
+            return disconnectedCallback && disconnectedCallback.call(this);
+        };
+    };
+}

package/dist/collection/utils/resize/window-resize.interfaces.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/utils/resize/window-resize.listener.js

@@ -5,15 +5,15 @@ export class BalWindowResizeListener extends ListenerAbstract {
     constructor() {
         super(...arguments);
         this.resizeHandler = new BalWindowResizeHandler({ onlyListenToWidthChanges: true });
-        this.debouncedNotify = debounce(() => this.notify(), 10);
+        this.debouncedNotify = debounce(() => this.notify(), 100);
         this.notify = async () => {
             if (await this.resizeHandler.hasResized()) {
                 super.notify(undefined);
             }
         };
     }
-    connect() {
-        super.connect();
+    connect(el) {
+        super.connect(el);
         if (this.el) {
             addEventListener(this.el, 'resize', this.debouncedNotify, { passive: true });
         }

package/dist/collection/utils/resize/window-resize.subject.js

@@ -0,0 +1,23 @@
+import { BalWindowResizeListener } from "./window-resize.listener";
+import { SingleSubject } from "../types/signal";
+import { balBrowser } from "../browser";
+export class BalWindowResizeSubject extends SingleSubject {
+    constructor() {
+        super((observer, _data) => {
+            observer.windowResizeListener();
+        });
+        this.listener = new BalWindowResizeListener();
+    }
+    attach(observer) {
+        super.attach(observer);
+        if (balBrowser.hasWindow) {
+            this.listener.connect(window);
+            this.listener.add(() => super.notify());
+        }
+    }
+    detach() {
+        super.detach();
+        this.listener.disconnect();
+    }
+}
+export const balWindowResizeSubject = new BalWindowResizeSubject();

package/dist/collection/utils/string.js

@@ -0,0 +1,10 @@
+export const toKebabCase = (string) => {
+    if (typeof string === 'string') {
+        return string
+            .replace(/([a-z])([0-9])/g, '$1-$2')
+            .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+            .replace(/[\s_]+/g, '-')
+            .toLowerCase();
+    }
+    return '';
+};

package/dist/collection/utils/string.spec.js

@@ -0,0 +1,24 @@
+import { toKebabCase } from "./string";
+describe('string', () => {
+    describe('toKebabCase', () => {
+        test('should format non string values correctly', () => {
+            expect(toKebabCase('')).toBe('');
+            expect(toKebabCase(undefined)).toBe('');
+            expect(toKebabCase(null)).toBe('');
+            expect(toKebabCase([])).toBe('');
+            expect(toKebabCase({})).toBe('');
+            expect(toKebabCase(7)).toBe('');
+            expect(toKebabCase(78)).toBe('');
+            expect(toKebabCase(true)).toBe('');
+            expect(toKebabCase(false)).toBe('');
+        });
+        test('should format string values correctly', () => {
+            expect(toKebabCase('HelloWorld')).toBe('hello-world');
+            expect(toKebabCase('Hello4World')).toBe('hello-4-world');
+            expect(toKebabCase('Hello44World')).toBe('hello-44-world');
+            expect(toKebabCase('4World')).toBe('4-world');
+            expect(toKebabCase('4World4')).toBe('4-world-4');
+            expect(toKebabCase('World')).toBe('world');
+        });
+    });
+});

package/dist/esm/app-globals-970bab17.js

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

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

@@ -5,9 +5,12 @@ 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-28a08ec5.js';
+import { h as isEnterKey, e as isSpaceKey } from './index.esm-76abd8e3.js';
 import './browser-a8073d92.js';
 import './icons.constant-a7885631.js';
 import './config.utils-6ac6c9bd.js';
+import './index-82aff103.js';
+import './_commonjsHelpers-1c8beb5f.js';
 
 const balAccordionCss = ".bal-accordion{display:block;position:relative;width:100%}.bal-accordion--card-v1,.bal-accordion--card-v2{margin-top:var(--bal-space-medium)}@media screen and (min-width: 769px),print{.bal-accordion--card-v1,.bal-accordion--card-v2{margin-top:var(--bal-space-medium-tablet)}}@media screen and (min-width: 1024px){.bal-accordion--card-v1,.bal-accordion--card-v2{margin-top:var(--bal-space-medium-desktop)}}.bal-accordion--card-v2{padding-left:var(--bal-space-medium);padding-right:var(--bal-space-medium);padding-bottom:var(--bal-space-medium)}@media screen and (min-width: 769px),print{.bal-accordion--card-v2{padding-left:var(--bal-space-medium-tablet);padding-right:var(--bal-space-medium-tablet);padding-bottom:var(--bal-space-medium-tablet)}}@media screen and (min-width: 1024px){.bal-accordion--card-v2{padding-left:var(--bal-space-medium-desktop);padding-right:var(--bal-space-medium-desktop);padding-bottom:var(--bal-space-medium-desktop)}}.bal-accordion__wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.bal-accordion__trigger--card{margin-left:var(--bal-space-medium);margin-right:var(--bal-space-medium);margin-bottom:var(--bal-space-medium)}@media screen and (min-width: 769px),print{.bal-accordion__trigger--card{margin-left:var(--bal-space-medium-tablet);margin-right:var(--bal-space-medium-tablet);margin-bottom:var(--bal-space-medium-tablet)}}@media screen and (min-width: 1024px){.bal-accordion__trigger--card{margin-left:var(--bal-space-medium-desktop);margin-right:var(--bal-space-medium-desktop);margin-bottom:var(--bal-space-medium-desktop)}}.bal-accordion__content--card{margin-left:var(--bal-space-medium);margin-right:var(--bal-space-medium)}@media screen and (min-width: 769px),print{.bal-accordion__content--card{margin-left:var(--bal-space-medium-tablet);margin-right:var(--bal-space-medium-tablet)}}@media screen and (min-width: 1024px){.bal-accordion__content--card{margin-left:var(--bal-space-medium-desktop);margin-right:var(--bal-space-medium-desktop)}}.bal-accordion--animated{-webkit-transition:all var(--bal-animation-transition-duration) var(--bal-animation-transition-easing);transition:all var(--bal-animation-transition-duration) var(--bal-animation-transition-easing)}.bal-accordion--animated .bal-accordion__content{-webkit-transition:max-height var(--bal-animation-transition-duration) var(--bal-animation-transition-easing);transition:max-height var(--bal-animation-transition-duration) var(--bal-animation-transition-easing)}.bal-accordion__content{overflow:hidden;will-change:max-height}.bal-accordion--collapsing .bal-accordion__content{max-height:0 !important}.bal-accordion--collapsed .bal-accordion__content{display:none}.bal-accordion--expanding .bal-accordion__content{max-height:0}@media (prefers-reduced-motion: reduce){.bal-accordion,.bal-accordion__content{-webkit-transition:none !important;transition:none !important}}";
 const BalAccordionStyle0 = balAccordionCss;
@@ -359,7 +362,7 @@ __decorate([
 let accordionDetailIds = 0;
 AccordionDetails.style = BalAccordionDetailsStyle0;
 
-const balAccordionSummaryCss = ".bal-accordion__summary{position:static}.bal-accordion__summary--trigger{cursor:pointer}";
+const balAccordionSummaryCss = "@media (hover: hover)and (pointer: fine){.bal-accordion__summary--trigger:focus-visible{-webkit-box-shadow:var(--bal-focus-shadow) !important;box-shadow:var(--bal-focus-shadow) !important}}.bal-accordion__summary{position:static;display:block}.bal-accordion__summary--trigger{cursor:pointer}";
 const BalAccordionSummaryStyle0 = balAccordionSummaryCss;
 
 const AccordionSummary = class {
@@ -380,6 +383,13 @@ const AccordionSummary = class {
             stopEventBubbling(ev);
             (_a = this.parentAccordionElement) === null || _a === void 0 ? void 0 : _a.humanToggle();
         };
+        this.onKeyDown = (ev) => {
+            var _a;
+            if (isEnterKey(ev) || isSpaceKey(ev)) {
+                stopEventBubbling(ev);
+                (_a = this.parentAccordionElement) === null || _a === void 0 ? void 0 : _a.humanToggle();
+            }
+        };
         this.parentAccordionId = undefined;
         this.trigger = false;
         this.active = false;
@@ -428,12 +438,14 @@ const AccordionSummary = class {
             attributes = {
                 'aria-controls': `${this.parentAccordionId}-details-content`,
                 'role': 'button',
+                'tabindex': 0,
                 'part': buttonPart,
                 'data-testid': 'bal-accordion-button',
                 'onClick': this.onClick,
+                'onKeyDown': this.onKeyDown,
             };
         }
-        return (h(Host, Object.assign({ id: id, class: Object.assign(Object.assign({}, block.class()), block.modifier('trigger').class(this.trigger)) }, attributes, { "data-testid": "bal-accordion-summary" })));
+        return (h(Host, Object.assign({ id: id, class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('trigger').class(this.trigger)), block.modifier('inner-trigger').class(!this.trigger)), { 'bal-focused': this.trigger }) }, attributes, { "data-testid": "bal-accordion-summary" })));
     }
     get el() { return getElement(this); }
 };
@@ -446,7 +458,7 @@ __decorate([
 let accordionSummaryIds = 0;
 AccordionSummary.style = BalAccordionSummaryStyle0;
 
-const balAccordionTriggerCss = ".bal-accordion__trigger{position:static}.bal-accordion__trigger__button{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;background:rgba(0,0,0,0);border:none;height:3rem;width:3rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}";
+const balAccordionTriggerCss = "@media (hover: hover)and (pointer: fine){.bal-accordion__trigger__button.bal-focused:focus-visible{-webkit-box-shadow:var(--bal-focus-shadow) !important;box-shadow:var(--bal-focus-shadow) !important}}.bal-accordion__trigger{position:static;display:block}.bal-accordion__trigger__button{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;background:rgba(0,0,0,0);border:none;height:3rem;width:3rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}";
 const BalAccordionTriggerStyle0 = balAccordionTriggerCss;
 
 const AccordionTrigger = class {
@@ -499,6 +511,10 @@ const AccordionTrigger = class {
         var _a;
         return ((_a = this.el) === null || _a === void 0 ? void 0 : _a.closest('bal-accordion')) || null;
     }
+    get parentAccordionSummaryElement() {
+        var _a;
+        return ((_a = this.el) === null || _a === void 0 ? void 0 : _a.closest('bal-accordion-summary')) || null;
+    }
     /**
      * RENDER
      * ------------------------------------------------------
@@ -515,7 +531,16 @@ const AccordionTrigger = class {
         }
         const expanded = this.state === 4 /* AccordionState.Expanded */ || this.state === 8 /* AccordionState.Expanding */;
         const buttonPart = expanded ? 'button expanded' : 'button';
-        return (h(Host, { id: id, class: Object.assign({}, block.class()) }, this.button ? (h("bal-button", { id: `${id}-button`, "aria-controls": `${this.parentAccordionId}-details-content`, part: buttonPart, "data-testid": "bal-accordion-trigger", expanded: true, icon: icon, iconTurn: turn, color: this.color, size: this.size, onClick: this.onClick }, label)) : (h("button", { class: Object.assign({}, block.element('button').class()), id: `${id}-button`, "aria-controls": `${this.parentAccordionId}-details-content`, "aria-label": "accordion trigger", part: buttonPart, "data-testid": "bal-accordion-trigger", onClick: this.onClick }, h("bal-icon", { turn: turn, name: icon })))));
+        const parentSummaryEl = this.parentAccordionSummaryElement;
+        let triggerAttributes = {
+            tabindex: -1,
+        };
+        if (parentSummaryEl && !parentSummaryEl.trigger) {
+            triggerAttributes = {
+                tabindex: 0,
+            };
+        }
+        return (h(Host, { id: id, class: Object.assign({}, block.class()) }, this.button ? (h("bal-button", { id: `${id}-button`, "aria-controls": `${this.parentAccordionId}-details-content`, part: buttonPart, "data-testid": "bal-accordion-trigger", expanded: true, icon: icon, iconTurn: turn, color: this.color, size: this.size, onClick: this.onClick }, label)) : (h("button", Object.assign({ class: Object.assign(Object.assign({}, block.element('button').class()), { 'bal-focused': parentSummaryEl && !parentSummaryEl.trigger }), id: `${id}-button`, "aria-controls": `${this.parentAccordionId}-details-content`, "aria-label": "accordion trigger", part: buttonPart, "data-testid": "bal-accordion-trigger", onClick: this.onClick }, triggerAttributes), h("bal-icon", { turn: turn, name: icon })))));
     }
     get el() { return getElement(this); }
 };