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

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

@@ -15,24 +15,73 @@ export class Carousel {
     constructor() {
         this.swiper = new SwiperUtil();
         this.swiperIsLastSlideVisible = false;
-        this.mutationObserverActive = true;
         this.hasAnimated = false;
         this.isMobile = balBreakpoints.isMobile;
         this.language = defaultConfig.language;
+        /**
+         * PUBLIC PROPERTY API
+         * ------------------------------------------------------
+         */
+        /**
+         * Defines the active slide index.
+         */
         this.value = 0;
+        /**
+         * When how many slides are moved when going forward or backward.
+         */
         this.steps = 1;
+        /**
+         * Defines how many slides are visible in the container for the user.
+         * `auto` will use the size of the actual item content
+         */
         this.itemsPerView = 1;
+        /**
+         * Defines the layout of the navigation controls.
+         */
         this.controls = 'none';
+        /**
+         * Defines the layout of the navigation controls.
+         */
         this.space = 'none';
+        /**
+         * @deprecated
+         * Defines the role of the carousel.
+         */
         this.htmlRole = 'list';
+        /**
+         * If `true` items move under the controls, instead of having a gap
+         */
         this.controlsOverflow = false;
+        /**
+         * If `true` the carousel can be used on dark background
+         */
         this.inverted = false;
+        /**
+         * If `true` the carousel uses the full height
+         */
         this.fullHeight = false;
+        /**
+         * Defines the image aspect ratio.
+         * Should be combined with the interface `product`
+         */
         this.aspectRatio = '16by9';
+        /**
+         * Defines special looks.
+         */
         this.interface = '';
+        /**
+         * If `true` the controls will be sticky to the top.
+         */
         this.controlsSticky = false;
+        /**
+         * If `true` vertical scrolling on mobile is enabled.
+         */
         this.scrollY = true;
+        /**
+         * If `true` a light border is shown at the bottom.
+         */
         this.border = false;
+        this.mutationObserverActive = true;
     }
     onValueChange() {
         this.swiper.index = this.value;
@@ -161,6 +210,7 @@ export class Carousel {
         return {
             "value": {
                 "type": "number",
+                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "number",
@@ -175,12 +225,12 @@ export class Carousel {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": false,
                 "defaultValue": "0"
             },
             "steps": {
                 "type": "number",
+                "attribute": "steps",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -195,12 +245,12 @@ export class Carousel {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "steps",
                 "reflect": false,
                 "defaultValue": "1"
             },
             "itemsPerView": {
                 "type": "any",
+                "attribute": "items-per-view",
                 "mutable": false,
                 "complexType": {
                     "original": "'auto' | 1 | 2 | 3 | 4",
@@ -215,12 +265,12 @@ export class Carousel {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "items-per-view",
                 "reflect": false,
                 "defaultValue": "1"
             },
             "controls": {
                 "type": "string",
+                "attribute": "controls",
                 "mutable": false,
                 "complexType": {
                     "original": "'small' | 'large' | 'dots' | 'tabs' | 'none'",
@@ -235,12 +285,12 @@ export class Carousel {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "controls",
                 "reflect": false,
                 "defaultValue": "'none'"
             },
             "space": {
                 "type": "string",
+                "attribute": "space",
                 "mutable": false,
                 "complexType": {
                     "original": "'normal' | 'medium' | 'none'",
@@ -255,12 +305,12 @@ export class Carousel {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "space",
                 "reflect": false,
                 "defaultValue": "'none'"
             },
             "htmlRole": {
                 "type": "string",
+                "attribute": "html-role",
                 "mutable": false,
                 "complexType": {
                     "original": "'tablist' | 'list' | ''",
@@ -278,12 +328,12 @@ export class Carousel {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "html-role",
                 "reflect": false,
                 "defaultValue": "'list'"
             },
             "controlsOverflow": {
                 "type": "boolean",
+                "attribute": "controls-overflow",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -298,12 +348,12 @@ export class Carousel {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "controls-overflow",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "inverted": {
                 "type": "boolean",
+                "attribute": "inverted",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -318,12 +368,12 @@ export class Carousel {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "inverted",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "fullHeight": {
                 "type": "boolean",
+                "attribute": "full-height",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -338,12 +388,12 @@ export class Carousel {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "full-height",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "aspectRatio": {
                 "type": "string",
+                "attribute": "aspect-ratio",
                 "mutable": false,
                 "complexType": {
                     "original": "'1by1' | '3by2' | '4by3' | '16by9'",
@@ -358,12 +408,12 @@ export class Carousel {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "aspect-ratio",
                 "reflect": false,
                 "defaultValue": "'16by9'"
             },
             "interface": {
                 "type": "string",
+                "attribute": "interface",
                 "mutable": false,
                 "complexType": {
                     "original": "'card' | 'image' | 'product' | ''",
@@ -378,12 +428,12 @@ export class Carousel {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "interface",
                 "reflect": false,
                 "defaultValue": "''"
             },
             "controlsSticky": {
                 "type": "boolean",
+                "attribute": "controls-sticky",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -398,12 +448,12 @@ export class Carousel {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "controls-sticky",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "scrollY": {
                 "type": "boolean",
+                "attribute": "scroll-y",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -418,12 +468,12 @@ export class Carousel {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "scroll-y",
                 "reflect": false,
                 "defaultValue": "true"
             },
             "border": {
                 "type": "boolean",
+                "attribute": "border",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -438,7 +488,6 @@ export class Carousel {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "border",
                 "reflect": false,
                 "defaultValue": "false"
             }

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

@@ -2,11 +2,33 @@ import { h, Host } from "@stencil/core";
 import { BEM } from "../../../utils/bem";
 export class Check {
     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;
+        /**
+         * If `true`, the checkbox is inverted and works on dark backgrounds.
+         */
         this.inverted = undefined;
+        /**
+         * @internal
+         */
         this.hovered = false;
+        /**
+         * @internal
+         */
         this.pressed = false;
     }
     /**
@@ -36,6 +58,7 @@ export class Check {
         return {
             "checked": {
                 "type": "boolean",
+                "attribute": "checked",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -50,12 +73,12 @@ export class Check {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "checked",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "invalid": {
                 "type": "boolean",
+                "attribute": "invalid",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -70,12 +93,12 @@ export class Check {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "invalid",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -90,12 +113,12 @@ export class Check {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "inverted": {
                 "type": "boolean",
+                "attribute": "inverted",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -110,12 +133,12 @@ export class Check {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "inverted",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "hovered": {
                 "type": "boolean",
+                "attribute": "hovered",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -133,12 +156,12 @@ export class Check {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "hovered",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "pressed": {
                 "type": "boolean",
+                "attribute": "pressed",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -156,7 +179,6 @@ export class Check {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "pressed",
                 "reflect": false,
                 "defaultValue": "false"
             }

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

@@ -14,6 +14,63 @@ export class CheckboxGroup {
     constructor() {
         this.inputId = `bal-cg-${checkboxGroupIds++}`;
         this.inheritedAttributes = {};
+        this.ariaForm = defaultBalAriaForm;
+        /**
+         * Defines the layout of the checkbox button
+         */
+        this.interface = undefined;
+        /**
+         * If `true` it acts as the main form control
+         */
+        this.control = false;
+        /**
+         * The name of the control, which is submitted with the form data.
+         */
+        this.name = this.inputId;
+        /**
+         * Displays the checkboxes vertically
+         */
+        this.vertical = false;
+        /**
+         * If `true`, the controls will be vertically on mobile devices.
+         */
+        this.verticalOnMobile = false;
+        /**
+         * Uses the whole width
+         */
+        this.expanded = 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.invalid = undefined;
+        /**
+         * If `true`, the user cannot interact with the checkboxes.
+         */
+        this.disabled = undefined;
+        /**
+         * If `true`, the user cannot interact with the checkboxes.
+         */
+        this.readonly = undefined;
+        /**
+         * The value of the control.
+         */
+        this.value = [];
+        /**
+         * Defines the column size like the grid.
+         */
+        this.columns = 1;
+        /**
+         * Defines the column size for tablet and bigger like the grid.
+         */
+        this.columnsTablet = 1;
+        /**
+         * Defines the column size for mobile and bigger like the grid.
+         */
+        this.columnsMobile = 1;
+        /**
+         * If `true`, in Angular reactive forms the control will not be set invalid
+         */
+        this.autoInvalidOff = false;
         /**
          * LISTENERS
          * ------------------------------------------------------
@@ -43,22 +100,6 @@ export class CheckboxGroup {
         this.onOptionChange = async () => {
             this.sync();
         };
-        this.ariaForm = defaultBalAriaForm;
-        this.options = undefined;
-        this.interface = undefined;
-        this.control = false;
-        this.name = this.inputId;
-        this.vertical = false;
-        this.verticalOnMobile = false;
-        this.expanded = false;
-        this.invalid = undefined;
-        this.disabled = undefined;
-        this.readonly = undefined;
-        this.value = [];
-        this.columns = 1;
-        this.columnsTablet = 1;
-        this.columnsMobile = 1;
-        this.autoInvalidOff = false;
     }
     createLogger(log) {
         this.log = log;
@@ -284,6 +325,7 @@ export class CheckboxGroup {
         return {
             "options": {
                 "type": "unknown",
+                "attribute": "options",
                 "mutable": false,
                 "complexType": {
                     "original": "BalCheckboxOption[]",
@@ -307,6 +349,7 @@ export class CheckboxGroup {
             },
             "interface": {
                 "type": "string",
+                "attribute": "interface",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalCheckboxGroupInterface",
@@ -326,12 +369,12 @@ export class CheckboxGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "interface",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "control": {
                 "type": "boolean",
+                "attribute": "control",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -346,12 +389,12 @@ export class CheckboxGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "control",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -366,12 +409,12 @@ export class CheckboxGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "name",
                 "reflect": false,
                 "defaultValue": "this.inputId"
             },
             "vertical": {
                 "type": "boolean",
+                "attribute": "vertical",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -386,12 +429,12 @@ export class CheckboxGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "vertical",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "verticalOnMobile": {
                 "type": "boolean",
+                "attribute": "vertical-on-mobile",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -406,12 +449,12 @@ export class CheckboxGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "vertical-on-mobile",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "expanded": {
                 "type": "boolean",
+                "attribute": "expanded",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -426,12 +469,12 @@ export class CheckboxGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "expanded",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "invalid": {
                 "type": "boolean",
+                "attribute": "invalid",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -446,12 +489,12 @@ export class CheckboxGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "invalid",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -466,12 +509,12 @@ export class CheckboxGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "readonly": {
                 "type": "boolean",
+                "attribute": "readonly",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -486,12 +529,12 @@ export class CheckboxGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "readonly",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "value": {
                 "type": "unknown",
+                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "any[]",
@@ -510,6 +553,7 @@ export class CheckboxGroup {
             },
             "columns": {
                 "type": "number",
+                "attribute": "columns",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalCheckboxGroupColumns",
@@ -529,12 +573,12 @@ export class CheckboxGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "columns",
                 "reflect": false,
                 "defaultValue": "1"
             },
             "columnsTablet": {
                 "type": "number",
+                "attribute": "columns-tablet",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalCheckboxGroupColumns",
@@ -554,12 +598,12 @@ export class CheckboxGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "columns-tablet",
                 "reflect": false,
                 "defaultValue": "1"
             },
             "columnsMobile": {
                 "type": "number",
+                "attribute": "columns-mobile",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalCheckboxGroupColumns",
@@ -579,12 +623,12 @@ export class CheckboxGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "columns-mobile",
                 "reflect": false,
                 "defaultValue": "1"
             },
             "autoInvalidOff": {
                 "type": "boolean",
+                "attribute": "auto-invalid-off",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -599,7 +643,6 @@ export class CheckboxGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "auto-invalid-off",
                 "reflect": true,
                 "defaultValue": "false"
             }
@@ -821,13 +864,13 @@ __decorate([
 __decorate([
     ListenToFocus(),
     __metadata("design:type", Function),
-    __metadata("design:paramtypes", [FocusEvent]),
+    __metadata("design:paramtypes", [Object]),
     __metadata("design:returntype", void 0)
 ], CheckboxGroup.prototype, "focusInListener", null);
 __decorate([
     ListenToFocus(),
     __metadata("design:type", Function),
-    __metadata("design:paramtypes", [FocusEvent]),
+    __metadata("design:paramtypes", [Object]),
     __metadata("design:returntype", void 0)
 ], CheckboxGroup.prototype, "focusOutListener", null);
 __decorate([