@progress/kendo-angular-inputs
Version:
Kendo UI for Angular Inputs Package - Everything you need to build professional form functionality (Checkbox, ColorGradient, ColorPalette, ColorPicker, FlatColorPicker, FormField, MaskedTextBox, NumericTextBox, RadioButton, RangeSlider, Slider, Switch, Te
439 lines (438 loc) • 19.3 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2024 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
/* eslint-disable @typescript-eslint/no-explicit-any */
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';
import { caretAltExpandIcon } from '@progress/kendo-svg-icons';
import { NumericLabelDirective } from './color-gradient-numeric-label.directive';
import { NgIf } from '@angular/common';
import { ButtonComponent } from '@progress/kendo-angular-buttons';
import * as i0 from "@angular/core";
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();
}
/**
* Indicates whether any of the inputs are focused.
*/
get isFocused() {
if (!(isDocumentAvailable() && isPresent(this.host))) {
return false;
}
const activeElement = document.activeElement;
return this.host.nativeElement.contains(activeElement);
}
/**
* Indicates whether any of the rgba inputs have value.
*/
get rgbaInputValid() {
return Object.keys(this.rgba).every(key => isPresent(this.rgba[key]));
}
ngAfterViewInit() {
this.initDomEvents();
}
ngOnDestroy() {
if (this.subscriptions) {
this.subscriptions.unsubscribe();
}
}
ngOnChanges(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;
}
}
get formatButtonTitle() {
return this.localizationService.get('formatButton');
}
handleRgbaValueChange() {
const 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);
}
focusDragHandle(event) {
event.preventDefault();
event.stopImmediatePropagation();
this.tabOut.emit();
}
handleHexValueChange(hex) {
this.hex = hex;
const color = parseColor(hex, 'rgba', this.opacity);
if (!isPresent(color) || color === this.value) {
return;
}
this.value = color;
this.rgba = getRGBA(color);
this.valueChange.emit(color);
}
handleRgbaInputBlur() {
if (!this.rgbaInputValid) {
this.rgba = getRGBA(this.value);
}
}
handleHexInputBlur() {
this.hex = parseColor(this.value, 'hex', this.opacity);
}
focusLast() {
this.lastInput().focus();
}
onTab() {
if (this.opacity) {
return;
}
}
toggleFormatView() {
this.formatView = this.formatView === 'hex' ? 'rgba' : 'hex';
}
initDomEvents() {
if (!this.host) {
return;
}
this.subscriptions.add(this.renderer.listen(this.toggleFormatButton.nativeElement, 'click', () => this.toggleFormatView()));
}
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: `
<div class="k-vstack">
<button
kendoButton
type="button"
fillMode="flat"
icon="caret-alt-expand"
[]="caretAltExpandIcon"
class="k-colorgradient-toggle-mode"
[]="formatButtonTitle"
[]="formatButtonTitle"
[]="disabled"
[]="tabindex.toString()"
>
</button>
</div>
<div *ngIf="formatView === 'hex'" class="k-vstack">
<input
[]="focusableId"
class="k-input k-textbox k-input-solid k-input-md k-rounded-md k-hex-value"
[]="readonly"
[]="disabled"
[]="readonly"
[]="hex || ''"
(blur)="handleHexInputBlur()"
(input)="handleHexValueChange(hexInput.value)"
[]="tabindex.toString()"
(keydown.tab)="focusDragHandle($event)"
/>
<label [for]="focusableId" class="k-colorgradient-input-label">HEX</label>
</div>
<ng-container *ngIf="formatView === 'rgba'">
<div class="k-vstack">
<kendo-numerictextbox
kendoAdditionalNumericLabel="red"
[]="localizationService"
[]="disabled"
[]="readonly"
[]="tabindex"
[]="0"
[]="255"
[(value)]="rgba.r"
[]="true"
[]="false"
[]="'n'"
[]="0"
(blur)="handleRgbaInputBlur()"
(valueChange)="handleRgbaValueChange()">
</kendo-numerictextbox>
<label [for]="red.focusableId" class="k-colorgradient-input-label">R</label>
</div>
<div class="k-vstack">
<kendo-numerictextbox
kendoAdditionalNumericLabel="green"
[]="localizationService"
[]="disabled"
[]="readonly"
[]="tabindex"
[]="0"
[]="255"
[(value)]="rgba.g"
[]="true"
[]="false"
[]="'n'"
[]="0"
(blur)="handleRgbaInputBlur()"
(valueChange)="handleRgbaValueChange()">
</kendo-numerictextbox>
<label [for]="green.focusableId" class="k-colorgradient-input-label">G</label>
</div>
<div class="k-vstack">
<kendo-numerictextbox
kendoAdditionalNumericLabel="blue"
[]="localizationService"
[]="disabled"
[]="readonly"
[]="tabindex"
[]="0"
[]="255"
[(value)]="rgba.b"
[]="true"
[]="false"
[]="'n'"
[]="0"
(blur)="handleRgbaInputBlur()"
(valueChange)="handleRgbaValueChange()"
(keydown.tab)="onTab()">
</kendo-numerictextbox>
<label [for]="blue.focusableId" class="k-colorgradient-input-label">B</label>
</div>
<div class="k-vstack" *ngIf="opacity">
<kendo-numerictextbox
kendoAdditionalNumericLabel="alpha"
[]="localizationService"
[]="disabled"
[]="readonly"
[]="tabindex"
[]="0"
[]="1"
[(value)]="rgba.a"
[]="true"
[]="false"
[]="0.01"
[]="'n2'"
[]="2"
(blur)="handleRgbaInputBlur()"
(valueChange)="handleRgbaValueChange()"
(keydown.tab)="focusDragHandle($event)">
</kendo-numerictextbox>
<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: [{
type: Component,
args: [{
selector: 'kendo-colorinput',
template: `
<div class="k-vstack">
<button
kendoButton
type="button"
fillMode="flat"
icon="caret-alt-expand"
[]="caretAltExpandIcon"
class="k-colorgradient-toggle-mode"
[]="formatButtonTitle"
[]="formatButtonTitle"
[]="disabled"
[]="tabindex.toString()"
>
</button>
</div>
<div *ngIf="formatView === 'hex'" class="k-vstack">
<input
[]="focusableId"
class="k-input k-textbox k-input-solid k-input-md k-rounded-md k-hex-value"
[]="readonly"
[]="disabled"
[]="readonly"
[]="hex || ''"
(blur)="handleHexInputBlur()"
(input)="handleHexValueChange(hexInput.value)"
[]="tabindex.toString()"
(keydown.tab)="focusDragHandle($event)"
/>
<label [for]="focusableId" class="k-colorgradient-input-label">HEX</label>
</div>
<ng-container *ngIf="formatView === 'rgba'">
<div class="k-vstack">
<kendo-numerictextbox
kendoAdditionalNumericLabel="red"
[]="localizationService"
[]="disabled"
[]="readonly"
[]="tabindex"
[]="0"
[]="255"
[(value)]="rgba.r"
[]="true"
[]="false"
[]="'n'"
[]="0"
(blur)="handleRgbaInputBlur()"
(valueChange)="handleRgbaValueChange()">
</kendo-numerictextbox>
<label [for]="red.focusableId" class="k-colorgradient-input-label">R</label>
</div>
<div class="k-vstack">
<kendo-numerictextbox
kendoAdditionalNumericLabel="green"
[]="localizationService"
[]="disabled"
[]="readonly"
[]="tabindex"
[]="0"
[]="255"
[(value)]="rgba.g"
[]="true"
[]="false"
[]="'n'"
[]="0"
(blur)="handleRgbaInputBlur()"
(valueChange)="handleRgbaValueChange()">
</kendo-numerictextbox>
<label [for]="green.focusableId" class="k-colorgradient-input-label">G</label>
</div>
<div class="k-vstack">
<kendo-numerictextbox
kendoAdditionalNumericLabel="blue"
[]="localizationService"
[]="disabled"
[]="readonly"
[]="tabindex"
[]="0"
[]="255"
[(value)]="rgba.b"
[]="true"
[]="false"
[]="'n'"
[]="0"
(blur)="handleRgbaInputBlur()"
(valueChange)="handleRgbaValueChange()"
(keydown.tab)="onTab()">
</kendo-numerictextbox>
<label [for]="blue.focusableId" class="k-colorgradient-input-label">B</label>
</div>
<div class="k-vstack" *ngIf="opacity">
<kendo-numerictextbox
kendoAdditionalNumericLabel="alpha"
[]="localizationService"
[]="disabled"
[]="readonly"
[]="tabindex"
[]="0"
[]="1"
[(value)]="rgba.a"
[]="true"
[]="false"
[]="0.01"
[]="'n2'"
[]="2"
(blur)="handleRgbaInputBlur()"
(valueChange)="handleRgbaValueChange()"
(keydown.tab)="focusDragHandle($event)">
</kendo-numerictextbox>
<label [for]="alpha.focusableId" class="k-colorgradient-input-label">A</label>
</div>
</ng-container>
`,
standalone: true,
imports: [ButtonComponent, NgIf, NumericTextBoxComponent, NumericLabelDirective]
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.LocalizationService }]; }, propDecorators: { focusableId: [{
type: Input
}], formatView: [{
type: Input
}], tabindex: [{
type: Input
}], value: [{
type: Input
}], opacity: [{
type: Input
}], disabled: [{
type: Input
}], readonly: [{
type: Input
}], valueChange: [{
type: Output
}], tabOut: [{
type: Output
}], colorInputClass: [{
type: HostBinding,
args: ['class.k-colorgradient-inputs']
}, {
type: HostBinding,
args: ['class.k-hstack']
}], opacityInput: [{
type: ViewChild,
args: ['opacityInput']
}], hexInput: [{
type: ViewChild,
args: ['hexInput']
}], blueInput: [{
type: ViewChild,
args: ['blue']
}], toggleFormatButton: [{
type: ViewChild,
args: ['toggleFormatButton', { static: false, read: ElementRef }]
}] } });