@progress/kendo-angular-inputs 17.0.0-develop.4 → 17.0.0-develop.40

package/{esm2020 → esm2022}/colorpicker/color-input.component.mjs

@@ -20,51 +20,61 @@ import * as i1 from "@progress/kendo-angular-l10n";
  * @hidden
  */
 export class ColorInputComponent {
-    constructor(host, renderer, localizationService) {
-        this.host = host;
-        this.renderer = renderer;
-        this.localizationService = localizationService;
-        /**
-         * The id of the hex input.
-         */
-        this.focusableId = `k-${guid()}`;
-        /**
-         * The inputs tabindex.
-         */
-        this.tabindex = -1;
-        /**
-         * Sets whether the alpha slider will be shown.
-         */
-        this.opacity = true;
-        /**
-         * Sets the disabled state of the ColorInput.
-         */
-        this.disabled = false;
-        /**
-         * Sets the read-only state of the ColorInput.
-         *
-         * @default false
-         */
-        this.readonly = false;
-        /**
-         * Emits a parsed rgba string color.
-         */
-        this.valueChange = new EventEmitter();
-        /**
-         * Emits when the user tabs out of the last focusable input.
-         */
-        this.tabOut = new EventEmitter();
-        this.colorInputClass = true;
-        /**
-         * The rgba inputs values.
-         */
-        this.rgba = {};
-        /**
-         * @hidden
-         */
-        this.caretAltExpandIcon = caretAltExpandIcon;
-        this.subscriptions = new Subscription();
-    }
+    host;
+    renderer;
+    localizationService;
+    /**
+     * The id of the hex input.
+     */
+    focusableId = `k-${guid()}`;
+    /**
+     * The color format view.
+     */
+    formatView;
+    /**
+     * The inputs tabindex.
+     */
+    tabindex = -1;
+    /**
+     * The color value that will be parsed and populate the hex & rgba inputs.
+     * Required input property.
+     */
+    value;
+    /**
+     * Sets whether the alpha slider will be shown.
+     */
+    opacity = true;
+    /**
+     * Sets the disabled state of the ColorInput.
+     */
+    disabled = false;
+    /**
+     * Sets the read-only state of the ColorInput.
+     *
+     * @default false
+     */
+    readonly = false;
+    /**
+     * Emits a parsed rgba string color.
+     */
+    valueChange = new EventEmitter();
+    /**
+     * Emits when the user tabs out of the last focusable input.
+     */
+    tabOut = new EventEmitter();
+    colorInputClass = true;
+    opacityInput;
+    hexInput;
+    blueInput;
+    toggleFormatButton;
+    /**
+     * The rgba inputs values.
+     */
+    rgba = {};
+    /*
+     * The hex input value.
+     */
+    hex;
     /**
      * Indicates whether any of the inputs are focused.
      */
@@ -81,6 +91,16 @@ export class ColorInputComponent {
     get rgbaInputValid() {
         return Object.keys(this.rgba).every(key => isPresent(this.rgba[key]));
     }
+    /**
+     * @hidden
+     */
+    caretAltExpandIcon = caretAltExpandIcon;
+    subscriptions = new Subscription();
+    constructor(host, renderer, localizationService) {
+        this.host = host;
+        this.renderer = renderer;
+        this.localizationService = localizationService;
+    }
     ngAfterViewInit() {
         this.initDomEvents();
     }
@@ -152,9 +172,8 @@ export class ColorInputComponent {
     lastInput() {
         return this.hexInput?.nativeElement || this.opacityInput || this.blueInput;
     }
-}
-ColorInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColorInputComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-ColorInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ColorInputComponent, isStandalone: true, selector: "kendo-colorinput", inputs: { focusableId: "focusableId", formatView: "formatView", tabindex: "tabindex", value: "value", opacity: "opacity", disabled: "disabled", readonly: "readonly" }, outputs: { valueChange: "valueChange", tabOut: "tabOut" }, host: { properties: { "class.k-colorgradient-inputs": "this.colorInputClass", "class.k-hstack": "this.colorInputClass" } }, viewQueries: [{ propertyName: "opacityInput", first: true, predicate: ["opacityInput"], descendants: true }, { propertyName: "hexInput", first: true, predicate: ["hexInput"], descendants: true }, { propertyName: "blueInput", first: true, predicate: ["blue"], descendants: true }, { propertyName: "toggleFormatButton", first: true, predicate: ["toggleFormatButton"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorInputComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColorInputComponent, isStandalone: true, selector: "kendo-colorinput", inputs: { focusableId: "focusableId", formatView: "formatView", tabindex: "tabindex", value: "value", opacity: "opacity", disabled: "disabled", readonly: "readonly" }, outputs: { valueChange: "valueChange", tabOut: "tabOut" }, host: { properties: { "class.k-colorgradient-inputs": "this.colorInputClass", "class.k-hstack": "this.colorInputClass" } }, viewQueries: [{ propertyName: "opacityInput", first: true, predicate: ["opacityInput"], descendants: true }, { propertyName: "hexInput", first: true, predicate: ["hexInput"], descendants: true }, { propertyName: "blueInput", first: true, predicate: ["blue"], descendants: true }, { propertyName: "toggleFormatButton", first: true, predicate: ["toggleFormatButton"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: `
         <div class="k-vstack">
             <button 
                 kendoButton
@@ -272,8 +291,9 @@ ColorInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
                 <label [for]="alpha.focusableId" class="k-colorgradient-input-label">A</label>
             </div>
         </ng-container>
-    `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "directive", type: NumericLabelDirective, selector: "[kendoAdditionalNumericLabel]", inputs: ["kendoAdditionalNumericLabel", "localizationService"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColorInputComponent, decorators: [{
+    `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "directive", type: NumericLabelDirective, selector: "[kendoAdditionalNumericLabel]", inputs: ["kendoAdditionalNumericLabel", "localizationService"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorInputComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-colorinput',

package/{esm2020 → esm2022}/colorpicker/color-palette.component.mjs

@@ -31,81 +31,20 @@ let serial = 0;
  * The ColorPalette is independently used by `kendo-colorpicker` and can be directly added to the page.
  */
 export class ColorPaletteComponent {
-    constructor(host, service, cdr, renderer, localizationService, ngZone) {
-        this.host = host;
-        this.service = service;
-        this.cdr = cdr;
-        this.renderer = renderer;
-        this.localizationService = localizationService;
-        this.ngZone = ngZone;
-        /**
-         * @hidden
-         */
-        this.role = 'grid';
-        /**
-         * @hidden
-         */
-        this.id = `k-colorpalette-${serial++}`;
-        /**
-         * 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`
-         */
-        this.format = 'hex';
-        /**
-         * Sets the disabled state of the ColorPalette. To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_colorpalette#toc-managing-the-colorpalette-disabled-state-in-reactive-forms).
-         */
-        this.disabled = false;
-        /**
-         * Sets the read-only state of the ColorPalette.
-         *
-         * @default false
-         */
-        this.readonly = false;
-        /**
-         * Specifies the size of a color cell.
-         *
-         * The possible values are:
-         * * (Default) `tileSize = 24`
-         * * `{ width: number, height: number }`
-         */
-        this.tileSize = { width: DEFAULT_TILE_SIZE, height: DEFAULT_TILE_SIZE };
-        /**
-         * Fires each time the color selection is changed.
-         */
-        this.selectionChange = new EventEmitter();
-        /**
-         * Fires each time the value is changed.
-         */
-        this.valueChange = new EventEmitter();
-        /**
-         * Fires each time the user selects a cell with the mouse or presses `Enter`.
-         *
-         * @hidden
-         */
-        this.cellSelection = new EventEmitter();
-        /**
-         * @hidden
-         */
-        this.hostClasses = true;
-        /**
-         * @hidden
-         */
-        this.uniqueId = guid();
-        this._tabindex = 0;
-        this.subs = new Subscription();
-        this.notifyNgTouched = () => { };
-        this.notifyNgChanged = () => { };
-        validatePackage(packageMetadata);
-        this.dynamicRTLSubscription = localizationService.changes.subscribe(({ rtl }) => {
-            this.direction = rtl ? 'rtl' : 'ltr';
-        });
-    }
+    host;
+    service;
+    cdr;
+    renderer;
+    localizationService;
+    ngZone;
+    /**
+     * @hidden
+     */
+    direction;
+    /**
+     * @hidden
+     */
+    role = 'grid';
     /**
      * @hidden
      */
@@ -118,6 +57,21 @@ export class ColorPaletteComponent {
     get paletteId() {
         return this.id;
     }
+    /**
+     * @hidden
+     */
+    id = `k-colorpalette-${serial++}`;
+    /**
+     * 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 = 'hex';
     /**
      * Specifies the value of the initially selected color.
      */
@@ -171,6 +125,24 @@ export class ColorPaletteComponent {
     get tabindex() {
         return !this.disabled ? this._tabindex : undefined;
     }
+    /**
+     * Sets the disabled state of the ColorPalette. To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_colorpalette#toc-managing-the-colorpalette-disabled-state-in-reactive-forms).
+     */
+    disabled = false;
+    /**
+     * Sets the read-only state of the ColorPalette.
+     *
+     * @default false
+     */
+    readonly = false;
+    /**
+     * Specifies the size of a color cell.
+     *
+     * The possible values are:
+     * * (Default) `tileSize = 24`
+     * * `{ width: number, height: number }`
+     */
+    tileSize = { width: DEFAULT_TILE_SIZE, height: DEFAULT_TILE_SIZE };
     /**
      * @hidden
      */
@@ -180,6 +152,20 @@ export class ColorPaletteComponent {
         }
         return { width: this.tileSize, height: this.tileSize };
     }
+    /**
+     * Fires each time the color selection is changed.
+     */
+    selectionChange = new EventEmitter();
+    /**
+     * Fires each time the value is changed.
+     */
+    valueChange = new EventEmitter();
+    /**
+     * Fires each time the user selects a cell with the mouse or presses `Enter`.
+     *
+     * @hidden
+     */
+    cellSelection = new EventEmitter();
     /**
      * @hidden
      */
@@ -190,6 +176,10 @@ export class ColorPaletteComponent {
      * @hidden
      */
     get hostTabindex() { return this.tabindex; }
+    /**
+     * @hidden
+     */
+    hostClasses = true;
     /**
      * @hidden
      */
@@ -198,6 +188,45 @@ export class ColorPaletteComponent {
      * @hidden
      */
     get readonlyAttribute() { return this.readonly; }
+    /**
+     * @hidden
+     */
+    activeCellId;
+    /**
+     * @hidden
+     */
+    focusedCell;
+    /**
+     * @hidden
+     */
+    selectedCell;
+    /**
+     * @hidden
+     */
+    focusInComponent;
+    /**
+     * @hidden
+     */
+    uniqueId = guid();
+    selection;
+    _value;
+    _columns;
+    _palette;
+    _tabindex = 0;
+    subs = new Subscription();
+    dynamicRTLSubscription;
+    constructor(host, service, cdr, renderer, localizationService, ngZone) {
+        this.host = host;
+        this.service = service;
+        this.cdr = cdr;
+        this.renderer = renderer;
+        this.localizationService = localizationService;
+        this.ngZone = ngZone;
+        validatePackage(packageMetadata);
+        this.dynamicRTLSubscription = localizationService.changes.subscribe(({ rtl }) => {
+            this.direction = rtl ? 'rtl' : 'ltr';
+        });
+    }
     ngOnInit() {
         if (this.colorRows.length === 0) {
             const defaultPreset = (this.format !== 'name') ? DEFAULT_PRESET : DEFAULT_ACCESSIBLE_PRESET;
@@ -395,28 +424,29 @@ export class ColorPaletteComponent {
         const selectedColor = this.service.getColorAt(this.focusedCell);
         this.handleCellSelection(selectedColor, this.focusedCell);
     }
-}
-ColorPaletteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColorPaletteComponent, deps: [{ token: i0.ElementRef }, { token: i1.ColorPaletteService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i2.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-ColorPaletteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ColorPaletteComponent, isStandalone: true, selector: "kendo-colorpalette", inputs: { id: "id", format: "format", value: "value", columns: "columns", palette: "palette", tabindex: "tabindex", disabled: "disabled", readonly: "readonly", tileSize: "tileSize" }, outputs: { selectionChange: "selectionChange", valueChange: "valueChange", cellSelection: "cellSelection" }, host: { properties: { "attr.dir": "this.direction", "attr.role": "this.role", "attr.aria-activedescendant": "this.activeDescendant", "attr.id": "this.paletteId", "class.k-readonly": "this.readonly", "attr.tabindex": "this.hostTabindex", "class.k-colorpalette": "this.hostClasses", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "attr.aria-readonly": "this.readonlyAttribute" } }, providers: [
-        {
-            multi: true,
-            provide: NG_VALUE_ACCESSOR,
-            useExisting: forwardRef(() => ColorPaletteComponent)
-        }, {
-            provide: KendoInput,
-            useExisting: forwardRef(() => ColorPaletteComponent)
-        },
-        ColorPaletteService,
-        ColorPaletteLocalizationService,
-        {
-            provide: LocalizationService,
-            useExisting: ColorPaletteLocalizationService
-        },
-        {
-            provide: L10N_PREFIX,
-            useValue: 'kendo.colorpalette'
-        }
-    ], exportAs: ["kendoColorPalette"], usesOnChanges: true, ngImport: i0, template: `
+    notifyNgTouched = () => { };
+    notifyNgChanged = () => { };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorPaletteComponent, deps: [{ token: i0.ElementRef }, { token: i1.ColorPaletteService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i2.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColorPaletteComponent, isStandalone: true, selector: "kendo-colorpalette", inputs: { id: "id", format: "format", value: "value", columns: "columns", palette: "palette", tabindex: "tabindex", disabled: "disabled", readonly: "readonly", tileSize: "tileSize" }, outputs: { selectionChange: "selectionChange", valueChange: "valueChange", cellSelection: "cellSelection" }, host: { properties: { "attr.dir": "this.direction", "attr.role": "this.role", "attr.aria-activedescendant": "this.activeDescendant", "attr.id": "this.paletteId", "class.k-readonly": "this.readonly", "attr.tabindex": "this.hostTabindex", "class.k-colorpalette": "this.hostClasses", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "attr.aria-readonly": "this.readonlyAttribute" } }, providers: [
+            {
+                multi: true,
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => ColorPaletteComponent)
+            }, {
+                provide: KendoInput,
+                useExisting: forwardRef(() => ColorPaletteComponent)
+            },
+            ColorPaletteService,
+            ColorPaletteLocalizationService,
+            {
+                provide: LocalizationService,
+                useExisting: ColorPaletteLocalizationService
+            },
+            {
+                provide: L10N_PREFIX,
+                useValue: 'kendo.colorpalette'
+            }
+        ], exportAs: ["kendoColorPalette"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoColorPaletteLocalizedMessages
             i18n-colorPaletteNoColor="kendo.colorpalette.colorPaletteNoColor|The aria-label applied to the ColorPalette component when the value is empty."
             colorPaletteNoColor="Colorpalette no color chosen">
@@ -445,7 +475,8 @@ ColorPaletteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
             </tbody>
         </table>
     `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColorPaletteComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorPaletteComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoColorPalette',