ngx-nebular-formly/fesm2015/ngx-nebular-formly.js

Ngx Formly integration for Nebular UI

import { Component, ChangeDetectionStrategy, NgModule, Pipe } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';
import { FieldWrapper, FormlyModule, FieldType } from '@ngx-formly/core';
import { NbCheckboxModule, NbDatepickerModule, NbTimepickerModule, NbInputModule, NbRadioModule, NbSelectModule, NbToggleModule } from '@nebular/theme';
import { FormlySelectModule } from '@ngx-formly/core/select';
import { Observable, of } from 'rxjs';
import { map } from 'rxjs/operators';

class NebularFormlyFormFieldWrapper extends FieldWrapper {
}
NebularFormlyFormFieldWrapper.decorators = [
    { type: Component, args: [{
                selector: 'nbf-nebular-formly-wrapper-form-field',
                template: `
    <div class="form-group">
      <label *ngIf="to.label && to.hideLabel !== true" [attr.for]="id">
        {{ to.label }}
        <span
          *ngIf="to.required && to.hideRequiredMarker !== true"
          [style.color]="'red'"
          >*</span
        >
      </label>
      <ng-template #fieldComponent></ng-template>
      <div *ngIf="showError" class="invalid-feedback" [style.display]="'block'">
        <formly-validation-message [field]="field"></formly-validation-message>
      </div>
      <small *ngIf="to.description" class="form-text text-muted">{{
        to.description
      }}</small>
    </div>
  `,
                changeDetection: ChangeDetectionStrategy.OnPush,
                styles: [`
      .form-group {
        display: flex;
        flex-flow: column wrap;
        margin-bottom: 20px;
      }
      .required {
        color: red;
      }

      .invalid-feedback {
        color: red;
        font-size: 0.7rem;
      }
    `]
            },] }
];

class NebularFormlyFormFieldModule {
}
NebularFormlyFormFieldModule.decorators = [
    { type: NgModule, args: [{
                declarations: [NebularFormlyFormFieldWrapper],
                imports: [
                    CommonModule,
                    ReactiveFormsModule,
                    FormlyModule.forChild({
                        wrappers: [
                            {
                                name: 'form-field',
                                component: NebularFormlyFormFieldWrapper,
                            },
                        ],
                    }),
                ],
            },] }
];

class NebularFormlyCheckboxComponent extends FieldType {
    constructor() {
        super(...arguments);
        this.defaultOptions = {
            templateOptions: {
                disabled: false,
                indeterminate: true,
            },
        };
    }
    get checkboxMessage() {
        return this.to.checkboxMessage;
    }
}
NebularFormlyCheckboxComponent.decorators = [
    { type: Component, args: [{
                selector: 'nbf-checkbox',
                template: `
    <nb-checkbox
      [formControl]="formControl"
      [disabled]="to.disabled"
      [indeterminate]="to.indeterminate && formControl.value == null"
      [status]="to.status || 'info'"
    >
      {{ checkboxMessage }}
      <span
        class="required"
        *ngIf="to.required && to.hideRequiredMarker !== true"
        >*</span
      >
    </nb-checkbox>
  `,
                changeDetection: ChangeDetectionStrategy.OnPush
            },] }
];

class NebularFormlyCheckboxModule {
}
NebularFormlyCheckboxModule.decorators = [
    { type: NgModule, args: [{
                declarations: [NebularFormlyCheckboxComponent],
                imports: [
                    CommonModule,
                    ReactiveFormsModule,
                    NbCheckboxModule,
                    NebularFormlyFormFieldModule,
                    FormlyModule.forChild({
                        types: [
                            {
                                name: 'checkbox',
                                component: NebularFormlyCheckboxComponent,
                                wrappers: ['form-field'],
                            },
                            {
                                name: 'boolean',
                                extends: 'checkbox',
                            },
                        ],
                    }),
                ],
            },] }
];

var DatePickers;
(function (DatePickers) {
    DatePickers[DatePickers["RANGE_PICKER"] = 0] = "RANGE_PICKER";
    DatePickers[DatePickers["DATE_PICKER"] = 1] = "DATE_PICKER";
    DatePickers[DatePickers["DATE_TIME_PICKER"] = 2] = "DATE_TIME_PICKER";
})(DatePickers || (DatePickers = {}));
class DatePickerTypeComponent extends FieldType {
    constructor() {
        super(...arguments);
        this.DatePickers = DatePickers;
    }
    onDateChange(event) {
        if (this.to.dateChange) {
            return this.to.dateChange(this.field, event);
        }
    }
}
DatePickerTypeComponent.decorators = [
    { type: Component, args: [{
                changeDetection: ChangeDetectionStrategy.OnPush,
                template: `
    <ng-container [ngSwitch]="to.pickerType">
      <ng-container *ngSwitchCase="DatePickers.DATE_PICKER">
        <input
          nbInput
          [nbDatepicker]="datepicker"
          [id]="id"
          [formControl]="formControl"
          [placeholder]="to.placeholder"
          [required]="to.required"
          [formlyAttributes]="field"
        />
        <nb-datepicker
          #datepicker
          [format]="to.format"
          [max]="to.max"
          [min]="to.min"
          (dateChange)="onDateChange($event)"
        ></nb-datepicker>
      </ng-container>
      <ng-container *ngSwitchCase="DatePickers.DATE_TIME_PICKER">
        <input
          nbInput
          [id]="id"
          [formControl]="formControl"
          [placeholder]="to.placeholder"
          [required]="to.required"
          [formlyAttributes]="field"
          [nbDatepicker]="dateTimePicker"
        />
        <nb-date-timepicker
          withSeconds
          [format]="to.format"
          #dateTimePicker
          [max]="to.max"
          [min]="to.min"
          [singleColumn]="to.singleColumn || true"
          [step]="to.step || 5"
        ></nb-date-timepicker>
      </ng-container>
      <ng-container *ngSwitchCase="DatePickers.RANGE_PICKER">
        <input
          nbInput
          [nbDatepicker]="datepicker"
          [id]="id"
          [formControl]="formControl"
          [placeholder]="to.placeholder"
          [required]="to.required"
          [formlyAttributes]="field"
        />
        <nb-rangepicker
          [format]="to.format"
          [max]="to.max"
          [min]="to.min"
          #datepicker
          (dateChange)="onDateChange($event)"
        ></nb-rangepicker>
      </ng-container>
      <ng-container *ngSwitchDefault>
        <input
          nbInput
          [nbDatepicker]="datepicker"
          [id]="id"
          [formControl]="formControl"
          [placeholder]="to.placeholder"
          [required]="to.required"
          [formlyAttributes]="field"
        />
        <nb-datepicker
          #datepicker
          [format]="to.format"
          [max]="to.max"
          [min]="to.min"
          (dateChange)="onDateChange($event)"
        ></nb-datepicker>
      </ng-container>
    </ng-container>
  `,
                selector: 'nbf-nebular-formly-date-picker'
            },] }
];

class DatePickerModule {
}
DatePickerModule.decorators = [
    { type: NgModule, args: [{
                declarations: [DatePickerTypeComponent],
                imports: [
                    CommonModule,
                    NbDatepickerModule.forRoot(),
                    NbTimepickerModule.forRoot(),
                    NbInputModule,
                    ReactiveFormsModule,
                    NebularFormlyFormFieldModule,
                    FormlyModule.forChild({
                        types: [
                            {
                                name: 'datepicker',
                                component: DatePickerTypeComponent,
                                wrappers: ['form-field'],
                            },
                        ],
                    }),
                ],
            },] }
];

class NebularFormlyInputComponent extends FieldType {
    get type() {
        return this.to.type || 'text';
    }
    ngOnInit() {
        console.log(this.to);
    }
}
NebularFormlyInputComponent.decorators = [
    { type: Component, args: [{
                selector: 'nbf-nebular-formly-input',
                template: `
    <input
      nbInput
      *ngIf="type !== 'number'; else numbTemplate"
      [type]="type"
      [formControl]="formControl"
      [fullWidth]="to.fullWidth || false"
      [formlyAttributes]="field"
      type="text"
      [status]="showError ? 'danger' : 'info'"
      [placeholder]="to.placeholder"
    />
    <ng-template #numbTemplate>
      <input
        nbInput
        type="text"
        [formControl]="formControl"
        [formlyAttributes]="field"
        [fullWidth]="to.fullWidth || false"
        type="text"
        [status]="showError ? 'danger' : 'info'"
        [placeholder]="to.placeholder"
      />
    </ng-template>
  `,
                changeDetection: ChangeDetectionStrategy.OnPush
            },] }
];

class NebularFormlyInputModule {
}
NebularFormlyInputModule.decorators = [
    { type: NgModule, args: [{
                declarations: [NebularFormlyInputComponent],
                exports: [NebularFormlyInputComponent],
                imports: [
                    CommonModule,
                    NbInputModule,
                    ReactiveFormsModule,
                    NebularFormlyFormFieldModule,
                    FormlyModule.forChild({
                        types: [
                            {
                                component: NebularFormlyInputComponent,
                                name: 'input',
                                wrappers: ['form-field'],
                            },
                            {
                                extends: 'input',
                                name: 'string',
                            },
                            {
                                defaultOptions: {
                                    templateOptions: {
                                        type: 'number',
                                    },
                                },
                                extends: 'input',
                                name: 'number',
                            },
                            {
                                defaultOptions: {
                                    templateOptions: {
                                        type: 'number',
                                    },
                                },
                                name: 'integer',
                                extends: 'input',
                            },
                        ],
                    }),
                ],
            },] }
];

class RadioTypeComponent extends FieldType {
    constructor() {
        super(...arguments);
        this.defaultOptions = {
            templateOptions: {
                disabled: false,
                options: [],
                status: 'info',
            },
        };
    }
}
RadioTypeComponent.decorators = [
    { type: Component, args: [{
                changeDetection: ChangeDetectionStrategy.OnPush,
                selector: 'nbf-nebular-formly-radio',
                template: `
    <ng-container *ngIf="to.disabled; else elseTemplate">
      <nb-radio-group
        [formControl]="formControl"
        [name]="to.name"
        [formlyAttributes]="field"
        [required]="to.required"
        [disabled]="to.disabled"
        [status]="to.status"
        [ngClass]="{
          'row': to.arrange === 'row'
        }"
      >
        <nb-radio
          *ngFor="
            let option of to.options | formlySelectOptions: field | async;
            let i = index
          "
          [id]="id + '_' + i"
          [value]="option.value"
        >
          {{ option.label }}
        </nb-radio>
      </nb-radio-group>
    </ng-container>
    <ng-template #elseTemplate>
      <nb-radio-group
        [formControl]="formControl"
        [name]="to.name"
        [formlyAttributes]="field"
        [required]="to.required"
        [status]="to.status"
        [ngClass]="{
          'row': to.arrange === 'row'
        }"
      >
        <nb-radio
          *ngFor="
            let option of to.options | formlySelectOptions: field | async;
            let i = index
          "
          [id]="id + '_' + i"
          [value]="option.value"
          [disabled]="option.disabled"
        >
          {{ option.label }}
        </nb-radio>
      </nb-radio-group>
    </ng-template>
  `,
                styles: ['.row { display: flex; flex-flow: row wrap; }']
            },] }
];

class RadioModule {
}
RadioModule.decorators = [
    { type: NgModule, args: [{
                declarations: [RadioTypeComponent],
                imports: [
                    ReactiveFormsModule,
                    NebularFormlyFormFieldModule,
                    CommonModule,
                    FormlySelectModule,
                    NbRadioModule,
                    FormlyModule.forChild({
                        types: [
                            {
                                name: 'radio',
                                component: RadioTypeComponent,
                                wrappers: ['form-field'],
                            },
                        ],
                    }),
                ],
            },] }
];

class FormlySelectOptionsPipe {
    transform(options, field) {
        if (!(options instanceof Observable)) {
            options = of(options);
        }
        return options.pipe(map((value) => this.transformOptions(value, field)));
    }
    transformOptions(options, field) {
        const to = this.transformSelectProps(field);
        const opts = [];
        const groups = {};
        console.log(options);
        options.forEach((option) => {
            const o = this.transformOption(option, to);
            if (o.group) {
                const id = groups[o.label];
                if (id === undefined) {
                    groups[o.label] = opts.push(o) - 1;
                }
                else {
                    o.group.forEach((o) => opts[id].group.push(o));
                }
            }
            else {
                opts.push(o);
            }
        });
        if (field && field.templateOptions) {
            field.templateOptions._flatOptions = !Object.keys(groups).length;
        }
        return opts;
    }
    transformOption(option, to) {
        const group = to.groupProp(option);
        if (Array.isArray(group)) {
            return {
                label: to.labelProp(option),
                group: group.map((opt) => this.transformOption(opt, to)),
            };
        }
        option = {
            label: to.labelProp(option),
            value: to.valueProp(option),
            disabled: !!to.disabledProp(option),
        };
        if (group) {
            return { label: group, group: [option] };
        }
        return option;
    }
    transformSelectProps(field) {
        const to = field && field.templateOptions ? field.templateOptions : {};
        const selectPropFn = (prop) => (typeof prop === 'function' ? prop : (o) => o[prop]);
        return {
            groupProp: selectPropFn(to.groupProp || 'group'),
            labelProp: selectPropFn(to.labelProp || 'label'),
            valueProp: selectPropFn(to.valueProp || 'value'),
            disabledProp: selectPropFn(to.disabledProp || 'disabled'),
        };
    }
}
FormlySelectOptionsPipe.decorators = [
    { type: Pipe, args: [{ name: 'formlySelectOptions' },] }
];

class SelectPipeModule {
}
SelectPipeModule.decorators = [
    { type: NgModule, args: [{
                declarations: [FormlySelectOptionsPipe],
                exports: [FormlySelectOptionsPipe],
            },] }
];

class SelectTypeComponent extends FieldType {
    constructor() {
        super(...arguments);
        this.defaultOptions = {
            templateOptions: {
                options: [],
                multiple: false,
                isGroup: false,
                status: 'basic',
                size: 'medium',
                filled: 'false',
                shape: 'rectangle',
            },
        };
    }
    onSelectedChange(value) {
        if (this.to.selectedChange) {
            this.to.selectedChange(this.field, value);
        }
    }
}
SelectTypeComponent.decorators = [
    { type: Component, args: [{
                changeDetection: ChangeDetectionStrategy.OnPush,
                selector: 'nbf-nebular-formly-select',
                template: `
    <nb-select
      *ngIf="to.groupProp; else noGroup"
      [formControl]="formControl"
      [multiple]="to.multiple"
      [id]="id"
      [formlyAttributes]="field"
      [placeholder]="to.placeholder"
      [required]="to.required"
      (selectedChange)="onSelectedChange($event)"
      [disabled]="to.disabled"
      [status]="to.status"
      [size]="to.size"
      [filled]="to.filled"
      [shape]="to.shape"
    >
      <nb-option-group
        *ngFor="let option of to.options | formlySelectOptions: field | async"
        [title]="option.label"
      >
        <nb-option
          *ngFor="let opt of option.group"
          [value]="opt.value"
          [disabled]="opt.disabled"
        >
          {{ opt.label }}
        </nb-option>
      </nb-option-group>
    </nb-select>

    <ng-template #noGroup>
      <nb-select
        [formControl]="formControl"
        [multiple]="to.multiple"
        [id]="id"
        [formlyAttributes]="field"
        [placeholder]="to.placeholder"
        [required]="to.required"
        (selectedChange)="onSelectedChange($event)"
        [disabled]="to.disabled"
        [status]="to.status"
        [size]="to.size"
        [filled]="to.filled"
        [shape]="to.shape"
      >
        <nb-option
          *ngFor="let opt of to.options | formlySelectOptions: field | async"
          [value]="opt.value"
          [disabled]="opt.disabled"
        >
          {{ opt.label }}
        </nb-option>
      </nb-select>
    </ng-template>
  `
            },] }
];
// [
//   {
//     "label": "Male",
//     "group": [
//       {
//         "label": "Iron Man",
//         "value": "iron_man",
//         "disabled": false
//       },
//       {
//         "label": "Captain America",
//         "value": "captain_america",
//         "disabled": false
//       },
//       {
//         "label": "Hulk",
//         "value": "hulk",
//         "disabled": false
//       }
//     ]
//   },
//   {
//     "label": "Female",
//     "group": [
//       {
//         "label": "Black Widow",
//         "value": "black_widow",
//         "disabled": false
//       },
//       {
//         "label": "Captain Marvel",
//         "value": "captain_marvel",
//         "disabled": false
//       }
//     ]
//   }
// ]

class SelectModule {
}
SelectModule.decorators = [
    { type: NgModule, args: [{
                declarations: [SelectTypeComponent],
                imports: [
                    CommonModule,
                    NbSelectModule,
                    NebularFormlyFormFieldModule,
                    ReactiveFormsModule,
                    SelectPipeModule,
                    FormlyModule.forChild({
                        types: [
                            {
                                name: 'select',
                                component: SelectTypeComponent,
                                wrappers: ['form-field'],
                            },
                        ],
                    }),
                ],
            },] }
];

class TimePickerTypeComponent extends FieldType {
}
TimePickerTypeComponent.decorators = [
    { type: Component, args: [{
                changeDetection: ChangeDetectionStrategy.OnPush,
                selector: 'nbf-time-picker',
                template: `
    <input
      nbInput
      [nbTimepicker]="timepicker"
      [formControl]="formControl"
      [required]="to.required"
      [disabled]="to.disabled"
      [placeholder]="to.placeholder"
      [formlyAttributes]="field"
    />
    <nb-timepicker
      #timepicker
      [twelveHoursFormat]="to.twelveHoursFormat"
      [singleColumn]="to.singleColumn"
      [step]="to.step"
      withSeconds
    ></nb-timepicker>
  `
            },] }
];

class TimepickerModule {
}
TimepickerModule.decorators = [
    { type: NgModule, args: [{
                declarations: [TimePickerTypeComponent],
                imports: [
                    CommonModule,
                    ReactiveFormsModule,
                    NbTimepickerModule.forRoot(),
                    NebularFormlyFormFieldModule,
                    NbInputModule,
                    FormlyModule.forChild({
                        types: [
                            {
                                name: 'timepicker',
                                component: TimePickerTypeComponent,
                                wrappers: ['form-field'],
                            },
                        ],
                    }),
                ],
            },] }
];

class ToggleTypeComponent extends FieldType {
}
ToggleTypeComponent.decorators = [
    { type: Component, args: [{
                selector: 'nbf-nebular-formly-toggle',
                changeDetection: ChangeDetectionStrategy.OnPush,
                template: `
    <nb-toggle
      [formControl]="formControl"
      [required]="to.required"
      [disabled]="to.disabled"
      [status]="to.status || 'info'"
      [labelPosition]="to.labelPosition"
      >{{ to.label }}</nb-toggle
    >
  `
            },] }
];

class ToggleModule {
}
ToggleModule.decorators = [
    { type: NgModule, args: [{
                declarations: [ToggleTypeComponent],
                imports: [
                    CommonModule,
                    NbToggleModule,
                    ReactiveFormsModule,
                    FormlyModule.forChild({
                        types: [
                            {
                                name: 'toggle',
                                component: ToggleTypeComponent,
                            },
                        ],
                    }),
                ],
            },] }
];

class TextAreaTypeComponent extends FieldType {
}
TextAreaTypeComponent.decorators = [
    { type: Component, args: [{
                selector: 'nbf-nebular-formly-textarea',
                template: `
    <textarea
      nbInput
      [formControl]="formControl"
      [formlyAttributes]="field"
      [fullWidth]="to.fullWidth || false"
      [status]="showError ? 'danger' : 'info'"
      [placeholder]="to.placeholder"
    ></textarea>
  `,
                changeDetection: ChangeDetectionStrategy.OnPush
            },] }
];

class TextareaModule {
}
TextareaModule.decorators = [
    { type: NgModule, args: [{
                declarations: [TextAreaTypeComponent],
                imports: [
                    CommonModule,
                    NebularFormlyFormFieldModule,
                    ReactiveFormsModule,
                    NbInputModule,
                    FormlyModule.forChild({
                        types: [
                            {
                                name: 'textarea',
                                component: TextAreaTypeComponent,
                                wrappers: ['form-field'],
                            },
                        ],
                    }),
                ]
            },] }
];

class NebularFormlyModule {
}
NebularFormlyModule.decorators = [
    { type: NgModule, args: [{
                declarations: [],
                imports: [
                    NebularFormlyInputModule,
                    NebularFormlyCheckboxModule,
                    NebularFormlyFormFieldModule,
                    RadioModule,
                    SelectModule,
                    SelectPipeModule,
                    DatePickerModule,
                    TimepickerModule,
                    ToggleModule,
                    // AutocompleteModule,
                    TextareaModule,
                ],
            },] }
];

/*
 * Public API Surface of nebular-formly
 */

/*
 * Public API Surface of nebular-formly
 */

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

export { DatePickerModule, DatePickerTypeComponent, DatePickers, NebularFormlyCheckboxModule, NebularFormlyFormFieldModule, NebularFormlyFormFieldWrapper, NebularFormlyInputComponent, NebularFormlyInputModule, NebularFormlyModule, RadioModule, RadioTypeComponent, SelectModule, SelectTypeComponent, TextAreaTypeComponent, TextareaModule, TimePickerTypeComponent, TimepickerModule, ToggleModule, ToggleTypeComponent, NebularFormlyCheckboxComponent as ɵa, SelectPipeModule as ɵb, FormlySelectOptionsPipe as ɵc };
//# sourceMappingURL=ngx-nebular-formly.js.map