@baloise/ds-core 20.0.0-next.10 → 20.0.0-next.11

package/dist/collection/components/forms/checkbox/checkbox.js

@@ -0,0 +1,727 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { __decorate, __metadata } from "tslib";
+import { h, Host } from "@stencil/core";
+import { Logger, inheritAttributes, hasValue, OneOf, Required, setFormValue, Type, } from "../../../utils/index";
+import { CHECKBOX_LABEL_POSITIONS, CHECKBOX_TILE_COLORS, CHECKBOX_GROUP_COLUMNS, } from "./checkbox.interfaces";
+/**
+ * Checkbox renders a checkbox form control for selecting multiple options from a group with optional label and help text.
+ *
+ * @slot - The checkbox label content.
+ * @slot hint - A `ds-hint` shown alongside the label. In tile layout it is positioned in the top right corner.
+ * @part label - The label wrapper element.
+ * @part input - The native HTML input element.
+ * @part slot - The content slot wrapper.
+ * @part hint - The hint slot wrapper.
+ */
+export class Checkbox {
+    constructor() {
+        this.inputId = `ds-cb-${checkboxIds++}`;
+        this.inheritAttributes = {};
+        this.focused = false;
+        /**
+         * PUBLIC PROPERTY API
+         * ─────────────────────────────────────────────────────
+         */
+        /**
+         * The name of the control, which is submitted with the form data.
+         */
+        this.name = this.inputId;
+        /**
+         * Label of the checkbox item.
+         */
+        this.label = '';
+        /**
+         * Defines the position of the label, either before or after the checkbox input. Default is after.
+         */
+        this.labelPosition = 'right';
+        /**
+         * A DOMString representing the value of the checkbox. This is not displayed on the
+         * client-side, but on the server this is the value given to the data
+         * submitted with the checkbox's name.
+         */
+        this.value = 'on';
+        /**
+         * If `true`, the checkbox is selected.
+         */
+        this.checked = false;
+        this.initialValue = false;
+        /**
+         * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
+         */
+        this.disabled = false;
+        /**
+         * If `true` the element can not mutated, meaning the user can not edit the control.
+         */
+        this.readonly = false;
+        /**
+         * If `true`, the user must fill in a value before submitting a form.
+         */
+        this.required = false;
+        /**
+         * If `true`, in Angular reactive forms the control will not be set invalid
+         */
+        this.autoInvalidOff = false;
+        /**
+         * If `true` the component gets a invalid style.
+         */
+        this.invalid = false;
+        /**
+         * Defines the layout of the input
+         */
+        this.tile = false;
+        /**
+         * If `true` and `tile` is set, the checkbox box is visually hidden. The tile remains fully clickable and keyboard-accessible.
+         */
+        this.hideTrigger = false;
+        /**
+         * @internal
+         */
+        this.cols = 1;
+        /**
+         * @internal
+         */
+        this.colsTablet = 1;
+        /**
+         * @internal
+         */
+        this.colsMobile = 1;
+        /**
+         * EVENT HANDLERS
+         * ─────────────────────────────────────────────────────
+         */
+        this.handleChange = (ev) => {
+            this.checked = ev.target.checked;
+            this.dsChange.emit(this.checked);
+            setFormValue(this.internals, this.checked ? this.value : null);
+        };
+        this.handleClick = (ev) => {
+            var _a, _b, _c;
+            if (this.disabled || this.readonly) {
+                return;
+            }
+            const element = ev.target;
+            if (element.href) {
+                return;
+            }
+            // A click on the native input itself already toggles it and fires `change`, which
+            // `handleChange` handles. Only intervene for clicks on slotted content. `ev.target` is
+            // retarget to the host across the shadow boundary, so check the composed path instead.
+            if (ev.composedPath()[0] === this.nativeInput) {
+                return;
+            }
+            // Prevent the native `<label>` default action, which fails to forward the click to the
+            // input when the slotted content contains its own nested `<label>` element (e.g. `ds-label`).
+            ev.preventDefault();
+            // Clicking the hint should open/close its panel without toggling the checkbox.
+            if ((_b = (_a = ev.target).closest) === null || _b === void 0 ? void 0 : _b.call(_a, '[slot="hint"]')) {
+                return;
+            }
+            (_c = this.nativeInput) === null || _c === void 0 ? void 0 : _c.focus();
+            this.checked = !this.checked;
+            this.dsChange.emit(this.checked);
+            setFormValue(this.internals, this.checked ? this.value : null);
+        };
+        this.handleFocus = (ev) => {
+            if (this.disabled || this.readonly)
+                return;
+            this.focused = true;
+            this.dsFocus.emit(ev);
+        };
+        this.handleBlur = (ev) => {
+            if (this.disabled || this.readonly)
+                return;
+            this.focused = false;
+            this.dsBlur.emit(ev);
+        };
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    /**
+     * LIFECYCLE
+     * ─────────────────────────────────────────────────────
+     */
+    connectedCallback() {
+        this.initialValue = this.checked;
+        setFormValue(this.internals, this.checked ? this.value : null);
+    }
+    componentWillLoad() {
+        setFormValue(this.internals, this.checked ? this.value : null);
+        this.inheritAttributes = inheritAttributes(this.el, ['aria-label', 'tabindex', 'title']);
+    }
+    /**
+     * PUBLIC LISTENERS
+     * ─────────────────────────────────────────────────────
+     */
+    listenToReset(ev) {
+        const formElement = ev.target;
+        if (formElement === null || formElement === void 0 ? void 0 : formElement.contains(this.el)) {
+            this.checked = this.initialValue;
+        }
+    }
+    /**
+     * PRIVATE METHODS
+     * ─────────────────────────────────────────────────────
+     */
+    hasHint() {
+        return this.el.querySelector('[slot="hint"]') !== null;
+    }
+    /**
+     * RENDER
+     * ─────────────────────────────────────────────────────
+     */
+    render() {
+        return (h(Host, { key: '6e0bd92a3acc0364daab05942f040271d77f3ca5', "aria-disabled": this.disabled ? 'true' : null, "aria-checked": `${this.checked}`, "aria-invalid": this.invalid ? 'true' : null, class: {
+                'is-disabled': this.disabled || this.readonly,
+                'is-invalid': this.invalid,
+                'is-checked': this.checked,
+                'is-tile': this.tile,
+                [`has-tile-${this.tileColor}`]: this.tile && hasValue(this.tileColor),
+                'hide-trigger': this.tile && this.hideTrigger,
+                'has-label-left': this.labelPosition === 'left',
+                'has-label-top': this.labelPosition === 'top',
+                [`has-cols-${this.cols}`]: this.tile && this.cols > 1,
+                [`has-cols-${this.colsTablet}-tablet`]: this.tile && this.colsTablet > 1,
+                [`has-cols-${this.colsMobile}-mobile`]: this.tile && this.colsMobile > 1,
+            }, onClick: this.handleClick }, h("label", { key: '7498403fe53342c52d8f81bd860ba70379f017a7', id: "label", part: "label" }, h("input", Object.assign({ key: 'a4c135eea49e823d9c7b60a605f0306d0ca5e11e', type: "checkbox", part: "input", id: this.inputId, name: this.name, value: this.value, checked: this.checked, disabled: this.disabled || this.readonly, required: this.required, "aria-invalid": this.invalid ? 'true' : null, onChange: ev => this.handleChange(ev), onFocus: this.handleFocus, onBlur: this.handleBlur, ref: inputEl => (this.nativeInput = inputEl) }, this.inheritAttributes)), h("div", { key: '284ea952e032ae3f408e48318eb0f38d2a15c5ad', id: "slot", part: "slot" }, h("slot", { key: '06b7fef64aa19747c1093f2d4044cfdaa492f61d' }, this.label)), this.hasHint() && (h("div", { key: 'efc62239bc1114e2efe7d666651db2e6e2300126', id: "hint", part: "hint" }, h("slot", { key: '819aba03a1502a97b6d43ab5b7d5a7c98dc5dc07', name: "hint" }))))));
+    }
+    static get is() { return "ds-checkbox"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["checkbox.host.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["checkbox.host.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The name of the control, which is submitted with the form data."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "name",
+                "defaultValue": "this.inputId"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label of the checkbox item."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "labelPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "CheckboxLabelPosition",
+                    "resolved": "\"left\" | \"right\" | \"top\"",
+                    "references": {
+                        "CheckboxLabelPosition": {
+                            "location": "import",
+                            "path": "./checkbox.interfaces",
+                            "id": "src/components/forms/checkbox/checkbox.interfaces.ts::CheckboxLabelPosition",
+                            "referenceLocation": "CheckboxLabelPosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the position of the label, either before or after the checkbox input. Default is after."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-position",
+                "defaultValue": "'right'"
+            },
+            "value": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A DOMString representing the value of the checkbox. This is not displayed on the\nclient-side, but on the server this is the value given to the data\nsubmitted with the checkbox's name."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "'on'"
+            },
+            "checked": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the checkbox is selected."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "checked",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true` the element can not mutated, meaning the user can not edit the control."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "readonly",
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the user must fill in a value before submitting a form."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "autoInvalidOff": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, in Angular reactive forms the control will not be set invalid"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "auto-invalid-off",
+                "defaultValue": "false"
+            },
+            "invalid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true` the component gets a invalid style."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "invalid",
+                "defaultValue": "false"
+            },
+            "tileColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "CheckboxTileColor",
+                    "resolved": "\"green\" | \"purple\" | \"red\" | \"yellow\" | undefined",
+                    "references": {
+                        "CheckboxTileColor": {
+                            "location": "import",
+                            "path": "./checkbox.interfaces",
+                            "id": "src/components/forms/checkbox/checkbox.interfaces.ts::CheckboxTileColor",
+                            "referenceLocation": "CheckboxTileColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the color of the tile checkbox."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tile-color"
+            },
+            "tile": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the layout of the input"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tile",
+                "defaultValue": "false"
+            },
+            "hideTrigger": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true` and `tile` is set, the checkbox box is visually hidden. The tile remains fully clickable and keyboard-accessible."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-trigger",
+                "defaultValue": "false"
+            },
+            "cols": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "CheckboxGroupColumns",
+                    "resolved": "1 | 2 | 3 | 4",
+                    "references": {
+                        "CheckboxGroupColumns": {
+                            "location": "import",
+                            "path": "./checkbox.interfaces",
+                            "id": "src/components/forms/checkbox/checkbox.interfaces.ts::CheckboxGroupColumns",
+                            "referenceLocation": "CheckboxGroupColumns"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "cols",
+                "defaultValue": "1"
+            },
+            "colsTablet": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "CheckboxGroupColumns",
+                    "resolved": "1 | 2 | 3 | 4",
+                    "references": {
+                        "CheckboxGroupColumns": {
+                            "location": "import",
+                            "path": "./checkbox.interfaces",
+                            "id": "src/components/forms/checkbox/checkbox.interfaces.ts::CheckboxGroupColumns",
+                            "referenceLocation": "CheckboxGroupColumns"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "cols-tablet",
+                "defaultValue": "1"
+            },
+            "colsMobile": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "CheckboxGroupColumns",
+                    "resolved": "1 | 2 | 3 | 4",
+                    "references": {
+                        "CheckboxGroupColumns": {
+                            "location": "import",
+                            "path": "./checkbox.interfaces",
+                            "id": "src/components/forms/checkbox/checkbox.interfaces.ts::CheckboxGroupColumns",
+                            "referenceLocation": "CheckboxGroupColumns"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "cols-mobile",
+                "defaultValue": "1"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "focused": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dsFocus",
+                "name": "dsFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the toggle has focus."
+                },
+                "complexType": {
+                    "original": "CheckboxFocusDetail",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "CheckboxFocusDetail": {
+                            "location": "import",
+                            "path": "./checkbox.interfaces",
+                            "id": "src/components/forms/checkbox/checkbox.interfaces.ts::CheckboxFocusDetail",
+                            "referenceLocation": "CheckboxFocusDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsBlur",
+                "name": "dsBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the toggle loses focus."
+                },
+                "complexType": {
+                    "original": "CheckboxBlurDetail",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "CheckboxBlurDetail": {
+                            "location": "import",
+                            "path": "./checkbox.interfaces",
+                            "id": "src/components/forms/checkbox/checkbox.interfaces.ts::CheckboxBlurDetail",
+                            "referenceLocation": "CheckboxBlurDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsChange",
+                "name": "dsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the value property has changed."
+                },
+                "complexType": {
+                    "original": "CheckboxChangeDetail",
+                    "resolved": "boolean",
+                    "references": {
+                        "CheckboxChangeDetail": {
+                            "location": "import",
+                            "path": "./checkbox.interfaces",
+                            "id": "src/components/forms/checkbox/checkbox.interfaces.ts::CheckboxChangeDetail",
+                            "referenceLocation": "CheckboxChangeDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "reset",
+                "method": "listenToReset",
+                "target": "document",
+                "capture": true,
+                "passive": false
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}
+__decorate([
+    Logger('checkbox'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function]),
+    __metadata("design:returntype", void 0)
+], Checkbox.prototype, "createLogger", null);
+__decorate([
+    Type('string'),
+    __metadata("design:type", String)
+], Checkbox.prototype, "name", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", String)
+], Checkbox.prototype, "label", void 0);
+__decorate([
+    Required(),
+    OneOf(CHECKBOX_LABEL_POSITIONS),
+    __metadata("design:type", String)
+], Checkbox.prototype, "labelPosition", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", Object)
+], Checkbox.prototype, "value", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Checkbox.prototype, "checked", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Checkbox.prototype, "disabled", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Checkbox.prototype, "readonly", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Checkbox.prototype, "required", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Checkbox.prototype, "autoInvalidOff", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Checkbox.prototype, "invalid", void 0);
+__decorate([
+    OneOf(CHECKBOX_TILE_COLORS),
+    __metadata("design:type", String)
+], Checkbox.prototype, "tileColor", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Checkbox.prototype, "tile", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Checkbox.prototype, "hideTrigger", void 0);
+__decorate([
+    OneOf(CHECKBOX_GROUP_COLUMNS),
+    __metadata("design:type", Number)
+], Checkbox.prototype, "cols", void 0);
+__decorate([
+    OneOf(CHECKBOX_GROUP_COLUMNS),
+    __metadata("design:type", Number)
+], Checkbox.prototype, "colsTablet", void 0);
+__decorate([
+    OneOf(CHECKBOX_GROUP_COLUMNS),
+    __metadata("design:type", Number)
+], Checkbox.prototype, "colsMobile", void 0);
+let checkboxIds = 0;