@baloise/ds-core 19.8.2 → 19.8.3

package/dist/collection/components/bal-tag/test/bal-tag.visual.play.js

@@ -0,0 +1,20 @@
+import { test, expect, screenshot } from "../../../../../../playwright/src/index";
+test.describe('visual', () => {
+    const image = screenshot('bal-tag');
+    test.beforeEach(async ({ page }) => {
+        await page.goto('/components/bal-tag/test/bal-tag.visual.html');
+        await page.waitForSelector('bal-tag');
+    });
+    test('basic', async ({ page }) => {
+        const el = page.getByTestId('basic');
+        await expect(el).toHaveScreenshot(image('basic'));
+    });
+    test('colors', async ({ page }) => {
+        const el = page.getByTestId('colors');
+        await expect(el).toHaveScreenshot(image('colors'));
+    });
+    test('sizes', async ({ page }) => {
+        const el = page.getByTestId('sizes');
+        await expect(el).toHaveScreenshot(image('sizes'));
+    });
+});

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

@@ -115,7 +115,6 @@ export class Text {
         return {
             "size": {
                 "type": "string",
-                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalTextSize",
@@ -136,11 +135,11 @@ export class Text {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "''"
             },
             "heading": {
                 "type": "boolean",
-                "attribute": "heading",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -156,11 +155,11 @@ export class Text {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "heading",
                 "defaultValue": "false"
             },
             "noWrap": {
                 "type": "boolean",
-                "attribute": "no-wrap",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -176,11 +175,11 @@ export class Text {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "no-wrap",
                 "defaultValue": "false"
             },
             "bold": {
                 "type": "boolean",
-                "attribute": "bold",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -196,11 +195,11 @@ export class Text {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "bold",
                 "defaultValue": "false"
             },
             "inline": {
                 "type": "boolean",
-                "attribute": "inline",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -216,11 +215,11 @@ export class Text {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "inline",
                 "defaultValue": "false"
             },
             "color": {
                 "type": "string",
-                "attribute": "color",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalTextColor",
@@ -241,11 +240,11 @@ export class Text {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "color",
                 "defaultValue": "''"
             },
             "space": {
                 "type": "string",
-                "attribute": "space",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalTextSpace",
@@ -266,11 +265,11 @@ export class Text {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "space",
                 "defaultValue": "''"
             },
             "inverted": {
                 "type": "boolean",
-                "attribute": "inverted",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -286,11 +285,11 @@ export class Text {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "inverted",
                 "defaultValue": "false"
             },
             "shadow": {
                 "type": "boolean",
-                "attribute": "shadow",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -306,11 +305,11 @@ export class Text {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "shadow",
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -326,11 +325,11 @@ export class Text {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "undefined"
             },
             "invalid": {
                 "type": "boolean",
-                "attribute": "invalid",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -346,11 +345,11 @@ export class Text {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "invalid",
                 "defaultValue": "undefined"
             },
             "hovered": {
                 "type": "boolean",
-                "attribute": "hovered",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -369,11 +368,11 @@ export class Text {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "hovered",
                 "defaultValue": "false"
             },
             "pressed": {
                 "type": "boolean",
-                "attribute": "pressed",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -392,6 +391,7 @@ export class Text {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "pressed",
                 "defaultValue": "false"
             }
         };

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

@@ -136,7 +136,7 @@ export class Textarea {
         const value = this.getValue();
         const block = BEM.block('textarea');
         const elNative = block.element('native');
-        return (h(Host, { key: '6abf8c53f5514217abc01dfc9a34d2f77eeae25c', onClick: this.handleClick, "aria-disabled": ariaBooleanToString(this.disabled), class: Object.assign({}, block.class()) }, h("textarea", Object.assign({ key: 'e133831d646f2a4483a98ecbf19a74ca4b086896', class: Object.assign(Object.assign({}, elNative.class()), { 'textarea': true, 'is-disabled': this.disabled || this.readonly, 'is-danger': this.invalid, 'clickable': this.clickable }), "data-testid": "bal-textarea-input", ref: inputEl => (this.nativeInput = inputEl), name: this.name, 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), disabled: this.disabled, readonly: this.readonly, required: this.required, autoCapitalize: this.autocapitalize, autocomplete: this.autocomplete, autoFocus: this.autofocus, minLength: this.minLength, maxLength: this.maxLength, placeholder: this.placeholder, inputMode: this.inputmode, value: this.value, cols: this.cols, rows: this.rows, wrap: this.wrap, onFocus: this.onFocus, onInput: ev => this.onInput(ev), onBlur: this.onBlur, onClick: this.onClick, onKeyPress: e => this.balKeyPress.emit(e) }, this.inheritedAttributes), value, h("slot", { key: 'b5b22f948ec25bca265d654f1f8dfc397aca839a' }))));
+        return (h(Host, { key: 'd89d5925e65ffcf37caf62fdb8aef42361ceea7f', onClick: this.handleClick, "aria-disabled": ariaBooleanToString(this.disabled), class: Object.assign({}, block.class()) }, h("textarea", Object.assign({ key: '20f02fa458fd85ff4c7c880b11522011052ff2e4', class: Object.assign(Object.assign({}, elNative.class()), { 'textarea': true, 'is-disabled': this.disabled || this.readonly, 'is-danger': this.invalid, 'clickable': this.clickable }), "data-testid": "bal-textarea-input", ref: inputEl => (this.nativeInput = inputEl), name: this.name, 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), disabled: this.disabled, readonly: this.readonly, required: this.required, autoCapitalize: this.autocapitalize, autocomplete: this.autocomplete, autoFocus: this.autofocus, minLength: this.minLength, maxLength: this.maxLength, placeholder: this.placeholder, inputMode: this.inputmode, value: this.value, cols: this.cols, rows: this.rows, wrap: this.wrap, onFocus: this.onFocus, onInput: ev => this.onInput(ev), onBlur: this.onBlur, onClick: this.onClick, onKeyPress: e => this.balKeyPress.emit(e) }, this.inheritedAttributes), value, h("slot", { key: 'dfbd0670d3a5428b393bbdfb4778dbd4de5fddcc' }))));
     }
     static get is() { return "bal-textarea"; }
     static get originalStyleUrls() {
@@ -153,7 +153,6 @@ export class Textarea {
         return {
             "name": {
                 "type": "string",
-                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -169,11 +168,11 @@ export class Textarea {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "name",
                 "defaultValue": "this.inputId"
             },
             "invalid": {
                 "type": "boolean",
-                "attribute": "invalid",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -189,11 +188,11 @@ export class Textarea {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "invalid",
                 "defaultValue": "false"
             },
             "autocapitalize": {
                 "type": "string",
-                "attribute": "autocapitalize",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -209,11 +208,11 @@ export class Textarea {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "autocapitalize",
                 "defaultValue": "'none'"
             },
             "autocomplete": {
                 "type": "string",
-                "attribute": "autocomplete",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalInputAutocomplete",
@@ -234,11 +233,11 @@ export class Textarea {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "autocomplete",
                 "defaultValue": "'off'"
             },
             "autofocus": {
                 "type": "boolean",
-                "attribute": "autofocus",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -254,11 +253,11 @@ export class Textarea {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "autofocus",
                 "defaultValue": "false"
             },
             "debounce": {
                 "type": "number",
-                "attribute": "debounce",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -274,11 +273,11 @@ export class Textarea {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "debounce",
                 "defaultValue": "0"
             },
             "placeholder": {
                 "type": "string",
-                "attribute": "placeholder",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -293,11 +292,11 @@ export class Textarea {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "placeholder"
             },
             "maxLength": {
                 "type": "number",
-                "attribute": "max-length",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -312,11 +311,11 @@ export class Textarea {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "max-length"
             },
             "minLength": {
                 "type": "number",
-                "attribute": "min-length",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -331,11 +330,11 @@ export class Textarea {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "min-length"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -351,11 +350,11 @@ export class Textarea {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "readonly": {
                 "type": "boolean",
-                "attribute": "readonly",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -371,11 +370,11 @@ export class Textarea {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "readonly",
                 "defaultValue": "false"
             },
             "cols": {
                 "type": "number",
-                "attribute": "cols",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -390,11 +389,11 @@ export class Textarea {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "cols"
             },
             "rows": {
                 "type": "number",
-                "attribute": "rows",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -409,11 +408,11 @@ export class Textarea {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "rows"
             },
             "wrap": {
                 "type": "string",
-                "attribute": "wrap",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalTextareaWrap",
@@ -433,11 +432,11 @@ export class Textarea {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "wrap"
             },
             "required": {
                 "type": "boolean",
-                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -453,11 +452,11 @@ export class Textarea {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "required",
                 "defaultValue": "false"
             },
             "clickable": {
                 "type": "boolean",
-                "attribute": "clickable",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -473,11 +472,11 @@ export class Textarea {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "clickable",
                 "defaultValue": "false"
             },
             "inputmode": {
                 "type": "string",
-                "attribute": "inputmode",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalTextareaInputMode",
@@ -497,11 +496,11 @@ export class Textarea {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "inputmode"
             },
             "value": {
                 "type": "string",
-                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -517,11 +516,11 @@ export class Textarea {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "value",
                 "defaultValue": "''"
             },
             "autoInvalidOff": {
                 "type": "boolean",
-                "attribute": "auto-invalid-off",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -537,6 +536,7 @@ export class Textarea {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "auto-invalid-off",
                 "defaultValue": "false"
             }
         };

package/dist/collection/components/bal-time-input/bal-time-input.js

@@ -155,7 +155,7 @@ export class TimeInput {
         const value = this.focused ? this.getRawValue() : this.getFormattedValue();
         const block = BEM.block('time-input');
         const native = block.element('native');
-        return (h(Host, { key: '169d820dea13588e19c1e31307cdf506d7cb103d', "aria-disabled": ariaBooleanToString(this.disabled), class: Object.assign({}, block.class()) }, h("bal-input-group", { key: 'a35e45501ec4fab9eb274c5dbc76f76d99794922', disabled: this.disabled || this.readonly, invalid: this.invalid }, h("input", Object.assign({ key: '22a706a78b700fc39b6819d5f34ef3cc7213e293', type: "time", class: Object.assign({ 'input': true, 'is-disabled': this.disabled || this.readonly, 'is-danger': this.invalid, 'has-focus': this.focused, 'show-placeholder': !this.focused && (this.value === '' || this.value === undefined), 'has-value': this.value !== '' && this.value !== undefined }, native.class()), ref: input => (this.nativeInput = input), 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), name: this.name, disabled: this.disabled, readonly: this.readonly, required: this.required, placeholder: `${i18nBalTimeInput[this.language].hours}:${i18nBalTimeInput[this.language].minutes}`, value: value, onInput: ev => this.onInput(ev), onFocus: e => this.onFocus(e), onBlur: e => this.onBlur(e), onKeyDown: e => this.onKeydown(e), onKeyPress: e => this.balKeyPress.emit(e) }, this.inheritedAttributes)), h("bal-icon", { key: '99e813d458b4adb13726057d7cf82f21745bded7', "is-right": true, color: this.disabled || this.readonly ? 'grey' : this.invalid ? 'danger' : 'primary', name: "clock" }))));
+        return (h(Host, { key: '86f8a153c77f318da2e35298216ab1b5c24ee7bd', "aria-disabled": ariaBooleanToString(this.disabled), class: Object.assign({}, block.class()) }, h("bal-input-group", { key: '32beb28a88c67c27102e682d29a705bff9fa0ebb', disabled: this.disabled || this.readonly, invalid: this.invalid }, h("input", Object.assign({ key: 'b96e7dd3309fa3e4e5e186000f6e3320f3fd42c0', type: "time", class: Object.assign({ 'input': true, 'is-disabled': this.disabled || this.readonly, 'is-danger': this.invalid, 'has-focus': this.focused, 'show-placeholder': !this.focused && (this.value === '' || this.value === undefined), 'has-value': this.value !== '' && this.value !== undefined }, native.class()), ref: input => (this.nativeInput = input), 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), name: this.name, disabled: this.disabled, readonly: this.readonly, required: this.required, placeholder: `${i18nBalTimeInput[this.language].hours}:${i18nBalTimeInput[this.language].minutes}`, value: value, onInput: ev => this.onInput(ev), onFocus: e => this.onFocus(e), onBlur: e => this.onBlur(e), onKeyDown: e => this.onKeydown(e), onKeyPress: e => this.balKeyPress.emit(e) }, this.inheritedAttributes)), h("bal-icon", { key: '0b968334c8e83ee0eb538f6f2b2b07186e0676c7', "is-right": true, color: this.disabled || this.readonly ? 'grey' : this.invalid ? 'danger' : 'primary', name: "clock" }))));
     }
     static get is() { return "bal-time-input"; }
     static get originalStyleUrls() {
@@ -172,7 +172,6 @@ export class TimeInput {
         return {
             "name": {
                 "type": "string",
-                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -188,11 +187,11 @@ export class TimeInput {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "name",
                 "defaultValue": "this.inputId"
             },
             "invalid": {
                 "type": "boolean",
-                "attribute": "invalid",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -208,11 +207,11 @@ export class TimeInput {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "invalid",
                 "defaultValue": "false"
             },
             "required": {
                 "type": "boolean",
-                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -228,11 +227,11 @@ export class TimeInput {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "required",
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -248,11 +247,11 @@ export class TimeInput {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "readonly": {
                 "type": "boolean",
-                "attribute": "readonly",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -268,11 +267,11 @@ export class TimeInput {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "readonly",
                 "defaultValue": "false"
             },
             "debounce": {
                 "type": "number",
-                "attribute": "debounce",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -288,11 +287,11 @@ export class TimeInput {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "debounce",
                 "defaultValue": "0"
             },
             "value": {
                 "type": "string",
-                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -308,11 +307,11 @@ export class TimeInput {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "value",
                 "defaultValue": "undefined"
             },
             "autoInvalidOff": {
                 "type": "boolean",
-                "attribute": "auto-invalid-off",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -328,6 +327,7 @@ export class TimeInput {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "auto-invalid-off",
                 "defaultValue": "false"
             }
         };

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

@@ -67,7 +67,6 @@ export class Toast {
         return {
             "color": {
                 "type": "string",
-                "attribute": "color",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalToastColor",
@@ -88,11 +87,11 @@ export class Toast {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "color",
                 "defaultValue": "''"
             },
             "duration": {
                 "type": "number",
-                "attribute": "duration",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -108,11 +107,11 @@ export class Toast {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "duration",
                 "defaultValue": "0"
             },
             "closable": {
                 "type": "boolean",
-                "attribute": "closable",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -128,11 +127,11 @@ export class Toast {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "closable",
                 "defaultValue": "true"
             },
             "message": {
                 "type": "string",
-                "attribute": "message",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -148,11 +147,11 @@ export class Toast {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "message",
                 "defaultValue": "''"
             },
             "closeHandler": {
                 "type": "unknown",
-                "attribute": "close-handler",
                 "mutable": false,
                 "complexType": {
                     "original": "() => void",