@baloise/ds-core 16.0.3 → 16.1.0

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

@@ -7,7 +7,7 @@ import { FOCUS_KEYS } from "../../../utils/focus-visible";
 import { isDescendant } from "../../../utils/helpers";
 import { ListenToElementStates } from "../../../utils/element-states";
 import { BalElementStateListener } from "../../../utils/element-states/element-states.listener";
-export class BalRadioButton {
+export class RadioButton {
     constructor() {
         this.keyboardMode = true;
         /**
@@ -458,10 +458,10 @@ __decorate([
     __metadata("design:type", Function),
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)
-], BalRadioButton.prototype, "createLogger", null);
+], RadioButton.prototype, "createLogger", null);
 __decorate([
     ListenToElementStates(),
     __metadata("design:type", Function),
     __metadata("design:paramtypes", [Object]),
     __metadata("design:returntype", void 0)
-], BalRadioButton.prototype, "elementStateListener", null);
+], RadioButton.prototype, "elementStateListener", null);

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

@@ -289,7 +289,7 @@ export class RadioGroup {
             }
             return option;
         });
-        return (h(Host, Object.assign({ class: Object.assign({}, block.class()), role: "radiogroup", "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-disabled": this.disabled ? 'true' : null, onClick: this.onClick }, this.inheritedAttributes), h("div", { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, innerEl.class()), innerEl.modifier('vertical-mobile').class(this.verticalOnMobile)), innerEl.modifier('vertical').class(this.vertical)), innerEl.modifier('expanded').class(this.expanded)), innerEl.modifier('select-button').class(this.interface === 'select-button')) }, h("slot", null), options.map(option => (h("bal-radio", { name: option.name || this.name, value: option.value, labelHidden: option.labelHidden, flat: option.flat, interface: option.interface, disabled: option.disabled, readonly: option.readonly, required: option.required, nonSubmit: !!option.nonSubmit, invalid: option.invalid, innerHTML: option.html }))))));
+        return (h(Host, Object.assign({ class: Object.assign({}, block.class()), role: "radiogroup", "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-disabled": this.disabled ? 'true' : null, onClick: this.onClick }, this.inheritedAttributes), h("div", { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, innerEl.class()), innerEl.modifier('vertical-mobile').class(this.verticalOnMobile)), innerEl.modifier('vertical').class(this.vertical)), innerEl.modifier('expanded').class(this.expanded)), innerEl.modifier('select-button').class(this.interface === 'select-button')) }, h("slot", null), options.map(option => (h("bal-radio", { key: option.value, name: option.name || this.name, value: option.value, labelHidden: option.labelHidden, flat: option.flat, interface: option.interface, disabled: option.disabled, readonly: option.readonly, required: option.required, nonSubmit: !!option.nonSubmit, invalid: option.invalid, innerHTML: option.html }))))));
     }
     static get is() { return "bal-radio-group"; }
     static get properties() {

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

@@ -306,7 +306,7 @@ export class Select {
         }
     }
     /**
-     * Sets the focus on the input element
+     * Returns the value of the component
      */
     async getValue() {
         return this.rawValue;
@@ -693,7 +693,7 @@ export class Select {
         const optionContentEl = optionEl.element('content');
         const optionContentCheckboxEl = optionContentEl.element('checkbox');
         const optionContentLabelEl = optionContentEl.element('label');
-        return (h(Host, { role: "listbox", onClick: this.handleClick, "aria-disabled": this.disabled ? 'true' : null, "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", { 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", { value: value, selected: true }, value)))), h("bal-popover", { onBalChange: this.handlePopoverChange, ref: el => (this.popoverElement = el) }, h("div", { "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", { class: Object.assign(Object.assign({}, controlSelectionsEl.class()), controlSelectionsEl
+        return (h(Host, { role: "listbox", onClick: this.handleClick, "aria-disabled": this.disabled ? 'true' : null, "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", { 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", { onBalChange: this.handlePopoverChange, ref: el => (this.popoverElement = el) }, h("div", { "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", { 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)
@@ -703,7 +703,7 @@ export class Select {
                     ? 'white'
                     : this.invalid
                         ? 'danger'
-                        : 'primary', turn: this.isPopoverOpen, onClick: ev => this.handleInputClick(ev, true), size: !this.inverted ? '' : 'x-small' })) : ('')), h("bal-popover-content", { class: Object.assign({}, popoverContentEl.class()), scrollable: this.scrollable, spaceless: true, expanded: true }, this.optionArray.map((option, index) => (h("button", { 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", { 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", { class: Object.assign(Object.assign({}, popoverContentEmptyEl.class()), popoverContentEmptyEl
                 .modifier('hidden')
@@ -1300,7 +1300,7 @@ export class Select {
                     "return": "Promise<string[]>"
                 },
                 "docs": {
-                    "text": "Sets the focus on the input element",
+                    "text": "Returns the value of the component",
                     "tags": []
                 }
             },

package/dist/collection/components/bal-spinner/bal-spinner.css

@@ -1 +1 @@
-bal-spinner,.bal-spinner{text-align:center;display:flex;justify-content:center;align-content:center}bal-spinner svg,.bal-spinner svg{transform:unset !important}
+bal-spinner,.bal-spinner{text-align:center;display:flex;justify-content:center;align-content:center;width:4rem}bal-spinner svg,.bal-spinner svg{transform:unset !important}.bal-spinner--small{width:2rem}.bal-spinner--circle{margin:auto;border-width:.25rem;border-style:solid;border-color:var(--bal-color-grey);border-radius:50%;border-top-color:var(--bal-color-primary);width:1.5rem;height:1.5rem}.bal-spinner--circle.bal-spinner--small{width:1.125rem;height:1.125rem;border-width:.2rem}.bal-spinner--circle.bal-spinner--animated{animation:spinner 1.6s linear infinite}@keyframes spinner{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

package/dist/collection/components/bal-spinner/bal-spinner.interfaces.js

@@ -0,0 +1,4 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+/// <reference path="../../interfaces.d.ts" />

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

@@ -3,6 +3,8 @@ import { h, Host } from "@stencil/core";
 import { rIC } from "../../utils/helpers";
 import { Logger } from "../../utils/log";
 import { raf } from "../../utils/helpers";
+import { BEM } from "../../utils/bem";
+import { ListenToConfig, defaultConfig } from "../../utils/config";
 export class Spinner {
     constructor() {
         /**
@@ -10,6 +12,10 @@ export class Spinner {
          * ------------------------------------------------------
          */
         this.animate = async () => {
+            if (!this.animated) {
+                this.destroy();
+                return;
+            }
             await this.load();
             if (this.currentRaf !== undefined) {
                 cancelAnimationFrame(this.currentRaf);
@@ -30,6 +36,9 @@ export class Spinner {
             this.el.innerHTML = '';
         };
         this.shouldAnimate = () => {
+            if (this.variation !== 'logo') {
+                return false;
+            }
             if (typeof window === 'undefined') {
                 return false;
             }
@@ -55,10 +64,12 @@ export class Spinner {
                 }
             });
         };
+        this.animated = defaultConfig.animated;
         this.inverted = false;
         this.deactivated = false;
         this.color = 'blue';
         this.small = false;
+        this.variation = 'logo';
     }
     createLogger(log) {
         this.log = log;
@@ -73,18 +84,43 @@ export class Spinner {
             }
         }
     }
+    variationWatcher(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            if (this.variation === 'circle') {
+                this.destroy();
+            }
+            else {
+                this.animate();
+            }
+        }
+    }
     /**
      * LIFECYCLE
      * ------------------------------------------------------
      */
     componentDidLoad() {
-        this.animate();
+        if (this.variation === 'logo') {
+            this.animate();
+        }
+        else {
+            this.destroy();
+        }
     }
     disconnectedCallback() {
         if (this.el && !this.el.isConnected) {
             this.destroy();
         }
     }
+    /**
+     * LISTENERS
+     * ------------------------------------------------------
+     */
+    configChanged(state) {
+        this.animated = state.animated;
+        if (state.animated === false) {
+            this.destroy();
+        }
+    }
     /**
      * GETTERS
      * ------------------------------------------------------
@@ -97,7 +133,8 @@ export class Spinner {
      * ------------------------------------------------------
      */
     render() {
-        return h(Host, { role: "progressbar", "aria-hidden": "true", style: { width: this.small ? '32px' : '64px' } });
+        const block = BEM.block('spinner');
+        return (h(Host, { class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('circle').class(this.variation === 'circle')), block.modifier('small').class(this.small)), block.modifier('animated').class(this.animated)), role: "progressbar", "aria-hidden": "true" }));
     }
     static get is() { return "bal-spinner"; }
     static get originalStyleUrls() {
@@ -152,9 +189,14 @@ export class Spinner {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'blue' | 'white'",
+                    "original": "BalProps.BalSpinnerColor",
                     "resolved": "\"blue\" | \"white\"",
-                    "references": {}
+                    "references": {
+                        "BalProps": {
+                            "location": "global",
+                            "id": "global::BalProps"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
@@ -183,14 +225,45 @@ export class Spinner {
                 "attribute": "small",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "variation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BalProps.BalSpinnerVariation",
+                    "resolved": "\"circle\" | \"logo\"",
+                    "references": {
+                        "BalProps": {
+                            "location": "global",
+                            "id": "global::BalProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the look of the spinner"
+                },
+                "attribute": "variation",
+                "reflect": false,
+                "defaultValue": "'logo'"
             }
         };
     }
+    static get states() {
+        return {
+            "animated": {}
+        };
+    }
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
                 "propName": "deactivated",
                 "methodName": "deactivatedWatcher"
+            }, {
+                "propName": "variation",
+                "methodName": "variationWatcher"
             }];
     }
 }
@@ -200,3 +273,9 @@ __decorate([
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)
 ], Spinner.prototype, "createLogger", null);
+__decorate([
+    ListenToConfig(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", void 0)
+], Spinner.prototype, "configChanged", null);

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

@@ -2,7 +2,7 @@ import { __decorate, __metadata } from "tslib";
 import { h, Host } from "@stencil/core";
 import { BEM } from "../../utils/bem";
 import { Logger } from "../../utils/log";
-export class BalStack {
+export class Stack {
     constructor() {
         this.layout = 'horizontal';
         this.align = '';
@@ -314,4 +314,4 @@ __decorate([
     __metadata("design:type", Function),
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)
-], BalStack.prototype, "createLogger", null);
+], Stack.prototype, "createLogger", null);

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

@@ -178,7 +178,7 @@ export class Steps {
                 .map(t => t.label)
                 .join(',') }, h("nav", { role: "tablist", class: Object.assign({}, bemStepsNav.class()) }, h("bal-carousel", { class: Object.assign({}, bemStepsNav.element('carousel').class()), onBalChange: stopEventBubbling, controls: "small", "items-per-view": "auto", steps: 3 }, steps
             .filter(step => !step.invisible)
-            .map(step => (h("bal-carousel-item", { class: Object.assign(Object.assign({}, bemStepsNav.element('carousel').element('item').class()), bemStepsNav.element('carousel').element('item').modifier('passed').class(step.passed)) }, h(StepButton, { item: step, isMobile: this.isMobile, clickable: this.clickable && !step.disabled, onSelectTab: this.onSelectTab })))))), h("div", { id: this.stepsId, class: Object.assign({}, block.element('steps__content').class()) }, h("slot", null))));
+            .map(step => (h("bal-carousel-item", { key: step.value, class: Object.assign(Object.assign({}, bemStepsNav.element('carousel').element('item').class()), bemStepsNav.element('carousel').element('item').modifier('passed').class(step.passed)) }, h(StepButton, { item: step, isMobile: this.isMobile, clickable: this.clickable && !step.disabled, onSelectTab: this.onSelectTab })))))), h("div", { id: this.stepsId, class: Object.assign({}, block.element('steps__content').class()) }, h("slot", null))));
     }
     static get is() { return "bal-steps"; }
     static get originalStyleUrls() {

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

@@ -7,5 +7,5 @@ export const TabNav = ({ items, tabsId, hasCarousel, isVertical, inNavbar, isMob
     const tabs = items.filter(tab => !tab.invisible);
     const isFullHeight = inNavbar && !isTouch;
     const Button = ({ item, index }) => (h(TabButton, { item: item, 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 }));
-    return (h("div", { role: "tablist", 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()), fullHeight: isFullHeight, border: border, inverted: inverted, controls: "small", "items-per-view": "auto", steps: 3, onBalChange: stopEventBubbling }, tabs.map((tab, index) => (h("bal-carousel-item", { 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)) })) : ('')));
+    return (h("div", { role: "tablist", 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()), fullHeight: isFullHeight, border: border, inverted: inverted, controls: "small", "items-per-view": "auto", steps: 3, onBalChange: stopEventBubbling }, tabs.map((tab, index) => (h("bal-carousel-item", { key: tab.value, 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)) })) : ('')));
 };

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

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

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

@@ -1 +1 @@
-:root{--bal-tag-background: var(--bal-color-grey);--bal-tag-background-primary: var(--bal-color-primary);--bal-tag-background-grey: var(--bal-color-grey);--bal-tag-background-success: var(--bal-color-success-4);--bal-tag-background-info: var(--bal-color-info-4);--bal-tag-background-warning: var(--bal-color-warning-4);--bal-tag-background-danger: var(--bal-color-danger-4);--bal-tag-background-purple: var(--bal-color-purple-5);--bal-tag-background-red: var(--bal-color-red-5);--bal-tag-background-yellow: var(--bal-color-yellow-4);--bal-tag-background-green: var(--bal-color-green-4);--bal-tag-background-purple-light: var(--bal-color-purple-2);--bal-tag-background-red-light: var(--bal-color-red-2);--bal-tag-background-yellow-light: var(--bal-color-yellow-2);--bal-tag-background-green-light: var(--bal-color-green-2);--bal-tag-background-invalid: var(--bal-color-border-danger);--bal-tag-background-disabled: var(--bal-color-border-grey-dark);--bal-tag-radius: var(--bal-radius-rounded);--bal-tag-border-disabled-color: var(--bal-color-border-grey-dark);--bal-tag-text: var(--bal-color-primary);--bal-tag-text-primary: var(--bal-color-white);--bal-tag-text-grey: var(--bal-color-primary);--bal-tag-text-success: var(--bal-color-white);--bal-tag-text-info: var(--bal-color-white);--bal-tag-text-warning: var(--bal-color-primary);--bal-tag-text-danger: var(--bal-color-white);--bal-tag-text-purple: var(--bal-color-white);--bal-tag-text-red: var(--bal-color-white);--bal-tag-text-yellow: var(--bal-color-primary);--bal-tag-text-green: var(--bal-color-primary);--bal-tag-text-purple-light: var(--bal-color-primary);--bal-tag-text-red-light: var(--bal-color-primary);--bal-tag-text-yellow-light: var(--bal-color-primary);--bal-tag-text-green-light: var(--bal-color-primary);--bal-tag-text-invalid: var(--bal-color-text-white);--bal-tag-text-disabled: var(--bal-color-text-white)}.bal-tag{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:static;display:inline-flex;align-items:center;justify-content:center;min-height:2rem;line-height:1.5rem;padding:.25rem .75rem .25rem .75rem;background-color:var(--bal-tag-background);border-radius:var(--bal-tag-radius)}.bal-tag--is-small{padding:0 .75rem 0 .75rem;min-height:1.5rem}.bal-tag--is-medium{min-height:2.5rem;padding:.5rem 1rem .5rem 1rem}.bal-tag--is-large{min-height:3rem;padding:.75rem 1.5rem .75rem 1.5rem}.bal-tag--is-primary{background:var(--bal-tag-background-primary)}.bal-tag--is-grey{background:var(--bal-tag-background-grey)}.bal-tag--is-success{background:var(--bal-tag-background-success)}.bal-tag--is-info{background:var(--bal-tag-background-info)}.bal-tag--is-warning{background:var(--bal-tag-background-warning)}.bal-tag--is-danger{background:var(--bal-tag-background-danger)}.bal-tag--is-purple{background:var(--bal-tag-background-purple)}.bal-tag--is-red{background:var(--bal-tag-background-red)}.bal-tag--is-yellow{background:var(--bal-tag-background-yellow)}.bal-tag--is-green{background:var(--bal-tag-background-green)}.bal-tag--is-purple-light{background:var(--bal-tag-background-purple-light)}.bal-tag--is-red-light{background:var(--bal-tag-background-red-light)}.bal-tag--is-yellow-light{background:var(--bal-tag-background-yellow-light)}.bal-tag--is-green-light{background:var(--bal-tag-background-green-light)}.bal-tag--is-invalid{background:var(--bal-tag-background-invalid);color:var(--bal-color-text-white)}.bal-tag__label{font-family:var(--bal-font-family-text);color:var(--bal-tag-text);font-weight:var(--bal-font-weight-bold);font-size:var(--bal-text-size-normal) !important;hyphens:auto;display:inline-flex;align-items:center;gap:.25rem}.bal-tag__label--is-small{font-size:var(--bal-text-size-small) !important;font-weight:var(--bal-font-weight-regular) !important}.bal-tag__label--is-medium{font-size:var(--bal-text-size-medium) !important}.bal-tag__label--is-large{font-size:var(--bal-text-size-medium) !important}.bal-tag__label--is-primary{color:var(--bal-tag-text-primary)}.bal-tag__label--is-grey{color:var(--bal-tag-text-grey)}.bal-tag__label--is-success{color:var(--bal-tag-text-success)}.bal-tag__label--is-info{color:var(--bal-tag-text-info)}.bal-tag__label--is-warning{color:var(--bal-tag-text-warning)}.bal-tag__label--is-danger{color:var(--bal-tag-text-danger)}.bal-tag__label--is-purple{color:var(--bal-tag-text-purple)}.bal-tag__label--is-red{color:var(--bal-tag-text-red)}.bal-tag__label--is-yellow{color:var(--bal-tag-text-yellow)}.bal-tag__label--is-green{color:var(--bal-tag-text-green)}.bal-tag__label--is-purple-light{color:var(--bal-tag-text-purple-light)}.bal-tag__label--is-red-light{color:var(--bal-tag-text-red-light)}.bal-tag__label--is-yellow-light{color:var(--bal-tag-text-yellow-light)}.bal-tag__label--is-green-light{color:var(--bal-tag-text-green-light)}.bal-tag__label--is-invalid{background:var(--bal-color-border-danger);color:var(--bal-tag-text-invalid)}.bal-tag__label--is-disabled{background-color:var(--bal-tag-background-disabled);border-color:var(--bal-tag-border-disabled-color)}.bal-tag--is-disabled{cursor:default;pointer-events:none;user-select:none;background-color:var(--bal-tag-background-disabled);border-color:var(--bal-tag-border-disabled-color);box-shadow:none;color:var(--bal-tag-text-disabled)}.bal-tag--is-disabled>span{color:var(--bal-tag-text-disabled)}.bal-tag__close{margin-left:.25rem;margin-right:-0.5rem}.bal-tag-group{display:flex;gap:.25rem}
+:root{--bal-tag-background: var(--bal-color-grey);--bal-tag-background-primary: var(--bal-color-primary);--bal-tag-background-grey: var(--bal-color-grey);--bal-tag-background-success: var(--bal-color-success-4);--bal-tag-background-info: var(--bal-color-info-4);--bal-tag-background-warning: var(--bal-color-warning-4);--bal-tag-background-danger: var(--bal-color-danger-4);--bal-tag-background-purple: var(--bal-color-purple-5);--bal-tag-background-red: var(--bal-color-red-5);--bal-tag-background-yellow: var(--bal-color-yellow-4);--bal-tag-background-green: var(--bal-color-green-4);--bal-tag-background-purple-light: var(--bal-color-purple-2);--bal-tag-background-red-light: var(--bal-color-red-2);--bal-tag-background-yellow-light: var(--bal-color-yellow-2);--bal-tag-background-green-light: var(--bal-color-green-2);--bal-tag-background-invalid: var(--bal-color-border-danger);--bal-tag-background-disabled: var(--bal-color-border-grey-dark);--bal-tag-radius: var(--bal-radius-rounded);--bal-tag-border-disabled-color: var(--bal-color-border-grey-dark);--bal-tag-text: var(--bal-color-primary);--bal-tag-text-primary: var(--bal-color-white);--bal-tag-text-grey: var(--bal-color-primary);--bal-tag-text-success: var(--bal-color-white);--bal-tag-text-info: var(--bal-color-white);--bal-tag-text-warning: var(--bal-color-primary);--bal-tag-text-danger: var(--bal-color-white);--bal-tag-text-purple: var(--bal-color-white);--bal-tag-text-red: var(--bal-color-white);--bal-tag-text-yellow: var(--bal-color-primary);--bal-tag-text-green: var(--bal-color-primary);--bal-tag-text-purple-light: var(--bal-color-primary);--bal-tag-text-red-light: var(--bal-color-primary);--bal-tag-text-yellow-light: var(--bal-color-primary);--bal-tag-text-green-light: var(--bal-color-primary);--bal-tag-text-invalid: var(--bal-color-text-white);--bal-tag-text-disabled: var(--bal-color-text-white);--bal-tag-size-small-font-size: var(--bal-text-size-small);--bal-tag-size-small-font-weight: var(--bal-font-weight-regular)}.bal-tag{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:static;display:inline-flex;align-items:center;justify-content:center;min-height:2rem;line-height:1.5rem;padding:.25rem .75rem .25rem .75rem;background-color:var(--bal-tag-background);border-radius:var(--bal-tag-radius)}.bal-tag--is-small{padding:0 .75rem 0 .75rem;min-height:1.5rem}.bal-tag--is-medium{min-height:2.5rem;padding:.5rem 1rem .5rem 1rem}.bal-tag--is-large{min-height:3rem;padding:.75rem 1.5rem .75rem 1.5rem}.bal-tag--is-primary{background:var(--bal-tag-background-primary)}.bal-tag--is-grey{background:var(--bal-tag-background-grey)}.bal-tag--is-success{background:var(--bal-tag-background-success)}.bal-tag--is-info{background:var(--bal-tag-background-info)}.bal-tag--is-warning{background:var(--bal-tag-background-warning)}.bal-tag--is-danger{background:var(--bal-tag-background-danger)}.bal-tag--is-purple{background:var(--bal-tag-background-purple)}.bal-tag--is-red{background:var(--bal-tag-background-red)}.bal-tag--is-yellow{background:var(--bal-tag-background-yellow)}.bal-tag--is-green{background:var(--bal-tag-background-green)}.bal-tag--is-purple-light{background:var(--bal-tag-background-purple-light)}.bal-tag--is-red-light{background:var(--bal-tag-background-red-light)}.bal-tag--is-yellow-light{background:var(--bal-tag-background-yellow-light)}.bal-tag--is-green-light{background:var(--bal-tag-background-green-light)}.bal-tag--is-invalid{background:var(--bal-tag-background-invalid);color:var(--bal-color-text-white)}.bal-tag__label{font-family:var(--bal-font-family-text);color:var(--bal-tag-text);font-weight:var(--bal-font-weight-bold);font-size:var(--bal-text-size-normal) !important;hyphens:auto;display:inline-flex;align-items:center;gap:.25rem}.bal-tag__label--is-small{font-size:var(--bal-tag-size-small-font-size) !important;font-weight:var(--bal-tag-size-small-font-weight) !important}.bal-tag__label--is-medium{font-size:var(--bal-text-size-medium) !important}.bal-tag__label--is-large{font-size:var(--bal-text-size-medium) !important}.bal-tag__label--is-primary{color:var(--bal-tag-text-primary)}.bal-tag__label--is-grey{color:var(--bal-tag-text-grey)}.bal-tag__label--is-success{color:var(--bal-tag-text-success)}.bal-tag__label--is-info{color:var(--bal-tag-text-info)}.bal-tag__label--is-warning{color:var(--bal-tag-text-warning)}.bal-tag__label--is-danger{color:var(--bal-tag-text-danger)}.bal-tag__label--is-purple{color:var(--bal-tag-text-purple)}.bal-tag__label--is-red{color:var(--bal-tag-text-red)}.bal-tag__label--is-yellow{color:var(--bal-tag-text-yellow)}.bal-tag__label--is-green{color:var(--bal-tag-text-green)}.bal-tag__label--is-purple-light{color:var(--bal-tag-text-purple-light)}.bal-tag__label--is-red-light{color:var(--bal-tag-text-red-light)}.bal-tag__label--is-yellow-light{color:var(--bal-tag-text-yellow-light)}.bal-tag__label--is-green-light{color:var(--bal-tag-text-green-light)}.bal-tag__label--is-invalid{background:var(--bal-color-border-danger);color:var(--bal-tag-text-invalid)}.bal-tag__label--is-disabled{background-color:var(--bal-tag-background-disabled);border-color:var(--bal-tag-border-disabled-color)}.bal-tag--is-disabled{cursor:default;pointer-events:none;user-select:none;background-color:var(--bal-tag-background-disabled);border-color:var(--bal-tag-border-disabled-color);box-shadow:none;color:var(--bal-tag-text-disabled)}.bal-tag--is-disabled>span{color:var(--bal-tag-text-disabled)}.bal-tag__close{margin-left:.25rem;margin-right:-0.5rem}.bal-tag-group{display:flex;gap:.25rem}

package/dist/collection/index.js

@@ -26,6 +26,7 @@ export * from './components/bal-label/bal-label.i18n';
  * Utils
  */
 export { initializeBaloiseDesignSystem as initialize, initializeBaloiseDesignSystem } from './initialize';
+export { newBalOption } from './utils/dropdown/option';
 export { newBalStepOption } from './components/bal-steps/bal-step.util';
 export { newBalTabOption } from './components/bal-tabs/bal-tab.util';
 export { newBalCheckboxOption } from './components/bal-checkbox/utils/bal-checkbox.util';

package/dist/collection/utils/aria.js

@@ -0,0 +1 @@
+export const ariaBooleanToString = (bool) => (!!bool ? 'true' : 'false');

package/dist/collection/utils/config/config.default.js

@@ -37,5 +37,6 @@ export const defaultConfig = {
     fallbackLanguage: 'de',
     logger: defaultLoggerConfig,
     animated: true,
+    httpFormSubmit: true,
 };
 export const defaultLocale = `${defaultConfig.language}-${defaultConfig.region}`;

package/dist/collection/utils/config/config.js

@@ -63,6 +63,13 @@ export class Config {
         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) {

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

@@ -1,2 +1,2 @@
 // generated by .build/version.js
-export const VERSION = '16.0.3';
+export const VERSION = '16.1.0';

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

@@ -1,7 +1,10 @@
-import { DateTime, Info } from "luxon";
+import { DateTime, Info, Settings } from "luxon";
 import { useBalConfig } from "../config";
 import { dateSeparator } from "@baloise/web-app-utils";
 export class BalDate {
+    static setTwoDigitCutoffYear(cutoff = 10) {
+        Settings.twoDigitCutoffYear = (new Date().getFullYear() % 100) + cutoff;
+    }
     static fromAnyFormat(value) {
         const separator = value.replace(/[0-9]/g, '').charAt(0);
         const config = useBalConfig();
@@ -109,3 +112,4 @@ export class BalDate {
         return undefined;
     }
 }
+BalDate.setTwoDigitCutoffYear();

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

@@ -60,15 +60,21 @@ describe('balDate', () => {
                 expect(BalDate.fromAnyFormat('1.02.1988').toISODate()).toStrictEqual('1988-02-01');
                 expect(BalDate.fromAnyFormat('01.2.1988').toISODate()).toStrictEqual('1988-02-01');
                 expect(BalDate.fromAnyFormat('1.2.1988').toISODate()).toStrictEqual('1988-02-01');
-                expect(BalDate.fromAnyFormat('1.2.88').toISODate()).toStrictEqual('1988-02-01');
-                expect(BalDate.fromAnyFormat('1.2.01').toISODate()).toStrictEqual('2001-02-01');
-                expect(BalDate.fromAnyFormat('1.2.00').toISODate()).toStrictEqual('2000-02-01');
-                expect(BalDate.fromAnyFormat('1.2.0').toISODate()).toStrictEqual('2000-02-01');
-                expect(BalDate.fromAnyFormat('12.12.1').toISODate()).toStrictEqual('2001-12-12');
+            });
+            test('should parse to todays year', () => {
                 const year = new Date().getFullYear();
                 expect(BalDate.fromAnyFormat('1.2.').toISODate()).toStrictEqual(`${year}-02-01`);
                 expect(BalDate.fromAnyFormat('1.2').toISODate()).toStrictEqual(`${year}-02-01`);
             });
+            test('should fill up with the year correctly by the cutoff year', () => {
+                const year = new Date().getFullYear();
+                const cutoff = year + 10;
+                const cutoffTwoDigits = cutoff % 100;
+                console.log('cutoff', cutoff);
+                expect(BalDate.fromAnyFormat(`1.1.${cutoffTwoDigits}`).toISODate()).toStrictEqual(`20${cutoffTwoDigits}-01-01`);
+                expect(BalDate.fromAnyFormat(`1.1.${cutoffTwoDigits - 1}`).toISODate()).toStrictEqual(`20${cutoffTwoDigits - 1}-01-01`);
+                expect(BalDate.fromAnyFormat(`1.1.${cutoffTwoDigits + 1}`).toISODate()).toStrictEqual(`19${cutoffTwoDigits + 1}-01-01`);
+            });
             test('should parse all supported number formats', () => {
                 expect(BalDate.fromAnyFormat('20021988').toISODate()).toStrictEqual('1988-02-20');
             });

package/dist/collection/utils/dropdown/auto-fill.js

@@ -0,0 +1,38 @@
+import { areArraysEqual } from "@baloise/web-app-utils";
+import { stopEventBubbling } from "../form-input";
+export class DropdownAutoFillUtil {
+    constructor() {
+        this.handleAutoFill = async (ev) => {
+            stopEventBubbling(ev);
+            if (this.isAutoFillAllowed()) {
+                this.component.isAutoFilled = true;
+                const autoFillValue = this.component.nativeEl.value;
+                const newValue = await this.parseAutoFillValueWithOptions(autoFillValue);
+                if (newValue === undefined) {
+                    this.component.isAutoFilled = false;
+                    return;
+                }
+                if (!areArraysEqual(newValue, this.component.rawValue)) {
+                    this.component.valueUtil.updateRawValueBySelection(newValue, true);
+                }
+            }
+        };
+    }
+    connectedCallback(component) {
+        this.component = component;
+    }
+    isAutoFillAllowed() {
+        return !this.component.multiple;
+    }
+    async parseAutoFillValueWithOptions(autoFillValue) {
+        const options = await this.component.listEl.getOptions();
+        const value = undefined;
+        for (let index = 0; index < options.length; index++) {
+            const option = options[index];
+            if (option.value === autoFillValue || option.label === autoFillValue) {
+                return [option.value];
+            }
+        }
+        return value;
+    }
+}

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

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

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

@@ -0,0 +1,52 @@
+export const i18nBalDropdown = {
+    de: {
+        clearable: 'Löschen',
+        open: 'Öffnen',
+        close: 'Schließen',
+    },
+    en: {
+        clearable: 'clear',
+        open: 'Open',
+        close: 'Close',
+    },
+    fr: {
+        clearable: 'Effacer',
+        open: 'Ouvrir',
+        close: 'Fermer',
+    },
+    it: {
+        clearable: 'Cancellare',
+        open: 'Apri',
+        close: 'Chiudi',
+    },
+    nl: {
+        clearable: 'Wissen',
+        open: 'Open',
+        close: 'Sluiten',
+    },
+    es: {
+        clearable: 'Limpiar',
+        open: 'Abrir',
+        close: 'Cerrar',
+    },
+    pl: {
+        clearable: 'Wyczyść',
+        open: 'Otwórz',
+        close: 'Zamknij',
+    },
+    pt: {
+        clearable: 'Limpar',
+        open: 'Abrir',
+        close: 'Fechar',
+    },
+    sv: {
+        clearable: 'Rensa',
+        open: 'Öppna',
+        close: 'Stäng',
+    },
+    fi: {
+        clearable: 'Tyhjennä',
+        open: 'Avaa',
+        close: 'Sulje',
+    },
+};

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

@@ -0,0 +1,43 @@
+export class DropdownEventsUtil {
+    connectedCallback(component) {
+        this.component = component;
+    }
+    handleFocus(ev) {
+        this.component.hasFocus = true;
+        this.component.balFocus.emit(ev);
+    }
+    handleBlur(ev) {
+        this.component.hasFocus = false;
+        this.component.balBlur.emit(ev);
+    }
+    handleClick(ev) {
+        if (!this.component.valueUtil.isDisabled()) {
+            if (this.component.chips) {
+                const targetEl = ev.target;
+                const closeEl = targetEl.closest('bal-close');
+                if (closeEl) {
+                    return;
+                }
+            }
+            if (this.component.clearable) {
+                const targetEl = ev.target;
+                const clearEl = targetEl.closest('.bal-dropdown__clear');
+                if (clearEl) {
+                    this.component.valueUtil.updateRawValueBySelection([]);
+                    return;
+                }
+            }
+            this.component.popupUtil.toggleList();
+        }
+    }
+    // @Listen('click', { target: 'document' })
+    handleOutsideClick(ev) {
+        var _a;
+        if (this.component.isExpanded) {
+            if (!this.component.el.contains(ev.target)) {
+                this.component.isExpanded = false;
+                (_a = this.component.listEl) === null || _a === void 0 ? void 0 : _a.resetFocus();
+            }
+        }
+    }
+}

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

@@ -0,0 +1,10 @@
+export function startsWith(text, input) {
+    const content = text.trim().toLowerCase();
+    const value = input.trim().toLowerCase();
+    return content.startsWith(value);
+}
+export function includes(text, input) {
+    const content = text.trim().toLowerCase();
+    const value = input.trim().toLowerCase();
+    return content.includes(value);
+}

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

@@ -0,0 +1,19 @@
+export class DropdownFocusUtil {
+    connectedCallback(component) {
+        this.component = component;
+    }
+    focusOptionByLabel(key, options = {}) {
+        this.component.labelToFocus = (this.component.labelToFocus + key).trim();
+        if (this.component.labelToFocus.length > 0) {
+            clearTimeout(this.keyHitTimeout);
+            this.keyHitTimeout = setTimeout(() => {
+                var _a;
+                (_a = this.component.listEl) === null || _a === void 0 ? void 0 : _a.focusByLabel(this.component.labelToFocus, options);
+            }, 100);
+            clearTimeout(this.timeout);
+            this.timeout = setTimeout(async () => {
+                this.component.labelToFocus = '';
+            }, 1000);
+        }
+    }
+}

package/dist/collection/utils/dropdown/form-submit.js

@@ -0,0 +1,35 @@
+import { h } from "@stencil/core";
+import { BEM } from "../bem";
+export class DropdownFormSubmitUtil {
+    connectedCallback(component) {
+        this.component = component;
+        this.component.initialValue = this.component.value;
+    }
+    componentDidRender() {
+        if (this.component.selectEl) {
+            const options = this.component.selectEl.querySelectorAll('option');
+            options.forEach(option => {
+                if (this.component.rawValue.includes(option.value)) {
+                    option.selected = true;
+                }
+            });
+        }
+    }
+    // @Listen('reset', { capture: true, target: 'document' })
+    handle(ev) {
+        const formElement = ev.target;
+        if (formElement === null || formElement === void 0 ? void 0 : formElement.contains(this.component.el)) {
+            if (this.resetHandlerTimer) {
+                clearTimeout(this.resetHandlerTimer);
+            }
+            this.resetHandlerTimer = setTimeout(() => {
+                const newRawValue = this.component.valueUtil.parseValueString(this.component.initialValue);
+                this.component.valueUtil.updateRawValueBySelection(newRawValue);
+            }, 0);
+        }
+    }
+}
+export const DropdownNativeSelect = ({ name, httpFormSubmit, multiple, required, disabled, rawValue, refSelectEl, }) => {
+    const block = BEM.block('dropdown');
+    return httpFormSubmit ? (h("select", { class: Object.assign({}, block.element('root').element('select').class()), "aria-hidden": "true", name: name, multiple: multiple, required: required, disabled: disabled, tabindex: -1, ref: refSelectEl }, rawValue.map((value) => (h("option", { key: value, value: value, selected: true }, value))))) : ('');
+};