@progress/kendo-angular-spreadsheet 18.5.0-develop.7 → 18.5.0-develop.8

package/esm2022/spreadsheet.component.mjs

@@ -8,9 +8,9 @@ import { Subscription } from 'rxjs';
 import { take } from 'rxjs/operators';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from './package-metadata';
-import { SpreadsheetWidget } from '@progress/kendo-spreadsheet-common';
+import { SpreadsheetWidget, registerEditor, Matrix } from '@progress/kendo-spreadsheet-common';
 import { localeData, IntlService } from '@progress/kendo-angular-intl';
-import { downloadIcon, folderOpenIcon, formulaFxIcon } from '@progress/kendo-svg-icons';
+import { caretAltDownIcon, downloadIcon, folderOpenIcon, formulaFxIcon } from '@progress/kendo-svg-icons';
 import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
 import { PopupService } from '@progress/kendo-angular-popup';
 import { ContextMenuComponent, MenuItemComponent, MenuComponent } from '@progress/kendo-angular-menu';
@@ -59,6 +59,8 @@ import { SpreadsheetSaveFileDirective } from './tools/save-file-tool.directive';
 import { SpreadsheetLoadFileComponent } from './tools/load-file.component';
 import { MainMenuDirective } from './common/main-menu.directive';
 import { LocalizedMessagesDirective } from './localization/localized-messages.directive';
+import { SpreadsheetDataValidationDirective } from './tools/data-validation-tool.directive';
+import { ListEditorComponent } from './common/list-editor.component';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-intl";
 import * as i2 from "@progress/kendo-angular-l10n";
@@ -66,6 +68,7 @@ import * as i3 from "./common/spreadsheet.service";
 import * as i4 from "./tools/tools.service";
 import * as i5 from "./common/error-handling.service";
 import * as i6 from "@progress/kendo-angular-dialog";
+import * as i7 from "@progress/kendo-angular-popup";
 /**
  * Represents the [Kendo UI Spreadsheet component for Angular]({% slug overview_spreadsheet %}).
  */
@@ -78,6 +81,8 @@ export class SpreadsheetComponent {
     toolsService;
     errorService;
     dialogService;
+    popupService;
+    container;
     formulaBarInputRef;
     formulaCellInputRef;
     nameBoxRef;
@@ -93,7 +98,7 @@ export class SpreadsheetComponent {
         this.ngZone.onStable.pipe(take(1)).subscribe(() => {
             const normalizedItems = items.map(item => ({
                 active: item.active,
-                text: item.id === 'format' ? this.messageFor('formatTab') : this.messageFor(item.id),
+                text: item.id === 'format' || item.id === 'data' ? this.messageFor(`${item.id}Tab`) : this.messageFor(item.id),
                 cssClass: item.active ? 'k-active' : null,
                 id: item.id
             }));
@@ -239,7 +244,8 @@ export class SpreadsheetComponent {
     _menuItems;
     currentRange;
     subs = new Subscription();
-    constructor(ngZone, intl, host, localization, spreadsheetService, toolsService, errorService, dialogService) {
+    popupRef;
+    constructor(ngZone, intl, host, localization, spreadsheetService, toolsService, errorService, dialogService, popupService, container) {
         this.ngZone = ngZone;
         this.intl = intl;
         this.host = host;
@@ -248,6 +254,8 @@ export class SpreadsheetComponent {
         this.toolsService = toolsService;
         this.errorService = errorService;
         this.dialogService = dialogService;
+        this.popupService = popupService;
+        this.container = container;
         const isValid = validatePackage(packageMetadata);
         this.showLicenseWatermark = shouldShowValidationUI(isValid);
         ngZone.onStable.pipe(take(1)).subscribe(() => {
@@ -266,6 +274,9 @@ export class SpreadsheetComponent {
                     }, {
                         id: 'format',
                         text: this.messageFor('formatTab')
+                    }, {
+                        id: 'data',
+                        text: this.messageFor('dataTab')
                     }, {
                         id: 'view',
                         text: this.messageFor('view')
@@ -299,9 +310,16 @@ export class SpreadsheetComponent {
             });
             this.subs.add(this.spreadsheetService.sheetsChanged.subscribe(this.onSheetsChanged.bind(this)));
             this.subs.add(this.spreadsheetService.activeSheetChanged.subscribe(this.onActiveSheetChanged.bind(this)));
-            this.subs.add(this.spreadsheetService.selectionChanged.subscribe(range => this.currentRange = range));
+            this.subs.add(this.spreadsheetService.selectionChanged.subscribe(range => {
+                this.currentRange = range;
+                if (this.popupRef) {
+                    this.popupRef.close();
+                    this.popupRef = null;
+                }
+            }));
             this.spreadsheetService.dialogContainer = this.dialogContainer;
         });
+        this.registerEditors();
     }
     ngOnChanges(changes) {
         const dynamicOptions = [
@@ -409,9 +427,19 @@ export class SpreadsheetComponent {
     onKeyDown = (e) => {
         const isCtrl = e.ctrlKey || e.metaKey;
         const shift = e.shiftKey;
+        const altKey = e.altKey;
         if (isCtrl && shift && e.keyCode === Keys.KeyS) {
             this.spreadsheetService.onSheetsBarFocus.next();
         }
+        if (altKey) {
+            const currentSheet = e.sender.activeSheet();
+            const validation = currentSheet.range(currentSheet.activeCell()).validation();
+            if (isPresent(validation) && validation.dataType === 'list') {
+                if (e.keyCode === Keys.ArrowDown) {
+                    this.spreadsheetWidget.view.openCustomEditor();
+                }
+            }
+        }
     };
     /**
      * @hidden
@@ -496,7 +524,14 @@ export class SpreadsheetComponent {
             rows: this.rows,
             formulaBarInputRef: { current: this.formulaBarInputRef.current },
             formulaCellInputRef: { current: this.formulaCellInputRef.current },
-            nameBoxRef: { current: this.nameBoxRef.current }
+            nameBoxRef: { current: this.nameBoxRef.current },
+            getIconHTMLString: (options) => {
+                const iconWrapper = this.container.createComponent(IconWrapperComponent);
+                iconWrapper.instance.name = options.iconName;
+                iconWrapper.instance.svgIcon = options.svgIcon;
+                iconWrapper.changeDetectorRef.detectChanges();
+                return iconWrapper.instance.element.nativeElement;
+            }
         };
     }
     contextMenuItemsForTarget(target, unhide, unmerge) {
@@ -667,7 +702,48 @@ export class SpreadsheetComponent {
             });
         }
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetComponent, deps: [{ token: i0.NgZone }, { token: i1.IntlService }, { token: i0.ElementRef }, { token: i2.LocalizationService }, { token: i3.SpreadsheetService }, { token: i4.SpreadsheetToolsService }, { token: i5.ErrorHandlingService }, { token: i6.DialogService }], target: i0.ɵɵFactoryTarget.Component });
+    registerEditors() {
+        registerEditor('_validation_list', () => {
+            return {
+                edit: (options) => {
+                    this.popupRef?.close();
+                    this.popupRef = null;
+                    this.popupRef = this.popupService.open({
+                        anchor: options.view.element.querySelector('.k-spreadsheet-editor-button'),
+                        content: ListEditorComponent,
+                        popupAlign: options.alignLeft ? { horizontal: 'right', vertical: 'top' } : { horizontal: 'left', vertical: 'top' },
+                        anchorAlign: options.alignLeft ? { horizontal: 'right', vertical: 'bottom' } : { horizontal: 'left', vertical: 'bottom' },
+                        popupClass: 'k-spreadsheet-list-popup'
+                    });
+                    const list = this.popupRef.content.instance;
+                    list.itemSelect.subscribe((item) => {
+                        this.popupRef.close();
+                        this.popupRef = null;
+                        const itemValue = item.value;
+                        if (isPresent(itemValue)) {
+                            options.callback(itemValue);
+                        }
+                    });
+                    list.close.subscribe(() => {
+                        this.popupRef.close();
+                        this.popupRef = null;
+                    });
+                    const items = options.validation.from.value;
+                    const data = [];
+                    const add = (el) => { data.push({ value: el }); };
+                    if (items instanceof Matrix) {
+                        items.each(add, false);
+                    }
+                    else {
+                        (items + "").split(/\s*,\s*/).forEach(add);
+                    }
+                    list.data = data;
+                },
+                icon: { iconName: 'caret-alt-down', svgIcon: caretAltDownIcon }
+            };
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetComponent, deps: [{ token: i0.NgZone }, { token: i1.IntlService }, { token: i0.ElementRef }, { token: i2.LocalizationService }, { token: i3.SpreadsheetService }, { token: i4.SpreadsheetToolsService }, { token: i5.ErrorHandlingService }, { token: i6.DialogService }, { token: i7.PopupService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SpreadsheetComponent, isStandalone: true, selector: "kendo-spreadsheet", inputs: { menuItems: "menuItems", overflow: "overflow", formulaListMaxHeight: "formulaListMaxHeight", activeSheet: "activeSheet", sheets: "sheets", columns: "columns", columnWidth: "columnWidth", defaultCellStyle: "defaultCellStyle", headerHeight: "headerHeight", headerWidth: "headerWidth", rowHeight: "rowHeight", rows: "rows", images: "images", excel: "excel" }, outputs: { change: "change", formatChange: "formatChange", selectionChange: "selectionChange", excelExport: "excelExport", excelImport: "excelImport", activeSheetChange: "activeSheetChange" }, host: { properties: { "class.k-spreadsheet": "this.hostClass", "attr.role": "this.role" } }, providers: [
             SpreadsheetLocalizationService,
             SpreadsheetService,
@@ -691,6 +767,70 @@ export class SpreadsheetComponent {
             color="Font color"
             i18n-bold="kendo.spreadsheet.bold|The title of the Bold tool."
             bold="Bold"
+            i18n-dataValidation="kendo.spreadsheet.dataValidation|The title of the Data Validation tool."
+            dataValidation="Data Validation"
+            i18n-validationCellRange="kendo.spreadsheet.validationCellRange|The text of the Cell Range label in the data validation dialog."
+            validationCellRange="Cell Range"
+            i18n-validationCriteria="kendo.spreadsheet.validationCriteria|The text of the Criteria dropdown list label in the data validation dialog."
+            validationCriteria="Criteria"
+            i18n-validationMinValue="kendo.spreadsheet.validationMinValue|The text of the Min value label in the data validation dialog."
+            validationMinValue="Min"
+            i18n-validationMaxValue="kendo.spreadsheet.validationMaxValue|The text of the Max value label in the data validation dialog."
+            validationMaxValue="Max"
+            i18n-validationStartValue="kendo.spreadsheet.validationStartValue|The text of the Start value label in the data validation dialog."
+            validationStartValue="Start"
+            i18n-validationEndValue="kendo.spreadsheet.validationEndValue|The text of the End value label in the data validation dialog."
+            validationEndValue="End"
+            i18n-validationValue="kendo.spreadsheet.validationValue|The text of the Value label in the data validation dialog."
+            validationValue="Text"
+            i18n-validationShowListButtonCheckbox="kendo.spreadsheet.validationShowListButtonCheckbox|The text for the Show list button checkbox label in the data validation dialog."
+            validationShowListButtonCheckbox="Display button to show list"
+            i18n-validationOnInvalidData="kendo.spreadsheet.validationOnInvalidData|The text for the On invalid data label in the data validation dialog."
+            validationOnInvalidData="On invalid data"
+            i18n-validationShowDateButtonCheckbox="kendo.spreadsheet.validationShowDateButtonCheckbox|The text for the Show date button checkbox label in the data validation dialog."
+            validationShowDateButtonCheckbox="Display button to show Calendar"
+            i18n-validationRejectInput="kendo.spreadsheet.validationRejectInput|The text for the Reject input radio button label in the data validation dialog."
+            validationRejectInput="Reject input"
+            i18n-validationShowWarning="kendo.spreadsheet.validationShowWarning|The text for the Show warning radio button label in the data validation dialog."
+            validationShowWarning="Show warning"
+            i18n-validationHintTitle="kendo.spreadsheet.validationHintTitle|The text for the Custom hint title input label in the data validation dialog."
+            validationHintTitle="Custom hint title"
+            i18n-validationHintMessage="kendo.spreadsheet.validationHintMessage|The text for the Custom hint input label in the data validation dialog."
+            validationHintMessage="Custom hint"
+            i18n-validationShowHint="kendo.spreadsheet.validationShowHint|The text for the Show hint radio button label in the data validation dialog."
+            validationShowHint="Show hint"
+            i18n-validationIgnoreBlankCheckbox="kendo.spreadsheet.validationIgnoreBlankCheckbox|The text for the Ignore blank checkbox label in the data validation dialog."
+            validationIgnoreBlankCheckbox="Ignore blank"
+            i18n-validationComparer="kendo.spreadsheet.validationComparer|The text of the Comparer dropdown list label in the data validation dialog."
+            validationComparer="Comparer"
+            i18n-anyValueValidationCriteria="kendo.spreadsheet.anyValueValidationCriteria|The text of the Any value validation criteria"
+            anyValueValidationCriteria="Any value"
+            i18n-numberValidationCriteria="kendo.spreadsheet.numberValidationCriteria|The text of the Number validation criteria"
+            numberValidationCriteria="Number"
+            i18n-textValidationCriteria="kendo.spreadsheet.textValidationCriteria|The text of the Text validation criteria"
+            textValidationCriteria="Text"
+            i18n-dateValidationCriteria="kendo.spreadsheet.dateValidationCriteria|The text of the Date validation criteria"
+            dateValidationCriteria="Date"
+            i18n-customFormulaValidationCriteria="kendo.spreadsheet.customFormulaValidationCriteria|The text of the Custom formula validation criteria"
+            customFormulaValidationCriteria="Custom Formula"
+            i18n-listValidationCriteria="kendo.spreadsheet.listValidationCriteria|The text of the List validation criteria"
+            listValidationCriteria="List"
+            i18n-greaterThanValidationComparer="kendo.spreadsheet.greaterThanValidationComparer|The text of the greater than validation comparer"
+            greaterThanValidationComparer="greater than"
+            i18n-lessThanValidationComparer="kendo.spreadsheet.lessThanValidationComparer|The text of the less than validation comparer"
+            lessThanValidationComparer="less than"
+            i18n-betweenValidationComparer="kendo.spreadsheet.betweenValidationComparer|The text of the between validation comparer"
+            betweenValidationComparer="between"
+            i18n-notBetweenValidationComparer="kendo.spreadsheet.notBetweenValidationComparer|The text of the not between validation comparer"
+            notBetweenValidationComparer="not between"
+            i18n-equalToValidationComparer="kendo.spreadsheet.equalToValidationComparer|The text of the equal to validation comparer"
+            equalToValidationComparer="equal to"
+            i18n-notEqualToValidationComparer="kendo.spreadsheet.notEqualToValidationComparer|The text of the not equal to validation comparer"
+            notEqualToValidationComparer="not equal to"
+            i18n-greaterThanOrEqualToValidationComparer="kendo.spreadsheet.greaterThanOrEqualToValidationComparer|The text of the greater than on equal to validation comparer"
+            greaterThanOrEqualToValidationComparer="greater than or equal to"
+            i18n-lessThanOrEqualToValidationComparer="kendo.spreadsheet.lessThanOrEqualToValidationComparer|The text of the less than on equal to validation comparer"
+            lessThanOrEqualToValidationComparer="less than or equal to"
             i18n-italic="kendo.spreadsheet.italic|The title of the Italic tool."
             italic="Italic"
             i18n-underline="kendo.spreadsheet.underline|The title of the Underline tool."
@@ -713,6 +853,8 @@ export class SpreadsheetComponent {
             insert="Insert"
             i18n-formatTab="kendo.spreadsheet.formatTab|The text of the Format toolbar tab."
             formatTab="Format"
+            i18n-dataTab="kendo.spreadsheet.dataTab|The text of the Data toolbar tab."
+            dataTab="Data"
             i18n-view="kendo.spreadsheet.view|The text of the View toolbar tab."
             view="View"
             i18n-undo="kendo.spreadsheet.undo|The title of the Undo tool."
@@ -785,6 +927,8 @@ export class SpreadsheetComponent {
             dialogRename="Rename"
             i18n-dialogInsert="kendo.spreadsheet.dialogInsert|The text of the **Insert** button in all Spreadsheet dialogs."
             dialogInsert="Insert"
+            i18n-dialogRemove="kendo.spreadsheet.dialogRemove|The text of the **Remove** button in all Spreadsheet dialogs."
+            dialogRemove="Remove"
             i18n-dialogRemoveLink="kendo.spreadsheet.dialogRemoveLink|The text of the **Remove link** button in the Link tool dialog."
             dialogRemoveLink="Remove link"
             i18n-rename="kendo.spreadsheet.rename|The title of the Rename sheet dialog."
@@ -914,6 +1058,13 @@ export class SpreadsheetComponent {
                 <kendo-toolbar-separator></kendo-toolbar-separator>
                 <kendo-toolbar-button kendoSpreadsheetGridLines></kendo-toolbar-button>
             </kendo-toolbar>
+            <kendo-toolbar *ngIf="selectedMenuItem?.active && selectedMenuItem.id === 'data'"
+                [attr.aria-label]="messageFor('dataTab')"
+                fillMode="flat"
+                class="k-spreadsheet-toolbar"
+                [overflow]="overflow">
+                <kendo-toolbar-button kendoSpreadsheetDataValidation></kendo-toolbar-button>
+            </kendo-toolbar>
         </div>
         <div class="k-spreadsheet-action-bar">
             <div #nameBox kendoSpreadsheetNameBox [spreadsheetWidget]="spreadsheetWidget"></div>
@@ -952,7 +1103,7 @@ export class SpreadsheetComponent {
             (select)="onContextMenuSelect($event)"></kendo-contextmenu>
 
         <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoSpreadsheetLocalizedMessages]" }, { kind: "component", type: MenuComponent, selector: "kendo-menu", inputs: ["appendTo", "menuItemTemplate", "ariaRole", "menuItemLinkTemplate"], outputs: ["select", "open", "close"], exportAs: ["kendoMenu"] }, { kind: "directive", type: MainMenuDirective, selector: "[kendoSpreadsheetMenu]" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: MenuItemComponent, selector: "kendo-menu-item", inputs: ["text", "url", "disabled", "cssClass", "cssStyle", "icon", "svgIcon", "data", "separator"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ToolBarComponent, selector: "kendo-toolbar", inputs: ["overflow", "resizable", "popupSettings", "fillMode", "tabindex", "size", "tabIndex"], outputs: ["open", "close"], exportAs: ["kendoToolBar"] }, { kind: "component", type: SpreadsheetLoadFileComponent, selector: "kendo-spreadsheet-load-file-tool" }, { kind: "component", type: ToolBarButtonComponent, selector: "kendo-toolbar-button", inputs: ["showText", "showIcon", "text", "style", "className", "title", "disabled", "toggleable", "look", "togglable", "selected", "fillMode", "themeColor", "icon", "iconClass", "svgIcon", "imageUrl"], outputs: ["click", "pointerdown", "selectedChange"], exportAs: ["kendoToolBarButton"] }, { kind: "directive", type: SpreadsheetSaveFileDirective, selector: "[kendoSpreadsheetSaveFile]" }, { kind: "component", type: ToolBarButtonGroupComponent, selector: "kendo-toolbar-buttongroup", inputs: ["disabled", "fillMode", "selection", "width", "look"], exportAs: ["kendoToolBarButtonGroup"] }, { kind: "directive", type: SpreadsheetUndoDirective, selector: "kendo-toolbar-button[kendoSpreadsheetUndo]" }, { kind: "directive", type: SpreadsheetRedoDirective, selector: "kendo-toolbar-button[kendoSpreadsheetRedo]" }, { kind: "component", type: ToolBarSeparatorComponent, selector: "kendo-toolbar-separator", exportAs: ["kendoToolBarSeparator"] }, { kind: "component", type: SpreadsheetFontFamilyComponent, selector: "kendo-toolbar-dropdownlist[kendoSpreadsheetFontFamily]" }, { kind: "component", type: SpreadsheetFontSizeComponent, selector: "kendo-toolbar-dropdownlist[kendoSpreadsheetFontSize]" }, { kind: "directive", type: SpreadsheetIncreaseFontSizeDirective, selector: "kendo-toolbar-button[kendoSpreadsheetIncreaseFontSize]" }, { kind: "directive", type: SpreadsheetDecreaseFontSizeDirective, selector: "kendo-toolbar-button[kendoSpreadsheetDecreaseFontSize]" }, { kind: "directive", type: SpreadsheetBoldDirective, selector: "kendo-toolbar-button[kendoSpreadsheetBold]" }, { kind: "directive", type: SpreadsheetItalicDirective, selector: "kendo-toolbar-button[kendoSpreadsheetItalic]" }, { kind: "directive", type: SpreadsheetUnderlineDirective, selector: "kendo-toolbar-button[kendoSpreadsheetUnderline]" }, { kind: "component", type: SpreadsheetForeColorComponent, selector: "kendo-spreadsheet-forecolor-tool" }, { kind: "component", type: SpreadsheetBackColorComponent, selector: "kendo-spreadsheet-backcolor-tool" }, { kind: "component", type: ToolBarDropDownButtonComponent, selector: "kendo-toolbar-dropdownbutton", inputs: ["arrowIcon", "title", "showText", "showIcon", "text", "icon", "svgIcon", "iconClass", "imageUrl", "popupSettings", "look", "primary", "fillMode", "themeColor", "buttonClass", "textField", "disabled", "data"], outputs: ["itemClick", "open", "close"], exportAs: ["kendoToolBarDropDownButton"] }, { kind: "directive", type: SpreadsheetHorizontalTextAlignDirective, selector: "[kendoSpreadsheetHorizontalTextAlign]" }, { kind: "directive", type: SpreadsheetVerticalTextAlignDirective, selector: "[kendoSpreadsheetVerticalTextAlign]" }, { kind: "directive", type: SpreadsheetTextWrapDirective, selector: "kendo-toolbar-button[kendoSpreadsheetTextWrap]" }, { kind: "directive", type: SpreadsheetFormatDirective, selector: "[kendoSpreadsheetFormat]" }, { kind: "directive", type: SpreadsheetInsertLinkDirective, selector: "kendo-toolbar-button[kendoSpreadsheetInsertLink]" }, { kind: "directive", type: SpreadsheetAddColumnLeftButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddColumnLeftButton]" }, { kind: "directive", type: SpreadsheetAddColumnRightButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddColumnRightButton]" }, { kind: "directive", type: SpreadsheetAddRowBelowButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddRowBelowButton]" }, { kind: "directive", type: SpreadsheetAddRowAboveButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddRowAboveButton]" }, { kind: "directive", type: SpreadsheetDeleteColumnButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetDeleteColumnButton]" }, { kind: "directive", type: SpreadsheetDeleteRowButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetDeleteRowButton]" }, { kind: "directive", type: SpreadsheetDecreaseDecimalDirective, selector: "kendo-toolbar-button[kendoSpreadsheetDecreaseDecimal]" }, { kind: "directive", type: SpreadsheetIncreaseDecimalDirective, selector: "kendo-toolbar-button[kendoSpreadsheetIncreaseDecimal]" }, { kind: "directive", type: SpreadsheetMergeDirective, selector: "[kendoSpreadsheetMerge]" }, { kind: "directive", type: SpreadsheetGridLinesDirective, selector: "kendo-toolbar-button[kendoSpreadsheetGridLines]" }, { kind: "component", type: NameBoxComponent, selector: "[kendoSpreadsheetNameBox]", inputs: ["data", "spreadsheetWidget"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: FormulaInputDirective, selector: "[kendoSpreadsheetFormulaInput]", inputs: ["formulaListMaxHeight"] }, { kind: "component", type: SheetsBarComponent, selector: "[kendoSpreadsheetSheetsBar]", inputs: ["sheets", "sheetDescriptors"] }, { kind: "component", type: ContextMenuComponent, selector: "kendo-contextmenu", inputs: ["showOn", "target", "filter", "alignToAnchor", "vertical", "popupAnimate", "popupAlign", "anchorAlign", "collision", "appendTo", "ariaLabel"], outputs: ["popupOpen", "popupClose", "select", "open", "close"], exportAs: ["kendoContextMenu"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoSpreadsheetLocalizedMessages]" }, { kind: "component", type: MenuComponent, selector: "kendo-menu", inputs: ["appendTo", "menuItemTemplate", "ariaRole", "menuItemLinkTemplate"], outputs: ["select", "open", "close"], exportAs: ["kendoMenu"] }, { kind: "directive", type: MainMenuDirective, selector: "[kendoSpreadsheetMenu]" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: MenuItemComponent, selector: "kendo-menu-item", inputs: ["text", "url", "disabled", "cssClass", "cssStyle", "icon", "svgIcon", "data", "separator"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ToolBarComponent, selector: "kendo-toolbar", inputs: ["overflow", "resizable", "popupSettings", "fillMode", "tabindex", "size", "tabIndex"], outputs: ["open", "close"], exportAs: ["kendoToolBar"] }, { kind: "component", type: SpreadsheetLoadFileComponent, selector: "kendo-spreadsheet-load-file-tool" }, { kind: "component", type: ToolBarButtonComponent, selector: "kendo-toolbar-button", inputs: ["showText", "showIcon", "text", "style", "className", "title", "disabled", "toggleable", "look", "togglable", "selected", "fillMode", "themeColor", "icon", "iconClass", "svgIcon", "imageUrl"], outputs: ["click", "pointerdown", "selectedChange"], exportAs: ["kendoToolBarButton"] }, { kind: "directive", type: SpreadsheetSaveFileDirective, selector: "[kendoSpreadsheetSaveFile]" }, { kind: "component", type: ToolBarButtonGroupComponent, selector: "kendo-toolbar-buttongroup", inputs: ["disabled", "fillMode", "selection", "width", "look"], exportAs: ["kendoToolBarButtonGroup"] }, { kind: "directive", type: SpreadsheetUndoDirective, selector: "kendo-toolbar-button[kendoSpreadsheetUndo]" }, { kind: "directive", type: SpreadsheetRedoDirective, selector: "kendo-toolbar-button[kendoSpreadsheetRedo]" }, { kind: "component", type: ToolBarSeparatorComponent, selector: "kendo-toolbar-separator", exportAs: ["kendoToolBarSeparator"] }, { kind: "component", type: SpreadsheetFontFamilyComponent, selector: "kendo-toolbar-dropdownlist[kendoSpreadsheetFontFamily]" }, { kind: "component", type: SpreadsheetFontSizeComponent, selector: "kendo-toolbar-dropdownlist[kendoSpreadsheetFontSize]" }, { kind: "directive", type: SpreadsheetIncreaseFontSizeDirective, selector: "kendo-toolbar-button[kendoSpreadsheetIncreaseFontSize]" }, { kind: "directive", type: SpreadsheetDecreaseFontSizeDirective, selector: "kendo-toolbar-button[kendoSpreadsheetDecreaseFontSize]" }, { kind: "directive", type: SpreadsheetBoldDirective, selector: "kendo-toolbar-button[kendoSpreadsheetBold]" }, { kind: "directive", type: SpreadsheetItalicDirective, selector: "kendo-toolbar-button[kendoSpreadsheetItalic]" }, { kind: "directive", type: SpreadsheetUnderlineDirective, selector: "kendo-toolbar-button[kendoSpreadsheetUnderline]" }, { kind: "component", type: SpreadsheetForeColorComponent, selector: "kendo-spreadsheet-forecolor-tool" }, { kind: "component", type: SpreadsheetBackColorComponent, selector: "kendo-spreadsheet-backcolor-tool" }, { kind: "component", type: ToolBarDropDownButtonComponent, selector: "kendo-toolbar-dropdownbutton", inputs: ["arrowIcon", "title", "showText", "showIcon", "text", "icon", "svgIcon", "iconClass", "imageUrl", "popupSettings", "look", "primary", "fillMode", "themeColor", "buttonClass", "textField", "disabled", "data"], outputs: ["itemClick", "open", "close"], exportAs: ["kendoToolBarDropDownButton"] }, { kind: "directive", type: SpreadsheetHorizontalTextAlignDirective, selector: "[kendoSpreadsheetHorizontalTextAlign]" }, { kind: "directive", type: SpreadsheetVerticalTextAlignDirective, selector: "[kendoSpreadsheetVerticalTextAlign]" }, { kind: "directive", type: SpreadsheetTextWrapDirective, selector: "kendo-toolbar-button[kendoSpreadsheetTextWrap]" }, { kind: "directive", type: SpreadsheetFormatDirective, selector: "[kendoSpreadsheetFormat]" }, { kind: "directive", type: SpreadsheetInsertLinkDirective, selector: "kendo-toolbar-button[kendoSpreadsheetInsertLink]" }, { kind: "directive", type: SpreadsheetAddColumnLeftButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddColumnLeftButton]" }, { kind: "directive", type: SpreadsheetAddColumnRightButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddColumnRightButton]" }, { kind: "directive", type: SpreadsheetAddRowBelowButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddRowBelowButton]" }, { kind: "directive", type: SpreadsheetAddRowAboveButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetAddRowAboveButton]" }, { kind: "directive", type: SpreadsheetDeleteColumnButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetDeleteColumnButton]" }, { kind: "directive", type: SpreadsheetDeleteRowButtonDirective, selector: "kendo-toolbar-button[kendoSpreadsheetDeleteRowButton]" }, { kind: "directive", type: SpreadsheetDecreaseDecimalDirective, selector: "kendo-toolbar-button[kendoSpreadsheetDecreaseDecimal]" }, { kind: "directive", type: SpreadsheetIncreaseDecimalDirective, selector: "kendo-toolbar-button[kendoSpreadsheetIncreaseDecimal]" }, { kind: "directive", type: SpreadsheetMergeDirective, selector: "[kendoSpreadsheetMerge]" }, { kind: "directive", type: SpreadsheetGridLinesDirective, selector: "kendo-toolbar-button[kendoSpreadsheetGridLines]" }, { kind: "component", type: NameBoxComponent, selector: "[kendoSpreadsheetNameBox]", inputs: ["data", "spreadsheetWidget"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: FormulaInputDirective, selector: "[kendoSpreadsheetFormulaInput]", inputs: ["formulaListMaxHeight"] }, { kind: "component", type: SheetsBarComponent, selector: "[kendoSpreadsheetSheetsBar]", inputs: ["sheets", "sheetDescriptors"] }, { kind: "component", type: ContextMenuComponent, selector: "kendo-contextmenu", inputs: ["showOn", "target", "filter", "alignToAnchor", "vertical", "popupAnimate", "popupAlign", "anchorAlign", "collision", "appendTo", "ariaLabel"], outputs: ["popupOpen", "popupClose", "select", "open", "close"], exportAs: ["kendoContextMenu"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }, { kind: "directive", type: SpreadsheetDataValidationDirective, selector: "kendo-toolbar-button[kendoSpreadsheetDataValidation]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetComponent, decorators: [{
             type: Component,
@@ -983,6 +1134,70 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             color="Font color"
             i18n-bold="kendo.spreadsheet.bold|The title of the Bold tool."
             bold="Bold"
+            i18n-dataValidation="kendo.spreadsheet.dataValidation|The title of the Data Validation tool."
+            dataValidation="Data Validation"
+            i18n-validationCellRange="kendo.spreadsheet.validationCellRange|The text of the Cell Range label in the data validation dialog."
+            validationCellRange="Cell Range"
+            i18n-validationCriteria="kendo.spreadsheet.validationCriteria|The text of the Criteria dropdown list label in the data validation dialog."
+            validationCriteria="Criteria"
+            i18n-validationMinValue="kendo.spreadsheet.validationMinValue|The text of the Min value label in the data validation dialog."
+            validationMinValue="Min"
+            i18n-validationMaxValue="kendo.spreadsheet.validationMaxValue|The text of the Max value label in the data validation dialog."
+            validationMaxValue="Max"
+            i18n-validationStartValue="kendo.spreadsheet.validationStartValue|The text of the Start value label in the data validation dialog."
+            validationStartValue="Start"
+            i18n-validationEndValue="kendo.spreadsheet.validationEndValue|The text of the End value label in the data validation dialog."
+            validationEndValue="End"
+            i18n-validationValue="kendo.spreadsheet.validationValue|The text of the Value label in the data validation dialog."
+            validationValue="Text"
+            i18n-validationShowListButtonCheckbox="kendo.spreadsheet.validationShowListButtonCheckbox|The text for the Show list button checkbox label in the data validation dialog."
+            validationShowListButtonCheckbox="Display button to show list"
+            i18n-validationOnInvalidData="kendo.spreadsheet.validationOnInvalidData|The text for the On invalid data label in the data validation dialog."
+            validationOnInvalidData="On invalid data"
+            i18n-validationShowDateButtonCheckbox="kendo.spreadsheet.validationShowDateButtonCheckbox|The text for the Show date button checkbox label in the data validation dialog."
+            validationShowDateButtonCheckbox="Display button to show Calendar"
+            i18n-validationRejectInput="kendo.spreadsheet.validationRejectInput|The text for the Reject input radio button label in the data validation dialog."
+            validationRejectInput="Reject input"
+            i18n-validationShowWarning="kendo.spreadsheet.validationShowWarning|The text for the Show warning radio button label in the data validation dialog."
+            validationShowWarning="Show warning"
+            i18n-validationHintTitle="kendo.spreadsheet.validationHintTitle|The text for the Custom hint title input label in the data validation dialog."
+            validationHintTitle="Custom hint title"
+            i18n-validationHintMessage="kendo.spreadsheet.validationHintMessage|The text for the Custom hint input label in the data validation dialog."
+            validationHintMessage="Custom hint"
+            i18n-validationShowHint="kendo.spreadsheet.validationShowHint|The text for the Show hint radio button label in the data validation dialog."
+            validationShowHint="Show hint"
+            i18n-validationIgnoreBlankCheckbox="kendo.spreadsheet.validationIgnoreBlankCheckbox|The text for the Ignore blank checkbox label in the data validation dialog."
+            validationIgnoreBlankCheckbox="Ignore blank"
+            i18n-validationComparer="kendo.spreadsheet.validationComparer|The text of the Comparer dropdown list label in the data validation dialog."
+            validationComparer="Comparer"
+            i18n-anyValueValidationCriteria="kendo.spreadsheet.anyValueValidationCriteria|The text of the Any value validation criteria"
+            anyValueValidationCriteria="Any value"
+            i18n-numberValidationCriteria="kendo.spreadsheet.numberValidationCriteria|The text of the Number validation criteria"
+            numberValidationCriteria="Number"
+            i18n-textValidationCriteria="kendo.spreadsheet.textValidationCriteria|The text of the Text validation criteria"
+            textValidationCriteria="Text"
+            i18n-dateValidationCriteria="kendo.spreadsheet.dateValidationCriteria|The text of the Date validation criteria"
+            dateValidationCriteria="Date"
+            i18n-customFormulaValidationCriteria="kendo.spreadsheet.customFormulaValidationCriteria|The text of the Custom formula validation criteria"
+            customFormulaValidationCriteria="Custom Formula"
+            i18n-listValidationCriteria="kendo.spreadsheet.listValidationCriteria|The text of the List validation criteria"
+            listValidationCriteria="List"
+            i18n-greaterThanValidationComparer="kendo.spreadsheet.greaterThanValidationComparer|The text of the greater than validation comparer"
+            greaterThanValidationComparer="greater than"
+            i18n-lessThanValidationComparer="kendo.spreadsheet.lessThanValidationComparer|The text of the less than validation comparer"
+            lessThanValidationComparer="less than"
+            i18n-betweenValidationComparer="kendo.spreadsheet.betweenValidationComparer|The text of the between validation comparer"
+            betweenValidationComparer="between"
+            i18n-notBetweenValidationComparer="kendo.spreadsheet.notBetweenValidationComparer|The text of the not between validation comparer"
+            notBetweenValidationComparer="not between"
+            i18n-equalToValidationComparer="kendo.spreadsheet.equalToValidationComparer|The text of the equal to validation comparer"
+            equalToValidationComparer="equal to"
+            i18n-notEqualToValidationComparer="kendo.spreadsheet.notEqualToValidationComparer|The text of the not equal to validation comparer"
+            notEqualToValidationComparer="not equal to"
+            i18n-greaterThanOrEqualToValidationComparer="kendo.spreadsheet.greaterThanOrEqualToValidationComparer|The text of the greater than on equal to validation comparer"
+            greaterThanOrEqualToValidationComparer="greater than or equal to"
+            i18n-lessThanOrEqualToValidationComparer="kendo.spreadsheet.lessThanOrEqualToValidationComparer|The text of the less than on equal to validation comparer"
+            lessThanOrEqualToValidationComparer="less than or equal to"
             i18n-italic="kendo.spreadsheet.italic|The title of the Italic tool."
             italic="Italic"
             i18n-underline="kendo.spreadsheet.underline|The title of the Underline tool."
@@ -1005,6 +1220,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             insert="Insert"
             i18n-formatTab="kendo.spreadsheet.formatTab|The text of the Format toolbar tab."
             formatTab="Format"
+            i18n-dataTab="kendo.spreadsheet.dataTab|The text of the Data toolbar tab."
+            dataTab="Data"
             i18n-view="kendo.spreadsheet.view|The text of the View toolbar tab."
             view="View"
             i18n-undo="kendo.spreadsheet.undo|The title of the Undo tool."
@@ -1077,6 +1294,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             dialogRename="Rename"
             i18n-dialogInsert="kendo.spreadsheet.dialogInsert|The text of the **Insert** button in all Spreadsheet dialogs."
             dialogInsert="Insert"
+            i18n-dialogRemove="kendo.spreadsheet.dialogRemove|The text of the **Remove** button in all Spreadsheet dialogs."
+            dialogRemove="Remove"
             i18n-dialogRemoveLink="kendo.spreadsheet.dialogRemoveLink|The text of the **Remove link** button in the Link tool dialog."
             dialogRemoveLink="Remove link"
             i18n-rename="kendo.spreadsheet.rename|The title of the Rename sheet dialog."
@@ -1206,6 +1425,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 <kendo-toolbar-separator></kendo-toolbar-separator>
                 <kendo-toolbar-button kendoSpreadsheetGridLines></kendo-toolbar-button>
             </kendo-toolbar>
+            <kendo-toolbar *ngIf="selectedMenuItem?.active && selectedMenuItem.id === 'data'"
+                [attr.aria-label]="messageFor('dataTab')"
+                fillMode="flat"
+                class="k-spreadsheet-toolbar"
+                [overflow]="overflow">
+                <kendo-toolbar-button kendoSpreadsheetDataValidation></kendo-toolbar-button>
+            </kendo-toolbar>
         </div>
         <div class="k-spreadsheet-action-bar">
             <div #nameBox kendoSpreadsheetNameBox [spreadsheetWidget]="spreadsheetWidget"></div>
@@ -1246,9 +1472,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
     `,
                     standalone: true,
-                    imports: [LocalizedMessagesDirective, MenuComponent, MainMenuDirective, NgFor, MenuItemComponent, NgIf, ToolBarComponent, SpreadsheetLoadFileComponent, ToolBarButtonComponent, SpreadsheetSaveFileDirective, ToolBarButtonGroupComponent, SpreadsheetUndoDirective, SpreadsheetRedoDirective, ToolBarSeparatorComponent, SpreadsheetFontFamilyComponent, SpreadsheetFontSizeComponent, SpreadsheetIncreaseFontSizeDirective, SpreadsheetDecreaseFontSizeDirective, SpreadsheetBoldDirective, SpreadsheetItalicDirective, SpreadsheetUnderlineDirective, SpreadsheetForeColorComponent, SpreadsheetBackColorComponent, ToolBarDropDownButtonComponent, SpreadsheetHorizontalTextAlignDirective, SpreadsheetVerticalTextAlignDirective, SpreadsheetTextWrapDirective, SpreadsheetFormatDirective, SpreadsheetInsertLinkDirective, SpreadsheetAddColumnLeftButtonDirective, SpreadsheetAddColumnRightButtonDirective, SpreadsheetAddRowBelowButtonDirective, SpreadsheetAddRowAboveButtonDirective, SpreadsheetDeleteColumnButtonDirective, SpreadsheetDeleteRowButtonDirective, SpreadsheetDecreaseDecimalDirective, SpreadsheetIncreaseDecimalDirective, SpreadsheetMergeDirective, SpreadsheetGridLinesDirective, NameBoxComponent, IconWrapperComponent, FormulaInputDirective, SheetsBarComponent, ContextMenuComponent, WatermarkOverlayComponent]
+                    imports: [LocalizedMessagesDirective, MenuComponent, MainMenuDirective, NgFor, MenuItemComponent, NgIf, ToolBarComponent, SpreadsheetLoadFileComponent, ToolBarButtonComponent, SpreadsheetSaveFileDirective, ToolBarButtonGroupComponent, SpreadsheetUndoDirective, SpreadsheetRedoDirective, ToolBarSeparatorComponent, SpreadsheetFontFamilyComponent, SpreadsheetFontSizeComponent, SpreadsheetIncreaseFontSizeDirective, SpreadsheetDecreaseFontSizeDirective, SpreadsheetBoldDirective, SpreadsheetItalicDirective, SpreadsheetUnderlineDirective, SpreadsheetForeColorComponent, SpreadsheetBackColorComponent, ToolBarDropDownButtonComponent, SpreadsheetHorizontalTextAlignDirective, SpreadsheetVerticalTextAlignDirective, SpreadsheetTextWrapDirective, SpreadsheetFormatDirective, SpreadsheetInsertLinkDirective, SpreadsheetAddColumnLeftButtonDirective, SpreadsheetAddColumnRightButtonDirective, SpreadsheetAddRowBelowButtonDirective, SpreadsheetAddRowAboveButtonDirective, SpreadsheetDeleteColumnButtonDirective, SpreadsheetDeleteRowButtonDirective, SpreadsheetDecreaseDecimalDirective, SpreadsheetIncreaseDecimalDirective, SpreadsheetMergeDirective, SpreadsheetGridLinesDirective, NameBoxComponent, IconWrapperComponent, FormulaInputDirective, SheetsBarComponent, ContextMenuComponent, WatermarkOverlayComponent, SpreadsheetDataValidationDirective]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i1.IntlService }, { type: i0.ElementRef }, { type: i2.LocalizationService }, { type: i3.SpreadsheetService }, { type: i4.SpreadsheetToolsService }, { type: i5.ErrorHandlingService }, { type: i6.DialogService }]; }, propDecorators: { formulaBarInputRef: [{
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i1.IntlService }, { type: i0.ElementRef }, { type: i2.LocalizationService }, { type: i3.SpreadsheetService }, { type: i4.SpreadsheetToolsService }, { type: i5.ErrorHandlingService }, { type: i6.DialogService }, { type: i7.PopupService }, { type: i0.ViewContainerRef }]; }, propDecorators: { formulaBarInputRef: [{
                 type: ViewChild,
                 args: ['formulaBar', { read: FormulaInputDirective }]
             }], formulaCellInputRef: [{

package/esm2022/spreadsheet.module.mjs

@@ -12,34 +12,35 @@ import * as i0 from "@angular/core";
 import * as i1 from "./spreadsheet.component";
 import * as i2 from "./localization/custom-messages.component";
 import * as i3 from "./tools/typographical-emphasis/bold-tool.directive";
-import * as i4 from "./tools/typographical-emphasis/italic-tool.directive";
-import * as i5 from "./tools/typographical-emphasis/underline-tool.directive";
-import * as i6 from "./tools/load-file.component";
-import * as i7 from "./tools/save-file-tool.directive";
-import * as i8 from "./tools/format-tool.directive";
-import * as i9 from "./tools/history/undo-tool";
-import * as i10 from "./tools/history/redo-tool";
-import * as i11 from "./tools/font-family/spreadsheet-fontfamily-tool.component";
-import * as i12 from "./tools/font-size/spreadsheet-fontsize-tool.component";
-import * as i13 from "./tools/colorpicker/spreadsheet-backcolor.component";
-import * as i14 from "./tools/colorpicker/spreadsheet-forecolor.component";
-import * as i15 from "./tools/gridlines-tool.directive";
-import * as i16 from "./tools/tables/add-column-left-button.directive";
-import * as i17 from "./tools/tables/add-column-right-button.directive";
-import * as i18 from "./tools/tables/add-row-above-button.directive";
-import * as i19 from "./tools/tables/add-row-below-button.directive";
-import * as i20 from "./tools/tables/delete-column-button.directive";
-import * as i21 from "./tools/tables/delete-row-button.directive";
-import * as i22 from "./tools/align/align-tool.directive";
-import * as i23 from "./tools/text-wrap-tool.directive";
-import * as i24 from "./tools/tables/merge-tool.directive";
-import * as i25 from "./tools/insert/insert-link-tool.directive";
-import * as i26 from "./tools/font-size/increase-font-tool.directive";
-import * as i27 from "./tools/font-size/decrease-font-tool.directive";
-import * as i28 from "./tools/increase-decimal-tool.directive";
-import * as i29 from "./tools/decrease-decimal-tool.directive";
-import * as i30 from "./tools/align/horizontal-align-tool.directive";
-import * as i31 from "./tools/align/vertical-align-tool.directive";
+import * as i4 from "./tools/data-validation-tool.directive";
+import * as i5 from "./tools/typographical-emphasis/italic-tool.directive";
+import * as i6 from "./tools/typographical-emphasis/underline-tool.directive";
+import * as i7 from "./tools/load-file.component";
+import * as i8 from "./tools/save-file-tool.directive";
+import * as i9 from "./tools/format-tool.directive";
+import * as i10 from "./tools/history/undo-tool";
+import * as i11 from "./tools/history/redo-tool";
+import * as i12 from "./tools/font-family/spreadsheet-fontfamily-tool.component";
+import * as i13 from "./tools/font-size/spreadsheet-fontsize-tool.component";
+import * as i14 from "./tools/colorpicker/spreadsheet-backcolor.component";
+import * as i15 from "./tools/colorpicker/spreadsheet-forecolor.component";
+import * as i16 from "./tools/gridlines-tool.directive";
+import * as i17 from "./tools/tables/add-column-left-button.directive";
+import * as i18 from "./tools/tables/add-column-right-button.directive";
+import * as i19 from "./tools/tables/add-row-above-button.directive";
+import * as i20 from "./tools/tables/add-row-below-button.directive";
+import * as i21 from "./tools/tables/delete-column-button.directive";
+import * as i22 from "./tools/tables/delete-row-button.directive";
+import * as i23 from "./tools/align/align-tool.directive";
+import * as i24 from "./tools/text-wrap-tool.directive";
+import * as i25 from "./tools/tables/merge-tool.directive";
+import * as i26 from "./tools/insert/insert-link-tool.directive";
+import * as i27 from "./tools/font-size/increase-font-tool.directive";
+import * as i28 from "./tools/font-size/decrease-font-tool.directive";
+import * as i29 from "./tools/increase-decimal-tool.directive";
+import * as i30 from "./tools/decrease-decimal-tool.directive";
+import * as i31 from "./tools/align/horizontal-align-tool.directive";
+import * as i32 from "./tools/align/vertical-align-tool.directive";
 // IMPORTANT: NgModule export kept for backwards compatibility
 /**
  * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
@@ -47,8 +48,8 @@ import * as i31 from "./tools/align/vertical-align-tool.directive";
  */
 export class SpreadsheetModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetModule, imports: [i1.SpreadsheetComponent, i2.CustomMessagesComponent, i3.SpreadsheetBoldDirective, i4.SpreadsheetItalicDirective, i5.SpreadsheetUnderlineDirective, i6.SpreadsheetLoadFileComponent, i7.SpreadsheetSaveFileDirective, i8.SpreadsheetFormatDirective, i9.SpreadsheetUndoDirective, i10.SpreadsheetRedoDirective, i11.SpreadsheetFontFamilyComponent, i12.SpreadsheetFontSizeComponent, i13.SpreadsheetBackColorComponent, i14.SpreadsheetForeColorComponent, i15.SpreadsheetGridLinesDirective, i16.SpreadsheetAddColumnLeftButtonDirective, i17.SpreadsheetAddColumnRightButtonDirective, i18.SpreadsheetAddRowAboveButtonDirective, i19.SpreadsheetAddRowBelowButtonDirective, i20.SpreadsheetDeleteColumnButtonDirective, i21.SpreadsheetDeleteRowButtonDirective, i22.SpreadsheetTextAlignDirective, i23.SpreadsheetTextWrapDirective, i24.SpreadsheetMergeDirective, i25.SpreadsheetInsertLinkDirective, i26.SpreadsheetIncreaseFontSizeDirective, i27.SpreadsheetDecreaseFontSizeDirective, i28.SpreadsheetIncreaseDecimalDirective, i29.SpreadsheetDecreaseDecimalDirective, i30.SpreadsheetHorizontalTextAlignDirective, i31.SpreadsheetVerticalTextAlignDirective], exports: [i1.SpreadsheetComponent, i2.CustomMessagesComponent, i3.SpreadsheetBoldDirective, i4.SpreadsheetItalicDirective, i5.SpreadsheetUnderlineDirective, i6.SpreadsheetLoadFileComponent, i7.SpreadsheetSaveFileDirective, i8.SpreadsheetFormatDirective, i9.SpreadsheetUndoDirective, i10.SpreadsheetRedoDirective, i11.SpreadsheetFontFamilyComponent, i12.SpreadsheetFontSizeComponent, i13.SpreadsheetBackColorComponent, i14.SpreadsheetForeColorComponent, i15.SpreadsheetGridLinesDirective, i16.SpreadsheetAddColumnLeftButtonDirective, i17.SpreadsheetAddColumnRightButtonDirective, i18.SpreadsheetAddRowAboveButtonDirective, i19.SpreadsheetAddRowBelowButtonDirective, i20.SpreadsheetDeleteColumnButtonDirective, i21.SpreadsheetDeleteRowButtonDirective, i22.SpreadsheetTextAlignDirective, i23.SpreadsheetTextWrapDirective, i24.SpreadsheetMergeDirective, i25.SpreadsheetInsertLinkDirective, i26.SpreadsheetIncreaseFontSizeDirective, i27.SpreadsheetDecreaseFontSizeDirective, i28.SpreadsheetIncreaseDecimalDirective, i29.SpreadsheetDecreaseDecimalDirective, i30.SpreadsheetHorizontalTextAlignDirective, i31.SpreadsheetVerticalTextAlignDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetModule, providers: [IconsService, PopupService, ResizeBatchService, DialogContainerService, DialogService, WindowService, WindowContainerService], imports: [i1.SpreadsheetComponent, i6.SpreadsheetLoadFileComponent, i11.SpreadsheetFontFamilyComponent, i12.SpreadsheetFontSizeComponent, i13.SpreadsheetBackColorComponent, i14.SpreadsheetForeColorComponent] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetModule, imports: [i1.SpreadsheetComponent, i2.CustomMessagesComponent, i3.SpreadsheetBoldDirective, i4.SpreadsheetDataValidationDirective, i5.SpreadsheetItalicDirective, i6.SpreadsheetUnderlineDirective, i7.SpreadsheetLoadFileComponent, i8.SpreadsheetSaveFileDirective, i9.SpreadsheetFormatDirective, i10.SpreadsheetUndoDirective, i11.SpreadsheetRedoDirective, i12.SpreadsheetFontFamilyComponent, i13.SpreadsheetFontSizeComponent, i14.SpreadsheetBackColorComponent, i15.SpreadsheetForeColorComponent, i16.SpreadsheetGridLinesDirective, i17.SpreadsheetAddColumnLeftButtonDirective, i18.SpreadsheetAddColumnRightButtonDirective, i19.SpreadsheetAddRowAboveButtonDirective, i20.SpreadsheetAddRowBelowButtonDirective, i21.SpreadsheetDeleteColumnButtonDirective, i22.SpreadsheetDeleteRowButtonDirective, i23.SpreadsheetTextAlignDirective, i24.SpreadsheetTextWrapDirective, i25.SpreadsheetMergeDirective, i26.SpreadsheetInsertLinkDirective, i27.SpreadsheetIncreaseFontSizeDirective, i28.SpreadsheetDecreaseFontSizeDirective, i29.SpreadsheetIncreaseDecimalDirective, i30.SpreadsheetDecreaseDecimalDirective, i31.SpreadsheetHorizontalTextAlignDirective, i32.SpreadsheetVerticalTextAlignDirective], exports: [i1.SpreadsheetComponent, i2.CustomMessagesComponent, i3.SpreadsheetBoldDirective, i4.SpreadsheetDataValidationDirective, i5.SpreadsheetItalicDirective, i6.SpreadsheetUnderlineDirective, i7.SpreadsheetLoadFileComponent, i8.SpreadsheetSaveFileDirective, i9.SpreadsheetFormatDirective, i10.SpreadsheetUndoDirective, i11.SpreadsheetRedoDirective, i12.SpreadsheetFontFamilyComponent, i13.SpreadsheetFontSizeComponent, i14.SpreadsheetBackColorComponent, i15.SpreadsheetForeColorComponent, i16.SpreadsheetGridLinesDirective, i17.SpreadsheetAddColumnLeftButtonDirective, i18.SpreadsheetAddColumnRightButtonDirective, i19.SpreadsheetAddRowAboveButtonDirective, i20.SpreadsheetAddRowBelowButtonDirective, i21.SpreadsheetDeleteColumnButtonDirective, i22.SpreadsheetDeleteRowButtonDirective, i23.SpreadsheetTextAlignDirective, i24.SpreadsheetTextWrapDirective, i25.SpreadsheetMergeDirective, i26.SpreadsheetInsertLinkDirective, i27.SpreadsheetIncreaseFontSizeDirective, i28.SpreadsheetDecreaseFontSizeDirective, i29.SpreadsheetIncreaseDecimalDirective, i30.SpreadsheetDecreaseDecimalDirective, i31.SpreadsheetHorizontalTextAlignDirective, i32.SpreadsheetVerticalTextAlignDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetModule, providers: [IconsService, PopupService, ResizeBatchService, DialogContainerService, DialogService, WindowService, WindowContainerService], imports: [i1.SpreadsheetComponent, i7.SpreadsheetLoadFileComponent, i12.SpreadsheetFontFamilyComponent, i13.SpreadsheetFontSizeComponent, i14.SpreadsheetBackColorComponent, i15.SpreadsheetForeColorComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpreadsheetModule, decorators: [{
             type: NgModule,