@baloise/ds-core 19.3.0 → 19.4.0-nightly.20250721

package/dist/collection/components/bal-field/bal-field-label/bal-field-label.js

@@ -1,13 +1,45 @@
 import { h, Host } from "@stencil/core";
 export class FieldLabel {
     constructor() {
+        /**
+         * PUBLIC PROPERTY API
+         * ------------------------------------------------------
+         */
+        /**
+         * The value of the for attribute must be a single id for a labeled
+         * form-related element in the same document as the <label> element.
+         * So, any given label element can be associated with only one form control.
+         */
         this.htmlFor = undefined;
+        /**
+         * If `true` the form control needs to be filled. If it is set to
+         * `false` an optional label is added to the label..
+         */
         this.required = true;
+        /**
+         * If `true` the component gets a valid green style.
+         */
         this.valid = undefined;
+        /**
+         * If `true` the component gets a invalid red style.
+         */
         this.invalid = undefined;
+        /**
+         * 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 = undefined;
+        /**
+         * If `true` the element can not mutated, meaning the user can not edit the control.
+         */
         this.readonly = undefined;
+        /**
+         * Defines the size of the font. Default is like a heading 5 and small is used
+         * with the form fields.
+         */
         this.size = 'small';
+        /**
+         * Defines the font weight of the label.
+         */
         this.weight = 'bold';
     }
     /**
@@ -40,6 +72,7 @@ export class FieldLabel {
         return {
             "htmlFor": {
                 "type": "string",
+                "attribute": "html-for",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -54,12 +87,12 @@ export class FieldLabel {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "html-for",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "required": {
                 "type": "boolean",
+                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -74,12 +107,12 @@ export class FieldLabel {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "required",
                 "reflect": false,
                 "defaultValue": "true"
             },
             "valid": {
                 "type": "boolean",
+                "attribute": "valid",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -94,12 +127,12 @@ export class FieldLabel {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "valid",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "invalid": {
                 "type": "boolean",
+                "attribute": "invalid",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -114,12 +147,12 @@ export class FieldLabel {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "invalid",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -134,12 +167,12 @@ export class FieldLabel {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "readonly": {
                 "type": "boolean",
+                "attribute": "readonly",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -154,12 +187,12 @@ export class FieldLabel {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "readonly",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "size": {
                 "type": "string",
+                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalFieldLabelSize",
@@ -179,12 +212,12 @@ export class FieldLabel {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
                 "reflect": false,
                 "defaultValue": "'small'"
             },
             "weight": {
                 "type": "string",
+                "attribute": "weight",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalFieldLabelWeight",
@@ -204,7 +237,6 @@ export class FieldLabel {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "weight",
                 "reflect": false,
                 "defaultValue": "'bold'"
             }

package/dist/collection/components/bal-field/bal-field-message/bal-field-message.js

@@ -3,10 +3,25 @@ import { defaultBalAriaForm } from "../../../utils/form";
 export class FieldMessage {
     constructor() {
         this.ariaForm = defaultBalAriaForm;
+        /**
+         * Defines the color of the message.
+         */
         this.color = '';
+        /**
+         * If `true` the component gets a invalid red style.
+         */
         this.invalid = false;
+        /**
+         * If `true` the component gets a valid green style.
+         */
         this.valid = 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;
     }
     /**
@@ -30,6 +45,7 @@ export class FieldMessage {
         return {
             "color": {
                 "type": "string",
+                "attribute": "color",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalFieldMessageColor",
@@ -49,12 +65,12 @@ export class FieldMessage {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "color",
                 "reflect": false,
                 "defaultValue": "''"
             },
             "invalid": {
                 "type": "boolean",
+                "attribute": "invalid",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -69,12 +85,12 @@ export class FieldMessage {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "invalid",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "valid": {
                 "type": "boolean",
+                "attribute": "valid",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -89,12 +105,12 @@ export class FieldMessage {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "valid",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -109,12 +125,12 @@ export class FieldMessage {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "readonly": {
                 "type": "boolean",
+                "attribute": "readonly",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -129,7 +145,6 @@ export class FieldMessage {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "readonly",
                 "reflect": false,
                 "defaultValue": "false"
             }

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

@@ -24,6 +24,35 @@ export class Field {
             'bal-segment',
         ];
         this.formElements = [...this.formControlElement, 'bal-field-label', 'bal-field-message'];
+        /**
+         * If `true` the form control needs to be filled. If it is set to
+         * `false` an optional label is added to the label..
+         */
+        this.required = undefined;
+        /**
+         * If true, label and input are aligned horizontally within the field component, with the message positioned in a new line below.
+         */
+        this.horizontal = false;
+        /**
+         * If `true` the component gets a invalid red style.
+         */
+        this.invalid = undefined;
+        /**
+         * If `true` the component gets a valid green style.
+         */
+        this.valid = 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 = undefined;
+        /**
+         * If `true` the element can not mutated, meaning the user can not edit the control.
+         */
+        this.readonly = undefined;
+        /**
+         * If `true` a loading spinner is visible at the end of the input
+         */
+        this.loading = undefined;
         this.isDirectChild = (el) => {
             if (!el) {
                 return false;
@@ -64,13 +93,6 @@ export class Field {
                 .flat();
         };
         this.mutationObserverActive = true;
-        this.required = undefined;
-        this.horizontal = false;
-        this.invalid = undefined;
-        this.valid = false;
-        this.disabled = undefined;
-        this.readonly = undefined;
-        this.loading = undefined;
     }
     requiredHandler() {
         this.updateProps([...this.inputElements, 'bal-field-label'], 'required');
@@ -188,6 +210,7 @@ export class Field {
         return {
             "required": {
                 "type": "boolean",
+                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -202,12 +225,12 @@ export class Field {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "required",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "horizontal": {
                 "type": "boolean",
+                "attribute": "horizontal",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -222,12 +245,12 @@ export class Field {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "horizontal",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "invalid": {
                 "type": "boolean",
+                "attribute": "invalid",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -242,12 +265,12 @@ export class Field {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "invalid",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "valid": {
                 "type": "boolean",
+                "attribute": "valid",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -262,12 +285,12 @@ export class Field {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "valid",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -282,12 +305,12 @@ export class Field {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "readonly": {
                 "type": "boolean",
+                "attribute": "readonly",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -302,12 +325,12 @@ export class Field {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "readonly",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "loading": {
                 "type": "boolean",
+                "attribute": "loading",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -322,7 +345,6 @@ export class Field {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "loading",
                 "reflect": false,
                 "defaultValue": "undefined"
             }

package/dist/collection/components/bal-file-upload/bal-file-upload.js

@@ -11,7 +11,58 @@ import { ariaBooleanToString } from "../../utils/aria";
 export class FileUpload {
     constructor() {
         this.fileUploadId = `bal-file-upload-${FileUploadIds++}`;
+        this.files = [];
+        this.focused = false;
+        this.ariaForm = defaultBalAriaForm;
+        /**
+         * PUBLIC PROPERTY API
+         * ------------------------------------------------------
+         */
+        /**
+         * The name of the control, which is submitted with the form data.
+         */
+        this.name = this.fileUploadId;
+        /**
+         * Input value.
+         */
+        this.value = [];
         this.initialValue = this.value || [];
+        /**
+         * Label of the drop area.
+         */
+        this.label = 'Choose or drop a file...';
+        /**
+         * If `true` multiple file upload is possible.
+         */
+        this.multiple = true;
+        /**
+         * 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 file upload is disabled and shows a spinner
+         */
+        this.loading = false;
+        /**
+         * If `true`, the user must fill in a value before submitting a form.
+         */
+        this.required = false;
+        /**
+         * If `true` below the drop-down area it generates a file list.
+         */
+        this.hasFileList = true;
+        /**
+         * If `true` the component gets a invalid style.
+         */
+        this.invalid = false;
+        /**
+         * If `true`, in Angular reactive forms the control will not be set invalid
+         */
+        this.autoInvalidOff = false;
         /**
          * PRIVATE METHODS
          * ------------------------------------------------------
@@ -101,25 +152,6 @@ export class FileUpload {
             }
             this.balInputClick.emit(ev);
         };
-        this.files = [];
-        this.focused = false;
-        this.ariaForm = defaultBalAriaForm;
-        this.name = this.fileUploadId;
-        this.value = [];
-        this.label = 'Choose or drop a file...';
-        this.multiple = true;
-        this.disabled = false;
-        this.readonly = false;
-        this.loading = false;
-        this.required = false;
-        this.accept = undefined;
-        this.maxFiles = undefined;
-        this.maxFileSize = undefined;
-        this.maxBundleSize = undefined;
-        this.hasFileList = true;
-        this.invalid = false;
-        this.subTitle = undefined;
-        this.autoInvalidOff = false;
     }
     createLogger(log) {
         this.log = log;
@@ -228,6 +260,7 @@ export class FileUpload {
         return {
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -242,12 +275,12 @@ export class FileUpload {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "name",
                 "reflect": false,
                 "defaultValue": "this.fileUploadId"
             },
             "value": {
                 "type": "unknown",
+                "attribute": "value",
                 "mutable": false,
                 "complexType": {
                     "original": "File[]",
@@ -271,6 +304,7 @@ export class FileUpload {
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -285,12 +319,12 @@ export class FileUpload {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
                 "reflect": false,
                 "defaultValue": "'Choose or drop a file...'"
             },
             "multiple": {
                 "type": "boolean",
+                "attribute": "multiple",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -305,12 +339,12 @@ export class FileUpload {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "multiple",
                 "reflect": false,
                 "defaultValue": "true"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -325,12 +359,12 @@ export class FileUpload {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "readonly": {
                 "type": "boolean",
+                "attribute": "readonly",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -345,12 +379,12 @@ export class FileUpload {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "readonly",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "loading": {
                 "type": "boolean",
+                "attribute": "loading",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -365,12 +399,12 @@ export class FileUpload {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "loading",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "required": {
                 "type": "boolean",
+                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -385,12 +419,12 @@ export class FileUpload {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "required",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "accept": {
                 "type": "string",
+                "attribute": "accept",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -405,11 +439,11 @@ export class FileUpload {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accept",
                 "reflect": false
             },
             "maxFiles": {
                 "type": "number",
+                "attribute": "max-files",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -424,11 +458,11 @@ export class FileUpload {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "max-files",
                 "reflect": false
             },
             "maxFileSize": {
                 "type": "number",
+                "attribute": "max-file-size",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -443,11 +477,11 @@ export class FileUpload {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "max-file-size",
                 "reflect": false
             },
             "maxBundleSize": {
                 "type": "number",
+                "attribute": "max-bundle-size",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -462,11 +496,11 @@ export class FileUpload {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "max-bundle-size",
                 "reflect": false
             },
             "hasFileList": {
                 "type": "boolean",
+                "attribute": "has-file-list",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -481,12 +515,12 @@ export class FileUpload {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "has-file-list",
                 "reflect": false,
                 "defaultValue": "true"
             },
             "invalid": {
                 "type": "boolean",
+                "attribute": "invalid",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -501,12 +535,12 @@ export class FileUpload {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "invalid",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "subTitle": {
                 "type": "unknown",
+                "attribute": "sub-title",
                 "mutable": false,
                 "complexType": {
                     "original": "(file: File) => string",
@@ -529,6 +563,7 @@ export class FileUpload {
             },
             "autoInvalidOff": {
                 "type": "boolean",
+                "attribute": "auto-invalid-off",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -543,7 +578,6 @@ export class FileUpload {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "auto-invalid-off",
                 "reflect": true,
                 "defaultValue": "false"
             }