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

package/dist/es/colorpicker/color-input.component.js

@@ -1,193 +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 { Component, Input, Output, EventEmitter, ElementRef, HostBinding, ViewChild, Renderer2 } from '@angular/core';
-import { getRGBA, parseColor, getColorFromRGBA } from './utils';
-import { isPresent } from '../common/utils';
-import { guid, isDocumentAvailable } from '@progress/kendo-angular-common';
-import { Subscription } from 'rxjs';
-import { LocalizationService } from '@progress/kendo-angular-l10n';
-import { NumericTextBoxComponent } from './../numerictextbox/numerictextbox.component';
-/**
- * @hidden
- */
-var ColorInputComponent = /** @class */ (function () {
-    function ColorInputComponent(host, renderer, localizationService) {
-        this.host = host;
-        this.renderer = renderer;
-        this.localizationService = localizationService;
-        /**
-         * The id of the hex input.
-         */
-        this.focusableId = "k-" + guid();
-        /**
-         * 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.
-         */
-        this.readonly = false;
-        /**
-         * Emits a parsed rgba string color.
-         */
-        this.valueChange = new EventEmitter();
-        this.colorInputClass = true;
-        /**
-         * The rgba inputs values.
-         */
-        this.rgba = {};
-        this.subscriptions = new Subscription();
-    }
-    Object.defineProperty(ColorInputComponent.prototype, "isFocused", {
-        /**
-         * Indicates whether any of the inputs are focused.
-         */
-        get: function () {
-            if (!(isDocumentAvailable() && isPresent(this.host))) {
-                return false;
-            }
-            var activeElement = document.activeElement;
-            return this.host.nativeElement.contains(activeElement);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ColorInputComponent.prototype, "rgbaInputValid", {
-        /**
-         * Indicates whether any of the rgba inputs have value.
-         */
-        get: function () {
-            var _this = this;
-            return Object.keys(this.rgba).every(function (key) { return isPresent(_this.rgba[key]); });
-        },
-        enumerable: true,
-        configurable: true
-    });
-    ColorInputComponent.prototype.ngAfterViewInit = function () {
-        this.initDomEvents();
-    };
-    ColorInputComponent.prototype.ngOnDestroy = function () {
-        if (this.subscriptions) {
-            this.subscriptions.unsubscribe();
-        }
-    };
-    ColorInputComponent.prototype.ngOnChanges = function (changes) {
-        if (isPresent(changes.value) && !this.isFocused) {
-            this.hex = parseColor(this.value, 'hex', this.opacity);
-            this.rgba = getRGBA(this.value);
-            this.rgba.a = parseColor(this.value, 'rgba', this.opacity) ? this.rgba.a : 1;
-        }
-    };
-    Object.defineProperty(ColorInputComponent.prototype, "formatButtonTitle", {
-        get: function () {
-            return this.localizationService.get('formatButton');
-        },
-        enumerable: true,
-        configurable: true
-    });
-    ColorInputComponent.prototype.handleRgbaValueChange = function () {
-        var color = getColorFromRGBA(this.rgba);
-        if (!this.rgbaInputValid || color === this.value) {
-            return;
-        }
-        this.value = color;
-        this.rgba = getRGBA(this.value);
-        this.hex = parseColor(color, 'hex', this.opacity);
-        this.valueChange.emit(color);
-    };
-    ColorInputComponent.prototype.handleHexValueChange = function (hex) {
-        this.hex = hex;
-        var color = parseColor(hex, 'rgba', this.opacity);
-        if (!isPresent(color) || color === this.value) {
-            return;
-        }
-        this.value = color;
-        this.rgba = getRGBA(color);
-        this.valueChange.emit(color);
-    };
-    ColorInputComponent.prototype.handleRgbaInputBlur = function () {
-        if (!this.rgbaInputValid) {
-            this.rgba = getRGBA(this.value);
-        }
-    };
-    ColorInputComponent.prototype.handleHexInputBlur = function () {
-        this.hex = parseColor(this.value, 'hex', this.opacity);
-    };
-    ColorInputComponent.prototype.toggleFormatView = function () {
-        this.formatView = this.formatView === 'hex' ? 'rgba' : 'hex';
-    };
-    ColorInputComponent.prototype.initDomEvents = function () {
-        var _this = this;
-        if (!this.host) {
-            return;
-        }
-        this.subscriptions.add(this.renderer.listen(this.toggleFormatButton.nativeElement, 'click', function () { return _this.toggleFormatView(); }));
-    };
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", String)
-    ], ColorInputComponent.prototype, "focusableId", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", String)
-    ], ColorInputComponent.prototype, "formatView", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", String)
-    ], ColorInputComponent.prototype, "value", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Boolean)
-    ], ColorInputComponent.prototype, "opacity", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Boolean)
-    ], ColorInputComponent.prototype, "disabled", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Boolean)
-    ], ColorInputComponent.prototype, "readonly", void 0);
-    tslib_1.__decorate([
-        Output(),
-        tslib_1.__metadata("design:type", EventEmitter)
-    ], ColorInputComponent.prototype, "valueChange", void 0);
-    tslib_1.__decorate([
-        HostBinding('class.k-colorgradient-inputs'),
-        HostBinding('class.k-hstack'),
-        tslib_1.__metadata("design:type", Boolean)
-    ], ColorInputComponent.prototype, "colorInputClass", void 0);
-    tslib_1.__decorate([
-        ViewChild('opacityInput', { static: false }),
-        tslib_1.__metadata("design:type", NumericTextBoxComponent)
-    ], ColorInputComponent.prototype, "opacityInput", void 0);
-    tslib_1.__decorate([
-        ViewChild('hexInput', { read: ElementRef, static: false }),
-        tslib_1.__metadata("design:type", ElementRef)
-    ], ColorInputComponent.prototype, "hexInput", void 0);
-    tslib_1.__decorate([
-        ViewChild('blueInput', { read: ElementRef, static: false }),
-        tslib_1.__metadata("design:type", ElementRef)
-    ], ColorInputComponent.prototype, "blueInput", void 0);
-    tslib_1.__decorate([
-        ViewChild('toggleFormatButton', { static: false }),
-        tslib_1.__metadata("design:type", ElementRef)
-    ], ColorInputComponent.prototype, "toggleFormatButton", void 0);
-    ColorInputComponent = tslib_1.__decorate([
-        Component({
-            selector: 'kendo-colorinput',
-            template: "\n        <div class=\"k-vstack\">\n            <button #toggleFormatButton\n                class=\"k-colorgradient-toggle-mode k-button k-button-md k-button-flat k-button-flat-base k-icon-button\"\n                [attr.aria-label]=\"formatButtonTitle\"\n                [attr.title]=\"formatButtonTitle\"\n                type=\"button\"\n            >\n                <span class=\"k-button-icon k-icon k-i-arrows-kpi\"></span>\n            </button>\n        </div>\n        <div *ngIf=\"formatView === 'hex'\" class=\"k-vstack\">\n            <input\n                #hexInput\n                [id]=\"focusableId\"\n                class=\"k-input k-textbox k-input-solid k-input-md k-rounded-md k-hex-value\"\n                [disabled]=\"disabled\"\n                [readonly]=\"readonly\"\n                [value]=\"hex || ''\"\n                (blur)=\"handleHexInputBlur()\"\n                (input)=\"handleHexValueChange(hexInput.value)\"\n            />\n            <label [for]=\"focusableId\" class=\"k-colorgradient-input-label\">HEX</label>\n        </div>\n        <ng-container *ngIf=\"formatView === 'rgba'\">\n            <div class=\"k-vstack\">\n                <kendo-numerictextbox\n                    #red\n                    [disabled]=\"disabled\"\n                    [readonly]=\"readonly\"\n                    [min]=\"0\"\n                    [max]=\"255\"\n                    [(value)]=\"rgba.r\"\n                    [autoCorrect]=\"true\"\n                    [spinners]=\"false\"\n                    [format]=\"'n'\"\n                    [decimals]=\"0\"\n                    (blur)=\"handleRgbaInputBlur()\"\n                    (valueChange)=\"handleRgbaValueChange()\">\n                </kendo-numerictextbox>\n                <label [for]=\"red.focusableId\" class=\"k-colorgradient-input-label\">R</label>\n            </div>\n            <div class=\"k-vstack\">\n                <kendo-numerictextbox\n                    #green\n                    [disabled]=\"disabled\"\n                    [readonly]=\"readonly\"\n                    [min]=\"0\"\n                    [max]=\"255\"\n                    [(value)]=\"rgba.g\"\n                    [autoCorrect]=\"true\"\n                    [spinners]=\"false\"\n                    [format]=\"'n'\"\n                    [decimals]=\"0\"\n                    (blur)=\"handleRgbaInputBlur()\"\n                    (valueChange)=\"handleRgbaValueChange()\">\n                </kendo-numerictextbox>\n                <label [for]=\"green.focusableId\" class=\"k-colorgradient-input-label\">G</label>\n            </div>\n            <div class=\"k-vstack\">\n                <kendo-numerictextbox\n                    #blue\n                    [disabled]=\"disabled\"\n                    [readonly]=\"readonly\"\n                    [min]=\"0\"\n                    [max]=\"255\"\n                    [(value)]=\"rgba.b\"\n                    [autoCorrect]=\"true\"\n                    [spinners]=\"false\"\n                    [format]=\"'n'\"\n                    [decimals]=\"0\"\n                    (blur)=\"handleRgbaInputBlur()\"\n                    (valueChange)=\"handleRgbaValueChange()\">\n                </kendo-numerictextbox>\n                <label [for]=\"blue.focusableId\" class=\"k-colorgradient-input-label\">B</label>\n            </div>\n            <div class=\"k-vstack\" *ngIf=\"opacity\">\n                <kendo-numerictextbox  #opacityInput\n                    #alpha\n                    [disabled]=\"disabled\"\n                    [readonly]=\"readonly\"\n                    [min]=\"0\"\n                    [max]=\"1\"\n                    [(value)]=\"rgba.a\"\n                    [autoCorrect]=\"true\"\n                    [spinners]=\"false\"\n                    [step]=\"0.01\"\n                    [format]=\"'n2'\"\n                    [decimals]=\"2\"\n                    (blur)=\"handleRgbaInputBlur()\"\n                    (valueChange)=\"handleRgbaValueChange()\">\n                </kendo-numerictextbox>\n                <label [for]=\"alpha.focusableId\" class=\"k-colorgradient-input-label\">A</label>\n            </div>\n        </ng-container>\n    "
-        }),
-        tslib_1.__metadata("design:paramtypes", [ElementRef,
-            Renderer2,
-            LocalizationService])
-    ], ColorInputComponent);
-    return ColorInputComponent;
-}());
-export { ColorInputComponent };