@sdcorejs/angular 19.0.0-rc.1

package/fesm2022/sdcorejs-angular-forms-checkbox.mjs

@@ -0,0 +1,139 @@
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, ChangeDetectorRef, input, booleanAttribute, model, output, computed, effect, Component } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { FormControl, NgForm, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i3 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import * as i2 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { sdIsEmpty, sdSerializeDataValue } from '@sdcorejs/angular/utilities/data-state';
+import { sdFormControlState, SdInlineErrorValidator } from '@sdcorejs/angular/forms/models';
+import { TranslatePipe } from '@sdcorejs/angular/i18n';
+import { Subscription } from 'rxjs';
+import * as uuid from 'uuid';
+
+class SdCheckbox {
+    #ref = inject(ChangeDetectorRef);
+    id = `I${uuid.v4()}`;
+    #name = uuid.v4();
+    formControl = new FormControl();
+    #subscription = new Subscription();
+    #model;
+    // Inputs — all accept null|undefined at the boundary, transform to canonical shape
+    autoIdInput = input(undefined, {
+        alias: 'autoId',
+        transform: (v) => v ?? undefined,
+    });
+    name = input(undefined, {
+        transform: (v) => v ?? undefined,
+    });
+    // why: parent may bind NgForm (template-driven), FormGroup (reactive), or a wrapper with `.form`.
+    // Transform once at the input boundary so the rest of the component only deals with FormGroup.
+    form = input(undefined, {
+        transform: (val) => {
+            if (!val)
+                return undefined;
+            if (val instanceof NgForm)
+                return val.form;
+            if (val instanceof FormGroup)
+                return val;
+            if (val?.form instanceof FormGroup)
+                return val.form;
+            return undefined;
+        },
+    });
+    label = input(undefined, {
+        transform: (v) => v ?? undefined,
+    });
+    // why: full Color enum, áp dụng qua [data-sd-color] + SCSS override MDC vars.
+    color = input('primary', {
+        transform: (v) => v || 'primary',
+    });
+    disabled = input(false, { transform: booleanAttribute });
+    viewed = input(false, { transform: booleanAttribute });
+    inlineError = input('', {
+        transform: (v) => v ?? '',
+    });
+    // Two-way model
+    model = model(undefined);
+    // Outputs (sdChange is in addition to auto-generated modelChange from `model` signal)
+    sdChange = output();
+    // Computed (template bindings)
+    autoId = computed(() => (this.autoIdInput() ? `forms-checkbox-${this.autoIdInput()}` : undefined));
+    #state = sdFormControlState(computed(() => this.formControl));
+    dataDisabled = computed(() => (this.#state().disabled ? 'true' : 'false'));
+    dataEmpty = computed(() => (sdIsEmpty(this.#state().value) ? 'true' : 'false'));
+    dataValue = computed(() => sdSerializeDataValue(this.#state().value));
+    constructor() {
+        // why: external [name] override falls back to generated uuid only when truthy
+        effect(() => {
+            const val = this.name();
+            if (val)
+                this.#name = val;
+        });
+        effect(() => {
+            if (this.disabled())
+                this.formControl.disable();
+            else
+                this.formControl.enable();
+        });
+        effect(() => {
+            const value = this.model();
+            if (this.#model !== value) {
+                this.#model = value;
+                this.formControl.setValue(value, { emitEvent: false });
+            }
+        });
+        effect(() => {
+            // touch dependency so validator re-attaches when inlineError changes
+            this.inlineError();
+            this.#updateValidator();
+        });
+    }
+    ngAfterViewInit() {
+        this.#subscription.add(this.formControl.valueChanges.subscribe(this.#onChange));
+        this.form()?.addControl(this.#name, this.formControl);
+        this.#ref.detectChanges();
+    }
+    ngOnDestroy() {
+        this.form()?.removeControl(this.#name);
+        this.#subscription.unsubscribe();
+    }
+    #onChange = (value) => {
+        this.#model = value;
+        this.model.set(value);
+        this.sdChange.emit(value);
+    };
+    #updateValidator = () => {
+        this.formControl.clearValidators();
+        const validators = [];
+        if (this.inlineError()) {
+            validators.push(SdInlineErrorValidator);
+        }
+        this.formControl.setValidators(validators);
+        this.formControl.updateValueAndValidity();
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdCheckbox, isStandalone: true, selector: "sd-checkbox", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, viewed: { classPropertyName: "viewed", publicName: "viewed", isSignal: true, isRequired: false, transformFunction: null }, inlineError: { classPropertyName: "inlineError", publicName: "inlineError", isSignal: true, isRequired: false, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { model: "modelChange", sdChange: "sdChange" }, host: { properties: { "class.sd-c-primary": "color() === 'primary'", "class.sd-c-secondary": "color() === 'secondary'", "class.sd-c-info": "color() === 'info'", "class.sd-c-success": "color() === 'success'", "class.sd-c-warning": "color() === 'warning'", "class.sd-c-error": "color() === 'error'" } }, ngImport: i0, template: "@if (viewed()) {\n  @if (label()) {\n    <div class=\"T14R text-black400\">{{ label() }}</div>\n  }\n  <div class=\"T14M\">{{ (model() ? 'core.form.checkbox.checked' : 'core.form.checkbox.unchecked') | translate }}</div>\n} @else {\n  <mat-checkbox\n    [formControl]=\"formControl\"\n    [attr.data-autoId]=\"autoId()\"\n    [attr.data-disabled]=\"dataDisabled()\"\n    [attr.data-empty]=\"dataEmpty()\"\n    [attr.data-value]=\"dataValue()\">\n    {{ label() }}\n  </mat-checkbox>\n  @if (formControl.errors?.['inlineError'] && formControl.touched) {\n    <mat-error>\n      {{ inlineError() }}\n    </mat-error>\n  }\n}\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-light{color:var(--sd-light)!important}.bg-light{background:var(--sd-light)!important}.border-light{border-color:var(--sd-light)!important}.text-dark{color:var(--sd-dark)!important}.bg-dark{background:var(--sd-dark)!important}.border-dark{border-color:var(--sd-dark)!important}.text-black500{color:var(--sd-black500)!important}.bg-black500{background:var(--sd-black500)!important}.border-black500{border-color:var(--sd-black500)!important}.text-black400{color:var(--sd-black400)!important}.bg-black400{background:var(--sd-black400)!important}.border-black400{border-color:var(--sd-black400)!important}.text-black300{color:var(--sd-black300)!important}.bg-black300{background:var(--sd-black300)!important}.border-black300{border-color:var(--sd-black300)!important}.text-black200{color:var(--sd-black200)!important}.bg-black200{background:var(--sd-black200)!important}.border-black200{border-color:var(--sd-black200)!important}.text-black100{color:var(--sd-black100)!important}.bg-black100{background:var(--sd-black100)!important}.border-black100{border-color:var(--sd-black100)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}:host ::ng-deep .mdc-label{margin-bottom:0}:host{--sd-c: var(--sd-primary)}:host(.sd-c-secondary){--sd-c: var(--sd-secondary)}:host(.sd-c-info){--sd-c: var(--sd-info)}:host(.sd-c-success){--sd-c: var(--sd-success)}:host(.sd-c-warning){--sd-c: var(--sd-warning)}:host(.sd-c-error){--sd-c: var(--sd-error)}:host ::ng-deep .mat-mdc-checkbox,:host ::ng-deep .mdc-checkbox{--mdc-checkbox-selected-icon-color: var(--sd-c) !important;--mdc-checkbox-selected-focus-icon-color: var(--sd-c) !important;--mdc-checkbox-selected-hover-icon-color: var(--sd-c) !important;--mdc-checkbox-selected-pressed-icon-color: var(--sd-c) !important;--mdc-checkbox-selected-focus-state-layer-color: var(--sd-c) !important;--mdc-checkbox-selected-hover-state-layer-color: var(--sd-c) !important;--mdc-checkbox-selected-pressed-state-layer-color: var(--sd-c) !important;--mat-checkbox-selected-icon-color: var(--sd-c) !important;--mat-checkbox-selected-focus-icon-color: var(--sd-c) !important;--mat-checkbox-selected-hover-icon-color: var(--sd-c) !important;--mat-checkbox-selected-pressed-icon-color: var(--sd-c) !important;--mat-checkbox-selected-focus-state-layer-color: var(--sd-c) !important;--mat-checkbox-selected-hover-state-layer-color: var(--sd-c) !important;--mat-checkbox-selected-pressed-state-layer-color: var(--sd-c) !important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdCheckbox, decorators: [{
+            type: Component,
+            args: [{ selector: 'sd-checkbox', standalone: true, host: {
+                        // why: host class .sd-c-<x> + default sd-c-primary cho fallback. Thay data-sd-color
+                        // để tránh edge case host-attr-binding không reactive trong vài cảnh build pipeline.
+                        '[class.sd-c-primary]': "color() === 'primary'",
+                        '[class.sd-c-secondary]': "color() === 'secondary'",
+                        '[class.sd-c-info]': "color() === 'info'",
+                        '[class.sd-c-success]': "color() === 'success'",
+                        '[class.sd-c-warning]': "color() === 'warning'",
+                        '[class.sd-c-error]': "color() === 'error'",
+                    }, imports: [CommonModule, FormsModule, ReactiveFormsModule, MatFormFieldModule, MatCheckboxModule, TranslatePipe], template: "@if (viewed()) {\n  @if (label()) {\n    <div class=\"T14R text-black400\">{{ label() }}</div>\n  }\n  <div class=\"T14M\">{{ (model() ? 'core.form.checkbox.checked' : 'core.form.checkbox.unchecked') | translate }}</div>\n} @else {\n  <mat-checkbox\n    [formControl]=\"formControl\"\n    [attr.data-autoId]=\"autoId()\"\n    [attr.data-disabled]=\"dataDisabled()\"\n    [attr.data-empty]=\"dataEmpty()\"\n    [attr.data-value]=\"dataValue()\">\n    {{ label() }}\n  </mat-checkbox>\n  @if (formControl.errors?.['inlineError'] && formControl.touched) {\n    <mat-error>\n      {{ inlineError() }}\n    </mat-error>\n  }\n}\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-light{color:var(--sd-light)!important}.bg-light{background:var(--sd-light)!important}.border-light{border-color:var(--sd-light)!important}.text-dark{color:var(--sd-dark)!important}.bg-dark{background:var(--sd-dark)!important}.border-dark{border-color:var(--sd-dark)!important}.text-black500{color:var(--sd-black500)!important}.bg-black500{background:var(--sd-black500)!important}.border-black500{border-color:var(--sd-black500)!important}.text-black400{color:var(--sd-black400)!important}.bg-black400{background:var(--sd-black400)!important}.border-black400{border-color:var(--sd-black400)!important}.text-black300{color:var(--sd-black300)!important}.bg-black300{background:var(--sd-black300)!important}.border-black300{border-color:var(--sd-black300)!important}.text-black200{color:var(--sd-black200)!important}.bg-black200{background:var(--sd-black200)!important}.border-black200{border-color:var(--sd-black200)!important}.text-black100{color:var(--sd-black100)!important}.bg-black100{background:var(--sd-black100)!important}.border-black100{border-color:var(--sd-black100)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}:host ::ng-deep .mdc-label{margin-bottom:0}:host{--sd-c: var(--sd-primary)}:host(.sd-c-secondary){--sd-c: var(--sd-secondary)}:host(.sd-c-info){--sd-c: var(--sd-info)}:host(.sd-c-success){--sd-c: var(--sd-success)}:host(.sd-c-warning){--sd-c: var(--sd-warning)}:host(.sd-c-error){--sd-c: var(--sd-error)}:host ::ng-deep .mat-mdc-checkbox,:host ::ng-deep .mdc-checkbox{--mdc-checkbox-selected-icon-color: var(--sd-c) !important;--mdc-checkbox-selected-focus-icon-color: var(--sd-c) !important;--mdc-checkbox-selected-hover-icon-color: var(--sd-c) !important;--mdc-checkbox-selected-pressed-icon-color: var(--sd-c) !important;--mdc-checkbox-selected-focus-state-layer-color: var(--sd-c) !important;--mdc-checkbox-selected-hover-state-layer-color: var(--sd-c) !important;--mdc-checkbox-selected-pressed-state-layer-color: var(--sd-c) !important;--mat-checkbox-selected-icon-color: var(--sd-c) !important;--mat-checkbox-selected-focus-icon-color: var(--sd-c) !important;--mat-checkbox-selected-hover-icon-color: var(--sd-c) !important;--mat-checkbox-selected-pressed-icon-color: var(--sd-c) !important;--mat-checkbox-selected-focus-state-layer-color: var(--sd-c) !important;--mat-checkbox-selected-hover-state-layer-color: var(--sd-c) !important;--mat-checkbox-selected-pressed-state-layer-color: var(--sd-c) !important}\n"] }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SdCheckbox };
+//# sourceMappingURL=sdcorejs-angular-forms-checkbox.mjs.map

package/fesm2022/sdcorejs-angular-forms-checkbox.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"sdcorejs-angular-forms-checkbox.mjs","sources":["../../../projects/sdcorejs-angular/forms/checkbox/src/checkbox.component.ts","../../../projects/sdcorejs-angular/forms/checkbox/src/checkbox.component.html","../../../projects/sdcorejs-angular/forms/checkbox/sdcorejs-angular-forms-checkbox.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n  AfterViewInit,\n  booleanAttribute,\n  ChangeDetectorRef,\n  Component,\n  computed,\n  effect,\n  inject,\n  input,\n  model,\n  OnDestroy,\n  output,\n} from '@angular/core';\nimport { FormControl, FormGroup, FormsModule, NgForm, ReactiveFormsModule, ValidatorFn } from '@angular/forms';\nimport { MatCheckboxModule } from '@angular/material/checkbox';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { sdIsEmpty, sdSerializeDataValue } from '@sdcorejs/angular/utilities/data-state';\nimport { sdFormControlState, SdInlineErrorValidator } from '@sdcorejs/angular/forms/models';\nimport { Color } from '@sdcorejs/utils/models';\nimport { TranslatePipe } from '@sdcorejs/angular/i18n';\nimport { Subscription } from 'rxjs';\nimport * as uuid from 'uuid';\n\n@Component({\n  selector: 'sd-checkbox',\n  templateUrl: './checkbox.component.html',\n  styleUrl: './checkbox.component.scss',\n  standalone: true,\n  host: {\n    // why: host class .sd-c-<x> + default sd-c-primary cho fallback. Thay data-sd-color\n    // để tránh edge case host-attr-binding không reactive trong vài cảnh build pipeline.\n    '[class.sd-c-primary]': \"color() === 'primary'\",\n    '[class.sd-c-secondary]': \"color() === 'secondary'\",\n    '[class.sd-c-info]': \"color() === 'info'\",\n    '[class.sd-c-success]': \"color() === 'success'\",\n    '[class.sd-c-warning]': \"color() === 'warning'\",\n    '[class.sd-c-error]': \"color() === 'error'\",\n  },\n  imports: [CommonModule, FormsModule, ReactiveFormsModule, MatFormFieldModule, MatCheckboxModule, TranslatePipe],\n})\nexport class SdCheckbox implements OnDestroy, AfterViewInit {\n  readonly #ref = inject(ChangeDetectorRef);\n\n  id = `I${uuid.v4()}`;\n  #name = uuid.v4();\n  formControl = new FormControl();\n  #subscription = new Subscription();\n  #model: unknown;\n\n  // Inputs — all accept null|undefined at the boundary, transform to canonical shape\n  readonly autoIdInput = input<string | undefined, string | null | undefined>(undefined, {\n    alias: 'autoId',\n    transform: (v): string | undefined => v ?? undefined,\n  });\n  readonly name = input<string | undefined, string | null | undefined>(undefined, {\n    transform: (v): string | undefined => v ?? undefined,\n  });\n  // why: parent may bind NgForm (template-driven), FormGroup (reactive), or a wrapper with `.form`.\n  // Transform once at the input boundary so the rest of the component only deals with FormGroup.\n  readonly form = input<FormGroup | undefined, any>(undefined, {\n    transform: (val: any): FormGroup | undefined => {\n      if (!val) return undefined;\n      if (val instanceof NgForm) return val.form;\n      if (val instanceof FormGroup) return val;\n      if (val?.form instanceof FormGroup) return val.form;\n      return undefined;\n    },\n  });\n  readonly label = input<string | undefined, string | null | undefined>(undefined, {\n    transform: (v): string | undefined => v ?? undefined,\n  });\n  // why: full Color enum, áp dụng qua [data-sd-color] + SCSS override MDC vars.\n  readonly color = input<Color, Color | null | undefined>('primary', {\n    transform: (v): Color => v || 'primary',\n  });\n  readonly disabled = input(false, { transform: booleanAttribute });\n  readonly viewed = input(false, { transform: booleanAttribute });\n  readonly inlineError = input<string, string | null | undefined>('', {\n    transform: (v): string => v ?? '',\n  });\n\n  // Two-way model\n  readonly model = model<unknown>(undefined);\n\n  // Outputs (sdChange is in addition to auto-generated modelChange from `model` signal)\n  readonly sdChange = output<unknown>();\n\n  // Computed (template bindings)\n  readonly autoId = computed(() => (this.autoIdInput() ? `forms-checkbox-${this.autoIdInput()}` : undefined));\n  readonly #state = sdFormControlState(computed(() => this.formControl));\n  readonly dataDisabled = computed(() => (this.#state().disabled ? 'true' : 'false'));\n  readonly dataEmpty = computed(() => (sdIsEmpty(this.#state().value) ? 'true' : 'false'));\n  readonly dataValue = computed(() => sdSerializeDataValue(this.#state().value));\n\n  constructor() {\n    // why: external [name] override falls back to generated uuid only when truthy\n    effect(() => {\n      const val = this.name();\n      if (val) this.#name = val;\n    });\n\n    effect(() => {\n      if (this.disabled()) this.formControl.disable();\n      else this.formControl.enable();\n    });\n\n    effect(() => {\n      const value = this.model();\n      if (this.#model !== value) {\n        this.#model = value;\n        this.formControl.setValue(value, { emitEvent: false });\n      }\n    });\n\n    effect(() => {\n      // touch dependency so validator re-attaches when inlineError changes\n      this.inlineError();\n      this.#updateValidator();\n    });\n  }\n\n  ngAfterViewInit() {\n    this.#subscription.add(this.formControl.valueChanges.subscribe(this.#onChange));\n    this.form()?.addControl(this.#name, this.formControl);\n    this.#ref.detectChanges();\n  }\n\n  ngOnDestroy() {\n    this.form()?.removeControl(this.#name);\n    this.#subscription.unsubscribe();\n  }\n\n  #onChange = (value: unknown) => {\n    this.#model = value;\n    this.model.set(value);\n    this.sdChange.emit(value);\n  };\n\n  #updateValidator = () => {\n    this.formControl.clearValidators();\n    const validators: ValidatorFn[] = [];\n\n    if (this.inlineError()) {\n      validators.push(SdInlineErrorValidator);\n    }\n    this.formControl.setValidators(validators);\n    this.formControl.updateValueAndValidity();\n  };\n}\n","@if (viewed()) {\n  @if (label()) {\n    <div class=\"T14R text-black400\">{{ label() }}</div>\n  }\n  <div class=\"T14M\">{{ (model() ? 'core.form.checkbox.checked' : 'core.form.checkbox.unchecked') | translate }}</div>\n} @else {\n  <mat-checkbox\n    [formControl]=\"formControl\"\n    [attr.data-autoId]=\"autoId()\"\n    [attr.data-disabled]=\"dataDisabled()\"\n    [attr.data-empty]=\"dataEmpty()\"\n    [attr.data-value]=\"dataValue()\">\n    {{ label() }}\n  </mat-checkbox>\n  @if (formControl.errors?.['inlineError'] && formControl.touched) {\n    <mat-error>\n      {{ inlineError() }}\n    </mat-error>\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/sdcorejs-angular-forms-chip-calendar.mjs

@@ -0,0 +1,364 @@
+import { ENTER, COMMA } from '@angular/cdk/keycodes';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Pipe, inject, ChangeDetectorRef, viewChild, input, computed, booleanAttribute, model, output, contentChild, effect, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i2 from '@angular/forms';
+import { NgForm, FormGroup, FormControl, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import * as i6 from '@angular/material/chips';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatNativeDateModule } from '@angular/material/core';
+import * as i7 from '@angular/material/datepicker';
+import { MatCalendar, MatDatepickerModule } from '@angular/material/datepicker';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i5 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i3 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i8 from '@angular/material/menu';
+import { MatMenuTrigger, MatMenuModule } from '@angular/material/menu';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import * as i4 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { SdView } from '@sdcorejs/angular/components/view';
+import { SdViewDefDirective, SdLabelDefDirective } from '@sdcorejs/angular/forms/directives';
+import { SdLabel } from '@sdcorejs/angular/forms/label';
+import { sdFormControlState, SdFormControl } from '@sdcorejs/angular/forms/models';
+import { I18nService } from '@sdcorejs/angular/i18n';
+import { sdIsEmpty, sdSerializeDataValue } from '@sdcorejs/angular/utilities/data-state';
+import { DateUtilities } from '@sdcorejs/angular/utilities';
+import { Subscription } from 'rxjs';
+import * as uuid from 'uuid';
+
+class SdRemovableChipPipe {
+    constructor() { }
+    transform(item, removable) {
+        if (typeof (removable) === 'boolean') {
+            return removable;
+        }
+        return removable(item);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdRemovableChipPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: SdRemovableChipPipe, isStandalone: true, name: "sdRemovableChip" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdRemovableChipPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'sdRemovableChip'
+                }]
+        }], ctorParameters: () => [] });
+
+class SdChipCalendarErrorStateMatcher {
+    formControl;
+    constructor(formControl) {
+        this.formControl = formControl;
+    }
+    isErrorState(control, form) {
+        const isSubmitted = form && form.submitted;
+        return !!(this.formControl?.invalid && (this.formControl?.dirty || this.formControl?.touched || isSubmitted));
+    }
+}
+class SdChipCalendar {
+    #ref = inject(ChangeDetectorRef);
+    #i18n = inject(I18nService);
+    #subscription = new Subscription();
+    #name = uuid.v4();
+    #isBlurring = false;
+    menuTrigger = viewChild(MatMenuTrigger);
+    calendar = viewChild(MatCalendar);
+    autoIdInput = input(undefined, {
+        alias: 'autoId',
+        transform: (v) => v ?? undefined,
+    });
+    autoId = computed(() => (this.autoIdInput() ? `forms-chip-calendar-${this.autoIdInput()}` : undefined));
+    #state = sdFormControlState(computed(() => this.formControl));
+    dataDisabled = computed(() => (this.#state().disabled ? 'true' : 'false'));
+    dataEmpty = computed(() => (sdIsEmpty(this.#state().value) ? 'true' : 'false'));
+    dataValue = computed(() => sdSerializeDataValue(this.#state().value));
+    dataCount = computed(() => {
+        const v = this.#state().value;
+        return String(Array.isArray(v) ? v.length : 0);
+    });
+    dataRequired = computed(() => (this.required() ? 'true' : 'false'));
+    dataErrorMessage = computed(() => {
+        void this.#state();
+        const msg = this.errorMessage();
+        return msg && msg.length > 0 ? msg : null;
+    });
+    name = input(undefined, {
+        transform: (v) => v ?? undefined,
+    });
+    appearance = input('outline', {
+        transform: (v) => v || 'outline',
+    });
+    floatLabel = input('auto', {
+        transform: (v) => v || 'auto',
+    });
+    size = input('md', {
+        transform: (v) => v || 'md',
+    });
+    // why: parent may bind NgForm (template-driven), FormGroup (reactive), or a wrapper with `.form`.
+    // Transform once at the input boundary so the rest of the component only deals with FormGroup.
+    form = input(undefined, {
+        transform: (val) => {
+            if (!val)
+                return undefined;
+            if (val instanceof NgForm)
+                return val.form;
+            if (val instanceof FormGroup)
+                return val;
+            if (val?.form instanceof FormGroup)
+                return val.form;
+            return undefined;
+        },
+    });
+    label = input('', {
+        transform: (v) => v ?? '',
+    });
+    placeholder = input(undefined, {
+        transform: (v) => v ?? undefined,
+    });
+    removable = input(true, {
+        transform: (v) => v ?? true,
+    });
+    hideInlineError = input(false, { transform: booleanAttribute });
+    required = input(false, { transform: booleanAttribute });
+    min = input(0, {
+        transform: (v) => v ?? 0,
+    });
+    max = input(0, {
+        transform: (v) => v ?? 0,
+    });
+    disabled = input(false, { transform: booleanAttribute });
+    viewed = input(false, { transform: booleanAttribute });
+    hyperlink = input(undefined, {
+        transform: (v) => v ?? undefined,
+    });
+    // Two-way model
+    model = model(undefined);
+    // Outputs (modelChange auto-generated by model() signal)
+    sdChange = output();
+    input = viewChild('input');
+    sdViewDef = contentChild(SdViewDefDirective);
+    sdLabelDef = contentChild(SdLabelDefDirective);
+    sdLabelTemplate = contentChild('sdLabel');
+    sdValueTemplate = contentChild('sdValue');
+    isFocused = false;
+    #inputControl = new FormControl();
+    #formControl = new SdFormControl();
+    #matcher;
+    separatorKeysCodes = [ENTER, COMMA];
+    constructor() {
+        effect(() => {
+            this.required();
+            this.min();
+            this.max();
+            this.#updateValidator();
+        });
+        effect(() => {
+            const values = this.model();
+            if (Array.isArray(values)) {
+                this.#formControl.setValue(values);
+            }
+        });
+        effect(() => {
+            const isDisabled = this.disabled();
+            if (isDisabled) {
+                this.#formControl.disable();
+                this.#inputControl.disable();
+            }
+            else {
+                this.#formControl.enable();
+                this.#inputControl.enable();
+            }
+        });
+        effect(() => {
+            const nameVal = this.name();
+            if (nameVal) {
+                this.#name = nameVal;
+            }
+        });
+        this.#matcher = new SdChipCalendarErrorStateMatcher(this.#formControl);
+    }
+    get formControl() {
+        return this.#formControl;
+    }
+    get inputControl() {
+        return this.#inputControl;
+    }
+    errorMessage = computed(() => {
+        void this.#state();
+        const errors = this.#formControl.errors;
+        if (!errors)
+            return undefined;
+        if (errors['required'])
+            return this.#i18n.t('core.form.chip-calendar.required');
+        if (errors['minlength'])
+            return this.#i18n.t('core.form.chip-calendar.minlength', { min: this.min() });
+        if (errors['maxlength'])
+            return this.#i18n.t('core.form.chip-calendar.maxlength', { max: this.max() });
+        return undefined;
+    });
+    get matcher() {
+        return this.#matcher;
+    }
+    ngAfterViewInit() {
+        this.#subscription.add(this.#formControl.sdChanges.subscribe(() => {
+            this.#ref.markForCheck();
+        }));
+        this.form()?.addControl(this.#name, this.#formControl);
+    }
+    ngOnDestroy() {
+        this.form()?.removeControl(this.#name);
+        this.#subscription.unsubscribe();
+    }
+    #updateValidator = () => {
+        this.#formControl.clearValidators();
+        this.#formControl.clearAsyncValidators();
+        const validators = [];
+        const asyncValidators = [];
+        if (this.required()) {
+            validators.push(Validators.required);
+        }
+        if (this.min() > 0) {
+            validators.push(Validators.minLength(this.min()));
+        }
+        if (this.max() > 0) {
+            validators.push(Validators.maxLength(this.max()));
+        }
+        this.#formControl.setValidators(validators);
+        this.#formControl.setAsyncValidators(asyncValidators);
+        this.#formControl.updateValueAndValidity();
+    };
+    #clickChip = (event, item) => {
+        event.stopPropagation();
+        event.stopImmediatePropagation();
+        if (!this.#formControl.disabled) {
+            this.#focus();
+        }
+    };
+    #remove = (item) => {
+        const values = this.#formControl.value ?? [];
+        if (typeof item === 'string') {
+            this.#formControl.setValue(values.filter(value => item !== value));
+            this.model.set(this.#formControl.value);
+            this.sdChange.emit(this.#formControl.value);
+        }
+        this.#inputControl.setValue('');
+        this.#focus();
+    };
+    #select = (event) => {
+        const item = event.option.value;
+        const values = this.#formControl.value ?? [];
+        if (item) {
+            if (typeof item === 'string' || typeof item === 'number') {
+                if (!values.includes(item)) {
+                    values.push(item);
+                    this.#formControl.setValue(values);
+                    this.model.set(this.#formControl.value);
+                    this.sdChange.emit(this.#formControl.value);
+                }
+            }
+            const inputEl = this.input();
+            if (inputEl)
+                inputEl.nativeElement.value = '';
+            this.#inputControl.setValue('', {
+                emitEvent: false,
+            });
+        }
+    };
+    #onClick = () => {
+        if (this.sdViewDef()?.templateRef) {
+            if (!this.#formControl.disabled && !this.isFocused) {
+                this.#focus();
+            }
+        }
+    };
+    #focus = () => {
+        this.isFocused = true;
+        this.#isBlurring = false;
+        setTimeout(() => {
+            if (this.isFocused) {
+                this.input()?.nativeElement?.focus();
+            }
+        }, 100);
+    };
+    #clear = (evt) => {
+        evt?.stopPropagation();
+        this.#inputControl.setValue('');
+        this.#formControl.setValue([]);
+        this.model.set(this.#formControl.value);
+        this.sdChange.emit(this.#formControl.value);
+        this.#ref.detectChanges();
+    };
+    #selectDate = (date) => {
+        const value = DateUtilities.toFormat(date, 'yyyy/MM/dd');
+        const values = this.#formControl.value ?? [];
+        if (value) {
+            if (!values.includes(value)) {
+                values.push(value);
+                this.#formControl.setValue(values);
+                this.model.set(this.#formControl.value);
+                this.sdChange.emit(this.#formControl.value);
+            }
+            else {
+                this.#formControl.setValue(values.filter(date => value !== date));
+                this.model.set(this.#formControl.value);
+                this.sdChange.emit(this.#formControl.value);
+            }
+            this.calendar()?.updateTodaysDate();
+            this.#ref.markForCheck();
+        }
+    };
+    #closeCalendar = () => {
+        this.isFocused = false;
+        this.input()?.nativeElement?.blur();
+    };
+    #dateClass = (cellDate) => {
+        const dates = this.#formControl.value || [];
+        if (Array.isArray(dates)) {
+            const selected = dates.some(date => date === DateUtilities.toFormat(cellDate, 'yyyy/MM/dd'));
+            return selected ? 'sd-chip-calendar-selected-date' : '';
+        }
+        return '';
+    };
+    onClickChip = (event, item) => this.#clickChip(event, item);
+    onRemove = (item) => this.#remove(item);
+    onSelect = (event) => this.#select(event);
+    onClick = () => this.#onClick();
+    onClear = (evt) => this.#clear(evt);
+    onSelectDate = (date) => this.#selectDate(date);
+    onCloseCalendar = () => this.#closeCalendar();
+    dateClass = (cellDate) => this.#dateClass(cellDate);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdChipCalendar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdChipCalendar, isStandalone: true, selector: "sd-chip-calendar", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, floatLabel: { classPropertyName: "floatLabel", publicName: "floatLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, hideInlineError: { classPropertyName: "hideInlineError", publicName: "hideInlineError", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, viewed: { classPropertyName: "viewed", publicName: "viewed", isSignal: true, isRequired: false, transformFunction: null }, hyperlink: { classPropertyName: "hyperlink", publicName: "hyperlink", isSignal: true, isRequired: false, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { model: "modelChange", sdChange: "sdChange" }, host: { properties: { "class.sd-has-label": "!!label()", "class.sd-viewed": "viewed()" } }, queries: [{ propertyName: "sdViewDef", first: true, predicate: SdViewDefDirective, descendants: true, isSignal: true }, { propertyName: "sdLabelDef", first: true, predicate: SdLabelDefDirective, descendants: true, isSignal: true }, { propertyName: "sdLabelTemplate", first: true, predicate: ["sdLabel"], descendants: true, isSignal: true }, { propertyName: "sdValueTemplate", first: true, predicate: ["sdValue"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "menuTrigger", first: true, predicate: MatMenuTrigger, descendants: true, isSignal: true }, { propertyName: "calendar", first: true, predicate: MatCalendar, descendants: true, isSignal: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "@let _lbl = label();\n@let _app = appearance();\n@let _req = required();\n@let _viewed = viewed();\n@let _hideErr = hideInlineError();\n@let _viewDef = sdViewDef();\n@let _labelTemplate = (sdLabelTemplate() ?? sdLabelDef()?.templateRef) || undefined;\n@let _valueTemplate = (sdValueTemplate() ?? _viewDef?.templateRef) || undefined;\n@let _errMsg = errorMessage();\n\n@if (_viewed) {\n  <sd-view\n    [label]=\"_lbl\"\n    [labelTemplate]=\"_labelTemplate\"\n    [value]=\"formControl.value\"\n    [display]=\"formControl.value\"\n    [hyperlink]=\"hyperlink()\"\n    [valueTemplate]=\"_valueTemplate\">\n  </sd-view>\n} @else {\n  @if (!_app && _labelTemplate) {\n    <ng-container *ngTemplateOutlet=\"_labelTemplate\"></ng-container>\n  }\n  @if (!_app && _lbl && !_labelTemplate) {\n    <sd-label [label]=\"_lbl\" [required]=\"_req\"></sd-label>\n  }\n\n  <div\n    class=\"d-flex align-items-center\"\n    [class.sd-view]=\"!!_viewDef?.templateRef\"\n    [class.c-focused]=\"isFocused\"\n    [class.c-disabled]=\"formControl.disabled\"\n    (click)=\"onClick()\"\n    aria-hidden=\"true\">\n    @if (_viewDef?.templateRef && !isFocused) {\n      <ng-container *ngTemplateOutlet=\"_viewDef!.templateRef; context: { value: formControl.value }\"></ng-container>\n    } @else {\n      <mat-form-field\n        [class.sd-md]=\"size() === 'md'\"\n        [class.sd-sm]=\"size() === 'sm'\"\n        [class.hide-inline-error]=\"_hideErr\"\n        [appearance]=\"_app\"\n        [floatLabel]=\"floatLabel()\">\n        @if (_app && _lbl) {\n          <mat-label>{{ _lbl }}</mat-label>\n        }\n        <mat-chip-grid [formControl]=\"formControl\" #chipList [class.sd-md]=\"size() === 'md'\" [class.sd-sm]=\"size() === 'sm'\">\n          @for (item of formControl.value; track item) {\n            @if (item) {\n              <mat-chip-row\n                [class.sd-md]=\"size() === 'md'\"\n                [class.sd-sm]=\"size() === 'sm'\"\n                [removable]=\"removable()\"\n                (removed)=\"onRemove(item)\"\n                [disabled]=\"inputControl.disabled\"\n                (click)=\"onClickChip($event, item)\"\n                [value]=\"item\">\n                <span>{{ item | date: 'dd/MM/yyyy' }}</span>\n                @if (!inputControl.disabled && item | sdRemovableChip: removable()) {\n                  <mat-icon matChipRemove>cancel</mat-icon>\n                }\n              </mat-chip-row>\n            }\n          }\n\n          <input\n            class=\"sd-chip-input\"\n            [formControl]=\"inputControl\"\n            [placeholder]=\"placeholder() || _lbl\"\n            [matChipInputFor]=\"chipList\"\n            autocomplete=\"off\"\n            [errorStateMatcher]=\"matcher\"\n            [matMenuTriggerFor]=\"calendarMenu\"\n            [required]=\"_req\"\n            matInput\n            [attr.data-autoId]=\"autoId()\"\n            [attr.data-disabled]=\"dataDisabled()\"\n            [attr.data-empty]=\"dataEmpty()\"\n            [attr.data-value]=\"dataValue()\"\n            [attr.data-count]=\"dataCount()\"\n            [attr.data-required]=\"dataRequired()\"\n            [attr.data-error-message]=\"dataErrorMessage()\"\n            readonly\n            #input />\n        </mat-chip-grid>\n\n        <mat-menu #calendarMenu=\"matMenu\" overlapTrigger=\"false\" (closed)=\"onCloseCalendar()\">\n          <div style=\"width: 280px\" (click)=\"$event.stopPropagation()\" aria-hidden=\"true\">\n            <mat-calendar (selectedChange)=\"onSelectDate($event)\" [dateClass]=\"dateClass\"> </mat-calendar>\n          </div>\n        </mat-menu>\n        @if (_hideErr && _errMsg && formControl.touched) {\n          <mat-icon matSuffix class=\"sd-error-icon\" [matTooltip]=\"_errMsg\" matTooltipPosition=\"above\"> error </mat-icon>\n        }\n\n        @if (!_hideErr && _errMsg && formControl.touched) {\n          <mat-error>{{ _errMsg }}</mat-error>\n        }\n      </mat-form-field>\n    }\n  </div>\n}\n", styles: ["@charset \"UTF-8\";.text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-light{color:var(--sd-light)!important}.bg-light{background:var(--sd-light)!important}.border-light{border-color:var(--sd-light)!important}.text-dark{color:var(--sd-dark)!important}.bg-dark{background:var(--sd-dark)!important}.border-dark{border-color:var(--sd-dark)!important}.text-black500{color:var(--sd-black500)!important}.bg-black500{background:var(--sd-black500)!important}.border-black500{border-color:var(--sd-black500)!important}.text-black400{color:var(--sd-black400)!important}.bg-black400{background:var(--sd-black400)!important}.border-black400{border-color:var(--sd-black400)!important}.text-black300{color:var(--sd-black300)!important}.bg-black300{background:var(--sd-black300)!important}.border-black300{border-color:var(--sd-black300)!important}.text-black200{color:var(--sd-black200)!important}.bg-black200{background:var(--sd-black200)!important}.border-black200{border-color:var(--sd-black200)!important}.text-black100{color:var(--sd-black100)!important}.bg-black100{background:var(--sd-black100)!important}.border-black100{border-color:var(--sd-black100)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}:host{display:block}:host(.sd-has-label){padding-top:4px}:host(.sd-viewed){padding-top:0}:host ::ng-deep .mat-mdc-form-field.no-padding-wrapper .mat-mdc-text-field-wrapper{padding-bottom:0}:host ::ng-deep mat-form-field.c-md .mat-mdc-standard-chip{padding:7px 10px;min-height:26px}:host ::ng-deep mat-form-field.c-md .mat-mdc-standard-chip .mat-mdc-chip-trailing-icon{padding:7px 7px 7px 10px}:host ::ng-deep .mat-mdc-chip-row.sd-sm{--mdc-chip-label-text-size: 12px;--mdc-chip-container-height: 20px}:host ::ng-deep .mat-mdc-chip-set.sd-md{margin-top:10px}:host ::ng-deep .mat-mdc-chip-set.sd-sm{margin-top:2px}.sd-view:not(.c-focused):not(.c-disabled):hover{background-color:#ebecf0}mat-form-field{width:100%}mat-chip-listbox{display:flex;flex-wrap:wrap;gap:4px}::ng-deep .sd-chip-calendar-selected-date .mat-calendar-body-cell-content{background-color:var(--sd-primary-light)!important;color:var(--sd-primary)!important;border-radius:50%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i6.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i6.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i6.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i6.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i7.MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i8.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i8.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: SdLabel, selector: "sd-label", inputs: ["label", "description", "required", "helperText"] }, { kind: "component", type: SdView, selector: "sd-view", inputs: ["label", "value", "display", "hyperlink", "labelTemplate", "valueTemplate", "selectedItems"] }, { kind: "pipe", type: SdRemovableChipPipe, name: "sdRemovableChip" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdChipCalendar, decorators: [{
+            type: Component,
+            args: [{ selector: 'sd-chip-calendar', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, host: { '[class.sd-has-label]': '!!label()', '[class.sd-viewed]': 'viewed()' }, imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        MatInputModule,
+                        MatTooltipModule,
+                        MatFormFieldModule,
+                        MatAutocompleteModule,
+                        MatIconModule,
+                        MatProgressSpinnerModule,
+                        MatChipsModule,
+                        MatDatepickerModule,
+                        MatNativeDateModule,
+                        MatMenuModule,
+                        SdLabel,
+                        SdView,
+                        SdRemovableChipPipe,
+                    ], template: "@let _lbl = label();\n@let _app = appearance();\n@let _req = required();\n@let _viewed = viewed();\n@let _hideErr = hideInlineError();\n@let _viewDef = sdViewDef();\n@let _labelTemplate = (sdLabelTemplate() ?? sdLabelDef()?.templateRef) || undefined;\n@let _valueTemplate = (sdValueTemplate() ?? _viewDef?.templateRef) || undefined;\n@let _errMsg = errorMessage();\n\n@if (_viewed) {\n  <sd-view\n    [label]=\"_lbl\"\n    [labelTemplate]=\"_labelTemplate\"\n    [value]=\"formControl.value\"\n    [display]=\"formControl.value\"\n    [hyperlink]=\"hyperlink()\"\n    [valueTemplate]=\"_valueTemplate\">\n  </sd-view>\n} @else {\n  @if (!_app && _labelTemplate) {\n    <ng-container *ngTemplateOutlet=\"_labelTemplate\"></ng-container>\n  }\n  @if (!_app && _lbl && !_labelTemplate) {\n    <sd-label [label]=\"_lbl\" [required]=\"_req\"></sd-label>\n  }\n\n  <div\n    class=\"d-flex align-items-center\"\n    [class.sd-view]=\"!!_viewDef?.templateRef\"\n    [class.c-focused]=\"isFocused\"\n    [class.c-disabled]=\"formControl.disabled\"\n    (click)=\"onClick()\"\n    aria-hidden=\"true\">\n    @if (_viewDef?.templateRef && !isFocused) {\n      <ng-container *ngTemplateOutlet=\"_viewDef!.templateRef; context: { value: formControl.value }\"></ng-container>\n    } @else {\n      <mat-form-field\n        [class.sd-md]=\"size() === 'md'\"\n        [class.sd-sm]=\"size() === 'sm'\"\n        [class.hide-inline-error]=\"_hideErr\"\n        [appearance]=\"_app\"\n        [floatLabel]=\"floatLabel()\">\n        @if (_app && _lbl) {\n          <mat-label>{{ _lbl }}</mat-label>\n        }\n        <mat-chip-grid [formControl]=\"formControl\" #chipList [class.sd-md]=\"size() === 'md'\" [class.sd-sm]=\"size() === 'sm'\">\n          @for (item of formControl.value; track item) {\n            @if (item) {\n              <mat-chip-row\n                [class.sd-md]=\"size() === 'md'\"\n                [class.sd-sm]=\"size() === 'sm'\"\n                [removable]=\"removable()\"\n                (removed)=\"onRemove(item)\"\n                [disabled]=\"inputControl.disabled\"\n                (click)=\"onClickChip($event, item)\"\n                [value]=\"item\">\n                <span>{{ item | date: 'dd/MM/yyyy' }}</span>\n                @if (!inputControl.disabled && item | sdRemovableChip: removable()) {\n                  <mat-icon matChipRemove>cancel</mat-icon>\n                }\n              </mat-chip-row>\n            }\n          }\n\n          <input\n            class=\"sd-chip-input\"\n            [formControl]=\"inputControl\"\n            [placeholder]=\"placeholder() || _lbl\"\n            [matChipInputFor]=\"chipList\"\n            autocomplete=\"off\"\n            [errorStateMatcher]=\"matcher\"\n            [matMenuTriggerFor]=\"calendarMenu\"\n            [required]=\"_req\"\n            matInput\n            [attr.data-autoId]=\"autoId()\"\n            [attr.data-disabled]=\"dataDisabled()\"\n            [attr.data-empty]=\"dataEmpty()\"\n            [attr.data-value]=\"dataValue()\"\n            [attr.data-count]=\"dataCount()\"\n            [attr.data-required]=\"dataRequired()\"\n            [attr.data-error-message]=\"dataErrorMessage()\"\n            readonly\n            #input />\n        </mat-chip-grid>\n\n        <mat-menu #calendarMenu=\"matMenu\" overlapTrigger=\"false\" (closed)=\"onCloseCalendar()\">\n          <div style=\"width: 280px\" (click)=\"$event.stopPropagation()\" aria-hidden=\"true\">\n            <mat-calendar (selectedChange)=\"onSelectDate($event)\" [dateClass]=\"dateClass\"> </mat-calendar>\n          </div>\n        </mat-menu>\n        @if (_hideErr && _errMsg && formControl.touched) {\n          <mat-icon matSuffix class=\"sd-error-icon\" [matTooltip]=\"_errMsg\" matTooltipPosition=\"above\"> error </mat-icon>\n        }\n\n        @if (!_hideErr && _errMsg && formControl.touched) {\n          <mat-error>{{ _errMsg }}</mat-error>\n        }\n      </mat-form-field>\n    }\n  </div>\n}\n", styles: ["@charset \"UTF-8\";.text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-light{color:var(--sd-light)!important}.bg-light{background:var(--sd-light)!important}.border-light{border-color:var(--sd-light)!important}.text-dark{color:var(--sd-dark)!important}.bg-dark{background:var(--sd-dark)!important}.border-dark{border-color:var(--sd-dark)!important}.text-black500{color:var(--sd-black500)!important}.bg-black500{background:var(--sd-black500)!important}.border-black500{border-color:var(--sd-black500)!important}.text-black400{color:var(--sd-black400)!important}.bg-black400{background:var(--sd-black400)!important}.border-black400{border-color:var(--sd-black400)!important}.text-black300{color:var(--sd-black300)!important}.bg-black300{background:var(--sd-black300)!important}.border-black300{border-color:var(--sd-black300)!important}.text-black200{color:var(--sd-black200)!important}.bg-black200{background:var(--sd-black200)!important}.border-black200{border-color:var(--sd-black200)!important}.text-black100{color:var(--sd-black100)!important}.bg-black100{background:var(--sd-black100)!important}.border-black100{border-color:var(--sd-black100)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}:host{display:block}:host(.sd-has-label){padding-top:4px}:host(.sd-viewed){padding-top:0}:host ::ng-deep .mat-mdc-form-field.no-padding-wrapper .mat-mdc-text-field-wrapper{padding-bottom:0}:host ::ng-deep mat-form-field.c-md .mat-mdc-standard-chip{padding:7px 10px;min-height:26px}:host ::ng-deep mat-form-field.c-md .mat-mdc-standard-chip .mat-mdc-chip-trailing-icon{padding:7px 7px 7px 10px}:host ::ng-deep .mat-mdc-chip-row.sd-sm{--mdc-chip-label-text-size: 12px;--mdc-chip-container-height: 20px}:host ::ng-deep .mat-mdc-chip-set.sd-md{margin-top:10px}:host ::ng-deep .mat-mdc-chip-set.sd-sm{margin-top:2px}.sd-view:not(.c-focused):not(.c-disabled):hover{background-color:#ebecf0}mat-form-field{width:100%}mat-chip-listbox{display:flex;flex-wrap:wrap;gap:4px}::ng-deep .sd-chip-calendar-selected-date .mat-calendar-body-cell-content{background-color:var(--sd-primary-light)!important;color:var(--sd-primary)!important;border-radius:50%}\n"] }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SdChipCalendar };
+//# sourceMappingURL=sdcorejs-angular-forms-chip-calendar.mjs.map