@baloise/ds-core 19.3.0 → 19.4.0

package/dist/collection/components/bal-accordion/bal-accordion-trigger/bal-accordion-trigger.js

@@ -9,6 +9,52 @@ import { i18nBalAccordion } from "../bal-accordion.i18n";
 export class AccordionTrigger {
     constructor() {
         this.componentId = `bal-accordion-trigger-${accordionTriggerIds++}`;
+        this.language = defaultConfig.language;
+        /**
+         * PUBLIC PROPERTY API
+         * ------------------------------------------------------
+         */
+        /**
+         * @deprecated
+         * Trigger will be a bal-button
+         */
+        this.button = false;
+        /**
+         * If `true` the button is aligned over the whole width
+         */
+        this.expanded = true;
+        /**
+         * Label of the open trigger button
+         */
+        this.openLabel = '';
+        /**
+         * BalIcon of the open trigger button
+         */
+        this.openIcon = 'caret-down';
+        /**
+         * Label of the close trigger button
+         */
+        this.closeLabel = '';
+        /**
+         * BalIcon of the close trigger button
+         */
+        this.closeIcon = '';
+        /**
+         * The color to use from your application's color palette.
+         */
+        this.color = 'info';
+        /**
+         * Size of the button
+         */
+        this.size = '';
+        /**
+         * @internal
+         */
+        this.active = false;
+        /**
+         * @internal
+         */
+        this.state = 1 /* AccordionState.Collapsed */;
         /**
          * PRIVATE METHODS
          * ------------------------------------------------------
@@ -28,19 +74,6 @@ export class AccordionTrigger {
          * ------------------------------------------------------
          */
         this.block = BEM.block('accordion').element('trigger');
-        this.parentAccordionId = undefined;
-        this.language = defaultConfig.language;
-        this.button = false;
-        this.variant = undefined;
-        this.expanded = true;
-        this.openLabel = '';
-        this.openIcon = 'caret-down';
-        this.closeLabel = '';
-        this.closeIcon = '';
-        this.color = 'info';
-        this.size = '';
-        this.active = false;
-        this.state = 1 /* AccordionState.Collapsed */;
     }
     createLogger(log) {
         this.log = log;
@@ -145,6 +178,7 @@ export class AccordionTrigger {
         return {
             "button": {
                 "type": "boolean",
+                "attribute": "button",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -162,12 +196,12 @@ export class AccordionTrigger {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "button",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "variant": {
                 "type": "string",
+                "attribute": "variant",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalAccordionTriggerVariant",
@@ -187,11 +221,11 @@ export class AccordionTrigger {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "variant",
                 "reflect": false
             },
             "expanded": {
                 "type": "boolean",
+                "attribute": "expanded",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -206,12 +240,12 @@ export class AccordionTrigger {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "expanded",
                 "reflect": false,
                 "defaultValue": "true"
             },
             "openLabel": {
                 "type": "string",
+                "attribute": "open-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -226,12 +260,12 @@ export class AccordionTrigger {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "open-label",
                 "reflect": false,
                 "defaultValue": "''"
             },
             "openIcon": {
                 "type": "string",
+                "attribute": "open-icon",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -246,12 +280,12 @@ export class AccordionTrigger {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "open-icon",
                 "reflect": false,
                 "defaultValue": "'caret-down'"
             },
             "closeLabel": {
                 "type": "string",
+                "attribute": "close-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -266,12 +300,12 @@ export class AccordionTrigger {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "close-label",
                 "reflect": false,
                 "defaultValue": "''"
             },
             "closeIcon": {
                 "type": "string",
+                "attribute": "close-icon",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -286,12 +320,12 @@ export class AccordionTrigger {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "close-icon",
                 "reflect": false,
                 "defaultValue": "''"
             },
             "color": {
                 "type": "string",
+                "attribute": "color",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalButtonColor",
@@ -311,12 +345,12 @@ export class AccordionTrigger {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "color",
                 "reflect": false,
                 "defaultValue": "'info'"
             },
             "size": {
                 "type": "string",
+                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalButtonSize",
@@ -336,12 +370,12 @@ export class AccordionTrigger {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
                 "reflect": false,
                 "defaultValue": "''"
             },
             "active": {
                 "type": "boolean",
+                "attribute": "active",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -359,12 +393,12 @@ export class AccordionTrigger {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "active",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "state": {
                 "type": "number",
+                "attribute": "state",
                 "mutable": false,
                 "complexType": {
                     "original": "AccordionState",
@@ -388,7 +422,6 @@ export class AccordionTrigger {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "state",
                 "reflect": false,
                 "defaultValue": "AccordionState.Collapsed"
             }

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

@@ -8,6 +8,45 @@ import { Logger } from "../../utils/log";
 export class Accordion {
     constructor() {
         this.componentId = `bal-accordion-${accordionIds++}`;
+        this.state = 1 /* AccordionState.Collapsed */;
+        this.animated = true;
+        /**
+         * PUBLIC PROPERTY API
+         * ------------------------------------------------------
+         */
+        /**
+         * If `true` the accordion is open.
+         */
+        this.active = false;
+        /**
+         * Set the amount of time, in milliseconds, to wait to trigger the `balChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.
+         */
+        this.debounce = 0;
+        /**
+         * Label of the open trigger button
+         */
+        this.openLabel = '';
+        /**
+         * BalIcon of the open trigger button
+         */
+        this.openIcon = 'plus';
+        /**
+         * Label of the close trigger button
+         */
+        this.closeLabel = '';
+        /**
+         * BalIcon of the close trigger button
+         */
+        this.closeIcon = 'close';
+        /**
+         * If `true` the accordion is used on the bottom of a card
+         */
+        this.card = false;
+        /**
+         * @internal
+         * defines the version of the component
+         */
+        this.version = 1;
         /**
          * PRIVATE METHODS
          * ------------------------------------------------------
@@ -134,16 +173,6 @@ export class Accordion {
         this.onTriggerClickV1 = () => {
             this.humanToggle();
         };
-        this.state = 1 /* AccordionState.Collapsed */;
-        this.animated = true;
-        this.active = false;
-        this.debounce = 0;
-        this.openLabel = '';
-        this.openIcon = 'plus';
-        this.closeLabel = '';
-        this.closeIcon = 'close';
-        this.card = false;
-        this.version = 1;
     }
     createLogger(log) {
         this.log = log;
@@ -283,6 +312,7 @@ export class Accordion {
         return {
             "active": {
                 "type": "boolean",
+                "attribute": "active",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -297,12 +327,12 @@ export class Accordion {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "active",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "debounce": {
                 "type": "number",
+                "attribute": "debounce",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -317,12 +347,12 @@ export class Accordion {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "debounce",
                 "reflect": false,
                 "defaultValue": "0"
             },
             "openLabel": {
                 "type": "string",
+                "attribute": "open-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -337,12 +367,12 @@ export class Accordion {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "open-label",
                 "reflect": false,
                 "defaultValue": "''"
             },
             "openIcon": {
                 "type": "string",
+                "attribute": "open-icon",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -357,12 +387,12 @@ export class Accordion {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "open-icon",
                 "reflect": false,
                 "defaultValue": "'plus'"
             },
             "closeLabel": {
                 "type": "string",
+                "attribute": "close-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -377,12 +407,12 @@ export class Accordion {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "close-label",
                 "reflect": false,
                 "defaultValue": "''"
             },
             "closeIcon": {
                 "type": "string",
+                "attribute": "close-icon",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -397,12 +427,12 @@ export class Accordion {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "close-icon",
                 "reflect": false,
                 "defaultValue": "'close'"
             },
             "card": {
                 "type": "boolean",
+                "attribute": "card",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -417,12 +447,12 @@ export class Accordion {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "card",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "version": {
                 "type": "number",
+                "attribute": "version",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -440,7 +470,6 @@ export class Accordion {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "version",
                 "reflect": false,
                 "defaultValue": "1"
             }

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

@@ -9,14 +9,20 @@ import { startFocusVisible } from "../../utils/focus-visible";
 export class App {
     constructor() {
         this.debouncedNotify = debounce(() => this.notifyResize(), 100);
+        /**
+         * Disables all animation inside the bal-app. Can be used for simplify e2e testing.
+         */
+        this.animated = true;
+        /**
+         * @internal Is `true` when DS components are ready to be shown.
+         */
+        this.ready = false;
         this.notifyResize = async () => {
             if (balBrowser.hasDocument && balBrowser.hasWindow) {
                 const doc = document.documentElement;
                 doc.style.setProperty('--bal-app-height', `${window.innerHeight}px`);
             }
         };
-        this.animated = true;
-        this.ready = false;
     }
     createLogger(log) {
         this.log = log;
@@ -74,6 +80,7 @@ export class App {
         return {
             "animated": {
                 "type": "boolean",
+                "attribute": "animated",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -88,12 +95,12 @@ export class App {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "animated",
                 "reflect": true,
                 "defaultValue": "true"
             },
             "ready": {
                 "type": "boolean",
+                "attribute": "ready",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -111,7 +118,6 @@ export class App {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "ready",
                 "reflect": true,
                 "defaultValue": "false"
             }

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

@@ -2,9 +2,17 @@ import { h, Host } from "@stencil/core";
 import { BEM } from "../../utils/bem";
 export class Badge {
     constructor() {
-        this.icon = undefined;
+        /**
+         * Define the size of badge. Small is recommended for tabs.
+         */
         this.size = '';
+        /**
+         * Define the color for the badge.
+         */
         this.color = '';
+        /**
+         * If `true` the badge is added to the top right corner of the card.
+         */
         this.position = '';
     }
     render() {
@@ -32,6 +40,7 @@ export class Badge {
         return {
             "icon": {
                 "type": "string",
+                "attribute": "icon",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -46,11 +55,11 @@ export class Badge {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon",
                 "reflect": false
             },
             "size": {
                 "type": "string",
+                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalBadgeSize",
@@ -70,12 +79,12 @@ export class Badge {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
                 "reflect": false,
                 "defaultValue": "''"
             },
             "color": {
                 "type": "string",
+                "attribute": "color",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalBadgeColor",
@@ -95,12 +104,12 @@ export class Badge {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "color",
                 "reflect": false,
                 "defaultValue": "''"
             },
             "position": {
                 "type": "string",
+                "attribute": "position",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalBadgePosition",
@@ -120,7 +129,6 @@ export class Badge {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "position",
                 "reflect": false,
                 "defaultValue": "''"
             }

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

@@ -2,8 +2,18 @@ import { h, Host } from "@stencil/core";
 import { BEM } from "../../../utils/bem";
 export class ButtonGroup {
     constructor() {
+        /**
+         * The value of the button, which is submitted with the form data.
+         */
         this.position = '';
+        /**
+         * `auto` will position the button items vertical and full width.
+         * `row` will force that the buttons are also horizontal on mobile.
+         */
         this.direction = 'auto';
+        /**
+         * If `true` the flex direction is used in reverse on mobile.
+         */
         this.reverse = false;
     }
     render() {
@@ -20,6 +30,7 @@ export class ButtonGroup {
         return {
             "position": {
                 "type": "string",
+                "attribute": "position",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalButtonGroupPosition",
@@ -39,12 +50,12 @@ export class ButtonGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "position",
                 "reflect": false,
                 "defaultValue": "''"
             },
             "direction": {
                 "type": "string",
+                "attribute": "direction",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalButtonGroupDirection",
@@ -64,12 +75,12 @@ export class ButtonGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "direction",
                 "reflect": false,
                 "defaultValue": "'auto'"
             },
             "reverse": {
                 "type": "boolean",
+                "attribute": "reverse",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -84,7 +95,6 @@ export class ButtonGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "reverse",
                 "reflect": false,
                 "defaultValue": "false"
             }