@baloise/ds-core 18.1.0 → 18.2.0-nightly.20250326

package/components/bal-list-item2.js

@@ -1,8 +1,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
 import { B as BEM } from './bem.js';
-import { L as Logger } from './log.js';
 import { n as raf, t as transitionEndAsync } from './helpers.js';
+import { L as Logger } from './log.js';
 import { L as ListenToConfig } from './config.decorator.js';
 
 const ListItem = /*@__PURE__*/ proxyCustomElement(class ListItem extends HTMLElement {
@@ -165,6 +165,7 @@ const ListItem = /*@__PURE__*/ proxyCustomElement(class ListItem extends HTMLEle
         this.accordion = false;
         this.subAccordionItem = false;
         this.href = '';
+        this.rel = undefined;
         this.target = '_self';
         this.download = undefined;
     }
@@ -240,7 +241,7 @@ const ListItem = /*@__PURE__*/ proxyCustomElement(class ListItem extends HTMLEle
         const trigger = item.element('trigger');
         const basicClasses = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, item.class()), item.modifier('disabled').class(this.disabled)), item.modifier('selected').class(this.selected)), item.modifier('animated').class(this.animated)), item.modifier('accordion').class(this.accordion)), item.modifier('sub-accordion').class(this.subAccordionItem)), item.modifier('active').class(this.accordionOpen)), item.modifier('expanding').class(this.state === 8 /* AccordionState.Expanding */)), item.modifier('expanded').class(this.state === 4 /* AccordionState.Expanded */)), item.modifier('collapsing').class(this.state === 2 /* AccordionState.Collapsing */)), item.modifier('collapsed').class(this.state === 1 /* AccordionState.Collapsed */)), item.modifier('clickable').class(!this.disabled && (this.clickable || this.href.length > 0 || this.accordion)));
         if (this.href.length > 0 && !this.disabled) {
-            return (h(Host, { role: "listitem", class: Object.assign({}, basicClasses) }, h("a", { class: Object.assign({}, trigger.class()), href: this.href, target: this.target, download: this.download, onClick: (ev) => this.onClickTrigger(ev) }, h("slot", null))));
+            return (h(Host, { role: "listitem", class: Object.assign({}, basicClasses) }, h("a", { class: Object.assign({}, trigger.class()), rel: this.rel, href: this.href, target: this.target, download: this.download, onClick: (ev) => this.onClickTrigger(ev) }, h("slot", null))));
         }
         if (this.clickable) {
             return (h(Host, { role: "listitem", class: Object.assign({}, basicClasses) }, h("button", { class: Object.assign({}, trigger.class()), disabled: this.disabled, onClick: (ev) => this.onClickTrigger(ev) }, h("slot", null))));
@@ -258,6 +259,7 @@ const ListItem = /*@__PURE__*/ proxyCustomElement(class ListItem extends HTMLEle
         "accordion": [4],
         "subAccordionItem": [4, "sub-accordion-item"],
         "href": [1],
+        "rel": [1],
         "target": [1],
         "download": [1],
         "state": [32],

package/components/bal-nav.js

@@ -49,6 +49,7 @@ class NavLinkItem {
         this.id = `nav-link-item-${NavLinkItemIDs++}`;
         this.value = item.value || this.id;
         this.href = item.href;
+        this.rel = item.rel;
         this.target = item.target;
         this.active = !!item.active;
         this.clickable = !!item.clickable;
@@ -77,6 +78,7 @@ class NavLinkItem {
             label: this.label,
             value: this.value,
             href: this.href,
+            rel: this.rel,
             target: this.target,
             data: this.data,
         };
@@ -84,7 +86,7 @@ class NavLinkItem {
     renderTouch(_context) {
         const block = BEM.block('nav');
         return (h("li", null,
-            h("a", { id: this.id, class: Object.assign(Object.assign(Object.assign({}, block.element('mobile-links').class()), block.element('mobile-links').modifier('selected').class(this.active)), block.element('mobile-links').modifier('clickable').class(this.clickable)), href: this.href, target: this.target, onClick: ev => this.onClick(ev) }, this.label)));
+            h("a", { id: this.id, class: Object.assign(Object.assign(Object.assign({}, block.element('mobile-links').class()), block.element('mobile-links').modifier('selected').class(this.active)), block.element('mobile-links').modifier('clickable').class(this.clickable)), href: this.href, rel: this.rel, target: this.target, onClick: ev => this.onClick(ev) }, this.label)));
     }
     render(_context) {
         return (h("bal-nav-link", { role: "listitem", href: this.href, target: this.target, clickable: this.clickable, selected: this.active, onClick: ev => this.onClick(ev) }, this.label));
@@ -111,7 +113,7 @@ class NavSectionLinkItem extends NavLinkItem {
         const block = BEM.block('nav');
         const hasItems = this.linkItems && this.linkItems.length > 0;
         return (h("li", null,
-            h("a", { id: this.id, class: Object.assign(Object.assign(Object.assign({}, block.element('mobile-section-item').class()), block.element('mobile-section-item').modifier('selected').class(this.active)), block.element('mobile-section-item').modifier('clickable').class(this.clickable)), href: this.href, target: this.target, onClick: ev => this.onClick(ev) }, this.label),
+            h("a", { id: this.id, class: Object.assign(Object.assign(Object.assign({}, block.element('mobile-section-item').class()), block.element('mobile-section-item').modifier('selected').class(this.active)), block.element('mobile-section-item').modifier('clickable').class(this.clickable)), href: this.href, rel: this.rel, target: this.target, onClick: ev => this.onClick(ev) }, this.label),
             hasItems ? (h("ul", { class: Object.assign({}, block.element('mobile-links-list').class()) }, this.linkItems.map(item => item.renderTouch()))) : ('')));
     }
     render(_context) {
@@ -139,7 +141,7 @@ class NavServiceLinkItem extends NavLinkItem {
         const block = BEM.block('nav');
         const hasItems = this.linkItems && this.linkItems.length > 0;
         return (h("li", { class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('mobile-service-item').class()), block.element('mobile-service-item').modifier(`color-${this.color}`).class()), block.element('mobile-service-item').modifier('selected').class(this.active)), block.element('mobile-service-item').modifier('clickable').class(this.clickable)) },
-            h("a", { id: this.id, href: this.href, target: this.target, onClick: ev => this.onClick(ev) }, this.label),
+            h("a", { id: this.id, href: this.href, rel: this.rel, target: this.target, onClick: ev => this.onClick(ev) }, this.label),
             hasItems ? (h("ul", { class: Object.assign({}, block.element('mobile-links-list').class()) }, this.linkItems.map(item => item.renderTouch()))) : ('')));
     }
     render(_context) {
@@ -150,9 +152,9 @@ class NavServiceLinkItem extends NavLinkItem {
 }
 let NavServiceLinkItemIDs = 0;
 
-const AccordionButton = ({ id, label, level, open, link, href, target, onClick, }) => {
+const AccordionButton = ({ id, label, level, open, link, href, rel, target, onClick, }) => {
     const block = BEM.block('nav');
-    return link ? (h("a", { id: id, class: Object.assign({}, block.element(`mobile-${level}-item`).class()), href: href, target: target, onClick: ev => onClick(ev) },
+    return link ? (h("a", { id: id, class: Object.assign({}, block.element(`mobile-${level}-item`).class()), href: href, rel: rel, target: target, onClick: ev => onClick(ev) },
         h("span", null, label))) : (h("button", { id: id, class: Object.assign({}, block.element(`mobile-${level}-item`).class()), onClick: ev => onClick(ev) },
         h("span", null, label),
         h("bal-icon", { name: "nav-go-down", size: "small", turn: open })));
@@ -166,7 +168,7 @@ const OverviewLink = ({ item, isMenu, onClick, isVisible }) => {
     return (h("a", { class: Object.assign(Object.assign(Object.assign({}, block.element('mobile-overview-link').class()), block.element('mobile-overview-link').modifier('menu').class(!!isMenu)), block
             .element('mobile-overview-link')
             .modifier('invisible')
-            .class(isVisible === false)), href: item.href, target: item.target, onClick: ev => onClick(ev) },
+            .class(isVisible === false)), href: item.href, rel: item.rel, target: item.target, onClick: ev => onClick(ev) },
         item.label,
         " ",
         item.label ? '➞' : ''));

package/components/bal-navbar-brand.js

@@ -1,9 +1,9 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
 import { B as BEM } from './bem.js';
-import { B as BalScrollHandler } from './scroll.js';
 import { b as balBrowser } from './browser.js';
 import { i as wait } from './helpers.js';
+import { B as BalScrollHandler } from './scroll.js';
 import { d as defineCustomElement$5 } from './bal-button2.js';
 import { d as defineCustomElement$4 } from './bal-icon2.js';
 import { d as defineCustomElement$3 } from './bal-logo2.js';
@@ -55,6 +55,7 @@ const NavbarBrand = /*@__PURE__*/ proxyCustomElement(class NavbarBrand extends H
         this.language = defaultConfig.language;
         this.isMenuActive = false;
         this.href = '';
+        this.rel = undefined;
         this.logoClickable = false;
         this.logoLabel = undefined;
         this.target = '_self';
@@ -117,7 +118,7 @@ const NavbarBrand = /*@__PURE__*/ proxyCustomElement(class NavbarBrand extends H
         const navbarBrandEl = BEM.block('navbar').element('brand');
         const logoTemplate = this.logo ? (h("img", { class: Object.assign({}, navbarBrandEl.element('logo').class()), src: this.logo, alt: "" })) : (h("bal-logo", { animated: this.animated, color: 'white', size: this.logoSize }));
         const logoLabel = this.logoLabel ? this.logoLabel : i18nBalNavbarBrand[this.language].logoButtonLabel;
-        return (h(Host, { key: '68848bc9042cea0a8da2368dce7bddb8ffa349f1', class: Object.assign(Object.assign({}, navbarBrandEl.class()), navbarBrandEl.modifier(`context-${this.interface}`).class()) }, this.href ? (h("a", { "aria-label": logoLabel, title: logoLabel, href: this.href, target: this.target, onClick: (ev) => this.balNavigate.emit(ev) }, logoTemplate)) : this.logoClickable ? (h("button", { "aria-label": logoLabel, title: logoLabel, onClick: (ev) => this.balNavigate.emit(ev) }, logoTemplate)) : (logoTemplate), h("span", { key: '048af402cdd3bd273b62373dd9b99cbf1f744c56', class: Object.assign({}, navbarBrandEl.element('title').class()) }, h("slot", { key: 'e03caae5038304a1513400972c36e2eb2e8981a6' })), h("bal-button", { key: 'c9aa9ea6503771f47fa7fd6e6f12cb0030903a86', class: Object.assign(Object.assign({}, navbarBrandEl.element('burger').class()), navbarBrandEl
+        return (h(Host, { key: '89cac098cf15e08c2d48748b6eb2cc184ed57292', class: Object.assign(Object.assign({}, navbarBrandEl.class()), navbarBrandEl.modifier(`context-${this.interface}`).class()) }, this.href ? (h("a", { "aria-label": logoLabel, title: logoLabel, href: this.href, rel: this.rel, target: this.target, onClick: (ev) => this.balNavigate.emit(ev) }, logoTemplate)) : this.logoClickable ? (h("button", { "aria-label": logoLabel, title: logoLabel, onClick: (ev) => this.balNavigate.emit(ev) }, logoTemplate)) : (logoTemplate), h("span", { key: 'b5807bd115fe7e7d5f75a7d319b810ad33c1db39', class: Object.assign({}, navbarBrandEl.element('title').class()) }, h("slot", { key: '14741534401ef235bee19db0d4aead5ec437c501' })), h("bal-button", { key: '9104e683dd114554c8ec84f4b20abd13e2c77dfe', class: Object.assign(Object.assign({}, navbarBrandEl.element('burger').class()), navbarBrandEl
                 .element('burger')
                 .modifier('hidden')
                 .class(this.interface === 'simple')), color: "light", inverted: true, square: true, icon: this.isMenuActive ? 'close' : 'menu-bars', onClick: () => this.onClick() })));
@@ -125,6 +126,7 @@ const NavbarBrand = /*@__PURE__*/ proxyCustomElement(class NavbarBrand extends H
     get el() { return this; }
 }, [4, "bal-navbar-brand", {
         "href": [1],
+        "rel": [1],
         "logoClickable": [4, "logo-clickable"],
         "logoLabel": [1, "logo-label"],
         "target": [1],

package/components/bal-select2.js

@@ -208,7 +208,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
     updateRawValue(newValue, isHuman = true) {
         if (!areArraysEqual(newValue, this.rawValue || [])) {
             this.rawValue = [...newValue];
-            this.syncNativeInput();
+            this.syncNativeInput(isHuman);
             if (this.didInit && isHuman === true) {
                 if (this.multiple) {
                     if (lodash_isnil(this.rawValue)) {
@@ -669,7 +669,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
             this.updateRawValue(newRawValue, isHuman);
         }
     }
-    syncNativeInput() {
+    syncNativeInput(isHuman = true) {
         if (!this.multiple) {
             if (length(this.rawValue) > 0) {
                 const valuesArray = getValues(this.rawValue);
@@ -679,9 +679,9 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
                 }
                 return this.updateInputValue(label);
             }
-            else {
-                return this.updateInputValue('');
-            }
+        }
+        if (!isHuman && length(this.rawValue) === 0) {
+            return this.updateInputValue('');
         }
         return Promise.resolve();
     }
@@ -722,7 +722,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
      */
     render() {
         var _a;
-        const Chip = (props) => (h("bal-tag", { key: '7533b62273766a103266239b7ca7388a29a7ca2c', size: "", closable: !this.disabled, disabled: this.disabled, invalid: this.invalid, tabindex: -1, onBalCloseClick: _ => this.removeValue(props.value), "data-testid": "bal-select-chip" }, findLabelByValue(this.options, props.value) || props.value));
+        const Chip = (props) => (h("bal-tag", { key: '5bcf5db754537ec86b2c332f2c63ae1d28f04f98', size: "", closable: !this.disabled, disabled: this.disabled, invalid: this.invalid, tabindex: -1, onBalCloseClick: _ => this.removeValue(props.value), "data-testid": "bal-select-chip" }, findLabelByValue(this.options, props.value) || props.value));
         const valuesArray = getValues(this.rawValue);
         const block = BEM.block('select');
         const nativeEl = block.element('native');
@@ -736,19 +736,19 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
         const optionContentEl = optionEl.element('content');
         const optionContentCheckboxEl = optionContentEl.element('checkbox');
         const optionContentLabelEl = optionContentEl.element('label');
-        return (h(Host, { key: '2b5f68df5724be552d0e52b80e3f2f3cf4904904', role: "listbox", onClick: this.handleClick, "aria-disabled": ariaBooleanToString(this.disabled), "data-value": (_a = this.rawValue) === null || _a === void 0 ? void 0 : _a.map(v => findLabelByValue(this.options, v)).join(','), class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('disabled').class(this.disabled || this.readonly)), block.modifier('inverted').class(this.inverted)), block.modifier('inverted-footer').class(this.inverted)) }, h("select", { key: '86217a832be6b5b4ffe4e624082cc7f21dd92c93', class: Object.assign({}, nativeEl.class()), name: this.name, multiple: this.multiple, required: this.required, tabindex: -1, ref: el => (this.nativeSelectEl = el) }, valuesArray.map((value) => (h("option", { key: value, value: value, selected: true }, value)))), h("bal-popover", { key: 'b051798999057bd3d58279b2bdae7a2e66f1f8c5', onBalChange: this.handlePopoverChange, ref: el => (this.popoverElement = el) }, h("div", { key: '6a2201296c6937a30aa176899d6774878728b096', "bal-popover-trigger": true, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, controlEl.class()), controlEl.modifier('invalid').class(this.invalid)), controlEl.modifier('disabled').class(this.disabled || this.readonly)), controlEl.modifier('focused').class(this.isPopoverOpen)), controlEl.modifier('inverted-footer').class(this.inverted)) }, h("div", { key: '21306e3a37d4e5ac70a0487c704455ab76d90873', class: Object.assign(Object.assign({}, controlSelectionsEl.class()), controlSelectionsEl
+        return (h(Host, { key: '8a2ed44d1007220a11cba788bc215e07417797f8', role: "listbox", onClick: this.handleClick, "aria-disabled": ariaBooleanToString(this.disabled), "data-value": (_a = this.rawValue) === null || _a === void 0 ? void 0 : _a.map(v => findLabelByValue(this.options, v)).join(','), class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('disabled').class(this.disabled || this.readonly)), block.modifier('inverted').class(this.inverted)), block.modifier('inverted-footer').class(this.inverted)) }, h("select", { key: 'b9605f9d566c9b5637dc4fed4a49370e04ce238b', class: Object.assign({}, nativeEl.class()), name: this.name, multiple: this.multiple, required: this.required, tabindex: -1, ref: el => (this.nativeSelectEl = el) }, valuesArray.map((value) => (h("option", { key: value, value: value, selected: true }, value)))), h("bal-popover", { key: '2116e76113fb0cd238e6a1b7a551c1e45c8cee47', onBalChange: this.handlePopoverChange, ref: el => (this.popoverElement = el) }, h("div", { key: '7d77bf05a11bdf40b06732099f21fb4eb151ed52', "bal-popover-trigger": true, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, controlEl.class()), controlEl.modifier('invalid').class(this.invalid)), controlEl.modifier('disabled').class(this.disabled || this.readonly)), controlEl.modifier('focused').class(this.isPopoverOpen)), controlEl.modifier('inverted-footer').class(this.inverted)) }, h("div", { key: '5a52ce88c32363ea2c69e3b4008568674f9040b2', class: Object.assign(Object.assign({}, controlSelectionsEl.class()), controlSelectionsEl
                 .modifier('clickable')
                 .class(!this.isPopoverOpen && !this.disabled && !this.readonly)), onClick: this.handleInputClick, ref: el => (this.selectionEl = el) }, valuesArray
             .filter(_ => this.multiple)
-            .map((value) => (h(Chip, { value: value }))), h("input", { key: '1225023645508847339dd1fbd6815771fd52b923', type: "text", class: Object.assign(Object.assign({}, controlInputEl.class()), { 'input': true, 'is-inverted': this.inverted, 'is-danger': this.invalid, 'is-disabled': this.disabled || this.readonly, 'is-clickable': !this.isPopoverOpen && !this.disabled && !this.readonly, 'data-test-select-input': true }), 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": ariaBooleanToString(this.disabled), "data-testid": "bal-select-input", autocomplete: this.autocomplete, "aria-autocomplete": this.autocomplete === 'off' ? 'none' : null, placeholder: this.inputPlaceholder, readonly: !this.typeahead || this.disabled || this.readonly, contentEditable: this.typeahead, disabled: this.disabled, maxLength: this.maxLength, tabindex: this.balTabindex, onInput: this.handleInput, onClick: this.handleInputClick, onChange: this.handleInputChange, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, onKeyPress: this.handleKeyPress, ref: el => (this.inputElement = el) })), !this.freeSolo && !this.loading ? (h("bal-icon", { class: Object.assign(Object.assign(Object.assign({}, controlIconEl.class()), controlIconEl.modifier('loading').class(this.loading)), controlIconEl.modifier('clickable').class(!this.disabled && !this.readonly)), name: !this.inverted ? 'caret-down' : 'caret-up', color: this.disabled || this.readonly
+            .map((value) => (h(Chip, { value: value }))), h("input", { key: '1329705b31e8846d7c8cad7736204575d2bb68a6', type: "text", class: Object.assign(Object.assign({}, controlInputEl.class()), { 'input': true, 'is-inverted': this.inverted, 'is-danger': this.invalid, 'is-disabled': this.disabled || this.readonly, 'is-clickable': !this.isPopoverOpen && !this.disabled && !this.readonly, 'data-test-select-input': true }), 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": ariaBooleanToString(this.disabled), "data-testid": "bal-select-input", autocomplete: this.autocomplete, "aria-autocomplete": this.autocomplete === 'off' ? 'none' : null, placeholder: this.inputPlaceholder, readonly: !this.typeahead || this.disabled || this.readonly, contentEditable: this.typeahead, disabled: this.disabled, maxLength: this.maxLength, tabindex: this.balTabindex, onInput: this.handleInput, onClick: this.handleInputClick, onChange: this.handleInputChange, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, onKeyPress: this.handleKeyPress, ref: el => (this.inputElement = el) })), !this.freeSolo && !this.loading ? (h("bal-icon", { class: Object.assign(Object.assign(Object.assign({}, controlIconEl.class()), controlIconEl.modifier('loading').class(this.loading)), controlIconEl.modifier('clickable').class(!this.disabled && !this.readonly)), name: !this.inverted ? 'caret-down' : 'caret-up', color: this.disabled || this.readonly
                 ? 'grey-light'
                 : this.inverted
                     ? 'white'
                     : this.invalid
                         ? 'danger'
-                        : 'primary', turn: this.isPopoverOpen, onClick: ev => this.handleInputClick(ev, true), size: !this.inverted ? '' : 'x-small' })) : ('')), h("bal-popover-content", { key: 'bf3bf117bda916e83f1c0429384ac4c810a7e766', class: Object.assign({}, popoverContentEl.class()), scrollable: this.scrollable, spaceless: true, expanded: true }, this.optionArray.map((option, index) => (h("button", { key: option.value, type: "button", role: "option", id: option.id, "data-value": option.value, "data-label": option.label, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, optionEl.class()), optionEl
+                        : 'primary', turn: this.isPopoverOpen, onClick: ev => this.handleInputClick(ev, true), size: !this.inverted ? '' : 'x-small' })) : ('')), h("bal-popover-content", { key: 'ecc1305ae4c29e9fd3d131e69dc781deb4bd4bdc', class: Object.assign({}, popoverContentEl.class()), scrollable: this.scrollable, spaceless: true, expanded: true }, this.optionArray.map((option, index) => (h("button", { key: option.value, type: "button", role: "option", id: option.id, "data-value": option.value, "data-label": option.label, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, optionEl.class()), optionEl
                 .modifier('selected')
-                .class(valuesArray.includes(option.value) && !(this.typeahead && !this.multiple))), optionEl.modifier('focused').class(this.focusIndex === index)), optionEl.modifier('checkbox').class(this.multiple)), optionEl.modifier('disabled').class(option.disabled === true)), "data-testid": "bal-select-option", disabled: option.disabled, tabIndex: -1, onMouseEnter: () => this.handleOptionMouseEnter(index), onClick: () => this.optionSelected(option) }, h("div", { class: Object.assign({}, optionContentEl.class()) }, h("span", { class: Object.assign({}, optionContentCheckboxEl.class()), style: { display: this.multiple ? 'flex' : 'none' } }, h("bal-checkbox", { checked: valuesArray.includes(option.value), tabindex: -1, nonSubmit: true, flat: true, onBalChange: preventDefault })), h("span", { class: Object.assign({}, optionContentLabelEl.class()), innerHTML: option.innerHTML }))))), h("div", { key: 'bc03c95d90225dd34a7062113c2b58882f039ca9', class: Object.assign(Object.assign({}, popoverContentEmptyEl.class()), popoverContentEmptyEl
+                .class(valuesArray.includes(option.value) && !(this.typeahead && !this.multiple))), optionEl.modifier('focused').class(this.focusIndex === index)), optionEl.modifier('checkbox').class(this.multiple)), optionEl.modifier('disabled').class(option.disabled === true)), "data-testid": "bal-select-option", disabled: option.disabled, tabIndex: -1, onMouseEnter: () => this.handleOptionMouseEnter(index), onClick: () => this.optionSelected(option) }, h("div", { class: Object.assign({}, optionContentEl.class()) }, h("span", { class: Object.assign({}, optionContentCheckboxEl.class()), style: { display: this.multiple ? 'flex' : 'none' } }, h("bal-checkbox", { checked: valuesArray.includes(option.value), tabindex: -1, nonSubmit: true, flat: true, onBalChange: preventDefault })), h("span", { class: Object.assign({}, optionContentLabelEl.class()), innerHTML: option.innerHTML }))))), h("div", { key: 'c24a3bf08a3c8c5c403a8eab86ee2adce14f896f', class: Object.assign(Object.assign({}, popoverContentEmptyEl.class()), popoverContentEmptyEl
                 .modifier('hidden')
                 .class(this.noDataLabel === undefined || this.hasOptions() || !this.typeahead || this.selectionOptional)) }, this.noDataLabel)))));
     }

package/components/bal-stage-back-link.js

@@ -7,19 +7,21 @@ const StageBackLink = /*@__PURE__*/ proxyCustomElement(class StageBackLink exten
         super();
         this.__registerHost();
         this.href = undefined;
+        this.rel = undefined;
         this.shadow = false;
         this.inverted = false;
     }
     render() {
         const block = BEM.block('stage-back-link');
-        return (h(Host, { key: '694c383572bafaa4202bba16706281834fb48b2c', class: Object.assign(Object.assign({}, block.class()), block.modifier('shadow').class(this.shadow)) }, h("a", { key: 'a8b7bc405efac0263298ed194ee0a90153b16a32', class: {
+        return (h(Host, { key: '5158c9c4cff372138c88a8af2997d6f85bd8d885', class: Object.assign(Object.assign({}, block.class()), block.modifier('shadow').class(this.shadow)) }, h("a", { key: '205e1ae01e652fb595e088879287d9b25315b234', class: {
                 'link': true,
                 'is-inverted': this.inverted,
-            }, href: this.href }, h("bal-icon", { key: '786b949805a3ae3c99bfc7c713bcd4d8872f94a5', class: "mr-x-small", name: "caret-left", size: "x-small", inverted: this.inverted, shadow: this.shadow }), h("slot", { key: 'e7c639e47c25370416eade21dd2e67f82588fe6b' }))));
+            }, href: this.href, rel: this.rel }, h("bal-icon", { key: 'db43094884a07ab6e079b3ac6f89d7c2f927b1b6', class: "mr-x-small", name: "caret-left", size: "x-small", inverted: this.inverted, shadow: this.shadow }), h("slot", { key: 'a680c6fac50060190d267890f6c7d7ccbec1f3f4' }))));
     }
     get el() { return this; }
 }, [4, "bal-stage-back-link", {
         "href": [1],
+        "rel": [1],
         "shadow": [4],
         "inverted": [4]
     }]);

package/components/bal-step-item.js

@@ -12,6 +12,7 @@ const StepItem = /*@__PURE__*/ proxyCustomElement(class StepItem extends HTMLEle
         this.value = '';
         this.label = '';
         this.href = '';
+        this.rel = undefined;
         this.target = '_self';
         this.disabled = false;
         this.done = false;
@@ -39,6 +40,7 @@ const StepItem = /*@__PURE__*/ proxyCustomElement(class StepItem extends HTMLEle
             value: this.value,
             label: this.label,
             href: this.href,
+            rel: this.rel,
             target: this.target,
             active: this.active,
             disabled: this.disabled,
@@ -52,10 +54,10 @@ const StepItem = /*@__PURE__*/ proxyCustomElement(class StepItem extends HTMLEle
         };
     }
     render() {
-        return (h(Host, { key: '84503710841441b7a06efcdddd6c424ce2b59443', role: "tabpanel", class: {
+        return (h(Host, { key: '6d93a7d6ac124b26f15803167945b1316915f303', role: "tabpanel", class: {
                 'bal-step-item': true,
                 'bal-step-item--active': this.isActive,
-            } }, h("slot", { key: '3fa668162fb4bb1a96b1dc08352ade05c301f756' })));
+            } }, h("slot", { key: '563c4d2ea864f40885618e92743d44656d469067' })));
     }
     get el() { return this; }
 }, [4, "bal-step-item", {
@@ -63,6 +65,7 @@ const StepItem = /*@__PURE__*/ proxyCustomElement(class StepItem extends HTMLEle
         "value": [513],
         "label": [513],
         "href": [513],
+        "rel": [1],
         "target": [1],
         "disabled": [516],
         "done": [516],

package/components/bal-steps.js

@@ -28,7 +28,7 @@ const StepButton = ({ item, color, isMobile, clickable, onSelectTab }) => {
     if (item.invisible) {
         return;
     }
-    return (h("a", { role: "tab", class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.class()), bemEl.modifier(`color-${color}`).class()), bemEl.modifier('done').class(item.done)), bemEl.modifier('active').class(item.active)), bemEl.modifier('failed').class(item.failed)), bemEl.modifier('disabled').class(item.disabled)), bemEl.modifier('clickable').class(clickable)), bemEl.modifier('passed').class(item.passed)), { 'bal-focusable': !item.disabled && !item.invisible }), "data-label": item.label, "data-value": item.value, "data-index": item.index, "data-testid": "bal-steps-option", "aria-disabled": `${item.disabled}`, href: item.href === '' ? 'javascript:;' : item.href, target: item.target, onClick: (ev) => onSelectTab(ev, item) },
+    return (h("a", { role: "tab", class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.class()), bemEl.modifier(`color-${color}`).class()), bemEl.modifier('done').class(item.done)), bemEl.modifier('active').class(item.active)), bemEl.modifier('failed').class(item.failed)), bemEl.modifier('disabled').class(item.disabled)), bemEl.modifier('clickable').class(clickable)), bemEl.modifier('passed').class(item.passed)), { 'bal-focusable': !item.disabled && !item.invisible }), "data-label": item.label, "data-value": item.value, "data-index": item.index, "data-testid": "bal-steps-option", "aria-disabled": `${item.disabled}`, href: item.href === '' ? 'javascript:;' : item.href, rel: item.rel, target: item.target, onClick: (ev) => onSelectTab(ev, item) },
         h(StepIcon, { item: item, isMobile: isMobile }),
         h(StepLabel, { item: item })));
 };

package/components/index.js

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