@baloise/ds-core 20.0.0-next.4 → 20.0.0-next.6

package/dist/collection/components/carousel/carousel-item/carousel-item.js

@@ -0,0 +1,313 @@
+/*!
+ * (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, OneOf, Required, Type } from "../../../utils/index";
+import { CAROUSEL_ITEM_COLORS, CAROUSEL_VARIANTS } from "../carousel.interfaces";
+/**
+ * Carousel Item is a single slide or product tile inside a ds-carousel.
+ *
+ * @slot - Slide content (image variant) or label text (product variant).
+ */
+export class CarouselItem {
+    constructor() {
+        /**
+         * PUBLIC PROPERTY API
+         * ------------------------------------------------------
+         */
+        /**
+         * Background color for product tiles.
+         */
+        this.color = '';
+        /**
+         * Set by ds-carousel. The carousel variant this item is part of.
+         * @internal
+         */
+        this.carouselVariant = 'slide';
+        /**
+         * When `true`, the item renders in navigation mode: the consumer provides an `<a>` in the slot,
+         * which is stretched to cover the full tile and acts as the interactive element.
+         */
+        this.navigation = false;
+        /**
+         * Set by ds-carousel. 1-based position index.
+         * @internal
+         */
+        this.index = 0;
+        /**
+         * If `true`, this item is the currently active slide/tile. Set by the parent ds-carousel.
+         */
+        this.selected = false;
+        /**
+         * Image URL displayed in image-variant slides, or brand icon source for product tiles.
+         */
+        this.src = '';
+        /**
+         * PROPERTY VALIDATION
+         * ------------------------------------------------------
+         */
+        /**
+         * EVENT HANDLERS
+         * ------------------------------------------------------
+         */
+        this.handleClick = () => {
+            if (this.carouselVariant === 'tile') {
+                this.dsCarouselItemSelect.emit({ name: this.name });
+            }
+        };
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    /**
+     * RENDER
+     * ------------------------------------------------------
+     */
+    render() {
+        const isTile = this.carouselVariant === 'tile';
+        const hostClass = {
+            'is-slide': !isTile,
+            'is-tile': isTile,
+            'is-selected': this.selected,
+            'is-navigation': isTile && this.navigation,
+            [`is-${this.color}`]: !!this.color,
+        };
+        if (isTile) {
+            if (this.navigation) {
+                return (h(Host, { class: hostClass, role: "none" }, h("slot", null)));
+            }
+            return (h(Host, { class: hostClass, role: "button", tabIndex: 0, "aria-pressed": String(this.selected), onClick: this.handleClick }, h("slot", null)));
+        }
+        return (h(Host, { class: hostClass, "aria-label": `Slide ${this.index}` }, this.src ? h("img", { src: this.src, alt: "", draggable: false }) : h("slot", null)));
+    }
+    static get is() { return "ds-carousel-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["carousel-item.host.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["carousel-item.host.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "CarouselItemColor",
+                    "resolved": "\"\" | \"green\" | \"purple\" | \"red\" | \"yellow\"",
+                    "references": {
+                        "CarouselItemColor": {
+                            "location": "import",
+                            "path": "../carousel.interfaces",
+                            "id": "src/components/carousel/carousel.interfaces.ts::CarouselItemColor",
+                            "referenceLocation": "CarouselItemColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Background color for product tiles."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "color",
+                "defaultValue": "''"
+            },
+            "carouselVariant": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "CarouselVariant",
+                    "resolved": "\"slide\" | \"tile\"",
+                    "references": {
+                        "CarouselVariant": {
+                            "location": "import",
+                            "path": "../carousel.interfaces",
+                            "id": "src/components/carousel/carousel.interfaces.ts::CarouselVariant",
+                            "referenceLocation": "CarouselVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": "Set by ds-carousel. The carousel variant this item is part of."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "carousel-variant",
+                "defaultValue": "'slide'"
+            },
+            "navigation": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When `true`, the item renders in navigation mode: the consumer provides an `<a>` in the slot,\nwhich is stretched to cover the full tile and acts as the interactive element."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "navigation",
+                "defaultValue": "false"
+            },
+            "index": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": "Set by ds-carousel. 1-based position index."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "index",
+                "defaultValue": "0"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Unique identifier for this item, matched by the parent ds-carousel `value` prop."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "name"
+            },
+            "selected": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, this item is the currently active slide/tile. Set by the parent ds-carousel."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "selected",
+                "defaultValue": "false"
+            },
+            "src": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Image URL displayed in image-variant slides, or brand icon source for product tiles."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "src",
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dsCarouselItemSelect",
+                "name": "dsCarouselItemSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the user clicks this item (product variant)."
+                },
+                "complexType": {
+                    "original": "{ name: string }",
+                    "resolved": "{ name: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}
+__decorate([
+    Logger('carousel-item'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function]),
+    __metadata("design:returntype", void 0)
+], CarouselItem.prototype, "createLogger", null);
+__decorate([
+    OneOf(CAROUSEL_ITEM_COLORS),
+    __metadata("design:type", String)
+], CarouselItem.prototype, "color", void 0);
+__decorate([
+    OneOf(CAROUSEL_VARIANTS),
+    __metadata("design:type", String)
+], CarouselItem.prototype, "carouselVariant", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], CarouselItem.prototype, "navigation", void 0);
+__decorate([
+    Type('number'),
+    __metadata("design:type", Number)
+], CarouselItem.prototype, "index", void 0);
+__decorate([
+    Required(),
+    Type('string'),
+    __metadata("design:type", String)
+], CarouselItem.prototype, "name", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], CarouselItem.prototype, "selected", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", String)
+], CarouselItem.prototype, "src", void 0);

package/dist/collection/components/carousel/carousel.interfaces.js

@@ -0,0 +1,6 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+export const CAROUSEL_VARIANTS = ['slide', 'tile'];
+export const CAROUSEL_CONTROLS = ['dots', 'large', 'none'];
+export const CAROUSEL_ITEM_COLORS = ['', 'purple', 'green', 'red', 'yellow'];

package/dist/collection/components/carousel/test/carousel.a11y.play.js

@@ -0,0 +1,34 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { test } from "../../../../../../playwright/src/index";
+const ITEMS = `
+  <ds-carousel-item name="s1"><div style="height:150px;background:#4a5568">Slide 1</div></ds-carousel-item>
+  <ds-carousel-item name="s2"><div style="height:150px;background:#2d3748">Slide 2</div></ds-carousel-item>
+  <ds-carousel-item name="s3"><div style="height:150px;background:#1a202c">Slide 3</div></ds-carousel-item>
+`;
+const PRODUCT_ITEMS = `
+  <ds-carousel-item name="p1">Item 1</ds-carousel-item>
+  <ds-carousel-item name="p2">Item 2</ds-carousel-item>
+  <ds-carousel-item name="p3">Item 3</ds-carousel-item>
+`;
+test.describe('a11y — image variant', () => {
+    test('basic with dots', async ({ page, a11y }) => {
+        await page.mount(`<ds-carousel label="Image gallery">${ITEMS}</ds-carousel>`);
+        await a11y('ds-carousel');
+    });
+    test('no controls', async ({ page, a11y }) => {
+        await page.mount(`<ds-carousel label="Image gallery" controls="none">${ITEMS}</ds-carousel>`);
+        await a11y('ds-carousel');
+    });
+    test('preset value', async ({ page, a11y }) => {
+        await page.mount(`<ds-carousel label="Image gallery" value="s2">${ITEMS}</ds-carousel>`);
+        await a11y('ds-carousel');
+    });
+});
+test.describe('a11y — tile variant', () => {
+    test('basic', async ({ page, a11y }) => {
+        await page.mount(`<ds-carousel variant="tile" controls="large" label="Products">${PRODUCT_ITEMS}</ds-carousel>`);
+        await a11y('ds-carousel');
+    });
+});

package/dist/collection/components/carousel/test/carousel.component.play.js

@@ -0,0 +1,57 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { DsCarousel, expect, test } from "../../../../../../playwright/src/index";
+const ITEMS = `
+  <ds-carousel-item name="s1"><div style="height:150px">Slide 1</div></ds-carousel-item>
+  <ds-carousel-item name="s2"><div style="height:150px">Slide 2</div></ds-carousel-item>
+  <ds-carousel-item name="s3"><div style="height:150px">Slide 3</div></ds-carousel-item>
+`;
+test.describe('image variant — initial state', () => {
+    test('selects the first item by default', async ({ page }) => {
+        await page.mount(`<ds-carousel>${ITEMS}</ds-carousel>`);
+        const carousel = new DsCarousel(page.locator('ds-carousel'));
+        await carousel.assertItemSelected('s1');
+        await carousel.assertItemNotSelected('s2');
+    });
+    test('respects a preset value prop', async ({ page }) => {
+        await page.mount(`<ds-carousel value="s2">${ITEMS}</ds-carousel>`);
+        const carousel = new DsCarousel(page.locator('ds-carousel'));
+        await carousel.assertItemSelected('s2');
+        await carousel.assertItemNotSelected('s1');
+    });
+});
+test.describe('image variant — dsChange event', () => {
+    test('emits dsChange when dot is clicked', async ({ page }) => {
+        await page.mount(`<ds-carousel style="width:300px">${ITEMS}</ds-carousel>`);
+        const carousel = new DsCarousel(page.locator('ds-carousel'));
+        const spy = await carousel.el.spyOnEvent('dsChange');
+        await carousel.clickDot(1);
+        expect(spy).toHaveReceivedEventTimes(1);
+    });
+});
+test.describe('tile variant — initial state', () => {
+    test('selects the first item by default', async ({ page }) => {
+        await page.mount(`
+      <ds-carousel variant="tile" controls="large">
+        <ds-carousel-item name="p1">Item 1</ds-carousel-item>
+        <ds-carousel-item name="p2">Item 2</ds-carousel-item>
+      </ds-carousel>
+    `);
+        const carousel = new DsCarousel(page.locator('ds-carousel'));
+        await carousel.assertItemSelected('p1');
+    });
+    test('emits dsChange on item click', async ({ page }) => {
+        await page.mount(`
+      <ds-carousel variant="tile" controls="large">
+        <ds-carousel-item name="p1">Item 1</ds-carousel-item>
+        <ds-carousel-item name="p2">Item 2</ds-carousel-item>
+      </ds-carousel>
+    `);
+        const carousel = new DsCarousel(page.locator('ds-carousel'));
+        const spy = await carousel.el.spyOnEvent('dsChange');
+        await carousel.item('p2').click();
+        expect(spy).toHaveReceivedEventTimes(1);
+        expect(spy).toHaveReceivedEventDetail({ value: 'p2' });
+    });
+});

package/dist/collection/components/carousel/test/carousel.visual.play.js

@@ -0,0 +1,24 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { expectScreenshot, screenshot, test } from "../../../../../../playwright/src/index";
+const TAG = 'carousel';
+const VARIANTS = [
+    'slides-with-dots',
+    'slides-with-large-controls',
+    'slides-no-controls',
+    'product',
+    'brand-icons',
+];
+const image = screenshot(TAG);
+test.describe('host', () => {
+    test.beforeEach('Setup', async ({ page }) => {
+        await page.setupVisualTest(`/components/${TAG}/test/${TAG}.visual.html`);
+    });
+    VARIANTS.forEach(variant => {
+        test(variant, async ({ page }) => {
+            const el = page.getByTestId(variant);
+            await expectScreenshot(el, image(variant));
+        });
+    });
+});

package/dist/collection/components/checkbox/checkbox-group/checkbox-group.host.css

@@ -1 +1 @@
-:host{--_checkbox-group-label-color: var(--checkbox-group-label-color, var(--mod-checkbox-group-label-color, var(--ds-input-label-color-base)));--_checkbox-group-label-family: var(--checkbox-group-label-family, var(--mod-checkbox-group-label-family, var(--ds-input-label-family)));--_checkbox-group-label-weight: var(--checkbox-group-label-weight, var(--mod-checkbox-group-label-weight, var(--ds-input-label-weight)));--_checkbox-group-label-line-height: var(--checkbox-group-label-line-height, var(--mod-checkbox-group-label-line-height, var(--ds-input-label-line-height)));--_checkbox-group-label-size: var(--checkbox-group-label-size, var(--mod-checkbox-group-label-size, var(--ds-input-label-size-device)));--_checkbox-group-description-color: var(--checkbox-group-description-color, var(--mod-checkbox-group-description-color, var(--ds-input-description-color-base)));--_checkbox-group-description-family: var(--checkbox-group-description-family, var(--mod-checkbox-group-description-family, var(--ds-input-description-family)));--_checkbox-group-description-weight: var(--checkbox-group-description-weight, var(--mod-checkbox-group-description-weight, var(--ds-input-description-weight)));--_checkbox-group-description-line-height: var(--checkbox-group-description-line-height, var(--mod-checkbox-group-description-line-height, var(--ds-input-description-line-height)));--_checkbox-group-description-size: var(--checkbox-group-description-size, var(--mod-checkbox-group-description-size, var(--ds-input-description-size-device)))}:host{display:block}:host #inner{position:relative;display:grid;gap:.25rem}:host :where(fieldset){margin:0;padding:0;border:none}:host :where(legend){padding:0;float:left;width:100%}:host legend{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;box-sizing:content-box;hyphens:auto;overflow-wrap:break-word;text-wrap:balance;min-width:0;color:var(--_checkbox-group-label-color);font-family:var(--_checkbox-group-label-family);font-weight:var(--_checkbox-group-label-weight);font-size:var(--_checkbox-group-label-size);line-height:var(--_checkbox-group-label-line-height)}:host #description{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:flex;box-sizing:content-box;hyphens:auto;overflow-wrap:break-word;text-wrap:balance;min-width:0;gap:.25rem;min-height:1.125rem;color:var(--_checkbox-group-description-color);font-family:var(--_checkbox-group-description-family);font-weight:var(--_checkbox-group-description-weight);font-size:var(--_checkbox-group-description-size);line-height:var(--_checkbox-group-description-line-height)}:host #description ds-icon{--icon-color: var(--_checkbox-group-description-color)}:host #container{display:grid;gap:.25rem}@media screen and (min-width: 769px){:host #container{display:flex;gap:1rem}}:host(.is-vertical) #container{display:grid;gap:.25rem}:host(.is-danger){--mod-checkbox-group-description-color: var(--ds-input-description-color-danger)}:host(.is-disabled),:host(.is-disabled) #label,:host(.is-disabled) #description,:host(.is-disabled) #input{pointer-events:none;cursor:default}:host(.is-disabled){--mod-checkbox-group-label-color: var(--ds-input-label-color-disabled);--mod-checkbox-group-description-color: var(--ds-input-description-color-disabled)}:host(.is-tile) #container{flex-wrap:wrap}
+:host{--_form-label-color: var(--form-label-color, var(--mod-form-label-color, var(--ds-form-label-color-base)));--_form-label-family: var(--form-label-family, var(--mod-form-label-family, var(--ds-form-label-family)));--_form-label-weight: var(--form-label-weight, var(--mod-form-label-weight, var(--ds-form-label-weight)));--_form-label-line-height: var(--form-label-line-height, var(--mod-form-label-line-height, var(--ds-form-label-line-height)));--_form-label-size: var(--form-label-size, var(--mod-form-label-size, var(--ds-form-label-size-device)));--_form-description-color: var(--form-description-color, var(--mod-form-description-color, var(--ds-form-description-color-base)));--_form-description-family: var(--form-description-family, var(--mod-form-description-family, var(--ds-form-description-family)));--_form-description-weight: var(--form-description-weight, var(--mod-form-description-weight, var(--ds-form-description-weight)));--_form-description-line-height: var(--form-description-line-height, var(--mod-form-description-line-height, var(--ds-form-description-line-height)));--_form-description-size: var(--form-description-size, var(--mod-form-description-size, var(--ds-form-description-size-device)))}:host{display:block}:host #inner{position:relative;display:grid;gap:.25rem}:host :where(fieldset){margin:0;padding:0;border:none}:host :where(legend){padding:0;float:left;width:100%}:host legend{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;box-sizing:content-box;hyphens:auto;overflow-wrap:break-word;text-wrap:balance;min-width:0;color:var(--_form-label-color);font-family:var(--_form-label-family);font-weight:var(--_form-label-weight);font-size:var(--_form-label-size);line-height:var(--_form-label-line-height)}:host #description{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:flex;box-sizing:content-box;hyphens:auto;overflow-wrap:break-word;text-wrap:balance;min-width:0;gap:.25rem;min-height:1.125rem;color:var(--_form-description-color);font-family:var(--_form-description-family);font-weight:var(--_form-description-weight);font-size:var(--_form-description-size);line-height:var(--_form-description-line-height)}:host #description ds-icon{--icon-color: var(--_form-description-color)}:host #container{display:grid;gap:.25rem}@media screen and (min-width: 769px){:host #container{display:flex;gap:1rem}}:host(.is-vertical) #container{display:grid;gap:.25rem}:host(.is-danger){--mod-checkbox-group-description-color: var(--ds-form-description-color-danger)}:host(.is-disabled),:host(.is-disabled) #label,:host(.is-disabled) #description,:host(.is-disabled) #input{pointer-events:none;cursor:default}:host(.is-disabled){--mod-checkbox-group-label-color: var(--ds-form-label-color-disabled);--mod-checkbox-group-description-color: var(--ds-form-description-color-disabled)}:host(.is-tile) #container{flex-wrap:wrap}

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

@@ -5,7 +5,7 @@ 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, ValidateOneOf, ValidateType, setupValidation, } from "../../../utils/index";
+import { Logger, hasTagName, isDescendant, stopEventBubbling, areArraysEqual, hasValue, OneOf, Type, } from "../../../utils/index";
 import { INPUT_COLORS } from "../../input/input.interfaces";
 import { CHECKBOX_LABEL_POSITIONS, CHECKBOX_TILE_COLORS, CHECKBOX_GROUP_COLUMNS, } from "../checkbox.interfaces";
 /**
@@ -137,7 +137,6 @@ export class CheckboxGroup {
      * ------------------------------------------------------
      */
     connectedCallback() {
-        setupValidation(this);
         this.valueChanged();
         this.passDownAttributes();
         this.internals.setFormValue(this.internalValue.join(','));
@@ -218,13 +217,13 @@ export class CheckboxGroup {
     passDownAttributes() {
         this.getCheckboxes().forEach(checkbox => {
             if (this.control) {
-                if (this.disabled !== undefined) {
+                if (hasValue(this.disabled)) {
                     checkbox.disabled = this.disabled;
                 }
-                if (this.readonly !== undefined) {
+                if (hasValue(this.readonly)) {
                     checkbox.readonly = this.readonly;
                 }
-                if (this.invalid !== undefined) {
+                if (hasValue(this.invalid)) {
                     checkbox.invalid = this.invalid;
                 }
             }
@@ -255,10 +254,10 @@ export class CheckboxGroup {
      * ------------------------------------------------------
      */
     render() {
-        return (h(Field, { key: 'fe220621711b38ab346f3cc911d7dfc92d74e766', role: "fieldset", disabled: this.disabled, color: this.color, invalid: this.invalid, loading: this.loading, label: this.label, description: this.description, invalidText: this.invalidText, required: this.required, language: this.language, cssClasses: {
+        return (h(Field, { key: 'ebd36e47675b46855d72d0c66f78e56fd7fea7e0', role: "fieldset", disabled: this.disabled, color: this.color, invalid: this.invalid, 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: '16d82971af59c1757253aa61116a6ccfb9406eef' })));
+            } }, h("slot", { key: '7fa32f49d9e613e6eb946cf5b0b6eb1f7fecd1c8' })));
     }
     static get is() { return "ds-checkbox-group"; }
     static get encapsulation() { return "shadow"; }
@@ -566,7 +565,7 @@ export class CheckboxGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "name",
                 "defaultValue": "this.inputId"
             },
@@ -850,75 +849,75 @@ __decorate([
     __metadata("design:returntype", void 0)
 ], CheckboxGroup.prototype, "createLogger", null);
 __decorate([
-    ValidateOneOf(...INPUT_COLORS),
+    OneOf(INPUT_COLORS),
     __metadata("design:type", String)
 ], CheckboxGroup.prototype, "color", void 0);
 __decorate([
-    ValidateOneOf(...CHECKBOX_GROUP_COLUMNS),
+    OneOf(CHECKBOX_GROUP_COLUMNS),
     __metadata("design:type", Number)
 ], CheckboxGroup.prototype, "cols", void 0);
 __decorate([
-    ValidateOneOf(...CHECKBOX_GROUP_COLUMNS),
+    OneOf(CHECKBOX_GROUP_COLUMNS),
     __metadata("design:type", Number)
 ], CheckboxGroup.prototype, "colsMobile", void 0);
 __decorate([
-    ValidateOneOf(...CHECKBOX_GROUP_COLUMNS),
+    OneOf(CHECKBOX_GROUP_COLUMNS),
     __metadata("design:type", Number)
 ], CheckboxGroup.prototype, "colsTablet", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], CheckboxGroup.prototype, "control", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], CheckboxGroup.prototype, "description", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], CheckboxGroup.prototype, "disabled", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], CheckboxGroup.prototype, "invalid", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], CheckboxGroup.prototype, "invalidText", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], CheckboxGroup.prototype, "label", void 0);
 __decorate([
-    ValidateOneOf(...CHECKBOX_LABEL_POSITIONS),
+    OneOf(CHECKBOX_LABEL_POSITIONS),
     __metadata("design:type", String)
 ], CheckboxGroup.prototype, "labelPosition", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], CheckboxGroup.prototype, "loading", void 0);
 __decorate([
-    ValidateType('string'),
+    Type('string'),
     __metadata("design:type", String)
 ], CheckboxGroup.prototype, "name", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], CheckboxGroup.prototype, "readonly", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], CheckboxGroup.prototype, "required", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], CheckboxGroup.prototype, "tile", void 0);
 __decorate([
-    ValidateOneOf(...CHECKBOX_TILE_COLORS),
+    OneOf(CHECKBOX_TILE_COLORS),
     __metadata("design:type", String)
 ], CheckboxGroup.prototype, "tileColor", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], CheckboxGroup.prototype, "vertical", void 0);
 __decorate([