import * as i0 from '@angular/core';
import { Directive, Input, Component, ChangeDetectionStrategy, HostBinding, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i2 from '@aztrix/helpers';
import { HelperPipesModule } from '@aztrix/helpers';
import * as i1$1 from '@aztrix/components/image-source';
import { ImageSourceModule } from '@aztrix/components/image-source';
import * as i2$1 from '@aztrix/icons';
import { IconsModule } from '@aztrix/icons';
import * as i1$2 from '@angular/platform-browser';

class ValueView {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ValueView, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: ValueView, inputs: { label: "label", value: "value" }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ValueView, decorators: [{
            type: Directive
        }], propDecorators: { label: [{
                type: Input
            }], value: [{
                type: Input
            }] } });

class ValueViewLabelComponent {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ValueViewLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ValueViewLabelComponent, selector: "ax-value-view-label", inputs: { label: "label" }, host: { properties: { "class.has-label": "this.label" } }, ngImport: i0, template: `<span class="label" *ngIf="label">{{ label }} </span> <ng-content></ng-content>`, isInline: true, styles: [":host{display:grid;grid-template-rows:auto auto;align-items:center;max-width:100%;width:100%}:host.has-label{font-weight:700}.label{color:#363f48;font-size:.75rem;margin:0;line-height:1.6;text-transform:uppercase;font-weight:400}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ValueViewLabelComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-value-view-label', template: `<span class="label" *ngIf="label">{{ label }} </span> <ng-content></ng-content>`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:grid;grid-template-rows:auto auto;align-items:center;max-width:100%;width:100%}:host.has-label{font-weight:700}.label{color:#363f48;font-size:.75rem;margin:0;line-height:1.6;text-transform:uppercase;font-weight:400}\n"] }]
        }], propDecorators: { label: [{
                type: HostBinding,
                args: ['class.has-label']
            }, {
                type: Input
            }] } });

class BooleanValueViewComponent extends ValueView {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BooleanValueViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: BooleanValueViewComponent, selector: "ax-boolean-value-view", usesInheritance: true, ngImport: i0, template: "<ax-value-view-label [label]=\"label\">\n  <span>{{ (value === 'true' ? 'label.on' : 'label.off') | translate }}</span>\n</ax-value-view-label>\n", dependencies: [{ kind: "component", type: ValueViewLabelComponent, selector: "ax-value-view-label", inputs: ["label"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BooleanValueViewComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-boolean-value-view', template: "<ax-value-view-label [label]=\"label\">\n  <span>{{ (value === 'true' ? 'label.on' : 'label.off') | translate }}</span>\n</ax-value-view-label>\n" }]
        }] });

class TextValueViewComponent extends ValueView {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextValueViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TextValueViewComponent, selector: "ax-text-value-view", usesInheritance: true, ngImport: i0, template: "<ax-value-view-label [label]=\"label\">\n  <span>{{ value }}</span>\n</ax-value-view-label>\n", dependencies: [{ kind: "component", type: ValueViewLabelComponent, selector: "ax-value-view-label", inputs: ["label"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextValueViewComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-text-value-view', template: "<ax-value-view-label [label]=\"label\">\n  <span>{{ value }}</span>\n</ax-value-view-label>\n" }]
        }] });

class ImageValueViewComponent extends ValueView {
    get id() {
        try {
            return JSON.parse(this.value).id;
        }
        catch {
            return '';
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ImageValueViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ImageValueViewComponent, selector: "ax-image-value-view", usesInheritance: true, ngImport: i0, template: "<ax-value-view-label [label]=\"label\">\n  <ax-image-source class=\"image\" [source]=\"'/staticFiles/pageFiles/' + id\">\n    <ax-icon class=\"icon\" name=\"image\"></ax-icon>\n  </ax-image-source>\n</ax-value-view-label>\n", styles: [".image{max-width:100px}\n", ":host{display:grid;grid-template-rows:auto auto;align-items:center;font-weight:400;max-width:100%;width:100%;margin-bottom:.25rem}\n"], dependencies: [{ kind: "component", type: i1$1.ImageSourceComponent, selector: "ax-image-source", inputs: ["source", "fallbackSource", "actualSize", "alt", "round", "rounded", "border"] }, { kind: "component", type: i2$1.IconComponent, selector: "ax-icon", inputs: ["name", "inline"] }, { kind: "component", type: ValueViewLabelComponent, selector: "ax-value-view-label", inputs: ["label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ImageValueViewComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-image-value-view', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ax-value-view-label [label]=\"label\">\n  <ax-image-source class=\"image\" [source]=\"'/staticFiles/pageFiles/' + id\">\n    <ax-icon class=\"icon\" name=\"image\"></ax-icon>\n  </ax-image-source>\n</ax-value-view-label>\n", styles: [".image{max-width:100px}\n", ":host{display:grid;grid-template-rows:auto auto;align-items:center;font-weight:400;max-width:100%;width:100%;margin-bottom:.25rem}\n"] }]
        }] });

class FileValueViewComponent extends ValueView {
    get name() {
        try {
            return JSON.parse(this.value).name;
        }
        catch {
            return '';
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FileValueViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FileValueViewComponent, selector: "ax-file-value-view", usesInheritance: true, ngImport: i0, template: "<ax-value-view-label [label]=\"label\">\n  <span>{{ name }}</span>\n</ax-value-view-label>\n", styles: [":host{line-break:anywhere}\n", ":host{display:grid;grid-template-rows:auto auto;align-items:center;font-weight:400;max-width:100%;width:100%;margin-bottom:.25rem}\n"], dependencies: [{ kind: "component", type: ValueViewLabelComponent, selector: "ax-value-view-label", inputs: ["label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FileValueViewComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-file-value-view', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ax-value-view-label [label]=\"label\">\n  <span>{{ name }}</span>\n</ax-value-view-label>\n", styles: [":host{line-break:anywhere}\n", ":host{display:grid;grid-template-rows:auto auto;align-items:center;font-weight:400;max-width:100%;width:100%;margin-bottom:.25rem}\n"] }]
        }] });

class RichTextValueViewComponent extends ValueView {
    constructor(_domSanitizer, _changeDetector) {
        super();
        this._domSanitizer = _domSanitizer;
        this._changeDetector = _changeDetector;
        this.snow = true;
    }
    ngOnChanges(changes) {
        if (changes.value) {
            this.safeHtml = this._domSanitizer.bypassSecurityTrustHtml(this.value || '');
            this._changeDetector.markForCheck();
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RichTextValueViewComponent, deps: [{ token: i1$2.DomSanitizer }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: RichTextValueViewComponent, selector: "ax-rich-text-value-view", host: { properties: { "class.ql-snow": "this.snow" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ax-value-view-label [label]=\"label\">\n  <span class=\"ql-editor\" [innerHTML]=\"safeHtml\"></span>\n</ax-value-view-label>\n", styles: [":host ::ng-deep .ql-editor .ax-quill-template-variable{display:inline-block;background-color:transparent;border-bottom:2px solid var(--primary-color-500);border-radius:6px;padding:1px 6px;cursor:pointer}:host ::ng-deep .ql-editor .ax-quill-template-variable:hover{background-color:var(--primary-color-100)}:host ::ng-deep .ql-editor .ax-quill-template-variable.invalid{color:var(--warn-color-300);border-bottom:2px solid var(--warn-color-300)}:host ::ng-deep .ql-editor .ax-quill-template-variable.is-disabled{cursor:default;pointer-events:none;border-bottom:2px solid #bdc3c9}:host ::ng-deep .ql-editor .ax-quill-template-variable.is-disabled:hover{background-color:transparent}.ql-editor{text-align:left;padding:0;-webkit-hyphens:auto;hyphens:auto}@page{margin:1in}\n", ":host{display:grid;grid-template-rows:auto auto;align-items:center;font-weight:400;max-width:100%;width:100%;margin-bottom:.25rem}\n"], dependencies: [{ kind: "component", type: ValueViewLabelComponent, selector: "ax-value-view-label", inputs: ["label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RichTextValueViewComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-rich-text-value-view', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ax-value-view-label [label]=\"label\">\n  <span class=\"ql-editor\" [innerHTML]=\"safeHtml\"></span>\n</ax-value-view-label>\n", styles: [":host ::ng-deep .ql-editor .ax-quill-template-variable{display:inline-block;background-color:transparent;border-bottom:2px solid var(--primary-color-500);border-radius:6px;padding:1px 6px;cursor:pointer}:host ::ng-deep .ql-editor .ax-quill-template-variable:hover{background-color:var(--primary-color-100)}:host ::ng-deep .ql-editor .ax-quill-template-variable.invalid{color:var(--warn-color-300);border-bottom:2px solid var(--warn-color-300)}:host ::ng-deep .ql-editor .ax-quill-template-variable.is-disabled{cursor:default;pointer-events:none;border-bottom:2px solid #bdc3c9}:host ::ng-deep .ql-editor .ax-quill-template-variable.is-disabled:hover{background-color:transparent}.ql-editor{text-align:left;padding:0;-webkit-hyphens:auto;hyphens:auto}@page{margin:1in}\n", ":host{display:grid;grid-template-rows:auto auto;align-items:center;font-weight:400;max-width:100%;width:100%;margin-bottom:.25rem}\n"] }]
        }], ctorParameters: () => [{ type: i1$2.DomSanitizer }, { type: i0.ChangeDetectorRef }], propDecorators: { snow: [{
                type: HostBinding,
                args: ['class.ql-snow']
            }] } });

class DateValueViewComponent extends ValueView {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DateValueViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DateValueViewComponent, selector: "ax-date-value-view", usesInheritance: true, ngImport: i0, template: "<ax-value-view-label [label]=\"label\">\n  <span>{{ value | formatDate }}</span>\n</ax-value-view-label>\n", dependencies: [{ kind: "component", type: ValueViewLabelComponent, selector: "ax-value-view-label", inputs: ["label"] }, { kind: "pipe", type: i2.FormatDatePipe, name: "formatDate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DateValueViewComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-date-value-view', template: "<ax-value-view-label [label]=\"label\">\n  <span>{{ value | formatDate }}</span>\n</ax-value-view-label>\n" }]
        }] });

class ValueViewComponent {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ValueViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ValueViewComponent, selector: "ax-value-view", inputs: { type: "type", label: "label", value: "value" }, ngImport: i0, template: "<ng-template #valueView let-v>\n  <ng-container [ngSwitch]=\"type\">\n    <ax-boolean-value-view\n      *ngSwitchCase=\"'BOOLEAN'\"\n      [value]=\"v\"\n      [label]=\"label\"\n    ></ax-boolean-value-view>\n    <ax-image-value-view *ngSwitchCase=\"'IMAGE'\" [value]=\"v\" [label]=\"label\"></ax-image-value-view>\n    <ax-file-value-view *ngSwitchCase=\"'FILE'\" [value]=\"v\" [label]=\"label\"></ax-file-value-view>\n    <ax-rich-text-value-view\n      *ngSwitchCase=\"'RICH_TEXT'\"\n      [value]=\"v\"\n      [label]=\"label\"\n    ></ax-rich-text-value-view>\n    <ax-date-value-view *ngSwitchCase=\"'DATE'\" [value]=\"v\" [label]=\"label\"></ax-date-value-view>\n    <ax-text-value-view *ngSwitchDefault [value]=\"v\" [label]=\"label\"></ax-text-value-view>\n  </ng-container>\n</ng-template>\n\n@if (value | isArray) {\n  <ul class=\"values\">\n    @for (v of value; track v) {\n      <li>\n        <ng-container *ngTemplateOutlet=\"valueView; context: {$implicit: v}\"></ng-container>\n      </li>\n    }\n  </ul>\n} @else {\n  <ng-container *ngTemplateOutlet=\"valueView; context: {$implicit: value}\"></ng-container>\n}\n", styles: [":host{display:block;padding:.5rem 0}:host:first-child{padding-top:0}:host:last-child{padding-bottom:0}.values{margin:0}.values{list-style-type:none;padding-left:0;margin:0}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: BooleanValueViewComponent, selector: "ax-boolean-value-view" }, { kind: "component", type: TextValueViewComponent, selector: "ax-text-value-view" }, { kind: "component", type: ImageValueViewComponent, selector: "ax-image-value-view" }, { kind: "component", type: FileValueViewComponent, selector: "ax-file-value-view" }, { kind: "component", type: RichTextValueViewComponent, selector: "ax-rich-text-value-view" }, { kind: "component", type: DateValueViewComponent, selector: "ax-date-value-view" }, { kind: "pipe", type: i2.IsArrayPipe, name: "isArray" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ValueViewComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-value-view', template: "<ng-template #valueView let-v>\n  <ng-container [ngSwitch]=\"type\">\n    <ax-boolean-value-view\n      *ngSwitchCase=\"'BOOLEAN'\"\n      [value]=\"v\"\n      [label]=\"label\"\n    ></ax-boolean-value-view>\n    <ax-image-value-view *ngSwitchCase=\"'IMAGE'\" [value]=\"v\" [label]=\"label\"></ax-image-value-view>\n    <ax-file-value-view *ngSwitchCase=\"'FILE'\" [value]=\"v\" [label]=\"label\"></ax-file-value-view>\n    <ax-rich-text-value-view\n      *ngSwitchCase=\"'RICH_TEXT'\"\n      [value]=\"v\"\n      [label]=\"label\"\n    ></ax-rich-text-value-view>\n    <ax-date-value-view *ngSwitchCase=\"'DATE'\" [value]=\"v\" [label]=\"label\"></ax-date-value-view>\n    <ax-text-value-view *ngSwitchDefault [value]=\"v\" [label]=\"label\"></ax-text-value-view>\n  </ng-container>\n</ng-template>\n\n@if (value | isArray) {\n  <ul class=\"values\">\n    @for (v of value; track v) {\n      <li>\n        <ng-container *ngTemplateOutlet=\"valueView; context: {$implicit: v}\"></ng-container>\n      </li>\n    }\n  </ul>\n} @else {\n  <ng-container *ngTemplateOutlet=\"valueView; context: {$implicit: value}\"></ng-container>\n}\n", styles: [":host{display:block;padding:.5rem 0}:host:first-child{padding-top:0}:host:last-child{padding-bottom:0}.values{margin:0}.values{list-style-type:none;padding-left:0;margin:0}\n"] }]
        }], propDecorators: { type: [{
                type: Input
            }], label: [{
                type: Input
            }], value: [{
                type: Input
            }] } });

class ValueViewModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ValueViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: ValueViewModule, declarations: [ValueViewComponent,
            ValueViewLabelComponent,
            BooleanValueViewComponent,
            TextValueViewComponent,
            ImageValueViewComponent,
            FileValueViewComponent,
            RichTextValueViewComponent,
            DateValueViewComponent], imports: [CommonModule, HelperPipesModule, ImageSourceModule, IconsModule], exports: [ValueViewComponent, ValueViewLabelComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ValueViewModule, imports: [CommonModule, HelperPipesModule, ImageSourceModule, IconsModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ValueViewModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [
                        ValueViewComponent,
                        ValueViewLabelComponent,
                        BooleanValueViewComponent,
                        TextValueViewComponent,
                        ImageValueViewComponent,
                        FileValueViewComponent,
                        RichTextValueViewComponent,
                        DateValueViewComponent,
                    ],
                    imports: [CommonModule, HelperPipesModule, ImageSourceModule, IconsModule],
                    exports: [ValueViewComponent, ValueViewLabelComponent],
                }]
        }] });

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

export { ValueView, ValueViewComponent, ValueViewLabelComponent, ValueViewModule };
//# sourceMappingURL=aztrix-components-value-view.mjs.map
