@baloise/ds-core 19.3.0 → 19.4.0

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

@@ -14,6 +14,39 @@ import { ListenToWindowResize } from "../../utils/resize";
 import { ListenToVisibility } from "../../utils/visibility";
 export class Segment {
     constructor() {
+        this.keyboardMode = true;
+        this.isVertical = false;
+        this.isMobile = false;
+        this.maxWidth = 0;
+        this.ariaForm = defaultBalAriaForm;
+        /**
+         * PUBLIC PROPERTY API
+         * ------------------------------------------------------
+         */
+        /**
+         * If `true`, the segment is shown red.
+         */
+        this.invalid = false;
+        /**
+         * If `true`, in Angular reactive forms the control will not be set invalid
+         */
+        this.autoInvalidOff = false;
+        /**
+         * If `true`, the user cannot interact with the segment.
+         */
+        this.disabled = false;
+        /**
+         * If `true`, the segment items are presented vertical as a list.
+         */
+        this.vertical = false;
+        /**
+         * If `true`, and is vertical then the list height is limited and scrollable.
+         */
+        this.scrollable = false;
+        /**
+         * If `true`, the element uses the whole width
+         */
+        this.expanded = false;
         /**
          * LISTENERS
          * ------------------------------------------------------
@@ -81,19 +114,6 @@ export class Segment {
                 this.emitValueChange();
             }
         };
-        this.focusedValue = undefined;
-        this.keyboardMode = true;
-        this.isVertical = false;
-        this.isMobile = false;
-        this.maxWidth = 0;
-        this.ariaForm = defaultBalAriaForm;
-        this.invalid = false;
-        this.autoInvalidOff = false;
-        this.disabled = false;
-        this.vertical = false;
-        this.scrollable = false;
-        this.expanded = false;
-        this.value = undefined;
     }
     createLogger(log) {
         this.log = log;
@@ -330,6 +350,7 @@ export class Segment {
         return {
             "invalid": {
                 "type": "boolean",
+                "attribute": "invalid",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -344,12 +365,12 @@ export class Segment {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "invalid",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "autoInvalidOff": {
                 "type": "boolean",
+                "attribute": "auto-invalid-off",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -364,12 +385,12 @@ export class Segment {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "auto-invalid-off",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -384,12 +405,12 @@ export class Segment {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "vertical": {
                 "type": "boolean",
+                "attribute": "vertical",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -404,12 +425,12 @@ export class Segment {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "vertical",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "scrollable": {
                 "type": "boolean",
+                "attribute": "scrollable",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -424,12 +445,12 @@ export class Segment {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "scrollable",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "expanded": {
                 "type": "boolean",
+                "attribute": "expanded",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -444,12 +465,12 @@ export class Segment {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "expanded",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "value": {
                 "type": "any",
+                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "BalProps.BalSegmentValue",
@@ -469,7 +490,6 @@ export class Segment {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": false
             }
         };

package/dist/collection/components/bal-select/bal-select-option/bal-select-option.js

@@ -3,9 +3,14 @@ import { h, Host } from "@stencil/core";
 import { Logger } from "../../../utils/log";
 export class SelectOption {
     constructor() {
-        this.label = undefined;
+        /**
+         * If `true`, the user cannot interact with the option.
+         */
         this.disabled = false;
-        this.value = undefined;
+        /**
+         * @internal
+         * ID of the option.
+         */
         this.for = `bal-selopt-${selectOptionIds++}`;
     }
     createLogger(log) {
@@ -19,6 +24,7 @@ export class SelectOption {
         return {
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -33,11 +39,11 @@ export class SelectOption {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
                 "reflect": true
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -52,12 +58,12 @@ export class SelectOption {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "value": {
                 "type": "string",
+                "attribute": "value",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -72,11 +78,11 @@ export class SelectOption {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": true
             },
             "for": {
                 "type": "string",
+                "attribute": "for",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -94,7 +100,6 @@ export class SelectOption {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "for",
                 "reflect": true,
                 "defaultValue": "`bal-selopt-${selectOptionIds++}`"
             }

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

@@ -18,6 +18,94 @@ export class Select {
         this.didInit = false;
         this.inputId = `bal-select-${selectIds++}`;
         this.initialValue = [];
+        this.hasFocus = false;
+        this.inputValue = '';
+        this.focusIndex = -1;
+        this.isPopoverOpen = false;
+        this.options = new Map();
+        this.labelToScrollTo = '';
+        this.labelToSelectTo = '';
+        this.ariaForm = defaultBalAriaForm;
+        /**
+         * PUBLIC PROPERTY API
+         * ------------------------------------------------------
+         */
+        /**
+         * 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;
+        /**
+         * If `true` the component gets a invalid style.
+         */
+        this.filter = 'includes';
+        /**
+         * The tabindex of the control.
+         */
+        this.balTabindex = 0;
+        /**
+         * If `true` there will be no trigger icon visible, so no UX indicator for a popup
+         */
+        this.freeSolo = false;
+        /**
+         * If `true` multiple option can be selected
+         */
+        this.multiple = false;
+        /**
+         * Indicates whether the value of the control can be automatically completed by the browser.
+         */
+        this.autocomplete = 'off';
+        /**
+         * If `true` the user can search by typing into the input field.
+         */
+        this.typeahead = false;
+        /**
+         * If `true` the options are a proposal and the user can also create his
+         * own value. Can only be used with the typeahead property.
+         */
+        this.selectionOptional = 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;
+        /**
+         * @internal
+         * Set this to `true` when the component is placed on a dark background.
+         * Set this to `true` when the component is placed on a dark background.
+         */
+        this.inverted = false;
+        /**
+         * Defines the height of the popover list.
+         */
+        this.scrollable = 250;
+        /**
+         * Defines if the select is in a loading state.
+         */
+        this.loading = false;
+        /**
+         * If `true` the filtering is done outside the component.
+         */
+        this.remote = false;
+        /**
+         * If `true`, in Angular reactive forms the control will not be set invalid
+         */
+        this.autoInvalidOff = false;
+        /**
+         * Selected option values. Could also be passed as a string, which gets transformed.
+         */
+        this.value = [];
+        this.rawValue = [];
         this.removeValue = (value) => {
             if (!this.disabled) {
                 this.updateRawValue(removeValue(this.rawValue, value), isHuman);
@@ -130,36 +218,6 @@ export class Select {
         this.handleOptionMouseEnter = (index) => {
             this.focusIndex = index;
         };
-        this.hasFocus = false;
-        this.inputValue = '';
-        this.focusIndex = -1;
-        this.isPopoverOpen = false;
-        this.options = new Map();
-        this.labelToScrollTo = '';
-        this.labelToSelectTo = '';
-        this.ariaForm = defaultBalAriaForm;
-        this.name = this.inputId;
-        this.invalid = false;
-        this.filter = 'includes';
-        this.balTabindex = 0;
-        this.freeSolo = false;
-        this.multiple = false;
-        this.maxLength = undefined;
-        this.noDataLabel = undefined;
-        this.autocomplete = 'off';
-        this.typeahead = false;
-        this.selectionOptional = false;
-        this.disabled = false;
-        this.readonly = false;
-        this.required = false;
-        this.inverted = false;
-        this.placeholder = undefined;
-        this.scrollable = 250;
-        this.loading = false;
-        this.remote = false;
-        this.autoInvalidOff = false;
-        this.value = [];
-        this.rawValue = [];
     }
     createLogger(log) {
         this.log = log;
@@ -727,6 +785,7 @@ export class Select {
         return {
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -741,12 +800,12 @@ export class Select {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "name",
                 "reflect": false,
                 "defaultValue": "this.inputId"
             },
             "invalid": {
                 "type": "boolean",
+                "attribute": "invalid",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -761,12 +820,12 @@ export class Select {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "invalid",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "filter": {
                 "type": "string",
+                "attribute": "filter",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalSelectFilter",
@@ -786,12 +845,12 @@ export class Select {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "filter",
                 "reflect": false,
                 "defaultValue": "'includes'"
             },
             "balTabindex": {
                 "type": "number",
+                "attribute": "bal-tabindex",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -806,12 +865,12 @@ export class Select {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "bal-tabindex",
                 "reflect": false,
                 "defaultValue": "0"
             },
             "freeSolo": {
                 "type": "boolean",
+                "attribute": "free-solo",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -826,12 +885,12 @@ export class Select {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "free-solo",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "multiple": {
                 "type": "boolean",
+                "attribute": "multiple",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -846,12 +905,12 @@ export class Select {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "multiple",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "maxLength": {
                 "type": "number",
+                "attribute": "max-length",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -866,11 +925,11 @@ export class Select {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "max-length",
                 "reflect": false
             },
             "noDataLabel": {
                 "type": "string",
+                "attribute": "no-data-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -885,11 +944,11 @@ export class Select {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "no-data-label",
                 "reflect": false
             },
             "autocomplete": {
                 "type": "string",
+                "attribute": "autocomplete",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalInputAutocomplete",
@@ -909,12 +968,12 @@ export class Select {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "autocomplete",
                 "reflect": false,
                 "defaultValue": "'off'"
             },
             "typeahead": {
                 "type": "boolean",
+                "attribute": "typeahead",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -929,12 +988,12 @@ export class Select {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "typeahead",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "selectionOptional": {
                 "type": "boolean",
+                "attribute": "selection-optional",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -949,12 +1008,12 @@ export class Select {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "selection-optional",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -969,12 +1028,12 @@ export class Select {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "readonly": {
                 "type": "boolean",
+                "attribute": "readonly",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -989,12 +1048,12 @@ export class Select {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "readonly",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "required": {
                 "type": "boolean",
+                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1009,12 +1068,12 @@ export class Select {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "required",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "inverted": {
                 "type": "boolean",
+                "attribute": "inverted",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1032,12 +1091,12 @@ export class Select {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "inverted",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "placeholder": {
                 "type": "string",
+                "attribute": "placeholder",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1052,11 +1111,11 @@ export class Select {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "placeholder",
                 "reflect": false
             },
             "scrollable": {
                 "type": "number",
+                "attribute": "scrollable",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -1071,12 +1130,12 @@ export class Select {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "scrollable",
                 "reflect": false,
                 "defaultValue": "250"
             },
             "loading": {
                 "type": "boolean",
+                "attribute": "loading",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1091,12 +1150,12 @@ export class Select {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "loading",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "remote": {
                 "type": "boolean",
+                "attribute": "remote",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1111,12 +1170,12 @@ export class Select {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "remote",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "autoInvalidOff": {
                 "type": "boolean",
+                "attribute": "auto-invalid-off",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1131,12 +1190,12 @@ export class Select {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "auto-invalid-off",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "value": {
                 "type": "string",
+                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string | string[]",
@@ -1151,7 +1210,6 @@ export class Select {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": false,
                 "defaultValue": "[]"
             }