@baloise/ds-core 19.2.0 → 19.3.0-nightly.20250630

package/dist/collection/components/bal-input-slider/bal-input-slider.js

@@ -11,6 +11,59 @@ export class InputSlider {
         this.didInit = false;
         this.hasFocus = false;
         this.initialValue = '';
+        this.ariaForm = defaultBalAriaForm;
+        /**
+         * The name of the control, which is submitted with the form data.
+         */
+        this.name = this.inputId;
+        /**
+         * The step size. 0 means no steps.
+         */
+        this.step = 0;
+        /**
+         * Min value of the model.
+         */
+        this.min = 0;
+        /**
+         * Max value of the model.
+         */
+        this.max = 100;
+        /**
+         * If `true` the component gets a invalid style.
+         */
+        this.invalid = false;
+        /**
+         * The tabindex of the control.
+         */
+        this.balTabindex = 0;
+        /**
+         * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
+         */
+        this.disabled = false;
+        /**
+         * If `true` the element can not mutated, meaning the user can not edit the control.
+         */
+        this.readonly = false;
+        /**
+         * If `true`, the user must fill in a value before submitting a form.
+         */
+        this.required = false;
+        /**
+         * If `true`, small ticks for the steps are shown.
+         */
+        this.hasTicks = false;
+        /**
+         * Set the amount of time, in milliseconds, to wait to trigger the `balChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.
+         */
+        this.debounce = 0;
+        /**
+         * The value of the input.
+         */
+        this.value = '';
+        /**
+         * If `true`, in Angular reactive forms the control will not be set invalid
+         */
+        this.autoInvalidOff = false;
         this.onInput = (ev) => {
             const input = ev.target;
             if (input) {
@@ -33,20 +86,6 @@ export class InputSlider {
             this.balBlur.emit(ev);
             this.balChange.emit(this.value);
         };
-        this.ariaForm = defaultBalAriaForm;
-        this.name = this.inputId;
-        this.step = 0;
-        this.min = 0;
-        this.max = 100;
-        this.invalid = false;
-        this.balTabindex = 0;
-        this.disabled = false;
-        this.readonly = false;
-        this.required = false;
-        this.hasTicks = false;
-        this.debounce = 0;
-        this.value = '';
-        this.autoInvalidOff = false;
     }
     debounceChanged() {
         this.balChange = debounceEvent(this.balChange, this.debounce);
@@ -167,6 +206,7 @@ export class InputSlider {
         return {
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -181,12 +221,12 @@ export class InputSlider {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "name",
                 "reflect": false,
                 "defaultValue": "this.inputId"
             },
             "step": {
                 "type": "number",
+                "attribute": "step",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -201,12 +241,12 @@ export class InputSlider {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "step",
                 "reflect": false,
                 "defaultValue": "0"
             },
             "min": {
                 "type": "number",
+                "attribute": "min",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -221,12 +261,12 @@ export class InputSlider {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "min",
                 "reflect": false,
                 "defaultValue": "0"
             },
             "max": {
                 "type": "number",
+                "attribute": "max",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -241,12 +281,12 @@ export class InputSlider {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "max",
                 "reflect": false,
                 "defaultValue": "100"
             },
             "invalid": {
                 "type": "boolean",
+                "attribute": "invalid",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -261,12 +301,12 @@ export class InputSlider {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "invalid",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "balTabindex": {
                 "type": "number",
+                "attribute": "bal-tabindex",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -281,12 +321,12 @@ export class InputSlider {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "bal-tabindex",
                 "reflect": false,
                 "defaultValue": "0"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -301,12 +341,12 @@ export class InputSlider {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "readonly": {
                 "type": "boolean",
+                "attribute": "readonly",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -321,12 +361,12 @@ export class InputSlider {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "readonly",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "required": {
                 "type": "boolean",
+                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -341,12 +381,12 @@ export class InputSlider {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "required",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "hasTicks": {
                 "type": "boolean",
+                "attribute": "has-ticks",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -361,12 +401,12 @@ export class InputSlider {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "has-ticks",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "debounce": {
                 "type": "number",
+                "attribute": "debounce",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -381,12 +421,12 @@ export class InputSlider {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "debounce",
                 "reflect": false,
                 "defaultValue": "0"
             },
             "value": {
                 "type": "any",
+                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string | number",
@@ -401,12 +441,12 @@ export class InputSlider {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": false,
                 "defaultValue": "''"
             },
             "autoInvalidOff": {
                 "type": "boolean",
+                "attribute": "auto-invalid-off",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -421,7 +461,6 @@ export class InputSlider {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "auto-invalid-off",
                 "reflect": true,
                 "defaultValue": "false"
             }

package/dist/collection/components/bal-input-stepper/bal-input-stepper.css

@@ -1 +1 @@
-.bal-input-stepper{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:static;display:inline-block}.bal-input-stepper__inner{display:flex;gap:.25rem;justify-content:center;align-items:center}.bal-input-stepper__inner__text{min-width:3rem;text-align:center}.bal-input-stepper__input{position:absolute;width:0;height:0;left:0;top:0;margin:0;padding:0;opacity:0;outline:0}
+.bal-input-stepper{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:static;display:inline-block}.bal-input-stepper__inner{display:flex;gap:.25rem;justify-content:center;align-items:center}.bal-input-stepper__inner__text{min-width:3rem;text-align:center;font-weight:700}.bal-input-stepper__inner__text--invalid{color:var(--bal-color-text-danger)}.bal-input-stepper__inner__text--disabled{color:var(--bal-color-text-grey)}.bal-input-stepper__input{position:absolute;width:0;height:0;left:0;top:0;margin:0;padding:0;opacity:0;outline:0}

package/dist/collection/components/bal-input-stepper/bal-input-stepper.js

@@ -1,23 +1,67 @@
 import { __decorate, __metadata } from "tslib";
-import { h, Host, } from "@stencil/core";
+import { Host, h, } from "@stencil/core";
 import Big from "big.js";
-import { formatLocaleNumber } from "../../utils/number";
-import { debounceEvent, rIC } from "../../utils/helpers";
+import { ariaBooleanToString } from "../../utils/aria";
 import { inheritAttributes } from "../../utils/attributes";
-import { inputListenOnClick, stopEventBubbling } from "../../utils/form-input";
-import { ListenToConfig, defaultConfig, } from "../../utils/config";
 import { BEM } from "../../utils/bem";
+import { ListenToConfig, defaultConfig, } from "../../utils/config";
 import { defaultBalAriaForm } from "../../utils/form";
-import { i18nBalInputStepper } from "./bal-input-stepper.i18n";
+import { inputListenOnClick, stopEventBubbling } from "../../utils/form-input";
+import { debounceEvent, rIC } from "../../utils/helpers";
 import { Logger } from "../../utils/log";
-import { ariaBooleanToString } from "../../utils/aria";
+import { formatLocaleNumber } from "../../utils/number";
+import { i18nBalInputStepper } from "./bal-input-stepper.i18n";
 export class InputStepper {
     constructor() {
         this.inputId = `bal-input-stepper-${InputStepperIds++}`;
         this.inheritedAttributes = {};
         this.decreaseHasFocus = false;
         this.increaseHasFocus = false;
+        this.focused = false;
+        this.language = defaultConfig.language;
+        this.region = defaultConfig.region;
+        this.ariaForm = defaultBalAriaForm;
+        /**
+         * The name of the control, which is submitted with the form data.
+         */
+        this.name = this.inputId;
+        /**
+         * The min value the input can have
+         */
+        this.min = 0;
+        /**
+         * The max value the input can have
+         */
+        this.max = 10;
+        /**
+         * The steps in which the input increases or decreases
+         */
+        this.steps = 1;
+        /**
+         * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
+         */
+        this.disabled = false;
+        /**
+         * If `true` the element can not mutated, meaning the user can not edit the control.
+         */
+        this.readonly = false;
+        /**
+         * If `true` the input is shown as invalid
+         */
+        this.invalid = false;
+        /**
+         * Set the amount of time, in milliseconds, to wait to trigger the `balChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.
+         */
+        this.debounce = 0;
+        /**
+         * The value of the input. Only allows values in the range of the min max attribute.
+         */
+        this.value = 0;
         this.initialValue = 0;
+        /**
+         * If `true`, in Angular reactive forms the control will not be set invalid
+         */
+        this.autoInvalidOff = false;
         this.onFocusDecrease = (ev) => {
             this.decreaseHasFocus = true;
             this.onFocus(ev);
@@ -45,20 +89,6 @@ export class InputStepper {
                 this.balBlur.emit(ev);
             }
         };
-        this.focused = false;
-        this.language = defaultConfig.language;
-        this.region = defaultConfig.region;
-        this.ariaForm = defaultBalAriaForm;
-        this.name = this.inputId;
-        this.min = 0;
-        this.max = 10;
-        this.steps = 1;
-        this.disabled = false;
-        this.readonly = false;
-        this.invalid = false;
-        this.debounce = 0;
-        this.value = 0;
-        this.autoInvalidOff = false;
     }
     createLogger(log) {
         this.log = log;
@@ -130,15 +160,7 @@ export class InputStepper {
         const elText = elInner.element('text');
         const increaseLabel = i18nBalInputStepper[this.language].increase;
         const decreaseLabel = i18nBalInputStepper[this.language].decrease;
-        return (h(Host, { key: 'cfa84687c890114f02d591a21a46a07661469a48', "aria-disabled": ariaBooleanToString(this.disabled), "aria-focused": this.focused ? 'true' : null, class: Object.assign({}, block.class()) }, h("div", { key: '5335fcef9736cd54bc837ec55ab8431aac73ad49', class: Object.assign({}, elInner.class()) }, h("bal-button", { key: 'd38eb81f66d7c5ddda78c46fd4f7a761c1b118b9', aria: {
-                title: decreaseLabel,
-                label: decreaseLabel,
-                controls: this.ariaForm.controlId || this.inputId,
-            }, size: "small", square: true, "data-testid": "bal-input-stepper-decrease", outlined: !this.invalid, icon: "minus", color: this.invalid ? 'danger' : 'info', disabled: this.disabled || this.readonly || this.value <= this.min, onClick: _ => this.decrease(), onBalFocus: ev => this.onFocusDecrease(ev), onBalBlur: ev => this.onBlurDecrease(ev) }), h("bal-text", { key: 'b04e1e5118df414fe27ad18b27c63f9d1f8296c4', space: "none", color: this.disabled || this.readonly ? 'grey' : this.invalid ? 'danger' : '', bold: true, class: Object.assign({}, elText.class()), "data-testid": "bal-input-stepper-text" }, formatLocaleNumber(this.value)), h("bal-button", { key: '72d30a316782c5a7b2a3b024ae6b1d0b2dddf218', aria: {
-                title: increaseLabel,
-                label: increaseLabel,
-                controls: this.ariaForm.controlId || this.inputId,
-            }, size: "small", "data-testid": "bal-input-stepper-increase", square: true, outlined: !this.invalid, icon: "plus", color: this.invalid ? 'danger' : 'info', disabled: this.disabled || this.readonly || this.value >= this.max, onClick: _ => this.increase(), onBalFocus: ev => this.onFocusIncrease(ev), onBalBlur: ev => this.onBlurIncrease(ev) })), h("input", Object.assign({ key: 'fc24fd180574bc350584e3375682a079278362ec', class: Object.assign({}, elInput.class()), 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-input-stepper", type: "text", value: this.value, name: this.name, tabindex: "-1", ref: inputEl => (this.nativeInput = inputEl), readonly: this.readonly, disabled: this.disabled }, this.inheritedAttributes))));
+        return (h(Host, { key: 'cfa84687c890114f02d591a21a46a07661469a48', "aria-disabled": ariaBooleanToString(this.disabled), "aria-focused": this.focused ? 'true' : null, class: Object.assign({}, block.class()) }, h("div", { key: '5335fcef9736cd54bc837ec55ab8431aac73ad49', class: Object.assign({}, elInner.class()) }, h("bal-button", { key: 'a55658ae806919db98ad1b388f0bf7314c7a744f', a11yTitle: decreaseLabel, a11yLabel: decreaseLabel, a11yControls: this.ariaForm.controlId || this.inputId, size: "small", square: true, "data-testid": "bal-input-stepper-decrease", outlined: !this.invalid, icon: "minus", color: this.invalid ? 'danger' : 'info', disabled: this.disabled || this.readonly || this.value <= this.min, onClick: _ => this.decrease(), onBalFocus: ev => this.onFocusDecrease(ev), onBalBlur: ev => this.onBlurDecrease(ev) }), h("span", { key: '0a30ea1ba1435fe86b090d9aff393cb7520939aa', "data-testid": "bal-input-stepper-text", class: Object.assign(Object.assign(Object.assign({}, elText.class()), elText.modifier('invalid').class(this.invalid)), elText.modifier('disabled').class(this.disabled || this.readonly)) }, formatLocaleNumber(this.value)), h("bal-button", { key: '06004c24961ea016ef35fd0e1d029d08588b12e8', a11yTitle: increaseLabel, a11yLabel: increaseLabel, a11yControls: this.ariaForm.controlId || this.inputId, size: "small", "data-testid": "bal-input-stepper-increase", square: true, outlined: !this.invalid, icon: "plus", color: this.invalid ? 'danger' : 'info', disabled: this.disabled || this.readonly || this.value >= this.max, onClick: _ => this.increase(), onBalFocus: ev => this.onFocusIncrease(ev), onBalBlur: ev => this.onBlurIncrease(ev) })), h("input", Object.assign({ key: '4b6c8ec2e19eb957d080fa79aef07667dc79a2ad', class: Object.assign({}, elInput.class()), 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-input-stepper", type: "text", value: this.value, name: this.name, tabindex: "-1", ref: inputEl => (this.nativeInput = inputEl), readonly: this.readonly, disabled: this.disabled }, this.inheritedAttributes))));
     }
     static get is() { return "bal-input-stepper"; }
     static get originalStyleUrls() {
@@ -155,6 +177,7 @@ export class InputStepper {
         return {
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -169,12 +192,12 @@ export class InputStepper {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "name",
                 "reflect": false,
                 "defaultValue": "this.inputId"
             },
             "min": {
                 "type": "number",
+                "attribute": "min",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -189,12 +212,12 @@ export class InputStepper {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "min",
                 "reflect": false,
                 "defaultValue": "0"
             },
             "max": {
                 "type": "number",
+                "attribute": "max",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -209,12 +232,12 @@ export class InputStepper {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "max",
                 "reflect": false,
                 "defaultValue": "10"
             },
             "steps": {
                 "type": "number",
+                "attribute": "steps",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -229,12 +252,12 @@ export class InputStepper {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "steps",
                 "reflect": false,
                 "defaultValue": "1"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -249,12 +272,12 @@ export class InputStepper {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "readonly": {
                 "type": "boolean",
+                "attribute": "readonly",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -269,12 +292,12 @@ export class InputStepper {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "readonly",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "invalid": {
                 "type": "boolean",
+                "attribute": "invalid",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -289,12 +312,12 @@ export class InputStepper {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "invalid",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "debounce": {
                 "type": "number",
+                "attribute": "debounce",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -309,12 +332,12 @@ export class InputStepper {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "debounce",
                 "reflect": false,
                 "defaultValue": "0"
             },
             "value": {
                 "type": "number",
+                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "number",
@@ -329,12 +352,12 @@ export class InputStepper {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": false,
                 "defaultValue": "0"
             },
             "autoInvalidOff": {
                 "type": "boolean",
+                "attribute": "auto-invalid-off",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -349,7 +372,6 @@ export class InputStepper {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "auto-invalid-off",
                 "reflect": true,
                 "defaultValue": "false"
             }