@ng-atomic/components 16.2.0 → 16.3.1

package/fesm2022/ng-atomic-components-templates-code-editor.mjs

@@ -1,101 +1,65 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
-import * as i1 from '@angular/common';
+import { model, input, Directive, inject, viewChild, Component, ChangeDetectionStrategy } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { EditorComponent } from '@ng-atomic/components/extras/editor';
-import { keymap, lineNumbers } from '@codemirror/view';
-import { indentWithTab, history } from '@codemirror/commands';
-import { closeBrackets, autocompletion } from '@codemirror/autocomplete';
-import { bracketMatching, syntaxHighlighting } from '@codemirror/language';
-import { oneDark, oneDarkHighlightStyle } from '@codemirror/theme-one-dark';
-import { EditorState } from '@codemirror/state';
-import { basicSetup, EditorView } from 'codemirror';
 import { NgAtomicComponent } from '@ng-atomic/core';
-import { ReplaySubject, switchMap, distinctUntilChanged, map } from 'rxjs';
-import { html } from '@codemirror/lang-html';
 
 var ActionId;
 (function (ActionId) {
     ActionId["UPDATE_FILE"] = "[@matcher/assistant/templates/code-editor] update file";
 })(ActionId || (ActionId = {}));
+class CodeEditorTemplateStore {
+    constructor() {
+        this.content = model('');
+        this.extensions = input([]);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: CodeEditorTemplateStore, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "17.2.2", type: CodeEditorTemplateStore, isStandalone: true, selector: "templates-code-editor", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, extensions: { classPropertyName: "extensions", publicName: "extensions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { content: "contentChange" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: CodeEditorTemplateStore, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: 'templates-code-editor',
+                }]
+        }] });
 class CodeEditorTemplate extends NgAtomicComponent {
     constructor() {
         super(...arguments);
-        this.state = this.makeEditorState({ value: 'test' });
-        this.file$ = new ReplaySubject(1);
-        this.state$ = this.file$.pipe(switchMap(file => file.text()), distinctUntilChanged(), map((text) => this.makeEditorState({ value: text })));
-        this._file = null;
-        this.keyActions = [];
+        this.store = inject(CodeEditorTemplateStore);
+        this.editor = viewChild(EditorComponent);
     }
     static { this.ActionId = ActionId; }
-    set file(value) {
-        this.file$.next(value);
-    }
-    get file() {
-        return this._file;
-    }
-    makeEditorState({ value }) {
-        // const formattedHtml = prettier.format(value, {
-        //   parser: "html",
-        //   plugins: [parserHtml]
-        // });
-        return EditorState.create({
-            doc: value,
-            extensions: [
-                keymap.of([
-                    ...(this.keyActions ?? []).map(({ key, actionId }) => ({
-                        key,
-                        run: () => (this.dispatch({ id: actionId }), true),
-                    })),
-                    indentWithTab,
-                ]),
-                basicSetup,
-                html(),
-                EditorView.updateListener.of((update) => {
-                    const content = update.state.doc.toString();
-                    this.dispatch({
-                        id: ActionId.UPDATE_FILE,
-                        payload: new File([content], this.file?.name ?? 'index.html', {
-                            type: 'text/plain',
-                        }),
-                    });
-                }),
-                bracketMatching(),
-                closeBrackets(),
-                history(),
-                autocompletion(),
-                lineNumbers(),
-                oneDark,
-                syntaxHighlighting(oneDarkHighlightStyle),
-            ],
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CodeEditorTemplate, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CodeEditorTemplate, isStandalone: true, selector: "templates-code-editor", inputs: { file: "file", keyActions: "keyActions" }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: CodeEditorTemplate, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "17.2.2", type: CodeEditorTemplate, isStandalone: true, selector: "templates-code-editor", viewQueries: [{ propertyName: "editor", first: true, predicate: EditorComponent, descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: CodeEditorTemplateStore, inputs: ["content", "content", "extensions", "extensions"], outputs: ["contentChange", "contentChange"] }], ngImport: i0, template: `
     <extras-editor
-      [state]="state$ | async"
-    ></extras-editor>
-  `, isInline: true, styles: [":host{display:block;width:100%;height:100%}:host extras-editor{height:100%;max-height:100%;font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: EditorComponent, selector: "extras-editor", inputs: ["state"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+      [(content)]="store.content"
+      [extensions]="store.extensions()"
+    />
+  `, isInline: true, styles: [":host{display:block;width:100%;height:100%}:host extras-editor{height:100%;max-height:100%;font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: EditorComponent, selector: "extras-editor", inputs: ["content", "keyActions", "extensions"], outputs: ["contentChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CodeEditorTemplate, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: CodeEditorTemplate, decorators: [{
             type: Component,
             args: [{ selector: 'templates-code-editor', standalone: true, imports: [
                         CommonModule,
                         EditorComponent,
                     ], template: `
     <extras-editor
-      [state]="state$ | async"
-    ></extras-editor>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;width:100%;height:100%}:host extras-editor{height:100%;max-height:100%;font-size:14px}\n"] }]
-        }], propDecorators: { file: [{
-                type: Input
-            }], keyActions: [{
-                type: Input
-            }] } });
+      [(content)]="store.content"
+      [extensions]="store.extensions()"
+    />
+  `, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
+                        {
+                            directive: CodeEditorTemplateStore,
+                            inputs: ['content', 'extensions'],
+                            outputs: ['contentChange'],
+                        }
+                    ], styles: [":host{display:block;width:100%;height:100%}:host extras-editor{height:100%;max-height:100%;font-size:14px}\n"] }]
+        }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { CodeEditorTemplate };
+export { CodeEditorTemplate, CodeEditorTemplateStore };
 //# sourceMappingURL=ng-atomic-components-templates-code-editor.mjs.map

package/fesm2022/ng-atomic-components-templates-code-editor.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-atomic-components-templates-code-editor.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/templates/code-editor/code-editor.template.ts","../../../../../packages/@ng-atomic/components/src/lib/templates/code-editor/ng-atomic-components-templates-code-editor.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { EditorComponent } from '@ng-atomic/components/extras/editor';\nimport { EventEmitter, Input, Output } from '@angular/core';\nimport { keymap, KeyBinding } from \"@codemirror/view\"\nimport { indentWithTab } from \"@codemirror/commands\"\nimport { history } from '@codemirror/commands';\nimport { autocompletion, closeBrackets } from '@codemirror/autocomplete';\nimport { bracketMatching, syntaxHighlighting } from '@codemirror/language';\nimport { oneDarkHighlightStyle, oneDark } from '@codemirror/theme-one-dark';\nimport { EditorState } from '@codemirror/state';\nimport { lineNumbers } from '@codemirror/view';\nimport { basicSetup, EditorView } from \"codemirror\"\nimport { NgAtomicComponent } from '@ng-atomic/core';\nimport { ReplaySubject, distinctUntilChanged, map, switchMap } from 'rxjs';\nimport { html } from \"@codemirror/lang-html\";\nimport prettier from \"prettier/standalone\";\nimport parserHtml from \"prettier/parser-html\";\n\nenum ActionId {\n  UPDATE_FILE = '[@matcher/assistant/templates/code-editor] update file',\n}\n\n@Component({\n  selector: 'templates-code-editor',\n  standalone: true,\n  imports: [\n    CommonModule,\n    EditorComponent,\n  ],\n  template: `\n    <extras-editor\n      [state]=\"state$ | async\"\n    ></extras-editor>\n  `,\n  styleUrls: ['./code-editor.template.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class CodeEditorTemplate extends NgAtomicComponent {\n  static ActionId = ActionId;\n\n  state = this.makeEditorState({value: 'test'});\n\n  file$ = new ReplaySubject<File>(1);\n  state$ = this.file$.pipe(\n    switchMap(file => file.text()),\n    distinctUntilChanged(),\n    map((text) => this.makeEditorState({value: text})),\n  );\n\n  @Input()\n  set file(value: File | null) {\n    this.file$.next(value);\n  }\n  get file(): File | null {\n    return this._file;\n  }\n  private _file: File | null = null;\n\n  @Input()\n  keyActions: {key: string, actionId: string}[] = [];\n\n  private makeEditorState({value}: {value: string}) {\n    // const formattedHtml = prettier.format(value, {\n    //   parser: \"html\",\n    //   plugins: [parserHtml]\n    // });\n    return EditorState.create({\n      doc: value,\n      extensions: [\n        keymap.of([\n          ...(this.keyActions ?? []).map(({key, actionId}) => ({\n            key,\n            run: () => (this.dispatch({id: actionId}), true),\n          })),\n          indentWithTab,\n        ]),\n        basicSetup,\n        html(),\n        EditorView.updateListener.of((update) => {\n          const content = update.state.doc.toString();\n          this.dispatch({\n            id: ActionId.UPDATE_FILE,\n            payload: new File([content], this.file?.name ?? 'index.html', {\n              type: 'text/plain',\n            }),\n          });\n        }),\n        bracketMatching(),\n        closeBrackets(),\n        history(),\n        autocompletion(),\n        lineNumbers(),\n        oneDark,\n        syntaxHighlighting(oneDarkHighlightStyle),\n      ],\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-templates-code-editor.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/templates/code-editor/code-editor.template.ts","../../../../../packages/@ng-atomic/components/src/lib/templates/code-editor/ng-atomic-components-templates-code-editor.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Directive, inject, input, model, viewChild } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { EditorComponent } from '@ng-atomic/components/extras/editor';\nimport { NgAtomicComponent } from '@ng-atomic/core';\nimport { Extension } from '@codemirror/state';\n\n\nenum ActionId {\n  UPDATE_FILE = '[@matcher/assistant/templates/code-editor] update file',\n}\n\n@Directive({\n  standalone: true,\n  selector: 'templates-code-editor',\n})\nexport class CodeEditorTemplateStore {\n  content = model<string>('');\n  readonly extensions = input<Extension[]>([]);\n}\n\n@Component({\n  selector: 'templates-code-editor',\n  standalone: true,\n  imports: [\n    CommonModule,\n    EditorComponent,\n  ],\n  template: `\n    <extras-editor\n      [(content)]=\"store.content\"\n      [extensions]=\"store.extensions()\"\n    />\n  `,\n  styleUrls: ['./code-editor.template.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  hostDirectives: [\n    {\n      directive: CodeEditorTemplateStore,\n      inputs: ['content', 'extensions'],\n      outputs: ['contentChange'],\n    }\n  ]\n})\nexport class CodeEditorTemplate extends NgAtomicComponent {\n  static ActionId = ActionId;\n  protected store = inject(CodeEditorTemplateStore);\n  readonly editor = viewChild(EditorComponent);\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-entrance.mjs

@@ -1,14 +1,14 @@
+import { __decorate } from 'tslib';
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output } from '@angular/core';
+import { input, Directive, inject, Component, ChangeDetectionStrategy } from '@angular/core';
+import { InjectableComponent, TokenizedType, NgAtomicComponent } from '@ng-atomic/core';
 import { FormGroup, FormControl } from '@angular/forms';
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
 import { AutoLayoutFrame } from '@ng-atomic/components/frames/auto-layout';
 import { CardFrame } from '@ng-atomic/components/frames/card';
 import { ActionButtonsSectionOrganism } from '@ng-atomic/components/organisms/action-buttons-section';
 import { HeadingOrganism } from '@ng-atomic/components/organisms/heading';
 import { SocialLoginSectionOrganism } from '@ng-atomic/components/organisms/social-login-section';
-import { TextInputSectionOrganism } from '@ng-atomic/components/organisms/text-input-section';
+import { TextInputSectionOrganismStore } from '@ng-atomic/components/organisms/text-input-section';
 
 var ActionId;
 (function (ActionId) {
@@ -16,99 +16,125 @@ var ActionId;
     ActionId["SIGN_IN_WITH_GOOGLE"] = "[@ng-atomic/components] Sign In With Google";
     ActionId["SIGN_IN_WITH_TWITTER"] = "[@ng-atomic/components] Sign In With Twitter";
 })(ActionId || (ActionId = {}));
-const Actions = [
-    {
-        id: ActionId.SIGN_IN,
-        name: 'Sign In',
-        icon: 'login',
-    },
-    {
-        id: ActionId.SIGN_IN_WITH_GOOGLE,
-        name: 'Sign In With Google',
-        icon: 'google',
-    },
-    {
-        id: ActionId.SIGN_IN_WITH_TWITTER,
-        name: 'Sign In With Twitter',
-        icon: 'twitter',
-    },
-];
-class EntranceTemplate {
+let EntranceTemplateStore = class EntranceTemplateStore extends InjectableComponent {
     constructor() {
-        this.ActionId = ActionId;
-        this.form = new FormGroup({
+        super(...arguments);
+        this.form = input(new FormGroup({
             email: new FormControl(''),
             password: new FormControl(''),
-        });
-        this.actions = Actions;
-        this.action = new EventEmitter();
+        }));
+        this.actions = input([
+            { id: ActionId.SIGN_IN, name: 'Sign In', icon: 'login' },
+            { id: ActionId.SIGN_IN_WITH_GOOGLE, name: 'Sign In With Google', icon: 'google' },
+            { id: ActionId.SIGN_IN_WITH_TWITTER, name: 'Sign In With Twitter', icon: 'twitter' },
+        ]);
+        this.title = input('ログイン');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: EntranceTemplateStore, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "17.2.2", type: EntranceTemplateStore, isStandalone: true, selector: "templates-entrance", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
+};
+EntranceTemplateStore = __decorate([
+    TokenizedType()
+], EntranceTemplateStore);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: EntranceTemplateStore, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'templates-entrance',
+                    standalone: true,
+                }]
+        }] });
+class EntranceTemplate extends NgAtomicComponent {
+    constructor() {
+        super(...arguments);
+        this.ActionId = ActionId;
+        this.store = inject(EntranceTemplateStore);
     }
     static { this.ActionId = ActionId; }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EntranceTemplate, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EntranceTemplate, isStandalone: true, selector: "templates-entrance", inputs: { form: "form", actions: "actions" }, outputs: { action: "action" }, host: { classAttribute: "template" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: EntranceTemplate, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.2", type: EntranceTemplate, isStandalone: true, selector: "templates-entrance", host: { classAttribute: "template" }, usesInheritance: true, hostDirectives: [{ directive: EntranceTemplateStore, inputs: ["form", "form", "actions", "actions", "title", "title"] }], ngImport: i0, template: `
   <frames-card>
     <frames-auto-layout vertical>
-      <organisms-heading>ログイン</organisms-heading>
-      <organisms-text-input-section
-        *ngIf="form.get('email')"
-        label="メールアドレス"
-        [control]="form.get('email')"
-      ></organisms-text-input-section>
-      <organisms-text-input-section
-        *ngIf="form.get('password')"
-        label="パスワード"
-        [control]="form.get('password')"
-      ></organisms-text-input-section>
-      <organisms-action-buttons-section
-        [actions]="actions"
-        (action)="action.emit($event)"
-      ></organisms-action-buttons-section>
+      <organisms-heading>{{ store.title() }}</organisms-heading>
+      @if (store.form()) {
+        @if (store.form().get('email')) {
+          @defer {
+            <organisms-text-input-section injectable
+              label="メールアドレス"
+              [control]="store.form().get('email')"
+            />
+          }
+        }
+        @if (store.form().get('password')) {
+          @defer {
+            <organisms-text-input-section injectable
+              label="パスワード"
+              [control]="store.form().get('password')"
+            />
+          }
+        }
+        @for (action of store.actions(); track action.id;) {
+          @defer {
+            <organisms-action-buttons-section
+              [actions]="[action]"
+              (action)="dispatch($event)"
+            />
+          } @error { error } }
+      }
     </frames-auto-layout>
   </frames-card>
-  `, isInline: true, styles: [":host{--horizontal-padding: 64px;--horizontal-padding-SCOPED-IN-entrance-zl1K: var(--horizontal-padding);--background-color: #eee;--background-color-SCOPED-IN-entrance-zl1K: var(--background-color)}:host{display:flex;justify-content:center;align-items:center;background-color:var(--background-color-SCOPED-IN-entrance-zl1K);width:100%;height:100%}:host frames-card{display:flex;flex-direction:column;width:600px;max-width:calc(100% - 32px);height:-moz-fit-content;height:fit-content}:host frames-card *{max-width:calc(100% - 32px);--horizontal-padding: var(--horizontal-padding-SCOPED-IN-entrance-zl1K)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AutoLayoutFrame, selector: "frames-auto-layout" }, { kind: "component", type: CardFrame, selector: "frames-card" }, { kind: "component", type: ActionButtonsSectionOrganism, selector: "organisms-action-buttons-section", inputs: ["actions"], outputs: ["action"] }, { kind: "component", type: HeadingOrganism, selector: "organisms-heading", inputs: ["level"] }, { kind: "component", type: TextInputSectionOrganism, selector: "organisms-text-input-section", inputs: ["label", "placeholder", "type", "hint", "control", "autoComplete"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{--horizontal-padding: 64px;--horizontal-padding-SCOPED-IN-entrance-csB6: var(--horizontal-padding);--background-color: #eee;--background-color-SCOPED-IN-entrance-csB6: var(--background-color);--page-width-lv1-SCOPED-IN-entrance-csB6: var(--page-width-lv1)}:host{display:flex;justify-content:center;align-items:center;background-color:var(--background-color-SCOPED-IN-entrance-csB6);width:100%;height:100%}:host frames-card{display:flex;flex-direction:column;width:600px;max-width:calc(100% - 32px);height:-moz-fit-content;height:fit-content}:host frames-card *{max-width:calc(100% - 32px);--horizontal-padding: var(--horizontal-padding-SCOPED-IN-entrance-csB6)}\n"], dependencies: [{ kind: "component", type: AutoLayoutFrame, selector: "frames-auto-layout" }, { kind: "component", type: CardFrame, selector: "frames-card" }, { kind: "component", type: HeadingOrganism, selector: "organisms-heading", inputs: ["level"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EntranceTemplate, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: EntranceTemplate, decorators: [{
             type: Component,
             args: [{ selector: 'templates-entrance', standalone: true, imports: [
-                        CommonModule,
                         AutoLayoutFrame,
                         CardFrame,
                         ActionButtonsSectionOrganism,
                         HeadingOrganism,
                         SocialLoginSectionOrganism,
-                        TextInputSectionOrganism,
+                        TextInputSectionOrganismStore,
                     ], template: `
   <frames-card>
     <frames-auto-layout vertical>
-      <organisms-heading>ログイン</organisms-heading>
-      <organisms-text-input-section
-        *ngIf="form.get('email')"
-        label="メールアドレス"
-        [control]="form.get('email')"
-      ></organisms-text-input-section>
-      <organisms-text-input-section
-        *ngIf="form.get('password')"
-        label="パスワード"
-        [control]="form.get('password')"
-      ></organisms-text-input-section>
-      <organisms-action-buttons-section
-        [actions]="actions"
-        (action)="action.emit($event)"
-      ></organisms-action-buttons-section>
+      <organisms-heading>{{ store.title() }}</organisms-heading>
+      @if (store.form()) {
+        @if (store.form().get('email')) {
+          @defer {
+            <organisms-text-input-section injectable
+              label="メールアドレス"
+              [control]="store.form().get('email')"
+            />
+          }
+        }
+        @if (store.form().get('password')) {
+          @defer {
+            <organisms-text-input-section injectable
+              label="パスワード"
+              [control]="store.form().get('password')"
+            />
+          }
+        }
+        @for (action of store.actions(); track action.id;) {
+          @defer {
+            <organisms-action-buttons-section
+              [actions]="[action]"
+              (action)="dispatch($event)"
+            />
+          } @error { error } }
+      }
     </frames-auto-layout>
   </frames-card>
-  `, host: { class: 'template' }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{--horizontal-padding: 64px;--horizontal-padding-SCOPED-IN-entrance-zl1K: var(--horizontal-padding);--background-color: #eee;--background-color-SCOPED-IN-entrance-zl1K: var(--background-color)}:host{display:flex;justify-content:center;align-items:center;background-color:var(--background-color-SCOPED-IN-entrance-zl1K);width:100%;height:100%}:host frames-card{display:flex;flex-direction:column;width:600px;max-width:calc(100% - 32px);height:-moz-fit-content;height:fit-content}:host frames-card *{max-width:calc(100% - 32px);--horizontal-padding: var(--horizontal-padding-SCOPED-IN-entrance-zl1K)}\n"] }]
-        }], propDecorators: { form: [{
-                type: Input
-            }], actions: [{
-                type: Input
-            }], action: [{
-                type: Output
-            }] } });
+  `, host: { class: 'template' }, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
+                        {
+                            directive: EntranceTemplateStore,
+                            inputs: ['form', 'actions', 'title'],
+                        },
+                    ], styles: [":host{--horizontal-padding: 64px;--horizontal-padding-SCOPED-IN-entrance-csB6: var(--horizontal-padding);--background-color: #eee;--background-color-SCOPED-IN-entrance-csB6: var(--background-color);--page-width-lv1-SCOPED-IN-entrance-csB6: var(--page-width-lv1)}:host{display:flex;justify-content:center;align-items:center;background-color:var(--background-color-SCOPED-IN-entrance-csB6);width:100%;height:100%}:host frames-card{display:flex;flex-direction:column;width:600px;max-width:calc(100% - 32px);height:-moz-fit-content;height:fit-content}:host frames-card *{max-width:calc(100% - 32px);--horizontal-padding: var(--horizontal-padding-SCOPED-IN-entrance-csB6)}\n"] }]
+        }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { Actions, EntranceTemplate };
+export { EntranceTemplate, EntranceTemplateStore };
 //# sourceMappingURL=ng-atomic-components-templates-entrance.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"ng-atomic-components-templates-entrance.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/templates/entrance/entrance.template.ts","../../../../../packages/@ng-atomic/components/src/lib/templates/entrance/ng-atomic-components-templates-entrance.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';\nimport { Action } from '@ng-atomic/core';\nimport { FormGroup, FormControl} from '@angular/forms';\nimport { CommonModule } from '@angular/common';\nimport { AutoLayoutFrame } from '@ng-atomic/components/frames/auto-layout';\nimport { CardFrame } from '@ng-atomic/components/frames/card';\nimport { ActionButtonsSectionOrganism } from '@ng-atomic/components/organisms/action-buttons-section';\nimport { HeadingOrganism } from '@ng-atomic/components/organisms/heading';\nimport { SocialLoginSectionOrganism } from '@ng-atomic/components/organisms/social-login-section';\nimport { TextInputSectionOrganism } from '@ng-atomic/components/organisms/text-input-section';\n\nenum ActionId {\n  SIGN_IN = '[@ng-atomic/components] Sign In',\n  SIGN_IN_WITH_GOOGLE = '[@ng-atomic/components] Sign In With Google',\n  SIGN_IN_WITH_TWITTER = '[@ng-atomic/components] Sign In With Twitter',\n}\n\nexport const Actions: Action[] = [\n  {\n    id: ActionId.SIGN_IN,\n    name: 'Sign In',\n    icon: 'login',\n  },\n  {\n    id: ActionId.SIGN_IN_WITH_GOOGLE,\n    name: 'Sign In With Google',\n    icon: 'google',\n  },\n  {\n    id: ActionId.SIGN_IN_WITH_TWITTER,\n    name: 'Sign In With Twitter',\n    icon: 'twitter',\n  },\n];\n\n@Component({\n  selector: 'templates-entrance',\n  standalone: true,\n  imports: [\n    CommonModule,\n    AutoLayoutFrame,\n    CardFrame,\n    ActionButtonsSectionOrganism,\n    HeadingOrganism,\n    SocialLoginSectionOrganism,\n    TextInputSectionOrganism,\n  ],\n  template: `\n  <frames-card>\n    <frames-auto-layout vertical>\n      <organisms-heading>ログイン</organisms-heading>\n      <organisms-text-input-section\n        *ngIf=\"form.get('email')\"\n        label=\"メールアドレス\"\n        [control]=\"form.get('email')\"\n      ></organisms-text-input-section>\n      <organisms-text-input-section\n        *ngIf=\"form.get('password')\"\n        label=\"パスワード\"\n        [control]=\"form.get('password')\"\n      ></organisms-text-input-section>\n      <organisms-action-buttons-section\n        [actions]=\"actions\"\n        (action)=\"action.emit($event)\"\n      ></organisms-action-buttons-section>\n    </frames-auto-layout>\n  </frames-card>\n  `,\n  styleUrls: ['./entrance.template.scss'],\n  host: {class: 'template'},\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class EntranceTemplate {\n  static ActionId = ActionId;\n  protected ActionId = ActionId\n\n  @Input()\n  form = new FormGroup({\n    email: new FormControl(''),\n    password: new FormControl(''),\n  });\n\n  @Input()\n  actions = Actions;\n\n  @Output()\n  action = new EventEmitter<Action>()\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-templates-entrance.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/templates/entrance/entrance.template.ts","../../../../../packages/@ng-atomic/components/src/lib/templates/entrance/ng-atomic-components-templates-entrance.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Directive, inject, input } from '@angular/core';\nimport { InjectableComponent, NgAtomicComponent, TokenizedType } from '@ng-atomic/core';\nimport { FormGroup, FormControl} from '@angular/forms';\nimport { AutoLayoutFrame } from '@ng-atomic/components/frames/auto-layout';\nimport { CardFrame } from '@ng-atomic/components/frames/card';\nimport { ActionButtonsSectionOrganism } from '@ng-atomic/components/organisms/action-buttons-section';\nimport { HeadingOrganism } from '@ng-atomic/components/organisms/heading';\nimport { SocialLoginSectionOrganism } from '@ng-atomic/components/organisms/social-login-section';\nimport { TextInputSectionOrganismStore } from '@ng-atomic/components/organisms/text-input-section';\n\nenum ActionId {\n  SIGN_IN = '[@ng-atomic/components] Sign In',\n  SIGN_IN_WITH_GOOGLE = '[@ng-atomic/components] Sign In With Google',\n  SIGN_IN_WITH_TWITTER = '[@ng-atomic/components] Sign In With Twitter',\n}\n\n@TokenizedType()\n@Directive({\n  selector: 'templates-entrance',\n  standalone: true,\n})\nexport class EntranceTemplateStore extends InjectableComponent {\n  readonly form = input(new FormGroup({\n    email: new FormControl(''),\n    password: new FormControl(''),\n  }));\n  readonly actions = input([\n    { id: ActionId.SIGN_IN, name: 'Sign In', icon: 'login' },\n    { id: ActionId.SIGN_IN_WITH_GOOGLE, name: 'Sign In With Google', icon: 'google' },\n    { id: ActionId.SIGN_IN_WITH_TWITTER, name: 'Sign In With Twitter', icon: 'twitter' },\n  ]);\n\n  readonly title = input('ログイン');\n}\n\n@Component({\n  selector: 'templates-entrance',\n  standalone: true,\n  imports: [\n    AutoLayoutFrame,\n    CardFrame,\n    ActionButtonsSectionOrganism,\n    HeadingOrganism,\n    SocialLoginSectionOrganism,\n    TextInputSectionOrganismStore,\n  ],\n  template: `\n  <frames-card>\n    <frames-auto-layout vertical>\n      <organisms-heading>{{ store.title() }}</organisms-heading>\n      @if (store.form()) {\n        @if (store.form().get('email')) {\n          @defer {\n            <organisms-text-input-section injectable\n              label=\"メールアドレス\"\n              [control]=\"store.form().get('email')\"\n            />\n          }\n        }\n        @if (store.form().get('password')) {\n          @defer {\n            <organisms-text-input-section injectable\n              label=\"パスワード\"\n              [control]=\"store.form().get('password')\"\n            />\n          }\n        }\n        @for (action of store.actions(); track action.id;) {\n          @defer {\n            <organisms-action-buttons-section\n              [actions]=\"[action]\"\n              (action)=\"dispatch($event)\"\n            />\n          } @error { error } }\n      }\n    </frames-auto-layout>\n  </frames-card>\n  `,\n  styleUrls: ['./entrance.template.scss'],\n  host: {class: 'template'},\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  hostDirectives: [\n    {\n      directive: EntranceTemplateStore,\n      inputs: ['form', 'actions', 'title'],\n    },\n  ],\n})\nexport class EntranceTemplate extends NgAtomicComponent {\n  static ActionId = ActionId;\n  protected ActionId = ActionId;\n  protected store = inject(EntranceTemplateStore);\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-file-tree.mjs

@@ -29,8 +29,8 @@ class FileTreeTemplate extends NgAtomicComponent {
         console.debug('test');
         this.dispatch({ id: ActionId.OPEN_FILE, payload: node });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FileTreeTemplate, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FileTreeTemplate, isStandalone: true, selector: "templates-file-tree", inputs: { treeNode: "treeNode" }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: FileTreeTemplate, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.2", type: FileTreeTemplate, isStandalone: true, selector: "templates-file-tree", inputs: { treeNode: "treeNode" }, usesInheritance: true, ngImport: i0, template: `
   <mat-tree [dataSource]="dataSource" [treeControl]="treeControl" class="example-tree">
     <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
       <a style="color: red" (click)="test(node)">1. {{ node.name }}</a>
@@ -54,9 +54,9 @@ class FileTreeTemplate extends NgAtomicComponent {
       </div>
     </mat-nested-tree-node>
   </mat-tree>
-  `, isInline: true, styles: [":host{width:100%;height:100%;background:white;display:block}:host .example-tree-invisible{display:none}:host .example-tree ul,:host .example-tree li{margin-top:0;margin-bottom:0;list-style-type:none}:host .example-tree .mat-nested-tree-node div[role=group]{padding-left:40px}:host .example-tree div[role=group]>.mat-tree-node{padding-left:40px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatTreeModule }, { kind: "directive", type: i1.MatNestedTreeNode, selector: "mat-nested-tree-node", inputs: ["role", "disabled", "tabIndex", "matNestedTreeNode"], exportAs: ["matNestedTreeNode"] }, { kind: "directive", type: i1.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i1.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i1.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i1.MatTreeNode, selector: "mat-tree-node", inputs: ["role", "disabled", "tabIndex"], exportAs: ["matTreeNode"] }, { kind: "directive", type: i1.MatTreeNodeOutlet, selector: "[matTreeNodeOutlet]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{width:100%;height:100%;background:#fff;display:block}:host .example-tree-invisible{display:none}:host .example-tree ul,:host .example-tree li{margin-top:0;margin-bottom:0;list-style-type:none}:host .example-tree .mat-nested-tree-node div[role=group]{padding-left:40px}:host .example-tree div[role=group]>.mat-tree-node{padding-left:40px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatTreeModule }, { kind: "directive", type: i1.MatNestedTreeNode, selector: "mat-nested-tree-node", inputs: ["matNestedTreeNode", "disabled", "tabIndex"], exportAs: ["matNestedTreeNode"] }, { kind: "directive", type: i1.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i1.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i1.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i1.MatTreeNode, selector: "mat-tree-node", inputs: ["disabled", "tabIndex"], exportAs: ["matTreeNode"] }, { kind: "directive", type: i1.MatTreeNodeOutlet, selector: "[matTreeNodeOutlet]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FileTreeTemplate, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.2", ngImport: i0, type: FileTreeTemplate, decorators: [{
             type: Component,
             args: [{ selector: 'templates-file-tree', standalone: true, imports: [
                         CommonModule,
@@ -87,7 +87,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
       </div>
     </mat-nested-tree-node>
   </mat-tree>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{width:100%;height:100%;background:white;display:block}:host .example-tree-invisible{display:none}:host .example-tree ul,:host .example-tree li{margin-top:0;margin-bottom:0;list-style-type:none}:host .example-tree .mat-nested-tree-node div[role=group]{padding-left:40px}:host .example-tree div[role=group]>.mat-tree-node{padding-left:40px}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{width:100%;height:100%;background:#fff;display:block}:host .example-tree-invisible{display:none}:host .example-tree ul,:host .example-tree li{margin-top:0;margin-bottom:0;list-style-type:none}:host .example-tree .mat-nested-tree-node div[role=group]{padding-left:40px}:host .example-tree div[role=group]>.mat-tree-node{padding-left:40px}\n"] }]
         }], propDecorators: { treeNode: [{
                 type: Input
             }] } });

package/fesm2022/ng-atomic-components-templates-file-tree.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-atomic-components-templates-file-tree.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/templates/file-tree/file-tree.template.ts","../../../../../packages/@ng-atomic/components/src/lib/templates/file-tree/ng-atomic-components-templates-file-tree.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Input } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { FileSystemTree } from '@webcontainer/api';\nimport { NestedTreeControl } from '@angular/cdk/tree';\nimport { MatTreeNestedDataSource } from '@angular/material/tree';\nimport {MatTreeModule} from '@angular/material/tree';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatButtonModule } from '@angular/material/button';\nimport { NgAtomicComponent } from '@ng-atomic/core';\n\nexport interface TreeNode {\n  name: string;\n  type: string;\n  parent?: TreeNode\n  children: TreeNode[];\n}\n\nenum ActionId {\n  OPEN_FILE = '[@ng-atomic/components/templates/file-tree] Open File',\n}\n\n@Component({\n  selector: 'templates-file-tree',\n  standalone: true,\n  imports: [\n    CommonModule,\n    MatTreeModule,\n    MatIconModule,\n    MatButtonModule,\n  ],\n  template: `\n  <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\" class=\"example-tree\">\n    <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodeToggle>\n      <a style=\"color: red\" (click)=\"test(node)\">1. {{ node.name }}</a>\n    </mat-tree-node>\n    <mat-nested-tree-node *matTreeNodeDef=\"let node; when: hasChild\">\n        <div class=\"mat-tree-node\">\n          <button\n            mat-icon-button\n            matTreeNodeToggle\n            [attr.aria-label]=\"'Toggle ' + node.name\"\n          >\n            <mat-icon class=\"mat-icon-rtl-mirror\">\n              {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}\n            </mat-icon>\n          </button>\n          <span>{{ node.name }}</span>\n        </div>\n        <div [class.example-tree-invisible]=\"!treeControl.isExpanded(node)\"\n            role=\"group\">\n          <ng-container matTreeNodeOutlet></ng-container>\n      </div>\n    </mat-nested-tree-node>\n  </mat-tree>\n  `,\n  styleUrls: ['./file-tree.template.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class FileTreeTemplate extends NgAtomicComponent {\n  static ActionId = ActionId;\n\n  @Input()\n  set treeNode(treeNode: TreeNode[]) {\n    this.dataSource.data = treeNode;\n  }\n\n  treeControl = new NestedTreeControl<TreeNode>(node => node.children);\n  dataSource = new MatTreeNestedDataSource<TreeNode>();\n\n  protected test(node: TreeNode) {\n    console.debug('test');\n    this.dispatch({id: ActionId.OPEN_FILE, payload: node});\n  }\n\n  hasChild = (_: number, node: TreeNode) => !!node.children && node.children.length > 0;\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-templates-file-tree.mjs","sources":["../../../../../packages/@ng-atomic/components/src/lib/templates/file-tree/file-tree.template.ts","../../../../../packages/@ng-atomic/components/src/lib/templates/file-tree/ng-atomic-components-templates-file-tree.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Input } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { FileSystemTree } from '@webcontainer/api';\nimport { NestedTreeControl } from '@angular/cdk/tree';\nimport { MatTreeNestedDataSource } from '@angular/material/tree';\nimport {MatTreeModule} from '@angular/material/tree';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatButtonModule } from '@angular/material/button';\nimport { NgAtomicComponent } from '@ng-atomic/core';\n\nexport interface TreeNode {\n  name: string;\n  type: string;\n  parent?: TreeNode\n  children: TreeNode[];\n}\n\nenum ActionId {\n  OPEN_FILE = '[@ng-atomic/components/templates/file-tree] Open File',\n}\n\n@Component({\n  selector: 'templates-file-tree',\n  standalone: true,\n  imports: [\n    CommonModule,\n    MatTreeModule,\n    MatIconModule,\n    MatButtonModule,\n  ],\n  template: `\n  <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\" class=\"example-tree\">\n    <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodeToggle>\n      <a style=\"color: red\" (click)=\"test(node)\">1. {{ node.name }}</a>\n    </mat-tree-node>\n    <mat-nested-tree-node *matTreeNodeDef=\"let node; when: hasChild\">\n        <div class=\"mat-tree-node\">\n          <button\n            mat-icon-button\n            matTreeNodeToggle\n            [attr.aria-label]=\"'Toggle ' + node.name\"\n          >\n            <mat-icon class=\"mat-icon-rtl-mirror\">\n              {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}\n            </mat-icon>\n          </button>\n          <span>{{ node.name }}</span>\n        </div>\n        <div [class.example-tree-invisible]=\"!treeControl.isExpanded(node)\"\n            role=\"group\">\n          <ng-container matTreeNodeOutlet></ng-container>\n      </div>\n    </mat-nested-tree-node>\n  </mat-tree>\n  `,\n  styleUrls: ['./file-tree.template.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class FileTreeTemplate extends NgAtomicComponent {\n  static ActionId = ActionId;\n\n  @Input()\n  set treeNode(treeNode: TreeNode[]) {\n    this.dataSource.data = treeNode;\n  }\n\n  treeControl = new NestedTreeControl<TreeNode>(node => node.children);\n  dataSource = new MatTreeNestedDataSource<TreeNode>();\n\n  protected test(node: TreeNode) {\n    console.debug('test');\n    this.dispatch({id: ActionId.OPEN_FILE, payload: node});\n  }\n\n  hasChild = (_: number, node: TreeNode) => !!node.children && node.children.length > 0;\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}