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

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

@@ -1,305 +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, Input, ViewChild, ElementRef, forwardRef, Output, EventEmitter, Renderer2 } from '@angular/core';
-import { ToolBarToolComponent } from '@progress/kendo-angular-toolbar';
-import { fontSizeIcon } from '@progress/kendo-svg-icons';
-import { IconWrapperComponent } from '@progress/kendo-angular-icons';
-import { DialogService } from '@progress/kendo-angular-dialog';
-import { outerWidth, isPresent, getUniqueStyleValues } from '../../util';
-import { EditorLocalizationService } from '../../localization/editor-localization.service';
-import { FontSizeDialogComponent } from '../../dialogs/font-size-dialog.component';
-import { FontSizeDropDownListComponent } from './editor-fontsize-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-dropdownlist` with an Editor command that changes the font size 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 kendoEditorFontSize></kendo-toolbar-dropdownlist>
- *  </kendo-toolbar>
- * </kendo-editor>
- * ```
- */
-export class EditorFontSizeComponent extends ToolBarToolComponent {
-    dialogService;
-    localization;
-    toolsService;
-    renderer;
-    value;
-    disabled = false;
-    tabindex = -1;
-    /**
-     * Overrides the default font size list.
-     * Treat numeric values as pixels.
-     */
-    set data(sizes) {
-        let normalizedSizes;
-        if (sizes) {
-            normalizedSizes = sizes.map(s => {
-                if (typeof s.size === 'number') {
-                    return { ...s, size: `${s.size}px` };
-                }
-                return s;
-            });
-        }
-        this._data = normalizedSizes || this._data;
-    }
-    get data() {
-        return this._data;
-    }
-    /**
-     * Fires when the user updates the value of the drop-down list.
-     */
-    valueChange = new EventEmitter();
-    element;
-    fontSizeDropDownList;
-    fontSizeButton;
-    /**
-     * @hidden
-     */
-    defaultItem;
-    fontSizeSVGIcon = fontSizeIcon;
-    /**
-     * @hidden
-     */
-    itemDisabled;
-    subs;
-    editor;
-    _data = [
-        { text: '8px', size: '8px' },
-        { text: '10px', size: '10px' },
-        { text: '12px', size: '12px' },
-        { text: '14px', size: '14px' },
-        { text: '18px', size: '18px' },
-        { text: '24px', size: '24px' },
-        { text: '36px', size: '36px' }
-    ];
-    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.fontSizeDropDownList && !this.fontSizeDropDownList.dropDownList.isOpen) {
-                return true; //disable all items in order to prevent navigation when DDL is closed
-            }
-            else {
-                return itemArgs.dataItem.size === null;
-            }
-        };
-        setTimeout(() => {
-            this.defaultItem = { text: this.title, size: null };
-            this.toolsService.needsCheck.next(undefined);
-        });
-        this.subs = this.editor.stateChange.subscribe(({ style }) => {
-            // remove units(px, em, rem...)
-            // string#match returns array
-            this.value = getUniqueStyleValues(style.selected, 'font-size') || null;
-            this.disabled = style.disabled;
-        });
-    }
-    /**
-     * @hidden
-     */
-    onValueChange(ev) {
-        if (isPresent(ev)) {
-            this.editor.exec('fontSize', ev);
-            this.editor.view.focus();
-            this.valueChange.emit(this.data.find(d => d.size === ev));
-        }
-    }
-    ngOnDestroy() {
-        if (this.subs) {
-            this.subs.unsubscribe();
-        }
-    }
-    get outerWidth() {
-        if (this.element) {
-            return outerWidth(this.element.nativeElement);
-        }
-    }
-    get title() {
-        return this.localization.get('fontSize');
-    }
-    /**
-     * @hidden
-     */
-    openDialog() {
-        const dialogSettings = {
-            appendTo: this.editor.dialogContainer,
-            content: FontSizeDialogComponent,
-            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.fontSizeButton?.nativeElement.focus();
-        }
-        else {
-            this.fontSizeDropDownList?.focus();
-        }
-    }
-    /**
-     * @hidden
-     */
-    handleKey() {
-        this.tabindex = -1;
-        return false;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EditorFontSizeComponent, 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: EditorFontSizeComponent, isStandalone: true, selector: "kendo-toolbar-dropdownlist[kendoEditorFontSize]", inputs: { data: "data" }, outputs: { valueChange: "valueChange" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => EditorFontSizeComponent) }], viewQueries: [{ propertyName: "element", first: true, predicate: ["element"], descendants: true }, { propertyName: "fontSizeDropDownList", first: true, predicate: ["element"], descendants: true, read: FontSizeDropDownListComponent }, { propertyName: "fontSizeButton", first: true, predicate: ["fontSizeButton"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: `
-        <ng-template #toolbarTemplate>
-          <kendo-editor-fontsize-dropdownlist
-            #element
-            [defaultItem]="defaultItem"
-            [data]="data"
-            [(value)]="value"
-            [itemDisabled]="itemDisabled"
-            [title]="title"
-            [disabled]="disabled"
-            [tabindex]="tabindex"
-            (valueChange)="onValueChange($event)"
-            >
-          </kendo-editor-fontsize-dropdownlist>
-        </ng-template>
-        <ng-template #popupTemplate>
-          <div #fontSizeButton
-            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-size" [svgIcon]="fontSizeSVGIcon"></kendo-icon-wrapper>
-              @if (title) {
-                <span class="k-menu-link-text">{{title}}</span>
-              }
-            </span>
-          </div>
-        </ng-template>
-        <ng-template #sectionTemplate>
-          <kendo-editor-fontsize-dropdownlist
-            #element
-            [defaultItem]="defaultItem"
-            [data]="data"
-            [(value)]="value"
-            [itemDisabled]="itemDisabled"
-            [title]="title"
-            [disabled]="disabled"
-            [tabindex]="tabindex"
-            (valueChange)="onValueChange($event)"
-            >
-          </kendo-editor-fontsize-dropdownlist>
-        </ng-template>
-        `, isInline: true, dependencies: [{ kind: "component", type: FontSizeDropDownListComponent, selector: "kendo-editor-fontsize-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: EditorFontSizeComponent, decorators: [{
-            type: Component,
-            args: [{
-                    providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => EditorFontSizeComponent) }],
-                    selector: 'kendo-toolbar-dropdownlist[kendoEditorFontSize]',
-                    template: `
-        <ng-template #toolbarTemplate>
-          <kendo-editor-fontsize-dropdownlist
-            #element
-            [defaultItem]="defaultItem"
-            [data]="data"
-            [(value)]="value"
-            [itemDisabled]="itemDisabled"
-            [title]="title"
-            [disabled]="disabled"
-            [tabindex]="tabindex"
-            (valueChange)="onValueChange($event)"
-            >
-          </kendo-editor-fontsize-dropdownlist>
-        </ng-template>
-        <ng-template #popupTemplate>
-          <div #fontSizeButton
-            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-size" [svgIcon]="fontSizeSVGIcon"></kendo-icon-wrapper>
-              @if (title) {
-                <span class="k-menu-link-text">{{title}}</span>
-              }
-            </span>
-          </div>
-        </ng-template>
-        <ng-template #sectionTemplate>
-          <kendo-editor-fontsize-dropdownlist
-            #element
-            [defaultItem]="defaultItem"
-            [data]="data"
-            [(value)]="value"
-            [itemDisabled]="itemDisabled"
-            [title]="title"
-            [disabled]="disabled"
-            [tabindex]="tabindex"
-            (valueChange)="onValueChange($event)"
-            >
-          </kendo-editor-fontsize-dropdownlist>
-        </ng-template>
-        `,
-                    standalone: true,
-                    imports: [FontSizeDropDownListComponent, 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']
-            }], fontSizeDropDownList: [{
-                type: ViewChild,
-                args: ['element', { read: FontSizeDropDownListComponent, static: false }]
-            }], fontSizeButton: [{
-                type: ViewChild,
-                args: ['fontSizeButton', { read: ElementRef }]
-            }] } });

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

@@ -1,182 +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, ItemTemplateDirective } from '@progress/kendo-angular-dropdowns';
-import { DropDownToolDirective } from '../shared/dropdown-tool.directive';
-import * as i0 from "@angular/core";
-/**
- * @hidden
- */
-export class FormatDropDownListComponent {
-    data;
-    value;
-    defaultItem;
-    itemDisabled;
-    title;
-    disabled;
-    tabindex;
-    valueChange = new EventEmitter();
-    element;
-    dropDownList;
-    onValueChange(tag) {
-        this.valueChange.emit(tag);
-    }
-    focus() {
-        this.dropDownList.focus();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormatDropDownListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: FormatDropDownListComponent, isStandalone: true, selector: "kendo-editor-format-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]="'tag'"
-          [data]="data"
-          [(value)]="value"
-          [valuePrimitive]="true"
-          [itemDisabled]="itemDisabled"
-          [attr.title]="title"
-          [disabled]="disabled"
-          [tabindex]="tabindex"
-          (valueChange)="onValueChange($event)"
-          [style.width.em]="13"
-          >
-          <ng-template kendoDropDownListItemTemplate let-dataItem>
-            @switch (dataItem.tag) {
-              @case ('h1') {
-                <span [style]="'display: block; font-size: 2em; margin-left: 0; font-weight: bold;'">
-                  {{ dataItem.text }}
-                </span>
-              }
-              @case ('h2') {
-                <span [style]="'display: block; font-size: 1.5em; margin-left: 0; font-weight: bold;'">
-                  {{ dataItem.text }}
-                </span>
-              }
-              @case ('h3') {
-                <span [style]="'display: block; font-size: 1.17em; margin-left: 0; font-weight: bold;'">
-                  {{ dataItem.text }}
-                </span>
-              }
-              @case ('h4') {
-                <span [style]="'display: block; font-size: 1em; margin-left: 0; font-weight: bold;'">
-                  {{ dataItem.text }}
-                </span>
-              }
-              @case ('h5') {
-                <span [style]="'display: block; font-size: .83em; margin-left: 0; font-weight: bold;'">
-                  {{ dataItem.text }}
-                </span>
-              }
-              @case ('h6') {
-                <span [style]="'display: block; font-size: .67em; margin-left: 0; font-weight: bold;'">
-                  {{ dataItem.text }}
-                </span>
-              }
-              @case ('p') {
-                <span [style]="'display: block; margin-left: 0;'">
-                  {{ dataItem.text }}
-                </span>
-              }
-              @default {
-                <span>{{ dataItem.text }}</span>
-              }
-            }
-          </ng-template>
-        </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]" }, { kind: "directive", type: ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormatDropDownListComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'kendo-editor-format-dropdownlist',
-                    template: `
-        <kendo-dropdownlist
-          #element
-          kendoEditorDropDownTool
-          [defaultItem]="defaultItem"
-          [textField]="'text'"
-          [valueField]="'tag'"
-          [data]="data"
-          [(value)]="value"
-          [valuePrimitive]="true"
-          [itemDisabled]="itemDisabled"
-          [attr.title]="title"
-          [disabled]="disabled"
-          [tabindex]="tabindex"
-          (valueChange)="onValueChange($event)"
-          [style.width.em]="13"
-          >
-          <ng-template kendoDropDownListItemTemplate let-dataItem>
-            @switch (dataItem.tag) {
-              @case ('h1') {
-                <span [style]="'display: block; font-size: 2em; margin-left: 0; font-weight: bold;'">
-                  {{ dataItem.text }}
-                </span>
-              }
-              @case ('h2') {
-                <span [style]="'display: block; font-size: 1.5em; margin-left: 0; font-weight: bold;'">
-                  {{ dataItem.text }}
-                </span>
-              }
-              @case ('h3') {
-                <span [style]="'display: block; font-size: 1.17em; margin-left: 0; font-weight: bold;'">
-                  {{ dataItem.text }}
-                </span>
-              }
-              @case ('h4') {
-                <span [style]="'display: block; font-size: 1em; margin-left: 0; font-weight: bold;'">
-                  {{ dataItem.text }}
-                </span>
-              }
-              @case ('h5') {
-                <span [style]="'display: block; font-size: .83em; margin-left: 0; font-weight: bold;'">
-                  {{ dataItem.text }}
-                </span>
-              }
-              @case ('h6') {
-                <span [style]="'display: block; font-size: .67em; margin-left: 0; font-weight: bold;'">
-                  {{ dataItem.text }}
-                </span>
-              }
-              @case ('p') {
-                <span [style]="'display: block; margin-left: 0;'">
-                  {{ dataItem.text }}
-                </span>
-              }
-              @default {
-                <span>{{ dataItem.text }}</span>
-              }
-            }
-          </ng-template>
-        </kendo-dropdownlist>
-        `,
-                    standalone: true,
-                    imports: [DropDownListComponent, DropDownToolDirective, ItemTemplateDirective]
-                }]
-        }], 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 }]
-            }] } });