@c8y/ngx-components/esm2022/core/dynamic-forms/form-field/form-field.wrapper.component.mjs

Angular modules for Cumulocity IoT applications

import { ChangeDetectionStrategy, Component, importProvidersFrom } from '@angular/core';
import { FieldWrapper, FormlyModule } from '@ngx-formly/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "../../common/icon.directive";
import * as i3 from "ngx-bootstrap/popover";
import * as i4 from "@ngx-formly/core";
import * as i5 from "../../i18n/c8y-translate.pipe";
import * as i6 from "../../common/humanize.pipe";
export const wrapperFormFieldConfig = () => importProvidersFrom(FormlyModule.forChild({
    wrappers: [{ name: 'c8y-form-field', component: WrapperFormField }]
}));
export class WrapperFormField extends FieldWrapper {
    constructor() {
        super(...arguments);
        this.maxHelpBlockLength = 64;
        this.smallFormGroup = false;
    }
    ngOnInit() {
        this.showDescriptionAsPopup =
            this.field.type === 'radio' ||
                this.field.type === 'typeahead' ||
                (this.to.description && this.to.description.length > this.maxHelpBlockLength);
        this.smallFormGroup = this.props?.smallFormGroup || false;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WrapperFormField, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: WrapperFormField, selector: "c8y-wrapper-form-field", usesInheritance: true, ngImport: i0, template: "<div\n  class=\"form-group\"\n  [class.has-error]=\"showError\"\n  [class.form-group-sm]=\"smallFormGroup\"\n>\n  <label\n    class=\"text-pre-wrap\"\n    *ngIf=\"to.label && to.hideLabel !== true\"\n    [attr.for]=\"id\"\n  >\n    {{ to.humanizeLabel === false ? to.label : (to.label | humanize) }}\n    <i\n      class=\"text-info\"\n      c8yIcon=\"info-circle\"\n      title=\"{{ to.tooltip | translate }}\"\n      *ngIf=\"to.tooltip\"\n    ></i>\n    <ng-template #description><div [innerHTML]=\"to.description | translate\"></div></ng-template>\n    <button\n      class=\"btn-help btn-help--sm m-t-auto m-b-auto\"\n      [attr.aria-label]=\"'Help' | translate\"\n      [popover]=\"description\"\n      placement=\"right\"\n      type=\"button\"\n      [outsideClick]=\"true\"\n      *ngIf=\"to.description && showDescriptionAsPopup\"\n    ></button>\n  </label>\n  <div class=\"d-flex\">\n    <div class=\"flex-grow\">\n      <ng-template #fieldComponent></ng-template>\n    </div>\n    <ng-container *ngIf=\"to.customTemplateRef\">\n      <ng-container *ngTemplateOutlet=\"to.customTemplateRef\"></ng-container>\n    </ng-container>\n  </div>\n\n  <div\n    class=\"c8y-messages\"\n    *ngIf=\"showError\"\n  >\n    <formly-validation-message\n      class=\"form-control-feedback-message\"\n      [field]=\"field\"\n    ></formly-validation-message>\n  </div>\n\n  <div\n    class=\"help-block has-info text-muted\"\n    *ngIf=\"!showError && to.description && !showDescriptionAsPopup\"\n    [innerHTML]=\"to.description | translate\"\n  ></div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "component", type: i4.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { kind: "pipe", type: i5.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i6.HumanizePipe, name: "humanize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: WrapperFormField, decorators: [{
            type: Component,
            args: [{ selector: 'c8y-wrapper-form-field', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"form-group\"\n  [class.has-error]=\"showError\"\n  [class.form-group-sm]=\"smallFormGroup\"\n>\n  <label\n    class=\"text-pre-wrap\"\n    *ngIf=\"to.label && to.hideLabel !== true\"\n    [attr.for]=\"id\"\n  >\n    {{ to.humanizeLabel === false ? to.label : (to.label | humanize) }}\n    <i\n      class=\"text-info\"\n      c8yIcon=\"info-circle\"\n      title=\"{{ to.tooltip | translate }}\"\n      *ngIf=\"to.tooltip\"\n    ></i>\n    <ng-template #description><div [innerHTML]=\"to.description | translate\"></div></ng-template>\n    <button\n      class=\"btn-help btn-help--sm m-t-auto m-b-auto\"\n      [attr.aria-label]=\"'Help' | translate\"\n      [popover]=\"description\"\n      placement=\"right\"\n      type=\"button\"\n      [outsideClick]=\"true\"\n      *ngIf=\"to.description && showDescriptionAsPopup\"\n    ></button>\n  </label>\n  <div class=\"d-flex\">\n    <div class=\"flex-grow\">\n      <ng-template #fieldComponent></ng-template>\n    </div>\n    <ng-container *ngIf=\"to.customTemplateRef\">\n      <ng-container *ngTemplateOutlet=\"to.customTemplateRef\"></ng-container>\n    </ng-container>\n  </div>\n\n  <div\n    class=\"c8y-messages\"\n    *ngIf=\"showError\"\n  >\n    <formly-validation-message\n      class=\"form-control-feedback-message\"\n      [field]=\"field\"\n    ></formly-validation-message>\n  </div>\n\n  <div\n    class=\"help-block has-info text-muted\"\n    *ngIf=\"!showError && to.description && !showDescriptionAsPopup\"\n    [innerHTML]=\"to.description | translate\"\n  ></div>\n</div>\n" }]
        }] });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZm9ybS1maWVsZC53cmFwcGVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL2NvcmUvZHluYW1pYy1mb3Jtcy9mb3JtLWZpZWxkL2Zvcm0tZmllbGQud3JhcHBlci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9jb3JlL2R5bmFtaWMtZm9ybXMvZm9ybS1maWVsZC9mb3JtLWZpZWxkLndyYXBwZXIuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLHVCQUF1QixFQUN2QixTQUFTLEVBR1QsbUJBQW1CLEVBQ3BCLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxZQUFZLEVBQUUsWUFBWSxFQUFFLE1BQU0sa0JBQWtCLENBQUM7Ozs7Ozs7O0FBRTlELE1BQU0sQ0FBQyxNQUFNLHNCQUFzQixHQUFHLEdBQXlCLEVBQUUsQ0FDL0QsbUJBQW1CLENBQ2pCLFlBQVksQ0FBQyxRQUFRLENBQUM7SUFDcEIsUUFBUSxFQUFFLENBQUMsRUFBRSxJQUFJLEVBQUUsZ0JBQWdCLEVBQUUsU0FBUyxFQUFFLGdCQUFnQixFQUFFLENBQUM7Q0FDcEUsQ0FBQyxDQUNILENBQUM7QUFNSixNQUFNLE9BQU8sZ0JBQWlCLFNBQVEsWUFBWTtJQUxsRDs7UUFNRSx1QkFBa0IsR0FBRyxFQUFFLENBQUM7UUFFeEIsbUJBQWMsR0FBRyxLQUFLLENBQUM7S0FVeEI7SUFSQyxRQUFRO1FBQ04sSUFBSSxDQUFDLHNCQUFzQjtZQUN6QixJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksS0FBSyxPQUFPO2dCQUMzQixJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksS0FBSyxXQUFXO2dCQUMvQixDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsV0FBVyxJQUFJLElBQUksQ0FBQyxFQUFFLENBQUMsV0FBVyxDQUFDLE1BQU0sR0FBRyxJQUFJLENBQUMsa0JBQWtCLENBQUMsQ0FBQztRQUVoRixJQUFJLENBQUMsY0FBYyxHQUFHLElBQUksQ0FBQyxLQUFLLEVBQUUsY0FBYyxJQUFJLEtBQUssQ0FBQztJQUM1RCxDQUFDOytHQVpVLGdCQUFnQjttR0FBaEIsZ0JBQWdCLHFGQ3BCN0IsNmhEQXFEQTs7NEZEakNhLGdCQUFnQjtrQkFMNUIsU0FBUzsrQkFDRSx3QkFBd0IsbUJBRWpCLHVCQUF1QixDQUFDLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ29tcG9uZW50LFxuICBFbnZpcm9ubWVudFByb3ZpZGVycyxcbiAgT25Jbml0LFxuICBpbXBvcnRQcm92aWRlcnNGcm9tXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgRmllbGRXcmFwcGVyLCBGb3JtbHlNb2R1bGUgfSBmcm9tICdAbmd4LWZvcm1seS9jb3JlJztcblxuZXhwb3J0IGNvbnN0IHdyYXBwZXJGb3JtRmllbGRDb25maWcgPSAoKTogRW52aXJvbm1lbnRQcm92aWRlcnMgPT5cbiAgaW1wb3J0UHJvdmlkZXJzRnJvbShcbiAgICBGb3JtbHlNb2R1bGUuZm9yQ2hpbGQoe1xuICAgICAgd3JhcHBlcnM6IFt7IG5hbWU6ICdjOHktZm9ybS1maWVsZCcsIGNvbXBvbmVudDogV3JhcHBlckZvcm1GaWVsZCB9XVxuICAgIH0pXG4gICk7XG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdjOHktd3JhcHBlci1mb3JtLWZpZWxkJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2Zvcm0tZmllbGQud3JhcHBlci5jb21wb25lbnQuaHRtbCcsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoXG59KVxuZXhwb3J0IGNsYXNzIFdyYXBwZXJGb3JtRmllbGQgZXh0ZW5kcyBGaWVsZFdyYXBwZXIgaW1wbGVtZW50cyBPbkluaXQge1xuICBtYXhIZWxwQmxvY2tMZW5ndGggPSA2NDtcbiAgc2hvd0Rlc2NyaXB0aW9uQXNQb3B1cDogYm9vbGVhbjtcbiAgc21hbGxGb3JtR3JvdXAgPSBmYWxzZTtcblxuICBuZ09uSW5pdCgpIHtcbiAgICB0aGlzLnNob3dEZXNjcmlwdGlvbkFzUG9wdXAgPVxuICAgICAgdGhpcy5maWVsZC50eXBlID09PSAncmFkaW8nIHx8XG4gICAgICB0aGlzLmZpZWxkLnR5cGUgPT09ICd0eXBlYWhlYWQnIHx8XG4gICAgICAodGhpcy50by5kZXNjcmlwdGlvbiAmJiB0aGlzLnRvLmRlc2NyaXB0aW9uLmxlbmd0aCA+IHRoaXMubWF4SGVscEJsb2NrTGVuZ3RoKTtcblxuICAgIHRoaXMuc21hbGxGb3JtR3JvdXAgPSB0aGlzLnByb3BzPy5zbWFsbEZvcm1Hcm91cCB8fCBmYWxzZTtcbiAgfVxufVxuIiwiPGRpdlxuICBjbGFzcz1cImZvcm0tZ3JvdXBcIlxuICBbY2xhc3MuaGFzLWVycm9yXT1cInNob3dFcnJvclwiXG4gIFtjbGFzcy5mb3JtLWdyb3VwLXNtXT1cInNtYWxsRm9ybUdyb3VwXCJcbj5cbiAgPGxhYmVsXG4gICAgY2xhc3M9XCJ0ZXh0LXByZS13cmFwXCJcbiAgICAqbmdJZj1cInRvLmxhYmVsICYmIHRvLmhpZGVMYWJlbCAhPT0gdHJ1ZVwiXG4gICAgW2F0dHIuZm9yXT1cImlkXCJcbiAgPlxuICAgIHt7IHRvLmh1bWFuaXplTGFiZWwgPT09IGZhbHNlID8gdG8ubGFiZWwgOiAodG8ubGFiZWwgfCBodW1hbml6ZSkgfX1cbiAgICA8aVxuICAgICAgY2xhc3M9XCJ0ZXh0LWluZm9cIlxuICAgICAgYzh5SWNvbj1cImluZm8tY2lyY2xlXCJcbiAgICAgIHRpdGxlPVwie3sgdG8udG9vbHRpcCB8IHRyYW5zbGF0ZSB9fVwiXG4gICAgICAqbmdJZj1cInRvLnRvb2x0aXBcIlxuICAgID48L2k+XG4gICAgPG5nLXRlbXBsYXRlICNkZXNjcmlwdGlvbj48ZGl2IFtpbm5lckhUTUxdPVwidG8uZGVzY3JpcHRpb24gfCB0cmFuc2xhdGVcIj48L2Rpdj48L25nLXRlbXBsYXRlPlxuICAgIDxidXR0b25cbiAgICAgIGNsYXNzPVwiYnRuLWhlbHAgYnRuLWhlbHAtLXNtIG0tdC1hdXRvIG0tYi1hdXRvXCJcbiAgICAgIFthdHRyLmFyaWEtbGFiZWxdPVwiJ0hlbHAnIHwgdHJhbnNsYXRlXCJcbiAgICAgIFtwb3BvdmVyXT1cImRlc2NyaXB0aW9uXCJcbiAgICAgIHBsYWNlbWVudD1cInJpZ2h0XCJcbiAgICAgIHR5cGU9XCJidXR0b25cIlxuICAgICAgW291dHNpZGVDbGlja109XCJ0cnVlXCJcbiAgICAgICpuZ0lmPVwidG8uZGVzY3JpcHRpb24gJiYgc2hvd0Rlc2NyaXB0aW9uQXNQb3B1cFwiXG4gICAgPjwvYnV0dG9uPlxuICA8L2xhYmVsPlxuICA8ZGl2IGNsYXNzPVwiZC1mbGV4XCI+XG4gICAgPGRpdiBjbGFzcz1cImZsZXgtZ3Jvd1wiPlxuICAgICAgPG5nLXRlbXBsYXRlICNmaWVsZENvbXBvbmVudD48L25nLXRlbXBsYXRlPlxuICAgIDwvZGl2PlxuICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJ0by5jdXN0b21UZW1wbGF0ZVJlZlwiPlxuICAgICAgPG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cInRvLmN1c3RvbVRlbXBsYXRlUmVmXCI+PC9uZy1jb250YWluZXI+XG4gICAgPC9uZy1jb250YWluZXI+XG4gIDwvZGl2PlxuXG4gIDxkaXZcbiAgICBjbGFzcz1cImM4eS1tZXNzYWdlc1wiXG4gICAgKm5nSWY9XCJzaG93RXJyb3JcIlxuICA+XG4gICAgPGZvcm1seS12YWxpZGF0aW9uLW1lc3NhZ2VcbiAgICAgIGNsYXNzPVwiZm9ybS1jb250cm9sLWZlZWRiYWNrLW1lc3NhZ2VcIlxuICAgICAgW2ZpZWxkXT1cImZpZWxkXCJcbiAgICA+PC9mb3JtbHktdmFsaWRhdGlvbi1tZXNzYWdlPlxuICA8L2Rpdj5cblxuICA8ZGl2XG4gICAgY2xhc3M9XCJoZWxwLWJsb2NrIGhhcy1pbmZvIHRleHQtbXV0ZWRcIlxuICAgICpuZ0lmPVwiIXNob3dFcnJvciAmJiB0by5kZXNjcmlwdGlvbiAmJiAhc2hvd0Rlc2NyaXB0aW9uQXNQb3B1cFwiXG4gICAgW2lubmVySFRNTF09XCJ0by5kZXNjcmlwdGlvbiB8IHRyYW5zbGF0ZVwiXG4gID48L2Rpdj5cbjwvZGl2PlxuIl19