@baloise/ds-core 16.0.3-nightly.20240417 → 16.1.0

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

@@ -21,6 +21,7 @@ export class Field {
             'bal-input-stepper',
             'bal-input-slider',
             'bal-file-upload',
+            'bal-dropdown',
         ];
         this.formElements = [...this.formControlElement, 'bal-field-label', 'bal-field-message'];
         this.isDirectChild = (el) => {
@@ -39,18 +40,26 @@ export class Field {
             }
             return this.isDirectChild(parent);
         };
+        this.isVisible = (el) => {
+            if (!el) {
+                return false;
+            }
+            return el.ariaHidden !== 'true';
+        };
         this.findDirectChild = (selectors) => {
             const element = this.el.querySelector(selectors);
             const isDirectChild = this.isDirectChild(element);
             if (isDirectChild) {
-                return element;
+                if (this.isVisible(element)) {
+                    return element;
+                }
             }
             return undefined;
         };
         this.findDirectChildren = (selectors) => {
             return selectors
                 .map(selector => {
-                return Array.from(this.el.querySelectorAll(selector)).filter(this.isDirectChild);
+                return Array.from(this.el.querySelectorAll(selector)).filter(this.isDirectChild).filter(this.isVisible);
             })
                 .flat();
         };
@@ -99,6 +108,7 @@ export class Field {
             'bal-field-control bal-input',
             'bal-field-control bal-select',
             'bal-field-control bal-input-date',
+            'bal-field-control bal-dropdown',
             'bal-field-control bal-checkbox',
             'bal-field-control bal-radio',
             'bal-field-control bal-checkbox-group',

package/dist/collection/components/bal-option/bal-option.css

@@ -0,0 +1 @@
+:root{--bal-option-padding-x: var(--bal-space-small);--bal-option-min-height: 1.5rem;--bal-option-background: var(--bal-color-white);--bal-option-background-hovered: var(--bal-color-grey-2);--bal-option-background-selected: var(--bal-color-primary-1);--bal-option-background-selected-hovered: #dddfeb;--bal-option-background-invalid: var(--bal-color-danger-1);--bal-option-background-invalid-hovered: #fbe0de;--bal-option-border-width: var(--bal-border-width-normal);--bal-option-border-color: var(--bal-color-grey-2);--bal-option-font-family: var(--bal-font-family-text);--bal-option-font-weight: var(--bal-font-weight-regular);--bal-option-line-height: 1.125rem;--bal-option-text-hovered: var(--bal-color-text-primary-hovered);--bal-option-text-pressed: var(--bal-color-text-primary-pressed);--bal-option-text-disabled: var(--bal-color-text-grey-light)}.bal-option{font-size:16px;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:block;list-style:none;cursor:pointer;border-bottom-width:var(--bal-option-border-width);border-bottom-color:var(--bal-option-border-color);border-bottom-style:solid;background:var(--bal-option-background);padding-left:var(--bal-option-padding-x);padding-right:var(--bal-option-padding-x);min-height:var(--bal-option-min-height)}.bal-option>bal-stack{min-height:var(--bal-option-min-height)}.bal-option:last-child{border-bottom:none}.bal-option::-moz-focus-inner{border:none}.bal-option--hidden{display:none;visibility:hidden}.bal-option__inner{font-family:var(--bal-option-font-family);font-weight:var(--bal-option-font-weight);line-height:var(--bal-option-line-height);word-break:break-word;white-space:normal;hyphens:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.bal-option__inner--multiline{white-space:normal}.bal-option--focused{background:var(--bal-option-background-hovered)}@media(hover: hover)and (pointer: fine){.bal-option:hover{background:var(--bal-option-background-hovered);color:var(--bal-option-text-hovered)}}.bal-option:active{background:var(--bal-option-background-hovered);color:var(--bal-option-text-pressed)}.bal-option--selected{background:var(--bal-option-background-selected)}@media(hover: hover)and (pointer: fine){.bal-option--selected:hover{background:var(--bal-option-background-selected-hovered)}}.bal-option--selected:active{background:var(--bal-option-background-selected-hovered)}.bal-option--selected .bal-option__inner{font-weight:var(--bal-font-weight-bold)}.bal-option--selected.bal-option--focused{background:var(--bal-option-background-selected-hovered)}.bal-option--selected.bal-option--focused .bal-option__inner{font-weight:var(--bal-font-weight-bold)}.bal-option--invalid{background:var(--bal-option-background-invalid)}@media(hover: hover)and (pointer: fine){.bal-option--invalid:hover{background:var(--bal-option-background-invalid-hovered)}}.bal-option--invalid:active{background:var(--bal-option-background-invalid-hovered)}.bal-option--invalid.bal-option--focused{background:var(--bal-option-background-invalid-hovered)}.bal-option--invalid .bal-option__inner{color:var(--bal-color-text-danger-hovered)}@media(hover: hover)and (pointer: fine){.bal-option--invalid:hover .bal-option__inner{color:var(--bal-color-text-danger-hovered)}}.bal-option--invalid:active .bal-option__inner{color:var(--bal-color-text-danger-pressed)}.bal-option--disabled,.bal-option--disabled.bal-option--focused{background:var(--bal-option-background) !important;color:var(--bal-option-text-disabled) !important;cursor:default !important}.bal-option--disabled:hover,.bal-option--disabled.bal-option--focused:hover{background:var(--bal-option-background) !important}.bal-option{--bal-radio-checkbox-symbol-size: 1.125rem;--bal-radio-checkbox-symbol-width: calc(0.375rem - 1px);--bal-radio-checkbox-symbol-height: calc(0.656rem - 1px);--bal-radio-checkbox-symbol-left: calc(0.375rem + 1px);--bal-radio-checkbox-symbol-margin-top: 0.188rem;--bal-radio-checkbox-label-min-height: 1.125rem}

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

@@ -0,0 +1,4 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+/// <reference path="../../interfaces.d.ts" />

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

@@ -0,0 +1,360 @@
+import { __decorate, __metadata } from "tslib";
+import { h, Host, } from "@stencil/core";
+import { BEM } from "../../utils/bem";
+import { Logger } from "../../utils/log";
+import { ariaBooleanToString } from "../../utils/aria";
+import { ListenToElementStates } from "../../utils/element-states";
+import { stopEventBubbling } from "../../utils/form-input";
+import { BalElementStateListener } from "../../utils/element-states/element-states.listener";
+export class Option {
+    constructor() {
+        this.inputId = `bal-option-${balOptionIds++}`;
+        /**
+         * EVENT BINDING
+         * ------------------------------------------------------
+         */
+        this.onClick = (ev) => {
+            const listEl = this.el.closest('bal-option-list');
+            if (this.disabled || (listEl && listEl.disabled)) {
+                stopEventBubbling(ev);
+            }
+            else {
+                if (listEl && listEl.required && !listEl.multiple) {
+                    if (!this.selected) {
+                        this.select(true);
+                    }
+                }
+                else {
+                    this.select(!this.selected);
+                }
+            }
+        };
+        this.checkbox = false;
+        this.interactionState = BalElementStateListener.DefaultState;
+        this.label = '';
+        this.value = '';
+        this.disabled = false;
+        this.multiline = false;
+        this.invalid = false;
+        this.selected = false;
+        this.focused = false;
+        this.hidden = false;
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    /**
+     * LIFECYCLE
+     * ------------------------------------------------------
+     */
+    componentWillRender() {
+        if (this.el) {
+            const optionListEl = this.el.closest('bal-option-list');
+            if (optionListEl) {
+                this.checkbox = !!optionListEl.multiple;
+            }
+        }
+    }
+    /**
+     * LISTENERS
+     * ------------------------------------------------------
+     */
+    listenToMouseEnter() {
+        const { label, value, selected, disabled, hidden } = this;
+        if (!hidden && !disabled) {
+            this.balOptionFocus.emit({ label, value, selected });
+        }
+    }
+    elementStateListener(info) {
+        this.interactionChildElements.forEach(element => {
+            element.hovered = info.hovered;
+            element.pressed = info.pressed;
+        });
+    }
+    /**
+     * PUBLIC METHODS
+     * ------------------------------------------------------
+     */
+    /**
+     * Selects or deselects the option and informs other components
+     */
+    async select(selected = true) {
+        this.selected = selected;
+        const { label, value } = this;
+        this.balOptionChange.emit({ label, value, selected });
+    }
+    /**
+     * PRIVATE METHODS
+     * ------------------------------------------------------
+     */
+    get interactionChildElements() {
+        return Array.from(this.el.querySelectorAll('bal-checkbox'));
+    }
+    /**
+     * RENDER
+     * ------------------------------------------------------
+     */
+    render() {
+        const block = BEM.block('option');
+        return (h(Host, { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('checkbox').class(this.checkbox)), block.modifier('focused').class(this.focused)), block.modifier('invalid').class(this.invalid)), block.modifier('selected').class(this.selected)), block.modifier('disabled').class(this.disabled)), block.modifier('hidden').class(this.hidden)), role: "option", id: this.inputId, "data-value": this.value, "data-label": this.label, "aria-label": this.label, "aria-hidden": ariaBooleanToString(this.hidden), "aria-selected": ariaBooleanToString(this.selected), "aria-checked": ariaBooleanToString(this.selected), "aria-disabled": ariaBooleanToString(this.disabled), "aria-invalid": ariaBooleanToString(this.invalid), tabIndex: -1, onClick: this.onClick }, h("bal-stack", { py: "small", space: "x-small" }, this.checkbox ? (h("bal-checkbox", { flat: true, nonSubmit: true, "label-hidden": true, checked: this.selected, disabled: this.disabled, invalid: this.invalid, tabindex: -1 })) : (''), h("div", { class: Object.assign(Object.assign({}, block.element('inner').class()), block.element('inner').modifier('multiline').class(this.multiline)) }, h("slot", null)), this.selected && !this.checkbox ? (h("bal-icon", { name: "check", size: "small", color: this.disabled ? 'grey' : this.invalid ? 'danger' : 'primary' })) : (''))));
+    }
+    static get is() { return "bal-option"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bal-option.sass"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bal-option.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label will be shown in the input element when it got selected"
+                },
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The value of the select option. This value will be returned by the parent `<bal-select>` element."
+                },
+                "attribute": "value",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the user cannot interact with the option."
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "multiline": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the option can present in more than one line."
+                },
+                "attribute": "multiline",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "invalid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the option is shown in red."
+                },
+                "attribute": "invalid",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "selected": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the option is selected."
+                },
+                "attribute": "selected",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "focused": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the option is focused."
+                },
+                "attribute": "focused",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "hidden": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the option is hidden."
+                },
+                "attribute": "hidden",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "checkbox": {},
+            "interactionState": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "balOptionChange",
+                "name": "balOptionChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the option gets selected or unselected"
+                },
+                "complexType": {
+                    "original": "BalEvents.BalOptionChangeDetail",
+                    "resolved": "BalOption",
+                    "references": {
+                        "BalEvents": {
+                            "location": "global",
+                            "id": "global::BalEvents"
+                        }
+                    }
+                }
+            }, {
+                "method": "balOptionFocus",
+                "name": "balOptionFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": "Emitted when a option gets focused."
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "BalEvents.BalOptionFocusDetail",
+                    "resolved": "BalOption",
+                    "references": {
+                        "BalEvents": {
+                            "location": "global",
+                            "id": "global::BalEvents"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "select": {
+                "complexType": {
+                    "signature": "(selected?: boolean) => Promise<void>",
+                    "parameters": [{
+                            "name": "selected",
+                            "type": "boolean",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Selects or deselects the option and informs other components",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "mouseenter",
+                "method": "listenToMouseEnter",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }];
+    }
+}
+__decorate([
+    Logger('bal-option'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function]),
+    __metadata("design:returntype", void 0)
+], Option.prototype, "createLogger", null);
+__decorate([
+    ListenToElementStates(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", void 0)
+], Option.prototype, "elementStateListener", null);
+let balOptionIds = 0;

package/dist/collection/components/bal-option-list/bal-option-list.css

@@ -0,0 +1 @@
+.bal-option-list{display:block;position:relative;width:100%;list-style:none;margin:0;outline:0;max-height:var(--bal-option-list-max-height);border-radius:var(--bal-radius-normal);overflow:hidden auto}

package/dist/collection/components/bal-option-list/bal-option-list.interfaces.js

@@ -0,0 +1,4 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+/// <reference path="../../interfaces.d.ts" />