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

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;
@@ -369,9 +427,7 @@ export class Select {
         await deepReady(this.el);
         const hasOptions = this.options.size > 0;
         if (hasOptions) {
-            if (!this.remote) {
-                this.syncRawValue(isNotHuman);
-            }
+            this.syncRawValue(isNotHuman);
         }
         else {
             this.waitForOptionsAndThenUpdateRawValuesTimer = setTimeout(() => this.waitForOptionsAndThenUpdateRawValues(), 10);
@@ -684,7 +740,7 @@ export class Select {
      */
     render() {
         var _a;
-        const Chip = (props) => (h("bal-tag", { key: 'a348dae32f7f0638b66dc2ceda8a26763fe18c07', size: "", closable: !this.disabled, disabled: this.disabled, invalid: this.invalid, tabindex: -1, onBalCloseClick: _ => this.removeValue(props.value), "data-testid": "bal-select-chip" }, findLabelByValue(this.options, props.value) || props.value));
+        const Chip = (props) => (h("bal-tag", { key: '69e00b5d661f1917fb6cbcf8919a8ce9670a25dd', size: "", closable: !this.disabled, disabled: this.disabled, invalid: this.invalid, tabindex: -1, onBalCloseClick: _ => this.removeValue(props.value), "data-testid": "bal-select-chip" }, findLabelByValue(this.options, props.value) || props.value));
         const valuesArray = getValues(this.rawValue);
         const block = BEM.block('select');
         const nativeEl = block.element('native');
@@ -698,19 +754,19 @@ export class Select {
         const optionContentEl = optionEl.element('content');
         const optionContentCheckboxEl = optionContentEl.element('checkbox');
         const optionContentLabelEl = optionContentEl.element('label');
-        return (h(Host, { key: '126edf5ce107f3bd0c1e98ca7ec51382f5f93a8b', role: "listbox", onClick: this.handleClick, "aria-disabled": ariaBooleanToString(this.disabled), "data-value": (_a = this.rawValue) === null || _a === void 0 ? void 0 : _a.map(v => findLabelByValue(this.options, v)).join(','), class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('disabled').class(this.disabled || this.readonly)), block.modifier('inverted').class(this.inverted)), block.modifier('inverted-footer').class(this.inverted)) }, h("select", { key: '561e175063c2886f99fdef91d0e11c1c38affb4b', class: Object.assign({}, nativeEl.class()), name: this.name, multiple: this.multiple, required: this.required, tabindex: -1, ref: el => (this.nativeSelectEl = el) }, valuesArray.map((value) => (h("option", { key: value, value: value, selected: true }, value)))), h("bal-popover", { key: '5ce86ac980b73f01227edaba951299f2c7caa1a3', onBalChange: this.handlePopoverChange, ref: el => (this.popoverElement = el) }, h("div", { key: '7fdaed7cbf590c937e67de98bf5c54e0ca62083a', "bal-popover-trigger": true, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, controlEl.class()), controlEl.modifier('invalid').class(this.invalid)), controlEl.modifier('disabled').class(this.disabled || this.readonly)), controlEl.modifier('focused').class(this.isPopoverOpen)), controlEl.modifier('inverted-footer').class(this.inverted)) }, h("div", { key: '3837bb760eaba758fe087195e9ca80ec298ae3f6', class: Object.assign(Object.assign({}, controlSelectionsEl.class()), controlSelectionsEl
+        return (h(Host, { key: '3d670b9aa3467ee96c65e2b1a98beda836cac095', role: "listbox", onClick: this.handleClick, "aria-disabled": ariaBooleanToString(this.disabled), "data-value": (_a = this.rawValue) === null || _a === void 0 ? void 0 : _a.map(v => findLabelByValue(this.options, v)).join(','), class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('disabled').class(this.disabled || this.readonly)), block.modifier('inverted').class(this.inverted)), block.modifier('inverted-footer').class(this.inverted)) }, h("select", { key: '1d438d1034af395d0f99bed2443bb66de288bb0a', class: Object.assign({}, nativeEl.class()), name: this.name, multiple: this.multiple, required: this.required, tabindex: -1, ref: el => (this.nativeSelectEl = el) }, valuesArray.map((value) => (h("option", { key: value, value: value, selected: true }, value)))), h("bal-popover", { key: '8dc177324409d7bfdd75e3f375acd00c41ac11e8', onBalChange: this.handlePopoverChange, ref: el => (this.popoverElement = el) }, h("div", { key: 'eaa30ce518119e5ced60fc093e887167c4e83c69', "bal-popover-trigger": true, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, controlEl.class()), controlEl.modifier('invalid').class(this.invalid)), controlEl.modifier('disabled').class(this.disabled || this.readonly)), controlEl.modifier('focused').class(this.isPopoverOpen)), controlEl.modifier('inverted-footer').class(this.inverted)) }, h("div", { key: '4c6b0c807a1c25712d128216909e137af0d3cbf8', class: Object.assign(Object.assign({}, controlSelectionsEl.class()), controlSelectionsEl
                 .modifier('clickable')
                 .class(!this.isPopoverOpen && !this.disabled && !this.readonly)), onClick: this.handleInputClick, ref: el => (this.selectionEl = el) }, valuesArray
             .filter(_ => this.multiple)
-            .map((value) => (h(Chip, { value: value }))), h("input", { key: 'd1134c3c0459c89b0952e47f5fac67e3753f3c75', type: "text", class: Object.assign(Object.assign({}, controlInputEl.class()), { 'input': true, 'is-inverted': this.inverted, 'is-danger': this.invalid, 'is-disabled': this.disabled || this.readonly, 'is-clickable': !this.isPopoverOpen && !this.disabled && !this.readonly, 'data-test-select-input': true }), id: this.ariaForm.controlId || this.inputId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": ariaBooleanToString(this.disabled), "data-testid": "bal-select-input", autocomplete: this.autocomplete, "aria-autocomplete": this.autocomplete === 'off' ? 'none' : null, placeholder: this.inputPlaceholder, readonly: !this.typeahead || this.disabled || this.readonly, contentEditable: this.typeahead, disabled: this.disabled, maxLength: this.maxLength, tabindex: this.balTabindex, onInput: this.handleInput, onClick: this.handleInputClick, onChange: this.handleInputChange, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, onKeyPress: this.handleKeyPress, ref: el => (this.inputElement = el) })), !this.freeSolo && !this.loading ? (h("bal-icon", { class: Object.assign(Object.assign(Object.assign({}, controlIconEl.class()), controlIconEl.modifier('loading').class(this.loading)), controlIconEl.modifier('clickable').class(!this.disabled && !this.readonly)), name: !this.inverted ? 'caret-down' : 'caret-up', color: this.disabled || this.readonly
+            .map((value) => (h(Chip, { value: value }))), h("input", { key: '1d7fb70f81b7c0ae5fad2f77089ba2a8b04da050', type: "text", class: Object.assign(Object.assign({}, controlInputEl.class()), { 'input': true, 'is-inverted': this.inverted, 'is-danger': this.invalid, 'is-disabled': this.disabled || this.readonly, 'is-clickable': !this.isPopoverOpen && !this.disabled && !this.readonly, 'data-test-select-input': true }), id: this.ariaForm.controlId || this.inputId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": ariaBooleanToString(this.disabled), "data-testid": "bal-select-input", autocomplete: this.autocomplete, "aria-autocomplete": this.autocomplete === 'off' ? 'none' : null, placeholder: this.inputPlaceholder, readonly: !this.typeahead || this.disabled || this.readonly, contentEditable: this.typeahead, disabled: this.disabled, maxLength: this.maxLength, tabindex: this.balTabindex, onInput: this.handleInput, onClick: this.handleInputClick, onChange: this.handleInputChange, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, onKeyPress: this.handleKeyPress, ref: el => (this.inputElement = el) })), !this.freeSolo && !this.loading ? (h("bal-icon", { class: Object.assign(Object.assign(Object.assign({}, controlIconEl.class()), controlIconEl.modifier('loading').class(this.loading)), controlIconEl.modifier('clickable').class(!this.disabled && !this.readonly)), name: !this.inverted ? 'caret-down' : 'caret-up', color: this.disabled || this.readonly
                 ? 'grey-light'
                 : this.inverted
                     ? 'white'
                     : this.invalid
                         ? 'danger'
-                        : 'primary', turn: this.isPopoverOpen, onClick: ev => this.handleInputClick(ev, true), size: !this.inverted ? '' : 'x-small' })) : ('')), h("bal-popover-content", { key: '36cdae574c4b7588c1f8c2816b0b872a9c4cc2bd', class: Object.assign({}, popoverContentEl.class()), scrollable: this.scrollable, spaceless: true, expanded: true }, this.optionArray.map((option, index) => (h("button", { key: option.value, type: "button", role: "option", id: option.id, "data-value": option.value, "data-label": option.label, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, optionEl.class()), optionEl
+                        : 'primary', turn: this.isPopoverOpen, onClick: ev => this.handleInputClick(ev, true), size: !this.inverted ? '' : 'x-small' })) : ('')), h("bal-popover-content", { key: '756cb6d1ff62300a2b7b7d6c1250195da8fa3849', class: Object.assign({}, popoverContentEl.class()), scrollable: this.scrollable, spaceless: true, expanded: true }, this.optionArray.map((option, index) => (h("button", { key: option.value, type: "button", role: "option", id: option.id, "data-value": option.value, "data-label": option.label, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, optionEl.class()), optionEl
                 .modifier('selected')
-                .class(valuesArray.includes(option.value) && !(this.typeahead && !this.multiple))), optionEl.modifier('focused').class(this.focusIndex === index)), optionEl.modifier('checkbox').class(this.multiple)), optionEl.modifier('disabled').class(option.disabled === true)), "data-testid": "bal-select-option", disabled: option.disabled, tabIndex: -1, onMouseEnter: () => this.handleOptionMouseEnter(index), onClick: () => this.optionSelected(option) }, h("div", { class: Object.assign({}, optionContentEl.class()) }, h("span", { class: Object.assign({}, optionContentCheckboxEl.class()), style: { display: this.multiple ? 'flex' : 'none' } }, h("bal-checkbox", { checked: valuesArray.includes(option.value), tabindex: -1, nonSubmit: true, flat: true, onBalChange: preventDefault })), h("span", { class: Object.assign({}, optionContentLabelEl.class()), innerHTML: option.innerHTML }))))), h("div", { key: '70eb78a2d378401f173ee8e62f37fbc602827fba', class: Object.assign(Object.assign({}, popoverContentEmptyEl.class()), popoverContentEmptyEl
+                .class(valuesArray.includes(option.value) && !(this.typeahead && !this.multiple))), optionEl.modifier('focused').class(this.focusIndex === index)), optionEl.modifier('checkbox').class(this.multiple)), optionEl.modifier('disabled').class(option.disabled === true)), "data-testid": "bal-select-option", disabled: option.disabled, tabIndex: -1, onMouseEnter: () => this.handleOptionMouseEnter(index), onClick: () => this.optionSelected(option) }, h("div", { class: Object.assign({}, optionContentEl.class()) }, h("span", { class: Object.assign({}, optionContentCheckboxEl.class()), style: { display: this.multiple ? 'flex' : 'none' } }, h("bal-checkbox", { checked: valuesArray.includes(option.value), tabindex: -1, nonSubmit: true, flat: true, onBalChange: preventDefault })), h("span", { class: Object.assign({}, optionContentLabelEl.class()), innerHTML: option.innerHTML }))))), h("div", { key: '7f49f62da3e7a1edd769f41e43fddda83a50f52b', class: Object.assign(Object.assign({}, popoverContentEmptyEl.class()), popoverContentEmptyEl
                 .modifier('hidden')
                 .class(this.noDataLabel === undefined || this.hasOptions() || !this.typeahead || this.selectionOptional)) }, this.noDataLabel)))));
     }
@@ -729,6 +785,7 @@ export class Select {
         return {
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -743,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",
@@ -763,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",
@@ -788,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",
@@ -808,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",
@@ -828,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",
@@ -848,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",
@@ -868,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",
@@ -887,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",
@@ -911,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",
@@ -931,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",
@@ -951,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",
@@ -971,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",
@@ -991,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",
@@ -1011,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",
@@ -1034,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",
@@ -1054,11 +1111,11 @@ export class Select {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "placeholder",
                 "reflect": false
             },
             "scrollable": {
                 "type": "number",
+                "attribute": "scrollable",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -1073,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",
@@ -1093,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",
@@ -1113,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",
@@ -1133,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[]",
@@ -1153,7 +1210,6 @@ export class Select {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": false,
                 "defaultValue": "[]"
             }

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

@@ -3,6 +3,18 @@ import { BEM } from "../../utils/bem";
 import * as BaloiseDesignToken from "@baloise/ds-tokens";
 export class Shape {
     constructor() {
+        /**
+         * The shape variation
+         */
+        this.variation = '1';
+        /**
+         * The shape color
+         */
+        this.color = 'green';
+        /**
+         * The shape rotation
+         */
+        this.rotation = '0';
         this.getHex = () => {
             let color;
             switch (this.color) {
@@ -35,9 +47,6 @@ export class Shape {
             }
             return color;
         };
-        this.variation = '1';
-        this.color = 'green';
-        this.rotation = '0';
     }
     render() {
         const block = BEM.block('shape');
@@ -63,6 +72,7 @@ export class Shape {
         return {
             "variation": {
                 "type": "string",
+                "attribute": "variation",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalShapeVariation",
@@ -82,12 +92,12 @@ export class Shape {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "variation",
                 "reflect": false,
                 "defaultValue": "'1'"
             },
             "color": {
                 "type": "string",
+                "attribute": "color",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalShapeColor",
@@ -107,12 +117,12 @@ export class Shape {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "color",
                 "reflect": false,
                 "defaultValue": "'green'"
             },
             "rotation": {
                 "type": "string",
+                "attribute": "rotation",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalShapeRotation",
@@ -132,7 +142,6 @@ export class Shape {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "rotation",
                 "reflect": false,
                 "defaultValue": "'0'"
             }

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

@@ -2,6 +2,9 @@ import { h, Host } from "@stencil/core";
 import { BEM } from "../../utils/bem";
 export class Sheet {
     constructor() {
+        /**
+         * Defines content width of the stage
+         */
         this.containerSize = '';
     }
     render() {
@@ -26,6 +29,7 @@ export class Sheet {
         return {
             "containerSize": {
                 "type": "string",
+                "attribute": "container-size",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalSheetContainer",
@@ -45,7 +49,6 @@ export class Sheet {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "container-size",
                 "reflect": false,
                 "defaultValue": "''"
             }