@progress/kendo-angular-editor 21.4.1 → 22.0.0-develop.1

package/esm2022/tools/fontfamily/editor-fontfamily.component.mjs

@@ -1,297 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-import { Component, ViewChild, ElementRef, forwardRef, Input, Output, EventEmitter, Renderer2 } from '@angular/core';
-import { ToolBarToolComponent } from '@progress/kendo-angular-toolbar';
-import { DialogService } from '@progress/kendo-angular-dialog';
-import { fontFamilyIcon } from '@progress/kendo-svg-icons';
-import { IconWrapperComponent } from '@progress/kendo-angular-icons';
-import { outerWidth, isPresent, getUniqueStyleValues } from '../../util';
-import { EditorLocalizationService } from '../../localization/editor-localization.service';
-import { FontFamilyDialogComponent } from '../../dialogs/font-family-dialog.component';
-import { FontFamilyDropDownListComponent } from './editor-fontfamily-dropdownlist.component';
-import { ProviderService } from '../../common/provider.service';
-import { EditorToolsService } from '../tools.service';
-import * as i0 from "@angular/core";
-import * as i1 from "@progress/kendo-angular-dialog";
-import * as i2 from "../../localization/editor-localization.service";
-import * as i3 from "../../common/provider.service";
-import * as i4 from "../tools.service";
-/**
- * Configures a DropDownListComponent as an Editor tool ([see example]({% slug toolbartools_editor %}#toc-built-in-tools)).
- * Use this component to associate a kendo-toolbar-dropdownlist with an Editor command that changes the font family of a content block.
- * The component automatically sets the options and values of the drop-down list ([see example]({% slug toolbartools_editor %}#toc-dropdownlists)).
- *
- * @example
- * ```html
- * <kendo-editor>
- *   <kendo-toolbar>
- *      <kendo-toolbar-dropdownlist kendoEditorFontFamily></kendo-toolbar-dropdownlist>
- *  </kendo-toolbar>
- * </kendo-editor>
- * ```
- */
-export class EditorFontFamilyComponent extends ToolBarToolComponent {
-    dialogService;
-    localization;
-    toolsService;
-    renderer;
-    value;
-    disabled = false;
-    tabindex = -1;
-    /**
-     * Overrides the default font list.
-     */
-    set data(fonts) {
-        this._data = fonts || this._data;
-    }
-    get data() {
-        return this._data;
-    }
-    /**
-     * Fires when the user updates the value of the drop-down list.
-     */
-    valueChange = new EventEmitter();
-    element;
-    fontFamilyDropDownList;
-    fontFamilyButton;
-    /**
-     * @hidden
-     */
-    defaultItem;
-    /**
-     * @hidden
-     */
-    itemDisabled;
-    fontFamilySVGIcon = fontFamilyIcon;
-    subs;
-    editor;
-    _data = [
-        { text: 'Arial', fontName: 'Arial,"Helvetica Neue",Helvetica,sans-serif' },
-        { text: 'Courier New', fontName: '"Courier New",Courier,"Lucida Sans Typewriter","Lucida Typewriter",monospace' },
-        { text: 'Georgia', fontName: 'Georgia,Times,"Times New Roman",serif' },
-        {
-            fontName: 'Impact,Haettenschweiler,"Franklin Gothic Bold",Charcoal,"Helvetica Inserat","Bitstream Vera Sans Bold","Arial Black","sans serif"',
-            text: 'Impact'
-        },
-        { text: 'Lucida Console', fontName: '"Lucida Console","Lucida Sans Typewriter",monaco,"Bitstream Vera Sans Mono",monospace' },
-        { text: 'Tahoma', fontName: 'Tahoma,Verdana,Segoe,sans-serif' },
-        { text: 'Times New Roman', fontName: 'TimesNewRoman,"Times New Roman",Times,Baskerville,Georgia,serif' },
-        { text: 'Trebuchet MS', fontName: '"Trebuchet MS","Lucida Grande","Lucida Sans Unicode","Lucida Sans",Tahoma,sans-serif' },
-        { text: 'Verdana', fontName: 'Verdana,Geneva,sans-serif' }
-    ];
-    constructor(dialogService, localization, providerService, toolsService, renderer) {
-        super();
-        this.dialogService = dialogService;
-        this.localization = localization;
-        this.toolsService = toolsService;
-        this.renderer = renderer;
-        this.editor = providerService.editor;
-        this.isBuiltInTool = true;
-    }
-    ngOnInit() {
-        this.itemDisabled = (itemArgs) => {
-            if (!this.overflows && this.fontFamilyDropDownList && !this.fontFamilyDropDownList.dropDownList.isOpen) {
-                return true; //disable all items in order to prevent navigation when DDL is closed
-            }
-            else {
-                return itemArgs.dataItem.fontName === null;
-            }
-        };
-        setTimeout(() => {
-            this.defaultItem = { text: this.title, fontName: null };
-            this.toolsService.needsCheck.next(undefined);
-        });
-        this.subs = this.editor.stateChange.subscribe(({ style }) => {
-            this.value = getUniqueStyleValues(style.selected, 'font-family') || null;
-            this.disabled = style.disabled;
-        });
-    }
-    /**
-     * @hidden
-     */
-    onValueChange(ev) {
-        if (isPresent(ev)) {
-            this.editor.exec('fontFamily', ev);
-            this.editor.view.focus();
-            this.valueChange.emit(this.data.find(f => f.fontName === ev));
-        }
-    }
-    ngOnDestroy() {
-        if (this.subs) {
-            this.subs.unsubscribe();
-        }
-    }
-    get outerWidth() {
-        if (this.element) {
-            return outerWidth(this.element.nativeElement);
-        }
-    }
-    get title() {
-        return this.localization.get('fontFamily');
-    }
-    /**
-     * @hidden
-     */
-    openDialog() {
-        const dialogSettings = {
-            appendTo: this.editor.dialogContainer,
-            content: FontFamilyDialogComponent,
-            width: 400,
-            autoFocusedElement: '.k-picker'
-        };
-        this.editor.toolbar.toggle(false);
-        const dialogContent = this.dialogService.open(dialogSettings).content.instance;
-        this.renderer.addClass(dialogContent.dialog.dialog.instance.wrapper.nativeElement.querySelector('.k-window'), 'k-editor-window');
-        dialogContent.setData({
-            editor: this.editor,
-            data: this.data,
-            defaultItem: this.defaultItem,
-            value: this.value,
-            itemDisabled: this.itemDisabled
-        });
-    }
-    /**
-     * @hidden
-     */
-    canFocus() {
-        return !this.disabled;
-    }
-    /**
-     * @hidden
-     */
-    focus() {
-        this.tabindex = 0;
-        if (this.overflows) {
-            this.fontFamilyButton?.nativeElement.focus();
-        }
-        else {
-            this.fontFamilyDropDownList?.focus();
-        }
-    }
-    /**
-     * @hidden
-     */
-    handleKey() {
-        this.tabindex = -1;
-        return false;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EditorFontFamilyComponent, deps: [{ token: i1.DialogService }, { token: i2.EditorLocalizationService }, { token: i3.ProviderService }, { token: i4.EditorToolsService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: EditorFontFamilyComponent, isStandalone: true, selector: "kendo-toolbar-dropdownlist[kendoEditorFontFamily]", inputs: { data: "data" }, outputs: { valueChange: "valueChange" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => EditorFontFamilyComponent) }], viewQueries: [{ propertyName: "element", first: true, predicate: ["element"], descendants: true }, { propertyName: "fontFamilyDropDownList", first: true, predicate: ["element"], descendants: true, read: FontFamilyDropDownListComponent }, { propertyName: "fontFamilyButton", first: true, predicate: ["fontFamilyButton"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: `
-        <ng-template #toolbarTemplate>
-          <kendo-editor-fontfamily-dropdownlist
-            #element
-            [defaultItem]="defaultItem"
-            [data]="data"
-            [(value)]="value"
-            [itemDisabled]="itemDisabled"
-            [title]="title"
-            [disabled]="disabled"
-            [tabindex]="tabindex"
-            (valueChange)="onValueChange($event)"
-            >
-          </kendo-editor-fontfamily-dropdownlist>
-        </ng-template>
-        <ng-template #popupTemplate>
-          <div #fontFamilyButton
-            tabindex="-1"
-            role="menuitem"
-            class="k-item k-menu-item"
-            [class.k-disabled]="disabled"
-            [tabindex]="tabindex"
-            (click)="openDialog()">
-            <span
-              class="k-link k-menu-link">
-              <kendo-icon-wrapper name="font-family" [svgIcon]="fontFamilySVGIcon"></kendo-icon-wrapper>
-              @if (title) {
-                <span class="k-menu-link-text">{{title}}</span>
-              }
-            </span>
-          </div>
-        </ng-template>
-        <ng-template #sectionTemplate>
-          <kendo-editor-fontfamily-dropdownlist
-            #element
-            [defaultItem]="defaultItem"
-            [data]="data"
-            [(value)]="value"
-            [itemDisabled]="itemDisabled"
-            [title]="title"
-            [disabled]="disabled"
-            [tabindex]="tabindex"
-            (valueChange)="onValueChange($event)"
-            >
-          </kendo-editor-fontfamily-dropdownlist>
-        </ng-template>
-        `, isInline: true, dependencies: [{ kind: "component", type: FontFamilyDropDownListComponent, selector: "kendo-editor-fontfamily-dropdownlist", inputs: ["data", "value", "defaultItem", "itemDisabled", "title", "disabled", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EditorFontFamilyComponent, decorators: [{
-            type: Component,
-            args: [{
-                    providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => EditorFontFamilyComponent) }],
-                    selector: 'kendo-toolbar-dropdownlist[kendoEditorFontFamily]',
-                    template: `
-        <ng-template #toolbarTemplate>
-          <kendo-editor-fontfamily-dropdownlist
-            #element
-            [defaultItem]="defaultItem"
-            [data]="data"
-            [(value)]="value"
-            [itemDisabled]="itemDisabled"
-            [title]="title"
-            [disabled]="disabled"
-            [tabindex]="tabindex"
-            (valueChange)="onValueChange($event)"
-            >
-          </kendo-editor-fontfamily-dropdownlist>
-        </ng-template>
-        <ng-template #popupTemplate>
-          <div #fontFamilyButton
-            tabindex="-1"
-            role="menuitem"
-            class="k-item k-menu-item"
-            [class.k-disabled]="disabled"
-            [tabindex]="tabindex"
-            (click)="openDialog()">
-            <span
-              class="k-link k-menu-link">
-              <kendo-icon-wrapper name="font-family" [svgIcon]="fontFamilySVGIcon"></kendo-icon-wrapper>
-              @if (title) {
-                <span class="k-menu-link-text">{{title}}</span>
-              }
-            </span>
-          </div>
-        </ng-template>
-        <ng-template #sectionTemplate>
-          <kendo-editor-fontfamily-dropdownlist
-            #element
-            [defaultItem]="defaultItem"
-            [data]="data"
-            [(value)]="value"
-            [itemDisabled]="itemDisabled"
-            [title]="title"
-            [disabled]="disabled"
-            [tabindex]="tabindex"
-            (valueChange)="onValueChange($event)"
-            >
-          </kendo-editor-fontfamily-dropdownlist>
-        </ng-template>
-        `,
-                    standalone: true,
-                    imports: [FontFamilyDropDownListComponent, IconWrapperComponent]
-                }]
-        }], ctorParameters: () => [{ type: i1.DialogService }, { type: i2.EditorLocalizationService }, { type: i3.ProviderService }, { type: i4.EditorToolsService }, { type: i0.Renderer2 }], propDecorators: { data: [{
-                type: Input
-            }], valueChange: [{
-                type: Output
-            }], element: [{
-                type: ViewChild,
-                args: ['element']
-            }], fontFamilyDropDownList: [{
-                type: ViewChild,
-                args: ['element', { read: FontFamilyDropDownListComponent, static: false }]
-            }], fontFamilyButton: [{
-                type: ViewChild,
-                args: ['fontFamilyButton', { read: ElementRef }]
-            }] } });

package/esm2022/tools/fontsize/editor-fontsize-dropdownlist.component.mjs

@@ -1,98 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-import { Component, ViewChild, Input, ElementRef, Output, EventEmitter } from '@angular/core';
-import { DropDownListComponent } from '@progress/kendo-angular-dropdowns';
-import { DropDownToolDirective } from '../shared/dropdown-tool.directive';
-import * as i0 from "@angular/core";
-/**
- * @hidden
- */
-export class FontSizeDropDownListComponent {
-    data;
-    value;
-    defaultItem;
-    itemDisabled;
-    title;
-    disabled;
-    tabindex;
-    valueChange = new EventEmitter();
-    element;
-    dropDownList;
-    onValueChange(size) {
-        this.valueChange.emit(size);
-    }
-    focus() {
-        this.dropDownList.focus();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FontSizeDropDownListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FontSizeDropDownListComponent, isStandalone: true, selector: "kendo-editor-fontsize-dropdownlist", inputs: { data: "data", value: "value", defaultItem: "defaultItem", itemDisabled: "itemDisabled", title: "title", disabled: "disabled", tabindex: "tabindex" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "element", first: true, predicate: ["element"], descendants: true, static: true }, { propertyName: "dropDownList", first: true, predicate: ["element"], descendants: true, read: DropDownListComponent, static: true }], ngImport: i0, template: `
-        <kendo-dropdownlist
-            #element
-            kendoEditorDropDownTool
-            [defaultItem]="defaultItem"
-            [textField]="'text'"
-            [valueField]="'size'"
-            [data]="data"
-            [(value)]="value"
-            [valuePrimitive]="true"
-            [itemDisabled]="itemDisabled"
-            [attr.title]="title"
-            [disabled]="disabled"
-            [tabindex]="tabindex"
-            (valueChange)="onValueChange($event)"
-            [style.width.em]="13"
-        >
-        </kendo-dropdownlist>
-    `, isInline: true, dependencies: [{ kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "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"] }, { kind: "directive", type: DropDownToolDirective, selector: "[kendoEditorDropDownTool]" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FontSizeDropDownListComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'kendo-editor-fontsize-dropdownlist',
-                    template: `
-        <kendo-dropdownlist
-            #element
-            kendoEditorDropDownTool
-            [defaultItem]="defaultItem"
-            [textField]="'text'"
-            [valueField]="'size'"
-            [data]="data"
-            [(value)]="value"
-            [valuePrimitive]="true"
-            [itemDisabled]="itemDisabled"
-            [attr.title]="title"
-            [disabled]="disabled"
-            [tabindex]="tabindex"
-            (valueChange)="onValueChange($event)"
-            [style.width.em]="13"
-        >
-        </kendo-dropdownlist>
-    `,
-                    standalone: true,
-                    imports: [DropDownListComponent, DropDownToolDirective]
-                }]
-        }], propDecorators: { data: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], defaultItem: [{
-                type: Input
-            }], itemDisabled: [{
-                type: Input
-            }], title: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], tabindex: [{
-                type: Input
-            }], valueChange: [{
-                type: Output
-            }], element: [{
-                type: ViewChild,
-                args: ['element', { static: true }]
-            }], dropDownList: [{
-                type: ViewChild,
-                args: ['element', { read: DropDownListComponent, static: true }]
-            }] } });