@3kles/kles-material-dynamicforms 1.0.7 → 1.0.8

package/fesm2015/3kles-kles-material-dynamicforms.js

@@ -38,6 +38,7 @@ import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatTreeModule } from '@angular/material/tree';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { ColorPickerModule } from 'ngx-color-picker';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { TranslateModule } from '@ngx-translate/core';
 import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
@@ -1103,6 +1104,38 @@ KlesFormSelectionListComponent = __decorate([
     })
 ], KlesFormSelectionListComponent);
 
+let KlesFormButtonToogleGroupComponent = class KlesFormButtonToogleGroupComponent extends KlesFieldAbstract {
+    ngOnInit() {
+        super.ngOnInit();
+        if (!(this.field.options instanceof Observable)) {
+            this.options$ = of(this.field.options);
+        }
+        else {
+            this.options$ = this.field.options;
+        }
+    }
+};
+KlesFormButtonToogleGroupComponent = __decorate([
+    Component({
+        selector: 'kles-form-button-toogle-group',
+        template: `
+        <div [formGroup]="group" class="form-element">
+            <mat-button-toggle-group [formControlName]="field.name" [multiple]="field.multiple"
+            [attr.id]="field.id" [ngClass]="field.ngClass">
+                <mat-button-toggle *ngFor="let item of options$ | async" [value]="item">
+                    {{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}
+                </mat-button-toggle>
+            </mat-button-toggle-group>
+        </div>
+`
+    })
+], KlesFormButtonToogleGroupComponent);
+// <mat-button-toggle-group [formControlName]="field.name">
+//                 <mat-button-toggle value="bold">Bold</mat-button-toggle>
+//                 <mat-button-toggle value="italic">Italic</mat-button-toggle>
+//                 <mat-button-toggle value="underline">Underline</mat-button-toggle>
+//             </mat-button-toggle-group>
+
 const componentMapper = {
     label: KlesFormLabelComponent,
     input: KlesFormInputComponent,
@@ -1119,7 +1152,8 @@ const componentMapper = {
     selectSearch: KlesFormSelectSearchComponent,
     lineBreak: KlesFormLineBreakComponent,
     link: KlesFormLinkComponent,
-    selectionList: KlesFormSelectionListComponent
+    selectionList: KlesFormSelectionListComponent,
+    buttonToogleGroup: KlesFormButtonToogleGroupComponent
 };
 let KlesDynamicFieldDirective = class KlesDynamicFieldDirective {
     constructor(resolver, container) {
@@ -1225,7 +1259,8 @@ MaterialModule = __decorate([
             MatSliderModule,
             MatButtonModule,
             MatSlideToggleModule,
-            ColorPickerModule
+            ColorPickerModule,
+            MatButtonToggleModule
         ],
         exports: [
             MatButtonModule,
@@ -1263,7 +1298,8 @@ MaterialModule = __decorate([
             MatSlideToggleModule,
             ColorPickerModule,
             ScrollingModule,
-            CdkScrollable
+            CdkScrollable,
+            MatButtonToggleModule
         ],
         providers: [
             MatDatepickerModule,
@@ -1788,7 +1824,8 @@ const components = [
     KlesFormLineBreakComponent,
     KlesFormLinkComponent,
     KlesFormSlideToggleComponent,
-    KlesFormSelectionListComponent
+    KlesFormSelectionListComponent,
+    KlesFormButtonToogleGroupComponent
 ];
 const directives = [KlesDynamicFieldDirective, KlesComponentDirective];
 const pipes = [KlesTransformPipe, ArrayFormatPipe];
@@ -1859,5 +1896,5 @@ function autocompleteStringValidator(validOptions, optional) {
  * Generated bundle index. Do not edit.
  */
 
-export { ArrayFormatPipe, KlesButtonCheckerComponent, KlesButtonComponent, KlesButtonFileComponent, KlesComponentDirective, KlesDynamicFieldDirective, KlesDynamicFormComponent, KlesFieldAbstract, KlesFormBadgeComponent, KlesFormButtonCheckerComponent, KlesFormButtonComponent, KlesFormButtonFileComponent, KlesFormCheckboxComponent, KlesFormChipComponent, KlesFormColorComponent, KlesFormDateComponent, KlesFormErrorStateMatcher, KlesFormGroupComponent, KlesFormIconComponent, KlesFormInputClearableComponent, KlesFormInputComponent, KlesFormLabelComponent, KlesFormLineBreakComponent, KlesFormLinkComponent, KlesFormListFieldComponent, KlesFormRadioComponent, KlesFormSelectComponent, KlesFormSelectSearchComponent, KlesFormSelectionListComponent, KlesFormSlideToggleComponent, KlesFormSubmitButtonComponent, KlesFormTextComponent, KlesFormTextareaComponent, KlesMaterialDynamicformsModule, KlesTransformPipe, autocompleteObjectValidator, autocompleteStringValidator, MaterialModule as ɵa };
+export { ArrayFormatPipe, KlesButtonCheckerComponent, KlesButtonComponent, KlesButtonFileComponent, KlesComponentDirective, KlesDynamicFieldDirective, KlesDynamicFormComponent, KlesFieldAbstract, KlesFormBadgeComponent, KlesFormButtonCheckerComponent, KlesFormButtonComponent, KlesFormButtonFileComponent, KlesFormButtonToogleGroupComponent, KlesFormCheckboxComponent, KlesFormChipComponent, KlesFormColorComponent, KlesFormDateComponent, KlesFormErrorStateMatcher, KlesFormGroupComponent, KlesFormIconComponent, KlesFormInputClearableComponent, KlesFormInputComponent, KlesFormLabelComponent, KlesFormLineBreakComponent, KlesFormLinkComponent, KlesFormListFieldComponent, KlesFormRadioComponent, KlesFormSelectComponent, KlesFormSelectSearchComponent, KlesFormSelectionListComponent, KlesFormSlideToggleComponent, KlesFormSubmitButtonComponent, KlesFormTextComponent, KlesFormTextareaComponent, KlesMaterialDynamicformsModule, KlesTransformPipe, autocompleteObjectValidator, autocompleteStringValidator, MaterialModule as ɵa };
 //# sourceMappingURL=3kles-kles-material-dynamicforms.js.map