@ng-atomic/components 16.2.0 → 16.3.1

package/fesm2022/ng-atomic-components-templates-form.mjs

@@ -0,0 +1,472 @@
+import { __decorate, __metadata } from 'tslib';
+import * as i0 from '@angular/core';
+import { input, computed, inject, Directive, ChangeDetectorRef, Component, ChangeDetectionStrategy } from '@angular/core';
+import { FormBuilder } from '@angular/forms';
+import { ScrollFrame } from '@ng-atomic/components/frames/scroll-v2';
+import { AutoLayoutFrame } from '@ng-atomic/components/frames/auto-layout';
+import { HeaderMoleculeStore } from '@ng-atomic/components/molecules/header';
+import { ActionButtonsSectionOrganismStore } from '@ng-atomic/components/organisms/action-buttons-section';
+import { NavigatorOrganismStore } from '@ng-atomic/components/organisms/navigator';
+import { TextareaSectionOrganismStore } from '@ng-atomic/components/organisms/textarea-section';
+import { TextInputSectionOrganismStore } from '@ng-atomic/components/organisms/text-input-section';
+import { DateInputSectionOrganism } from '@ng-atomic/components/organisms/date-input-section';
+import { SelectInputSectionOrganismStore } from '@ng-atomic/components/organisms/select-input-section';
+import { DomainPipe } from '@ng-atomic/common/pipes/domain';
+import { InjectableComponent, _computed, NgAtomicComponent, Effect } from '@ng-atomic/core';
+import { ActionInputSectionOrganismStore } from '@ng-atomic/components/organisms/action-input-section';
+import { FileInputSectionOrganism, FileInputSectionOrganismStore } from '@ng-atomic/components/organisms/file-input-section';
+import { AgreementInputSectionOrganism } from '@ng-atomic/components/organisms/agreement-input-section';
+import { VideoSectionOrganism } from '@ng-atomic/components/organisms/video-section';
+import { makeConfig, injectIsRootPage, injectNavStartActions, NavActionId } from '@ng-atomic/common/services/ui';
+import { get } from 'lodash-es';
+import { NumberInputSectionOrganismStore } from '@ng-atomic/components/organisms/number-input-section';
+import { ImagePreviewSectionOrganism } from '@ng-atomic/components/organisms/image-preview-section';
+import { PasswordInputSectionOrganismStore } from '@ng-atomic/components/organisms/password-input-section';
+import { DateRangeInputSectionOrganism } from '@ng-atomic/components/organisms/date-range-input-section';
+
+function walkControls(controls, cb, excludes = [], name = '') {
+    Object.entries(controls).forEach(([key, control]) => {
+        const path = name === '' ? key : `${name}.${key}`;
+        if (excludes.includes(path)) {
+            cb(path, control);
+        }
+        else if (control.controls) {
+            walkControls(control.controls, cb, excludes, path);
+        }
+        else {
+            cb(path, control);
+        }
+    });
+}
+function flatControls(form, excludes) {
+    const controlMap = new Map();
+    walkControls(form?.controls, (name, control) => controlMap.set(name, control), [
+        ...excludes,
+    ]);
+    return [...controlMap.entries()];
+}
+var ActionId;
+(function (ActionId) {
+    ActionId["BACK"] = "[@ng-atomic/components/templates/form] Back";
+    ActionId["CREATE"] = "[@ng-atomic/components/templates/form] Create";
+    ActionId["UPDATE"] = "[@ng-atomic/components/templates/form] Update";
+    ActionId["DELETE"] = "[@ng-atomic/components/templates/form] Delete";
+    ActionId["FILE_SELECTED"] = "[@ng-atomic/components/templates/form] File selected";
+    ActionId["CANCEL"] = "[@ng-atomic/components/templates/form] Cancel";
+})(ActionId || (ActionId = {}));
+class FormTemplateStore extends InjectableComponent {
+    constructor() {
+        super(...arguments);
+        this.config = FormTemplateStore.Config.inject();
+        this.navStartActions = input(_computed(() => this.config().navStartActions));
+        this.navEndActions = input(_computed(() => this.config().navEndActions));
+        this.title = input(_computed(() => this.config().title));
+        this.form = input(_computed(() => this.config().form));
+        this.formFlatExcludes = input(_computed(() => this.config().formFlatExcludes));
+        this.actions = input(_computed(() => this.config().actions));
+        this.fieldMap = input(_computed(() => this.config().fieldMap));
+        this.controlEntries = computed(() => {
+            return flatControls(this.form(), this.formFlatExcludes()).map(([name, control]) => ({
+                name, control, field: get(this.fieldMap(), name) ?? { type: 'text' },
+            }));
+        });
+    }
+    static { this.Config = makeConfig(() => {
+        const isRootPage = injectIsRootPage();
+        const navStartActions = injectNavStartActions(isRootPage);
+        return () => ({
+            navStartActions: navStartActions(),
+            navEndActions: [{ id: ActionId.DELETE, name: '削除', icon: 'delete' }],
+            title: '',
+            form: inject(FormBuilder).group({ id: [''] }),
+            formFlatExcludes: [],
+            actions: [{ id: ActionId.CREATE, name: '作成' }],
+            fieldMap: {
+                createdAt: { type: 'date' },
+                updatedAt: { type: 'date' },
+                deletedAt: { type: 'date' },
+            },
+        });
+    }, ['components', 'templates', 'form']); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: FormTemplateStore, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "17.2.2", type: FormTemplateStore, isStandalone: true, inputs: { navStartActions: { classPropertyName: "navStartActions", publicName: "navStartActions", isSignal: true, isRequired: false, transformFunction: null }, navEndActions: { classPropertyName: "navEndActions", publicName: "navEndActions", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, formFlatExcludes: { classPropertyName: "formFlatExcludes", publicName: "formFlatExcludes", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, fieldMap: { classPropertyName: "fieldMap", publicName: "fieldMap", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: FormTemplateStore, decorators: [{
+            type: Directive,
+            args: [{ standalone: true }]
+        }] });
+class FormTemplate extends NgAtomicComponent {
+    constructor() {
+        super(...arguments);
+        this.store = inject(FormTemplateStore);
+        this.cd = inject(ChangeDetectorRef);
+    }
+    static { this.ActionId = ActionId; }
+    dispatchFileInputAction(action, name) {
+        switch (action.id) {
+            case FileInputSectionOrganism.ActionId.FILE_SELECTED: {
+                return this.dispatch({ id: ActionId.FILE_SELECTED, payload: { scope: name, files: action.payload } });
+            }
+            case FileInputSectionOrganism.ActionId.CANCEL: {
+                return this.dispatch({ id: ActionId.CANCEL, payload: { scope: name } });
+            }
+        }
+    }
+    ngOnInit() {
+        this.store.form().statusChanges.subscribe(() => this.cd.markForCheck());
+    }
+    back() {
+        this.dispatch({ id: ActionId.BACK });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: FormTemplate, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.2", type: FormTemplate, isStandalone: true, selector: "templates-form", host: { classAttribute: "template" }, usesInheritance: true, hostDirectives: [{ directive: FormTemplateStore, inputs: ["navStartActions", "navStartActions", "navEndActions", "navEndActions", "title", "title", "form", "form", "formFlatExcludes", "formFlatExcludes", "actions", "actions", "fieldMap", "fieldMap"] }], ngImport: i0, template: `
+  <frames-scroll>
+    <organisms-navigator injectable
+      [startActions]="store.navStartActions()"
+      [endActions]="store.navEndActions()"
+      (action)="dispatch($event)"
+      top
+    >
+      <molecules-header injectable [title]="store.title()" [description]="''"/>
+    </organisms-navigator>
+    <frames-auto-layout vertical>
+      @for (entry of store.controlEntries(); track entry.name;) {
+        @switch (entry.field.type) {
+          @case ('select') {
+            @defer {
+              <organisms-select-input-section injectable
+                [label]="entry.name | domain"
+                [control]="entry.control"
+                [hint]="entry.field.hint"
+                [options]="entry.field.options"
+                [placeholder]="entry.field.placeholder"
+                [actions]="entry.field.actions"
+                [multiple]="entry.field?.multiple"
+                (action)="dispatch($event)"
+              />
+            }
+          }
+          @case ('date') {
+            <!-- @defer { -->
+              <organisms-date-input-section
+                [label]="entry.name | domain"
+                [hint]="entry.field.hint"
+                [control]="entry.control"
+                [actions]="entry.field.actions"
+                (action)="dispatch($event)"
+              />
+            <!-- } -->
+          }
+          @case ('date-range') {
+            <organisms-date-range-input-section
+              [label]="entry.name | domain"
+              [hint]="entry.field.hint"
+              [control]="entry.control"
+              [actions]="entry.field.actions"
+              (action)="dispatch($event)"
+            />
+          }
+          @case ('text') {
+            @defer {
+              <organisms-text-input-section injectable
+                [label]="entry.name | domain"
+                [control]="entry.control"
+                [actions]="entry.field.actions"
+                [hint]="entry.field.hint"
+                [placeholder]="entry.field.placeholder"
+                [autoComplete]="entry.field.autoComplete"
+                (action)="dispatch($event)"
+              />
+            }
+          }
+          @case ('number') {
+            @defer {
+              <organisms-number-input-section injectable
+                [label]="entry.name | domain"
+                [control]="entry.control"
+                [actions]="entry.field.actions"
+                [hint]="entry.field.hint"
+                [placeholder]="entry.field.placeholder"
+                (action)="dispatch($event)"
+              />
+            }
+          }
+          @case ('textarea') {
+            @defer {
+              <organisms-textarea-section injectable
+                [label]="entry.name | domain"
+                [control]="entry.control"
+                [hint]="entry.field.hint"
+                [rows]="entry.field.rows"
+                [placeholder]="entry.field.placeholder"
+                (action)="dispatch($event)"
+              />
+            }
+          }
+          @case ('password') {
+            @defer {
+              <organisms-password-input-section injectable
+                [label]="entry.name | domain"
+                [control]="entry.control"
+                [hint]="entry.field.hint"
+                [placeholder]="entry.field.placeholder"
+                [actions]="entry.field.actions"
+                (action)="dispatch($event)"
+              />
+            }
+          }
+          @case ('action') {
+            @defer {
+              <organisms-action-input-section injectable
+                [label]="entry.name | domain"
+                [control]="entry.control"
+                [hint]="entry.field.hint"
+                [actions]="entry.field.actions"
+                (action)="dispatch($event)"
+              />
+            }
+          }
+          @case ('file') {
+            @defer {
+              <organisms-file-input-section injectable
+                [label]="entry.name | domain"
+                [control]="entry.control"
+                [hint]="entry.field.hint"
+                [progress]="entry.field?.progress"
+                (action)="dispatchFileInputAction($event, entry.name)"
+              />
+            }
+          }
+          @case ('agreement') {
+            @defer {
+              <organisms-agreement-input-section injectable
+                [control]="entry.control"
+                [labelTemp]="entry.field?.labelTemp"
+              />
+            }
+          }
+          @case ('preview') {
+            @defer {
+              <organisms-video-section injectable
+                [src]="entry.control.value"
+                [autoplay]="false"
+              />
+            }
+          }
+          @case ('preview:image') {
+            @defer {
+              <organisms-image-preview-section
+                [src]="entry.control.value"
+              />
+            }
+          }
+          @case ('hidden') { }
+        }
+      }
+      <organisms-action-buttons-section injectable
+        [actions]="store.actions()"
+        (action)="dispatch($event)"
+      />
+    </frames-auto-layout>
+  </frames-scroll>
+  `, isInline: true, styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-form-bXIh: var(--horizontal-padding);--vertical-padding: 24px;--vertical-padding-SCOPED-IN-form-bXIh: var(--vertical-padding);--gap: 16px;--gap-SCOPED-IN-form-bXIh: var(--gap);--primary-color: #404040;--primary-color-SCOPED-IN-form-bXIh: var(--primary-color);--on-primary-color: #f0f0f0;--on-primary-color-SCOPED-IN-form-bXIh: var(--on-primary-color);--secondary-color: #f0f0f0;--secondary-color-SCOPED-IN-form-bXIh: var(--secondary-color);--surface-color: #f0f0f0;--surface-color-SCOPED-IN-form-bXIh: var(--surface-color);--on-surface-color: #000;--on-surface-color-SCOPED-IN-form-bXIh: var(--on-surface-color);--background-color: #f0f0f0;--background-color-SCOPED-IN-form-bXIh: var(--background-color);--on-background-color: #000;--on-background-color-SCOPED-IN-form-bXIh: var(--on-background-color);--navigator-background-color: var(--primary-color-SCOPED-IN-form-bXIh);--navigator-background-color-SCOPED-IN-form-bXIh: var(--navigator-background-color);--navigator-on-background-color: var(--on-primary-color-SCOPED-IN-form-bXIh);--navigator-on-background-color-SCOPED-IN-form-bXIh: var(--navigator-on-background-color)}:host{display:block;width:100%;height:100%;background:var(--background-color-SCOPED-IN-form-bXIh)}:host frames-auto-layout{height:-moz-fit-content;height:fit-content;--gap: var(--gap-SCOPED-IN-form-bXIh);--vertical-padding: var(--vertical-padding-SCOPED-IN-form-bXIh)}:host frames-auto-layout *{--horizontal-padding: var(--horizontal-padding-SCOPED-IN-form-bXIh)}:host organisms-navigator{--background-color: var(--navigator-background-color-SCOPED-IN-form-bXIh);--on-background-color: var(--navigator-on-background-color-SCOPED-IN-form-bXIh)}:host *{--primary-color: var(--primary-color-SCOPED-IN-form-bXIh);--on-primary-color: var(--on-primary-color-SCOPED-IN-form-bXIh);--surface-color: var(--surface-color-SCOPED-IN-form-bXIh);--on-surface-color: var(--on-surface-color-SCOPED-IN-form-bXIh);--background-color: var(--background-color-SCOPED-IN-form-bXIh);--on-background-color: var(--on-background-color-SCOPED-IN-form-bXIh)}\n"], dependencies: [{ kind: "pipe", type: DomainPipe, name: "domain" }, { kind: "component", type: AutoLayoutFrame, selector: "frames-auto-layout" }, { kind: "component", type: ScrollFrame, selector: "frames-scroll" }, { kind: "directive", type: ActionButtonsSectionOrganismStore, selector: "organisms-action-buttons-section", inputs: ["actions", "type"] }, { kind: "directive", type: NavigatorOrganismStore, selector: "organisms-navigator", inputs: ["startActions", "endActions", "title"] }, { kind: "component", type: DateInputSectionOrganism, selector: "organisms-date-input-section" }, { kind: "component", type: DateRangeInputSectionOrganism, selector: "organisms-date-range-input-section" }, { kind: "directive", type: HeaderMoleculeStore, selector: "molecules-header", inputs: ["title", "description"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+__decorate([
+    Effect(NavActionId.BACK),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], FormTemplate.prototype, "back", null);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: FormTemplate, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [
+                        DomainPipe,
+                        AgreementInputSectionOrganism,
+                        AutoLayoutFrame,
+                        ScrollFrame,
+                        ActionButtonsSectionOrganismStore,
+                        ActionInputSectionOrganismStore,
+                        FileInputSectionOrganismStore,
+                        NavigatorOrganismStore,
+                        DateInputSectionOrganism,
+                        DateRangeInputSectionOrganism,
+                        TextInputSectionOrganismStore,
+                        NumberInputSectionOrganismStore,
+                        TextareaSectionOrganismStore,
+                        SelectInputSectionOrganismStore,
+                        HeaderMoleculeStore,
+                        VideoSectionOrganism,
+                        ImagePreviewSectionOrganism,
+                        PasswordInputSectionOrganismStore,
+                    ], selector: 'templates-form', template: `
+  <frames-scroll>
+    <organisms-navigator injectable
+      [startActions]="store.navStartActions()"
+      [endActions]="store.navEndActions()"
+      (action)="dispatch($event)"
+      top
+    >
+      <molecules-header injectable [title]="store.title()" [description]="''"/>
+    </organisms-navigator>
+    <frames-auto-layout vertical>
+      @for (entry of store.controlEntries(); track entry.name;) {
+        @switch (entry.field.type) {
+          @case ('select') {
+            @defer {
+              <organisms-select-input-section injectable
+                [label]="entry.name | domain"
+                [control]="entry.control"
+                [hint]="entry.field.hint"
+                [options]="entry.field.options"
+                [placeholder]="entry.field.placeholder"
+                [actions]="entry.field.actions"
+                [multiple]="entry.field?.multiple"
+                (action)="dispatch($event)"
+              />
+            }
+          }
+          @case ('date') {
+            <!-- @defer { -->
+              <organisms-date-input-section
+                [label]="entry.name | domain"
+                [hint]="entry.field.hint"
+                [control]="entry.control"
+                [actions]="entry.field.actions"
+                (action)="dispatch($event)"
+              />
+            <!-- } -->
+          }
+          @case ('date-range') {
+            <organisms-date-range-input-section
+              [label]="entry.name | domain"
+              [hint]="entry.field.hint"
+              [control]="entry.control"
+              [actions]="entry.field.actions"
+              (action)="dispatch($event)"
+            />
+          }
+          @case ('text') {
+            @defer {
+              <organisms-text-input-section injectable
+                [label]="entry.name | domain"
+                [control]="entry.control"
+                [actions]="entry.field.actions"
+                [hint]="entry.field.hint"
+                [placeholder]="entry.field.placeholder"
+                [autoComplete]="entry.field.autoComplete"
+                (action)="dispatch($event)"
+              />
+            }
+          }
+          @case ('number') {
+            @defer {
+              <organisms-number-input-section injectable
+                [label]="entry.name | domain"
+                [control]="entry.control"
+                [actions]="entry.field.actions"
+                [hint]="entry.field.hint"
+                [placeholder]="entry.field.placeholder"
+                (action)="dispatch($event)"
+              />
+            }
+          }
+          @case ('textarea') {
+            @defer {
+              <organisms-textarea-section injectable
+                [label]="entry.name | domain"
+                [control]="entry.control"
+                [hint]="entry.field.hint"
+                [rows]="entry.field.rows"
+                [placeholder]="entry.field.placeholder"
+                (action)="dispatch($event)"
+              />
+            }
+          }
+          @case ('password') {
+            @defer {
+              <organisms-password-input-section injectable
+                [label]="entry.name | domain"
+                [control]="entry.control"
+                [hint]="entry.field.hint"
+                [placeholder]="entry.field.placeholder"
+                [actions]="entry.field.actions"
+                (action)="dispatch($event)"
+              />
+            }
+          }
+          @case ('action') {
+            @defer {
+              <organisms-action-input-section injectable
+                [label]="entry.name | domain"
+                [control]="entry.control"
+                [hint]="entry.field.hint"
+                [actions]="entry.field.actions"
+                (action)="dispatch($event)"
+              />
+            }
+          }
+          @case ('file') {
+            @defer {
+              <organisms-file-input-section injectable
+                [label]="entry.name | domain"
+                [control]="entry.control"
+                [hint]="entry.field.hint"
+                [progress]="entry.field?.progress"
+                (action)="dispatchFileInputAction($event, entry.name)"
+              />
+            }
+          }
+          @case ('agreement') {
+            @defer {
+              <organisms-agreement-input-section injectable
+                [control]="entry.control"
+                [labelTemp]="entry.field?.labelTemp"
+              />
+            }
+          }
+          @case ('preview') {
+            @defer {
+              <organisms-video-section injectable
+                [src]="entry.control.value"
+                [autoplay]="false"
+              />
+            }
+          }
+          @case ('preview:image') {
+            @defer {
+              <organisms-image-preview-section
+                [src]="entry.control.value"
+              />
+            }
+          }
+          @case ('hidden') { }
+        }
+      }
+      <organisms-action-buttons-section injectable
+        [actions]="store.actions()"
+        (action)="dispatch($event)"
+      />
+    </frames-auto-layout>
+  </frames-scroll>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
+                        {
+                            directive: FormTemplateStore,
+                            inputs: [
+                                'navStartActions',
+                                'navEndActions',
+                                'title',
+                                'form',
+                                'formFlatExcludes',
+                                'actions',
+                                'fieldMap',
+                            ],
+                        },
+                    ], host: { class: 'template' }, styles: [":host{--horizontal-padding: 16px;--horizontal-padding-SCOPED-IN-form-bXIh: var(--horizontal-padding);--vertical-padding: 24px;--vertical-padding-SCOPED-IN-form-bXIh: var(--vertical-padding);--gap: 16px;--gap-SCOPED-IN-form-bXIh: var(--gap);--primary-color: #404040;--primary-color-SCOPED-IN-form-bXIh: var(--primary-color);--on-primary-color: #f0f0f0;--on-primary-color-SCOPED-IN-form-bXIh: var(--on-primary-color);--secondary-color: #f0f0f0;--secondary-color-SCOPED-IN-form-bXIh: var(--secondary-color);--surface-color: #f0f0f0;--surface-color-SCOPED-IN-form-bXIh: var(--surface-color);--on-surface-color: #000;--on-surface-color-SCOPED-IN-form-bXIh: var(--on-surface-color);--background-color: #f0f0f0;--background-color-SCOPED-IN-form-bXIh: var(--background-color);--on-background-color: #000;--on-background-color-SCOPED-IN-form-bXIh: var(--on-background-color);--navigator-background-color: var(--primary-color-SCOPED-IN-form-bXIh);--navigator-background-color-SCOPED-IN-form-bXIh: var(--navigator-background-color);--navigator-on-background-color: var(--on-primary-color-SCOPED-IN-form-bXIh);--navigator-on-background-color-SCOPED-IN-form-bXIh: var(--navigator-on-background-color)}:host{display:block;width:100%;height:100%;background:var(--background-color-SCOPED-IN-form-bXIh)}:host frames-auto-layout{height:-moz-fit-content;height:fit-content;--gap: var(--gap-SCOPED-IN-form-bXIh);--vertical-padding: var(--vertical-padding-SCOPED-IN-form-bXIh)}:host frames-auto-layout *{--horizontal-padding: var(--horizontal-padding-SCOPED-IN-form-bXIh)}:host organisms-navigator{--background-color: var(--navigator-background-color-SCOPED-IN-form-bXIh);--on-background-color: var(--navigator-on-background-color-SCOPED-IN-form-bXIh)}:host *{--primary-color: var(--primary-color-SCOPED-IN-form-bXIh);--on-primary-color: var(--on-primary-color-SCOPED-IN-form-bXIh);--surface-color: var(--surface-color-SCOPED-IN-form-bXIh);--on-surface-color: var(--on-surface-color-SCOPED-IN-form-bXIh);--background-color: var(--background-color-SCOPED-IN-form-bXIh);--on-background-color: var(--on-background-color-SCOPED-IN-form-bXIh)}\n"] }]
+        }], propDecorators: { back: [] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ActionId, FormTemplate, FormTemplateStore };
+//# sourceMappingURL=ng-atomic-components-templates-form.mjs.map

package/fesm2022/ng-atomic-components-templates-form.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ng-atomic-components-templates-form.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/templates/form/form.template.ts","../../../../../packages/@ng-atomic/components/src/lib/templates/form/ng-atomic-components-templates-form.ts"],"sourcesContent":["import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Directive, computed, inject, input } from '@angular/core';\nimport { FormBuilder, FormGroup } from '@angular/forms';\nimport { ScrollFrame } from '@ng-atomic/components/frames/scroll-v2';\nimport { AutoLayoutFrame } from '@ng-atomic/components/frames/auto-layout';\nimport { HeaderMoleculeStore } from '@ng-atomic/components/molecules/header';\nimport { ActionButtonsSectionOrganismStore } from '@ng-atomic/components/organisms/action-buttons-section';\nimport { NavigatorOrganismStore } from '@ng-atomic/components/organisms/navigator';\nimport { TextareaSectionOrganismStore } from '@ng-atomic/components/organisms/textarea-section';\nimport { TextInputSectionOrganismStore } from '@ng-atomic/components/organisms/text-input-section';\nimport { DateInputSectionOrganism } from '@ng-atomic/components/organisms/date-input-section';\nimport { SelectInputSectionOrganismStore } from '@ng-atomic/components/organisms/select-input-section';\nimport { FormFieldMap } from '@ng-atomic/common/pipes/smart-field';\nimport { DomainPipe } from '@ng-atomic/common/pipes/domain';\nimport { AbstractControl } from '@angular/forms';\nimport { Action, Effect, InjectableComponent, _computed } from '@ng-atomic/core';\nimport { ActionInputSectionOrganismStore } from '@ng-atomic/components/organisms/action-input-section';\nimport { NgAtomicComponent } from '@ng-atomic/core';\nimport { FileInputSectionOrganism, FileInputSectionOrganismStore } from '@ng-atomic/components/organisms/file-input-section';\nimport { AgreementInputSectionOrganism } from '@ng-atomic/components/organisms/agreement-input-section';\nimport { VideoSectionOrganism } from '@ng-atomic/components/organisms/video-section';\nimport { NavActionId, injectIsRootPage, injectNavStartActions, makeConfig } from '@ng-atomic/common/services/ui';\nimport { get } from 'lodash-es';\nimport { NumberInputSectionOrganismStore } from '@ng-atomic/components/organisms/number-input-section';\nimport { ImagePreviewSectionOrganism } from '@ng-atomic/components/organisms/image-preview-section';\nimport { PasswordInputSectionOrganismStore } from '@ng-atomic/components/organisms/password-input-section';\nimport { DateRangeInputSectionOrganism } from '@ng-atomic/components/organisms/date-range-input-section';\n\nfunction walkControls(controls: any, cb: (name: string, control: any) => void, excludes: string[] = [], name = '') {\n  Object.entries(controls).forEach(([key, control]: any) => {\n    const path = name === '' ? key : `${name}.${key}`;\n    if (excludes.includes(path)) {\n      cb(path, control);\n    } else if (control.controls) {\n      walkControls(control.controls, cb, excludes, path);\n    } else {\n      cb(path, control);\n    }\n  });\n}\n\nfunction flatControls(form: FormGroup, excludes: string[]): [string, AbstractControl][] {\n  const controlMap = new Map<string, AbstractControl>();\n  walkControls(form?.controls, (name, control: AbstractControl) => controlMap.set(name, control), [\n    ...excludes,\n  ]);\n  return [...controlMap.entries()];\n}\n\nexport enum ActionId {\n  BACK = '[@ng-atomic/components/templates/form] Back',\n  CREATE = '[@ng-atomic/components/templates/form] Create',\n  UPDATE = '[@ng-atomic/components/templates/form] Update',\n  DELETE = '[@ng-atomic/components/templates/form] Delete',\n  FILE_SELECTED = '[@ng-atomic/components/templates/form] File selected',\n  CANCEL = '[@ng-atomic/components/templates/form] Cancel',\n}\n\n@Directive({ standalone: true })\nexport class FormTemplateStore extends InjectableComponent {\n  static readonly Config = makeConfig(() => {\n    const isRootPage = injectIsRootPage();\n    const navStartActions = injectNavStartActions(isRootPage);\n    return () => ({\n      navStartActions: navStartActions(),\n      navEndActions: [{id: ActionId.DELETE, name: '削除', icon: 'delete'}] as Action[],\n      title: '',\n      form: inject(FormBuilder).group({id: ['']}),\n      formFlatExcludes: [] as string[],\n      actions: [{id: ActionId.CREATE, name: '作成'}] as Action[],\n      fieldMap: {\n        createdAt: { type: 'date' },\n        updatedAt: { type: 'date' },\n        deletedAt: { type: 'date' },\n      } as FormFieldMap,\n    });\n  }, ['components', 'templates', 'form']);\n  readonly config = FormTemplateStore.Config.inject();\n  readonly navStartActions = input(_computed(() => this.config().navStartActions));\n  readonly navEndActions = input(_computed(() => this.config().navEndActions));\n  readonly title = input(_computed(() => this.config().title));\n  readonly form = input(_computed(() => this.config().form));\n  readonly formFlatExcludes = input(_computed(() => this.config().formFlatExcludes));\n  readonly actions = input(_computed(() => this.config().actions));\n  readonly fieldMap = input(_computed(() => this.config().fieldMap));\n  readonly controlEntries = computed(() => {\n    return flatControls(this.form(), this.formFlatExcludes()).map(([name, control]) => ({\n      name, control, field: get(this.fieldMap(), name) ?? {type: 'text'},\n    }));\n  });\n}\n\n@Component({\n  standalone: true,\n  imports: [\n    DomainPipe,\n    AgreementInputSectionOrganism,\n    AutoLayoutFrame,\n    ScrollFrame,\n    ActionButtonsSectionOrganismStore,\n    ActionInputSectionOrganismStore,\n    FileInputSectionOrganismStore,\n    NavigatorOrganismStore,\n    DateInputSectionOrganism,\n    DateRangeInputSectionOrganism,\n    TextInputSectionOrganismStore,\n    NumberInputSectionOrganismStore,\n    TextareaSectionOrganismStore,\n    SelectInputSectionOrganismStore,\n    HeaderMoleculeStore,\n    VideoSectionOrganism,\n    ImagePreviewSectionOrganism,\n    PasswordInputSectionOrganismStore,\n  ],\n  selector: 'templates-form',\n  template: `\n  <frames-scroll>\n    <organisms-navigator injectable\n      [startActions]=\"store.navStartActions()\"\n      [endActions]=\"store.navEndActions()\"\n      (action)=\"dispatch($event)\"\n      top\n    >\n      <molecules-header injectable [title]=\"store.title()\" [description]=\"''\"/>\n    </organisms-navigator>\n    <frames-auto-layout vertical>\n      @for (entry of store.controlEntries(); track entry.name;) {\n        @switch (entry.field.type) {\n          @case ('select') {\n            @defer {\n              <organisms-select-input-section injectable\n                [label]=\"entry.name | domain\"\n                [control]=\"entry.control\"\n                [hint]=\"entry.field.hint\"\n                [options]=\"entry.field.options\"\n                [placeholder]=\"entry.field.placeholder\"\n                [actions]=\"entry.field.actions\"\n                [multiple]=\"entry.field?.multiple\"\n                (action)=\"dispatch($event)\"\n              />\n            }\n          }\n          @case ('date') {\n            <!-- @defer { -->\n              <organisms-date-input-section\n                [label]=\"entry.name | domain\"\n                [hint]=\"entry.field.hint\"\n                [control]=\"entry.control\"\n                [actions]=\"entry.field.actions\"\n                (action)=\"dispatch($event)\"\n              />\n            <!-- } -->\n          }\n          @case ('date-range') {\n            <organisms-date-range-input-section\n              [label]=\"entry.name | domain\"\n              [hint]=\"entry.field.hint\"\n              [control]=\"entry.control\"\n              [actions]=\"entry.field.actions\"\n              (action)=\"dispatch($event)\"\n            />\n          }\n          @case ('text') {\n            @defer {\n              <organisms-text-input-section injectable\n                [label]=\"entry.name | domain\"\n                [control]=\"entry.control\"\n                [actions]=\"entry.field.actions\"\n                [hint]=\"entry.field.hint\"\n                [placeholder]=\"entry.field.placeholder\"\n                [autoComplete]=\"entry.field.autoComplete\"\n                (action)=\"dispatch($event)\"\n              />\n            }\n          }\n          @case ('number') {\n            @defer {\n              <organisms-number-input-section injectable\n                [label]=\"entry.name | domain\"\n                [control]=\"entry.control\"\n                [actions]=\"entry.field.actions\"\n                [hint]=\"entry.field.hint\"\n                [placeholder]=\"entry.field.placeholder\"\n                (action)=\"dispatch($event)\"\n              />\n            }\n          }\n          @case ('textarea') {\n            @defer {\n              <organisms-textarea-section injectable\n                [label]=\"entry.name | domain\"\n                [control]=\"entry.control\"\n                [hint]=\"entry.field.hint\"\n                [rows]=\"entry.field.rows\"\n                [placeholder]=\"entry.field.placeholder\"\n                (action)=\"dispatch($event)\"\n              />\n            }\n          }\n          @case ('password') {\n            @defer {\n              <organisms-password-input-section injectable\n                [label]=\"entry.name | domain\"\n                [control]=\"entry.control\"\n                [hint]=\"entry.field.hint\"\n                [placeholder]=\"entry.field.placeholder\"\n                [actions]=\"entry.field.actions\"\n                (action)=\"dispatch($event)\"\n              />\n            }\n          }\n          @case ('action') {\n            @defer {\n              <organisms-action-input-section injectable\n                [label]=\"entry.name | domain\"\n                [control]=\"entry.control\"\n                [hint]=\"entry.field.hint\"\n                [actions]=\"entry.field.actions\"\n                (action)=\"dispatch($event)\"\n              />\n            }\n          }\n          @case ('file') {\n            @defer {\n              <organisms-file-input-section injectable\n                [label]=\"entry.name | domain\"\n                [control]=\"entry.control\"\n                [hint]=\"entry.field.hint\"\n                [progress]=\"entry.field?.progress\"\n                (action)=\"dispatchFileInputAction($event, entry.name)\"\n              />\n            }\n          }\n          @case ('agreement') {\n            @defer {\n              <organisms-agreement-input-section injectable\n                [control]=\"entry.control\"\n                [labelTemp]=\"entry.field?.labelTemp\"\n              />\n            }\n          }\n          @case ('preview') {\n            @defer {\n              <organisms-video-section injectable\n                [src]=\"entry.control.value\"\n                [autoplay]=\"false\"\n              />\n            }\n          }\n          @case ('preview:image') {\n            @defer {\n              <organisms-image-preview-section\n                [src]=\"entry.control.value\"\n              />\n            }\n          }\n          @case ('hidden') { }\n        }\n      }\n      <organisms-action-buttons-section injectable\n        [actions]=\"store.actions()\"\n        (action)=\"dispatch($event)\"\n      />\n    </frames-auto-layout>\n  </frames-scroll>\n  `,\n  styleUrls: ['./form.template.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  hostDirectives: [\n    {\n      directive: FormTemplateStore,\n      inputs: [\n        'navStartActions',\n        'navEndActions',\n        'title',\n        'form',\n        'formFlatExcludes',\n        'actions',\n        'fieldMap',\n      ],\n    },\n  ],\n  host: {class: 'template'}\n})\nexport class FormTemplate extends NgAtomicComponent {\n  static ActionId = ActionId;\n  protected readonly store = inject(FormTemplateStore);\n  protected readonly cd = inject(ChangeDetectorRef);\n\n  protected dispatchFileInputAction(action: Action, name: string) {\n    switch (action.id) {\n      case FileInputSectionOrganism.ActionId.FILE_SELECTED: {\n        return this.dispatch({id: ActionId.FILE_SELECTED, payload: {scope: name, files: action.payload}});\n      }\n      case FileInputSectionOrganism.ActionId.CANCEL: {\n        return this.dispatch({id: ActionId.CANCEL, payload: {scope: name}});\n      }\n    }\n  }\n\n  ngOnInit(): void {\n    this.store.form().statusChanges.subscribe(() => this.cd.markForCheck());\n  }\n\n  @Effect(NavActionId.BACK)\n  protected back() {\n    this.dispatch({id: ActionId.BACK});\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-templates-icon-button-menu.mjs

@@ -1,66 +1,58 @@
+import { __decorate } from 'tslib';
 import * as i0 from '@angular/core';
-import { InjectionToken, Directive, Input, inject, Component, ChangeDetectionStrategy } from '@angular/core';
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import { InjectableComponent, NgAtomicComponent } from '@ng-atomic/core';
-import * as i2 from '@angular/material/button';
+import { input, Directive, inject, Component, ChangeDetectionStrategy } from '@angular/core';
+import { InjectableComponent, TokenizedType, NgAtomicComponent } from '@ng-atomic/core';
+import * as i1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i3 from '@angular/material/icon';
+import * as i2 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 
-class IconButtonMenuTemplateStore extends InjectableComponent {
+let IconButtonMenuTemplateStore = class IconButtonMenuTemplateStore extends InjectableComponent {
     constructor() {
         super(...arguments);
-        this.actions = [];
+        this.actions = input([]);
     }
-    static { this.TOKEN = new InjectionToken('IconButtonMenuTemplateStore'); }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IconButtonMenuTemplateStore, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: IconButtonMenuTemplateStore, isStandalone: true, selector: "templates-icon-button-menu", inputs: { actions: "actions" }, usesInheritance: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IconButtonMenuTemplateStore, decorators: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: IconButtonMenuTemplateStore, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "17.2.2", type: IconButtonMenuTemplateStore, isStandalone: true, selector: "templates-icon-button-menu", inputs: { actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
+};
+IconButtonMenuTemplateStore = __decorate([
+    TokenizedType()
+], IconButtonMenuTemplateStore);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: IconButtonMenuTemplateStore, decorators: [{
             type: Directive,
             args: [{ standalone: true, selector: 'templates-icon-button-menu' }]
-        }], propDecorators: { actions: [{
-                type: Input
-            }] } });
+        }] });
 class IconButtonMenuTemplate extends NgAtomicComponent {
     constructor() {
         super(...arguments);
         this.store = inject(IconButtonMenuTemplateStore);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IconButtonMenuTemplate, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: IconButtonMenuTemplate, isStandalone: true, selector: "templates-icon-button-menu", usesInheritance: true, hostDirectives: [{ directive: IconButtonMenuTemplateStore, inputs: ["actions", "actions"] }], ngImport: i0, template: `
-    <button
-      mat-icon-button
-      color="basic"
-      *ngFor="let action of store.actions"
-      (click)="dispatch(action)"
-    >
-      <mat-icon>{{ action.icon }}</mat-icon>
-    </button>
-  `, isInline: true, styles: [":host{width:100%;height:100%;background:white;display:block;--primary-color: #3f51b5;--primary-color-SCOPED-IN-icon-button-menu-0vWW: var(--primary-color);--mdc-icon-button-icon-color: white;--mdc-icon-button-icon-color-SCOPED-IN-icon-button-menu-0vWW: var(--mdc-icon-button-icon-color)}:host{display:flex;flex-direction:column;justify-content:start;align-items:center;width:100%;height:100%;background-color:var(--primary-color-SCOPED-IN-icon-button-menu-0vWW)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: IconButtonMenuTemplate, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.2", type: IconButtonMenuTemplate, isStandalone: true, selector: "templates-icon-button-menu", usesInheritance: true, hostDirectives: [{ directive: IconButtonMenuTemplateStore, inputs: ["actions", "actions"] }], ngImport: i0, template: `
+    @for (action of store.actions(); track action.id) {
+      <button mat-icon-button color="basic" (click)="dispatch(action)">
+        <mat-icon>{{ action.icon }}</mat-icon>
+      </button>
+    }
+  `, isInline: true, styles: [":host{width:100%;height:100%;background:#fff;display:block;--primary-color: #404040;--primary-color-SCOPED-IN-icon-button-menu-u92h: var(--primary-color);--on-primary-color: #f0f0f0;--on-primary-color-SCOPED-IN-icon-button-menu-u92h: var(--on-primary-color);--secondary-color: #B0B0B0;--secondary-color-SCOPED-IN-icon-button-menu-u92h: var(--secondary-color);--mdc-icon-button-icon-color: #FEFEFE;--mdc-icon-button-icon-color-SCOPED-IN-icon-button-menu-u92h: var(--mdc-icon-button-icon-color)}:host{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;width:100%;height:100%;background-color:var(--primary-color-SCOPED-IN-icon-button-menu-u92h)}:host button{--mat-icon-color: var(--on-primary-color-SCOPED-IN-icon-button-menu-u92h)}\n"], dependencies: [{ 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IconButtonMenuTemplate, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: IconButtonMenuTemplate, decorators: [{
             type: Component,
             args: [{ selector: 'templates-icon-button-menu', standalone: true, imports: [
-                        CommonModule,
                         MatButtonModule,
                         MatIconModule,
                     ], template: `
-    <button
-      mat-icon-button
-      color="basic"
-      *ngFor="let action of store.actions"
-      (click)="dispatch(action)"
-    >
-      <mat-icon>{{ action.icon }}</mat-icon>
-    </button>
+    @for (action of store.actions(); track action.id) {
+      <button mat-icon-button color="basic" (click)="dispatch(action)">
+        <mat-icon>{{ action.icon }}</mat-icon>
+      </button>
+    }
   `, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
                         {
                             directive: IconButtonMenuTemplateStore,
                             inputs: ['actions'],
                         },
-                    ], styles: [":host{width:100%;height:100%;background:white;display:block;--primary-color: #3f51b5;--primary-color-SCOPED-IN-icon-button-menu-0vWW: var(--primary-color);--mdc-icon-button-icon-color: white;--mdc-icon-button-icon-color-SCOPED-IN-icon-button-menu-0vWW: var(--mdc-icon-button-icon-color)}:host{display:flex;flex-direction:column;justify-content:start;align-items:center;width:100%;height:100%;background-color:var(--primary-color-SCOPED-IN-icon-button-menu-0vWW)}\n"] }]
+                    ], styles: [":host{width:100%;height:100%;background:#fff;display:block;--primary-color: #404040;--primary-color-SCOPED-IN-icon-button-menu-u92h: var(--primary-color);--on-primary-color: #f0f0f0;--on-primary-color-SCOPED-IN-icon-button-menu-u92h: var(--on-primary-color);--secondary-color: #B0B0B0;--secondary-color-SCOPED-IN-icon-button-menu-u92h: var(--secondary-color);--mdc-icon-button-icon-color: #FEFEFE;--mdc-icon-button-icon-color-SCOPED-IN-icon-button-menu-u92h: var(--mdc-icon-button-icon-color)}:host{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;width:100%;height:100%;background-color:var(--primary-color-SCOPED-IN-icon-button-menu-u92h)}:host button{--mat-icon-color: var(--on-primary-color-SCOPED-IN-icon-button-menu-u92h)}\n"] }]
         }] });
 
 /**