@progress/kendo-angular-editor/esm2022/tools/tables/popup-table-grid.component.mjs

Kendo UI Editor for Angular

/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { Component, Output, EventEmitter } from '@angular/core';
import { NgFor } from '@angular/common';
import { tableWizardIcon } from '@progress/kendo-svg-icons';
import { EditorLocalizationService } from '../../localization/editor-localization.service';
import { replaceMessagePlaceholder } from '../../util';
import * as i0 from "@angular/core";
import * as i1 from "../../localization/editor-localization.service";
/**
 * @hidden
 */
export class PopupTableGridComponent {
    localization;
    cellClick = new EventEmitter();
    tableWizardClick = new EventEmitter();
    tableWizardIcon = tableWizardIcon;
    state = { rows: -1, cols: -1 };
    rows = 6;
    cols = 8;
    constructor(localization) {
        this.localization = localization;
    }
    get message() {
        const { rows, cols } = this.state;
        const localizationMsg = this.localization.get('insertTableHint') || '';
        const rowReplacement = rows > -1 ? (rows + 1).toString() : '';
        const colReplacement = cols > -1 ? (cols + 1).toString() : '';
        const xReplacement = cols > -1 ? 'x' : '';
        return replaceMessagePlaceholder(localizationMsg, [
            { placeholder: 'rows', value: rowReplacement },
            { placeholder: 'columns', value: colReplacement },
            { placeholder: 'x', value: xReplacement }
        ]);
    }
    get cells() {
        return Array.from(Array(this.rows * this.cols).keys());
    }
    selected(index) {
        const { rows, cols } = this.state;
        const cellRow = Math.floor(index / this.cols);
        const cellCol = index % this.cols;
        return cellRow <= rows && cellCol <= cols;
    }
    setState(index) {
        const rows = Math.floor(index / this.cols);
        const cols = index % this.cols;
        this.state = { rows: rows, cols: cols };
    }
    resetState() {
        this.state = { rows: -1, cols: -1 };
    }
    insertTable() {
        this.cellClick.emit(this.state);
    }
    openTableWizard() {
        this.tableWizardClick.emit();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopupTableGridComponent, deps: [{ token: i1.EditorLocalizationService }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PopupTableGridComponent, isStandalone: true, selector: "kendo-popup-table-grid", outputs: { cellClick: "cellClick", tableWizardClick: "tableWizardClick" }, ngImport: i0, template: `
        <div
            [style.border-color]="'inherit'"
            class="k-ct-popup"
            (mouseleave)="resetState()"
            (click)="insertTable()">
            <span *ngFor="let i of cells"
                class="k-ct-cell"
                [class.k-selected]="selected(i)"
                [class.k-disabled]="!selected(i)"
                (mouseenter)="setState(i)">
            </span>
        </div>
        <div class="k-status" unselectable="on">{{ message }}</div>
        <!-- uncomment when TableWizard is completed
        <div class="k-editor-toolbar" unselectable="on">
            <button type="button" kendoButton class="k-tool" [icon]="'table-wizard'" [svgIcon]="tableWizardIcon" (click)="openTableWizard()" title="Table Wizard">Table Wizard</button>
        </div>
        -->
    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopupTableGridComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'kendo-popup-table-grid',
                    template: `
        <div
            [style.border-color]="'inherit'"
            class="k-ct-popup"
            (mouseleave)="resetState()"
            (click)="insertTable()">
            <span *ngFor="let i of cells"
                class="k-ct-cell"
                [class.k-selected]="selected(i)"
                [class.k-disabled]="!selected(i)"
                (mouseenter)="setState(i)">
            </span>
        </div>
        <div class="k-status" unselectable="on">{{ message }}</div>
        <!-- uncomment when TableWizard is completed
        <div class="k-editor-toolbar" unselectable="on">
            <button type="button" kendoButton class="k-tool" [icon]="'table-wizard'" [svgIcon]="tableWizardIcon" (click)="openTableWizard()" title="Table Wizard">Table Wizard</button>
        </div>
        -->
    `,
                    standalone: true,
                    imports: [NgFor]
                }]
        }], ctorParameters: function () { return [{ type: i1.EditorLocalizationService }]; }, propDecorators: { cellClick: [{
                type: Output
            }], tableWizardClick: [{
                type: Output
            }] } });