@progress/kendo-angular-spreadsheet 13.6.0-develop.6

package/esm2020/tools/shared/command-icons.mjs

@@ -0,0 +1,71 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { alignCenterIcon, alignJustifyIcon, alignLeftIcon, alignRightIcon, boldIcon, dropletIcon, foregroundColorIcon, italicIcon, tableColumnDeleteIcon, tableColumnInsertLeftIcon, tableColumnInsertRightIcon, tableRowDeleteIcon, tableRowInsertAboveIcon, tableRowInsertBelowIcon, underlineIcon, arrowRotateCcwIcon, arrowRotateCwIcon, bordersNoneIcon, alignTopIcon, alignMiddleIcon, alignBottomIcon, textWrapIcon, folderOpenIcon, downloadIcon, customFormatIcon, fontSizeIcon, fontFamilyIcon } from '@progress/kendo-svg-icons';
+/**
+ * @hidden
+ */
+export const commandIcons = {
+    alignCenter: 'align-center',
+    alignJustify: 'align-justify',
+    alignLeft: 'align-left',
+    alignRight: 'align-right',
+    alignTop: 'align-top',
+    alignMiddle: 'align-middle',
+    alignBottom: 'align-bottom',
+    align: 'align-left',
+    background: 'droplet',
+    bold: 'bold',
+    color: 'foreground-color',
+    italic: 'italic',
+    redo: 'arrow-rotate-cw',
+    underline: 'underline',
+    undo: 'arrow-rotate-ccw',
+    wrap: 'text-wrap',
+    addColumnLeft: 'table-column-insert-left',
+    addColumnRight: 'table-column-insert-right',
+    addRowAbove: 'table-row-insert-above',
+    addRowBelow: 'table-row-insert-below',
+    deleteRow: 'table-row-delete',
+    deleteColumn: 'table-column-delete',
+    gridLines: 'borders-none',
+    folderOpen: 'folder-open',
+    download: 'download',
+    format: 'custom-format',
+    fontSize: 'font-size',
+    fontFamily: 'font-family'
+};
+/**
+ * @hidden
+ */
+export const commandSVGIcons = {
+    alignCenter: alignCenterIcon,
+    alignJustify: alignJustifyIcon,
+    alignLeft: alignLeftIcon,
+    alignRight: alignRightIcon,
+    alignTop: alignTopIcon,
+    alignMiddle: alignMiddleIcon,
+    alignBottom: alignBottomIcon,
+    align: alignLeftIcon,
+    background: dropletIcon,
+    bold: boldIcon,
+    color: foregroundColorIcon,
+    italic: italicIcon,
+    redo: arrowRotateCwIcon,
+    underline: underlineIcon,
+    undo: arrowRotateCcwIcon,
+    wrap: textWrapIcon,
+    addColumnLeft: tableColumnInsertLeftIcon,
+    addColumnRight: tableColumnInsertRightIcon,
+    addRowAbove: tableRowInsertAboveIcon,
+    addRowBelow: tableRowInsertBelowIcon,
+    deleteRow: tableRowDeleteIcon,
+    deleteColumn: tableColumnDeleteIcon,
+    gridLines: bordersNoneIcon,
+    folderOpen: folderOpenIcon,
+    download: downloadIcon,
+    format: customFormatIcon,
+    fontSize: fontSizeIcon,
+    fontFamily: fontFamilyIcon
+};

package/esm2020/tools/shared/commands.mjs

@@ -0,0 +1,5 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+export {};

package/esm2020/tools/shared/constants.mjs

@@ -0,0 +1,61 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { InjectionToken } from "@angular/core";
+import { commandSVGIcons } from './command-icons';
+const DEFAULT_FONT_FAMILY = 'Arial';
+const DEFAULT_FONT_SIZE = 12;
+/**
+ * @hidden
+ */
+export const DEFAULT_FONT_VALUES = {
+    fontSize: DEFAULT_FONT_SIZE,
+    fontFamily: DEFAULT_FONT_FAMILY
+};
+/**
+ * @hidden
+ */
+export const FONT_FAMILIES = ['Arial', 'Courier New', 'Georgia', 'Times New Roman', 'Trebuchet MS', 'Verdana'];
+/**
+ * @hidden
+ */
+export const FONT_SIZES = [8, 9, 10, 11, 12, 13, 14, 16, 18, 20, 22, 24, 26, 28, 36, 48, 72];
+/**
+ * @hidden
+ */
+export const FONT_DATA = {
+    fontFamily: FONT_FAMILIES,
+    fontSize: FONT_SIZES
+};
+/**
+ * @hidden
+ */
+export const FORMATS = [
+    { text: 'Automatic', value: null },
+    { text: 'Text', value: '@' },
+    { text: 'Number', value: '#,0.00' },
+    { text: 'Percent', value: '0.00%' },
+    { text: 'Financial', value: '_("$"* #,##0.00_);_("$"* (#,##0.00);_("$"* "-"??_);_(@_)' },
+    { text: 'Currency', value: '$#,##0.00;[Red]$#,##0.00' },
+    { text: 'Date', value: 'm/d/yyyy' },
+    { text: 'Time', value: 'h:mm:ss AM/PM' },
+    { text: 'Date time', value: 'm/d/yyyy h:mm' },
+    { text: 'Duration', value: '[h]:mm:ss' }
+];
+/**
+ * @hidden
+ */
+export const ALIGNS = [
+    { icon: 'align-left', svgIcon: commandSVGIcons.alignLeft, textKey: 'Align Left', commandName: 'textAlign', value: 'left', cssClass: '' },
+    { icon: 'align-center', svgIcon: commandSVGIcons.alignCenter, textKey: 'Align Center', commandName: 'textAlign', value: 'center', cssClass: '' },
+    { icon: 'align-right', svgIcon: commandSVGIcons.alignRight, textKey: 'Align Right', commandName: 'textAlign', value: 'right', cssClass: '' },
+    { icon: 'align-justify', svgIcon: commandSVGIcons.alignJustify, textKey: 'Align Justify', commandName: 'textAlign', value: 'justify', cssClass: '' },
+    { icon: 'align-top', svgIcon: commandSVGIcons.alignTop, textKey: 'Align Top', commandName: 'verticalAlign', value: 'top', cssClass: '' },
+    { icon: 'align-middle', svgIcon: commandSVGIcons.alignMiddle, textKey: 'Align Middle', commandName: 'verticalAlign', value: 'center', cssClass: '' },
+    { icon: 'align-bottom', svgIcon: commandSVGIcons.alignBottom, textKey: 'Align Bottom', commandName: 'verticalAlign', value: 'bottom', cssClass: '' }
+];
+/**
+ * @hidden
+ */
+export const MY_TOKEN = new InjectionToken('COMMAND_TOKEN');

package/esm2020/tools/shared/dialog-content.component.mjs

@@ -0,0 +1,114 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component } from '@angular/core';
+import { DialogRef, DialogContentBase } from '@progress/kendo-angular-dialog';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-dialog";
+import * as i2 from "../font-family/font-family-dropdownlist.component";
+import * as i3 from "../font-size/font-size-dropdownlist.component";
+import * as i4 from "@progress/kendo-angular-inputs";
+import * as i5 from "@angular/common";
+/**
+ * @hidden
+ */
+export class DialogContentComponent extends DialogContentBase {
+    constructor(dialog) {
+        super(dialog);
+        this.dialog = dialog;
+        this.data = [];
+    }
+    setData(args) {
+        this.data = args.data;
+        this.value = args.value;
+        this.tabindex = args.tabindex;
+        this.componentType = args.componentType;
+    }
+}
+DialogContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DialogContentComponent, deps: [{ token: i1.DialogRef }], target: i0.ɵɵFactoryTarget.Component });
+DialogContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: DialogContentComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+        <div 
+            [ngSwitch]="componentType"
+            class="k-d-flex k-align-items-center k-justify-content-center">
+            <kendo-spreadsheet-fontfamily-dropdownlist
+                *ngSwitchCase="'fontFamily'"
+                [data]="data"
+                [(value)]="value"
+                [attr.title]="title"
+                [tabindex]="tabindex"
+                [style.width.em]="13"
+                ></kendo-spreadsheet-fontfamily-dropdownlist>
+            <kendo-spreadsheet-fontsize-dropdownlist
+                *ngSwitchCase="'fontSize'"
+                [data]="data"
+                [(value)]="value"
+                [attr.title]="title"
+                [tabindex]="tabindex"
+                [style.width.em]="13"
+                ></kendo-spreadsheet-fontsize-dropdownlist>
+            <kendo-colorpicker
+                *ngSwitchCase="'color'"
+                [attr.title]="title"
+                [format]="'hex'"
+                [(value)]="value"
+                [tabindex]="tabindex"
+                [clearButton]="false"
+                fillMode="flat"
+            ></kendo-colorpicker>
+            <kendo-colorpicker
+                *ngSwitchCase="'background'"
+                [attr.title]="title"
+                [format]="'hex'"
+                [(value)]="value"
+                [tabindex]="tabindex"
+                [clearButton]="false"
+                fillMode="flat"
+            ></kendo-colorpicker>
+        </div>
+    `, isInline: true, components: [{ type: i2.FontFamilyDropDownListComponent, selector: "kendo-spreadsheet-fontfamily-dropdownlist" }, { type: i3.FontSizeDropDownListComponent, selector: "kendo-spreadsheet-fontsize-dropdownlist" }, { type: i4.ColorPickerComponent, selector: "kendo-colorpicker", inputs: ["views", "view", "activeView", "readonly", "disabled", "format", "value", "popupSettings", "paletteSettings", "gradientSettings", "icon", "iconClass", "svgIcon", "clearButton", "tabindex", "preview", "actionsLayout", "size", "rounded", "fillMode"], outputs: ["valueChange", "open", "close", "focus", "blur", "cancel", "activeColorClick", "clearButtonClick", "activeViewChange"], exportAs: ["kendoColorPicker"] }], directives: [{ type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DialogContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+        <div 
+            [ngSwitch]="componentType"
+            class="k-d-flex k-align-items-center k-justify-content-center">
+            <kendo-spreadsheet-fontfamily-dropdownlist
+                *ngSwitchCase="'fontFamily'"
+                [data]="data"
+                [(value)]="value"
+                [attr.title]="title"
+                [tabindex]="tabindex"
+                [style.width.em]="13"
+                ></kendo-spreadsheet-fontfamily-dropdownlist>
+            <kendo-spreadsheet-fontsize-dropdownlist
+                *ngSwitchCase="'fontSize'"
+                [data]="data"
+                [(value)]="value"
+                [attr.title]="title"
+                [tabindex]="tabindex"
+                [style.width.em]="13"
+                ></kendo-spreadsheet-fontsize-dropdownlist>
+            <kendo-colorpicker
+                *ngSwitchCase="'color'"
+                [attr.title]="title"
+                [format]="'hex'"
+                [(value)]="value"
+                [tabindex]="tabindex"
+                [clearButton]="false"
+                fillMode="flat"
+            ></kendo-colorpicker>
+            <kendo-colorpicker
+                *ngSwitchCase="'background'"
+                [attr.title]="title"
+                [format]="'hex'"
+                [(value)]="value"
+                [tabindex]="tabindex"
+                [clearButton]="false"
+                fillMode="flat"
+            ></kendo-colorpicker>
+        </div>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.DialogRef }]; } });

package/esm2020/tools/shared/spreadsheet-command-base.mjs

@@ -0,0 +1,75 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Subscription } from 'rxjs';
+import { ToolBarButtonComponent } from '@progress/kendo-angular-toolbar';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { SpreadsheetService } from '../../common/spreadsheet.service';
+import { Directive, Inject } from '@angular/core';
+import { SpreadsheetToolsService } from '../tools.service';
+import { commandIcons, commandSVGIcons } from './command-icons';
+import { MY_TOKEN } from './constants';
+import { take } from 'rxjs/operators';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-toolbar";
+import * as i2 from "@progress/kendo-angular-l10n";
+import * as i3 from "../../common/spreadsheet.service";
+import * as i4 from "../tools.service";
+/**
+ * @hidden
+ */
+export class SpreadsheetCommandBaseDirective {
+    constructor(command, button, localization, spreadsheetService, toolsService) {
+        this.command = command;
+        this.button = button;
+        this.localization = localization;
+        this.spreadsheetService = spreadsheetService;
+        this.toolsService = toolsService;
+        this.subs = new Subscription();
+        // this.toolsService.zone.runOutsideAngular(() => {
+        // setTimeout(() => {
+        const text = this.localization.get(this.command);
+        if (text) {
+            this.button.showText = 'overflow';
+            this.button.showIcon = 'both';
+            this.button.text = text;
+        }
+        if (!this.button.toolbarOptions.icon) {
+            this.button.icon = commandIcons[this.command];
+        }
+        if (!this.button.toolbarOptions.svgIcon) {
+            this.button.svgIcon = commandSVGIcons[this.command];
+        }
+        this.button.title = text;
+        this.button.fillMode = 'flat';
+        this.subs.add(this.toolsService.stateChange.subscribe(state => {
+            this.toolsService.ngZone.onStable.pipe(take(1)).subscribe(() => this.button.selected = state[command]);
+        }));
+        // this.toolsService.zone.run(() => {
+        //     this.toolsService.needsCheck.next();
+        // });
+        // });
+        //});
+    }
+    ngOnInit() {
+        this.subs.add(this.button.click.subscribe((this.clickHandler.bind(this))));
+        this.subs.add(this.button.pointerdown.subscribe((this.pointerdownHandler.bind(this))));
+    }
+    ngOnDestroy() {
+        this.subs.unsubscribe();
+    }
+    clickHandler() { }
+    pointerdownHandler(_event) { }
+}
+SpreadsheetCommandBaseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetCommandBaseDirective, deps: [{ token: MY_TOKEN }, { token: i1.ToolBarButtonComponent }, { token: i2.LocalizationService }, { token: i3.SpreadsheetService }, { token: i4.SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+SpreadsheetCommandBaseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: SpreadsheetCommandBaseDirective, selector: "[kendoSpreadsheetCommandBase]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetCommandBaseDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoSpreadsheetCommandBase]'
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MY_TOKEN]
+                }] }, { type: i1.ToolBarButtonComponent }, { type: i2.LocalizationService }, { type: i3.SpreadsheetService }, { type: i4.SpreadsheetToolsService }]; } });

package/esm2020/tools/shared/spreadsheet-command-button.mjs

@@ -0,0 +1,25 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { SpreadsheetCommandBaseDirective } from './spreadsheet-command-base';
+/**
+ * @hidden
+ */
+export class SpreadsheetCommandButton extends SpreadsheetCommandBaseDirective {
+    constructor(command, button, localization, spreadsheetService, toolsService, commandOptions) {
+        super(command, button, localization, spreadsheetService, toolsService);
+        this.command = command;
+        this.button = button;
+        this.localization = localization;
+        this.spreadsheetService = spreadsheetService;
+        this.toolsService = toolsService;
+        this.commandOptions = commandOptions;
+    }
+    clickHandler() {
+        if (this.commandOptions.command === 'PropertyChangeCommand') {
+            this.commandOptions.options.value = !this.toolsService.toolsState[this.command];
+        }
+        this.spreadsheetService.spreadsheet.executeCommand(this.commandOptions);
+    }
+}

package/esm2020/tools/shared/spreadsheet-dropdown-tools-base.mjs

@@ -0,0 +1,184 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, ElementRef, EventEmitter, Inject, Output, TemplateRef, ViewChild } from "@angular/core";
+import { ToolBarComponent, ToolBarToolComponent } from "@progress/kendo-angular-toolbar";
+import { SpreadsheetService } from "../../common/spreadsheet.service";
+import { SpreadsheetLocalizationService } from "../../localization/spreadsheet-localization.service";
+import { SpreadsheetToolsService } from "../tools.service";
+import { hasObservers, isPresent } from '@progress/kendo-angular-common';
+import { DEFAULT_FONT_VALUES, FONT_DATA, MY_TOKEN } from "./constants";
+import { commandIcons, commandSVGIcons } from './command-icons';
+import { outerWidth } from '../utils';
+import { DialogService } from "@progress/kendo-angular-dialog";
+import { DialogContentComponent } from "./dialog-content.component";
+import { take } from "rxjs/operators";
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-dialog";
+import * as i2 from "../../localization/spreadsheet-localization.service";
+import * as i3 from "../../common/spreadsheet.service";
+import * as i4 from "../tools.service";
+import * as i5 from "@progress/kendo-angular-toolbar";
+/**
+ * @hidden
+ */
+export class SpreadsheetDropDownToolBase extends ToolBarToolComponent {
+    constructor(command, dialogService, localization, spreadsheetService, toolsService, toolbar) {
+        super();
+        this.command = command;
+        this.dialogService = dialogService;
+        this.localization = localization;
+        this.spreadsheetService = spreadsheetService;
+        this.toolsService = toolsService;
+        this.toolbar = toolbar;
+        /**
+         * Fires when the user updates the value of the drop-down list.
+         */
+        this.valueChange = new EventEmitter();
+        this.tabindex = -1;
+        this.svgIcon = commandSVGIcons[this.command];
+        this.icon = commandIcons[this.command];
+        this.value = DEFAULT_FONT_VALUES[this.command];
+        this.data = FONT_DATA[this.command];
+    }
+    ngOnInit() {
+        this.value = this.toolsService.toolsState[this.command];
+        this.subs = this.toolsService.stateChange.subscribe(state => {
+            this.value = state[this.command];
+        });
+    }
+    ngOnDestroy() {
+        if (this.subs) {
+            this.subs.unsubscribe();
+        }
+    }
+    /**
+     * @hidden
+     */
+    messageFor(key) {
+        return this.localization.get(key);
+    }
+    /**
+     * @hidden
+     */
+    onValueChange(ev) {
+        if (isPresent(ev)) {
+            if (hasObservers(this.valueChange)) {
+                this.valueChange.emit(ev);
+            }
+            const options = {
+                command: 'PropertyChangeCommand',
+                options: { property: this.command, value: ev || null }
+            };
+            this.spreadsheetService.spreadsheet.executeCommand(options);
+        }
+    }
+    /**
+     * @hidden
+     */
+    get outerWidth() {
+        if (this.element) {
+            return outerWidth(this.element.nativeElement);
+        }
+    }
+    /**
+     * @hidden
+     */
+    openDialog() {
+        const dialogSettings = {
+            appendTo: this.spreadsheetService.dialogContainer,
+            title: this.messageFor(this.command),
+            content: DialogContentComponent,
+            actions: [{
+                    text: this.messageFor('dialogApply'),
+                    themeColor: 'primary'
+                }, {
+                    text: this.messageFor('dialogCancel')
+                }],
+            actionsLayout: 'start',
+            width: 400,
+            autoFocusedElement: '.k-dropdownlist'
+        };
+        this.toolbar.toggle(false);
+        const dialog = this.dialogService.open(dialogSettings);
+        const dialogInstance = dialog.dialog.instance;
+        const dialogContent = dialog.content.instance;
+        dialogInstance.action.pipe(take(1)).subscribe((event) => {
+            if (event.text === this.messageFor('dialogApply')) {
+                const options = {
+                    command: 'PropertyChangeCommand',
+                    options: { property: this.command, value: dialogContent.value || null }
+                };
+                this.spreadsheetService.spreadsheet.executeCommand(options);
+            }
+            this.toolbar.toggle();
+        });
+        dialogInstance.close.pipe(take(1)).subscribe(() => {
+            this.toolbar.toggle();
+        });
+        dialogContent.setData({
+            data: this.data,
+            value: this.value,
+            tabindex: this.tabindex,
+            componentType: this.command,
+            title: this.localization.get(this.command)
+        });
+    }
+    /**
+     * @hidden
+     */
+    focus(e) {
+        this.tabindex = 0;
+        if (e instanceof PointerEvent) {
+            return;
+        }
+        if (this.overflows) {
+            this.popupButton.nativeElement.focus();
+        }
+        else {
+            this.dropDownListRef.focus();
+        }
+    }
+    /**
+     * @hidden
+     */
+    canFocus() {
+        return true;
+    }
+    /**
+     * @hidden
+     */
+    handleKey() {
+        this.tabindex = -1;
+        return false;
+    }
+}
+SpreadsheetDropDownToolBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetDropDownToolBase, deps: [{ token: MY_TOKEN }, { token: i1.DialogService }, { token: i2.SpreadsheetLocalizationService }, { token: i3.SpreadsheetService }, { token: i4.SpreadsheetToolsService }, { token: i5.ToolBarComponent }], target: i0.ɵɵFactoryTarget.Component });
+SpreadsheetDropDownToolBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SpreadsheetDropDownToolBase, selector: "ng-component", outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "element", first: true, predicate: ["element"], descendants: true, read: ElementRef }, { propertyName: "dropDownListRef", first: true, predicate: ["element"], descendants: true }, { propertyName: "popupButton", first: true, predicate: ["popupButton"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetDropDownToolBase, decorators: [{
+            type: Component,
+            args: [{
+                    template: ``
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MY_TOKEN]
+                }] }, { type: i1.DialogService }, { type: i2.SpreadsheetLocalizationService }, { type: i3.SpreadsheetService }, { type: i4.SpreadsheetToolsService }, { type: i5.ToolBarComponent }]; }, propDecorators: { toolbarTemplate: [{
+                type: ViewChild,
+                args: ['toolbarTemplate', { static: true }]
+            }], popupTemplate: [{
+                type: ViewChild,
+                args: ['popupTemplate', { static: true }]
+            }], element: [{
+                type: ViewChild,
+                args: ['element', { read: ElementRef }]
+            }], dropDownListRef: [{
+                type: ViewChild,
+                args: ['element']
+            }], popupButton: [{
+                type: ViewChild,
+                args: ['popupButton', { read: ElementRef }]
+            }], valueChange: [{
+                type: Output
+            }] } });

package/esm2020/tools/shared/spreadsheet-dropdownlist.base.mjs

@@ -0,0 +1,50 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive, ElementRef, EventEmitter, HostBinding, Input, Output, ViewChild } from "@angular/core";
+import { DropDownListComponent } from "@progress/kendo-angular-dropdowns";
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export class DropDownListBase {
+    constructor() {
+        this.display = 'inline-flex';
+        this.fillMode = 'flat';
+        this.valueChange = new EventEmitter();
+    }
+    onValueChange(value) {
+        this.valueChange.emit(value);
+    }
+    focus() {
+        this.dropDownList.focus();
+    }
+}
+DropDownListBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DropDownListBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+DropDownListBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: DropDownListBase, selector: "kendo-spreadsheet-dropdownlist-base", inputs: { data: "data", value: "value", title: "title", tabindex: "tabindex" }, outputs: { valueChange: "valueChange" }, host: { properties: { "style.display": "this.display" } }, viewQueries: [{ propertyName: "element", first: true, predicate: ["element"], descendants: true, static: true }, { propertyName: "dropDownList", first: true, predicate: ["element"], descendants: true, read: DropDownListComponent, static: true }], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DropDownListBase, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'kendo-spreadsheet-dropdownlist-base'
+                }]
+        }], propDecorators: { display: [{
+                type: HostBinding,
+                args: ['style.display']
+            }], data: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], tabindex: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], element: [{
+                type: ViewChild,
+                args: ['element', { static: true }]
+            }], dropDownList: [{
+                type: ViewChild,
+                args: ['element', { read: DropDownListComponent, static: true }]
+            }] } });

package/esm2020/tools/tables/add-column-left-button.directive.mjs

@@ -0,0 +1,36 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive } from '@angular/core';
+import { ToolBarButtonComponent } from '@progress/kendo-angular-toolbar';
+import { SpreadsheetLocalizationService } from '../../localization/spreadsheet-localization.service';
+import { SpreadsheetService } from '../../common/spreadsheet.service';
+import { SpreadsheetToolsService } from '.././tools.service';
+import { SpreadsheetCommandButton } from '.././shared/spreadsheet-command-button';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-toolbar";
+import * as i2 from "../../localization/spreadsheet-localization.service";
+import * as i3 from "../../common/spreadsheet.service";
+import * as i4 from ".././tools.service";
+/**
+ * @hidden
+ */
+export class SpreadsheetAddColumnLeftButtonDirective extends SpreadsheetCommandButton {
+    constructor(button, localization, spreadsheetService, toolsService) {
+        super('addColumnLeft', button, localization, spreadsheetService, toolsService, {
+            command: 'AddColumnCommand',
+            options: { property: 'addColumnLeft',
+                value: 'left'
+            }
+        });
+    }
+}
+SpreadsheetAddColumnLeftButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetAddColumnLeftButtonDirective, deps: [{ token: i1.ToolBarButtonComponent }, { token: i2.SpreadsheetLocalizationService }, { token: i3.SpreadsheetService }, { token: i4.SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+SpreadsheetAddColumnLeftButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: SpreadsheetAddColumnLeftButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddColumnLeftButton]", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetAddColumnLeftButtonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'kendo-toolbar-button[kendoSpreadsheetAddColumnLeftButton]'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.ToolBarButtonComponent }, { type: i2.SpreadsheetLocalizationService }, { type: i3.SpreadsheetService }, { type: i4.SpreadsheetToolsService }]; } });