import { Component, Input } from '@angular/core';
import { AbstractControl } from '@angular/forms';
import { IconSelectComponent } from '@aztrix/components/icon-select';
import { OverlayService } from '@aztrix/components/overlay';
import * as i0 from "@angular/core";
import * as i1 from "@aztrix/components/overlay";
import * as i2 from "@angular/common";
import * as i3 from "@aztrix/icons";
import * as i4 from "@aztrix/components/button";
import * as i5 from "@aztrix/helpers";
export class IconSelectEditComponent {
    constructor(_overlay) {
        this._overlay = _overlay;
    }
    ngOnInit() {
        if (!this.iconControl.value) {
            this.iconControl.setValue(this.defaultIcon, { emitEvent: false });
        }
    }
    changeIcon() {
        const modalRef = this._overlay.createModal(IconSelectComponent, {
            title: 'label.icon.change',
            init: (modal) => {
                modal.form = this.iconControl;
                modal.form.valueChanges.subscribe(() => {
                    this._overlay.closeModal(modalRef);
                });
            },
        });
    }
    resetIcon() {
        this.iconControl.setValue(this.defaultIcon);
    }
}
IconSelectEditComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: IconSelectEditComponent, deps: [{ token: i1.OverlayService }], target: i0.ɵɵFactoryTarget.Component });
IconSelectEditComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: IconSelectEditComponent, selector: "ax-icon-select-edit", inputs: { defaultIcon: "defaultIcon", iconControl: "iconControl" }, ngImport: i0, template: "<h3 class=\"small-label\">{{ 'label.icon.change' | translate }}</h3>\n<div class=\"icon-change-wrapper\">\n  <ax-icon class=\"icon custom-icon\" [name]=\"iconControl.value\"></ax-icon>\n  <div class=\"actions\">\n    <button axButton filled color=\"primary\" (click)=\"changeIcon()\">\n      {{ 'label.edit' | translate }}\n    </button>\n    <button *ngIf=\"iconControl?.value !== defaultIcon\" axButton (click)=\"resetIcon()\">\n      {{ 'label.reset' | translate }}\n    </button>\n  </div>\n</div>\n", styles: [".small-label{margin-bottom:.5rem}.icon-change-wrapper{display:flex;gap:.5rem;align-items:center;margin-bottom:.75rem}.custom-icon{background-color:#ebebeb;padding:7px;border-radius:20px;width:120px;height:120px}.actions{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.IconComponent, selector: "ax-icon", inputs: ["name", "inline"] }, { kind: "directive", type: i4.ButtonDirective, selector: "[axButton]", inputs: ["color", "labelHideMobile", "smallButton", "bigButton", "fullWidth", "filled", "outline", "icon-button", "hoverLabel", "hover", "lowercase", "disabled"] }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: IconSelectEditComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-icon-select-edit', template: "<h3 class=\"small-label\">{{ 'label.icon.change' | translate }}</h3>\n<div class=\"icon-change-wrapper\">\n  <ax-icon class=\"icon custom-icon\" [name]=\"iconControl.value\"></ax-icon>\n  <div class=\"actions\">\n    <button axButton filled color=\"primary\" (click)=\"changeIcon()\">\n      {{ 'label.edit' | translate }}\n    </button>\n    <button *ngIf=\"iconControl?.value !== defaultIcon\" axButton (click)=\"resetIcon()\">\n      {{ 'label.reset' | translate }}\n    </button>\n  </div>\n</div>\n", styles: [".small-label{margin-bottom:.5rem}.icon-change-wrapper{display:flex;gap:.5rem;align-items:center;margin-bottom:.75rem}.custom-icon{background-color:#ebebeb;padding:7px;border-radius:20px;width:120px;height:120px}.actions{display:flex;flex-direction:column}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.OverlayService }]; }, propDecorators: { defaultIcon: [{
                type: Input
            }], iconControl: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaWNvbi1zZWxlY3QtZWRpdC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9saWJzL2NvbXBvbmVudHMvaWNvbi1zZWxlY3QtZWRpdC9pY29uLXNlbGVjdC1lZGl0LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL2xpYnMvY29tcG9uZW50cy9pY29uLXNlbGVjdC1lZGl0L2ljb24tc2VsZWN0LWVkaXQuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLFNBQVMsRUFBRSxLQUFLLEVBQVMsTUFBTSxlQUFlLENBQUM7QUFDdkQsT0FBTyxFQUFDLGVBQWUsRUFBQyxNQUFNLGdCQUFnQixDQUFDO0FBQy9DLE9BQU8sRUFBQyxtQkFBbUIsRUFBQyxNQUFNLGdDQUFnQyxDQUFDO0FBQ25FLE9BQU8sRUFBQyxjQUFjLEVBQUMsTUFBTSw0QkFBNEIsQ0FBQzs7Ozs7OztBQU8xRCxNQUFNLE9BQU8sdUJBQXVCO0lBSWxDLFlBQW9CLFFBQXdCO1FBQXhCLGFBQVEsR0FBUixRQUFRLENBQWdCO0lBQUcsQ0FBQztJQUVoRCxRQUFRO1FBQ04sSUFBSSxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsS0FBSyxFQUFFO1lBQzNCLElBQUksQ0FBQyxXQUFXLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxXQUFXLEVBQUUsRUFBQyxTQUFTLEVBQUUsS0FBSyxFQUFDLENBQUMsQ0FBQztTQUNqRTtJQUNILENBQUM7SUFFRCxVQUFVO1FBQ1IsTUFBTSxRQUFRLEdBQUcsSUFBSSxDQUFDLFFBQVEsQ0FBQyxXQUFXLENBQUMsbUJBQW1CLEVBQUU7WUFDOUQsS0FBSyxFQUFFLG1CQUFtQjtZQUMxQixJQUFJLEVBQUUsQ0FBQyxLQUFLLEVBQUUsRUFBRTtnQkFDZCxLQUFLLENBQUMsSUFBSSxHQUFHLElBQUksQ0FBQyxXQUFXLENBQUM7Z0JBQzlCLEtBQUssQ0FBQyxJQUFJLENBQUMsWUFBWSxDQUFDLFNBQVMsQ0FBQyxHQUFHLEVBQUU7b0JBQ3JDLElBQUksQ0FBQyxRQUFRLENBQUMsVUFBVSxDQUFDLFFBQVEsQ0FBQyxDQUFDO2dCQUNyQyxDQUFDLENBQUMsQ0FBQztZQUNMLENBQUM7U0FDRixDQUFDLENBQUM7SUFDTCxDQUFDO0lBRUQsU0FBUztRQUNQLElBQUksQ0FBQyxXQUFXLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsQ0FBQztJQUM5QyxDQUFDOztvSEExQlUsdUJBQXVCO3dHQUF2Qix1QkFBdUIsK0hDVnBDLHlmQVlBOzJGREZhLHVCQUF1QjtrQkFMbkMsU0FBUzsrQkFDRSxxQkFBcUI7cUdBS3RCLFdBQVc7c0JBQW5CLEtBQUs7Z0JBQ0csV0FBVztzQkFBbkIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q29tcG9uZW50LCBJbnB1dCwgT25Jbml0fSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7QWJzdHJhY3RDb250cm9sfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5pbXBvcnQge0ljb25TZWxlY3RDb21wb25lbnR9IGZyb20gJ0BhenRyaXgvY29tcG9uZW50cy9pY29uLXNlbGVjdCc7XG5pbXBvcnQge092ZXJsYXlTZXJ2aWNlfSBmcm9tICdAYXp0cml4L2NvbXBvbmVudHMvb3ZlcmxheSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2F4LWljb24tc2VsZWN0LWVkaXQnLFxuICB0ZW1wbGF0ZVVybDogJy4vaWNvbi1zZWxlY3QtZWRpdC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2ljb24tc2VsZWN0LWVkaXQuY29tcG9uZW50LnNjc3MnXSxcbn0pXG5leHBvcnQgY2xhc3MgSWNvblNlbGVjdEVkaXRDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICBASW5wdXQoKSBkZWZhdWx0SWNvbjogc3RyaW5nO1xuICBASW5wdXQoKSBpY29uQ29udHJvbDogQWJzdHJhY3RDb250cm9sO1xuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgX292ZXJsYXk6IE92ZXJsYXlTZXJ2aWNlKSB7fVxuXG4gIG5nT25Jbml0KCkge1xuICAgIGlmICghdGhpcy5pY29uQ29udHJvbC52YWx1ZSkge1xuICAgICAgdGhpcy5pY29uQ29udHJvbC5zZXRWYWx1ZSh0aGlzLmRlZmF1bHRJY29uLCB7ZW1pdEV2ZW50OiBmYWxzZX0pO1xuICAgIH1cbiAgfVxuXG4gIGNoYW5nZUljb24oKSB7XG4gICAgY29uc3QgbW9kYWxSZWYgPSB0aGlzLl9vdmVybGF5LmNyZWF0ZU1vZGFsKEljb25TZWxlY3RDb21wb25lbnQsIHtcbiAgICAgIHRpdGxlOiAnbGFiZWwuaWNvbi5jaGFuZ2UnLFxuICAgICAgaW5pdDogKG1vZGFsKSA9PiB7XG4gICAgICAgIG1vZGFsLmZvcm0gPSB0aGlzLmljb25Db250cm9sO1xuICAgICAgICBtb2RhbC5mb3JtLnZhbHVlQ2hhbmdlcy5zdWJzY3JpYmUoKCkgPT4ge1xuICAgICAgICAgIHRoaXMuX292ZXJsYXkuY2xvc2VNb2RhbChtb2RhbFJlZik7XG4gICAgICAgIH0pO1xuICAgICAgfSxcbiAgICB9KTtcbiAgfVxuXG4gIHJlc2V0SWNvbigpIHtcbiAgICB0aGlzLmljb25Db250cm9sLnNldFZhbHVlKHRoaXMuZGVmYXVsdEljb24pO1xuICB9XG59XG4iLCI8aDMgY2xhc3M9XCJzbWFsbC1sYWJlbFwiPnt7ICdsYWJlbC5pY29uLmNoYW5nZScgfCB0cmFuc2xhdGUgfX08L2gzPlxuPGRpdiBjbGFzcz1cImljb24tY2hhbmdlLXdyYXBwZXJcIj5cbiAgPGF4LWljb24gY2xhc3M9XCJpY29uIGN1c3RvbS1pY29uXCIgW25hbWVdPVwiaWNvbkNvbnRyb2wudmFsdWVcIj48L2F4LWljb24+XG4gIDxkaXYgY2xhc3M9XCJhY3Rpb25zXCI+XG4gICAgPGJ1dHRvbiBheEJ1dHRvbiBmaWxsZWQgY29sb3I9XCJwcmltYXJ5XCIgKGNsaWNrKT1cImNoYW5nZUljb24oKVwiPlxuICAgICAge3sgJ2xhYmVsLmVkaXQnIHwgdHJhbnNsYXRlIH19XG4gICAgPC9idXR0b24+XG4gICAgPGJ1dHRvbiAqbmdJZj1cImljb25Db250cm9sPy52YWx1ZSAhPT0gZGVmYXVsdEljb25cIiBheEJ1dHRvbiAoY2xpY2spPVwicmVzZXRJY29uKClcIj5cbiAgICAgIHt7ICdsYWJlbC5yZXNldCcgfCB0cmFuc2xhdGUgfX1cbiAgICA8L2J1dHRvbj5cbiAgPC9kaXY+XG48L2Rpdj5cbiJdfQ==