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/fesm2015/ngx-render-material-forms.js CHANGED
@@ -127,7 +127,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
127
127
  </p>
128
128
  ` }]
129
129
  }], ctorParameters: function () { return []; } });
130
-
130
+
131
131
  Webform.prototype.redraw = function () {
132
132
  return this.render();
133
133
  };
@@ -1838,8 +1838,20 @@ class MaterialDateComponent extends MaterialComponent {
1838
1838
  return !formattedDates.includes(momentDate(d).format('YYYY-MM-DD'));
1839
1839
  }
1840
1840
  clickOutside(event) {
1841
- if (event.target.classList.contains('mat-calendar-body-selected') && this.isPickerOpened)
1842
- 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
+ // }
1843
1855
  }
1844
1856
  improveMinMaxDate(minDate, maxDate) {
1845
1857
  if (minDate && minDate.length === 4) {
@@ -1852,63 +1864,63 @@ class MaterialDateComponent extends MaterialComponent {
1852
1864
  }
1853
1865
  }
1854
1866
  MaterialDateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialDateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
1855
- 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: `
1856
- <mat-formio-form-field [instance]="instance" [componentTemplate]="componentTemplate"></mat-formio-form-field>
1857
- <ng-template #componentTemplate let-hasLabel>
1858
- <mat-label *ngIf="hasLabel" fxFill>
1859
- <span [instance]="instance" matFormioLabel></span>
1860
- </mat-label>
1861
-
1862
- <form class="example-form">
1863
- <mat-datepicker-toggle [disabled]="isDisabled()" (click)="toggleCalendar($event)">
1864
- <mat-icon matDatepickerToggleIcon *ngIf="enableTime && !enableDate">schedule</mat-icon>
1865
- </mat-datepicker-toggle>
1866
- <mat-form-field class="example-full-width">
1867
- <input
1868
- *ngIf="enableTime && enableDate"
1869
- matInput
1870
- type="datetime-local"
1871
- [placeholder]="instance.component.placeholder"
1872
- [formControl]="displayControl"
1873
- (input)="onChangeInput()"
1874
- [readonly]="!allowManualInput"
1875
- >
1876
- <input
1877
- *ngIf="enableTime && !enableDate"
1878
- matInput
1879
- [placeholder]="instance.component.placeholder"
1880
- [formControl]="displayControl"
1881
- [matMask]="formatTime"
1882
- (input)="onChangeInput()"
1883
- [readonly]="!allowManualInput"
1884
- >
1885
- <input
1886
- *ngIf="!enableTime && enableDate"
1887
- matInput
1888
- [placeholder]="instance.component.placeholder"
1889
- [formControl]="displayControl"
1890
- (input)="onChangeInput()"
1891
- [readonly]="!allowManualInput"
1892
- >
1893
- </mat-form-field>
1894
-
1895
- <mat-formio-calendar
1896
- #calendar
1897
- [minDate]="instance.component.datePicker.minDate || ''"
1898
- [maxDate]="instance.component.datePicker.maxDate || ''"
1899
- [dateFilter]="dateFilter"
1900
- [hidden]="!isPickerOpened"
1901
- (dateSelectEvent)="onChangeDate($event)"
1902
- (timeSelectEvent)="onChangeTime($event)"
1903
- [enableDate]="enableDate"
1904
- [enableTime]="enableTime"
1905
- [hourStep]="instance.component.timePicker.hourStep"
1906
- [minuteStep]="instance.component.timePicker.minuteStep"
1907
- [instance]="instance"
1908
- ></mat-formio-calendar>
1909
- <mat-error *ngIf="instance.error">{{ instance.error.message }}</mat-error>
1910
- </form>
1911
- </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>
1912
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"] }] });
1913
1925
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialDateComponent, decorators: [{
1914
1926
  type: Component,
@@ -1917,63 +1929,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImpor
1917
1929
  host: {
1918
1930
  '(document:click)': 'clickOutside($event)',
1919
1931
  },
1920
- template: `
1921
- <mat-formio-form-field [instance]="instance" [componentTemplate]="componentTemplate"></mat-formio-form-field>
1922
- <ng-template #componentTemplate let-hasLabel>
1923
- <mat-label *ngIf="hasLabel" fxFill>
1924
- <span [instance]="instance" matFormioLabel></span>
1925
- </mat-label>
1926
-
1927
- <form class="example-form">
1928
- <mat-datepicker-toggle [disabled]="isDisabled()" (click)="toggleCalendar($event)">
1929
- <mat-icon matDatepickerToggleIcon *ngIf="enableTime && !enableDate">schedule</mat-icon>
1930
- </mat-datepicker-toggle>
1931
- <mat-form-field class="example-full-width">
1932
- <input
1933
- *ngIf="enableTime && enableDate"
1934
- matInput
1935
- type="datetime-local"
1936
- [placeholder]="instance.component.placeholder"
1937
- [formControl]="displayControl"
1938
- (input)="onChangeInput()"
1939
- [readonly]="!allowManualInput"
1940
- >
1941
- <input
1942
- *ngIf="enableTime && !enableDate"
1943
- matInput
1944
- [placeholder]="instance.component.placeholder"
1945
- [formControl]="displayControl"
1946
- [matMask]="formatTime"
1947
- (input)="onChangeInput()"
1948
- [readonly]="!allowManualInput"
1949
- >
1950
- <input
1951
- *ngIf="!enableTime && enableDate"
1952
- matInput
1953
- [placeholder]="instance.component.placeholder"
1954
- [formControl]="displayControl"
1955
- (input)="onChangeInput()"
1956
- [readonly]="!allowManualInput"
1957
- >
1958
- </mat-form-field>
1959
-
1960
- <mat-formio-calendar
1961
- #calendar
1962
- [minDate]="instance.component.datePicker.minDate || ''"
1963
- [maxDate]="instance.component.datePicker.maxDate || ''"
1964
- [dateFilter]="dateFilter"
1965
- [hidden]="!isPickerOpened"
1966
- (dateSelectEvent)="onChangeDate($event)"
1967
- (timeSelectEvent)="onChangeTime($event)"
1968
- [enableDate]="enableDate"
1969
- [enableTime]="enableTime"
1970
- [hourStep]="instance.component.timePicker.hourStep"
1971
- [minuteStep]="instance.component.timePicker.minuteStep"
1972
- [instance]="instance"
1973
- ></mat-formio-calendar>
1974
- <mat-error *ngIf="instance.error">{{ instance.error.message }}</mat-error>
1975
- </form>
1976
- </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>
1977
1989
  `
1978
1990
  }]
1979
1991
  }], propDecorators: { calendar: [{
@@ -2506,7 +2518,7 @@ class MaterialSelectComponent extends MaterialComponent {
2506
2518
  let search = this.websiteMultiFilterCtrl.value;
2507
2519
  search = search.toLowerCase();
2508
2520
  this.filteredOptions = this.selectOptions.then((options) => {
2509
- 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);
2510
2522
  this.filteredOptionsLength = filtered.length;
2511
2523
  return filtered;
2512
2524
  });
@@ -2550,101 +2562,101 @@ class MaterialSelectComponent extends MaterialComponent {
2550
2562
  }
2551
2563
  }
2552
2564
  MaterialSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
2553
- 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: `
2554
- <mat-formio-form-field [instance]="instance" [componentTemplate]="componentTemplate"></mat-formio-form-field>
2555
- <ng-template #componentTemplate let-hasLabel>
2556
- <mat-form-field fxFill>
2557
-
2558
- <mat-label *ngIf="hasLabel">
2559
- <span [instance]="instance" matFormioLabel></span>
2560
- </mat-label>
2561
-
2562
- <span *ngIf="instance.component.prefix" matPrefix>
2563
- {{ instance.component.prefix }}&nbsp;
2564
- </span>
2565
- <mat-select
2566
- [multiple]="instance.component.multiple"
2567
- [formControl]="control"
2568
- [placeholder]="instance.component.placeholder"
2569
- (selectionChange)="onChange()"
2570
- [compareWith]="compareObjects"
2571
- >
2572
-
2573
- <mat-option>
2574
- <ngx-mat-select-search placeholderLabel="Type to search" [formControl]="websiteMultiFilterCtrl"></ngx-mat-select-search>
2575
- </mat-option>
2576
-
2577
- <mat-option *ngFor="let option of filteredOptions | async" [value]="option.value">
2578
- <span [innerHTML]="option.label"></span>
2579
- </mat-option>
2580
-
2581
- <!-- <div class="mat-option">
2582
- <input class="mat-input-element" placeholder="Type to search the risk" (input)="onFilter($event.target.value)">
2583
- </div> -->
2584
- <mat-option *ngIf="!filteredOptionsLength" disabled>
2585
- <span>Nothing was found</span>
2586
- </mat-option>
2587
- <!-- <mat-option *ngFor="let option of filteredOptions | async" [value]="option.value">
2588
- <span [innerHTML]="option.label"></span>
2589
- </mat-option> -->
2590
- </mat-select>
2591
-
2592
- <span *ngIf="instance.component.suffix" matSuffix>
2593
- {{ instance.component.suffix }}
2594
- </span>
2595
- <mat-error *ngIf="instance.error">{{ instance.error.message }}</mat-error>
2596
- </mat-form-field>
2597
- </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>
2598
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" }] });
2599
2611
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: MaterialSelectComponent, decorators: [{
2600
2612
  type: Component,
2601
2613
  args: [{
2602
2614
  selector: 'mat-formio-select',
2603
- template: `
2604
- <mat-formio-form-field [instance]="instance" [componentTemplate]="componentTemplate"></mat-formio-form-field>
2605
- <ng-template #componentTemplate let-hasLabel>
2606
- <mat-form-field fxFill>
2607
-
2608
- <mat-label *ngIf="hasLabel">
2609
- <span [instance]="instance" matFormioLabel></span>
2610
- </mat-label>
2611
-
2612
- <span *ngIf="instance.component.prefix" matPrefix>
2613
- {{ instance.component.prefix }}&nbsp;
2614
- </span>
2615
- <mat-select
2616
- [multiple]="instance.component.multiple"
2617
- [formControl]="control"
2618
- [placeholder]="instance.component.placeholder"
2619
- (selectionChange)="onChange()"
2620
- [compareWith]="compareObjects"
2621
- >
2622
-
2623
- <mat-option>
2624
- <ngx-mat-select-search placeholderLabel="Type to search" [formControl]="websiteMultiFilterCtrl"></ngx-mat-select-search>
2625
- </mat-option>
2626
-
2627
- <mat-option *ngFor="let option of filteredOptions | async" [value]="option.value">
2628
- <span [innerHTML]="option.label"></span>
2629
- </mat-option>
2630
-
2631
- <!-- <div class="mat-option">
2632
- <input class="mat-input-element" placeholder="Type to search the risk" (input)="onFilter($event.target.value)">
2633
- </div> -->
2634
- <mat-option *ngIf="!filteredOptionsLength" disabled>
2635
- <span>Nothing was found</span>
2636
- </mat-option>
2637
- <!-- <mat-option *ngFor="let option of filteredOptions | async" [value]="option.value">
2638
- <span [innerHTML]="option.label"></span>
2639
- </mat-option> -->
2640
- </mat-select>
2641
-
2642
- <span *ngIf="instance.component.suffix" matSuffix>
2643
- {{ instance.component.suffix }}
2644
- </span>
2645
- <mat-error *ngIf="instance.error">{{ instance.error.message }}</mat-error>
2646
- </mat-form-field>
2647
- </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>
2648
2660
  `
2649
2661
  }]
2650
2662
  }], propDecorators: { multiSelect: [{