import * as i0 from '@angular/core';
import { Component, Input, NgModule } from '@angular/core';
import { IconSelectComponent } from '@aztrix/components/icon-select';
import * as i1 from '@aztrix/components/overlay';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i3 from '@aztrix/icons';
import { IconsModule } from '@aztrix/icons';
import * as i4 from '@aztrix/components/button';
import { ButtonModule } from '@aztrix/components/button';
import * as i5 from '@aztrix/helpers';
import { HelperPipesModule } from '@aztrix/helpers';
import { FormsModule } from '@angular/forms';

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

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

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

export { IconSelectEditComponent, IconSelectEditModule };
//# sourceMappingURL=aztrix-components-icon-select-edit.mjs.map
//# sourceMappingURL=aztrix-components-icon-select-edit.mjs.map
