@3kles/kles-material-dynamicforms 1.0.5 → 1.0.9

package/bundles/3kles-kles-material-dynamicforms.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('rxjs'), require('rxjs/operators'), require('@angular/cdk/scrolling'), require('@angular/material/core'), require('@angular/material/slider'), require('@angular/material/button'), require('@angular/material/toolbar'), require('@angular/material/icon'), require('@angular/material/sidenav'), require('@angular/material/badge'), require('@angular/material/list'), require('@angular/material/grid-list'), require('@angular/material/form-field'), require('@angular/material/datepicker'), require('@angular/material/input'), require('@angular/material/select'), require('@angular/material/radio'), require('@angular/material/chips'), require('@angular/material/tooltip'), require('@angular/material/table'), require('@angular/material/paginator'), require('@angular/material/card'), require('@angular/material/menu'), require('@angular/cdk/table'), require('@angular/material/tabs'), require('@angular/material/progress-spinner'), require('@angular/material/checkbox'), require('@angular/material/dialog'), require('@angular/material/autocomplete'), require('@angular/material/progress-bar'), require('@angular/material/sort'), require('@angular/material/expansion'), require('@angular/material/snack-bar'), require('@angular/material/tree'), require('@angular/material/slide-toggle'), require('ngx-color-picker'), require('@angular/flex-layout'), require('@ngx-translate/core'), require('ngx-mat-select-search')) :
-    typeof define === 'function' && define.amd ? define('@3kles/kles-material-dynamicforms', ['exports', '@angular/core', '@angular/common', '@angular/forms', 'rxjs', 'rxjs/operators', '@angular/cdk/scrolling', '@angular/material/core', '@angular/material/slider', '@angular/material/button', '@angular/material/toolbar', '@angular/material/icon', '@angular/material/sidenav', '@angular/material/badge', '@angular/material/list', '@angular/material/grid-list', '@angular/material/form-field', '@angular/material/datepicker', '@angular/material/input', '@angular/material/select', '@angular/material/radio', '@angular/material/chips', '@angular/material/tooltip', '@angular/material/table', '@angular/material/paginator', '@angular/material/card', '@angular/material/menu', '@angular/cdk/table', '@angular/material/tabs', '@angular/material/progress-spinner', '@angular/material/checkbox', '@angular/material/dialog', '@angular/material/autocomplete', '@angular/material/progress-bar', '@angular/material/sort', '@angular/material/expansion', '@angular/material/snack-bar', '@angular/material/tree', '@angular/material/slide-toggle', 'ngx-color-picker', '@angular/flex-layout', '@ngx-translate/core', 'ngx-mat-select-search'], factory) :
-    (global = global || self, factory((global['3kles'] = global['3kles'] || {}, global['3kles']['kles-material-dynamicforms'] = {}), global.ng.core, global.ng.common, global.ng.forms, global.rxjs, global.rxjs.operators, global.ng.cdk.scrolling, global.ng.material.core, global.ng.material.slider, global.ng.material.button, global.ng.material.toolbar, global.ng.material.icon, global.ng.material.sidenav, global.ng.material.badge, global.ng.material.list, global.ng.material.gridList, global.ng.material.formField, global.ng.material.datepicker, global.ng.material.input, global.ng.material.select, global.ng.material.radio, global.ng.material.chips, global.ng.material.tooltip, global.ng.material.table, global.ng.material.paginator, global.ng.material.card, global.ng.material.menu, global.ng.cdk.table, global.ng.material.tabs, global.ng.material.progressSpinner, global.ng.material.checkbox, global.ng.material.dialog, global.ng.material.autocomplete, global.ng.material.progressBar, global.ng.material.sort, global.ng.material.expansion, global.ng.material.snackBar, global.ng.material.tree, global.ng.material.slideToggle, global.ngxColorPicker, global.ng.flexLayout, global.core$2, global.ngxMatSelectSearch));
-}(this, (function (exports, core, common, forms, rxjs, operators, scrolling, core$1, slider, button, toolbar, icon, sidenav, badge, list, gridList, formField, datepicker, input, select, radio, chips, tooltip, table, paginator, card, menu, table$1, tabs, progressSpinner, checkbox, dialog, autocomplete, progressBar, sort, expansion, snackBar, tree, slideToggle, ngxColorPicker, flexLayout, core$2, ngxMatSelectSearch) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('rxjs'), require('rxjs/operators'), require('@angular/cdk/scrolling'), require('@angular/material/core'), require('@angular/material/slider'), require('@angular/material/button'), require('@angular/material/toolbar'), require('@angular/material/icon'), require('@angular/material/sidenav'), require('@angular/material/badge'), require('@angular/material/list'), require('@angular/material/grid-list'), require('@angular/material/form-field'), require('@angular/material/datepicker'), require('@angular/material/input'), require('@angular/material/select'), require('@angular/material/radio'), require('@angular/material/chips'), require('@angular/material/tooltip'), require('@angular/material/table'), require('@angular/material/paginator'), require('@angular/material/card'), require('@angular/material/menu'), require('@angular/cdk/table'), require('@angular/material/tabs'), require('@angular/material/progress-spinner'), require('@angular/material/checkbox'), require('@angular/material/dialog'), require('@angular/material/autocomplete'), require('@angular/material/progress-bar'), require('@angular/material/sort'), require('@angular/material/expansion'), require('@angular/material/snack-bar'), require('@angular/material/tree'), require('@angular/material/slide-toggle'), require('ngx-color-picker'), require('@angular/material/button-toggle'), require('@angular/flex-layout'), require('@ngx-translate/core'), require('ngx-mat-select-search')) :
+    typeof define === 'function' && define.amd ? define('@3kles/kles-material-dynamicforms', ['exports', '@angular/core', '@angular/common', '@angular/forms', 'rxjs', 'rxjs/operators', '@angular/cdk/scrolling', '@angular/material/core', '@angular/material/slider', '@angular/material/button', '@angular/material/toolbar', '@angular/material/icon', '@angular/material/sidenav', '@angular/material/badge', '@angular/material/list', '@angular/material/grid-list', '@angular/material/form-field', '@angular/material/datepicker', '@angular/material/input', '@angular/material/select', '@angular/material/radio', '@angular/material/chips', '@angular/material/tooltip', '@angular/material/table', '@angular/material/paginator', '@angular/material/card', '@angular/material/menu', '@angular/cdk/table', '@angular/material/tabs', '@angular/material/progress-spinner', '@angular/material/checkbox', '@angular/material/dialog', '@angular/material/autocomplete', '@angular/material/progress-bar', '@angular/material/sort', '@angular/material/expansion', '@angular/material/snack-bar', '@angular/material/tree', '@angular/material/slide-toggle', 'ngx-color-picker', '@angular/material/button-toggle', '@angular/flex-layout', '@ngx-translate/core', 'ngx-mat-select-search'], factory) :
+    (global = global || self, factory((global['3kles'] = global['3kles'] || {}, global['3kles']['kles-material-dynamicforms'] = {}), global.ng.core, global.ng.common, global.ng.forms, global.rxjs, global.rxjs.operators, global.ng.cdk.scrolling, global.ng.material.core, global.ng.material.slider, global.ng.material.button, global.ng.material.toolbar, global.ng.material.icon, global.ng.material.sidenav, global.ng.material.badge, global.ng.material.list, global.ng.material.gridList, global.ng.material.formField, global.ng.material.datepicker, global.ng.material.input, global.ng.material.select, global.ng.material.radio, global.ng.material.chips, global.ng.material.tooltip, global.ng.material.table, global.ng.material.paginator, global.ng.material.card, global.ng.material.menu, global.ng.cdk.table, global.ng.material.tabs, global.ng.material.progressSpinner, global.ng.material.checkbox, global.ng.material.dialog, global.ng.material.autocomplete, global.ng.material.progressBar, global.ng.material.sort, global.ng.material.expansion, global.ng.material.snackBar, global.ng.material.tree, global.ng.material.slideToggle, global.ngxColorPicker, global.ng.material.buttonToggle, global.ng.flexLayout, global.core$2, global.ngxMatSelectSearch));
+}(this, (function (exports, core, common, forms, rxjs, operators, scrolling, core$1, slider, button, toolbar, icon, sidenav, badge, list, gridList, formField, datepicker, input, select, radio, chips, tooltip, table, paginator, card, menu, table$1, tabs, progressSpinner, checkbox, dialog, autocomplete, progressBar, sort, expansion, snackBar, tree, slideToggle, ngxColorPicker, buttonToggle, flexLayout, core$2, ngxMatSelectSearch) { 'use strict';
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -901,8 +901,19 @@
                     return _this.options$.pipe(operators.map(function (options) {
                         return options
                             .filter(function (option) {
-                            if (_this.field.property) {
-                                return option[_this.field.property].toString().toLowerCase().indexOf(search_1) > -1;
+                            if (_this.field.searchKeys && _this.field.searchKeys.length) {
+                                return _this.field.searchKeys.some(function (searchKey) {
+                                    if (option[searchKey]) {
+                                        return option[searchKey].toString().toLowerCase().indexOf(search_1) > -1;
+                                    }
+                                    return false;
+                                }) || (_this.field.property ?
+                                    option[_this.field.property].toString().toLowerCase().indexOf(search_1) > -1 : false);
+                            }
+                            else {
+                                if (_this.field.property) {
+                                    return option[_this.field.property].toString().toLowerCase().indexOf(search_1) > -1;
+                                }
                             }
                             return option.toString().toLowerCase().indexOf(search_1) > -1;
                         });
@@ -912,7 +923,8 @@
                     return _this.options$;
                 }
             })).subscribe(this.optionsFiltered$);
-            this.group.controls[this.field.name].valueChanges.pipe(operators.takeUntil(this._onDestroy), operators.switchMap(function (selected) {
+            this.group.controls[this.field.name]
+                .valueChanges.pipe(operators.takeUntil(this._onDestroy), operators.startWith(this.group.controls[this.field.name].value), operators.switchMap(function (selected) {
                 return _this.optionsFiltered$.pipe(operators.map(function (options) {
                     if (!selected) {
                         return false;
@@ -1025,6 +1037,34 @@
         return KlesFormSelectionListComponent;
     }(KlesFieldAbstract));
 
+    var KlesFormButtonToogleGroupComponent = /** @class */ (function (_super) {
+        __extends(KlesFormButtonToogleGroupComponent, _super);
+        function KlesFormButtonToogleGroupComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        KlesFormButtonToogleGroupComponent.prototype.ngOnInit = function () {
+            _super.prototype.ngOnInit.call(this);
+            if (!(this.field.options instanceof rxjs.Observable)) {
+                this.options$ = rxjs.of(this.field.options);
+            }
+            else {
+                this.options$ = this.field.options;
+            }
+        };
+        KlesFormButtonToogleGroupComponent = __decorate([
+            core.Component({
+                selector: 'kles-form-button-toogle-group',
+                template: "\n        <div [formGroup]=\"group\" class=\"form-element\">\n            <mat-button-toggle-group [formControlName]=\"field.name\" [multiple]=\"field.multiple\"\n            [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\">\n                <mat-button-toggle *ngFor=\"let item of options$ | async\" [value]=\"item\">\n                    {{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}\n                </mat-button-toggle>\n            </mat-button-toggle-group>\n        </div>\n"
+            })
+        ], KlesFormButtonToogleGroupComponent);
+        return KlesFormButtonToogleGroupComponent;
+    }(KlesFieldAbstract));
+    // <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>
+
     var componentMapper = {
         label: KlesFormLabelComponent,
         input: KlesFormInputComponent,
@@ -1041,7 +1081,8 @@
         selectSearch: KlesFormSelectSearchComponent,
         lineBreak: KlesFormLineBreakComponent,
         link: KlesFormLinkComponent,
-        selectionList: KlesFormSelectionListComponent
+        selectionList: KlesFormSelectionListComponent,
+        buttonToogleGroup: KlesFormButtonToogleGroupComponent
     };
     var KlesDynamicFieldDirective = /** @class */ (function () {
         function KlesDynamicFieldDirective(resolver, container) {
@@ -1150,7 +1191,8 @@
                     slider.MatSliderModule,
                     button.MatButtonModule,
                     slideToggle.MatSlideToggleModule,
-                    ngxColorPicker.ColorPickerModule
+                    ngxColorPicker.ColorPickerModule,
+                    buttonToggle.MatButtonToggleModule
                 ],
                 exports: [
                     button.MatButtonModule,
@@ -1188,7 +1230,8 @@
                     slideToggle.MatSlideToggleModule,
                     ngxColorPicker.ColorPickerModule,
                     scrolling.ScrollingModule,
-                    scrolling.CdkScrollable
+                    scrolling.CdkScrollable,
+                    buttonToggle.MatButtonToggleModule
                 ],
                 providers: [
                     datepicker.MatDatepickerModule,
@@ -1326,7 +1369,7 @@
         KlesButtonCheckerComponent = KlesButtonCheckerComponent_1 = __decorate([
             core.Component({
                 selector: 'kles-button-checker',
-                template: "\n        <span *ngIf=\"value.error && !value.busy\">\n            <kles-button \n                [classButton]=\"classButton\" \n                [name]=\"name\" [label]=\"label\" [color]=\"color\" \n                [icon]=\"icon\" [iconSvg]=\"iconSvg\"\n                [value]=\"value\" matBadge=\"{{countError()}}\" (click)=\"click($event)\">\n            </kles-button>\n        </span>\n        <span style=\"text-align: center;\" *ngIf=\"value.busy||false\">\n            <span style=\"text-align: center;margin-right: 10px\">\n                <mat-spinner [diameter]=\"25\"></mat-spinner>\n            </span>\n            <span *ngIf=\"value.message\" style=\"margin-right: 10px\">\n                {{value.message|translate}}...\n            </span>\n        </span>\n    ",
+                template: "\n        <span *ngIf=\"value.error && !value.busy\">\n            <kles-button \n                [classButton]=\"classButton\" \n                [name]=\"name\" [label]=\"label\" [color]=\"color\" \n                [icon]=\"icon\" [iconSvg]=\"iconSvg\"\n                [value]=\"value\" \n                [tooltip]=\"tooltip\"\n                matBadge=\"{{countError()}}\" (click)=\"click($event)\">\n            </kles-button>\n        </span>\n        <span style=\"text-align: center;\" *ngIf=\"value.busy||false\">\n            <span style=\"text-align: center;margin-right: 10px\">\n                <mat-spinner [diameter]=\"25\"></mat-spinner>\n            </span>\n            <span *ngIf=\"value.message\" style=\"margin-right: 10px\">\n                {{value.message|translate}}...\n            </span>\n        </span>\n    ",
                 providers: [
                     {
                         provide: forms.NG_VALUE_ACCESSOR,
@@ -1350,7 +1393,7 @@
         KlesFormButtonCheckerComponent = __decorate([
             core.Component({
                 selector: 'kles-form-button-checker',
-                template: "\n    <div [formGroup]=\"group\">\n        <kles-button-checker\n            [attr.id]=\"field.id\" [classButton]=\"field.ngClass\" \n            [name]=\"field.name\" [label]=\"field.label\" [color]=\"field.color\" \n            [icon]=\"field.icon\"\n            [iconSvg]=\"field.iconSvg\"\n            [value]=\"field.value\"\n            [formControlName]=\"field.name\">\n        </kles-button-checker>\n    </div>\n    "
+                template: "\n    <div [formGroup]=\"group\">\n        <kles-button-checker\n            [attr.id]=\"field.id\" [classButton]=\"field.ngClass\" \n            [name]=\"field.name\" [label]=\"field.label\" [color]=\"field.color\" \n            [icon]=\"field.icon\"\n            [iconSvg]=\"field.iconSvg\"\n            [value]=\"field.value\"\n            [formControlName]=\"field.name\"\n            [tooltip]=\"field.tooltip\">\n        </kles-button-checker>\n    </div>\n    "
             })
         ], KlesFormButtonCheckerComponent);
         return KlesFormButtonCheckerComponent;
@@ -1646,7 +1689,8 @@
         KlesFormLineBreakComponent,
         KlesFormLinkComponent,
         KlesFormSlideToggleComponent,
-        KlesFormSelectionListComponent
+        KlesFormSelectionListComponent,
+        KlesFormButtonToogleGroupComponent
     ];
     var directives = [KlesDynamicFieldDirective, KlesComponentDirective];
     var pipes = [KlesTransformPipe, ArrayFormatPipe];
@@ -1724,6 +1768,7 @@
     exports.KlesFormButtonCheckerComponent = KlesFormButtonCheckerComponent;
     exports.KlesFormButtonComponent = KlesFormButtonComponent;
     exports.KlesFormButtonFileComponent = KlesFormButtonFileComponent;
+    exports.KlesFormButtonToogleGroupComponent = KlesFormButtonToogleGroupComponent;
     exports.KlesFormCheckboxComponent = KlesFormCheckboxComponent;
     exports.KlesFormChipComponent = KlesFormChipComponent;
     exports.KlesFormColorComponent = KlesFormColorComponent;