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

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

@@ -0,0 +1,1019 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { __decorate, __metadata } from "tslib";
+import { h, } from "@stencil/core";
+import { Field } from "../../input/field.util";
+import { defaultConfig, ListenToConfig } from "../../../../global/index";
+import { Logger, hasTagName, isDescendant, stopEventBubbling, areArraysEqual, hasValue, OneOf, shallowReady, Type, watchInvalidTextSlot, setFormValue, } from "../../../../utils/index";
+import { INPUT_COLORS } from "../../input/input.interfaces";
+import { CHECKBOX_LABEL_POSITIONS, CHECKBOX_TILE_COLORS, CHECKBOX_GROUP_COLUMNS, } from "../checkbox.interfaces";
+/**
+ * Checkbox Group groups multiple checkboxes so multiple options can be selected within a form field.
+ *
+ * @slot - The checkbox items to display inside the group.
+ * @slot invalid-text - Overrides the `invalidText` prop with custom markup, shown instead of the description when `invalid` is `true`.
+ */
+export class CheckboxGroup {
+    constructor() {
+        this.inputId = `ds-cg-${checkboxGroupIds++}`;
+        this.language = defaultConfig.language;
+        this.region = defaultConfig.region;
+        this.internalValue = [];
+        this.hasInvalidTextSlotContent = false;
+        /**
+         * PUBLIC PROPERTY API
+         * ─────────────────────────────────────────────────────
+         */
+        /**
+         * If `true`, disables the automatic `invalid`/`invalidText` behavior that the `@baloise/ds-angular` integration
+         * applies when the bound `NgControl` is touched and invalid. Only affects the Angular integration; it is a no-op
+         * in other framework integrations.
+         */
+        this.autoInvalidOff = false;
+        /**
+         * Defines the color of the input. The default value is `primary`.
+         */
+        this.color = 'primary';
+        /**
+         * Defines the column size like the grid.
+         */
+        this.cols = 1;
+        /**
+         * Defines the column size for mobile and bigger like the grid.
+         */
+        this.colsMobile = 1;
+        /**
+         * Defines the column size for tablet and bigger like the grid.
+         */
+        this.colsTablet = 1;
+        /**
+         * If `true` it acts as the main form control
+         */
+        this.control = false;
+        /**
+         * The description of the input, which is displayed below the input field.
+         */
+        this.description = '';
+        /**
+         * 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 component gets a invalid style.
+         */
+        this.invalid = false;
+        /**
+         * The text to display when the input is in an invalid state.
+         */
+        this.invalidText = '';
+        /**
+         * The label of the input, which is displayed above the input field.
+         */
+        this.label = '';
+        /**
+         * Defines the position of the label, either before or after the checkbox input. Default is after.
+         */
+        this.labelPosition = 'right';
+        /**
+         * Shows a loading indicator at the end of the input and replaces the end slot content.
+         */
+        this.loading = false;
+        /**
+         * The name of the checkboxes in the group. Child checkboxes will inherit the name.
+         */
+        this.name = this.inputId;
+        /**
+         * 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 = true;
+        /**
+         * Defines the layout of the input
+         */
+        this.tile = false;
+        /**
+         * If `true` and `tile` is set, the checkbox box is visually hidden on every checkbox in the group.
+         */
+        this.hideTrigger = false;
+        /**
+         * The value of the control.
+         */
+        this.value = [];
+        /**
+         * Displays the checkboxes vertically
+         */
+        this.vertical = false;
+        /**
+         * EVENT HANDLERS
+         * ─────────────────────────────────────────────────────
+         */
+        this.handleValueChange = async () => {
+            if (this.control) {
+                const isChecked = (checkbox) => {
+                    for (let index = 0; index < this.internalValue.length; index++) {
+                        const valueItem = this.internalValue[index];
+                        if (valueItem !== undefined && valueItem.toString() === checkbox.value.toString()) {
+                            return true;
+                        }
+                    }
+                    return false;
+                };
+                const checkboxes = this.getCheckboxes();
+                // A consumer that assigns `.value` as a JS property right after inserting the group (e.g. Angular's
+                // `ControlValueAccessor.writeValue()`, called as soon as the host connects) can race a child
+                // `ds-checkbox`'s own initialization: setting `.checked` on one that hasn't finished loading yet is
+                // silently lost once that checkbox's own `componentWillLoad` applies its default. Awaiting each child's
+                // readiness first (a no-op once already loaded, e.g. on a later user-driven value change) closes that gap.
+                await Promise.all(checkboxes.map(checkbox => shallowReady(checkbox)));
+                checkboxes.forEach((checkbox) => {
+                    checkbox.checked = isChecked(checkbox);
+                });
+            }
+        };
+        this.handleSlotChange = () => {
+            this.passDownAttributes();
+            this.handleValueChange();
+        };
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    valueChanged() {
+        if (this.control) {
+            const newFormattedValue = this.formatValueToArray(this.value);
+            if (!areArraysEqual(newFormattedValue, this.internalValue)) {
+                this.internalValue = newFormattedValue;
+                this.handleValueChange();
+            }
+        }
+    }
+    /**
+     * LIFECYCLE
+     * ─────────────────────────────────────────────────────
+     */
+    connectedCallback() {
+        this.valueChanged();
+        this.disconnectInvalidTextSlotWatcher = watchInvalidTextSlot(this.el, hasContent => {
+            this.hasInvalidTextSlotContent = hasContent;
+        });
+        this.passDownAttributes();
+        setFormValue(this.internals, this.internalValue.join(','));
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.disconnectInvalidTextSlotWatcher) === null || _a === void 0 ? void 0 : _a.call(this);
+    }
+    componentWillLoad() {
+        // Re-derives `internalValue` from the current `value` prop (rather than re-running `handleValueChange()`
+        // against whatever `internalValue` already holds): a consumer that assigns `.value` as a JS property
+        // right after inserting the element (e.g. Angular's `ControlValueAccessor.writeValue()`, called as soon
+        // as the host connects) can land the assignment in the brief window between `connectedCallback()`'s own
+        // `valueChanged()` call above and this component's `@Watch('value')` becoming live, so that assignment's
+        // resulting checked-state sync would otherwise be silently lost. `valueChanged()` always reads `this.value`
+        // directly rather than relying on the watch having fired, so it self-heals regardless of that race.
+        this.valueChanged();
+    }
+    componentWillUpdate() {
+        this.passDownAttributes();
+    }
+    componentDidLoad() {
+        this.handleSlotChange();
+    }
+    /**
+     * PUBLIC LISTENERS
+     * ─────────────────────────────────────────────────────
+     */
+    listenToDsBlur(ev) {
+        const { target } = ev;
+        if (target && isDescendant(this.el, target) && hasTagName(target, 'ds-checkbox')) {
+            stopEventBubbling(ev);
+            // Re-emit as the group's own `dsBlur`, mirroring `listenToDsChange`/`updateValues` re-emitting `dsChange`
+            // above: consumers (and the `@baloise/ds-angular` `ControlValueAccessor`, which listens for `dsBlur`
+            // directly on this host to mark the bound `NgControl` as touched) only ever interact with the group, not
+            // its individual checkboxes, and the child event was just stopped from bubbling any further than this.
+            this.dsBlur.emit(ev.detail);
+        }
+    }
+    listenToDsChange(ev) {
+        if (this.control) {
+            if (isDescendant(this.el, ev.target)) {
+                stopEventBubbling(ev);
+                this.updateValues();
+            }
+        }
+    }
+    listenToDsFocus(ev) {
+        const { target } = ev;
+        if (target && isDescendant(this.el, target) && hasTagName(target, 'ds-checkbox')) {
+            stopEventBubbling(ev);
+        }
+    }
+    listenToReset(ev) {
+        const formElement = ev.target;
+        if (formElement === null || formElement === void 0 ? void 0 : formElement.contains(this.el)) {
+            if (this.control) {
+                this.internalValue = [];
+            }
+            this.handleValueChange();
+        }
+    }
+    /**
+     * PUBLIC METHODS
+     * ─────────────────────────────────────────────────────
+     */
+    /**
+     * @internal define config for the component
+     */
+    async configChanged(state) {
+        this.language = state.language;
+        this.region = state.region;
+    }
+    /**
+     * PRIVATE METHODS
+     * ─────────────────────────────────────────────────────
+     */
+    formatValueToArray(value) {
+        if (Array.isArray(value)) {
+            return value;
+        }
+        else if (value !== undefined && value !== null && value !== '') {
+            if (typeof value === 'string') {
+                return value.split(',').map(item => item.trim());
+            }
+            else {
+                return [value];
+            }
+        }
+        else {
+            return [];
+        }
+    }
+    getCheckboxes() {
+        return Array.from(this.el.querySelectorAll('ds-checkbox'));
+    }
+    passDownAttributes() {
+        const isInvalid = this.invalid || this.hasInvalidTextSlotContent;
+        this.getCheckboxes().forEach(checkbox => {
+            var _a;
+            if (this.control) {
+                if (hasValue(this.disabled)) {
+                    checkbox.disabled = this.disabled;
+                }
+                if (hasValue(this.readonly)) {
+                    checkbox.readonly = this.readonly;
+                }
+                checkbox.invalid = isInvalid;
+            }
+            checkbox.name = this.name;
+            checkbox.labelPosition = this.labelPosition;
+            checkbox.tile = this.tile;
+            checkbox.hideTrigger = this.hideTrigger;
+            checkbox.tileColor = (_a = checkbox.getAttribute('tile-color')) !== null && _a !== void 0 ? _a : this.tileColor;
+            checkbox.cols = this.cols;
+            checkbox.colsTablet = this.colsTablet;
+            checkbox.colsMobile = this.colsMobile;
+        });
+    }
+    updateValues() {
+        const newValue = [];
+        this.getCheckboxes().forEach(cb => {
+            if (cb.checked) {
+                newValue.push(cb.value);
+            }
+        });
+        if (!areArraysEqual(this.internalValue, newValue)) {
+            this.internalValue = [...newValue];
+            this.dsChange.emit(this.internalValue);
+            setFormValue(this.internals, this.internalValue.join(','));
+        }
+    }
+    /**
+     * RENDER
+     * ─────────────────────────────────────────────────────
+     */
+    render() {
+        return (h(Field, { key: '73e666bbfbab0252f67b1537d0abf61e926876f0', role: "fieldset", disabled: this.disabled, color: this.color, invalid: this.invalid || this.hasInvalidTextSlotContent, loading: this.loading, label: this.label, description: this.description, invalidText: this.invalidText, required: this.required, language: this.language, cssClasses: {
+                'is-vertical': this.vertical,
+                'is-tile': this.tile,
+            } }, h("slot", { key: '4e3cbeb31602a5b1144cbb8400bb4f4002b621ae', onSlotchange: this.handleSlotChange })));
+    }
+    static get is() { return "ds-checkbox-group"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["checkbox-group.host.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["checkbox-group.host.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "autoInvalidOff": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, disables the automatic `invalid`/`invalidText` behavior that the `@baloise/ds-angular` integration\napplies when the bound `NgControl` is touched and invalid. Only affects the Angular integration; it is a no-op\nin other framework integrations."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "auto-invalid-off",
+                "defaultValue": "false"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "InputColor",
+                    "resolved": "\"danger\" | \"primary\" | \"success\" | \"warning\"",
+                    "references": {
+                        "InputColor": {
+                            "location": "import",
+                            "path": "../../input/input.interfaces",
+                            "id": "src/components/forms/input/input.interfaces.ts::InputColor",
+                            "referenceLocation": "InputColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the color of the input. The default value is `primary`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "color",
+                "defaultValue": "'primary'"
+            },
+            "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": [],
+                    "text": "Defines the column size like the grid."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "cols",
+                "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": [],
+                    "text": "Defines the column size for mobile and bigger like the grid."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "cols-mobile",
+                "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": [],
+                    "text": "Defines the column size for tablet and bigger like the grid."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "cols-tablet",
+                "defaultValue": "1"
+            },
+            "control": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true` it acts as the main form control"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "control",
+                "defaultValue": "false"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The description of the input, which is displayed below the input field."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description",
+                "defaultValue": "''"
+            },
+            "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": true,
+                "attribute": "disabled",
+                "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": true,
+                "attribute": "invalid",
+                "defaultValue": "false"
+            },
+            "invalidText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The text to display when the input is in an invalid state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "invalid-text",
+                "defaultValue": "''"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The label of the input, which is displayed above the input field."
+                },
+                "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'"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shows a loading indicator at the end of the input and replaces the end slot content."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "loading",
+                "defaultValue": "false"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The name of the checkboxes in the group. Child checkboxes will inherit the name."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "name",
+                "defaultValue": "this.inputId"
+            },
+            "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": true,
+                "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": true,
+                "attribute": "required",
+                "defaultValue": "true"
+            },
+            "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 on every checkbox in the group."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-trigger",
+                "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"
+            },
+            "value": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "any[]",
+                    "resolved": "any[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The value of the control."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "vertical": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Displays the checkboxes vertically"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "vertical",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "language": {},
+            "region": {},
+            "internalValue": {},
+            "hasInvalidTextSlotContent": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dsBlur",
+                "name": "dsBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a keyboard input occurred."
+                },
+                "complexType": {
+                    "original": "CheckboxGroupBlurDetail",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "CheckboxGroupBlurDetail": {
+                            "location": "import",
+                            "path": "../checkbox.interfaces",
+                            "id": "src/components/forms/checkbox/checkbox.interfaces.ts::CheckboxGroupBlurDetail",
+                            "referenceLocation": "CheckboxGroupBlurDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsChange",
+                "name": "dsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the input value has changed."
+                },
+                "complexType": {
+                    "original": "CheckboxGroupChangeDetail",
+                    "resolved": "any[]",
+                    "references": {
+                        "CheckboxGroupChangeDetail": {
+                            "location": "import",
+                            "path": "../checkbox.interfaces",
+                            "id": "src/components/forms/checkbox/checkbox.interfaces.ts::CheckboxGroupChangeDetail",
+                            "referenceLocation": "CheckboxGroupChangeDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "dsFocus",
+                "name": "dsFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the input has focus."
+                },
+                "complexType": {
+                    "original": "CheckboxGroupFocusDetail",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "CheckboxGroupFocusDetail": {
+                            "location": "import",
+                            "path": "../checkbox.interfaces",
+                            "id": "src/components/forms/checkbox/checkbox.interfaces.ts::CheckboxGroupFocusDetail",
+                            "referenceLocation": "CheckboxGroupFocusDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "configChanged": {
+                "complexType": {
+                    "signature": "(state: DsConfigState) => Promise<void>",
+                    "parameters": [{
+                            "name": "state",
+                            "type": "DsConfigState",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "DsConfigState": {
+                            "location": "import",
+                            "path": "@global",
+                            "id": "src/global/index.ts::DsConfigState",
+                            "referenceLocation": "DsConfigState"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": "define config for the component"
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "valueChanged"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "dsBlur",
+                "method": "listenToDsBlur",
+                "target": "document",
+                "capture": true,
+                "passive": false
+            }, {
+                "name": "dsChange",
+                "method": "listenToDsChange",
+                "target": "document",
+                "capture": true,
+                "passive": false
+            }, {
+                "name": "dsFocus",
+                "method": "listenToDsFocus",
+                "target": "document",
+                "capture": true,
+                "passive": false
+            }, {
+                "name": "reset",
+                "method": "listenToReset",
+                "target": "document",
+                "capture": true,
+                "passive": false
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}
+__decorate([
+    Logger('checkbox-group'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function]),
+    __metadata("design:returntype", void 0)
+], CheckboxGroup.prototype, "createLogger", null);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], CheckboxGroup.prototype, "autoInvalidOff", void 0);
+__decorate([
+    OneOf(INPUT_COLORS),
+    __metadata("design:type", String)
+], CheckboxGroup.prototype, "color", void 0);
+__decorate([
+    OneOf(CHECKBOX_GROUP_COLUMNS),
+    __metadata("design:type", Number)
+], CheckboxGroup.prototype, "cols", void 0);
+__decorate([
+    OneOf(CHECKBOX_GROUP_COLUMNS),
+    __metadata("design:type", Number)
+], CheckboxGroup.prototype, "colsMobile", void 0);
+__decorate([
+    OneOf(CHECKBOX_GROUP_COLUMNS),
+    __metadata("design:type", Number)
+], CheckboxGroup.prototype, "colsTablet", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], CheckboxGroup.prototype, "control", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", String)
+], CheckboxGroup.prototype, "description", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], CheckboxGroup.prototype, "disabled", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], CheckboxGroup.prototype, "invalid", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", String)
+], CheckboxGroup.prototype, "invalidText", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", String)
+], CheckboxGroup.prototype, "label", void 0);
+__decorate([
+    OneOf(CHECKBOX_LABEL_POSITIONS),
+    __metadata("design:type", String)
+], CheckboxGroup.prototype, "labelPosition", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], CheckboxGroup.prototype, "loading", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", String)
+], CheckboxGroup.prototype, "name", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], CheckboxGroup.prototype, "readonly", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], CheckboxGroup.prototype, "required", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], CheckboxGroup.prototype, "tile", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], CheckboxGroup.prototype, "hideTrigger", void 0);
+__decorate([
+    OneOf(CHECKBOX_TILE_COLORS),
+    __metadata("design:type", String)
+], CheckboxGroup.prototype, "tileColor", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], CheckboxGroup.prototype, "vertical", void 0);
+__decorate([
+    ListenToConfig(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", Promise)
+], CheckboxGroup.prototype, "configChanged", null);
+let checkboxGroupIds = 0;