import * as i0 from '@angular/core';
import { Component, Input, NgModule } from '@angular/core';
import { UntypedFormControl } from '@angular/forms';
import { IMAGE_TYPES } from '@aztrix/components/property-edit';
import * as i1 from '@aztrix/helpers';
import { HelperPipesModule } from '@aztrix/helpers';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i3 from '@aztrix/components/file-value-edit';
import { FileValueEditModule } from '@aztrix/components/file-value-edit';
import { ImageSourceModule } from '@aztrix/components/image-source';
import { IconsModule } from '@aztrix/icons';

class BackgroundSelectComponent {
    constructor(_changeDetector, _urlTransformer) {
        this._changeDetector = _changeDetector;
        this._urlTransformer = _urlTransformer;
        this.nameControl = new UntypedFormControl();
        this.fileControl = new UntypedFormControl({});
        this.IMAGE_TYPES = IMAGE_TYPES;
        this._uploadedImage = '';
    }
    ngOnInit() {
        this.fileControl.valueChanges.subscribe((value) => {
            if ((value === null || value === void 0 ? void 0 : value.id) && this.form.value !== value.id) {
                this.form.setValue(value.id);
                this._uploadedImage = value.id;
                this._changeDetector.detectChanges();
            }
        });
        this.onDisableChange(this.form.disabled);
        this.form.registerOnDisabledChange((disabled) => this.onDisableChange(disabled));
    }
    ngOnChanges(changes) {
        if (changes.form && this.form) {
            this._uploadedImage = this.form.value;
            this._changeDetector.detectChanges();
        }
    }
    get imageUrl() {
        return this._uploadedImage
            ? this._uploadedImage.includes('data:image')
                ? this._uploadedImage
                : this._urlTransformer.transformUrl(`${this.downloadLink}/${this._uploadedImage}`)
            : null;
    }
    onDisableChange(disabled) {
        if (this.nameControl) {
            if (disabled) {
                this.nameControl.disable();
            }
            else {
                this.nameControl.enable();
            }
        }
    }
}
BackgroundSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: BackgroundSelectComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.UrlTransformerService }], target: i0.ɵɵFactoryTarget.Component });
BackgroundSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: BackgroundSelectComponent, selector: "ax-background-select", inputs: { form: "form", uploadLink: "uploadLink", downloadLink: "downloadLink" }, usesOnChanges: true, ngImport: i0, template: "<img [ngClass]=\"{disabled: nameControl.disabled}\" [attr.src]=\"imageUrl\" />\n<ax-file-value-edit\n  [nameControl]=\"nameControl\"\n  [fileControl]=\"fileControl\"\n  [uploadLink]=\"uploadLink\"\n  [acceptTypes]=\"IMAGE_TYPES\"\n></ax-file-value-edit>\n", styles: [":host ::ng-deep .bg-image-label ax-image-source img.image{object-fit:cover;width:100%;height:100%}.options-wrapper{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.options-wrapper>div{width:100%;min-height:150px;display:flex;flex-direction:column;align-items:center;text-align:center}.options-wrapper input[type=radio]{position:absolute;visibility:hidden;opacity:0}.options-wrapper input[type=radio]+label{position:relative;display:inline-block;width:100%;height:150px;overflow:hidden;border-radius:10px;border:2px solid #d7dde4;cursor:pointer}.options-wrapper input[type=radio]+label.bg-color-label{background-color:#363f48}.options-wrapper input[type=radio]+label .ax-button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.options-wrapper input[type=radio]:checked+label{border:2px solid var(--primary-color-500)}.wrapper-color{display:flex;padding-top:1rem;flex-direction:column;align-items:center;max-width:90px}.title{margin-top:.5rem;text-align:center}.option-label{margin-top:.5rem}::ng-deep ax-overlay .c-modal__body ax-file-value-edit{padding:1rem}img{border-radius:.6rem}img.disabled{opacity:.7}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3.FileValueEditComponent, selector: "ax-file-value-edit", inputs: ["fileControl", "nameControl", "label", "hint", "acceptTypes", "maxFileSize", "uploadLink", "required", "preview", "previewUrl", "demo", "published"], outputs: ["clearedValue", "uploadedFile"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: BackgroundSelectComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-background-select', template: "<img [ngClass]=\"{disabled: nameControl.disabled}\" [attr.src]=\"imageUrl\" />\n<ax-file-value-edit\n  [nameControl]=\"nameControl\"\n  [fileControl]=\"fileControl\"\n  [uploadLink]=\"uploadLink\"\n  [acceptTypes]=\"IMAGE_TYPES\"\n></ax-file-value-edit>\n", styles: [":host ::ng-deep .bg-image-label ax-image-source img.image{object-fit:cover;width:100%;height:100%}.options-wrapper{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.options-wrapper>div{width:100%;min-height:150px;display:flex;flex-direction:column;align-items:center;text-align:center}.options-wrapper input[type=radio]{position:absolute;visibility:hidden;opacity:0}.options-wrapper input[type=radio]+label{position:relative;display:inline-block;width:100%;height:150px;overflow:hidden;border-radius:10px;border:2px solid #d7dde4;cursor:pointer}.options-wrapper input[type=radio]+label.bg-color-label{background-color:#363f48}.options-wrapper input[type=radio]+label .ax-button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.options-wrapper input[type=radio]:checked+label{border:2px solid var(--primary-color-500)}.wrapper-color{display:flex;padding-top:1rem;flex-direction:column;align-items:center;max-width:90px}.title{margin-top:.5rem;text-align:center}.option-label{margin-top:.5rem}::ng-deep ax-overlay .c-modal__body ax-file-value-edit{padding:1rem}img{border-radius:.6rem}img.disabled{opacity:.7}\n"] }]
        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.UrlTransformerService }]; }, propDecorators: { form: [{
                type: Input
            }], uploadLink: [{
                type: Input
            }], downloadLink: [{
                type: Input
            }] } });

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

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

export { BackgroundSelectComponent, BackgroundSelectModule };
//# sourceMappingURL=aztrix-components-background-select.mjs.map
//# sourceMappingURL=aztrix-components-background-select.mjs.map
