ngx-techlify-core 18.72.0 → 18.72.1

package/fesm2022/ngx-techlify-core.mjs

@@ -3233,7 +3233,7 @@ class SearchableSelectorComponent {
         this.items = [];
         this.apiDataProperty = 'data';
         this.cache = false;
-        this.per_page = 50;
+        this.perPage = 50;
         this.inDataSearch = false;
         this.panelWidth = '';
         this.selectionChange = new EventEmitter();
@@ -3301,6 +3301,7 @@ class SearchableSelectorComponent {
                 this.search(value);
         }));
         this.filters = {
+            perPage: this.perPage,
             search: '',
             page: 1,
             lastPage: 1
@@ -3468,7 +3469,7 @@ class SearchableSelectorComponent {
         this.subscriptions.unsubscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SearchableSelectorComponent, deps: [{ token: i1$5.UntypedFormBuilder }, { token: i1$4.FocusMonitor }, { token: HttpService }, { token: i0.ElementRef }, { token: i1.MatDialog }, { token: i1$5.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SearchableSelectorComponent, selector: "app-searchable-selector", inputs: { valueField: "valueField", titleField: "titleField", subtitleField: "subtitleField", apiUrl: "apiUrl", multiple: "multiple", selectedValue: "selectedValue", enableSearch: "enableSearch", add: "add", addConfig: "addConfig", edit: "edit", editConfig: "editConfig", sort: "sort", sortBy: "sortBy", searchField: "searchField", itemComponent: "itemComponent", items: "items", apiDataProperty: "apiDataProperty", cache: "cache", per_page: "per_page", inDataSearch: "inDataSearch", panelWidth: "panelWidth", focusSearchOnOpen: "focusSearchOnOpen", isEmitInitialEvent: "isEmitInitialEvent", required: "required", disabled: "disabled", value: "value" }, outputs: { selectedValueChange: "selectedValueChange", selectionChange: "selectionChange", itemsChange: "itemsChange", isItemsEmpty: "isItemsEmpty" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SearchableSelectorComponent, selector: "app-searchable-selector", inputs: { valueField: "valueField", titleField: "titleField", subtitleField: "subtitleField", apiUrl: "apiUrl", multiple: "multiple", selectedValue: "selectedValue", enableSearch: "enableSearch", add: "add", addConfig: "addConfig", edit: "edit", editConfig: "editConfig", sort: "sort", sortBy: "sortBy", searchField: "searchField", itemComponent: "itemComponent", items: "items", apiDataProperty: "apiDataProperty", cache: "cache", perPage: "perPage", inDataSearch: "inDataSearch", panelWidth: "panelWidth", focusSearchOnOpen: "focusSearchOnOpen", isEmitInitialEvent: "isEmitInitialEvent", required: "required", disabled: "disabled", value: "value" }, outputs: { selectedValueChange: "selectedValueChange", selectionChange: "selectionChange", itemsChange: "itemsChange", isItemsEmpty: "isItemsEmpty" }, providers: [
             {
                 provide: MatFormFieldControl,
                 useExisting: SearchableSelectorComponent
@@ -3528,7 +3529,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], cache: [{
                 type: Input
-            }], per_page: [{
+            }], perPage: [{
                 type: Input
             }], inDataSearch: [{
                 type: Input
@@ -4088,7 +4089,7 @@ let UsersViewAllComponent = class UsersViewAllComponent extends TechlifyListComp
             .subscribe(_ => this.alertService.addAlert('Password reset email sent', 'success'));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UsersViewAllComponent, deps: [{ token: AlertService }, { token: CurrentUserService }, { token: UserConfigService }, { token: i1.MatDialog }, { token: UserService }, { token: i1$5.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: UsersViewAllComponent, selector: "app-users-view-all", inputs: { clientId: "clientId", userTypeIds: "userTypeIds", title: "title", isAppAdminUser: "isAppAdminUser" }, usesInheritance: true, ngImport: i0, template: "<div [ngClass]=\"{'m-4':config?.userConfig?.showDefaultMargin}\">\n  <mat-card class=\"mb-2\">\n    <mat-card-content class=\"d-flex justify-content-between align-items-center gap-2\">\n      <section class=\"d-flex justify-content-start align-items-center gap-2\">\n        <h5 class=\"mb-0\"> {{ title }} </h5>\n        <mat-icon class=\"cursor-pointer\" matTooltip=\"New User\"\n          *ngIf=\"config?.userConfig?.showAddUser && currentUserService?.hasPermission('user_create')\"\n          (click)=\"createOrEditUser()\">add</mat-icon>\n        <button mat-raised-button type=\"button\" [routerLink]=\"['../import']\"\n          *ngIf=\"config?.userConfig?.showImportButton && currentUserService?.hasPermission('user_create')\">\n          Import User\n        </button>\n        <button mat-raised-button type=\"button\" [routerLink]=\"['../roles']\" *ngIf=\"config?.userConfig?.showRoles\">\n          <mat-icon>people</mat-icon>\n          Roles\n        </button>\n        <button mat-raised-button type=\"button\" [routerLink]=\"['../role-permissions']\"\n          *ngIf=\"config?.userConfig?.showPermissions\">\n          <mat-icon>lock</mat-icon>\n          Role Permissions\n        </button>\n        <button mat-raised-button type=\"button\" [routerLink]=\"['../configurations']\"\n          *ngIf=\"config?.userConfig?.showConfigurations && currentUser?.user_type_id === 2\">\n          <mat-icon>\n            <span class=\"material-icons-outlined\">\n              toggle_on\n            </span>\n          </mat-icon>\n          Configurations\n        </button>\n        <button mat-raised-button type=\"button\" [routerLink]=\"['../restrictors']\"\n          *ngIf=\"config?.userConfig?.showRestrictors && currentUser?.user_type_id === 2\">\n          <mat-icon>\n            <span class=\"material-icons-outlined\">\n              vpn_lock\n            </span>\n          </mat-icon>\n          Restrictors\n        </button>\n      </section>\n      <form [formGroup]=\"filterForm\" class=\"d-flex flex-row justify-content-center align-items-center gap-2\">\n        <mat-form-field appearance=\"outline\" class='fl-md'>\n          <mat-label>Search</mat-label>\n          <input autocomplete=\"off\" matInput type=\"text\" name=\"search\" placeholder=\"Search by name, email\"\n            formControlName=\"search\">\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\" class='fl-sm'>\n          <mat-label>Role</mat-label>\n          <app-searchable-selector apiUrl=\"api/roles\" [multiple]=\"true\" formControlName=\"role_ids\"\n            titleField=\"label\"></app-searchable-selector>\n        </mat-form-field>\n        <mat-button-toggle-group class='mb-4' [hideSingleSelectionIndicator]=\"true\"\n          [hideMultipleSelectionIndicator]=\"true\" formControlName=\"status\" multiple>\n          <mat-button-toggle value=\"enabled\">Enabled</mat-button-toggle>\n          <mat-button-toggle value=\"disabled\">Disabled</mat-button-toggle>\n        </mat-button-toggle-group>\n      </form>\n    </mat-card-content>\n  </mat-card>\n  <mat-card class=\"mt-2 p-0\">\n    <mat-card-content>\n      <table mat-table [dataSource]=\"models\" class=\"w-100\" aria-describedby=\"Users\" infiniteScroll\n        [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\" [infiniteScrollContainer]=\"scrollContainer\"\n        [fromRoot]=\"true\" (scrolled)=\"onScroll()\" matSort (matSortChange)=\"sortColumn($event)\">\n        <!-- Index Column -->\n        <ng-container matColumnDef=\"index\">\n          <th mat-header-cell *matHeaderCellDef> # </th>\n          <td mat-cell *matCellDef=\"let element; let i = index;\"> {{ i + 1 }} </td>\n        </ng-container>\n\n        <!-- Name Column -->\n        <ng-container matColumnDef=\"name\">\n          <th mat-header-cell mat-sort-header=\"name\" *matHeaderCellDef> Name </th>\n          <td mat-cell *matCellDef=\"let element\">\n            <a [routerLink]=\"[element?.id]\" class=\"text-decoration-none\">\n              {{ element.name }}\n            </a>\n            <p class=\"mb-0 text-secondary\">\n              <!-- !element?.user_client condition added to check if user has user_client record -->\n              {{ !element?.user_client ? '' : element?.user_client?.is_enabled ? 'Enabled' : 'Disabled' }}\n            </p>\n          </td>\n        </ng-container>\n\n        <!-- Email Column -->\n        <ng-container matColumnDef=\"email\">\n          <th mat-header-cell mat-sort-header=\"email\" *matHeaderCellDef> Email </th>\n          <td mat-cell *matCellDef=\"let element\"> {{element.email}} </td>\n        </ng-container>\n\n        <!-- Type Column -->\n        <ng-container matColumnDef=\"type\">\n          <th mat-header-cell mat-sort-header=\"user_type_id\" *matHeaderCellDef> User Type </th>\n          <td mat-cell *matCellDef=\"let element\"> {{ getUserType(element) }} </td>\n        </ng-container>\n\n        <!-- Roles Column -->\n        <ng-container matColumnDef=\"roles\">\n          <th mat-header-cell *matHeaderCellDef> Role </th>\n          <td mat-cell *matCellDef=\"let element\">\n            <div class=\"d-flex justify-content-start align-items-center gap-1 flex-wrap text-light\">\n              <span *ngFor=\"let role of element?.roles\" class=\"badge bg-secondary\">\n                {{ role?.label }}\n              </span>\n            </div>\n          </td>\n        </ng-container>\n\n        <!-- Last Login Column -->\n        <ng-container matColumnDef=\"last_login\">\n          <th mat-header-cell *matHeaderCellDef> Last Login </th>\n          <td mat-cell *matCellDef=\"let element\">{{ element?.last_login | date:'medium' }}</td>\n        </ng-container>\n\n        <!-- Added By Column -->\n        <ng-container matColumnDef=\"added_by\">\n          <th mat-header-cell *matHeaderCellDef> Added By </th>\n          <td mat-cell *matCellDef=\"let element\">\n            <p class=\"mb-0\">{{ element?.creator?.name }}</p>\n            <p class=\"text-secondary\">{{ element?.created_at | date }}</p>\n          </td>\n        </ng-container>\n\n        <!-- Actions Column -->\n        <ng-container matColumnDef=\"actions\">\n          <th mat-header-cell *matHeaderCellDef> Action </th>\n          <td mat-cell *matCellDef=\"let element\">\n            <div class=\"d-flex flex-row justify-content-start align-items-center gap-2 text-secondary\">\n              <app-techlify-icon role='button' name=\"view\" class=\"clickable\" [routerLink]=\"[getUserViewRoute(element)]\"\n                matTooltip=\"View\"></app-techlify-icon>\n\n              <app-techlify-icon role='button' *ngIf=\"currentUserService.hasPermission('user_update')\" name=\"edit\"\n                class=\"clickable\" (click)=\"createOrEditUser(element)\" matTooltip=\"Edit\"></app-techlify-icon>\n\n              <app-techlify-delete-button\n                *ngIf=\"currentUserService.hasPermission('user_delete') && element?.id !== currentUser?.id\"\n                [model]=\"element\" [service]=\"service\" [data]=\"{title: element?.name, type: 'user'}\"\n                (deleted)=\"reload()\"></app-techlify-delete-button>\n\n              <app-techlify-icon role='button'\n                *ngIf=\"currentUserService.hasPermission('techlify_rbac.user.reset_password')\" name=\"reset\"\n                class=\"clickable\" (click)=\"resetPassword(element)\" matTooltip=\"Reset User Password\"></app-techlify-icon>\n\n              <app-user-enable-button [user]=\"element\" (onSave)=\"reload()\"></app-user-enable-button>\n            </div>\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      <mat-progress-bar *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n    </mat-card-content>\n  </mat-card>\n</div>", dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.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: i8$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$4.MatLabel, selector: "mat-label" }, { 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: "directive", type: i11.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i11.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i12.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i12.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i12.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i12.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i12.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i12.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i12.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i12.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i12.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i12.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i3$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i11$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6$2.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "component", type: SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "per_page", "inDataSearch", "panelWidth", "focusSearchOnOpen", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange", "isItemsEmpty"] }, { kind: "component", type: UserEnableButtonComponent, selector: "app-user-enable-button", inputs: ["user", "isUseIcons"], outputs: ["onSave"] }, { kind: "component", type: TechlifyIconComponent, selector: "app-techlify-icon", inputs: ["name", "size"] }, { kind: "component", type: TechlifyDeleteButtonComponent, selector: "app-techlify-delete-button", inputs: ["data", "model", "message", "service"], outputs: ["deleted"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: UsersViewAllComponent, selector: "app-users-view-all", inputs: { clientId: "clientId", userTypeIds: "userTypeIds", title: "title", isAppAdminUser: "isAppAdminUser" }, usesInheritance: true, ngImport: i0, template: "<div [ngClass]=\"{'m-4':config?.userConfig?.showDefaultMargin}\">\n  <mat-card class=\"mb-2\">\n    <mat-card-content class=\"d-flex justify-content-between align-items-center gap-2\">\n      <section class=\"d-flex justify-content-start align-items-center gap-2\">\n        <h5 class=\"mb-0\"> {{ title }} </h5>\n        <mat-icon class=\"cursor-pointer\" matTooltip=\"New User\"\n          *ngIf=\"config?.userConfig?.showAddUser && currentUserService?.hasPermission('user_create')\"\n          (click)=\"createOrEditUser()\">add</mat-icon>\n        <button mat-raised-button type=\"button\" [routerLink]=\"['../import']\"\n          *ngIf=\"config?.userConfig?.showImportButton && currentUserService?.hasPermission('user_create')\">\n          Import User\n        </button>\n        <button mat-raised-button type=\"button\" [routerLink]=\"['../roles']\" *ngIf=\"config?.userConfig?.showRoles\">\n          <mat-icon>people</mat-icon>\n          Roles\n        </button>\n        <button mat-raised-button type=\"button\" [routerLink]=\"['../role-permissions']\"\n          *ngIf=\"config?.userConfig?.showPermissions\">\n          <mat-icon>lock</mat-icon>\n          Role Permissions\n        </button>\n        <button mat-raised-button type=\"button\" [routerLink]=\"['../configurations']\"\n          *ngIf=\"config?.userConfig?.showConfigurations && currentUser?.user_type_id === 2\">\n          <mat-icon>\n            <span class=\"material-icons-outlined\">\n              toggle_on\n            </span>\n          </mat-icon>\n          Configurations\n        </button>\n        <button mat-raised-button type=\"button\" [routerLink]=\"['../restrictors']\"\n          *ngIf=\"config?.userConfig?.showRestrictors && currentUser?.user_type_id === 2\">\n          <mat-icon>\n            <span class=\"material-icons-outlined\">\n              vpn_lock\n            </span>\n          </mat-icon>\n          Restrictors\n        </button>\n      </section>\n      <form [formGroup]=\"filterForm\" class=\"d-flex flex-row justify-content-center align-items-center gap-2\">\n        <mat-form-field appearance=\"outline\" class='fl-md'>\n          <mat-label>Search</mat-label>\n          <input autocomplete=\"off\" matInput type=\"text\" name=\"search\" placeholder=\"Search by name, email\"\n            formControlName=\"search\">\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\" class='fl-sm'>\n          <mat-label>Role</mat-label>\n          <app-searchable-selector apiUrl=\"api/roles\" [multiple]=\"true\" formControlName=\"role_ids\"\n            titleField=\"label\"></app-searchable-selector>\n        </mat-form-field>\n        <mat-button-toggle-group class='mb-4' [hideSingleSelectionIndicator]=\"true\"\n          [hideMultipleSelectionIndicator]=\"true\" formControlName=\"status\" multiple>\n          <mat-button-toggle value=\"enabled\">Enabled</mat-button-toggle>\n          <mat-button-toggle value=\"disabled\">Disabled</mat-button-toggle>\n        </mat-button-toggle-group>\n      </form>\n    </mat-card-content>\n  </mat-card>\n  <mat-card class=\"mt-2 p-0\">\n    <mat-card-content>\n      <table mat-table [dataSource]=\"models\" class=\"w-100\" aria-describedby=\"Users\" infiniteScroll\n        [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\" [infiniteScrollContainer]=\"scrollContainer\"\n        [fromRoot]=\"true\" (scrolled)=\"onScroll()\" matSort (matSortChange)=\"sortColumn($event)\">\n        <!-- Index Column -->\n        <ng-container matColumnDef=\"index\">\n          <th mat-header-cell *matHeaderCellDef> # </th>\n          <td mat-cell *matCellDef=\"let element; let i = index;\"> {{ i + 1 }} </td>\n        </ng-container>\n\n        <!-- Name Column -->\n        <ng-container matColumnDef=\"name\">\n          <th mat-header-cell mat-sort-header=\"name\" *matHeaderCellDef> Name </th>\n          <td mat-cell *matCellDef=\"let element\">\n            <a [routerLink]=\"[element?.id]\" class=\"text-decoration-none\">\n              {{ element.name }}\n            </a>\n            <p class=\"mb-0 text-secondary\">\n              <!-- !element?.user_client condition added to check if user has user_client record -->\n              {{ !element?.user_client ? '' : element?.user_client?.is_enabled ? 'Enabled' : 'Disabled' }}\n            </p>\n          </td>\n        </ng-container>\n\n        <!-- Email Column -->\n        <ng-container matColumnDef=\"email\">\n          <th mat-header-cell mat-sort-header=\"email\" *matHeaderCellDef> Email </th>\n          <td mat-cell *matCellDef=\"let element\"> {{element.email}} </td>\n        </ng-container>\n\n        <!-- Type Column -->\n        <ng-container matColumnDef=\"type\">\n          <th mat-header-cell mat-sort-header=\"user_type_id\" *matHeaderCellDef> User Type </th>\n          <td mat-cell *matCellDef=\"let element\"> {{ getUserType(element) }} </td>\n        </ng-container>\n\n        <!-- Roles Column -->\n        <ng-container matColumnDef=\"roles\">\n          <th mat-header-cell *matHeaderCellDef> Role </th>\n          <td mat-cell *matCellDef=\"let element\">\n            <div class=\"d-flex justify-content-start align-items-center gap-1 flex-wrap text-light\">\n              <span *ngFor=\"let role of element?.roles\" class=\"badge bg-secondary\">\n                {{ role?.label }}\n              </span>\n            </div>\n          </td>\n        </ng-container>\n\n        <!-- Last Login Column -->\n        <ng-container matColumnDef=\"last_login\">\n          <th mat-header-cell *matHeaderCellDef> Last Login </th>\n          <td mat-cell *matCellDef=\"let element\">{{ element?.last_login | date:'medium' }}</td>\n        </ng-container>\n\n        <!-- Added By Column -->\n        <ng-container matColumnDef=\"added_by\">\n          <th mat-header-cell *matHeaderCellDef> Added By </th>\n          <td mat-cell *matCellDef=\"let element\">\n            <p class=\"mb-0\">{{ element?.creator?.name }}</p>\n            <p class=\"text-secondary\">{{ element?.created_at | date }}</p>\n          </td>\n        </ng-container>\n\n        <!-- Actions Column -->\n        <ng-container matColumnDef=\"actions\">\n          <th mat-header-cell *matHeaderCellDef> Action </th>\n          <td mat-cell *matCellDef=\"let element\">\n            <div class=\"d-flex flex-row justify-content-start align-items-center gap-2 text-secondary\">\n              <app-techlify-icon role='button' name=\"view\" class=\"clickable\" [routerLink]=\"[getUserViewRoute(element)]\"\n                matTooltip=\"View\"></app-techlify-icon>\n\n              <app-techlify-icon role='button' *ngIf=\"currentUserService.hasPermission('user_update')\" name=\"edit\"\n                class=\"clickable\" (click)=\"createOrEditUser(element)\" matTooltip=\"Edit\"></app-techlify-icon>\n\n              <app-techlify-delete-button\n                *ngIf=\"currentUserService.hasPermission('user_delete') && element?.id !== currentUser?.id\"\n                [model]=\"element\" [service]=\"service\" [data]=\"{title: element?.name, type: 'user'}\"\n                (deleted)=\"reload()\"></app-techlify-delete-button>\n\n              <app-techlify-icon role='button'\n                *ngIf=\"currentUserService.hasPermission('techlify_rbac.user.reset_password')\" name=\"reset\"\n                class=\"clickable\" (click)=\"resetPassword(element)\" matTooltip=\"Reset User Password\"></app-techlify-icon>\n\n              <app-user-enable-button [user]=\"element\" (onSave)=\"reload()\"></app-user-enable-button>\n            </div>\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      <mat-progress-bar *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n    </mat-card-content>\n  </mat-card>\n</div>", dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.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: i8$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$4.MatLabel, selector: "mat-label" }, { 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: "directive", type: i11.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i11.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i12.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i12.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i12.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i12.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i12.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i12.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i12.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i12.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i12.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i12.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i3$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i11$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6$2.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "component", type: 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", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange", "isItemsEmpty"] }, { kind: "component", type: UserEnableButtonComponent, selector: "app-user-enable-button", inputs: ["user", "isUseIcons"], outputs: ["onSave"] }, { kind: "component", type: TechlifyIconComponent, selector: "app-techlify-icon", inputs: ["name", "size"] }, { kind: "component", type: TechlifyDeleteButtonComponent, selector: "app-techlify-delete-button", inputs: ["data", "model", "message", "service"], outputs: ["deleted"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }] }); }
 };
 UsersViewAllComponent = __decorate([
     UntilDestroy()
@@ -4681,7 +4682,7 @@ let AuditLogListFilterComponent = class AuditLogListFilterComponent {
     ngOnDestroy() {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AuditLogListFilterComponent, deps: [{ token: FormValidatorService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: AuditLogListFilterComponent, selector: "app-audit-log-list-filter", inputs: { filterForm: "filterForm", objectId: "objectId", objectType: "objectType" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<form [formGroup]=\"filterForm\" class=\"d-flex justify-content-end align-items-center gap-2 w-100\">\n  <mat-form-field class='fl-md'>\n    <mat-label>Search Changes</mat-label>\n    <input type=\"text\" matInput formControlName=\"change_search\" />\n    <button *ngIf=\"getFieldValue('change_search')\" matSuffix mat-icon-button (click)=\"resetFieldValue('change_search')\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <app-timeline-filter class='fl-sm' labelText=\"Activity Date\" formControlName=\"duration\"\n    [form]=\"filterForm\" [showClearButton]=\"true\" appearance=\"outline\"></app-timeline-filter>\n\n  <mat-form-field class='fl-sm'>\n    <mat-label>Action</mat-label>\n    <mat-select formControlName=\"action\" [multiple]=\"true\">\n      <mat-option value=\"created\">Created</mat-option>\n      <mat-option value=\"updated\">Updated</mat-option>\n      <mat-option value=\"deleted\">Deleted</mat-option>\n    </mat-select>\n    <button *ngIf=\"getFieldValue('action')\" matSuffix mat-icon-button (click)=\"resetFieldValue('action')\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field class='fl-sm' *ngIf=\"showObjectFilter\">\n    <mat-label>Model Type</mat-label>\n    <app-searchable-selector formControlName=\"object_type\" apiUrl=\"api/audit-log-types\" titleField=\"object_type\"\n      valueField=\"object_type\" [sort]=\"false\" [multiple]=\"true\">\n    </app-searchable-selector>\n    <button *ngIf=\"getFieldValue('object_type')\" matSuffix mat-icon-button (click)=\"resetFieldValue('object_type')\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field class='fl-sm'>\n    <mat-label>Model #</mat-label>\n    <input type=\"text\" matInput formControlName=\"model_search\" />\n    <button *ngIf=\"getFieldValue('model_search')\" matSuffix mat-icon-button (click)=\"resetFieldValue('model_search')\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field class='fl-sm'>\n    <mat-label>Creator</mat-label>\n    <app-searchable-selector formControlName=\"creator_ids\" [multiple]=\"true\" apiUrl=\"api/users\"\n      titleField=\"name\"></app-searchable-selector>\n    <button *ngIf=\"getFieldValue('creator_ids')\" matSuffix mat-icon-button (click)=\"resetFieldValue('creator_ids')\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n</form>", styles: [""], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8$4.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: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9$1.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: SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "per_page", "inDataSearch", "panelWidth", "focusSearchOnOpen", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange", "isItemsEmpty"] }, { kind: "component", type: TimelineFilterComponent, selector: "app-timeline-filter", inputs: ["defaultValue", "required", "disabled", "value", "timelines", "dateFrom", "dateTo", "appearance", "showClearButton", "form", "labelText"], outputs: ["selectionChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: AuditLogListFilterComponent, selector: "app-audit-log-list-filter", inputs: { filterForm: "filterForm", objectId: "objectId", objectType: "objectType" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<form [formGroup]=\"filterForm\" class=\"d-flex justify-content-end align-items-center gap-2 w-100\">\n  <mat-form-field class='fl-md'>\n    <mat-label>Search Changes</mat-label>\n    <input type=\"text\" matInput formControlName=\"change_search\" />\n    <button *ngIf=\"getFieldValue('change_search')\" matSuffix mat-icon-button (click)=\"resetFieldValue('change_search')\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <app-timeline-filter class='fl-sm' labelText=\"Activity Date\" formControlName=\"duration\"\n    [form]=\"filterForm\" [showClearButton]=\"true\" appearance=\"outline\"></app-timeline-filter>\n\n  <mat-form-field class='fl-sm'>\n    <mat-label>Action</mat-label>\n    <mat-select formControlName=\"action\" [multiple]=\"true\">\n      <mat-option value=\"created\">Created</mat-option>\n      <mat-option value=\"updated\">Updated</mat-option>\n      <mat-option value=\"deleted\">Deleted</mat-option>\n    </mat-select>\n    <button *ngIf=\"getFieldValue('action')\" matSuffix mat-icon-button (click)=\"resetFieldValue('action')\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field class='fl-sm' *ngIf=\"showObjectFilter\">\n    <mat-label>Model Type</mat-label>\n    <app-searchable-selector formControlName=\"object_type\" apiUrl=\"api/audit-log-types\" titleField=\"object_type\"\n      valueField=\"object_type\" [sort]=\"false\" [multiple]=\"true\">\n    </app-searchable-selector>\n    <button *ngIf=\"getFieldValue('object_type')\" matSuffix mat-icon-button (click)=\"resetFieldValue('object_type')\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field class='fl-sm'>\n    <mat-label>Model #</mat-label>\n    <input type=\"text\" matInput formControlName=\"model_search\" />\n    <button *ngIf=\"getFieldValue('model_search')\" matSuffix mat-icon-button (click)=\"resetFieldValue('model_search')\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field class='fl-sm'>\n    <mat-label>Creator</mat-label>\n    <app-searchable-selector formControlName=\"creator_ids\" [multiple]=\"true\" apiUrl=\"api/users\"\n      titleField=\"name\"></app-searchable-selector>\n    <button *ngIf=\"getFieldValue('creator_ids')\" matSuffix mat-icon-button (click)=\"resetFieldValue('creator_ids')\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n</form>", styles: [""], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8$4.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: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9$1.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: 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", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange", "isItemsEmpty"] }, { kind: "component", type: TimelineFilterComponent, selector: "app-timeline-filter", inputs: ["defaultValue", "required", "disabled", "value", "timelines", "dateFrom", "dateTo", "appearance", "showClearButton", "form", "labelText"], outputs: ["selectionChange"] }] }); }
 };
 AuditLogListFilterComponent = __decorate([
     UntilDestroy()
@@ -6653,7 +6654,7 @@ let EmailSubscriptionUserFormComponent = class EmailSubscriptionUserFormComponen
         // Needed for automatic unsubscribe with untilDestroyed
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EmailSubscriptionUserFormComponent, deps: [{ token: i1$5.UntypedFormBuilder }, { token: FormValidatorService }, { token: AlertService }, { token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: HttpService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: EmailSubscriptionUserFormComponent, selector: "app-email-subscription-user-form", ngImport: i0, template: "<form [formGroup]=\"esUserFormGroup\" (ngSubmit)=\"submit()\" class=\"mat-typography\">\n    <div fxLayout=\"column\">\n        <div mat-dialog-title class=\"text-center\">\n            <div>Email Subscription User</div>\n        </div>\n\n        <div mat-dialog-content fxLayout=\"column\">\n            <div fxLayout=\"row wrap\" fxLayoutAlign=\"space-between center\">\n\n                <mat-form-field fxFlex=\"48%\" class=\"mt-1\">\n                    <mat-label>User</mat-label>\n                    <app-searchable-selector formControlName=\"user_id\" apiUrl=\"api/users\" titleField=\"name\" required\n                        [selectedValue]=\"selectedUser\">\n                    </app-searchable-selector>\n                    <mat-error *ngIf=\"isFieldValid('user_id')\">{{getErrorMessage('user_id')}}</mat-error>\n                </mat-form-field>\n\n                <mat-form-field fxFlex=\"48%\" class=\"mt-1\">\n                    <mat-label>Email Type</mat-label>\n                    <app-searchable-selector formControlName=\"email_type_id\" apiUrl=\"api/email-subscription-types\"\n                        required [selectedValue]=\"selectedType\">\n                    </app-searchable-selector>\n                    <mat-error *ngIf=\"isFieldValid('email_type_id')\">{{getErrorMessage('email_type_id')}}</mat-error>\n                </mat-form-field>\n\n                <div class=\"my-2\" fxLayout=\"row\" fxLayoutGap=\"30px\" fxLayoutAlign=\"end\" fxFlex=\"100%\">\n                    <button mat-raised-button type=\"button\" (click)=\"cancel()\">Cancel</button>\n                    <button mat-raised-button type=\"submit\" color=\"primary\" [disabled]=\"isSubmitLoading\">\n                        <app-loader class=\"inline-loader\" [isLoading]=\"isSubmitLoading\"></app-loader>\n                        Save\n                    </button>\n                </div>\n            </div>\n        </div>\n\n\n    </div>\n</form>", styles: [""], dependencies: [{ kind: "directive", type: i3.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: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i8$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8$4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6$1.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: i6$1.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: i6$1.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: i6$1.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: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "per_page", "inDataSearch", "panelWidth", "focusSearchOnOpen", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange", "isItemsEmpty"] }, { kind: "component", type: LoaderComponent, selector: "app-loader", inputs: ["isLoading", "size", "message"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: EmailSubscriptionUserFormComponent, selector: "app-email-subscription-user-form", ngImport: i0, template: "<form [formGroup]=\"esUserFormGroup\" (ngSubmit)=\"submit()\" class=\"mat-typography\">\n    <div fxLayout=\"column\">\n        <div mat-dialog-title class=\"text-center\">\n            <div>Email Subscription User</div>\n        </div>\n\n        <div mat-dialog-content fxLayout=\"column\">\n            <div fxLayout=\"row wrap\" fxLayoutAlign=\"space-between center\">\n\n                <mat-form-field fxFlex=\"48%\" class=\"mt-1\">\n                    <mat-label>User</mat-label>\n                    <app-searchable-selector formControlName=\"user_id\" apiUrl=\"api/users\" titleField=\"name\" required\n                        [selectedValue]=\"selectedUser\">\n                    </app-searchable-selector>\n                    <mat-error *ngIf=\"isFieldValid('user_id')\">{{getErrorMessage('user_id')}}</mat-error>\n                </mat-form-field>\n\n                <mat-form-field fxFlex=\"48%\" class=\"mt-1\">\n                    <mat-label>Email Type</mat-label>\n                    <app-searchable-selector formControlName=\"email_type_id\" apiUrl=\"api/email-subscription-types\"\n                        required [selectedValue]=\"selectedType\">\n                    </app-searchable-selector>\n                    <mat-error *ngIf=\"isFieldValid('email_type_id')\">{{getErrorMessage('email_type_id')}}</mat-error>\n                </mat-form-field>\n\n                <div class=\"my-2\" fxLayout=\"row\" fxLayoutGap=\"30px\" fxLayoutAlign=\"end\" fxFlex=\"100%\">\n                    <button mat-raised-button type=\"button\" (click)=\"cancel()\">Cancel</button>\n                    <button mat-raised-button type=\"submit\" color=\"primary\" [disabled]=\"isSubmitLoading\">\n                        <app-loader class=\"inline-loader\" [isLoading]=\"isSubmitLoading\"></app-loader>\n                        Save\n                    </button>\n                </div>\n            </div>\n        </div>\n\n\n    </div>\n</form>", styles: [""], dependencies: [{ kind: "directive", type: i3.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: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i8$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8$4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6$1.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: i6$1.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: i6$1.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: i6$1.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: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: 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", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange", "isItemsEmpty"] }, { kind: "component", type: LoaderComponent, selector: "app-loader", inputs: ["isLoading", "size", "message"] }] }); }
 };
 EmailSubscriptionUserFormComponent = __decorate([
     UntilDestroy()
@@ -6726,7 +6727,7 @@ let EmailSubscriptionUserListFilterComponent = class EmailSubscriptionUserListFi
     ngOnDestroy() {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EmailSubscriptionUserListFilterComponent, deps: [{ token: i1$5.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: EmailSubscriptionUserListFilterComponent, selector: "app-email-subscription-user-list-filter", outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<form [formGroup]=\"esUserFilterForm\" fxLayout=\"row wrap\" fxLayoutGap=\"1rem\" fxLayoutAlign=\"start center\">\n    <mat-form-field class=\"ml-3\">\n        <mat-label>User</mat-label>\n        <app-searchable-selector formControlName=\"user_id\" apiUrl=\"api/users\" titleField=\"name\">\n        </app-searchable-selector>\n        <button *ngIf=\"getFieldValue('user_id')\" matSuffix mat-icon-button (click)=\"resetFieldValue('user_id')\">\n            <mat-icon>close</mat-icon>\n        </button>\n    </mat-form-field>\n\n    <mat-form-field class=\"ml-3\">\n        <mat-label>Email Type</mat-label>\n        <app-searchable-selector formControlName=\"email_type_id\" apiUrl=\"api/email-subscription-types\">\n        </app-searchable-selector>\n        <button *ngIf=\"getFieldValue('email_type_id')\" matSuffix mat-icon-button\n            (click)=\"resetFieldValue('email_type_id')\">\n            <mat-icon>close</mat-icon>\n        </button>\n    </mat-form-field>\n</form>", styles: [""], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8$4.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: i6$1.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: i6$1.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: i6$1.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: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "per_page", "inDataSearch", "panelWidth", "focusSearchOnOpen", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange", "isItemsEmpty"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: EmailSubscriptionUserListFilterComponent, selector: "app-email-subscription-user-list-filter", outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<form [formGroup]=\"esUserFilterForm\" fxLayout=\"row wrap\" fxLayoutGap=\"1rem\" fxLayoutAlign=\"start center\">\n    <mat-form-field class=\"ml-3\">\n        <mat-label>User</mat-label>\n        <app-searchable-selector formControlName=\"user_id\" apiUrl=\"api/users\" titleField=\"name\">\n        </app-searchable-selector>\n        <button *ngIf=\"getFieldValue('user_id')\" matSuffix mat-icon-button (click)=\"resetFieldValue('user_id')\">\n            <mat-icon>close</mat-icon>\n        </button>\n    </mat-form-field>\n\n    <mat-form-field class=\"ml-3\">\n        <mat-label>Email Type</mat-label>\n        <app-searchable-selector formControlName=\"email_type_id\" apiUrl=\"api/email-subscription-types\">\n        </app-searchable-selector>\n        <button *ngIf=\"getFieldValue('email_type_id')\" matSuffix mat-icon-button\n            (click)=\"resetFieldValue('email_type_id')\">\n            <mat-icon>close</mat-icon>\n        </button>\n    </mat-form-field>\n</form>", styles: [""], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8$4.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: i6$1.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: i6$1.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: i6$1.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: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: 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", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange", "isItemsEmpty"] }] }); }
 };
 EmailSubscriptionUserListFilterComponent = __decorate([
     UntilDestroy()
@@ -7106,7 +7107,7 @@ let EmailSubscriptionTypeFormComponent = class EmailSubscriptionTypeFormComponen
         // Needed for automatic unsubscribe with untilDestroyed
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EmailSubscriptionTypeFormComponent, deps: [{ token: i1$5.UntypedFormBuilder }, { token: FormValidatorService }, { token: AlertService }, { token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: HttpService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: EmailSubscriptionTypeFormComponent, selector: "app-email-subscription-type-form", ngImport: i0, template: "<form [formGroup]=\"emailSubscriptionTypeFormGroup\" (ngSubmit)=\"submit()\" class=\"mat-typography\">\n    <div fxLayout=\"column\">\n        <div mat-dialog-title class=\"text-center\">\n            <div>Email Subscription Type</div>\n        </div>\n\n        <div mat-dialog-content fxLayout=\"column\">\n            <div fxLayout=\"row wrap\" fxLayoutAlign=\"space-between center\">\n\n                <mat-form-field fxFlex=\"100%\" class=\"mt-1\">\n                    <input matInput formControlName=\"title\" placeholder=\"Title\" autocomplete=\"off\" required />\n                    <mat-error *ngIf=\"isFieldValid('title')\">{{getErrorMessage('title')}}</mat-error>\n                </mat-form-field>\n\n                <mat-form-field fxFlex=\"100%\" class=\"mt-1\">\n                    <input matInput formControlName=\"code\" placeholder=\"Code\" autocomplete=\"off\" required />\n                    <mat-hint align=\"end\">Unique Value</mat-hint>\n                    <mat-error *ngIf=\"isFieldValid('code')\">{{getErrorMessage('code')}}</mat-error>\n                </mat-form-field>\n\n                <mat-form-field fxFlex=\"100%\" class=\"mt-1\">\n                    <mat-label>Frequency</mat-label>\n                    <app-searchable-selector formControlName=\"frequency_id\" apiUrl=\"api/email-subscription-frequencies\"\n                        [(selectedValue)]=\"selectedFrequency\" [enableSearch]=\"false\" required>\n                    </app-searchable-selector>\n                    <mat-error *ngIf=\"isFieldValid('frequency_id')\">{{getErrorMessage('frequency_id')}}\n                    </mat-error>\n                </mat-form-field>\n\n                <mat-form-field fxFlex=\"100%\" class=\"mt-1\">\n                    <textarea matInput formControlName=\"description\" placeholder=\"Description\"\n                        autocomplete=\"off\"></textarea>\n                </mat-form-field>\n\n                <div class=\"my-2\" fxLayout=\"row\" fxLayoutGap=\"30px\" fxLayoutAlign=\"end\" fxFlex=\"100%\">\n                    <button mat-raised-button type=\"button\" (click)=\"cancel()\">Cancel</button>\n                    <button mat-raised-button type=\"submit\" color=\"primary\" [disabled]=\"isSubmitLoading\">\n                        <app-loader class=\"inline-loader\" [isLoading]=\"isSubmitLoading\"></app-loader>\n                        Save\n                    </button>\n                </div>\n            </div>\n        </div>\n\n\n    </div>\n</form>", styles: [""], dependencies: [{ kind: "directive", type: i3.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: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i8$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8$4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i8$4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { 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: "directive", type: i6$1.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: i6$1.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: i6$1.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: i6$1.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: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "per_page", "inDataSearch", "panelWidth", "focusSearchOnOpen", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange", "isItemsEmpty"] }, { kind: "component", type: LoaderComponent, selector: "app-loader", inputs: ["isLoading", "size", "message"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: EmailSubscriptionTypeFormComponent, selector: "app-email-subscription-type-form", ngImport: i0, template: "<form [formGroup]=\"emailSubscriptionTypeFormGroup\" (ngSubmit)=\"submit()\" class=\"mat-typography\">\n    <div fxLayout=\"column\">\n        <div mat-dialog-title class=\"text-center\">\n            <div>Email Subscription Type</div>\n        </div>\n\n        <div mat-dialog-content fxLayout=\"column\">\n            <div fxLayout=\"row wrap\" fxLayoutAlign=\"space-between center\">\n\n                <mat-form-field fxFlex=\"100%\" class=\"mt-1\">\n                    <input matInput formControlName=\"title\" placeholder=\"Title\" autocomplete=\"off\" required />\n                    <mat-error *ngIf=\"isFieldValid('title')\">{{getErrorMessage('title')}}</mat-error>\n                </mat-form-field>\n\n                <mat-form-field fxFlex=\"100%\" class=\"mt-1\">\n                    <input matInput formControlName=\"code\" placeholder=\"Code\" autocomplete=\"off\" required />\n                    <mat-hint align=\"end\">Unique Value</mat-hint>\n                    <mat-error *ngIf=\"isFieldValid('code')\">{{getErrorMessage('code')}}</mat-error>\n                </mat-form-field>\n\n                <mat-form-field fxFlex=\"100%\" class=\"mt-1\">\n                    <mat-label>Frequency</mat-label>\n                    <app-searchable-selector formControlName=\"frequency_id\" apiUrl=\"api/email-subscription-frequencies\"\n                        [(selectedValue)]=\"selectedFrequency\" [enableSearch]=\"false\" required>\n                    </app-searchable-selector>\n                    <mat-error *ngIf=\"isFieldValid('frequency_id')\">{{getErrorMessage('frequency_id')}}\n                    </mat-error>\n                </mat-form-field>\n\n                <mat-form-field fxFlex=\"100%\" class=\"mt-1\">\n                    <textarea matInput formControlName=\"description\" placeholder=\"Description\"\n                        autocomplete=\"off\"></textarea>\n                </mat-form-field>\n\n                <div class=\"my-2\" fxLayout=\"row\" fxLayoutGap=\"30px\" fxLayoutAlign=\"end\" fxFlex=\"100%\">\n                    <button mat-raised-button type=\"button\" (click)=\"cancel()\">Cancel</button>\n                    <button mat-raised-button type=\"submit\" color=\"primary\" [disabled]=\"isSubmitLoading\">\n                        <app-loader class=\"inline-loader\" [isLoading]=\"isSubmitLoading\"></app-loader>\n                        Save\n                    </button>\n                </div>\n            </div>\n        </div>\n\n\n    </div>\n</form>", styles: [""], dependencies: [{ kind: "directive", type: i3.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: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i8$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8$4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i8$4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { 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: "directive", type: i6$1.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: i6$1.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: i6$1.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: i6$1.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: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: 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", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange", "isItemsEmpty"] }, { kind: "component", type: LoaderComponent, selector: "app-loader", inputs: ["isLoading", "size", "message"] }] }); }
 };
 EmailSubscriptionTypeFormComponent = __decorate([
     UntilDestroy()
@@ -9440,7 +9441,7 @@ let TechlifyTaggerTagSelectorComponent = class TechlifyTaggerTagSelectorComponen
         this._focusMonitor.stopMonitoring(this._elementRef);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TechlifyTaggerTagSelectorComponent, deps: [{ token: i1$4.FocusMonitor }, { token: i0.ElementRef }, { token: HttpService }, { token: MAT_FORM_FIELD, optional: true }, { token: i1$5.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TechlifyTaggerTagSelectorComponent, selector: "app-techlify-tagger-tag-selector", inputs: { categories: "categories", multiple: "multiple", enableSearch: "enableSearch", showAllTags: "showAllTags", useSelectButtonStyle: "useSelectButtonStyle", required: "required", disabled: "disabled", value: "value", placeholder: "placeholder" }, providers: [{ provide: MatFormFieldControl, useExisting: TechlifyTaggerTagSelectorComponent }], ngImport: i0, template: "<app-searchable-selector *ngIf=\"apiUrl && !useSelectButtonStyle\" [formControl]=\"tagSelectorCtrl\" [apiUrl]=\"apiUrl\"\n    [enableSearch]=\"enableSearch\" [multiple]=\"multiple\" (selectionChange)=\"selectionChange($event)\">\n</app-searchable-selector>\n\n<mat-button-toggle-group [hideSingleSelectionIndicator]=\"true\" [hideMultipleSelectionIndicator]=\"true\"\n    *ngIf=\"apiUrl && useSelectButtonStyle\" [formControl]=\"tagSelectorCtrl\" [multiple]=\"multiple\"\n    (change)=\"selectionChange($event.value)\">\n    <mat-button-toggle *ngFor=\"let tag of tags\" [value]=\"tag.id\">{{tag.title}}</mat-button-toggle>\n</mat-button-toggle-group>", styles: [""], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "per_page", "inDataSearch", "panelWidth", "focusSearchOnOpen", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange", "isItemsEmpty"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TechlifyTaggerTagSelectorComponent, selector: "app-techlify-tagger-tag-selector", inputs: { categories: "categories", multiple: "multiple", enableSearch: "enableSearch", showAllTags: "showAllTags", useSelectButtonStyle: "useSelectButtonStyle", required: "required", disabled: "disabled", value: "value", placeholder: "placeholder" }, providers: [{ provide: MatFormFieldControl, useExisting: TechlifyTaggerTagSelectorComponent }], ngImport: i0, template: "<app-searchable-selector *ngIf=\"apiUrl && !useSelectButtonStyle\" [formControl]=\"tagSelectorCtrl\" [apiUrl]=\"apiUrl\"\n    [enableSearch]=\"enableSearch\" [multiple]=\"multiple\" (selectionChange)=\"selectionChange($event)\">\n</app-searchable-selector>\n\n<mat-button-toggle-group [hideSingleSelectionIndicator]=\"true\" [hideMultipleSelectionIndicator]=\"true\"\n    *ngIf=\"apiUrl && useSelectButtonStyle\" [formControl]=\"tagSelectorCtrl\" [multiple]=\"multiple\"\n    (change)=\"selectionChange($event.value)\">\n    <mat-button-toggle *ngFor=\"let tag of tags\" [value]=\"tag.id\">{{tag.title}}</mat-button-toggle>\n</mat-button-toggle-group>", styles: [""], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: 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", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange", "isItemsEmpty"] }] }); }
 };
 TechlifyTaggerTagSelectorComponent = TechlifyTaggerTagSelectorComponent_1 = __decorate([
     UntilDestroy()
@@ -11416,7 +11417,7 @@ class AdminRolePermissionFormComponent extends TechlifyFormComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AdminRolePermissionFormComponent, deps: [{ token: FormValidatorService }, { token: i1.MatDialog }, { token: i1$5.UntypedFormBuilder }, { token: AdminRoleService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: AdminRolePermissionFormComponent, selector: "app-admin-role-permission-form", inputs: { isUpdate: "isUpdate", roleInfo: "roleInfo" }, outputs: { success: "success" }, usesInheritance: true, ngImport: i0, template: "<app-techlify-icon name=\"edit\" matTooltip=\"Edit\" (click)=\"formDialog(formTemplate)\"\n    class=\"clickable\"></app-techlify-icon>\n\n\n<ng-template #formTemplate>\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"this.isWorking\"></mat-progress-bar>\n    <form [formGroup]=\"form\" (ngSubmit)=\"submit()\">\n        <div fxLayout=\"column\" class=\"mat-typography\">\n            <div mat-dialog-title class=\"text-center\">\n                <div>Role Permission Form</div>\n            </div>\n\n            <div mat-dialog-content fxLayout=\"column\" fxLayoutGap=\"0.25rem\">\n                <mat-form-field appearance=\"outline\">\n                    <mat-label>Permission</mat-label>\n                    <app-searchable-selector appearance=\"outline\" formControlName=\"permission_ids\" titleField=\"label\"\n                        apiUrl=\"api/permissions\" sortBy=\"label|ASC\" [selectedValue]=\"selectedPermissions\"\n                        [multiple]=\"true\" [required]=\"true\"></app-searchable-selector>\n                    <mat-error *ngIf=\"isFieldValid('permission_ids')\">{{getErrorMessage('permission_ids')}}\n                    </mat-error>\n                </mat-form-field>\n\n                <div class=\"my-2\" fxLayout=\"row\" fxLayoutGap=\"30px\" fxLayoutAlign=\"end\" fxFlex=\"100%\">\n                    <button fxFlex mat-raised-button type=\"button\" matDialogClose class=\"white-bg-button\">\n                        Cancel\n                    </button>\n                    <button fxFlex mat-raised-button color=\"primary\" type=\"submit\">\n                        Save\n                    </button>\n                </div>\n            </div>\n        </div>\n    </form>\n</ng-template>", styles: [""], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "per_page", "inDataSearch", "panelWidth", "focusSearchOnOpen", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange", "isItemsEmpty"] }, { kind: "component", type: TechlifyIconComponent, selector: "app-techlify-icon", inputs: ["name", "size"] }, { 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: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i8$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8$4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i11$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i6$1.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: i6$1.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: i6$1.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: i6$1.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: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: AdminRolePermissionFormComponent, selector: "app-admin-role-permission-form", inputs: { isUpdate: "isUpdate", roleInfo: "roleInfo" }, outputs: { success: "success" }, usesInheritance: true, ngImport: i0, template: "<app-techlify-icon name=\"edit\" matTooltip=\"Edit\" (click)=\"formDialog(formTemplate)\"\n    class=\"clickable\"></app-techlify-icon>\n\n\n<ng-template #formTemplate>\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"this.isWorking\"></mat-progress-bar>\n    <form [formGroup]=\"form\" (ngSubmit)=\"submit()\">\n        <div fxLayout=\"column\" class=\"mat-typography\">\n            <div mat-dialog-title class=\"text-center\">\n                <div>Role Permission Form</div>\n            </div>\n\n            <div mat-dialog-content fxLayout=\"column\" fxLayoutGap=\"0.25rem\">\n                <mat-form-field appearance=\"outline\">\n                    <mat-label>Permission</mat-label>\n                    <app-searchable-selector appearance=\"outline\" formControlName=\"permission_ids\" titleField=\"label\"\n                        apiUrl=\"api/permissions\" sortBy=\"label|ASC\" [selectedValue]=\"selectedPermissions\"\n                        [multiple]=\"true\" [required]=\"true\"></app-searchable-selector>\n                    <mat-error *ngIf=\"isFieldValid('permission_ids')\">{{getErrorMessage('permission_ids')}}\n                    </mat-error>\n                </mat-form-field>\n\n                <div class=\"my-2\" fxLayout=\"row\" fxLayoutGap=\"30px\" fxLayoutAlign=\"end\" fxFlex=\"100%\">\n                    <button fxFlex mat-raised-button type=\"button\" matDialogClose class=\"white-bg-button\">\n                        Cancel\n                    </button>\n                    <button fxFlex mat-raised-button color=\"primary\" type=\"submit\">\n                        Save\n                    </button>\n                </div>\n            </div>\n        </div>\n    </form>\n</ng-template>", styles: [""], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: 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", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange", "isItemsEmpty"] }, { kind: "component", type: TechlifyIconComponent, selector: "app-techlify-icon", inputs: ["name", "size"] }, { 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: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i8$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8$4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i11$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i6$1.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: i6$1.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: i6$1.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: i6$1.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: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AdminRolePermissionFormComponent, decorators: [{
             type: Component,
@@ -12835,7 +12836,7 @@ class RestrictorsFormComponent {
         this.location.back();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RestrictorsFormComponent, deps: [{ token: i1$5.FormBuilder }, { token: i3.Location }, { token: RequestHelperService }, { token: AlertService }, { token: RestrictorService }, { token: i3.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: i3.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: i6$1.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: i6$1.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: i6$1.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: i6$1.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: 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: i8$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8$4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i11$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i11$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i9$1.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: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: IpRangeSelectorComponent, selector: "techlify-ip-range-selector", inputs: ["label"] }, { kind: "component", type: RestrictorLevelSelectorComponent, selector: "techlify-restrictor-level-selector", inputs: ["label", "multiple", "showLabel"] }, { kind: "component", type: SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "per_page", "inDataSearch", "panelWidth", "focusSearchOnOpen", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange", "isItemsEmpty"] }] }); }
+    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: i3.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: i6$1.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: i6$1.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: i6$1.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: i6$1.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: 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: i8$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8$4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i11$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i11$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i9$1.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: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: IpRangeSelectorComponent, selector: "techlify-ip-range-selector", inputs: ["label"] }, { kind: "component", type: RestrictorLevelSelectorComponent, selector: "techlify-restrictor-level-selector", inputs: ["label", "multiple", "showLabel"] }, { kind: "component", type: 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", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange", "isItemsEmpty"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RestrictorsFormComponent, decorators: [{
             type: Component,
@@ -14550,7 +14551,7 @@ class SubscriptionFormComponent extends TechlifyFormComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SubscriptionFormComponent, deps: [{ token: FormValidatorService }, { token: i1.MatDialog }, { token: i1$5.UntypedFormBuilder }, { token: SubscriptionService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SubscriptionFormComponent, selector: "app-subscription-form", inputs: { isUpdate: "isUpdate", subscriptionPackage: "subscriptionPackage", tenantSubscriptionInfo: "tenantSubscriptionInfo" }, outputs: { success: "success" }, usesInheritance: true, ngImport: i0, template: "<button *ngIf=\"!isUpdate\" matTooltip=\"Add Subscription\" type=\"button\" mat-icon-button\n    (click)=\"formDialog(formTemplate)\">\n    <mat-icon>add</mat-icon>\n</button>\n<button *ngIf=\"isUpdate\" matTooltip=\"Edit Subscription\" type=\"button\" mat-icon-button\n    (click)=\"formDialog(formTemplate)\">\n    <mat-icon>edit</mat-icon>\n</button>\n\n\n<ng-template #formTemplate>\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n    <form [formGroup]=\"form\" (ngSubmit)=\"submit()\">\n        <div fxLayout=\"column\" class=\"mat-typography\">\n            <div mat-dialog-title class=\"text-center\">\n                <div>{{subscriptionPackage?'Package':'Tenant'}} Subscription Form</div>\n            </div>\n\n            <div mat-dialog-content fxLayout=\"row wrap\" fxLayoutGap=\"0.5rem\">\n\n                <mat-form-field appearance=\"outline\" fxFlex=\"0 1 calc(50%-0.5rem)\">\n                    <mat-label>Tenant</mat-label>\n                    <app-searchable-selector appearance=\"outline\" formControlName=\"tenant_id\" titleField=\"name\"\n                        apiUrl=\"api/clients\" sortBy=\"name|ASC\"\n                        [selectedValue]=\"selectedTenant\"></app-searchable-selector>\n                    <mat-error *ngIf=\"isFieldValid('tenant_id')\">{{getErrorMessage('tenant_id')}}\n                    </mat-error>\n                </mat-form-field>\n\n                <mat-form-field appearance=\"outline\" fxFlex=\"0 1 calc(50%-0.5rem)\">\n                    <mat-label>Package</mat-label>\n                    <app-searchable-selector appearance=\"outline\" formControlName=\"package_id\"\n                        apiUrl=\"api/subscription-packages\" sortBy=\"title|ASC\"\n                        [selectedValue]=\"selectedPackage\"></app-searchable-selector>\n                    <mat-error *ngIf=\"isFieldValid('package_id')\">{{getErrorMessage('package_id')}}\n                    </mat-error>\n                </mat-form-field>\n\n\n                <div fxLayoutAlign=\"start center\" fxFlex=\"100\" class=\"mb-2\">\n                    <mat-button-toggle-group [hideSingleSelectionIndicator]=\"true\"\n                        [hideMultipleSelectionIndicator]=\"true\" formControlName=\"is_trail\" (change)=\"validateDates()\">\n                        <mat-button-toggle [value]=\"true\">Trail</mat-button-toggle>\n                        <mat-button-toggle [value]=\"false\">Paid</mat-button-toggle>\n                    </mat-button-toggle-group>\n                </div>\n\n                <ng-container *ngIf=\"!form.get('is_trail').value\">\n                    <mat-form-field fxFlex=\"0 1 calc(50%-0.5rem)\">\n                        <input matInput [matDatepicker]=\"started_at\" formControlName=\"started_at\"\n                            placeholder=\"Started At\" [required]=\"!form.get('is_trail').value\" />\n                        <mat-datepicker-toggle matSuffix [for]=\"started_at\"></mat-datepicker-toggle>\n                        <mat-datepicker #started_at></mat-datepicker>\n                        <mat-error *ngIf=\"isFieldValid('started_at')\">{{getErrorMessage('started_at')}}</mat-error>\n                    </mat-form-field>\n\n                    <mat-form-field fxFlex=\"0 1 calc(50%-0.5rem)\">\n                        <input matInput [matDatepicker]=\"ended_at\" formControlName=\"ended_at\" placeholder=\"Ended At\" />\n                        <mat-datepicker-toggle matSuffix [for]=\"ended_at\"></mat-datepicker-toggle>\n                        <mat-datepicker #ended_at></mat-datepicker>\n                    </mat-form-field>\n                </ng-container>\n\n                <ng-container *ngIf=\"form.get('is_trail').value\">\n                    <mat-form-field fxFlex=\"0 1 calc(50%-0.5rem)\">\n                        <input matInput [matDatepicker]=\"trail_started_at\" formControlName=\"trail_started_at\"\n                            placeholder=\"Trail Started At\" [required]=\"form.get('is_trail').value\" />\n                        <mat-datepicker-toggle matSuffix [for]=\"trail_started_at\"></mat-datepicker-toggle>\n                        <mat-datepicker #trail_started_at></mat-datepicker>\n                        <mat-error\n                            *ngIf=\"isFieldValid('trail_started_at')\">{{getErrorMessage('trail_started_at')}}</mat-error>\n                    </mat-form-field>\n\n                    <mat-form-field fxFlex=\"0 1 calc(50%-0.5rem)\">\n                        <input matInput [matDatepicker]=\"trail_ended_at\" formControlName=\"trail_ended_at\"\n                            placeholder=\"Trail Ended At\" [required]=\"form.get('is_trail').value\" />\n                        <mat-datepicker-toggle matSuffix [for]=\"trail_ended_at\"></mat-datepicker-toggle>\n                        <mat-datepicker #trail_ended_at></mat-datepicker>\n                        <mat-error\n                            *ngIf=\"isFieldValid('trail_ended_at')\">{{getErrorMessage('trail_ended_at')}}</mat-error>\n                    </mat-form-field>\n                </ng-container>\n\n                <mat-form-field appearance=\"outline\" fxFlex=\"0 1 calc(50%-0.5rem)\">\n                    <mat-label>Cost/Unit</mat-label>\n                    <input type=\"number\" matInput formControlName=\"cost_per_unit\" placeholder=\"Cost/Unit\" />\n                </mat-form-field>\n\n                <mat-form-field appearance=\"outline\" fxFlex=\"0 1 calc(50%-0.5rem)\">\n                    <mat-label>Units</mat-label>\n                    <input type=\"number\" matInput formControlName=\"units\" placeholder=\"Units\" />\n                </mat-form-field>\n\n                <div fxLayoutAlign=\"start center\" fxFlex=\"100\">\n                    <mat-slide-toggle class=\"switch\" formControlName=\"is_unit_limitation_enforced\">Is\n                        Unit Enforced\n                    </mat-slide-toggle>\n                </div>\n\n                <div class=\"my-2\" fxLayout=\"row\" fxLayoutGap=\"30px\" fxLayoutAlign=\"end\" fxFlex=\"100%\">\n                    <button fxFlex mat-raised-button type=\"button\" matDialogClose class=\"white-bg-button\">\n                        Cancel\n                    </button>\n                    <button fxFlex mat-raised-button color=\"primary\" type=\"submit\">\n                        Save\n                    </button>\n                </div>\n            </div>\n        </div>\n    </form>\n</ng-template>", styles: [""], dependencies: [{ kind: "directive", type: i3.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: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i8$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8$4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i8$4.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: i11$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i11$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i11$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i3$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i11$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i8$5.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "per_page", "inDataSearch", "panelWidth", "focusSearchOnOpen", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange", "isItemsEmpty"] }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6$1.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: i6$1.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: i6$1.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: i6$1.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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SubscriptionFormComponent, selector: "app-subscription-form", inputs: { isUpdate: "isUpdate", subscriptionPackage: "subscriptionPackage", tenantSubscriptionInfo: "tenantSubscriptionInfo" }, outputs: { success: "success" }, usesInheritance: true, ngImport: i0, template: "<button *ngIf=\"!isUpdate\" matTooltip=\"Add Subscription\" type=\"button\" mat-icon-button\n    (click)=\"formDialog(formTemplate)\">\n    <mat-icon>add</mat-icon>\n</button>\n<button *ngIf=\"isUpdate\" matTooltip=\"Edit Subscription\" type=\"button\" mat-icon-button\n    (click)=\"formDialog(formTemplate)\">\n    <mat-icon>edit</mat-icon>\n</button>\n\n\n<ng-template #formTemplate>\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n    <form [formGroup]=\"form\" (ngSubmit)=\"submit()\">\n        <div fxLayout=\"column\" class=\"mat-typography\">\n            <div mat-dialog-title class=\"text-center\">\n                <div>{{subscriptionPackage?'Package':'Tenant'}} Subscription Form</div>\n            </div>\n\n            <div mat-dialog-content fxLayout=\"row wrap\" fxLayoutGap=\"0.5rem\">\n\n                <mat-form-field appearance=\"outline\" fxFlex=\"0 1 calc(50%-0.5rem)\">\n                    <mat-label>Tenant</mat-label>\n                    <app-searchable-selector appearance=\"outline\" formControlName=\"tenant_id\" titleField=\"name\"\n                        apiUrl=\"api/clients\" sortBy=\"name|ASC\"\n                        [selectedValue]=\"selectedTenant\"></app-searchable-selector>\n                    <mat-error *ngIf=\"isFieldValid('tenant_id')\">{{getErrorMessage('tenant_id')}}\n                    </mat-error>\n                </mat-form-field>\n\n                <mat-form-field appearance=\"outline\" fxFlex=\"0 1 calc(50%-0.5rem)\">\n                    <mat-label>Package</mat-label>\n                    <app-searchable-selector appearance=\"outline\" formControlName=\"package_id\"\n                        apiUrl=\"api/subscription-packages\" sortBy=\"title|ASC\"\n                        [selectedValue]=\"selectedPackage\"></app-searchable-selector>\n                    <mat-error *ngIf=\"isFieldValid('package_id')\">{{getErrorMessage('package_id')}}\n                    </mat-error>\n                </mat-form-field>\n\n\n                <div fxLayoutAlign=\"start center\" fxFlex=\"100\" class=\"mb-2\">\n                    <mat-button-toggle-group [hideSingleSelectionIndicator]=\"true\"\n                        [hideMultipleSelectionIndicator]=\"true\" formControlName=\"is_trail\" (change)=\"validateDates()\">\n                        <mat-button-toggle [value]=\"true\">Trail</mat-button-toggle>\n                        <mat-button-toggle [value]=\"false\">Paid</mat-button-toggle>\n                    </mat-button-toggle-group>\n                </div>\n\n                <ng-container *ngIf=\"!form.get('is_trail').value\">\n                    <mat-form-field fxFlex=\"0 1 calc(50%-0.5rem)\">\n                        <input matInput [matDatepicker]=\"started_at\" formControlName=\"started_at\"\n                            placeholder=\"Started At\" [required]=\"!form.get('is_trail').value\" />\n                        <mat-datepicker-toggle matSuffix [for]=\"started_at\"></mat-datepicker-toggle>\n                        <mat-datepicker #started_at></mat-datepicker>\n                        <mat-error *ngIf=\"isFieldValid('started_at')\">{{getErrorMessage('started_at')}}</mat-error>\n                    </mat-form-field>\n\n                    <mat-form-field fxFlex=\"0 1 calc(50%-0.5rem)\">\n                        <input matInput [matDatepicker]=\"ended_at\" formControlName=\"ended_at\" placeholder=\"Ended At\" />\n                        <mat-datepicker-toggle matSuffix [for]=\"ended_at\"></mat-datepicker-toggle>\n                        <mat-datepicker #ended_at></mat-datepicker>\n                    </mat-form-field>\n                </ng-container>\n\n                <ng-container *ngIf=\"form.get('is_trail').value\">\n                    <mat-form-field fxFlex=\"0 1 calc(50%-0.5rem)\">\n                        <input matInput [matDatepicker]=\"trail_started_at\" formControlName=\"trail_started_at\"\n                            placeholder=\"Trail Started At\" [required]=\"form.get('is_trail').value\" />\n                        <mat-datepicker-toggle matSuffix [for]=\"trail_started_at\"></mat-datepicker-toggle>\n                        <mat-datepicker #trail_started_at></mat-datepicker>\n                        <mat-error\n                            *ngIf=\"isFieldValid('trail_started_at')\">{{getErrorMessage('trail_started_at')}}</mat-error>\n                    </mat-form-field>\n\n                    <mat-form-field fxFlex=\"0 1 calc(50%-0.5rem)\">\n                        <input matInput [matDatepicker]=\"trail_ended_at\" formControlName=\"trail_ended_at\"\n                            placeholder=\"Trail Ended At\" [required]=\"form.get('is_trail').value\" />\n                        <mat-datepicker-toggle matSuffix [for]=\"trail_ended_at\"></mat-datepicker-toggle>\n                        <mat-datepicker #trail_ended_at></mat-datepicker>\n                        <mat-error\n                            *ngIf=\"isFieldValid('trail_ended_at')\">{{getErrorMessage('trail_ended_at')}}</mat-error>\n                    </mat-form-field>\n                </ng-container>\n\n                <mat-form-field appearance=\"outline\" fxFlex=\"0 1 calc(50%-0.5rem)\">\n                    <mat-label>Cost/Unit</mat-label>\n                    <input type=\"number\" matInput formControlName=\"cost_per_unit\" placeholder=\"Cost/Unit\" />\n                </mat-form-field>\n\n                <mat-form-field appearance=\"outline\" fxFlex=\"0 1 calc(50%-0.5rem)\">\n                    <mat-label>Units</mat-label>\n                    <input type=\"number\" matInput formControlName=\"units\" placeholder=\"Units\" />\n                </mat-form-field>\n\n                <div fxLayoutAlign=\"start center\" fxFlex=\"100\">\n                    <mat-slide-toggle class=\"switch\" formControlName=\"is_unit_limitation_enforced\">Is\n                        Unit Enforced\n                    </mat-slide-toggle>\n                </div>\n\n                <div class=\"my-2\" fxLayout=\"row\" fxLayoutGap=\"30px\" fxLayoutAlign=\"end\" fxFlex=\"100%\">\n                    <button fxFlex mat-raised-button type=\"button\" matDialogClose class=\"white-bg-button\">\n                        Cancel\n                    </button>\n                    <button fxFlex mat-raised-button color=\"primary\" type=\"submit\">\n                        Save\n                    </button>\n                </div>\n            </div>\n        </div>\n    </form>\n</ng-template>", styles: [""], dependencies: [{ kind: "directive", type: i3.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: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i8$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8$4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i8$4.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: i11$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i11$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i11$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i3$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i11$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i8$5.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: 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", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange", "isItemsEmpty"] }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6$1.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: i6$1.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: i6$1.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: i6$1.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.14", ngImport: i0, type: SubscriptionFormComponent, decorators: [{
             type: Component,
@@ -14686,7 +14687,7 @@ let SubscriptionListingComponent = class SubscriptionListingComponent extends Te
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SubscriptionListingComponent, deps: [{ token: SubscriptionService }, { token: i1$5.UntypedFormBuilder }, { token: i1.MatDialog }, { token: i3.DatePipe }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SubscriptionListingComponent, selector: "app-subscription-listing", inputs: { subscriptionPackage: "subscriptionPackage" }, usesInheritance: true, ngImport: i0, template: "<div fxLayout=\"column\" class=\"m-2\">\n    <mat-card appearance=\"outlined\" fxLayout fxLayoutGap=\"0.5rem\" fxLayoutAlign=\"start center\">\n        <div fxLayout fxLayoutAlign=\"start center\">\n            <h5 class=\"m-0\">{{subscriptionPackage?'Package':'Tenant'}} Subscriptions</h5>\n            <app-subscription-form (success)=\"reload()\"\n                [subscriptionPackage]=\"subscriptionPackage\"></app-subscription-form>\n        </div>\n        <div fxFlex>\n        </div>\n        <form [formGroup]=\"filterForm\" fxLayout=\"row\" fxLayoutGap=\"0.3rem\" class=\"d-print-none\"\n            fxLayoutAlign=\"start start\">\n            <mat-form-field appearance=\"outline\" class=\" fl-md\">\n                <mat-label>Search</mat-label>\n                <input type=\"text\" matInput formControlName=\"search\" placeholder=\"Search Tenant, Details\"\n                    autocomplete=\"off\" />\n                <button *ngIf=\"filterForm.get('search').value\" matSuffix mat-icon-button\n                    (click)=\"resetFilter('search')\">\n                    <mat-icon>close</mat-icon>\n                </button>\n            </mat-form-field>\n\n\n            <mat-form-field class=\" fl-sm\" appearance=\"outline\" *ngIf=\"!subscriptionPackage\">\n                <mat-label>Package</mat-label>\n                <app-searchable-selector formControlName=\"package_ids\" apiUrl=\"api/subscription-packages\"\n                    [multiple]=\"true\">\n                </app-searchable-selector>\n                <button mat-icon-button matSuffix type=\"button\" *ngIf=\"filterForm.get('package_ids').value\"\n                    (click)=\"resetFilter('package_ids')\">\n                    <mat-icon>clear</mat-icon>\n                </button>\n            </mat-form-field>\n\n            <app-timeline-filter [showClearButton]=\"true\" [form]=\"filterForm\" appearance=\"outline\"\n                formControlName=\"date_period_id\" labelText=\"Start\">\n            </app-timeline-filter>\n\n            <mat-form-field class=\"fl-sm\" appearance=\"outline\">\n                <mat-label>Status</mat-label>\n                <mat-select formControlName=\"status_ids\" multiple>\n                    <mat-option [value]=\"1\">Active</mat-option>\n                    <mat-option [value]=\"2\">Inactive</mat-option>\n                </mat-select>\n                <button mat-icon-button matSuffix type=\"button\" *ngIf=\"filterForm.get('status_ids').value\"\n                    (click)=\"resetFilter('status_ids')\">\n                    <mat-icon>clear</mat-icon>\n                </button>\n            </mat-form-field>\n\n        </form>\n    </mat-card>\n    <mat-card appearance=\"outlined\" class=\"p-0 mt-2\">\n        <table mat-table matSort [dataSource]=\"models\" class=\"w-100\" infiniteScroll [infiniteScrollDistance]=\"2\"\n            [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" (matSortChange)=\"sortColumn($event)\">\n\n            <ng-container matColumnDef=\"index\">\n                <th mat-header-cell *matHeaderCellDef> # </th>\n                <td mat-cell *matCellDef=\"let tenantSubscription; let i = index\"> {{ i+1 }} </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"tenant\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear> Tenant </th>\n                <td mat-cell *matCellDef=\"let tenantSubscription\">\n                    <div>\n                        <div>{{tenantSubscription?.tenant?.name }}</div>\n                        <div><span>{{tenantSubscription?.tenant?.phone }}</span> <span> |\n                                {{tenantSubscription?.tenant?.email }}</span></div>\n                    </div>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"period\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear> Period </th>\n                <td mat-cell *matCellDef=\"let tenantSubscription\">\n                    <span *ngIf=\"tenantSubscription?.started_at\">{{tenantSubscription?.started_at | date:'mediumDate' }}\n                        -> {{(tenantSubscription?.ended_at | date:'mediumDate') ?? 'NA' }}</span>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"package\">\n                <th mat-header-cell *matHeaderCellDef> Package </th>\n                <td mat-cell *matCellDef=\"let tenantSubscription\">\n                    <div>{{tenantSubscription?.package?.title }}</div>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"status\">\n                <th mat-header-cell *matHeaderCellDef> Status </th>\n                <td mat-cell *matCellDef=\"let tenantSubscription\">\n                    <div>{{tenantSubscription?.status?.title }}</div>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"cost_per_unit\">\n                <th mat-header-cell *matHeaderCellDef> Cost/Units </th>\n                <td mat-cell *matCellDef=\"let tenantSubscription\">\n                    <div>{{tenantSubscription?.cost_per_unit | currency:'USD':'symbol':'1.0-2' }}</div>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"units\">\n                <th mat-header-cell *matHeaderCellDef> Units </th>\n                <td mat-cell *matCellDef=\"let tenantSubscription\">\n                    <div>{{tenantSubscription?.units | number}}</div>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"is_unit_limitation_enforced\">\n                <th mat-header-cell *matHeaderCellDef> Is Units Limited </th>\n                <td mat-cell *matCellDef=\"let tenantSubscription\">\n                    <div>{{tenantSubscription?.is_unit_limitation_enforced ? 'Yes' : 'No' }}</div>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"total\">\n                <th mat-header-cell *matHeaderCellDef> Total Cost </th>\n                <td mat-cell *matCellDef=\"let tenantSubscription\">\n                    <div>{{tenantSubscription?.total | currency:'USD':'symbol':'1.0-2' }}</div>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"is_trail\">\n                <th mat-header-cell *matHeaderCellDef> Is Trail</th>\n                <td mat-cell *matCellDef=\"let tenantSubscription\">\n                    <div>\n                        <div>{{tenantSubscription?.is_trail ? 'Yes' : 'No' }}</div>\n                        <div *ngIf=\"tenantSubscription?.is_trail\"><span>{{tenantSubscription?.trail_started_at |\n                                date:'mediumDate' }} -> {{tenantSubscription?.trail_ended_at | date:'mediumDate'\n                                }}</span></div>\n                    </div>\n                </td>\n            </ng-container>\n\n\n            <ng-container matColumnDef=\"actions\">\n                <th mat-header-cell *matHeaderCellDef> Actions </th>\n                <td mat-cell *matCellDef=\"let tenantSubscription\">\n                    <div class=\"text-secondary\" fxLayout>\n                        <div *ngIf=\"tenantSubscription?.creator_id\">\n                            <app-subscription-form *ngIf=\"tenantSubscription.status_id == subscriptionStatus.ACTIVE\"\n                                (success)=\"reload()\" [tenantSubscriptionInfo]=\"tenantSubscription\"\n                                [subscriptionPackage]=\"subscriptionPackage\"></app-subscription-form>\n                            <button *ngIf=\"tenantSubscription.status_id == subscriptionStatus.ACTIVE\"\n                                matTooltip=\"Cancel Subscription\" type=\"button\" mat-icon-button\n                                (click)=\"cancel(tenantSubscription)\">\n                                <mat-icon>cancel</mat-icon>\n                            </button>\n                        </div>\n                    </div>\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        <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n    </mat-card>\n</div>", styles: [".add-icon{position:relative;top:5px}.add-icon:hover{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8$4.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: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9$1.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: "directive", type: i11.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i11.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i12.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i12.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i12.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i12.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i12.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i12.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i12.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i12.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i12.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i12.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i11$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "per_page", "inDataSearch", "panelWidth", "focusSearchOnOpen", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange", "isItemsEmpty"] }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: SubscriptionFormComponent, selector: "app-subscription-form", inputs: ["isUpdate", "subscriptionPackage", "tenantSubscriptionInfo"], outputs: ["success"] }, { kind: "directive", type: i6$1.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: i6$1.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: i6$1.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: i6$1.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: i6$2.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "component", type: TimelineFilterComponent, selector: "app-timeline-filter", inputs: ["defaultValue", "required", "disabled", "value", "timelines", "dateFrom", "dateTo", "appearance", "showClearButton", "form", "labelText"], outputs: ["selectionChange"] }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i3.DatePipe, name: "date" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SubscriptionListingComponent, selector: "app-subscription-listing", inputs: { subscriptionPackage: "subscriptionPackage" }, usesInheritance: true, ngImport: i0, template: "<div fxLayout=\"column\" class=\"m-2\">\n    <mat-card appearance=\"outlined\" fxLayout fxLayoutGap=\"0.5rem\" fxLayoutAlign=\"start center\">\n        <div fxLayout fxLayoutAlign=\"start center\">\n            <h5 class=\"m-0\">{{subscriptionPackage?'Package':'Tenant'}} Subscriptions</h5>\n            <app-subscription-form (success)=\"reload()\"\n                [subscriptionPackage]=\"subscriptionPackage\"></app-subscription-form>\n        </div>\n        <div fxFlex>\n        </div>\n        <form [formGroup]=\"filterForm\" fxLayout=\"row\" fxLayoutGap=\"0.3rem\" class=\"d-print-none\"\n            fxLayoutAlign=\"start start\">\n            <mat-form-field appearance=\"outline\" class=\" fl-md\">\n                <mat-label>Search</mat-label>\n                <input type=\"text\" matInput formControlName=\"search\" placeholder=\"Search Tenant, Details\"\n                    autocomplete=\"off\" />\n                <button *ngIf=\"filterForm.get('search').value\" matSuffix mat-icon-button\n                    (click)=\"resetFilter('search')\">\n                    <mat-icon>close</mat-icon>\n                </button>\n            </mat-form-field>\n\n\n            <mat-form-field class=\" fl-sm\" appearance=\"outline\" *ngIf=\"!subscriptionPackage\">\n                <mat-label>Package</mat-label>\n                <app-searchable-selector formControlName=\"package_ids\" apiUrl=\"api/subscription-packages\"\n                    [multiple]=\"true\">\n                </app-searchable-selector>\n                <button mat-icon-button matSuffix type=\"button\" *ngIf=\"filterForm.get('package_ids').value\"\n                    (click)=\"resetFilter('package_ids')\">\n                    <mat-icon>clear</mat-icon>\n                </button>\n            </mat-form-field>\n\n            <app-timeline-filter [showClearButton]=\"true\" [form]=\"filterForm\" appearance=\"outline\"\n                formControlName=\"date_period_id\" labelText=\"Start\">\n            </app-timeline-filter>\n\n            <mat-form-field class=\"fl-sm\" appearance=\"outline\">\n                <mat-label>Status</mat-label>\n                <mat-select formControlName=\"status_ids\" multiple>\n                    <mat-option [value]=\"1\">Active</mat-option>\n                    <mat-option [value]=\"2\">Inactive</mat-option>\n                </mat-select>\n                <button mat-icon-button matSuffix type=\"button\" *ngIf=\"filterForm.get('status_ids').value\"\n                    (click)=\"resetFilter('status_ids')\">\n                    <mat-icon>clear</mat-icon>\n                </button>\n            </mat-form-field>\n\n        </form>\n    </mat-card>\n    <mat-card appearance=\"outlined\" class=\"p-0 mt-2\">\n        <table mat-table matSort [dataSource]=\"models\" class=\"w-100\" infiniteScroll [infiniteScrollDistance]=\"2\"\n            [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" (matSortChange)=\"sortColumn($event)\">\n\n            <ng-container matColumnDef=\"index\">\n                <th mat-header-cell *matHeaderCellDef> # </th>\n                <td mat-cell *matCellDef=\"let tenantSubscription; let i = index\"> {{ i+1 }} </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"tenant\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear> Tenant </th>\n                <td mat-cell *matCellDef=\"let tenantSubscription\">\n                    <div>\n                        <div>{{tenantSubscription?.tenant?.name }}</div>\n                        <div><span>{{tenantSubscription?.tenant?.phone }}</span> <span> |\n                                {{tenantSubscription?.tenant?.email }}</span></div>\n                    </div>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"period\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear> Period </th>\n                <td mat-cell *matCellDef=\"let tenantSubscription\">\n                    <span *ngIf=\"tenantSubscription?.started_at\">{{tenantSubscription?.started_at | date:'mediumDate' }}\n                        -> {{(tenantSubscription?.ended_at | date:'mediumDate') ?? 'NA' }}</span>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"package\">\n                <th mat-header-cell *matHeaderCellDef> Package </th>\n                <td mat-cell *matCellDef=\"let tenantSubscription\">\n                    <div>{{tenantSubscription?.package?.title }}</div>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"status\">\n                <th mat-header-cell *matHeaderCellDef> Status </th>\n                <td mat-cell *matCellDef=\"let tenantSubscription\">\n                    <div>{{tenantSubscription?.status?.title }}</div>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"cost_per_unit\">\n                <th mat-header-cell *matHeaderCellDef> Cost/Units </th>\n                <td mat-cell *matCellDef=\"let tenantSubscription\">\n                    <div>{{tenantSubscription?.cost_per_unit | currency:'USD':'symbol':'1.0-2' }}</div>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"units\">\n                <th mat-header-cell *matHeaderCellDef> Units </th>\n                <td mat-cell *matCellDef=\"let tenantSubscription\">\n                    <div>{{tenantSubscription?.units | number}}</div>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"is_unit_limitation_enforced\">\n                <th mat-header-cell *matHeaderCellDef> Is Units Limited </th>\n                <td mat-cell *matCellDef=\"let tenantSubscription\">\n                    <div>{{tenantSubscription?.is_unit_limitation_enforced ? 'Yes' : 'No' }}</div>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"total\">\n                <th mat-header-cell *matHeaderCellDef> Total Cost </th>\n                <td mat-cell *matCellDef=\"let tenantSubscription\">\n                    <div>{{tenantSubscription?.total | currency:'USD':'symbol':'1.0-2' }}</div>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"is_trail\">\n                <th mat-header-cell *matHeaderCellDef> Is Trail</th>\n                <td mat-cell *matCellDef=\"let tenantSubscription\">\n                    <div>\n                        <div>{{tenantSubscription?.is_trail ? 'Yes' : 'No' }}</div>\n                        <div *ngIf=\"tenantSubscription?.is_trail\"><span>{{tenantSubscription?.trail_started_at |\n                                date:'mediumDate' }} -> {{tenantSubscription?.trail_ended_at | date:'mediumDate'\n                                }}</span></div>\n                    </div>\n                </td>\n            </ng-container>\n\n\n            <ng-container matColumnDef=\"actions\">\n                <th mat-header-cell *matHeaderCellDef> Actions </th>\n                <td mat-cell *matCellDef=\"let tenantSubscription\">\n                    <div class=\"text-secondary\" fxLayout>\n                        <div *ngIf=\"tenantSubscription?.creator_id\">\n                            <app-subscription-form *ngIf=\"tenantSubscription.status_id == subscriptionStatus.ACTIVE\"\n                                (success)=\"reload()\" [tenantSubscriptionInfo]=\"tenantSubscription\"\n                                [subscriptionPackage]=\"subscriptionPackage\"></app-subscription-form>\n                            <button *ngIf=\"tenantSubscription.status_id == subscriptionStatus.ACTIVE\"\n                                matTooltip=\"Cancel Subscription\" type=\"button\" mat-icon-button\n                                (click)=\"cancel(tenantSubscription)\">\n                                <mat-icon>cancel</mat-icon>\n                            </button>\n                        </div>\n                    </div>\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        <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n    </mat-card>\n</div>", styles: [".add-icon{position:relative;top:5px}.add-icon:hover{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8$4.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: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9$1.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: "directive", type: i11.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i11.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i12.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i12.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i12.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i12.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i12.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i12.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i12.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i12.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i12.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i12.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i11$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: 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", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange", "isItemsEmpty"] }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: SubscriptionFormComponent, selector: "app-subscription-form", inputs: ["isUpdate", "subscriptionPackage", "tenantSubscriptionInfo"], outputs: ["success"] }, { kind: "directive", type: i6$1.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: i6$1.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: i6$1.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: i6$1.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: i6$2.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "component", type: TimelineFilterComponent, selector: "app-timeline-filter", inputs: ["defaultValue", "required", "disabled", "value", "timelines", "dateFrom", "dateTo", "appearance", "showClearButton", "form", "labelText"], outputs: ["selectionChange"] }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i3.DatePipe, name: "date" }] }); }
 };
 SubscriptionListingComponent = __decorate([
     UntilDestroy()
@@ -16033,7 +16034,7 @@ class TechlifyTaggerTagFormComponent extends TechlifyFormComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TechlifyTaggerTagFormComponent, deps: [{ token: FormValidatorService }, { token: i1.MatDialog }, { token: i1$5.UntypedFormBuilder }, { token: TagService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TechlifyTaggerTagFormComponent, isStandalone: true, selector: "app-techlify-tagger-tag-form", inputs: { tagInfo: "tagInfo" }, usesInheritance: true, ngImport: i0, template: "<app-techlify-icon *ngIf=\"!isUpdate\" name=\"add\" matTooltip=\"Add Tag\"\n    (click)=\"formDialog(formTemplate)\"></app-techlify-icon>\n<app-techlify-icon *ngIf=\"isUpdate\" name=\"edit\" matTooltip=\"Edit Tag\"\n    (click)=\"formDialog(formTemplate)\"></app-techlify-icon>\n\n\n<ng-template #formTemplate>\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"this.isWorking\"></mat-progress-bar>\n    <form [formGroup]=\"form\" (ngSubmit)=\"submit()\">\n        <div fxLayout=\"column\">\n            <div>\n                <h5 class=\"m-0\">Tag Form</h5>\n            </div>\n\n            <div fxLayout=\"column\" fxLayoutGap=\"0.25rem\" class=\"mt-2\">\n                <mat-form-field appearance=\"outline\">\n                    <mat-label>Name</mat-label>\n                    <input matInput formControlName=\"title\" placeholder=\"Title\" required />\n                    <mat-error *ngIf=\"isFieldValid('title')\">{{getErrorMessage('title')}}\n                    </mat-error>\n                </mat-form-field>\n\n                <mat-form-field appearance=\"outline\">\n                    <mat-label>Category</mat-label>\n                    <app-searchable-selector appearance=\"outline\" formControlName=\"category_id\"\n                        apiUrl=\"api/techlify-tagger-categories\" [selectedValue]=\"selectedCategory\" [multiple]=\"false\"\n                        [required]=\"true\"></app-searchable-selector>\n                    <mat-error *ngIf=\"isFieldValid('category_id')\">{{getErrorMessage('category_id')}}\n                    </mat-error>\n                </mat-form-field>\n\n                <mat-form-field appearance=\"outline\">\n                    <mat-label>Description</mat-label>\n                    <textarea matInput formControlName=\"description\" placeholder=\"Description\"></textarea>\n                </mat-form-field>\n\n                <div class=\"my-2\" fxLayout=\"row\" fxLayoutGap=\"30px\" fxLayoutAlign=\"end\" fxFlex=\"100%\">\n                    <button fxFlex mat-raised-button type=\"button\" matDialogClose class=\"white-bg-button\"\n                        [disabled]=\"isWorking\">\n                        Cancel\n                    </button>\n                    <button fxFlex mat-raised-button color=\"primary\" type=\"submit\" [disabled]=\"isWorking\">\n                        Save\n                    </button>\n                </div>\n            </div>\n        </div>\n    </form>\n</ng-template>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FlexLayoutModule }, { kind: "directive", type: i6$1.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: i6$1.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: i6$1.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: i6$1.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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MaterialModule }, { 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: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: i8$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8$4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { 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: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i11$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "ngmodule", type: TechlifyIconModule }, { kind: "component", type: TechlifyIconComponent, selector: "app-techlify-icon", inputs: ["name", "size"] }, { kind: "ngmodule", type: NgxPermissionsModule }, { kind: "ngmodule", type: SearchableSelectorModule }, { kind: "component", type: SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "per_page", "inDataSearch", "panelWidth", "focusSearchOnOpen", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange", "isItemsEmpty"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TechlifyTaggerTagFormComponent, isStandalone: true, selector: "app-techlify-tagger-tag-form", inputs: { tagInfo: "tagInfo" }, usesInheritance: true, ngImport: i0, template: "<app-techlify-icon *ngIf=\"!isUpdate\" name=\"add\" matTooltip=\"Add Tag\"\n    (click)=\"formDialog(formTemplate)\"></app-techlify-icon>\n<app-techlify-icon *ngIf=\"isUpdate\" name=\"edit\" matTooltip=\"Edit Tag\"\n    (click)=\"formDialog(formTemplate)\"></app-techlify-icon>\n\n\n<ng-template #formTemplate>\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"this.isWorking\"></mat-progress-bar>\n    <form [formGroup]=\"form\" (ngSubmit)=\"submit()\">\n        <div fxLayout=\"column\">\n            <div>\n                <h5 class=\"m-0\">Tag Form</h5>\n            </div>\n\n            <div fxLayout=\"column\" fxLayoutGap=\"0.25rem\" class=\"mt-2\">\n                <mat-form-field appearance=\"outline\">\n                    <mat-label>Name</mat-label>\n                    <input matInput formControlName=\"title\" placeholder=\"Title\" required />\n                    <mat-error *ngIf=\"isFieldValid('title')\">{{getErrorMessage('title')}}\n                    </mat-error>\n                </mat-form-field>\n\n                <mat-form-field appearance=\"outline\">\n                    <mat-label>Category</mat-label>\n                    <app-searchable-selector appearance=\"outline\" formControlName=\"category_id\"\n                        apiUrl=\"api/techlify-tagger-categories\" [selectedValue]=\"selectedCategory\" [multiple]=\"false\"\n                        [required]=\"true\"></app-searchable-selector>\n                    <mat-error *ngIf=\"isFieldValid('category_id')\">{{getErrorMessage('category_id')}}\n                    </mat-error>\n                </mat-form-field>\n\n                <mat-form-field appearance=\"outline\">\n                    <mat-label>Description</mat-label>\n                    <textarea matInput formControlName=\"description\" placeholder=\"Description\"></textarea>\n                </mat-form-field>\n\n                <div class=\"my-2\" fxLayout=\"row\" fxLayoutGap=\"30px\" fxLayoutAlign=\"end\" fxFlex=\"100%\">\n                    <button fxFlex mat-raised-button type=\"button\" matDialogClose class=\"white-bg-button\"\n                        [disabled]=\"isWorking\">\n                        Cancel\n                    </button>\n                    <button fxFlex mat-raised-button color=\"primary\" type=\"submit\" [disabled]=\"isWorking\">\n                        Save\n                    </button>\n                </div>\n            </div>\n        </div>\n    </form>\n</ng-template>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FlexLayoutModule }, { kind: "directive", type: i6$1.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: i6$1.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: i6$1.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: i6$1.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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MaterialModule }, { 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: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: i8$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8$4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { 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: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i11$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "ngmodule", type: TechlifyIconModule }, { kind: "component", type: TechlifyIconComponent, selector: "app-techlify-icon", inputs: ["name", "size"] }, { kind: "ngmodule", type: NgxPermissionsModule }, { kind: "ngmodule", type: SearchableSelectorModule }, { kind: "component", type: 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", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange", "isItemsEmpty"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TechlifyTaggerTagFormComponent, decorators: [{
             type: Component,
@@ -16073,7 +16074,7 @@ class TechlifyTaggerTagListComponent extends TechlifyListComponent {
         this.listenFilterChanges();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TechlifyTaggerTagListComponent, deps: [{ token: TagService }, { token: i1$5.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TechlifyTaggerTagListComponent, isStandalone: true, selector: "app-techlify-tagger-tag-list", usesInheritance: true, ngImport: i0, template: "<div fxLayout=\"column\" class=\"m-2\">\n    <mat-card appearance=\"outlined\" fxLayout fxLayoutGap=\"0.5rem\" fxLayoutAlign=\"start center\">\n        <div fxLayout fxLayoutAlign=\"start center\">\n            <h5 class=\"m-0\">Tags</h5>\n            <app-techlify-tagger-tag-form (success)=\"modelCreated($event)\" *ngxPermissionsOnly=\"['tag.create']\"\n                class=\"ms-2\"></app-techlify-tagger-tag-form>\n        </div>\n        <span fxFlex></span>\n        <div>\n            <form [formGroup]=\"filterForm\" fxLayout=\"row\" fxLayoutGap=\"0.3rem\">\n                <mat-form-field appearance=\"outline\" class=\"fl-md\">\n                    <mat-label>Search Tags</mat-label>\n                    <input type=\"text\" matInput formControlName=\"search\" placeholder=\"Search records\" name=\"search\"\n                        autocomplete=\"off\" />\n                    <button *ngIf=\"filterForm.get('search').value\" matSuffix mat-icon-button\n                        (click)=\"filterForm.get('search').setValue('')\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </mat-form-field>\n                <mat-form-field class='fl-sm'>\n                    <mat-label>Category</mat-label>\n                    <app-searchable-selector formControlName=\"category_ids\" apiUrl=\"api/techlify-tagger-categories\"\n                        [multiple]=\"true\">\n                    </app-searchable-selector>\n                    <button *ngIf=\"filterForm.get('category_ids').value\" matSuffix mat-icon-button\n                        (click)=\"filterForm.get('category_ids').setValue('')\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </mat-form-field>\n            </form>\n        </div>\n    </mat-card>\n    <mat-card appearance=\"outlined\" class=\"mt-2 p-0\">\n        <table mat-table matSort [dataSource]=\"models\" class=\"w-100\" infiniteScroll [infiniteScrollDistance]=\"2\"\n            [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" (matSortChange)=\"sortColumn($event)\">\n\n\n            <!-- Index Column -->\n            <ng-container matColumnDef=\"index\">\n                <th mat-header-cell *matHeaderCellDef> # </th>\n                <td mat-cell *matCellDef=\"let element; let i = index\"> {{ i+1}} </td>\n            </ng-container>\n\n            <!-- Title Column -->\n            <ng-container matColumnDef=\"title\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear> Title </th>\n                <td mat-cell *matCellDef=\"let element\"> {{element.title}}\n                    <div *ngIf=\"element?.description\" class=\"text-secondary\">\n                        <small>{{element?.description}}</small>\n                    </div>\n                </td>\n            </ng-container>\n\n            <!-- Category Column -->\n            <ng-container matColumnDef=\"category\">\n                <th mat-header-cell *matHeaderCellDef> Category </th>\n                <td mat-cell *matCellDef=\"let element\"> {{element.category?.title}}\n                    <div *ngIf=\"element?.category?.description\" class=\"text-secondary\">\n                        <small>{{element?.category?.description}}</small>\n                    </div>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"tagged_count\">\n                <th mat-header-cell *matHeaderCellDef> Tagged </th>\n                <td mat-cell *matCellDef=\"let element\">\n                    <span *ngIf=\"element?.tagged_count\">{{element.tagged_count}}\n                        records\n                    </span>\n                </td>\n            </ng-container>\n\n            <!-- Creator Column -->\n            <ng-container matColumnDef=\"creator\">\n                <th mat-header-cell *matHeaderCellDef> Creator </th>\n                <td mat-cell *matCellDef=\"let element\">\n                    <div>{{element.creator?.name}} </div>\n                    <div><small class=\"text-muted\">on {{element.created_at | date: 'mediumDate'}} </small></div>\n                </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; let i = dataIndex\" class=\"text-secondary\">\n                    <app-audit-log-for-model modelType=\"TechlifyTaggerTag\" [modelId]=\"element?.id\" logView=\"all\"\n                        [isIconView]=\"true\">\n                    </app-audit-log-for-model>\n\n                    <app-techlify-tagger-tag-form (success)=\"modelsUpdatedById($event)\" [tagInfo]=\"element\"\n                        *ngxPermissionsOnly=\"['tag.update']\" class=\"ms-1\"></app-techlify-tagger-tag-form>\n\n                    <ng-container *ngIf=\"!element?.tagged_count\">\n                        <app-techlify-delete-button *ngxPermissionsOnly=\"['tag.delete']\" class='text-secondary ms-1'\n                            [model]=\"element\" [service]=\"tagService\"\n                            message=\"Deleting this tag cannot be undone. Are you sure you want to continue?\"\n                            (deleted)=\"modelsDeletedById(element)\">\n                        </app-techlify-delete-button>\n                    </ng-container>\n                </td>\n            </ng-container>\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n        </table>\n    </mat-card>\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"this.isWorking\"></mat-progress-bar>\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "component", type: TechlifyTaggerTagFormComponent, selector: "app-techlify-tagger-tag-form", inputs: ["tagInfo"] }, { kind: "ngmodule", type: SearchableSelectorModule }, { kind: "component", type: SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "per_page", "inDataSearch", "panelWidth", "focusSearchOnOpen", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange", "isItemsEmpty"] }, { kind: "component", type: TechlifyDeleteButtonComponent, selector: "app-techlify-delete-button", inputs: ["data", "model", "message", "service"], outputs: ["deleted"] }, { kind: "ngmodule", type: AuditLogForModelModule }, { kind: "component", type: AuditLogForModelComponent, selector: "app-audit-log-for-model", inputs: ["isIconView", "modelType", "modelId", "logView"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: FlexLayoutModule }, { kind: "directive", type: i6$1.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: i6$1.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: i6$1.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: i6$1.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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MaterialModule }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8$4.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: "directive", type: i11.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i11.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i12.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i12.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i12.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i12.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i12.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i12.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i12.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i12.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i12.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i12.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i11$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: InfiniteScrollModule }, { kind: "directive", type: i6$2.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "ngmodule", type: TechlifyIconModule }, { kind: "ngmodule", type: NgxPermissionsModule }, { kind: "directive", type: i6$5.NgxPermissionsDirective, selector: "[ngxPermissionsOnly],[ngxPermissionsExcept]", inputs: ["ngxPermissionsOnly", "ngxPermissionsOnlyThen", "ngxPermissionsOnlyElse", "ngxPermissionsExcept", "ngxPermissionsExceptElse", "ngxPermissionsExceptThen", "ngxPermissionsThen", "ngxPermissionsElse", "ngxPermissionsOnlyAuthorisedStrategy", "ngxPermissionsOnlyUnauthorisedStrategy", "ngxPermissionsExceptUnauthorisedStrategy", "ngxPermissionsExceptAuthorisedStrategy", "ngxPermissionsUnauthorisedStrategy", "ngxPermissionsAuthorisedStrategy"], outputs: ["permissionsAuthorized", "permissionsUnauthorized"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TechlifyTaggerTagListComponent, isStandalone: true, selector: "app-techlify-tagger-tag-list", usesInheritance: true, ngImport: i0, template: "<div fxLayout=\"column\" class=\"m-2\">\n    <mat-card appearance=\"outlined\" fxLayout fxLayoutGap=\"0.5rem\" fxLayoutAlign=\"start center\">\n        <div fxLayout fxLayoutAlign=\"start center\">\n            <h5 class=\"m-0\">Tags</h5>\n            <app-techlify-tagger-tag-form (success)=\"modelCreated($event)\" *ngxPermissionsOnly=\"['tag.create']\"\n                class=\"ms-2\"></app-techlify-tagger-tag-form>\n        </div>\n        <span fxFlex></span>\n        <div>\n            <form [formGroup]=\"filterForm\" fxLayout=\"row\" fxLayoutGap=\"0.3rem\">\n                <mat-form-field appearance=\"outline\" class=\"fl-md\">\n                    <mat-label>Search Tags</mat-label>\n                    <input type=\"text\" matInput formControlName=\"search\" placeholder=\"Search records\" name=\"search\"\n                        autocomplete=\"off\" />\n                    <button *ngIf=\"filterForm.get('search').value\" matSuffix mat-icon-button\n                        (click)=\"filterForm.get('search').setValue('')\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </mat-form-field>\n                <mat-form-field class='fl-sm'>\n                    <mat-label>Category</mat-label>\n                    <app-searchable-selector formControlName=\"category_ids\" apiUrl=\"api/techlify-tagger-categories\"\n                        [multiple]=\"true\">\n                    </app-searchable-selector>\n                    <button *ngIf=\"filterForm.get('category_ids').value\" matSuffix mat-icon-button\n                        (click)=\"filterForm.get('category_ids').setValue('')\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </mat-form-field>\n            </form>\n        </div>\n    </mat-card>\n    <mat-card appearance=\"outlined\" class=\"mt-2 p-0\">\n        <table mat-table matSort [dataSource]=\"models\" class=\"w-100\" infiniteScroll [infiniteScrollDistance]=\"2\"\n            [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" (matSortChange)=\"sortColumn($event)\">\n\n\n            <!-- Index Column -->\n            <ng-container matColumnDef=\"index\">\n                <th mat-header-cell *matHeaderCellDef> # </th>\n                <td mat-cell *matCellDef=\"let element; let i = index\"> {{ i+1}} </td>\n            </ng-container>\n\n            <!-- Title Column -->\n            <ng-container matColumnDef=\"title\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear> Title </th>\n                <td mat-cell *matCellDef=\"let element\"> {{element.title}}\n                    <div *ngIf=\"element?.description\" class=\"text-secondary\">\n                        <small>{{element?.description}}</small>\n                    </div>\n                </td>\n            </ng-container>\n\n            <!-- Category Column -->\n            <ng-container matColumnDef=\"category\">\n                <th mat-header-cell *matHeaderCellDef> Category </th>\n                <td mat-cell *matCellDef=\"let element\"> {{element.category?.title}}\n                    <div *ngIf=\"element?.category?.description\" class=\"text-secondary\">\n                        <small>{{element?.category?.description}}</small>\n                    </div>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"tagged_count\">\n                <th mat-header-cell *matHeaderCellDef> Tagged </th>\n                <td mat-cell *matCellDef=\"let element\">\n                    <span *ngIf=\"element?.tagged_count\">{{element.tagged_count}}\n                        records\n                    </span>\n                </td>\n            </ng-container>\n\n            <!-- Creator Column -->\n            <ng-container matColumnDef=\"creator\">\n                <th mat-header-cell *matHeaderCellDef> Creator </th>\n                <td mat-cell *matCellDef=\"let element\">\n                    <div>{{element.creator?.name}} </div>\n                    <div><small class=\"text-muted\">on {{element.created_at | date: 'mediumDate'}} </small></div>\n                </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; let i = dataIndex\" class=\"text-secondary\">\n                    <app-audit-log-for-model modelType=\"TechlifyTaggerTag\" [modelId]=\"element?.id\" logView=\"all\"\n                        [isIconView]=\"true\">\n                    </app-audit-log-for-model>\n\n                    <app-techlify-tagger-tag-form (success)=\"modelsUpdatedById($event)\" [tagInfo]=\"element\"\n                        *ngxPermissionsOnly=\"['tag.update']\" class=\"ms-1\"></app-techlify-tagger-tag-form>\n\n                    <ng-container *ngIf=\"!element?.tagged_count\">\n                        <app-techlify-delete-button *ngxPermissionsOnly=\"['tag.delete']\" class='text-secondary ms-1'\n                            [model]=\"element\" [service]=\"tagService\"\n                            message=\"Deleting this tag cannot be undone. Are you sure you want to continue?\"\n                            (deleted)=\"modelsDeletedById(element)\">\n                        </app-techlify-delete-button>\n                    </ng-container>\n                </td>\n            </ng-container>\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n        </table>\n    </mat-card>\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"this.isWorking\"></mat-progress-bar>\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "component", type: TechlifyTaggerTagFormComponent, selector: "app-techlify-tagger-tag-form", inputs: ["tagInfo"] }, { kind: "ngmodule", type: SearchableSelectorModule }, { kind: "component", type: 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", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange", "isItemsEmpty"] }, { kind: "component", type: TechlifyDeleteButtonComponent, selector: "app-techlify-delete-button", inputs: ["data", "model", "message", "service"], outputs: ["deleted"] }, { kind: "ngmodule", type: AuditLogForModelModule }, { kind: "component", type: AuditLogForModelComponent, selector: "app-audit-log-for-model", inputs: ["isIconView", "modelType", "modelId", "logView"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: FlexLayoutModule }, { kind: "directive", type: i6$1.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: i6$1.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: i6$1.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: i6$1.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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MaterialModule }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8$4.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: "directive", type: i11.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i11.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i12.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i12.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i12.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i12.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i12.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i12.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i12.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i12.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i12.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i12.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i11$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: InfiniteScrollModule }, { kind: "directive", type: i6$2.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "ngmodule", type: TechlifyIconModule }, { kind: "ngmodule", type: NgxPermissionsModule }, { kind: "directive", type: i6$5.NgxPermissionsDirective, selector: "[ngxPermissionsOnly],[ngxPermissionsExcept]", inputs: ["ngxPermissionsOnly", "ngxPermissionsOnlyThen", "ngxPermissionsOnlyElse", "ngxPermissionsExcept", "ngxPermissionsExceptElse", "ngxPermissionsExceptThen", "ngxPermissionsThen", "ngxPermissionsElse", "ngxPermissionsOnlyAuthorisedStrategy", "ngxPermissionsOnlyUnauthorisedStrategy", "ngxPermissionsExceptUnauthorisedStrategy", "ngxPermissionsExceptAuthorisedStrategy", "ngxPermissionsUnauthorisedStrategy", "ngxPermissionsAuthorisedStrategy"], outputs: ["permissionsAuthorized", "permissionsUnauthorized"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TechlifyTaggerTagListComponent, decorators: [{
             type: Component,