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

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

@@ -15,6 +15,14 @@ export class Checkbox {
         this.inputId = `bal-cb-${checkboxIds++}`;
         this.inheritedAttributes = {};
         this.keyboardMode = true;
+        this.hasLabel = true;
+        this.focused = false;
+        this.ariaForm = defaultBalAriaForm;
+        /**
+         * Track focus state
+         * If `true` checkbox needs to remain focused
+         */
+        this.wasFocused = false;
         this.outerElementState = {
             hovered: false,
             pressed: false,
@@ -23,7 +31,89 @@ export class Checkbox {
             hovered: false,
             pressed: false,
         };
+        this.mergedElementState = {
+            hovered: false,
+            pressed: false,
+        };
+        /**
+         * PUBLIC PROPERTY API
+         * ------------------------------------------------------
+         */
+        /**
+         * The name of the control, which is submitted with the form data.
+         */
+        this.name = this.inputId;
+        /**
+         * Label of the radio item.
+         */
+        this.label = '';
+        /**
+         * If `true` the checkbox has no label
+         */
+        this.labelHidden = false;
+        /**
+         * If `true` the control is no padding
+         */
+        this.flat = false;
+        /**
+         * Defines the layout of the checkbox button
+         */
+        this.interface = 'checkbox';
+        /**
+         * A DOMString representing the value of the checkbox. This is not displayed on the
+         * client-side, but on the server this is the value given to the data
+         * submitted with the checkbox's name.
+         */
+        this.value = 'on';
+        /**
+         * If `true`, the checkbox is selected.
+         */
+        this.checked = false;
         this.initialValue = 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 user must fill in a value before submitting a form.
+         */
+        this.required = false;
+        /**
+         * If `true`, in Angular reactive forms the control will not be set invalid
+         */
+        this.autoInvalidOff = false;
+        /**
+         * If `true`, the value will not be send with a form submit
+         */
+        this.nonSubmit = false;
+        /**
+         * If `true` the component gets a invalid style.
+         */
+        this.invalid = false;
+        /**
+         * @internal
+         */
+        this.hovered = false;
+        /**
+         * @internal
+         */
+        this.pressed = false;
+        /**
+         * @internal
+         */
+        this.colSize = 1;
+        /**
+         * @internal
+         */
+        this.colSizeTablet = 1;
+        /**
+         * @internal
+         */
+        this.colSizeMobile = 1;
         this.setChecked = (state) => {
             this.checked = state;
             this.balChange.emit(this.checked);
@@ -71,34 +161,6 @@ export class Checkbox {
             }
             this.keyboardMode = FOCUS_KEYS.includes(ev.key);
         };
-        this.hasLabel = true;
-        this.focused = false;
-        this.buttonTabindex = undefined;
-        this.ariaForm = defaultBalAriaForm;
-        this.wasFocused = false;
-        this.mergedElementState = {
-            hovered: false,
-            pressed: false,
-        };
-        this.name = this.inputId;
-        this.label = '';
-        this.labelHidden = false;
-        this.flat = false;
-        this.interface = 'checkbox';
-        this.value = 'on';
-        this.checked = false;
-        this.disabled = false;
-        this.readonly = false;
-        this.required = false;
-        this.autoInvalidOff = false;
-        this.nonSubmit = false;
-        this.invalid = false;
-        this.hovered = false;
-        this.pressed = false;
-        this.color = undefined;
-        this.colSize = 1;
-        this.colSizeTablet = 1;
-        this.colSizeMobile = 1;
     }
     createLogger(log) {
         this.log = log;
@@ -300,6 +362,7 @@ export class Checkbox {
         return {
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -314,12 +377,12 @@ export class Checkbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "name",
                 "reflect": false,
                 "defaultValue": "this.inputId"
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -334,12 +397,12 @@ export class Checkbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
                 "reflect": false,
                 "defaultValue": "''"
             },
             "labelHidden": {
                 "type": "boolean",
+                "attribute": "label-hidden",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -354,12 +417,12 @@ export class Checkbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label-hidden",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "flat": {
                 "type": "boolean",
+                "attribute": "flat",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -374,12 +437,12 @@ export class Checkbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "flat",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "interface": {
                 "type": "string",
+                "attribute": "interface",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalCheckboxInterface",
@@ -399,12 +462,12 @@ export class Checkbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "interface",
                 "reflect": false,
                 "defaultValue": "'checkbox'"
             },
             "value": {
                 "type": "any",
+                "attribute": "value",
                 "mutable": false,
                 "complexType": {
                     "original": "string | number",
@@ -419,12 +482,12 @@ export class Checkbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": false,
                 "defaultValue": "'on'"
             },
             "checked": {
                 "type": "boolean",
+                "attribute": "checked",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -439,12 +502,12 @@ export class Checkbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "checked",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -459,12 +522,12 @@ export class Checkbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "readonly": {
                 "type": "boolean",
+                "attribute": "readonly",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -479,12 +542,12 @@ export class Checkbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "readonly",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "required": {
                 "type": "boolean",
+                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -499,12 +562,12 @@ export class Checkbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "required",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "autoInvalidOff": {
                 "type": "boolean",
+                "attribute": "auto-invalid-off",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -519,12 +582,12 @@ export class Checkbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "auto-invalid-off",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "nonSubmit": {
                 "type": "boolean",
+                "attribute": "non-submit",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -539,12 +602,12 @@ export class Checkbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "non-submit",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "invalid": {
                 "type": "boolean",
+                "attribute": "invalid",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -559,12 +622,12 @@ export class Checkbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "invalid",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "hovered": {
                 "type": "boolean",
+                "attribute": "hovered",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -582,12 +645,12 @@ export class Checkbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "hovered",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "pressed": {
                 "type": "boolean",
+                "attribute": "pressed",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -605,12 +668,12 @@ export class Checkbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "pressed",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "color": {
                 "type": "string",
+                "attribute": "color",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalCheckboxTileColor",
@@ -630,11 +693,11 @@ export class Checkbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "color",
                 "reflect": false
             },
             "colSize": {
                 "type": "number",
+                "attribute": "col-size",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalCheckboxGroupColumns",
@@ -657,12 +720,12 @@ export class Checkbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "col-size",
                 "reflect": false,
                 "defaultValue": "1"
             },
             "colSizeTablet": {
                 "type": "number",
+                "attribute": "col-size-tablet",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalCheckboxGroupColumns",
@@ -685,12 +748,12 @@ export class Checkbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "col-size-tablet",
                 "reflect": false,
                 "defaultValue": "1"
             },
             "colSizeMobile": {
                 "type": "number",
+                "attribute": "col-size-mobile",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalCheckboxGroupColumns",
@@ -713,7 +776,6 @@ export class Checkbox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "col-size-mobile",
                 "reflect": false,
                 "defaultValue": "1"
             }

package/dist/collection/components/bal-checkbox/bal-switch/bal-switch.js

@@ -2,10 +2,29 @@ import { h, Host } from "@stencil/core";
 import { BEM } from "../../../utils/bem";
 export class Switch {
     constructor() {
+        /**
+         * PUBLIC PROPERTY API
+         * ------------------------------------------------------
+         */
+        /**
+         * If `true`, the checkbox is selected.
+         */
         this.checked = false;
+        /**
+         * 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;
+        /**
+         * @internal
+         */
         this.hovered = false;
+        /**
+         * @internal
+         */
         this.pressed = false;
     }
     /**
@@ -34,6 +53,7 @@ export class Switch {
         return {
             "checked": {
                 "type": "boolean",
+                "attribute": "checked",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -48,12 +68,12 @@ export class Switch {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "checked",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "invalid": {
                 "type": "boolean",
+                "attribute": "invalid",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -68,12 +88,12 @@ export class Switch {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "invalid",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -88,12 +108,12 @@ export class Switch {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "hovered": {
                 "type": "boolean",
+                "attribute": "hovered",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -111,12 +131,12 @@ export class Switch {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "hovered",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "pressed": {
                 "type": "boolean",
+                "attribute": "pressed",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -134,7 +154,6 @@ export class Switch {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "pressed",
                 "reflect": false,
                 "defaultValue": "false"
             }

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

@@ -7,7 +7,13 @@ export class Close {
     constructor() {
         this.language = defaultConfig.language;
         this.region = defaultConfig.region;
+        /**
+         * Define the size of badge. Small is recommended for tabs.
+         */
         this.size = '';
+        /**
+         * If `true` it supports dark backgrounds.
+         */
         this.inverted = false;
     }
     /**
@@ -39,6 +45,7 @@ export class Close {
         return {
             "size": {
                 "type": "string",
+                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalCloseSize",
@@ -58,12 +65,12 @@ export class Close {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
                 "reflect": false,
                 "defaultValue": "''"
             },
             "inverted": {
                 "type": "boolean",
+                "attribute": "inverted",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -78,7 +85,6 @@ export class Close {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "inverted",
                 "reflect": false,
                 "defaultValue": "false"
             }

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

@@ -4,10 +4,33 @@ import { BEM } from "../../utils/bem";
 import { Logger } from "../../utils/log";
 export class Content {
     constructor() {
+        /**
+         * PUBLIC PROPERTY API
+         * ------------------------------------------------------
+         */
+        /**
+         * Defines the position of the child elements if they
+         * are showed verticaly or horizontally. Default is verticaly.
+         */
         this.layout = 'vertical';
+        /**
+         * Defines the text positioning like center, end or
+         * default to start.
+         */
         this.align = 'start';
+        /**
+         * Defines the space between the child elements. Default is xx-small.
+         */
         this.space = 'xx-small';
+        /**
+         * @internal
+         * Please use layout instead.
+         */
         this.direction = '';
+        /**
+         * @internal
+         * Please use align instead.
+         */
         this.alignment = '';
     }
     createLogger(log) {
@@ -49,6 +72,7 @@ export class Content {
         return {
             "layout": {
                 "type": "string",
+                "attribute": "layout",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalContentLayout",
@@ -68,12 +92,12 @@ export class Content {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "layout",
                 "reflect": false,
                 "defaultValue": "'vertical'"
             },
             "align": {
                 "type": "string",
+                "attribute": "align",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalContentAlignment",
@@ -93,12 +117,12 @@ export class Content {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "align",
                 "reflect": false,
                 "defaultValue": "'start'"
             },
             "space": {
                 "type": "string",
+                "attribute": "space",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalContentSpace",
@@ -118,12 +142,12 @@ export class Content {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "space",
                 "reflect": false,
                 "defaultValue": "'xx-small'"
             },
             "direction": {
                 "type": "string",
+                "attribute": "direction",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalStackDirection",
@@ -146,12 +170,12 @@ export class Content {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "direction",
                 "reflect": false,
                 "defaultValue": "''"
             },
             "alignment": {
                 "type": "string",
+                "attribute": "alignment",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalStackAlignment",
@@ -174,7 +198,6 @@ export class Content {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "alignment",
                 "reflect": false,
                 "defaultValue": "''"
             }

package/dist/collection/components/bal-data/bal-data-item/bal-data-item.js

@@ -2,7 +2,13 @@ import { Host, h } from "@stencil/core";
 import { BEM } from "../../../utils/bem";
 export class DataItem {
     constructor() {
+        /**
+         * If `true` the item gets a lighter font color.
+         */
         this.disabled = false;
+        /**
+         * If `true` a bottom border is added to the data-item.
+         */
         this.border = false;
     }
     render() {
@@ -14,6 +20,7 @@ export class DataItem {
         return {
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -28,12 +35,12 @@ export class DataItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "border": {
                 "type": "boolean",
+                "attribute": "border",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -48,7 +55,6 @@ export class DataItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "border",
                 "reflect": false,
                 "defaultValue": "false"
             }