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

package/dist/collection/components/bal-tabs/components/tab-button.js

@@ -3,7 +3,7 @@ import { BEM } from "../../../utils/bem";
 import { TabIcon } from "./tab-icon";
 import { TabLabel } from "./tab-label";
 import { toKebabCase } from "../../../utils/string";
-export const TabButton = ({ item, tabsId, isFirst, isLast, isMobile, isVertical, accordion, isAccordionOpen, isLinkList, inverted, expanded, spaceless, clickable, iconPosition, context, onSelectTab, hasSubLabelInGroup, dimInactiveElements, }) => {
+export const TabButton = ({ item, tabsId, isFirst, isLast, isMobile, isVertical, accordion, isAccordionOpen, isLinkList, inverted, isExpanded, spaceless, clickable, iconPosition, context, onSelectTab, hasSubLabelInGroup, dimInactiveElements, }) => {
     var _a;
     const bemEl = BEM.block('tabs').element('nav').element('item');
     if (item.invisible) {
@@ -35,5 +35,5 @@ export const TabButton = ({ item, tabsId, isFirst, isLast, isMobile, isVertical,
     if (!isLinkList) {
         attrs['tabindex'] = item.active ? '0' : '-1';
     }
-    return (h(TagType, Object.assign({ id: `${tabsId}-button-${toKebabCase(item.value)}`, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.class()), bemEl.modifier('active').class(item.active)), bemEl.modifier('disabled').class(item.disabled)), bemEl.modifier('clickable').class(clickable)), bemEl.modifier('accordion').class(accordion)), bemEl.modifier('inverted').class(inverted)), bemEl.modifier('expanded').class(expanded)), bemEl.modifier('spaceless').class(spaceless)), bemEl.modifier('first').class(isFirst)), bemEl.modifier('last').class(isLast)), bemEl.modifier('passed').class(item.passed)), bemEl.modifier('vertical').class(isVertical)), bemEl.modifier(`context-${context}`).class(context !== undefined)), bemEl.modifier(`icon-position-${iconPosition}`).class(iconPosition !== 'horizontal')), bemEl.modifier(`display-svg`).class(item.svg && item.svg.length > 0)), bemEl.modifier('group-has-sub-label').class(hasSubLabelInGroup)), bemEl.modifier('dim-inactive-elements').class(dimInactiveElements)), { 'bal-focusable': !item.disabled && !item.invisible }), draggable: false, "data-tabs": tabsId, "data-label": item.label, "data-value": item.value, "data-index": item.index, "data-testid": "bal-tabs-item", "aria-selected": !isTabButton ? undefined : item.active ? 'true' : 'false' }, attrs, { onClick: (ev) => onSelectTab(ev, item) }), item.icon || item.svg ? (h(TabIcon, { accordion: false, item: item, isMobile: isMobile, hasBubble: hasIconBubble, inverted: inverted })) : (''), h(TabLabel, { item: item, isMobile: isMobile, isVertical: isVertical, hasBubble: hasLabelBubble, inverted: inverted, context: context }), accordion && !item.href ? (h(TabIcon, { accordion: accordion, isAccordionOpen: isAccordionOpen, item: item, isMobile: isMobile, hasBubble: hasAccordionIconBubble, inverted: inverted })) : ('')));
+    return (h(TagType, Object.assign({ id: `${tabsId}-button-${toKebabCase(item.value)}`, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.class()), bemEl.modifier('active').class(item.active)), bemEl.modifier('disabled').class(item.disabled)), bemEl.modifier('clickable').class(clickable)), bemEl.modifier('accordion').class(accordion)), bemEl.modifier('inverted').class(inverted)), bemEl.modifier('expanded').class(isExpanded)), bemEl.modifier('spaceless').class(spaceless)), bemEl.modifier('first').class(isFirst)), bemEl.modifier('last').class(isLast)), bemEl.modifier('passed').class(item.passed)), bemEl.modifier('vertical').class(isVertical)), bemEl.modifier(`context-${context}`).class(context !== undefined)), bemEl.modifier(`icon-position-${iconPosition}`).class(iconPosition !== 'horizontal')), bemEl.modifier(`display-svg`).class(item.svg && item.svg.length > 0)), bemEl.modifier('group-has-sub-label').class(hasSubLabelInGroup)), bemEl.modifier('dim-inactive-elements').class(dimInactiveElements)), { 'bal-focusable': !item.disabled && !item.invisible }), draggable: false, "data-tabs": tabsId, "data-label": item.label, "data-value": item.value, "data-index": item.index, "data-testid": "bal-tabs-item", "aria-selected": !isTabButton ? undefined : item.active ? 'true' : 'false' }, attrs, { onClick: (ev) => onSelectTab(ev, item) }), item.icon || item.svg ? (h(TabIcon, { accordion: false, item: item, isMobile: isMobile, hasBubble: hasIconBubble, inverted: inverted })) : (''), h(TabLabel, { item: item, isMobile: isMobile, isVertical: isVertical, isExpanded: isExpanded, hasBubble: hasLabelBubble, inverted: inverted, context: context }), accordion && !item.href ? (h(TabIcon, { accordion: accordion, isAccordionOpen: isAccordionOpen, item: item, isMobile: isMobile, hasBubble: hasAccordionIconBubble, inverted: inverted })) : ('')));
 };

package/dist/collection/components/bal-tabs/components/tab-label.js

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
 import { BEM } from "../../../utils/bem";
-export const TabLabel = ({ item, inverted, hasBubble, isVertical, context }) => {
+export const TabLabel = ({ item, inverted, hasBubble, isExpanded, isVertical, context, }) => {
     const bemEl = BEM.block('tabs').element('nav').element('item').element('label');
-    return (h("span", { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.class()), bemEl.modifier('inverted').class(inverted)), bemEl.modifier('active').class(item.active)), bemEl.modifier('disabled').class(item.disabled)), bemEl.modifier('vertical').class(isVertical)), bemEl.modifier(`context-${context}`).class(context !== undefined)), bemEl.modifier('with-svg').class(item.svg && item.svg.length > 0)), "data-testid": "bal-tabs-item-label" }, item.label, item.subLabel && h("span", { class: bemEl.element('sub-label').class() }, item.subLabel), hasBubble ? (h("bal-badge", { class: Object.assign({}, bemEl.element('bubble').class()), size: "small" }, item.bubble)) : ('')));
+    return (h("span", { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.class()), bemEl.modifier('inverted').class(inverted)), bemEl.modifier('active').class(item.active)), bemEl.modifier('disabled').class(item.disabled)), bemEl.modifier('vertical').class(isVertical)), bemEl.modifier('expanded').class(isExpanded)), bemEl.modifier(`context-${context}`).class(context !== undefined)), bemEl.modifier('with-svg').class(item.svg && item.svg.length > 0)), "data-testid": "bal-tabs-item-label" }, item.label, item.subLabel && h("span", { class: bemEl.element('sub-label').class() }, item.subLabel), hasBubble ? (h("bal-badge", { class: Object.assign({}, bemEl.element('bubble').class()), size: "small" }, item.bubble)) : ('')));
 };

package/dist/collection/components/bal-tabs/components/tab-nav.js

@@ -1,14 +1,17 @@
 import { h } from "@stencil/core";
 import { BEM } from "../../../utils/bem";
-import { stopEventBubbling } from "../../../utils/form-input";
 import { TabButton } from "./tab-button";
-export const TabNav = ({ items, tabsId, hasCarousel, isVertical, inNavbar, isMobile, isTouch, lineActive, isLinkList, border, accordion, isAccordionOpen, inverted, clickable, animated, spaceless, expanded, verticalColSize, iconPosition, context, onSelectTab, dimInactiveElements, }) => {
+export const TabNav = ({ swiper, items, tabsId, isVertical, inNavbar, isMobile, isTouch, lineActive, lineHidden, isLinkList, border, accordion, isAccordionOpen, inverted, clickable, animated, spaceless, expanded, verticalColSize, showSwiperControls, iconPosition, context, onSelectTab, dimInactiveElements, }) => {
     const bemEl = BEM.block('tabs').element('nav');
+    const navInnerEl = bemEl.element('inner');
+    const navContainerEl = bemEl.element('container');
+    const navLineEl = bemEl.element('line');
+    const navBorderEl = bemEl.element('border');
     const tabs = items.filter(tab => !tab.invisible);
     const isFullHeight = inNavbar && !isTouch;
     const hasSubLabelInGroup = items.some(item => {
         return item.subLabel && item.subLabel.length > 0;
     });
-    const Button = ({ item, index }) => (h(TabButton, { item: item, isLinkList: isLinkList, tabsId: tabsId, isFirst: index === 0, isLast: index === tabs.length - 1, isMobile: isMobile, isVertical: isVertical, iconPosition: iconPosition, spaceless: spaceless, inverted: inverted, accordion: accordion, isAccordionOpen: isAccordionOpen, context: context, expanded: expanded, clickable: clickable && !item.disabled, onSelectTab: onSelectTab, hasSubLabelInGroup: hasSubLabelInGroup, dimInactiveElements: dimInactiveElements }));
-    return (h("div", { id: `${tabsId}-nav`, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.class()), bemEl.modifier(`full-height`).class(isFullHeight)), bemEl.modifier(`border`).class(border)), bemEl.modifier(`animated`).class(animated)), bemEl.modifier(`vertical`).class(isVertical)), bemEl.modifier(`expanded`).class(expanded && !isVertical)), bemEl.modifier(`vertical-col-${verticalColSize}`).class(isVertical)) }, hasCarousel ? (h("bal-carousel", { id: `${tabsId}-carousel`, class: Object.assign({}, bemEl.element('carousel').class()), htmlRole: 'tablist', fullHeight: isFullHeight, border: border, inverted: inverted, controls: "small", "items-per-view": "auto", steps: 3, onBalChange: stopEventBubbling }, tabs.map((tab, index) => (h("bal-carousel-item", { htmlRole: '', class: Object.assign(Object.assign({}, bemEl.element('carousel').element('item').class()), bemEl.element('carousel').element('item').modifier('expanded').class(expanded)) }, h(Button, { item: tab, index: index })))), h("div", { id: `${tabsId}-line`, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.element('line').class()), bemEl.element('line').modifier(`active`).class(lineActive)), bemEl.element('line').modifier(`inverted`).class(inverted)), bemEl.element('line').modifier(`animated`).class(animated)), bemEl.element('line').modifier(`vertical`).class(isVertical)) }))) : (tabs.map((tab, index) => h(Button, { item: tab, index: index }))), !hasCarousel ? (h("div", { id: `${tabsId}-border`, class: Object.assign(Object.assign(Object.assign({}, bemEl.element('border').class()), bemEl.element('border').modifier(`inverted`).class(inverted)), bemEl.element('border').modifier(`vertical`).class(isVertical)) })) : (''), !hasCarousel ? (h("div", { id: `${tabsId}-line`, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.element('line').class()), bemEl.element('line').modifier(`active`).class(lineActive)), bemEl.element('line').modifier(`inverted`).class(inverted)), bemEl.element('line').modifier(`animated`).class(animated)), bemEl.element('line').modifier(`vertical`).class(isVertical)) })) : ('')));
+    const Button = ({ item, index }) => (h(TabButton, { item: item, isLinkList: isLinkList, tabsId: tabsId, isFirst: index === 0, isLast: index === tabs.length - 1, isMobile: isMobile, isVertical: isVertical, iconPosition: iconPosition, spaceless: spaceless, inverted: inverted, accordion: accordion, isAccordionOpen: isAccordionOpen, context: context, isExpanded: expanded, clickable: clickable && !item.disabled, onSelectTab: onSelectTab, hasSubLabelInGroup: hasSubLabelInGroup, dimInactiveElements: dimInactiveElements }));
+    return (h("div", { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.class()), bemEl.modifier('vertical').class(isVertical)), bemEl.modifier('full-height').class(isFullHeight)), bemEl.modifier(`vertical-col-${verticalColSize}`).class(isVertical)), swiper.cssSwiper()) }, h("div", { id: `${tabsId}-nav`, class: Object.assign(Object.assign(Object.assign({}, swiper.cssInnerSwiper()), navInnerEl.class()), navInnerEl.modifier(`full-height`).class(isFullHeight)), ref: el => (swiper.innerEl = el) }, h("nav", { id: swiper.containerId, class: Object.assign(Object.assign(Object.assign(Object.assign({}, swiper.cssSwiperContainer()), navContainerEl.class()), navContainerEl.modifier(`vertical`).class(isVertical)), navContainerEl.modifier(`expanded`).class(expanded && !isVertical)), role: 'tablist', ref: el => (swiper.containerEl = el) }, tabs.map((tab, index) => (h(Button, { item: tab, index: index }))), h("div", { id: `${tabsId}-line`, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, navLineEl.class()), navLineEl.modifier(`active`).class(lineActive)), navLineEl.modifier(`inverted`).class(inverted)), navLineEl.modifier(`animated`).class(animated)), navLineEl.modifier(`vertical`).class(isVertical)), navLineEl.modifier(`hidden`).class(lineHidden)) }), border ? (h("div", { id: `${tabsId}-border`, class: Object.assign(Object.assign(Object.assign({}, navBorderEl.class()), navBorderEl.modifier(`inverted`).class(inverted)), navBorderEl.modifier(`vertical`).class(isVertical)) })) : (''))), showSwiperControls ? swiper.renderControls() : ''));
 };

package/dist/collection/components/bal-tabs/components/tab-select.js

@@ -15,7 +15,7 @@ export const TabSelect = ({ items, value, onSelectTab }) => {
             onSelectTab(ev, selectedTab);
         }
     };
-    return (h("bal-select", { class: Object.assign({}, bemEl.class()), value: value, onBalChange: event => onChange(event) }, items
+    return (h("bal-dropdown", { class: Object.assign({}, bemEl.class()), value: value, onBalChange: event => onChange(event) }, items
         .filter(tab => !tab.disabled && !tab.invisible)
-        .map(tab => (h("bal-select-option", { key: tab.value, label: tab.label, value: tab.value }, tab.label)))));
+        .map(tab => (h("bal-option", { key: tab.value, label: tab.label, value: tab.value }, tab.label)))));
 };

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

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class TagGroup {
     render() {
-        return (h(Host, { key: 'd1f82919080730fd2555d25e4e5adda071f0c6a2', class: "bal-tag-group" }, h("slot", { key: '2f0ce67b5870beb486f86341214f5f32f234ae47' })));
+        return (h(Host, { key: '524a094b4adf71e481268ff8a88eabdfe8323b38', class: "bal-tag-group" }, h("slot", { key: 'b03a1908eec3f767f9547f01f44b26c75e7cb198' })));
     }
     static get is() { return "bal-tag-group"; }
 }

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

@@ -29,7 +29,7 @@ export class Tag {
         const hasDisabled = this.disabled;
         const positionClass = `is-${this.position}`;
         const hasPosition = this.position !== undefined;
-        return (h(Host, Object.assign({ key: 'fcb28709fa01ca31a2ae98d59bacfb356e28fd0c', "aria-disabled": this.disabled ? 'true' : null, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(sizeClass).class(hasSize)), block.modifier(colorClass).class(hasColor)), block.modifier(disabledClass).class(hasDisabled)), block.modifier(positionClass).class(hasPosition)), block.modifier('is-invalid').class(this.invalid)) }, this.inheritedAttributes), h("span", { key: 'e82b7f7b34add1277872fc105a327f50b305b2f8', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, elLabel.class()), elLabel.modifier(sizeClass).class(hasSize)), elLabel.modifier(colorClass).class(hasColor)), elLabel.modifier(disabledClass).class(hasDisabled)), elLabel.modifier('is-invalid').class(this.invalid)), "data-testid": "bal-tag-label" }, h("slot", { key: '9a29590870327840f6bbf0c9bedebbcb1be51ba8' })), h("bal-close", Object.assign({ key: 'a236adc61866d6ba1080780813b75806c93ec657', class: Object.assign({}, block.element('close').class()), style: {
+        return (h(Host, Object.assign({ key: 'f7e55913d45b3043066cd32973bfe22ea9cb2e19', "aria-disabled": this.disabled ? 'true' : null, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(sizeClass).class(hasSize)), block.modifier(colorClass).class(hasColor)), block.modifier(disabledClass).class(hasDisabled)), block.modifier(positionClass).class(hasPosition)), block.modifier('is-invalid').class(this.invalid)) }, this.inheritedAttributes), h("span", { key: 'a70a1395177d1717117555d406311161c62a87f1', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, elLabel.class()), elLabel.modifier(sizeClass).class(hasSize)), elLabel.modifier(colorClass).class(hasColor)), elLabel.modifier(disabledClass).class(hasDisabled)), elLabel.modifier('is-invalid').class(this.invalid)), "data-testid": "bal-tag-label" }, h("slot", { key: '9678f086ef39473f3a7a78720b59abba8eeaa0c8' })), h("bal-close", Object.assign({ key: '03f425bbe857348736170c5c75093ed11c8f95d9', class: Object.assign({}, block.element('close').class()), style: {
                 display: this.closable && !this.disabled ? 'flex' : 'none',
             }, size: this.size === 'small' ? 'small' : '', inverted: (['blue', 'primary', 'info', 'success', 'warning', 'danger', 'red', 'purple', 'yellow', 'green'].includes(this.color) &&
                 !this.light) ||
@@ -67,6 +67,8 @@ export class Tag {
                     "tags": [],
                     "text": "The theme type of the tag."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "color",
                 "reflect": false,
                 "defaultValue": "''"
@@ -90,6 +92,8 @@ export class Tag {
                     "tags": [],
                     "text": "The size of the tag element"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "size",
                 "reflect": false,
                 "defaultValue": "''"
@@ -108,6 +112,8 @@ export class Tag {
                     "tags": [],
                     "text": "The theme type of the tag."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "closable",
                 "reflect": false,
                 "defaultValue": "false"
@@ -126,6 +132,8 @@ export class Tag {
                     "tags": [],
                     "text": "Overwrites the default color to invalid style"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "invalid",
                 "reflect": false,
                 "defaultValue": "false"
@@ -144,6 +152,8 @@ export class Tag {
                     "tags": [],
                     "text": "If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
@@ -167,6 +177,8 @@ export class Tag {
                     "tags": [],
                     "text": "Choosing left or center the tag is aligned to that side in the bal-card."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "position",
                 "reflect": false,
                 "defaultValue": "'left'"
@@ -185,6 +197,8 @@ export class Tag {
                     "tags": [],
                     "text": "If `true` a light version of the color is displayed"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "light",
                 "reflect": false,
                 "defaultValue": "false"
@@ -206,6 +220,8 @@ export class Tag {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "transparent",
                 "reflect": false,
                 "defaultValue": "false"

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

@@ -50,10 +50,10 @@ export class Text {
         const Text = this.inline ? 'span' : 'p';
         const color = this.parseColor();
         const block = BEM.block('text');
-        return (h(Host, { key: '54ea51b4d2db0793307072aa6dd3bd5969f4e1d0', class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`space-${this.space}`).class(this.space !== '')), block.modifier(`inline`).class(this.inline)) }, h(Text, { key: 'c894a460f369a284910f224b430dd7fc4b9b5123', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('text').class()), block.element('text').modifier(`color-${color}`).class(!!color)), block.element('text').modifier(`bold`).class(this.bold)), block.element('text').modifier(`heading`).class(this.heading)), block.element('text').modifier(`shadow`).class(this.shadow)), block.element('text').modifier(`no-wrap`).class(this.noWrap)), block
+        return (h(Host, { key: '410f0e92f74f64df3047a4c2ae64f2ff4dfa1740', class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`space-${this.space}`).class(this.space !== '')), block.modifier(`inline`).class(this.inline)) }, h(Text, { key: 'beef074e67dc900f2580e03f2d8944a5257b517a', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('text').class()), block.element('text').modifier(`color-${color}`).class(!!color)), block.element('text').modifier(`bold`).class(this.bold)), block.element('text').modifier(`heading`).class(this.heading)), block.element('text').modifier(`shadow`).class(this.shadow)), block.element('text').modifier(`no-wrap`).class(this.noWrap)), block
                 .element('text')
                 .modifier(`size-${this.size}`)
-                .class(this.size !== '')), "data-testid": "bal-text" }, h("slot", { key: '94c09c5d469712da76d9ca0c4a80222c3e76f8a3' }))));
+                .class(this.size !== '')), "data-testid": "bal-text" }, h("slot", { key: '3845390717b94d779233d0f02702231d8144a54e' }))));
     }
     static get is() { return "bal-text"; }
     static get originalStyleUrls() {
@@ -87,6 +87,8 @@ export class Text {
                     "tags": [],
                     "text": "Defines the size of the paragraph"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "size",
                 "reflect": false,
                 "defaultValue": "''"
@@ -105,6 +107,8 @@ export class Text {
                     "tags": [],
                     "text": "If `true` the text has heading font family"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "heading",
                 "reflect": false,
                 "defaultValue": "false"
@@ -123,6 +127,8 @@ export class Text {
                     "tags": [],
                     "text": "When true, the text will be truncated with a text overflow ellipsis instead of wrapping.\nPlease note that text overflow can only occur in block or inline-block level elements,\nas these elements require a width to overflow."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "no-wrap",
                 "reflect": false,
                 "defaultValue": "false"
@@ -141,6 +147,8 @@ export class Text {
                     "tags": [],
                     "text": "If `true` the text is bold"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "bold",
                 "reflect": false,
                 "defaultValue": "false"
@@ -159,6 +167,8 @@ export class Text {
                     "tags": [],
                     "text": "If `true` the text is shown as a display inline"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "inline",
                 "reflect": false,
                 "defaultValue": "false"
@@ -182,6 +192,8 @@ export class Text {
                     "tags": [],
                     "text": "Defines the color of the text."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "color",
                 "reflect": false,
                 "defaultValue": "''"
@@ -205,6 +217,8 @@ export class Text {
                     "tags": [],
                     "text": "Defines at which position the heading has spacing."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "space",
                 "reflect": false,
                 "defaultValue": "''"
@@ -223,6 +237,8 @@ export class Text {
                     "tags": [],
                     "text": "If `true` the color gets inverted for dark backgrounds"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "inverted",
                 "reflect": false,
                 "defaultValue": "false"
@@ -241,6 +257,8 @@ export class Text {
                     "tags": [],
                     "text": "If `true` adds a text shadow to improve readability on image background"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "shadow",
                 "reflect": false,
                 "defaultValue": "false"
@@ -259,6 +277,8 @@ export class Text {
                     "tags": [],
                     "text": "If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "undefined"
@@ -277,6 +297,8 @@ export class Text {
                     "tags": [],
                     "text": "If `true` the component gets a invalid style."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "invalid",
                 "reflect": false,
                 "defaultValue": "undefined"
@@ -298,6 +320,8 @@ export class Text {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "hovered",
                 "reflect": false,
                 "defaultValue": "false"
@@ -319,6 +343,8 @@ export class Text {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "pressed",
                 "reflect": false,
                 "defaultValue": "false"

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

@@ -1,11 +1,9 @@
-import { __decorate, __metadata } from "tslib";
 import { h, Host, } from "@stencil/core";
 import { getInputTarget, inputHandleBlur, inputHandleChange, inputHandleClick, inputHandleFocus, inputHandleHostClick, inputHandleReset, inputListenOnClick, inputSetBlur, inputSetFocus, } from "../../utils/form-input";
 import { debounceEvent } from "../../utils/helpers";
 import { inheritAttributes } from "../../utils/attributes";
 import { BEM } from "../../utils/bem";
 import { defaultBalAriaForm } from "../../utils/form";
-import { ListenTo } from "../../utils/listen";
 export class Textarea {
     constructor() {
         this.inputId = `bal-textarea-${TextareaIds++}`;
@@ -108,7 +106,7 @@ export class Textarea {
         const value = this.getValue();
         const block = BEM.block('textarea');
         const elNative = block.element('native');
-        return (h(Host, { key: 'ab14f059d3785673e315d1201f2f6f400def090f', onClick: this.handleClick, "aria-disabled": this.disabled ? 'true' : null, class: Object.assign({}, block.class()) }, h("textarea", Object.assign({ key: '9cacf375b46777e0f49ab12d7b0bf7a36223c116', class: Object.assign(Object.assign({}, elNative.class()), { 'textarea': true, 'is-disabled': this.disabled || this.readonly, 'is-danger': this.invalid, 'clickable': this.clickable }), "data-testid": "bal-textarea-input", ref: inputEl => (this.nativeInput = inputEl), name: this.name, id: this.ariaForm.controlId || this.inputId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, disabled: this.disabled, readonly: this.readonly, required: this.required, autoCapitalize: this.autocapitalize, autocomplete: this.autocomplete, autoFocus: this.autofocus, minLength: this.minLength, maxLength: this.maxLength, placeholder: this.placeholder, inputMode: this.inputmode, value: this.value, cols: this.cols, rows: this.rows, wrap: this.wrap, onFocus: this.onFocus, onInput: ev => this.onInput(ev), onBlur: this.onBlur, onClick: this.onClick, onKeyPress: e => this.balKeyPress.emit(e) }, this.inheritedAttributes), value, h("slot", { key: 'ccf5fb267d10b8b51532797a4ee71e4ee9fab52e' }))));
+        return (h(Host, { key: '149d29f8d5914cf4b32beb3fe6e1e7e62a85db08', onClick: this.handleClick, "aria-disabled": this.disabled ? 'true' : null, class: Object.assign({}, block.class()) }, h("textarea", Object.assign({ key: '52709d8de1e3b4e02f500d6bcec497156f06fc1d', class: Object.assign(Object.assign({}, elNative.class()), { 'textarea': true, 'is-disabled': this.disabled || this.readonly, 'is-danger': this.invalid, 'clickable': this.clickable }), "data-testid": "bal-textarea-input", ref: inputEl => (this.nativeInput = inputEl), name: this.name, id: this.ariaForm.controlId || this.inputId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, disabled: this.disabled, readonly: this.readonly, required: this.required, autoCapitalize: this.autocapitalize, autocomplete: this.autocomplete, autoFocus: this.autofocus, minLength: this.minLength, maxLength: this.maxLength, placeholder: this.placeholder, inputMode: this.inputmode, value: this.value, cols: this.cols, rows: this.rows, wrap: this.wrap, onFocus: this.onFocus, onInput: ev => this.onInput(ev), onBlur: this.onBlur, onClick: this.onClick, onKeyPress: e => this.balKeyPress.emit(e) }, this.inheritedAttributes), value, h("slot", { key: '48a083ac55240858d9cbf656631739cc349b6cf1' }))));
     }
     static get is() { return "bal-textarea"; }
     static get originalStyleUrls() {
@@ -137,6 +135,8 @@ export class Textarea {
                     "tags": [],
                     "text": "The name of the control, which is submitted with the form data."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "name",
                 "reflect": false,
                 "defaultValue": "this.inputId"
@@ -155,6 +155,8 @@ export class Textarea {
                     "tags": [],
                     "text": "If `true` the component gets a invalid style."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "invalid",
                 "reflect": false,
                 "defaultValue": "false"
@@ -173,6 +175,8 @@ export class Textarea {
                     "tags": [],
                     "text": "Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "autocapitalize",
                 "reflect": false,
                 "defaultValue": "'none'"
@@ -196,6 +200,8 @@ export class Textarea {
                     "tags": [],
                     "text": "Indicates whether the value of the control can be automatically completed by the browser."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "autocomplete",
                 "reflect": false,
                 "defaultValue": "'off'"
@@ -214,6 +220,8 @@ export class Textarea {
                     "tags": [],
                     "text": "This Boolean attribute lets you specify that a form control should have input focus when the page loads."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "autofocus",
                 "reflect": false,
                 "defaultValue": "false"
@@ -232,6 +240,8 @@ export class Textarea {
                     "tags": [],
                     "text": "Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "debounce",
                 "reflect": false,
                 "defaultValue": "0"
@@ -250,6 +260,8 @@ export class Textarea {
                     "tags": [],
                     "text": "Instructional text that shows before the input has a value."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "placeholder",
                 "reflect": false
             },
@@ -267,6 +279,8 @@ export class Textarea {
                     "tags": [],
                     "text": "If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "max-length",
                 "reflect": false
             },
@@ -284,6 +298,8 @@ export class Textarea {
                     "tags": [],
                     "text": "If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "min-length",
                 "reflect": false
             },
@@ -301,6 +317,8 @@ export class Textarea {
                     "tags": [],
                     "text": "If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
@@ -319,6 +337,8 @@ export class Textarea {
                     "tags": [],
                     "text": "If `true` the element can not mutated, meaning the user can not edit the control."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "readonly",
                 "reflect": false,
                 "defaultValue": "false"
@@ -337,6 +357,8 @@ export class Textarea {
                     "tags": [],
                     "text": "The visible width of the text control, in average character widths. If it is specified, it must be a positive integer."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "cols",
                 "reflect": false
             },
@@ -354,6 +376,8 @@ export class Textarea {
                     "tags": [],
                     "text": "The number of visible text lines for the control."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "rows",
                 "reflect": false
             },
@@ -376,6 +400,8 @@ export class Textarea {
                     "tags": [],
                     "text": "Indicates how the control wraps text."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "wrap",
                 "reflect": false
             },
@@ -393,6 +419,8 @@ export class Textarea {
                     "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"
@@ -411,6 +439,8 @@ export class Textarea {
                     "tags": [],
                     "text": "If `true` the input gets a clickable cursor style"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "clickable",
                 "reflect": false,
                 "defaultValue": "false"
@@ -434,6 +464,8 @@ export class Textarea {
                     "tags": [],
                     "text": "A hint to the browser for which keyboard to display.\nPossible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n`\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "inputmode",
                 "reflect": false
             },
@@ -451,6 +483,8 @@ export class Textarea {
                     "tags": [],
                     "text": "The value of the textarea."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "value",
                 "reflect": false,
                 "defaultValue": "''"
@@ -469,6 +503,8 @@ export class Textarea {
                     "tags": [],
                     "text": "If `true`, in Angular reactive forms the control will not be set invalid"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "auto-invalid-off",
                 "reflect": true,
                 "defaultValue": "false"
@@ -682,17 +718,20 @@ export class Textarea {
                 "methodName": "debounceChanged"
             }];
     }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "listenOnClick",
+                "target": "document",
+                "capture": true,
+                "passive": false
+            }, {
+                "name": "reset",
+                "method": "resetHandler",
+                "target": "document",
+                "capture": true,
+                "passive": false
+            }];
+    }
 }
-__decorate([
-    ListenTo('click', { capture: true, target: 'document' }),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [UIEvent]),
-    __metadata("design:returntype", void 0)
-], Textarea.prototype, "listenOnClick", null);
-__decorate([
-    ListenTo('reset', { capture: true, target: 'document' }),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [UIEvent]),
-    __metadata("design:returntype", void 0)
-], Textarea.prototype, "resetHandler", null);
 let TextareaIds = 0;