@deepfuture/dui-components 0.0.1

package/calendar/calendar.js

@@ -0,0 +1,428 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, html, LitElement } from "lit";
+import { property } from "lit/decorators.js";
+import { base } from "@deepfuture/dui-core/base";
+import { customEvent } from "@deepfuture/dui-core/event";
+export const valueChangeEvent = customEvent("value-change", { bubbles: true, composed: true });
+/** Structural styles only — layout CSS. */
+const styles = css `
+  :host {
+    display: inline-block;
+  }
+
+  [part="root"] {
+    display: flex;
+    flex-direction: column;
+  }
+
+  [part="header"] {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  [part="heading"] {
+    font-weight: 600;
+    text-align: center;
+    flex: 1;
+  }
+
+  [part="prev"],
+  [part="next"] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    border: none;
+    background: none;
+    padding: 0;
+    font: inherit;
+    color: inherit;
+  }
+
+  [part="grid"] {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+  }
+
+  [part="weekday"] {
+    text-align: center;
+    font-weight: 600;
+  }
+
+  [part="day"] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    border: none;
+    background: none;
+    padding: 0;
+    font: inherit;
+    color: inherit;
+  }
+
+  [part="day"]:disabled {
+    cursor: not-allowed;
+  }
+`;
+/**
+ * `<dui-calendar>` — A date picker calendar grid.
+ *
+ * @csspart root - The outer container.
+ * @csspart header - Month navigation header.
+ * @csspart heading - The month/year heading text.
+ * @csspart prev - Previous month button.
+ * @csspart next - Next month button.
+ * @csspart grid - The day grid container.
+ * @csspart weekday - Weekday column header.
+ * @csspart day - Individual day button.
+ * @fires value-change - Fired when a date is selected. Detail: { value: string }
+ */
+export class DuiCalendar extends LitElement {
+    static { this.tagName = "dui-calendar"; }
+    static { this.styles = [base, styles]; }
+    #value_accessor_storage = undefined;
+    get value() { return this.#value_accessor_storage; }
+    set value(value) { this.#value_accessor_storage = value; }
+    #defaultValue_accessor_storage = undefined;
+    get defaultValue() { return this.#defaultValue_accessor_storage; }
+    set defaultValue(value) { this.#defaultValue_accessor_storage = value; }
+    #min_accessor_storage = undefined;
+    get min() { return this.#min_accessor_storage; }
+    set min(value) { this.#min_accessor_storage = value; }
+    #max_accessor_storage = undefined;
+    get max() { return this.#max_accessor_storage; }
+    set max(value) { this.#max_accessor_storage = value; }
+    #locale_accessor_storage = "en-US";
+    get locale() { return this.#locale_accessor_storage; }
+    set locale(value) { this.#locale_accessor_storage = value; }
+    #disabled_accessor_storage = false;
+    get disabled() { return this.#disabled_accessor_storage; }
+    set disabled(value) { this.#disabled_accessor_storage = value; }
+    #readOnly_accessor_storage = false;
+    get readOnly() { return this.#readOnly_accessor_storage; }
+    set readOnly(value) { this.#readOnly_accessor_storage = value; }
+    #internalValue_accessor_storage = undefined;
+    get #internalValue() { return this.#internalValue_accessor_storage; }
+    set #internalValue(value) { this.#internalValue_accessor_storage = value; }
+    #focusedDate_accessor_storage = new Date();
+    get #focusedDate() { return this.#focusedDate_accessor_storage; }
+    set #focusedDate(value) { this.#focusedDate_accessor_storage = value; }
+    #viewMonth_accessor_storage = new Date().getMonth();
+    get #viewMonth() { return this.#viewMonth_accessor_storage; }
+    set #viewMonth(value) { this.#viewMonth_accessor_storage = value; }
+    #viewYear_accessor_storage = new Date().getFullYear();
+    get #viewYear() { return this.#viewYear_accessor_storage; }
+    set #viewYear(value) { this.#viewYear_accessor_storage = value; }
+    get #selectedValue() {
+        return this.value ?? this.#internalValue;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.value === undefined && this.defaultValue !== undefined) {
+            this.#internalValue = this.defaultValue;
+        }
+        const selected = this.#selectedValue;
+        if (selected) {
+            const d = new Date(selected + "T00:00:00");
+            this.#viewMonth = d.getMonth();
+            this.#viewYear = d.getFullYear();
+            this.#focusedDate = d;
+        }
+    }
+    #formatISO(date) {
+        const y = date.getFullYear();
+        const m = String(date.getMonth() + 1).padStart(2, "0");
+        const d = String(date.getDate()).padStart(2, "0");
+        return `${y}-${m}-${d}`;
+    }
+    #isSameDay(a, b) {
+        return (a.getFullYear() === b.getFullYear() &&
+            a.getMonth() === b.getMonth() &&
+            a.getDate() === b.getDate());
+    }
+    #isDateDisabled(date) {
+        if (this.disabled)
+            return true;
+        const iso = this.#formatISO(date);
+        if (this.min && iso < this.min)
+            return true;
+        if (this.max && iso > this.max)
+            return true;
+        return false;
+    }
+    #getDaysInMonth(year, month) {
+        return new Date(year, month + 1, 0).getDate();
+    }
+    #getFirstDayOfWeek() {
+        // Use Intl to determine first day of week for locale
+        // Fallback to Sunday (0) for most locales
+        try {
+            const locale = new Intl.Locale(this.locale);
+            // @ts-ignore — weekInfo is a newer API
+            const weekInfo = locale.weekInfo ?? locale.getWeekInfo?.();
+            return weekInfo?.firstDay === 7 ? 0 : (weekInfo?.firstDay ?? 0);
+        }
+        catch {
+            return 0;
+        }
+    }
+    #buildGrid() {
+        const year = this.#viewYear;
+        const month = this.#viewMonth;
+        const daysInMonth = this.#getDaysInMonth(year, month);
+        const firstDay = new Date(year, month, 1).getDay();
+        const firstDayOfWeek = this.#getFirstDayOfWeek();
+        const today = new Date();
+        const selectedIso = this.#selectedValue;
+        let startOffset = firstDay - firstDayOfWeek;
+        if (startOffset < 0)
+            startOffset += 7;
+        const cells = [];
+        // Days from previous month
+        const prevMonth = month === 0 ? 11 : month - 1;
+        const prevYear = month === 0 ? year - 1 : year;
+        const daysInPrevMonth = this.#getDaysInMonth(prevYear, prevMonth);
+        for (let i = startOffset - 1; i >= 0; i--) {
+            const day = daysInPrevMonth - i;
+            const date = new Date(prevYear, prevMonth, day);
+            cells.push({
+                date,
+                day,
+                iso: this.#formatISO(date),
+                isToday: this.#isSameDay(date, today),
+                isSelected: this.#formatISO(date) === selectedIso,
+                isOutsideMonth: true,
+                isDisabled: this.#isDateDisabled(date),
+            });
+        }
+        // Days in current month
+        for (let day = 1; day <= daysInMonth; day++) {
+            const date = new Date(year, month, day);
+            cells.push({
+                date,
+                day,
+                iso: this.#formatISO(date),
+                isToday: this.#isSameDay(date, today),
+                isSelected: this.#formatISO(date) === selectedIso,
+                isOutsideMonth: false,
+                isDisabled: this.#isDateDisabled(date),
+            });
+        }
+        // Fill remaining cells to make 6 rows
+        const remaining = 42 - cells.length;
+        const nextMonth = month === 11 ? 0 : month + 1;
+        const nextYear = month === 11 ? year + 1 : year;
+        for (let day = 1; day <= remaining; day++) {
+            const date = new Date(nextYear, nextMonth, day);
+            cells.push({
+                date,
+                day,
+                iso: this.#formatISO(date),
+                isToday: this.#isSameDay(date, today),
+                isSelected: this.#formatISO(date) === selectedIso,
+                isOutsideMonth: true,
+                isDisabled: this.#isDateDisabled(date),
+            });
+        }
+        // Split into rows of 7
+        const rows = [];
+        for (let i = 0; i < cells.length; i += 7) {
+            rows.push(cells.slice(i, i + 7));
+        }
+        return rows;
+    }
+    #getWeekdayNames() {
+        const formatter = new Intl.DateTimeFormat(this.locale, { weekday: "short" });
+        const firstDayOfWeek = this.#getFirstDayOfWeek();
+        const names = [];
+        for (let i = 0; i < 7; i++) {
+            // Jan 4 2015 is a Sunday
+            const date = new Date(2015, 0, 4 + firstDayOfWeek + i);
+            names.push(formatter.format(date));
+        }
+        return names;
+    }
+    #getMonthYearHeading() {
+        const date = new Date(this.#viewYear, this.#viewMonth, 1);
+        return new Intl.DateTimeFormat(this.locale, {
+            month: "long",
+            year: "numeric",
+        }).format(date);
+    }
+    #selectDate(iso) {
+        if (this.disabled || this.readOnly)
+            return;
+        if (this.value === undefined) {
+            this.#internalValue = iso;
+        }
+        this.dispatchEvent(valueChangeEvent({ value: iso }));
+    }
+    #navigateMonth(delta) {
+        let newMonth = this.#viewMonth + delta;
+        let newYear = this.#viewYear;
+        if (newMonth < 0) {
+            newMonth = 11;
+            newYear--;
+        }
+        else if (newMonth > 11) {
+            newMonth = 0;
+            newYear++;
+        }
+        this.#viewMonth = newMonth;
+        this.#viewYear = newYear;
+        this.#focusedDate = new Date(newYear, newMonth, 1);
+    }
+    #onDayClick = (e) => {
+        const button = e.currentTarget;
+        const iso = button.dataset.date;
+        if (iso && !button.disabled) {
+            this.#selectDate(iso);
+        }
+    };
+    #onKeyDown = (e) => {
+        const focused = new Date(this.#focusedDate);
+        let handled = true;
+        switch (e.key) {
+            case "ArrowLeft":
+                focused.setDate(focused.getDate() - 1);
+                break;
+            case "ArrowRight":
+                focused.setDate(focused.getDate() + 1);
+                break;
+            case "ArrowUp":
+                focused.setDate(focused.getDate() - 7);
+                break;
+            case "ArrowDown":
+                focused.setDate(focused.getDate() + 7);
+                break;
+            case "PageUp":
+                if (e.shiftKey) {
+                    focused.setFullYear(focused.getFullYear() - 1);
+                }
+                else {
+                    focused.setMonth(focused.getMonth() - 1);
+                }
+                break;
+            case "PageDown":
+                if (e.shiftKey) {
+                    focused.setFullYear(focused.getFullYear() + 1);
+                }
+                else {
+                    focused.setMonth(focused.getMonth() + 1);
+                }
+                break;
+            case "Home": {
+                focused.setDate(1);
+                break;
+            }
+            case "End": {
+                const daysInMonth = this.#getDaysInMonth(focused.getFullYear(), focused.getMonth());
+                focused.setDate(daysInMonth);
+                break;
+            }
+            case "Enter":
+            case " ":
+                e.preventDefault();
+                if (!this.#isDateDisabled(focused)) {
+                    this.#selectDate(this.#formatISO(focused));
+                }
+                return;
+            default:
+                handled = false;
+        }
+        if (handled) {
+            e.preventDefault();
+            this.#focusedDate = focused;
+            this.#viewMonth = focused.getMonth();
+            this.#viewYear = focused.getFullYear();
+            // Focus the correct day button after render
+            this.updateComplete.then(() => {
+                const iso = this.#formatISO(focused);
+                const btn = this.shadowRoot?.querySelector(`[data-date="${iso}"]`);
+                btn?.focus();
+            });
+        }
+    };
+    #onPrevClick = () => {
+        this.#navigateMonth(-1);
+    };
+    #onNextClick = () => {
+        this.#navigateMonth(1);
+    };
+    render() {
+        const grid = this.#buildGrid();
+        const weekdays = this.#getWeekdayNames();
+        const heading = this.#getMonthYearHeading();
+        const focusedIso = this.#formatISO(this.#focusedDate);
+        return html `
+      <div part="root" role="grid" @keydown="${this.#onKeyDown}">
+        <div part="header">
+          <button
+            part="prev"
+            type="button"
+            aria-label="Previous month"
+            @click="${this.#onPrevClick}"
+          >
+            <slot name="prev">&lsaquo;</slot>
+          </button>
+          <div part="heading" aria-live="polite">${heading}</div>
+          <button
+            part="next"
+            type="button"
+            aria-label="Next month"
+            @click="${this.#onNextClick}"
+          >
+            <slot name="next">&rsaquo;</slot>
+          </button>
+        </div>
+
+        <div part="grid" role="grid">
+          ${weekdays.map((name) => html `<div part="weekday" role="columnheader">${name}</div>`)}
+          ${grid.flat().map((cell) => html `
+            <button
+              part="day"
+              type="button"
+              role="gridcell"
+              data-date="${cell.iso}"
+              tabindex="${cell.iso === focusedIso ? 0 : -1}"
+              ?data-selected="${cell.isSelected}"
+              ?data-today="${cell.isToday}"
+              ?data-outside-month="${cell.isOutsideMonth}"
+              ?disabled="${cell.isDisabled}"
+              aria-selected="${cell.isSelected ? "true" : "false"}"
+              @click="${this.#onDayClick}"
+            >${cell.day}</button>
+          `)}
+        </div>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property()
+], DuiCalendar.prototype, "value", null);
+__decorate([
+    property({ attribute: "default-value" })
+], DuiCalendar.prototype, "defaultValue", null);
+__decorate([
+    property()
+], DuiCalendar.prototype, "min", null);
+__decorate([
+    property()
+], DuiCalendar.prototype, "max", null);
+__decorate([
+    property()
+], DuiCalendar.prototype, "locale", null);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DuiCalendar.prototype, "disabled", null);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: "read-only" })
+], DuiCalendar.prototype, "readOnly", null);

package/calendar/index.d.ts

@@ -0,0 +1 @@
+export { DuiCalendar, valueChangeEvent } from "./calendar.js";

package/calendar/index.js

@@ -0,0 +1 @@
+export { DuiCalendar, valueChangeEvent } from "./calendar.js";

package/calendar/register.d.ts

@@ -0,0 +1 @@
+export {};

package/calendar/register.js

@@ -0,0 +1,4 @@
+import { DuiCalendar } from "./index.js";
+if (!customElements.get(DuiCalendar.tagName)) {
+    customElements.define(DuiCalendar.tagName, DuiCalendar);
+}

package/center/center.d.ts

@@ -0,0 +1,14 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/center */
+import { LitElement, type TemplateResult } from "lit";
+/**
+ * `<dui-center>` — Centers content horizontally and vertically
+ * within its container query dimensions.
+ *
+ * @slot - Content to center.
+ * @csspart root - The centering container element.
+ */
+export declare class DuiCenter extends LitElement {
+    static tagName: "dui-center";
+    static styles: import("lit").CSSResult[];
+    render(): TemplateResult;
+}

package/center/center.js

@@ -0,0 +1,37 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/center */
+import { css, html, LitElement } from "lit";
+import { base } from "@deepfuture/dui-core/base";
+/** Structural styles only — layout CSS. */
+const styles = css `
+  :host {
+    display: block;
+    min-height: 100cqh;
+    width: 100cqw;
+  }
+
+  [part="root"] {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100cqh;
+    width: 100cqw;
+  }
+`;
+/**
+ * `<dui-center>` — Centers content horizontally and vertically
+ * within its container query dimensions.
+ *
+ * @slot - Content to center.
+ * @csspart root - The centering container element.
+ */
+export class DuiCenter extends LitElement {
+    static { this.tagName = "dui-center"; }
+    static { this.styles = [base, styles]; }
+    render() {
+        return html `
+      <div part="root">
+        <slot></slot>
+      </div>
+    `;
+    }
+}

package/center/index.d.ts

@@ -0,0 +1 @@
+export { DuiCenter } from "./center.js";

package/center/index.js

@@ -0,0 +1 @@
+export { DuiCenter } from "./center.js";

package/center/register.d.ts

@@ -0,0 +1 @@
+export {};

package/center/register.js

@@ -0,0 +1,4 @@
+import { DuiCenter } from "./index.js";
+if (!customElements.get(DuiCenter.tagName)) {
+    customElements.define(DuiCenter.tagName, DuiCenter);
+}

package/checkbox/checkbox-group-context.d.ts

@@ -0,0 +1,11 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/checkbox */
+export type CheckboxGroupContext = {
+    readonly checkedValues: readonly string[];
+    readonly allValues: readonly string[];
+    readonly disabled: boolean;
+    readonly toggle: (value: string) => void;
+    readonly toggleAll: (checked: boolean) => void;
+};
+export declare const checkboxGroupContext: {
+    __context__: CheckboxGroupContext;
+};

package/checkbox/checkbox-group-context.js

@@ -0,0 +1,3 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/checkbox */
+import { createContext } from "@lit/context";
+export const checkboxGroupContext = createContext(Symbol("dui-checkbox-group"));

package/checkbox/checkbox-group.d.ts

@@ -0,0 +1,34 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/checkbox */
+import { LitElement, type TemplateResult } from "lit";
+export declare const valueChangeEvent: (detail: string[]) => CustomEvent<string[]>;
+/**
+ * `<dui-checkbox-group>` — Groups multiple checkboxes with shared state.
+ *
+ * Manages a shared array of checked values. Supports controlled and
+ * uncontrolled usage, and an `allValues` prop for parent checkbox
+ * (select-all) patterns.
+ *
+ * @slot - Default slot for `<dui-checkbox>` children.
+ * @csspart root - The group container element.
+ *
+ * @fires value-change - Fired when the set of checked values changes. Detail: string[]
+ */
+export declare class DuiCheckboxGroup extends LitElement {
+    #private;
+    static tagName: "dui-checkbox-group";
+    static styles: import("lit").CSSResult[];
+    /** Checked values (controlled). */
+    accessor value: string[] | undefined;
+    /** Initial checked values for uncontrolled usage. */
+    accessor defaultValue: string[];
+    /**
+     * All possible checkbox values in the group.
+     * Required when using a parent (select-all) checkbox.
+     */
+    accessor allValues: string[];
+    /** Whether all checkboxes in the group are disabled. */
+    accessor disabled: boolean;
+    connectedCallback(): void;
+    willUpdate(): void;
+    render(): TemplateResult;
+}

package/checkbox/checkbox-group.js

@@ -0,0 +1,128 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/checkbox */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, html, LitElement } from "lit";
+import { property } from "lit/decorators.js";
+import { base } from "@deepfuture/dui-core/base";
+import { customEvent } from "@deepfuture/dui-core/event";
+export const valueChangeEvent = customEvent("value-change", {
+    bubbles: true,
+    composed: true,
+});
+/** Structural styles only — layout and behavioral CSS. */
+const styles = css `
+  :host {
+    display: block;
+  }
+
+  [part="root"] {
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+  }
+`;
+/**
+ * `<dui-checkbox-group>` — Groups multiple checkboxes with shared state.
+ *
+ * Manages a shared array of checked values. Supports controlled and
+ * uncontrolled usage, and an `allValues` prop for parent checkbox
+ * (select-all) patterns.
+ *
+ * @slot - Default slot for `<dui-checkbox>` children.
+ * @csspart root - The group container element.
+ *
+ * @fires value-change - Fired when the set of checked values changes. Detail: string[]
+ */
+export class DuiCheckboxGroup extends LitElement {
+    static { this.tagName = "dui-checkbox-group"; }
+    static { this.styles = [base, styles]; }
+    #value_accessor_storage = undefined;
+    /** Checked values (controlled). */
+    get value() { return this.#value_accessor_storage; }
+    set value(value) { this.#value_accessor_storage = value; }
+    #defaultValue_accessor_storage = [];
+    /** Initial checked values for uncontrolled usage. */
+    get defaultValue() { return this.#defaultValue_accessor_storage; }
+    set defaultValue(value) { this.#defaultValue_accessor_storage = value; }
+    #allValues_accessor_storage = [];
+    /**
+     * All possible checkbox values in the group.
+     * Required when using a parent (select-all) checkbox.
+     */
+    get allValues() { return this.#allValues_accessor_storage; }
+    set allValues(value) { this.#allValues_accessor_storage = value; }
+    #disabled_accessor_storage = false;
+    /** Whether all checkboxes in the group are disabled. */
+    get disabled() { return this.#disabled_accessor_storage; }
+    set disabled(value) { this.#disabled_accessor_storage = value; }
+    #internalValues_accessor_storage = [];
+    get #internalValues() { return this.#internalValues_accessor_storage; }
+    set #internalValues(value) { this.#internalValues_accessor_storage = value; }
+    #getCheckedValues = () => this.value ?? this.#internalValues;
+    #toggle = (val) => {
+        const current = this.#getCheckedValues();
+        const next = current.includes(val)
+            ? current.filter((v) => v !== val)
+            : [...current, val];
+        if (this.value === undefined) {
+            this.#internalValues = next;
+        }
+        this.dispatchEvent(valueChangeEvent(next));
+    };
+    #toggleAll = (checked) => {
+        const next = checked ? [...this.allValues] : [];
+        if (this.value === undefined) {
+            this.#internalValues = next;
+        }
+        this.dispatchEvent(valueChangeEvent(next));
+    };
+    #ctx_accessor_storage = this.#buildContext();
+    get #ctx() { return this.#ctx_accessor_storage; }
+    set #ctx(value) { this.#ctx_accessor_storage = value; }
+    #buildContext() {
+        return {
+            checkedValues: this.#getCheckedValues(),
+            allValues: this.allValues,
+            disabled: this.disabled,
+            toggle: this.#toggle,
+            toggleAll: this.#toggleAll,
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.value === undefined && this.defaultValue.length > 0) {
+            this.#internalValues = [...this.defaultValue];
+        }
+        this.#ctx = this.#buildContext();
+    }
+    willUpdate() {
+        this.#ctx = this.#buildContext();
+    }
+    render() {
+        return html `
+      <div
+        part="root"
+        role="group"
+        ?data-disabled="${this.disabled}"
+      >
+        <slot></slot>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ attribute: false })
+], DuiCheckboxGroup.prototype, "value", null);
+__decorate([
+    property({ attribute: false })
+], DuiCheckboxGroup.prototype, "defaultValue", null);
+__decorate([
+    property({ attribute: false })
+], DuiCheckboxGroup.prototype, "allValues", null);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DuiCheckboxGroup.prototype, "disabled", null);