@baloise/ds-core 16.0.3-nightly.20240417 → 16.1.0

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;
@@ -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", { key: option.id, 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-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-nightly.20240417';
+export const VERSION = '16.1.0';

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))))) : ('');
+};

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

@@ -0,0 +1,15 @@
+import { h } from "@stencil/core";
+import { BEM } from "../bem";
+import { i18nBalDropdown } from "./dropdown.i18n";
+export const DropdownIcon = ({ icon, language, loading, clearable, invalid, filled, expanded, disabled, }) => {
+    const block = BEM.block('dropdown');
+    if (loading) {
+        return h("bal-spinner", { class: Object.assign({}, block.element('rear').class()), small: true, variation: "circle" });
+    }
+    else if (clearable && filled && !disabled) {
+        return (h("button", { title: i18nBalDropdown[language].clearable, class: Object.assign(Object.assign(Object.assign({}, block.element('rear').class()), block.element('clear').class()), block.element('clear').modifier('invalid').class(invalid)) }, h("bal-icon", { class: Object.assign({}, block.element('rear').class()), name: 'close-circle', size: "", color: 'grey' })));
+    }
+    else {
+        return (h("bal-icon", { class: Object.assign({}, block.element('rear').class()), name: icon, turn: expanded, color: disabled ? 'grey' : invalid ? 'danger' : 'primary' }));
+    }
+};

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

@@ -0,0 +1,13 @@
+export * from './auto-fill';
+export * from './component';
+export * from './dropdown.i18n';
+export * from './events';
+export * from './filters';
+export * from './focus';
+export * from './form-submit';
+export * from './icon';
+export * from './option';
+export * from './option-list';
+export * from './popup';
+export * from './value';
+export * from './input';

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

@@ -0,0 +1,12 @@
+import { h } from "@stencil/core";
+import { BEM } from "../bem";
+import { i18nBalDropdown } from "./dropdown.i18n";
+import { ariaBooleanToString } from "../aria";
+export const DropdownInput = ({ name, inputId, httpFormSubmit, ariaForm, rawValue, autocomplete, required, disabled, readonly, placeholder, expanded, invalid, language, inputLabel, inheritedAttributes, refInputEl, onChange, onFocus, onBlur, onKeyDown, }) => {
+    const block = BEM.block('dropdown');
+    const Input = () => (h("input", Object.assign({ id: ariaForm.controlId || `${inputId}-ctrl`, class: Object.assign({}, block.element('root').element('input').class()), type: "text", size: 1, inputmode: "none", tabindex: "0", name: name, autoComplete: autocomplete, value: rawValue.join(','), required: required, disabled: disabled, readonly: readonly, placeholder: placeholder, title: expanded ? i18nBalDropdown[language].close : i18nBalDropdown[language].open, "aria-label": expanded ? i18nBalDropdown[language].close : i18nBalDropdown[language].open, "aria-owns": `${inputId}-menu`, "aria-invalid": ariaBooleanToString(invalid), "aria-disabled": ariaBooleanToString(disabled || readonly), "aria-labelledby": ariaForm.labelId, "aria-describedby": ariaForm.messageId, "aria-haspopup": 'listbox', "data-native": true, "data-label": inputLabel, "data-value": rawValue.join(','), ref: el => refInputEl(el), onChange: ev => onChange(ev), onFocus: ev => onFocus(ev), onBlur: ev => onBlur(ev), onKeyDown: ev => onKeyDown(ev) }, inheritedAttributes)));
+    if (httpFormSubmit) {
+        return h(Input, null);
+    }
+    return (h("form", { novalidate: true }, h(Input, null)));
+};

package/dist/collection/utils/dropdown/option-list.js

@@ -0,0 +1,8 @@
+import { h } from "@stencil/core";
+import { BEM } from "../bem";
+export const DropdownOptionList = ({ inputId, isExpanded, rawOptions, isDisabled, hasPropOptions, required, filter, multiple, contentHeight, refPanelEl, refListEl, }) => {
+    const block = BEM.block('dropdown');
+    return (h("div", { id: `${inputId}-menu`, class: Object.assign(Object.assign({}, block.element('list').class()), block.element('list').modifier('expanded').class(isExpanded)), ref: refPanelEl }, h("bal-option-list", { multiple: multiple, disabled: isDisabled, filter: filter, required: required, contentHeight: contentHeight, ref: refListEl }, h("slot", null), hasPropOptions
+        ? rawOptions.map(option => (h("bal-option", { key: option.value, value: option.value, label: option.label, disabled: option.disabled, multiline: option.multiline, invalid: option.invalid, hidden: option.hidden, selected: option.selected, focused: option.focused }, option.label)))
+        : '')));
+};

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

@@ -0,0 +1,44 @@
+export const newBalOption = (option, options) => {
+    const data = Object.assign(Object.assign({}, option), { disabled: false, invalid: false, selected: false, focused: false, hidden: false, multiline: false });
+    if (options) {
+        data.disabled = options.disabled === undefined ? data.disabled : options.disabled;
+        data.invalid = options.invalid === undefined ? data.invalid : options.invalid;
+        data.selected = options.selected === undefined ? data.selected : options.selected;
+        data.focused = options.focused === undefined ? data.focused : options.focused;
+        data.hidden = options.hidden === undefined ? data.hidden : options.hidden;
+        data.multiline = options.multiline === undefined ? data.multiline : options.multiline;
+    }
+    return data;
+};
+export const mapOption = (option) => {
+    return newBalOption({
+        value: option.value,
+        label: option.label,
+    }, option);
+};
+export class DropdownOptionUtil {
+    connectedCallback(component) {
+        this.component = component;
+        this.optionChanged();
+    }
+    async componentWillRender() {
+        if (this.component.listEl) {
+            this.component.nativeOptions = await this.component.listEl.getValues();
+        }
+    }
+    hasPropOptions() {
+        return this.component.options && this.component.options.length > 0;
+    }
+    async optionChanged() {
+        this.component.rawOptions = this.component.options.map(mapOption);
+        await this.component.valueUtil.updateInputContent();
+    }
+    async listenToOptionChange(_ev) {
+        var _a;
+        const newSelectedValues = (await ((_a = this.component.listEl) === null || _a === void 0 ? void 0 : _a.getSelectedValues())) || [];
+        this.component.valueUtil.updateRawValueBySelection(newSelectedValues);
+        if (!this.component.multiple) {
+            this.component.popupUtil.collapseList();
+        }
+    }
+}

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

@@ -0,0 +1,45 @@
+import { autoUpdate, computePosition, flip, shift } from "@floating-ui/dom";
+export class DropdownPopupUtil {
+    constructor() {
+        this.updatePanelPosition = (referenceEl, floatingEl) => () => {
+            computePosition(referenceEl, floatingEl, {
+                placement: 'bottom-start',
+                middleware: [flip(), shift()],
+            }).then(({ x, y }) => {
+                Object.assign(floatingEl.style, {
+                    left: `${x}px`,
+                    top: `${y}px`,
+                });
+            });
+        };
+    }
+    connectedCallback(component) {
+        this.component = component;
+    }
+    toggleList() {
+        if (!this.component.valueUtil.isDisabled()) {
+            if (this.component.isExpanded) {
+                this.collapseList();
+            }
+            else {
+                this.expandList();
+            }
+        }
+    }
+    expandList() {
+        var _a;
+        if (this.component.panelEl) {
+            this.component.panelCleanup = autoUpdate(this.component.el, this.component.panelEl, this.updatePanelPosition(this.component.el, this.component.panelEl));
+        }
+        this.component.isExpanded = true;
+        (_a = this.component.listEl) === null || _a === void 0 ? void 0 : _a.focusFirst();
+    }
+    collapseList() {
+        var _a;
+        this.component.isExpanded = false;
+        (_a = this.component.listEl) === null || _a === void 0 ? void 0 : _a.resetFocus();
+        if (this.component.panelCleanup) {
+            this.component.panelCleanup();
+        }
+    }
+}