@netgrif/components/esm2022/lib/data-fields/data-field-template/data-field-template.component.mjs

Netgrif Application Engine frontend Angular components

import { Component } from '@angular/core';
import { AbstractDataFieldTemplateComponent } from '@netgrif/components-core';
import * as i0 from "@angular/core";
import * as i1 from "@netgrif/components-core";
import * as i2 from "@angular/common";
import * as i3 from "@ngbracket/ngx-layout";
import * as i4 from "@ngbracket/ngx-layout/extended";
import * as i5 from "@angular/material/tooltip";
import * as i6 from "@angular/cdk/portal";
import * as i7 from "../required-label/required-label.component";
export class DataFieldTemplateComponent extends AbstractDataFieldTemplateComponent {
    _paperView;
    _config;
    constructor(_paperView, _config, componentRegistry, injector) {
        super(_paperView, _config, componentRegistry, injector);
        this._paperView = _paperView;
        this._config = _config;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DataFieldTemplateComponent, deps: [{ token: i1.PaperViewService }, { token: i1.ConfigurationService }, { token: i1.ComponentRegistryService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DataFieldTemplateComponent, selector: "nc-data-field-template", usesInheritance: true, ngImport: i0, template: "<div class=\"fill-all-space\" #dataFieldContainer>\n\n    <!-- Large layout -->\n    <ng-template [ngIf]=\"evaluateTemplateCondition()\" [ngIfElse]=\"elseTemplate\">\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\" class=\"fill-all-space\" [ngClass]=\"{'padding-16px': isPaperView(), 'padding-32px': !isPaperView()}\">\n            <div fxFlex=\"{{offset}}\"></div>\n            <div fxFlex=\"{{47.5 - offset}}\" class=\"cell-padding\">\n                <span class=\"data-field-title\" [matTooltip]=\"dataField.description\">{{dataField.title}}<nc-required-label *ngIf=\"dataField.behavior.required\" [isIn]=\"true\"></nc-required-label></span>\n            </div>\n            <div fxFlex=\"5\"></div>\n            <div fxFlex=\"{{47.5 - offset}}\" class=\"cell-padding\">\n                <ng-container [cdkPortalHost]=\"this.componentPortal\"></ng-container>\n            </div>\n            <div fxFlex=\"{{offset}}\"></div>\n        </div>\n    </ng-template>\n\n    <!-- Small layout -->\n    <ng-template #elseTemplate>\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\" class=\"fill-all-space padding-8px\">\n            <div fxFlex=\"{{offset}}\"></div>\n            <div fxFlex=\"{{100 -  (2 * offset)}}\" class=\"cell-padding\">\n                <ng-container [cdkPortalHost]=\"this.componentPortal\"></ng-container>\n            </div>\n            <div fxFlex=\"{{offset}}\"></div>\n        </div>\n    </ng-template>\n</div>\n\n", styles: [".data-field-title{font-size:16px;font-weight:400}.fill-all-space{min-width:100%;padding:0;margin:0 auto}.cell-padding{margin:0;padding:4px 0 0}.padding-8px{padding:0 8px}.padding-16px{padding:0 16px}.padding-32px{padding:0 32px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i3.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i3.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i4.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i6.PortalHostDirective, selector: "[cdkPortalHost], [portalHost]", inputs: ["cdkPortalHost"], exportAs: ["cdkPortalHost"] }, { kind: "component", type: i7.RequiredLabelComponent, selector: "nc-required-label", inputs: ["isIn"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DataFieldTemplateComponent, decorators: [{
            type: Component,
            args: [{ selector: 'nc-data-field-template', template: "<div class=\"fill-all-space\" #dataFieldContainer>\n\n    <!-- Large layout -->\n    <ng-template [ngIf]=\"evaluateTemplateCondition()\" [ngIfElse]=\"elseTemplate\">\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\" class=\"fill-all-space\" [ngClass]=\"{'padding-16px': isPaperView(), 'padding-32px': !isPaperView()}\">\n            <div fxFlex=\"{{offset}}\"></div>\n            <div fxFlex=\"{{47.5 - offset}}\" class=\"cell-padding\">\n                <span class=\"data-field-title\" [matTooltip]=\"dataField.description\">{{dataField.title}}<nc-required-label *ngIf=\"dataField.behavior.required\" [isIn]=\"true\"></nc-required-label></span>\n            </div>\n            <div fxFlex=\"5\"></div>\n            <div fxFlex=\"{{47.5 - offset}}\" class=\"cell-padding\">\n                <ng-container [cdkPortalHost]=\"this.componentPortal\"></ng-container>\n            </div>\n            <div fxFlex=\"{{offset}}\"></div>\n        </div>\n    </ng-template>\n\n    <!-- Small layout -->\n    <ng-template #elseTemplate>\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\" class=\"fill-all-space padding-8px\">\n            <div fxFlex=\"{{offset}}\"></div>\n            <div fxFlex=\"{{100 -  (2 * offset)}}\" class=\"cell-padding\">\n                <ng-container [cdkPortalHost]=\"this.componentPortal\"></ng-container>\n            </div>\n            <div fxFlex=\"{{offset}}\"></div>\n        </div>\n    </ng-template>\n</div>\n\n", styles: [".data-field-title{font-size:16px;font-weight:400}.fill-all-space{min-width:100%;padding:0;margin:0 auto}.cell-padding{margin:0;padding:4px 0 0}.padding-8px{padding:0 8px}.padding-16px{padding:0 16px}.padding-32px{padding:0 32px}\n"] }]
        }], ctorParameters: () => [{ type: i1.PaperViewService }, { type: i1.ConfigurationService }, { type: i1.ComponentRegistryService }, { type: i0.Injector }] });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGF0YS1maWVsZC10ZW1wbGF0ZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZXRncmlmLWNvbXBvbmVudHMvc3JjL2xpYi9kYXRhLWZpZWxkcy9kYXRhLWZpZWxkLXRlbXBsYXRlL2RhdGEtZmllbGQtdGVtcGxhdGUuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmV0Z3JpZi1jb21wb25lbnRzL3NyYy9saWIvZGF0YS1maWVsZHMvZGF0YS1maWVsZC10ZW1wbGF0ZS9kYXRhLWZpZWxkLXRlbXBsYXRlLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxTQUFTLEVBQVcsTUFBTSxlQUFlLENBQUM7QUFDbEQsT0FBTyxFQUFDLGtDQUFrQyxFQUFtRSxNQUFNLDBCQUEwQixDQUFDOzs7Ozs7Ozs7QUFPOUksTUFBTSxPQUFPLDBCQUEyQixTQUFRLGtDQUFrQztJQUV4RDtJQUNBO0lBRHRCLFlBQXNCLFVBQTRCLEVBQzVCLE9BQTZCLEVBQ3ZDLGlCQUEyQyxFQUMzQyxRQUFrQjtRQUMxQixLQUFLLENBQUMsVUFBVSxFQUFFLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxRQUFRLENBQUMsQ0FBQztRQUp0QyxlQUFVLEdBQVYsVUFBVSxDQUFrQjtRQUM1QixZQUFPLEdBQVAsT0FBTyxDQUFzQjtJQUluRCxDQUFDO3dHQVBRLDBCQUEwQjs0RkFBMUIsMEJBQTBCLHFGQ1J2Qyw2N0NBNkJBOzs0RkRyQmEsMEJBQTBCO2tCQUx0QyxTQUFTOytCQUNJLHdCQUF3QiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q29tcG9uZW50LCBJbmplY3Rvcn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge0Fic3RyYWN0RGF0YUZpZWxkVGVtcGxhdGVDb21wb25lbnQsIFBhcGVyVmlld1NlcnZpY2UsIENvbmZpZ3VyYXRpb25TZXJ2aWNlLCBDb21wb25lbnRSZWdpc3RyeVNlcnZpY2V9IGZyb20gJ0BuZXRncmlmL2NvbXBvbmVudHMtY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAnbmMtZGF0YS1maWVsZC10ZW1wbGF0ZScsXG4gICAgdGVtcGxhdGVVcmw6ICcuL2RhdGEtZmllbGQtdGVtcGxhdGUuY29tcG9uZW50Lmh0bWwnLFxuICAgIHN0eWxlVXJsczogWycuL2RhdGEtZmllbGQtdGVtcGxhdGUuY29tcG9uZW50LnNjc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBEYXRhRmllbGRUZW1wbGF0ZUNvbXBvbmVudCBleHRlbmRzIEFic3RyYWN0RGF0YUZpZWxkVGVtcGxhdGVDb21wb25lbnQge1xuXG4gICAgY29uc3RydWN0b3IocHJvdGVjdGVkIF9wYXBlclZpZXc6IFBhcGVyVmlld1NlcnZpY2UsXG4gICAgICAgICAgICAgICAgcHJvdGVjdGVkIF9jb25maWc6IENvbmZpZ3VyYXRpb25TZXJ2aWNlLFxuICAgICAgICAgICAgICAgIGNvbXBvbmVudFJlZ2lzdHJ5OiBDb21wb25lbnRSZWdpc3RyeVNlcnZpY2UsXG4gICAgICAgICAgICAgICAgaW5qZWN0b3I6IEluamVjdG9yKSB7XG4gICAgICAgIHN1cGVyKF9wYXBlclZpZXcsIF9jb25maWcsIGNvbXBvbmVudFJlZ2lzdHJ5LCBpbmplY3Rvcik7XG4gICAgfVxufVxuIiwiPGRpdiBjbGFzcz1cImZpbGwtYWxsLXNwYWNlXCIgI2RhdGFGaWVsZENvbnRhaW5lcj5cblxuICAgIDwhLS0gTGFyZ2UgbGF5b3V0IC0tPlxuICAgIDxuZy10ZW1wbGF0ZSBbbmdJZl09XCJldmFsdWF0ZVRlbXBsYXRlQ29uZGl0aW9uKClcIiBbbmdJZkVsc2VdPVwiZWxzZVRlbXBsYXRlXCI+XG4gICAgICAgIDxkaXYgZnhMYXlvdXQ9XCJyb3dcIiBmeExheW91dEFsaWduPVwic3RhcnQgY2VudGVyXCIgY2xhc3M9XCJmaWxsLWFsbC1zcGFjZVwiIFtuZ0NsYXNzXT1cInsncGFkZGluZy0xNnB4JzogaXNQYXBlclZpZXcoKSwgJ3BhZGRpbmctMzJweCc6ICFpc1BhcGVyVmlldygpfVwiPlxuICAgICAgICAgICAgPGRpdiBmeEZsZXg9XCJ7e29mZnNldH19XCI+PC9kaXY+XG4gICAgICAgICAgICA8ZGl2IGZ4RmxleD1cInt7NDcuNSAtIG9mZnNldH19XCIgY2xhc3M9XCJjZWxsLXBhZGRpbmdcIj5cbiAgICAgICAgICAgICAgICA8c3BhbiBjbGFzcz1cImRhdGEtZmllbGQtdGl0bGVcIiBbbWF0VG9vbHRpcF09XCJkYXRhRmllbGQuZGVzY3JpcHRpb25cIj57e2RhdGFGaWVsZC50aXRsZX19PG5jLXJlcXVpcmVkLWxhYmVsICpuZ0lmPVwiZGF0YUZpZWxkLmJlaGF2aW9yLnJlcXVpcmVkXCIgW2lzSW5dPVwidHJ1ZVwiPjwvbmMtcmVxdWlyZWQtbGFiZWw+PC9zcGFuPlxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICA8ZGl2IGZ4RmxleD1cIjVcIj48L2Rpdj5cbiAgICAgICAgICAgIDxkaXYgZnhGbGV4PVwie3s0Ny41IC0gb2Zmc2V0fX1cIiBjbGFzcz1cImNlbGwtcGFkZGluZ1wiPlxuICAgICAgICAgICAgICAgIDxuZy1jb250YWluZXIgW2Nka1BvcnRhbEhvc3RdPVwidGhpcy5jb21wb25lbnRQb3J0YWxcIj48L25nLWNvbnRhaW5lcj5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgPGRpdiBmeEZsZXg9XCJ7e29mZnNldH19XCI+PC9kaXY+XG4gICAgICAgIDwvZGl2PlxuICAgIDwvbmctdGVtcGxhdGU+XG5cbiAgICA8IS0tIFNtYWxsIGxheW91dCAtLT5cbiAgICA8bmctdGVtcGxhdGUgI2Vsc2VUZW1wbGF0ZT5cbiAgICAgICAgPGRpdiBmeExheW91dD1cInJvd1wiIGZ4TGF5b3V0QWxpZ249XCJzdGFydCBjZW50ZXJcIiBjbGFzcz1cImZpbGwtYWxsLXNwYWNlIHBhZGRpbmctOHB4XCI+XG4gICAgICAgICAgICA8ZGl2IGZ4RmxleD1cInt7b2Zmc2V0fX1cIj48L2Rpdj5cbiAgICAgICAgICAgIDxkaXYgZnhGbGV4PVwie3sxMDAgLSAgKDIgKiBvZmZzZXQpfX1cIiBjbGFzcz1cImNlbGwtcGFkZGluZ1wiPlxuICAgICAgICAgICAgICAgIDxuZy1jb250YWluZXIgW2Nka1BvcnRhbEhvc3RdPVwidGhpcy5jb21wb25lbnRQb3J0YWxcIj48L25nLWNvbnRhaW5lcj5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgPGRpdiBmeEZsZXg9XCJ7e29mZnNldH19XCI+PC9kaXY+XG4gICAgICAgIDwvZGl2PlxuICAgIDwvbmctdGVtcGxhdGU+XG48L2Rpdj5cblxuIl19