@ngx-formly/material 6.0.0-next.1 → 6.0.0-next.2

package/fesm2020/ngx-formly-material-multicheckbox.mjs

@@ -0,0 +1,140 @@
+import * as i0 from '@angular/core';
+import { Component, ChangeDetectionStrategy, ViewChildren, NgModule } from '@angular/core';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
+import * as i3 from '@ngx-formly/core';
+import { FormlyModule } from '@ngx-formly/core';
+import * as i4 from '@ngx-formly/core/select';
+import { FormlySelectModule } from '@ngx-formly/core/select';
+import { FieldType, FormlyMatFormFieldModule } from '@ngx-formly/material/form-field';
+import * as i1 from '@angular/material/checkbox';
+import { MatCheckbox, MatCheckboxModule } from '@angular/material/checkbox';
+
+class FormlyFieldMultiCheckbox extends FieldType {
+    constructor() {
+        super(...arguments);
+        this.defaultOptions = {
+            templateOptions: {
+                hideFieldUnderline: true,
+                floatLabel: 'always',
+                options: [],
+                color: 'accent', // workaround for https://github.com/angular/components/issues/18465
+            },
+        };
+    }
+    onChange(value, checked) {
+        if (this.to.type === 'array') {
+            this.formControl.patchValue(checked
+                ? [...(this.formControl.value || []), value]
+                : [...(this.formControl.value || [])].filter((o) => o !== value));
+        }
+        else {
+            this.formControl.patchValue({ ...this.formControl.value, [value]: checked });
+        }
+        this.formControl.markAsTouched();
+    }
+    // TODO: find a solution to prevent scroll on focus
+    onContainerClick() { }
+    isChecked(option) {
+        const value = this.formControl.value;
+        return value && (this.to.type === 'array' ? value.indexOf(option.value) !== -1 : value[option.value]);
+    }
+}
+FormlyFieldMultiCheckbox.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: FormlyFieldMultiCheckbox, deps: null, target: i0.ɵɵFactoryTarget.Component });
+FormlyFieldMultiCheckbox.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: FormlyFieldMultiCheckbox, selector: "formly-field-mat-multicheckbox", viewQueries: [{ propertyName: "checkboxes", predicate: MatCheckbox, descendants: true }], usesInheritance: true, ngImport: i0, template: `
+    <ng-container *ngFor="let option of to.options | formlySelectOptions: field | async; let i = index">
+      <mat-checkbox
+        [id]="id + '_' + i"
+        [formlyAttributes]="field"
+        [tabIndex]="to.tabindex"
+        [color]="to.color"
+        [labelPosition]="to.labelPosition"
+        [checked]="isChecked(option)"
+        [disabled]="formControl.disabled"
+        (change)="onChange(option.value, $event.checked)"
+      >
+        {{ option.label }}
+      </mat-checkbox>
+    </ng-container>
+  `, isInline: true, components: [{ type: i1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }], pipes: { "async": i2.AsyncPipe, "formlySelectOptions": i4.ɵFormlySelectOptionsPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: FormlyFieldMultiCheckbox, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'formly-field-mat-multicheckbox',
+                    template: `
+    <ng-container *ngFor="let option of to.options | formlySelectOptions: field | async; let i = index">
+      <mat-checkbox
+        [id]="id + '_' + i"
+        [formlyAttributes]="field"
+        [tabIndex]="to.tabindex"
+        [color]="to.color"
+        [labelPosition]="to.labelPosition"
+        [checked]="isChecked(option)"
+        [disabled]="formControl.disabled"
+        (change)="onChange(option.value, $event.checked)"
+      >
+        {{ option.label }}
+      </mat-checkbox>
+    </ng-container>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { checkboxes: [{
+                type: ViewChildren,
+                args: [MatCheckbox]
+            }] } });
+
+class FormlyMatMultiCheckboxModule {
+}
+FormlyMatMultiCheckboxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: FormlyMatMultiCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FormlyMatMultiCheckboxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: FormlyMatMultiCheckboxModule, declarations: [FormlyFieldMultiCheckbox], imports: [CommonModule,
+        ReactiveFormsModule,
+        MatCheckboxModule,
+        FormlyMatFormFieldModule,
+        FormlySelectModule, i3.FormlyModule] });
+FormlyMatMultiCheckboxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: FormlyMatMultiCheckboxModule, imports: [[
+            CommonModule,
+            ReactiveFormsModule,
+            MatCheckboxModule,
+            FormlyMatFormFieldModule,
+            FormlySelectModule,
+            FormlyModule.forChild({
+                types: [
+                    {
+                        name: 'multicheckbox',
+                        component: FormlyFieldMultiCheckbox,
+                        wrappers: ['form-field'],
+                    },
+                ],
+            }),
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: FormlyMatMultiCheckboxModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [FormlyFieldMultiCheckbox],
+                    imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        MatCheckboxModule,
+                        FormlyMatFormFieldModule,
+                        FormlySelectModule,
+                        FormlyModule.forChild({
+                            types: [
+                                {
+                                    name: 'multicheckbox',
+                                    component: FormlyFieldMultiCheckbox,
+                                    wrappers: ['form-field'],
+                                },
+                            ],
+                        }),
+                    ],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FormlyFieldMultiCheckbox, FormlyMatMultiCheckboxModule };
+//# sourceMappingURL=ngx-formly-material-multicheckbox.mjs.map

package/fesm2020/ngx-formly-material-multicheckbox.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngx-formly-material-multicheckbox.mjs","sources":["../../../../src/ui/material/multicheckbox/src/multicheckbox.type.ts","../../../../src/ui/material/multicheckbox/src/multicheckbox.module.ts","../../../../src/ui/material/multicheckbox/src/ngx-formly-material-multicheckbox.ts"],"sourcesContent":["import { Component, ChangeDetectionStrategy, ViewChildren, QueryList } from '@angular/core';\nimport { FieldType } from '@ngx-formly/material/form-field';\nimport { MatCheckbox } from '@angular/material/checkbox';\n\n@Component({\n  selector: 'formly-field-mat-multicheckbox',\n  template: `\n    <ng-container *ngFor=\"let option of to.options | formlySelectOptions: field | async; let i = index\">\n      <mat-checkbox\n        [id]=\"id + '_' + i\"\n        [formlyAttributes]=\"field\"\n        [tabIndex]=\"to.tabindex\"\n        [color]=\"to.color\"\n        [labelPosition]=\"to.labelPosition\"\n        [checked]=\"isChecked(option)\"\n        [disabled]=\"formControl.disabled\"\n        (change)=\"onChange(option.value, $event.checked)\"\n      >\n        {{ option.label }}\n      </mat-checkbox>\n    </ng-container>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class FormlyFieldMultiCheckbox extends FieldType {\n  @ViewChildren(MatCheckbox) checkboxes!: QueryList<MatCheckbox>;\n\n  defaultOptions = {\n    templateOptions: {\n      hideFieldUnderline: true,\n      floatLabel: 'always' as const,\n      options: [],\n      color: 'accent' as const, // workaround for https://github.com/angular/components/issues/18465\n    },\n  };\n\n  onChange(value: any, checked: boolean) {\n    if (this.to.type === 'array') {\n      this.formControl.patchValue(\n        checked\n          ? [...(this.formControl.value || []), value]\n          : [...(this.formControl.value || [])].filter((o) => o !== value),\n      );\n    } else {\n      this.formControl.patchValue({ ...this.formControl.value, [value]: checked });\n    }\n    this.formControl.markAsTouched();\n  }\n\n  // TODO: find a solution to prevent scroll on focus\n  onContainerClick() {}\n\n  isChecked(option: any) {\n    const value = this.formControl.value;\n\n    return value && (this.to.type === 'array' ? value.indexOf(option.value) !== -1 : value[option.value]);\n  }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { FormlyModule } from '@ngx-formly/core';\nimport { FormlySelectModule } from '@ngx-formly/core/select';\nimport { FormlyMatFormFieldModule } from '@ngx-formly/material/form-field';\nimport { MatCheckboxModule } from '@angular/material/checkbox';\n\nimport { FormlyFieldMultiCheckbox } from './multicheckbox.type';\n\n@NgModule({\n  declarations: [FormlyFieldMultiCheckbox],\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n\n    MatCheckboxModule,\n\n    FormlyMatFormFieldModule,\n    FormlySelectModule,\n    FormlyModule.forChild({\n      types: [\n        {\n          name: 'multicheckbox',\n          component: FormlyFieldMultiCheckbox,\n          wrappers: ['form-field'],\n        },\n      ],\n    }),\n  ],\n})\nexport class FormlyMatMultiCheckboxModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;;;;;;;;;MAwBa,wBAAyB,SAAQ,SAAS;IApBvD;;QAuBE,mBAAc,GAAG;YACf,eAAe,EAAE;gBACf,kBAAkB,EAAE,IAAI;gBACxB,UAAU,EAAE,QAAiB;gBAC7B,OAAO,EAAE,EAAE;gBACX,KAAK,EAAE,QAAiB;aACzB;SACF,CAAC;KAuBH;IArBC,QAAQ,CAAC,KAAU,EAAE,OAAgB;QACnC,IAAI,IAAI,CAAC,EAAE,CAAC,IAAI,KAAK,OAAO,EAAE;YAC5B,IAAI,CAAC,WAAW,CAAC,UAAU,CACzB,OAAO;kBACH,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,IAAI,EAAE,CAAC,EAAE,KAAK,CAAC;kBAC1C,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,KAAK,CAAC,CACnE,CAAC;SACH;aAAM;YACL,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,EAAE,GAAG,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC,KAAK,GAAG,OAAO,EAAE,CAAC,CAAC;SAC9E;QACD,IAAI,CAAC,WAAW,CAAC,aAAa,EAAE,CAAC;KAClC;;IAGD,gBAAgB,MAAK;IAErB,SAAS,CAAC,MAAW;QACnB,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;QAErC,OAAO,KAAK,KAAK,IAAI,CAAC,EAAE,CAAC,IAAI,KAAK,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;KACvG;;qHAhCU,wBAAwB;yGAAxB,wBAAwB,qGACrB,WAAW,uEAnBf;;;;;;;;;;;;;;;GAeT;2FAGU,wBAAwB;kBApBpC,SAAS;mBAAC;oBACT,QAAQ,EAAE,gCAAgC;oBAC1C,QAAQ,EAAE;;;;;;;;;;;;;;;GAeT;oBACD,eAAe,EAAE,uBAAuB,CAAC,MAAM;iBAChD;8BAE4B,UAAU;sBAApC,YAAY;uBAAC,WAAW;;;MCMd,4BAA4B;;yHAA5B,4BAA4B;0HAA5B,4BAA4B,iBApBxB,wBAAwB,aAErC,YAAY;QACZ,mBAAmB;QAEnB,iBAAiB;QAEjB,wBAAwB;QACxB,kBAAkB;0HAYT,4BAA4B,YAnB9B;YACP,YAAY;YACZ,mBAAmB;YAEnB,iBAAiB;YAEjB,wBAAwB;YACxB,kBAAkB;YAClB,YAAY,CAAC,QAAQ,CAAC;gBACpB,KAAK,EAAE;oBACL;wBACE,IAAI,EAAE,eAAe;wBACrB,SAAS,EAAE,wBAAwB;wBACnC,QAAQ,EAAE,CAAC,YAAY,CAAC;qBACzB;iBACF;aACF,CAAC;SACH;2FAEU,4BAA4B;kBArBxC,QAAQ;mBAAC;oBACR,YAAY,EAAE,CAAC,wBAAwB,CAAC;oBACxC,OAAO,EAAE;wBACP,YAAY;wBACZ,mBAAmB;wBAEnB,iBAAiB;wBAEjB,wBAAwB;wBACxB,kBAAkB;wBAClB,YAAY,CAAC,QAAQ,CAAC;4BACpB,KAAK,EAAE;gCACL;oCACE,IAAI,EAAE,eAAe;oCACrB,SAAS,EAAE,wBAAwB;oCACnC,QAAQ,EAAE,CAAC,YAAY,CAAC;iCACzB;6BACF;yBACF,CAAC;qBACH;iBACF;;;AC9BD;;;;;;"}

package/fesm2020/ngx-formly-material-native-select.mjs

@@ -0,0 +1,156 @@
+import * as i0 from '@angular/core';
+import { Component, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import * as i4 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i3 from '@ngx-formly/core';
+import { FormlyModule } from '@ngx-formly/core';
+import * as i5 from '@ngx-formly/core/select';
+import { FormlySelectModule } from '@ngx-formly/core/select';
+import * as i2 from '@angular/forms';
+import { ReactiveFormsModule } from '@angular/forms';
+import { FieldType, FormlyMatFormFieldModule } from '@ngx-formly/material/form-field';
+import * as i1 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+
+class FormlyFieldNativeSelect extends FieldType {
+    constructor() {
+        super(...arguments);
+        this.defaultOptions = {
+            templateOptions: {
+                options: [],
+            },
+        };
+    }
+}
+FormlyFieldNativeSelect.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: FormlyFieldNativeSelect, deps: null, target: i0.ɵɵFactoryTarget.Component });
+FormlyFieldNativeSelect.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: FormlyFieldNativeSelect, selector: "formly-field-mat-native-select", usesInheritance: true, ngImport: i0, template: `
+    <select
+      matNativeControl
+      [id]="id"
+      [readonly]="to.readonly"
+      [required]="to.required"
+      [errorStateMatcher]="errorStateMatcher"
+      [formControl]="formControl"
+      [formlyAttributes]="field"
+    >
+      <option *ngIf="to.placeholder" [ngValue]="undefined">{{ to.placeholder }}</option>
+      <ng-container *ngIf="to.options | formlySelectOptions: field | async as opts">
+        <ng-container *ngIf="to._flatOptions; else grouplist">
+          <ng-container *ngFor="let opt of opts">
+            <option [ngValue]="opt.value" [disabled]="opt.disabled">{{ opt.label }}</option>
+          </ng-container>
+        </ng-container>
+
+        <ng-template #grouplist>
+          <ng-container *ngFor="let opt of opts">
+            <option *ngIf="!opt.group; else optgroup" [ngValue]="opt.value" [disabled]="opt.disabled">
+              {{ opt.label }}
+            </option>
+            <ng-template #optgroup>
+              <optgroup [label]="opt.label">
+                <option *ngFor="let child of opt.group" [ngValue]="child.value" [disabled]="child.disabled">
+                  {{ child.label }}
+                </option>
+              </optgroup>
+            </ng-template>
+          </ng-container>
+        </ng-template>
+      </ng-container>
+    </select>
+  `, isInline: true, directives: [{ type: i1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i4.AsyncPipe, "formlySelectOptions": i5.ɵFormlySelectOptionsPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: FormlyFieldNativeSelect, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'formly-field-mat-native-select',
+                    template: `
+    <select
+      matNativeControl
+      [id]="id"
+      [readonly]="to.readonly"
+      [required]="to.required"
+      [errorStateMatcher]="errorStateMatcher"
+      [formControl]="formControl"
+      [formlyAttributes]="field"
+    >
+      <option *ngIf="to.placeholder" [ngValue]="undefined">{{ to.placeholder }}</option>
+      <ng-container *ngIf="to.options | formlySelectOptions: field | async as opts">
+        <ng-container *ngIf="to._flatOptions; else grouplist">
+          <ng-container *ngFor="let opt of opts">
+            <option [ngValue]="opt.value" [disabled]="opt.disabled">{{ opt.label }}</option>
+          </ng-container>
+        </ng-container>
+
+        <ng-template #grouplist>
+          <ng-container *ngFor="let opt of opts">
+            <option *ngIf="!opt.group; else optgroup" [ngValue]="opt.value" [disabled]="opt.disabled">
+              {{ opt.label }}
+            </option>
+            <ng-template #optgroup>
+              <optgroup [label]="opt.label">
+                <option *ngFor="let child of opt.group" [ngValue]="child.value" [disabled]="child.disabled">
+                  {{ child.label }}
+                </option>
+              </optgroup>
+            </ng-template>
+          </ng-container>
+        </ng-template>
+      </ng-container>
+    </select>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+class FormlyMatNativeSelectModule {
+}
+FormlyMatNativeSelectModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: FormlyMatNativeSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FormlyMatNativeSelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: FormlyMatNativeSelectModule, declarations: [FormlyFieldNativeSelect], imports: [CommonModule,
+        ReactiveFormsModule,
+        MatInputModule,
+        FormlyMatFormFieldModule,
+        FormlySelectModule, i3.FormlyModule] });
+FormlyMatNativeSelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: FormlyMatNativeSelectModule, imports: [[
+            CommonModule,
+            ReactiveFormsModule,
+            MatInputModule,
+            FormlyMatFormFieldModule,
+            FormlySelectModule,
+            FormlyModule.forChild({
+                types: [
+                    {
+                        name: 'native-select',
+                        component: FormlyFieldNativeSelect,
+                        wrappers: ['form-field'],
+                    },
+                ],
+            }),
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: FormlyMatNativeSelectModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [FormlyFieldNativeSelect],
+                    imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        MatInputModule,
+                        FormlyMatFormFieldModule,
+                        FormlySelectModule,
+                        FormlyModule.forChild({
+                            types: [
+                                {
+                                    name: 'native-select',
+                                    component: FormlyFieldNativeSelect,
+                                    wrappers: ['form-field'],
+                                },
+                            ],
+                        }),
+                    ],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FormlyFieldNativeSelect, FormlyMatNativeSelectModule };
+//# sourceMappingURL=ngx-formly-material-native-select.mjs.map

package/fesm2020/ngx-formly-material-native-select.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngx-formly-material-native-select.mjs","sources":["../../../../src/ui/material/native-select/src/native-select.type.ts","../../../../src/ui/material/native-select/src/native-select.module.ts","../../../../src/ui/material/native-select/src/ngx-formly-material-native-select.ts"],"sourcesContent":["import { Component, ChangeDetectionStrategy } from '@angular/core';\nimport { FieldType } from '@ngx-formly/material/form-field';\n\n@Component({\n  selector: 'formly-field-mat-native-select',\n  template: `\n    <select\n      matNativeControl\n      [id]=\"id\"\n      [readonly]=\"to.readonly\"\n      [required]=\"to.required\"\n      [errorStateMatcher]=\"errorStateMatcher\"\n      [formControl]=\"formControl\"\n      [formlyAttributes]=\"field\"\n    >\n      <option *ngIf=\"to.placeholder\" [ngValue]=\"undefined\">{{ to.placeholder }}</option>\n      <ng-container *ngIf=\"to.options | formlySelectOptions: field | async as opts\">\n        <ng-container *ngIf=\"to._flatOptions; else grouplist\">\n          <ng-container *ngFor=\"let opt of opts\">\n            <option [ngValue]=\"opt.value\" [disabled]=\"opt.disabled\">{{ opt.label }}</option>\n          </ng-container>\n        </ng-container>\n\n        <ng-template #grouplist>\n          <ng-container *ngFor=\"let opt of opts\">\n            <option *ngIf=\"!opt.group; else optgroup\" [ngValue]=\"opt.value\" [disabled]=\"opt.disabled\">\n              {{ opt.label }}\n            </option>\n            <ng-template #optgroup>\n              <optgroup [label]=\"opt.label\">\n                <option *ngFor=\"let child of opt.group\" [ngValue]=\"child.value\" [disabled]=\"child.disabled\">\n                  {{ child.label }}\n                </option>\n              </optgroup>\n            </ng-template>\n          </ng-container>\n        </ng-template>\n      </ng-container>\n    </select>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class FormlyFieldNativeSelect extends FieldType {\n  defaultOptions = {\n    templateOptions: {\n      options: [],\n    },\n  };\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { FormlyModule } from '@ngx-formly/core';\nimport { FormlySelectModule } from '@ngx-formly/core/select';\nimport { ReactiveFormsModule } from '@angular/forms';\n\nimport { FormlyMatFormFieldModule } from '@ngx-formly/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\n\nimport { FormlyFieldNativeSelect } from './native-select.type';\n\n@NgModule({\n  declarations: [FormlyFieldNativeSelect],\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    MatInputModule,\n\n    FormlyMatFormFieldModule,\n    FormlySelectModule,\n    FormlyModule.forChild({\n      types: [\n        {\n          name: 'native-select',\n          component: FormlyFieldNativeSelect,\n          wrappers: ['form-field'],\n        },\n      ],\n    }),\n  ],\n})\nexport class FormlyMatNativeSelectModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;;;;;;;;;;MA0Ca,uBAAwB,SAAQ,SAAS;IAvCtD;;QAwCE,mBAAc,GAAG;YACf,eAAe,EAAE;gBACf,OAAO,EAAE,EAAE;aACZ;SACF,CAAC;KACH;;oHANY,uBAAuB;wGAAvB,uBAAuB,6FArCxB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCT;2FAGU,uBAAuB;kBAvCnC,SAAS;mBAAC;oBACT,QAAQ,EAAE,gCAAgC;oBAC1C,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCT;oBACD,eAAe,EAAE,uBAAuB,CAAC,MAAM;iBAChD;;;MCVY,2BAA2B;;wHAA3B,2BAA2B;yHAA3B,2BAA2B,iBAnBvB,uBAAuB,aAEpC,YAAY;QACZ,mBAAmB;QACnB,cAAc;QAEd,wBAAwB;QACxB,kBAAkB;yHAYT,2BAA2B,YAlB7B;YACP,YAAY;YACZ,mBAAmB;YACnB,cAAc;YAEd,wBAAwB;YACxB,kBAAkB;YAClB,YAAY,CAAC,QAAQ,CAAC;gBACpB,KAAK,EAAE;oBACL;wBACE,IAAI,EAAE,eAAe;wBACrB,SAAS,EAAE,uBAAuB;wBAClC,QAAQ,EAAE,CAAC,YAAY,CAAC;qBACzB;iBACF;aACF,CAAC;SACH;2FAEU,2BAA2B;kBApBvC,QAAQ;mBAAC;oBACR,YAAY,EAAE,CAAC,uBAAuB,CAAC;oBACvC,OAAO,EAAE;wBACP,YAAY;wBACZ,mBAAmB;wBACnB,cAAc;wBAEd,wBAAwB;wBACxB,kBAAkB;wBAClB,YAAY,CAAC,QAAQ,CAAC;4BACpB,KAAK,EAAE;gCACL;oCACE,IAAI,EAAE,eAAe;oCACrB,SAAS,EAAE,uBAAuB;oCAClC,QAAQ,EAAE,CAAC,YAAY,CAAC;iCACzB;6BACF;yBACF,CAAC;qBACH;iBACF;;;AC9BD;;;;;;"}

package/fesm2020/ngx-formly-material-radio.mjs

@@ -0,0 +1,146 @@
+import * as i0 from '@angular/core';
+import { Component, ChangeDetectionStrategy, ViewChild, NgModule } from '@angular/core';
+import * as i4 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i3 from '@ngx-formly/core';
+import { ɵobserve, FormlyModule } from '@ngx-formly/core';
+import * as i2 from '@angular/forms';
+import { ReactiveFormsModule } from '@angular/forms';
+import * as i5 from '@ngx-formly/core/select';
+import { FormlySelectModule } from '@ngx-formly/core/select';
+import { FieldType, FormlyMatFormFieldModule } from '@ngx-formly/material/form-field';
+import * as i1 from '@angular/material/radio';
+import { MatRadioGroup, MatRadioModule } from '@angular/material/radio';
+
+class FormlyFieldRadio extends FieldType {
+    constructor() {
+        super(...arguments);
+        this.defaultOptions = {
+            templateOptions: {
+                hideFieldUnderline: true,
+                floatLabel: 'always',
+                options: [],
+                tabindex: -1,
+            },
+        };
+    }
+    ngAfterViewInit() {
+        this.focusObserver = ɵobserve(this.field, ['focus'], ({ currentValue }) => {
+            if (this.to.tabindex === -1 && currentValue && this.radioGroup._radios.length > 0) {
+                // https://github.com/ngx-formly/ngx-formly/issues/2498
+                setTimeout(() => {
+                    const radio = this.radioGroup.selected ? this.radioGroup.selected : this.radioGroup._radios.first;
+                    radio.focus();
+                });
+            }
+        });
+    }
+    // TODO: find a solution to prevent scroll on focus
+    onContainerClick() { }
+    ngOnDestroy() {
+        this.focusObserver && this.focusObserver.unsubscribe();
+    }
+}
+FormlyFieldRadio.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: FormlyFieldRadio, deps: null, target: i0.ɵɵFactoryTarget.Component });
+FormlyFieldRadio.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: FormlyFieldRadio, selector: "formly-field-mat-radio", viewQueries: [{ propertyName: "radioGroup", first: true, predicate: MatRadioGroup, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
+    <mat-radio-group
+      [formControl]="formControl"
+      [formlyAttributes]="field"
+      [required]="to.required"
+      [tabindex]="to.tabindex"
+    >
+      <mat-radio-button
+        *ngFor="let option of to.options | formlySelectOptions: field | async; let i = index"
+        [id]="id + '_' + i"
+        [color]="to.color"
+        [labelPosition]="to.labelPosition"
+        [disabled]="option.disabled"
+        [value]="option.value"
+      >
+        {{ option.label }}
+      </mat-radio-button>
+    </mat-radio-group>
+  `, isInline: true, components: [{ type: i1.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }], directives: [{ type: i1.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i4.AsyncPipe, "formlySelectOptions": i5.ɵFormlySelectOptionsPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: FormlyFieldRadio, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'formly-field-mat-radio',
+                    template: `
+    <mat-radio-group
+      [formControl]="formControl"
+      [formlyAttributes]="field"
+      [required]="to.required"
+      [tabindex]="to.tabindex"
+    >
+      <mat-radio-button
+        *ngFor="let option of to.options | formlySelectOptions: field | async; let i = index"
+        [id]="id + '_' + i"
+        [color]="to.color"
+        [labelPosition]="to.labelPosition"
+        [disabled]="option.disabled"
+        [value]="option.value"
+      >
+        {{ option.label }}
+      </mat-radio-button>
+    </mat-radio-group>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { radioGroup: [{
+                type: ViewChild,
+                args: [MatRadioGroup, { static: true }]
+            }] } });
+
+class FormlyMatRadioModule {
+}
+FormlyMatRadioModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: FormlyMatRadioModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FormlyMatRadioModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: FormlyMatRadioModule, declarations: [FormlyFieldRadio], imports: [CommonModule,
+        ReactiveFormsModule,
+        MatRadioModule,
+        FormlyMatFormFieldModule,
+        FormlySelectModule, i3.FormlyModule] });
+FormlyMatRadioModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: FormlyMatRadioModule, imports: [[
+            CommonModule,
+            ReactiveFormsModule,
+            MatRadioModule,
+            FormlyMatFormFieldModule,
+            FormlySelectModule,
+            FormlyModule.forChild({
+                types: [
+                    {
+                        name: 'radio',
+                        component: FormlyFieldRadio,
+                        wrappers: ['form-field'],
+                    },
+                ],
+            }),
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: FormlyMatRadioModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [FormlyFieldRadio],
+                    imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        MatRadioModule,
+                        FormlyMatFormFieldModule,
+                        FormlySelectModule,
+                        FormlyModule.forChild({
+                            types: [
+                                {
+                                    name: 'radio',
+                                    component: FormlyFieldRadio,
+                                    wrappers: ['form-field'],
+                                },
+                            ],
+                        }),
+                    ],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FormlyFieldRadio, FormlyMatRadioModule };
+//# sourceMappingURL=ngx-formly-material-radio.mjs.map

package/fesm2020/ngx-formly-material-radio.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngx-formly-material-radio.mjs","sources":["../../../../src/ui/material/radio/src/radio.type.ts","../../../../src/ui/material/radio/src/radio.module.ts","../../../../src/ui/material/radio/src/ngx-formly-material-radio.ts"],"sourcesContent":["import { Component, ChangeDetectionStrategy, ViewChild, AfterViewInit, OnDestroy } from '@angular/core';\nimport { FieldType } from '@ngx-formly/material/form-field';\nimport { MatRadioGroup } from '@angular/material/radio';\nimport { ɵobserve as observe } from '@ngx-formly/core';\n\n@Component({\n  selector: 'formly-field-mat-radio',\n  template: `\n    <mat-radio-group\n      [formControl]=\"formControl\"\n      [formlyAttributes]=\"field\"\n      [required]=\"to.required\"\n      [tabindex]=\"to.tabindex\"\n    >\n      <mat-radio-button\n        *ngFor=\"let option of to.options | formlySelectOptions: field | async; let i = index\"\n        [id]=\"id + '_' + i\"\n        [color]=\"to.color\"\n        [labelPosition]=\"to.labelPosition\"\n        [disabled]=\"option.disabled\"\n        [value]=\"option.value\"\n      >\n        {{ option.label }}\n      </mat-radio-button>\n    </mat-radio-group>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class FormlyFieldRadio extends FieldType implements AfterViewInit, OnDestroy {\n  @ViewChild(MatRadioGroup, { static: true }) radioGroup!: MatRadioGroup;\n  defaultOptions = {\n    templateOptions: {\n      hideFieldUnderline: true,\n      floatLabel: 'always' as const,\n      options: [],\n      tabindex: -1,\n    },\n  };\n\n  private focusObserver!: ReturnType<typeof observe>;\n  ngAfterViewInit() {\n    this.focusObserver = observe(this.field, ['focus'], ({ currentValue }) => {\n      if (this.to.tabindex === -1 && currentValue && this.radioGroup._radios.length > 0) {\n        // https://github.com/ngx-formly/ngx-formly/issues/2498\n        setTimeout(() => {\n          const radio = this.radioGroup.selected ? this.radioGroup.selected : this.radioGroup._radios.first;\n          radio.focus();\n        });\n      }\n    });\n  }\n\n  // TODO: find a solution to prevent scroll on focus\n  onContainerClick() {}\n\n  ngOnDestroy() {\n    this.focusObserver && this.focusObserver.unsubscribe();\n  }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { FormlyModule } from '@ngx-formly/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { FormlySelectModule } from '@ngx-formly/core/select';\n\nimport { FormlyMatFormFieldModule } from '@ngx-formly/material/form-field';\nimport { MatRadioModule } from '@angular/material/radio';\n\nimport { FormlyFieldRadio } from './radio.type';\n\n@NgModule({\n  declarations: [FormlyFieldRadio],\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    MatRadioModule,\n\n    FormlyMatFormFieldModule,\n    FormlySelectModule,\n    FormlyModule.forChild({\n      types: [\n        {\n          name: 'radio',\n          component: FormlyFieldRadio,\n          wrappers: ['form-field'],\n        },\n      ],\n    }),\n  ],\n})\nexport class FormlyMatRadioModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":["observe"],"mappings":";;;;;;;;;;;;;;MA4Ba,gBAAiB,SAAQ,SAAS;IAvB/C;;QAyBE,mBAAc,GAAG;YACf,eAAe,EAAE;gBACf,kBAAkB,EAAE,IAAI;gBACxB,UAAU,EAAE,QAAiB;gBAC7B,OAAO,EAAE,EAAE;gBACX,QAAQ,EAAE,CAAC,CAAC;aACb;SACF,CAAC;KAqBH;IAlBC,eAAe;QACb,IAAI,CAAC,aAAa,GAAGA,QAAO,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,YAAY,EAAE;YACnE,IAAI,IAAI,CAAC,EAAE,CAAC,QAAQ,KAAK,CAAC,CAAC,IAAI,YAAY,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE;;gBAEjF,UAAU,CAAC;oBACT,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC;oBAClG,KAAK,CAAC,KAAK,EAAE,CAAC;iBACf,CAAC,CAAC;aACJ;SACF,CAAC,CAAC;KACJ;;IAGD,gBAAgB,MAAK;IAErB,WAAW;QACT,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,aAAa,CAAC,WAAW,EAAE,CAAC;KACxD;;6GA7BU,gBAAgB;iGAAhB,gBAAgB,0GAChB,aAAa,qFAtBd;;;;;;;;;;;;;;;;;;GAkBT;2FAGU,gBAAgB;kBAvB5B,SAAS;mBAAC;oBACT,QAAQ,EAAE,wBAAwB;oBAClC,QAAQ,EAAE;;;;;;;;;;;;;;;;;;GAkBT;oBACD,eAAe,EAAE,uBAAuB,CAAC,MAAM;iBAChD;8BAE6C,UAAU;sBAArD,SAAS;uBAAC,aAAa,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE;;;MCE/B,oBAAoB;;iHAApB,oBAAoB;kHAApB,oBAAoB,iBAnBhB,gBAAgB,aAE7B,YAAY;QACZ,mBAAmB;QACnB,cAAc;QAEd,wBAAwB;QACxB,kBAAkB;kHAYT,oBAAoB,YAlBtB;YACP,YAAY;YACZ,mBAAmB;YACnB,cAAc;YAEd,wBAAwB;YACxB,kBAAkB;YAClB,YAAY,CAAC,QAAQ,CAAC;gBACpB,KAAK,EAAE;oBACL;wBACE,IAAI,EAAE,OAAO;wBACb,SAAS,EAAE,gBAAgB;wBAC3B,QAAQ,EAAE,CAAC,YAAY,CAAC;qBACzB;iBACF;aACF,CAAC;SACH;2FAEU,oBAAoB;kBApBhC,QAAQ;mBAAC;oBACR,YAAY,EAAE,CAAC,gBAAgB,CAAC;oBAChC,OAAO,EAAE;wBACP,YAAY;wBACZ,mBAAmB;wBACnB,cAAc;wBAEd,wBAAwB;wBACxB,kBAAkB;wBAClB,YAAY,CAAC,QAAQ,CAAC;4BACpB,KAAK,EAAE;gCACL;oCACE,IAAI,EAAE,OAAO;oCACb,SAAS,EAAE,gBAAgB;oCAC3B,QAAQ,EAAE,CAAC,YAAY,CAAC;iCACzB;6BACF;yBACF,CAAC;qBACH;iBACF;;;AC9BD;;;;;;"}