@baloise/ds-core 19.3.0 → 19.4.0

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

@@ -5,46 +5,122 @@ import { rOnLoad } from "../../utils/helpers";
 export class Button {
     constructor() {
         this.inheritAttributes = {};
-        this.onFocus = () => {
-            this.balFocus.emit();
-        };
-        this.onBlur = () => {
-            this.balBlur.emit();
-        };
-        this.onClick = (ev) => {
-            if (!this.disabled) {
-                this.balClick.emit(ev);
-                if (this.href !== undefined) {
-                    this.balNavigate.emit(ev);
-                }
-            }
-        };
         this.isLargestContentPaintDone = false;
+        /**
+         * The color to use from your application's color palette.
+         */
         this.color = 'primary';
+        /**
+         * The type of button.
+         */
         this.elementType = 'button';
+        /**
+         * If `true`, the user cannot interact with the button.
+         */
         this.disabled = false;
+        /**
+         * Size of the button
+         */
         this.size = '';
-        this.href = undefined;
+        /**
+         * Specifies where to display the linked URL.
+         * Only applies when an `href` is provided.
+         */
         this.target = '_self';
-        this.rel = undefined;
-        this.download = undefined;
+        /**
+         * If `true` adds a box shadow to improve readability on image background
+         * */
         this.shadow = false;
+        /**
+         * If `true` the width of the buttons is limited
+         */
         this.square = false;
+        /**
+         * If `true` the button has a active theme
+         */
         this.isActive = false;
+        /**
+         * If `true` the button has a full width
+         */
         this.expanded = false;
+        /**
+         * If `true` the button has no padding and a reduced height
+         */
         this.flat = false;
+        /**
+         * If `true` the button is outlined
+         */
         this.outlined = false;
+        /**
+         * If `true` the button is inverted
+         */
         this.inverted = false;
+        /**
+         * If `true` the label is hidden and a loading spinner is shown instead.
+         */
         this.loading = false;
+        /**
+         * If `true` the button is rounded.
+         */
         this.rounded = false;
+        /**
+         * If `true` the button is a popup.
+         */
         this.balPopup = undefined;
+        /**
+         * Name of the left button icon
+         */
         this.icon = '';
+        /**
+         * If `true` the icon turns
+         */
         this.iconTurn = false;
+        /**
+         * Name of the right button icon
+         */
         this.iconRight = '';
+        /**
+         * The label of the button will not break
+         */
         this.noWrap = false;
+        /**
+         * The name of the button, which is submitted with the form data.
+         */
         this.name = '';
+        /**
+         * The value of the button, which is submitted with the form data.
+         */
         this.value = '';
-        this.aria = undefined;
+        /**
+         * A11y attributes for the native button element.
+         */
+        this.a11yControls = undefined;
+        /**
+         * A11y attributes for the native button element.
+         */
+        this.a11yTitle = undefined;
+        /**
+         * A11y attributes for the native button element.
+         */
+        this.a11yLabel = undefined;
+        /**
+         * A11y attributes for the native button element.
+         */
+        this.a11yHaspopup = undefined;
+        this.onFocus = () => {
+            this.balFocus.emit();
+        };
+        this.onBlur = () => {
+            this.balBlur.emit();
+        };
+        this.onClick = (ev) => {
+            if (!this.disabled) {
+                this.balClick.emit(ev);
+                if (this.href !== undefined) {
+                    this.balNavigate.emit(ev);
+                }
+            }
+        };
     }
     listenOnClick(ev) {
         if (this.disabled && ev.target && ev.target === this.el) {
@@ -56,7 +132,6 @@ export class Button {
         rOnLoad(() => (this.isLargestContentPaintDone = true));
     }
     componentWillLoad() {
-        var _a;
         this.inheritAttributes = inheritAttributes(this.el, [
             'title',
             'aria-label',
@@ -65,10 +140,8 @@ export class Button {
             'tabindex',
             'aria-haspopup',
         ]);
-        if (this.el.hasAttribute('bal-popup') && !((_a = this.aria) === null || _a === void 0 ? void 0 : _a.haspopup)) {
-            this.aria = {
-                haspopup: 'true',
-            };
+        if (this.el.hasAttribute('bal-popup') && !this.a11yHaspopup) {
+            this.a11yHaspopup = 'true';
         }
     }
     componentDidRender() {
@@ -127,7 +200,6 @@ export class Button {
         }
     }
     render() {
-        var _a, _b, _c, _d, _e;
         const { elementType, download, href, rel, target, name, value } = this;
         const TagType = this.href === undefined ? 'button' : 'a';
         const attrs = TagType === 'button'
@@ -153,10 +225,10 @@ export class Button {
             }
         };
         const ariaAttributes = {
-            'title': ((_a = this.aria) === null || _a === void 0 ? void 0 : _a.title) || this.inheritAttributes['title'],
-            'aria-label': ((_b = this.aria) === null || _b === void 0 ? void 0 : _b.label) || this.inheritAttributes['aria-label'] || ((_c = this.aria) === null || _c === void 0 ? void 0 : _c.title) || this.inheritAttributes['title'],
-            'aria-controls': ((_d = this.aria) === null || _d === void 0 ? void 0 : _d.controls) || this.inheritAttributes['aria-controls'],
-            'aria-haspopup': ((_e = this.aria) === null || _e === void 0 ? void 0 : _e.haspopup) || this.inheritAttributes['aria-haspopup'],
+            'title': this.a11yTitle || this.inheritAttributes['title'],
+            'aria-label': this.a11yLabel || this.inheritAttributes['aria-label'] || this.a11yTitle || this.inheritAttributes['title'],
+            'aria-controls': this.a11yControls || this.inheritAttributes['aria-controls'],
+            'aria-haspopup': this.a11yHaspopup || this.inheritAttributes['aria-haspopup'],
         };
         return (h(Host, { onClick: this.handleClick, class: {
                 'bal-button': true,
@@ -184,6 +256,7 @@ export class Button {
         return {
             "color": {
                 "type": "string",
+                "attribute": "color",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalButtonColor",
@@ -203,12 +276,12 @@ export class Button {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "color",
                 "reflect": false,
                 "defaultValue": "'primary'"
             },
             "elementType": {
                 "type": "string",
+                "attribute": "element-type",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalButtonElementType",
@@ -228,12 +301,12 @@ export class Button {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "element-type",
                 "reflect": false,
                 "defaultValue": "'button'"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -248,12 +321,12 @@ export class Button {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "size": {
                 "type": "string",
+                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalButtonSize",
@@ -273,12 +346,12 @@ export class Button {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
                 "reflect": true,
                 "defaultValue": "''"
             },
             "href": {
                 "type": "string",
+                "attribute": "href",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -293,11 +366,11 @@ export class Button {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "href",
                 "reflect": false
             },
             "target": {
                 "type": "string",
+                "attribute": "target",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalButtonTarget",
@@ -317,12 +390,12 @@ export class Button {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "target",
                 "reflect": false,
                 "defaultValue": "'_self'"
             },
             "rel": {
                 "type": "string",
+                "attribute": "rel",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -337,11 +410,11 @@ export class Button {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "rel",
                 "reflect": false
             },
             "download": {
                 "type": "string",
+                "attribute": "download",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -356,11 +429,11 @@ export class Button {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "download",
                 "reflect": false
             },
             "shadow": {
                 "type": "boolean",
+                "attribute": "shadow",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -375,12 +448,12 @@ export class Button {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "shadow",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "square": {
                 "type": "boolean",
+                "attribute": "square",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -395,12 +468,12 @@ export class Button {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "square",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "isActive": {
                 "type": "boolean",
+                "attribute": "is-active",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -415,12 +488,12 @@ export class Button {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "is-active",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "expanded": {
                 "type": "boolean",
+                "attribute": "expanded",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -435,12 +508,12 @@ export class Button {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "expanded",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "flat": {
                 "type": "boolean",
+                "attribute": "flat",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -455,12 +528,12 @@ export class Button {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "flat",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "outlined": {
                 "type": "boolean",
+                "attribute": "outlined",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -475,12 +548,12 @@ export class Button {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "outlined",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "inverted": {
                 "type": "boolean",
+                "attribute": "inverted",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -495,12 +568,12 @@ export class Button {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "inverted",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "loading": {
                 "type": "boolean",
+                "attribute": "loading",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -515,12 +588,12 @@ export class Button {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "loading",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "rounded": {
                 "type": "boolean",
+                "attribute": "rounded",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -535,12 +608,12 @@ export class Button {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "rounded",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "balPopup": {
                 "type": "any",
+                "attribute": "bal-popup",
                 "mutable": false,
                 "complexType": {
                     "original": "any",
@@ -555,12 +628,12 @@ export class Button {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "bal-popup",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "icon": {
                 "type": "string",
+                "attribute": "icon",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -575,12 +648,12 @@ export class Button {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon",
                 "reflect": false,
                 "defaultValue": "''"
             },
             "iconTurn": {
                 "type": "boolean",
+                "attribute": "icon-turn",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -595,12 +668,12 @@ export class Button {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon-turn",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "iconRight": {
                 "type": "string",
+                "attribute": "icon-right",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -615,12 +688,12 @@ export class Button {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon-right",
                 "reflect": false,
                 "defaultValue": "''"
             },
             "noWrap": {
                 "type": "boolean",
+                "attribute": "no-wrap",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -635,12 +708,12 @@ export class Button {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "no-wrap",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -655,12 +728,12 @@ export class Button {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "name",
                 "reflect": false,
                 "defaultValue": "''"
             },
             "value": {
                 "type": "any",
+                "attribute": "value",
                 "mutable": false,
                 "complexType": {
                     "original": "string | number",
@@ -675,22 +748,37 @@ export class Button {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": false,
                 "defaultValue": "''"
             },
-            "aria": {
-                "type": "unknown",
-                "mutable": true,
+            "a11yControls": {
+                "type": "string",
+                "attribute": "a-1-1y-controls",
+                "mutable": false,
                 "complexType": {
-                    "original": "BalProps.BalButtonAria",
-                    "resolved": "{ controls?: string; title?: string; label?: string; haspopup?: string; }",
-                    "references": {
-                        "BalProps": {
-                            "location": "global",
-                            "id": "global::BalProps"
-                        }
-                    }
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A11y attributes for the native button element."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "undefined"
+            },
+            "a11yTitle": {
+                "type": "string",
+                "attribute": "a-1-1y-title",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
                 },
                 "required": false,
                 "optional": true,
@@ -700,6 +788,47 @@ export class Button {
                 },
                 "getter": false,
                 "setter": false,
+                "reflect": false,
+                "defaultValue": "undefined"
+            },
+            "a11yLabel": {
+                "type": "string",
+                "attribute": "a-1-1y-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A11y attributes for the native button element."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "undefined"
+            },
+            "a11yHaspopup": {
+                "type": "string",
+                "attribute": "a-1-1y-haspopup",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A11y attributes for the native button element."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
                 "defaultValue": "undefined"
             }
         };

package/dist/collection/components/bal-card/bal-card-actions/bal-card-actions.js

@@ -1,6 +1,9 @@
 import { Host, h } from "@stencil/core";
 export class CardActions {
     constructor() {
+        /**
+         * The value of the button, which is submitted with the form data.
+         */
         this.position = '';
     }
     render() {
@@ -11,6 +14,7 @@ export class CardActions {
         return {
             "position": {
                 "type": "string",
+                "attribute": "position",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalCardActionsPosition",
@@ -30,7 +34,6 @@ export class CardActions {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "position",
                 "reflect": false,
                 "defaultValue": "''"
             }