import * as i0 from '@angular/core';
import { Component, ChangeDetectionStrategy, Input, NgModule } from '@angular/core';
import * as i2 from '@angular/forms';
import { UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
import * as i7 from '@aztrix/helpers';
import { hasEqualValues, hasValue, isVerified, HelperPipesModule } from '@aztrix/helpers';
import { Subscription } from 'rxjs';
import { startWith } from 'rxjs/operators';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i3 from '@angular/material/form-field';
import { MatFormFieldModule } from '@angular/material/form-field';
import * as i4 from '@angular/material/select';
import { MatSelectModule } from '@angular/material/select';
import * as i5 from '@angular/material/core';
import * as i6 from '@aztrix/icons';
import { IconsModule } from '@aztrix/icons';

class PropertySelectComponent {
    constructor() {
        this.options = [];
        this.required = true;
        this.verifiedOnly = false;
        this.formValue = new UntypedFormControl();
        this.hasEqualValues = hasEqualValues;
        this._subscriptions = new Subscription();
    }
    ngOnInit() {
        this._subscriptions.add(this.formValue.valueChanges.subscribe((value) => {
            this.form.setValue(value);
        }));
    }
    ngOnChanges(changes) {
        if (!this.form) {
            throw Error('PropertySelectComponent should have a predefined FormControl as input property');
        }
        if (!hasValue(this.form.value) && this.options?.length > 0 && this.required) {
            this.form.setValue(this._firstAvailableValue || '');
        }
        if (changes.form) {
            this._subscriptions.add(this.form.valueChanges.pipe(startWith(this.form.value)).subscribe((property) => {
                if (!hasEqualValues(property, this.formValue.value)) {
                    this.formValue.setValue(property);
                }
            }));
        }
    }
    ngOnDestroy() {
        this._subscriptions.unsubscribe();
    }
    get propertyType() {
        if (!this.options) {
            return undefined;
        }
        const property = this.options.length ? this.options[0] : {};
        return property.type;
    }
    get _firstAvailableValue() {
        if (!this.options) {
            return undefined;
        }
        return this.verifiedOnly
            ? this.options.find((property) => isVerified(property))
            : this.options[0];
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PropertySelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PropertySelectComponent, selector: "ax-property-select", inputs: { form: "form", options: "options", hint: "hint", error: "error", required: "required", verifiedOnly: "verifiedOnly", noValuePlaceholder: "noValuePlaceholder" }, usesOnChanges: true, ngImport: i0, template: "<mat-form-field\n  appearance=\"outline\"\n  class=\"c-input\"\n  [hideRequiredMarker]=\"!required\"\n  style=\"width: 100%\"\n>\n  <mat-label>{{ propertyType | propertyTypeLabel }}</mat-label>\n  <mat-select\n    disableOptionCentering\n    [formControl]=\"formValue\"\n    [required]=\"required\"\n    [compareWith]=\"hasEqualValues\"\n  >\n    <mat-option\n      *ngFor=\"let property of options\"\n      [disabled]=\"verifiedOnly ? !(property | propertyIsVerified) : false\"\n      [value]=\"property\"\n    >\n      {{ property | propertyDisplayValue: noValuePlaceholder }}\n      <ax-icon\n        *ngIf=\"verifiedOnly\"\n        class=\"icon checkmark\"\n        [ngClass]=\"{red: !(property | propertyIsVerified)}\"\n        name=\"custom:verified\"\n      ></ax-icon>\n    </mat-option>\n    <ng-content></ng-content>\n  </mat-select>\n  <mat-hint align=\"end\">{{ hint }}</mat-hint>\n  <mat-error>{{ error }}</mat-error>\n</mat-form-field>\n", styles: [":host{display:block}.required{color:var(--warn-color-500)}.checkmark.icon{font-size:1rem;line-height:1;color:var(--primary-color-500);display:inline-block;width:1em;height:1em}.checkmark.icon.red{color:var(--warn-color-500)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i6.IconComponent, selector: "ax-icon", inputs: ["name", "inline"] }, { kind: "pipe", type: i7.PropertyDisplayValuePipe, name: "propertyDisplayValue" }, { kind: "pipe", type: i7.PropertyTypeLabelPipe, name: "propertyTypeLabel" }, { kind: "pipe", type: i7.PropertyIsVerifiedPipe, name: "propertyIsVerified" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PropertySelectComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-property-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-form-field\n  appearance=\"outline\"\n  class=\"c-input\"\n  [hideRequiredMarker]=\"!required\"\n  style=\"width: 100%\"\n>\n  <mat-label>{{ propertyType | propertyTypeLabel }}</mat-label>\n  <mat-select\n    disableOptionCentering\n    [formControl]=\"formValue\"\n    [required]=\"required\"\n    [compareWith]=\"hasEqualValues\"\n  >\n    <mat-option\n      *ngFor=\"let property of options\"\n      [disabled]=\"verifiedOnly ? !(property | propertyIsVerified) : false\"\n      [value]=\"property\"\n    >\n      {{ property | propertyDisplayValue: noValuePlaceholder }}\n      <ax-icon\n        *ngIf=\"verifiedOnly\"\n        class=\"icon checkmark\"\n        [ngClass]=\"{red: !(property | propertyIsVerified)}\"\n        name=\"custom:verified\"\n      ></ax-icon>\n    </mat-option>\n    <ng-content></ng-content>\n  </mat-select>\n  <mat-hint align=\"end\">{{ hint }}</mat-hint>\n  <mat-error>{{ error }}</mat-error>\n</mat-form-field>\n", styles: [":host{display:block}.required{color:var(--warn-color-500)}.checkmark.icon{font-size:1rem;line-height:1;color:var(--primary-color-500);display:inline-block;width:1em;height:1em}.checkmark.icon.red{color:var(--warn-color-500)}\n"] }]
        }], propDecorators: { form: [{
                type: Input
            }], options: [{
                type: Input
            }], hint: [{
                type: Input
            }], error: [{
                type: Input
            }], required: [{
                type: Input
            }], verifiedOnly: [{
                type: Input
            }], noValuePlaceholder: [{
                type: Input
            }] } });

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

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

export { PropertySelectComponent, PropertySelectModule };
//# sourceMappingURL=aztrix-components-property-select.mjs.map
