@ardium-ui/ui 5.0.0-alpha.101 → 5.0.0-alpha.103

package/fesm2022/ardium-ui-ui.mjs

@@ -2,10 +2,10 @@ import 'first-last';
 import { Overlay, ScrollStrategyOptions, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
 import { TemplatePortal, ComponentPortal } from '@angular/cdk/portal';
 import * as i0 from '@angular/core';
-import { signal, computed, InjectionToken, Directive, Input, HostBinding, input, output, ViewChildren, viewChild, contentChild, Component, ViewEncapsulation, ChangeDetectionStrategy, Inject, inject, ViewContainerRef, TemplateRef, forwardRef, HostListener, NgModule, effect, viewChildren, Pipe, model, ElementRef, ChangeDetectorRef, ContentChildren, Renderer2, linkedSignal, untracked, contentChildren, Injectable, Injector } from '@angular/core';
+import { signal, computed, InjectionToken, Directive, Input, HostBinding, input, output, ViewChildren, viewChild, contentChild, Component, ViewEncapsulation, ChangeDetectionStrategy, Inject, inject, ViewContainerRef, TemplateRef, forwardRef, HostListener, NgModule, effect, viewChildren, Pipe, model, ElementRef, ChangeDetectorRef, ContentChildren, Renderer2, linkedSignal, untracked, contentChildren, reflectComponentType, Injectable, Injector } from '@angular/core';
 import { Validators, NG_VALUE_ACCESSOR, TouchedChangeEvent } from '@angular/forms';
 import * as i4 from '@ardium-ui/devkit';
-import { arraySignal, coerceBooleanProperty, coerceNumberProperty, trackBoundControl, coerceArrayProperty, ArdiumClickOutsideModule, ArdiumEscapeHTMLModule, FileSystemService, FileSystemMethod, ArdiumFilePipesModule, coerceDateProperty, getUTCDate as getUTCDate$1, ArdiumHoldModule } from '@ardium-ui/devkit';
+import { arraySignal, coerceBooleanProperty, coerceNumberProperty, trackBoundControl, coerceArrayProperty, ArdiumClickOutsideModule, ArdiumEscapeHTMLModule, FileSystemService, FileSystemMethod, ArdiumFilePipesModule, coerceDateOnlyProperty, getUTCDate as getUTCDate$1, ArdiumHoldModule } from '@ardium-ui/devkit';
 import { isDefined, any, isPrimitive, isAnyString, isNull, isNumber, isString, isArray, isFunction, isRegExp, evaluate, isObject, isPromise, isDate } from 'simple-bool';
 import { resolvePath } from 'resolve-object-path';
 import { TakeChance } from 'take-chance';
@@ -670,10 +670,14 @@ class NumberInputModel {
     }
     setValue(v) {
         let stringV = isNumber(v) ? String(v) : v;
-        // always store with dot as decimal separator for internal consistency
-        const sep = this._ardHostCmp.decimalSeparator();
-        if (stringV && sep && sep !== '.') {
-            stringV = stringV.split(sep).join('.');
+        if (stringV) {
+            const sep = this._ardHostCmp.decimalSeparator();
+            if (sep) {
+                // always store with dot as decimal separator for internal consistency
+                if (sep !== '.') {
+                    stringV = stringV.split(sep).join('.');
+                }
+            }
         }
         this._value.set(stringV);
         this._updateInputEl();
@@ -683,12 +687,23 @@ class NumberInputModel {
         if (isNull(v))
             return;
         v = this._applyStandardConstraints(v, adjustMinMax ?? this._ardHostCmp.minMaxBehavior() === ArdNumberInputMinMaxBehavior.AdjustOnBlur);
+        // remove trailing zeros after decimal point
+        if (v.includes('.')) {
+            v = v.replace(/(\.\d*?)0+$/, '$1');
+        }
+        // remove decimal point if no digits after it
+        if (v.endsWith('.')) {
+            v = v.slice(0, -1);
+        }
+        // remove leading zeros (but keep "0" if the value is zero)
+        if (!v.match(/^0(\.\d+)?$/)) {
+            v = v.replace(/^0+/, '');
+        }
+        // apply fixed decimal places if configured
         if (this._ardHostCmp.fixedDecimalPlaces()) {
             v = this._fixDecimalPlaces(v);
         }
-        // internal storage remains using '.'; _updateInputEl handles display
-        // convert to number and back to string to remove any trailing decimal separator without digits and to remove leading zeros
-        this.setValue(Number(v));
+        this.setValue(v);
     }
     _fixDecimalPlaces(v) {
         const maxDp = this._ardHostCmp.maxDecimalPlaces();
@@ -720,6 +735,9 @@ class NumberInputModel {
             //normalize the value
             v = v?.toString?.() ?? String(v);
         }
+        // check if value is already the same as current value
+        if (v === null ? v === this._value() : Number(v) === this.numberValue())
+            return false;
         v = v === null ? null : String(v);
         return this._writeValue(v, applyConstraints);
     }
@@ -5924,6 +5942,18 @@ function getDateComponents(date, UTC) {
         date: UTC ? date.getUTCDate() : date.getDate(),
     };
 }
+function startOfDay(date, UTC = false) {
+    if (UTC) {
+        return getUTCDate(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate());
+    }
+    return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+function endOfDay(date, UTC = false) {
+    if (UTC) {
+        return getUTCDate(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), 23, 59, 59, 999);
+    }
+    return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59, 999);
+}
 
 //public (exported)
 class ArdDateInputPrefixTemplateDirective {
@@ -6170,8 +6200,12 @@ class _AbstractDateInput extends _FormFieldComponentBase {
                 return value;
             },
         });
-        this.min = input(this._DEFAULTS.min, { transform: v => coerceDateProperty(v, this._DEFAULTS.min) });
-        this.max = input(this._DEFAULTS.max, { transform: v => coerceDateProperty(v, this._DEFAULTS.max) });
+        this.min = input(this._DEFAULTS.min, {
+            transform: v => (v === null ? null : coerceDateOnlyProperty(v, this._DEFAULTS.min, true)),
+        });
+        this.max = input(this._DEFAULTS.max, {
+            transform: v => (v === null ? null : coerceDateOnlyProperty(v, this._DEFAULTS.max, true)),
+        });
         this.UTC = input(this._DEFAULTS.UTC, { transform: v => coerceBooleanProperty(v) });
         this._UTCAfterInit = signal(this._DEFAULTS.UTC);
         this.filter = input(this._DEFAULTS.filter);
@@ -7732,10 +7766,10 @@ class _AbstractCalendar extends _FormFieldComponentBase {
         this.yearSelect = output();
         this.monthSelect = output();
         this.min = input(this._DEFAULTS.min, {
-            transform: v => (v === null ? null : coerceDateProperty(v, this._DEFAULTS.min, true)),
+            transform: v => (v === null ? null : coerceDateOnlyProperty(v, this._DEFAULTS.min, true)),
         });
         this.max = input(this._DEFAULTS.max, {
-            transform: v => (v === null ? null : coerceDateProperty(v, this._DEFAULTS.max, true)),
+            transform: v => (v === null ? null : coerceDateOnlyProperty(v, this._DEFAULTS.max, true)),
         });
         this.UTC = input(this._DEFAULTS.UTC, { transform: v => coerceBooleanProperty(v) });
         this._UTCAfterInit = signal(this._DEFAULTS.UTC);
@@ -8831,17 +8865,30 @@ class ArdiumDateInputComponent extends _AbstractDateInput {
         if (this.minMaxStrategy() === ArdDateInputMinMaxStrategy.Adjust && date) {
             const min = this.min();
             const max = this.max();
+            // min and max are always in UTC when they are set, so we need to convert the date to UTC for comparison
+            date = getUTCDate(date.getFullYear(), date.getMonth(), date.getDate());
             if (min && date < min) {
-                date = new Date(min);
+                date = min;
             }
             else if (max && date > max) {
-                date = new Date(max);
+                date = max;
+            }
+            // convert the date back to local time if the UTC mode is off
+            if (!this._UTCAfterInit()) {
+                date = new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate());
+            }
+            if (date.toISOString() !== this.value()?.toISOString()) {
+                this.value.set(date);
             }
+            return;
         }
+        // deserialized date should always be in local time, so we need to convert it to UTC if the UTC mode is on
         if (date && this._UTCAfterInit()) {
             date = getUTCDate(date.getFullYear(), date.getMonth(), date.getDate());
         }
-        this.value.set(date);
+        if (date?.toISOString() !== this.value()?.toISOString()) {
+            this.value.set(date);
+        }
     }
     _setDateInputAttributes() {
         const input = this.dateInput()?.nativeElement;
@@ -10319,9 +10366,9 @@ class ArdiumNumberInputComponent extends _FormFieldComponentBase {
         });
         // refresh input display when decimalSeparator changes
         effect(() => {
-            const sep = this.decimalSeparator();
+            this.decimalSeparator();
             // calling rewrite ensures element value includes new separator
-            this.inputModel.rewriteValueAfterHostUpdate();
+            untracked(() => this.inputModel.rewriteValueAfterHostUpdate());
         });
     }
     ngAfterViewInit() {
@@ -10669,10 +10716,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                 }]
         }] });
 
+function contextToInputs(context, component) {
+    let allowed;
+    return computed(() => {
+        if (!component)
+            return {};
+        if (!allowed) {
+            const meta = reflectComponentType(component);
+            if (!meta)
+                return {};
+            allowed = new Set(meta.inputs.map(i => i.templateName));
+        }
+        return Object.fromEntries(Object.entries(context()).filter(([key]) => allowed.has(key)));
+    });
+}
+
 const _checkboxDefaults = {
     ..._booleanComponentDefaults,
     color: SimpleComponentColor.Primary,
     unselectedColor: SimpleComponentColor.None,
+    CheckboxIconComponent: undefined,
 };
 const ARD_CHECKBOX_DEFAULTS = new InjectionToken('ard-checkbox-defaults', {
     factory: () => ({
@@ -10735,6 +10798,7 @@ class ArdiumCheckboxComponent extends _BooleanComponentBase {
         });
         this.State = CheckboxState;
         //! templates
+        this.checkboxIconComponent = this._DEFAULTS.CheckboxIconComponent;
         this.templateRepository = contentChild(_CheckboxTemplateRepositoryDirective);
         this.checkboxTemplate = contentChild(ArdCheckboxTemplateDirective);
         this.checkboxTemplateContext = computed(() => ({
@@ -10744,6 +10808,7 @@ class ArdiumCheckboxComponent extends _BooleanComponentBase {
             state: this.state(),
             internalState: this.internalState(),
         }));
+        this.checkboxIconInputs = contextToInputs(this.checkboxTemplateContext, this.checkboxIconComponent);
     }
     //override the "selected" setter, so it changes the state too.
     set _selected(v) {
@@ -10765,13 +10830,13 @@ class ArdiumCheckboxComponent extends _BooleanComponentBase {
         this._emitTouched();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumCheckboxComponent, deps: [{ token: ARD_CHECKBOX_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.15", type: ArdiumCheckboxComponent, isStandalone: false, selector: "ard-checkbox", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, unselectedColor: { classPropertyName: "unselectedColor", publicName: "unselectedColor", isSignal: true, isRequired: false, transformFunction: null }, internalState: { classPropertyName: "internalState", publicName: "state", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { internalState: "stateChange" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumCheckboxComponent, isStandalone: false, selector: "ard-checkbox", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, unselectedColor: { classPropertyName: "unselectedColor", publicName: "unselectedColor", isSignal: true, isRequired: false, transformFunction: null }, internalState: { classPropertyName: "internalState", publicName: "state", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { internalState: "stateChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ArdiumCheckboxComponent),
                 multi: true,
             },
-        ], queries: [{ propertyName: "templateRepository", first: true, predicate: _CheckboxTemplateRepositoryDirective, descendants: true, isSignal: true }, { propertyName: "checkboxTemplate", first: true, predicate: ArdCheckboxTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<button\r\n  class=\"ard-checkbox\"\r\n  role=\"checkbox\"\r\n  type=\"button\"\r\n  [attr.id]=\"htmlId()\"\r\n  [attr.name]=\"htmlName()\"\r\n  [attr.aria-checked]=\"selectedAccountingForReverse()\"\r\n  [attr.aria-disabled]=\"disabled()\"\r\n  [tabindex]=\"tabIndex()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  (click)=\"toggleState()\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n>\r\n  <div class=\"ard-hitbox\"></div>\r\n  <div class=\"ard-focus-overlay\"></div>\r\n\r\n  <ng-template\r\n    #defaultCheckboxTemplate\r\n    let-state=\"state\"\r\n    let-selected=\"selected\"\r\n  >\r\n    <ard-icon\r\n      [icon]=\"\r\n        state === State.Selected\r\n          ? 'check_box'\r\n          : state === State.Unselected\r\n            ? 'check_box_outline_blank'\r\n            : 'indeterminate_check_box'\r\n      \"\r\n      [filled]=\"state !== State.Indeterminate\"\r\n    />\r\n  </ng-template>\r\n\r\n  <ng-template\r\n    [ngTemplateOutlet]=\"templateRepository()?.checkboxTmp()?.template ?? checkboxTemplate()?.template ?? defaultCheckboxTemplate\"\r\n    [ngTemplateOutletContext]=\"checkboxTemplateContext()\"\r\n  />\r\n</button>\r\n", styles: ["@layer ard-ui{ard-checkbox{display:block}.ard-checkbox{font-size:inherit}.ard-checkbox>ard-icon{font-size:1.5em}ard-checkbox.ard-readonly .ard-checkbox,ard-checkbox.ard-disabled .ard-checkbox{cursor:default}ard-checkbox.ard-readonly .ard-checkbox .ard-focus-overlay,ard-checkbox.ard-disabled .ard-checkbox .ard-focus-overlay{display:none}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "templateRepository", first: true, predicate: _CheckboxTemplateRepositoryDirective, descendants: true, isSignal: true }, { propertyName: "checkboxTemplate", first: true, predicate: ArdCheckboxTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<button\r\n  class=\"ard-checkbox\"\r\n  role=\"checkbox\"\r\n  type=\"button\"\r\n  [attr.id]=\"htmlId()\"\r\n  [attr.name]=\"htmlName()\"\r\n  [attr.aria-checked]=\"selectedAccountingForReverse()\"\r\n  [attr.aria-disabled]=\"disabled()\"\r\n  [tabindex]=\"tabIndex()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  (click)=\"toggleState()\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n>\r\n  <div class=\"ard-hitbox\"></div>\r\n  <div class=\"ard-focus-overlay\"></div>\r\n\r\n  @if (checkboxIconComponent) {\r\n    <!-- render the component -->\r\n    <ng-template\r\n      [ngComponentOutlet]=\"checkboxIconComponent\"\r\n      [ngComponentOutletInputs]=\"checkboxIconInputs()\"\r\n    />\r\n  } @else {\r\n    <ng-template\r\n      #defaultCheckboxTemplate\r\n      let-state=\"state\"\r\n      let-selected=\"selected\"\r\n    >\r\n      <ard-icon\r\n        [icon]=\"\r\n          state === State.Selected\r\n            ? 'check_box'\r\n            : state === State.Unselected\r\n              ? 'check_box_outline_blank'\r\n              : 'indeterminate_check_box'\r\n        \"\r\n        [filled]=\"state !== State.Indeterminate\"\r\n      />\r\n    </ng-template>\r\n\r\n    <ng-template\r\n      [ngTemplateOutlet]=\"\r\n        templateRepository()?.checkboxTmp()?.template ?? checkboxTemplate()?.template ?? defaultCheckboxTemplate\r\n      \"\r\n      [ngTemplateOutletContext]=\"checkboxTemplateContext()\"\r\n    />\r\n  }\r\n</button>\r\n", styles: ["@layer ard-ui{ard-checkbox{display:block}.ard-checkbox{font-size:inherit}.ard-checkbox>ard-icon{font-size:1.5em}ard-checkbox.ard-readonly .ard-checkbox,ard-checkbox.ard-disabled .ard-checkbox{cursor:default}ard-checkbox.ard-readonly .ard-checkbox .ard-focus-overlay,ard-checkbox.ard-disabled .ard-checkbox .ard-focus-overlay{display:none}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumCheckboxComponent, decorators: [{
             type: Component,
@@ -10781,7 +10846,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                             useExisting: forwardRef(() => ArdiumCheckboxComponent),
                             multi: true,
                         },
-                    ], template: "<button\r\n  class=\"ard-checkbox\"\r\n  role=\"checkbox\"\r\n  type=\"button\"\r\n  [attr.id]=\"htmlId()\"\r\n  [attr.name]=\"htmlName()\"\r\n  [attr.aria-checked]=\"selectedAccountingForReverse()\"\r\n  [attr.aria-disabled]=\"disabled()\"\r\n  [tabindex]=\"tabIndex()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  (click)=\"toggleState()\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n>\r\n  <div class=\"ard-hitbox\"></div>\r\n  <div class=\"ard-focus-overlay\"></div>\r\n\r\n  <ng-template\r\n    #defaultCheckboxTemplate\r\n    let-state=\"state\"\r\n    let-selected=\"selected\"\r\n  >\r\n    <ard-icon\r\n      [icon]=\"\r\n        state === State.Selected\r\n          ? 'check_box'\r\n          : state === State.Unselected\r\n            ? 'check_box_outline_blank'\r\n            : 'indeterminate_check_box'\r\n      \"\r\n      [filled]=\"state !== State.Indeterminate\"\r\n    />\r\n  </ng-template>\r\n\r\n  <ng-template\r\n    [ngTemplateOutlet]=\"templateRepository()?.checkboxTmp()?.template ?? checkboxTemplate()?.template ?? defaultCheckboxTemplate\"\r\n    [ngTemplateOutletContext]=\"checkboxTemplateContext()\"\r\n  />\r\n</button>\r\n", styles: ["@layer ard-ui{ard-checkbox{display:block}.ard-checkbox{font-size:inherit}.ard-checkbox>ard-icon{font-size:1.5em}ard-checkbox.ard-readonly .ard-checkbox,ard-checkbox.ard-disabled .ard-checkbox{cursor:default}ard-checkbox.ard-readonly .ard-checkbox .ard-focus-overlay,ard-checkbox.ard-disabled .ard-checkbox .ard-focus-overlay{display:none}}\n"] }]
+                    ], template: "<button\r\n  class=\"ard-checkbox\"\r\n  role=\"checkbox\"\r\n  type=\"button\"\r\n  [attr.id]=\"htmlId()\"\r\n  [attr.name]=\"htmlName()\"\r\n  [attr.aria-checked]=\"selectedAccountingForReverse()\"\r\n  [attr.aria-disabled]=\"disabled()\"\r\n  [tabindex]=\"tabIndex()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  (click)=\"toggleState()\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n>\r\n  <div class=\"ard-hitbox\"></div>\r\n  <div class=\"ard-focus-overlay\"></div>\r\n\r\n  @if (checkboxIconComponent) {\r\n    <!-- render the component -->\r\n    <ng-template\r\n      [ngComponentOutlet]=\"checkboxIconComponent\"\r\n      [ngComponentOutletInputs]=\"checkboxIconInputs()\"\r\n    />\r\n  } @else {\r\n    <ng-template\r\n      #defaultCheckboxTemplate\r\n      let-state=\"state\"\r\n      let-selected=\"selected\"\r\n    >\r\n      <ard-icon\r\n        [icon]=\"\r\n          state === State.Selected\r\n            ? 'check_box'\r\n            : state === State.Unselected\r\n              ? 'check_box_outline_blank'\r\n              : 'indeterminate_check_box'\r\n        \"\r\n        [filled]=\"state !== State.Indeterminate\"\r\n      />\r\n    </ng-template>\r\n\r\n    <ng-template\r\n      [ngTemplateOutlet]=\"\r\n        templateRepository()?.checkboxTmp()?.template ?? checkboxTemplate()?.template ?? defaultCheckboxTemplate\r\n      \"\r\n      [ngTemplateOutletContext]=\"checkboxTemplateContext()\"\r\n    />\r\n  }\r\n</button>\r\n", styles: ["@layer ard-ui{ard-checkbox{display:block}.ard-checkbox{font-size:inherit}.ard-checkbox>ard-icon{font-size:1.5em}ard-checkbox.ard-readonly .ard-checkbox,ard-checkbox.ard-disabled .ard-checkbox{cursor:default}ard-checkbox.ard-readonly .ard-checkbox .ard-focus-overlay,ard-checkbox.ard-disabled .ard-checkbox .ard-focus-overlay{display:none}}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_CHECKBOX_DEFAULTS]