@progress/kendo-angular-inputs 8.0.9 → 9.0.0-dev.202204150721

package/dist/es/colorpicker/colorpicker.component.js

@@ -1,958 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-import * as tslib_1 from "tslib";
-import { take } from 'rxjs/operators';
-import { Component, HostBinding, Input, Output, EventEmitter, ViewChild, ElementRef, TemplateRef, ViewContainerRef, forwardRef, ChangeDetectorRef, NgZone, Renderer2 } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { Subscription } from 'rxjs';
-import { FlatColorPickerComponent } from './flatcolorpicker.component';
-import { PopupService } from '@progress/kendo-angular-popup';
-import { validatePackage } from '@progress/kendo-licensing';
-import { Keys, KendoInput, isChanged, closest, guid } from '@progress/kendo-angular-common';
-import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
-import { packageMetadata } from '../package-metadata';
-import { PALETTEPRESETS } from './models';
-import { ActiveColorClickEvent, ColorPickerCloseEvent, ColorPickerOpenEvent } from './events';
-import { parseColor } from './utils';
-import { getStylingClasses, isPresent } from '../common/utils';
-import { ColorPickerLocalizationService } from './localization/colorpicker-localization.service';
-import { DEFAULT_ACCESSIBLE_PRESET, DEFAULT_PRESET } from './constants';
-var DOM_FOCUS_EVENTS = ['focus', 'blur'];
-/**
- * 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.
- */
-var ColorPickerComponent = /** @class */ (function () {
-    function ColorPickerComponent(host, popupService, cdr, localizationService, ngZone, renderer) {
-        var _this = this;
-        this.host = host;
-        this.popupService = popupService;
-        this.cdr = cdr;
-        this.localizationService = localizationService;
-        this.ngZone = ngZone;
-        this.renderer = renderer;
-        this.hostClasses = true;
-        this.role = 'listbox';
-        /**
-         * Specifies the views that will be rendered in the popup.
-         * By default both the gradient and palette views will be rendered.
-         */
-        this.views = ['gradient', 'palette'];
-        /**
-         * Sets the read-only state of the ColorPicker.
-         *
-         * @default false
-         */
-        this.readonly = false;
-        /**
-         * Sets the disabled state of the ColorPicker.
-         *
-         * @default false
-         */
-        this.disabled = false;
-        /**
-         * 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`
-         */
-        this.format = 'rgba';
-        /**
-         * Specifies whether the ColorPicker should display a 'Clear color' button.
-         *
-         * @default true
-         */
-        this.clearButton = true;
-        /**
-         * 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
-         */
-        this.preview = false;
-        /**
-         * Configures the layout of the `Apply` and `Cancel` action buttons.
-         *
-         * The possible values are:
-         * * `start`
-         * * `center`
-         * * `end` (default)
-         * * `stretch`
-         */
-        this.actionsLayout = 'end';
-        /**
-         * Fires each time the value is changed.
-         */
-        this.valueChange = new EventEmitter();
-        /**
-         * Fires each time the popup is about to open.
-         * This event is preventable. If you cancel it, the popup will remain closed.
-         */
-        this.open = new EventEmitter();
-        /**
-         * Fires each time the popup is about to close.
-         * This event is preventable. If you cancel it, the popup will remain open.
-         */
-        this.close = new EventEmitter();
-        /**
-         * Fires each time ColorPicker is focused.
-         */
-        this.onFocus = new EventEmitter();
-        /**
-         * Fires each time the ColorPicker is blurred.
-         */
-        this.onBlur = new EventEmitter();
-        /**
-         * Fires when the user cancels the current color selection.
-         *
-         * Fires on preview pane or 'Cancel' button click.
-         */
-        this.cancel = new EventEmitter();
-        /**
-         * 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.
-         */
-        this.activeColorClick = new EventEmitter();
-        /**
-         * Fires each time the view is about to change.
-         * Used to provide a two-way binding for the `activeView` property.
-         */
-        this.activeViewChange = new EventEmitter();
-        /**
-         * Indicates whether the ColorPicker wrapper is focused.
-         */
-        this.isFocused = false;
-        this._tabindex = 0;
-        this._popupSettings = { animate: true };
-        this._paletteSettings = {};
-        this._gradientSettings = { opacity: true, delay: 0 };
-        this._size = 'medium';
-        this._rounded = 'medium';
-        this._fillMode = 'solid';
-        this.subscriptions = new Subscription();
-        this.notifyNgTouched = function () { };
-        this.notifyNgChanged = function () { };
-        this.domFocusListener = function (event) { return event.stopImmediatePropagation(); };
-        validatePackage(packageMetadata);
-        this.dynamicRTLSubscription = this.localizationService.changes.subscribe(function (_a) {
-            var rtl = _a.rtl;
-            _this.direction = rtl ? 'rtl' : 'ltr';
-        });
-    }
-    ColorPickerComponent_1 = ColorPickerComponent;
-    Object.defineProperty(ColorPickerComponent.prototype, "focusedClass", {
-        get: function () {
-            return this.isFocused;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ColorPickerComponent.prototype, "disabledClass", {
-        get: function () {
-            return this.disabled;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ColorPickerComponent.prototype, "ariaReadonly", {
-        get: function () {
-            return this.readonly;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ColorPickerComponent.prototype, "ariaExpanded", {
-        get: function () {
-            return this.isOpen;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ColorPickerComponent.prototype, "hostTabindex", {
-        get: function () {
-            return this.tabindex;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ColorPickerComponent.prototype, "view", {
-        get: function () {
-            return (this.views && this.views.length > 0) ? this.views[0] : null;
-        },
-        /**
-         * @hidden
-         */
-        set: function (view) {
-            this.views = [view];
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ColorPickerComponent.prototype, "value", {
-        get: function () {
-            return this._value;
-        },
-        /**
-         * Specifies the value of the initially selected color.
-         */
-        set: function (value) {
-            this._value = parseColor(value, this.format, this.gradientSettings.opacity);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ColorPickerComponent.prototype, "popupSettings", {
-        get: function () {
-            return this._popupSettings;
-        },
-        /**
-         * Configures the popup of the ColorPicker.
-         */
-        set: function (value) {
-            this._popupSettings = Object.assign(this._popupSettings, value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ColorPickerComponent.prototype, "paletteSettings", {
-        get: function () {
-            return this._paletteSettings;
-        },
-        /**
-         * Configures the palette that is displayed in the ColorPicker popup.
-         */
-        set: function (value) {
-            this._paletteSettings = Object.assign(this._paletteSettings, value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ColorPickerComponent.prototype, "gradientSettings", {
-        get: function () {
-            return this._gradientSettings;
-        },
-        /**
-         * Configures the gradient that is displayed in the ColorPicker popup.
-         */
-        set: function (value) {
-            this._gradientSettings = Object.assign(this._gradientSettings, value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ColorPickerComponent.prototype, "tabindex", {
-        get: function () {
-            return !this.disabled ? this._tabindex : undefined;
-        },
-        /**
-         * Specifies the [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
-         *
-         * @default 0
-         */
-        set: function (value) {
-            var tabindex = Number(value);
-            var defaultValue = 0;
-            this._tabindex = !isNaN(tabindex) ? tabindex : defaultValue;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ColorPickerComponent.prototype, "size", {
-        get: function () {
-            return this._size;
-        },
-        /**
-         * 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'`
-         * * `null`
-         */
-        set: function (size) {
-            this.handleClasses(size, 'size');
-            this._size = size;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ColorPickerComponent.prototype, "rounded", {
-        get: function () {
-            return this._rounded;
-        },
-        /**
-         * 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'`
-         * * `null`
-         */
-        set: function (rounded) {
-            this.handleClasses(rounded, 'rounded');
-            this._rounded = rounded;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ColorPickerComponent.prototype, "fillMode", {
-        get: function () {
-            return this._fillMode;
-        },
-        /**
-         * 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'`
-         * * `null`
-         */
-        set: function (fillMode) {
-            this.handleClasses(fillMode, 'fillMode');
-            this._fillMode = fillMode;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ColorPickerComponent.prototype, "isOpen", {
-        /**
-         * Indicates whether the ColorPicker popup is open.
-         */
-        get: function () {
-            return isPresent(this.popupRef);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ColorPickerComponent.prototype, "iconStyles", {
-        /**
-         * @hidden
-         */
-        get: function () {
-            if (this.iconClass) {
-                return this.iconClass;
-            }
-            if (this.icon) {
-                return "k-icon k-i-" + this.icon;
-            }
-        },
-        enumerable: true,
-        configurable: true
-    });
-    ColorPickerComponent.prototype.ngOnInit = function () {
-        var defaultPreset = (this.format !== 'name') ? DEFAULT_PRESET : DEFAULT_ACCESSIBLE_PRESET;
-        var settingsPalette = this._paletteSettings.palette;
-        var presetColumns = typeof settingsPalette === 'string' && PALETTEPRESETS[settingsPalette] ?
-            PALETTEPRESETS[settingsPalette].columns :
-            undefined;
-        this._paletteSettings = {
-            palette: settingsPalette || defaultPreset,
-            tileSize: this._paletteSettings.tileSize || 24,
-            columns: this._paletteSettings.columns || presetColumns || 10
-        };
-    };
-    ColorPickerComponent.prototype.ngAfterViewInit = function () {
-        var _this = this;
-        var stylingInputs = ['size', 'rounded', 'fillMode'];
-        stylingInputs.forEach(function (input) {
-            _this.handleClasses(_this[input], input);
-        });
-        this.setHostElementAriaLabel();
-        this.handleHostId();
-        this.initDomEvents();
-    };
-    ColorPickerComponent.prototype.ngOnChanges = function (changes) {
-        if (changes.format && changes.format.currentValue === 'name') {
-            this.activeView = 'palette';
-        }
-        if (this.activeView === 'gradient' && this.gradientSettings.opacity) {
-            this.format = 'rgba';
-            this.value = parseColor(this.value, this.format, this.gradientSettings.opacity);
-        }
-        if (isChanged('value', changes)) {
-            this.setHostElementAriaLabel();
-        }
-    };
-    ColorPickerComponent.prototype.ngOnDestroy = function () {
-        this.closePopup();
-        if (this.dynamicRTLSubscription) {
-            this.dynamicRTLSubscription.unsubscribe();
-        }
-        this.subscriptions.unsubscribe();
-        this.handleDomEvents('remove', DOM_FOCUS_EVENTS);
-    };
-    /**
-     * @hidden
-     */
-    ColorPickerComponent.prototype.handleCancelEvent = function (ev) {
-        this.cancel.emit(ev);
-    };
-    /**
-     * @hidden
-     */
-    ColorPickerComponent.prototype.togglePopup = function () {
-        this.focus();
-        this.toggleWithEvents(!this.isOpen);
-    };
-    /**
-     * @hidden
-     */
-    ColorPickerComponent.prototype.handleWrapperClick = function (event) {
-        var _this = this;
-        if (this.disabled) {
-            return;
-        }
-        this.focus();
-        if (closest(event.target, function (element) { return element === _this.activeColor.nativeElement; })) {
-            var event_1 = new ActiveColorClickEvent(this.value);
-            this.activeColorClick.emit(event_1);
-            if (!event_1.isOpenPrevented() || this.isOpen) {
-                this.toggleWithEvents(!this.isOpen);
-            }
-            return;
-        }
-        this.toggleWithEvents(!this.isOpen);
-    };
-    /**
-     * Focuses the wrapper of the ColorPicker.
-     */
-    ColorPickerComponent.prototype.focus = function () {
-        this.isFocused = true;
-        this.host.nativeElement.focus();
-    };
-    /**
-     * @hidden
-     */
-    ColorPickerComponent.prototype.handleWrapperFocus = function () {
-        var _this = this;
-        if (this.isFocused) {
-            return;
-        }
-        this.ngZone.run(function () {
-            _this.focus();
-            _this.onFocus.emit();
-        });
-    };
-    /**
-     * Blurs the ColorPicker.
-     */
-    ColorPickerComponent.prototype.blur = function () {
-        this.isFocused = false;
-        this.host.nativeElement.blur();
-        this.notifyNgTouched();
-    };
-    /**
-     * @hidden
-     */
-    ColorPickerComponent.prototype.handleWrapperBlur = function () {
-        var _this = this;
-        if (this.isOpen) {
-            return;
-        }
-        this.ngZone.run(function () {
-            _this.onBlur.emit();
-            _this.isFocused = false;
-        });
-    };
-    /**
-     * Clears the value of the ColorPicker.
-     */
-    ColorPickerComponent.prototype.reset = function () {
-        if (!isPresent(this.value)) {
-            return;
-        }
-        this._value = undefined;
-        this.setHostElementAriaLabel();
-        this.notifyNgChanged(undefined);
-    };
-    /**
-     * 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.
-     */
-    ColorPickerComponent.prototype.toggle = function (open) {
-        if (this.disabled || this.readonly) {
-            return;
-        }
-        this.cdr.markForCheck();
-        this.closePopup();
-        open = isPresent(open) ? open : !this.isOpen;
-        if (open) {
-            this.openPopup();
-        }
-    };
-    /**
-     * @hidden
-     */
-    ColorPickerComponent.prototype.handleValueChange = function (color) {
-        var parsedColor = parseColor(color, this.format, this.gradientSettings.opacity);
-        var valueChange = parsedColor !== this.value;
-        if (valueChange) {
-            this.value = parsedColor;
-            this.valueChange.emit(parsedColor);
-            this.setHostElementAriaLabel();
-            this.notifyNgChanged(parsedColor);
-        }
-    };
-    /**
-     * @hidden
-     */
-    ColorPickerComponent.prototype.handlePopupBlur = function (event) {
-        if (this.popupBlurInvalid(event)) {
-            return;
-        }
-        this.isFocused = false;
-        this.onBlur.emit();
-        this.notifyNgTouched();
-        this.toggleWithEvents(false);
-    };
-    /**
-     * @hidden
-     */
-    ColorPickerComponent.prototype.writeValue = function (value) {
-        this.value = value;
-    };
-    /**
-     * @hidden
-     */
-    ColorPickerComponent.prototype.registerOnChange = function (fn) {
-        this.notifyNgChanged = fn;
-    };
-    /**
-     * @hidden
-     */
-    ColorPickerComponent.prototype.registerOnTouched = function (fn) {
-        this.notifyNgTouched = fn;
-    };
-    /**
-     * @hidden
-     */
-    ColorPickerComponent.prototype.setDisabledState = function (isDisabled) {
-        this.cdr.markForCheck();
-        this.disabled = isDisabled;
-    };
-    /**
-     * @hidden
-     */
-    ColorPickerComponent.prototype.handleWrapperKeyDown = function (event) {
-        var _this = this;
-        if (event.keyCode === Keys.ArrowDown || event.keyCode === Keys.Enter) {
-            event.preventDefault();
-            this.ngZone.run(function () {
-                _this.toggleWithEvents(true);
-            });
-        }
-    };
-    /**
-     * @hidden
-     */
-    ColorPickerComponent.prototype.handlePopupKeyDown = function (event) {
-        if (event.keyCode === Keys.Escape) {
-            this.toggleWithEvents(false);
-            this.host.nativeElement.focus();
-        }
-        if (event.keyCode === Keys.Tab) {
-            var currentElement = event.shiftKey ? this.firstFocusableElement.nativeElement : this.lastFocusableElement.nativeElement;
-            var nextElement = event.shiftKey ? this.lastFocusableElement.nativeElement : this.firstFocusableElement.nativeElement;
-            if (event.target === currentElement) {
-                event.preventDefault();
-                nextElement.focus();
-            }
-        }
-    };
-    /**
-     * @hidden
-     * Used by the FloatingLabel to determine if the component is empty.
-     */
-    ColorPickerComponent.prototype.isEmpty = function () {
-        return false;
-    };
-    ColorPickerComponent.prototype.setHostElementAriaLabel = function () {
-        var ariaLabelValue = "" + (this.value ? this.value : this.localizationService.get('colorPickerNoColor'));
-        this.renderer.setAttribute(this.host.nativeElement, 'aria-label', ariaLabelValue);
-    };
-    ColorPickerComponent.prototype.handleClasses = function (value, input) {
-        var elem = this.host.nativeElement;
-        var classes = getStylingClasses('picker', input, this[input], value);
-        if (classes.toRemove) {
-            this.renderer.removeClass(elem, classes.toRemove);
-        }
-        if (classes.toAdd) {
-            this.renderer.addClass(elem, classes.toAdd);
-        }
-    };
-    ColorPickerComponent.prototype.popupBlurInvalid = function (ev) {
-        var _this = this;
-        var focusInFlatColorPickerElement = this.popupRef.popupElement.contains(ev.relatedTarget);
-        var hostClicked = closest(ev.relatedTarget, function (element) { return element === _this.host.nativeElement; });
-        return hostClicked || focusInFlatColorPickerElement;
-    };
-    ColorPickerComponent.prototype.toggleWithEvents = function (open) {
-        var sameState = this.isOpen === open;
-        if (this.disabled || this.readonly || sameState) {
-            return;
-        }
-        var eventArgs;
-        if (open) {
-            eventArgs = new ColorPickerOpenEvent();
-            this.open.emit(eventArgs);
-        }
-        else {
-            eventArgs = new ColorPickerCloseEvent();
-            this.close.emit(eventArgs);
-        }
-        if (!eventArgs.isDefaultPrevented()) {
-            this.toggle(open);
-        }
-        if (open) {
-            this.focusFirstElement();
-        }
-    };
-    ColorPickerComponent.prototype.focusFirstElement = function () {
-        var _this = this;
-        this.ngZone.onStable.pipe(take(1)).subscribe(function () {
-            if (_this.flatColorPicker) {
-                var gradient = _this.flatColorPicker.gradient;
-                var elementToFocus = gradient ? gradient.gradientDragHandle :
-                    _this.flatColorPicker.palette.host;
-                elementToFocus.nativeElement.focus();
-            }
-        });
-    };
-    ColorPickerComponent.prototype.openPopup = function () {
-        var _this = this;
-        var horizontalAlign = this.direction === "rtl" ? "right" : "left";
-        var anchorPosition = { horizontal: horizontalAlign, vertical: "bottom" };
-        var popupPosition = { horizontal: horizontalAlign, vertical: "top" };
-        this.popupRef = this.popupService.open({
-            anchor: this.activeColor,
-            animate: this.popupSettings.animate,
-            appendTo: this.popupSettings.appendTo,
-            popupAlign: popupPosition,
-            anchorAlign: anchorPosition,
-            popupClass: 'k-colorpicker-popup',
-            content: this.popupTemplate,
-            positionMode: 'absolute'
-        });
-        this.popupRef.popupAnchorViewportLeave.subscribe(function () {
-            _this.toggleWithEvents(false);
-            if (!_this.isOpen) {
-                _this.host.nativeElement.focus({
-                    preventScroll: true
-                });
-            }
-        });
-    };
-    ColorPickerComponent.prototype.closePopup = function () {
-        if (!this.isOpen) {
-            return;
-        }
-        this.popupRef.close();
-        this.popupRef = null;
-    };
-    Object.defineProperty(ColorPickerComponent.prototype, "firstFocusableElement", {
-        get: function () {
-            if (!this.flatColorPicker.header || (this.views.length <= 1 && !this.flatColorPicker.clearButton)) {
-                var gradient = this.flatColorPicker.gradient;
-                return gradient ? gradient.gradientDragHandle : this.flatColorPicker.palette.host;
-            }
-            return this.views.length > 1 ? this.flatColorPicker.header.viewButtonsCollection.toArray()[0] : this.flatColorPicker.header.clearButtonElement;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ColorPickerComponent.prototype, "lastFocusableElement", {
-        get: function () {
-            if (this.preview) {
-                return this.flatColorPicker.footer.lastButton;
-            }
-            if (this.flatColorPicker.palette) {
-                return this.flatColorPicker.palette.host;
-            }
-            var gradient = this.flatColorPicker.gradient;
-            var inputs = gradient && gradient.inputs;
-            if (gradient && inputs && inputs.formatView === 'hex') {
-                return inputs.hexInput;
-            }
-            return this.gradientSettings.opacity ? inputs.opacityInput.numericInput : inputs.blueInput;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    ColorPickerComponent.prototype.handleDomEvents = function (action, events) {
-        var _this = this;
-        var hostElement = this.host.nativeElement;
-        events.forEach(function (ev) { return hostElement[action + "EventListener"](ev, _this.domFocusListener, true); });
-    };
-    ColorPickerComponent.prototype.initDomEvents = function () {
-        var _this = this;
-        if (!this.host) {
-            return;
-        }
-        var hostElement = this.host.nativeElement;
-        this.ngZone.runOutsideAngular(function () {
-            _this.subscriptions.add(_this.renderer.listen(hostElement, 'focusin', function () {
-                _this.handleWrapperFocus();
-            }));
-            _this.subscriptions.add(_this.renderer.listen(hostElement, 'focusout', function (event) {
-                var closestPopup = _this.popupRef ?
-                    closest(event.relatedTarget, function (element) { return element === _this.flatColorPicker.host.nativeElement; }) :
-                    false;
-                var closestWrapper = closest(event.relatedTarget, function (element) { return element === _this.host.nativeElement; });
-                if (!closestPopup && !closestWrapper) {
-                    _this.handleWrapperBlur();
-                }
-            }));
-            _this.handleDomEvents('add', DOM_FOCUS_EVENTS);
-            _this.subscriptions.add(_this.renderer.listen(hostElement, 'keydown', function (event) {
-                _this.handleWrapperKeyDown(event);
-            }));
-            _this.subscriptions.add(_this.renderer.listen(hostElement, 'click', function (event) {
-                _this.ngZone.run(function () {
-                    _this.handleWrapperClick(event);
-                });
-            }));
-        });
-    };
-    ColorPickerComponent.prototype.handleHostId = function () {
-        var hostElement = this.host.nativeElement;
-        var existingId = hostElement.getAttribute('id');
-        if (existingId) {
-            this.focusableId = existingId;
-        }
-        else {
-            var id = "k-" + guid();
-            hostElement.setAttribute('id', id);
-            this.focusableId = id;
-        }
-    };
-    var ColorPickerComponent_1;
-    tslib_1.__decorate([
-        HostBinding('class.k-colorpicker'),
-        HostBinding('class.k-icon-picker'),
-        HostBinding('class.k-picker'),
-        tslib_1.__metadata("design:type", Boolean)
-    ], ColorPickerComponent.prototype, "hostClasses", void 0);
-    tslib_1.__decorate([
-        HostBinding('class.k-focus'),
-        tslib_1.__metadata("design:type", Boolean),
-        tslib_1.__metadata("design:paramtypes", [])
-    ], ColorPickerComponent.prototype, "focusedClass", null);
-    tslib_1.__decorate([
-        HostBinding('attr.aria-disabled'),
-        HostBinding('class.k-disabled'),
-        tslib_1.__metadata("design:type", Boolean),
-        tslib_1.__metadata("design:paramtypes", [])
-    ], ColorPickerComponent.prototype, "disabledClass", null);
-    tslib_1.__decorate([
-        HostBinding('attr.aria-readonly'),
-        tslib_1.__metadata("design:type", Boolean),
-        tslib_1.__metadata("design:paramtypes", [])
-    ], ColorPickerComponent.prototype, "ariaReadonly", null);
-    tslib_1.__decorate([
-        HostBinding('attr.aria-expanded'),
-        tslib_1.__metadata("design:type", Boolean),
-        tslib_1.__metadata("design:paramtypes", [])
-    ], ColorPickerComponent.prototype, "ariaExpanded", null);
-    tslib_1.__decorate([
-        HostBinding('attr.tabindex'),
-        tslib_1.__metadata("design:type", Number),
-        tslib_1.__metadata("design:paramtypes", [])
-    ], ColorPickerComponent.prototype, "hostTabindex", null);
-    tslib_1.__decorate([
-        HostBinding('attr.dir'),
-        tslib_1.__metadata("design:type", String)
-    ], ColorPickerComponent.prototype, "direction", void 0);
-    tslib_1.__decorate([
-        HostBinding('attr.role'),
-        tslib_1.__metadata("design:type", String)
-    ], ColorPickerComponent.prototype, "role", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Array)
-    ], ColorPickerComponent.prototype, "views", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", String),
-        tslib_1.__metadata("design:paramtypes", [String])
-    ], ColorPickerComponent.prototype, "view", null);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", String)
-    ], ColorPickerComponent.prototype, "activeView", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Boolean)
-    ], ColorPickerComponent.prototype, "readonly", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Boolean)
-    ], ColorPickerComponent.prototype, "disabled", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", String)
-    ], ColorPickerComponent.prototype, "format", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", String),
-        tslib_1.__metadata("design:paramtypes", [String])
-    ], ColorPickerComponent.prototype, "value", null);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Object),
-        tslib_1.__metadata("design:paramtypes", [Object])
-    ], ColorPickerComponent.prototype, "popupSettings", null);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Object),
-        tslib_1.__metadata("design:paramtypes", [Object])
-    ], ColorPickerComponent.prototype, "paletteSettings", null);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Object),
-        tslib_1.__metadata("design:paramtypes", [Object])
-    ], ColorPickerComponent.prototype, "gradientSettings", null);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", String)
-    ], ColorPickerComponent.prototype, "icon", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Object)
-    ], ColorPickerComponent.prototype, "iconClass", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Boolean)
-    ], ColorPickerComponent.prototype, "clearButton", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Number),
-        tslib_1.__metadata("design:paramtypes", [Number])
-    ], ColorPickerComponent.prototype, "tabindex", null);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Boolean)
-    ], ColorPickerComponent.prototype, "preview", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", String)
-    ], ColorPickerComponent.prototype, "actionsLayout", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", String),
-        tslib_1.__metadata("design:paramtypes", [String])
-    ], ColorPickerComponent.prototype, "size", null);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", String),
-        tslib_1.__metadata("design:paramtypes", [String])
-    ], ColorPickerComponent.prototype, "rounded", null);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", String),
-        tslib_1.__metadata("design:paramtypes", [String])
-    ], ColorPickerComponent.prototype, "fillMode", null);
-    tslib_1.__decorate([
-        Output(),
-        tslib_1.__metadata("design:type", EventEmitter)
-    ], ColorPickerComponent.prototype, "valueChange", void 0);
-    tslib_1.__decorate([
-        Output(),
-        tslib_1.__metadata("design:type", EventEmitter)
-    ], ColorPickerComponent.prototype, "open", void 0);
-    tslib_1.__decorate([
-        Output(),
-        tslib_1.__metadata("design:type", EventEmitter)
-    ], ColorPickerComponent.prototype, "close", void 0);
-    tslib_1.__decorate([
-        Output('focus'),
-        tslib_1.__metadata("design:type", EventEmitter)
-    ], ColorPickerComponent.prototype, "onFocus", void 0);
-    tslib_1.__decorate([
-        Output('blur'),
-        tslib_1.__metadata("design:type", EventEmitter)
-    ], ColorPickerComponent.prototype, "onBlur", void 0);
-    tslib_1.__decorate([
-        Output(),
-        tslib_1.__metadata("design:type", EventEmitter)
-    ], ColorPickerComponent.prototype, "cancel", void 0);
-    tslib_1.__decorate([
-        Output(),
-        tslib_1.__metadata("design:type", EventEmitter)
-    ], ColorPickerComponent.prototype, "activeColorClick", void 0);
-    tslib_1.__decorate([
-        Output(),
-        tslib_1.__metadata("design:type", EventEmitter)
-    ], ColorPickerComponent.prototype, "activeViewChange", void 0);
-    tslib_1.__decorate([
-        ViewChild('container', { read: ViewContainerRef, static: true }),
-        tslib_1.__metadata("design:type", ViewContainerRef)
-    ], ColorPickerComponent.prototype, "container", void 0);
-    tslib_1.__decorate([
-        ViewChild('activeColor', { static: true }),
-        tslib_1.__metadata("design:type", ElementRef)
-    ], ColorPickerComponent.prototype, "activeColor", void 0);
-    tslib_1.__decorate([
-        ViewChild('popupTemplate', { static: true }),
-        tslib_1.__metadata("design:type", TemplateRef)
-    ], ColorPickerComponent.prototype, "popupTemplate", void 0);
-    tslib_1.__decorate([
-        ViewChild('flatColorPicker', { static: false }),
-        tslib_1.__metadata("design:type", FlatColorPickerComponent)
-    ], ColorPickerComponent.prototype, "flatColorPicker", void 0);
-    ColorPickerComponent = ColorPickerComponent_1 = tslib_1.__decorate([
-        Component({
-            exportAs: 'kendoColorPicker',
-            selector: 'kendo-colorpicker',
-            providers: [{
-                    multi: true,
-                    provide: NG_VALUE_ACCESSOR,
-                    useExisting: forwardRef(function () { return ColorPickerComponent_1; })
-                }, {
-                    provide: KendoInput,
-                    useExisting: forwardRef(function () { return ColorPickerComponent_1; })
-                },
-                ColorPickerLocalizationService,
-                {
-                    provide: LocalizationService,
-                    useExisting: ColorPickerLocalizationService
-                },
-                {
-                    provide: L10N_PREFIX,
-                    useValue: 'kendo.colorpicker'
-                }
-            ],
-            template: "\n        <ng-container kendoColorPickerLocalizedMessages\n            i18n-colorPickerNoColor=\"kendo.colorpicker.colorPickerNoColor|The aria-label applied to the ColorPicker component when the value is empty.\"\n            colorPickerNoColor=\"Colorpicker no color chosen\"\n            i18n-flatColorPickerNoColor=\"kendo.colorpicker.flatColorPickerNoColor|The aria-label applied to the FlatColorPicker component when the value is empty.\"\n            flatColorPickerNoColor=\"Flatcolorpicker no color chosen\"\n            i18n-colorGradientNoColor=\"kendo.colorpicker.colorGradientNoColor|The aria-label applied to the ColorGradient component when the value is empty.\"\n            colorGradientNoColor=\"Colorgradient no color chosen\"\n            i18n-colorPaletteNoColor=\"kendo.colorpicker.colorPaletteNoColor|The aria-label applied to the ColorPalette component when the value is empty.\"\n            colorPaletteNoColor=\"Colorpalette no color chosen\"\n            i18n-colorGradientHandle=\"kendo.colorpicker.colorGradientHandle|The title for the gradient color drag handle chooser.\"\n            colorGradientHandle=\"Choose color\"\n            i18n-clearButton=\"kendo.colorpicker.clearButton|The title for the clear button.\"\n            clearButton=\"Clear value\"\n            i18n-hueSliderHandle=\"kendo.colorpicker.hueSliderHandle|The title for the hue slider handle.\"\n            hueSliderHandle=\"Set hue\"\n            i18n-opacitySliderHandle=\"kendo.colorpicker.opacitySliderHandle|The title for the opacity slider handle.\"\n            opacitySliderHandle=\"Set opacity\"\n            i18n-contrastRatio=\"kendo.colorpicker.contrastRatio|The contrast ratio message for the contrast tool.\"\n            contrastRatio=\"Contrast ratio\"\n            i18n-previewColor=\"kendo.colorpicker.previewColor|The message for the color preview pane.\"\n            previewColor=\"Color preview\"\n            i18n-revertSelection=\"kendo.colorpicker.revertSelection|The message for the selected color pane.\"\n            revertSelection=\"Revert selection\"\n            i18n-gradientView=\"kendo.colorpicker.gradientView|The message for the gradient view button.\"\n            gradientView=\"Gradient view\"\n            i18n-paletteView=\"kendo.colorpicker.paletteView|The message for the palette view button.\"\n            paletteView=\"Palette view\"\n            i18n-formatButton=\"kendo.colorpicker.formatButton|The message for the input format toggle button.\"\n            formatButton=\"Change color format\"\n            i18n-applyButton=\"kendo.colorpicker.applyButton|The message for the Apply action button.\"\n            applyButton=\"Apply\"\n            i18n-cancelButton=\"kendo.colorpicker.cancelButton|The message for the Cancel action button.\"\n            cancelButton=\"Cancel\">\n        </ng-container>\n        <span #activeColor class=\"k-input-inner\">\n            <span\n                class=\"k-value-icon k-color-preview\"\n                [ngClass]=\"{'k-icon-color-preview': iconStyles, 'k-no-color': !value}\">\n                <span *ngIf=\"iconClass || icon\" class=\"k-color-preview-icon k-icon\" [ngClass]=\"iconStyles\"></span>\n                <span class=\"k-color-preview-mask\" [style.background-color]=\"value\"></span>\n            </span>\n        </span>\n        <button\n            tabindex=\"-1\"\n            type=\"button\"\n            class=\"k-input-button k-button k-button-md k-button-solid k-button-solid-base k-icon-button\">\n                <span class=\"k-button-icon k-icon k-i-arrow-s\"></span>\n        </button>\n        <ng-template #popupTemplate>\n            <kendo-flatcolorpicker\n                #flatColorPicker\n                [value]=\"value\"\n                [format]=\"format\"\n                [views]=\"views\"\n                [activeView]=\"activeView\"\n                [actionsLayout]=\"actionsLayout\"\n                [preview]=\"preview\"\n                [gradientSettings]=\"gradientSettings\"\n                [paletteSettings]=\"paletteSettings\"\n                [clearButton]=\"clearButton\"\n                (cancel)=\"handleCancelEvent($event)\"\n                (focusout)=\"handlePopupBlur($event)\"\n                (valueChange)=\"handleValueChange($event)\"\n                (keydown)=\"handlePopupKeyDown($event)\"\n                (activeViewChange)=\"activeViewChange.emit($event)\"\n                (actionButtonClick)=\"togglePopup()\">\n            </kendo-flatcolorpicker>\n        </ng-template>\n        <ng-container #container></ng-container>\n    "
-        }),
-        tslib_1.__metadata("design:paramtypes", [ElementRef,
-            PopupService,
-            ChangeDetectorRef,
-            LocalizationService,
-            NgZone,
-            Renderer2])
-    ], ColorPickerComponent);
-    return ColorPickerComponent;
-}());
-export { ColorPickerComponent };