ngx-techlify-core 18.45.0 → 18.46.0

package/esm2022/lib/restrictors/restrictors-form/restrictors-form.component.mjs

@@ -90,10 +90,10 @@ export class RestrictorsFormComponent {
     redirectBack() {
         this.location.back();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RestrictorsFormComponent, deps: [{ token: i1.FormBuilder }, { token: i2.Location }, { token: i3.RequestHelperService }, { token: i4.AlertService }, { token: i5.RestrictorService }, { token: i2.DatePipe }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: RestrictorsFormComponent, selector: "techlify-restrictors-form", inputs: { restrictor: "restrictor" }, ngImport: i0, template: "<div fxLayout fxLayoutAlign=\"center\" class=\"mb-0\">\n  <h3>Restrictor Form</h3>\n</div>\n\n<form [formGroup]=\"form\"\n      fxLayout=\"row wrap\" fxLayoutAlign=\"start\" fxLayoutGap=\"10px\"\n      (submit)=\"save()\">\n\n  <techlify-restrictor-type-selector formControlName=\"type_id\"\n                                     fxFlex=\"calc(100% - 10px)\"></techlify-restrictor-type-selector>\n\n  <div fxLayout fxLayoutGap=\"10px\" fxFlex=\"calc(100% - 10px)\"\n       class=\"mt-2\"\n       *ngIf=\"form.value?.type_id === 1\">\n    <mat-form-field fxFlex=\"calc(50% - 10px)\">\n      <mat-label>Start Date</mat-label>\n      <input formControlName=\"start_date\" matInput [matDatepicker]=\"startDatePicker\" (focus)=\"startDatePicker.open()\">\n      <mat-datepicker #startDatePicker></mat-datepicker>\n      <mat-hint>From what time should we allow user access.</mat-hint>\n    </mat-form-field>\n\n    <mat-form-field fxFlex=\"calc(50% - 10px)\">\n      <mat-label>Start Time</mat-label>\n      <input formControlName=\"start_time\" matInput type=\"time\">\n    </mat-form-field>\n  </div>\n\n  <div fxLayout fxLayoutGap=\"10px\" fxFlex=\"calc(100% - 10px)\"\n       class=\"mt-2\"\n       *ngIf=\"form.value?.type_id === 1\">\n    <mat-form-field fxFlex=\"calc(50% - 10px)\">\n      <mat-label>End Date</mat-label>\n      <input formControlName=\"end_date\" matInput [matDatepicker]=\"endDatePicker\" (focus)=\"endDatePicker.open()\">\n      <mat-datepicker #endDatePicker></mat-datepicker>\n      <mat-hint>Up to what time should we allow user access.</mat-hint>\n    </mat-form-field>\n\n    <mat-form-field fxFlex=\"calc(50% - 10px)\">\n      <mat-label>End Time</mat-label>\n      <input formControlName=\"end_time\" matInput type=\"time\">\n    </mat-form-field>\n  </div>\n\n  <techlify-ip-range-selector fxFlex=\"calc(100% - 10px)\"\n                              label=\"IP Address Range (IP & Subnet Field)\"\n                              formControlName=\"ip_range\"\n                              *ngIf=\"form.value?.type_id === 2\"\n                              class=\"mt-2 mb-3\"></techlify-ip-range-selector>\n\n  <div fxLayout fxLayoutGap=\"10px\" fxFlex=\"calc(100% - 10px)\"\n       class=\"mt-2\">\n    <techlify-restrictor-level-selector fxFlex=\"calc(50% - 10px)\"\n                                      formControlName=\"level_id\"></techlify-restrictor-level-selector>\n\n    <mat-form-field fxFlex=\"calc(50% - 10px)\" *ngIf=\"form.value?.level_id\">\n      <mat-label>Object</mat-label>\n      <mat-select *ngIf=\"form.value?.level_id === 1\" formControlName=\"restricted_object_id\">\n        <mat-option [value]=\"2\">Client Admin</mat-option>\n        <mat-option [value]=\"3\">Client User</mat-option>\n      </mat-select>\n      <app-searchable-selector *ngIf=\"form.value?.level_id === 2\"\n                               apiUrl=\"api/roles\"\n                               titleField=\"label\"\n                               formControlName=\"restricted_object_id\"></app-searchable-selector>\n      <app-searchable-selector *ngIf=\"form.value?.level_id === 3\"\n                               apiUrl=\"api/users\"\n                               titleField=\"name\"\n                               formControlName=\"restricted_object_id\"></app-searchable-selector>\n    </mat-form-field>\n  </div>\n\n  <mat-form-field fxFlex=\"calc(100% - 10px)\" class=\"mt-2\">\n    <mat-label>Notes</mat-label>\n    <textarea matInput formControlName=\"notes\"></textarea>\n  </mat-form-field>\n\n  <div fxFlex=\"100%\" fxLayout fxLayoutAlign=\"end\">\n    <button [disabled]=\"isSaving\" type=\"submit\" mat-raised-button color=\"primary\">Save</button>\n    <button [disabled]=\"isSaving\" (click)=\"redirectBack()\" type=\"button\" mat-flat-button>Cancel</button>\n  </div>\n\n</form>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i7.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i7.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i7.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i7.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: i8.RestrictorTypeSelectorComponent, selector: "techlify-restrictor-type-selector", inputs: ["label", "multiple", "showLabel"] }, { kind: "directive", type: i9.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: i10.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i10.MatLabel, selector: "mat-label" }, { kind: "directive", type: i10.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i11.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i11.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i13.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i14.IpRangeSelectorComponent, selector: "techlify-ip-range-selector", inputs: ["label"] }, { kind: "component", type: i15.RestrictorLevelSelectorComponent, selector: "techlify-restrictor-level-selector", inputs: ["label", "multiple", "showLabel"] }, { kind: "component", type: i16.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RestrictorsFormComponent, deps: [{ token: i1.FormBuilder }, { token: i2.Location }, { token: i3.RequestHelperService }, { token: i4.AlertService }, { token: i5.RestrictorService }, { token: i2.DatePipe }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: RestrictorsFormComponent, selector: "techlify-restrictors-form", inputs: { restrictor: "restrictor" }, ngImport: i0, template: "<div fxLayout fxLayoutAlign=\"center\" class=\"mb-0\">\n  <h3>Restrictor Form</h3>\n</div>\n\n<form [formGroup]=\"form\"\n      fxLayout=\"row wrap\" fxLayoutAlign=\"start\" fxLayoutGap=\"10px\"\n      (submit)=\"save()\">\n\n  <techlify-restrictor-type-selector formControlName=\"type_id\"\n                                     fxFlex=\"calc(100% - 10px)\"></techlify-restrictor-type-selector>\n\n  <div fxLayout fxLayoutGap=\"10px\" fxFlex=\"calc(100% - 10px)\"\n       class=\"mt-2\"\n       *ngIf=\"form.value?.type_id === 1\">\n    <mat-form-field fxFlex=\"calc(50% - 10px)\">\n      <mat-label>Start Date</mat-label>\n      <input formControlName=\"start_date\" matInput [matDatepicker]=\"startDatePicker\" (focus)=\"startDatePicker.open()\">\n      <mat-datepicker #startDatePicker></mat-datepicker>\n      <mat-hint>From what time should we allow user access.</mat-hint>\n    </mat-form-field>\n\n    <mat-form-field fxFlex=\"calc(50% - 10px)\">\n      <mat-label>Start Time</mat-label>\n      <input formControlName=\"start_time\" matInput type=\"time\">\n    </mat-form-field>\n  </div>\n\n  <div fxLayout fxLayoutGap=\"10px\" fxFlex=\"calc(100% - 10px)\"\n       class=\"mt-2\"\n       *ngIf=\"form.value?.type_id === 1\">\n    <mat-form-field fxFlex=\"calc(50% - 10px)\">\n      <mat-label>End Date</mat-label>\n      <input formControlName=\"end_date\" matInput [matDatepicker]=\"endDatePicker\" (focus)=\"endDatePicker.open()\">\n      <mat-datepicker #endDatePicker></mat-datepicker>\n      <mat-hint>Up to what time should we allow user access.</mat-hint>\n    </mat-form-field>\n\n    <mat-form-field fxFlex=\"calc(50% - 10px)\">\n      <mat-label>End Time</mat-label>\n      <input formControlName=\"end_time\" matInput type=\"time\">\n    </mat-form-field>\n  </div>\n\n  <techlify-ip-range-selector fxFlex=\"calc(100% - 10px)\"\n                              label=\"IP Address Range (IP & Subnet Field)\"\n                              formControlName=\"ip_range\"\n                              *ngIf=\"form.value?.type_id === 2\"\n                              class=\"mt-2 mb-3\"></techlify-ip-range-selector>\n\n  <div fxLayout fxLayoutGap=\"10px\" fxFlex=\"calc(100% - 10px)\"\n       class=\"mt-2\">\n    <techlify-restrictor-level-selector fxFlex=\"calc(50% - 10px)\"\n                                      formControlName=\"level_id\"></techlify-restrictor-level-selector>\n\n    <mat-form-field fxFlex=\"calc(50% - 10px)\" *ngIf=\"form.value?.level_id\">\n      <mat-label>Object</mat-label>\n      <mat-select *ngIf=\"form.value?.level_id === 1\" formControlName=\"restricted_object_id\">\n        <mat-option [value]=\"2\">Client Admin</mat-option>\n        <mat-option [value]=\"3\">Client User</mat-option>\n      </mat-select>\n      <app-searchable-selector *ngIf=\"form.value?.level_id === 2\"\n                               apiUrl=\"api/roles\"\n                               titleField=\"label\"\n                               formControlName=\"restricted_object_id\"></app-searchable-selector>\n      <app-searchable-selector *ngIf=\"form.value?.level_id === 3\"\n                               apiUrl=\"api/users\"\n                               titleField=\"name\"\n                               formControlName=\"restricted_object_id\"></app-searchable-selector>\n    </mat-form-field>\n  </div>\n\n  <mat-form-field fxFlex=\"calc(100% - 10px)\" class=\"mt-2\">\n    <mat-label>Notes</mat-label>\n    <textarea matInput formControlName=\"notes\"></textarea>\n  </mat-form-field>\n\n  <div fxFlex=\"100%\" fxLayout fxLayoutAlign=\"end\">\n    <button [disabled]=\"isSaving\" type=\"submit\" mat-raised-button color=\"primary\">Save</button>\n    <button [disabled]=\"isSaving\" (click)=\"redirectBack()\" type=\"button\" mat-flat-button>Cancel</button>\n  </div>\n\n</form>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i7.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i7.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i7.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i7.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: i8.RestrictorTypeSelectorComponent, selector: "techlify-restrictor-type-selector", inputs: ["label", "multiple", "showLabel"] }, { kind: "directive", type: i9.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: i10.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i10.MatLabel, selector: "mat-label" }, { kind: "directive", type: i10.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i11.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i11.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i12.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i13.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i14.IpRangeSelectorComponent, selector: "techlify-ip-range-selector", inputs: ["label"] }, { kind: "component", type: i15.RestrictorLevelSelectorComponent, selector: "techlify-restrictor-level-selector", inputs: ["label", "multiple", "showLabel"] }, { kind: "component", type: i16.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RestrictorsFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RestrictorsFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'techlify-restrictors-form', template: "<div fxLayout fxLayoutAlign=\"center\" class=\"mb-0\">\n  <h3>Restrictor Form</h3>\n</div>\n\n<form [formGroup]=\"form\"\n      fxLayout=\"row wrap\" fxLayoutAlign=\"start\" fxLayoutGap=\"10px\"\n      (submit)=\"save()\">\n\n  <techlify-restrictor-type-selector formControlName=\"type_id\"\n                                     fxFlex=\"calc(100% - 10px)\"></techlify-restrictor-type-selector>\n\n  <div fxLayout fxLayoutGap=\"10px\" fxFlex=\"calc(100% - 10px)\"\n       class=\"mt-2\"\n       *ngIf=\"form.value?.type_id === 1\">\n    <mat-form-field fxFlex=\"calc(50% - 10px)\">\n      <mat-label>Start Date</mat-label>\n      <input formControlName=\"start_date\" matInput [matDatepicker]=\"startDatePicker\" (focus)=\"startDatePicker.open()\">\n      <mat-datepicker #startDatePicker></mat-datepicker>\n      <mat-hint>From what time should we allow user access.</mat-hint>\n    </mat-form-field>\n\n    <mat-form-field fxFlex=\"calc(50% - 10px)\">\n      <mat-label>Start Time</mat-label>\n      <input formControlName=\"start_time\" matInput type=\"time\">\n    </mat-form-field>\n  </div>\n\n  <div fxLayout fxLayoutGap=\"10px\" fxFlex=\"calc(100% - 10px)\"\n       class=\"mt-2\"\n       *ngIf=\"form.value?.type_id === 1\">\n    <mat-form-field fxFlex=\"calc(50% - 10px)\">\n      <mat-label>End Date</mat-label>\n      <input formControlName=\"end_date\" matInput [matDatepicker]=\"endDatePicker\" (focus)=\"endDatePicker.open()\">\n      <mat-datepicker #endDatePicker></mat-datepicker>\n      <mat-hint>Up to what time should we allow user access.</mat-hint>\n    </mat-form-field>\n\n    <mat-form-field fxFlex=\"calc(50% - 10px)\">\n      <mat-label>End Time</mat-label>\n      <input formControlName=\"end_time\" matInput type=\"time\">\n    </mat-form-field>\n  </div>\n\n  <techlify-ip-range-selector fxFlex=\"calc(100% - 10px)\"\n                              label=\"IP Address Range (IP & Subnet Field)\"\n                              formControlName=\"ip_range\"\n                              *ngIf=\"form.value?.type_id === 2\"\n                              class=\"mt-2 mb-3\"></techlify-ip-range-selector>\n\n  <div fxLayout fxLayoutGap=\"10px\" fxFlex=\"calc(100% - 10px)\"\n       class=\"mt-2\">\n    <techlify-restrictor-level-selector fxFlex=\"calc(50% - 10px)\"\n                                      formControlName=\"level_id\"></techlify-restrictor-level-selector>\n\n    <mat-form-field fxFlex=\"calc(50% - 10px)\" *ngIf=\"form.value?.level_id\">\n      <mat-label>Object</mat-label>\n      <mat-select *ngIf=\"form.value?.level_id === 1\" formControlName=\"restricted_object_id\">\n        <mat-option [value]=\"2\">Client Admin</mat-option>\n        <mat-option [value]=\"3\">Client User</mat-option>\n      </mat-select>\n      <app-searchable-selector *ngIf=\"form.value?.level_id === 2\"\n                               apiUrl=\"api/roles\"\n                               titleField=\"label\"\n                               formControlName=\"restricted_object_id\"></app-searchable-selector>\n      <app-searchable-selector *ngIf=\"form.value?.level_id === 3\"\n                               apiUrl=\"api/users\"\n                               titleField=\"name\"\n                               formControlName=\"restricted_object_id\"></app-searchable-selector>\n    </mat-form-field>\n  </div>\n\n  <mat-form-field fxFlex=\"calc(100% - 10px)\" class=\"mt-2\">\n    <mat-label>Notes</mat-label>\n    <textarea matInput formControlName=\"notes\"></textarea>\n  </mat-form-field>\n\n  <div fxFlex=\"100%\" fxLayout fxLayoutAlign=\"end\">\n    <button [disabled]=\"isSaving\" type=\"submit\" mat-raised-button color=\"primary\">Save</button>\n    <button [disabled]=\"isSaving\" (click)=\"redirectBack()\" type=\"button\" mat-flat-button>Cancel</button>\n  </div>\n\n</form>\n" }]
         }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: i2.Location }, { type: i3.RequestHelperService }, { type: i4.AlertService }, { type: i5.RestrictorService }, { type: i2.DatePipe }], propDecorators: { restrictor: [{

package/esm2022/lib/restrictors/restrictors-form-page/restrictors-form-page.component.mjs

@@ -34,10 +34,10 @@ export class RestrictorsFormPageComponent {
             error: () => this.isWorking = false
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RestrictorsFormPageComponent, deps: [{ token: i1.ActivatedRoute }, { token: i2.RestrictorService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: RestrictorsFormPageComponent, selector: "lib-restrictors-form-page", ngImport: i0, template: "<div fxLayout fxLayoutAlign=\"start center\">\n  <mat-card fxFlex=\"50%\" fxFlexOffset=\"25%\">\n    <mat-card-content>\n      <techlify-restrictors-form *ngIf=\"!isWorking else progressBarTemplate\"\n                                 [restrictor]=\"restrictor\"></techlify-restrictors-form>\n    </mat-card-content>\n  </mat-card>\n</div>\n\n<ng-template #progressBarTemplate>\n  <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i4.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i4.DefaultFlexOffsetDirective, selector: "  [fxFlexOffset], [fxFlexOffset.xs], [fxFlexOffset.sm], [fxFlexOffset.md],  [fxFlexOffset.lg], [fxFlexOffset.xl], [fxFlexOffset.lt-sm], [fxFlexOffset.lt-md],  [fxFlexOffset.lt-lg], [fxFlexOffset.lt-xl], [fxFlexOffset.gt-xs], [fxFlexOffset.gt-sm],  [fxFlexOffset.gt-md], [fxFlexOffset.gt-lg]", inputs: ["fxFlexOffset", "fxFlexOffset.xs", "fxFlexOffset.sm", "fxFlexOffset.md", "fxFlexOffset.lg", "fxFlexOffset.xl", "fxFlexOffset.lt-sm", "fxFlexOffset.lt-md", "fxFlexOffset.lt-lg", "fxFlexOffset.lt-xl", "fxFlexOffset.gt-xs", "fxFlexOffset.gt-sm", "fxFlexOffset.gt-md", "fxFlexOffset.gt-lg"] }, { kind: "directive", type: i4.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: i5.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i5.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i6.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i7.RestrictorsFormComponent, selector: "techlify-restrictors-form", inputs: ["restrictor"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RestrictorsFormPageComponent, deps: [{ token: i1.ActivatedRoute }, { token: i2.RestrictorService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: RestrictorsFormPageComponent, selector: "lib-restrictors-form-page", ngImport: i0, template: "<div fxLayout fxLayoutAlign=\"start center\">\n  <mat-card fxFlex=\"50%\" fxFlexOffset=\"25%\">\n    <mat-card-content>\n      <techlify-restrictors-form *ngIf=\"!isWorking else progressBarTemplate\"\n                                 [restrictor]=\"restrictor\"></techlify-restrictors-form>\n    </mat-card-content>\n  </mat-card>\n</div>\n\n<ng-template #progressBarTemplate>\n  <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i4.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i4.DefaultFlexOffsetDirective, selector: "  [fxFlexOffset], [fxFlexOffset.xs], [fxFlexOffset.sm], [fxFlexOffset.md],  [fxFlexOffset.lg], [fxFlexOffset.xl], [fxFlexOffset.lt-sm], [fxFlexOffset.lt-md],  [fxFlexOffset.lt-lg], [fxFlexOffset.lt-xl], [fxFlexOffset.gt-xs], [fxFlexOffset.gt-sm],  [fxFlexOffset.gt-md], [fxFlexOffset.gt-lg]", inputs: ["fxFlexOffset", "fxFlexOffset.xs", "fxFlexOffset.sm", "fxFlexOffset.md", "fxFlexOffset.lg", "fxFlexOffset.xl", "fxFlexOffset.lt-sm", "fxFlexOffset.lt-md", "fxFlexOffset.lt-lg", "fxFlexOffset.lt-xl", "fxFlexOffset.gt-xs", "fxFlexOffset.gt-sm", "fxFlexOffset.gt-md", "fxFlexOffset.gt-lg"] }, { kind: "directive", type: i4.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: i5.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i5.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i6.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i7.RestrictorsFormComponent, selector: "techlify-restrictors-form", inputs: ["restrictor"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RestrictorsFormPageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RestrictorsFormPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-restrictors-form-page', template: "<div fxLayout fxLayoutAlign=\"start center\">\n  <mat-card fxFlex=\"50%\" fxFlexOffset=\"25%\">\n    <mat-card-content>\n      <techlify-restrictors-form *ngIf=\"!isWorking else progressBarTemplate\"\n                                 [restrictor]=\"restrictor\"></techlify-restrictors-form>\n    </mat-card-content>\n  </mat-card>\n</div>\n\n<ng-template #progressBarTemplate>\n  <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i1.ActivatedRoute }, { type: i2.RestrictorService }] });

package/esm2022/lib/restrictors/restrictors-list-page/restrictors-list-page.component.mjs

@@ -133,10 +133,10 @@ export class RestrictorsListPageComponent {
             return restrictor?.restrictable?.name;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RestrictorsListPageComponent, deps: [{ token: i1.FormBuilder }, { token: i2.RequestHelperService }, { token: i3.ActivatedRoute }, { token: i4.RestrictorService }, { token: i5.UserConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: RestrictorsListPageComponent, selector: "lib-restrictors-list-page", ngImport: i0, template: "<div fxLayout fxLayoutAlign=\"center\" fxLayoutGap=\"10px\">\n  <h4 class=\"mb-0\">Restrictors</h4>\n  <mat-icon class=\"cursor-pointer\" [routerLink]=\"['create']\">add</mat-icon>\n</div>\n<p class=\"text-center text-secondary\">\n  These are the configurations for restrictions that we are adding to users' access of this app.\n</p>\n\n<mat-card class=\"mt-2\">\n  <mat-card-content>\n    <form [formGroup]=\"filterForm\" fxLayout fxLayoutAlign=\"start center\" fxLayoutGap=\"10px\">\n      <techlify-restrictor-type-selector formControlName=\"type_ids\"\n        [multiple]=\"true\"></techlify-restrictor-type-selector>\n      <techlify-restrictor-level-selector formControlName=\"level_ids\"\n        [multiple]=\"true\"></techlify-restrictor-level-selector>\n      <techlify-restrictor-status-selector formControlName=\"status_ids\"\n        [multiple]=\"true\"></techlify-restrictor-status-selector>\n    </form>\n  </mat-card-content>\n</mat-card>\n\n<mat-card class=\"mt-2 p-0\">\n  <mat-card-content>\n    <table mat-table [dataSource]=\"models\" class=\"w-100\" matSort (matSortChange)=\"onSortChange($event)\" infiniteScroll\n      [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\" [infiniteScrollContainer]=\"scrollContainer\"\n      [fromRoot]=\"true\" (scrolled)=\"onScroll()\">\n\n      <!-- No Column -->\n      <ng-container matColumnDef=\"No\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header=\"created_at\"> # </th>\n        <td mat-cell *matCellDef=\"let element; let i = index;\"> {{ i + 1 }} </td>\n      </ng-container>\n\n      <!-- Type Column -->\n      <ng-container matColumnDef=\"Type\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header=\"type_id\"> Type </th>\n        <td mat-cell *matCellDef=\"let element\"> {{ element?.type?.title }} </td>\n      </ng-container>\n\n      <!-- Level Column -->\n      <ng-container matColumnDef=\"Level\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header=\"level_id\"> Level </th>\n        <td mat-cell *matCellDef=\"let element\"> {{element?.level?.title}} </td>\n      </ng-container>\n\n      <!-- Entity Column -->\n      <ng-container matColumnDef=\"Entity\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header=\"restricted_object_id\"> Entity </th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ getRestrictableTypeValue(element) }}\n        </td>\n      </ng-container>\n\n      <!-- Data Column -->\n      <ng-container matColumnDef=\"Data\">\n        <th mat-header-cell *matHeaderCellDef> Data </th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-0\" *ngIf=\"element?.data?.ip_range\">\n            IP Range: {{ element?.data?.ip_range }}\n          </p>\n          <p class=\"mb-0\" *ngIf=\"element?.data?.start_time\">\n            Start time: {{ element?.data?.start_time | date: 'short' }}\n          </p>\n          <p class=\"mb-0\" *ngIf=\"element?.data?.end_time\">\n            End time: {{ element?.data?.end_time | date: 'short' }}\n          </p>\n        </td>\n      </ng-container>\n\n      <!-- Status Column -->\n      <ng-container matColumnDef=\"Status\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header=\"status_id\"> Status </th>\n        <td mat-cell *matCellDef=\"let element\"> {{ element?.status?.title }}</td>\n      </ng-container>\n\n      <!-- Actions Column -->\n      <ng-container matColumnDef=\"Actions\">\n        <th mat-header-cell *matHeaderCellDef> Actions </th>\n        <td mat-cell *matCellDef=\"let element\">\n          <mat-icon class=\"cursor-pointer\" [routerLink]=\"[element?.id, 'edit']\">edit</mat-icon>\n        </td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n    </table>\n\n    <mat-progress-bar *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n\n  </mat-card-content>\n</mat-card>", styles: [""], dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i7.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i7.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i7.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "component", type: i8.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i8.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i9.RestrictorTypeSelectorComponent, selector: "techlify-restrictor-type-selector", inputs: ["label", "multiple", "showLabel"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i10.RestrictorLevelSelectorComponent, selector: "techlify-restrictor-level-selector", inputs: ["label", "multiple", "showLabel"] }, { kind: "component", type: i11.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i12.RestrictorStatusSelectorComponent, selector: "techlify-restrictor-status-selector", inputs: ["label", "multiple", "showLabel"] }, { kind: "component", type: i13.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i13.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i13.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i13.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i13.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i13.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i13.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i13.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i13.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i13.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i14.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i15.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i15.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: i16.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "pipe", type: i6.DatePipe, name: "date" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RestrictorsListPageComponent, deps: [{ token: i1.FormBuilder }, { token: i2.RequestHelperService }, { token: i3.ActivatedRoute }, { token: i4.RestrictorService }, { token: i5.UserConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: RestrictorsListPageComponent, selector: "lib-restrictors-list-page", ngImport: i0, template: "<div fxLayout fxLayoutAlign=\"center\" fxLayoutGap=\"10px\">\n  <h4 class=\"mb-0\">Restrictors</h4>\n  <mat-icon class=\"cursor-pointer\" [routerLink]=\"['create']\">add</mat-icon>\n</div>\n<p class=\"text-center text-secondary\">\n  These are the configurations for restrictions that we are adding to users' access of this app.\n</p>\n\n<mat-card class=\"mt-2\">\n  <mat-card-content>\n    <form [formGroup]=\"filterForm\" fxLayout fxLayoutAlign=\"start center\" fxLayoutGap=\"10px\">\n      <techlify-restrictor-type-selector formControlName=\"type_ids\"\n        [multiple]=\"true\"></techlify-restrictor-type-selector>\n      <techlify-restrictor-level-selector formControlName=\"level_ids\"\n        [multiple]=\"true\"></techlify-restrictor-level-selector>\n      <techlify-restrictor-status-selector formControlName=\"status_ids\"\n        [multiple]=\"true\"></techlify-restrictor-status-selector>\n    </form>\n  </mat-card-content>\n</mat-card>\n\n<mat-card class=\"mt-2 p-0\">\n  <mat-card-content>\n    <table mat-table [dataSource]=\"models\" class=\"w-100\" matSort (matSortChange)=\"onSortChange($event)\" infiniteScroll\n      [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\" [infiniteScrollContainer]=\"scrollContainer\"\n      [fromRoot]=\"true\" (scrolled)=\"onScroll()\">\n\n      <!-- No Column -->\n      <ng-container matColumnDef=\"No\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header=\"created_at\"> # </th>\n        <td mat-cell *matCellDef=\"let element; let i = index;\"> {{ i + 1 }} </td>\n      </ng-container>\n\n      <!-- Type Column -->\n      <ng-container matColumnDef=\"Type\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header=\"type_id\"> Type </th>\n        <td mat-cell *matCellDef=\"let element\"> {{ element?.type?.title }} </td>\n      </ng-container>\n\n      <!-- Level Column -->\n      <ng-container matColumnDef=\"Level\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header=\"level_id\"> Level </th>\n        <td mat-cell *matCellDef=\"let element\"> {{element?.level?.title}} </td>\n      </ng-container>\n\n      <!-- Entity Column -->\n      <ng-container matColumnDef=\"Entity\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header=\"restricted_object_id\"> Entity </th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ getRestrictableTypeValue(element) }}\n        </td>\n      </ng-container>\n\n      <!-- Data Column -->\n      <ng-container matColumnDef=\"Data\">\n        <th mat-header-cell *matHeaderCellDef> Data </th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-0\" *ngIf=\"element?.data?.ip_range\">\n            IP Range: {{ element?.data?.ip_range }}\n          </p>\n          <p class=\"mb-0\" *ngIf=\"element?.data?.start_time\">\n            Start time: {{ element?.data?.start_time | date: 'short' }}\n          </p>\n          <p class=\"mb-0\" *ngIf=\"element?.data?.end_time\">\n            End time: {{ element?.data?.end_time | date: 'short' }}\n          </p>\n        </td>\n      </ng-container>\n\n      <!-- Status Column -->\n      <ng-container matColumnDef=\"Status\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header=\"status_id\"> Status </th>\n        <td mat-cell *matCellDef=\"let element\"> {{ element?.status?.title }}</td>\n      </ng-container>\n\n      <!-- Actions Column -->\n      <ng-container matColumnDef=\"Actions\">\n        <th mat-header-cell *matHeaderCellDef> Actions </th>\n        <td mat-cell *matCellDef=\"let element\">\n          <mat-icon class=\"cursor-pointer\" [routerLink]=\"[element?.id, 'edit']\">edit</mat-icon>\n        </td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n    </table>\n\n    <mat-progress-bar *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n\n  </mat-card-content>\n</mat-card>", styles: [""], dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i7.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i7.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i7.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "component", type: i8.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i8.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i9.RestrictorTypeSelectorComponent, selector: "techlify-restrictor-type-selector", inputs: ["label", "multiple", "showLabel"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i10.RestrictorLevelSelectorComponent, selector: "techlify-restrictor-level-selector", inputs: ["label", "multiple", "showLabel"] }, { kind: "component", type: i11.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i12.RestrictorStatusSelectorComponent, selector: "techlify-restrictor-status-selector", inputs: ["label", "multiple", "showLabel"] }, { kind: "component", type: i13.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i13.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i13.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i13.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i13.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i13.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i13.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i13.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i13.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i13.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i14.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i15.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i15.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: i16.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "pipe", type: i6.DatePipe, name: "date" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RestrictorsListPageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RestrictorsListPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-restrictors-list-page', template: "<div fxLayout fxLayoutAlign=\"center\" fxLayoutGap=\"10px\">\n  <h4 class=\"mb-0\">Restrictors</h4>\n  <mat-icon class=\"cursor-pointer\" [routerLink]=\"['create']\">add</mat-icon>\n</div>\n<p class=\"text-center text-secondary\">\n  These are the configurations for restrictions that we are adding to users' access of this app.\n</p>\n\n<mat-card class=\"mt-2\">\n  <mat-card-content>\n    <form [formGroup]=\"filterForm\" fxLayout fxLayoutAlign=\"start center\" fxLayoutGap=\"10px\">\n      <techlify-restrictor-type-selector formControlName=\"type_ids\"\n        [multiple]=\"true\"></techlify-restrictor-type-selector>\n      <techlify-restrictor-level-selector formControlName=\"level_ids\"\n        [multiple]=\"true\"></techlify-restrictor-level-selector>\n      <techlify-restrictor-status-selector formControlName=\"status_ids\"\n        [multiple]=\"true\"></techlify-restrictor-status-selector>\n    </form>\n  </mat-card-content>\n</mat-card>\n\n<mat-card class=\"mt-2 p-0\">\n  <mat-card-content>\n    <table mat-table [dataSource]=\"models\" class=\"w-100\" matSort (matSortChange)=\"onSortChange($event)\" infiniteScroll\n      [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\" [infiniteScrollContainer]=\"scrollContainer\"\n      [fromRoot]=\"true\" (scrolled)=\"onScroll()\">\n\n      <!-- No Column -->\n      <ng-container matColumnDef=\"No\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header=\"created_at\"> # </th>\n        <td mat-cell *matCellDef=\"let element; let i = index;\"> {{ i + 1 }} </td>\n      </ng-container>\n\n      <!-- Type Column -->\n      <ng-container matColumnDef=\"Type\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header=\"type_id\"> Type </th>\n        <td mat-cell *matCellDef=\"let element\"> {{ element?.type?.title }} </td>\n      </ng-container>\n\n      <!-- Level Column -->\n      <ng-container matColumnDef=\"Level\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header=\"level_id\"> Level </th>\n        <td mat-cell *matCellDef=\"let element\"> {{element?.level?.title}} </td>\n      </ng-container>\n\n      <!-- Entity Column -->\n      <ng-container matColumnDef=\"Entity\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header=\"restricted_object_id\"> Entity </th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ getRestrictableTypeValue(element) }}\n        </td>\n      </ng-container>\n\n      <!-- Data Column -->\n      <ng-container matColumnDef=\"Data\">\n        <th mat-header-cell *matHeaderCellDef> Data </th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-0\" *ngIf=\"element?.data?.ip_range\">\n            IP Range: {{ element?.data?.ip_range }}\n          </p>\n          <p class=\"mb-0\" *ngIf=\"element?.data?.start_time\">\n            Start time: {{ element?.data?.start_time | date: 'short' }}\n          </p>\n          <p class=\"mb-0\" *ngIf=\"element?.data?.end_time\">\n            End time: {{ element?.data?.end_time | date: 'short' }}\n          </p>\n        </td>\n      </ng-container>\n\n      <!-- Status Column -->\n      <ng-container matColumnDef=\"Status\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header=\"status_id\"> Status </th>\n        <td mat-cell *matCellDef=\"let element\"> {{ element?.status?.title }}</td>\n      </ng-container>\n\n      <!-- Actions Column -->\n      <ng-container matColumnDef=\"Actions\">\n        <th mat-header-cell *matHeaderCellDef> Actions </th>\n        <td mat-cell *matCellDef=\"let element\">\n          <mat-icon class=\"cursor-pointer\" [routerLink]=\"[element?.id, 'edit']\">edit</mat-icon>\n        </td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n    </table>\n\n    <mat-progress-bar *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n\n  </mat-card-content>\n</mat-card>" }]
         }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: i2.RequestHelperService }, { type: i3.ActivatedRoute }, { type: i4.RestrictorService }, { type: i5.UserConfigService }] });

package/esm2022/lib/restrictors/restrictors-routing.module.mjs

@@ -28,11 +28,11 @@ const routes = [
     }
 ];
 export class RestrictorsRoutingModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RestrictorsRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: RestrictorsRoutingModule, imports: [i1.RouterModule], exports: [RouterModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RestrictorsRoutingModule, imports: [RouterModule.forChild(routes), RouterModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RestrictorsRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: RestrictorsRoutingModule, imports: [i1.RouterModule], exports: [RouterModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RestrictorsRoutingModule, imports: [RouterModule.forChild(routes), RouterModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RestrictorsRoutingModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RestrictorsRoutingModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [RouterModule.forChild(routes)],

package/esm2022/lib/restrictors/restrictors.module.mjs

@@ -23,8 +23,8 @@ import { MatSortModule } from '@angular/material/sort';
 import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 import * as i0 from "@angular/core";
 export class RestrictorsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RestrictorsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: RestrictorsModule, declarations: [RestrictorsListPageComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RestrictorsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: RestrictorsModule, declarations: [RestrictorsListPageComponent,
             RestrictorsFormPageComponent,
             RestrictorsFormComponent], imports: [CommonModule,
             RestrictorsRoutingModule,
@@ -45,7 +45,7 @@ export class RestrictorsModule {
             MatProgressBarModule,
             MatSortModule,
             InfiniteScrollModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RestrictorsModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RestrictorsModule, imports: [CommonModule,
             RestrictorsRoutingModule,
             MatButtonModule,
             FlexModule,
@@ -65,7 +65,7 @@ export class RestrictorsModule {
             MatSortModule,
             InfiniteScrollModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RestrictorsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RestrictorsModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [

package/esm2022/lib/role/permission/permission.module.mjs

@@ -9,21 +9,21 @@ import { FlexLayoutModule } from '@angular/flex-layout';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i0 from "@angular/core";
 export class PermissionModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PermissionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: PermissionModule, declarations: [PermissionsManagementComponent], imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PermissionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: PermissionModule, declarations: [PermissionsManagementComponent], imports: [CommonModule,
             PermissionRoutingProvider,
             FlexLayoutModule,
             MaterialModule,
             FormsModule,
             ReactiveFormsModule], exports: [PermissionsManagementComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PermissionModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PermissionModule, imports: [CommonModule,
             PermissionRoutingProvider,
             FlexLayoutModule,
             MaterialModule,
             FormsModule,
             ReactiveFormsModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PermissionModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PermissionModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/esm2022/lib/role/permission/permission.routes.mjs

@@ -12,11 +12,11 @@ const routes = [
     { path: '**', redirectTo: '', pathMatch: 'full' },
 ];
 export class PermissionRoutingProvider {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PermissionRoutingProvider, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: PermissionRoutingProvider, imports: [i1.RouterModule], exports: [RouterModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PermissionRoutingProvider, imports: [RouterModule.forChild(routes), RouterModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PermissionRoutingProvider, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: PermissionRoutingProvider, imports: [i1.RouterModule], exports: [RouterModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PermissionRoutingProvider, imports: [RouterModule.forChild(routes), RouterModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PermissionRoutingProvider, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PermissionRoutingProvider, decorators: [{
             type: NgModule,
             args: [{
                     imports: [RouterModule.forChild(routes)],

package/esm2022/lib/role/permission/permissions-management.component.mjs

@@ -112,10 +112,10 @@ export class PermissionsManagementComponent {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PermissionsManagementComponent, deps: [{ token: i1.HttpService }, { token: i1.AlertService }, { token: i2.ActivatedRoute }, { token: i1.CredentialsService }, { token: i1.ErrorHandlerService }, { token: i3.UserConfigService }, { token: i4.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PermissionsManagementComponent, selector: "role-permissions-management", inputs: { clientId: "clientId" }, ngImport: i0, template: "<div class=\"d-flex flex-column justify-content-start gap-3\">\n  <mat-card>\n    <mat-card-content class=\"d-flex justify-content-between align-items-center gap-3\">\n      <div class=\"d-flex justify-content-start align-items-center gap-2\">\n        <h3 class=\"m-0 fw-bold\">\n          Manage Role Permissions\n        </h3>\n        <button *ngIf=\"!config.permissionConfig.disableUsers\" [routerLink]=\"['../users']\" class=\"ml-1\"\n          mat-raised-button>\n          <i class=\"icon fas fa-users\"></i> Users\n        </button>\n        <button *ngIf=\"!config.permissionConfig.disableRoles\" [routerLink]=\"['../roles']\" class=\"ml-1\"\n          mat-raised-button>\n          <i class=\"fas fa-user-md\"></i> Manage Roles\n        </button>\n      </div>\n      <form [formGroup]=\"filterForm\" class=\"d-flex justify-content-end align-items-center gap-2\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Search</mat-label>\n          <input autocomplete=\"off\" formControlName=\"search\" matInput placeholder=\"Search Permissions\" type=\"text\" />\n          <button (click)=\"filterForm.get('search').setValue('')\" *ngIf=\"filterForm.get('search').value\" mat-icon-button\n            matSuffix type=\"button\">\n            <mat-icon>clear</mat-icon>\n          </button>\n        </mat-form-field>\n\n        <mat-form-field *ngIf=\"roles\" appearance=\"outline\" class=\"ml-2\">\n          <mat-label>Show Roles</mat-label>\n          <mat-select formControlName='role_ids' multiple>\n            <mat-option *ngFor=\"let role of roles\" [value]=\"role?.id\">\n              {{ role.label }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </form>\n    </mat-card-content>\n  </mat-card>\n\n  <mat-card class=\"mt-2\">\n    <mat-card-content class=\"p-0\">\n      <form>\n        <table aria-describedby=\"Role Permissions\" class=\"table table-sm table-bordered table-condensed table-striped\">\n          <thead>\n            <tr>\n              <th>Permissions</th>\n              <ng-container *ngFor=\"let role of roles\">\n                <th *ngIf=\"filterForm.get('role_ids').value.includes(role.id)\" class=\"text-center\">\n                  {{ role.label }}\n                </th>\n              </ng-container>\n            </tr>\n          </thead>\n          <tbody>\n            <tr *ngFor=\"let permission of filteredPermissions\">\n              <td>\n                {{ permission.label }}\n              </td>\n              <ng-container *ngFor=\"let role of roles\">\n                <td *ngIf=\"filterForm.get('role_ids').value.includes(role.id)\" class=\"text-center align-middle\">\n                  <div class=\"d-flex justify-content-center align-items-center h-100\">\n                    <input (change)=\"updateRolePermission(role, permission)\"\n                      [checked]=\"role.hasPermission(permission.slug)\"\n                      [disabled]=\"isDisabled(role?.client_id == null, role.is_editable)\"\n                      name=\"{{role.id}}[{{permission?.label}}]\" type=\"checkbox\" />\n                  </div>\n                </td>\n              </ng-container>\n            </tr>\n          </tbody>\n        </table>\n      </form>\n    </mat-card-content>\n  </mat-card>\n</div>", dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.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: i10.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i11.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i12.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i12.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PermissionsManagementComponent, deps: [{ token: i1.HttpService }, { token: i1.AlertService }, { token: i2.ActivatedRoute }, { token: i1.CredentialsService }, { token: i1.ErrorHandlerService }, { token: i3.UserConfigService }, { token: i4.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: PermissionsManagementComponent, selector: "role-permissions-management", inputs: { clientId: "clientId" }, ngImport: i0, template: "<div class=\"d-flex flex-column justify-content-start gap-3\">\n  <mat-card>\n    <mat-card-content class=\"d-flex justify-content-between align-items-center gap-3\">\n      <div class=\"d-flex justify-content-start align-items-center gap-2\">\n        <h3 class=\"m-0 fw-bold\">\n          Manage Role Permissions\n        </h3>\n        <button *ngIf=\"!config.permissionConfig.disableUsers\" [routerLink]=\"['../users']\" class=\"ml-1\"\n          mat-raised-button>\n          <i class=\"icon fas fa-users\"></i> Users\n        </button>\n        <button *ngIf=\"!config.permissionConfig.disableRoles\" [routerLink]=\"['../roles']\" class=\"ml-1\"\n          mat-raised-button>\n          <i class=\"fas fa-user-md\"></i> Manage Roles\n        </button>\n      </div>\n      <form [formGroup]=\"filterForm\" class=\"d-flex justify-content-end align-items-center gap-2\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Search</mat-label>\n          <input autocomplete=\"off\" formControlName=\"search\" matInput placeholder=\"Search Permissions\" type=\"text\" />\n          <button (click)=\"filterForm.get('search').setValue('')\" *ngIf=\"filterForm.get('search').value\" mat-icon-button\n            matSuffix type=\"button\">\n            <mat-icon>clear</mat-icon>\n          </button>\n        </mat-form-field>\n\n        <mat-form-field *ngIf=\"roles\" appearance=\"outline\" class=\"ml-2\">\n          <mat-label>Show Roles</mat-label>\n          <mat-select formControlName='role_ids' multiple>\n            <mat-option *ngFor=\"let role of roles\" [value]=\"role?.id\">\n              {{ role.label }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </form>\n    </mat-card-content>\n  </mat-card>\n\n  <mat-card class=\"mt-2\">\n    <mat-card-content class=\"p-0\">\n      <form>\n        <table aria-describedby=\"Role Permissions\" class=\"table table-sm table-bordered table-condensed table-striped\">\n          <thead>\n            <tr>\n              <th>Permissions</th>\n              <ng-container *ngFor=\"let role of roles\">\n                <th *ngIf=\"filterForm.get('role_ids').value.includes(role.id)\" class=\"text-center\">\n                  {{ role.label }}\n                </th>\n              </ng-container>\n            </tr>\n          </thead>\n          <tbody>\n            <tr *ngFor=\"let permission of filteredPermissions\">\n              <td>\n                {{ permission.label }}\n              </td>\n              <ng-container *ngFor=\"let role of roles\">\n                <td *ngIf=\"filterForm.get('role_ids').value.includes(role.id)\" class=\"text-center align-middle\">\n                  <div class=\"d-flex justify-content-center align-items-center h-100\">\n                    <input (change)=\"updateRolePermission(role, permission)\"\n                      [checked]=\"role.hasPermission(permission.slug)\"\n                      [disabled]=\"isDisabled(role?.client_id == null, role.is_editable)\"\n                      name=\"{{role.id}}[{{permission?.label}}]\" type=\"checkbox\" />\n                  </div>\n                </td>\n              </ng-container>\n            </tr>\n          </tbody>\n        </table>\n      </form>\n    </mat-card-content>\n  </mat-card>\n</div>", dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.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: i10.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i11.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i12.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i12.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PermissionsManagementComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PermissionsManagementComponent, decorators: [{
             type: Component,
             args: [{ selector: 'role-permissions-management', template: "<div class=\"d-flex flex-column justify-content-start gap-3\">\n  <mat-card>\n    <mat-card-content class=\"d-flex justify-content-between align-items-center gap-3\">\n      <div class=\"d-flex justify-content-start align-items-center gap-2\">\n        <h3 class=\"m-0 fw-bold\">\n          Manage Role Permissions\n        </h3>\n        <button *ngIf=\"!config.permissionConfig.disableUsers\" [routerLink]=\"['../users']\" class=\"ml-1\"\n          mat-raised-button>\n          <i class=\"icon fas fa-users\"></i> Users\n        </button>\n        <button *ngIf=\"!config.permissionConfig.disableRoles\" [routerLink]=\"['../roles']\" class=\"ml-1\"\n          mat-raised-button>\n          <i class=\"fas fa-user-md\"></i> Manage Roles\n        </button>\n      </div>\n      <form [formGroup]=\"filterForm\" class=\"d-flex justify-content-end align-items-center gap-2\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Search</mat-label>\n          <input autocomplete=\"off\" formControlName=\"search\" matInput placeholder=\"Search Permissions\" type=\"text\" />\n          <button (click)=\"filterForm.get('search').setValue('')\" *ngIf=\"filterForm.get('search').value\" mat-icon-button\n            matSuffix type=\"button\">\n            <mat-icon>clear</mat-icon>\n          </button>\n        </mat-form-field>\n\n        <mat-form-field *ngIf=\"roles\" appearance=\"outline\" class=\"ml-2\">\n          <mat-label>Show Roles</mat-label>\n          <mat-select formControlName='role_ids' multiple>\n            <mat-option *ngFor=\"let role of roles\" [value]=\"role?.id\">\n              {{ role.label }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </form>\n    </mat-card-content>\n  </mat-card>\n\n  <mat-card class=\"mt-2\">\n    <mat-card-content class=\"p-0\">\n      <form>\n        <table aria-describedby=\"Role Permissions\" class=\"table table-sm table-bordered table-condensed table-striped\">\n          <thead>\n            <tr>\n              <th>Permissions</th>\n              <ng-container *ngFor=\"let role of roles\">\n                <th *ngIf=\"filterForm.get('role_ids').value.includes(role.id)\" class=\"text-center\">\n                  {{ role.label }}\n                </th>\n              </ng-container>\n            </tr>\n          </thead>\n          <tbody>\n            <tr *ngFor=\"let permission of filteredPermissions\">\n              <td>\n                {{ permission.label }}\n              </td>\n              <ng-container *ngFor=\"let role of roles\">\n                <td *ngIf=\"filterForm.get('role_ids').value.includes(role.id)\" class=\"text-center align-middle\">\n                  <div class=\"d-flex justify-content-center align-items-center h-100\">\n                    <input (change)=\"updateRolePermission(role, permission)\"\n                      [checked]=\"role.hasPermission(permission.slug)\"\n                      [disabled]=\"isDisabled(role?.client_id == null, role.is_editable)\"\n                      name=\"{{role.id}}[{{permission?.label}}]\" type=\"checkbox\" />\n                  </div>\n                </td>\n              </ng-container>\n            </tr>\n          </tbody>\n        </table>\n      </form>\n    </mat-card-content>\n  </mat-card>\n</div>" }]
         }], ctorParameters: () => [{ type: i1.HttpService }, { type: i1.AlertService }, { type: i2.ActivatedRoute }, { type: i1.CredentialsService }, { type: i1.ErrorHandlerService }, { type: i3.UserConfigService }, { type: i4.FormBuilder }], propDecorators: { clientId: [{

package/esm2022/lib/role/role-form-button.component.mjs

@@ -22,10 +22,10 @@ export class RoleFormButtonComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RoleFormButtonComponent, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: RoleFormButtonComponent, selector: "app-role-form-button", inputs: { config: "config", clientId: "clientId", isUpdate: "isUpdate", role: "role" }, outputs: { success: "success" }, ngImport: i0, template: "<mat-icon class=\"cursor-pointer text-dark\" (click)=\"openForm()\">\n  {{ isUpdate ? 'edit' : 'add' }}\n</mat-icon>\n", dependencies: [{ kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RoleFormButtonComponent, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: RoleFormButtonComponent, selector: "app-role-form-button", inputs: { config: "config", clientId: "clientId", isUpdate: "isUpdate", role: "role" }, outputs: { success: "success" }, ngImport: i0, template: "<mat-icon class=\"cursor-pointer text-dark\" (click)=\"openForm()\">\n  {{ isUpdate ? 'edit' : 'add' }}\n</mat-icon>\n", dependencies: [{ kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RoleFormButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RoleFormButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-role-form-button', template: "<mat-icon class=\"cursor-pointer text-dark\" (click)=\"openForm()\">\n  {{ isUpdate ? 'edit' : 'add' }}\n</mat-icon>\n" }]
         }], ctorParameters: () => [{ type: i1.MatDialog }], propDecorators: { config: [{

package/esm2022/lib/role/role-form.component.mjs

@@ -69,10 +69,10 @@ export class RoleFormComponent {
     getErrorMessage(field) {
         return this.formValidatorService.getErrorMessage(field, this.roleForm, errorMessages);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RoleFormComponent, deps: [{ token: i1.AlertService }, { token: i1.CredentialsService }, { token: i2.UntypedFormBuilder }, { token: i1.FormValidatorService }, { token: i3.UserConfigService }, { token: i4.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i5.RoleService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: RoleFormComponent, selector: "role-form", ngImport: i0, template: "<form [formGroup]=\"roleForm\" (ngSubmit)=\"save()\" class=\"p-3\">\n    <div fxLayout=\"column\">\n        <div mat-dialog-title class=\"text-center\">\n            <div>Role Form</div>\n        </div>\n        <mat-form-field fxFlex=\"100%\">\n            <input matInput formControlName=\"label\" placeholder=\"Role\" type=\"text\" autocomplete=\"off\" required />\n            <mat-error *ngIf=\"isFieldValid('label')\">{{getErrorMessage('label')}}</mat-error>\n        </mat-form-field>\n        <mat-form-field fxFlex=\"100%\">\n            <textarea matInput placeholder=\"Description\" formControlName=\"description\"></textarea>\n        </mat-form-field>\n\n        <ng-container *ngIf=\"isAdminUser && roleForm.get('client_id').value\">\n            <mat-checkbox formControlName=\"is_editable\"> Is Editable</mat-checkbox>\n        </ng-container>\n\n        <div fxFlex=\"100%\" fxLayout fxLayoutAlign=\"end\" fxLayoutGap=\"1rem\">\n            <button mat-button class=\"mt-2\" type=\"button\" (click)=\"dialogRef.close()\">\n                Cancel\n            </button>\n            <button mat-raised-button color=\"primary\" class=\"mt-2\" type=\"submit\">\n                Save\n            </button>\n        </div>\n    </div>\n</form>", dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i8.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "component", type: i9.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i9.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i10.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: "directive", type: i11.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i11.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i11.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i11.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RoleFormComponent, deps: [{ token: i1.AlertService }, { token: i1.CredentialsService }, { token: i2.UntypedFormBuilder }, { token: i1.FormValidatorService }, { token: i3.UserConfigService }, { token: i4.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i5.RoleService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: RoleFormComponent, selector: "role-form", ngImport: i0, template: "<form [formGroup]=\"roleForm\" (ngSubmit)=\"save()\" class=\"p-3\">\n    <div fxLayout=\"column\">\n        <div mat-dialog-title class=\"text-center\">\n            <div>Role Form</div>\n        </div>\n        <mat-form-field fxFlex=\"100%\">\n            <input matInput formControlName=\"label\" placeholder=\"Role\" type=\"text\" autocomplete=\"off\" required />\n            <mat-error *ngIf=\"isFieldValid('label')\">{{getErrorMessage('label')}}</mat-error>\n        </mat-form-field>\n        <mat-form-field fxFlex=\"100%\">\n            <textarea matInput placeholder=\"Description\" formControlName=\"description\"></textarea>\n        </mat-form-field>\n\n        <ng-container *ngIf=\"isAdminUser && roleForm.get('client_id').value\">\n            <mat-checkbox formControlName=\"is_editable\"> Is Editable</mat-checkbox>\n        </ng-container>\n\n        <div fxFlex=\"100%\" fxLayout fxLayoutAlign=\"end\" fxLayoutGap=\"1rem\">\n            <button mat-button class=\"mt-2\" type=\"button\" (click)=\"dialogRef.close()\">\n                Cancel\n            </button>\n            <button mat-raised-button color=\"primary\" class=\"mt-2\" type=\"submit\">\n                Save\n            </button>\n        </div>\n    </div>\n</form>", dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i8.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "component", type: i9.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i9.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i10.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: "directive", type: i11.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i11.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i11.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i11.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RoleFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RoleFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'role-form', template: "<form [formGroup]=\"roleForm\" (ngSubmit)=\"save()\" class=\"p-3\">\n    <div fxLayout=\"column\">\n        <div mat-dialog-title class=\"text-center\">\n            <div>Role Form</div>\n        </div>\n        <mat-form-field fxFlex=\"100%\">\n            <input matInput formControlName=\"label\" placeholder=\"Role\" type=\"text\" autocomplete=\"off\" required />\n            <mat-error *ngIf=\"isFieldValid('label')\">{{getErrorMessage('label')}}</mat-error>\n        </mat-form-field>\n        <mat-form-field fxFlex=\"100%\">\n            <textarea matInput placeholder=\"Description\" formControlName=\"description\"></textarea>\n        </mat-form-field>\n\n        <ng-container *ngIf=\"isAdminUser && roleForm.get('client_id').value\">\n            <mat-checkbox formControlName=\"is_editable\"> Is Editable</mat-checkbox>\n        </ng-container>\n\n        <div fxFlex=\"100%\" fxLayout fxLayoutAlign=\"end\" fxLayoutGap=\"1rem\">\n            <button mat-button class=\"mt-2\" type=\"button\" (click)=\"dialogRef.close()\">\n                Cancel\n            </button>\n            <button mat-raised-button color=\"primary\" class=\"mt-2\" type=\"submit\">\n                Save\n            </button>\n        </div>\n    </div>\n</form>" }]
         }], ctorParameters: () => [{ type: i1.AlertService }, { type: i1.CredentialsService }, { type: i2.UntypedFormBuilder }, { type: i1.FormValidatorService }, { type: i3.UserConfigService }, { type: i4.MatDialogRef }, { type: undefined, decorators: [{

package/esm2022/lib/role/role-view/role-view-routing.module.mjs

@@ -12,11 +12,11 @@ const routes = [
     },
 ];
 export class RoleViewRoutingModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RoleViewRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: RoleViewRoutingModule, imports: [i1.RouterModule], exports: [RouterModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RoleViewRoutingModule, imports: [RouterModule.forChild(routes), RouterModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RoleViewRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: RoleViewRoutingModule, imports: [i1.RouterModule], exports: [RouterModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RoleViewRoutingModule, imports: [RouterModule.forChild(routes), RouterModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RoleViewRoutingModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RoleViewRoutingModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [RouterModule.forChild(routes)],

package/esm2022/lib/role/role-view/role-view.component.mjs

@@ -29,10 +29,10 @@ export class RoleViewComponent {
             this.errorHandler.handleError(error);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RoleViewComponent, deps: [{ token: i1.HttpService }, { token: i1.ErrorHandlerService }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: RoleViewComponent, selector: "app-role-view", ngImport: i0, template: "<div fxLayout=\"column\" fxLayoutGap=\"1rem\" class=\"p-4\">\n  <h3 fxLayoutAlign=\"center\" class=\"pb-4\">Role View</h3>\n  <div fxLayout=\"row wrap\" fxLayoutGap=\"1rem grid\">\n    <div fxFlex.lt-md=\"100%\" fxFlex=\"0 1 calc(50%-1rem)\">\n      <mat-card fxFlex=\"100%\">\n        <mat-card-title>Basic Info.</mat-card-title>\n        <mat-card-content fxLayout=\"column wrap\" fxLayoutGap=\"1rem\">\n          <div>\n            <span class=\"font-weight-bold\">Role:</span> {{role?.label}}\n          </div>\n          <div>\n            <span class=\"font-weight-bold\">Description:</span> {{role?.description}}\n          </div>\n          <div>\n            <span class=\"font-weight-bold\">Is App Role:</span> {{(role?.client_id == null) ? 'Yes' : 'No'}}\n          </div>\n          <div>\n            <span class=\"font-weight-bold\"># Users:</span> {{role?.role_users_count}}\n          </div>\n        </mat-card-content>\n      </mat-card>\n    </div>\n    <div fxFlex.lt-md=\"100%\" fxFlex=\"0 1 calc(50%-1rem)\">\n      <mat-card fxFlex=\"100%\">\n        <mat-card-title>Permissions ({{role?.permissions.length}})</mat-card-title>\n        <mat-card-content style=\"height:400px;overflow-y: scroll;\">\n          <div fxLayout=\"column wrap\">\n            <div *ngFor=\"let permission of role?.permissions;let i=index;\">\n              {{i+1}}. {{permission.label}}\n            </div>\n          </div>\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </div>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i4.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: i5.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i5.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i5.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i5.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RoleViewComponent, deps: [{ token: i1.HttpService }, { token: i1.ErrorHandlerService }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: RoleViewComponent, selector: "app-role-view", ngImport: i0, template: "<div fxLayout=\"column\" fxLayoutGap=\"1rem\" class=\"p-4\">\n  <h3 fxLayoutAlign=\"center\" class=\"pb-4\">Role View</h3>\n  <div fxLayout=\"row wrap\" fxLayoutGap=\"1rem grid\">\n    <div fxFlex.lt-md=\"100%\" fxFlex=\"0 1 calc(50%-1rem)\">\n      <mat-card fxFlex=\"100%\">\n        <mat-card-title>Basic Info.</mat-card-title>\n        <mat-card-content fxLayout=\"column wrap\" fxLayoutGap=\"1rem\">\n          <div>\n            <span class=\"font-weight-bold\">Role:</span> {{role?.label}}\n          </div>\n          <div>\n            <span class=\"font-weight-bold\">Description:</span> {{role?.description}}\n          </div>\n          <div>\n            <span class=\"font-weight-bold\">Is App Role:</span> {{(role?.client_id == null) ? 'Yes' : 'No'}}\n          </div>\n          <div>\n            <span class=\"font-weight-bold\"># Users:</span> {{role?.role_users_count}}\n          </div>\n        </mat-card-content>\n      </mat-card>\n    </div>\n    <div fxFlex.lt-md=\"100%\" fxFlex=\"0 1 calc(50%-1rem)\">\n      <mat-card fxFlex=\"100%\">\n        <mat-card-title>Permissions ({{role?.permissions.length}})</mat-card-title>\n        <mat-card-content style=\"height:400px;overflow-y: scroll;\">\n          <div fxLayout=\"column wrap\">\n            <div *ngFor=\"let permission of role?.permissions;let i=index;\">\n              {{i+1}}. {{permission.label}}\n            </div>\n          </div>\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </div>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i4.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: i5.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i5.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i5.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i5.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RoleViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RoleViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-role-view', template: "<div fxLayout=\"column\" fxLayoutGap=\"1rem\" class=\"p-4\">\n  <h3 fxLayoutAlign=\"center\" class=\"pb-4\">Role View</h3>\n  <div fxLayout=\"row wrap\" fxLayoutGap=\"1rem grid\">\n    <div fxFlex.lt-md=\"100%\" fxFlex=\"0 1 calc(50%-1rem)\">\n      <mat-card fxFlex=\"100%\">\n        <mat-card-title>Basic Info.</mat-card-title>\n        <mat-card-content fxLayout=\"column wrap\" fxLayoutGap=\"1rem\">\n          <div>\n            <span class=\"font-weight-bold\">Role:</span> {{role?.label}}\n          </div>\n          <div>\n            <span class=\"font-weight-bold\">Description:</span> {{role?.description}}\n          </div>\n          <div>\n            <span class=\"font-weight-bold\">Is App Role:</span> {{(role?.client_id == null) ? 'Yes' : 'No'}}\n          </div>\n          <div>\n            <span class=\"font-weight-bold\"># Users:</span> {{role?.role_users_count}}\n          </div>\n        </mat-card-content>\n      </mat-card>\n    </div>\n    <div fxFlex.lt-md=\"100%\" fxFlex=\"0 1 calc(50%-1rem)\">\n      <mat-card fxFlex=\"100%\">\n        <mat-card-title>Permissions ({{role?.permissions.length}})</mat-card-title>\n        <mat-card-content style=\"height:400px;overflow-y: scroll;\">\n          <div fxLayout=\"column wrap\">\n            <div *ngFor=\"let permission of role?.permissions;let i=index;\">\n              {{i+1}}. {{permission.label}}\n            </div>\n          </div>\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </div>\n</div>" }]
         }], ctorParameters: () => [{ type: i1.HttpService }, { type: i1.ErrorHandlerService }, { type: i2.ActivatedRoute }] });

package/esm2022/lib/role/role-view/role-view.module.mjs

@@ -8,15 +8,15 @@ import { MaterialModule } from '../../material.module';
 import { RoleViewComponent } from './role-view.component';
 import * as i0 from "@angular/core";
 export class RoleViewModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RoleViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: RoleViewModule, declarations: [RoleViewComponent], imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RoleViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: RoleViewModule, declarations: [RoleViewComponent], imports: [CommonModule,
             RoleViewRoutingModule,
             MaterialModule,
             FlexLayoutModule,
             FormsModule,
             ReactiveFormsModule,
             InfiniteScrollModule], exports: [RoleViewComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RoleViewModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RoleViewModule, imports: [CommonModule,
             RoleViewRoutingModule,
             MaterialModule,
             FlexLayoutModule,
@@ -24,7 +24,7 @@ export class RoleViewModule {
             ReactiveFormsModule,
             InfiniteScrollModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RoleViewModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RoleViewModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/esm2022/lib/role/role.module.mjs

@@ -13,8 +13,8 @@ import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { RoleFormButtonComponent } from './role-form-button.component';
 import * as i0 from "@angular/core";
 export class RoleModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RoleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: RoleModule, declarations: [RoleFormComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RoleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: RoleModule, declarations: [RoleFormComponent,
             RolesViewAllComponent,
             RoleFormButtonComponent], imports: [CommonModule,
             RoleRoutingProvider,
@@ -26,7 +26,7 @@ export class RoleModule {
             MatProgressBarModule], exports: [RolesViewAllComponent,
             RoleFormButtonComponent,
             RoleFormComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RoleModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RoleModule, imports: [CommonModule,
             RoleRoutingProvider,
             MaterialModule,
             FlexLayoutModule,
@@ -35,7 +35,7 @@ export class RoleModule {
             InfiniteScrollModule,
             MatProgressBarModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RoleModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RoleModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [