@ng-atomic/common 19.0.0-preview.8 → 19.1.1

package/fesm2022/ng-atomic-common-services-spreadsheet.mjs

@@ -1,48 +1,32 @@
 import * as i0 from '@angular/core';
-import { signal, computed, Injectable, inject, effect, InjectionToken, ElementRef, input, Directive } from '@angular/core';
+import { signal, Injectable, inject, computed, effect, InjectionToken, ElementRef, input, Directive, Renderer2, output, HostListener, Component, ViewContainerRef } from '@angular/core';
 import { isEqual } from 'lodash-es';
 import { Clipboard } from '@angular/cdk/clipboard';
-import papaparse from 'papaparse';
 import { SnackBarService } from '@ng-atomic/common/services/snack-bar';
-import { LanguageService } from '@ng-atomic/common/services/language';
 import { injectDataAccessor } from '@ng-atomic/common/pipes/data-accessor';
 import { EXPRESSION_TRANSFORMER } from '@ng-atomic/common/utils';
+import { LanguageService } from '@ng-atomic/common/services/language';
+import papaparse from 'papaparse';
+import { EditingStateManager } from '@ng-atomic/common/services/editing';
+
+class SpreadSheetDataService {
+    constructor() {
+        this.displayedColumns = signal([]);
+        this.items = signal([]);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SpreadSheetDataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SpreadSheetDataService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SpreadSheetDataService, decorators: [{
+            type: Injectable
+        }] });
 
 class GridService {
     constructor() {
-        this.data = signal([[]]);
-        this.columns = computed(() => Array.from({ length: this.data()[0].length }, (_, i) => String.fromCharCode(65 + i)));
         this.contextMap = new Map();
-    }
-    updateCell(row, col, value) {
-        this.data.update(data => {
-            data[row][col] = {
-                dataValue: value,
-                expressionValue: value,
-            };
-            return [...data];
-        });
-    }
-    getValue(position) {
-        return this.getCell(position)?.dataValue ?? null;
-    }
-    getExpressionValue(position) {
-        return this.getCell(position)?.expressionValue ?? null;
-    }
-    getCell(position) {
-        return this.data()[position.row]?.[position.col] ?? null;
-    }
-    updateAllCells(predicate, updates) {
-        this.data.update(data => {
-            for (let i = 0; i < data.length; i++) {
-                for (let j = 0; j < data[0].length; j++) {
-                    if (predicate(data[i][j])) {
-                        data[i][j] = { ...data[i][j], ...updates };
-                    }
-                }
-            }
-            return [...data];
-        });
+        this.data = inject(SpreadSheetDataService);
+        this.maxCol = computed(() => this.data.displayedColumns().length - 1);
+        this.maxRow = computed(() => this.data.items().length);
     }
     setContext(context) {
         this.contextMap.set(this.buildKey(context.position), context);
@@ -53,39 +37,37 @@ class GridService {
     buildKey(position) {
         return `(${position.row}, ${position.col})`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: GridService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: GridService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: GridService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: GridService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: GridService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: GridService, decorators: [{
             type: Injectable
         }] });
 
 class NavigationService {
-    constructor(gridService) {
-        this.gridService = gridService;
+    constructor() {
+        this.gridService = inject(GridService);
     }
     moveToNextCell({ row, col }) {
-        const columns = this.gridService.columns();
-        if (col < columns.length - 1) {
+        if (col < this.gridService.maxCol()) {
             return { row, col: col + 1 };
         }
-        else if (row < this.gridService.data().length - 1) {
+        else if (row < this.gridService.maxRow()) {
             return { row: row + 1, col: 0 };
         }
         return { row, col };
     }
     moveToPreviousCell({ row, col }) {
-        const columns = this.gridService.columns();
         if (col > 0) {
             return { row, col: col - 1 };
         }
         else if (row > 0) {
-            return { row: row - 1, col: columns.length - 1 };
+            return { row: row - 1, col: this.gridService.maxCol() };
         }
         return { row, col };
     }
     moveToNextRow({ row, col }) {
-        if (row < this.gridService.data().length - 1) {
+        if (row < this.gridService.maxRow()) {
             return { row: row + 1, col };
         }
         return { row, col };
@@ -96,8 +78,9 @@ class NavigationService {
         }
         return { row, col };
     }
-    moveRight({ row, col }) {
-        if (col < this.gridService.columns().length - 1) {
+    moveRight(position) {
+        const { row, col } = position;
+        if (col < this.gridService.maxCol()) {
             return { row, col: col + 1 };
         }
         return { row, col };
@@ -115,20 +98,21 @@ class NavigationService {
         return { row, col };
     }
     moveDown({ row, col }) {
-        if (row < this.gridService.data().length - 1) {
+        if (row < this.gridService.maxRow()) {
             return { row: row + 1, col };
         }
         return { row, col };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NavigationService, deps: [{ token: GridService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NavigationService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: NavigationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: NavigationService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NavigationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: NavigationService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: GridService }] });
+        }] });
 
 class SelectionService {
     constructor() {
+        this.data = inject(SpreadSheetDataService);
         this.selection = signal({ start: { row: 1, col: 0 }, end: null });
         this.selectionStart = computed(() => this.selection().start, { equal: isEqual });
         this.isMouseDown = signal(false);
@@ -192,17 +176,6 @@ class SelectionService {
     getSelectionEndOrStart() {
         return this.selection()?.end || this.selection()?.start;
     }
-    findSelectedCell() {
-        const data = this.grid.data();
-        for (let i = 0; i < data.length; i++) {
-            for (let j = 0; j < data[i].length; j++) {
-                if (this.isSelected({ row: i, col: j })) {
-                    return { row: i, col: j };
-                }
-            }
-        }
-        return null;
-    }
     updateSelectionEnd(position) {
         this.selection.update((selection) => ({ ...selection, end: position }));
     }
@@ -215,18 +188,6 @@ class SelectionService {
         }
     }
     clearSelectedRange(selection) {
-        const minRow = Math.min(selection.start.row, selection.end.row);
-        const maxRow = Math.max(selection.start.row, selection.end.row);
-        const minCol = Math.min(selection.start.col, selection.end.col);
-        const maxCol = Math.max(selection.start.col, selection.end.col);
-        for (let i = minRow; i <= maxRow; i++) {
-            for (let j = minCol; j <= maxCol; j++) {
-                this.grid.updateCell(i, j, {
-                    dataValue: '',
-                    expressionValue: ''
-                });
-            }
-        }
     }
     setCell(position, el) {
         this.cellElMap.set(`${this.buildKey(position)}`, el);
@@ -245,74 +206,66 @@ class SelectionService {
     buildKey(position) {
         return `(${position.row}, ${position.col})`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: SelectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: SelectionService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SelectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SelectionService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: SelectionService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SelectionService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
 class ClipboardService {
-    constructor(gridService, selectionService) {
-        this.gridService = gridService;
+    constructor(selectionService) {
         this.selectionService = selectionService;
         this.clipboard = inject(Clipboard);
         this.snackBar = inject(SnackBarService);
+        this.data = inject(SpreadSheetDataService);
+        this.dataAccessor = injectDataAccessor();
+        this.expression = inject(EXPRESSION_TRANSFORMER);
+        this.language = inject(LanguageService);
+    }
+    buildGridData(range) {
+        const header = this.data.displayedColumns().map(column => ({
+            dataValue: this.language.transform(column),
+            expressionValue: this.language.transform(column),
+            isHeader: true
+        }));
+        const rows = this.data.items().map(item => this.data.displayedColumns().map(column => ({
+            dataValue: this.dataAccessor(item, column),
+            expressionValue: this.expression(this.dataAccessor(item, column), { item, name: column }),
+        })));
+        const fullData = [header, ...rows];
+        return fullData.slice(range.minRow, range.maxRow + 1).map(row => row.slice(range.minCol, range.maxCol + 1));
     }
     async copy() {
         const selection = this.selectionService.getSelection();
         if (!selection)
             return;
-        const { start, end } = selection;
-        if (!end) {
-            this.copyText(this.gridService.data()[start.row][start.col].dataValue);
-            return;
-        }
+        let { start, end } = selection;
+        end = end ?? start;
         const minRow = Math.min(start.row, end.row);
         const maxRow = Math.max(start.row, end.row);
         const minCol = Math.min(start.col, end.col);
         const maxCol = Math.max(start.col, end.col);
-        const data = this.gridService.data();
-        const clipboardData = [];
-        for (let i = minRow; i <= maxRow; i++) {
-            const row = [];
-            for (let j = minCol; j <= maxCol; j++) {
-                row.push(data[i][j].dataValue);
-            }
-            clipboardData.push(row);
-        }
-        const tsv = papaparse.unparse(clipboardData, { delimiter: '\t', newline: '\n', header: false });
-        this.clipboard.copy(tsv);
+        const selectedData = this.buildGridData({ minRow, maxRow, minCol, maxCol });
+        const tsv = papaparse.unparse(selectedData.map(row => row.map(cell => cell.dataValue)), { delimiter: "\t", newline: "\n", header: false });
+        this.copyText(tsv);
+    }
+    setData(items, displayedColumns) {
+        this.data.displayedColumns.set(displayedColumns);
+        this.data.items.set(items);
     }
     copyText(text) {
         this.clipboard.copy(text);
         this.snackBar.open('クリップボードにコピーしました。');
     }
     async paste(targetRow, targetCol) {
-        try {
-            const clipboardText = await navigator.clipboard.readText();
-            const rows = clipboardText.split('\n');
-            const data = this.gridService.data();
-            const rowCount = Math.min(rows.length, data.length - targetRow);
-            for (let i = 0; i < rowCount; i++) {
-                const cells = rows[i].split('\t');
-                const colCount = Math.min(cells.length, this.gridService.columns().length - targetCol);
-                for (let j = 0; j < colCount; j++) {
-                    this.gridService.updateCell(targetRow + i, targetCol + j, cells[j]);
-                }
-            }
-            console.log('Data pasted from clipboard as TSV');
-        }
-        catch (err) {
-            console.error('Failed to read data from clipboard', err);
-        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ClipboardService, deps: [{ token: GridService }, { token: SelectionService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ClipboardService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: ClipboardService, deps: [{ token: SelectionService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: ClipboardService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ClipboardService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: ClipboardService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: GridService }, { type: SelectionService }] });
+        }], ctorParameters: () => [{ type: SelectionService }] });
 
 const COLUMN_PROTECTOR = new InjectionToken('COLUMN_PROTECTOR', {
     providedIn: 'root',
@@ -330,18 +283,20 @@ class ProtectionService {
             return true;
         return this.protectors.every((protector) => protector(value, context));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ProtectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ProtectionService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: ProtectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: ProtectionService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: ProtectionService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: ProtectionService, decorators: [{
             type: Injectable
         }] });
 
 class EditorService {
     constructor() {
+        this.data = inject(SpreadSheetDataService);
         this.grid = inject(GridService);
         this.selection = inject(SelectionService);
         this.protection = inject(ProtectionService);
+        this.editingStateManager = inject(EditingStateManager);
         this.editinngCell = signal(null);
         this.inputMap = new Map();
     }
@@ -356,9 +311,18 @@ class EditorService {
         }
         this.selection.clearSelection();
         this.editinngCell.set(position);
+        // Notify EditingStateManager about editing start
+        const columnId = this.data.displayedColumns()[position.col];
+        this.editingStateManager.startEditing(position.row, columnId);
         this.focus(position);
     }
     stopEditing() {
+        const editingCell = this.editinngCell();
+        if (editingCell) {
+            // Notify EditingStateManager about editing stop
+            const columnId = this.data.displayedColumns()[editingCell.col];
+            this.editingStateManager.stopEditing(editingCell.row, columnId);
+        }
         this.editinngCell.set(null);
     }
     focus(position) {
@@ -371,9 +335,8 @@ class EditorService {
         });
     }
     getEditingCell() {
-        const data = this.grid.data();
-        for (let i = 0; i < data.length; i++) {
-            for (let j = 0; j < data[i].length; j++) {
+        for (let i = 0; i < this.data.items().length; i++) {
+            for (let j = 0; j < this.data.displayedColumns().length; j++) {
                 if (this.isEditing({ row: i, col: j })) {
                     return { row: i, col: j };
                 }
@@ -390,68 +353,73 @@ class EditorService {
     buildKey(position) {
         return `(${position.row}, ${position.col})`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: EditorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: EditorService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: EditorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: EditorService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: EditorService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: EditorService, decorators: [{
             type: Injectable
         }] });
 
-class SpreadSheetDataService {
+class AutoFillService {
     constructor() {
-        this.cache = new Map();
-        this.language = inject(LanguageService);
-        this.dataAccessor = injectDataAccessor();
-        this.expression = inject(EXPRESSION_TRANSFORMER);
+        this.autofillMode = signal(false);
+        this.sourcePosition = signal(null);
+        this.targetRange = signal(null);
+        this.previewElements = new Set();
+        this.isAutofillMode = this.autofillMode.asReadonly();
+        this.getSourcePosition = this.sourcePosition.asReadonly();
+        this.getTargetRange = this.targetRange.asReadonly();
+    }
+    startAutofill(position) {
+        this.autofillMode.set(true);
+        this.sourcePosition.set(position);
+        this.targetRange.set({ start: position, end: position });
+    }
+    updateAutofillRange(endPosition) {
+        const sourcePos = this.sourcePosition();
+        if (sourcePos) {
+            this.targetRange.set({ start: sourcePos, end: endPosition });
+            this.updatePreview();
+        }
+    }
+    cancelAutofill() {
+        this.resetAutofill();
+    }
+    updatePreview() {
+        // 既存のプレビューをクリア
+        this.clearPreview();
+        const range = this.targetRange();
+        if (!range)
+            return;
+        // 影響を受けるセルにプレビュークラスを追加
+        for (let row = range.start.row + 1; row <= range.end.row; row++) {
+            const position = { row, col: range.start.col };
+            const cellElement = this.getCellElement(position);
+            if (cellElement) {
+                cellElement.classList.add('autofill-preview');
+                this.previewElements.add(cellElement);
+            }
+        }
     }
-    buildGridData(items, displayedColumns) {
-        return [
-            this.buildGridHeaderRow(displayedColumns),
-            ...items.map((item) => this.buildGridRow(item, displayedColumns))
-        ];
-    }
-    buildGridHeaderRow(columns) {
-        const key = this.buildKey({ columns });
-        const cached = this.cache.get(key);
-        if (cached)
-            return cached;
-        const row = columns.map((column) => ({
-            dataValue: this.language.transform(column),
-            expressionValue: this.language.transform(column),
-            isHeader: true
-        }));
-        this.cache.set(key, row);
-        return row;
-    }
-    buildGridRow(item, displayedColumns) {
-        const key = this.buildKey({ item, displayedColumns });
-        const cached = this.cache.get(key);
-        if (cached)
-            return cached;
-        const row = displayedColumns.map((column) => this.buildGridCell(item, column));
-        this.cache.set(key, row);
-        return row;
-    }
-    buildGridCell(item, column) {
-        const key = this.buildKey({ item, column });
-        const cached = this.cache.get(key);
-        if (cached)
-            return cached;
-        const cell = {
-            dataValue: this.dataAccessor(item, column),
-            expressionValue: this.expression(this.dataAccessor(item, column), { item, name: column }),
-        };
-        this.cache.set(key, cell);
-        return cell;
+    clearPreview() {
+        this.previewElements.forEach(element => {
+            element.classList.remove('autofill-preview');
+        });
+        this.previewElements.clear();
     }
-    buildKey(obj) {
-        // return CryptoJS.MD5(JSON.stringify(obj)).toString(CryptoJS.enc.Base64).slice(0, 10);
-        return JSON.stringify(obj);
+    getCellElement(position) {
+        return document.querySelector(`[data-row="${position.row}"][data-col="${position.col}"]`);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: SpreadSheetDataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: SpreadSheetDataService }); }
+    resetAutofill() {
+        this.clearPreview();
+        this.autofillMode.set(false);
+        this.sourcePosition.set(null);
+        this.targetRange.set(null);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: AutoFillService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: AutoFillService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: SpreadSheetDataService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: AutoFillService, decorators: [{
             type: Injectable
         }] });
 
@@ -459,12 +427,13 @@ class SpreadSheetService {
     constructor() {
         this.config = { paste: false };
         this.grid = inject(GridService);
-        this.data = inject(SpreadSheetDataService);
+        // readonly data = inject(SpreadSheetDataService);
         this.navigation = inject(NavigationService);
         this.selection = inject(SelectionService);
         this.clipboard = inject(ClipboardService);
         this.editor = inject(EditorService);
         this.protection = inject(ProtectionService);
+        this.autofill = inject(AutoFillService);
     }
     handleKeyDown(event) {
         if (this.editor.editinngCell()) {
@@ -476,6 +445,11 @@ class SpreadSheetService {
     }
     handleKeyDownOnEditing(event) {
         const cell = this.editor.editinngCell();
+        // stopPropagation()が呼ばれている場合は処理しない
+        // IME入力中やユーザーの意図的な入力中断の場合にValueCellAtomから制御される
+        if (event.cancelBubble) {
+            return;
+        }
         if (event.key === 'Tab') {
             event.preventDefault();
             if (event.shiftKey) {
@@ -497,7 +471,7 @@ class SpreadSheetService {
     }
     handleKeyDownOnSelecting(event) {
         if (event.key === 'Tab') {
-            const selectedCell = this.selection.findSelectedCell();
+            const selectedCell = this.selection.getSelection().start;
             event.preventDefault();
             event.stopPropagation();
             if (event.shiftKey) {
@@ -509,7 +483,7 @@ class SpreadSheetService {
             return;
         }
         else if (event.key === 'Enter') {
-            const selectedCell = this.selection.findSelectedCell();
+            const selectedCell = this.selection.getSelection().start;
             if (selectedCell) {
                 this.editor.startEditing(selectedCell);
                 event.preventDefault();
@@ -523,7 +497,7 @@ class SpreadSheetService {
             else if (event.key === 'v') {
                 if (!this.config.paste)
                     return;
-                const target = this.selection.findSelectedCell();
+                const target = this.selection.getSelection().start;
                 if (target) {
                     this.clipboard.paste(target.row, target.col);
                 }
@@ -540,7 +514,7 @@ class SpreadSheetService {
             }
         }
         else {
-            const selectedCell = this.selection.findSelectedCell();
+            const selection = this.selection.getSelection().start;
             let newPosition;
             if (event.shiftKey) {
                 const selectionEnd = this.selection.getSelectionEndOrStart();
@@ -568,16 +542,16 @@ class SpreadSheetService {
             else {
                 switch (event.key) {
                     case 'ArrowRight':
-                        newPosition = this.navigation.moveRight(selectedCell);
+                        newPosition = this.navigation.moveRight(selection);
                         break;
                     case 'ArrowLeft':
-                        newPosition = this.navigation.moveLeft(selectedCell);
+                        newPosition = this.navigation.moveLeft(selection);
                         break;
                     case 'ArrowUp':
-                        newPosition = this.navigation.moveUp(selectedCell);
+                        newPosition = this.navigation.moveUp(selection);
                         break;
                     case 'ArrowDown':
-                        newPosition = this.navigation.moveDown(selectedCell);
+                        newPosition = this.navigation.moveDown(selection);
                         break;
                     default:
                         return;
@@ -610,10 +584,10 @@ class SpreadSheetService {
             this.editor.startEditing(position);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: SpreadSheetService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: SpreadSheetService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SpreadSheetService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SpreadSheetService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: SpreadSheetService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SpreadSheetService, decorators: [{
             type: Injectable
         }] });
 function provideSpreadSheetService() {
@@ -625,7 +599,8 @@ function provideSpreadSheetService() {
         GridService,
         NavigationService,
         SelectionService,
-        ProtectionService
+        ProtectionService,
+        AutoFillService
     ];
 }
 
@@ -700,10 +675,10 @@ class SpreadSheetCell {
         el.style.whiteSpace = 'nowrap';
         this.el.nativeElement.appendChild(el);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: SpreadSheetCell, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.4", type: SpreadSheetCell, isStandalone: true, selector: "[ssCell]", inputs: { position: { classPropertyName: "position", publicName: "ssCell", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "ssCellEditable", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "ssCellContext", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mousedown": "ss.selection.handleMouseDown(position(), $event)", "mouseup": "ss.selection.handleMouseUp()", "mouseenter": "ss.selection.handleMouseEnter(position())", "click": "ss.selection.handleClick(position(), $event)", "dblclick": "onDbClick()" }, properties: { "class.selected": "ss.selection.isSelected(position())", "class.editing": "ss.editor.isEditing(position())" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SpreadSheetCell, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.5", type: SpreadSheetCell, isStandalone: true, selector: "[ssCell]", inputs: { position: { classPropertyName: "position", publicName: "ssCell", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "ssCellEditable", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "ssCellContext", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mousedown": "ss.selection.handleMouseDown(position(), $event)", "mouseup": "ss.selection.handleMouseUp()", "mouseenter": "ss.selection.handleMouseEnter(position())", "click": "ss.selection.handleClick(position(), $event)", "dblclick": "onDbClick()" }, properties: { "class.selected": "ss.selection.isSelected(position())", "class.editing": "ss.editor.isEditing(position())", "attr.data-row": "position().row", "attr.data-col": "position().col" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: SpreadSheetCell, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SpreadSheetCell, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -716,6 +691,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                         '(mouseenter)': 'ss.selection.handleMouseEnter(position())',
                         '(click)': 'ss.selection.handleClick(position(), $event)',
                         '(dblclick)': 'onDbClick()',
+                        '[attr.data-row]': 'position().row',
+                        '[attr.data-col]': 'position().col',
                     }
                 }]
         }], ctorParameters: () => [] });
@@ -736,10 +713,10 @@ class SpreadSheetCellInput {
     stopEditing() {
         this.ss.editor.stopEditing();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: SpreadSheetCellInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.4", type: SpreadSheetCellInput, isStandalone: true, selector: "[ssCellInput]", inputs: { position: { classPropertyName: "position", publicName: "ssCellInput", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "blur": "stopEditing()" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SpreadSheetCellInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.5", type: SpreadSheetCellInput, isStandalone: true, selector: "[ssCellInput]", inputs: { position: { classPropertyName: "position", publicName: "ssCellInput", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "blur": "stopEditing()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: SpreadSheetCellInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SpreadSheetCellInput, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -750,9 +727,268 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                 }]
         }] });
 
+class AutofillHandleComponent {
+    constructor() {
+        this.elementRef = inject((ElementRef));
+        this.renderer = inject(Renderer2);
+        this.handleMouseDown = output();
+    }
+    onMouseDown(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        this.handleMouseDown.emit(e);
+    }
+    show(rect, containerRect) {
+        const el = this.elementRef.nativeElement;
+        // ハンドルをセルの右下角に配置
+        const handleSize = 14; // 8px + 2px*2 (border)
+        if (containerRect) {
+            // コンテナからの相対位置を計算
+            this.renderer.setStyle(el, 'left', `${rect.right - containerRect.left - handleSize / 2}px`);
+            this.renderer.setStyle(el, 'top', `${rect.bottom - containerRect.top - handleSize / 2}px`);
+        }
+        else {
+            // position: fixedの場合（フォールバック）
+            this.renderer.setStyle(el, 'left', `${rect.right - handleSize}px`);
+            this.renderer.setStyle(el, 'top', `${rect.bottom - handleSize}px`);
+        }
+        this.renderer.addClass(el, 'visible');
+    }
+    hide() {
+        this.renderer.removeClass(this.elementRef.nativeElement, 'visible');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: AutofillHandleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: AutofillHandleComponent, isStandalone: true, selector: "autofill-handle", outputs: { handleMouseDown: "handleMouseDown" }, host: { listeners: { "mousedown": "onMouseDown($event)" } }, ngImport: i0, template: '', isInline: true, styles: [":host{position:absolute;width:8px;height:8px;background-color:#2196f3;border:2px solid #ffffff;border-radius:50%;cursor:crosshair;z-index:10000;box-shadow:0 1px 3px #0000004d;transition:background-color .2s,opacity .2s;opacity:0;pointer-events:none}:host:hover{background-color:#1976d2}:host.visible{opacity:1;pointer-events:auto}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: AutofillHandleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'autofill-handle', standalone: true, template: '', styles: [":host{position:absolute;width:8px;height:8px;background-color:#2196f3;border:2px solid #ffffff;border-radius:50%;cursor:crosshair;z-index:10000;box-shadow:0 1px 3px #0000004d;transition:background-color .2s,opacity .2s;opacity:0;pointer-events:none}:host:hover{background-color:#1976d2}:host.visible{opacity:1;pointer-events:auto}\n"] }]
+        }], propDecorators: { onMouseDown: [{
+                type: HostListener,
+                args: ['mousedown', ['$event']]
+            }] } });
+/**
+ * テーブル全体のオートフィル機能を管理するディレクティブ
+ * セルディレクティブから直接呼び出される
+ */
+class GridDataTableAutofill {
+    constructor() {
+        this.ss = inject(SpreadSheetService);
+        this.viewContainerRef = inject(ViewContainerRef);
+        this.renderer = inject(Renderer2);
+        this.autofillStartPosition = null;
+        this.lastAutofillContexts = null;
+        this.cleanupFunctions = [];
+        this.handleComponent = null;
+        this.currentCell = null;
+        // オートフィル完了イベント
+        this.autofillComplete = output();
+        this.currentPosition = null;
+        // ハンドルコンポーネントを作成
+        this.handleComponent = this.viewContainerRef.createComponent(AutofillHandleComponent);
+        // ハンドルのmousedownイベントを設定
+        this.handleComponent.instance.handleMouseDown.subscribe(() => {
+            if (this.currentPosition) {
+                this.startAutofill(this.currentPosition);
+            }
+        });
+    }
+    showHandle(cell, position) {
+        this.currentCell = cell;
+        this.currentPosition = position;
+        // ハンドルを適切な親要素に配置（初回のみ）
+        let scrollContainer = null;
+        if (!this.handleComponent?.location.nativeElement.parentElement) {
+            // スクロールビューポートか、テーブルコンテナを探す
+            scrollContainer = cell.closest('cdk-virtual-scroll-viewport') ||
+                cell.closest('.mat-table-container') ||
+                cell.closest('table')?.parentElement;
+            if (scrollContainer) {
+                this.renderer.appendChild(scrollContainer, this.handleComponent.location.nativeElement);
+            }
+            else {
+                // フォールバック: document.bodyに追加（position: fixedモード）
+                this.renderer.appendChild(document.body, this.handleComponent.location.nativeElement);
+                this.renderer.setStyle(this.handleComponent.location.nativeElement, 'position', 'fixed');
+            }
+        }
+        else {
+            scrollContainer = this.handleComponent.location.nativeElement.parentElement;
+        }
+        const cellRect = cell.getBoundingClientRect();
+        const containerRect = scrollContainer?.getBoundingClientRect();
+        this.handleComponent?.instance.show(cellRect, containerRect);
+        // スクロールイベントのリスナーを設定
+        this.setupScrollListener();
+    }
+    hideHandle() {
+        this.currentCell = null;
+        this.currentPosition = null;
+        this.handleComponent?.instance.hide();
+    }
+    onAutofillStart(position) {
+        this.startAutofill(position);
+    }
+    setupScrollListener() {
+        if (this.cleanupFunctions.some(fn => fn.name === 'scrollCleanup')) {
+            return; // 既にリスナーが設定されている
+        }
+        const scrollHandler = () => {
+            if (this.currentCell && this.handleComponent) {
+                const cellRect = this.currentCell.getBoundingClientRect();
+                const containerElement = this.handleComponent.location.nativeElement.parentElement;
+                const containerRect = containerElement?.getBoundingClientRect();
+                this.handleComponent.instance.show(cellRect, containerRect);
+            }
+        };
+        // スクロール可能な親要素を見つける
+        const scrollContainer = this.currentCell?.closest('cdk-virtual-scroll-viewport') ||
+            this.currentCell?.closest('.mat-table-container');
+        if (scrollContainer) {
+            scrollContainer.addEventListener('scroll', scrollHandler, { passive: true });
+            const cleanup = () => scrollContainer.removeEventListener('scroll', scrollHandler);
+            Object.defineProperty(cleanup, 'name', { value: 'scrollCleanup' });
+            this.cleanupFunctions.push(cleanup);
+        }
+        // ウィンドウスクロールも監視
+        window.addEventListener('scroll', scrollHandler, { passive: true });
+        const windowCleanup = () => window.removeEventListener('scroll', scrollHandler);
+        Object.defineProperty(windowCleanup, 'name', { value: 'scrollCleanup' });
+        this.cleanupFunctions.push(windowCleanup);
+    }
+    // セルディレクティブから呼び出されるメソッド
+    startAutofill(position) {
+        this.autofillStartPosition = position;
+        this.ss.autofill.startAutofill(position);
+        // 既存のリスナーをクリーンアップ
+        this.cleanup();
+        // マウスイベントの設定
+        const onMouseMove = this.onMouseMove.bind(this);
+        const onMouseUp = this.onMouseUp.bind(this);
+        document.addEventListener('mousemove', onMouseMove);
+        document.addEventListener('mouseup', onMouseUp);
+        this.cleanupFunctions.push(() => {
+            document.removeEventListener('mousemove', onMouseMove);
+            document.removeEventListener('mouseup', onMouseUp);
+        });
+    }
+    onMouseMove(event) {
+        if (!this.autofillStartPosition)
+            return;
+        // ドラッグ中のプレビュー処理
+        const element = document.elementFromPoint(event.clientX, event.clientY);
+        const cell = element?.closest('td[mat-cell]');
+        if (cell) {
+            const targetRow = parseInt(cell.getAttribute('data-row') || '0');
+            const targetCol = parseInt(cell.getAttribute('data-col') || '0');
+            this.ss.autofill.updateAutofillRange({ row: targetRow, col: targetCol });
+        }
+    }
+    onMouseUp() {
+        const result = this.completeAutofill();
+        if (result) {
+            this.autofillComplete.emit(result);
+        }
+        this.autofillStartPosition = null;
+        this.cleanup();
+    }
+    completeAutofill() {
+        const sourcePosition = this.ss.autofill.getSourcePosition();
+        const targetRange = this.ss.autofill.getTargetRange();
+        if (!sourcePosition || !targetRange) {
+            return null;
+        }
+        // GridServiceから実際のコンテキストを収集
+        const contexts = [];
+        const { start, end } = targetRange;
+        // ソースコンテキストを取得
+        const sourceContext = this.ss.grid.getContext(sourcePosition);
+        if (!sourceContext) {
+            console.warn('Source context not found');
+            this.ss.autofill.cancelAutofill();
+            return null;
+        }
+        // 影響を受けるセルのコンテキストを収集（表示されているセルのみ）
+        for (let row = start.row + 1; row <= end.row; row++) {
+            const targetContext = this.ss.grid.getContext({ row, col: start.col });
+            if (targetContext) {
+                contexts.push({ position: { row, col: start.col }, context: targetContext });
+            }
+        }
+        // コンテキスト情報を保存
+        this.lastAutofillContexts = { sourceContext, targetContexts: contexts };
+        // オートフィルモードをリセット
+        this.ss.autofill.cancelAutofill();
+        if (contexts.length > 0) {
+            return {
+                sourcePosition,
+                targetRange,
+                contexts: this.lastAutofillContexts
+            };
+        }
+        return null;
+    }
+    getLastAutofillContexts() {
+        return this.lastAutofillContexts;
+    }
+    cleanup() {
+        this.cleanupFunctions.forEach(fn => fn());
+        this.cleanupFunctions = [];
+    }
+    ngOnDestroy() {
+        this.cleanup();
+        if (this.handleComponent) {
+            this.handleComponent.destroy();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: GridDataTableAutofill, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.5", type: GridDataTableAutofill, isStandalone: true, selector: "[gridDataTableAutofill]", outputs: { autofillComplete: "autofillComplete" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: GridDataTableAutofill, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: '[gridDataTableAutofill]'
+                }]
+        }], ctorParameters: () => [] });
+
+class SpreadSheetCellAutofill {
+    constructor() {
+        this.ss = inject(SpreadSheetService);
+        this.el = inject(ElementRef);
+        this.table = inject(GridDataTableAutofill);
+        this.position = input({ row: 0, col: 0 }, { alias: 'gridDataCellAutofill' });
+        this.enabled = input(true, { alias: 'gridDataCellAutofillEnabled' });
+        this.shouldShow = computed(() => this.enabled() &&
+            this.ss.selection.isCursorPosition(this.position()) &&
+            !this.ss.editor.isEditing(this.position()) &&
+            !this.ss.autofill.isAutofillMode());
+        // requestAnimationFrameを使用して、DOMの更新後に実行
+        effect(() => {
+            if (this.shouldShow()) {
+                requestAnimationFrame(() => {
+                    this.table.showHandle(this.el.nativeElement, this.position());
+                });
+            }
+            else if (!this.shouldShow() && this.ss.selection.isCursorPosition(this.position())) {
+                // 現在のセルがカーソル位置だが表示条件を満たさない場合のみ非表示
+                this.table.hideHandle();
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SpreadSheetCellAutofill, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.5", type: SpreadSheetCellAutofill, isStandalone: true, selector: "[gridDataCellAutofill]", inputs: { position: { classPropertyName: "position", publicName: "gridDataCellAutofill", isSignal: true, isRequired: false, transformFunction: null }, enabled: { classPropertyName: "enabled", publicName: "gridDataCellAutofillEnabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SpreadSheetCellAutofill, decorators: [{
+            type: Directive,
+            args: [{ standalone: true, selector: '[gridDataCellAutofill]' }]
+        }], ctorParameters: () => [] });
+
+// Components are imported directly by directives to avoid circular dependencies
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { COLUMN_PROTECTOR, ClipboardService, EditorService, GridService, NavigationService, ProtectionService, SelectionService, SpreadSheetCell, SpreadSheetCellInput, SpreadSheetDataService, SpreadSheetService, provideCellProtector, provideSpreadSheetService };
+export { AutoFillService, COLUMN_PROTECTOR, ClipboardService, EditorService, GridDataTableAutofill, GridService, NavigationService, ProtectionService, SelectionService, SpreadSheetCell, SpreadSheetCellAutofill, SpreadSheetCellInput, SpreadSheetDataService, SpreadSheetService, provideCellProtector, provideSpreadSheetService };
 //# sourceMappingURL=ng-atomic-common-services-spreadsheet.mjs.map