import { Component, EventEmitter, Input, Output } from '@angular/core';
import { OverlayService } from '@aztrix/components/overlay';
import { ColorPickerService } from 'ngx-color-picker';
import * as i0 from "@angular/core";
import * as i1 from "@aztrix/components/overlay";
import * as i2 from "@aztrix/components/button";
import * as i3 from "ngx-color-picker";
import * as i4 from "@aztrix/helpers";
export class ColorPickerModalComponent {
    constructor(_overlay) {
        this._overlay = _overlay;
        this.valueChange = new EventEmitter();
        this._initialValue = '';
    }
    ngOnChanges(changes) {
        if (changes.value) {
            this._initialValue = this.value;
        }
    }
    save() {
        this._overlay.closeModal();
    }
    cancel() {
        this.valueChange.next(this._initialValue);
        this._overlay.closeModal();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ColorPickerModalComponent, deps: [{ token: i1.OverlayService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ColorPickerModalComponent, selector: "ng-component", inputs: { value: "value" }, outputs: { valueChange: "valueChange" }, providers: [ColorPickerService], usesOnChanges: true, ngImport: i0, template: "<div>\n  <color-picker\n    [cpToggle]=\"true\"\n    cpDialogDisplay=\"inline\"\n    cpAlphaChannel=\"disabled\"\n    [colorPicker]=\"value\"\n    (colorPickerChange)=\"valueChange.next($event)\"\n  ></color-picker>\n</div>\n<div class=\"actions h-button-wrapper\">\n  <button axButton (click)=\"cancel()\">\n    {{ 'label.cancel' | translate }}\n  </button>\n  <button axButton color=\"primary\" filled (click)=\"save()\">\n    {{ 'label.ok' | translate }}\n  </button>\n</div>\n", styles: [":host{display:flex;flex-direction:column;align-items:center;margin:1rem}.actions{width:100%}:host ::ng-deep .color-picker{border:none}\n"], dependencies: [{ kind: "directive", type: i2.ButtonDirective, selector: "[axButton]", inputs: ["color", "labelHideMobile", "smallButton", "bigButton", "fullWidth", "filled", "outline", "icon-button", "hoverLabel", "hover", "lowercase", "disabled"] }, { kind: "directive", type: i3.ColorPickerDirective, selector: "[colorPicker]", inputs: ["colorPicker", "cpWidth", "cpHeight", "cpToggle", "cpDisabled", "cpIgnoredElements", "cpFallbackColor", "cpColorMode", "cpCmykEnabled", "cpOutputFormat", "cpAlphaChannel", "cpDisableInput", "cpDialogDisplay", "cpSaveClickOutside", "cpCloseClickOutside", "cpUseRootViewContainer", "cpPosition", "cpPositionOffset", "cpPositionRelativeToArrow", "cpOKButton", "cpOKButtonText", "cpOKButtonClass", "cpCancelButton", "cpCancelButtonText", "cpCancelButtonClass", "cpEyeDropper", "cpPresetLabel", "cpPresetColors", "cpPresetColorsClass", "cpMaxPresetColorsLength", "cpPresetEmptyMessage", "cpPresetEmptyMessageClass", "cpAddColorButton", "cpAddColorButtonText", "cpAddColorButtonClass", "cpRemoveColorButtonClass", "cpArrowPosition", "cpExtraTemplate"], outputs: ["cpInputChange", "cpToggleChange", "cpSliderChange", "cpSliderDragEnd", "cpSliderDragStart", "colorPickerOpen", "colorPickerClose", "colorPickerCancel", "colorPickerSelect", "colorPickerChange", "cpCmykColorChange", "cpPresetColorsChange"], exportAs: ["ngxColorPicker"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ColorPickerModalComponent, decorators: [{
            type: Component,
            args: [{ providers: [ColorPickerService], template: "<div>\n  <color-picker\n    [cpToggle]=\"true\"\n    cpDialogDisplay=\"inline\"\n    cpAlphaChannel=\"disabled\"\n    [colorPicker]=\"value\"\n    (colorPickerChange)=\"valueChange.next($event)\"\n  ></color-picker>\n</div>\n<div class=\"actions h-button-wrapper\">\n  <button axButton (click)=\"cancel()\">\n    {{ 'label.cancel' | translate }}\n  </button>\n  <button axButton color=\"primary\" filled (click)=\"save()\">\n    {{ 'label.ok' | translate }}\n  </button>\n</div>\n", styles: [":host{display:flex;flex-direction:column;align-items:center;margin:1rem}.actions{width:100%}:host ::ng-deep .color-picker{border:none}\n"] }]
        }], ctorParameters: () => [{ type: i1.OverlayService }], propDecorators: { value: [{
                type: Input
            }], valueChange: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29sb3ItcGlja2VyLW1vZGFsLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL2xpYnMvY29tcG9uZW50cy9jb2xvci1waWNrZXItbW9kYWwvY29sb3ItcGlja2VyLW1vZGFsLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL2xpYnMvY29tcG9uZW50cy9jb2xvci1waWNrZXItbW9kYWwvY29sb3ItcGlja2VyLW1vZGFsLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBYSxNQUFNLEVBQWdCLE1BQU0sZUFBZSxDQUFDO0FBQy9GLE9BQU8sRUFBQyxjQUFjLEVBQUMsTUFBTSw0QkFBNEIsQ0FBQztBQUMxRCxPQUFPLEVBQUMsa0JBQWtCLEVBQUMsTUFBTSxrQkFBa0IsQ0FBQzs7Ozs7O0FBT3BELE1BQU0sT0FBTyx5QkFBeUI7SUFNcEMsWUFBb0IsUUFBd0I7UUFBeEIsYUFBUSxHQUFSLFFBQVEsQ0FBZ0I7UUFKbEMsZ0JBQVcsR0FBRyxJQUFJLFlBQVksRUFBVSxDQUFDO1FBRTNDLGtCQUFhLEdBQUcsRUFBRSxDQUFDO0lBRW9CLENBQUM7SUFFaEQsV0FBVyxDQUFDLE9BQXNCO1FBQ2hDLElBQUksT0FBTyxDQUFDLEtBQUssRUFBRSxDQUFDO1lBQ2xCLElBQUksQ0FBQyxhQUFhLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQztRQUNsQyxDQUFDO0lBQ0gsQ0FBQztJQUVELElBQUk7UUFDRixJQUFJLENBQUMsUUFBUSxDQUFDLFVBQVUsRUFBRSxDQUFDO0lBQzdCLENBQUM7SUFFRCxNQUFNO1FBQ0osSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxDQUFDO1FBQzFDLElBQUksQ0FBQyxRQUFRLENBQUMsVUFBVSxFQUFFLENBQUM7SUFDN0IsQ0FBQzsrR0FyQlUseUJBQXlCO21HQUF6Qix5QkFBeUIsNEdBRnpCLENBQUMsa0JBQWtCLENBQUMsK0NDUGpDLGtlQWlCQTs7NEZEUmEseUJBQXlCO2tCQUxyQyxTQUFTO2dDQUdHLENBQUMsa0JBQWtCLENBQUM7bUZBR3RCLEtBQUs7c0JBQWIsS0FBSztnQkFDSSxXQUFXO3NCQUFwQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE9uQ2hhbmdlcywgT3V0cHV0LCBTaW1wbGVDaGFuZ2VzfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7T3ZlcmxheVNlcnZpY2V9IGZyb20gJ0BhenRyaXgvY29tcG9uZW50cy9vdmVybGF5JztcbmltcG9ydCB7Q29sb3JQaWNrZXJTZXJ2aWNlfSBmcm9tICduZ3gtY29sb3ItcGlja2VyJztcblxuQENvbXBvbmVudCh7XG4gIHRlbXBsYXRlVXJsOiAnLi9jb2xvci1waWNrZXItbW9kYWwuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9jb2xvci1waWNrZXItbW9kYWwuY29tcG9uZW50LnNjc3MnXSxcbiAgcHJvdmlkZXJzOiBbQ29sb3JQaWNrZXJTZXJ2aWNlXSxcbn0pXG5leHBvcnQgY2xhc3MgQ29sb3JQaWNrZXJNb2RhbENvbXBvbmVudCBpbXBsZW1lbnRzIE9uQ2hhbmdlcyB7XG4gIEBJbnB1dCgpIHZhbHVlOiBzdHJpbmc7XG4gIEBPdXRwdXQoKSB2YWx1ZUNoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8c3RyaW5nPigpO1xuXG4gIHByaXZhdGUgX2luaXRpYWxWYWx1ZSA9ICcnO1xuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgX292ZXJsYXk6IE92ZXJsYXlTZXJ2aWNlKSB7fVxuXG4gIG5nT25DaGFuZ2VzKGNoYW5nZXM6IFNpbXBsZUNoYW5nZXMpOiB2b2lkIHtcbiAgICBpZiAoY2hhbmdlcy52YWx1ZSkge1xuICAgICAgdGhpcy5faW5pdGlhbFZhbHVlID0gdGhpcy52YWx1ZTtcbiAgICB9XG4gIH1cblxuICBzYXZlKCkge1xuICAgIHRoaXMuX292ZXJsYXkuY2xvc2VNb2RhbCgpO1xuICB9XG5cbiAgY2FuY2VsKCkge1xuICAgIHRoaXMudmFsdWVDaGFuZ2UubmV4dCh0aGlzLl9pbml0aWFsVmFsdWUpO1xuICAgIHRoaXMuX292ZXJsYXkuY2xvc2VNb2RhbCgpO1xuICB9XG59XG4iLCI8ZGl2PlxuICA8Y29sb3ItcGlja2VyXG4gICAgW2NwVG9nZ2xlXT1cInRydWVcIlxuICAgIGNwRGlhbG9nRGlzcGxheT1cImlubGluZVwiXG4gICAgY3BBbHBoYUNoYW5uZWw9XCJkaXNhYmxlZFwiXG4gICAgW2NvbG9yUGlja2VyXT1cInZhbHVlXCJcbiAgICAoY29sb3JQaWNrZXJDaGFuZ2UpPVwidmFsdWVDaGFuZ2UubmV4dCgkZXZlbnQpXCJcbiAgPjwvY29sb3ItcGlja2VyPlxuPC9kaXY+XG48ZGl2IGNsYXNzPVwiYWN0aW9ucyBoLWJ1dHRvbi13cmFwcGVyXCI+XG4gIDxidXR0b24gYXhCdXR0b24gKGNsaWNrKT1cImNhbmNlbCgpXCI+XG4gICAge3sgJ2xhYmVsLmNhbmNlbCcgfCB0cmFuc2xhdGUgfX1cbiAgPC9idXR0b24+XG4gIDxidXR0b24gYXhCdXR0b24gY29sb3I9XCJwcmltYXJ5XCIgZmlsbGVkIChjbGljayk9XCJzYXZlKClcIj5cbiAgICB7eyAnbGFiZWwub2snIHwgdHJhbnNsYXRlIH19XG4gIDwvYnV0dG9uPlxuPC9kaXY+XG4iXX0=