@kovalenko/material-color-picker
Version:
Material color picker
86 lines • 11.3 kB
JavaScript
import { Component, forwardRef, Input } from '@angular/core';
import { MatFormFieldControl } from '@angular/material/form-field';
import { BaseInputComponent } from '@kovalenko/base-components';
import { FormControl } from '@angular/forms';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import * as i0 from "@angular/core";
import * as i1 from "@angular/forms";
import * as i2 from "@angular/material/input";
import * as i3 from "@angular/material/button";
import * as i4 from "@angular/material/icon";
import * as i5 from "@angular/common";
export class ColorPickerComponent extends BaseInputComponent {
constructor() {
super();
this.control = new FormControl();
this.subs = this.control.valueChanges.subscribe(next => {
this._ngModel = next;
this.ngModelChange.emit(this._ngModel);
});
}
set disabled(value) {
this._disabled = coerceBooleanProperty(value);
if (this._disabled) {
this.control.disable();
}
else {
this.control.enable();
}
this.stateChanges.next();
}
get disabled() {
return this._disabled;
}
set ngModel(v) {
this._ngModel = v;
this.control.setValue(v);
}
get ngModel() {
return this._ngModel;
}
ngOnDestroy() {
this.subs.unsubscribe();
}
onContainerClick(event) {
super.onContainerClick(event);
this.input.nativeElement.click();
}
onInput() {
this.onTouched();
}
}
ColorPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: ColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
ColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: ColorPickerComponent, selector: "ngc-color-picker", inputs: { disabled: "disabled" }, providers: [
{
provide: MatFormFieldControl,
useExisting: forwardRef(() => ColorPickerComponent),
multi: true,
},
], usesInheritance: true, ngImport: i0, template: `
<div>
<div><input [disabled]="disabled" type="color" matInput [formControl]="control" #matinput [class.op0]="!control.value" (input)="onInput()"></div>
<button *ngIf="control.value" type="button" mat-icon-button (click)="$event.stopPropagation(); $event.preventDefault(); control.setValue(null)">
<mat-icon>cancel</mat-icon>
</button>
</div>
`, isInline: true, styles: [":host>div{display:flex;align-items:center;gap:4px}:host>div>div{flex:1}:host>div:not(:hover) button{opacity:.1}input[type=color]{-webkit-appearance:none;border:none}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:none}.op0{opacity:0}button.mat-mdc-icon-button.mat-mdc-button-base{width:24px;height:24px;line-height:24px;padding:0;display:block;margin:0 -4px 0 0}button.mat-mdc-icon-button.mat-mdc-button-base .mat-icon{display:block;font-size:16px;line-height:24px}\n"], dependencies: [{ kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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"], exportAs: ["matInput"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: ColorPickerComponent, decorators: [{
type: Component,
args: [{ selector: 'ngc-color-picker', template: `
<div>
<div><input [disabled]="disabled" type="color" matInput [formControl]="control" #matinput [class.op0]="!control.value" (input)="onInput()"></div>
<button *ngIf="control.value" type="button" mat-icon-button (click)="$event.stopPropagation(); $event.preventDefault(); control.setValue(null)">
<mat-icon>cancel</mat-icon>
</button>
</div>
`, providers: [
{
provide: MatFormFieldControl,
useExisting: forwardRef(() => ColorPickerComponent),
multi: true,
},
], styles: [":host>div{display:flex;align-items:center;gap:4px}:host>div>div{flex:1}:host>div:not(:hover) button{opacity:.1}input[type=color]{-webkit-appearance:none;border:none}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:none}.op0{opacity:0}button.mat-mdc-icon-button.mat-mdc-button-base{width:24px;height:24px;line-height:24px;padding:0;display:block;margin:0 -4px 0 0}button.mat-mdc-icon-button.mat-mdc-button-base .mat-icon{display:block;font-size:16px;line-height:24px}\n"] }]
}], ctorParameters: function () { return []; }, propDecorators: { disabled: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29sb3ItcGlja2VyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL2NvbG9yLXBpY2tlci9zcmMvbGliL2NvbG9yLXBpY2tlci5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLFNBQVMsRUFBRSxVQUFVLEVBQUUsS0FBSyxFQUFvQixNQUFNLGVBQWUsQ0FBQztBQUM5RSxPQUFPLEVBQUMsbUJBQW1CLEVBQUMsTUFBTSw4QkFBOEIsQ0FBQztBQUNqRSxPQUFPLEVBQUMsa0JBQWtCLEVBQUMsTUFBTSw0QkFBNEIsQ0FBQztBQUM5RCxPQUFPLEVBQUMsV0FBVyxFQUFDLE1BQU0sZ0JBQWdCLENBQUM7QUFDM0MsT0FBTyxFQUFDLHFCQUFxQixFQUFDLE1BQU0sdUJBQXVCLENBQUM7Ozs7Ozs7QUFzQjVELE1BQU0sT0FBTyxvQkFBcUIsU0FBUSxrQkFBMEI7SUE2QmxFO1FBQ0UsS0FBSyxFQUFFLENBQUM7UUE3QlYsWUFBTyxHQUFHLElBQUksV0FBVyxFQUFFLENBQUM7UUErQjFCLElBQUksQ0FBQyxJQUFJLEdBQUcsSUFBSSxDQUFDLE9BQU8sQ0FBQyxZQUFZLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxFQUFFO1lBQ3JELElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDO1lBQ3JCLElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQztRQUN6QyxDQUFDLENBQUMsQ0FBQztJQUNMLENBQUM7SUFqQ0QsSUFDSSxRQUFRLENBQUMsS0FBYztRQUN6QixJQUFJLENBQUMsU0FBUyxHQUFHLHFCQUFxQixDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQzlDLElBQUksSUFBSSxDQUFDLFNBQVMsRUFBRTtZQUNsQixJQUFJLENBQUMsT0FBTyxDQUFDLE9BQU8sRUFBRSxDQUFDO1NBQ3hCO2FBQU07WUFDTCxJQUFJLENBQUMsT0FBTyxDQUFDLE1BQU0sRUFBRSxDQUFDO1NBQ3ZCO1FBQ0QsSUFBSSxDQUFDLFlBQVksQ0FBQyxJQUFJLEVBQUUsQ0FBQztJQUMzQixDQUFDO0lBRUQsSUFBSSxRQUFRO1FBQ1YsT0FBTyxJQUFJLENBQUMsU0FBUyxDQUFDO0lBQ3hCLENBQUM7SUFFRCxJQUFJLE9BQU8sQ0FBQyxDQUFTO1FBQ25CLElBQUksQ0FBQyxRQUFRLEdBQUcsQ0FBQyxDQUFDO1FBQ2xCLElBQUksQ0FBQyxPQUFPLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxDQUFDO0lBQzNCLENBQUM7SUFFRCxJQUFJLE9BQU87UUFDVCxPQUFPLElBQUksQ0FBQyxRQUFRLENBQUM7SUFDdkIsQ0FBQztJQWFELFdBQVc7UUFDVCxJQUFJLENBQUMsSUFBSSxDQUFDLFdBQVcsRUFBRSxDQUFDO0lBQzFCLENBQUM7SUFFRCxnQkFBZ0IsQ0FBQyxLQUFpQjtRQUNoQyxLQUFLLENBQUMsZ0JBQWdCLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDOUIsSUFBSSxDQUFDLEtBQUssQ0FBQyxhQUFhLENBQUMsS0FBSyxFQUFFLENBQUM7SUFDbkMsQ0FBQztJQUVELE9BQU87UUFDTCxJQUFJLENBQUMsU0FBUyxFQUFFLENBQUM7SUFDbkIsQ0FBQzs7aUhBakRVLG9CQUFvQjtxR0FBcEIsb0JBQW9CLDZFQVJwQjtRQUNUO1lBQ0UsT0FBTyxFQUFFLG1CQUFtQjtZQUM1QixXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLG9CQUFvQixDQUFDO1lBQ25ELEtBQUssRUFBRSxJQUFJO1NBQ1o7S0FDRixpREFmUzs7Ozs7OztHQU9UOzJGQVVVLG9CQUFvQjtrQkFuQmhDLFNBQVM7K0JBQ0Usa0JBQWtCLFlBQ2xCOzs7Ozs7O0dBT1QsYUFFVTt3QkFDVDs0QkFDRSxPQUFPLEVBQUUsbUJBQW1COzRCQUM1QixXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxxQkFBcUIsQ0FBQzs0QkFDbkQsS0FBSyxFQUFFLElBQUk7eUJBQ1o7cUJBQ0Y7MEVBTUcsUUFBUTtzQkFEWCxLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtDb21wb25lbnQsIGZvcndhcmRSZWYsIElucHV0LCBPbkRlc3Ryb3ksIE9uSW5pdH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge01hdEZvcm1GaWVsZENvbnRyb2x9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL2Zvcm0tZmllbGQnO1xuaW1wb3J0IHtCYXNlSW5wdXRDb21wb25lbnR9IGZyb20gJ0Brb3ZhbGVua28vYmFzZS1jb21wb25lbnRzJztcbmltcG9ydCB7Rm9ybUNvbnRyb2x9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcbmltcG9ydCB7Y29lcmNlQm9vbGVhblByb3BlcnR5fSBmcm9tICdAYW5ndWxhci9jZGsvY29lcmNpb24nO1xuaW1wb3J0IHtTdWJzY3JpcHRpb259IGZyb20gJ3J4anMnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICduZ2MtY29sb3ItcGlja2VyJyxcbiAgdGVtcGxhdGU6IGBcbiAgICA8ZGl2PlxuICAgICAgPGRpdj48aW5wdXQgW2Rpc2FibGVkXT1cImRpc2FibGVkXCIgdHlwZT1cImNvbG9yXCIgbWF0SW5wdXQgW2Zvcm1Db250cm9sXT1cImNvbnRyb2xcIiAjbWF0aW5wdXQgW2NsYXNzLm9wMF09XCIhY29udHJvbC52YWx1ZVwiIChpbnB1dCk9XCJvbklucHV0KClcIj48L2Rpdj5cbiAgICAgIDxidXR0b24gKm5nSWY9XCJjb250cm9sLnZhbHVlXCIgdHlwZT1cImJ1dHRvblwiIG1hdC1pY29uLWJ1dHRvbiAoY2xpY2spPVwiJGV2ZW50LnN0b3BQcm9wYWdhdGlvbigpOyAkZXZlbnQucHJldmVudERlZmF1bHQoKTsgY29udHJvbC5zZXRWYWx1ZShudWxsKVwiPlxuICAgICAgICA8bWF0LWljb24+Y2FuY2VsPC9tYXQtaWNvbj5cbiAgICAgIDwvYnV0dG9uPlxuICAgIDwvZGl2PlxuICBgLFxuICBzdHlsZVVybHM6IFsnLi9jb2xvci1waWNrZXIuY29tcG9uZW50LnNjc3MnXSxcbiAgcHJvdmlkZXJzOiBbXG4gICAge1xuICAgICAgcHJvdmlkZTogTWF0Rm9ybUZpZWxkQ29udHJvbCxcbiAgICAgIHVzZUV4aXN0aW5nOiBmb3J3YXJkUmVmKCgpID0+IENvbG9yUGlja2VyQ29tcG9uZW50KSxcbiAgICAgIG11bHRpOiB0cnVlLFxuICAgIH0sXG4gIF1cbn0pXG5leHBvcnQgY2xhc3MgQ29sb3JQaWNrZXJDb21wb25lbnQgZXh0ZW5kcyBCYXNlSW5wdXRDb21wb25lbnQ8c3RyaW5nPiBpbXBsZW1lbnRzIE9uSW5pdCwgT25EZXN0cm95IHtcbiAgY29udHJvbCA9IG5ldyBGb3JtQ29udHJvbCgpO1xuXG4gIEBJbnB1dCgpXG4gIHNldCBkaXNhYmxlZCh2YWx1ZTogYm9vbGVhbikge1xuICAgIHRoaXMuX2Rpc2FibGVkID0gY29lcmNlQm9vbGVhblByb3BlcnR5KHZhbHVlKTtcbiAgICBpZiAodGhpcy5fZGlzYWJsZWQpIHtcbiAgICAgIHRoaXMuY29udHJvbC5kaXNhYmxlKCk7XG4gICAgfSBlbHNlIHtcbiAgICAgIHRoaXMuY29udHJvbC5lbmFibGUoKTtcbiAgICB9XG4gICAgdGhpcy5zdGF0ZUNoYW5nZXMubmV4dCgpO1xuICB9XG5cbiAgZ2V0IGRpc2FibGVkKCk6IGJvb2xlYW4ge1xuICAgIHJldHVybiB0aGlzLl9kaXNhYmxlZDtcbiAgfVxuXG4gIHNldCBuZ01vZGVsKHY6IHN0cmluZykge1xuICAgIHRoaXMuX25nTW9kZWwgPSB2O1xuICAgIHRoaXMuY29udHJvbC5zZXRWYWx1ZSh2KTtcbiAgfVxuXG4gIGdldCBuZ01vZGVsKCk6IHN0cmluZyB7XG4gICAgcmV0dXJuIHRoaXMuX25nTW9kZWw7XG4gIH1cblxuICBwcml2YXRlIHN1YnM6IFN1YnNjcmlwdGlvbjtcblxuICBjb25zdHJ1Y3RvcigpIHtcbiAgICBzdXBlcigpO1xuXG4gICAgdGhpcy5zdWJzID0gdGhpcy5jb250cm9sLnZhbHVlQ2hhbmdlcy5zdWJzY3JpYmUobmV4dCA9PiB7XG4gICAgICB0aGlzLl9uZ01vZGVsID0gbmV4dDtcbiAgICAgIHRoaXMubmdNb2RlbENoYW5nZS5lbWl0KHRoaXMuX25nTW9kZWwpO1xuICAgIH0pO1xuICB9XG5cbiAgbmdPbkRlc3Ryb3koKTogdm9pZCB7XG4gICAgdGhpcy5zdWJzLnVuc3Vic2NyaWJlKCk7XG4gIH1cblxuICBvbkNvbnRhaW5lckNsaWNrKGV2ZW50OiBNb3VzZUV2ZW50KSB7XG4gICAgc3VwZXIub25Db250YWluZXJDbGljayhldmVudCk7XG4gICAgdGhpcy5pbnB1dC5uYXRpdmVFbGVtZW50LmNsaWNrKCk7XG4gIH1cblxuICBvbklucHV0KCkge1xuICAgIHRoaXMub25Ub3VjaGVkKCk7XG4gIH1cblxufVxuIl19