@baloise/ds-core 17.2.1 → 17.2.2-nightly.20250109

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

@@ -6,7 +6,6 @@ import { ariaBooleanToString } from "../../utils/aria";
 import { ListenToElementStates } from "../../utils/element-states";
 import { stopEventBubbling } from "../../utils/form-input";
 import { BalElementStateListener } from "../../utils/element-states/element-states.listener";
-import { ListenTo } from "../../utils/listen";
 export class Option {
     constructor() {
         this.inputId = `bal-option-${balOptionIds++}`;
@@ -97,7 +96,7 @@ export class Option {
      */
     render() {
         const block = BEM.block('option');
-        return (h(Host, { key: 'b69ef765d0cfd4e4e29743026b68c5c6c64f685c', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('checkbox').class(this.checkbox)), block.modifier('focused').class(this.focused)), block.modifier('invalid').class(this.invalid)), block.modifier('selected').class(this.selected)), block.modifier('disabled').class(this.disabled)), block.modifier('hidden').class(this.hidden)), role: "option", id: this.inputId, "data-value": this.value, "data-label": this.label, "aria-label": this.label, "aria-hidden": ariaBooleanToString(this.hidden), "aria-selected": ariaBooleanToString(this.selected), "aria-checked": ariaBooleanToString(this.selected), "aria-disabled": ariaBooleanToString(this.disabled), "aria-invalid": ariaBooleanToString(this.invalid), tabIndex: -1, onClick: this.onClick }, h("bal-stack", { key: 'fc345d890d6392f12c47c6775343170cf9ef9fce', py: "small", space: "x-small" }, this.checkbox ? (h("bal-checkbox", { flat: true, nonSubmit: true, "label-hidden": true, checked: this.selected, disabled: this.disabled, invalid: this.invalid, tabindex: -1 })) : (''), h("div", { key: 'd77888278aa8b163914eb3e58d852fc706563186', class: Object.assign(Object.assign({}, block.element('inner').class()), block.element('inner').modifier('multiline').class(this.multiline)) }, h("slot", { key: 'efb92bbd5efb31efec3c374ca0c123c9a2b1df3f' })), this.selected && !this.checkbox ? (h("bal-icon", { name: "check", size: "small", color: this.disabled ? 'grey' : this.invalid ? 'danger' : 'primary' })) : (''))));
+        return (h(Host, { key: '2dbf49c5030c61a24ce0b2b8cb2fe0f1ede9895b', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('checkbox').class(this.checkbox)), block.modifier('focused').class(this.focused)), block.modifier('invalid').class(this.invalid)), block.modifier('selected').class(this.selected)), block.modifier('disabled').class(this.disabled)), block.modifier('hidden').class(this.hidden)), role: "option", id: this.inputId, "data-value": this.value, "data-label": this.label, "aria-label": this.label, "aria-hidden": ariaBooleanToString(this.hidden), "aria-selected": ariaBooleanToString(this.selected), "aria-checked": ariaBooleanToString(this.selected), "aria-disabled": ariaBooleanToString(this.disabled), "aria-invalid": ariaBooleanToString(this.invalid), tabIndex: -1, onClick: this.onClick }, h("bal-stack", { key: '1ed42549cea2542e4eb56d7cfc6c1024dd13aa71', py: "small", space: "x-small" }, this.checkbox ? (h("bal-checkbox", { flat: true, nonSubmit: true, "label-hidden": true, checked: this.selected, disabled: this.disabled, invalid: this.invalid, tabindex: -1 })) : (''), h("div", { key: '3f3c59ec2f04e77bd0400ec58b8294c3ecd7a1b7', class: Object.assign(Object.assign({}, block.element('inner').class()), block.element('inner').modifier('multiline').class(this.multiline)) }, h("slot", { key: '04e84d67e23ba2e5bd59e5ddb7c4549327e77ce0' })), this.selected && !this.checkbox ? (h("bal-icon", { name: "check", size: "small", color: this.disabled ? 'grey' : this.invalid ? 'danger' : 'primary' })) : (''))));
     }
     static get is() { return "bal-option"; }
     static get originalStyleUrls() {
@@ -126,6 +125,8 @@ export class Option {
                     "tags": [],
                     "text": "Label will be shown in the input element when it got selected"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label",
                 "reflect": false,
                 "defaultValue": "''"
@@ -144,6 +145,8 @@ export class Option {
                     "tags": [],
                     "text": "The value of the select option. This value will be returned by the parent `<bal-select>` element."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "value",
                 "reflect": false,
                 "defaultValue": "''"
@@ -162,6 +165,8 @@ export class Option {
                     "tags": [],
                     "text": "If `true`, the user cannot interact with the option."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
@@ -180,6 +185,8 @@ export class Option {
                     "tags": [],
                     "text": "If `true`, the option can present in more than one line."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "multiline",
                 "reflect": false,
                 "defaultValue": "false"
@@ -198,6 +205,8 @@ export class Option {
                     "tags": [],
                     "text": "If `true`, the option is shown in red."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "invalid",
                 "reflect": false,
                 "defaultValue": "false"
@@ -216,6 +225,8 @@ export class Option {
                     "tags": [],
                     "text": "If `true`, the option is selected."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "selected",
                 "reflect": false,
                 "defaultValue": "false"
@@ -234,6 +245,8 @@ export class Option {
                     "tags": [],
                     "text": "If `true`, the option is focused."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "focused",
                 "reflect": false,
                 "defaultValue": "false"
@@ -252,6 +265,8 @@ export class Option {
                     "tags": [],
                     "text": "If `true`, the option is hidden."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "hidden",
                 "reflect": false,
                 "defaultValue": "false"
@@ -336,6 +351,15 @@ export class Option {
         };
     }
     static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "mouseenter",
+                "method": "listenToMouseEnter",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }];
+    }
 }
 __decorate([
     Logger('bal-option'),
@@ -343,12 +367,6 @@ __decorate([
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)
 ], Option.prototype, "createLogger", null);
-__decorate([
-    ListenTo('mouseenter'),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", void 0)
-], Option.prototype, "listenToMouseEnter", null);
 __decorate([
     ListenToElementStates(),
     __metadata("design:type", Function),

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

@@ -7,7 +7,6 @@ import { raf, waitAfterFramePaint } from "../../utils/helpers";
 import { Logger } from "../../utils/log";
 import { includes, startsWith } from "../bal-select/utils/utils";
 import { defaultBalAriaForm } from "../../utils/form";
-import { ListenTo } from "../../utils/listen";
 export class OptionList {
     constructor() {
         this.inputId = `bal-option-list-${balOptionListIds++}`;
@@ -415,7 +414,7 @@ export class OptionList {
     render() {
         const block = BEM.block('option-list');
         const labelledby = this.labelledby || this.ariaForm.labelId;
-        return (h(Host, { key: '7a07652540fa56fedaee410917d90d83e1979a39', class: Object.assign({}, block.class()), id: this.inputId }, h("div", Object.assign({ key: '4dfd52f5cd7b87a1732fcba95d3db376d955be58', role: "listbox", "aria-labelledby": labelledby, "aria-disabled": this.disabled, class: Object.assign({}, block.element('container').class()) }, this.inheritAttributes), h("slot", { key: '3f190f2b005335d2f1072f0857ea95c10ae0157d' }))));
+        return (h(Host, { key: '946ff4a59bf7e9202317d7898791f34006c90ee1', class: Object.assign({}, block.class()), id: this.inputId }, h("div", Object.assign({ key: '078d3ec40ac98bd470666e941b84119f89b9b5f9', role: "listbox", "aria-labelledby": labelledby, "aria-disabled": this.disabled, class: Object.assign({}, block.element('container').class()) }, this.inheritAttributes), h("slot", { key: '18ddbc132a73787221f6bb7dbf483e1e26883a43' }))));
     }
     static get is() { return "bal-option-list"; }
     static get originalStyleUrls() {
@@ -444,6 +443,8 @@ export class OptionList {
                     "tags": [],
                     "text": "If `true` the list supports multiple selections"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "multiple",
                 "reflect": false,
                 "defaultValue": "false"
@@ -462,6 +463,8 @@ export class OptionList {
                     "tags": [],
                     "text": "If `true`, the user cannot interact with the option."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
@@ -480,6 +483,8 @@ export class OptionList {
                     "tags": [],
                     "text": "If `true`, the user must fill in a value before submitting a form."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "required",
                 "reflect": false,
                 "defaultValue": "false"
@@ -498,6 +503,8 @@ export class OptionList {
                     "tags": [],
                     "text": "Defines the focused option with his index value"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "focus-index",
                 "reflect": false,
                 "defaultValue": "-1"
@@ -516,6 +523,8 @@ export class OptionList {
                     "tags": [],
                     "text": "Id of the label element to describe this option list"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "labelledby",
                 "reflect": false
             },
@@ -538,6 +547,8 @@ export class OptionList {
                     "tags": [],
                     "text": "Defines the filter logic of the list"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "filter",
                 "reflect": false,
                 "defaultValue": "'includes'"
@@ -556,6 +567,8 @@ export class OptionList {
                     "tags": [],
                     "text": "Defines the max height of the list element"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "content-height",
                 "reflect": false,
                 "defaultValue": "262"
@@ -956,6 +969,21 @@ export class OptionList {
                 "methodName": "contentHeightChanged"
             }];
     }
+    static get listeners() {
+        return [{
+                "name": "balOptionFocus",
+                "method": "listenToMouseEnter",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "balOptionChange",
+                "method": "listenToOptionChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }
 __decorate([
     Logger('bal-option-list'),
@@ -963,16 +991,4 @@ __decorate([
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)
 ], OptionList.prototype, "createLogger", null);
-__decorate([
-    ListenTo('balOptionFocus', { passive: true }),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", void 0)
-], OptionList.prototype, "listenToMouseEnter", null);
-__decorate([
-    ListenTo('balOptionChange', { passive: false }),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", void 0)
-], OptionList.prototype, "listenToOptionChange", null);
 let balOptionListIds = 0;

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

@@ -101,10 +101,10 @@ export class Pagination {
         const leftControlTitle = i18nControlLabel[this.language].left;
         const rightControlTitle = i18nControlLabel[this.language].right;
         const hasBasicNavigationButtons = this.interface === '' || (isSmall && this.totalPages <= 5);
-        const SmallWithText = () => (h("span", { key: '8d0f477acb2db965fe7ca9a323db754dadb8c2d1', class: Object.assign(Object.assign({}, elList.class()), elList.modifier(`context-${this.interface}`).class()) }, h("span", { key: '25bc274a3580f3103acb6aa21bb0f132da31a4cd' }, this._value), ' / ' + this.totalPages));
-        const PaginationTablet = () => (h("ul", { key: '635a052d90c4d86104752eedf70d28d60a3ea194', class: Object.assign(Object.assign(Object.assign({}, elList.class()), elList.modifier(`context-${this.interface}`).class()), { 'is-disabled': this.disabled }), "data-testid": "bal-pagination-list" }, tabletItems));
-        const PaginationMobile = () => (h("ul", { key: '36bc734dd92d55f93cae88e34c032fbae5239ae2', class: Object.assign(Object.assign(Object.assign({}, elList.class()), elList.modifier(`context-${this.interface}`).class()), { 'is-disabled': this.disabled }), "data-testid": "bal-pagination-list" }, mobileItems));
-        return (h(Host, { key: '1f6888814e691b8f4b46987055e3d474078bac38', class: Object.assign(Object.assign({}, block.class()), block.modifier('is-sticky').class(this.sticky)) }, h("nav", { key: '00eba4def4d24082f102861ef471043c3646a18a', class: Object.assign(Object.assign(Object.assign({}, elNav.class()), elNav.modifier(`context-${this.interface}`).class(this.interface !== '')), elNav.modifier(`align-${this.align}`).class(this.align !== '')), role: "navigation", "aria-label": "pagination" }, h("bal-button", { key: '068a1d8b79deecd129b3280ac4eefb4e6c7ef814', square: true, color: buttonColor, size: buttonSize, flat: flat, class: Object.assign(Object.assign({}, elPrevious.class()), elPrevious.modifier(`context-${this.interface}`).class()), disabled: this._value < 2 || this.disabled, onClick: () => this.previous(), "data-testid": "bal-pagination-controls-left", title: leftControlTitle }, h("bal-icon", { key: '0ceeb68b1426edc0b1425b6bb1236941534ead5d', name: "nav-go-left", size: "small" })), h("bal-button", { key: '3eb18c38c467b0f8bfc2326341e93e236567c060', square: true, color: buttonColor, size: buttonSize, flat: flat, class: Object.assign(Object.assign({}, elNext.class()), elNext.modifier(`context-${this.interface}`).class()), disabled: this._value === this.totalPages || this.disabled, onClick: () => this.next(), "data-testid": "bal-pagination-controls-right", title: rightControlTitle }, h("bal-icon", { key: 'fa8feb6b44def140d75218f387fcfdbb984bd99a', name: "nav-go-right", size: "small" })), hasBasicNavigationButtons && this.isMobile ? h(PaginationMobile, null) : '', hasBasicNavigationButtons && !this.isMobile ? h(PaginationTablet, null) : '', !hasBasicNavigationButtons ? h(SmallWithText, null) : '')));
+        const SmallWithText = () => (h("span", { key: '6fd9b27bbc3078a95b6a1af21c4e11bef1c79e4d', class: Object.assign(Object.assign({}, elList.class()), elList.modifier(`context-${this.interface}`).class()) }, h("span", { key: 'f33eb6a8a51bd338c062bf3ac142b31ec170b4bf' }, this._value), ' / ' + this.totalPages));
+        const PaginationTablet = () => (h("ul", { key: 'af2f5c1c4582c9f87a34ae8d9e18e6f153d6c079', class: Object.assign(Object.assign(Object.assign({}, elList.class()), elList.modifier(`context-${this.interface}`).class()), { 'is-disabled': this.disabled }), "data-testid": "bal-pagination-list" }, tabletItems));
+        const PaginationMobile = () => (h("ul", { key: 'e60525e50e001e65e0f3dfdcab2be7c577d1cb34', class: Object.assign(Object.assign(Object.assign({}, elList.class()), elList.modifier(`context-${this.interface}`).class()), { 'is-disabled': this.disabled }), "data-testid": "bal-pagination-list" }, mobileItems));
+        return (h(Host, { key: 'a82c3987b261b090d73a6a326b0628e9f4431de7', class: Object.assign(Object.assign({}, block.class()), block.modifier('is-sticky').class(this.sticky)) }, h("nav", { key: '3558d69404ce4877651363ffe60f5bf37428a316', class: Object.assign(Object.assign(Object.assign({}, elNav.class()), elNav.modifier(`context-${this.interface}`).class(this.interface !== '')), elNav.modifier(`align-${this.align}`).class(this.align !== '')), role: "navigation", "aria-label": "pagination" }, h("bal-button", { key: 'a7e00cae2c81d3970f946ac21ab56564a10786a7', square: true, color: buttonColor, size: buttonSize, flat: flat, class: Object.assign(Object.assign({}, elPrevious.class()), elPrevious.modifier(`context-${this.interface}`).class()), disabled: this._value < 2 || this.disabled, onClick: () => this.previous(), "data-testid": "bal-pagination-controls-left", title: leftControlTitle }, h("bal-icon", { key: '3b3974da7c2f8d195711d912083ef8021e3d71ca', name: "nav-go-left", size: "small" })), h("bal-button", { key: '1fb819a459e3851768a5664b0bcb8ae6bdfffc83', square: true, color: buttonColor, size: buttonSize, flat: flat, class: Object.assign(Object.assign({}, elNext.class()), elNext.modifier(`context-${this.interface}`).class()), disabled: this._value === this.totalPages || this.disabled, onClick: () => this.next(), "data-testid": "bal-pagination-controls-right", title: rightControlTitle }, h("bal-icon", { key: '28bb33f69928d49ea196efc60f0a539c985c6936', name: "nav-go-right", size: "small" })), hasBasicNavigationButtons && this.isMobile ? h(PaginationMobile, null) : '', hasBasicNavigationButtons && !this.isMobile ? h(PaginationTablet, null) : '', !hasBasicNavigationButtons ? h(SmallWithText, null) : '')));
     }
     static get is() { return "bal-pagination"; }
     static get originalStyleUrls() {
@@ -138,6 +138,8 @@ export class Pagination {
                     "tags": [],
                     "text": "Align the buttons to start, center or end"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "align",
                 "reflect": false,
                 "defaultValue": "''"
@@ -161,6 +163,8 @@ export class Pagination {
                     "tags": [],
                     "text": "Size of the buttons"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "size",
                 "reflect": false,
                 "defaultValue": "''"
@@ -184,6 +188,8 @@ export class Pagination {
                     "tags": [],
                     "text": "Defines the layout of the pagination"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "interface",
                 "reflect": false,
                 "defaultValue": "''"
@@ -202,6 +208,8 @@ export class Pagination {
                     "tags": [],
                     "text": "Disables component"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
@@ -220,6 +228,8 @@ export class Pagination {
                     "tags": [],
                     "text": "Current selected page"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "value",
                 "reflect": false,
                 "defaultValue": "1"
@@ -238,6 +248,8 @@ export class Pagination {
                     "tags": [],
                     "text": "The total amount of pages"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "total-pages",
                 "reflect": false,
                 "defaultValue": "1"
@@ -256,6 +268,8 @@ export class Pagination {
                     "tags": [],
                     "text": "Specify the max visible pages before and after the selected page"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "page-range",
                 "reflect": false,
                 "defaultValue": "2"
@@ -274,6 +288,8 @@ export class Pagination {
                     "tags": [],
                     "text": "If 'true, the pagination will be sticky to the top"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "sticky",
                 "reflect": false,
                 "defaultValue": "false"
@@ -292,6 +308,8 @@ export class Pagination {
                     "tags": [],
                     "text": "If sticky, the top position will be determined by this value"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "top",
                 "reflect": false,
                 "defaultValue": "0"

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

@@ -53,7 +53,7 @@ export class PopoverContent {
     }
     render() {
         const block = BEM.block('popover').element('content');
-        return (h(Host, { key: 'c47c5a6aa96c52a4460894ab274a167be0927d35', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('expanded').class(this.expanded)), block.modifier('spaceless').class(this.spaceless)), block.modifier('no-shadow').class(this.noShadow)), block.modifier(`radius-${this.radius}`).class()), block.modifier(`color-${this.color}`).class()), block.modifier('on-top').class(this.mobileTop)), "data-testid": "bal-popover-content", role: "tooltip", style: this.contentStyle }, h("div", { key: 'dec823beec17dfe48195c3e794dbcfe4725f83d4', class: Object.assign({}, block.element('inner').class()), style: this.innerStyle }, h("slot", { key: 'd8200f831b8569736e27486fd5e975a0f21b76e2' })), h("div", { key: '5cd3727753fa2cf5a841c11b8d48aa7eee31cf2d', class: Object.assign({}, block.element('arrow').class()), "data-popper-arrow": true })));
+        return (h(Host, { key: 'a6a40a129dadcbe55d6d75c64572b1c1aeedf944', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('expanded').class(this.expanded)), block.modifier('spaceless').class(this.spaceless)), block.modifier('no-shadow').class(this.noShadow)), block.modifier(`radius-${this.radius}`).class()), block.modifier(`color-${this.color}`).class()), block.modifier('on-top').class(this.mobileTop)), "data-testid": "bal-popover-content", role: "tooltip", style: this.contentStyle }, h("div", { key: '6204b4d421004e6f3cf1541ed6a2023f3b3bdef1', class: Object.assign({}, block.element('inner').class()), style: this.innerStyle }, h("slot", { key: '71183eaf21a740ed7e20457e9fc3ec302ed2536f' })), h("div", { key: '821519a57d42152641d759aaa350537f7cad59b1', class: Object.assign({}, block.element('arrow').class()), "data-popper-arrow": true })));
     }
     static get is() { return "bal-popover-content"; }
     static get properties() {
@@ -72,6 +72,8 @@ export class PopoverContent {
                     "tags": [],
                     "text": "If `true` the popover has no padding space."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "spaceless",
                 "reflect": false,
                 "defaultValue": "false"
@@ -90,6 +92,8 @@ export class PopoverContent {
                     "tags": [],
                     "text": "Limit the height of the popover content. Pass the amount of pixel."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "scrollable",
                 "reflect": false,
                 "defaultValue": "0"
@@ -108,6 +112,8 @@ export class PopoverContent {
                     "tags": [],
                     "text": "Define the max width of the popover content."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "content-width",
                 "reflect": false,
                 "defaultValue": "0"
@@ -126,6 +132,8 @@ export class PopoverContent {
                     "tags": [],
                     "text": "Define the min width of the popover content."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "content-min-width",
                 "reflect": false,
                 "defaultValue": "0"
@@ -149,6 +157,8 @@ export class PopoverContent {
                     "tags": [],
                     "text": "Defines background color of the content."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "color",
                 "reflect": false,
                 "defaultValue": "'white'"
@@ -167,6 +177,8 @@ export class PopoverContent {
                     "tags": [],
                     "text": "If `true` the content has a min width of 100%."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "expanded",
                 "reflect": false,
                 "defaultValue": "false"
@@ -190,6 +202,8 @@ export class PopoverContent {
                     "tags": [],
                     "text": "Defines border-radius of popover content."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "radius",
                 "reflect": false,
                 "defaultValue": "'normal'"
@@ -208,6 +222,8 @@ export class PopoverContent {
                     "tags": [],
                     "text": "If `true` the popover does not have the shadow"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "no-shadow",
                 "reflect": false,
                 "defaultValue": "false"
@@ -226,6 +242,8 @@ export class PopoverContent {
                     "tags": [],
                     "text": "If `true` the content will have a divider line on top"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "mobile-top",
                 "reflect": false,
                 "defaultValue": "false"

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

@@ -5,7 +5,6 @@ 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++}`;
@@ -243,11 +242,11 @@ export class Popover {
      */
     render() {
         const block = BEM.block('popover');
-        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 => {
+        return (h(Host, { key: '7f7adc347e2bcc9f8acacc57f7e5e3d878e706c8', "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: '4caa1176851cfca5ea5bc51cb5cbf503572686e9', 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", { key: '41482b0196b230235349f86cfb413cc8b35a8dad' })));
+            } })), h("slot", { key: '36ec1137ffb8bc0439bbebcaa39144b9bcf7ed45' })));
     }
     static get is() { return "bal-popover"; }
     static get originalStyleUrls() {
@@ -276,6 +275,8 @@ export class Popover {
                     "tags": [],
                     "text": "If `true` the popover automatically opens on a click"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "auto-trigger",
                 "reflect": false,
                 "defaultValue": "false"
@@ -294,6 +295,8 @@ export class Popover {
                     "tags": [],
                     "text": "If `true` the popover has max-width on tablet and desktop. On mobile it uses the whole viewport."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "hint",
                 "reflect": false,
                 "defaultValue": "false"
@@ -312,6 +315,8 @@ export class Popover {
                     "tags": [],
                     "text": "If `true` the popover shows on hover"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "hover",
                 "reflect": false,
                 "defaultValue": "false"
@@ -330,6 +335,8 @@ export class Popover {
                     "tags": [],
                     "text": "If `true` a little arrow is added, which points to the trigger element"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "arrow",
                 "reflect": false,
                 "defaultValue": "false"
@@ -348,6 +355,8 @@ export class Popover {
                     "tags": [],
                     "text": "If `true` a backdrop is added"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "backdrop",
                 "reflect": false,
                 "defaultValue": "false"
@@ -366,6 +375,8 @@ export class Popover {
                     "tags": [],
                     "text": "If `true` the popover is shown as a tooltip"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "tooltip",
                 "reflect": false,
                 "defaultValue": "false"
@@ -384,6 +395,8 @@ export class Popover {
                     "tags": [],
                     "text": "Define the offset of the popover content."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "offset-x",
                 "reflect": false,
                 "defaultValue": "0"
@@ -402,6 +415,8 @@ export class Popover {
                     "tags": [],
                     "text": "Define the offset of the popover content."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "offset-y",
                 "reflect": false,
                 "defaultValue": "0"
@@ -420,6 +435,8 @@ export class Popover {
                     "tags": [],
                     "text": "Define padding of the overflow"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "padding",
                 "reflect": false,
                 "defaultValue": "0"
@@ -443,6 +460,8 @@ export class Popover {
                     "tags": [],
                     "text": "Define the position of the popover content."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "position",
                 "reflect": false,
                 "defaultValue": "'bottom-start'"
@@ -461,6 +480,8 @@ export class Popover {
                     "tags": [],
                     "text": "If `true` the popover content is open."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "active",
                 "reflect": true,
                 "defaultValue": "false"
@@ -479,6 +500,8 @@ export class Popover {
                     "tags": [],
                     "text": "If `true` there will be no backdrop"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "mobile-top",
                 "reflect": false,
                 "defaultValue": "false"
@@ -662,6 +685,33 @@ export class Popover {
                 "methodName": "activeChanged"
             }];
     }
+    static get listeners() {
+        return [{
+                "name": "balPopoverPrepare",
+                "method": "handlePopoverPrepare",
+                "target": "document",
+                "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'),
@@ -669,30 +719,6 @@ __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),