@ng-atomic/components 16.2.0 → 16.3.1

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

@@ -1,16 +1,16 @@
 import { __decorate, __metadata } from 'tslib';
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, Input, ViewChild } from '@angular/core';
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i2 from '@angular/forms';
+import { input, computed, effect, Directive, inject, viewChild, Component, ChangeDetectionStrategy } from '@angular/core';
+import * as i1 from '@angular/forms';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
-import * as i3 from '@angular/material/input';
+import * as i2 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 import { SmartMenuButtonAtom } from '@ng-atomic/components/atoms/smart-menu-button';
 import { NgAtomicComponent, Effect } from '@ng-atomic/core';
 import { ErrorPipe } from '@ng-atomic/common/pipes/error';
-import * as i4 from '@angular/material/form-field';
+import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { switchMap, startWith } from 'rxjs';
+import * as i3 from '@angular/material/form-field';
 
 var ActionId;
 (function (ActionId) {
@@ -18,64 +18,93 @@ var ActionId;
     ActionId["FILE_SELECTED"] = "[@ng-atomic/components/molecules/file-input-field] File selected";
     ActionId["CANCEL"] = "[@ng-atomic/components/molecules/file-input-field] Cancel";
 })(ActionId || (ActionId = {}));
-class FileInputFieldMolecule extends NgAtomicComponent {
+class FileInputFieldStore {
     constructor() {
-        super(...arguments);
-        this.appearance = 'outline';
-        this.label = 'label';
-        this.control = new FormControl('');
+        this.control = input(new FormControl(null));
+        this.control$ = toObservable(this.control).pipe(takeUntilDestroyed());
+        this.controlValue$ = this.control$.pipe(switchMap(control => control.valueChanges.pipe(startWith(control.value))));
+        this.label = input('label');
+        this.placeholder = input('placeholder');
+        this.hint = input(null);
+        this.progress = input(false);
+        this.name = input(null);
+        this.appearance = input('outline');
         this._control = new FormControl({ value: '', disabled: true });
-        this.placeholder = 'placeholder';
-    }
-    static { this.ActionId = ActionId; }
-    get actions() {
-        return this.progress ? [
-            {
-                id: ActionId.CANCEL,
-                icon: 'cancel',
-                name: 'Cancel',
-                disabled: this.control.disabled,
-            },
-        ] : [
-            {
-                id: ActionId.FILE_SELECT_BUTTON_CLICK,
-                icon: 'attach_file',
-                name: 'Select file',
-                disabled: this.control.disabled,
-            },
-        ];
+        this.actions = computed(() => {
+            if (this.progress()) {
+                return [
+                    {
+                        id: ActionId.CANCEL,
+                        icon: 'cancel',
+                        name: 'Cancel',
+                        disabled: this.control().disabled,
+                    },
+                ];
+            }
+            else {
+                return [
+                    {
+                        id: ActionId.FILE_SELECT_BUTTON_CLICK,
+                        icon: 'attach_file',
+                        name: 'Select file',
+                        disabled: this.control().disabled,
+                    },
+                ];
+            }
+        });
+        // super();
+        effect(() => {
+            console.debug('progress:', this.progress());
+        });
     }
     ngOnInit() {
-        this._control.setValidators(this.control['_rawValidators']);
-        this._control.setAsyncValidators(this.control['_rawAsyncValidators']);
-        this.control.valueChanges.subscribe(value => this._control.setValue(value));
+        // super.ngOnInit();
+        this.control$.subscribe(control => {
+            this._control.setValidators(control['_rawValidators']);
+            this._control.setAsyncValidators(control['_rawAsyncValidators']);
+        });
+        this.controlValue$.subscribe(value => this._control.setValue(value));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: FileInputFieldStore, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "17.2.2", type: FileInputFieldStore, isStandalone: true, 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 }, progress: { classPropertyName: "progress", publicName: "progress", 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 } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: FileInputFieldStore, decorators: [{
+            type: Directive,
+            args: [{ standalone: true }]
+        }], ctorParameters: () => [] });
+class FileInputFieldMolecule extends NgAtomicComponent {
+    constructor() {
+        super(...arguments);
+        this.store = inject(FileInputFieldStore);
+        this.fileUpload = viewChild.required('fileUpload');
     }
+    static { this.ActionId = ActionId; }
     onFileSelectButtonClick() {
-        this.fileUpload.nativeElement.click();
+        this.fileUpload().nativeElement.click();
     }
     onFileSelected(event) {
-        this.dispatch({
-            id: ActionId.FILE_SELECTED,
-            payload: event.target.files,
-        });
-        this.fileUpload.nativeElement.value = '';
+        this.dispatch({ id: ActionId.FILE_SELECTED, payload: event.target.files });
+        // this.fileUpload().nativeElement.value = '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FileInputFieldMolecule, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FileInputFieldMolecule, isStandalone: true, selector: "molecules-file-input-field", inputs: { appearance: "appearance", name: "name", label: "label", control: "control", placeholder: "placeholder", hint: "hint", progress: "progress" }, viewQueries: [{ propertyName: "fileUpload", first: true, predicate: ["fileUpload"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
-  <mat-form-field [appearance]="appearance">
-    <mat-label>{{ label }}</mat-label>
-      <input matInput [name]="name" type="text" [formControl]="_control" [placeholder]="placeholder">
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: FileInputFieldMolecule, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.2", type: FileInputFieldMolecule, isStandalone: true, selector: "molecules-file-input-field", viewQueries: [{ propertyName: "fileUpload", first: true, predicate: ["fileUpload"], descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: FileInputFieldStore, inputs: ["control", "control", "label", "label", "placeholder", "placeholder", "hint", "hint", "progress", "progress", "name", "name", "appearance", "appearance"] }], ngImport: i0, template: `
+  <mat-form-field [appearance]="store.appearance()">
+    <mat-label>{{ store.label() }}</mat-label>
+      <input matInput [name]="store.name()" type="text" [formControl]="store._control" [placeholder]="store.placeholder()">
     <!-- <mat-icon matSuffix>sentiment_very_satisfied</mat-icon> -->
-    <mat-hint *ngIf="progress">Uploading...({{ progress?.toFixed(2) }}%)</mat-hint>
-    <mat-hint *ngIf="!progress && hint">{{ hint }}</mat-hint>
-    <mat-error>{{ control.errors | error }}</mat-error>
+    @if (store.progress()) {
+      <mat-hint>Uploading...({{ store.progress() ? store.progress()?.toFixed(2) : '' }}%)</mat-hint>
+    } @else if (store.hint()) {
+      <mat-hint>{{ store.hint() }}</mat-hint>
+    }
+    <mat-error>{{ store.control().errors | error }}</mat-error>
   </mat-form-field>
   <atoms-smart-menu-button
-    [actions]="actions"
+    [actions]="store.actions()"
     (action)="dispatch($event)"
   ></atoms-smart-menu-button>
-  <input style="display: none" type="file" value="test" (change)="onFileSelected($event)" #fileUpload>
-  `, isInline: true, styles: [":host{display:block}:host{display:flex;width:100%;flex-direction:row;align-items:center;justify-content:space-between}:host mat-form-field{width:100%}:host atoms-smart-menu-button{width:-moz-fit-content;width:fit-content;margin-bottom:20px}\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: "component", type: SmartMenuButtonAtom, selector: "atoms-smart-menu-button", inputs: ["actions"], outputs: ["action"] }, { kind: "pipe", type: ErrorPipe, name: "error" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  <input style="display: none" type="file" (change)="onFileSelected($event)" #fileUpload>
+  `, isInline: true, styles: [":host{display:block}:host{display:flex;width:100%;flex-direction:row;align-items:center;justify-content:space-between}:host mat-form-field{width:100%}:host atoms-smart-menu-button{width:-moz-fit-content;width:fit-content;margin-bottom:20px}\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: "component", type: SmartMenuButtonAtom, selector: "atoms-smart-menu-button" }, { kind: "pipe", type: ErrorPipe, name: "error" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 __decorate([
     Effect(ActionId.FILE_SELECT_BUTTON_CLICK),
@@ -83,51 +112,41 @@ __decorate([
     __metadata("design:paramtypes", []),
     __metadata("design:returntype", void 0)
 ], FileInputFieldMolecule.prototype, "onFileSelectButtonClick", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FileInputFieldMolecule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: FileInputFieldMolecule, decorators: [{
             type: Component,
             args: [{ selector: 'molecules-file-input-field', standalone: true, imports: [
-                        CommonModule,
                         ReactiveFormsModule,
                         MatInputModule,
                         SmartMenuButtonAtom,
                         ErrorPipe,
                     ], template: `
-  <mat-form-field [appearance]="appearance">
-    <mat-label>{{ label }}</mat-label>
-      <input matInput [name]="name" type="text" [formControl]="_control" [placeholder]="placeholder">
+  <mat-form-field [appearance]="store.appearance()">
+    <mat-label>{{ store.label() }}</mat-label>
+      <input matInput [name]="store.name()" type="text" [formControl]="store._control" [placeholder]="store.placeholder()">
     <!-- <mat-icon matSuffix>sentiment_very_satisfied</mat-icon> -->
-    <mat-hint *ngIf="progress">Uploading...({{ progress?.toFixed(2) }}%)</mat-hint>
-    <mat-hint *ngIf="!progress && hint">{{ hint }}</mat-hint>
-    <mat-error>{{ control.errors | error }}</mat-error>
+    @if (store.progress()) {
+      <mat-hint>Uploading...({{ store.progress() ? store.progress()?.toFixed(2) : '' }}%)</mat-hint>
+    } @else if (store.hint()) {
+      <mat-hint>{{ store.hint() }}</mat-hint>
+    }
+    <mat-error>{{ store.control().errors | error }}</mat-error>
   </mat-form-field>
   <atoms-smart-menu-button
-    [actions]="actions"
+    [actions]="store.actions()"
     (action)="dispatch($event)"
   ></atoms-smart-menu-button>
-  <input style="display: none" type="file" value="test" (change)="onFileSelected($event)" #fileUpload>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}:host{display:flex;width:100%;flex-direction:row;align-items:center;justify-content:space-between}:host mat-form-field{width:100%}:host atoms-smart-menu-button{width:-moz-fit-content;width:fit-content;margin-bottom:20px}\n"] }]
-        }], propDecorators: { appearance: [{
-                type: Input
-            }], name: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], control: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], hint: [{
-                type: Input
-            }], progress: [{
-                type: Input
-            }], fileUpload: [{
-                type: ViewChild,
-                args: ['fileUpload', { static: true }]
-            }], onFileSelectButtonClick: [] } });
+  <input style="display: none" type="file" (change)="onFileSelected($event)" #fileUpload>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
+                        {
+                            directive: FileInputFieldStore,
+                            inputs: ['control', 'label', 'placeholder', 'hint', 'progress', 'name', 'appearance'],
+                        }
+                    ], styles: [":host{display:block}:host{display:flex;width:100%;flex-direction:row;align-items:center;justify-content:space-between}:host mat-form-field{width:100%}:host atoms-smart-menu-button{width:-moz-fit-content;width:fit-content;margin-bottom:20px}\n"] }]
+        }], propDecorators: { onFileSelectButtonClick: [] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { FileInputFieldMolecule };
+export { FileInputFieldMolecule, FileInputFieldStore };
 //# sourceMappingURL=ng-atomic-components-molecules-file-input-field.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"ng-atomic-components-molecules-file-input-field.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/molecules/file-input-field/file-input-field.molecule.ts","../../../../../packages/@ng-atomic/components/src/lib/molecules/file-input-field/ng-atomic-components-molecules-file-input-field.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, ElementRef, Input, ViewChild } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';\nimport { MatInputModule } from '@angular/material/input';\nimport { SmartMenuButtonAtom } from '@ng-atomic/components/atoms/smart-menu-button';\nimport { Effect, NgAtomicComponent } from '@ng-atomic/core';\nimport { ErrorPipe } from '@ng-atomic/common/pipes/error';\n\nenum ActionId {\n  FILE_SELECT_BUTTON_CLICK = '[@ng-atomic/components/molecules/file-input-field] File select button click',\n  FILE_SELECTED = '[@ng-atomic/components/molecules/file-input-field] File selected',\n  CANCEL = '[@ng-atomic/components/molecules/file-input-field] Cancel',\n}\n\n@Component({\n  selector: 'molecules-file-input-field',\n  standalone: true,\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    MatInputModule,\n    SmartMenuButtonAtom,\n    ErrorPipe,\n  ],\n  template: `\n  <mat-form-field [appearance]=\"appearance\">\n    <mat-label>{{ label }}</mat-label>\n      <input matInput [name]=\"name\" type=\"text\" [formControl]=\"_control\" [placeholder]=\"placeholder\">\n    <!-- <mat-icon matSuffix>sentiment_very_satisfied</mat-icon> -->\n    <mat-hint *ngIf=\"progress\">Uploading...({{ progress?.toFixed(2) }}%)</mat-hint>\n    <mat-hint *ngIf=\"!progress && hint\">{{ hint }}</mat-hint>\n    <mat-error>{{ control.errors | error }}</mat-error>\n  </mat-form-field>\n  <atoms-smart-menu-button\n    [actions]=\"actions\"\n    (action)=\"dispatch($event)\"\n  ></atoms-smart-menu-button>\n  <input style=\"display: none\" type=\"file\" value=\"test\" (change)=\"onFileSelected($event)\" #fileUpload>\n  `,\n  styleUrls: ['./file-input-field.molecule.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class FileInputFieldMolecule extends NgAtomicComponent {\n  static ActionId = ActionId;\n  \n  protected get actions() {\n    return this.progress ? [\n      {\n        id: ActionId.CANCEL,\n        icon: 'cancel',\n        name: 'Cancel',\n        disabled: this.control.disabled,\n      },\n    ] : [\n      {\n        id: ActionId.FILE_SELECT_BUTTON_CLICK,\n        icon: 'attach_file',\n        name: 'Select file',\n        disabled: this.control.disabled,\n      },\n    ];\n  }\n\n  @Input()\n  appearance: 'outline' | 'fill' = 'outline';\n\n  @Input()\n  name?: string;\n\n  @Input()\n  label = 'label';\n\n  @Input()\n  control = new FormControl<string | number>('');\n\n  protected _control = new FormControl<string | number>({value: '', disabled: true});\n\n  @Input()\n  placeholder = 'placeholder';\n\n  @Input()\n  hint?: string;\n\n  @Input()\n  progress?: number;\n\n  @ViewChild('fileUpload', { static: true })\n  protected fileUpload: ElementRef<HTMLInputElement>;\n\n  ngOnInit() {\n    this._control.setValidators(this.control['_rawValidators']);\n    this._control.setAsyncValidators(this.control['_rawAsyncValidators']);\n    this.control.valueChanges.subscribe(value => this._control.setValue(value));\n  }\n\n  @Effect(ActionId.FILE_SELECT_BUTTON_CLICK)\n  protected onFileSelectButtonClick() {\n    this.fileUpload.nativeElement.click();\n  }\n\n  protected onFileSelected(event: Event & {target: HTMLInputElement}) {\n    this.dispatch({\n      id: ActionId.FILE_SELECTED,\n      payload: event.target.files,\n    });\n    this.fileUpload.nativeElement.value = '';\n  }\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-file-input-field.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/molecules/file-input-field/file-input-field.molecule.ts","../../../../../packages/@ng-atomic/components/src/lib/molecules/file-input-field/ng-atomic-components-molecules-file-input-field.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Directive, ElementRef, computed, effect, inject, input, viewChild } from '@angular/core';\nimport { FormControl, ReactiveFormsModule } from '@angular/forms';\nimport { MatInputModule } from '@angular/material/input';\nimport { SmartMenuButtonAtom } from '@ng-atomic/components/atoms/smart-menu-button';\nimport { Effect, NgAtomicComponent } from '@ng-atomic/core';\nimport { ErrorPipe } from '@ng-atomic/common/pipes/error';\nimport { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';\nimport { startWith, switchMap } from 'rxjs';\n\nenum ActionId {\n  FILE_SELECT_BUTTON_CLICK = '[@ng-atomic/components/molecules/file-input-field] File select button click',\n  FILE_SELECTED = '[@ng-atomic/components/molecules/file-input-field] File selected',\n  CANCEL = '[@ng-atomic/components/molecules/file-input-field] Cancel',\n}\n\n@Directive({ standalone: true })\nexport class FileInputFieldStore {\n  readonly control = input(new FormControl(null));\n  readonly control$ = toObservable(this.control).pipe(takeUntilDestroyed());\n  readonly controlValue$ = this.control$.pipe(\n    switchMap(control => control.valueChanges.pipe(startWith(control.value))),\n  );\n  readonly label = input('label');\n  readonly placeholder = input('placeholder');\n  readonly hint = input<string | null>(null);\n  readonly progress = input<number | false>(false);\n  readonly name = input<string | null>(null);\n  readonly appearance = input<'outline' | 'fill'>('outline');\n  readonly _control = new FormControl<string | number>({value: '', disabled: true});\n\n  constructor() {\n    // super();\n    effect(() => {\n      console.debug('progress:', this.progress());\n    });\n  }\n\n  ngOnInit() {\n    // super.ngOnInit();\n    this.control$.subscribe(control => {\n      this._control.setValidators(control['_rawValidators']);\n      this._control.setAsyncValidators(control['_rawAsyncValidators']);\n    });\n\n    this.controlValue$.subscribe(value => this._control.setValue(value));\n  }\n\n  readonly actions = computed(() => {\n    if (this.progress()) {\n      return [\n        {\n          id: ActionId.CANCEL,\n          icon: 'cancel',\n          name: 'Cancel',\n          disabled: this.control().disabled,\n        },\n      ];\n    } else {\n      return [\n        {\n          id: ActionId.FILE_SELECT_BUTTON_CLICK,\n          icon: 'attach_file',\n          name: 'Select file',\n          disabled: this.control().disabled,\n        },\n      ];\n    }\n  });\n}\n\n@Component({\n  selector: 'molecules-file-input-field',\n  standalone: true,\n  imports: [\n    ReactiveFormsModule,\n    MatInputModule,\n    SmartMenuButtonAtom,\n    ErrorPipe,\n  ],\n  template: `\n  <mat-form-field [appearance]=\"store.appearance()\">\n    <mat-label>{{ store.label() }}</mat-label>\n      <input matInput [name]=\"store.name()\" type=\"text\" [formControl]=\"store._control\" [placeholder]=\"store.placeholder()\">\n    <!-- <mat-icon matSuffix>sentiment_very_satisfied</mat-icon> -->\n    @if (store.progress()) {\n      <mat-hint>Uploading...({{ store.progress() ? store.progress()?.toFixed(2) : '' }}%)</mat-hint>\n    } @else 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  <atoms-smart-menu-button\n    [actions]=\"store.actions()\"\n    (action)=\"dispatch($event)\"\n  ></atoms-smart-menu-button>\n  <input style=\"display: none\" type=\"file\" (change)=\"onFileSelected($event)\" #fileUpload>\n  `,\n  styleUrls: ['./file-input-field.molecule.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  hostDirectives: [\n    {\n      directive: FileInputFieldStore,\n      inputs: ['control', 'label', 'placeholder', 'hint', 'progress', 'name', 'appearance'],\n    }\n  ]\n})\nexport class FileInputFieldMolecule extends NgAtomicComponent {\n  static readonly ActionId = ActionId;\n  protected readonly store = inject(FileInputFieldStore);\n  protected readonly fileUpload = viewChild.required<ElementRef<HTMLInputElement>>('fileUpload');\n  \n  @Effect(ActionId.FILE_SELECT_BUTTON_CLICK)\n  protected onFileSelectButtonClick() {\n    this.fileUpload().nativeElement.click();\n  }\n\n  protected onFileSelected(event: Event & {target: HTMLInputElement}) {\n    this.dispatch({id: ActionId.FILE_SELECTED, payload: event.target.files});\n    // this.fileUpload().nativeElement.value = '';\n  }\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-grid-item.mjs

@@ -0,0 +1,75 @@
+import * as i0 from '@angular/core';
+import { input, Component, ChangeDetectionStrategy } from '@angular/core';
+import * as i1 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i3 from '@angular/material/core';
+import { MatRippleModule } from '@angular/material/core';
+import * as i2 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import { DataAccessorPipe } from '@ng-atomic/common/pipes/data-accessor';
+import { NgAtomicComponent } from '@ng-atomic/core';
+import { FallbackSrcDirective } from '@ng-atomic/common/directives/fallback-src';
+
+var ActionId;
+(function (ActionId) {
+    ActionId["ITEM_CLICK"] = "[@ng-atomic/components/organisms/grid-cards-section] Item Click";
+})(ActionId || (ActionId = {}));
+class GridItemMolecule extends NgAtomicComponent {
+    constructor() {
+        super(...arguments);
+        this.item = input();
+    }
+    static { this.ActionId = ActionId; }
+    onItemMenuClick(item, $event) {
+        $event.stopPropagation();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: GridItemMolecule, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.2.2", type: GridItemMolecule, isStandalone: true, selector: "molecules-grid-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+  <div class="content" matRipple>
+    <button mat-icon-button color="primary" (click)="onItemMenuClick(item(), $event)">
+      <mat-icon>menu</mat-icon>
+    </button>
+    <div class="eye-catch">
+      <img fallbackSrc [src]="item() | dataAccessor:'imgUrl'" alt="サムネイル画像">
+      <div class="label">{{ item() | dataAccessor:'label' }}</div>
+    </div>
+    <div class="meta">
+      <div class="title">{{ item() | dataAccessor:'title' }}</div>
+      <div class="description"><span>{{ item() | dataAccessor:'description' }}</span></div>
+      <div class="sub"><span>{{ item() | dataAccessor:'sub' }}</span></div>
+    </div>
+  </div>
+  `, isInline: true, styles: [":host{display:block;--primary-color: #444;--primary-color-SCOPED-IN-grid-item-olQV: var(--primary-color);--on-surface-color: #444;--on-surface-color-SCOPED-IN-grid-item-olQV: var(--on-surface-color)}:host{position:relative;text-align:center;cursor:pointer;aspect-ratio:1/1}:host button{position:absolute;top:0;right:0}:host ::ng-deep>mat-card{display:flex;justify-content:flex-start;align-items:flex-start}:host .eye-catch{position:relative;width:100%;aspect-ratio:16/9;background-color:#444;border-radius:0 0 8px 8px;overflow:hidden}:host .eye-catch img{width:100%;aspect-ratio:16/9;object-fit:cover}:host .eye-catch .label{position:absolute;right:6px;bottom:8px;line-height:1.5em;font-size:1.2em;color:#fff;background:#000;opacity:.6;border-radius:6px;padding:4px 8px}:host .meta{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;padding:8px 8px 24px;box-sizing:border-box}:host .meta .title{display:-webkit-box;text-align:start;font-size:1.4em;font-weight:700;line-height:1.5em;letter-spacing:.04em;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-overflow:ellipsis;white-space:normal;overflow:hidden;color:var(--on-surface-color-SCOPED-IN-grid-item-olQV)}:host .meta .description,:host .meta .sub{overflow:hidden;text-align:start;font-size:1.2em;letter-spacing:.04em;color:gray}:host .meta .description span,:host .meta .sub span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}\n"], dependencies: [{ kind: "pipe", type: DataAccessorPipe, name: "dataAccessor" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i3.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: FallbackSrcDirective, selector: "[fallbackSrc]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: GridItemMolecule, decorators: [{
+            type: Component,
+            args: [{ selector: 'molecules-grid-item', standalone: true, imports: [
+                        DataAccessorPipe,
+                        MatButtonModule,
+                        MatIconModule,
+                        MatRippleModule,
+                        FallbackSrcDirective,
+                    ], template: `
+  <div class="content" matRipple>
+    <button mat-icon-button color="primary" (click)="onItemMenuClick(item(), $event)">
+      <mat-icon>menu</mat-icon>
+    </button>
+    <div class="eye-catch">
+      <img fallbackSrc [src]="item() | dataAccessor:'imgUrl'" alt="サムネイル画像">
+      <div class="label">{{ item() | dataAccessor:'label' }}</div>
+    </div>
+    <div class="meta">
+      <div class="title">{{ item() | dataAccessor:'title' }}</div>
+      <div class="description"><span>{{ item() | dataAccessor:'description' }}</span></div>
+      <div class="sub"><span>{{ item() | dataAccessor:'sub' }}</span></div>
+    </div>
+  </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;--primary-color: #444;--primary-color-SCOPED-IN-grid-item-olQV: var(--primary-color);--on-surface-color: #444;--on-surface-color-SCOPED-IN-grid-item-olQV: var(--on-surface-color)}:host{position:relative;text-align:center;cursor:pointer;aspect-ratio:1/1}:host button{position:absolute;top:0;right:0}:host ::ng-deep>mat-card{display:flex;justify-content:flex-start;align-items:flex-start}:host .eye-catch{position:relative;width:100%;aspect-ratio:16/9;background-color:#444;border-radius:0 0 8px 8px;overflow:hidden}:host .eye-catch img{width:100%;aspect-ratio:16/9;object-fit:cover}:host .eye-catch .label{position:absolute;right:6px;bottom:8px;line-height:1.5em;font-size:1.2em;color:#fff;background:#000;opacity:.6;border-radius:6px;padding:4px 8px}:host .meta{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;padding:8px 8px 24px;box-sizing:border-box}:host .meta .title{display:-webkit-box;text-align:start;font-size:1.4em;font-weight:700;line-height:1.5em;letter-spacing:.04em;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-overflow:ellipsis;white-space:normal;overflow:hidden;color:var(--on-surface-color-SCOPED-IN-grid-item-olQV)}:host .meta .description,:host .meta .sub{overflow:hidden;text-align:start;font-size:1.2em;letter-spacing:.04em;color:gray}:host .meta .description span,:host .meta .sub span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}\n"] }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { GridItemMolecule };
+//# sourceMappingURL=ng-atomic-components-molecules-grid-item.mjs.map

package/fesm2022/ng-atomic-components-molecules-grid-item.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ng-atomic-components-molecules-grid-item.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/molecules/grid-item/grid-item.molecule.ts","../../../../../packages/@ng-atomic/components/src/lib/molecules/grid-item/ng-atomic-components-molecules-grid-item.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatRippleModule } from '@angular/material/core';\nimport { MatIconModule } from '@angular/material/icon';\nimport { DataAccessorPipe } from '@ng-atomic/common/pipes/data-accessor';\nimport { NgAtomicComponent } from '@ng-atomic/core';\nimport { FallbackSrcDirective } from '@ng-atomic/common/directives/fallback-src';\n\nenum ActionId {\n  ITEM_CLICK = '[@ng-atomic/components/organisms/grid-cards-section] Item Click',\n}\n\n@Component({\n  selector: 'molecules-grid-item',\n  standalone: true,\n  imports: [\n    DataAccessorPipe,\n    MatButtonModule,\n    MatIconModule,\n    MatRippleModule,\n    FallbackSrcDirective,\n  ],\n  template: `\n  <div class=\"content\" matRipple>\n    <button mat-icon-button color=\"primary\" (click)=\"onItemMenuClick(item(), $event)\">\n      <mat-icon>menu</mat-icon>\n    </button>\n    <div class=\"eye-catch\">\n      <img fallbackSrc [src]=\"item() | dataAccessor:'imgUrl'\" alt=\"サムネイル画像\">\n      <div class=\"label\">{{ item() | dataAccessor:'label' }}</div>\n    </div>\n    <div class=\"meta\">\n      <div class=\"title\">{{ item() | dataAccessor:'title' }}</div>\n      <div class=\"description\"><span>{{ item() | dataAccessor:'description' }}</span></div>\n      <div class=\"sub\"><span>{{ item() | dataAccessor:'sub' }}</span></div>\n    </div>\n  </div>\n  `,\n  styleUrl: './grid-item.molecule.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class GridItemMolecule<T> extends NgAtomicComponent {\n  static readonly ActionId = ActionId;\n  readonly item = input<T>();\n\n  protected onItemMenuClick(item: T, $event: Event) {\n    $event.stopPropagation();\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;;AAQA,IAAK,QAEJ,CAAA;AAFD,CAAA,UAAK,QAAQ,EAAA;AACX,IAAA,QAAA,CAAA,YAAA,CAAA,GAAA,iEAA8E,CAAA;AAChF,CAAC,EAFI,QAAQ,KAAR,QAAQ,GAEZ,EAAA,CAAA,CAAA,CAAA;AA+BK,MAAO,gBAAoB,SAAQ,iBAAiB,CAAA;AA7B1D,IAAA,WAAA,GAAA;;QA+BW,IAAI,CAAA,IAAA,GAAG,KAAK,EAAK,CAAC;AAK5B,KAAA;aANiB,IAAQ,CAAA,QAAA,GAAG,QAAH,CAAY,EAAA;IAG1B,eAAe,CAAC,IAAO,EAAE,MAAa,EAAA;QAC9C,MAAM,CAAC,eAAe,EAAE,CAAC;KAC1B;8GANU,gBAAgB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAhB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,gBAAgB,EAnBjB,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,qBAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA;;;;;;;;;;;;;;;GAeT,EArBC,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,u6CAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,gBAAgB,oDAChB,eAAe,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,aAAA,EAAA,QAAA,EAAA,yBAAA,EAAA,QAAA,EAAA,CAAA,WAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EACf,aAAa,EACb,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,SAAA,EAAA,SAAA,EAAA,UAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,eAAe,mSACf,oBAAoB,EAAA,QAAA,EAAA,eAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA;;2FAqBX,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBA7B5B,SAAS;+BACE,qBAAqB,EAAA,UAAA,EACnB,IAAI,EACP,OAAA,EAAA;wBACP,gBAAgB;wBAChB,eAAe;wBACf,aAAa;wBACb,eAAe;wBACf,oBAAoB;qBACrB,EACS,QAAA,EAAA,CAAA;;;;;;;;;;;;;;;GAeT,EAEgB,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,MAAA,EAAA,CAAA,u6CAAA,CAAA,EAAA,CAAA;;;ACvCjD;;AAEG;;;;"}

package/fesm2022/ng-atomic-components-molecules-header.mjs

@@ -1,28 +1,51 @@
-import { CommonModule } from '@angular/common';
+import { __decorate } from 'tslib';
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
+import { input, Directive, inject, Component, ChangeDetectionStrategy } from '@angular/core';
+import { InjectableComponent, TokenizedType, NgAtomicComponent } from '@ng-atomic/core';
 
-class HeaderMolecule {
+let HeaderMoleculeStore = class HeaderMoleculeStore extends InjectableComponent {
     constructor() {
-        this.title = 'title';
+        super(...arguments);
+        this.title = input('title');
+        this.description = input('');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HeaderMolecule, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: HeaderMolecule, isStandalone: true, selector: "molecules-header", inputs: { title: "title", description: "description" }, ngImport: i0, template: "<span class=\"title\">{{ title ?? '' }}</span>\n<span class=\"description\">{{ description ?? '' }}</span>\n", styles: [":host{display:block}:host{display:flex;flex-direction:row;justify-content:center;align-items:flex-end}:host .description{line-height:1em;font-size:12px;margin-bottom:8px;margin-left:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: HeaderMoleculeStore, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "17.2.2", type: HeaderMoleculeStore, isStandalone: true, selector: "molecules-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
+};
+HeaderMoleculeStore = __decorate([
+    TokenizedType()
+], HeaderMoleculeStore);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: HeaderMoleculeStore, decorators: [{
+            type: Directive,
+            args: [{ standalone: true, selector: 'molecules-header' }]
+        }] });
+class HeaderMolecule extends NgAtomicComponent {
+    constructor() {
+        super(...arguments);
+        this.store = inject(HeaderMoleculeStore);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: HeaderMolecule, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.2", type: HeaderMolecule, isStandalone: true, selector: "molecules-header", usesInheritance: true, hostDirectives: [{ directive: HeaderMoleculeStore, inputs: ["title", "title", "description", "description"] }], ngImport: i0, template: `
+    <span class="title">{{ store.title() ?? '' }}</span>
+    <span class="description">{{ store.description() ?? '' }}</span>
+  `, isInline: true, styles: [":host{display:block}:host{display:flex;flex-direction:row;align-items:flex-end;width:100%;justify-content:flex-start}:host .title{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}:host .description{line-height:1em;font-size:12px;margin-bottom:8px;margin-left:4px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HeaderMolecule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: HeaderMolecule, decorators: [{
             type: Component,
-            args: [{ selector: 'molecules-header', standalone: true, imports: [
-                        CommonModule,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"title\">{{ title ?? '' }}</span>\n<span class=\"description\">{{ description ?? '' }}</span>\n", styles: [":host{display:block}:host{display:flex;flex-direction:row;justify-content:center;align-items:flex-end}:host .description{line-height:1em;font-size:12px;margin-bottom:8px;margin-left:4px}\n"] }]
-        }], propDecorators: { title: [{
-                type: Input
-            }], description: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'molecules-header', standalone: true, template: `
+    <span class="title">{{ store.title() ?? '' }}</span>
+    <span class="description">{{ store.description() ?? '' }}</span>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
+                        {
+                            directive: HeaderMoleculeStore,
+                            inputs: ['title', 'description']
+                        }
+                    ], styles: [":host{display:block}:host{display:flex;flex-direction:row;align-items:flex-end;width:100%;justify-content:flex-start}:host .title{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}:host .description{line-height:1em;font-size:12px;margin-bottom:8px;margin-left:4px}\n"] }]
+        }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { HeaderMolecule };
+export { HeaderMolecule, HeaderMoleculeStore };
 //# sourceMappingURL=ng-atomic-components-molecules-header.mjs.map

package/fesm2022/ng-atomic-components-molecules-header.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-atomic-components-molecules-header.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/molecules/header/header.molecule.ts","../../../../../packages/@ng-atomic/components/src/lib/molecules/header/header.molecule.html","../../../../../packages/@ng-atomic/components/src/lib/molecules/header/ng-atomic-components-molecules-header.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { Component, ChangeDetectionStrategy, Input } from '@angular/core';\n\n@Component({\n  selector: 'molecules-header',\n  standalone: true,\n  imports: [\n    CommonModule,\n  ],\n  templateUrl: './header.molecule.html',\n  styleUrls: ['./header.molecule.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class HeaderMolecule {\n\n  @Input()\n  title = 'title';\n\n  @Input()\n  description?: string;\n\n}\n","<span class=\"title\">{{ title ?? '' }}</span>\n<span class=\"description\">{{ description ?? '' }}</span>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAaa,cAAc,CAAA;AAV3B,IAAA,WAAA,GAAA;QAaE,IAAK,CAAA,KAAA,GAAG,OAAO,CAAC;AAKjB,KAAA;+GARY,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;mGAAd,cAAc,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,OAAA,EAAA,WAAA,EAAA,aAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECb3B,8GAEA,EAAA,MAAA,EAAA,CAAA,8LAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDKI,YAAY,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA;;4FAMH,cAAc,EAAA,UAAA,EAAA,CAAA;kBAV1B,SAAS;+BACE,kBAAkB,EAAA,UAAA,EAChB,IAAI,EACP,OAAA,EAAA;wBACP,YAAY;qBACb,EAGgB,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,8GAAA,EAAA,MAAA,EAAA,CAAA,8LAAA,CAAA,EAAA,CAAA;8BAK/C,KAAK,EAAA,CAAA;sBADJ,KAAK;gBAIN,WAAW,EAAA,CAAA;sBADV,KAAK;;;AElBR;;AAEG;;;;"}
+{"version":3,"file":"ng-atomic-components-molecules-header.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/molecules/header/header.molecule.ts","../../../../../packages/@ng-atomic/components/src/lib/molecules/header/ng-atomic-components-molecules-header.ts"],"sourcesContent":["import { Component, ChangeDetectionStrategy, Directive, input, inject } from '@angular/core';\nimport { InjectableComponent, NgAtomicComponent, TokenizedType } from '@ng-atomic/core';\n\n@TokenizedType()\n@Directive({ standalone: true, selector: 'molecules-header' })\nexport class HeaderMoleculeStore extends InjectableComponent {\n  readonly title = input('title');\n  readonly description = input('');\n}\n\n@Component({\n  selector: 'molecules-header',\n  standalone: true,\n  template: `\n    <span class=\"title\">{{ store.title() ?? '' }}</span>\n    <span class=\"description\">{{ store.description() ?? '' }}</span>\n  `,\n  styleUrls: ['./header.molecule.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  hostDirectives: [\n    {\n      directive: HeaderMoleculeStore,\n      inputs: ['title', 'description']\n    }\n  ]\n})\nexport class HeaderMolecule extends NgAtomicComponent {\n  protected store = inject(HeaderMoleculeStore);\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAKO,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,mBAAmB,CAAA;AAArD,IAAA,WAAA,GAAA;;AACI,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC;AACvB,QAAA,IAAA,CAAA,WAAW,GAAG,KAAK,CAAC,EAAE,CAAC,CAAC;AAClC,KAAA;8GAHY,mBAAmB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;kGAAnB,mBAAmB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA,EAAA;;AAAnB,mBAAmB,GAAA,UAAA,CAAA;AAF/B,IAAA,aAAa,EAAE;AAEH,CAAA,EAAA,mBAAmB,CAG/B,CAAA;2FAHY,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAD/B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE,kBAAkB,EAAE,CAAA;;AAsBvD,MAAO,cAAe,SAAQ,iBAAiB,CAAA;AAhBrD,IAAA,WAAA,GAAA;;AAiBY,QAAA,IAAA,CAAA,KAAK,GAAG,MAAM,CAAC,mBAAmB,CAAC,CAAC;AAC/C,KAAA;8GAFY,cAAc,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;kGAAd,cAAc,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,eAAA,EAAA,IAAA,EAAA,cAAA,EAAA,CAAA,EAAA,SAAA,EArBd,mBAAmB,EAQpB,MAAA,EAAA,CAAA,OAAA,EAAA,OAAA,EAAA,aAAA,EAAA,aAAA,CAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA;;;AAGT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,oRAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA;;2FAUU,cAAc,EAAA,UAAA,EAAA,CAAA;kBAhB1B,SAAS;+BACE,kBAAkB,EAAA,UAAA,EAChB,IAAI,EACN,QAAA,EAAA,CAAA;;;GAGT,EAEgB,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAC/B,cAAA,EAAA;AACd,wBAAA;AACE,4BAAA,SAAS,EAAE,mBAAmB;AAC9B,4BAAA,MAAM,EAAE,CAAC,OAAO,EAAE,aAAa,CAAC;AACjC,yBAAA;AACF,qBAAA,EAAA,MAAA,EAAA,CAAA,oRAAA,CAAA,EAAA,CAAA;;;ACxBH;;AAEG;;;;"}

package/fesm2022/ng-atomic-components-molecules-loading-box.mjs

@@ -0,0 +1,62 @@
+import { __decorate } from 'tslib';
+import * as i0 from '@angular/core';
+import { input, Directive, inject, Component, ChangeDetectionStrategy } from '@angular/core';
+import { makeConfig } from '@ng-atomic/common/services/ui';
+import { InjectableComponent, _computed, TokenizedType } from '@ng-atomic/core';
+
+var LoadingBoxMoleculeStore_1;
+let LoadingBoxMoleculeStore = class LoadingBoxMoleculeStore extends InjectableComponent {
+    constructor() {
+        super(...arguments);
+        this.config = LoadingBoxMoleculeStore_1.Config.inject();
+        this.loadingMessage = input(_computed(() => this.config().loadingMessage));
+    }
+    static { LoadingBoxMoleculeStore_1 = this; }
+    static { this.Config = makeConfig(() => {
+        return () => ({
+            loadingMessage: 'initializing...'
+        });
+    }, ['components', 'molecules', 'loading-box']); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: LoadingBoxMoleculeStore, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "17.2.2", type: LoadingBoxMoleculeStore, isStandalone: true, selector: "molecules-loading-box", inputs: { loadingMessage: { classPropertyName: "loadingMessage", publicName: "loadingMessage", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
+};
+LoadingBoxMoleculeStore = LoadingBoxMoleculeStore_1 = __decorate([
+    TokenizedType()
+], LoadingBoxMoleculeStore);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: LoadingBoxMoleculeStore, decorators: [{
+            type: Directive,
+            args: [{ standalone: true, selector: 'molecules-loading-box' }]
+        }] });
+class LoadingBoxMolecule {
+    constructor() {
+        this.store = inject(LoadingBoxMoleculeStore);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: LoadingBoxMolecule, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.2", type: LoadingBoxMolecule, isStandalone: true, selector: "molecules-loading-box", hostDirectives: [{ directive: LoadingBoxMoleculeStore, inputs: ["loadingMessage", "loadingMessage"] }], ngImport: i0, template: `
+  <span class="initializing">決済フォーム初期化中</span>
+  <div class="loading-dots">
+    @for (i of [0, 1, 2]; track $index) { <div class="dot"></div> }
+  </div>
+  `, isInline: true, styles: [":host{display:block;--mdc-outlined-text-field-label-text-color-SCOPED-IN-definition-list-gBL6: rgba(0, 0, 0, .6);--mdc-outlined-text-field-label-text-color-SCOPED-IN-definition-list-gBL6-SCOPED-IN-loading-box-5aSK: var(--mdc-outlined-text-field-label-text-color-SCOPED-IN-definition-list-gBL6)}:host{display:flex;width:100%;justify-content:center}:host .initializing{color:var(--mdc-outlined-text-field-label-text-color-SCOPED-IN-definition-list-gBL6-SCOPED-IN-loading-box-5aSK);font-size:12px}@keyframes dotFlashing{0%,to{opacity:0}50%{opacity:1}}:host .loading-box{display:flex;justify-content:center;align-items:center;flex-direction:column}:host .loading-dots .dot{height:10px;width:10px;margin:0 5px;background-color:#333;border-radius:50%;display:inline-block;animation:dotFlashing 1s infinite}:host .loading-dots .dot:nth-child(1){animation-delay:0s}:host .loading-dots .dot:nth-child(2){animation-delay:.2s}:host .loading-dots .dot:nth-child(3){animation-delay:.4s}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: LoadingBoxMolecule, decorators: [{
+            type: Component,
+            args: [{ selector: 'molecules-loading-box', standalone: true, imports: [], template: `
+  <span class="initializing">決済フォーム初期化中</span>
+  <div class="loading-dots">
+    @for (i of [0, 1, 2]; track $index) { <div class="dot"></div> }
+  </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
+                        {
+                            directive: LoadingBoxMoleculeStore,
+                            inputs: ['loadingMessage'],
+                        }
+                    ], styles: [":host{display:block;--mdc-outlined-text-field-label-text-color-SCOPED-IN-definition-list-gBL6: rgba(0, 0, 0, .6);--mdc-outlined-text-field-label-text-color-SCOPED-IN-definition-list-gBL6-SCOPED-IN-loading-box-5aSK: var(--mdc-outlined-text-field-label-text-color-SCOPED-IN-definition-list-gBL6)}:host{display:flex;width:100%;justify-content:center}:host .initializing{color:var(--mdc-outlined-text-field-label-text-color-SCOPED-IN-definition-list-gBL6-SCOPED-IN-loading-box-5aSK);font-size:12px}@keyframes dotFlashing{0%,to{opacity:0}50%{opacity:1}}:host .loading-box{display:flex;justify-content:center;align-items:center;flex-direction:column}:host .loading-dots .dot{height:10px;width:10px;margin:0 5px;background-color:#333;border-radius:50%;display:inline-block;animation:dotFlashing 1s infinite}:host .loading-dots .dot:nth-child(1){animation-delay:0s}:host .loading-dots .dot:nth-child(2){animation-delay:.2s}:host .loading-dots .dot:nth-child(3){animation-delay:.4s}\n"] }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { LoadingBoxMolecule, LoadingBoxMoleculeStore };
+//# sourceMappingURL=ng-atomic-components-molecules-loading-box.mjs.map

package/fesm2022/ng-atomic-components-molecules-loading-box.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ng-atomic-components-molecules-loading-box.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/molecules/loading-box/loading-box.molecule.ts","../../../../../packages/@ng-atomic/components/src/lib/molecules/loading-box/ng-atomic-components-molecules-loading-box.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Directive, inject, input } from '@angular/core';\nimport { makeConfig } from '@ng-atomic/common/services/ui';\nimport { _computed, InjectableComponent, TokenizedType } from '@ng-atomic/core';\n\n@TokenizedType()\n@Directive({ standalone: true, selector: 'molecules-loading-box' })\nexport class LoadingBoxMoleculeStore extends InjectableComponent {\n  static readonly Config = makeConfig(() => {\n    return () => ({\n      loadingMessage: 'initializing...'\n    });\n  }, ['components', 'molecules', 'loading-box']);\n  readonly config = LoadingBoxMoleculeStore.Config.inject();\n  readonly loadingMessage = input(_computed(() => this.config().loadingMessage));\n}\n\n@Component({\n  selector: 'molecules-loading-box',\n  standalone: true,\n  imports: [],\n  template: `\n  <span class=\"initializing\">決済フォーム初期化中</span>\n  <div class=\"loading-dots\">\n    @for (i of [0, 1, 2]; track $index) { <div class=\"dot\"></div> }\n  </div>\n  `,\n  styleUrl: './loading-box.molecule.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  hostDirectives: [\n    {\n      directive: LoadingBoxMoleculeStore,\n      inputs: ['loadingMessage'],\n    }\n  ]\n})\nexport class LoadingBoxMolecule {\n  protected store = inject(LoadingBoxMoleculeStore);\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;AAMO,IAAM,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,mBAAmB,CAAA;AAAzD,IAAA,WAAA,GAAA;;AAMI,QAAA,IAAA,CAAA,MAAM,GAAG,yBAAuB,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC;AACjD,QAAA,IAAA,CAAA,cAAc,GAAG,KAAK,CAAC,SAAS,CAAC,MAAM,IAAI,CAAC,MAAM,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;AAChF,KAAA;;AAPiB,IAAA,SAAA,IAAA,CAAA,MAAM,GAAG,UAAU,CAAC,MAAK;QACvC,OAAO,OAAO;AACZ,YAAA,cAAc,EAAE,iBAAiB;AAClC,SAAA,CAAC,CAAC;KACJ,EAAE,CAAC,YAAY,EAAE,WAAW,EAAE,aAAa,CAAC,CAJvB,CAIyB,EAAA;8GALpC,uBAAuB,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;kGAAvB,uBAAuB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,uBAAA,EAAA,MAAA,EAAA,EAAA,cAAA,EAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA,EAAA;;AAAvB,uBAAuB,GAAA,yBAAA,GAAA,UAAA,CAAA;AAFnC,IAAA,aAAa,EAAE;AAEH,CAAA,EAAA,uBAAuB,CAQnC,CAAA;2FARY,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBADnC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE,uBAAuB,EAAE,CAAA;;MA8BrD,kBAAkB,CAAA;AAnB/B,IAAA,WAAA,GAAA;AAoBY,QAAA,IAAA,CAAA,KAAK,GAAG,MAAM,CAAC,uBAAuB,CAAC,CAAC;AACnD,KAAA;8GAFY,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;kGAAlB,kBAAkB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,uBAAA,EAAA,cAAA,EAAA,CAAA,EAAA,SAAA,EA7BlB,uBAAuB,EAcxB,MAAA,EAAA,CAAA,gBAAA,EAAA,gBAAA,CAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA;;;;;AAKT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,i9BAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA;;2FAUU,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAnB9B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,uBAAuB,EACrB,UAAA,EAAA,IAAI,EACP,OAAA,EAAA,EAAE,EACD,QAAA,EAAA,CAAA;;;;;GAKT,EAEgB,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAC/B,cAAA,EAAA;AACd,wBAAA;AACE,4BAAA,SAAS,EAAE,uBAAuB;4BAClC,MAAM,EAAE,CAAC,gBAAgB,CAAC;AAC3B,yBAAA;AACF,qBAAA,EAAA,MAAA,EAAA,CAAA,i9BAAA,CAAA,EAAA,CAAA;;;ACjCH;;AAEG;;;;"}