@baloise/ds-core 16.8.0 → 17.0.0

package/dist/collection/components/bal-popover/bal-popover.js

@@ -5,6 +5,7 @@ import { BEM } from "../../utils/bem";
 import { balBrowser } from "../../utils/browser";
 import { Logger } from "../../utils/log";
 import { ListenToBreakpoints, balBreakpoints } from "../../utils/breakpoints";
+import { ListenTo } from "../../utils/listen";
 export class Popover {
     constructor() {
         this.popoverId = `bal-po-${PopoverIds++}`;
@@ -92,12 +93,12 @@ export class Popover {
             clearTimeout(this.componentDidRenderTimer);
             this.componentDidRenderTimer = setTimeout(() => {
                 var _a;
-                const triggerWidth = (_a = this.element) === null || _a === void 0 ? void 0 : _a.clientWidth;
+                const triggerWidth = (_a = this.el) === null || _a === void 0 ? void 0 : _a.clientWidth;
                 if (triggerWidth) {
-                    this.element.style.maxWidth = `${triggerWidth}px`;
+                    this.el.style.maxWidth = `${triggerWidth}px`;
                 }
                 else {
-                    this.element.style.maxWidth = `initial`;
+                    this.el.style.maxWidth = `initial`;
                 }
             });
         }
@@ -115,7 +116,7 @@ export class Popover {
     async clickOnOutside(ev) {
         var _a;
         if (this.active) {
-            if (!this.element.contains(ev.target)) {
+            if (!this.el.contains(ev.target)) {
                 this.active = false;
             }
             if ((_a = this.backdropElement) === null || _a === void 0 ? void 0 : _a.isEqualNode(ev.target)) {
@@ -130,7 +131,7 @@ export class Popover {
         }
     }
     async tabOutside(ev) {
-        if (ev.key === 'Tab' && !this.element.contains(document.activeElement) && this.active) {
+        if (ev.key === 'Tab' && !this.el.contains(document.activeElement) && this.active) {
             await this.toggle();
         }
     }
@@ -195,7 +196,7 @@ export class Popover {
      * ------------------------------------------------------
      */
     get footMobileNav() {
-        return this.element.closest('[slot="meta-mobile-foot"]');
+        return this.el.closest('[slot="meta-mobile-foot"]');
     }
     get modifierOffset() {
         return {
@@ -215,13 +216,13 @@ export class Popover {
         };
     }
     get triggerElement() {
-        return this.element.querySelector('[bal-popover-trigger]');
+        return this.el.querySelector('[bal-popover-trigger]');
     }
     get menuElement() {
-        return this.element.querySelector('bal-popover-content');
+        return this.el.querySelector('bal-popover-content');
     }
     get menuInnerElement() {
-        return this.element.querySelector('.bal-popover__content__inner');
+        return this.el.querySelector('.bal-popover__content__inner');
     }
     getBackdropHeight() {
         if (balBrowser.hasWindow) {
@@ -242,11 +243,11 @@ export class Popover {
      */
     render() {
         const block = BEM.block('popover');
-        return (h(Host, { "aria-presented": this.active ? 'true' : null, "data-id": this.popoverId, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('active').class(this.active)), block.modifier('tooltip').class(this.tooltip)), block.modifier('arrow').class(this.arrow)), block.modifier('hint').class(this.hint)), block.modifier('backdrop').class(this.backdrop)) }, !this.mobileTop && (h("div", { ref: el => {
+        return (h(Host, { key: '997e5fefb0e6fe103b1732f084f8a7963eb319e5', "aria-presented": this.active ? 'true' : null, "data-id": this.popoverId, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('active').class(this.active)), block.modifier('tooltip').class(this.tooltip)), block.modifier('arrow').class(this.arrow)), block.modifier('hint').class(this.hint)), block.modifier('backdrop').class(this.backdrop)) }, !this.mobileTop && (h("div", { key: 'd5cb75c1951b9fe7cfd22ef86ee677461eecf5fc', ref: el => {
                 this.backdropElement = el;
             }, class: Object.assign({}, block.element('backdrop').class(this.backdrop && this.active)), style: {
                 '--bal-popover-backdrop-height': `${this.backdropHeight}rem`,
-            } })), h("slot", null)));
+            } })), h("slot", { key: '41482b0196b230235349f86cfb413cc8b35a8dad' })));
     }
     static get is() { return "bal-popover"; }
     static get originalStyleUrls() {
@@ -654,40 +655,13 @@ export class Popover {
             }
         };
     }
-    static get elementRef() { return "element"; }
+    static get elementRef() { return "el"; }
     static get watchers() {
         return [{
                 "propName": "active",
                 "methodName": "activeChanged"
             }];
     }
-    static get listeners() {
-        return [{
-                "name": "balPopoverPrepare",
-                "method": "handlePopoverPrepare",
-                "target": "body",
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "click",
-                "method": "clickOnOutside",
-                "target": "document",
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "keydown",
-                "method": "handleKeyUp",
-                "target": "window",
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "keyup",
-                "method": "tabOutside",
-                "target": "document",
-                "capture": false,
-                "passive": false
-            }];
-    }
 }
 __decorate([
     Logger('bal-popover'),
@@ -695,6 +669,30 @@ __decorate([
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)
 ], Popover.prototype, "createLogger", null);
+__decorate([
+    ListenTo('balPopoverPrepare', { target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [CustomEvent]),
+    __metadata("design:returntype", void 0)
+], Popover.prototype, "handlePopoverPrepare", null);
+__decorate([
+    ListenTo('click', { target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [UIEvent]),
+    __metadata("design:returntype", Promise)
+], Popover.prototype, "clickOnOutside", null);
+__decorate([
+    ListenTo('keydown', { target: 'window' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [KeyboardEvent]),
+    __metadata("design:returntype", void 0)
+], Popover.prototype, "handleKeyUp", null);
+__decorate([
+    ListenTo('keyup', { target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [KeyboardEvent]),
+    __metadata("design:returntype", Promise)
+], Popover.prototype, "tabOutside", null);
 __decorate([
     ListenToBreakpoints(),
     __metadata("design:type", Function),

package/dist/collection/components/bal-popup/bal-popup.js

@@ -1,6 +1,6 @@
 import { __decorate, __metadata } from "tslib";
 import { h, Host, } from "@stencil/core";
-import { isEscapeKey } from "@baloise/web-app-utils";
+import { isEscapeKey } from "../../utils/keyboard";
 import { BEM } from "../../utils/bem";
 import { balBrowser } from "../../utils/browser";
 import { stopEventBubbling } from "../../utils/form-input";
@@ -9,6 +9,7 @@ import { debounce } from "../../utils/helpers";
 import { Logger } from "../../utils/log";
 import { VariantRenderer } from "./variants/variant.renderer";
 import { focusableQueryString } from "../../utils/focus-visible";
+import { ListenTo } from "../../utils/listen";
 export class Popup {
     constructor() {
         this.popupId = `bal-pu-${popupIds++}`;
@@ -310,7 +311,7 @@ export class Popup {
         const innerBlock = block.element('inner');
         const innerHeadBlock = innerBlock.element('head');
         const innerContentBlock = innerBlock.element('content');
-        return (h(Host, { class: Object.assign({}, block.class()), role: "dialog", "aria-hidden": `${this.presented !== true}`, "aria-modal": `${this.presented === true}`, "aria-presented": `${this.presented === true}`, "aria-labelledby": `${this.popupId}-heading` }, h("div", { class: Object.assign({}, backdropBlock.class()), ref: backdropEl => (this.backdropEl = backdropEl) }), h("div", { class: Object.assign(Object.assign({}, containerBlock.class()), containerBlock.modifier(`variant-${this.activeVariant}`).class()), ref: containerEl => (this.containerEl = containerEl), style: { minWidth: `${this.minContainerWidth}px` } }, h("div", { class: Object.assign({}, arrowBlock.class()), ref: arrowEl => (this.arrowEl = arrowEl) }), h("bal-stack", { layout: "vertical", px: this.activeVariant === 'popover' ? 'medium' : 'none', py: "medium", class: Object.assign({}, innerBlock.class()) }, this.label ? (h("bal-stack", { space: "auto", class: Object.assign({}, innerHeadBlock.class()) }, h("bal-heading", { "data-test": "bal-popup-label", level: "span", "visual-level": "large", id: `${this.popupId}-heading` }, this.label), this.activeClosable ? (h("bal-close", { "data-test": "bal-popup-close", tabindex: -1, onClick: () => this.onCloseClick() })) : (''))) : (''), h("div", { class: Object.assign({}, innerContentBlock.class()), ref: contentEl => (this.contentEl = contentEl), "data-test": "bal-popup-content" }, h("slot", null))))));
+        return (h(Host, { key: 'bf7416d06bf9b78fb1f45474dbadbdaef3716fa9', class: Object.assign({}, block.class()), role: "dialog", "aria-hidden": `${this.presented !== true}`, "aria-modal": `${this.presented === true}`, "aria-presented": `${this.presented === true}`, "aria-labelledby": `${this.popupId}-heading` }, h("div", { key: '907ceff3eeb00380ba075a1c942c9593fa66d828', class: Object.assign({}, backdropBlock.class()), ref: backdropEl => (this.backdropEl = backdropEl) }), h("div", { key: 'a07c2e70f1964142896ab0e2dddda63212d6e7a6', class: Object.assign(Object.assign({}, containerBlock.class()), containerBlock.modifier(`variant-${this.activeVariant}`).class()), ref: containerEl => (this.containerEl = containerEl), style: { minWidth: `${this.minContainerWidth}px` } }, h("div", { key: '09fbe89593e72dfa5eda05ce017dbfdaa368ab6c', class: Object.assign({}, arrowBlock.class()), ref: arrowEl => (this.arrowEl = arrowEl) }), h("bal-stack", { key: '486d20a16eef12b6398235a15d6771924d9909b2', layout: "vertical", px: this.activeVariant === 'popover' ? 'medium' : 'none', py: "medium", class: Object.assign({}, innerBlock.class()) }, this.label ? (h("bal-stack", { space: "auto", class: Object.assign({}, innerHeadBlock.class()) }, h("bal-heading", { "data-test": "bal-popup-label", level: "span", "visual-level": "large", id: `${this.popupId}-heading` }, this.label), this.activeClosable ? (h("bal-close", { "data-test": "bal-popup-close", tabindex: -1, onClick: () => this.onCloseClick() })) : (''))) : (''), h("div", { key: 'd7210ff5af9647dbe4d176e00c7af06943bdd51a', class: Object.assign({}, innerContentBlock.class()), ref: contentEl => (this.contentEl = contentEl), "data-test": "bal-popup-content" }, h("slot", { key: '974459f017b51844019872313636f7055357f2e1' }))))));
     }
     static get is() { return "bal-popup"; }
     static get originalStyleUrls() {
@@ -784,39 +785,6 @@ export class Popup {
                 "methodName": "contentWidthChanged"
             }];
     }
-    static get listeners() {
-        return [{
-                "name": "click",
-                "method": "listenOnGlobalClick",
-                "target": "window",
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "keydown",
-                "method": "listenOnKeyDown",
-                "target": "body",
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "mousedown",
-                "method": "listenOnMouseDown",
-                "target": undefined,
-                "capture": false,
-                "passive": true
-            }, {
-                "name": "mouseup",
-                "method": "listenOnMouseUp",
-                "target": undefined,
-                "capture": false,
-                "passive": true
-            }, {
-                "name": "click",
-                "method": "listenOnComponentClick",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }];
-    }
 }
 __decorate([
     Logger('bal-popup'),
@@ -824,4 +792,34 @@ __decorate([
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)
 ], Popup.prototype, "createLogger", null);
+__decorate([
+    ListenTo('click', { target: 'window' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [MouseEvent]),
+    __metadata("design:returntype", Promise)
+], Popup.prototype, "listenOnGlobalClick", null);
+__decorate([
+    ListenTo('keydown', { target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [KeyboardEvent]),
+    __metadata("design:returntype", Promise)
+], Popup.prototype, "listenOnKeyDown", null);
+__decorate([
+    ListenTo('mousedown'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [MouseEvent]),
+    __metadata("design:returntype", Promise)
+], Popup.prototype, "listenOnMouseDown", null);
+__decorate([
+    ListenTo('mouseup'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [MouseEvent]),
+    __metadata("design:returntype", Promise)
+], Popup.prototype, "listenOnMouseUp", null);
+__decorate([
+    ListenTo('click'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", Promise)
+], Popup.prototype, "listenOnComponentClick", null);
 let popupIds = 0;

package/dist/collection/components/bal-popup/variants/popover-variant.renderer.js

@@ -1,4 +1,4 @@
-import { computePosition, offset, arrow, flip, shift, autoUpdate } from "@floating-ui/dom";
+import { balFloatingUi } from "../../../utils/floating-ui";
 import { balBrowser } from "../../../utils/browser";
 import { AbstractVariantRenderer } from "./abstract-variant.renderer";
 export class PopoverVariantRenderer extends AbstractVariantRenderer {
@@ -12,6 +12,7 @@ export class PopoverVariantRenderer extends AbstractVariantRenderer {
         this.triggerEl = null;
     }
     async present(component) {
+        const lib = await balFloatingUi.load();
         //
         // identify trigger element or the the closest trigger available
         if (!component.trigger && balBrowser.hasDocument) {
@@ -40,7 +41,7 @@ export class PopoverVariantRenderer extends AbstractVariantRenderer {
                 if (isNavMetaDesktopPopup) {
                     component.setMinWidth(this.triggerEl.clientWidth);
                 }
-                this.cleanup = autoUpdate(this.triggerEl, component.containerEl, () => {
+                this.cleanup = lib.autoUpdate(this.triggerEl, component.containerEl, () => {
                     this.update(component);
                 }, {
                     ancestorScroll: true,
@@ -57,6 +58,7 @@ export class PopoverVariantRenderer extends AbstractVariantRenderer {
     async update(component) {
         var _a, _b;
         if (this.triggerEl && component.trigger && component.containerEl && component.arrowEl) {
+            const lib = await balFloatingUi.load();
             const isNavMetaDesktopPopup = this.placement === 'bottom-end' && this.triggerEl !== component.trigger;
             const referenceRect = (_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
             const triggerRect = (_b = component.trigger) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
@@ -64,18 +66,20 @@ export class PopoverVariantRenderer extends AbstractVariantRenderer {
             if (balBrowser.hasWindow) {
                 isInFrame = !!window.frameElement;
             }
-            computePosition(this.triggerEl, component.containerEl, {
+            lib
+                .computePosition(this.triggerEl, component.containerEl, {
                 placement: this.placement,
                 middleware: [
-                    isInFrame ? undefined : shift(),
-                    flip(),
-                    offset(this.arrow ? 16 : this.offset),
-                    arrow({
+                    isInFrame ? undefined : lib.shift(),
+                    lib.flip(),
+                    lib.offset(this.arrow ? 16 : this.offset),
+                    lib.arrow({
                         element: component.arrowEl,
                         padding: 4,
                     }),
                 ],
-            }).then(({ x, y, middlewareData, placement }) => {
+            })
+                .then(({ x, y, middlewareData, placement }) => {
                 if (component.containerEl) {
                     Object.assign(component.containerEl.style, {
                         left: `${x}px`,

package/dist/collection/components/bal-progress-bar/bal-progress-bar.js

@@ -59,7 +59,7 @@ export class ProgressBar {
     render() {
         const block = BEM.block('progress-bar');
         const bemLineEl = block.element('line');
-        return (h(Host, { "aria-hidden": "true", class: Object.assign(Object.assign({}, block.class()), block.modifier(`background-${this.background}-of-${this.color}`).class()) }, h("div", { class: Object.assign(Object.assign(Object.assign({}, bemLineEl.class()), bemLineEl.modifier(`color-${this.color}`).class()), bemLineEl.modifier(`animated`).class(this.animated)), ref: lineEl => (this.lineEl = lineEl) })));
+        return (h(Host, { key: 'ed3fb78efd402af40f4a56c4e1b0f33634506cb6', "aria-hidden": "true", class: Object.assign(Object.assign({}, block.class()), block.modifier(`background-${this.background}-of-${this.color}`).class()) }, h("div", { key: '5c18e0082fd842c907d73e96ca84420e50f484b0', class: Object.assign(Object.assign(Object.assign({}, bemLineEl.class()), bemLineEl.modifier(`color-${this.color}`).class()), bemLineEl.modifier(`animated`).class(this.animated)), ref: lineEl => (this.lineEl = lineEl) })));
     }
     static get is() { return "bal-progress-bar"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-radio/bal-radio-button/bal-radio-button.js

@@ -170,7 +170,7 @@ export class RadioButton {
         const invalid = !!this.invalid;
         const color = !!this.color;
         const colored = this.checked && color;
-        return (h(Host, { class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`column-${this.colSize}`).class(this.colSize > 1)), block.modifier(`column-tablet-${this.colSizeTablet}`).class(this.colSizeTablet > 1)), block.modifier(`column-mobile-${this.colSizeMobile}`).class(this.colSizeMobile > 1)), onClick: this.onClick }, h("button", { role: "radio", class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('native').class()), block.element('native').modifier('disabled').class(disabled)), block.element('native').modifier('invalid').class(invalid)), block.element('native').modifier('checked').class(this.checked)), block.element('native').modifier(`colored`).class(colored)), block.element('native').modifier(`color-${this.color}`).class(color)), { 'bal-focusable': !this.disabled }), disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, h("slot", null))));
+        return (h(Host, { key: '6d15fada501de837329e97c0c8f4233176761f7e', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`column-${this.colSize}`).class(this.colSize > 1)), block.modifier(`column-tablet-${this.colSizeTablet}`).class(this.colSizeTablet > 1)), block.modifier(`column-mobile-${this.colSizeMobile}`).class(this.colSizeMobile > 1)), onClick: this.onClick }, h("button", { key: '45d8e41816ff805867601d8a0f55f1dcd5b53233', role: "radio", class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('native').class()), block.element('native').modifier('disabled').class(disabled)), block.element('native').modifier('invalid').class(invalid)), block.element('native').modifier('checked').class(this.checked)), block.element('native').modifier(`colored`).class(colored)), block.element('native').modifier(`color-${this.color}`).class(color)), { 'bal-focusable': !this.disabled }), disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, h("slot", { key: '25604044a505daa614dfa277b286f3aa7b0f082a' }))));
     }
     static get is() { return "bal-radio-button"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-radio/bal-radio-group/bal-radio-group.js

@@ -8,6 +8,7 @@ import { inheritAttributes } from "../../../utils/attributes";
 import { ListenToMutation } from "../../../utils/mutation";
 import { defaultBalAriaForm } from "../../../utils/form";
 import { ListenToFocus } from "../../../utils/focus";
+import { ListenTo } from "../../../utils/listen";
 export class RadioGroup {
     constructor() {
         this.inputId = `bal-rg-${radioGroupIds++}`;
@@ -767,39 +768,6 @@ export class RadioGroup {
                 "methodName": "columnsMobileChanged"
             }];
     }
-    static get listeners() {
-        return [{
-                "name": "balChange",
-                "method": "listenOnClick",
-                "target": "document",
-                "capture": true,
-                "passive": false
-            }, {
-                "name": "balFocus",
-                "method": "radioFocusListener",
-                "target": "document",
-                "capture": true,
-                "passive": false
-            }, {
-                "name": "balBlur",
-                "method": "radioBlurListener",
-                "target": "document",
-                "capture": true,
-                "passive": false
-            }, {
-                "name": "reset",
-                "method": "resetListener",
-                "target": "document",
-                "capture": true,
-                "passive": false
-            }, {
-                "name": "keydown",
-                "method": "onKeydown",
-                "target": "document",
-                "capture": false,
-                "passive": false
-            }];
-    }
 }
 __decorate([
     Logger('bal-radio-group'),
@@ -825,4 +793,34 @@ __decorate([
     __metadata("design:paramtypes", []),
     __metadata("design:returntype", void 0)
 ], RadioGroup.prototype, "mutationListener", null);
+__decorate([
+    ListenTo('balChange', { capture: true, target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [UIEvent]),
+    __metadata("design:returntype", void 0)
+], RadioGroup.prototype, "listenOnClick", null);
+__decorate([
+    ListenTo('balFocus', { capture: true, target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [CustomEvent]),
+    __metadata("design:returntype", void 0)
+], RadioGroup.prototype, "radioFocusListener", null);
+__decorate([
+    ListenTo('balBlur', { capture: true, target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [CustomEvent]),
+    __metadata("design:returntype", void 0)
+], RadioGroup.prototype, "radioBlurListener", null);
+__decorate([
+    ListenTo('reset', { capture: true, target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [UIEvent]),
+    __metadata("design:returntype", void 0)
+], RadioGroup.prototype, "resetListener", null);
+__decorate([
+    ListenTo('keydown', { target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", void 0)
+], RadioGroup.prototype, "onKeydown", null);
 let radioGroupIds = 0;

package/dist/collection/components/bal-radio/bal-radio.js

@@ -6,8 +6,9 @@ import { FOCUS_KEYS } from "../../utils/focus-visible";
 import { Logger } from "../../utils/log";
 import { inheritAttributes } from "../../utils/attributes";
 import { stopEventBubbling } from "../../utils/form-input";
-import { isSpaceKey } from "@baloise/web-app-utils";
+import { isSpaceKey } from "../../utils/keyboard";
 import { defaultBalAriaForm } from "../../utils/form";
+import { ListenTo } from "../../utils/listen";
 export class Radio {
     constructor() {
         this.inputId = `bal-rb-${radioIds++}`;
@@ -246,7 +247,7 @@ export class Radio {
             labelAttributes.id = `${id}-lbl`;
             labelAttributes.htmlFor = id;
         }
-        return (h(Host, { "aria-checked": `${this.checked}`, "aria-disabled": this.disabled ? 'true' : null, "aria-hidden": this.disabled ? 'true' : null, "aria-focused": focused ? 'true' : null, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ 'bal-focused': focused }, block.class()), block.modifier('radio').class()), block.modifier('select-button').class(this.interface === 'select-button')), block.modifier('invalid').class(this.invalid)), block.modifier('checked').class(this.checked)), block.modifier('flat').class(this.flat)), block.modifier('disabled').class(this.disabled || this.readonly)), block.modifier('hovered').class(this.hovered)), block.modifier('pressed').class(this.pressed)), block.modifier('invisible').class(this.invisible)), onKeypress: this.onKeypress, onClick: this.onClick }, h("input", Object.assign({ class: Object.assign(Object.assign({}, inputEl.class()), inputEl.modifier('select-button').class(this.interface === 'select-button')), "data-testid": "bal-radio-input", type: "radio", id: id, "aria-labelledby": labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, "aria-checked": `${this.checked}`, name: this.name, value: value, checked: this.checked, disabled: this.disabled || this.nonSubmit, readonly: this.readonly, required: this.required, onFocus: this.onFocus, onBlur: this.onBlur, ref: inputEl => (this.nativeInput = inputEl) }, inputAttributes)), !this.invisible ? (h(LabelTag, Object.assign({ class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, labelEl.class()), labelEl.modifier('radio').class()), labelEl.modifier('checked').class(this.checked)), labelEl.modifier('hidden').class(this.labelHidden)), labelEl.modifier('flat').class(this.flat)) }, labelAttributes, { "data-testid": "bal-radio-label" }), h("span", { class: Object.assign(Object.assign(Object.assign({}, labelTextEl.class()), labelTextEl.modifier('hidden').class(this.labelHidden)), labelTextEl.modifier('flat').class(this.flat)), "data-testid": "bal-radio-text" }, this.label, h("slot", null)))) : ('')));
+        return (h(Host, { key: 'd8027f12093f1564c38b859a1e4dab25e75eba64', "aria-checked": `${this.checked}`, "aria-disabled": this.disabled ? 'true' : null, "aria-hidden": this.disabled ? 'true' : null, "aria-focused": focused ? 'true' : null, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ 'bal-focused': focused }, block.class()), block.modifier('radio').class()), block.modifier('select-button').class(this.interface === 'select-button')), block.modifier('invalid').class(this.invalid)), block.modifier('checked').class(this.checked)), block.modifier('flat').class(this.flat)), block.modifier('disabled').class(this.disabled || this.readonly)), block.modifier('hovered').class(this.hovered)), block.modifier('pressed').class(this.pressed)), block.modifier('invisible').class(this.invisible)), onKeypress: this.onKeypress, onClick: this.onClick }, h("input", Object.assign({ key: '0b1a0313d4161c9f6725f7c8234f49d3678f5fa2', class: Object.assign(Object.assign({}, inputEl.class()), inputEl.modifier('select-button').class(this.interface === 'select-button')), "data-testid": "bal-radio-input", type: "radio", id: id, "aria-labelledby": labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, "aria-checked": `${this.checked}`, name: this.name, value: value, checked: this.checked, disabled: this.disabled || this.nonSubmit, readonly: this.readonly, required: this.required, onFocus: this.onFocus, onBlur: this.onBlur, ref: inputEl => (this.nativeInput = inputEl) }, inputAttributes)), !this.invisible ? (h(LabelTag, Object.assign({ class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, labelEl.class()), labelEl.modifier('radio').class()), labelEl.modifier('checked').class(this.checked)), labelEl.modifier('hidden').class(this.labelHidden)), labelEl.modifier('flat').class(this.flat)) }, labelAttributes, { "data-testid": "bal-radio-label" }), h("span", { class: Object.assign(Object.assign(Object.assign({}, labelTextEl.class()), labelTextEl.modifier('hidden').class(this.labelHidden)), labelTextEl.modifier('flat').class(this.flat)), "data-testid": "bal-radio-text" }, this.label, h("slot", null)))) : ('')));
     }
     static get is() { return "bal-radio"; }
     static get originalStyleUrls() {
@@ -741,15 +742,6 @@ export class Radio {
         };
     }
     static get elementRef() { return "el"; }
-    static get listeners() {
-        return [{
-                "name": "click",
-                "method": "listenOnClick",
-                "target": "document",
-                "capture": true,
-                "passive": false
-            }];
-    }
 }
 __decorate([
     Logger('bal-radio'),
@@ -757,4 +749,10 @@ __decorate([
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)
 ], Radio.prototype, "createLogger", null);
+__decorate([
+    ListenTo('click', { capture: true, target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [UIEvent]),
+    __metadata("design:returntype", void 0)
+], Radio.prototype, "listenOnClick", null);
 let radioIds = 0;

package/dist/collection/components/bal-segment/bal-segment-item/bal-segment-item.js

@@ -148,7 +148,7 @@ export class SegmentItem {
                 'aria-describedby': this.ariaForm.messageId,
             };
         }
-        return (h(Host, { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('vertical').class(vertical)), block.modifier('disabled').class(disabled)), block.modifier('checked').class(checked)), block.modifier('invalid').class(invalid)), block.modifier('last').class(this.isLast && !checked)) }, h("button", Object.assign({ id: id, role: "radio", "aria-checked": checked ? 'true' : 'false' }, buttonAttributes, { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, buttonBem.class()), buttonBem.modifier('checked').class(checked)), buttonBem.modifier('invalid').class(invalid)), buttonBem.modifier('disabled').class(disabled)), buttonBem.modifier('focused').class(focused)), buttonBem.modifier('vertical').class(vertical)), type: 'button', tabIndex: hasTabindex ? 0 : -1, part: "native", disabled: disabled, ref: el => (this.nativeEl = el) }, this.inheritedAttributes), h("bal-icon", { name: "check", size: "small", class: Object.assign(Object.assign(Object.assign({}, buttonBem.element('icon').class()), buttonBem.element('icon').modifier('animated').class(checked)), buttonBem.element('icon').modifier('vertical').class(vertical)), color: disabled ? 'grey-dark' : invalid ? 'white' : 'primary' }), h("bal-stack", { space: "x-small", layout: 'horizontal' }, h("bal-content", { space: "none" }, h("bal-label", { htmlId: `bal-si-${this.internalId}-label` }, label), h("span", { part: "slot", class: Object.assign({}, buttonBem.element('slot').modifier('hidden').class(!this.hasSlotContent)) }, ' ', h("slot", { onSlotchange: this.onSlottedItemsChange }))))), h("div", { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, indicatorBem.class()), indicatorBem.modifier('animated').class()), indicatorBem.modifier('background').class()), indicatorBem.modifier('disabled').class(disabled)), indicatorBem.modifier('invalid').class(invalid)), indicatorBem.modifier('checked').class(checked)), indicatorBem.modifier('vertical').class(vertical)) })));
+        return (h(Host, { key: '6da240d029f07e7760a962e388998c9c94390d4a', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('vertical').class(vertical)), block.modifier('disabled').class(disabled)), block.modifier('checked').class(checked)), block.modifier('invalid').class(invalid)), block.modifier('last').class(this.isLast && !checked)) }, h("button", Object.assign({ key: 'b388ce322243a5f47831d0ef1a65b332c191045b', id: id, role: "radio", "aria-checked": checked ? 'true' : 'false' }, buttonAttributes, { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, buttonBem.class()), buttonBem.modifier('checked').class(checked)), buttonBem.modifier('invalid').class(invalid)), buttonBem.modifier('disabled').class(disabled)), buttonBem.modifier('focused').class(focused)), buttonBem.modifier('vertical').class(vertical)), type: 'button', tabIndex: hasTabindex ? 0 : -1, part: "native", disabled: disabled, ref: el => (this.nativeEl = el) }, this.inheritedAttributes), h("bal-icon", { key: 'd5ba38e05534eb5ea281cc81a4ad5686b1a4f69b', name: "check", size: "small", class: Object.assign(Object.assign(Object.assign({}, buttonBem.element('icon').class()), buttonBem.element('icon').modifier('animated').class(checked)), buttonBem.element('icon').modifier('vertical').class(vertical)), color: disabled ? 'grey-dark' : invalid ? 'white' : 'primary' }), h("bal-stack", { key: '4a23ae6b4562a685f77f800ff6aca3e5c5e8226e', space: "x-small", layout: 'horizontal' }, h("bal-content", { key: 'a2fb5cf35391ca37fe328534a29cad6e41a7f8fb', space: "none" }, h("bal-label", { key: 'b3f633a9fe0ea22a71c05982af9dabc366c72495', htmlId: `bal-si-${this.internalId}-label` }, label), h("span", { key: 'badf00b587d14525f4cea6ceda85c7f67b1b216e', part: "slot", class: Object.assign({}, buttonBem.element('slot').modifier('hidden').class(!this.hasSlotContent)) }, ' ', h("slot", { key: '375942fc35e764ef3d91d62a03d08c16165c595b', onSlotchange: this.onSlottedItemsChange }))))), h("div", { key: 'b3a0cf381958ad671555306484ca791e93cfe21e', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, indicatorBem.class()), indicatorBem.modifier('animated').class()), indicatorBem.modifier('background').class()), indicatorBem.modifier('disabled').class(disabled)), indicatorBem.modifier('invalid').class(invalid)), indicatorBem.modifier('checked').class(checked)), indicatorBem.modifier('vertical').class(vertical)) })));
     }
     static get is() { return "bal-segment-item"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-segment/bal-segment.js

@@ -2,7 +2,7 @@ import { __decorate, __metadata } from "tslib";
 import { h, Host, writeTask, } from "@stencil/core";
 import { BEM } from "../../utils/bem";
 import { Logger } from "../../utils/log";
-import { isArrowDownKey, isArrowUpKey, isSpaceKey, isHomeKey, isEndKey, isArrowLeftKey, isArrowRightKey, isEnterKey, } from "@baloise/web-app-utils";
+import { isArrowDownKey, isArrowUpKey, isSpaceKey, isHomeKey, isEndKey, isArrowLeftKey, isArrowRightKey, isEnterKey, } from "../../utils/keyboard";
 import { stopEventBubbling } from "../../utils/form-input";
 import { FOCUS_KEYS } from "../../utils/focus-visible";
 import { ListenToWindowResize } from "../../utils/resize";
@@ -10,6 +10,7 @@ import { raf } from "../../utils/helpers";
 import { ListenToBreakpoints } from "../../utils/breakpoints";
 import { ListenToFocus } from "../../utils/focus";
 import { defaultBalAriaForm } from "../../utils/form";
+import { ListenTo } from "../../utils/listen";
 export class Segment {
     constructor() {
         /**
@@ -297,7 +298,7 @@ export class Segment {
     render() {
         const { invalid, isVertical, scrollable, keyboardMode, expanded, isMobile, disabled } = this;
         const block = BEM.block('segment');
-        return (h(Host, { role: "radiogroup", id: this.ariaForm.controlId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('invalid').class(invalid)), block.modifier('vertical').class(isVertical)), block.modifier('scrollable').class(scrollable)), block.modifier('keyboard').class(keyboardMode)), block.modifier('disabled').class(disabled)), block.modifier('expanded').class((expanded || isMobile) && !isVertical)), onClick: this.onClick }, h("slot", { onSlotchange: this.onSlottedItemsChange })));
+        return (h(Host, { key: 'f5cf0a37669b14db14104214dd142b8bed5266d6', role: "radiogroup", id: this.ariaForm.controlId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('invalid').class(invalid)), block.modifier('vertical').class(isVertical)), block.modifier('scrollable').class(scrollable)), block.modifier('keyboard').class(keyboardMode)), block.modifier('disabled').class(disabled)), block.modifier('expanded').class((expanded || isMobile) && !isVertical)), onClick: this.onClick }, h("slot", { key: '9952482b6bec65e4a7ed05b4cd34d58331805b4e', onSlotchange: this.onSlottedItemsChange })));
     }
     static get is() { return "bal-segment"; }
     static get originalStyleUrls() {
@@ -588,21 +589,6 @@ export class Segment {
                 "methodName": "valueChanged"
             }];
     }
-    static get listeners() {
-        return [{
-                "name": "keydown",
-                "method": "listenOnKeyDownOutside",
-                "target": "document",
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "keydown",
-                "method": "listenOnKeyDown",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }];
-    }
 }
 __decorate([
     Logger('bal-segment'),
@@ -634,3 +620,15 @@ __decorate([
     __metadata("design:paramtypes", []),
     __metadata("design:returntype", void 0)
 ], Segment.prototype, "windowResizeListener", null);
+__decorate([
+    ListenTo('keydown', { target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], Segment.prototype, "listenOnKeyDownOutside", null);
+__decorate([
+    ListenTo('keydown'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [KeyboardEvent]),
+    __metadata("design:returntype", void 0)
+], Segment.prototype, "listenOnKeyDown", null);

package/dist/collection/components/bal-select/bal-select-option/bal-select-option.js

@@ -12,7 +12,7 @@ export class SelectOption {
         this.log = log;
     }
     render() {
-        return (h(Host, { style: { display: 'none' } }, h("slot", null)));
+        return (h(Host, { key: 'e576fb51e73b23cbfd86911da7b8ddbd337e72a3', style: { display: 'none' } }, h("slot", { key: 'e6ad28fa2cd69ebf97968985267fd363097f88f3' })));
     }
     static get is() { return "bal-select-option"; }
     static get properties() {