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

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

@@ -1,1019 +0,0 @@
-/*!
- * (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, } 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();
-        this.internals.setFormValue(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);
-            this.internals.setFormValue(this.internalValue.join(','));
-        }
-    }
-    /**
-     * RENDER
-     * ─────────────────────────────────────────────────────
-     */
-    render() {
-        return (h(Field, { key: 'f37b6a540ca8612b689c1b3e2bb12d887db31cdf', 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: 'c26aacb9d4bf3bd8ed283877c190bbde40ed7b26', 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/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/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/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/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/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/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/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/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/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;