@ngxmc/color-picker
Version:
Angular Material Color Picker
1,250 lines • 75.1 kB
JavaScript
import * as i0 from '@angular/core';
import { output, input, signal, Input, Directive, Component, ViewEncapsulation, Injectable, InjectionToken, viewChild, ChangeDetectionStrategy, EventEmitter, DOCUMENT, HostBinding, Output, Optional, Inject, forwardRef, effect, untracked, HostListener } from '@angular/core';
import * as i3 from '@angular/forms';
import { FormGroup, FormControl, Validators, ReactiveFormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
import * as i1 from '@angular/material/form-field';
import { MatFormFieldModule } from '@angular/material/form-field';
import * as i2 from '@angular/material/input';
import { MatInputModule, MAT_INPUT_VALUE_ACCESSOR } from '@angular/material/input';
import { Subject, merge, Subscription, of } from 'rxjs';
import { takeUntil, debounceTime, distinctUntilChanged, take, filter } from 'rxjs/operators';
import { NgClass } from '@angular/common';
import * as i1$1 from '@angular/material/button';
import { MatButtonModule } from '@angular/material/button';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { ESCAPE, UP_ARROW, DOWN_ARROW } from '@angular/cdk/keycodes';
import * as i2$1 from '@angular/cdk/overlay';
import { Overlay, OverlayConfig } from '@angular/cdk/overlay';
import { ComponentPortal } from '@angular/cdk/portal';
import { matDatepickerAnimations } from '@angular/material/datepicker';
import * as i1$2 from '@angular/material/dialog';
import * as i4 from '@angular/cdk/bidi';
import * as i2$2 from '@angular/material/icon';
import { MatIconModule } from '@angular/material/icon';
const trimLeft = /^\s+/;
const trimRight = /\s+$/;
const tinyCounter = 0;
const mathRound = Math.round;
const mathMin = Math.min;
const mathMax = Math.max;
const mathRandom = Math.random;
const NUMERIC_REGEX = /[^0-9]/g;
const MAX_RGB = 255;
const MIN_RGB = 0;
/** List basic colors */
const BASIC_COLORS = [
'#ffffff',
'#ffff00',
'#ff00ff',
'#ff0000',
'#c0c0c0',
'#808080',
'#808000',
'#800080',
'#800000',
'#00ffff',
'#00ff00',
'#008080',
'#008000',
'#0000ff',
'#000080',
'#000000',
];
/**
* Get color at position
* @param ctx
* @param x
* @param y
*/
function getColorAtPosition(ctx, x, y) {
const imageData = ctx.getImageData(x, y, 1, 1).data;
return { r: imageData[0], g: imageData[1], b: imageData[2] };
}
// `rgbaToHex`
// Converts an RGBA color plus alpha transparency to hex
// Assumes r, g, b are contained in the set [0, 255] and
// a in [0, 1]. Returns a 4 or 8 character rgba hex
function rgbaToHex(r, g, b, a, allow4Char) {
var hex = [
pad2(mathRound(r).toString(16)),
pad2(mathRound(g).toString(16)),
pad2(mathRound(b).toString(16)),
pad2(convertDecimalToHex(a)),
];
// Return a 4 character hex if possible
if (allow4Char &&
hex[0].charAt(0) == hex[0].charAt(1) &&
hex[1].charAt(0) == hex[1].charAt(1) &&
hex[2].charAt(0) == hex[2].charAt(1) &&
hex[3].charAt(0) == hex[3].charAt(1)) {
return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0) + hex[3].charAt(0);
}
return hex.join('');
}
// Force a hex value to have 2 characters
function pad2(c) {
return c.length == 1 ? '0' + c : '' + c;
}
// Converts a decimal to a hex value
function convertDecimalToHex(d) {
return Math.round(parseFloat(d) * 255).toString(16);
}
// Converts a hex value to a decimal
function convertHexToDecimal(h) {
return parseIntFromHex(h) / 255;
}
// Parse a base-16 hex value into a base-10 integer
function parseIntFromHex(val) {
return parseInt(val, 16);
}
// `rgbToHex`
// Converts an RGB color to hex
// Assumes r, g, and b are contained in the set [0, 255]
// Returns a 3 or 6 character hex
function rgbToHex(r, g, b, allow3Char) {
var hex = [
pad2(mathRound(r).toString(16)),
pad2(mathRound(g).toString(16)),
pad2(mathRound(b).toString(16)),
];
// Return a 3 character hex if possible
if (allow3Char &&
hex[0].charAt(0) == hex[0].charAt(1) &&
hex[1].charAt(0) == hex[1].charAt(1) &&
hex[2].charAt(0) == hex[2].charAt(1)) {
return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0);
}
return hex.join('');
}
// Actual matching.
// Parentheses and commas are optional, but not required.
// Whitespace can take the place of commas or opening parent
const CSS_INTEGER = '[-\\+]?\\d+%?';
const CSS_NUMBER = '[-\\+]?\\d*\\.\\d+%?';
const CSS_UNIT = '(?:' + CSS_NUMBER + ')|(?:' + CSS_INTEGER + ')';
const PERMISSIVE_MATCH3 = '[\\s|\\(]+(' + CSS_UNIT + ')[,|\\s]+(' + CSS_UNIT + ')[,|\\s]+(' + CSS_UNIT + ')\\s*\\)?';
const PERMISSIVE_MATCH4 = '[\\s|\\(]+(' +
CSS_UNIT +
')[,|\\s]+(' +
CSS_UNIT +
')[,|\\s]+(' +
CSS_UNIT +
')[,|\\s]+(' +
CSS_UNIT +
')\\s*\\)?';
const matchers = {
CSS_UNIT: new RegExp(CSS_UNIT),
rgb: new RegExp('rgb' + PERMISSIVE_MATCH3),
rgba: new RegExp('rgba' + PERMISSIVE_MATCH4),
hsl: new RegExp('hsl' + PERMISSIVE_MATCH3),
hsla: new RegExp('hsla' + PERMISSIVE_MATCH4),
hsv: new RegExp('hsv' + PERMISSIVE_MATCH3),
hsva: new RegExp('hsva' + PERMISSIVE_MATCH4),
hex3: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
hex6: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,
hex4: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
hex8: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,
};
// `stringInputToObject`
// Permissive string parsing. Take in a number of formats, and output an object
// based on detected format. Returns `{ r, g, b }` or `{ h, s, l }` or `{ h, s, v}`
function stringInputToObject(color) {
color = color.replace(trimLeft, '').replace(trimRight, '').toLowerCase();
// Try to match string input using regular expressions.
// Keep most of the number bounding out of this function - don't worry about [0,1] or [0,100] or [0,360]
// Just return an object and let the conversion functions handle that.
// This way the result will be the same whether the tinycolor is initialized with string or object.
let match;
let obj;
if ((match = matchers.rgb.exec(color))) {
return { r: match[1], g: match[2], b: match[3], a: 1 };
}
if ((match = matchers.rgba.exec(color))) {
return { r: match[1], g: match[2], b: match[3], a: match[4] };
}
if ((match = matchers.hex8.exec(color))) {
return {
r: parseIntFromHex(match[1]),
g: parseIntFromHex(match[2]),
b: parseIntFromHex(match[3]),
a: convertHexToDecimal(match[4]),
};
}
if ((match = matchers.hex6.exec(color))) {
return {
r: parseIntFromHex(match[1]),
g: parseIntFromHex(match[2]),
b: parseIntFromHex(match[3]),
a: 1,
};
}
if ((match = matchers.hex4.exec(color))) {
return {
r: parseIntFromHex(match[1] + '' + match[1]),
g: parseIntFromHex(match[2] + '' + match[2]),
b: parseIntFromHex(match[3] + '' + match[3]),
a: convertHexToDecimal(match[4] + '' + match[4]),
};
}
if ((match = matchers.hex3.exec(color))) {
return {
r: parseIntFromHex(match[1] + '' + match[1]),
g: parseIntFromHex(match[2] + '' + match[2]),
b: parseIntFromHex(match[3] + '' + match[3]),
a: 1,
};
}
return null;
}
function createMissingDateImplError(provider) {
return Error(`NgxMatColorPicker: No provider found for ${provider}. You must define MAT_COLOR_FORMATS in your module`);
}
class Color {
constructor(_r, _g, _b, _a) {
this.r = _r > MAX_RGB ? MAX_RGB : _r;
this.g = _g > MAX_RGB ? MAX_RGB : _g;
this.b = _b > MAX_RGB ? MAX_RGB : _b;
if (_a != null) {
this.a = _a > 1 ? 1 : _a;
}
else {
this.a = 1;
}
this.roundA = Math.round(this.a);
this.hex = rgbToHex(this.r, this.g, this.b);
this.rgba = this.toRgba();
}
toHex(allow3Char) {
return rgbToHex(this.r, this.g, this.b, allow3Char);
}
toRgba() {
return `rgba(${this.r},${this.g},${this.b},${this.a})`;
}
toHexString(allow3Char) {
return '#' + this.toHex(allow3Char);
}
toRgbString() {
return this.a === 1
? 'rgb(' + Math.round(this.r) + ', ' + Math.round(this.g) + ', ' + Math.round(this.b) + ')'
: 'rgba(' +
Math.round(this.r) +
', ' +
Math.round(this.g) +
', ' +
Math.round(this.b) +
', ' +
this.roundA +
')';
}
toHex8(allow4Char) {
return rgbaToHex(this.r, this.g, this.b, this.a, allow4Char);
}
toHex8String(allow4Char) {
return '#' + this.toHex8(allow4Char);
}
toString(format) {
let formatSet = !!format;
let formattedString;
let hasAlpha = this.a < 1 && this.a >= 0;
let needsAlphaFormat = !formatSet &&
hasAlpha &&
(format === 'hex' ||
format === 'hex6' ||
format === 'hex3' ||
format === 'hex4' ||
format === 'hex8');
if (needsAlphaFormat) {
return this.toRgbString();
}
if (format === 'rgb') {
formattedString = this.toRgbString();
}
if (format === 'hex' || format === 'hex6') {
formattedString = this.toHexString();
}
if (format === 'hex3') {
formattedString = this.toHexString(true);
}
if (format === 'hex4') {
formattedString = this.toHex8String(true);
}
if (format === 'hex8') {
formattedString = this.toHex8String();
}
return formattedString || this.toHexString();
}
}
class NgxMatBaseColorCanvas {
set setColor(color) {
this.color.set(color);
}
constructor(zone, elementId) {
this.zone = zone;
this.colorChanged = output();
this.theme = input(...(ngDevMode ? [undefined, { debugName: "theme" }] : []));
this.color = signal(null, ...(ngDevMode ? [{ debugName: "color" }] : []));
this.x = 0;
this.y = 0;
this.drag = false;
this._destroyed = new Subject();
this.elementId = elementId;
}
ngOnDestroy() {
this._destroyed.next();
this._destroyed.complete();
}
ngAfterViewInit() {
this.canvas = document.getElementById(this.elementId);
this.ctx = this.canvas.getContext('2d');
this.width = this.canvas.width;
this.height = this.canvas.height;
this.draw();
}
draw() {
this.ctx.clearRect(0, 0, this.width, this.height);
this.ctx.rect(0, 0, this.width, this.height);
this.fillGradient();
if (this.y != 0) {
this.redrawIndicator(this.x, this.y);
}
}
onMousedown(e) {
this.drag = true;
this.changeColor(e);
this.zone.runOutsideAngular(() => {
this.canvas.addEventListener('mousemove', this.onMousemove.bind(this));
});
}
onMousemove(e) {
if (this.drag) {
this.zone.run(() => {
this.changeColor(e);
});
}
}
onMouseup(e) {
this.drag = false;
this.canvas.removeEventListener('mousemove', this.onMousemove);
}
emitChange(color) {
this.colorChanged.emit(color);
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgxMatBaseColorCanvas, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.4", type: NgxMatBaseColorCanvas, isStandalone: true, inputs: { theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, setColor: { classPropertyName: "setColor", publicName: "color", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { colorChanged: "colorChanged" }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgxMatBaseColorCanvas, decorators: [{
type: Directive
}], ctorParameters: () => [{ type: i0.NgZone }, { type: undefined }], propDecorators: { setColor: [{
type: Input,
args: [{
alias: 'color',
}]
}] } });
class NgxMatColorSliderComponent extends NgxMatBaseColorCanvas {
constructor(zone) {
super(zone, 'color-strip');
this.zone = zone;
}
ngAfterViewInit() {
super.ngAfterViewInit();
}
fillGradient() {
const grd = this.ctx.createLinearGradient(0, 0, 0, this.height);
grd.addColorStop(0, 'rgba(255, 0, 0, 1)');
grd.addColorStop(0.17, 'rgba(255, 255, 0, 1)');
grd.addColorStop(0.34, 'rgba(0, 255, 0, 1)');
grd.addColorStop(0.51, 'rgba(0, 255, 255, 1)');
grd.addColorStop(0.68, 'rgba(0, 0, 255, 1)');
grd.addColorStop(0.85, 'rgba(255, 0, 255, 1)');
grd.addColorStop(1, 'rgba(255, 0, 0, 1)');
this.ctx.fillStyle = grd;
this.ctx.fill();
}
redrawIndicator(x, y) {
this.ctx.beginPath();
this.ctx.strokeStyle = 'white';
this.ctx.lineWidth = 2;
this.ctx.arc(7.5, y, 7.5, 0, 2 * Math.PI, false);
this.ctx.stroke();
this.ctx.closePath();
}
changeColor(e) {
this.x = e.offsetX;
this.y = e.offsetY;
this.draw();
const { r, g, b } = getColorAtPosition(this.ctx, e.offsetX, e.offsetY);
this.emitChange(new Color(r, g, b));
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgxMatColorSliderComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", type: NgxMatColorSliderComponent, isStandalone: true, selector: "ngx-mat-color-slider", usesInheritance: true, ngImport: i0, template: "<canvas\n id=\"color-strip\"\n class=\"zone-strip\"\n (mousedown)=\"onMousedown($event)\"\n (mouseup)=\"onMouseup($event)\"\n width=\"15\"\n height=\"234\"\n></canvas>\n", styles: [""] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgxMatColorSliderComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-mat-color-slider', template: "<canvas\n id=\"color-strip\"\n class=\"zone-strip\"\n (mousedown)=\"onMousedown($event)\"\n (mouseup)=\"onMouseup($event)\"\n width=\"15\"\n height=\"234\"\n></canvas>\n" }]
}], ctorParameters: () => [{ type: i0.NgZone }] });
const RADIUS_NOB = 5;
class NgxMatColorCanvasComponent extends NgxMatBaseColorCanvas {
get rCtrl() {
return this.formGroup.get('r');
}
get gCtrl() {
return this.formGroup.get('g');
}
get bCtrl() {
return this.formGroup.get('b');
}
get aCtrl() {
return this.formGroup.get('a');
}
get hexCtrl() {
return this.formGroup.get('hex');
}
constructor(zone) {
super(zone, 'color-block');
this.zone = zone;
this._resetBaseColor = true;
this.formGroup = new FormGroup({
r: new FormControl(null, [Validators.required]),
g: new FormControl(null, [Validators.required]),
b: new FormControl(null, [Validators.required]),
a: new FormControl(null, [Validators.required]),
hex: new FormControl(null, [Validators.required, Validators.pattern(matchers.hex6)]),
});
}
ngOnInit() {
const rgbaCtrl$ = merge(this.rCtrl.valueChanges, this.gCtrl.valueChanges, this.bCtrl.valueChanges, this.aCtrl.valueChanges);
rgbaCtrl$.pipe(takeUntil(this._destroyed), debounceTime(400)).subscribe((_) => {
const color = new Color(Number(this.rCtrl.value), Number(this.gCtrl.value), Number(this.bCtrl.value), Number(this.aCtrl.value));
this.emitChange(color);
});
const hexCtrl$ = this.hexCtrl.valueChanges;
hexCtrl$
.pipe(takeUntil(this._destroyed), debounceTime(400), distinctUntilChanged())
.subscribe((hex) => {
const obj = stringInputToObject(hex);
if (obj != null) {
const color = new Color(obj.r, obj.g, obj.b, obj.a);
this.emitChange(color);
}
});
}
ngOnChanges(changes) {
if (changes.color && changes.color.currentValue) {
this.updateForm(changes.color.currentValue);
if (this._resetBaseColor) {
this._baseColor = changes.color.currentValue;
}
this._resetBaseColor = true;
if (!changes.color.firstChange) {
this.draw();
}
}
}
updateForm(val) {
const config = { emitEvent: false };
this.rCtrl.setValue(val.r, config);
this.gCtrl.setValue(val.g, config);
this.bCtrl.setValue(val.b, config);
this.aCtrl.setValue(val.a, config);
this.hexCtrl.setValue(val.hex, config);
}
redrawIndicator(x, y) {
this.ctx.beginPath();
this.ctx.strokeStyle = 'white';
this.ctx.arc(x, y, RADIUS_NOB, 0, 2 * Math.PI, false);
this.ctx.stroke();
this.ctx.closePath();
}
fillGradient() {
this.ctx.fillStyle = this._baseColor ? this._baseColor.rgba : 'rgba(255,255,255,1)';
this.ctx.fillRect(0, 0, this.width, this.height);
const grdWhite = this.ctx.createLinearGradient(0, 0, this.width, 0);
grdWhite.addColorStop(0, 'rgba(255,255,255,1)');
grdWhite.addColorStop(1, 'rgba(255,255,255,0)');
this.ctx.fillStyle = grdWhite;
this.ctx.fillRect(0, 0, this.width, this.height);
const grdBlack = this.ctx.createLinearGradient(0, 0, 0, this.height);
grdBlack.addColorStop(0, 'rgba(0,0,0,0)');
grdBlack.addColorStop(1, 'rgba(0,0,0,1)');
this.ctx.fillStyle = grdBlack;
this.ctx.fillRect(0, 0, this.width, this.height);
}
onSliderColorChanged(c) {
this._baseColor = c;
this.color.set(c);
this.fillGradient();
this.emitChange(c);
}
changeColor(e) {
this.x = e.offsetX;
this.y = e.offsetY;
this._resetBaseColor = false;
this.draw();
const { r, g, b } = getColorAtPosition(this.ctx, e.offsetX, e.offsetY);
this.emitChange(new Color(r, g, b));
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgxMatColorCanvasComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", type: NgxMatColorCanvasComponent, isStandalone: true, selector: "ngx-mat-color-canvas", host: { classAttribute: "ngx-mat-color-canvas" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"formGroup\">\n <div class=\"color-canvas-row\">\n <div class=\"zone-canvas\">\n <canvas\n id=\"color-block\"\n class=\"zone-block\"\n (mousedown)=\"onMousedown($event)\"\n (mouseup)=\"onMouseup($event)\"\n width=\"200\"\n height=\"235\"\n ></canvas>\n <ngx-mat-color-slider (colorChanged)=\"onSliderColorChanged($event)\" />\n </div>\n\n <div class=\"zone-inputs\">\n <mat-form-field [color]=\"theme\">\n <mat-label>R</mat-label>\n <input\n matInput\n formControlName=\"r\"\n ngxMatNumericColorInput\n autocomplete=\"off\"\n />\n </mat-form-field>\n\n <mat-form-field [color]=\"theme\">\n <mat-label>G</mat-label>\n <input\n matInput\n formControlName=\"g\"\n ngxMatNumericColorInput\n autocomplete=\"off\"\n />\n </mat-form-field>\n\n <mat-form-field [color]=\"theme\">\n <mat-label>B</mat-label>\n <input\n matInput\n formControlName=\"b\"\n ngxMatNumericColorInput\n autocomplete=\"off\"\n />\n </mat-form-field>\n </div>\n </div>\n\n <div class=\"color-canvas-row\">\n <button\n mat-mini-fab\n [style.background-color]=\"color()?.rgba || 'transparent'\"\n class=\"preview\"\n ></button>\n <mat-form-field [color]=\"theme\">\n <mat-label>HEX6</mat-label>\n <mat-label matPrefix class=\"symbol\"># </mat-label>\n <input matInput formControlName=\"hex\" autocomplete=\"off\" />\n </mat-form-field>\n <mat-form-field class=\"input-opacity\" [color]=\"theme\">\n <mat-label>A</mat-label>\n <input\n matInput\n formControlName=\"a\"\n type=\"number\"\n min=\"0\"\n max=\"1\"\n step=\"0.1\"\n autocomplete=\"off\"\n />\n </mat-form-field>\n </div>\n</form>\n", styles: [".ngx-mat-color-canvas .color-canvas-row{display:flex}.ngx-mat-color-canvas .color-canvas-row:first-of-type{height:235px;margin-bottom:12px}.ngx-mat-color-canvas .color-canvas-row:first-of-type .card{height:180px}.ngx-mat-color-canvas .color-canvas-row canvas:hover{cursor:crosshair}.ngx-mat-color-canvas .color-canvas-row .zone{display:flex}.ngx-mat-color-canvas .color-canvas-row .zone-canvas{height:235px}.ngx-mat-color-canvas .color-canvas-row .zone-canvas .zone-block{border:1px solid rgba(0,0,0,.12)}.ngx-mat-color-canvas .color-canvas-row .zone-strip{flex-basis:auto;margin-left:10px}.ngx-mat-color-canvas .color-canvas-row .zone-inputs{display:flex;width:60px;height:235px;flex-direction:column;margin-left:16px;margin-top:12px}.ngx-mat-color-canvas .color-canvas-row:nth-of-type(2){display:flex}.ngx-mat-color-canvas .color-canvas-row:nth-of-type(2) .preview{min-width:40px;min-height:40px;height:40px;width:40px;margin-top:12px}.ngx-mat-color-canvas .color-canvas-row:nth-of-type(2) .mat-mdc-form-field{margin-left:16px}.ngx-mat-color-canvas .color-canvas-row:nth-of-type(2) .mat-mdc-form-field:first-of-type{width:170px}.ngx-mat-color-canvas .color-canvas-row:nth-of-type(2) .mat-mdc-form-field:first-of-type .symbol{font-weight:700;color:#0000008a}.ngx-mat-color-canvas .color-canvas-row:nth-of-type(2) .mat-mdc-form-field:last-of-type{width:60px}.ngx-mat-color-canvas .color-canvas-row:nth-of-type(2) .mat-mdc-form-field:last-of-type .mat-mdc-text-field-wrapper{padding:0 8px}.ngx-mat-color-canvas .mat-mdc-form-field-label{font-weight:700}.ngx-mat-color-canvas .mat-mdc-form-field .mdc-text-field--filled:not(.mdc-text-field--disabled){background-color:transparent}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: NgxMatColorSliderComponent, selector: "ngx-mat-color-slider" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgxMatColorCanvasComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-mat-color-canvas', encapsulation: ViewEncapsulation.None, host: {
class: 'ngx-mat-color-canvas',
}, imports: [MatFormFieldModule, MatInputModule, NgxMatColorSliderComponent, ReactiveFormsModule], template: "<form [formGroup]=\"formGroup\">\n <div class=\"color-canvas-row\">\n <div class=\"zone-canvas\">\n <canvas\n id=\"color-block\"\n class=\"zone-block\"\n (mousedown)=\"onMousedown($event)\"\n (mouseup)=\"onMouseup($event)\"\n width=\"200\"\n height=\"235\"\n ></canvas>\n <ngx-mat-color-slider (colorChanged)=\"onSliderColorChanged($event)\" />\n </div>\n\n <div class=\"zone-inputs\">\n <mat-form-field [color]=\"theme\">\n <mat-label>R</mat-label>\n <input\n matInput\n formControlName=\"r\"\n ngxMatNumericColorInput\n autocomplete=\"off\"\n />\n </mat-form-field>\n\n <mat-form-field [color]=\"theme\">\n <mat-label>G</mat-label>\n <input\n matInput\n formControlName=\"g\"\n ngxMatNumericColorInput\n autocomplete=\"off\"\n />\n </mat-form-field>\n\n <mat-form-field [color]=\"theme\">\n <mat-label>B</mat-label>\n <input\n matInput\n formControlName=\"b\"\n ngxMatNumericColorInput\n autocomplete=\"off\"\n />\n </mat-form-field>\n </div>\n </div>\n\n <div class=\"color-canvas-row\">\n <button\n mat-mini-fab\n [style.background-color]=\"color()?.rgba || 'transparent'\"\n class=\"preview\"\n ></button>\n <mat-form-field [color]=\"theme\">\n <mat-label>HEX6</mat-label>\n <mat-label matPrefix class=\"symbol\"># </mat-label>\n <input matInput formControlName=\"hex\" autocomplete=\"off\" />\n </mat-form-field>\n <mat-form-field class=\"input-opacity\" [color]=\"theme\">\n <mat-label>A</mat-label>\n <input\n matInput\n formControlName=\"a\"\n type=\"number\"\n min=\"0\"\n max=\"1\"\n step=\"0.1\"\n autocomplete=\"off\"\n />\n </mat-form-field>\n </div>\n</form>\n", styles: [".ngx-mat-color-canvas .color-canvas-row{display:flex}.ngx-mat-color-canvas .color-canvas-row:first-of-type{height:235px;margin-bottom:12px}.ngx-mat-color-canvas .color-canvas-row:first-of-type .card{height:180px}.ngx-mat-color-canvas .color-canvas-row canvas:hover{cursor:crosshair}.ngx-mat-color-canvas .color-canvas-row .zone{display:flex}.ngx-mat-color-canvas .color-canvas-row .zone-canvas{height:235px}.ngx-mat-color-canvas .color-canvas-row .zone-canvas .zone-block{border:1px solid rgba(0,0,0,.12)}.ngx-mat-color-canvas .color-canvas-row .zone-strip{flex-basis:auto;margin-left:10px}.ngx-mat-color-canvas .color-canvas-row .zone-inputs{display:flex;width:60px;height:235px;flex-direction:column;margin-left:16px;margin-top:12px}.ngx-mat-color-canvas .color-canvas-row:nth-of-type(2){display:flex}.ngx-mat-color-canvas .color-canvas-row:nth-of-type(2) .preview{min-width:40px;min-height:40px;height:40px;width:40px;margin-top:12px}.ngx-mat-color-canvas .color-canvas-row:nth-of-type(2) .mat-mdc-form-field{margin-left:16px}.ngx-mat-color-canvas .color-canvas-row:nth-of-type(2) .mat-mdc-form-field:first-of-type{width:170px}.ngx-mat-color-canvas .color-canvas-row:nth-of-type(2) .mat-mdc-form-field:first-of-type .symbol{font-weight:700;color:#0000008a}.ngx-mat-color-canvas .color-canvas-row:nth-of-type(2) .mat-mdc-form-field:last-of-type{width:60px}.ngx-mat-color-canvas .color-canvas-row:nth-of-type(2) .mat-mdc-form-field:last-of-type .mat-mdc-text-field-wrapper{padding:0 8px}.ngx-mat-color-canvas .mat-mdc-form-field-label{font-weight:700}.ngx-mat-color-canvas .mat-mdc-form-field .mdc-text-field--filled:not(.mdc-text-field--disabled){background-color:transparent}\n"] }]
}], ctorParameters: () => [{ type: i0.NgZone }] });
class NgxMatColorCollectionComponent {
constructor() {
this.colorChanged = output();
this.selectedColor = signal('', ...(ngDevMode ? [{ debugName: "selectedColor" }] : []));
this.colors1 = BASIC_COLORS.slice(0, 8);
this.colors2 = BASIC_COLORS.slice(8, 16);
}
set color(c) {
if (c) {
this.selectedColor.set(c.toHexString());
}
}
select(hex) {
this.selectedColor.set(hex);
const { r, g, b, a } = stringInputToObject(hex);
this.colorChanged.emit(new Color(r, g, b, a));
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgxMatColorCollectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: NgxMatColorCollectionComponent, isStandalone: true, selector: "ngx-mat-color-collection", inputs: { color: "color" }, outputs: { colorChanged: "colorChanged" }, host: { classAttribute: "ngx-mat-color-collection" }, ngImport: i0, template: "<div class=\"color-collection-row\">\n @for (c of colors1; track c) {\n <button\n mat-mini-fab\n [style.background-color]=\"c\"\n class=\"btn-color\"\n (click)=\"select(c)\"\n [ngClass]=\"{ active: selectedColor() === c }\"\n [disableRipple]=\"true\"></button>\n }\n</div>\n<div class=\"color-collection-row\">\n @for (c of colors2; track c) {\n <button\n mat-mini-fab\n [style.background-color]=\"c\"\n class=\"btn-color\"\n (click)=\"select(c)\"\n [ngClass]=\"{ active: selectedColor() === c }\"\n [disableRipple]=\"true\"></button>\n }\n</div>\n", styles: [".ngx-mat-color-collection .btn-color{height:20px;width:20px;margin-right:11px;box-shadow:none;opacity:.3;will-change:opacity;transition:opacity .3s linear}.ngx-mat-color-collection .btn-color.active{box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f;opacity:1}.ngx-mat-color-collection .btn-color .mat-mdc-button-touch-target{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgxMatColorCollectionComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-mat-color-collection', encapsulation: ViewEncapsulation.None, host: {
class: 'ngx-mat-color-collection',
}, imports: [MatButtonModule, NgClass], template: "<div class=\"color-collection-row\">\n @for (c of colors1; track c) {\n <button\n mat-mini-fab\n [style.background-color]=\"c\"\n class=\"btn-color\"\n (click)=\"select(c)\"\n [ngClass]=\"{ active: selectedColor() === c }\"\n [disableRipple]=\"true\"></button>\n }\n</div>\n<div class=\"color-collection-row\">\n @for (c of colors2; track c) {\n <button\n mat-mini-fab\n [style.background-color]=\"c\"\n class=\"btn-color\"\n (click)=\"select(c)\"\n [ngClass]=\"{ active: selectedColor() === c }\"\n [disableRipple]=\"true\"></button>\n }\n</div>\n", styles: [".ngx-mat-color-collection .btn-color{height:20px;width:20px;margin-right:11px;box-shadow:none;opacity:.3;will-change:opacity;transition:opacity .3s linear}.ngx-mat-color-collection .btn-color.active{box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f;opacity:1}.ngx-mat-color-collection .btn-color .mat-mdc-button-touch-target{display:none!important}\n"] }]
}], propDecorators: { color: [{
type: Input
}] } });
class NgxMatColorPaletteComponent {
constructor() {
this.colorChanged = output();
this.color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : []));
this.theme = input(...(ngDevMode ? [undefined, { debugName: "theme" }] : []));
}
handleColorChanged(color) {
this.colorChanged.emit(color);
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgxMatColorPaletteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.4", type: NgxMatColorPaletteComponent, isStandalone: true, selector: "ngx-mat-color-palette", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { colorChanged: "colorChanged" }, host: { classAttribute: "ngx-mat-color-palette" }, ngImport: i0, template: "<ngx-mat-color-canvas\n (colorChanged)=\"handleColorChanged($event)\"\n [color]=\"color()\"\n [theme]=\"theme()\"\n/>\n\n<ngx-mat-color-collection\n (colorChanged)=\"handleColorChanged($event)\"\n [color]=\"color()\"\n/>\n", styles: [".ngx-mat-color-palette .actions{margin-top:10px;display:flex}.ngx-mat-color-palette .actions .left{display:flex;flex-direction:column;margin-right:15px}.ngx-mat-color-palette .actions .left .preview{flex:2 1 auto;margin-bottom:10px}.ngx-mat-color-palette .actions .right{display:flex;width:60px;flex-direction:column}\n"], dependencies: [{ kind: "component", type: NgxMatColorCollectionComponent, selector: "ngx-mat-color-collection", inputs: ["color"], outputs: ["colorChanged"] }, { kind: "component", type: NgxMatColorCanvasComponent, selector: "ngx-mat-color-canvas" }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgxMatColorPaletteComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-mat-color-palette', encapsulation: ViewEncapsulation.None, host: {
class: 'ngx-mat-color-palette',
}, imports: [NgxMatColorCollectionComponent, NgxMatColorCanvasComponent], template: "<ngx-mat-color-canvas\n (colorChanged)=\"handleColorChanged($event)\"\n [color]=\"color()\"\n [theme]=\"theme()\"\n/>\n\n<ngx-mat-color-collection\n (colorChanged)=\"handleColorChanged($event)\"\n [color]=\"color()\"\n/>\n", styles: [".ngx-mat-color-palette .actions{margin-top:10px;display:flex}.ngx-mat-color-palette .actions .left{display:flex;flex-direction:column;margin-right:15px}.ngx-mat-color-palette .actions .left .preview{flex:2 1 auto;margin-bottom:10px}.ngx-mat-color-palette .actions .right{display:flex;width:60px;flex-direction:column}\n"] }]
}] });
class ColorAdapter {
sameColor(a, b) {
if (a == null && b == null)
return true;
if (a != null && b != null)
return a.rgba === b.rgba;
return false;
}
format(c, format) {
return c.toString(format);
}
parse(value) {
const obj = stringInputToObject(value);
if (obj) {
return new Color(obj.r, obj.g, obj.b, obj.a);
}
return null;
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ColorAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
/** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ColorAdapter }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: ColorAdapter, decorators: [{
type: Injectable
}] });
const NGX_MAT_COLOR_FORMATS = {
display: {
colorInput: 'hex',
},
};
const MAT_COLOR_FORMATS = new InjectionToken('mat-color-formats');
/** Injection token that determines the scroll handling while the calendar is open. */
const NGX_MAT_COLOR_PICKER_SCROLL_STRATEGY = new InjectionToken('ngx-mat-colorpicker-scroll-strategy');
function NGX_MAT_COLOR_PICKER_SCROLL_STRATEGY_FACTORY(overlay) {
return () => overlay.scrollStrategies.reposition();
}
const NGX_MAT_COLOR_PICKER_SCROLL_STRATEGY_FACTORY_PROVIDER = {
provide: NGX_MAT_COLOR_PICKER_SCROLL_STRATEGY,
deps: [Overlay],
useFactory: NGX_MAT_COLOR_PICKER_SCROLL_STRATEGY_FACTORY,
};
class NgxMatColorPickerContentComponent {
constructor() {
/** Reference to the internal calendar component. */
this._palette = viewChild(NgxMatColorPaletteComponent, ...(ngDevMode ? [{ debugName: "_palette" }] : []));
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgxMatColorPickerContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.4", type: NgxMatColorPickerContentComponent, isStandalone: true, selector: "ngx-mat-color-picker-content", inputs: { color: "color" }, host: { properties: { "@transformPanel": "\"enter\"", "class.ngx-mat-colorpicker-content-touch": "picker.touchUi" }, classAttribute: "ngx-mat-colorpicker-content" }, viewQueries: [{ propertyName: "_palette", first: true, predicate: NgxMatColorPaletteComponent, descendants: true, isSignal: true }], exportAs: ["ngxMatColorPickerContent"], ngImport: i0, template: "<ngx-mat-color-palette\n (colorChanged)=\"picker.select($event)\"\n [color]=\"picker._selected\"\n [theme]=\"color\"></ngx-mat-color-palette>\n", styles: [".ngx-mat-colorpicker-content{display:block;border-radius:4px;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f;background-color:#fff;color:#000000de;padding:16px}.ngx-mat-colorpicker-content .ngx-mat-color-palette{width:296px;height:354px}.ngx-mat-colorpicker-content-touch{display:block;max-height:80vh;overflow:auto}.ngx-mat-colorpicker-content-touch .ngx-mat-color-palette{min-width:250px;min-height:312px;max-width:750px;max-height:788px}@media all and (orientation: landscape){.mat-colorpicker-content-touch .ngx-mat-color-palette{width:64vh;height:80vh}}@media all and (orientation: portrait){.mat-colorpicker-content-touch .ngx-mat-color-palette{width:80vw;height:100vw}}\n"], dependencies: [{ kind: "component", type: NgxMatColorPaletteComponent, selector: "ngx-mat-color-palette", inputs: ["color", "theme"], outputs: ["colorChanged"] }], animations: [matDatepickerAnimations.transformPanel, matDatepickerAnimations.fadeInCalendar], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgxMatColorPickerContentComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-mat-color-picker-content', host: {
class: 'ngx-mat-colorpicker-content',
'[@transformPanel]': '"enter"',
'[class.ngx-mat-colorpicker-content-touch]': 'picker.touchUi',
}, animations: [matDatepickerAnimations.transformPanel, matDatepickerAnimations.fadeInCalendar], exportAs: 'ngxMatColorPickerContent', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, inputs: ['color'], imports: [NgxMatColorPaletteComponent], template: "<ngx-mat-color-palette\n (colorChanged)=\"picker.select($event)\"\n [color]=\"picker._selected\"\n [theme]=\"color\"></ngx-mat-color-palette>\n", styles: [".ngx-mat-colorpicker-content{display:block;border-radius:4px;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f;background-color:#fff;color:#000000de;padding:16px}.ngx-mat-colorpicker-content .ngx-mat-color-palette{width:296px;height:354px}.ngx-mat-colorpicker-content-touch{display:block;max-height:80vh;overflow:auto}.ngx-mat-colorpicker-content-touch .ngx-mat-color-palette{min-width:250px;min-height:312px;max-width:750px;max-height:788px}@media all and (orientation: landscape){.mat-colorpicker-content-touch .ngx-mat-color-palette{width:64vh;height:80vh}}@media all and (orientation: portrait){.mat-colorpicker-content-touch .ngx-mat-color-palette{width:80vw;height:100vw}}\n"] }]
}], ctorParameters: () => [] });
class NgxMatColorPickerComponent {
get disabled() {
return this._disabled === undefined && this._pickerInput
? this._pickerInput.disabled
: !!this._disabled;
}
set disabled(value) {
const newValue = coerceBooleanProperty(value);
if (newValue !== this._disabled) {
this._disabled = newValue;
this._disabledChange.next(newValue);
}
}
get touchUi() {
return this._touchUi;
}
set touchUi(value) {
this._touchUi = coerceBooleanProperty(value);
}
/** Whether the calendar is open. */
get opened() {
return this._opened;
}
set opened(value) {
value ? this.open() : this.close();
}
/** Default Color palette to use on the datepicker's calendar. */
get defaultColor() {
return this._defaultColor;
}
set defaultColor(value) {
this._defaultColor = value;
}
/** Color palette to use on the datepicker's calendar. */
get color() {
return this._color || (this._pickerInput ? this._pickerInput.getThemePalette() : undefined);
}
set color(value) {
this._color = value;
}
get isPrimary() {
return this.color === 'primary';
}
get isAccent() {
return this.color === 'accent';
}
get isWarn() {
return this.color === 'warn';
}
/** The currently selected date. */
get _selected() {
return this._validSelected;
}
set _selected(value) {
this._validSelected = value;
}
constructor(_dialog, _overlay, _zone, _adapter, _dir, scrollStrategy, _document, _viewContainerRef) {
this._dialog = _dialog;
this._overlay = _overlay;
this._zone = _zone;
this._adapter = _adapter;
this._dir = _dir;
this._document = _document;
this._viewContainerRef = _viewContainerRef;
/** Emits when the datepicker has been opened. */
this.openedStream = new EventEmitter();
/** Emits when the datepicker has been closed. */
this.closedStream = new EventEmitter();
this._touchUi = false;
this._opened = false;
this._defaultColor = 'primary';
this._validSelected = null;
/** Emits when the datepicker is disabled. */
this._disabledChange = new EventEmitter();
/** The element that was focused before the datepicker was opened. */
this._focusedElementBeforeOpen = null;
/** Subscription to value changes in the associated input element. */
this._inputSubscription = Subscription.EMPTY;
/** Emits new selected date when selected date changes. */
this._selectedChanged = new Subject();
this._scrollStrategy = scrollStrategy;
}
ngOnDestroy() {
this.close();
this._inputSubscription.unsubscribe();
this._disabledChange.complete();
if (this._popupRef) {
this._popupRef.dispose();
this._popupComponentRef = null;
}
}
/** Selects the given date */
select(nextVal) {
let oldValue = this._selected;
this._selected = nextVal;
if (!this._adapter.sameColor(oldValue, this._selected)) {
this._selectedChanged.next(nextVal);
}
}
/**
* Register an input with this datepicker.
* @param input The datepicker input to register with this datepicker.
*/
registerInput(input) {
if (this._pickerInput) {
throw Error('A ColorPicker can only be associated with a single input.');
}
this._pickerInput = input;
this._inputSubscription = this._pickerInput._valueChange.subscribe((value) => (this._selected = value));
}
open() {
if (this._opened || this.disabled) {
return;
}
if (!this._pickerInput) {
throw Error('Attempted to open an ColorPicker with no associated input.');
}
if (this._document) {
this._focusedElementBeforeOpen = this._document.activeElement;
}
this.touchUi ? this._openAsDialog() : this._openAsPopup();
this._opened = true;
this.openedStream.emit();
}
/** Open the calendar as a dialog. */
_openAsDialog() {
if (this._dialogRef) {
this._dialogRef.close();
}
this._dialogRef = this._dialog.open(NgxMatColorPickerContentComponent, {
direction: this._dir ? this._dir.value : 'ltr',
viewContainerRef: this._viewContainerRef,
panelClass: 'ngx-mat-colorpicker-dialog',
});
this._dialogRef.afterClosed().subscribe(() => this.close());
this._dialogRef.componentInstance.picker = this;
this._setColor();
}
/** Open the calendar as a popup. */
_openAsPopup() {
if (!this._portal) {
this._portal = new ComponentPortal(NgxMatColorPickerContentComponent, this._viewContainerRef);
}
if (!this._popupRef) {
this._createPopup();
}
if (!this._popupRef.hasAttached()) {
this._popupComponentRef = this._popupRef.attach(this._portal);
this._popupComponentRef.instance.picker = this;
this._setColor();
// Update the position once the calendar has rendered.
this._zone.onStable
.asObservable()
.pipe(take(1))
.subscribe(() => {
this._popupRef.updatePosition();
});
}
}
/** Create the popup. */
_createPopup() {
const overlayConfig = new OverlayConfig({
positionStrategy: this._createPopupPositionStrategy(),
hasBackdrop: true,
backdropClass: 'mat-overlay-transparent-backdrop',
direction: this._dir,
scrollStrategy: this._scrollStrategy(),
panelClass: 'mat-colorpicker-popup',
});
this._popupRef = this._overlay.create(overlayConfig);
this._popupRef.overlayElement.setAttribute('role', 'dialog');
merge(this._popupRef.backdropClick(), this._popupRef.detachments(), this._popupRef.keydownEvents().pipe(filter((event) => {
// Closing on alt + up is only valid when there's an input associated with the datepicker.
return (event.keyCode === ESCAPE ||
(this._pickerInput && event.altKey && event.keyCode === UP_ARROW));
}))).subscribe((event) => {
if (event) {
event.preventDefault();
}
this.close();
});
}
close() {
if (!this._opened) {
return;
}
if (this._popupRef && this._popupRef.hasAttached()) {
this._popupRef.detach();
}
if (this._dialogRef) {
this._dialogRef.close();
this._dialogRef = null;
}
if (this._portal && this._portal.isAttached) {
this._portal.detach();
}
const completeClose = () => {
// The `_opened` could've been reset already if
// we got two events in quick succession.
if (this._opened) {
this._opened = false;
this.closedStream.emit();
this._focusedElementBeforeOpen = null;
}
};
if (this._focusedElementBeforeOpen &&
typeof this._focusedElementBeforeOpen.focus === 'function') {
// Because IE moves focus asynchronously, we can't count on it being restored before we've
// marked the datepicker as closed. If the event fires out of sequence and the element that
// we're refocusing opens the datepicker on focus, the user could be stuck with not being
// able to close the calendar at all. We work around it by making the logic, that marks
// the datepicker as closed, async as well.
this._focusedElementBeforeOpen.focus();
setTimeout(completeClose);
}
else {
completeClose();
}
}
/** Passes the current theme color along to the calendar overlay. */
_setColor() {
const color = this.color;
if (this._popupComponentRef) {
this._popupComponentRef.instance.color = color;
}
if (this._dialogRef) {
this._dialogRef.componentInstance.color = color;
}
}
/** Create the popup PositionStrategy. */
_createPopupPositionStrategy() {
return this._overlay
.position()
.flexibleConnectedTo(this._pickerInput.getConnectedOverlayOrigin())
.withTransformOriginOn('.ngx-mat-colorpicker-content')
.withFlexibleDimensions(false)
.withViewportMargin(8)
.withLockedPosition()
.withPositions([
{
originX: 'start',
originY: 'bottom',
overlayX: 'start',
overlayY: 'top',
},
{
originX: 'start',
originY: 'top',
overlayX: 'start',
overlayY: 'bottom',
},
{
originX: 'end',
originY: 'bottom',
overlayX: 'end',
overlayY: 'top',
},
{
originX: 'end',
originY: 'top',
overlayX: 'end',
overlayY: 'bottom',
},
]);
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgxMatColorPickerComponent, deps: [{ token: i1$2.MatDialog }, { token: i2$1.Overlay }, { token: i0.NgZone }, { token: ColorAdapter }, { token: i4.Directionality, optional: true }, { token: NGX_MAT_COLOR_PICKER_SCROLL_STRATEGY }, { token: DOCUMENT, optional: true }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.4", type: NgxMatColorPickerComponent, isStandalone: true, selector: "ngx-mat-color-picker", inputs: { disabled: "disabled", touchUi: "touchUi", opened: "opened", defaultColor: "defaultColor", color: "color" }, outputs: { openedStream: "opened", closedStream: "closed" }, host: { properties: { "class.mat-primary": "this.isPrimary", "class.mat-accent": "this.isAccent", "class.mat-warn": "this.isWarn" } }, providers: [ColorAdapter, NGX_MAT_COLOR_PICKER_SCROLL_STRATEGY_FACTORY_PROVIDER], exportAs: ["ngxMatColorPicker"], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgxMatColorPickerComponent, decorators: [{
type: Component,
args: [{
selector: 'ngx-mat-color-picker',
template: '',
exportAs: 'ngxMatColorPicker',
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
providers: [ColorAdapter, NGX_MAT_COLOR_PICKER_SCROLL_STRATEGY_FACTORY_PROVIDER],
}]
}], ctorParameters: () => [{ type: i1$2.MatDialog }, { type: i2$1.Overlay }, { type: i0.NgZone }, { type: ColorAdapter }, { type: i4.Directionality, decorators: [{
type: Optional
}] }, { type: undefined, decorators: [{
type: Inject,
args: [NGX_MAT_COLOR_PICKER_SCROLL_STRATEGY]
}] }, { type: undefined, decorators: [{
type: Optional
}, {
type: Inject,
args: [DOCUMENT]
}] }, { type: i0.ViewContainerRef }], propDecorators: { openedStream: [{
type: Output,
args: ['opened']
}], closedStream: [{
type: Output,
args: ['closed']
}], disabled: [{
type: Input
}], touchUi: [{
type: Input
}], opened: [{
type: Input
}], defaultColor: [{
type: Input
}], color: [{
type: Input
}], isPrimary: [{
type: HostBinding,
args: ['class.mat-primary']
}], isAccent: [{
type: HostBinding,
args: ['class.mat-accent']
}], isWarn: [{
type: HostBinding,
args: ['class.mat-warn']
}] } });
class NgxMatColorPickerInputEvent {
constructor(
/** Reference to the colorpicker input component that emitted the event. */
target,
/** Reference to the native input element associated with the colorpicker input. */
targetElement) {
this.target = target;
this.targetElement = targetElement;
this.value = this.target.value;
}
}
const MAT_COLORPICKER_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => NgxMatColorPickerInput),
multi: true,
};
const MAT_COLORPICKER_VALIDATORS = {
provide: NG_VALIDATORS,
useExisting: forwardRef(() => NgxMatColorPickerInput),
multi: true,
};
class NgxMatColorPickerInput {
set ngxMatColorPicker(value) {
if (!value) {
return;
}
this._picker = value;
this._picker.registerInput(this);
this._pickerSubscription.unsubscribe();
this._pickerSubscription = this._picker._selectedChanged.subscribe((selected) => {
this.value = selected;
this._cvaOnChange(selected);
this._onTouched();
this.colorInput.emit(new NgxMatColorPickerInputEvent(this, this._elementRef.nativeElement));
this.colorChange.emit(new NgxMatColorPickerInputEvent(this, this._elementRef.nativeElement));
});
}
/** Whether the colorpicker-input is disabled. */
get disabled() {
return !!this._disabled;
}
set disabled(value) {
const newValue = coerceBooleanProperty(value);
const element = this._elementRef.nativeElement;
if (this._disabled !== newValue) {
this._disabled = newValue;
this._disabledChange.emit(newValue);
}
// We need to null check the `blur` method, because it's undefined during SSR.
if (newValue && element.blur) {
// Normally, native input elements automatically blur if they turn disabled. This behavior
// is problematic, because it would mean that it triggers another change detection cycle,
// which then causes a changed after checked error if the input element was focused before.
element.blur();
}
}
/** The value of the input. */
get value() {
return this._value;
}
set value(value) {
const oldValue = this.value;
this._value = value;
this._formatValue(value);
if (!this._adapter.sameColor(oldValue, value)) {
this._valueChange.emit(value);
}
}
constructor(_elementRef, _formField, _colorFormats, _adapter) {
this._elementRef = _elementRef;
this._formField = _formField;
this._colorFormats = _colorFormats;
this._adapter = _adapter;
/** Emits when a `change` event is fired on this `<input>`. */
this.colorChange = output();
/** Emits when an `input` event is fired on this `<input>`. */
this.colorInput = output();
/** Emits when the disabled state has changed */
this._disabledChange = new EventEmitter();
/** Emits when the value changes (either due to user input or programmatic change). */
this._valueChange = new EventEmitter();
this._onTouched = () => { };
this._cvaOnChange = () => { };
this._validatorOnChange = () => { };
this._pickerSubscription = Subscription.EMPTY;
/** The combined form control validator for this input. */
this._validator = Validators.compose([]);
/** Whether the last value set on the input was valid. */
this._lastValueValid = false;
if (!this._colorFormats) {
throw createMissingDateImplError('MAT_COLOR_FORMATS');
}
}
/** Returns the palette used by the input's form field, if any. */
getThemePalette() {
return this._formField ? this._formField.color : undefined;
}
registerOnValidatorChange(fn) {
this._validatorOnChange = fn;
}
validate(c) {
return this._validator ? this._validator(c) : null;
}
/**
* @deprecated
* @breaking-change 8.0.0 Use `getConnectedOverlayOrigin` instead
*/
getPopupConnectionElementRef() {
return this.getConnectedOverlayOrigin();
}
/**
* Gets the element that the colorpicker popup should be connected to.
* @return The element to connect the popup to.
*/
getConnectedOverlayOrigin() {
return this._formField ? this._formField.getConnectedOverlayOrigin() : this._elementRef;
}
ngOnInit() { }
ngOnDestroy() {
this._pickerSubscription.unsubscribe();
this._valueChange.complete();
this._disabledChange.complete();
}
// Implemented as part of ControlValueAccessor.
writeValue(value) {
this.value = value;
}
// Implemented as part of ControlValueAccessor.
registerOnChange(fn) {
this._cvaOnChange = fn;
}
// Implemented as part of ControlValueAccessor.
registerOnTouched(fn) {
this._onTouched = fn;
}
// Implemented as part of ControlValueAccessor.
setDisabledState(isDisabled) {
this.disabled = isDisabled;
}
_onChange() {
this.colorChange.emit(new NgxMatColorPickerInputEvent(this, this._elementRef.nativeElement));
}
_onKeydown(event) {
const isAltDownArrow = event.altKey && event.keyCode === DOWN_ARROW;
if (this._picker && isAltDownArrow && !this._elementRef.nativeElement.readOnly) {
this._picker.open();
event.preventDefault();
}
}
/** Handles blur events on the input. */
_onBlur() {
// Reformat the input only if we have a valid value.
if (this.value) {
this._formatValue(this.value);
}
this._onTouched();
}
/** Formats a value and sets it on the input element. */
_formatValue(value) {
this._elementRef.nativeElement.value = value
? this._adapter.format(value, this._colorFormats.display.colorInput)
: '';
}
_onInput(value) {
const lastValueWasValid = this._lastValueValid;
const nextValue = this._adapter.parse(value);
if (!this._adapter.sameColor(nextValue, this._value)) {
this._value = nextValue;
this._cvaOnChange(nextValue);
this._valueChange.emit(nextValue);
this.colorInput.emit(new NgxMatColorPickerInputEvent(this, this._elementRef.nativeElement));
}
else if (lastValueWasValid !== this._lastValueValid) {
this._validatorOnChange();
}
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgxMatColorPickerInput, deps: [{ token: i0.ElementRef }, { token: i1.MatFormField, optional: true }, { token: MAT_COLOR_FORMATS, optional: true }, { token: ColorAdapter }], target: i0.ɵɵFactoryTarget.Directive }); }
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.4", type: NgxMatColorPickerInput, isStandalone: true, selector: "input[ngxMatColorPicker]", inputs: { ngxMatColorPicker: "ngxMatColorPicker", disabled: "disabled", value: "value" }, outputs: { colorChange: "colorChange", colorInput: "colorInput" }, host: { listeners: { "input": "_onInput($event.target.value)", "change": "_onChange()", "blur": "_onBlur()", "keydown": "_onKeydown($event)" }, properties: { "attr.aria-haspopup": "_picker ? \"dialog\" : null", "attr.aria-owns": "(_picker?.opened && _picker.id) || null", "disabled": "disabled" } }, providers: [
{ provide: MAT_INPUT_VALUE_ACCESSOR, useExisting: NgxMatColorPickerInput },
ColorAdapter,
MAT_COLORPICKER_VALIDATORS,
MAT_COLORPICKER_VALUE_ACCESSOR,
], exportAs: ["ngxMatColorPickerInput"], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgxMatColorPickerInput, decorators: [{
type: Directive,
args: [{
selector: 'input[ngxMatColorPicker]',
providers: [
{ provide: MAT_INPUT_VALUE_ACCESSOR, useExisting: NgxMatColorPickerInput },
ColorAdapter,
MAT_COLORPICKER_VALIDATORS,
MAT_COLORPICKER_VALUE_ACCESSOR,
],
host: {
'[attr.aria-haspopup]': '_picker ? "dialog" : null',
'[attr.aria-owns]': '(_picker?.opened && _picker.id) || null',
'[disabled]': 'disabled',
'(input)': '_onInput($event.target.value)',
'(change)': '_onChange()',
'(blur)': '_onBlur()',
'(keydown)': '_onKeydown($event)',
},
exportAs: 'ngxMatColorPickerInput',
}]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.MatFormField, decorators: [{
type: Optional
}] }, { type: undefined, decorators: [{
type: Optional
}, {
type: Inject,
args: [MAT_COLOR_FORMATS]
}] }, { type: ColorAdapter }], propDecorators: { ngxMatColorPicker: [{
type: Input
}], disabled: [{
type: Input
}], value: [{
type: Input
}] } });
class NgxMatColorpickerToggleIcon {
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgxMatColorpickerToggleIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.4", type: NgxMatColorpickerToggleIcon, isStandalone: true, selector: "[ngxMatColorpickerToggleIcon]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgxMatColorpickerToggleIcon, decorators: [{
type: Directive,
args: [{
selector: '[ngxMatColorpickerToggleIcon]',
}]
}] });
class NgxMatColorToggleComponent {
get disabled() {
if (this._disabled == null && this.picker()) {
return this.picker().disabled;
}
}
set disabled(value) {
this._disabled = value;
}
constructor(_cd) {
this._cd = _cd;
this._stateChanges = Subscription.EMPTY;
this.picker = input(undefined, ...(ngDevMode ? [{ debugName: "picker", alias: 'for' }] : [{ alias: 'for' }]));
this.tabIndex = input(...(ngDevMode ? [undefined, { debugName: "tabIndex" }] : []));
/** Whether ripples on the toggle should be disabled. */
this.disableRipple = input(...(ngDevMode ? [undefined, { debugName: "disableRipple" }] : []));
this._button = viewChild('button', ...(ngDevMode ? [{ debugName: "_button" }] : []));
effect(() => {
this.picker();
untracked(() => this._watchStateChanges());
});
}
ngOnDestroy() {
this._stateChanges.unsubscribe();
}
ngAfterContentInit() {
this._watchStateChanges();
}
open(event) {
if (this.picker() && !this.disabled) {
this.picker().open();
event.stopPropagation();
}
}
_watchStateChanges() {
const disabled$ = this.picker()?._disabledChange ?? new EventEmitter();
const inputDisabled$ = this.picker()?._pickerInput?._disabledChange ?? new EventEmitter();
const pickerToggled$ = this.picker()
? merge(this.picker().openedStream, this.picker().closedStream)
: of();
this._stateChanges.unsubscribe();
this._stateChanges = merge(disabled$, inputDisabled$, pickerToggled$).subscribe(() => this._cd.markForCheck());
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgxMatColorToggleComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.4", type: NgxMatColorToggleComponent, isStandalone: true, selector: "ngx-mat-color-toggle", inputs: { picker: { classPropertyName: "picker", publicName: "for", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, disableRipple: { classPropertyName: "disableRipple", publicName: "disableRipple", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focus": "_button.focus()" }, properties: { "attr.tabindex": "-1", "class.ngx-mat-color-toggle-active": "picker && picker.opened", "class.mat-accent": "picker && picker.color === \"accent\"", "class.mat-warn": "picker && picker.color === \"warn\"" }, classAttribute: "ngx-mat-color-toggle" }, viewQueries: [{ propertyName: "_button", first: true, predicate: ["button"], descendants: true, isSignal: true }], exportAs: ["ngxMatColorPickerToggle"], ngImport: i0, template: "<button\n #button\n mat-icon-button\n type=\"button\"\n [attr.aria-haspopup]=\"picker() ? 'dialog' : null\"\n [attr.tabindex]=\"disabled ? -1 : tabIndex()\"\n [disabled]=\"disabled\"\n (click)=\"open($event)\"\n [disableRipple]=\"disableRipple()\"\n>\n <ng-content select=\"[ngxMatColorpickerToggleIcon]\">\n <mat-icon [style.color]=\"picker()?._selected?.rgba\">palette</mat-icon>\n </ng-content>\n</button>\n", styles: [".mat-form-field-appearance .mat-form-field-prefix .ngx-mat-color-toggle-default-icon,.mat-form-field-appearance .mat-form-field-suffix .ngx-mat-color-toggle-default-icon{width:1em}.mat-form-field:not(.mat-form-field-appearance) .mat-form-field-prefix .ngx-mat-color-toggle-default-icon,.mat-form-field:not(.mat-form-field-appearance) .mat-form-field-suffix .ngx-mat-color-toggle-default-icon{display:block;width:1.5em;height:1.5em}.mat-form-field:not(.mat-form-field-appearance) .mat-form-field-prefix .mat-icon-button .ngx-mat-color-toggle-default-icon,.mat-form-field:not(.mat-form-field-appearance) .mat-form-field-suffix .mat-icon-button .ngx-mat-color-toggle-default-icon{margin:auto}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NgxMatColorToggleComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-mat-color-toggle', host: {
class: 'ngx-mat-color-toggle',
// Always set the tabindex to -1 so that it doesn't overlap with any custom tabindex the
// consumer may have provided, while still being able to receive focus.
'[attr.tabindex]': '-1',
'[class.ngx-mat-color-toggle-active]': 'picker && picker.opened',
'[class.mat-accent]': 'picker && picker.color === "accent"',
'[class.mat-warn]': 'picker && picker.color === "warn"',
'(focus)': '_button.focus()',
}, exportAs: 'ngxMatColorPickerToggle', encapsulation: ViewEncapsulation.None, imports: [MatButtonModule, MatIconModule], template: "<button\n #button\n mat-icon-button\n type=\"button\"\n [attr.aria-haspopup]=\"picker() ? 'dialog' : null\"\n [attr.tabindex]=\"disabled ? -1 : tabIndex()\"\n [disabled]=\"disabled\"\n (click)=\"open($event)\"\n [disableRipple]=\"disableRipple()\"\n>\n <ng-content select=\"[ngxMatColorpickerToggleIcon]\">\n <mat-icon [style.color]=\"picker()?._selected?.rgba\">palette</mat-icon>\n </ng-content>\n</button>\n", styles: [".mat-form-field-appearance .mat-form-field-prefix .ngx-mat-color-toggle-default-icon,.mat-form-field-appearance .mat-form-field-suffix .ngx-mat-color-toggle-default-icon{width:1em}.mat-form-field:not(.mat-form-field-appearance) .mat-form-field-prefix .ngx-mat-color-toggle-default-icon,.mat-form-field:not(.mat-form-field-appearance) .mat-form-field-suffix .ngx-mat-color-toggle-default-icon{display:block;width:1.5em;height:1.5em}.mat-form-field:not(.mat-form-field-appearance) .mat-form-field-prefix .mat-icon-button .ngx-mat-color-toggle-default-icon,.mat-form-field:not(.mat-form-field-appearance) .mat-form-field-suffix .mat-icon-button .ngx-mat-color-toggle-default-icon{margin:auto}\n"] }]
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { disabled: [{
type: Input
}] } });
class NumericColorInputDirective {
onInput($event) {
this._formatInput($event.target);
}
/**
* Format input
* @param input
*/
_formatInput(input) {
let val = Number(input.value.replace(NUMERIC_REGEX, ''));
val = isNaN(val) ? 0 : val;
input.value = val;
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NumericColorInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.4", type: NumericColorInputDirective, isStandalone: true, selector: "[ngxMatNumericColorInput]", host: { listeners: { "input": "onInput($event)" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: NumericColorInputDirective, decorators: [{
type: Directive,
args: [{
selector: '[ngxMatNumericColorInput]',
}]
}], propDecorators: { onInput: [{
type: HostListener,
args: ['input', ['$event']]
}] } });
/*
* Public API Surface of color-picker
*/
/**
* Generated bundle index. Do not edit.
*/
export { BASIC_COLORS, Color, ColorAdapter, MAT_COLORPICKER_VALIDATORS, MAT_COLORPICKER_VALUE_ACCESSOR, MAT_COLOR_FORMATS, MAX_RGB, MIN_RGB, NGX_MAT_COLOR_FORMATS, NGX_MAT_COLOR_PICKER_SCROLL_STRATEGY, NGX_MAT_COLOR_PICKER_SCROLL_STRATEGY_FACTORY, NGX_MAT_COLOR_PICKER_SCROLL_STRATEGY_FACTORY_PROVIDER, NUMERIC_REGEX, NgxMatColorCanvasComponent, NgxMatColorCollectionComponent, NgxMatColorPaletteComponent, NgxMatColorPickerComponent, NgxMatColorPickerContentComponent, NgxMatColorPickerInput, NgxMatColorPickerInputEvent, NgxMatColorSliderComponent, NgxMatColorToggleComponent, NgxMatColorpickerToggleIcon, NumericColorInputDirective, convertDecimalToHex, createMissingDateImplError, getColorAtPosition, matchers, pad2, rgbToHex, rgbaToHex, stringInputToObject };
//# sourceMappingURL=ngxmc-color-picker.mjs.map