@ng-atomic/common 18.10.0 → 18.12.0

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

@@ -0,0 +1,758 @@
+import * as i0 from '@angular/core';
+import { signal, computed, Injectable, inject, effect, InjectionToken, ElementRef, input, Directive } 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';
+
+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];
+        });
+    }
+    setContext(context) {
+        this.contextMap.set(this.buildKey(context.position), context);
+    }
+    getContext(position) {
+        return this.contextMap.get(this.buildKey(position)) ?? null;
+    }
+    buildKey(position) {
+        return `(${position.row}, ${position.col})`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: GridService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: GridService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: GridService, decorators: [{
+            type: Injectable
+        }] });
+
+class NavigationService {
+    constructor(gridService) {
+        this.gridService = gridService;
+    }
+    moveToNextCell({ row, col }) {
+        const columns = this.gridService.columns();
+        if (col < columns.length - 1) {
+            return { row, col: col + 1 };
+        }
+        else if (row < this.gridService.data().length - 1) {
+            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, col };
+    }
+    moveToNextRow({ row, col }) {
+        if (row < this.gridService.data().length - 1) {
+            return { row: row + 1, col };
+        }
+        return { row, col };
+    }
+    moveToPreviousRow({ row, col }) {
+        if (row > 0) {
+            return { row: row - 1, col };
+        }
+        return { row, col };
+    }
+    moveRight({ row, col }) {
+        if (col < this.gridService.columns().length - 1) {
+            return { row, col: col + 1 };
+        }
+        return { row, col };
+    }
+    moveLeft({ row, col }) {
+        if (col > 0) {
+            return { row, col: col - 1 };
+        }
+        return { row, col };
+    }
+    moveUp({ row, col }) {
+        if (row > 0) {
+            return { row: row - 1, col };
+        }
+        return { row, col };
+    }
+    moveDown({ row, col }) {
+        if (row < this.gridService.data().length - 1) {
+            return { row: row + 1, col };
+        }
+        return { row, col };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: NavigationService, deps: [{ token: GridService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: NavigationService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: NavigationService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: GridService }] });
+
+class SelectionService {
+    constructor() {
+        this.selection = signal({ start: { row: 1, col: 0 }, end: null });
+        this.selectionStart = computed(() => this.selection().start, { equal: isEqual });
+        this.isMouseDown = signal(false);
+        this.grid = inject(GridService);
+        this.cellElMap = new Map();
+        effect(() => {
+            const position = this.selectionStart();
+            if (position)
+                this.focus(position);
+        });
+    }
+    isSelected(position) {
+        // selectionの範囲に含まれているかどうかを返す
+        const selection = this.selection();
+        if (!selection)
+            return false;
+        const { start, end } = selection;
+        const minRow = Math.min(start.row, end?.row ?? start.row);
+        const maxRow = Math.max(start.row, end?.row ?? start.row);
+        const minCol = Math.min(start.col, end?.col ?? start.col);
+        const maxCol = Math.max(start.col, end?.col ?? start.col);
+        const { row, col } = position;
+        return row >= minRow && row <= maxRow && col >= minCol && col <= maxCol;
+    }
+    isCursorPosition(position) {
+        return isEqual(this.selection().start, position);
+    }
+    handleMouseDown(position, event) {
+        this.isMouseDown.set(true);
+        if (!event?.shiftKey) {
+            this.startSelection(position);
+        }
+    }
+    handleMouseUp() {
+        this.isMouseDown.set(false);
+    }
+    handleMouseEnter(position) {
+        if (this.isMouseDown()) {
+            this.updateSelection(position);
+        }
+    }
+    handleClick(position, event) {
+        if (!this.isMouseDown()) {
+            if (event?.shiftKey) {
+                this.updateSelectionEnd(position);
+            }
+            else {
+                this.startSelection(position);
+            }
+        }
+    }
+    clearSelection() {
+        this.selection.update((selection) => ({ ...selection, start: selection.start, end: null }));
+    }
+    setStartPosition(position) {
+        this.selection.update((selection) => ({ ...selection, start: position, end: null }));
+    }
+    getSelection() {
+        return this.selection();
+    }
+    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 }));
+    }
+    startSelection(position) {
+        this.selection.set({ start: position, end: null });
+    }
+    updateSelection(position) {
+        if (this.selection()) {
+            this.selection.update((selection) => ({ ...selection, end: position }));
+        }
+    }
+    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);
+    }
+    getCell(position) {
+        return this.cellElMap.get(this.buildKey(position)) ?? null;
+    }
+    focus(position) {
+        setTimeout(() => {
+            const el = this.getCell(position);
+            if (el && el !== document.activeElement) {
+                el.focus();
+            }
+        });
+    }
+    buildKey(position) {
+        return `(${position.row}, ${position.col})`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SelectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SelectionService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SelectionService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+class ClipboardService {
+    constructor(gridService, selectionService) {
+        this.gridService = gridService;
+        this.selectionService = selectionService;
+        this.clipboard = inject(Clipboard);
+        this.snackBar = inject(SnackBarService);
+    }
+    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;
+        }
+        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);
+    }
+    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: "18.1.2", ngImport: i0, type: ClipboardService, deps: [{ token: GridService }, { token: SelectionService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: ClipboardService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: ClipboardService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: GridService }, { type: SelectionService }] });
+
+const COLUMN_PROTECTOR = new InjectionToken('COLUMN_PROTECTOR', {
+    providedIn: 'root',
+    factory: () => [],
+});
+function provideCellProtector(useFactory) {
+    return { provide: COLUMN_PROTECTOR, useFactory, multi: true };
+}
+class ProtectionService {
+    constructor() {
+        this.protectors = inject(COLUMN_PROTECTOR, { optional: true });
+    }
+    isEditable(value, context) {
+        if (!this.protectors)
+            return true;
+        return this.protectors.every((protector) => protector(value, context));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: ProtectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: ProtectionService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: ProtectionService, decorators: [{
+            type: Injectable
+        }] });
+
+class EditorService {
+    constructor() {
+        this.grid = inject(GridService);
+        this.selection = inject(SelectionService);
+        this.protection = inject(ProtectionService);
+        this.editinngCell = signal(null);
+        this.inputMap = new Map();
+    }
+    isEditing(position) {
+        return this.editinngCell()?.row === position.row && this.editinngCell()?.col === position.col;
+    }
+    startEditing(position) {
+        const context = this.grid.getContext(position);
+        console.debug('context:', context);
+        if (!this.protection.isEditable(null, context)) {
+            return;
+        }
+        this.selection.clearSelection();
+        this.editinngCell.set(position);
+        this.focus(position);
+    }
+    stopEditing() {
+        this.editinngCell.set(null);
+    }
+    focus(position) {
+        setTimeout(() => {
+            const input = this.getInput(position);
+            if (input && input !== document.activeElement) {
+                input.focus();
+                input.select();
+            }
+        });
+    }
+    getEditingCell() {
+        const data = this.grid.data();
+        for (let i = 0; i < data.length; i++) {
+            for (let j = 0; j < data[i].length; j++) {
+                if (this.isEditing({ row: i, col: j })) {
+                    return { row: i, col: j };
+                }
+            }
+        }
+        return null;
+    }
+    setInput(input, position) {
+        this.inputMap.set(`${this.buildKey(position)}`, input);
+    }
+    getInput(position) {
+        return this.inputMap.get(this.buildKey(position)) ?? null;
+    }
+    buildKey(position) {
+        return `(${position.row}, ${position.col})`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: EditorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: EditorService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: EditorService, decorators: [{
+            type: Injectable
+        }] });
+
+class SpreadSheetDataService {
+    constructor() {
+        this.cache = new Map();
+        this.language = inject(LanguageService);
+        this.dataAccessor = injectDataAccessor();
+        this.expression = inject(EXPRESSION_TRANSFORMER);
+    }
+    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;
+    }
+    buildKey(obj) {
+        // return CryptoJS.MD5(JSON.stringify(obj)).toString(CryptoJS.enc.Base64).slice(0, 10);
+        return JSON.stringify(obj);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SpreadSheetDataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SpreadSheetDataService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SpreadSheetDataService, decorators: [{
+            type: Injectable
+        }] });
+
+class SpreadSheetService {
+    constructor() {
+        this.config = { paste: false };
+        this.grid = inject(GridService);
+        this.data = inject(SpreadSheetDataService);
+        this.navigation = inject(NavigationService);
+        this.selection = inject(SelectionService);
+        this.clipboard = inject(ClipboardService);
+        this.editor = inject(EditorService);
+        this.protection = inject(ProtectionService);
+    }
+    handleKeyDown(event) {
+        if (this.editor.editinngCell()) {
+            this.handleKeyDownOnEditing(event);
+        }
+        else {
+            this.handleKeyDownOnSelecting(event);
+        }
+    }
+    handleKeyDownOnEditing(event) {
+        const cell = this.editor.editinngCell();
+        if (event.key === 'Tab') {
+            event.preventDefault();
+            if (event.shiftKey) {
+                this.move(cell, 'left', 'select');
+            }
+            else {
+                this.move(cell, 'right', 'select');
+            }
+        }
+        else if (event.key === 'Enter') {
+            event.preventDefault();
+            if (event.shiftKey) {
+                this.move(cell, 'top', 'select');
+            }
+            else {
+                this.move(cell, 'bottom', 'select');
+            }
+        }
+    }
+    handleKeyDownOnSelecting(event) {
+        if (event.key === 'Tab') {
+            const selectedCell = this.selection.findSelectedCell();
+            event.preventDefault();
+            event.stopPropagation();
+            if (event.shiftKey) {
+                this.move(selectedCell, 'left', 'select');
+            }
+            else {
+                this.move(selectedCell, 'right', 'select');
+            }
+            return;
+        }
+        else if (event.key === 'Enter') {
+            const selectedCell = this.selection.findSelectedCell();
+            if (selectedCell) {
+                this.editor.startEditing(selectedCell);
+                event.preventDefault();
+            }
+        }
+        else if (event.ctrlKey || event.metaKey) {
+            if (event.key === 'c') {
+                this.clipboard.copy();
+                event.preventDefault();
+            }
+            else if (event.key === 'v') {
+                if (!this.config.paste)
+                    return;
+                const target = this.selection.findSelectedCell();
+                if (target) {
+                    this.clipboard.paste(target.row, target.col);
+                }
+                event.preventDefault();
+            }
+            return;
+        }
+        else if (event.key === 'Delete' || event.key === 'Backspace') {
+            const selection = this.selection.getSelection();
+            if (selection) {
+                this.selection.clearSelectedRange(selection);
+                event.preventDefault();
+                return;
+            }
+        }
+        else {
+            const selectedCell = this.selection.findSelectedCell();
+            let newPosition;
+            if (event.shiftKey) {
+                const selectionEnd = this.selection.getSelectionEndOrStart();
+                switch (event.key) {
+                    case 'ArrowRight':
+                        newPosition = this.navigation.moveRight(selectionEnd);
+                        break;
+                    case 'ArrowLeft':
+                        newPosition = this.navigation.moveLeft(selectionEnd);
+                        break;
+                    case 'ArrowUp':
+                        newPosition = this.navigation.moveUp(selectionEnd);
+                        break;
+                    case 'ArrowDown':
+                        newPosition = this.navigation.moveDown(selectionEnd);
+                        break;
+                    default:
+                        return;
+                }
+                if (newPosition) {
+                    event.preventDefault();
+                    this.selection.updateSelectionEnd(newPosition);
+                }
+            }
+            else {
+                switch (event.key) {
+                    case 'ArrowRight':
+                        newPosition = this.navigation.moveRight(selectedCell);
+                        break;
+                    case 'ArrowLeft':
+                        newPosition = this.navigation.moveLeft(selectedCell);
+                        break;
+                    case 'ArrowUp':
+                        newPosition = this.navigation.moveUp(selectedCell);
+                        break;
+                    case 'ArrowDown':
+                        newPosition = this.navigation.moveDown(selectedCell);
+                        break;
+                    default:
+                        return;
+                }
+                if (newPosition) {
+                    event.preventDefault();
+                    this.selection.clearSelection();
+                    this.selection.handleClick(newPosition);
+                }
+            }
+        }
+    }
+    move(_position, dest, mode) {
+        this.editor.stopEditing();
+        let position;
+        if (dest === 'top') {
+            position = this.navigation.moveToPreviousRow(_position);
+        }
+        else if (dest === 'bottom') {
+            position = this.navigation.moveToNextRow(_position);
+        }
+        else if (dest === 'left') {
+            position = this.navigation.moveToPreviousCell(_position);
+        }
+        else if (dest === 'right') {
+            position = this.navigation.moveToNextCell(_position);
+        }
+        this.selection.setStartPosition(position);
+        if (mode === 'edit') {
+            this.editor.startEditing(position);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SpreadSheetService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SpreadSheetService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SpreadSheetService, decorators: [{
+            type: Injectable
+        }] });
+function provideSpreadSheetService() {
+    return [
+        ClipboardService,
+        SpreadSheetDataService,
+        EditorService,
+        SpreadSheetService,
+        GridService,
+        NavigationService,
+        SelectionService,
+        ProtectionService
+    ];
+}
+
+class SpreadSheetCell {
+    constructor() {
+        this.ss = inject(SpreadSheetService);
+        this.el = inject(ElementRef);
+        this.position = input({ row: 0, col: 0 }, { alias: 'ssCell' });
+        this.editable = input(false, { alias: 'ssCellEditable' });
+        this.context = input(null, { alias: 'ssCellContext' });
+        this.isSelected = computed(() => this.ss.selection.isSelected(this.position()));
+        this.isEditing = computed(() => this.ss.editor.isEditing(this.position()));
+        this.frameEl = signal(null);
+        effect(() => {
+            if (!this.context())
+                return;
+            this.ss.grid.setContext(this.context());
+        });
+        effect(() => {
+            const isCursor = this.ss.selection.isCursorPosition(this.position());
+            let frame = this.frameEl();
+            if (isCursor) {
+                if (!frame) {
+                    frame = this.buildOutlineFrame();
+                    this.el.nativeElement.appendChild(frame);
+                    this.frameEl.set(frame);
+                }
+            }
+            else {
+                frame?.remove();
+                this.frameEl.set(null);
+            }
+        }, { allowSignalWrites: true });
+    }
+    onDbClick() {
+        if (!this.editable())
+            return;
+        this.ss.editor.startEditing(this.position());
+    }
+    ngAfterViewInit() {
+        this.ss.selection.setCell(this.position(), this.el.nativeElement);
+        if (this.isSelected() && !this.isEditing()) {
+            this.ss.selection.focus(this.position());
+        }
+    }
+    buildOutlineFrame() {
+        const frame = document.createElement('div');
+        frame.classList.add('selection-frame');
+        frame.style.position = 'absolute';
+        frame.style.top = '0';
+        frame.style.left = '0';
+        frame.style.width = '100%';
+        frame.style.height = '100%';
+        frame.style.border = '2px solid #2196f3';
+        frame.style.borderRadius = '4px';
+        frame.style.pointerEvents = 'none';
+        frame.style.boxSizing = 'border-box';
+        return frame;
+    }
+    createLabelElement(options) {
+        const el = document.createElement('span');
+        el.textContent = options.label;
+        el.style.backgroundColor = `${options.color}`;
+        el.style.color = '#fff';
+        el.style.padding = '2px 4px';
+        el.style.position = 'absolute';
+        el.style.fontSize = '10px';
+        el.style.top = '0';
+        el.style.left = '0';
+        el.style.zIndex = '9999';
+        el.style.lineHeight = '1.5em';
+        el.style.whiteSpace = 'nowrap';
+        this.el.nativeElement.appendChild(el);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SpreadSheetCell, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.1.2", 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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SpreadSheetCell, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: '[ssCell]',
+                    host: {
+                        '[class.selected]': 'ss.selection.isSelected(position())',
+                        '[class.editing]': 'ss.editor.isEditing(position())',
+                        '(mousedown)': 'ss.selection.handleMouseDown(position(), $event)',
+                        '(mouseup)': 'ss.selection.handleMouseUp()',
+                        '(mouseenter)': 'ss.selection.handleMouseEnter(position())',
+                        '(click)': 'ss.selection.handleClick(position(), $event)',
+                        '(dblclick)': 'onDbClick()',
+                    }
+                }]
+        }], ctorParameters: () => [] });
+class SpreadSheetCellInput {
+    constructor() {
+        this.ss = inject(SpreadSheetService);
+        this.position = input({ row: 0, col: 0 }, { alias: 'ssCellInput' });
+        this.el = inject(ElementRef);
+        this.isSelected = computed(() => this.ss.selection.isSelected(this.position()));
+        this.isEditing = computed(() => this.ss.editor.isEditing(this.position()));
+    }
+    ngAfterViewInit() {
+        this.ss.editor.setInput(this.el.nativeElement, this.position());
+        if (this.isSelected() && this.isEditing()) {
+            this.ss.editor.focus(this.position());
+        }
+    }
+    stopEditing() {
+        this.ss.editor.stopEditing();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: SpreadSheetCellInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.1.2", 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: "18.1.2", ngImport: i0, type: SpreadSheetCellInput, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: '[ssCellInput]',
+                    host: {
+                        '(blur)': 'stopEditing()',
+                    }
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { COLUMN_PROTECTOR, ClipboardService, EditorService, GridService, NavigationService, ProtectionService, SelectionService, SpreadSheetCell, SpreadSheetCellInput, SpreadSheetDataService, SpreadSheetService, provideCellProtector, provideSpreadSheetService };
+//# sourceMappingURL=ng-atomic-common-services-spreadsheet.mjs.map