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

package/esm2020/spreadsheet.module.mjs

@@ -0,0 +1,235 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { LabelModule } from '@progress/kendo-angular-label';
+import { InputsModule } from '@progress/kendo-angular-inputs';
+import { ButtonsModule } from '@progress/kendo-angular-buttons';
+import { IntlModule } from '@progress/kendo-angular-intl';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SpreadsheetComponent } from './spreadsheet.component';
+import { PopupModule } from '@progress/kendo-angular-popup';
+import { TabStripModule } from '@progress/kendo-angular-layout';
+import { EventsModule, WatermarkModule } from '@progress/kendo-angular-common';
+import { FormulaListComponent } from './action-bar/list.component';
+import { FormulaInputDirective } from './action-bar/formula-input.directive';
+import { IconsModule } from '@progress/kendo-angular-icons';
+import { ComboBoxModule, DropDownListModule } from '@progress/kendo-angular-dropdowns';
+import { NameBoxComponent } from './action-bar/namebox.component';
+import { SheetsBarComponent } from './sheets-bar/sheets-bar.component';
+import { ToolBarModule } from '@progress/kendo-angular-toolbar';
+import { SpreadsheetBoldDirective } from './tools/typographical-emphasis/bold-tool.directive';
+import { SpreadsheetItalicDirective } from './tools/typographical-emphasis/italic-tool.directive';
+import { SpreadsheetUndoDirective } from './tools/history/undo-tool';
+import { SpreadsheetRedoDirective } from './tools/history/redo-tool';
+import { SpreadsheetUnderlineDirective } from './tools/typographical-emphasis/underline-tool.directive';
+import { SpreadsheetLoadFileComponent } from './tools/load-file.component';
+import { SpreadsheetSaveFileDirective } from './tools/save-file-tool.directive';
+import { MessagesDirective } from './localization/messages';
+import { CustomMessagesComponent } from './localization/custom-messages.component';
+import { LocalizedMessagesDirective } from './localization/localized-messages.directive';
+import { SpreadsheetFormatDirective } from './tools/format-tool.directive';
+import { SpreadsheetFontFamilyComponent } from './tools/font-family/spreadsheet-fontfamily-tool.component';
+import { SpreadsheetFontSizeComponent } from './tools/font-size/spreadsheet-fontsize-tool.component';
+import { SpreadsheetBackColorComponent } from './tools/colorpicker/spreadsheet-backcolor.component';
+import { SpreadsheetForeColorComponent } from './tools/colorpicker/spreadsheet-forecolor.component';
+import { SpreadsheetGridLinesDirective } from './tools/gridlines-tool.directive';
+import { SpreadsheetAddColumnLeftButtonDirective } from './tools/tables/add-column-left-button.directive';
+import { SpreadsheetAddColumnRightButtonDirective } from './tools/tables/add-column-right-button.directive';
+import { SpreadsheetAddRowAboveButtonDirective } from './tools/tables/add-row-above-button.directive';
+import { SpreadsheetAddRowBelowButtonDirective } from './tools/tables/add-row-below-button.directive';
+import { SpreadsheetDeleteColumnButtonDirective } from './tools/tables/delete-column-button.directive';
+import { SpreadsheetDeleteRowButtonDirective } from './tools/tables/delete-row-button.directive';
+import { SpreadsheetTextAlignDirective } from './tools/align-tool.directive';
+import { SpreadsheetTextWrapDirective } from './tools/text-wrap-tool.directive';
+import { DialogModule } from '@progress/kendo-angular-dialog';
+import { FontFamilyDropDownListComponent } from './tools/font-family/font-family-dropdownlist.component';
+import { FontSizeDropDownListComponent } from './tools/font-size/font-size-dropdownlist.component';
+import { DialogContentComponent } from './tools/shared/dialog-content.component';
+import { MenuModule } from '@progress/kendo-angular-menu';
+import { MainMenuDirective } from './common/main-menu.directive';
+import { ActionDialogComponent } from './sheets-bar/action-dialog.component';
+import { RemoveDirective } from './sheets-bar/remove.directive';
+import * as i0 from "@angular/core";
+const DIRECTIVES = [
+    SpreadsheetComponent,
+    MessagesDirective,
+    LocalizedMessagesDirective,
+    CustomMessagesComponent,
+    FormulaListComponent,
+    FormulaInputDirective,
+    NameBoxComponent,
+    SheetsBarComponent,
+    SpreadsheetBoldDirective,
+    SpreadsheetItalicDirective,
+    SpreadsheetUnderlineDirective,
+    SpreadsheetLoadFileComponent,
+    SpreadsheetSaveFileDirective,
+    SpreadsheetFormatDirective,
+    SpreadsheetUndoDirective,
+    SpreadsheetRedoDirective,
+    SpreadsheetFontFamilyComponent,
+    SpreadsheetFontSizeComponent,
+    SpreadsheetBackColorComponent,
+    SpreadsheetForeColorComponent,
+    SpreadsheetGridLinesDirective,
+    SpreadsheetAddColumnLeftButtonDirective,
+    SpreadsheetAddColumnRightButtonDirective,
+    SpreadsheetAddRowAboveButtonDirective,
+    SpreadsheetAddRowBelowButtonDirective,
+    SpreadsheetDeleteColumnButtonDirective,
+    SpreadsheetDeleteRowButtonDirective,
+    SpreadsheetTextAlignDirective,
+    SpreadsheetTextWrapDirective,
+    FontFamilyDropDownListComponent,
+    FontSizeDropDownListComponent,
+    DialogContentComponent,
+    MainMenuDirective,
+    ActionDialogComponent,
+    RemoveDirective
+];
+const EXPORTS = [
+    SpreadsheetComponent,
+    CustomMessagesComponent,
+    SpreadsheetBoldDirective,
+    SpreadsheetItalicDirective,
+    SpreadsheetUnderlineDirective,
+    SpreadsheetLoadFileComponent,
+    SpreadsheetSaveFileDirective,
+    SpreadsheetFormatDirective,
+    SpreadsheetUndoDirective,
+    SpreadsheetRedoDirective,
+    SpreadsheetFontFamilyComponent,
+    SpreadsheetFontSizeComponent,
+    SpreadsheetBackColorComponent,
+    SpreadsheetForeColorComponent,
+    SpreadsheetGridLinesDirective,
+    SpreadsheetAddColumnLeftButtonDirective,
+    SpreadsheetAddColumnRightButtonDirective,
+    SpreadsheetAddRowAboveButtonDirective,
+    SpreadsheetAddRowBelowButtonDirective,
+    SpreadsheetDeleteColumnButtonDirective,
+    SpreadsheetDeleteRowButtonDirective,
+    SpreadsheetTextAlignDirective,
+    SpreadsheetTextWrapDirective
+];
+/**
+ * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
+ * definition for the Spreadsheet component.
+ */
+export class SpreadsheetModule {
+}
+SpreadsheetModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SpreadsheetModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetModule, declarations: [SpreadsheetComponent,
+        MessagesDirective,
+        LocalizedMessagesDirective,
+        CustomMessagesComponent,
+        FormulaListComponent,
+        FormulaInputDirective,
+        NameBoxComponent,
+        SheetsBarComponent,
+        SpreadsheetBoldDirective,
+        SpreadsheetItalicDirective,
+        SpreadsheetUnderlineDirective,
+        SpreadsheetLoadFileComponent,
+        SpreadsheetSaveFileDirective,
+        SpreadsheetFormatDirective,
+        SpreadsheetUndoDirective,
+        SpreadsheetRedoDirective,
+        SpreadsheetFontFamilyComponent,
+        SpreadsheetFontSizeComponent,
+        SpreadsheetBackColorComponent,
+        SpreadsheetForeColorComponent,
+        SpreadsheetGridLinesDirective,
+        SpreadsheetAddColumnLeftButtonDirective,
+        SpreadsheetAddColumnRightButtonDirective,
+        SpreadsheetAddRowAboveButtonDirective,
+        SpreadsheetAddRowBelowButtonDirective,
+        SpreadsheetDeleteColumnButtonDirective,
+        SpreadsheetDeleteRowButtonDirective,
+        SpreadsheetTextAlignDirective,
+        SpreadsheetTextWrapDirective,
+        FontFamilyDropDownListComponent,
+        FontSizeDropDownListComponent,
+        DialogContentComponent,
+        MainMenuDirective,
+        ActionDialogComponent,
+        RemoveDirective], imports: [CommonModule,
+        ButtonsModule,
+        ComboBoxModule,
+        DropDownListModule,
+        DialogModule,
+        EventsModule,
+        IconsModule,
+        IntlModule,
+        MenuModule,
+        PopupModule,
+        TabStripModule,
+        ToolBarModule,
+        InputsModule,
+        WatermarkModule,
+        LabelModule], exports: [SpreadsheetComponent,
+        CustomMessagesComponent,
+        SpreadsheetBoldDirective,
+        SpreadsheetItalicDirective,
+        SpreadsheetUnderlineDirective,
+        SpreadsheetLoadFileComponent,
+        SpreadsheetSaveFileDirective,
+        SpreadsheetFormatDirective,
+        SpreadsheetUndoDirective,
+        SpreadsheetRedoDirective,
+        SpreadsheetFontFamilyComponent,
+        SpreadsheetFontSizeComponent,
+        SpreadsheetBackColorComponent,
+        SpreadsheetForeColorComponent,
+        SpreadsheetGridLinesDirective,
+        SpreadsheetAddColumnLeftButtonDirective,
+        SpreadsheetAddColumnRightButtonDirective,
+        SpreadsheetAddRowAboveButtonDirective,
+        SpreadsheetAddRowBelowButtonDirective,
+        SpreadsheetDeleteColumnButtonDirective,
+        SpreadsheetDeleteRowButtonDirective,
+        SpreadsheetTextAlignDirective,
+        SpreadsheetTextWrapDirective] });
+SpreadsheetModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetModule, imports: [[
+            CommonModule,
+            ButtonsModule,
+            ComboBoxModule,
+            DropDownListModule,
+            DialogModule,
+            EventsModule,
+            IconsModule,
+            IntlModule,
+            MenuModule,
+            PopupModule,
+            TabStripModule,
+            ToolBarModule,
+            InputsModule,
+            WatermarkModule,
+            LabelModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [DIRECTIVES],
+                    exports: [EXPORTS],
+                    imports: [
+                        CommonModule,
+                        ButtonsModule,
+                        ComboBoxModule,
+                        DropDownListModule,
+                        DialogModule,
+                        EventsModule,
+                        IconsModule,
+                        IntlModule,
+                        MenuModule,
+                        PopupModule,
+                        TabStripModule,
+                        ToolBarModule,
+                        InputsModule,
+                        WatermarkModule,
+                        LabelModule
+                    ]
+                }]
+        }] });

package/esm2020/tools/align-tool.directive.mjs

@@ -0,0 +1,58 @@
+/**-----------------------------------------------------------------------------------------
+* 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 { SpreadsheetLocalizationService } from '../localization/spreadsheet-localization.service';
+import { SpreadsheetService } from '../common/spreadsheet.service';
+import { commandIcons, commandSVGIcons } from './shared/command-icons';
+import { ALIGNS } from './shared/constants';
+import { ToolBarDropDownButtonComponent } from '@progress/kendo-angular-toolbar';
+import { Subscription } from 'rxjs';
+import { SpreadsheetToolsService } from './tools.service';
+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 SpreadsheetTextAlignDirective {
+    constructor(host, localization, spreadsheetService, toolsService) {
+        this.host = host;
+        this.spreadsheetService = spreadsheetService;
+        this.toolsService = toolsService;
+        this.commandName = 'align';
+        this.subs = new Subscription();
+        host.svgIcon = commandSVGIcons[this.commandName];
+        host.icon = commandIcons[this.commandName];
+        host.arrowIcon = true;
+        host.fillMode = 'flat';
+        host.data = [...ALIGNS];
+        this.subs.add(host.itemClick.subscribe((e) => this.onItemClick(e)));
+        host.title = localization.get(this.commandName);
+        host.textField = 'textKey';
+    }
+    ngOnInit() {
+        this.subs.add(this.toolsService.stateChange.subscribe(state => this.host.data.forEach(i => i.cssClass = i.value === state[i.commandName] ? 'k-selected' : '')));
+    }
+    ngOnDestroy() {
+        this.subs.unsubscribe();
+    }
+    onItemClick(item) {
+        const value = item.value || null;
+        const options = {
+            command: 'PropertyChangeCommand', options: { property: item.commandName, value }
+        };
+        this.spreadsheetService.spreadsheet.executeCommand(options);
+    }
+}
+SpreadsheetTextAlignDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetTextAlignDirective, deps: [{ token: i1.ToolBarDropDownButtonComponent }, { token: i2.SpreadsheetLocalizationService }, { token: i3.SpreadsheetService }, { token: i4.SpreadsheetToolsService }], target: i0.ɵɵFactoryTarget.Directive });
+SpreadsheetTextAlignDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: SpreadsheetTextAlignDirective, selector: "[kendoSpreadsheetTextAlign]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetTextAlignDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoSpreadsheetTextAlign]',
+                }]
+        }], ctorParameters: function () { return [{ type: i1.ToolBarDropDownButtonComponent }, { type: i2.SpreadsheetLocalizationService }, { type: i3.SpreadsheetService }, { type: i4.SpreadsheetToolsService }]; } });

package/esm2020/tools/colorpicker/spreadsheet-backcolor.component.mjs

@@ -0,0 +1,98 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, forwardRef, Inject } from '@angular/core';
+import { ToolBarComponent, ToolBarToolComponent } from '@progress/kendo-angular-toolbar';
+import { SpreadsheetLocalizationService } from '../../localization/spreadsheet-localization.service';
+import { SpreadsheetService } from '../../common/spreadsheet.service';
+import { SpreadsheetToolsService } from '../tools.service';
+import { SpreadsheetDropDownToolBase } from '../shared/spreadsheet-dropdown-tools-base';
+import { DialogService } from '@progress/kendo-angular-dialog';
+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-inputs";
+import * as i6 from "@progress/kendo-angular-icons";
+import * as i7 from "@angular/common";
+import * as i8 from "@progress/kendo-angular-toolbar";
+/**
+ * A component which changes the background color of the text ([more information](ToDo).
+ * @hidden
+ */
+export class SpreadsheetBackColorComponent extends SpreadsheetDropDownToolBase {
+    constructor(dialogService, localization, spreadsheetService, toolsService, toolbar) {
+        super('background', dialogService, localization, spreadsheetService, toolsService, toolbar);
+    }
+}
+SpreadsheetBackColorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetBackColorComponent, deps: [{ token: i1.DialogService }, { token: i2.SpreadsheetLocalizationService }, { token: i3.SpreadsheetService }, { token: i4.SpreadsheetToolsService }, { token: ToolBarComponent }], target: i0.ɵɵFactoryTarget.Component });
+SpreadsheetBackColorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SpreadsheetBackColorComponent, selector: "kendo-spreadsheet-backcolor-tool", providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => SpreadsheetBackColorComponent) }], usesInheritance: true, ngImport: i0, template: `
+        <ng-template #toolbarTemplate>
+            <kendo-colorpicker
+                #element
+                [attr.title]="messageFor(command)"
+                [format]="'hex'"
+                [(value)]="value"
+                [tabindex]="tabindex"
+                (valueChange)="onValueChange($event)"
+                [clearButton]="false"
+                fillMode="flat"
+                [icon]="icon"
+                [preview]="true"
+                [svgIcon]="svgIcon"></kendo-colorpicker>
+        </ng-template>
+        <ng-template #popupTemplate>
+            <div #popupButton
+                [tabindex]="tabindex"
+                role="menuitem"
+                class="k-item k-menu-item"
+                (click)="openDialog();">
+                <span
+                    class="k-link k-menu-link">
+                    <kendo-icon-wrapper [name]="icon" [svgIcon]="svgIcon"></kendo-icon-wrapper>
+                    <span *ngIf="messageFor(command)" class="k-menu-link-text">{{messageFor(command)}}</span>
+                </span>
+            </div>
+        </ng-template>
+    `, isInline: true, components: [{ type: i5.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"] }, { type: i6.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetBackColorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => SpreadsheetBackColorComponent) }],
+                    selector: 'kendo-spreadsheet-backcolor-tool',
+                    template: `
+        <ng-template #toolbarTemplate>
+            <kendo-colorpicker
+                #element
+                [attr.title]="messageFor(command)"
+                [format]="'hex'"
+                [(value)]="value"
+                [tabindex]="tabindex"
+                (valueChange)="onValueChange($event)"
+                [clearButton]="false"
+                fillMode="flat"
+                [icon]="icon"
+                [preview]="true"
+                [svgIcon]="svgIcon"></kendo-colorpicker>
+        </ng-template>
+        <ng-template #popupTemplate>
+            <div #popupButton
+                [tabindex]="tabindex"
+                role="menuitem"
+                class="k-item k-menu-item"
+                (click)="openDialog();">
+                <span
+                    class="k-link k-menu-link">
+                    <kendo-icon-wrapper [name]="icon" [svgIcon]="svgIcon"></kendo-icon-wrapper>
+                    <span *ngIf="messageFor(command)" class="k-menu-link-text">{{messageFor(command)}}</span>
+                </span>
+            </div>
+        </ng-template>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.DialogService }, { type: i2.SpreadsheetLocalizationService }, { type: i3.SpreadsheetService }, { type: i4.SpreadsheetToolsService }, { type: i8.ToolBarComponent, decorators: [{
+                    type: Inject,
+                    args: [ToolBarComponent]
+                }] }]; } });

package/esm2020/tools/colorpicker/spreadsheet-forecolor.component.mjs

@@ -0,0 +1,98 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, forwardRef, Inject } from '@angular/core';
+import { ToolBarComponent, ToolBarToolComponent } from '@progress/kendo-angular-toolbar';
+import { SpreadsheetLocalizationService } from '../../localization/spreadsheet-localization.service';
+import { SpreadsheetService } from '../../common/spreadsheet.service';
+import { SpreadsheetToolsService } from '../tools.service';
+import { SpreadsheetDropDownToolBase } from '../shared/spreadsheet-dropdown-tools-base';
+import { DialogService } from '@progress/kendo-angular-dialog';
+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-inputs";
+import * as i6 from "@progress/kendo-angular-icons";
+import * as i7 from "@angular/common";
+import * as i8 from "@progress/kendo-angular-toolbar";
+/**
+ * A component which changes the color of the text ([more information](ToDo).
+ * @hidden
+ */
+export class SpreadsheetForeColorComponent extends SpreadsheetDropDownToolBase {
+    constructor(dialogService, localization, spreadsheetService, toolsService, toolbar) {
+        super('color', dialogService, localization, spreadsheetService, toolsService, toolbar);
+    }
+}
+SpreadsheetForeColorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetForeColorComponent, deps: [{ token: i1.DialogService }, { token: i2.SpreadsheetLocalizationService }, { token: i3.SpreadsheetService }, { token: i4.SpreadsheetToolsService }, { token: ToolBarComponent }], target: i0.ɵɵFactoryTarget.Component });
+SpreadsheetForeColorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SpreadsheetForeColorComponent, selector: "kendo-spreadsheet-forecolor-tool", providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => SpreadsheetForeColorComponent) }], usesInheritance: true, ngImport: i0, template: `
+        <ng-template #toolbarTemplate>
+            <kendo-colorpicker
+                #element
+                [attr.title]="messageFor(command)"
+                [format]="'hex'"
+                [(value)]="value"
+                [tabindex]="tabindex"
+                (valueChange)="onValueChange($event)"
+                [clearButton]="false"
+                fillMode="flat"
+                [icon]="icon"
+                [svgIcon]="svgIcon"
+                [preview]="true"></kendo-colorpicker>
+        </ng-template>
+        <ng-template #popupTemplate>
+            <div #popupButton
+                [tabindex]="tabindex"
+                role="menuitem"
+                class="k-item k-menu-item"
+                (click)="openDialog();">
+                <span
+                    class="k-link k-menu-link">
+                    <kendo-icon-wrapper [name]="icon" [svgIcon]="svgIcon"></kendo-icon-wrapper>
+                    <span *ngIf="messageFor(command)" class="k-menu-link-text">{{messageFor(command)}}</span>
+                </span>
+            </div>
+        </ng-template>
+    `, isInline: true, components: [{ type: i5.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"] }, { type: i6.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetForeColorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => SpreadsheetForeColorComponent) }],
+                    selector: 'kendo-spreadsheet-forecolor-tool',
+                    template: `
+        <ng-template #toolbarTemplate>
+            <kendo-colorpicker
+                #element
+                [attr.title]="messageFor(command)"
+                [format]="'hex'"
+                [(value)]="value"
+                [tabindex]="tabindex"
+                (valueChange)="onValueChange($event)"
+                [clearButton]="false"
+                fillMode="flat"
+                [icon]="icon"
+                [svgIcon]="svgIcon"
+                [preview]="true"></kendo-colorpicker>
+        </ng-template>
+        <ng-template #popupTemplate>
+            <div #popupButton
+                [tabindex]="tabindex"
+                role="menuitem"
+                class="k-item k-menu-item"
+                (click)="openDialog();">
+                <span
+                    class="k-link k-menu-link">
+                    <kendo-icon-wrapper [name]="icon" [svgIcon]="svgIcon"></kendo-icon-wrapper>
+                    <span *ngIf="messageFor(command)" class="k-menu-link-text">{{messageFor(command)}}</span>
+                </span>
+            </div>
+        </ng-template>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.DialogService }, { type: i2.SpreadsheetLocalizationService }, { type: i3.SpreadsheetService }, { type: i4.SpreadsheetToolsService }, { type: i8.ToolBarComponent, decorators: [{
+                    type: Inject,
+                    args: [ToolBarComponent]
+                }] }]; } });

package/esm2020/tools/font-family/font-family-dropdownlist.component.mjs

@@ -0,0 +1,57 @@
+/**-----------------------------------------------------------------------------------------
+* 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 { DropDownListBase } from '../shared/spreadsheet-dropdownlist.base';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-dropdowns";
+import * as i2 from "@angular/common";
+/**
+ * @hidden
+ */
+export class FontFamilyDropDownListComponent extends DropDownListBase {
+}
+FontFamilyDropDownListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FontFamilyDropDownListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+FontFamilyDropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: FontFamilyDropDownListComponent, selector: "kendo-spreadsheet-fontfamily-dropdownlist", usesInheritance: true, ngImport: i0, template: `
+        <kendo-dropdownlist
+            #element
+            [data]="data"
+            [(value)]="value"
+            [attr.title]="title"
+            [tabindex]="tabindex"
+            (valueChange)="onValueChange($event)"
+            [leftRightArrowsNavigation]="false"
+            [fillMode]="fillMode"
+            [attr.title]="title">
+            <ng-template kendoDropDownListItemTemplate let-dataItem>
+                <span [ngStyle]="{ 'font-family': dataItem }">
+                    {{ dataItem }}
+                </span>
+            </ng-template>
+        </kendo-dropdownlist>
+    `, isInline: true, components: [{ type: i1.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["showStickyHeader", "iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], directives: [{ type: i1.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FontFamilyDropDownListComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-spreadsheet-fontfamily-dropdownlist',
+                    template: `
+        <kendo-dropdownlist
+            #element
+            [data]="data"
+            [(value)]="value"
+            [attr.title]="title"
+            [tabindex]="tabindex"
+            (valueChange)="onValueChange($event)"
+            [leftRightArrowsNavigation]="false"
+            [fillMode]="fillMode"
+            [attr.title]="title">
+            <ng-template kendoDropDownListItemTemplate let-dataItem>
+                <span [ngStyle]="{ 'font-family': dataItem }">
+                    {{ dataItem }}
+                </span>
+            </ng-template>
+        </kendo-dropdownlist>
+    `
+                }]
+        }] });

package/esm2020/tools/font-family/spreadsheet-fontfamily-tool.component.mjs

@@ -0,0 +1,92 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, forwardRef, Inject } from '@angular/core';
+import { ToolBarComponent, ToolBarToolComponent } from '@progress/kendo-angular-toolbar';
+import { SpreadsheetLocalizationService } from '../../localization/spreadsheet-localization.service';
+import { SpreadsheetService } from '../../common/spreadsheet.service';
+import { SpreadsheetToolsService } from '../tools.service';
+import { SpreadsheetDropDownToolBase } from '../shared/spreadsheet-dropdown-tools-base';
+import { DialogService } from '@progress/kendo-angular-dialog';
+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 "./font-family-dropdownlist.component";
+import * as i6 from "@progress/kendo-angular-icons";
+import * as i7 from "@angular/common";
+import * as i8 from "@progress/kendo-angular-toolbar";
+/**
+ * A component which configures an existing `DropDownListComponent` as a Spreadsheet tool
+ * ([see example](ToDo).
+ * The component associates a `kendo-toolbar-dropdownlist` with a Spreadsheet command that changes the font family of a content block and
+ * automatically defines the options of the drop-down list and sets its values ([see example](ToDo).
+ *
+ * @hidden
+ */
+export class SpreadsheetFontFamilyComponent extends SpreadsheetDropDownToolBase {
+    constructor(dialogService, localization, spreadsheetService, toolsService, toolbar) {
+        super('fontFamily', dialogService, localization, spreadsheetService, toolsService, toolbar);
+    }
+}
+SpreadsheetFontFamilyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetFontFamilyComponent, deps: [{ token: i1.DialogService }, { token: i2.SpreadsheetLocalizationService }, { token: i3.SpreadsheetService }, { token: i4.SpreadsheetToolsService }, { token: ToolBarComponent }], target: i0.ɵɵFactoryTarget.Component });
+SpreadsheetFontFamilyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SpreadsheetFontFamilyComponent, selector: "kendo-toolbar-dropdownlist[kendoSpreadsheetFontFamily]", providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => SpreadsheetFontFamilyComponent) }], usesInheritance: true, ngImport: i0, template: `
+        <ng-template #toolbarTemplate>
+            <kendo-spreadsheet-fontfamily-dropdownlist
+                #element
+                [data]="data"
+                [(value)]="value"
+                [title]="messageFor(command)"
+                [tabindex]="tabindex"
+                (valueChange)="onValueChange($event)"></kendo-spreadsheet-fontfamily-dropdownlist>
+        </ng-template>
+        <ng-template #popupTemplate>
+            <div #popupButton
+                [tabindex]="tabindex"
+                role="menuitem"
+                class="k-item k-menu-item"
+                (click)="openDialog()">
+                <span
+                    class="k-link k-menu-link">
+                    <kendo-icon-wrapper [name]="icon" [svgIcon]="svgIcon"></kendo-icon-wrapper>
+                    <span *ngIf="messageFor(command)" class="k-menu-link-text">{{messageFor(command)}}</span>
+                </span>
+            </div>
+        </ng-template>
+    `, isInline: true, components: [{ type: i5.FontFamilyDropDownListComponent, selector: "kendo-spreadsheet-fontfamily-dropdownlist" }, { type: i6.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpreadsheetFontFamilyComponent, decorators: [{
+            type: Component,
+            args: [{
+                    providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => SpreadsheetFontFamilyComponent) }],
+                    selector: 'kendo-toolbar-dropdownlist[kendoSpreadsheetFontFamily]',
+                    template: `
+        <ng-template #toolbarTemplate>
+            <kendo-spreadsheet-fontfamily-dropdownlist
+                #element
+                [data]="data"
+                [(value)]="value"
+                [title]="messageFor(command)"
+                [tabindex]="tabindex"
+                (valueChange)="onValueChange($event)"></kendo-spreadsheet-fontfamily-dropdownlist>
+        </ng-template>
+        <ng-template #popupTemplate>
+            <div #popupButton
+                [tabindex]="tabindex"
+                role="menuitem"
+                class="k-item k-menu-item"
+                (click)="openDialog()">
+                <span
+                    class="k-link k-menu-link">
+                    <kendo-icon-wrapper [name]="icon" [svgIcon]="svgIcon"></kendo-icon-wrapper>
+                    <span *ngIf="messageFor(command)" class="k-menu-link-text">{{messageFor(command)}}</span>
+                </span>
+            </div>
+        </ng-template>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.DialogService }, { type: i2.SpreadsheetLocalizationService }, { type: i3.SpreadsheetService }, { type: i4.SpreadsheetToolsService }, { type: i8.ToolBarComponent, decorators: [{
+                    type: Inject,
+                    args: [ToolBarComponent]
+                }] }]; } });