ngx-render-material-forms 1.0.3 → 1.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/esm2020/lib/components/Webform.mjs +1 -1
  2. package/esm2020/lib/components/date/date.component.mjs +129 -117
  3. package/esm2020/lib/components/select/select.component.mjs +92 -92
  4. package/esm2020/lib/ngx-render-material-forms.module.js +1 -1
  5. package/fesm2015/ngx-render-material-forms.js +220 -208
  6. package/fesm2015/ngx-render-material-forms.mjs.map +1 -1
  7. package/fesm2020/ngx-render-material-forms.js +219 -208
  8. package/fesm2020/ngx-render-material-forms.mjs.map +1 -1
  9. package/package.json +1 -1
package/fesm2020/ngx-render-material-forms.js CHANGED
@@ -128,7 +128,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
128
128
  ` }]
129
129
  }], ctorParameters: function () { return []; } });
130
130
 
131
-
132
131
  Webform.prototype.redraw = function () {
133
132
  return this.render();
134
133
  };
@@ -1839,8 +1838,20 @@ class MaterialDateComponent extends MaterialComponent {
1839
1838
  return !formattedDates.includes(momentDate(d).format('YYYY-MM-DD'));
1840
1839
  }
1841
1840
  clickOutside(event) {
1842
- if (event.target.classList.contains('mat-calendar-body-selected') && this.isPickerOpened)
1843
- this.toggleCalendar(event);
1841
+ if (this.isPickerOpened && (event.target.classList.value == "mat-calendar-body" || event.target.classList.value == "mat-calendar-body-cell mat-calendar-body-active" || event.target.classList.value == '' || event.target.classList.value == "mat-calendar-body-label" || event.target.classList.value == "mat-calendar-table-header-divider" || event.target.classList.value == "mat-calendar-controls" || event.target.classList.value == "mat-button-wrapper" || event.target.classList.value == "mat-calendar-header" || event.target.classList.value == "mat-calendar-arrow mat-calendar-invert" || event.target.classList.value == "mat-calendar-content cdk-focused cdk-mouse-focused" || event.target.classList.value == "mat-calendar calendar ng-star-inserted" || event.target.classList.value == "mat-focus-indicator mat-calendar-period-button mat-button mat-button-base cdk-focused cdk-mouse-focused" || event.target.classList.value == 'mat-calendar-body-cell-content mat-focus-indicator' || event.target.classList.value == "mat-focus-indicator mat-calendar-next-button mat-icon-button mat-button-base cdk-focused cdk-mouse-focused" || event.target.classList.value == "mat-focus-indicator mat-calendar-previous-button mat-icon-button mat-button-base cdk-focused cdk-mouse-focused")) {
1842
+ this.isPickerOpened = true;
1843
+ }
1844
+ else {
1845
+ if (event.target.classList.value == 'mat-calendar-body-cell-content mat-focus-indicator mat-calendar-body-selected' && this.isPickerOpened) {
1846
+ this.toggleCalendar(event);
1847
+ }
1848
+ else {
1849
+ this.isPickerOpened = false;
1850
+ }
1851
+ }
1852
+ // if (event.target.classList.contains('mat-calendar-body-selected') && this.isPickerOpened) {
1853
+ // this.toggleCalendar(event);
1854
+ // }
1844
1855
  }
1845
1856
  improveMinMaxDate(minDate, maxDate) {
1846
1857
  if (minDate && minDate.length === 4) {
@@ -1853,63 +1864,63 @@ class MaterialDateComponent extends MaterialComponent {
1853
1864
  }
1854
1865
  }
1855
1866
  MaterialDateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialDateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
1856
- MaterialDateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: MaterialDateComponent, selector: "mat-formio-date", host: { listeners: { "document:click": "clickOutside($event)" } }, viewQueries: [{ propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
1857
- <mat-formio-form-field [instance]="instance" [componentTemplate]="componentTemplate"></mat-formio-form-field>
1858
- <ng-template #componentTemplate let-hasLabel>
1859
- <mat-label *ngIf="hasLabel" fxFill>
1860
- <span [instance]="instance" matFormioLabel></span>
1861
- </mat-label>
1862
-
1863
- <form class="example-form">
1864
- <mat-datepicker-toggle [disabled]="isDisabled()" (click)="toggleCalendar($event)">
1865
- <mat-icon matDatepickerToggleIcon *ngIf="enableTime && !enableDate">schedule</mat-icon>
1866
- </mat-datepicker-toggle>
1867
- <mat-form-field class="example-full-width">
1868
- <input
1869
- *ngIf="enableTime && enableDate"
1870
- matInput
1871
- type="datetime-local"
1872
- [placeholder]="instance.component.placeholder"
1873
- [formControl]="displayControl"
1874
- (input)="onChangeInput()"
1875
- [readonly]="!allowManualInput"
1876
- >
1877
- <input
1878
- *ngIf="enableTime && !enableDate"
1879
- matInput
1880
- [placeholder]="instance.component.placeholder"
1881
- [formControl]="displayControl"
1882
- [matMask]="formatTime"
1883
- (input)="onChangeInput()"
1884
- [readonly]="!allowManualInput"
1885
- >
1886
- <input
1887
- *ngIf="!enableTime && enableDate"
1888
- matInput
1889
- [placeholder]="instance.component.placeholder"
1890
- [formControl]="displayControl"
1891
- (input)="onChangeInput()"
1892
- [readonly]="!allowManualInput"
1893
- >
1894
- </mat-form-field>
1895
-
1896
- <mat-formio-calendar
1897
- #calendar
1898
- [minDate]="instance.component.datePicker.minDate || ''"
1899
- [maxDate]="instance.component.datePicker.maxDate || ''"
1900
- [dateFilter]="dateFilter"
1901
- [hidden]="!isPickerOpened"
1902
- (dateSelectEvent)="onChangeDate($event)"
1903
- (timeSelectEvent)="onChangeTime($event)"
1904
- [enableDate]="enableDate"
1905
- [enableTime]="enableTime"
1906
- [hourStep]="instance.component.timePicker.hourStep"
1907
- [minuteStep]="instance.component.timePicker.minuteStep"
1908
- [instance]="instance"
1909
- ></mat-formio-calendar>
1910
- <mat-error *ngIf="instance.error">{{ instance.error.message }}</mat-error>
1911
- </form>
1912
- </ng-template>
1867
+ MaterialDateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: MaterialDateComponent, selector: "mat-formio-date", host: { listeners: { "document:click": "clickOutside($event)" } }, viewQueries: [{ propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
1868
+ <mat-formio-form-field [instance]="instance" [componentTemplate]="componentTemplate"></mat-formio-form-field>
1869
+ <ng-template #componentTemplate let-hasLabel>
1870
+ <mat-label *ngIf="hasLabel" fxFill>
1871
+ <span [instance]="instance" matFormioLabel></span>
1872
+ </mat-label>
1873
+
1874
+ <form class="example-form">
1875
+ <mat-datepicker-toggle [disabled]="isDisabled()" (click)="toggleCalendar($event)">
1876
+ <mat-icon matDatepickerToggleIcon *ngIf="enableTime && !enableDate">schedule</mat-icon>
1877
+ </mat-datepicker-toggle>
1878
+ <mat-form-field class="example-full-width">
1879
+ <input
1880
+ *ngIf="enableTime && enableDate"
1881
+ matInput
1882
+ type="datetime-local"
1883
+ [placeholder]="instance.component.placeholder"
1884
+ [formControl]="displayControl"
1885
+ (input)="onChangeInput()"
1886
+ [readonly]="!allowManualInput"
1887
+ >
1888
+ <input
1889
+ *ngIf="enableTime && !enableDate"
1890
+ matInput
1891
+ [placeholder]="instance.component.placeholder"
1892
+ [formControl]="displayControl"
1893
+ [matMask]="formatTime"
1894
+ (input)="onChangeInput()"
1895
+ [readonly]="!allowManualInput"
1896
+ >
1897
+ <input
1898
+ *ngIf="!enableTime && enableDate"
1899
+ matInput
1900
+ [placeholder]="instance.component.placeholder"
1901
+ [formControl]="displayControl"
1902
+ (input)="onChangeInput()"
1903
+ [readonly]="!allowManualInput"
1904
+ >
1905
+ </mat-form-field>
1906
+
1907
+ <mat-formio-calendar
1908
+ #calendar
1909
+ [minDate]="instance.component.datePicker.minDate || ''"
1910
+ [maxDate]="instance.component.datePicker.maxDate || ''"
1911
+ [dateFilter]="dateFilter"
1912
+ [hidden]="!isPickerOpened"
1913
+ (dateSelectEvent)="onChangeDate($event)"
1914
+ (timeSelectEvent)="onChangeTime($event)"
1915
+ [enableDate]="enableDate"
1916
+ [enableTime]="enableTime"
1917
+ [hourStep]="instance.component.timePicker.hourStep"
1918
+ [minuteStep]="instance.component.timePicker.minuteStep"
1919
+ [instance]="instance"
1920
+ ></mat-formio-calendar>
1921
+ <mat-error *ngIf="instance.error">{{ instance.error.message }}</mat-error>
1922
+ </form>
1923
+ </ng-template>
1913
1924
  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i5$2.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "component", type: MaterialCalendarComponent, selector: "mat-formio-calendar", inputs: ["enableDate", "enableTime", "minDate", "maxDate", "dateFilter", "hourStep", "minuteStep"], outputs: ["timeSelectEvent", "dateSelectEvent"] }, { kind: "component", type: FormioFormFieldComponent, selector: "mat-formio-form-field", inputs: ["labelTemplate", "renderTopLabel", "showDescription", "renderElementOnly", "instance", "componentTemplate"] }, { kind: "component", type: LabelComponent, selector: "span[matFormioLabel]", inputs: ["instance"] }, { kind: "directive", type: MaskDirective, selector: "input[matMask]", inputs: ["matMask", "value"] }] });
1914
1925
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialDateComponent, decorators: [{
1915
1926
  type: Component,
@@ -1918,63 +1929,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
1918
1929
  host: {
1919
1930
  '(document:click)': 'clickOutside($event)',
1920
1931
  },
1921
- template: `
1922
- <mat-formio-form-field [instance]="instance" [componentTemplate]="componentTemplate"></mat-formio-form-field>
1923
- <ng-template #componentTemplate let-hasLabel>
1924
- <mat-label *ngIf="hasLabel" fxFill>
1925
- <span [instance]="instance" matFormioLabel></span>
1926
- </mat-label>
1927
-
1928
- <form class="example-form">
1929
- <mat-datepicker-toggle [disabled]="isDisabled()" (click)="toggleCalendar($event)">
1930
- <mat-icon matDatepickerToggleIcon *ngIf="enableTime && !enableDate">schedule</mat-icon>
1931
- </mat-datepicker-toggle>
1932
- <mat-form-field class="example-full-width">
1933
- <input
1934
- *ngIf="enableTime && enableDate"
1935
- matInput
1936
- type="datetime-local"
1937
- [placeholder]="instance.component.placeholder"
1938
- [formControl]="displayControl"
1939
- (input)="onChangeInput()"
1940
- [readonly]="!allowManualInput"
1941
- >
1942
- <input
1943
- *ngIf="enableTime && !enableDate"
1944
- matInput
1945
- [placeholder]="instance.component.placeholder"
1946
- [formControl]="displayControl"
1947
- [matMask]="formatTime"
1948
- (input)="onChangeInput()"
1949
- [readonly]="!allowManualInput"
1950
- >
1951
- <input
1952
- *ngIf="!enableTime && enableDate"
1953
- matInput
1954
- [placeholder]="instance.component.placeholder"
1955
- [formControl]="displayControl"
1956
- (input)="onChangeInput()"
1957
- [readonly]="!allowManualInput"
1958
- >
1959
- </mat-form-field>
1960
-
1961
- <mat-formio-calendar
1962
- #calendar
1963
- [minDate]="instance.component.datePicker.minDate || ''"
1964
- [maxDate]="instance.component.datePicker.maxDate || ''"
1965
- [dateFilter]="dateFilter"
1966
- [hidden]="!isPickerOpened"
1967
- (dateSelectEvent)="onChangeDate($event)"
1968
- (timeSelectEvent)="onChangeTime($event)"
1969
- [enableDate]="enableDate"
1970
- [enableTime]="enableTime"
1971
- [hourStep]="instance.component.timePicker.hourStep"
1972
- [minuteStep]="instance.component.timePicker.minuteStep"
1973
- [instance]="instance"
1974
- ></mat-formio-calendar>
1975
- <mat-error *ngIf="instance.error">{{ instance.error.message }}</mat-error>
1976
- </form>
1977
- </ng-template>
1932
+ template: `
1933
+ <mat-formio-form-field [instance]="instance" [componentTemplate]="componentTemplate"></mat-formio-form-field>
1934
+ <ng-template #componentTemplate let-hasLabel>
1935
+ <mat-label *ngIf="hasLabel" fxFill>
1936
+ <span [instance]="instance" matFormioLabel></span>
1937
+ </mat-label>
1938
+
1939
+ <form class="example-form">
1940
+ <mat-datepicker-toggle [disabled]="isDisabled()" (click)="toggleCalendar($event)">
1941
+ <mat-icon matDatepickerToggleIcon *ngIf="enableTime && !enableDate">schedule</mat-icon>
1942
+ </mat-datepicker-toggle>
1943
+ <mat-form-field class="example-full-width">
1944
+ <input
1945
+ *ngIf="enableTime && enableDate"
1946
+ matInput
1947
+ type="datetime-local"
1948
+ [placeholder]="instance.component.placeholder"
1949
+ [formControl]="displayControl"
1950
+ (input)="onChangeInput()"
1951
+ [readonly]="!allowManualInput"
1952
+ >
1953
+ <input
1954
+ *ngIf="enableTime && !enableDate"
1955
+ matInput
1956
+ [placeholder]="instance.component.placeholder"
1957
+ [formControl]="displayControl"
1958
+ [matMask]="formatTime"
1959
+ (input)="onChangeInput()"
1960
+ [readonly]="!allowManualInput"
1961
+ >
1962
+ <input
1963
+ *ngIf="!enableTime && enableDate"
1964
+ matInput
1965
+ [placeholder]="instance.component.placeholder"
1966
+ [formControl]="displayControl"
1967
+ (input)="onChangeInput()"
1968
+ [readonly]="!allowManualInput"
1969
+ >
1970
+ </mat-form-field>
1971
+
1972
+ <mat-formio-calendar
1973
+ #calendar
1974
+ [minDate]="instance.component.datePicker.minDate || ''"
1975
+ [maxDate]="instance.component.datePicker.maxDate || ''"
1976
+ [dateFilter]="dateFilter"
1977
+ [hidden]="!isPickerOpened"
1978
+ (dateSelectEvent)="onChangeDate($event)"
1979
+ (timeSelectEvent)="onChangeTime($event)"
1980
+ [enableDate]="enableDate"
1981
+ [enableTime]="enableTime"
1982
+ [hourStep]="instance.component.timePicker.hourStep"
1983
+ [minuteStep]="instance.component.timePicker.minuteStep"
1984
+ [instance]="instance"
1985
+ ></mat-formio-calendar>
1986
+ <mat-error *ngIf="instance.error">{{ instance.error.message }}</mat-error>
1987
+ </form>
1988
+ </ng-template>
1978
1989
  `
1979
1990
  }]
1980
1991
  }], propDecorators: { calendar: [{
@@ -2507,7 +2518,7 @@ class MaterialSelectComponent extends MaterialComponent {
2507
2518
  let search = this.websiteMultiFilterCtrl.value;
2508
2519
  search = search.toLowerCase();
2509
2520
  this.filteredOptions = this.selectOptions.then((options) => {
2510
- const filtered = options.filter((option) => option.label.toLowerCase().indexOf(search) !== -1);
2521
+ const filtered = options.filter((option) => option.label.replace(/<\/?span[^>]*>/g, "").toLowerCase().indexOf(search) !== -1);
2511
2522
  this.filteredOptionsLength = filtered.length;
2512
2523
  return filtered;
2513
2524
  });
@@ -2551,101 +2562,101 @@ class MaterialSelectComponent extends MaterialComponent {
2551
2562
  }
2552
2563
  }
2553
2564
  MaterialSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
2554
- MaterialSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: MaterialSelectComponent, selector: "mat-formio-select", viewQueries: [{ propertyName: "multiSelect", first: true, predicate: ["multiSelect"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
2555
- <mat-formio-form-field [instance]="instance" [componentTemplate]="componentTemplate"></mat-formio-form-field>
2556
- <ng-template #componentTemplate let-hasLabel>
2557
- <mat-form-field fxFill>
2558
-
2559
- <mat-label *ngIf="hasLabel">
2560
- <span [instance]="instance" matFormioLabel></span>
2561
- </mat-label>
2562
-
2563
- <span *ngIf="instance.component.prefix" matPrefix>
2564
- {{ instance.component.prefix }}&nbsp;
2565
- </span>
2566
- <mat-select
2567
- [multiple]="instance.component.multiple"
2568
- [formControl]="control"
2569
- [placeholder]="instance.component.placeholder"
2570
- (selectionChange)="onChange()"
2571
- [compareWith]="compareObjects"
2572
- >
2573
-
2574
- <mat-option>
2575
- <ngx-mat-select-search placeholderLabel="Type to search" [formControl]="websiteMultiFilterCtrl"></ngx-mat-select-search>
2576
- </mat-option>
2577
-
2578
- <mat-option *ngFor="let option of filteredOptions | async" [value]="option.value">
2579
- <span [innerHTML]="option.label"></span>
2580
- </mat-option>
2581
-
2582
- <!-- <div class="mat-option">
2583
- <input class="mat-input-element" placeholder="Type to search the risk" (input)="onFilter($event.target.value)">
2584
- </div> -->
2585
- <mat-option *ngIf="!filteredOptionsLength" disabled>
2586
- <span>Nothing was found</span>
2587
- </mat-option>
2588
- <!-- <mat-option *ngFor="let option of filteredOptions | async" [value]="option.value">
2589
- <span [innerHTML]="option.label"></span>
2590
- </mat-option> -->
2591
- </mat-select>
2592
-
2593
- <span *ngIf="instance.component.suffix" matSuffix>
2594
- {{ instance.component.suffix }}
2595
- </span>
2596
- <mat-error *ngIf="instance.error">{{ instance.error.message }}</mat-error>
2597
- </mat-form-field>
2598
- </ng-template>
2565
+ MaterialSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: MaterialSelectComponent, selector: "mat-formio-select", viewQueries: [{ propertyName: "multiSelect", first: true, predicate: ["multiSelect"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
2566
+ <mat-formio-form-field [instance]="instance" [componentTemplate]="componentTemplate"></mat-formio-form-field>
2567
+ <ng-template #componentTemplate let-hasLabel>
2568
+ <mat-form-field fxFill>
2569
+
2570
+ <mat-label *ngIf="hasLabel">
2571
+ <span [instance]="instance" matFormioLabel></span>
2572
+ </mat-label>
2573
+
2574
+ <span *ngIf="instance.component.prefix" matPrefix>
2575
+ {{ instance.component.prefix }}&nbsp;
2576
+ </span>
2577
+ <mat-select
2578
+ [multiple]="instance.component.multiple"
2579
+ [formControl]="control"
2580
+ [placeholder]="instance.component.placeholder"
2581
+ (selectionChange)="onChange()"
2582
+ [compareWith]="compareObjects"
2583
+ >
2584
+
2585
+ <mat-option>
2586
+ <ngx-mat-select-search placeholderLabel="Type to search" [formControl]="websiteMultiFilterCtrl"></ngx-mat-select-search>
2587
+ </mat-option>
2588
+
2589
+ <mat-option *ngFor="let option of filteredOptions | async" [value]="option.value">
2590
+ <span [innerHTML]="option.label"></span>
2591
+ </mat-option>
2592
+
2593
+ <!-- <div class="mat-option">
2594
+ <input class="mat-input-element" placeholder="Type to search the risk" (input)="onFilter($event.target.value)">
2595
+ </div> -->
2596
+ <mat-option *ngIf="!filteredOptionsLength" disabled>
2597
+ <span>Nothing was found</span>
2598
+ </mat-option>
2599
+ <!-- <mat-option *ngFor="let option of filteredOptions | async" [value]="option.value">
2600
+ <span [innerHTML]="option.label"></span>
2601
+ </mat-option> -->
2602
+ </mat-select>
2603
+
2604
+ <span *ngIf="instance.component.suffix" matSuffix>
2605
+ {{ instance.component.suffix }}
2606
+ </span>
2607
+ <mat-error *ngIf="instance.error">{{ instance.error.message }}</mat-error>
2608
+ </mat-form-field>
2609
+ </ng-template>
2599
2610
  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix]" }, { kind: "component", type: i4$4.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i5$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i5.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "component", type: i7.MatSelectSearchComponent, selector: "ngx-mat-select-search", inputs: ["placeholderLabel", "type", "closeIcon", "closeSvgIcon", "noEntriesFoundLabel", "indexAndLengthScreenReaderText", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toogleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti"], outputs: ["toggleAll"] }, { kind: "component", type: FormioFormFieldComponent, selector: "mat-formio-form-field", inputs: ["labelTemplate", "renderTopLabel", "showDescription", "renderElementOnly", "instance", "componentTemplate"] }, { kind: "component", type: LabelComponent, selector: "span[matFormioLabel]", inputs: ["instance"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
2600
2611
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialSelectComponent, decorators: [{
2601
2612
  type: Component,
2602
2613
  args: [{
2603
2614
  selector: 'mat-formio-select',
2604
- template: `
2605
- <mat-formio-form-field [instance]="instance" [componentTemplate]="componentTemplate"></mat-formio-form-field>
2606
- <ng-template #componentTemplate let-hasLabel>
2607
- <mat-form-field fxFill>
2608
-
2609
- <mat-label *ngIf="hasLabel">
2610
- <span [instance]="instance" matFormioLabel></span>
2611
- </mat-label>
2612
-
2613
- <span *ngIf="instance.component.prefix" matPrefix>
2614
- {{ instance.component.prefix }}&nbsp;
2615
- </span>
2616
- <mat-select
2617
- [multiple]="instance.component.multiple"
2618
- [formControl]="control"
2619
- [placeholder]="instance.component.placeholder"
2620
- (selectionChange)="onChange()"
2621
- [compareWith]="compareObjects"
2622
- >
2623
-
2624
- <mat-option>
2625
- <ngx-mat-select-search placeholderLabel="Type to search" [formControl]="websiteMultiFilterCtrl"></ngx-mat-select-search>
2626
- </mat-option>
2627
-
2628
- <mat-option *ngFor="let option of filteredOptions | async" [value]="option.value">
2629
- <span [innerHTML]="option.label"></span>
2630
- </mat-option>
2631
-
2632
- <!-- <div class="mat-option">
2633
- <input class="mat-input-element" placeholder="Type to search the risk" (input)="onFilter($event.target.value)">
2634
- </div> -->
2635
- <mat-option *ngIf="!filteredOptionsLength" disabled>
2636
- <span>Nothing was found</span>
2637
- </mat-option>
2638
- <!-- <mat-option *ngFor="let option of filteredOptions | async" [value]="option.value">
2639
- <span [innerHTML]="option.label"></span>
2640
- </mat-option> -->
2641
- </mat-select>
2642
-
2643
- <span *ngIf="instance.component.suffix" matSuffix>
2644
- {{ instance.component.suffix }}
2645
- </span>
2646
- <mat-error *ngIf="instance.error">{{ instance.error.message }}</mat-error>
2647
- </mat-form-field>
2648
- </ng-template>
2615
+ template: `
2616
+ <mat-formio-form-field [instance]="instance" [componentTemplate]="componentTemplate"></mat-formio-form-field>
2617
+ <ng-template #componentTemplate let-hasLabel>
2618
+ <mat-form-field fxFill>
2619
+
2620
+ <mat-label *ngIf="hasLabel">
2621
+ <span [instance]="instance" matFormioLabel></span>
2622
+ </mat-label>
2623
+
2624
+ <span *ngIf="instance.component.prefix" matPrefix>
2625
+ {{ instance.component.prefix }}&nbsp;
2626
+ </span>
2627
+ <mat-select
2628
+ [multiple]="instance.component.multiple"
2629
+ [formControl]="control"
2630
+ [placeholder]="instance.component.placeholder"
2631
+ (selectionChange)="onChange()"
2632
+ [compareWith]="compareObjects"
2633
+ >
2634
+
2635
+ <mat-option>
2636
+ <ngx-mat-select-search placeholderLabel="Type to search" [formControl]="websiteMultiFilterCtrl"></ngx-mat-select-search>
2637
+ </mat-option>
2638
+
2639
+ <mat-option *ngFor="let option of filteredOptions | async" [value]="option.value">
2640
+ <span [innerHTML]="option.label"></span>
2641
+ </mat-option>
2642
+
2643
+ <!-- <div class="mat-option">
2644
+ <input class="mat-input-element" placeholder="Type to search the risk" (input)="onFilter($event.target.value)">
2645
+ </div> -->
2646
+ <mat-option *ngIf="!filteredOptionsLength" disabled>
2647
+ <span>Nothing was found</span>
2648
+ </mat-option>
2649
+ <!-- <mat-option *ngFor="let option of filteredOptions | async" [value]="option.value">
2650
+ <span [innerHTML]="option.label"></span>
2651
+ </mat-option> -->
2652
+ </mat-select>
2653
+
2654
+ <span *ngIf="instance.component.suffix" matSuffix>
2655
+ {{ instance.component.suffix }}
2656
+ </span>
2657
+ <mat-error *ngIf="instance.error">{{ instance.error.message }}</mat-error>
2658
+ </mat-form-field>
2659
+ </ng-template>
2649
2660
  `
2650
2661
  }]
2651
2662
  }], propDecorators: { multiSelect: [{