@ngx-formly/bootstrap/fesm2022/ngx-formly-bootstrap-addons.mjs

Formly is a dynamic (JSON powered) form library for Angular that bring unmatched maintainability to your application's forms.

import * as i0 from '@angular/core';
import { ViewChild, ViewEncapsulation, Component, NgModule } from '@angular/core';
import * as i1$1 from '@ngx-formly/core';
import { FieldWrapper, FormlyModule } from '@ngx-formly/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';

class FormlyWrapperAddons extends FieldWrapper {
    set content(templateRef) {
        if (templateRef && this.hostContainerRef) {
            this.hostContainerRef.createEmbeddedView(templateRef);
        }
    }
    constructor(hostContainerRef) {
        super();
        this.hostContainerRef = hostContainerRef;
    }
    addonRightClick($event) {
        this.props.addonRight.onClick?.(this.field, $event);
    }
    addonLeftClick($event) {
        this.props.addonLeft.onClick?.(this.field, $event);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormlyWrapperAddons, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FormlyWrapperAddons, selector: "formly-wrapper-addons", viewQueries: [{ propertyName: "content", first: true, predicate: ["fieldTypeTemplate"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #fieldTypeTemplate>\n  <div class=\"input-group\" [class.has-validation]=\"showError\">\n    <div\n      class=\"input-group-text\"\n      *ngIf=\"props.addonLeft\"\n      [class.input-group-btn]=\"props.addonLeft.onClick\"\n      (click)=\"addonLeftClick($event)\"\n    >\n      <i [ngClass]=\"props.addonLeft.class\" *ngIf=\"props.addonLeft.class\"></i>\n      <span *ngIf=\"props.addonLeft.text\">{{ props.addonLeft.text }}</span>\n    </div>\n    <ng-container #fieldComponent></ng-container>\n    <div\n      class=\"input-group-text\"\n      *ngIf=\"props.addonRight\"\n      [class.input-group-btn]=\"props.addonRight.onClick\"\n      (click)=\"addonRightClick($event)\"\n    >\n      <i [ngClass]=\"props.addonRight.class\" *ngIf=\"props.addonRight.class\"></i>\n      <span *ngIf=\"props.addonRight.text\">{{ props.addonRight.text }}</span>\n    </div>\n  </div>\n</ng-template>\n", styles: ["formly-wrapper-form-field .input-group-btn{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormlyWrapperAddons, decorators: [{
            type: Component,
            args: [{ selector: 'formly-wrapper-addons', encapsulation: ViewEncapsulation.None, template: "<ng-template #fieldTypeTemplate>\n  <div class=\"input-group\" [class.has-validation]=\"showError\">\n    <div\n      class=\"input-group-text\"\n      *ngIf=\"props.addonLeft\"\n      [class.input-group-btn]=\"props.addonLeft.onClick\"\n      (click)=\"addonLeftClick($event)\"\n    >\n      <i [ngClass]=\"props.addonLeft.class\" *ngIf=\"props.addonLeft.class\"></i>\n      <span *ngIf=\"props.addonLeft.text\">{{ props.addonLeft.text }}</span>\n    </div>\n    <ng-container #fieldComponent></ng-container>\n    <div\n      class=\"input-group-text\"\n      *ngIf=\"props.addonRight\"\n      [class.input-group-btn]=\"props.addonRight.onClick\"\n      (click)=\"addonRightClick($event)\"\n    >\n      <i [ngClass]=\"props.addonRight.class\" *ngIf=\"props.addonRight.class\"></i>\n      <span *ngIf=\"props.addonRight.text\">{{ props.addonRight.text }}</span>\n    </div>\n  </div>\n</ng-template>\n", styles: ["formly-wrapper-form-field .input-group-btn{cursor:pointer}\n"] }]
        }], ctorParameters: () => [{ type: i0.ViewContainerRef }], propDecorators: { content: [{
                type: ViewChild,
                args: ['fieldTypeTemplate', { static: true }]
            }] } });

function addonsExtension(field) {
    if (!field.props || (field.wrappers && field.wrappers.indexOf('addons') !== -1)) {
        return;
    }
    if (field.props.addonLeft || field.props.addonRight) {
        field.wrappers = [...(field.wrappers || []), 'addons'];
    }
}

function withFormlyWrapperAddons() {
    return {
        wrappers: [{ name: 'addons', component: FormlyWrapperAddons }],
        extensions: [{ name: 'addons', extension: { postPopulate: addonsExtension } }],
    };
}

class FormlyBootstrapAddonsModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormlyBootstrapAddonsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: FormlyBootstrapAddonsModule, declarations: [FormlyWrapperAddons], imports: [CommonModule, ReactiveFormsModule, i1$1.FormlyModule] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormlyBootstrapAddonsModule, imports: [CommonModule, ReactiveFormsModule, FormlyModule.forChild(withFormlyWrapperAddons())] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormlyBootstrapAddonsModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [FormlyWrapperAddons],
                    imports: [CommonModule, ReactiveFormsModule, FormlyModule.forChild(withFormlyWrapperAddons())],
                }]
        }] });

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

export { FormlyBootstrapAddonsModule, withFormlyWrapperAddons };
//# sourceMappingURL=ngx-formly-bootstrap-addons.mjs.map