import { Component, Input, forwardRef } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
import * as i0 from "@angular/core";
import * as i1 from "../../../_helpers/utils";
import * as i2 from "@angular/common";
export class MaterialDetailsComponent {
    constructor(utils) {
        this.utils = utils;
    }
    _getValue(configValue) {
        if (configValue && configValue != '') {
            return configValue;
        }
        return '---';
    }
    _formatDate(dateValue, dateFormat) {
        return this.utils.generateDate(dateValue, dateFormat);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MaterialDetailsComponent, deps: [{ token: i1.Utils }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MaterialDetailsComponent, isStandalone: true, selector: "app-material-details", inputs: { arFields$: "arFields$", arFields2$: "arFields2$", arFields3$: "arFields3$", arHighlightedFields: "arHighlightedFields", layout: "layout" }, ngImport: i0, template: "<div id=\"details-fields-list\">\n  <div\n    *ngIf=\"arHighlightedFields && arHighlightedFields.length > 0\"\n    [ngClass]=\"{\n      'psdk-grid-filter-1': this.layout === 'one-column',\n      'psdk-grid-filter-2': this.layout === 'two-column',\n      'psdk-grid-filter-3': this.layout === 'three-column',\n      'psdk-grid-filter-wide-narrow': this.layout === 'wide-narrow',\n      'psdk-grid-filter-narrow-wide': this.layout === 'narrow-wide'\n    }\"\n  >\n    <div *ngFor=\"let field of arHighlightedFields\">\n      <div class=\"psdk-details-fields-label\">\n        {{ field.config.label }}\n      </div>\n      <div [ngSwitch]=\"field.type.toLowerCase()\" class=\"psdk-csf-primary-field-value\">\n        <span *ngSwitchCase=\"'textinput'\" class=\"psdk-details-text-style-hf\">{{ _getValue(field.config.value) }}</span>\n        <span *ngSwitchCase=\"'status'\" class=\"psdk-details-status-style-hf\">{{ _getValue(field.config.value) }}</span>\n        <a *ngSwitchCase=\"'phone'\" as=\"a\" href=\"tel: {{ field.config.value }}\">{{ _getValue(field.config.value) }}</a>\n        <a *ngSwitchCase=\"'email'\" href=\"mailto: {{ field.config.value }}\">{{ _getValue(field.config.value) }}</a>\n        <span *ngSwitchCase=\"'date'\" class=\"psdk-details-text-style-hf\">{{ _formatDate(field.config.value, field.type) }}</span>\n        <span *ngSwitchCase=\"'caseoperator'\"></span>\n        <span *ngSwitchDefault>{{ _getValue(field.config.value) }}</span>\n      </div>\n    </div>\n  </div>\n  <div\n    [ngClass]=\"{\n      'psdk-grid-filter-1': this.layout === 'one-column',\n      'psdk-grid-filter-2': this.layout === 'two-column',\n      'psdk-grid-filter-3': this.layout === 'three-column',\n      'psdk-grid-filter-wide-narrow': this.layout === 'wide-narrow',\n      'psdk-grid-filter-narrow-wide': this.layout === 'narrow-wide'\n    }\"\n  >\n    <component-mapper *ngIf=\"arFields$\" name=\"DetailsFields\" [props]=\"{ arFields$: arFields$ }\"></component-mapper>\n    <component-mapper *ngIf=\"arFields2$\" name=\"DetailsFields\" [props]=\"{ arFields$: arFields2$ }\"></component-mapper>\n    <component-mapper *ngIf=\"arFields3$\" name=\"DetailsFields\" [props]=\"{ arFields$: arFields3$ }\"></component-mapper>\n  </div>\n</div>\n", styles: [".psdk-details-group{display:flex;flex-direction:row;justify-content:space-between}.psdk-details-fields{padding:1rem;grid-row-gap:1rem}.psdk-details-fields-primary{width:100%;display:grid;grid-template-columns:1fr;grid-column-gap:1rem;grid-row-gap:.5rem}.psdk-details-fields-single{display:grid;grid-template-columns:20ch 1fr;grid-column-gap:1rem}.psdk-details-fields-label{color:var(--app-label-color);margin:8px 0}.psdk-details-fields-value{word-break:break-word;grid-column-start:2;grid-row-start:1}span.psdk-details-text-style-hf{font-weight:500;font-size:1.25rem}span.psdk-details-text-style{font-weight:400}span.psdk-details-status-style{background-color:var(--app-details-status-background);border-radius:.125rem;color:var(--app-details-status-color);display:inline-block;font-size:.75rem;font-weight:700;line-height:1.25rem;height:1.25rem;padding:0 .5rem;text-transform:uppercase}.psdk-grid-filter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1rem;row-gap:1rem;align-items:start}.psdk-csf-primary-field-value{margin:8px 0}span.psdk-details-status-style-hf{background-color:var(--app-details-status-background);border-radius:.125rem;color:var(--app-details-status-color);display:inline-block;font-size:1.25rem;font-weight:500;line-height:1.25rem;height:1.25rem;padding:0 .5rem;text-transform:uppercase}.psdk-grid-filter-1{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));column-gap:1rem;row-gap:1rem;align-items:start}.psdk-grid-filter-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1rem;row-gap:1rem;align-items:start}.psdk-grid-filter-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:1rem;row-gap:1rem;align-items:start}.psdk-grid-filter-wide-narrow{display:grid;grid-template-columns:7fr 3fr;column-gap:1rem;row-gap:1rem;align-items:start}.psdk-grid-filter-narrow-wide{display:grid;grid-template-columns:3fr 7fr;column-gap:1rem;row-gap:1rem;align-items:start}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i2.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return i2.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i2.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return i2.NgSwitch; }), selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i0.forwardRef(function () { return i2.NgSwitchCase; }), selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i0.forwardRef(function () { return i2.NgSwitchDefault; }), selector: "[ngSwitchDefault]" }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MaterialDetailsComponent, decorators: [{
            type: Component,
            args: [{ selector: 'app-material-details', standalone: true, imports: [CommonModule, forwardRef(() => ComponentMapperComponent)], template: "<div id=\"details-fields-list\">\n  <div\n    *ngIf=\"arHighlightedFields && arHighlightedFields.length > 0\"\n    [ngClass]=\"{\n      'psdk-grid-filter-1': this.layout === 'one-column',\n      'psdk-grid-filter-2': this.layout === 'two-column',\n      'psdk-grid-filter-3': this.layout === 'three-column',\n      'psdk-grid-filter-wide-narrow': this.layout === 'wide-narrow',\n      'psdk-grid-filter-narrow-wide': this.layout === 'narrow-wide'\n    }\"\n  >\n    <div *ngFor=\"let field of arHighlightedFields\">\n      <div class=\"psdk-details-fields-label\">\n        {{ field.config.label }}\n      </div>\n      <div [ngSwitch]=\"field.type.toLowerCase()\" class=\"psdk-csf-primary-field-value\">\n        <span *ngSwitchCase=\"'textinput'\" class=\"psdk-details-text-style-hf\">{{ _getValue(field.config.value) }}</span>\n        <span *ngSwitchCase=\"'status'\" class=\"psdk-details-status-style-hf\">{{ _getValue(field.config.value) }}</span>\n        <a *ngSwitchCase=\"'phone'\" as=\"a\" href=\"tel: {{ field.config.value }}\">{{ _getValue(field.config.value) }}</a>\n        <a *ngSwitchCase=\"'email'\" href=\"mailto: {{ field.config.value }}\">{{ _getValue(field.config.value) }}</a>\n        <span *ngSwitchCase=\"'date'\" class=\"psdk-details-text-style-hf\">{{ _formatDate(field.config.value, field.type) }}</span>\n        <span *ngSwitchCase=\"'caseoperator'\"></span>\n        <span *ngSwitchDefault>{{ _getValue(field.config.value) }}</span>\n      </div>\n    </div>\n  </div>\n  <div\n    [ngClass]=\"{\n      'psdk-grid-filter-1': this.layout === 'one-column',\n      'psdk-grid-filter-2': this.layout === 'two-column',\n      'psdk-grid-filter-3': this.layout === 'three-column',\n      'psdk-grid-filter-wide-narrow': this.layout === 'wide-narrow',\n      'psdk-grid-filter-narrow-wide': this.layout === 'narrow-wide'\n    }\"\n  >\n    <component-mapper *ngIf=\"arFields$\" name=\"DetailsFields\" [props]=\"{ arFields$: arFields$ }\"></component-mapper>\n    <component-mapper *ngIf=\"arFields2$\" name=\"DetailsFields\" [props]=\"{ arFields$: arFields2$ }\"></component-mapper>\n    <component-mapper *ngIf=\"arFields3$\" name=\"DetailsFields\" [props]=\"{ arFields$: arFields3$ }\"></component-mapper>\n  </div>\n</div>\n", styles: [".psdk-details-group{display:flex;flex-direction:row;justify-content:space-between}.psdk-details-fields{padding:1rem;grid-row-gap:1rem}.psdk-details-fields-primary{width:100%;display:grid;grid-template-columns:1fr;grid-column-gap:1rem;grid-row-gap:.5rem}.psdk-details-fields-single{display:grid;grid-template-columns:20ch 1fr;grid-column-gap:1rem}.psdk-details-fields-label{color:var(--app-label-color);margin:8px 0}.psdk-details-fields-value{word-break:break-word;grid-column-start:2;grid-row-start:1}span.psdk-details-text-style-hf{font-weight:500;font-size:1.25rem}span.psdk-details-text-style{font-weight:400}span.psdk-details-status-style{background-color:var(--app-details-status-background);border-radius:.125rem;color:var(--app-details-status-color);display:inline-block;font-size:.75rem;font-weight:700;line-height:1.25rem;height:1.25rem;padding:0 .5rem;text-transform:uppercase}.psdk-grid-filter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1rem;row-gap:1rem;align-items:start}.psdk-csf-primary-field-value{margin:8px 0}span.psdk-details-status-style-hf{background-color:var(--app-details-status-background);border-radius:.125rem;color:var(--app-details-status-color);display:inline-block;font-size:1.25rem;font-weight:500;line-height:1.25rem;height:1.25rem;padding:0 .5rem;text-transform:uppercase}.psdk-grid-filter-1{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));column-gap:1rem;row-gap:1rem;align-items:start}.psdk-grid-filter-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1rem;row-gap:1rem;align-items:start}.psdk-grid-filter-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:1rem;row-gap:1rem;align-items:start}.psdk-grid-filter-wide-narrow{display:grid;grid-template-columns:7fr 3fr;column-gap:1rem;row-gap:1rem;align-items:start}.psdk-grid-filter-narrow-wide{display:grid;grid-template-columns:3fr 7fr;column-gap:1rem;row-gap:1rem;align-items:start}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.Utils }]; }, propDecorators: { arFields$: [{
                type: Input
            }], arFields2$: [{
                type: Input
            }], arFields3$: [{
                type: Input
            }], arHighlightedFields: [{
                type: Input
            }], layout: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 