@ng-atomic/components 16.2.0 → 16.3.1

package/fesm2022/ng-atomic-components-molecules-chips-input-field.mjs

@@ -1,135 +1,150 @@
+import { __decorate } from 'tslib';
 import { ENTER, COMMA, SPACE } from '@angular/cdk/keycodes';
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
-import * as i3 from '@angular/material/chips';
+import { input, Directive, inject, DestroyRef, ChangeDetectorRef, Component, ChangeDetectionStrategy } from '@angular/core';
+import * as i1 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
-import * as i6 from '@angular/material/form-field';
-import { MatFormFieldModule } from '@angular/material/form-field';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
-import { ReplaySubject, takeUntil } from 'rxjs';
-import * as i1 from '@ng-atomic/common/services/chips-manager';
 import { ChipsManager } from '@ng-atomic/common/services/chips-manager';
-import * as i2 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i4 from '@angular/material/icon';
+import * as i2 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i5 from '@angular/material/input';
+import * as i3 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import { ChipsInputAtom } from '@ng-atomic/components/atoms/chips-input';
 import { ErrorPipe } from '@ng-atomic/common/pipes/error';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { makeConfig } from '@ng-atomic/common/services/ui';
+import { InjectableComponent, _computed, TokenizedType, NgAtomicComponent } from '@ng-atomic/core';
+import * as i4 from '@angular/material/form-field';
 
-class ChipsInputFieldMolecule {
-    constructor(cd, chipsManager) {
-        this.cd = cd;
-        this.chipsManager = chipsManager;
-        this.appearance = 'outline';
-        this.control = new FormControl('');
-        this.floatLabel = 'auto';
-        this.label = 'label';
-        this.hint = 'hint';
-        this.placeholder = 'placeholder';
-        this.separators = [ENTER, COMMA, SPACE];
-        this.destroy$ = new ReplaySubject(1);
+var ChipsInputFieldMoleculeStore_1;
+let ChipsInputFieldMoleculeStore = class ChipsInputFieldMoleculeStore extends InjectableComponent {
+    constructor() {
+        super(...arguments);
+        this.config = ChipsInputFieldMoleculeStore_1.Config.inject();
+        this.appearance = input(_computed(() => this.config().appearance));
+        this.control = input(_computed(() => this.config().control));
+        this.floatLabel = input(_computed(() => this.config().floatLabel));
+        this.label = input(_computed(() => this.config().label));
+        this.hint = input(_computed(() => this.config().hint));
+        this.placeholder = input(_computed(() => this.config().placeholder));
+        this.separators = input(_computed(() => this.config().separators));
+    }
+    static { ChipsInputFieldMoleculeStore_1 = this; }
+    static { this.Config = makeConfig(() => {
+        return () => ({
+            appearance: 'outline',
+            control: new FormControl(''),
+            floatLabel: 'auto',
+            label: 'label',
+            hint: 'hint',
+            placeholder: 'placeholder',
+            separators: [ENTER, COMMA, SPACE],
+        });
+    }, ['components', 'molecules', 'chips-input-field']); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: ChipsInputFieldMoleculeStore, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "17.2.2", type: ChipsInputFieldMoleculeStore, isStandalone: true, selector: "molecules-chips-input-field", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, floatLabel: { classPropertyName: "floatLabel", publicName: "floatLabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, separators: { classPropertyName: "separators", publicName: "separators", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
+};
+ChipsInputFieldMoleculeStore = ChipsInputFieldMoleculeStore_1 = __decorate([
+    TokenizedType()
+], ChipsInputFieldMoleculeStore);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: ChipsInputFieldMoleculeStore, decorators: [{
+            type: Directive,
+            args: [{ standalone: true, selector: 'molecules-chips-input-field' }]
+        }] });
+class ChipsInputFieldMolecule extends NgAtomicComponent {
+    constructor() {
+        super(...arguments);
+        this.destroyRef = inject(DestroyRef);
+        this.cd = inject(ChangeDetectorRef);
+        this.chipsManager = inject(ChipsManager);
+        this.store = inject(ChipsInputFieldMoleculeStore);
     }
     ngOnInit() {
-        this.chipsManager.setValue(this.control.value);
-        this.control.valueChanges.pipe(takeUntil(this.destroy$)).subscribe((value) => {
+        this.chipsManager.setValue(this.store.control().value);
+        this.store.control().valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((value) => {
             this.chipsManager.setValue(value);
             this.cd.markForCheck();
         });
     }
-    ngOnDestroy() {
-        this.destroy$.next();
-    }
     onChiInputTokenEnd(event) {
         this.chipsManager.add(event.value);
-        this.control.setValue(this.chipsManager.getValue());
+        this.store.control().setValue(this.chipsManager.getValue());
         event.input.value = '';
     }
     remove(value) {
         this.chipsManager.remove(value);
-        this.control.setValue(this.chipsManager.getValue());
+        this.store.control().setValue(this.chipsManager.getValue());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChipsInputFieldMolecule, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.ChipsManager }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ChipsInputFieldMolecule, isStandalone: true, selector: "molecules-chips-input-field", inputs: { appearance: "appearance", control: "control", floatLabel: "floatLabel", label: "label", hint: "hint", placeholder: "placeholder", separators: "separators" }, providers: [ChipsManager], ngImport: i0, template: `
-  <mat-form-field [appearance]="appearance" [floatLabel]="floatLabel">
-    <mat-label>{{ label }}</mat-label>
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: ChipsInputFieldMolecule, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.2", type: ChipsInputFieldMolecule, isStandalone: true, selector: "molecules-chips-input-field", providers: [ChipsManager], usesInheritance: true, hostDirectives: [{ directive: ChipsInputFieldMoleculeStore, inputs: ["appearance", "appearance", "control", "control", "floatLabel", "floatLabel", "label", "label", "hint", "hint", "placeholder", "placeholder", "separators", "separators"] }], ngImport: i0, template: `
+  <mat-form-field [appearance]="store.appearance()" [floatLabel]="store.floatLabel()">
+    <mat-label>{{ store.label() }}</mat-label>
     <mat-chip-grid #chipGrid>
-      <mat-chip-row *ngFor="let chip of chipsManager.chips"
-        (removed)="remove(chip)"
-        [editable]="false"
-      >
-        {{ chip }}
-        <button matChipRemove><mat-icon>cancel</mat-icon></button>
-      </mat-chip-row>
+      @for (chip of chipsManager.chips; track chip) {
+        <mat-chip-row (removed)="remove(chip)" [editable]="false">
+          {{ chip }}
+          <button matChipRemove><mat-icon>cancel</mat-icon></button>
+        </mat-chip-row>
+      }
       <input
         matInput
-        [placeholder]="placeholder"
+        [placeholder]="store.placeholder()"
         [matChipInputFor]="chipGrid"
-        [matChipInputSeparatorKeyCodes]="separators"
+        [matChipInputSeparatorKeyCodes]="store.separators()"
         [matChipInputAddOnBlur]="true"
         (matChipInputTokenEnd)="onChiInputTokenEnd($event)"
       >
     </mat-chip-grid>
-    <mat-hint *ngIf="hint">{{ hint }}</mat-hint>
-    <mat-error>{{ control.errors | error }}</mat-error>
+    @if (store.hint()) {
+      <mat-hint>{{ store.hint() }}</mat-hint>
+    }
+    <mat-error>{{ store.control().errors | error }}</mat-error>
   </mat-form-field>
-  `, isInline: true, styles: [":host{display:flex;justify-content:flex-start;align-items:center;width:100%;height:100%}:host mat-form-field{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i3.MatChipGrid, selector: "mat-chip-grid", inputs: ["tabIndex", "disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i3.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i3.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i3.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "pipe", type: ErrorPipe, name: "error" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:flex;justify-content:flex-start;align-items:center;width:100%;height:100%}:host mat-form-field{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i1.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i1.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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"], exportAs: ["matInput"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "pipe", type: ErrorPipe, name: "error" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChipsInputFieldMolecule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: ChipsInputFieldMolecule, decorators: [{
             type: Component,
             args: [{ selector: 'molecules-chips-input-field', standalone: true, imports: [
-                        CommonModule,
                         ReactiveFormsModule,
                         MatChipsModule,
                         MatIconModule,
                         MatInputModule,
-                        MatFormFieldModule,
-                        ChipsInputAtom,
                         ErrorPipe,
                     ], template: `
-  <mat-form-field [appearance]="appearance" [floatLabel]="floatLabel">
-    <mat-label>{{ label }}</mat-label>
+  <mat-form-field [appearance]="store.appearance()" [floatLabel]="store.floatLabel()">
+    <mat-label>{{ store.label() }}</mat-label>
     <mat-chip-grid #chipGrid>
-      <mat-chip-row *ngFor="let chip of chipsManager.chips"
-        (removed)="remove(chip)"
-        [editable]="false"
-      >
-        {{ chip }}
-        <button matChipRemove><mat-icon>cancel</mat-icon></button>
-      </mat-chip-row>
+      @for (chip of chipsManager.chips; track chip) {
+        <mat-chip-row (removed)="remove(chip)" [editable]="false">
+          {{ chip }}
+          <button matChipRemove><mat-icon>cancel</mat-icon></button>
+        </mat-chip-row>
+      }
       <input
         matInput
-        [placeholder]="placeholder"
+        [placeholder]="store.placeholder()"
         [matChipInputFor]="chipGrid"
-        [matChipInputSeparatorKeyCodes]="separators"
+        [matChipInputSeparatorKeyCodes]="store.separators()"
         [matChipInputAddOnBlur]="true"
         (matChipInputTokenEnd)="onChiInputTokenEnd($event)"
       >
     </mat-chip-grid>
-    <mat-hint *ngIf="hint">{{ hint }}</mat-hint>
-    <mat-error>{{ control.errors | error }}</mat-error>
+    @if (store.hint()) {
+      <mat-hint>{{ store.hint() }}</mat-hint>
+    }
+    <mat-error>{{ store.control().errors | error }}</mat-error>
   </mat-form-field>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, providers: [ChipsManager], styles: [":host{display:flex;justify-content:flex-start;align-items:center;width:100%;height:100%}:host mat-form-field{width:100%;height:100%}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.ChipsManager }]; }, propDecorators: { appearance: [{
-                type: Input
-            }], control: [{
-                type: Input
-            }], floatLabel: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], hint: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], separators: [{
-                type: Input
-            }] } });
+  `, changeDetection: ChangeDetectionStrategy.OnPush, providers: [ChipsManager], hostDirectives: [
+                        {
+                            directive: ChipsInputFieldMoleculeStore,
+                            inputs: ['appearance', 'control', 'floatLabel', 'label', 'hint', 'placeholder', 'separators'],
+                        },
+                    ], styles: [":host{display:flex;justify-content:flex-start;align-items:center;width:100%;height:100%}:host mat-form-field{width:100%;height:100%}\n"] }]
+        }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ChipsInputFieldMolecule };
+export { ChipsInputFieldMolecule, ChipsInputFieldMoleculeStore };
 //# sourceMappingURL=ng-atomic-components-molecules-chips-input-field.mjs.map

package/fesm2022/ng-atomic-components-molecules-chips-input-field.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-atomic-components-molecules-chips-input-field.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/molecules/chips-input-field/chips-input-field.molecule.ts","../../../../../packages/@ng-atomic/components/src/lib/molecules/chips-input-field/ng-atomic-components-molecules-chips-input-field.ts"],"sourcesContent":["import { COMMA, ENTER, SPACE } from '@angular/cdk/keycodes';\nimport { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input } from '@angular/core';\nimport { MatChipInputEvent, MatChipsModule } from '@angular/material/chips';\nimport { MatFormFieldAppearance, MatFormFieldModule } from '@angular/material/form-field';\nimport { FormControl, ReactiveFormsModule } from '@angular/forms';\nimport { ReplaySubject, takeUntil } from 'rxjs';\nimport { ChipsManager } from '@ng-atomic/common/services/chips-manager';\nimport { CommonModule } from '@angular/common';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatInputModule } from '@angular/material/input';\nimport { ChipsInputAtom } from '@ng-atomic/components/atoms/chips-input';\nimport { ErrorPipe } from '@ng-atomic/common/pipes/error';\n\n\n@Component({\n  selector: 'molecules-chips-input-field',\n  standalone: true,\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    MatChipsModule,\n    MatIconModule,\n    MatInputModule,\n    MatFormFieldModule,\n    ChipsInputAtom,\n    ErrorPipe,\n  ],\n  template: `\n  <mat-form-field [appearance]=\"appearance\" [floatLabel]=\"floatLabel\">\n    <mat-label>{{ label }}</mat-label>\n    <mat-chip-grid #chipGrid>\n      <mat-chip-row *ngFor=\"let chip of chipsManager.chips\"\n        (removed)=\"remove(chip)\"\n        [editable]=\"false\"\n      >\n        {{ chip }}\n        <button matChipRemove><mat-icon>cancel</mat-icon></button>\n      </mat-chip-row>\n      <input\n        matInput\n        [placeholder]=\"placeholder\"\n        [matChipInputFor]=\"chipGrid\"\n        [matChipInputSeparatorKeyCodes]=\"separators\"\n        [matChipInputAddOnBlur]=\"true\"\n        (matChipInputTokenEnd)=\"onChiInputTokenEnd($event)\"\n      >\n    </mat-chip-grid>\n    <mat-hint *ngIf=\"hint\">{{ hint }}</mat-hint>\n    <mat-error>{{ control.errors | error }}</mat-error>\n  </mat-form-field>\n  `,\n  styleUrls: ['./chips-input-field.molecule.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [ChipsManager],\n})\nexport class ChipsInputFieldMolecule {\n\n  @Input()\n  appearance: MatFormFieldAppearance = 'outline';\n\n  @Input()\n  control = new FormControl<string>('');\n\n  @Input()\n  floatLabel = 'auto';\n\n  @Input()\n  label = 'label';\n\n  @Input()\n  hint = 'hint';\n\n  @Input()\n  placeholder = 'placeholder';\n\n  @Input()\n  separators = [ENTER, COMMA, SPACE] as const;\n\n  private readonly destroy$ = new ReplaySubject<void>(1);\n\n  constructor(\n    private cd: ChangeDetectorRef,\n    public chipsManager: ChipsManager,\n  ) { }\n\n  ngOnInit(): void {\n    this.chipsManager.setValue(this.control.value!);\n    this.control.valueChanges.pipe(\n      takeUntil(this.destroy$),\n    ).subscribe((value) => {\n      this.chipsManager.setValue(value!);\n      this.cd.markForCheck();\n    });\n  }\n\n  ngOnDestroy(): void {\n    this.destroy$.next();\n  }\n\n  onChiInputTokenEnd(event: MatChipInputEvent): void {\n    this.chipsManager.add(event.value);\n    this.control.setValue(this.chipsManager.getValue());\n    event.input.value = '';\n  }\n\n  remove(value: string): void {\n    this.chipsManager.remove(value);\n    this.control.setValue(this.chipsManager.getValue());\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ng-atomic-components-molecules-chips-input-field.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/molecules/chips-input-field/chips-input-field.molecule.ts","../../../../../packages/@ng-atomic/components/src/lib/molecules/chips-input-field/ng-atomic-components-molecules-chips-input-field.ts"],"sourcesContent":["import { COMMA, ENTER, SPACE } from '@angular/cdk/keycodes';\nimport { ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, Directive, inject, input } from '@angular/core';\nimport { MatChipInputEvent, MatChipsModule } from '@angular/material/chips';\nimport { MatFormFieldAppearance } from '@angular/material/form-field';\nimport { FormControl, ReactiveFormsModule } from '@angular/forms';\nimport { ChipsManager } from '@ng-atomic/common/services/chips-manager';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatInputModule } from '@angular/material/input';\nimport { ErrorPipe } from '@ng-atomic/common/pipes/error';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { makeConfig } from '@ng-atomic/common/services/ui';\nimport { InjectableComponent, NgAtomicComponent, TokenizedType, _computed } from '@ng-atomic/core';\n\nexport interface ChipsInputMoleculeState {\n  appearance: MatFormFieldAppearance;\n  control: FormControl<string>;\n  floatLabel: 'auto' | 'always' | 'never';\n  label: string;\n  hint: string;\n  placeholder: string;\n  separators: readonly (typeof ENTER | typeof COMMA | typeof SPACE)[];\n}\n\n@TokenizedType()\n@Directive({ standalone: true, selector: 'molecules-chips-input-field' })\nexport class ChipsInputFieldMoleculeStore extends InjectableComponent {\n  static readonly Config = makeConfig(() => {\n    return () => ({\n      appearance: 'outline',\n      control: new FormControl<string>(''),\n      floatLabel: 'auto',\n      label: 'label',\n      hint: 'hint',\n      placeholder: 'placeholder',\n      separators: [ENTER, COMMA, SPACE] as const,\n    });\n  }, ['components', 'molecules', 'chips-input-field']);\n  protected readonly config = ChipsInputFieldMoleculeStore.Config.inject();\n\n  readonly appearance = input(_computed(() => this.config().appearance));\n  readonly control = input(_computed(() => this.config().control));\n  readonly floatLabel = input(_computed(() => this.config().floatLabel));\n  readonly label = input(_computed(() => this.config().label));\n  readonly hint = input(_computed(() => this.config().hint));\n  readonly placeholder = input(_computed(() => this.config().placeholder));\n  readonly separators = input(_computed(() => this.config().separators));\n}\n\n@Component({\n  selector: 'molecules-chips-input-field',\n  standalone: true,\n  imports: [\n    ReactiveFormsModule,\n    MatChipsModule,\n    MatIconModule,\n    MatInputModule,\n    ErrorPipe,\n  ],\n  template: `\n  <mat-form-field [appearance]=\"store.appearance()\" [floatLabel]=\"store.floatLabel()\">\n    <mat-label>{{ store.label() }}</mat-label>\n    <mat-chip-grid #chipGrid>\n      @for (chip of chipsManager.chips; track chip) {\n        <mat-chip-row (removed)=\"remove(chip)\" [editable]=\"false\">\n          {{ chip }}\n          <button matChipRemove><mat-icon>cancel</mat-icon></button>\n        </mat-chip-row>\n      }\n      <input\n        matInput\n        [placeholder]=\"store.placeholder()\"\n        [matChipInputFor]=\"chipGrid\"\n        [matChipInputSeparatorKeyCodes]=\"store.separators()\"\n        [matChipInputAddOnBlur]=\"true\"\n        (matChipInputTokenEnd)=\"onChiInputTokenEnd($event)\"\n      >\n    </mat-chip-grid>\n    @if (store.hint()) {\n      <mat-hint>{{ store.hint() }}</mat-hint>\n    }\n    <mat-error>{{ store.control().errors | error }}</mat-error>\n  </mat-form-field>\n  `,\n  styleUrls: ['./chips-input-field.molecule.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [ChipsManager],\n  hostDirectives: [\n    {\n      directive: ChipsInputFieldMoleculeStore,\n      inputs: ['appearance', 'control', 'floatLabel', 'label', 'hint', 'placeholder', 'separators'],\n    },\n  ],\n})\nexport class ChipsInputFieldMolecule extends NgAtomicComponent {\n  private readonly destroyRef = inject(DestroyRef);\n  private readonly cd = inject(ChangeDetectorRef);\n  protected readonly chipsManager = inject(ChipsManager);\n  protected store = inject(ChipsInputFieldMoleculeStore);\n\n  ngOnInit(): void {\n    this.chipsManager.setValue(this.store.control().value!);\n    this.store.control().valueChanges.pipe(\n      takeUntilDestroyed(this.destroyRef),\n    ).subscribe((value) => {\n      this.chipsManager.setValue(value!);\n      this.cd.markForCheck();\n    });\n  }\n\n  protected onChiInputTokenEnd(event: MatChipInputEvent): void {\n    this.chipsManager.add(event.value);\n    this.store.control().setValue(this.chipsManager.getValue());\n    event.input.value = '';\n  }\n\n  protected remove(value: string): void {\n    this.chipsManager.remove(value);\n    this.store.control().setValue(this.chipsManager.getValue());\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/ng-atomic-components-molecules-date-input-field.mjs

@@ -1,75 +1,85 @@
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
-import * as i2 from '@angular/forms';
+import { input, Directive, inject, Component, ChangeDetectionStrategy } from '@angular/core';
+import { toObservable } from '@angular/core/rxjs-interop';
+import * as i1 from '@angular/forms';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
-import * as i5 from '@angular/material/datepicker';
+import * as i4 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import * as i3 from '@angular/material/input';
+import * as i2 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 import { ErrorPipe } from '@ng-atomic/common/pipes/error';
-import { MatDayjsDateModule } from '@ng-atomic/common/utils';
+import { InjectableComponent } from '@ng-atomic/core';
 import dayjs from 'dayjs';
-import { filter } from 'rxjs/operators';
-import * as i4 from '@angular/material/form-field';
+import * as i3 from '@angular/material/form-field';
 
-class DateInputFieldMolecule {
+class DateInputFieldMoleculeStore extends InjectableComponent {
     constructor() {
-        this._control = new FormControl(dayjs());
-        this.control = new FormControl(dayjs());
-        this.label = '';
-        this.placeholder = '';
+        super(...arguments);
+        this.control = input(new FormControl(dayjs()));
+        this.label = input('');
+        this.placeholder = input('');
+        this.hint = input(null);
+        this.toggle = input(true);
+        this.control$ = toObservable(this.control);
     }
-    ngOnInit() {
-        this._control.valueChanges.pipe(filter(value => this.control.value !== value)).subscribe(value => this.control.setValue(value));
-        this.control.valueChanges.subscribe(value => this._control.setValue(value));
-        this._control.setValue(this.control.value);
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: DateInputFieldMoleculeStore, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "17.2.2", type: DateInputFieldMoleculeStore, isStandalone: true, selector: "molecules-date-input-field", inputs: { control: { classPropertyName: "control", publicName: "control", 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 }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, toggle: { classPropertyName: "toggle", publicName: "toggle", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: DateInputFieldMoleculeStore, decorators: [{
+            type: Directive,
+            args: [{ standalone: true, selector: 'molecules-date-input-field' }]
+        }] });
+class DateInputFieldMolecule {
+    constructor() {
+        this.store = inject(DateInputFieldMoleculeStore);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateInputFieldMolecule, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DateInputFieldMolecule, isStandalone: true, selector: "molecules-date-input-field", inputs: { control: "control", label: "label", placeholder: "placeholder", hint: "hint" }, host: { classAttribute: "molecule field" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: DateInputFieldMolecule, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.2", type: DateInputFieldMolecule, isStandalone: true, selector: "molecules-date-input-field", host: { classAttribute: "molecule field" }, providers: [
+        // provideDayjsDateAdapter(),
+        ], hostDirectives: [{ directive: DateInputFieldMoleculeStore, inputs: ["control", "control", "label", "label", "placeholder", "placeholder", "hint", "hint", "toggle", "toggle"] }], ngImport: i0, template: `
   <mat-form-field appearance="outline">
-    <mat-label>{{ label }}</mat-label>
-    <input matInput [formControl]="_control" [placeholder]="placeholder" [matDatepicker]="picker">
-    <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
-    <mat-datepicker #picker></mat-datepicker>
-    <mat-hint *ngIf="hint">{{ hint }}</mat-hint>
-    <mat-error>{{ control.errors | error }}</mat-error>
+    <mat-label>{{ store.label() }}</mat-label>
+    <input matInput [formControl]="store.control()" [placeholder]="store.placeholder()" [matDatepicker]="picker">
+    @if (store.toggle()) {
+      <mat-datepicker-toggle matSuffix [for]="picker" />
+    }
+    <mat-datepicker #picker />
+    @if (store.hint()) { <mat-hint>{{ store.hint() }}</mat-hint> }
+    <mat-error>{{ store.control().errors | error }}</mat-error>
   </mat-form-field>
-  `, isInline: true, styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-date-input-field-BOEH: var(--horizontal-padding)}:host{display:block;width:100%}:host mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.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"], exportAs: ["matInput"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i5.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatDayjsDateModule }, { kind: "pipe", type: ErrorPipe, name: "error" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-date-input-field-NhxI: var(--horizontal-padding)}:host{display:block;width:100%}:host mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], 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.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { 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: MatDatepickerModule }, { kind: "component", type: i4.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "pipe", type: ErrorPipe, name: "error" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateInputFieldMolecule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: DateInputFieldMolecule, decorators: [{
             type: Component,
             args: [{ selector: 'molecules-date-input-field', standalone: true, imports: [
-                        CommonModule,
                         ReactiveFormsModule,
                         MatInputModule,
                         MatDatepickerModule,
-                        MatDayjsDateModule,
                         ErrorPipe,
                     ], template: `
   <mat-form-field appearance="outline">
-    <mat-label>{{ label }}</mat-label>
-    <input matInput [formControl]="_control" [placeholder]="placeholder" [matDatepicker]="picker">
-    <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
-    <mat-datepicker #picker></mat-datepicker>
-    <mat-hint *ngIf="hint">{{ hint }}</mat-hint>
-    <mat-error>{{ control.errors | error }}</mat-error>
+    <mat-label>{{ store.label() }}</mat-label>
+    <input matInput [formControl]="store.control()" [placeholder]="store.placeholder()" [matDatepicker]="picker">
+    @if (store.toggle()) {
+      <mat-datepicker-toggle matSuffix [for]="picker" />
+    }
+    <mat-datepicker #picker />
+    @if (store.hint()) { <mat-hint>{{ store.hint() }}</mat-hint> }
+    <mat-error>{{ store.control().errors | error }}</mat-error>
   </mat-form-field>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'molecule field' }, styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-date-input-field-BOEH: var(--horizontal-padding)}:host{display:block;width:100%}:host mat-form-field{width:100%}\n"] }]
-        }], propDecorators: { control: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], hint: [{
-                type: Input
-            }] } });
+  `, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
+                        {
+                            directive: DateInputFieldMoleculeStore,
+                            inputs: ['control', 'label', 'placeholder', 'hint', 'toggle'],
+                        }
+                    ], host: { class: 'molecule field' }, providers: [
+                    // provideDayjsDateAdapter(),
+                    ], styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-date-input-field-NhxI: var(--horizontal-padding)}:host{display:block;width:100%}:host mat-form-field{width:100%}\n"] }]
+        }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { DateInputFieldMolecule };
+export { DateInputFieldMolecule, DateInputFieldMoleculeStore };
 //# sourceMappingURL=ng-atomic-components-molecules-date-input-field.mjs.map

package/fesm2022/ng-atomic-components-molecules-date-input-field.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-atomic-components-molecules-date-input-field.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/molecules/date-input-field/date-input-field.molecule.ts","../../../../../packages/@ng-atomic/components/src/lib/molecules/date-input-field/ng-atomic-components-molecules-date-input-field.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, Input } from '@angular/core';\nimport { FormControl, ReactiveFormsModule } from '@angular/forms';\nimport { MatDatepickerModule } from '@angular/material/datepicker';\nimport { MatInputModule } from '@angular/material/input';\nimport { ErrorPipe } from '@ng-atomic/common/pipes/error';\nimport { MatDayjsDateModule } from '@ng-atomic/common/utils';\nimport dayjs, { Dayjs } from 'dayjs';\nimport { filter } from 'rxjs/operators';\n\n@Component({\n  selector: 'molecules-date-input-field',\n  standalone: true,\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    MatInputModule,\n    MatDatepickerModule,\n    MatDayjsDateModule,\n    ErrorPipe,\n  ],\n  template: `\n  <mat-form-field appearance=\"outline\">\n    <mat-label>{{ label }}</mat-label>\n    <input matInput [formControl]=\"_control\" [placeholder]=\"placeholder\" [matDatepicker]=\"picker\">\n    <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    <mat-datepicker #picker></mat-datepicker>\n    <mat-hint *ngIf=\"hint\">{{ hint }}</mat-hint>\n    <mat-error>{{ control.errors | error }}</mat-error>\n  </mat-form-field>\n  `,\n  styleUrls: ['./date-input-field.molecule.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {class: 'molecule field'},\n})\nexport class DateInputFieldMolecule {\n  protected readonly _control = new FormControl<Dayjs>(dayjs());\n\n  @Input()\n  control = new FormControl<Dayjs>(dayjs());\n\n  @Input()\n  label = '';\n\n  @Input()\n  placeholder = '';\n\n  @Input()\n  hint?: string;\n\n  ngOnInit(): void {\n    this._control.valueChanges.pipe(\n      filter(value => this.control.value !== value),\n    ).subscribe(value => this.control.setValue(value));\n\n    this.control.valueChanges.subscribe(value => this._control.setValue(value));\n    this._control.setValue(this.control.value);\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ng-atomic-components-molecules-date-input-field.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/molecules/date-input-field/date-input-field.molecule.ts","../../../../../packages/@ng-atomic/components/src/lib/molecules/date-input-field/ng-atomic-components-molecules-date-input-field.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Directive, inject, input } from '@angular/core';\nimport { toObservable } from '@angular/core/rxjs-interop';\nimport { FormControl, ReactiveFormsModule } from '@angular/forms';\nimport { MatDatepickerModule } from '@angular/material/datepicker';\nimport { MatInputModule } from '@angular/material/input';\nimport { ErrorPipe } from '@ng-atomic/common/pipes/error';\nimport { InjectableComponent } from '@ng-atomic/core';\nimport dayjs, { Dayjs } from 'dayjs';\n\n@Directive({ standalone: true, selector: 'molecules-date-input-field' })\nexport class DateInputFieldMoleculeStore extends InjectableComponent {\n  readonly control = input(new FormControl<Dayjs>(dayjs()));\n  readonly label = input('');\n  readonly placeholder = input('');\n  readonly hint = input(null);\n  readonly toggle = input(true);\n  readonly control$ = toObservable(this.control);\n}\n\n@Component({\n  selector: 'molecules-date-input-field',\n  standalone: true,\n  imports: [\n    ReactiveFormsModule,\n    MatInputModule,\n    MatDatepickerModule,\n    ErrorPipe,\n  ],\n  template: `\n  <mat-form-field appearance=\"outline\">\n    <mat-label>{{ store.label() }}</mat-label>\n    <input matInput [formControl]=\"store.control()\" [placeholder]=\"store.placeholder()\" [matDatepicker]=\"picker\">\n    @if (store.toggle()) {\n      <mat-datepicker-toggle matSuffix [for]=\"picker\" />\n    }\n    <mat-datepicker #picker />\n    @if (store.hint()) { <mat-hint>{{ store.hint() }}</mat-hint> }\n    <mat-error>{{ store.control().errors | error }}</mat-error>\n  </mat-form-field>\n  `,\n  styleUrls: ['./date-input-field.molecule.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  hostDirectives: [\n    {\n      directive: DateInputFieldMoleculeStore,\n      inputs: ['control', 'label', 'placeholder', 'hint', 'toggle'],\n    }\n  ],\n  host: {class: 'molecule field'},\n  providers: [\n    // provideDayjsDateAdapter(),\n  ],\n})\nexport class DateInputFieldMolecule {\n  protected store = inject(DateInputFieldMoleculeStore);\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/ng-atomic-components-molecules-date-range-input-field.mjs

@@ -0,0 +1,82 @@
+import * as i0 from '@angular/core';
+import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i2 from '@angular/forms';
+import { FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';
+import { MatInputModule } from '@angular/material/input';
+import * as i4 from '@angular/material/datepicker';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { ErrorPipe } from '@ng-atomic/common/pipes/error';
+import dayjs from 'dayjs';
+import * as i3 from '@angular/material/form-field';
+
+class DateRangeInputFieldMolecule {
+    constructor() {
+        this.control = new FormGroup({
+            start: new FormControl(dayjs()),
+            end: new FormControl(dayjs()),
+        });
+        this.label = '';
+        this.placeholder = '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: DateRangeInputFieldMolecule, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.2", type: DateRangeInputFieldMolecule, isStandalone: true, selector: "molecules-date-range-input-field", inputs: { control: "control", label: "label", placeholder: "placeholder", hint: "hint" }, ngImport: i0, template: `
+    <mat-form-field appearance="outline">
+      <mat-label>{{ label }}</mat-label>
+      <mat-date-range-input
+        [formGroup]="control"
+        [rangePicker]="picker"
+        [comparisonStart]="control.value.start"
+        [comparisonEnd]="control.value.end">
+        <input matStartDate placeholder="Start date" formControlName="start">
+        <input matEndDate placeholder="End date" formControlName="end">
+      </mat-date-range-input>
+      <mat-hint *ngIf="hint">{{ hint }}</mat-hint>
+      <mat-error>{{ control.errors | error }}</mat-error>
+      <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
+      <mat-date-range-picker #picker></mat-date-range-picker>
+    </mat-form-field>
+  `, isInline: true, styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-date-range-input-field-6Utm: var(--horizontal-padding)}:host{display:block;width:100%}:host mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatInputModule }, { 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.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { 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: MatDatepickerModule }, { kind: "component", type: i4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i4.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i4.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i4.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i4.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "pipe", type: ErrorPipe, name: "error" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: DateRangeInputFieldMolecule, decorators: [{
+            type: Component,
+            args: [{ selector: 'molecules-date-range-input-field', standalone: true, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        MatInputModule,
+                        MatDatepickerModule,
+                        ErrorPipe,
+                    ], template: `
+    <mat-form-field appearance="outline">
+      <mat-label>{{ label }}</mat-label>
+      <mat-date-range-input
+        [formGroup]="control"
+        [rangePicker]="picker"
+        [comparisonStart]="control.value.start"
+        [comparisonEnd]="control.value.end">
+        <input matStartDate placeholder="Start date" formControlName="start">
+        <input matEndDate placeholder="End date" formControlName="end">
+      </mat-date-range-input>
+      <mat-hint *ngIf="hint">{{ hint }}</mat-hint>
+      <mat-error>{{ control.errors | error }}</mat-error>
+      <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
+      <mat-date-range-picker #picker></mat-date-range-picker>
+    </mat-form-field>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-date-range-input-field-6Utm: var(--horizontal-padding)}:host{display:block;width:100%}:host mat-form-field{width:100%}\n"] }]
+        }], propDecorators: { control: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DateRangeInputFieldMolecule };
+//# sourceMappingURL=ng-atomic-components-molecules-date-range-input-field.mjs.map

package/fesm2022/ng-atomic-components-molecules-date-range-input-field.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ng-atomic-components-molecules-date-range-input-field.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/molecules/date-range-input-field/date-range-input-field.molecule.ts","../../../../../packages/@ng-atomic/components/src/lib/molecules/date-range-input-field/ng-atomic-components-molecules-date-range-input-field.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Input } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatDatepickerModule } from '@angular/material/datepicker';\nimport { ErrorPipe } from '@ng-atomic/common/pipes/error';\nimport dayjs from 'dayjs';\n\n@Component({\n  selector: 'molecules-date-range-input-field',\n  standalone: true,\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    MatInputModule,\n    MatDatepickerModule,\n    ErrorPipe,\n  ],\n  template: `\n    <mat-form-field appearance=\"outline\">\n      <mat-label>{{ label }}</mat-label>\n      <mat-date-range-input\n        [formGroup]=\"control\"\n        [rangePicker]=\"picker\"\n        [comparisonStart]=\"control.value.start\"\n        [comparisonEnd]=\"control.value.end\">\n        <input matStartDate placeholder=\"Start date\" formControlName=\"start\">\n        <input matEndDate placeholder=\"End date\" formControlName=\"end\">\n      </mat-date-range-input>\n      <mat-hint *ngIf=\"hint\">{{ hint }}</mat-hint>\n      <mat-error>{{ control.errors | error }}</mat-error>\n      <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n      <mat-date-range-picker #picker></mat-date-range-picker>\n    </mat-form-field>\n  `,\n  styleUrls: ['./date-range-input-field.molecule.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class DateRangeInputFieldMolecule {\n  @Input() control = new FormGroup({\n    start: new FormControl(dayjs()),\n    end: new FormControl(dayjs()),\n  });\n  @Input() label = '';\n  @Input() placeholder = '';\n  @Input() hint?: string;\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}