@baloise/ds-core 16.4.0 → 16.5.0

package/dist/collection/components/bal-segment/bal-segment-item/bal-segment-item.js

@@ -0,0 +1,332 @@
+import { h, Host, } from "@stencil/core";
+import { BEM } from "../../../utils/bem";
+import { inheritAttributes } from "../../../utils/attributes";
+import { addEventListener, raf, removeEventListener } from "../../../utils/helpers";
+let ids = 0;
+export class SegmentItem {
+    constructor() {
+        this.segmentEl = null;
+        this.inheritedAttributes = {};
+        this.id = ids++;
+        this.updateVertical = (ev) => {
+            this.isVertical = ev.detail;
+        };
+        this.updateState = () => {
+            const { segmentEl } = this;
+            if (segmentEl) {
+                if (segmentEl.value === '' || segmentEl.value === undefined || segmentEl.value === null) {
+                    const items = this.items;
+                    if (items.length > 0) {
+                        const first = items[0];
+                        this.isFocusable = first === this.el;
+                    }
+                }
+                else {
+                    this.checked = segmentEl.value === this.value;
+                    this.isFocusable = segmentEl.value === this.value;
+                }
+                if (segmentEl.disabled) {
+                    this.disabled = true;
+                }
+            }
+        };
+        this.onSlottedItemsChange = () => {
+            /**
+             * When the slotted segment buttons change we need to
+             * ensure that the new segment buttons are checked if
+             * the value matches the segment button value.
+             */
+            this.checkSlotContent();
+        };
+        this.hasSlotContent = false;
+        this.isFocusable = false;
+        this.isVertical = false;
+        this.disabled = false;
+        this.invalid = false;
+        this.focused = false;
+        this.checked = false;
+        this.label = '';
+        this.value = 'bal-si-' + this.id;
+    }
+    valueChanged() {
+        this.updateState();
+    }
+    connectedCallback() {
+        const segmentEl = (this.segmentEl = this.el.closest('bal-segment'));
+        if (segmentEl) {
+            this.updateState();
+            addEventListener(segmentEl, 'balSelect', this.updateState);
+            addEventListener(segmentEl, 'balVertical', this.updateVertical);
+        }
+    }
+    disconnectedCallback() {
+        const segmentEl = this.segmentEl;
+        if (segmentEl) {
+            removeEventListener(segmentEl, 'balSelect', this.updateState);
+            removeEventListener(segmentEl, 'balVertical', this.updateVertical);
+            this.segmentEl = null;
+        }
+    }
+    componentWillLoad() {
+        this.inheritedAttributes = Object.assign({}, inheritAttributes(this.el, ['aria-label']));
+    }
+    componentDidLoad() {
+        raf(() => this.checkSlotContent());
+    }
+    /**
+     * @internal
+     * Focuses the native <button> element
+     * inside of ion-segment-button.
+     */
+    async setFocus() {
+        const { nativeEl } = this;
+        if (nativeEl !== undefined) {
+            nativeEl.focus();
+        }
+    }
+    get items() {
+        return this.allItems.filter(item => !item.disabled);
+    }
+    get allItems() {
+        const { segmentEl } = this;
+        if (segmentEl) {
+            return Array.from(segmentEl.querySelectorAll('bal-segment-item'));
+        }
+        return [];
+    }
+    isFirst() {
+        const { segmentEl } = this;
+        let items = this.items;
+        if (segmentEl && segmentEl.disabled) {
+            items = this.allItems;
+        }
+        if (items.length > 0) {
+            const first = items[0];
+            return first === this.el;
+        }
+        return false;
+    }
+    isLast() {
+        const { segmentEl } = this;
+        let items = this.items;
+        if (segmentEl && segmentEl.disabled) {
+            items = this.allItems;
+        }
+        if (items.length > 0) {
+            const last = items[items.length - 1];
+            return last === this.el;
+        }
+        return false;
+    }
+    checkSlotContent() {
+        const slot = this.el.querySelector('[part="slot"]');
+        const children = slot ? slot.innerHTML.trim() : '';
+        this.hasSlotContent = children.length > 0;
+    }
+    render() {
+        const { checked, focused, segmentEl, label, isFocusable } = this;
+        const block = BEM.block('segment-item');
+        const buttonBem = block.element('button');
+        const indicatorBem = block.element('indicator');
+        const invalid = this.invalid || (segmentEl && segmentEl.invalid);
+        const disabled = this.disabled || (segmentEl && segmentEl.disabled);
+        const vertical = this.isVertical;
+        return (h(Host, { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('vertical').class(vertical)), block.modifier('disabled').class(disabled)), block.modifier('checked').class(checked)), block.modifier('invalid').class(invalid)), block.modifier('line').class(!this.isFirst() && !checked)), block.modifier('last').class(this.isLast() && !checked)) }, h("button", Object.assign({ role: "radio", "aria-checked": checked ? 'true' : 'false', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, buttonBem.class()), buttonBem.modifier('checked').class(checked)), buttonBem.modifier('invalid').class(invalid)), buttonBem.modifier('disabled').class(disabled)), buttonBem.modifier('focused').class(focused)), buttonBem.modifier('vertical').class(vertical)), "aria-labelledby": `bal-si-${this.id}-label`, type: 'button', tabIndex: isFocusable ? 0 : -1, part: "native", onBlur: ev => this.balBlur.emit(ev), disabled: disabled, ref: el => (this.nativeEl = el) }, this.inheritedAttributes), h("bal-icon", { name: "check", size: "small", class: Object.assign(Object.assign(Object.assign({}, buttonBem.element('icon').class()), buttonBem.element('icon').modifier('animated').class(checked)), buttonBem.element('icon').modifier('vertical').class(vertical)), color: disabled ? 'grey-dark' : invalid ? 'white' : 'primary' }), h("bal-stack", { space: "x-small", layout: 'horizontal' }, h("bal-content", { space: "none" }, h("bal-label", { htmlId: `bal-si-${this.id}-label` }, label), h("span", { part: "slot", class: Object.assign({}, buttonBem.element('slot').modifier('hidden').class(!this.hasSlotContent)) }, ' ', h("slot", { onSlotchange: this.onSlottedItemsChange }))))), h("div", { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, indicatorBem.class()), indicatorBem.modifier('animated').class()), indicatorBem.modifier('background').class()), indicatorBem.modifier('disabled').class(disabled)), indicatorBem.modifier('invalid').class(invalid)), indicatorBem.modifier('checked').class(checked)), indicatorBem.modifier('vertical').class(vertical)) })));
+    }
+    static get is() { return "bal-segment-item"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bal-segment-item.sass"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bal-segment-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "disabled": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the user cannot interact with the segment button."
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "invalid": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the segment is shown in red."
+                },
+                "attribute": "invalid",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "focused": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": "Sets focus state for key navigation"
+                        }],
+                    "text": ""
+                },
+                "attribute": "focused",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "checked": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": "Sets checked state for key navigation"
+                        }],
+                    "text": ""
+                },
+                "attribute": "checked",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label of the segment control"
+                },
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "value": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "SegmentValue",
+                    "resolved": "number | string",
+                    "references": {
+                        "SegmentValue": {
+                            "location": "import",
+                            "path": "../bal-segment.types",
+                            "id": "src/components/bal-segment/bal-segment.types.ts::SegmentValue"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The value of the segment button."
+                },
+                "attribute": "value",
+                "reflect": false,
+                "defaultValue": "'bal-si-' + this.id"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasSlotContent": {},
+            "isFocusable": {},
+            "isVertical": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "balBlur",
+                "name": "balBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the component was touched"
+                },
+                "complexType": {
+                    "original": "BalEvents.BalSegmentBlurDetail",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "BalEvents": {
+                            "location": "global",
+                            "id": "global::BalEvents"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": "Focuses the native <button> element\ninside of ion-segment-button."
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "valueChanged"
+            }];
+    }
+}

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

@@ -0,0 +1 @@
+:root{--bal-segment-background: var(--bal-color-grey-2);--bal-segment-background-invalid: var(--bal-color-danger-1);--bal-segment-item-focus-border: var(--bal-color-border-primary);--bal-segment-item-text-color: var(--bal-color-text-primary);--bal-segment-item-text-color-checked: var(--bal-color-text-primary);--bal-segment-item-text-color-checked-hovered: var(--bal-color-text-primary-hovered);--bal-segment-item-text-color-checked-pressed: var(--bal-color-text-primary-pressed);--bal-segment-item-text-color-invalid: var(--bal-color-text-danger);--bal-segment-item-text-color-invalid-hovered: var(--bal-color-text-danger-hovered);--bal-segment-item-text-color-invalid-pressed: var(--bal-color-text-danger-pressed);--bal-segment-item-text-color-disabled: var(--bal-color-text-grey);--bal-segment-item-text-color-disabled-checked: var(--bal-color-text-grey-dark);--bal-segment-item-divider-background: var(--bal-color-grey);--bal-segment-item-divider-background-invalid: var(--bal-color-danger-2);--bal-segment-item-indicator-background: var(--bal-color-purple-2);--bal-segment-item-indicator-background-invalid: var(--bal-color-danger-4);--bal-segment-item-indicator-background-disabled: var(--bal-color-grey-3)}.bal-segment{display:flex;background:var(--bal-segment-background);border-radius:var(--bal-radius-normal);gap:.125rem;gap:.125rem;padding:.25rem;width:fit-content}.bal-segment--invalid{background:var(--bal-segment-background-invalid)}.bal-segment--vertical{flex-direction:column;width:100%}.bal-segment--vertical .bal-segment-item__button{width:100%;flex:1}.bal-segment--vertical.bal-segment--scrollable{overflow:auto;max-height:240px}.bal-segment--expanded{width:100%;min-width:100%;justify-content:flex-start;align-items:center}.bal-segment--expanded .bal-segment-item,.bal-segment--expanded .bal-segment-item>button{flex:1;width:100%}.bal-segment--expanded .bal-segment-item .bal-content,.bal-segment--expanded .bal-segment-item>button .bal-content{justify-content:center;align-items:center}

package/dist/collection/components/bal-segment/bal-segment.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" />