@progress/kendo-angular-inputs 13.2.1-develop.11 → 13.2.1-develop.13

package/colorpicker/color-input.component.d.ts

@@ -0,0 +1,95 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { OnChanges, SimpleChanges, EventEmitter, ElementRef, AfterViewInit, Renderer2 } from '@angular/core';
+import { RGBA } from './models';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { NumericTextBoxComponent } from './../numerictextbox/numerictextbox.component';
+import { SVGIcon } from '@progress/kendo-svg-icons';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export declare class ColorInputComponent implements AfterViewInit, OnChanges {
+    private host;
+    private renderer;
+    localizationService: LocalizationService;
+    /**
+     * The id of the hex input.
+     */
+    focusableId: string;
+    /**
+     * The color format view.
+     */
+    formatView: string;
+    /**
+     * The inputs tabindex.
+     */
+    tabindex: number;
+    /**
+     * The color value that will be parsed and populate the hex & rgba inputs.
+     * Required input property.
+     */
+    value: string;
+    /**
+     * Sets whether the alpha slider will be shown.
+     */
+    opacity: boolean;
+    /**
+     * Sets the disabled state of the ColorInput.
+     */
+    disabled: boolean;
+    /**
+     * Sets the read-only state of the ColorInput.
+     */
+    readonly: boolean;
+    /**
+     * Emits a parsed rgba string color.
+     */
+    valueChange: EventEmitter<string>;
+    /**
+     * Emits when the user tabs out of the last focusable input.
+     */
+    tabOut: EventEmitter<any>;
+    colorInputClass: boolean;
+    opacityInput: NumericTextBoxComponent;
+    hexInput: ElementRef;
+    blueInput: NumericTextBoxComponent;
+    toggleFormatButton: ElementRef;
+    /**
+     * The rgba inputs values.
+     */
+    rgba: RGBA;
+    hex: string;
+    /**
+     * Indicates whether any of the inputs are focused.
+     */
+    private get isFocused();
+    /**
+     * Indicates whether any of the rgba inputs have value.
+     */
+    private get rgbaInputValid();
+    /**
+     * @hidden
+     */
+    caretAltExpandIcon: SVGIcon;
+    private subscriptions;
+    constructor(host: ElementRef, renderer: Renderer2, localizationService: LocalizationService);
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    get formatButtonTitle(): string;
+    handleRgbaValueChange(): void;
+    focusDragHandle(event: any): void;
+    handleHexValueChange(hex: string): void;
+    handleRgbaInputBlur(): void;
+    handleHexInputBlur(): void;
+    focusLast(): void;
+    onTab(): void;
+    private toggleFormatView;
+    private initDomEvents;
+    private lastInput;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ColorInputComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ColorInputComponent, "kendo-colorinput", never, { "focusableId": "focusableId"; "formatView": "formatView"; "tabindex": "tabindex"; "value": "value"; "opacity": "opacity"; "disabled": "disabled"; "readonly": "readonly"; }, { "valueChange": "valueChange"; "tabOut": "tabOut"; }, never, never>;
+}

package/colorpicker/color-palette.component.d.ts

@@ -0,0 +1,221 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { OnInit, EventEmitter, SimpleChanges, OnChanges, OnDestroy, ChangeDetectorRef, Renderer2, ElementRef, AfterViewInit, NgZone } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { TileSize, OutputFormat, TableCell } from './models';
+import { ColorPaletteService } from './services/color-palette.service';
+import * as i0 from "@angular/core";
+/**
+ * The ColorPalette component provides a set of predefined palette presets and enables you to implement a custom color palette.
+ * The ColorPalette is independently used by `kendo-colorpicker` and can be directly added to the page.
+ */
+export declare class ColorPaletteComponent implements OnInit, AfterViewInit, OnDestroy, OnChanges, ControlValueAccessor {
+    host: ElementRef;
+    private service;
+    private cdr;
+    private renderer;
+    private localizationService;
+    private ngZone;
+    /**
+     * @hidden
+     */
+    direction: string;
+    /**
+     * @hidden
+     */
+    role: string;
+    /**
+     * @hidden
+     */
+    get activeDescendant(): string;
+    /**
+     * @hidden
+     */
+    get paletteId(): string;
+    /**
+     * @hidden
+     */
+    id: string;
+    /**
+     * Specifies the output format of the ColorPaletteComponent.
+     * The input value may be in a different format. However, it will be parsed into the output `format`
+     * after the component processes it.
+     *
+     * The supported values are:
+     * * (Default) `hex`
+     * * `rgba`
+     * * `name`
+     */
+    format: OutputFormat;
+    /**
+     * Specifies the value of the initially selected color.
+     */
+    set value(value: string);
+    get value(): string;
+    /**
+     * Specifies the number of columns that will be displayed.
+     * Defaults to `10`.
+     */
+    set columns(value: number);
+    get columns(): number;
+    /**
+     * The color palette that will be displayed.
+     *
+     * The supported values are:
+     * * The name of the predefined palette preset (for example, `office`, `basic`, and `apex`).
+     * * A string with comma-separated colors.
+     * * A string array.
+     */
+    set palette(value: string | Array<string>);
+    get palette(): string | Array<string>;
+    /**
+     * Specifies the [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
+     */
+    set tabindex(value: number);
+    get tabindex(): number;
+    /**
+     * Sets the disabled state of the ColorPalette.
+     */
+    disabled: boolean;
+    /**
+     * Sets the read-only state of the ColorPalette.
+     */
+    readonly: boolean;
+    /**
+     * Specifies the size of a color cell.
+     *
+     * The possible values are:
+     * * (Default) `tileSize = 24`
+     * * `{ width: number, height: number }`
+     */
+    tileSize: number | TileSize;
+    /**
+     * @hidden
+     */
+    get tileLayout(): TileSize;
+    /**
+     * Fires each time the color selection is changed.
+     */
+    selectionChange: EventEmitter<string>;
+    /**
+     * Fires each time the value is changed.
+     */
+    valueChange: EventEmitter<string>;
+    /**
+     * Fires each time the user selects a cell with the mouse or presses `Enter`.
+     *
+     * @hidden
+     */
+    cellSelection: EventEmitter<string>;
+    /**
+     * @hidden
+     */
+    get colorRows(): string[][];
+    /**
+     * @hidden
+     */
+    get hostTabindex(): number;
+    /**
+     * @hidden
+     */
+    hostClasses: boolean;
+    /**
+     * @hidden
+     */
+    get disabledClass(): boolean;
+    /**
+     * @hidden
+     */
+    get readonlyAttribute(): boolean;
+    /**
+     * @hidden
+     */
+    activeCellId: string;
+    /**
+     * @hidden
+     */
+    focusedCell: TableCell;
+    /**
+     * @hidden
+     */
+    selectedCell: TableCell;
+    /**
+     * @hidden
+     */
+    focusInComponent: boolean;
+    /**
+     * @hidden
+     */
+    uniqueId: string;
+    private selection;
+    private _value;
+    private _columns;
+    private _palette;
+    private _tabindex;
+    private subs;
+    private dynamicRTLSubscription;
+    constructor(host: ElementRef, service: ColorPaletteService, cdr: ChangeDetectorRef, renderer: Renderer2, localizationService: LocalizationService, ngZone: NgZone);
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    /**
+     * @hidden
+     */
+    handleKeydown(event: any): void;
+    /**
+     * @hidden
+     */
+    handleFocus(): void;
+    /**
+     * @hidden
+     */
+    handleHostBlur(): void;
+    /**
+     * @hidden
+     */
+    handleCellSelection(value: string, focusedCell?: TableCell): void;
+    /**
+     * @hidden
+     */
+    writeValue(value: string): void;
+    /**
+     * @hidden
+     */
+    registerOnChange(fn: any): void;
+    /**
+     * @hidden
+     */
+    registerOnTouched(fn: any): void;
+    /**
+     * @hidden
+     */
+    setDisabledState(isDisabled: boolean): void;
+    /**
+     * @hidden
+     */
+    focus(): void;
+    /**
+     * @hidden
+     * Used by the FloatingLabel to determine if the component is empty.
+     */
+    isEmpty(): boolean;
+    /**
+     * Clears the color value of the ColorPalette.
+     */
+    reset(): void;
+    private handleValueChange;
+    private handleCellFocusOnBlur;
+    private selectCell;
+    private setRows;
+    private handleCellNavigation;
+    private setHostElementAriaLabel;
+    private handleEnter;
+    private notifyNgTouched;
+    private notifyNgChanged;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ColorPaletteComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ColorPaletteComponent, "kendo-colorpalette", ["kendoColorPalette"], { "id": "id"; "format": "format"; "value": "value"; "columns": "columns"; "palette": "palette"; "tabindex": "tabindex"; "disabled": "disabled"; "readonly": "readonly"; "tileSize": "tileSize"; }, { "selectionChange": "selectionChange"; "valueChange": "valueChange"; "cellSelection": "cellSelection"; }, never, never>;
+}

package/colorpicker/colorpicker.component.d.ts

@@ -0,0 +1,383 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { EventEmitter, ElementRef, OnDestroy, ViewContainerRef, ChangeDetectorRef, NgZone, OnChanges, OnInit, AfterViewInit, Renderer2, Injector } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { PopupService } from '@progress/kendo-angular-popup';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { PopupSettings, PaletteSettings, OutputFormat, ColorPickerView, GradientSettings, ColorPickerActionsLayout } from './models';
+import { ActiveColorClickEvent, ColorPickerCancelEvent, ColorPickerCloseEvent, ColorPickerOpenEvent } from './events';
+import { InputFillMode, InputRounded, InputSize } from '../common/models';
+import { SVGIcon } from '@progress/kendo-angular-icons';
+import * as i0 from "@angular/core";
+/**
+ * Represents the [Kendo UI ColorPicker component for Angular]({% slug overview_colorpicker %}).
+ *
+ * The ColorPicker is a powerful tool for choosing colors from Gradient and Palette views
+ * which are rendered in its popup. It supports previewing the selected color, reverting it to its previous state or clearing it completely.
+ */
+export declare class ColorPickerComponent implements OnInit, AfterViewInit, OnChanges, OnDestroy, ControlValueAccessor {
+    private host;
+    private popupService;
+    private cdr;
+    private localizationService;
+    private ngZone;
+    private renderer;
+    private injector;
+    hostClasses: boolean;
+    get focusedClass(): boolean;
+    get disabledClass(): boolean;
+    get ariaReadonly(): boolean;
+    get ariaExpanded(): boolean;
+    get hostTabindex(): number;
+    direction: string;
+    role: string;
+    hasPopup: string;
+    get isControlInvalid(): string;
+    /**
+     * @hidden
+     */
+    focusableId: string;
+    /**
+     * Specifies the views that will be rendered in the popup.
+     * By default both the gradient and palette views will be rendered.
+     */
+    views: Array<ColorPickerView>;
+    /**
+     * @hidden
+     */
+    set view(view: ColorPickerView);
+    get view(): ColorPickerView;
+    /**
+     * Sets the initially active view in the popup. The property supports two-way binding.
+     *
+     * The supported values are:
+     * * `gradient`
+     * * `palette`
+     */
+    activeView: ColorPickerView;
+    /**
+     * Sets the read-only state of the ColorPicker.
+     *
+     * @default false
+     */
+    readonly: boolean;
+    /**
+     * Sets the disabled state of the ColorPicker.
+     *
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * Specifies the output format of the ColorPicker.
+     *
+     * If the input value is in a different format, it will be parsed into the specified output `format`.
+     *
+     * The supported values are:
+     * * `rgba` (default)
+     * * `hex`
+     */
+    format: OutputFormat;
+    /**
+     * Specifies the value of the initially selected color.
+     */
+    set value(value: string);
+    get value(): string;
+    /**
+     * Configures the popup of the ColorPicker.
+     */
+    set popupSettings(value: PopupSettings);
+    get popupSettings(): PopupSettings;
+    /**
+     * Configures the palette that is displayed in the ColorPicker popup.
+     */
+    set paletteSettings(value: PaletteSettings);
+    get paletteSettings(): PaletteSettings;
+    /**
+     * Configures the gradient that is displayed in the ColorPicker popup.
+     */
+    set gradientSettings(value: GradientSettings);
+    get gradientSettings(): GradientSettings;
+    /**
+     * Defines the name of an [existing icon in the Kendo UI theme]({% slug icons %}).
+     * Provide only the name of the icon without the `k-icon` or the `k-i-` prefixes.
+     *
+     * For example, `pencil-tools` will be parsed to `k-icon k-i-pencil-tools`.
+     */
+    icon: string;
+    /**
+     * A CSS class name which displays an icon in the ColorPicker button.
+     * `iconClass` is compatible with the `ngClass` syntax.
+     *
+     * Takes precedence over `icon` if both are defined.
+     */
+    iconClass: string | Array<string> | {
+        [key: string]: boolean;
+    };
+    /**
+     * Defines an SVGIcon to be rendered within the button.
+     * The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
+     */
+    set svgIcon(icon: SVGIcon);
+    get svgIcon(): SVGIcon;
+    /**
+     * Specifies whether the ColorPicker should display a 'Clear color' button.
+     *
+     * @default true
+     */
+    clearButton: boolean;
+    /**
+     * Specifies the [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
+     *
+     * @default 0
+     */
+    set tabindex(value: number);
+    get tabindex(): number;
+    /**
+     * Displays `Apply` and `Cancel` action buttons and color preview panes.
+     *
+     * When enabled, the component value will not change immediately upon
+     * color selection, but only after the `Apply` button is clicked.
+     *
+     * The `Cancel` button reverts the current selection to its
+     * previous state i.e. to the current value.
+     *
+     * @default false
+     */
+    preview: boolean;
+    /**
+     * Configures the layout of the `Apply` and `Cancel` action buttons.
+     *
+     * The possible values are:
+     * * `start`
+     * * `center`
+     * * `end` (default)
+     * * `stretch`
+     */
+    actionsLayout: ColorPickerActionsLayout;
+    /**
+     * The size property specifies the padding of the ColorPicker internal elements
+     * ([see example]({% slug appearance_colorpicker %}#toc-size)).
+     *
+     * The possible values are:
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `none`
+     */
+    set size(size: InputSize);
+    get size(): InputSize;
+    /**
+     * The rounded property specifies the border radius of the ColorPicker
+     * ([see example]({% slug appearance_colorpicker %}#toc-rounded)).
+     *
+     * The possible values are:
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `full`
+     * * `none`
+     */
+    set rounded(rounded: InputRounded);
+    get rounded(): InputRounded;
+    /**
+     * The fillMode property specifies the background and border styles of the ColorPicker
+     * ([see example]({% slug appearance_colorpicker %}#toc-fillMode)).
+     *
+     * The possible values are:
+     * * `flat`
+     * * `solid` (default)
+     * * `outline`
+     * * `none`
+     */
+    set fillMode(fillMode: InputFillMode);
+    get fillMode(): InputFillMode;
+    /**
+     * Fires each time the value is changed.
+     */
+    valueChange: EventEmitter<any>;
+    /**
+     * Fires each time the popup is about to open.
+     * This event is preventable. If you cancel it, the popup will remain closed.
+     */
+    open: EventEmitter<ColorPickerOpenEvent>;
+    /**
+     * Fires each time the popup is about to close.
+     * This event is preventable. If you cancel it, the popup will remain open.
+     */
+    close: EventEmitter<ColorPickerCloseEvent>;
+    /**
+     * Fires each time ColorPicker is focused.
+     */
+    onFocus: EventEmitter<any>;
+    /**
+     * Fires each time the ColorPicker is blurred.
+     */
+    onBlur: EventEmitter<any>;
+    /**
+     * Fires when the user cancels the current color selection.
+     *
+     * Fires on preview pane or 'Cancel' button click.
+     */
+    cancel: EventEmitter<ColorPickerCancelEvent>;
+    /**
+     * Fires each time the left side of the ColorPicker wrapper is clicked.
+     * The event is triggered regardless of whether a ColorPicker icon is set or not.
+     *
+     * The [ActiveColorClickEvent]({% slug api_inputs_activecolorclickevent %}) event provides the option to prevent the popup opening.
+     */
+    activeColorClick: EventEmitter<ActiveColorClickEvent>;
+    /**
+     * @hidden
+     * Fires each time the clear button is clicked.
+     */
+    clearButtonClick: EventEmitter<any>;
+    /**
+     * Fires each time the view is about to change.
+     * Used to provide a two-way binding for the `activeView` property.
+     */
+    activeViewChange: EventEmitter<string>;
+    /**
+     * Indicates whether the ColorPicker wrapper is focused.
+     */
+    isFocused: boolean;
+    /**
+     * Indicates whether the ColorPicker popup is open.
+     */
+    get isOpen(): boolean;
+    /**
+     * @hidden
+     */
+    get customIconStyles(): string;
+    /**
+     * @hidden
+     */
+    get iconStyles(): string;
+    /**
+     * Provides a reference to a container element inside the component markup.
+     * The container element references the location of the appended popup&mdash;
+     * for example, inside the component markup.
+     */
+    container: ViewContainerRef;
+    private activeColor;
+    private popupTemplate;
+    private flatColorPicker;
+    /**
+     * @hidden
+     */
+    arrowDownIcon: SVGIcon;
+    private popupRef;
+    private _svgIcon;
+    private _value;
+    private _tabindex;
+    private _popupSettings;
+    private _paletteSettings;
+    private _gradientSettings;
+    private _size;
+    private _rounded;
+    private _fillMode;
+    private dynamicRTLSubscription;
+    private subscriptions;
+    private popupSubs;
+    private colorPickerId;
+    private control;
+    constructor(host: ElementRef, popupService: PopupService, cdr: ChangeDetectorRef, localizationService: LocalizationService, ngZone: NgZone, renderer: Renderer2, injector: Injector);
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    ngOnChanges(changes: any): void;
+    ngOnDestroy(): void;
+    /**
+     * @hidden
+     */
+    handleCancelEvent(ev: ColorPickerCancelEvent): void;
+    /**
+     * @hidden
+     */
+    togglePopup(): void;
+    /**
+     * @hidden
+     */
+    handleWrapperClick(event: MouseEvent): void;
+    /**
+     * Focuses the wrapper of the ColorPicker.
+     */
+    focus(): void;
+    /**
+     * @hidden
+     */
+    handleWrapperFocus(): void;
+    /**
+     * Blurs the ColorPicker.
+     */
+    blur(): void;
+    /**
+     * @hidden
+     */
+    handleWrapperBlur(): void;
+    /**
+     * Clears the value of the ColorPicker.
+     */
+    reset(): void;
+    /**
+     * Toggles the popup of the ColorPicker.
+     * Does not trigger the `open` and `close` events of the component.
+     *
+     * @param open An optional parameter. Specifies whether the popup will be opened or closed.
+     */
+    toggle(open?: boolean): void;
+    /**
+     * @hidden
+     */
+    handleValueChange(color: string): void;
+    /**
+     * @hidden
+     */
+    handlePopupBlur(event: FocusEvent): void;
+    /**
+     * @hidden
+     */
+    writeValue(value: string): void;
+    /**
+     * @hidden
+     */
+    registerOnChange(fn: any): void;
+    /**
+     * @hidden
+     */
+    registerOnTouched(fn: any): void;
+    /**
+     * @hidden
+     */
+    setDisabledState(isDisabled: boolean): void;
+    /**
+     * @hidden
+     */
+    handleWrapperKeyDown(event: any): void;
+    /**
+     * @hidden
+     */
+    handlePopupKeyDown(event: any): void;
+    /**
+     * @hidden
+     * Used by the FloatingLabel to determine if the component is empty.
+     */
+    isEmpty(): boolean;
+    private setHostElementAriaLabel;
+    private handleClasses;
+    private popupBlurInvalid;
+    private toggleWithEvents;
+    private focusFirstElement;
+    private openPopup;
+    private closePopup;
+    private get firstFocusableElement();
+    private get lastFocusableElement();
+    private notifyNgTouched;
+    private notifyNgChanged;
+    private handleDomEvents;
+    private initDomEvents;
+    private domFocusListener;
+    private handleHostId;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ColorPickerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ColorPickerComponent, "kendo-colorpicker", ["kendoColorPicker"], { "views": "views"; "view": "view"; "activeView": "activeView"; "readonly": "readonly"; "disabled": "disabled"; "format": "format"; "value": "value"; "popupSettings": "popupSettings"; "paletteSettings": "paletteSettings"; "gradientSettings": "gradientSettings"; "icon": "icon"; "iconClass": "iconClass"; "svgIcon": "svgIcon"; "clearButton": "clearButton"; "tabindex": "tabindex"; "preview": "preview"; "actionsLayout": "actionsLayout"; "size": "size"; "rounded": "rounded"; "fillMode": "fillMode"; }, { "valueChange": "valueChange"; "open": "open"; "close": "close"; "onFocus": "focus"; "onBlur": "blur"; "cancel": "cancel"; "activeColorClick": "activeColorClick"; "clearButtonClick": "clearButtonClick"; "activeViewChange": "activeViewChange"; }, never, never>;
+}