@xxmachina/components 19.51.0 → 19.81.0

package/fesm2022/xxmachina-components-organisms-terminal-input-section.mjs

@@ -26,34 +26,26 @@ class TerminalInputSectionOrganism {
     action = output();
     inputField = viewChild('inputField', ...(ngDevMode ? [{ debugName: "inputField" }] : []));
     componentId = this.speechService.generateComponentId();
-    // このコンポーネントがアクティブかどうか
     isRecording = computed(() => this.speechService.isListening() &&
         this.speechService.isActiveComponent(this.componentId), ...(ngDevMode ? [{ debugName: "isRecording" }] : []));
-    // IME変換中かどうかのフラグ
     isComposing = false;
-    // IME変換中にEnterが押されたかどうか（確定Enterの検出用）
     enterPressedDuringComposition = false;
     constructor() {
-        // アクティブな場合のみ、音声認識結果を入力フィールドに反映
         effect(() => {
             if (this.enableVoiceInput() && this.speechService.isActiveComponent(this.componentId)) {
                 const transcript = this.speechService.transcript();
                 const text = transcript.finalized + transcript.interim;
-                // clear()時は空文字でsetValueしてフォームもクリア
                 this.control().setValue(text);
             }
         });
-        // autoMode + selectedSessionId の変化を検知し、書き込み先を登録
         effect(() => {
             const autoMode = this.speechService.autoModeEnabled();
             const selectedId = this.speechService.selectedSessionId();
             const sid = this.sessionId();
             if (autoMode && sid && selectedId === sid) {
-                // Speech APIは動き続けている。書き込み先を自分に登録するだけ
                 untracked(() => this.speechService.activateComponent(this.componentId));
             }
             else if (autoMode && sid && selectedId !== sid) {
-                // deactivate: 別セッションに切り替わった → 入力欄にテキストがあれば送信
                 untracked(() => this.send());
             }
         });
@@ -64,8 +56,6 @@ class TerminalInputSectionOrganism {
     }
     onCompositionEnd() {
         this.isComposing = false;
-        // Chromeではkeydownがcompositionendより先に発火するため、
-        // IME確定のEnterを検出した場合はcompositionend後に送信する
         if (this.enterPressedDuringComposition) {
             this.enterPressedDuringComposition = false;
             setTimeout(() => this.send(), 0);
@@ -73,7 +63,6 @@ class TerminalInputSectionOrganism {
     }
     handleKeydown(event) {
         if (this.isComposing) {
-            // IME変換中のEnterを記録（確定Enter = 送信トリガー）
             if (event.key === 'Enter' && !event.shiftKey) {
                 this.enterPressedDuringComposition = true;
             }
@@ -94,7 +83,6 @@ class TerminalInputSectionOrganism {
             if (this.clearOnSend()) {
                 this.control().reset();
                 this.resetTextareaHeight();
-                // 自動モード時: stopしない。clear()でtranscriptだけリセット
                 if (this.isRecording()) {
                     this.speechService.clear();
                 }
@@ -104,14 +92,10 @@ class TerminalInputSectionOrganism {
     adjustTextareaHeight() {
         const textarea = this.inputField()?.nativeElement;
         if (textarea) {
-            // overflowを一時的にhiddenにしてscrollHeightを正確に取得
             textarea.style.overflow = 'hidden';
-            // 一旦高さを最小に設定してscrollHeightを正確に取得
             textarea.style.height = '0px';
-            // scrollHeightに合わせて高さを設定（最大200px）
             const newHeight = Math.min(textarea.scrollHeight, 200);
             textarea.style.height = `${newHeight}px`;
-            // overflowを元に戻す
             textarea.style.overflow = 'auto';
         }
     }
@@ -128,7 +112,7 @@ class TerminalInputSectionOrganism {
         this.speechService.toggle(this.componentId);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: TerminalInputSectionOrganism, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: TerminalInputSectionOrganism, isStandalone: true, selector: "organisms-terminal-input-section", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, clearOnSend: { classPropertyName: "clearOnSend", publicName: "clearOnSend", isSignal: true, isRequired: false, transformFunction: null }, enableVoiceInput: { classPropertyName: "enableVoiceInput", publicName: "enableVoiceInput", isSignal: true, isRequired: false, transformFunction: null }, sessionId: { classPropertyName: "sessionId", publicName: "sessionId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action" }, host: { classAttribute: "organism terminal-input section" }, viewQueries: [{ propertyName: "inputField", first: true, predicate: ["inputField"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"input-line\">\n  <span class=\"input-prefix\">{{ prefix() }}</span>\n  <div class=\"input-container\">\n    <textarea\n      #inputField\n      class=\"terminal-input\"\n      [formControl]=\"control()\"\n      [placeholder]=\"placeholder()\"\n      (keydown)=\"handleKeydown($event)\"\n      (input)=\"onInput()\"\n      (compositionstart)=\"onCompositionStart()\"\n      (compositionend)=\"onCompositionEnd()\"\n      rows=\"1\"\n    ></textarea>\n  </div>\n  @if (enableVoiceInput() && speechService.isSupported) {\n    <button\n      mat-icon-button\n      (click)=\"toggleVoiceInput()\"\n      [matTooltip]=\"isRecording() ? '\u97F3\u58F0\u5165\u529B\u505C\u6B62' : '\u97F3\u58F0\u5165\u529B'\"\n      [class.recording]=\"isRecording()\">\n      <mat-icon>{{ isRecording() ? 'mic' : 'mic_none' }}</mat-icon>\n    </button>\n  }\n  <button mat-icon-button (click)=\"send()\" matTooltip=\"\u9001\u4FE1\">\n    <mat-icon>send</mat-icon>\n  </button>\n</div>\n", styles: [":host{display:block;display:flex;background:#0000004d;border-top:1px solid rgba(255,255,255,.1)}.input-line{display:flex;align-items:center;width:100%;gap:8px;padding:8px 12px}.input-prefix{color:#0dbc79;font-family:SF Mono,Cascadia Code,monospace;font-size:14px;flex-shrink:0}.input-container{flex:1;display:flex}.input-container .terminal-input{width:100%;max-height:200px;background:#0003;border:1px solid rgba(255,255,255,.1);border-radius:4px;color:#e0e0e0;font-family:SF Mono,Cascadia Code,monospace;font-size:14px;line-height:20px;padding:8px 12px;resize:none;outline:none;overflow-y:auto;display:block;box-sizing:border-box}.input-container .terminal-input:focus{border-color:#0dbc7980;box-shadow:0 0 0 2px #0dbc7933}.input-container .terminal-input::placeholder{color:#ffffff4d}button{color:#0dbc79}button:hover{background:#0dbc791a}button.recording{color:#f44336;animation:pulse 1.5s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: TerminalInputSectionOrganism, isStandalone: true, selector: "organisms-terminal-input-section", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, clearOnSend: { classPropertyName: "clearOnSend", publicName: "clearOnSend", isSignal: true, isRequired: false, transformFunction: null }, enableVoiceInput: { classPropertyName: "enableVoiceInput", publicName: "enableVoiceInput", isSignal: true, isRequired: false, transformFunction: null }, sessionId: { classPropertyName: "sessionId", publicName: "sessionId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action" }, host: { classAttribute: "organism terminal-input section" }, viewQueries: [{ propertyName: "inputField", first: true, predicate: ["inputField"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"input-line\">\n  <span class=\"input-prefix\">{{ prefix() }}</span>\n  <div class=\"input-container\">\n    <textarea\n      #inputField\n      class=\"terminal-input\"\n      [formControl]=\"control()\"\n      [placeholder]=\"placeholder()\"\n      (keydown)=\"handleKeydown($event)\"\n      (input)=\"onInput()\"\n      (compositionstart)=\"onCompositionStart()\"\n      (compositionend)=\"onCompositionEnd()\"\n      rows=\"1\"\n    ></textarea>\n  </div>\n  @if (enableVoiceInput() && speechService.isSupported) {\n    <button\n      mat-icon-button\n      (click)=\"toggleVoiceInput()\"\n      [matTooltip]=\"isRecording() ? '\u97F3\u58F0\u5165\u529B\u505C\u6B62' : '\u97F3\u58F0\u5165\u529B'\"\n      [class.recording]=\"isRecording()\">\n      <mat-icon>{{ isRecording() ? 'mic' : 'mic_none' }}</mat-icon>\n    </button>\n  }\n  <button mat-icon-button (click)=\"send()\" matTooltip=\"\u9001\u4FE1\">\n    <mat-icon>send</mat-icon>\n  </button>\n</div>\n", styles: [":host{display:block;display:flex;background:#0000004d;border-top:1px solid rgba(255,255,255,.1)}.input-line{display:flex;align-items:center;width:100%;gap:8px;padding:8px 12px}.input-prefix{color:#3f3;font-family:SF Mono,Cascadia Code,monospace;font-size:14px;flex-shrink:0}.input-container{flex:1;display:flex}.input-container .terminal-input{width:100%;max-height:200px;background:#0003;border:1px solid rgba(255,255,255,.1);border-radius:4px;color:#e0e0e0;font-family:SF Mono,Cascadia Code,monospace;font-size:14px;line-height:20px;padding:8px 12px;resize:none;outline:none;overflow-y:auto;display:block;box-sizing:border-box}.input-container .terminal-input:focus{border-color:#33ff3380;box-shadow:0 0 0 2px #3f33}.input-container .terminal-input::placeholder{color:#ffffff4d}button{color:#3f3}button:hover{background:#33ff331a}button.recording{color:#f44336;animation:pulse 1.5s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: TerminalInputSectionOrganism, decorators: [{
             type: Component,
@@ -137,7 +121,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
                         MatButtonModule,
                         MatIconModule,
                         MatTooltipModule
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'organism terminal-input section' }, template: "<div class=\"input-line\">\n  <span class=\"input-prefix\">{{ prefix() }}</span>\n  <div class=\"input-container\">\n    <textarea\n      #inputField\n      class=\"terminal-input\"\n      [formControl]=\"control()\"\n      [placeholder]=\"placeholder()\"\n      (keydown)=\"handleKeydown($event)\"\n      (input)=\"onInput()\"\n      (compositionstart)=\"onCompositionStart()\"\n      (compositionend)=\"onCompositionEnd()\"\n      rows=\"1\"\n    ></textarea>\n  </div>\n  @if (enableVoiceInput() && speechService.isSupported) {\n    <button\n      mat-icon-button\n      (click)=\"toggleVoiceInput()\"\n      [matTooltip]=\"isRecording() ? '\u97F3\u58F0\u5165\u529B\u505C\u6B62' : '\u97F3\u58F0\u5165\u529B'\"\n      [class.recording]=\"isRecording()\">\n      <mat-icon>{{ isRecording() ? 'mic' : 'mic_none' }}</mat-icon>\n    </button>\n  }\n  <button mat-icon-button (click)=\"send()\" matTooltip=\"\u9001\u4FE1\">\n    <mat-icon>send</mat-icon>\n  </button>\n</div>\n", styles: [":host{display:block;display:flex;background:#0000004d;border-top:1px solid rgba(255,255,255,.1)}.input-line{display:flex;align-items:center;width:100%;gap:8px;padding:8px 12px}.input-prefix{color:#0dbc79;font-family:SF Mono,Cascadia Code,monospace;font-size:14px;flex-shrink:0}.input-container{flex:1;display:flex}.input-container .terminal-input{width:100%;max-height:200px;background:#0003;border:1px solid rgba(255,255,255,.1);border-radius:4px;color:#e0e0e0;font-family:SF Mono,Cascadia Code,monospace;font-size:14px;line-height:20px;padding:8px 12px;resize:none;outline:none;overflow-y:auto;display:block;box-sizing:border-box}.input-container .terminal-input:focus{border-color:#0dbc7980;box-shadow:0 0 0 2px #0dbc7933}.input-container .terminal-input::placeholder{color:#ffffff4d}button{color:#0dbc79}button:hover{background:#0dbc791a}button.recording{color:#f44336;animation:pulse 1.5s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'organism terminal-input section' }, template: "<div class=\"input-line\">\n  <span class=\"input-prefix\">{{ prefix() }}</span>\n  <div class=\"input-container\">\n    <textarea\n      #inputField\n      class=\"terminal-input\"\n      [formControl]=\"control()\"\n      [placeholder]=\"placeholder()\"\n      (keydown)=\"handleKeydown($event)\"\n      (input)=\"onInput()\"\n      (compositionstart)=\"onCompositionStart()\"\n      (compositionend)=\"onCompositionEnd()\"\n      rows=\"1\"\n    ></textarea>\n  </div>\n  @if (enableVoiceInput() && speechService.isSupported) {\n    <button\n      mat-icon-button\n      (click)=\"toggleVoiceInput()\"\n      [matTooltip]=\"isRecording() ? '\u97F3\u58F0\u5165\u529B\u505C\u6B62' : '\u97F3\u58F0\u5165\u529B'\"\n      [class.recording]=\"isRecording()\">\n      <mat-icon>{{ isRecording() ? 'mic' : 'mic_none' }}</mat-icon>\n    </button>\n  }\n  <button mat-icon-button (click)=\"send()\" matTooltip=\"\u9001\u4FE1\">\n    <mat-icon>send</mat-icon>\n  </button>\n</div>\n", styles: [":host{display:block;display:flex;background:#0000004d;border-top:1px solid rgba(255,255,255,.1)}.input-line{display:flex;align-items:center;width:100%;gap:8px;padding:8px 12px}.input-prefix{color:#3f3;font-family:SF Mono,Cascadia Code,monospace;font-size:14px;flex-shrink:0}.input-container{flex:1;display:flex}.input-container .terminal-input{width:100%;max-height:200px;background:#0003;border:1px solid rgba(255,255,255,.1);border-radius:4px;color:#e0e0e0;font-family:SF Mono,Cascadia Code,monospace;font-size:14px;line-height:20px;padding:8px 12px;resize:none;outline:none;overflow-y:auto;display:block;box-sizing:border-box}.input-container .terminal-input:focus{border-color:#33ff3380;box-shadow:0 0 0 2px #3f33}.input-container .terminal-input::placeholder{color:#ffffff4d}button{color:#3f3}button:hover{background:#33ff331a}button.recording{color:#f44336;animation:pulse 1.5s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], clearOnSend: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearOnSend", required: false }] }], enableVoiceInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableVoiceInput", required: false }] }], sessionId: [{ type: i0.Input, args: [{ isSignal: true, alias: "sessionId", required: false }] }], action: [{ type: i0.Output, args: ["action"] }], inputField: [{ type: i0.ViewChild, args: ['inputField', { isSignal: true }] }] } });
 
 /**

package/fesm2022/xxmachina-components-organisms-terminal-input-section.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"xxmachina-components-organisms-terminal-input-section.mjs","sources":["../../../../../packages/@xxmachina/components/src/lib/organisms/terminal-input-section/terminal-input-section.organism.ts","../../../../../packages/@xxmachina/components/src/lib/organisms/terminal-input-section/terminal-input-section.organism.html","../../../../../packages/@xxmachina/components/src/lib/organisms/terminal-input-section/xxmachina-components-organisms-terminal-input-section.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, effect, ElementRef, inject, input, output, untracked, viewChild } from '@angular/core';\n\nimport { FormControl, ReactiveFormsModule } from '@angular/forms';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { Action } from '@ng-atomic/core';\nimport { SpeechService } from '@xxmachina/common/services/speech';\n\nexport enum ActionId {\n  SEND = 'send',\n}\n\n@Component({\n  selector: 'organisms-terminal-input-section',\n  standalone: true,\n  imports: [\n    ReactiveFormsModule,\n    MatButtonModule,\n    MatIconModule,\n    MatTooltipModule\n],\n  templateUrl: './terminal-input-section.organism.html',\n  styleUrls: ['./terminal-input-section.organism.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: { class: 'organism terminal-input section' },\n})\nexport class TerminalInputSectionOrganism {\n  static readonly ActionId = ActionId;\n\n  readonly speechService = inject(SpeechService);\n\n  readonly control = input(new FormControl('', { nonNullable: true }));\n  readonly placeholder = input('Enter command...');\n  readonly prefix = input('>');\n  readonly clearOnSend = input(true);\n  readonly enableVoiceInput = input(false);\n  readonly sessionId = input<string | undefined>(undefined);\n\n  readonly action = output<Action<string>>();\n\n  readonly inputField = viewChild<ElementRef<HTMLTextAreaElement>>('inputField');\n\n  private readonly componentId = this.speechService.generateComponentId();\n\n  // このコンポーネントがアクティブかどうか\n  readonly isRecording = computed(() =>\n    this.speechService.isListening() &&\n    this.speechService.isActiveComponent(this.componentId)\n  );\n\n  // IME変換中かどうかのフラグ\n  private isComposing = false;\n  // IME変換中にEnterが押されたかどうか（確定Enterの検出用）\n  private enterPressedDuringComposition = false;\n\n  constructor() {\n    // アクティブな場合のみ、音声認識結果を入力フィールドに反映\n    effect(() => {\n      if (this.enableVoiceInput() && this.speechService.isActiveComponent(this.componentId)) {\n        const transcript = this.speechService.transcript();\n        const text = transcript.finalized + transcript.interim;\n        // clear()時は空文字でsetValueしてフォームもクリア\n        this.control().setValue(text);\n      }\n    });\n\n    // autoMode + selectedSessionId の変化を検知し、書き込み先を登録\n    effect(() => {\n      const autoMode = this.speechService.autoModeEnabled();\n      const selectedId = this.speechService.selectedSessionId();\n      const sid = this.sessionId();\n      if (autoMode && sid && selectedId === sid) {\n        // Speech APIは動き続けている。書き込み先を自分に登録するだけ\n        untracked(() => this.speechService.activateComponent(this.componentId));\n      } else if (autoMode && sid && selectedId !== sid) {\n        // deactivate: 別セッションに切り替わった → 入力欄にテキストがあれば送信\n        untracked(() => this.send());\n      }\n    });\n  }\n\n  onCompositionStart() {\n    this.isComposing = true;\n    this.enterPressedDuringComposition = false;\n  }\n\n  onCompositionEnd() {\n    this.isComposing = false;\n    // Chromeではkeydownがcompositionendより先に発火するため、\n    // IME確定のEnterを検出した場合はcompositionend後に送信する\n    if (this.enterPressedDuringComposition) {\n      this.enterPressedDuringComposition = false;\n      setTimeout(() => this.send(), 0);\n    }\n  }\n\n  handleKeydown(event: KeyboardEvent) {\n    if (this.isComposing) {\n      // IME変換中のEnterを記録（確定Enter = 送信トリガー）\n      if (event.key === 'Enter' && !event.shiftKey) {\n        this.enterPressedDuringComposition = true;\n      }\n      return;\n    }\n    if (event.key === 'Enter' && !event.shiftKey) {\n      event.preventDefault();\n      this.send();\n    }\n  }\n\n  onInput() {\n    this.adjustTextareaHeight();\n  }\n\n  send() {\n    const value = this.control().value.trim();\n    if (value) {\n      this.action.emit({ id: ActionId.SEND, payload: value });\n      if (this.clearOnSend()) {\n        this.control().reset();\n        this.resetTextareaHeight();\n        // 自動モード時: stopしない。clear()でtranscriptだけリセット\n        if (this.isRecording()) {\n          this.speechService.clear();\n        }\n      }\n    }\n  }\n\n  private adjustTextareaHeight() {\n    const textarea = this.inputField()?.nativeElement;\n    if (textarea) {\n      // overflowを一時的にhiddenにしてscrollHeightを正確に取得\n      textarea.style.overflow = 'hidden';\n      // 一旦高さを最小に設定してscrollHeightを正確に取得\n      textarea.style.height = '0px';\n      // scrollHeightに合わせて高さを設定（最大200px）\n      const newHeight = Math.min(textarea.scrollHeight, 200);\n      textarea.style.height = `${newHeight}px`;\n      // overflowを元に戻す\n      textarea.style.overflow = 'auto';\n    }\n  }\n\n  private resetTextareaHeight() {\n    const textarea = this.inputField()?.nativeElement;\n    if (textarea) {\n      textarea.style.height = 'auto';\n    }\n  }\n\n  focus() {\n    this.inputField()?.nativeElement?.focus();\n  }\n\n  toggleVoiceInput() {\n    this.speechService.toggle(this.componentId);\n  }\n}\n","<div class=\"input-line\">\n  <span class=\"input-prefix\">{{ prefix() }}</span>\n  <div class=\"input-container\">\n    <textarea\n      #inputField\n      class=\"terminal-input\"\n      [formControl]=\"control()\"\n      [placeholder]=\"placeholder()\"\n      (keydown)=\"handleKeydown($event)\"\n      (input)=\"onInput()\"\n      (compositionstart)=\"onCompositionStart()\"\n      (compositionend)=\"onCompositionEnd()\"\n      rows=\"1\"\n    ></textarea>\n  </div>\n  @if (enableVoiceInput() && speechService.isSupported) {\n    <button\n      mat-icon-button\n      (click)=\"toggleVoiceInput()\"\n      [matTooltip]=\"isRecording() ? '音声入力停止' : '音声入力'\"\n      [class.recording]=\"isRecording()\">\n      <mat-icon>{{ isRecording() ? 'mic' : 'mic_none' }}</mat-icon>\n    </button>\n  }\n  <button mat-icon-button (click)=\"send()\" matTooltip=\"送信\">\n    <mat-icon>send</mat-icon>\n  </button>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"xxmachina-components-organisms-terminal-input-section.mjs","sources":["../../../../../packages/@xxmachina/components/src/lib/organisms/terminal-input-section/terminal-input-section.organism.ts","../../../../../packages/@xxmachina/components/src/lib/organisms/terminal-input-section/terminal-input-section.organism.html","../../../../../packages/@xxmachina/components/src/lib/organisms/terminal-input-section/xxmachina-components-organisms-terminal-input-section.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, effect, ElementRef, inject, input, output, untracked, viewChild } from '@angular/core';\n\nimport { FormControl, ReactiveFormsModule } from '@angular/forms';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { Action } from '@ng-atomic/core';\nimport { SpeechService } from '@xxmachina/common/services/speech';\n\nexport enum ActionId {\n  SEND = 'send',\n}\n\n@Component({\n  selector: 'organisms-terminal-input-section',\n  standalone: true,\n  imports: [\n    ReactiveFormsModule,\n    MatButtonModule,\n    MatIconModule,\n    MatTooltipModule\n],\n  templateUrl: './terminal-input-section.organism.html',\n  styleUrls: ['./terminal-input-section.organism.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: { class: 'organism terminal-input section' },\n})\nexport class TerminalInputSectionOrganism {\n  static readonly ActionId = ActionId;\n\n  readonly speechService = inject(SpeechService);\n\n  readonly control = input(new FormControl('', { nonNullable: true }));\n  readonly placeholder = input('Enter command...');\n  readonly prefix = input('>');\n  readonly clearOnSend = input(true);\n  readonly enableVoiceInput = input(false);\n  readonly sessionId = input<string | undefined>(undefined);\n\n  readonly action = output<Action<string>>();\n\n  readonly inputField = viewChild<ElementRef<HTMLTextAreaElement>>('inputField');\n\n  private readonly componentId = this.speechService.generateComponentId();\n\n  \n  readonly isRecording = computed(() =>\n    this.speechService.isListening() &&\n    this.speechService.isActiveComponent(this.componentId)\n  );\n\n  \n  private isComposing = false;\n  \n  private enterPressedDuringComposition = false;\n\n  constructor() {\n    \n    effect(() => {\n      if (this.enableVoiceInput() && this.speechService.isActiveComponent(this.componentId)) {\n        const transcript = this.speechService.transcript();\n        const text = transcript.finalized + transcript.interim;\n        \n        this.control().setValue(text);\n      }\n    });\n\n    \n    effect(() => {\n      const autoMode = this.speechService.autoModeEnabled();\n      const selectedId = this.speechService.selectedSessionId();\n      const sid = this.sessionId();\n      if (autoMode && sid && selectedId === sid) {\n        \n        untracked(() => this.speechService.activateComponent(this.componentId));\n      } else if (autoMode && sid && selectedId !== sid) {\n        \n        untracked(() => this.send());\n      }\n    });\n  }\n\n  onCompositionStart() {\n    this.isComposing = true;\n    this.enterPressedDuringComposition = false;\n  }\n\n  onCompositionEnd() {\n    this.isComposing = false;\n    \n    \n    if (this.enterPressedDuringComposition) {\n      this.enterPressedDuringComposition = false;\n      setTimeout(() => this.send(), 0);\n    }\n  }\n\n  handleKeydown(event: KeyboardEvent) {\n    if (this.isComposing) {\n      \n      if (event.key === 'Enter' && !event.shiftKey) {\n        this.enterPressedDuringComposition = true;\n      }\n      return;\n    }\n    if (event.key === 'Enter' && !event.shiftKey) {\n      event.preventDefault();\n      this.send();\n    }\n  }\n\n  onInput() {\n    this.adjustTextareaHeight();\n  }\n\n  send() {\n    const value = this.control().value.trim();\n    if (value) {\n      this.action.emit({ id: ActionId.SEND, payload: value });\n      if (this.clearOnSend()) {\n        this.control().reset();\n        this.resetTextareaHeight();\n        \n        if (this.isRecording()) {\n          this.speechService.clear();\n        }\n      }\n    }\n  }\n\n  private adjustTextareaHeight() {\n    const textarea = this.inputField()?.nativeElement;\n    if (textarea) {\n      \n      textarea.style.overflow = 'hidden';\n      \n      textarea.style.height = '0px';\n      \n      const newHeight = Math.min(textarea.scrollHeight, 200);\n      textarea.style.height = `${newHeight}px`;\n      \n      textarea.style.overflow = 'auto';\n    }\n  }\n\n  private resetTextareaHeight() {\n    const textarea = this.inputField()?.nativeElement;\n    if (textarea) {\n      textarea.style.height = 'auto';\n    }\n  }\n\n  focus() {\n    this.inputField()?.nativeElement?.focus();\n  }\n\n  toggleVoiceInput() {\n    this.speechService.toggle(this.componentId);\n  }\n}\n","<div class=\"input-line\">\n  <span class=\"input-prefix\">{{ prefix() }}</span>\n  <div class=\"input-container\">\n    <textarea\n      #inputField\n      class=\"terminal-input\"\n      [formControl]=\"control()\"\n      [placeholder]=\"placeholder()\"\n      (keydown)=\"handleKeydown($event)\"\n      (input)=\"onInput()\"\n      (compositionstart)=\"onCompositionStart()\"\n      (compositionend)=\"onCompositionEnd()\"\n      rows=\"1\"\n    ></textarea>\n  </div>\n  @if (enableVoiceInput() && speechService.isSupported) {\n    <button\n      mat-icon-button\n      (click)=\"toggleVoiceInput()\"\n      [matTooltip]=\"isRecording() ? '音声入力停止' : '音声入力'\"\n      [class.recording]=\"isRecording()\">\n      <mat-icon>{{ isRecording() ? 'mic' : 'mic_none' }}</mat-icon>\n    </button>\n  }\n  <button mat-icon-button (click)=\"send()\" matTooltip=\"送信\">\n    <mat-icon>send</mat-icon>\n  </button>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/xxmachina-components-organisms-video-trimmer-section.mjs

@@ -11,7 +11,6 @@ import { toSignal } from '@angular/core/rxjs-interop';
 
 class VideoTrimmerSectionOrganismStore {
     images = input([], ...(ngDevMode ? [{ debugName: "images" }] : []));
-    // blobをcomputedでimageのsrcに変換する
     imageSrcList = computed(() => (this.images() ?? []).map(blob => URL.createObjectURL(blob)), ...(ngDevMode ? [{ debugName: "imageSrcList" }] : []));
     control = input(inject(FormBuilder).group({
         duration: [0],
@@ -23,11 +22,9 @@ class VideoTrimmerSectionOrganismStore {
     width = toSignal(this.width$);
     frameSize = computed(() => Math.round(this.width() / 100), ...(ngDevMode ? [{ debugName: "frameSize" }] : []));
     frames = computed(() => {
-        // frameSizeの数だけimageSrcListを分割する
         const frameSize = this.frameSize();
         const images = this.imageSrcList().map(src => [...Array(this.frameSize())].map(() => src)).flat();
         console.debug('images:', images.length);
-        // imagesを均等な感覚で12枚に絞る
         const interval = Math.floor(images.length / this.frameSize());
         return images.filter((_, i) => i % interval === 0);
     }, ...(ngDevMode ? [{ debugName: "frames" }] : []));

package/fesm2022/xxmachina-components-organisms-video-trimmer-section.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"xxmachina-components-organisms-video-trimmer-section.mjs","sources":["../../../../../packages/@xxmachina/components/src/lib/organisms/video-trimmer-section/video-trimmer-section.organism.ts","../../../../../packages/@xxmachina/components/src/lib/organisms/video-trimmer-section/xxmachina-components-organisms-video-trimmer-section.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Directive, ElementRef, computed, inject, input } from '@angular/core';\nimport { MatSliderModule } from '@angular/material/slider';\nimport { FormBuilder, ReactiveFormsModule } from '@angular/forms';\nimport { formatSeconds } from '@ng-atomic/common/utils';\nimport { NgAtomicComponent } from '@ng-atomic/core';\nimport { fromEvent, map, startWith } from 'rxjs';\nimport { toSignal } from '@angular/core/rxjs-interop';\n\n@Directive({ standalone: true })\nexport class VideoTrimmerSectionOrganismStore {\n  readonly images = input<Blob[]>([]);\n  // blobをcomputedでimageのsrcに変換する\n  readonly imageSrcList = computed(() => (this.images() ?? []).map(blob => URL.createObjectURL(blob)));\n\n  readonly control = input(inject(FormBuilder).group({\n    duration: [0],\n    start: [0],\n    end: [100],\n  }));\n\n  readonly el = inject(ElementRef);\n  readonly width$ = fromEvent(window, 'resize').pipe(\n    startWith(null),\n    map(() => this.el.nativeElement.clientWidth),\n  );\n  readonly width = toSignal(this.width$);\n\n  readonly frameSize = computed(() => Math.round(this.width() / 100));\n\n  readonly frames = computed(() => {\n    // frameSizeの数だけimageSrcListを分割する\n    const frameSize = this.frameSize();\n    const images = this.imageSrcList().map(src => [...Array(this.frameSize())].map(() => src)).flat();\n    console.debug('images:', images.length);\n    // imagesを均等な感覚で12枚に絞る\n    const interval = Math.floor(images.length / this.frameSize());\n    return images.filter((_, i) => i % interval === 0);\n  });\n}\n\n@Component({\n  selector: 'organisms-video-trimmer-section',\n  standalone: true,\n  imports: [\n    MatSliderModule,\n    ReactiveFormsModule,\n  ],\n  template: `\n    <div class=\"frames\">\n      @for (image of store.frames(); track image) {\n        <img [style.width] [src]=\"image\" />\n      }\n    </div>\n    <mat-slider min=\"0\" max=\"100\" discrete [displayWith]=\"formatLabel\">\n      <input [formControl]=\"store.control().get(['start'])\" matSliderStartThumb>\n      <input [formControl]=\"store.control().get(['end'])\" matSliderEndThumb>\n    </mat-slider>\n  `,\n  styleUrls: ['./video-trimmer-section.organism.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  hostDirectives: [\n    {\n      directive: VideoTrimmerSectionOrganismStore,\n      inputs: ['images', 'control'],\n    }\n  ]\n})\nexport class VideoTrimmerSectionOrganism extends NgAtomicComponent {\n  protected store = inject(VideoTrimmerSectionOrganismStore);\n\n  formatLabel = (value: number): string => {\n    const seconds = Math.round(value / 100 * this.store.control().value.duration!);\n    return formatSeconds(seconds);\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":"xxmachina-components-organisms-video-trimmer-section.mjs","sources":["../../../../../packages/@xxmachina/components/src/lib/organisms/video-trimmer-section/video-trimmer-section.organism.ts","../../../../../packages/@xxmachina/components/src/lib/organisms/video-trimmer-section/xxmachina-components-organisms-video-trimmer-section.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Directive, ElementRef, computed, inject, input } from '@angular/core';\nimport { MatSliderModule } from '@angular/material/slider';\nimport { FormBuilder, ReactiveFormsModule } from '@angular/forms';\nimport { formatSeconds } from '@ng-atomic/common/utils';\nimport { NgAtomicComponent } from '@ng-atomic/core';\nimport { fromEvent, map, startWith } from 'rxjs';\nimport { toSignal } from '@angular/core/rxjs-interop';\n\n@Directive({ standalone: true })\nexport class VideoTrimmerSectionOrganismStore {\n  readonly images = input<Blob[]>([]);\n  \n  readonly imageSrcList = computed(() => (this.images() ?? []).map(blob => URL.createObjectURL(blob)));\n\n  readonly control = input(inject(FormBuilder).group({\n    duration: [0],\n    start: [0],\n    end: [100],\n  }));\n\n  readonly el = inject(ElementRef);\n  readonly width$ = fromEvent(window, 'resize').pipe(\n    startWith(null),\n    map(() => this.el.nativeElement.clientWidth),\n  );\n  readonly width = toSignal(this.width$);\n\n  readonly frameSize = computed(() => Math.round(this.width() / 100));\n\n  readonly frames = computed(() => {\n    \n    const frameSize = this.frameSize();\n    const images = this.imageSrcList().map(src => [...Array(this.frameSize())].map(() => src)).flat();\n    console.debug('images:', images.length);\n    \n    const interval = Math.floor(images.length / this.frameSize());\n    return images.filter((_, i) => i % interval === 0);\n  });\n}\n\n@Component({\n  selector: 'organisms-video-trimmer-section',\n  standalone: true,\n  imports: [\n    MatSliderModule,\n    ReactiveFormsModule,\n  ],\n  template: `\n    <div class=\"frames\">\n      @for (image of store.frames(); track image) {\n        <img [style.width] [src]=\"image\" />\n      }\n    </div>\n    <mat-slider min=\"0\" max=\"100\" discrete [displayWith]=\"formatLabel\">\n      <input [formControl]=\"store.control().get(['start'])\" matSliderStartThumb>\n      <input [formControl]=\"store.control().get(['end'])\" matSliderEndThumb>\n    </mat-slider>\n  `,\n  styleUrls: ['./video-trimmer-section.organism.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  hostDirectives: [\n    {\n      directive: VideoTrimmerSectionOrganismStore,\n      inputs: ['images', 'control'],\n    }\n  ]\n})\nexport class VideoTrimmerSectionOrganism extends NgAtomicComponent {\n  protected store = inject(VideoTrimmerSectionOrganismStore);\n\n  formatLabel = (value: number): string => {\n    const seconds = Math.round(value / 100 * this.store.control().value.duration!);\n    return formatSeconds(seconds);\n  }\n}\n\n\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}