@baloise/ds-core 19.3.0 → 19.4.0

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

@@ -1,21 +1,103 @@
 import { __decorate, __metadata } from "tslib";
 import { h, Host, } from "@stencil/core";
-import { debounceEvent } from "../../utils/helpers";
-import { inheritAttributes } from "../../utils/attributes";
-import { getInputTarget, inputHandleBlur, inputHandleChange, inputHandleClick, inputHandleFocus, inputHandleHostClick, inputHandleReset, inputListenOnClick, inputSetBlur, inputSetFocus, stopEventBubbling, } from "../../utils/form-input";
-import { formatBeEnterpriseNumber, formatBeIBAN, formatClaim, formatOffer, formatPolicy, MAX_LENGTH_BE_ENTERPRISE_NUMBER, MAX_LENGTH_BE_IBAN, MAX_LENGTH_CLAIM_NUMBER, MAX_LENGTH_CONTRACT_NUMBER, MAX_LENGTH_OFFER_NUMBER, MAX_LENGTH_BASIC_CONTRACT_NUMBER, } from "./bal-input-util";
 import isNil from "lodash.isnil";
-import { ACTION_KEYS, isCtrlOrCommandKey, NUMBER_KEYS } from "../../utils/constants/keys.constant";
+import { ariaBooleanToString } from "../../utils/aria";
+import { inheritAttributes } from "../../utils/attributes";
 import { BEM } from "../../utils/bem";
-import { Logger } from "../../utils/log";
+import { ACTION_KEYS, isCtrlOrCommandKey, NUMBER_KEYS } from "../../utils/constants/keys.constant";
 import { defaultBalAriaForm } from "../../utils/form";
-import { ariaBooleanToString } from "../../utils/aria";
+import { getInputTarget, inputHandleBlur, inputHandleChange, inputHandleClick, inputHandleFocus, inputHandleHostClick, inputHandleReset, inputListenOnClick, inputSetBlur, inputSetFocus, stopEventBubbling, } from "../../utils/form-input";
+import { debounceEvent } from "../../utils/helpers";
+import { Logger } from "../../utils/log";
+import { formatBeEnterpriseNumber, formatBeIBAN, formatClaim, formatOffer, formatPolicy, formatVehicleRegistrationNumber, MAX_LENGTH_BASIC_CONTRACT_NUMBER, MAX_LENGTH_BE_ENTERPRISE_NUMBER, MAX_LENGTH_BE_IBAN, MAX_LENGTH_CLAIM_NUMBER, MAX_LENGTH_CONTRACT_NUMBER, MAX_LENGTH_OFFER_NUMBER, MAX_LENGTH_VEHICLE_REGISTRATION_NUMBER, } from "./bal-input-util";
 export class Input {
     constructor() {
         this.inputId = `bal-input-${InputIds++}`;
         this.inheritedAttributes = {};
         this.inputValue = this.value;
         this.initialValue = this.value || '';
+        this.focused = false;
+        this.ariaForm = defaultBalAriaForm;
+        /**
+         * The name of the control, which is submitted with the form data.
+         */
+        this.name = this.inputId;
+        /**
+         * If `true` the component gets a invalid style.
+         */
+        this.invalid = false;
+        /**
+         * Defines the text align of the input value.
+         */
+        this.textAlign = 'left';
+        /**
+         * Defines the type of the input (text, number, email ...).
+         */
+        this.type = 'text';
+        /**
+         * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
+         * Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
+         */
+        this.autocapitalize = 'off';
+        /**
+         * Indicates whether the value of the control can be automatically completed by the browser.
+         */
+        this.autocomplete = 'off';
+        /**
+         * Whether auto correction should be enabled when the user is entering/editing the text value.
+         */
+        this.autocorrect = 'off';
+        /**
+         * This Boolean attribute lets you specify that a form control should have input focus when the page loads.
+         */
+        this.autofocus = 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;
+        /**
+         * If `true`, the user must fill in a value before submitting a form.
+         */
+        this.required = false;
+        /**
+         * If `true`, the element will have its spelling and grammar checked.
+         */
+        this.spellcheck = false;
+        /**
+         * 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 gets a clickable cursor style
+         */
+        this.clickable = false;
+        /**
+         * @internal
+         * If `true` the input will get some right padding.
+         */
+        this.hasIconRight = false;
+        /**
+         * The value of the input.
+         */
+        this.value = undefined;
+        /**
+         * Mask of the input field. It defines what the user can enter and how the format looks like. Currently, only for Switzerland formatted with addition of Belgian enterprisenumber and IBAN.
+         * Formatting for 'contract-number': '99/1.234.567-1'
+         * Formatting for 'basic-contract-number': '99/1.234.567'
+         * Formatting for 'claim-number': ('73/001217/16.9')
+         * Formatting for 'offer-number': ('98/7.654.321')
+         * Formatting for 'be-enterprise-number': ('1234.567.890')
+         * Formatting for 'be-iban': ('BE68 5390 0754 7034')
+         */
+        this.mask = undefined;
+        /**
+         * If `true`, in Angular reactive forms the control will not be set invalid
+         */
+        this.autoInvalidOff = false;
         this.getInputValue = () => {
             var _a;
             const input = this.nativeInput;
@@ -33,6 +115,13 @@ export class Input {
                 if (input.value) {
                     if (this.mask) {
                         switch (this.mask) {
+                            case 'vehicle-registration-number': {
+                                inputValue = input.value.replace(/\D/g, '');
+                                if (inputValue.length > MAX_LENGTH_VEHICLE_REGISTRATION_NUMBER) {
+                                    inputValue = inputValue.substring(0, MAX_LENGTH_VEHICLE_REGISTRATION_NUMBER);
+                                }
+                                return inputValue;
+                            }
                             case 'contract-number': {
                                 inputValue = input.value.replace(/\D/g, '');
                                 // Removing the leading zero if presented
@@ -118,6 +207,13 @@ export class Input {
             if (input) {
                 if (input.value) {
                     switch (this.mask) {
+                        case 'vehicle-registration-number': {
+                            input.value = formatVehicleRegistrationNumber(this.inputValue);
+                            if (cursorPositionStart < this.inputValue.length) {
+                                input.setSelectionRange(cursorPositionStart, cursorPositionEnd);
+                            }
+                            break;
+                        }
                         case 'contract-number':
                         case 'basic-contract-number': {
                             input.value = formatPolicy(this.inputValue);
@@ -198,37 +294,6 @@ export class Input {
         };
         this.onClick = (ev) => inputHandleClick(this, ev);
         this.handleClick = (ev) => inputHandleHostClick(this, ev);
-        this.focused = false;
-        this.ariaForm = defaultBalAriaForm;
-        this.name = this.inputId;
-        this.invalid = false;
-        this.textAlign = 'left';
-        this.type = 'text';
-        this.accept = undefined;
-        this.autocapitalize = 'off';
-        this.autocomplete = 'off';
-        this.autocorrect = 'off';
-        this.autofocus = false;
-        this.debounce = 0;
-        this.placeholder = undefined;
-        this.max = undefined;
-        this.maxLength = undefined;
-        this.min = undefined;
-        this.minLength = undefined;
-        this.multiple = undefined;
-        this.pattern = undefined;
-        this.allowedKeyPress = undefined;
-        this.required = false;
-        this.spellcheck = false;
-        this.disabled = false;
-        this.readonly = false;
-        this.clickable = false;
-        this.suffix = undefined;
-        this.hasIconRight = false;
-        this.inputmode = undefined;
-        this.value = undefined;
-        this.mask = undefined;
-        this.autoInvalidOff = false;
     }
     createLogger(log) {
         this.log = log;
@@ -322,7 +387,7 @@ export class Input {
         }
         const block = BEM.block('input');
         const id = this.ariaForm.controlId || this.inputId;
-        return (h(Host, { key: 'c247683cd5ac331743d71c8872a59ccfacbcae83', onClick: this.handleClick, "aria-disabled": ariaBooleanToString(this.disabled), class: Object.assign({}, block.class()) }, h("input", Object.assign({ key: '992f567fd137664f50f73443fdc283ed7622297d', class: {
+        return (h(Host, { key: 'b38cc633916b8848286b2fb1f17f4b14fae5ca71', onClick: this.handleClick, "aria-disabled": ariaBooleanToString(this.disabled), class: Object.assign({}, block.class()) }, h("input", Object.assign({ key: 'dc043f631ba56a767923b87ef13c370a2d93acbb', class: {
                 'input': true,
                 'is-disabled': this.disabled || this.readonly,
                 'is-danger': this.invalid,
@@ -348,6 +413,7 @@ export class Input {
         return {
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -362,12 +428,12 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "name",
                 "reflect": false,
                 "defaultValue": "this.inputId"
             },
             "invalid": {
                 "type": "boolean",
+                "attribute": "invalid",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -382,12 +448,12 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "invalid",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "textAlign": {
                 "type": "string",
+                "attribute": "text-align",
                 "mutable": false,
                 "complexType": {
                     "original": "'center' | 'left' | 'right'",
@@ -402,12 +468,12 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "text-align",
                 "reflect": false,
                 "defaultValue": "'left'"
             },
             "type": {
                 "type": "string",
+                "attribute": "type",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalInputInputType",
@@ -427,12 +493,12 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "type",
                 "reflect": false,
                 "defaultValue": "'text'"
             },
             "accept": {
                 "type": "string",
+                "attribute": "accept",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -447,11 +513,11 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accept",
                 "reflect": false
             },
             "autocapitalize": {
                 "type": "string",
+                "attribute": "autocapitalize",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -466,12 +532,12 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "autocapitalize",
                 "reflect": false,
                 "defaultValue": "'off'"
             },
             "autocomplete": {
                 "type": "string",
+                "attribute": "autocomplete",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalInputAutocomplete",
@@ -491,12 +557,12 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "autocomplete",
                 "reflect": false,
                 "defaultValue": "'off'"
             },
             "autocorrect": {
                 "type": "string",
+                "attribute": "autocorrect",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalInputAutocorrect",
@@ -516,12 +582,12 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "autocorrect",
                 "reflect": false,
                 "defaultValue": "'off'"
             },
             "autofocus": {
                 "type": "boolean",
+                "attribute": "autofocus",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -536,12 +602,12 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "autofocus",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "debounce": {
                 "type": "number",
+                "attribute": "debounce",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -556,12 +622,12 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "debounce",
                 "reflect": false,
                 "defaultValue": "0"
             },
             "placeholder": {
                 "type": "string",
+                "attribute": "placeholder",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -576,11 +642,11 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "placeholder",
                 "reflect": false
             },
             "max": {
                 "type": "string",
+                "attribute": "max",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -595,11 +661,11 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "max",
                 "reflect": false
             },
             "maxLength": {
                 "type": "number",
+                "attribute": "max-length",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -614,11 +680,11 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "max-length",
                 "reflect": false
             },
             "min": {
                 "type": "string",
+                "attribute": "min",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -633,11 +699,11 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "min",
                 "reflect": false
             },
             "minLength": {
                 "type": "number",
+                "attribute": "min-length",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -652,11 +718,11 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "min-length",
                 "reflect": false
             },
             "multiple": {
                 "type": "boolean",
+                "attribute": "multiple",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -671,11 +737,11 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "multiple",
                 "reflect": false
             },
             "pattern": {
                 "type": "string",
+                "attribute": "pattern",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -690,11 +756,11 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "pattern",
                 "reflect": false
             },
             "allowedKeyPress": {
                 "type": "string",
+                "attribute": "allowed-key-press",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -709,11 +775,11 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "allowed-key-press",
                 "reflect": false
             },
             "required": {
                 "type": "boolean",
+                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -728,12 +794,12 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "required",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "spellcheck": {
                 "type": "boolean",
+                "attribute": "spellcheck",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -748,12 +814,12 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "spellcheck",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -768,12 +834,12 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "readonly": {
                 "type": "boolean",
+                "attribute": "readonly",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -788,12 +854,12 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "readonly",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "clickable": {
                 "type": "boolean",
+                "attribute": "clickable",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -808,12 +874,12 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "clickable",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "suffix": {
                 "type": "string",
+                "attribute": "suffix",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -828,11 +894,11 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "suffix",
                 "reflect": false
             },
             "hasIconRight": {
                 "type": "boolean",
+                "attribute": "has-icon-right",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -850,12 +916,12 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "has-icon-right",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "inputmode": {
                 "type": "string",
+                "attribute": "inputmode",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalInputInputMode",
@@ -875,11 +941,11 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "inputmode",
                 "reflect": false
             },
             "value": {
                 "type": "string",
+                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -894,16 +960,16 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": true,
                 "defaultValue": "undefined"
             },
             "mask": {
                 "type": "string",
+                "attribute": "mask",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalInputMask",
-                    "resolved": "\"basic-contract-number\" | \"be-enterprise-number\" | \"be-iban\" | \"claim-number\" | \"contract-number\" | \"offer-number\"",
+                    "resolved": "\"basic-contract-number\" | \"be-enterprise-number\" | \"be-iban\" | \"claim-number\" | \"contract-number\" | \"offer-number\" | \"vehicle-registration-number\"",
                     "references": {
                         "BalProps": {
                             "location": "global",
@@ -919,12 +985,12 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "mask",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "autoInvalidOff": {
                 "type": "boolean",
+                "attribute": "auto-invalid-off",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -939,7 +1005,6 @@ export class Input {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "auto-invalid-off",
                 "reflect": true,
                 "defaultValue": "false"
             }

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

@@ -2,8 +2,17 @@ import { h, Host } from "@stencil/core";
 import { BEM } from "../../utils/bem";
 export class InputGroup {
     constructor() {
+        /**
+         * If `true` the component gets a invalid style.
+         */
         this.invalid = false;
+        /**
+         * 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;
     }
     render() {
@@ -29,6 +38,7 @@ export class InputGroup {
         return {
             "invalid": {
                 "type": "boolean",
+                "attribute": "invalid",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -43,12 +53,12 @@ export class InputGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "invalid",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -63,12 +73,12 @@ export class InputGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "readonly": {
                 "type": "boolean",
+                "attribute": "readonly",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -83,7 +93,6 @@ export class InputGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "readonly",
                 "reflect": false,
                 "defaultValue": "false"
             }