import * as i0 from '@angular/core';
import { EventEmitter, Component, Input, Output, NgModule } from '@angular/core';
import '@angular/forms';
import * as i1 from '@aztrix/components/overlay';
import { ModalSize } from '@aztrix/components/overlay';
import * as i4 from '@aztrix/helpers';
import { contrastingFontColor, HelperPipesModule } from '@aztrix/helpers';
import { Subscription, ReplaySubject, combineLatest, switchMap, startWith, map } from 'rxjs';
import * as i3 from 'ngx-color-picker';
import { ColorPickerService, ColorPickerModule } from 'ngx-color-picker';
import * as i2 from '@aztrix/components/button';
import { ButtonModule } from '@aztrix/components/button';
import * as i2$1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i3$1 from '@aztrix/icons';
import { IconsModule } from '@aztrix/icons';

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();
    }
}
ColorPickerModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: ColorPickerModalComponent, deps: [{ token: i1.OverlayService }], target: i0.ɵɵFactoryTarget.Component });
ColorPickerModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", 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: ["cpWidth", "cpHeight", "cpToggle", "cpDisabled", "cpIgnoredElements", "cpFallbackColor", "cpColorMode", "cpCmykEnabled", "cpOutputFormat", "cpAlphaChannel", "cpDisableInput", "cpDialogDisplay", "cpSaveClickOutside", "cpCloseClickOutside", "cpUseRootViewContainer", "cpPosition", "cpPositionOffset", "cpPositionRelativeToArrow", "cpOKButton", "cpOKButtonText", "cpOKButtonClass", "cpCancelButton", "cpCancelButtonText", "cpCancelButtonClass", "cpPresetLabel", "cpPresetColorsClass", "cpMaxPresetColorsLength", "cpPresetEmptyMessage", "cpPresetEmptyMessageClass", "cpAddColorButton", "cpAddColorButtonText", "cpAddColorButtonClass", "cpRemoveColorButtonClass", "colorPicker", "cpPresetColors"], 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: "15.1.5", 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: function () { return [{ type: i1.OverlayService }]; }, propDecorators: { value: [{
                type: Input
            }], valueChange: [{
                type: Output
            }] } });

class ColorSelectComponent {
    constructor(_overlay) {
        this._overlay = _overlay;
        this.canClear = false;
        this._subscription = new Subscription();
        this._form$ = new ReplaySubject(1);
        this._predefinedColors$ = new ReplaySubject(1);
        this.customBackgroundColor$ = combineLatest([
            this._form$.pipe(switchMap((form) => form.valueChanges.pipe(startWith(form.value)))),
            this._predefinedColors$,
        ]).pipe(map(([value, predefinedColors]) => {
            return (predefinedColors || []).includes(value) ? '#fff' : value;
        }));
        this.customBackgroundFontColor$ = this.customBackgroundColor$.pipe(map((color) => contrastingFontColor(color)));
    }
    ngOnChanges(changes) {
        if (changes.form && this.form) {
            this._form$.next(this.form);
        }
        if (changes.predefinedColors) {
            this._predefinedColors$.next(this.predefinedColors);
        }
    }
    openColorPickerModal() {
        this._overlay.createModal(ColorPickerModalComponent, {
            modalSize: ModalSize.EXTRA_SMALL,
            hasTitleBar: false,
            closeOnBackdropClick: false,
            init: (modal) => {
                modal.value = this.form?.value;
                this._subscription.unsubscribe();
                this._subscription = modal.valueChange.subscribe((value) => {
                    this.setValue(value);
                });
            },
            close: () => {
                this._subscription.unsubscribe();
            },
        });
    }
    clear() {
        if (this.form) {
            this.form.setValue('');
        }
    }
    setValue(value) {
        if (this.form?.value !== value) {
            this.form?.setValue(value);
        }
    }
}
ColorSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: ColorSelectComponent, deps: [{ token: i1.OverlayService }], target: i0.ɵɵFactoryTarget.Component });
ColorSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: ColorSelectComponent, selector: "ax-color-select", inputs: { form: "form", predefinedColors: "predefinedColors", canClear: "canClear" }, usesOnChanges: true, ngImport: i0, template: "<button class=\"color clear\" *ngIf=\"canClear\" [ngClass]=\"{selected: !form?.value}\" (click)=\"clear()\">\n  <ax-icon class=\"color-icon\" name=\"cancel\"></ax-icon>\n</button>\n<button\n  class=\"color\"\n  [ngClass]=\"{selected: color === form?.value}\"\n  *ngFor=\"let color of predefinedColors\"\n  [style.background]=\"color\"\n  (click)=\"setValue(color)\"\n></button>\n<button\n  class=\"color custom\"\n  [ngClass]=\"{selected: form?.value && !(predefinedColors || []).includes(form?.value)}\"\n  [style.background]=\"customBackgroundColor$ | async\"\n  [style.color]=\"customBackgroundFontColor$ | async\"\n  (click)=\"openColorPickerModal()\"\n>\n  <ax-icon class=\"color-icon\" name=\"tune-variant\"></ax-icon>\n</button>\n", styles: [":host{display:flex;align-items:center;width:100%;flex-wrap:wrap;gap:4px}.title{margin-top:.5rem}.color{display:flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:10px;border:1px solid #363f48;transition:border .4s cubic-bezier(.25,.8,.25,1)}.color.selected{outline:3px solid var(--primary-color-500)}.color-icon{width:24px;height:24px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.IconComponent, selector: "ax-icon", inputs: ["name", "inline"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: ColorSelectComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-color-select', template: "<button class=\"color clear\" *ngIf=\"canClear\" [ngClass]=\"{selected: !form?.value}\" (click)=\"clear()\">\n  <ax-icon class=\"color-icon\" name=\"cancel\"></ax-icon>\n</button>\n<button\n  class=\"color\"\n  [ngClass]=\"{selected: color === form?.value}\"\n  *ngFor=\"let color of predefinedColors\"\n  [style.background]=\"color\"\n  (click)=\"setValue(color)\"\n></button>\n<button\n  class=\"color custom\"\n  [ngClass]=\"{selected: form?.value && !(predefinedColors || []).includes(form?.value)}\"\n  [style.background]=\"customBackgroundColor$ | async\"\n  [style.color]=\"customBackgroundFontColor$ | async\"\n  (click)=\"openColorPickerModal()\"\n>\n  <ax-icon class=\"color-icon\" name=\"tune-variant\"></ax-icon>\n</button>\n", styles: [":host{display:flex;align-items:center;width:100%;flex-wrap:wrap;gap:4px}.title{margin-top:.5rem}.color{display:flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:10px;border:1px solid #363f48;transition:border .4s cubic-bezier(.25,.8,.25,1)}.color.selected{outline:3px solid var(--primary-color-500)}.color-icon{width:24px;height:24px}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.OverlayService }]; }, propDecorators: { form: [{
                type: Input
            }], predefinedColors: [{
                type: Input
            }], canClear: [{
                type: Input
            }] } });

class ColorSelectModule {
}
ColorSelectModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: ColorSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
ColorSelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1.5", ngImport: i0, type: ColorSelectModule, declarations: [ColorSelectComponent, ColorPickerModalComponent], imports: [CommonModule, HelperPipesModule, IconsModule, ButtonModule, ColorPickerModule], exports: [ColorSelectComponent] });
ColorSelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: ColorSelectModule, imports: [CommonModule, HelperPipesModule, IconsModule, ButtonModule, ColorPickerModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: ColorSelectModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [ColorSelectComponent, ColorPickerModalComponent],
                    imports: [CommonModule, HelperPipesModule, IconsModule, ButtonModule, ColorPickerModule],
                    exports: [ColorSelectComponent],
                }]
        }] });

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

export { ColorSelectComponent, ColorSelectModule };
//# sourceMappingURL=aztrix-components-color-select.mjs.map
//# sourceMappingURL=aztrix-components-color-select.mjs.map
