@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
106 lines (105 loc) • 5.06 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { Component, HostBinding, Input } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { isPresent } from '../common/utils';
import { AA_RATIO, STEP_COUNT, AAA_RATIO } from './constants';
import { bezierCommand, getContrastFromTwoRGBAs, getRGBA, getColorFromHSV, svgPath, controlPoint, line } from './utils';
import { isDocumentAvailable } from '@progress/kendo-angular-common';
import { NgFor } from '@angular/common';
import * as i0 from "@angular/core";
/**
* @hidden
*/
export class ColorContrastSvgComponent {
hostClass = true;
wrapper;
hsva;
backgroundColor;
paths;
oldHsva;
oldH;
oldA;
metrics;
ngAfterViewInit() {
if (!isDocumentAvailable()) {
return;
}
this.metrics = this.wrapper.getBoundingClientRect();
this.oldA = this.hsva.value.a;
this.oldH = this.hsva.value.h;
this.hsva.subscribe((value) => {
if (value.h !== this.oldH || value.a !== this.oldA) {
this.oldH = value.h;
this.oldA = value.a;
this.setPaths();
}
});
}
ngOnChanges(changes) {
if (isPresent(changes['backgroundColor']) && this.metrics) {
this.setPaths();
}
}
setPaths() {
const bezierCommandCalc = bezierCommand(controlPoint(line));
this.paths = [svgPath(this.getPaths(AA_RATIO, STEP_COUNT), bezierCommandCalc),
svgPath(this.getPaths(AA_RATIO, STEP_COUNT, true), bezierCommandCalc),
svgPath(this.getPaths(AAA_RATIO, STEP_COUNT), bezierCommandCalc),
svgPath(this.getPaths(AAA_RATIO, STEP_COUNT, true), bezierCommandCalc)];
}
findValue(contrast, saturation, low, high, comparer) {
const mid = (low + high) / 2;
const hsva = { ...this.hsva.value, s: saturation / this.metrics.width, v: 1 - mid / this.metrics.height };
const currentContrast = getContrastFromTwoRGBAs(getRGBA(getColorFromHSV(hsva)), getRGBA(this.backgroundColor || ''));
if (low + 0.5 > high) {
if (currentContrast < contrast + 1 && currentContrast > contrast - 1) {
return mid;
}
else {
return null;
}
}
if (comparer(currentContrast, contrast)) {
return this.findValue(contrast, saturation, low, high - (high - low) / 2, comparer);
}
return this.findValue(contrast, saturation, low + (high - low) / 2, high, comparer);
}
getPaths(contrast, stepCount, reversed = false) {
const points = [];
for (let i = 0; i <= this.metrics.width; i += this.metrics.width / stepCount) {
const value = this.findValue(contrast, i, 0, this.metrics.height, reversed ? ((a, b) => a < b) : ((a, b) => a > b));
if (value !== null) {
points.push([i, value]);
}
}
return points;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorContrastSvgComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColorContrastSvgComponent, isStandalone: true, selector: "[kendoColorContrastSvg]", inputs: { wrapper: "wrapper", hsva: "hsva", backgroundColor: "backgroundColor" }, host: { properties: { "class.k-color-contrast-svg": "this.hostClass" } }, usesOnChanges: true, ngImport: i0, template: `
<svg:path *ngFor="let path of paths" [attr.d]="path" fill="none" stroke="white" stroke-width="1"></svg:path>
`, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorContrastSvgComponent, decorators: [{
type: Component,
args: [{
// eslint-disable-next-line @angular-eslint/component-selector
selector: '[kendoColorContrastSvg]',
template: `
<svg:path *ngFor="let path of paths" [attr.d]="path" fill="none" stroke="white" stroke-width="1"></svg:path>
`,
standalone: true,
imports: [NgFor]
}]
}], propDecorators: { hostClass: [{
type: HostBinding,
args: ['class.k-color-contrast-svg']
}], wrapper: [{
type: Input
}], hsva: [{
type: Input
}], backgroundColor: [{
type: Input
}] } });