ngx-techlify-core 18.65.1 → 18.67.0

package/fesm2022/ngx-techlify-core.mjs

@@ -1706,9 +1706,6 @@ class EntityFileService extends TechlifyService {
         super(http, 'entity-files');
         this.http = http;
     }
-    deleteEntityFile(model) {
-        return this.http.delete(`api/entity-files/${model.id}`).toPromise();
-    }
     uploadEntityFile(file, params) {
         const formData = new FormData();
         formData.append("fileData", file, file.name);
@@ -3221,6 +3218,7 @@ class SearchableSelectorComponent {
         this.selectionChange = new EventEmitter();
         this.itemsChange = new EventEmitter();
         this.focusSearchOnOpen = false;
+        this.isItemsEmpty = new EventEmitter();
         /**
          * If this is set to true, if there is a pre-selected entity,
          * the entity that is populated will be emitted when it is set
@@ -3303,6 +3301,10 @@ class SearchableSelectorComponent {
         }
         this.subscriptions.add(of().pipe(startWith(true), switchMap((_) => from(request)), finalize$1(() => this.isLoading = false)).subscribe((result) => {
             this.items = this.items.concat(result[this.apiDataProperty]);
+            if (this.items.length == 0 && (!this.filters?.search)) {
+                //If there is no items and search is empty, then we emit items empty event.
+                this.isItemsEmpty.emit(true);
+            }
             if (this.cache) {
                 this.cachedItems = this.items;
             }
@@ -3446,7 +3448,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", perPage: "perPage", inDataSearch: "inDataSearch", panelWidth: "panelWidth", focusSearchOnOpen: "focusSearchOnOpen", isEmitInitialEvent: "isEmitInitialEvent", required: "required", disabled: "disabled", value: "value" }, outputs: { selectedValueChange: "selectedValueChange", selectionChange: "selectionChange", itemsChange: "itemsChange" }, 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
@@ -3518,6 +3520,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Output
             }], focusSearchOnOpen: [{
                 type: Input
+            }], isItemsEmpty: [{
+                type: Output
             }], isEmitInitialEvent: [{
                 type: Input
             }], required: [{
@@ -3630,7 +3634,8 @@ class TechlifyIconComponent {
             phone: 'fas fa-phone',
             location: 'fas fa-map-marker-alt',
             unlink: 'fas fa-unlink',
-            disable_user: 'fas fa-user-slash'
+            disable_user: 'fas fa-user-slash',
+            swap: 'fas fa-retweet'
         };
         // Map size input to CSS classes
         this.sizeMap = {
@@ -4049,7 +4054,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", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { 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()
@@ -4606,7 +4611,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: i6$3.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"] }, { 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: i6$3.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()
@@ -5116,8 +5121,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 }]
         }] });
 
-let EntityFilesViewAllComponent = class EntityFilesViewAllComponent {
+let EntityFilesViewAllComponent = class EntityFilesViewAllComponent extends TechlifyListComponent {
     constructor(entityFileService, location, alertService, dialog, fb, errorHandler, currentUserService) {
+        super();
         this.entityFileService = entityFileService;
         this.location = location;
         this.alertService = alertService;
@@ -5131,8 +5137,6 @@ let EntityFilesViewAllComponent = class EntityFilesViewAllComponent {
         this.viewMode = 'list';
         this.fileDropperHeight = '500px';
         this.isShowDragDropSection = true;
-        this.documentIds = [];
-        this.isAllSelected = false;
         /**
          * Should we allow tagging entity-files?
          */
@@ -5141,7 +5145,6 @@ let EntityFilesViewAllComponent = class EntityFilesViewAllComponent {
         this.techlifyTagConfig = new TechlifyTaggerTagFormConfigModel();
         this.title = "File";
         this.filters = {};
-        this.entityFiles = [];
         this.displayedColumns = [
             'index',
             'title',
@@ -5149,17 +5152,12 @@ let EntityFilesViewAllComponent = class EntityFilesViewAllComponent {
             'file_size',
             'uploaded_on',
         ];
-        this.isWorking = false;
-        this.page = 1;
-        this.perPage = 25;
-        this.lastPage = 0;
-        this.fileList = [];
         this.isShowCreateAction = true;
         this.isShowUpdateAction = true;
         this.isShowDeleteAction = true;
         this.isShowReadAction = true;
         this.user = this.currentUserService.getUser();
-        this.filterFormGroup = this.fb.group({
+        this.filterForm = this.fb.group({
             title: [""],
             tag_ids: [""]
         });
@@ -5209,7 +5207,7 @@ let EntityFilesViewAllComponent = class EntityFilesViewAllComponent {
             entity_id: this.entityId,
             title: ""
         };
-        this.fetchEntityFilesDetails();
+        this.loadData();
         if (!this.viewOnly) {
             this.displayedColumns.push('actions');
         }
@@ -5218,15 +5216,15 @@ let EntityFilesViewAllComponent = class EntityFilesViewAllComponent {
         }
     }
     listenRoutes() {
-        this.filterFormGroup.valueChanges.pipe(debounceTime(500), untilDestroyed(this))
+        this.filterForm.valueChanges.pipe(debounceTime(500), untilDestroyed(this))
             .subscribe(changes => {
             this.reload();
         });
     }
-    fetchEntityFilesDetails() {
+    loadData() {
         this.filters.page = this.page;
         this.filters.perPage = this.perPage;
-        const formGroup = this.filterFormGroup.value;
+        const formGroup = this.filterForm.value;
         formGroup.tag_ids = formGroup.tag_ids.toString();
         this.filters = {
             ...this.filters,
@@ -5237,8 +5235,8 @@ let EntityFilesViewAllComponent = class EntityFilesViewAllComponent {
         this.entityFileService.index(this.filters).subscribe({
             next: (result) => {
                 this.lastPage = result.last_page || this.page;
-                this.entityFiles = this.entityFiles.concat(result.data);
-                this.total = result?.total;
+                this.models = this.models.concat(result.data);
+                this.lastPage = result?.last_page;
                 this.isWorking = false;
             },
             error: () => this.isWorking = false
@@ -5285,43 +5283,6 @@ let EntityFilesViewAllComponent = class EntityFilesViewAllComponent {
             }
         });
     }
-    deleteEntityFile(file) {
-        const dialogRef = this.dialog.open(ActionPopupComponent, {
-            width: "400px",
-            data: {
-                title: "Delete File",
-                message: `Are you sure to proceed delete the file ${file.title}?`
-            },
-            autoFocus: false
-        });
-        dialogRef.afterClosed().subscribe(async (result) => {
-            if (result) {
-                //Action confirmed
-                const result = await this.entityFileService.deleteEntityFile(file);
-                this.alertService.addAlert("File successfully deleted", "success");
-                this.reload();
-            }
-        });
-    }
-    onScroll() {
-        if (this.page < this.lastPage && !this.isWorking) {
-            this.page += 1;
-            this.fetchEntityFilesDetails();
-        }
-    }
-    reload() {
-        this.entityFiles = [];
-        this.documentIds = [];
-        this.page = 1;
-        if (!this.isWorking) {
-            this.fetchEntityFilesDetails();
-        }
-    }
-    ngOnDestroy() { }
-    resetFieldValue(event, field) {
-        event.stopPropagation();
-        this.filterFormGroup.get(field).setValue("");
-    }
     sizeOf(bytes) {
         if (!bytes) {
             return "0.00 B";
@@ -5330,55 +5291,24 @@ let EntityFilesViewAllComponent = class EntityFilesViewAllComponent {
         return (bytes / Math.pow(1024, e)).toFixed(2) + ' ' + ' KMGTP'.charAt(e) + 'B';
     }
     async fileChanged(event) {
-        this.fileList = event;
-        if (this.fileList.length > 0) {
-            await this.fileList.forEach(async (file) => {
+        this.models = event;
+        if (this.models.length > 0) {
+            await this.models.forEach(async (file) => {
                 const result = await this.entityFileService.uploadEntityFile(file, {
                     entity_type: this.entityType,
                     entity_id: this.entityId,
                 });
                 this.reload();
             });
-            this.fileList = [];
+            this.models = [];
             this.alertService.addAlert('Files uploaded successfully!', 'success');
         }
     }
-    selectAll() {
-        this.documentIds = [];
-        this.entityFiles.map((employee) => {
-            employee.is_selected = this.isAllSelected;
-            if (this.isAllSelected) {
-                this.documentIds.push(employee.id);
-            }
-        });
-        this.entityFiles = [...this.entityFiles];
-    }
-    employeeListModified(event, employee) {
-        this.isAllSelected = false;
-        if (event.checked) {
-            this.documentIds.push(employee.id);
-        }
-        else {
-            this.documentIds = this.documentIds.filter((employeeData) => employeeData != employee.id);
-        }
-    }
-    unCheckAll() {
-        this.isAllSelected = false;
-        this.documentIds = [];
-        this.entityFiles.map((employee) => {
-            employee.is_selected = false;
-        });
-        this.entityFiles = [...this.entityFiles];
-    }
-    resetFieldValueOfRow(field, event) {
-        event.stopPropagation();
-        this.updateRowForm.get(field).setValue("");
-    }
     async bulkUpdate(fieldName) {
         var data = this.updateRowForm.value;
         this.isWorking = true;
         data.field_name = fieldName;
-        data.document_ids = this.documentIds;
+        data.document_ids = this.selectedModelIds;
         try {
             await this.entityFileService.bulkUpdate(data).then(res => {
                 this.alertService.addAlert("Successfully updated", "success");
@@ -5392,14 +5322,14 @@ let EntityFilesViewAllComponent = class EntityFilesViewAllComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EntityFilesViewAllComponent, deps: [{ token: EntityFileService }, { token: i3.Location }, { token: AlertService }, { token: i1.MatDialog }, { token: i1$5.UntypedFormBuilder }, { token: ErrorHandlerService }, { token: CurrentUserService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: EntityFilesViewAllComponent, selector: "app-entity-files-view-all", inputs: { entityId: "entityId", entityType: "entityType", viewOnly: "viewOnly", removeSearch: "removeSearch", hideTitleAndDetails: "hideTitleAndDetails", displayMode: "displayMode", allowMultipleFiles: "allowMultipleFiles", allowBulkUpdate: "allowBulkUpdate", viewMode: "viewMode", fileDropperHeight: "fileDropperHeight", isShowDragDropSection: "isShowDragDropSection", useTechlifyTags: "useTechlifyTags", techlifyTagCategories: "techlifyTagCategories", techlifyTagConfig: "techlifyTagConfig", title: "title", permission: "permission" }, ngImport: i0, template: "<div *ngIf=\"viewMode === 'list'\">\n  <div *ngIf=\"this.documentIds.length\" class=\"d-none d-md-flex flex-column\">\n    <mat-card class=\"update_card\" *ngIf=\"this.documentIds.length\">\n      <mat-card-header>\n        <mat-card-title>\n          <div mat-dialog-title class=\"mt-2 ml-2 text-center\">\n            <div>Update Selected Rows</div>\n          </div>\n        </mat-card-title>\n      </mat-card-header>\n      <mat-card-content class=\"d-flex flex-column\">\n        <form [formGroup]=\"updateRowForm\">\n          <div class=\"d-flex flex-column\">\n\n            <mat-form-field class=\"w-100 px-1\">\n              <input matInput formControlName=\"title\" placeholder=\"Title\" autocomplete=\"off\" />\n              <button *ngIf=\"updateRowForm.get('title').value || updateRowForm.get('title').value===0\" matSuffix\n                mat-icon-button style=\"color:red\" (click)=\"resetFieldValueOfRow('title', $event)\">\n                <mat-icon>close</mat-icon>\n              </button>\n              <button matSuffix mat-icon-button type=\"button\" style=\"color:green\" *ngIf=\"(updateRowForm.get('title').value || updateRowForm.get('title').value===0)\n                && updateRowForm.get('title').valid\" (click)=\"bulkUpdate('title')\">\n                <mat-icon>done</mat-icon>\n              </button>\n            </mat-form-field>\n\n            <mat-form-field class=\"w-100 px-1\">\n              <textarea matInput formControlName=\"details\" placeholder=\"Details\" autocomplete=\"off\"></textarea>\n              <button *ngIf=\"updateRowForm.get('details').value || updateRowForm.get('details').value===0\" matSuffix\n                mat-icon-button style=\"color:red\" (click)=\"resetFieldValueOfRow('details', $event)\">\n                <mat-icon>close</mat-icon>\n              </button>\n              <button matSuffix mat-icon-button type=\"button\" style=\"color:green\" *ngIf=\"(updateRowForm.get('details').value || updateRowForm.get('details').value===0)\n                && updateRowForm.get('details').valid\" (click)=\"bulkUpdate('details')\">\n                <mat-icon>done</mat-icon>\n              </button>\n            </mat-form-field>\n\n            <ng-container *ngIf=\"useTechlifyTags\">\n              <mat-form-field>\n                <mat-label>Tag</mat-label>\n                <app-techlify-tagger-tag-form-field modelType=\"entity-file\" formControlName=\"tag_ids\"\n                  placeholder=\"Enter new tag\">\n                </app-techlify-tagger-tag-form-field>\n                <button *ngIf=\"updateRowForm.get('tag_ids').value || updateRowForm.get('tag_ids').value===0\" matSuffix\n                  mat-icon-button style=\"color:red\" (click)=\"resetFieldValueOfRow('tag_ids', $event)\">\n                  <mat-icon>close</mat-icon>\n                </button>\n                <button matSuffix mat-icon-button type=\"button\" style=\"color:green\" *ngIf=\"(updateRowForm.get('tag_ids').value || updateRowForm.get('tag_ids').value===0)\n                  && updateRowForm.get('tag_ids').valid\" (click)=\"bulkUpdate('tag_ids')\">\n                  <mat-icon>done</mat-icon>\n                </button>\n              </mat-form-field>\n            </ng-container>\n          </div>\n        </form>\n      </mat-card-content>\n    </mat-card>\n\n  </div>\n\n  <div>\n    <div class=\"mat-typography\" *ngIf=\"!displayMode\">\n      <div class=\"d-flex flex-row gap-3\">\n        <mat-card class=\"flex-grow-1\">\n          <mat-card-content>\n            <div class=\"d-flex align-items-center\">\n              <mat-icon>\n                description\n              </mat-icon>\n              <h3 class=\"font-weight-bold mb-0\">\n                {{title}}s\n              </h3>\n              <mat-icon class=\"cursor-pointer\" *ngIf=\"!viewOnly && isShowCreateAction\" (click)=\"addEntityFile()\">\n                add\n              </mat-icon>\n              <span class=\"flex-grow-1\"></span>\n              <form [formGroup]=\"filterFormGroup\" class=\"d-flex gap-2\">\n                <mat-form-field *ngIf=\"!removeSearch\" appearance=\"outline\">\n                  <mat-label>Search</mat-label>\n                  <input type=\"text\" matInput formControlName=\"title\" placeholder=\"Search\" name=\"title\"\n                    autocomplete=\"off\" />\n                  <button *ngIf=\"filters.title\" matSuffix mat-icon-button (click)=\"resetFieldValue($event, 'title')\">\n                    <mat-icon>close</mat-icon>\n                  </button>\n                </mat-form-field>\n\n                <ng-container *ngIf=\"useTechlifyTags\">\n                  <mat-form-field>\n                    <mat-label>Tag</mat-label>\n                    <app-techlify-tagger-tag-form-field [categories]=\"techlifyTagCategories\" formControlName=\"tag_ids\"\n                      placeholder=\"Select Tags\" [config]=\"techlifyTagConfig\"></app-techlify-tagger-tag-form-field>\n                  </mat-form-field>\n                </ng-container>\n\n              </form>\n            </div>\n          </mat-card-content>\n          <mat-card-content class=\"entity-file-card p-0\">\n            <table mat-table [dataSource]=\"entityFiles\" class=\"w-100\" matSort multiTemplateDataRows infiniteScroll\n              [infiniteScrollDistance]=\"1.5\" [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\">\n\n              <!-- Select Column -->\n              <ng-container matColumnDef=\"select\">\n                <th mat-header-cell *matHeaderCellDef style=\"width:30px\">\n                  <mat-checkbox name=\"employee\" [(ngModel)]=\"isAllSelected\" (change)=\"selectAll()\">\n                  </mat-checkbox>\n                </th>\n                <td mat-cell *matCellDef=\"let element\" style=\"width:30px\">\n                  <mat-checkbox name=\"employee[{{element?.id}}]\" (click)=\"$event.stopPropagation()\"\n                    [(ngModel)]=\"element.is_selected\" (change)=\"employeeListModified($event, element)\"\n                    [disabled]=\"!entityFiles.length\">\n                  </mat-checkbox>\n                </td>\n              </ng-container>\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 = dataIndex\"> {{ i+1 }} </td>\n              </ng-container>\n\n              <!-- Title Column -->\n              <ng-container matColumnDef=\"title\">\n                <th mat-header-cell *matHeaderCellDef> Title </th>\n                <td mat-cell *matCellDef=\"let element\">\n                  {{element.title}}\n                  <ng-container *ngIf=\"useTechlifyTags\">\n                    <br>\n                    <small class=\"badge badge-secondary mr-1\" *ngFor=\"let tag of element?.tags\">{{tag?.title}}</small>\n                  </ng-container>\n\n                </td>\n              </ng-container>\n\n              <!-- Details Column -->\n              <ng-container matColumnDef=\"details\">\n                <th mat-header-cell *matHeaderCellDef> Details </th>\n                <td mat-cell *matCellDef=\"let element\">\n                  <app-read-more [text]=\"element.details\" [maxLength]=\"50\"></app-read-more>\n                </td>\n              </ng-container>\n\n              <!-- File size Column -->\n              <ng-container matColumnDef=\"file_size\">\n                <th mat-header-cell *matHeaderCellDef> File Size </th>\n                <td mat-cell *matCellDef=\"let element\"> {{ sizeOf(element.file_size)}} </td>\n              </ng-container>\n\n              <!-- Uploaded On Column -->\n              <ng-container matColumnDef=\"uploaded_on\">\n                <th mat-header-cell *matHeaderCellDef> Uploaded On </th>\n                <td mat-cell *matCellDef=\"let element\">\n                  <div>\n                    {{element.created_at | date: 'mediumDate'}}\n                  </div>\n                  <div class=\"text-muted\">\n                    By {{element.creator?.name}}\n                  </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\" class=\"text-muted\">\n                  <div class=\"d-flex\">\n                    <a href=\"{{element.url}}\" target=\"_blank\" class=\"text-decoration-none text-muted clickable\">\n                      <mat-icon>download</mat-icon>\n                    </a>\n                    <mat-icon class=\"clickable\" *ngIf=\"isShowUpdateAction\"\n                      (click)=\"editEntityFile(element)\">edit</mat-icon>\n                    <mat-icon class=\"clickable\" *ngIf=\"isShowDeleteAction\"\n                      (click)=\"deleteEntityFile(element)\">delete</mat-icon>\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\n            <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n          </mat-card-content>\n        </mat-card>\n        <ng-container *ngIf=\"isShowDragDropSection\">\n          <section style=\"flex: 0 1 30%;\" *ngIf=\"!this.documentIds.length && !viewOnly && isShowCreateAction\">\n            <app-file-dropper [config]=\"fileConfig\" (fileChanged)=\"fileChanged($event)\" [fileArray]=\"fileList\">\n            </app-file-dropper>\n          </section>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"d-flex flex-wrap gap-3 mat-typography p-4\" *ngIf=\"displayMode\">\n    <div *ngFor=\"let efile of entityFiles\">\n      <app-document-viewer [file]=\"efile.file\" [fileUrl]=\"efile.url\" [config]=\"this.viewerConfig\" [disableEdit]=\"true\">\n      </app-document-viewer>\n      <a href=\"{{efile.url}}\" target=\"_blank\">\n        <button mat-button type=\"button\">View</button>\n      </a>\n    </div>\n  </div>\n</div>\n\n<mat-card *ngIf=\"viewMode === 'timeline'\">\n  <mat-card-content>\n    <div class=\"d-flex justify-content-start align-items-center gap-2\">\n      <mat-icon>\n        description\n      </mat-icon>\n      <h3 class=\"font-weight-bold primary-color mb-0\">\n        {{title}}s\n      </h3>\n      <span class=\"badge bg-primary\" *ngIf=\"total > 0\">{{ total }}</span>\n      <mat-icon color=\"primary\" class=\"cursor-pointer\" *ngIf=\"!viewOnly && isShowCreateAction\"\n        (click)=\"addEntityFile()\">\n        add\n      </mat-icon>\n    </div>\n  </mat-card-content>\n  <mat-card-content *ngIf=\"!this.documentIds.length && !viewOnly && isShowCreateAction\" class=\"mt-3\">\n    <app-file-dropper [config]=\"fileConfig\" (fileChanged)=\"fileChanged($event)\" [fileArray]=\"fileList\">\n    </app-file-dropper>\n  </mat-card-content>\n\n  <mat-card-content class=\"mt-3\">\n    <div *ngFor=\"let entityFile of entityFiles\" class=\"d-flex flex-column gap-0\">\n      <div class=\"d-flex flex-column gap-0\">\n        <div class=\"d-flex justify-content-between align-items-center gap-1\">\n          <p class=\"mb-0 fw-bold text-wrap\">{{ entityFile?.title | wrap:20 }}</p>\n          <span class=\"badge bg-dark\" *ngFor=\"let tag of entityFile?.tags\">\n            {{ tag?.title }}\n          </span>\n          <small class=\"text-dark\">{{ sizeOf(entityFile.file_size) }}</small>\n        </div>\n      </div>\n      <app-read-more [text]=\"entityFile?.details\" [maxLength]=\"50\"></app-read-more>\n      <div class=\"d-flex justify-content-between gap-2\">\n        <small class=\"text-secondary\" style=\"max-width: 70%\">\n          <i>Uploaded By {{ entityFile?.creator?.name }} {{ entityFile?.created_at | date: 'mediumDate'}}</i>\n        </small>\n        <div class=\"d-flex justify-content-end align-items-center gap-1\">\n          <a href=\"{{entityFile?.url}}\" target=\"_blank\" class=\"text-decoration-none text-secondary mt-2\">\n            <mat-icon>download</mat-icon>\n          </a>\n          <mat-icon *ngIf=\"isShowUpdateAction\" (click)=\"editEntityFile(entityFile)\"\n            class=\"cursor-pointer text-secondary\">\n            edit\n          </mat-icon>\n          <mat-icon *ngIf=\"isShowDeleteAction\" (click)=\"deleteEntityFile(entityFile)\"\n            class=\"cursor-pointer text-secondary\">\n            delete\n          </mat-icon>\n        </div>\n      </div>\n      <hr style=\"margin: 0.5rem 0\">\n    </div>\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>\n", styles: ["th.mat-header-cell,td.mat-cell,td.mat-footer-cell{padding:2px}.entity-file-card{overflow-x:auto}.clickable:hover{cursor:pointer}\n"], 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: 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: FileDropperComponent, selector: "app-file-dropper", inputs: ["fileArray", "config", "styles"], outputs: ["fileChanged"] }, { kind: "component", type: DocumentViewerComponent, selector: "app-document-viewer", inputs: ["config", "file", "fileUrl", "disableEdit"], outputs: ["remove"] }, { 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: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { 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: 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: "component", type: i4.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i4.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i11$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: TechlifyTaggerTagFormFieldComponent, selector: "app-techlify-tagger-tag-form-field", inputs: ["config", "modelType", "modelId", "allTags", "categories", "defaultCreateCategory", "required", "disabled", "value", "placeholder"] }, { kind: "component", type: ReadMoreComponent, selector: "app-read-more", inputs: ["text", "maxLength"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "pipe", type: WrapPipe, name: "wrap" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: EntityFilesViewAllComponent, selector: "app-entity-files-view-all", inputs: { entityId: "entityId", entityType: "entityType", viewOnly: "viewOnly", removeSearch: "removeSearch", hideTitleAndDetails: "hideTitleAndDetails", displayMode: "displayMode", allowMultipleFiles: "allowMultipleFiles", allowBulkUpdate: "allowBulkUpdate", viewMode: "viewMode", fileDropperHeight: "fileDropperHeight", isShowDragDropSection: "isShowDragDropSection", useTechlifyTags: "useTechlifyTags", techlifyTagCategories: "techlifyTagCategories", techlifyTagConfig: "techlifyTagConfig", title: "title", permission: "permission" }, usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"viewMode === 'list'\">\n  <div *ngIf=\"this.selectedModelIds.length\" class=\"d-none d-md-flex flex-column\">\n    <mat-card class=\"update_card\" *ngIf=\"this.selectedModelIds.length\">\n      <mat-card-header>\n        <mat-card-title>\n          <div mat-dialog-title class=\"mt-2 ml-2 text-center\">\n            <div>Update Selected Rows</div>\n          </div>\n        </mat-card-title>\n      </mat-card-header>\n      <mat-card-content class=\"d-flex flex-column\">\n        <form [formGroup]=\"updateRowForm\">\n          <div class=\"d-flex flex-column\">\n\n            <mat-form-field class=\"w-100 px-1\">\n              <input matInput formControlName=\"title\" placeholder=\"Title\" autocomplete=\"off\" />\n              <button *ngIf=\"updateRowForm.get('title').value || updateRowForm.get('title').value===0\" matSuffix\n                mat-icon-button style=\"color:red\" (click)=\"updateRowForm.get('title').setValue('')\">\n                <mat-icon>close</mat-icon>\n              </button>\n              <button matSuffix mat-icon-button type=\"button\" style=\"color:green\" *ngIf=\"(updateRowForm.get('title').value || updateRowForm.get('title').value===0)\n                && updateRowForm.get('title').valid\" (click)=\"bulkUpdate('title')\">\n                <mat-icon>done</mat-icon>\n              </button>\n            </mat-form-field>\n\n            <mat-form-field class=\"w-100 px-1\">\n              <textarea matInput formControlName=\"details\" placeholder=\"Details\" autocomplete=\"off\"></textarea>\n              <button *ngIf=\"updateRowForm.get('details').value || updateRowForm.get('details').value===0\" matSuffix\n                mat-icon-button style=\"color:red\" (click)=\"updateRowForm.get('details').setValue('')\">\n                <mat-icon>close</mat-icon>\n              </button>\n              <button matSuffix mat-icon-button type=\"button\" style=\"color:green\" *ngIf=\"(updateRowForm.get('details').value || updateRowForm.get('details').value===0)\n                && updateRowForm.get('details').valid\" (click)=\"bulkUpdate('details')\">\n                <mat-icon>done</mat-icon>\n              </button>\n            </mat-form-field>\n\n            <ng-container *ngIf=\"useTechlifyTags\">\n              <mat-form-field>\n                <mat-label>Tag</mat-label>\n                <app-techlify-tagger-tag-form-field modelType=\"entity-file\" formControlName=\"tag_ids\"\n                  placeholder=\"Enter new tag\">\n                </app-techlify-tagger-tag-form-field>\n                <button *ngIf=\"updateRowForm.get('tag_ids').value || updateRowForm.get('tag_ids').value===0\" matSuffix\n                  mat-icon-button style=\"color:red\" (click)=\"updateRowForm.get('tag_ids').setValue('')\">\n                  <mat-icon>close</mat-icon>\n                </button>\n                <button matSuffix mat-icon-button type=\"button\" style=\"color:green\" *ngIf=\"(updateRowForm.get('tag_ids').value || updateRowForm.get('tag_ids').value===0)\n                  && updateRowForm.get('tag_ids').valid\" (click)=\"bulkUpdate('tag_ids')\">\n                  <mat-icon>done</mat-icon>\n                </button>\n              </mat-form-field>\n            </ng-container>\n          </div>\n        </form>\n      </mat-card-content>\n    </mat-card>\n\n  </div>\n\n  <div>\n    <div class=\"mat-typography\" *ngIf=\"!displayMode\">\n      <div class=\"d-flex flex-row gap-3\">\n        <mat-card class=\"flex-grow-1\">\n          <mat-card-content>\n            <div class=\"d-flex align-items-center\">\n              <mat-icon>\n                description\n              </mat-icon>\n              <h3 class=\"font-weight-bold mb-0\">\n                {{title}}s\n              </h3>\n              <app-techlify-icon name=\"add\" class=\"clickable ms-2\" (click)=\"addEntityFile()\"\n                *ngIf=\"!viewOnly && isShowCreateAction\" matTooltip=\"Add\"></app-techlify-icon>\n              <span class=\"flex-grow-1\"></span>\n              <form [formGroup]=\"filterForm\" class=\"d-flex gap-2\">\n                <mat-form-field *ngIf=\"!removeSearch\" appearance=\"outline\">\n                  <mat-label>Search</mat-label>\n                  <input type=\"text\" matInput formControlName=\"title\" placeholder=\"Search\" name=\"title\"\n                    autocomplete=\"off\" />\n                  <button *ngIf=\"filters.title\" matSuffix mat-icon-button (click)=\"resetFilter('title')\">\n                    <mat-icon>close</mat-icon>\n                  </button>\n                </mat-form-field>\n\n                <ng-container *ngIf=\"useTechlifyTags\">\n                  <mat-form-field>\n                    <mat-label>Tag</mat-label>\n                    <app-techlify-tagger-tag-form-field [categories]=\"techlifyTagCategories\" formControlName=\"tag_ids\"\n                      placeholder=\"Select Tags\" [config]=\"techlifyTagConfig\"></app-techlify-tagger-tag-form-field>\n                  </mat-form-field>\n                </ng-container>\n\n              </form>\n            </div>\n          </mat-card-content>\n          <mat-card-content class=\"entity-file-card p-0\">\n            <table mat-table [dataSource]=\"models\" class=\"w-100\" matSort multiTemplateDataRows infiniteScroll\n              [infiniteScrollDistance]=\"1.5\" [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\">\n\n              <!-- Select Column -->\n              <ng-container matColumnDef=\"select\">\n                <th mat-header-cell *matHeaderCellDef style=\"width:30px\">\n                  <mat-checkbox name=\"employee\" [(ngModel)]=\"isAllSelected\" (change)=\"selectAll()\">\n                  </mat-checkbox>\n                </th>\n                <td mat-cell *matCellDef=\"let element\" style=\"width:30px\">\n                  <mat-checkbox name=\"employee[{{element?.id}}]\" (click)=\"$event.stopPropagation()\"\n                    [(ngModel)]=\"element.is_selected\" (change)=\"isSelectionModified($event, element)\"\n                    [disabled]=\"!models.length\">\n                  </mat-checkbox>\n                </td>\n              </ng-container>\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 = dataIndex\"> {{ i+1 }} </td>\n              </ng-container>\n\n              <!-- Title Column -->\n              <ng-container matColumnDef=\"title\">\n                <th mat-header-cell *matHeaderCellDef> Title </th>\n                <td mat-cell *matCellDef=\"let element\">\n                  {{element.title}}\n                  <ng-container *ngIf=\"useTechlifyTags\">\n                    <br>\n                    <small class=\"badge badge-secondary mr-1\" *ngFor=\"let tag of element?.tags\">{{tag?.title}}</small>\n                  </ng-container>\n\n                </td>\n              </ng-container>\n\n              <!-- Details Column -->\n              <ng-container matColumnDef=\"details\">\n                <th mat-header-cell *matHeaderCellDef> Details </th>\n                <td mat-cell *matCellDef=\"let element\">\n                  <app-read-more [text]=\"element.details\" [maxLength]=\"50\"></app-read-more>\n                </td>\n              </ng-container>\n\n              <!-- File size Column -->\n              <ng-container matColumnDef=\"file_size\">\n                <th mat-header-cell *matHeaderCellDef> File Size </th>\n                <td mat-cell *matCellDef=\"let element\"> {{ sizeOf(element.file_size)}} </td>\n              </ng-container>\n\n              <!-- Uploaded On Column -->\n              <ng-container matColumnDef=\"uploaded_on\">\n                <th mat-header-cell *matHeaderCellDef> Uploaded On </th>\n                <td mat-cell *matCellDef=\"let element\">\n                  <div>\n                    {{element.created_at | date: 'mediumDate'}}\n                  </div>\n                  <div class=\"text-muted\">\n                    By {{element.creator?.name}}\n                  </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\" class=\"text-muted\">\n                  <div class=\"d-flex\">\n                    <a href=\"{{element.url}}\" target=\"_blank\" class=\"text-decoration-none text-muted clickable\">\n                      <mat-icon>download</mat-icon>\n                    </a>\n                    <app-techlify-icon name=\"edit\" class=\"clickable text-secondary\" (click)=\"editEntityFile(element)\"\n                      *ngIf=\"!viewOnly && isShowUpdateAction\" matTooltip=\"Edit\"></app-techlify-icon>\n                    <app-techlify-delete-button *ngIf=\"!viewOnly && isShowDeleteAction\" class='text-secondary ms-1'\n                      [model]=\"element\" [service]=\"entityFileService\"\n                      message=\"Are you sure to proceed delete the file {{element.title}}\"\n                      (deleted)=\"modelsDeletedById(element)\">\n                    </app-techlify-delete-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\n            <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n          </mat-card-content>\n        </mat-card>\n        <ng-container *ngIf=\"isShowDragDropSection\">\n          <section style=\"flex: 0 1 30%;\" *ngIf=\"!this.selectedModelIds.length && !viewOnly && isShowCreateAction\">\n            <app-file-dropper [config]=\"fileConfig\" (fileChanged)=\"fileChanged($event)\" [fileArray]=\"models\">\n            </app-file-dropper>\n          </section>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"d-flex flex-wrap gap-3 mat-typography p-4\" *ngIf=\"displayMode\">\n    <div *ngFor=\"let efile of models\">\n      <app-document-viewer [file]=\"efile.file\" [fileUrl]=\"efile.url\" [config]=\"this.viewerConfig\" [disableEdit]=\"true\">\n      </app-document-viewer>\n      <a href=\"{{efile.url}}\" target=\"_blank\">\n        <button mat-button type=\"button\">View</button>\n      </a>\n    </div>\n  </div>\n</div>\n\n<mat-card *ngIf=\"viewMode === 'timeline'\">\n  <mat-card-content>\n    <div class=\"d-flex justify-content-start align-items-center gap-2\">\n      <mat-icon>\n        description\n      </mat-icon>\n      <h3 class=\"font-weight-bold mb-0\">\n        {{title}}s\n      </h3>\n      <app-techlify-icon name=\"add\" class=\"clickable\" (click)=\"addEntityFile()\" *ngIf=\"!viewOnly && isShowCreateAction\"\n        matTooltip=\"Add\"></app-techlify-icon>\n    </div>\n  </mat-card-content>\n  <mat-card-content *ngIf=\"!this.selectedModelIds.length && !viewOnly && isShowCreateAction\" class=\"mt-3\">\n    <app-file-dropper [config]=\"fileConfig\" (fileChanged)=\"fileChanged($event)\" [fileArray]=\"models\">\n    </app-file-dropper>\n  </mat-card-content>\n\n  <mat-card-content class=\"mt-3\">\n    <div *ngFor=\"let entityFile of models\" class=\"d-flex flex-column gap-0\">\n      <div class=\"d-flex flex-column gap-0\">\n        <div class=\"d-flex justify-content-between align-items-center gap-1\">\n          <p class=\"mb-0 fw-bold text-wrap\">{{ entityFile?.title | wrap:20 }}</p>\n          <span class=\"badge bg-dark\" *ngFor=\"let tag of entityFile?.tags\">\n            {{ tag?.title }}\n          </span>\n          <small class=\"text-dark\">{{ sizeOf(entityFile.file_size) }}</small>\n        </div>\n      </div>\n      <app-read-more [text]=\"entityFile?.details\" [maxLength]=\"50\"></app-read-more>\n      <div class=\"d-flex justify-content-between gap-2\">\n        <small class=\"text-secondary\" style=\"max-width: 70%\">\n          <i>Uploaded By {{ entityFile?.creator?.name }} {{ entityFile?.created_at | date: 'mediumDate'}}</i>\n        </small>\n        <div class=\"d-flex justify-content-end align-items-center gap-1\">\n          <a href=\"{{entityFile?.url}}\" target=\"_blank\" class=\"text-decoration-none text-secondary mt-2\">\n            <mat-icon>download</mat-icon>\n          </a>\n          <app-techlify-icon name=\"edit\" class=\"clickable text-secondary\" (click)=\"editEntityFile(entityFile)\"\n            *ngIf=\"!viewOnly && isShowUpdateAction\" matTooltip=\"Edit\"></app-techlify-icon>\n          <app-techlify-delete-button *ngIf=\"!viewOnly && isShowDeleteAction\" class='text-secondary ms-1'\n            [model]=\"entityFile\" [service]=\"entityFileService\"\n            message=\"Are you sure to proceed delete the file {{entityFile.title}}\"\n            (deleted)=\"modelsDeletedById(entityFile)\">\n          </app-techlify-delete-button>\n        </div>\n      </div>\n      <hr style=\"margin: 0.5rem 0\">\n    </div>\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>", styles: ["th.mat-header-cell,td.mat-cell,td.mat-footer-cell{padding:2px}.entity-file-card{overflow-x:auto}.clickable:hover{cursor:pointer}\n"], 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: 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: FileDropperComponent, selector: "app-file-dropper", inputs: ["fileArray", "config", "styles"], outputs: ["fileChanged"] }, { kind: "component", type: DocumentViewerComponent, selector: "app-document-viewer", inputs: ["config", "file", "fileUrl", "disableEdit"], outputs: ["remove"] }, { 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: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { 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: 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: "component", type: i4.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i4.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { 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: TechlifyTaggerTagFormFieldComponent, selector: "app-techlify-tagger-tag-form-field", inputs: ["config", "modelType", "modelId", "allTags", "categories", "defaultCreateCategory", "required", "disabled", "value", "placeholder"] }, { kind: "component", type: ReadMoreComponent, selector: "app-read-more", inputs: ["text", "maxLength"] }, { 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" }, { kind: "pipe", type: WrapPipe, name: "wrap" }] }); }
 };
 EntityFilesViewAllComponent = __decorate([
     UntilDestroy()
 ], EntityFilesViewAllComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EntityFilesViewAllComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-entity-files-view-all', template: "<div *ngIf=\"viewMode === 'list'\">\n  <div *ngIf=\"this.documentIds.length\" class=\"d-none d-md-flex flex-column\">\n    <mat-card class=\"update_card\" *ngIf=\"this.documentIds.length\">\n      <mat-card-header>\n        <mat-card-title>\n          <div mat-dialog-title class=\"mt-2 ml-2 text-center\">\n            <div>Update Selected Rows</div>\n          </div>\n        </mat-card-title>\n      </mat-card-header>\n      <mat-card-content class=\"d-flex flex-column\">\n        <form [formGroup]=\"updateRowForm\">\n          <div class=\"d-flex flex-column\">\n\n            <mat-form-field class=\"w-100 px-1\">\n              <input matInput formControlName=\"title\" placeholder=\"Title\" autocomplete=\"off\" />\n              <button *ngIf=\"updateRowForm.get('title').value || updateRowForm.get('title').value===0\" matSuffix\n                mat-icon-button style=\"color:red\" (click)=\"resetFieldValueOfRow('title', $event)\">\n                <mat-icon>close</mat-icon>\n              </button>\n              <button matSuffix mat-icon-button type=\"button\" style=\"color:green\" *ngIf=\"(updateRowForm.get('title').value || updateRowForm.get('title').value===0)\n                && updateRowForm.get('title').valid\" (click)=\"bulkUpdate('title')\">\n                <mat-icon>done</mat-icon>\n              </button>\n            </mat-form-field>\n\n            <mat-form-field class=\"w-100 px-1\">\n              <textarea matInput formControlName=\"details\" placeholder=\"Details\" autocomplete=\"off\"></textarea>\n              <button *ngIf=\"updateRowForm.get('details').value || updateRowForm.get('details').value===0\" matSuffix\n                mat-icon-button style=\"color:red\" (click)=\"resetFieldValueOfRow('details', $event)\">\n                <mat-icon>close</mat-icon>\n              </button>\n              <button matSuffix mat-icon-button type=\"button\" style=\"color:green\" *ngIf=\"(updateRowForm.get('details').value || updateRowForm.get('details').value===0)\n                && updateRowForm.get('details').valid\" (click)=\"bulkUpdate('details')\">\n                <mat-icon>done</mat-icon>\n              </button>\n            </mat-form-field>\n\n            <ng-container *ngIf=\"useTechlifyTags\">\n              <mat-form-field>\n                <mat-label>Tag</mat-label>\n                <app-techlify-tagger-tag-form-field modelType=\"entity-file\" formControlName=\"tag_ids\"\n                  placeholder=\"Enter new tag\">\n                </app-techlify-tagger-tag-form-field>\n                <button *ngIf=\"updateRowForm.get('tag_ids').value || updateRowForm.get('tag_ids').value===0\" matSuffix\n                  mat-icon-button style=\"color:red\" (click)=\"resetFieldValueOfRow('tag_ids', $event)\">\n                  <mat-icon>close</mat-icon>\n                </button>\n                <button matSuffix mat-icon-button type=\"button\" style=\"color:green\" *ngIf=\"(updateRowForm.get('tag_ids').value || updateRowForm.get('tag_ids').value===0)\n                  && updateRowForm.get('tag_ids').valid\" (click)=\"bulkUpdate('tag_ids')\">\n                  <mat-icon>done</mat-icon>\n                </button>\n              </mat-form-field>\n            </ng-container>\n          </div>\n        </form>\n      </mat-card-content>\n    </mat-card>\n\n  </div>\n\n  <div>\n    <div class=\"mat-typography\" *ngIf=\"!displayMode\">\n      <div class=\"d-flex flex-row gap-3\">\n        <mat-card class=\"flex-grow-1\">\n          <mat-card-content>\n            <div class=\"d-flex align-items-center\">\n              <mat-icon>\n                description\n              </mat-icon>\n              <h3 class=\"font-weight-bold mb-0\">\n                {{title}}s\n              </h3>\n              <mat-icon class=\"cursor-pointer\" *ngIf=\"!viewOnly && isShowCreateAction\" (click)=\"addEntityFile()\">\n                add\n              </mat-icon>\n              <span class=\"flex-grow-1\"></span>\n              <form [formGroup]=\"filterFormGroup\" class=\"d-flex gap-2\">\n                <mat-form-field *ngIf=\"!removeSearch\" appearance=\"outline\">\n                  <mat-label>Search</mat-label>\n                  <input type=\"text\" matInput formControlName=\"title\" placeholder=\"Search\" name=\"title\"\n                    autocomplete=\"off\" />\n                  <button *ngIf=\"filters.title\" matSuffix mat-icon-button (click)=\"resetFieldValue($event, 'title')\">\n                    <mat-icon>close</mat-icon>\n                  </button>\n                </mat-form-field>\n\n                <ng-container *ngIf=\"useTechlifyTags\">\n                  <mat-form-field>\n                    <mat-label>Tag</mat-label>\n                    <app-techlify-tagger-tag-form-field [categories]=\"techlifyTagCategories\" formControlName=\"tag_ids\"\n                      placeholder=\"Select Tags\" [config]=\"techlifyTagConfig\"></app-techlify-tagger-tag-form-field>\n                  </mat-form-field>\n                </ng-container>\n\n              </form>\n            </div>\n          </mat-card-content>\n          <mat-card-content class=\"entity-file-card p-0\">\n            <table mat-table [dataSource]=\"entityFiles\" class=\"w-100\" matSort multiTemplateDataRows infiniteScroll\n              [infiniteScrollDistance]=\"1.5\" [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\">\n\n              <!-- Select Column -->\n              <ng-container matColumnDef=\"select\">\n                <th mat-header-cell *matHeaderCellDef style=\"width:30px\">\n                  <mat-checkbox name=\"employee\" [(ngModel)]=\"isAllSelected\" (change)=\"selectAll()\">\n                  </mat-checkbox>\n                </th>\n                <td mat-cell *matCellDef=\"let element\" style=\"width:30px\">\n                  <mat-checkbox name=\"employee[{{element?.id}}]\" (click)=\"$event.stopPropagation()\"\n                    [(ngModel)]=\"element.is_selected\" (change)=\"employeeListModified($event, element)\"\n                    [disabled]=\"!entityFiles.length\">\n                  </mat-checkbox>\n                </td>\n              </ng-container>\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 = dataIndex\"> {{ i+1 }} </td>\n              </ng-container>\n\n              <!-- Title Column -->\n              <ng-container matColumnDef=\"title\">\n                <th mat-header-cell *matHeaderCellDef> Title </th>\n                <td mat-cell *matCellDef=\"let element\">\n                  {{element.title}}\n                  <ng-container *ngIf=\"useTechlifyTags\">\n                    <br>\n                    <small class=\"badge badge-secondary mr-1\" *ngFor=\"let tag of element?.tags\">{{tag?.title}}</small>\n                  </ng-container>\n\n                </td>\n              </ng-container>\n\n              <!-- Details Column -->\n              <ng-container matColumnDef=\"details\">\n                <th mat-header-cell *matHeaderCellDef> Details </th>\n                <td mat-cell *matCellDef=\"let element\">\n                  <app-read-more [text]=\"element.details\" [maxLength]=\"50\"></app-read-more>\n                </td>\n              </ng-container>\n\n              <!-- File size Column -->\n              <ng-container matColumnDef=\"file_size\">\n                <th mat-header-cell *matHeaderCellDef> File Size </th>\n                <td mat-cell *matCellDef=\"let element\"> {{ sizeOf(element.file_size)}} </td>\n              </ng-container>\n\n              <!-- Uploaded On Column -->\n              <ng-container matColumnDef=\"uploaded_on\">\n                <th mat-header-cell *matHeaderCellDef> Uploaded On </th>\n                <td mat-cell *matCellDef=\"let element\">\n                  <div>\n                    {{element.created_at | date: 'mediumDate'}}\n                  </div>\n                  <div class=\"text-muted\">\n                    By {{element.creator?.name}}\n                  </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\" class=\"text-muted\">\n                  <div class=\"d-flex\">\n                    <a href=\"{{element.url}}\" target=\"_blank\" class=\"text-decoration-none text-muted clickable\">\n                      <mat-icon>download</mat-icon>\n                    </a>\n                    <mat-icon class=\"clickable\" *ngIf=\"isShowUpdateAction\"\n                      (click)=\"editEntityFile(element)\">edit</mat-icon>\n                    <mat-icon class=\"clickable\" *ngIf=\"isShowDeleteAction\"\n                      (click)=\"deleteEntityFile(element)\">delete</mat-icon>\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\n            <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n          </mat-card-content>\n        </mat-card>\n        <ng-container *ngIf=\"isShowDragDropSection\">\n          <section style=\"flex: 0 1 30%;\" *ngIf=\"!this.documentIds.length && !viewOnly && isShowCreateAction\">\n            <app-file-dropper [config]=\"fileConfig\" (fileChanged)=\"fileChanged($event)\" [fileArray]=\"fileList\">\n            </app-file-dropper>\n          </section>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"d-flex flex-wrap gap-3 mat-typography p-4\" *ngIf=\"displayMode\">\n    <div *ngFor=\"let efile of entityFiles\">\n      <app-document-viewer [file]=\"efile.file\" [fileUrl]=\"efile.url\" [config]=\"this.viewerConfig\" [disableEdit]=\"true\">\n      </app-document-viewer>\n      <a href=\"{{efile.url}}\" target=\"_blank\">\n        <button mat-button type=\"button\">View</button>\n      </a>\n    </div>\n  </div>\n</div>\n\n<mat-card *ngIf=\"viewMode === 'timeline'\">\n  <mat-card-content>\n    <div class=\"d-flex justify-content-start align-items-center gap-2\">\n      <mat-icon>\n        description\n      </mat-icon>\n      <h3 class=\"font-weight-bold primary-color mb-0\">\n        {{title}}s\n      </h3>\n      <span class=\"badge bg-primary\" *ngIf=\"total > 0\">{{ total }}</span>\n      <mat-icon color=\"primary\" class=\"cursor-pointer\" *ngIf=\"!viewOnly && isShowCreateAction\"\n        (click)=\"addEntityFile()\">\n        add\n      </mat-icon>\n    </div>\n  </mat-card-content>\n  <mat-card-content *ngIf=\"!this.documentIds.length && !viewOnly && isShowCreateAction\" class=\"mt-3\">\n    <app-file-dropper [config]=\"fileConfig\" (fileChanged)=\"fileChanged($event)\" [fileArray]=\"fileList\">\n    </app-file-dropper>\n  </mat-card-content>\n\n  <mat-card-content class=\"mt-3\">\n    <div *ngFor=\"let entityFile of entityFiles\" class=\"d-flex flex-column gap-0\">\n      <div class=\"d-flex flex-column gap-0\">\n        <div class=\"d-flex justify-content-between align-items-center gap-1\">\n          <p class=\"mb-0 fw-bold text-wrap\">{{ entityFile?.title | wrap:20 }}</p>\n          <span class=\"badge bg-dark\" *ngFor=\"let tag of entityFile?.tags\">\n            {{ tag?.title }}\n          </span>\n          <small class=\"text-dark\">{{ sizeOf(entityFile.file_size) }}</small>\n        </div>\n      </div>\n      <app-read-more [text]=\"entityFile?.details\" [maxLength]=\"50\"></app-read-more>\n      <div class=\"d-flex justify-content-between gap-2\">\n        <small class=\"text-secondary\" style=\"max-width: 70%\">\n          <i>Uploaded By {{ entityFile?.creator?.name }} {{ entityFile?.created_at | date: 'mediumDate'}}</i>\n        </small>\n        <div class=\"d-flex justify-content-end align-items-center gap-1\">\n          <a href=\"{{entityFile?.url}}\" target=\"_blank\" class=\"text-decoration-none text-secondary mt-2\">\n            <mat-icon>download</mat-icon>\n          </a>\n          <mat-icon *ngIf=\"isShowUpdateAction\" (click)=\"editEntityFile(entityFile)\"\n            class=\"cursor-pointer text-secondary\">\n            edit\n          </mat-icon>\n          <mat-icon *ngIf=\"isShowDeleteAction\" (click)=\"deleteEntityFile(entityFile)\"\n            class=\"cursor-pointer text-secondary\">\n            delete\n          </mat-icon>\n        </div>\n      </div>\n      <hr style=\"margin: 0.5rem 0\">\n    </div>\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>\n", styles: ["th.mat-header-cell,td.mat-cell,td.mat-footer-cell{padding:2px}.entity-file-card{overflow-x:auto}.clickable:hover{cursor:pointer}\n"] }]
+            args: [{ selector: 'app-entity-files-view-all', template: "<div *ngIf=\"viewMode === 'list'\">\n  <div *ngIf=\"this.selectedModelIds.length\" class=\"d-none d-md-flex flex-column\">\n    <mat-card class=\"update_card\" *ngIf=\"this.selectedModelIds.length\">\n      <mat-card-header>\n        <mat-card-title>\n          <div mat-dialog-title class=\"mt-2 ml-2 text-center\">\n            <div>Update Selected Rows</div>\n          </div>\n        </mat-card-title>\n      </mat-card-header>\n      <mat-card-content class=\"d-flex flex-column\">\n        <form [formGroup]=\"updateRowForm\">\n          <div class=\"d-flex flex-column\">\n\n            <mat-form-field class=\"w-100 px-1\">\n              <input matInput formControlName=\"title\" placeholder=\"Title\" autocomplete=\"off\" />\n              <button *ngIf=\"updateRowForm.get('title').value || updateRowForm.get('title').value===0\" matSuffix\n                mat-icon-button style=\"color:red\" (click)=\"updateRowForm.get('title').setValue('')\">\n                <mat-icon>close</mat-icon>\n              </button>\n              <button matSuffix mat-icon-button type=\"button\" style=\"color:green\" *ngIf=\"(updateRowForm.get('title').value || updateRowForm.get('title').value===0)\n                && updateRowForm.get('title').valid\" (click)=\"bulkUpdate('title')\">\n                <mat-icon>done</mat-icon>\n              </button>\n            </mat-form-field>\n\n            <mat-form-field class=\"w-100 px-1\">\n              <textarea matInput formControlName=\"details\" placeholder=\"Details\" autocomplete=\"off\"></textarea>\n              <button *ngIf=\"updateRowForm.get('details').value || updateRowForm.get('details').value===0\" matSuffix\n                mat-icon-button style=\"color:red\" (click)=\"updateRowForm.get('details').setValue('')\">\n                <mat-icon>close</mat-icon>\n              </button>\n              <button matSuffix mat-icon-button type=\"button\" style=\"color:green\" *ngIf=\"(updateRowForm.get('details').value || updateRowForm.get('details').value===0)\n                && updateRowForm.get('details').valid\" (click)=\"bulkUpdate('details')\">\n                <mat-icon>done</mat-icon>\n              </button>\n            </mat-form-field>\n\n            <ng-container *ngIf=\"useTechlifyTags\">\n              <mat-form-field>\n                <mat-label>Tag</mat-label>\n                <app-techlify-tagger-tag-form-field modelType=\"entity-file\" formControlName=\"tag_ids\"\n                  placeholder=\"Enter new tag\">\n                </app-techlify-tagger-tag-form-field>\n                <button *ngIf=\"updateRowForm.get('tag_ids').value || updateRowForm.get('tag_ids').value===0\" matSuffix\n                  mat-icon-button style=\"color:red\" (click)=\"updateRowForm.get('tag_ids').setValue('')\">\n                  <mat-icon>close</mat-icon>\n                </button>\n                <button matSuffix mat-icon-button type=\"button\" style=\"color:green\" *ngIf=\"(updateRowForm.get('tag_ids').value || updateRowForm.get('tag_ids').value===0)\n                  && updateRowForm.get('tag_ids').valid\" (click)=\"bulkUpdate('tag_ids')\">\n                  <mat-icon>done</mat-icon>\n                </button>\n              </mat-form-field>\n            </ng-container>\n          </div>\n        </form>\n      </mat-card-content>\n    </mat-card>\n\n  </div>\n\n  <div>\n    <div class=\"mat-typography\" *ngIf=\"!displayMode\">\n      <div class=\"d-flex flex-row gap-3\">\n        <mat-card class=\"flex-grow-1\">\n          <mat-card-content>\n            <div class=\"d-flex align-items-center\">\n              <mat-icon>\n                description\n              </mat-icon>\n              <h3 class=\"font-weight-bold mb-0\">\n                {{title}}s\n              </h3>\n              <app-techlify-icon name=\"add\" class=\"clickable ms-2\" (click)=\"addEntityFile()\"\n                *ngIf=\"!viewOnly && isShowCreateAction\" matTooltip=\"Add\"></app-techlify-icon>\n              <span class=\"flex-grow-1\"></span>\n              <form [formGroup]=\"filterForm\" class=\"d-flex gap-2\">\n                <mat-form-field *ngIf=\"!removeSearch\" appearance=\"outline\">\n                  <mat-label>Search</mat-label>\n                  <input type=\"text\" matInput formControlName=\"title\" placeholder=\"Search\" name=\"title\"\n                    autocomplete=\"off\" />\n                  <button *ngIf=\"filters.title\" matSuffix mat-icon-button (click)=\"resetFilter('title')\">\n                    <mat-icon>close</mat-icon>\n                  </button>\n                </mat-form-field>\n\n                <ng-container *ngIf=\"useTechlifyTags\">\n                  <mat-form-field>\n                    <mat-label>Tag</mat-label>\n                    <app-techlify-tagger-tag-form-field [categories]=\"techlifyTagCategories\" formControlName=\"tag_ids\"\n                      placeholder=\"Select Tags\" [config]=\"techlifyTagConfig\"></app-techlify-tagger-tag-form-field>\n                  </mat-form-field>\n                </ng-container>\n\n              </form>\n            </div>\n          </mat-card-content>\n          <mat-card-content class=\"entity-file-card p-0\">\n            <table mat-table [dataSource]=\"models\" class=\"w-100\" matSort multiTemplateDataRows infiniteScroll\n              [infiniteScrollDistance]=\"1.5\" [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\">\n\n              <!-- Select Column -->\n              <ng-container matColumnDef=\"select\">\n                <th mat-header-cell *matHeaderCellDef style=\"width:30px\">\n                  <mat-checkbox name=\"employee\" [(ngModel)]=\"isAllSelected\" (change)=\"selectAll()\">\n                  </mat-checkbox>\n                </th>\n                <td mat-cell *matCellDef=\"let element\" style=\"width:30px\">\n                  <mat-checkbox name=\"employee[{{element?.id}}]\" (click)=\"$event.stopPropagation()\"\n                    [(ngModel)]=\"element.is_selected\" (change)=\"isSelectionModified($event, element)\"\n                    [disabled]=\"!models.length\">\n                  </mat-checkbox>\n                </td>\n              </ng-container>\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 = dataIndex\"> {{ i+1 }} </td>\n              </ng-container>\n\n              <!-- Title Column -->\n              <ng-container matColumnDef=\"title\">\n                <th mat-header-cell *matHeaderCellDef> Title </th>\n                <td mat-cell *matCellDef=\"let element\">\n                  {{element.title}}\n                  <ng-container *ngIf=\"useTechlifyTags\">\n                    <br>\n                    <small class=\"badge badge-secondary mr-1\" *ngFor=\"let tag of element?.tags\">{{tag?.title}}</small>\n                  </ng-container>\n\n                </td>\n              </ng-container>\n\n              <!-- Details Column -->\n              <ng-container matColumnDef=\"details\">\n                <th mat-header-cell *matHeaderCellDef> Details </th>\n                <td mat-cell *matCellDef=\"let element\">\n                  <app-read-more [text]=\"element.details\" [maxLength]=\"50\"></app-read-more>\n                </td>\n              </ng-container>\n\n              <!-- File size Column -->\n              <ng-container matColumnDef=\"file_size\">\n                <th mat-header-cell *matHeaderCellDef> File Size </th>\n                <td mat-cell *matCellDef=\"let element\"> {{ sizeOf(element.file_size)}} </td>\n              </ng-container>\n\n              <!-- Uploaded On Column -->\n              <ng-container matColumnDef=\"uploaded_on\">\n                <th mat-header-cell *matHeaderCellDef> Uploaded On </th>\n                <td mat-cell *matCellDef=\"let element\">\n                  <div>\n                    {{element.created_at | date: 'mediumDate'}}\n                  </div>\n                  <div class=\"text-muted\">\n                    By {{element.creator?.name}}\n                  </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\" class=\"text-muted\">\n                  <div class=\"d-flex\">\n                    <a href=\"{{element.url}}\" target=\"_blank\" class=\"text-decoration-none text-muted clickable\">\n                      <mat-icon>download</mat-icon>\n                    </a>\n                    <app-techlify-icon name=\"edit\" class=\"clickable text-secondary\" (click)=\"editEntityFile(element)\"\n                      *ngIf=\"!viewOnly && isShowUpdateAction\" matTooltip=\"Edit\"></app-techlify-icon>\n                    <app-techlify-delete-button *ngIf=\"!viewOnly && isShowDeleteAction\" class='text-secondary ms-1'\n                      [model]=\"element\" [service]=\"entityFileService\"\n                      message=\"Are you sure to proceed delete the file {{element.title}}\"\n                      (deleted)=\"modelsDeletedById(element)\">\n                    </app-techlify-delete-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\n            <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n          </mat-card-content>\n        </mat-card>\n        <ng-container *ngIf=\"isShowDragDropSection\">\n          <section style=\"flex: 0 1 30%;\" *ngIf=\"!this.selectedModelIds.length && !viewOnly && isShowCreateAction\">\n            <app-file-dropper [config]=\"fileConfig\" (fileChanged)=\"fileChanged($event)\" [fileArray]=\"models\">\n            </app-file-dropper>\n          </section>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"d-flex flex-wrap gap-3 mat-typography p-4\" *ngIf=\"displayMode\">\n    <div *ngFor=\"let efile of models\">\n      <app-document-viewer [file]=\"efile.file\" [fileUrl]=\"efile.url\" [config]=\"this.viewerConfig\" [disableEdit]=\"true\">\n      </app-document-viewer>\n      <a href=\"{{efile.url}}\" target=\"_blank\">\n        <button mat-button type=\"button\">View</button>\n      </a>\n    </div>\n  </div>\n</div>\n\n<mat-card *ngIf=\"viewMode === 'timeline'\">\n  <mat-card-content>\n    <div class=\"d-flex justify-content-start align-items-center gap-2\">\n      <mat-icon>\n        description\n      </mat-icon>\n      <h3 class=\"font-weight-bold mb-0\">\n        {{title}}s\n      </h3>\n      <app-techlify-icon name=\"add\" class=\"clickable\" (click)=\"addEntityFile()\" *ngIf=\"!viewOnly && isShowCreateAction\"\n        matTooltip=\"Add\"></app-techlify-icon>\n    </div>\n  </mat-card-content>\n  <mat-card-content *ngIf=\"!this.selectedModelIds.length && !viewOnly && isShowCreateAction\" class=\"mt-3\">\n    <app-file-dropper [config]=\"fileConfig\" (fileChanged)=\"fileChanged($event)\" [fileArray]=\"models\">\n    </app-file-dropper>\n  </mat-card-content>\n\n  <mat-card-content class=\"mt-3\">\n    <div *ngFor=\"let entityFile of models\" class=\"d-flex flex-column gap-0\">\n      <div class=\"d-flex flex-column gap-0\">\n        <div class=\"d-flex justify-content-between align-items-center gap-1\">\n          <p class=\"mb-0 fw-bold text-wrap\">{{ entityFile?.title | wrap:20 }}</p>\n          <span class=\"badge bg-dark\" *ngFor=\"let tag of entityFile?.tags\">\n            {{ tag?.title }}\n          </span>\n          <small class=\"text-dark\">{{ sizeOf(entityFile.file_size) }}</small>\n        </div>\n      </div>\n      <app-read-more [text]=\"entityFile?.details\" [maxLength]=\"50\"></app-read-more>\n      <div class=\"d-flex justify-content-between gap-2\">\n        <small class=\"text-secondary\" style=\"max-width: 70%\">\n          <i>Uploaded By {{ entityFile?.creator?.name }} {{ entityFile?.created_at | date: 'mediumDate'}}</i>\n        </small>\n        <div class=\"d-flex justify-content-end align-items-center gap-1\">\n          <a href=\"{{entityFile?.url}}\" target=\"_blank\" class=\"text-decoration-none text-secondary mt-2\">\n            <mat-icon>download</mat-icon>\n          </a>\n          <app-techlify-icon name=\"edit\" class=\"clickable text-secondary\" (click)=\"editEntityFile(entityFile)\"\n            *ngIf=\"!viewOnly && isShowUpdateAction\" matTooltip=\"Edit\"></app-techlify-icon>\n          <app-techlify-delete-button *ngIf=\"!viewOnly && isShowDeleteAction\" class='text-secondary ms-1'\n            [model]=\"entityFile\" [service]=\"entityFileService\"\n            message=\"Are you sure to proceed delete the file {{entityFile.title}}\"\n            (deleted)=\"modelsDeletedById(entityFile)\">\n          </app-techlify-delete-button>\n        </div>\n      </div>\n      <hr style=\"margin: 0.5rem 0\">\n    </div>\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>", styles: ["th.mat-header-cell,td.mat-cell,td.mat-footer-cell{padding:2px}.entity-file-card{overflow-x:auto}.clickable:hover{cursor:pointer}\n"] }]
         }], ctorParameters: () => [{ type: EntityFileService }, { type: i3.Location }, { type: AlertService }, { type: i1.MatDialog }, { type: i1$5.UntypedFormBuilder }, { type: ErrorHandlerService }, { type: CurrentUserService }], propDecorators: { entityId: [{
                 type: Input
             }], entityType: [{
@@ -6153,7 +6083,9 @@ class EntityFilesViewAllModule {
             SearchableSelectorModule,
             ReadMoreModule,
             MatProgressBarModule,
-            WrapPipe], exports: [EntityFilesViewAllComponent] }); }
+            WrapPipe,
+            TechlifyIconModule,
+            TechlifyDeleteButtonComponent], exports: [EntityFilesViewAllComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EntityFilesViewAllModule, imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
@@ -6164,7 +6096,9 @@ class EntityFilesViewAllModule {
             TechlifyTaggerTagFormFieldModule,
             SearchableSelectorModule,
             ReadMoreModule,
-            MatProgressBarModule] }); }
+            MatProgressBarModule,
+            TechlifyIconModule,
+            TechlifyDeleteButtonComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EntityFilesViewAllModule, decorators: [{
             type: NgModule,
@@ -6183,7 +6117,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         SearchableSelectorModule,
                         ReadMoreModule,
                         MatProgressBarModule,
-                        WrapPipe
+                        WrapPipe,
+                        TechlifyIconModule,
+                        TechlifyDeleteButtonComponent
                     ],
                     exports: [
                         EntityFilesViewAllComponent
@@ -6650,7 +6586,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", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { 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()
@@ -6723,7 +6659,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", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }] }); }
+    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()
@@ -7103,7 +7039,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", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { 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()
@@ -9441,7 +9377,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", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }] }); }
+    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()
@@ -11419,7 +11355,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", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { 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,
@@ -12842,7 +12778,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: i6$3.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"] }] }); }
+    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: i6$3.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,
@@ -14559,7 +14495,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$6.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"] }, { 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$6.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,
@@ -14696,7 +14632,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: i6$3.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"] }, { 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: i6$3.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()
@@ -16046,7 +15982,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", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }] }); }
+    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,
@@ -16086,7 +16022,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", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { 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$4.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$4.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,