@kovalenko/material-color-picker/fesm2015/kovalenko-material-color-picker.mjs

Material color picker

import * as i0 from '@angular/core';
import { forwardRef, Component, Input, NgModule } from '@angular/core';
import { MatFormFieldControl } from '@angular/material/form-field';
import { BaseInputComponent } from '@kovalenko/base-components';
import * as i1 from '@angular/forms';
import { FormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import * as i2 from '@angular/material/input';
import { MatInputModule } from '@angular/material/input';
import * as i3 from '@angular/material/button';
import { MatButtonModule } from '@angular/material/button';
import * as i4 from '@angular/material/icon';
import { MatIconModule } from '@angular/material/icon';
import * as i5 from '@angular/common';
import { CommonModule } from '@angular/common';

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
            }] } });

class ColorPickerModule {
}
ColorPickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: ColorPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
ColorPickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.0", ngImport: i0, type: ColorPickerModule, declarations: [ColorPickerComponent], imports: [ReactiveFormsModule,
        FormsModule,
        MatInputModule,
        MatButtonModule,
        MatIconModule,
        CommonModule], exports: [ColorPickerComponent] });
ColorPickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: ColorPickerModule, imports: [ReactiveFormsModule,
        FormsModule,
        MatInputModule,
        MatButtonModule,
        MatIconModule,
        CommonModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: ColorPickerModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [
                        ColorPickerComponent
                    ],
                    imports: [
                        ReactiveFormsModule,
                        FormsModule,
                        MatInputModule,
                        MatButtonModule,
                        MatIconModule,
                        CommonModule,
                    ],
                    exports: [
                        ColorPickerComponent
                    ]
                }]
        }] });

/*
 * Public API Surface of color-picker
 */

/**
 * Generated bundle index. Do not edit.
 */

export { ColorPickerComponent, ColorPickerModule };
//# sourceMappingURL=kovalenko-material-color-picker.mjs.map