import * as i0 from '@angular/core';
import { Component, Input, NgModule } from '@angular/core';
import { ColorPickerModalComponent, ColorPickerModalModule } from '@aztrix/components/color-picker-modal';
import * as i1 from '@aztrix/components/overlay';
import { ModalSize } from '@aztrix/components/overlay';
import { Subscription } from 'rxjs';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';

class ColorSelectButtonComponent {
    constructor(_elementRef, _overlay) {
        this._elementRef = _elementRef;
        this._overlay = _overlay;
        this._subscription = new Subscription();
    }
    setValue(value) {
        if (this.form?.value !== value) {
            this.form?.setValue(value);
        }
    }
    openColorPickerModal() {
        this._overlay.createModal(this._elementRef, ColorPickerModalComponent, {
            modalSize: ModalSize.EXTRA_SMALL,
            hasTitleBar: false,
            init: (modal) => {
                modal.value = this.form?.value;
                this._subscription.unsubscribe();
                this._subscription = modal.valueChange.subscribe((value) => {
                    this.setValue(value);
                });
            },
            close: () => {
                this._subscription.unsubscribe();
            },
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ColorSelectButtonComponent, deps: [{ token: i0.ElementRef }, { token: i1.OverlayService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ColorSelectButtonComponent, selector: "ax-color-select-button", inputs: { form: "form", title: "title" }, ngImport: i0, template: "<button [style.background]=\"form?.value\" (click)=\"openColorPickerModal()\"></button>\n<div class=\"title\" *ngIf=\"title\">{{ title }}</div>\n", styles: [":host{display:flex;flex-direction:column;align-items:center;width:100%;max-width:90px}.title{margin-top:.5rem}button{width:50px;height:50px;border-radius:10px;border:1px solid #7a8692;transition:border .4s cubic-bezier(.25,.8,.25,1)}button:focus{outline:0;border:1px solid var(--primary-color-500)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ColorSelectButtonComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-color-select-button', template: "<button [style.background]=\"form?.value\" (click)=\"openColorPickerModal()\"></button>\n<div class=\"title\" *ngIf=\"title\">{{ title }}</div>\n", styles: [":host{display:flex;flex-direction:column;align-items:center;width:100%;max-width:90px}.title{margin-top:.5rem}button{width:50px;height:50px;border-radius:10px;border:1px solid #7a8692;transition:border .4s cubic-bezier(.25,.8,.25,1)}button:focus{outline:0;border:1px solid var(--primary-color-500)}\n"] }]
        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.OverlayService }], propDecorators: { form: [{
                type: Input
            }], title: [{
                type: Input
            }] } });

class ColorSelectButtonModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ColorSelectButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: ColorSelectButtonModule, declarations: [ColorSelectButtonComponent], imports: [CommonModule, ColorPickerModalModule], exports: [ColorSelectButtonComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ColorSelectButtonModule, imports: [CommonModule, ColorPickerModalModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ColorSelectButtonModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [ColorSelectButtonComponent],
                    imports: [CommonModule, ColorPickerModalModule],
                    exports: [ColorSelectButtonComponent],
                }]
        }] });

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

export { ColorSelectButtonComponent, ColorSelectButtonModule };
//# sourceMappingURL=aztrix-components-color-select-button.mjs.map
