ngx-techlify-core 18.45.0 → 18.46.0

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

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

package/esm2022/lib/role/role.service.mjs

@@ -11,10 +11,10 @@ export class RoleService {
     updateRole(role) {
         return this.http.put(`api/roles/${role.id}`, role).toPromise();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RoleService, deps: [{ token: i1.HttpService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RoleService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RoleService, deps: [{ token: i1.HttpService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RoleService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RoleService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RoleService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'

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

@@ -114,10 +114,10 @@ export class RolesViewAllComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RolesViewAllComponent, deps: [{ token: i1.HttpService }, { token: i2.ActivatedRoute }, { token: i1.CredentialsService }, { token: i3.UserConfigService }, { token: i4.MatDialog }, { token: i5.CurrentUserService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: RolesViewAllComponent, selector: "roles-view-all", inputs: { clientId: "clientId" }, ngImport: i0, template: "<div fxLayout=\"column\" class=\"m-2\">\n  <mat-card appearance=\"outlined\">\n    <mat-card-content class=\"d-flex justify-content-start align-items-center gap-2\">\n      <h3 class=\"m-0\">\n        Manage Roles\n      </h3>\n      <app-role-form-button (success)=\"reload()\" class=\"mt-2\"\n        *ngIf=\"(!config.roleConfig.disableAddRole) && currentUserService?.hasPermission('role_create')\"\n        [clientId]=\"clientId\"></app-role-form-button>\n      <button mat-raised-button type=\"button\" [routerLink]=\"['../users']\" *ngIf=\"!config.roleConfig.disableUsers\"\n        class=\"ml-1\">\n        <mat-icon>people</mat-icon>\n        Users\n      </button>\n      <button mat-raised-button type=\"button\" [routerLink]=\"['../role-permissions']\"\n        *ngIf=\"!config.roleConfig.disablePermissions\" class=\"ml-1\">\n        <mat-icon>lock</mat-icon>\n        Role Permissions\n      </button>\n    </mat-card-content>\n  </mat-card>\n\n  <mat-card appearance=\"outlined\" class=\"mt-2 p-0\">\n    <mat-card-content>\n      <table mat-table [dataSource]=\"roles\" class=\"w-100\" infiniteScroll [infiniteScrollDistance]=\"2\"\n        [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" aria-describedby=\"Roles\">\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        <!-- Label Column -->\n        <ng-container matColumnDef=\"label\">\n          <th mat-header-cell *matHeaderCellDef> Label </th>\n          <td mat-cell *matCellDef=\"let element\">\n            <p class=\"mb-0\">{{element?.label}}</p>\n            <span class=\"badge\"\n              [ngClass]=\"{'badge-primary':element?.client_id == null, 'badge-secondary': element?.client_id != null}\">\n              {{(element?.client_id == null) ? 'App role' : 'Custom role'}}\n            </span>\n          </td>\n        </ng-container>\n\n        <!-- Description Column -->\n        <ng-container matColumnDef=\"description\">\n          <th mat-header-cell *matHeaderCellDef> Description </th>\n          <td mat-cell *matCellDef=\"let element\"> {{element?.description }} </td>\n        </ng-container>\n\n        <!-- Module Column -->\n        <ng-container matColumnDef=\"module\">\n          <th mat-header-cell *matHeaderCellDef> Module </th>\n          <td mat-cell *matCellDef=\"let element\"> {{element?.module?.name}} </td>\n        </ng-container>\n\n        <!-- Editable Column -->\n        <ng-container matColumnDef=\"editable\">\n          <th mat-header-cell *matHeaderCellDef> Editable </th>\n          <td mat-cell *matCellDef=\"let element\">\n            <span *ngIf=\"element?.is_editable\" class=\"btn btn-success btn-xs\">Yes</span>\n            <span *ngIf=\"!element?.is_editable\" class=\"btn btn-danger btn-xs\">No</span>\n          </td>\n        </ng-container>\n\n        <!-- Users Column -->\n        <ng-container matColumnDef=\"users\">\n          <th mat-header-cell *matHeaderCellDef> # Users </th>\n          <td mat-cell *matCellDef=\"let element\"> {{element?.role_users_count}} </td>\n        </ng-container>\n\n        <!-- Permissions Column -->\n        <ng-container matColumnDef=\"permissions\">\n          <th mat-header-cell *matHeaderCellDef> Permissions </th>\n          <td mat-cell *matCellDef=\"let element\"> {{element?.permissions_count}} </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 role\" class=\"text-muted\">\n            <button mat-icon-button type=\"button\" [routerLink]=\"['../roles/', role?.id]\">\n              <mat-icon>remove_red_eye</mat-icon>\n            </button>\n            <app-role-form-button (success)=\"reload()\" [role]=\"role\" [isUpdate]=\"true\"\n              *ngIf=\"(isAdminUser || role.is_editable) && currentUserService.hasPermission('role_update')\"\n              [clientId]=\"clientId\"></app-role-form-button>\n\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\n</div>", dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i7.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i10.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i10.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i11.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i12.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: i13.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: i14.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: i15.RoleFormButtonComponent, selector: "app-role-form-button", inputs: ["config", "clientId", "isUpdate", "role"], outputs: ["success"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RolesViewAllComponent, deps: [{ token: i1.HttpService }, { token: i2.ActivatedRoute }, { token: i1.CredentialsService }, { token: i3.UserConfigService }, { token: i4.MatDialog }, { token: i5.CurrentUserService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: RolesViewAllComponent, selector: "roles-view-all", inputs: { clientId: "clientId" }, ngImport: i0, template: "<div fxLayout=\"column\" class=\"m-2\">\n  <mat-card appearance=\"outlined\">\n    <mat-card-content class=\"d-flex justify-content-start align-items-center gap-2\">\n      <h3 class=\"m-0\">\n        Manage Roles\n      </h3>\n      <app-role-form-button (success)=\"reload()\" class=\"mt-2\"\n        *ngIf=\"(!config.roleConfig.disableAddRole) && currentUserService?.hasPermission('role_create')\"\n        [clientId]=\"clientId\"></app-role-form-button>\n      <button mat-raised-button type=\"button\" [routerLink]=\"['../users']\" *ngIf=\"!config.roleConfig.disableUsers\"\n        class=\"ml-1\">\n        <mat-icon>people</mat-icon>\n        Users\n      </button>\n      <button mat-raised-button type=\"button\" [routerLink]=\"['../role-permissions']\"\n        *ngIf=\"!config.roleConfig.disablePermissions\" class=\"ml-1\">\n        <mat-icon>lock</mat-icon>\n        Role Permissions\n      </button>\n    </mat-card-content>\n  </mat-card>\n\n  <mat-card appearance=\"outlined\" class=\"mt-2 p-0\">\n    <mat-card-content>\n      <table mat-table [dataSource]=\"roles\" class=\"w-100\" infiniteScroll [infiniteScrollDistance]=\"2\"\n        [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" aria-describedby=\"Roles\">\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        <!-- Label Column -->\n        <ng-container matColumnDef=\"label\">\n          <th mat-header-cell *matHeaderCellDef> Label </th>\n          <td mat-cell *matCellDef=\"let element\">\n            <p class=\"mb-0\">{{element?.label}}</p>\n            <span class=\"badge\"\n              [ngClass]=\"{'badge-primary':element?.client_id == null, 'badge-secondary': element?.client_id != null}\">\n              {{(element?.client_id == null) ? 'App role' : 'Custom role'}}\n            </span>\n          </td>\n        </ng-container>\n\n        <!-- Description Column -->\n        <ng-container matColumnDef=\"description\">\n          <th mat-header-cell *matHeaderCellDef> Description </th>\n          <td mat-cell *matCellDef=\"let element\"> {{element?.description }} </td>\n        </ng-container>\n\n        <!-- Module Column -->\n        <ng-container matColumnDef=\"module\">\n          <th mat-header-cell *matHeaderCellDef> Module </th>\n          <td mat-cell *matCellDef=\"let element\"> {{element?.module?.name}} </td>\n        </ng-container>\n\n        <!-- Editable Column -->\n        <ng-container matColumnDef=\"editable\">\n          <th mat-header-cell *matHeaderCellDef> Editable </th>\n          <td mat-cell *matCellDef=\"let element\">\n            <span *ngIf=\"element?.is_editable\" class=\"btn btn-success btn-xs\">Yes</span>\n            <span *ngIf=\"!element?.is_editable\" class=\"btn btn-danger btn-xs\">No</span>\n          </td>\n        </ng-container>\n\n        <!-- Users Column -->\n        <ng-container matColumnDef=\"users\">\n          <th mat-header-cell *matHeaderCellDef> # Users </th>\n          <td mat-cell *matCellDef=\"let element\"> {{element?.role_users_count}} </td>\n        </ng-container>\n\n        <!-- Permissions Column -->\n        <ng-container matColumnDef=\"permissions\">\n          <th mat-header-cell *matHeaderCellDef> Permissions </th>\n          <td mat-cell *matCellDef=\"let element\"> {{element?.permissions_count}} </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 role\" class=\"text-muted\">\n            <button mat-icon-button type=\"button\" [routerLink]=\"['../roles/', role?.id]\">\n              <mat-icon>remove_red_eye</mat-icon>\n            </button>\n            <app-role-form-button (success)=\"reload()\" [role]=\"role\" [isUpdate]=\"true\"\n              *ngIf=\"(isAdminUser || role.is_editable) && currentUserService.hasPermission('role_update')\"\n              [clientId]=\"clientId\"></app-role-form-button>\n\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\n</div>", dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i7.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i10.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i10.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i11.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i12.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: i13.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: i14.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: i15.RoleFormButtonComponent, selector: "app-role-form-button", inputs: ["config", "clientId", "isUpdate", "role"], outputs: ["success"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RolesViewAllComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RolesViewAllComponent, decorators: [{
             type: Component,
             args: [{ selector: 'roles-view-all', template: "<div fxLayout=\"column\" class=\"m-2\">\n  <mat-card appearance=\"outlined\">\n    <mat-card-content class=\"d-flex justify-content-start align-items-center gap-2\">\n      <h3 class=\"m-0\">\n        Manage Roles\n      </h3>\n      <app-role-form-button (success)=\"reload()\" class=\"mt-2\"\n        *ngIf=\"(!config.roleConfig.disableAddRole) && currentUserService?.hasPermission('role_create')\"\n        [clientId]=\"clientId\"></app-role-form-button>\n      <button mat-raised-button type=\"button\" [routerLink]=\"['../users']\" *ngIf=\"!config.roleConfig.disableUsers\"\n        class=\"ml-1\">\n        <mat-icon>people</mat-icon>\n        Users\n      </button>\n      <button mat-raised-button type=\"button\" [routerLink]=\"['../role-permissions']\"\n        *ngIf=\"!config.roleConfig.disablePermissions\" class=\"ml-1\">\n        <mat-icon>lock</mat-icon>\n        Role Permissions\n      </button>\n    </mat-card-content>\n  </mat-card>\n\n  <mat-card appearance=\"outlined\" class=\"mt-2 p-0\">\n    <mat-card-content>\n      <table mat-table [dataSource]=\"roles\" class=\"w-100\" infiniteScroll [infiniteScrollDistance]=\"2\"\n        [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" aria-describedby=\"Roles\">\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        <!-- Label Column -->\n        <ng-container matColumnDef=\"label\">\n          <th mat-header-cell *matHeaderCellDef> Label </th>\n          <td mat-cell *matCellDef=\"let element\">\n            <p class=\"mb-0\">{{element?.label}}</p>\n            <span class=\"badge\"\n              [ngClass]=\"{'badge-primary':element?.client_id == null, 'badge-secondary': element?.client_id != null}\">\n              {{(element?.client_id == null) ? 'App role' : 'Custom role'}}\n            </span>\n          </td>\n        </ng-container>\n\n        <!-- Description Column -->\n        <ng-container matColumnDef=\"description\">\n          <th mat-header-cell *matHeaderCellDef> Description </th>\n          <td mat-cell *matCellDef=\"let element\"> {{element?.description }} </td>\n        </ng-container>\n\n        <!-- Module Column -->\n        <ng-container matColumnDef=\"module\">\n          <th mat-header-cell *matHeaderCellDef> Module </th>\n          <td mat-cell *matCellDef=\"let element\"> {{element?.module?.name}} </td>\n        </ng-container>\n\n        <!-- Editable Column -->\n        <ng-container matColumnDef=\"editable\">\n          <th mat-header-cell *matHeaderCellDef> Editable </th>\n          <td mat-cell *matCellDef=\"let element\">\n            <span *ngIf=\"element?.is_editable\" class=\"btn btn-success btn-xs\">Yes</span>\n            <span *ngIf=\"!element?.is_editable\" class=\"btn btn-danger btn-xs\">No</span>\n          </td>\n        </ng-container>\n\n        <!-- Users Column -->\n        <ng-container matColumnDef=\"users\">\n          <th mat-header-cell *matHeaderCellDef> # Users </th>\n          <td mat-cell *matCellDef=\"let element\"> {{element?.role_users_count}} </td>\n        </ng-container>\n\n        <!-- Permissions Column -->\n        <ng-container matColumnDef=\"permissions\">\n          <th mat-header-cell *matHeaderCellDef> Permissions </th>\n          <td mat-cell *matCellDef=\"let element\"> {{element?.permissions_count}} </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 role\" class=\"text-muted\">\n            <button mat-icon-button type=\"button\" [routerLink]=\"['../roles/', role?.id]\">\n              <mat-icon>remove_red_eye</mat-icon>\n            </button>\n            <app-role-form-button (success)=\"reload()\" [role]=\"role\" [isUpdate]=\"true\"\n              *ngIf=\"(isAdminUser || role.is_editable) && currentUserService.hasPermission('role_update')\"\n              [clientId]=\"clientId\"></app-role-form-button>\n\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\n</div>" }]
         }], ctorParameters: () => [{ type: i1.HttpService }, { type: i2.ActivatedRoute }, { type: i1.CredentialsService }, { type: i3.UserConfigService }, { type: i4.MatDialog }, { type: i5.CurrentUserService }], propDecorators: { clientId: [{

package/esm2022/lib/searchable-selector/searchable-selector.component.mjs

@@ -273,15 +273,15 @@ export class SearchableSelectorComponent {
         this._focusMonitor.stopMonitoring(this._elementRef);
         this.subscriptions.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SearchableSelectorComponent, deps: [{ token: i1.UntypedFormBuilder }, { token: i2.FocusMonitor }, { token: i3.HttpService }, { token: i0.ElementRef }, { token: i4.MatDialog }, { token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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", required: "required", disabled: "disabled", value: "value" }, outputs: { selectedValueChange: "selectedValueChange", selectionChange: "selectionChange", itemsChange: "itemsChange" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SearchableSelectorComponent, deps: [{ token: i1.UntypedFormBuilder }, { token: i2.FocusMonitor }, { token: i3.HttpService }, { token: i0.ElementRef }, { token: i4.MatDialog }, { token: i1.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", required: "required", disabled: "disabled", value: "value" }, outputs: { selectedValueChange: "selectedValueChange", selectionChange: "selectionChange", itemsChange: "itemsChange" }, providers: [
             {
                 provide: MatFormFieldControl,
                 useExisting: SearchableSelectorComponent
             }
         ], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<ng-container [formGroup]=\"selectorForm\">\n  <div class=\"searchable-selector-container\">\n    <!-- Selector and Suffix Icons -->\n    <mat-select formControlName=\"select_value\" [multiple]=\"multiple\" [required]=\"required\"\n      (selectionChange)=\"_handleInput()\" (openedChange)=\"openedChange($event)\" [panelWidth]=\"panelWidth\">\n      <!-- Search Field -->\n      <mat-form-field *ngIf=\"enableSearch\" class=\"p-1 w-100\">\n        <input matInput formControlName=\"search\" placeholder=\"Search...\" (keydown)=\"$event.stopPropagation();\"\n          autocomplete=\"off\" #searchInput>\n      </mat-form-field>\n\n      <!-- Options with Scrollable Container -->\n      <div class=\"searchable-selector-scrollable-container\" cdkScrollable (scrollend)=\"onScroll()\">\n        <mat-option *ngFor=\"let item of dataItems\" [value]=\"getPropertyValue(item, valueField)\">\n          <span>{{ getPropertyValue(item, titleField) }}</span>\n          <span *ngIf=\"subtitleField\" class=\"text-secondary\" style=\"font-size: 14px;\">\n            - {{ getPropertyValue(item, subtitleField) }}\n          </span>\n        </mat-option>\n        <mat-progress-bar *ngIf=\"isLoading\" color=\"primary\" mode=\"indeterminate\"></mat-progress-bar>\n      </div>\n    </mat-select>\n\n    <!-- Add and Edit Buttons -->\n    <mat-icon class=\"cursor-pointer\" *ngIf=\"add\" (click)=\"addItem($event)\">\n      add\n    </mat-icon>\n    <mat-icon class=\"cursor-pointer\" *ngIf=\"edit && selectedValue\" (click)=\"editItem($event)\">\n      edit\n    </mat-icon>\n  </div>\n</ng-container>", styles: [".searchable-selector-container{display:flex;align-items:center}.searchable-selector-container mat-select{flex-grow:1}.searchable-selector-container mat-icon{margin-left:2px}.relative-icon{position:relative;top:-4px}.searchable-selector-scrollable-container{max-height:175px;overflow-y:auto}:host ::ng-deep .mat-mdc-floating-label{pointer-events:none!important}\n"], dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.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: i9.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: i10.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i11.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i12.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SearchableSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SearchableSelectorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-searchable-selector', providers: [
                         {

package/esm2022/lib/searchable-selector/searchable-selector.module.mjs

@@ -7,19 +7,19 @@ import { MaterialModule } from '../material.module';
 import { MatProgressBar } from '@angular/material/progress-bar';
 import * as i0 from "@angular/core";
 export class SearchableSelectorModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SearchableSelectorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: SearchableSelectorModule, declarations: [SearchableSelectorComponent], imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SearchableSelectorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: SearchableSelectorModule, declarations: [SearchableSelectorComponent], imports: [CommonModule,
             ReactiveFormsModule,
             FlexLayoutModule,
             MaterialModule,
             MatProgressBar], exports: [SearchableSelectorComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SearchableSelectorModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SearchableSelectorModule, imports: [CommonModule,
             ReactiveFormsModule,
             FlexLayoutModule,
             MaterialModule,
             MatProgressBar] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SearchableSelectorModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SearchableSelectorModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

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

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

package/esm2022/lib/signup/signup.component.mjs

@@ -68,10 +68,10 @@ export class SignUpComponent {
     getErrorMessage(field) {
         return this.formValidatorService.getErrorMessage(field, this.signUpForm, errorMessages);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SignUpComponent, deps: [{ token: i1.HttpService }, { token: i1.AlertService }, { token: i2.Router }, { token: i1.ErrorHandlerService }, { token: i3.UntypedFormBuilder }, { token: i1.FormValidatorService }, { token: i4.UserConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SignUpComponent, selector: "signup", ngImport: i0, template: "<div class=\"h-100  row align-items-center mx-0\">\n    <div class=\"col\">\n        <header class=\"branding-block mb-0 mt-4\">\n            <div class=\"branding text-center\">\n                <a *ngIf=\"userConfig.appLogoUrl\" href=\"{{userConfig.appUrl}}\" target=\"_blank\">\n                    <img class=\"techlify-logo d-inline-block\" [src]=\"userConfig.appLogoUrl\" />\n                </a>\n            </div>\n            <div class=\"product-info text-center mt-2\">\n                <h3 class=\"product-name\">{{ userConfig.appName }}</h3>\n            </div>\n        </header>\n\n        <div id=\"login-form-wrapper\"\n            class=\"form-bordered mx-auto form-medium form-bordered form-centered form-horizontal mt-3 white-box\"\n            style=\"width:550px\">\n\n            <h4 class=\"section-title text-center\">REGISTER</h4>\n\n            <form [formGroup]=\"signUpForm\" (ngSubmit)=\"signUp()\" class=\"pt-4 pr-4 pl-4 pb-1 mt-4 ml-4 mr-4 mb-1\">\n                <div class=\"form-group row\">\n                    <mat-form-field class=\"col-12\">\n                        <input matInput formControlName=\"business_name\" placeholder=\"Business / Company Name\"\n                            type=\"text\" autocomplete=\"off\" required />\n                        <mat-error *ngIf=\"isFieldValid('business_name')\">{{getErrorMessage('business_name')}}\n                        </mat-error>\n                    </mat-form-field>\n                </div>\n                <div class=\"form-group row\">\n                    <mat-form-field class=\"col-12\">\n                        <input matInput formControlName=\"business_email\" placeholder=\"Business / Company Email\"\n                            type=\"email\" autocomplete=\"off\" required />\n                        <mat-error *ngIf=\"isFieldValid('business_email')\">{{getErrorMessage('business_email')}}\n                        </mat-error>\n                    </mat-form-field>\n                </div>\n                <div class=\"form-group row\">\n                    <mat-form-field class=\"col-12\">\n                        <input matInput formControlName=\"user_name\" placeholder=\"User Name\" type=\"text\"\n                            autocomplete=\"off\" required />\n                        <mat-error *ngIf=\"isFieldValid('user_name')\">{{getErrorMessage('user_name')}}</mat-error>\n                    </mat-form-field>\n                </div>\n                <div class=\"form-group row\">\n                    <mat-form-field class=\"col-12\">\n                        <input matInput formControlName=\"user_email\" placeholder=\"User Email\" type=\"email\"\n                            autocomplete=\"off\" required />\n                        <mat-error *ngIf=\"isFieldValid('user_email')\">{{getErrorMessage('user_email')}}</mat-error>\n                    </mat-form-field>\n                </div>\n                <div class=\"row mt-4\">\n                    <div class=\"col-12 text-center\">\n                        <button mat-button type=\"submit\" class=\"btn btn-sm btn-primary w-100\"\n                            [disabled]=\"isWorking\">Register</button>\n                    </div>\n                </div>\n                <div class=\"row mt-2\" *ngIf=\"userConfig.showSocialLogin\">\n                    <div class=\"col-6\">\n                        <button class=\"col-12 google-button\" mat-raised-button type=\"button\"\n                            (click)=\"redirect('google')\">Google</button>\n                    </div>\n                    <div class=\"col-6\">\n                        <button class=\"col-12 facebook-button\" mat-raised-button type=\"button\"\n                            (click)=\"redirect('facebook')\">Facebook</button>\n                    </div>\n                </div>\n            </form>\n        </div>\n        <div class=\"row mt-3 mr-0 ml-0\">\n            <div class=\"col-12 text-center\">\n                <p>Already an {{ userConfig.appName }} member?</p>\n                <button mat-button class=\"btn btn-sm btn-secondary text-white\" style=\"width: 550px;\" type=\"button\"\n                    [routerLink]=\"['/login']\">\n                    Continue with login\n                </button>\n            </div>\n        </div>\n    </div>\n</div>", styles: ["#login-form-wrapper{margin-top:40px}#login-form-wrapper .branding-block{margin-bottom:60px}#login-form-wrapper .techlify-logo{height:40px;padding-right:10px;bottom:10px;position:relative}#login-form-wrapper .company-name{margin-bottom:0}#login-form-wrapper .google-button{background:#ce1d1d;color:#fff}#login-form-wrapper .facebook-button{background:#38388e;color:#fff}:host{width:100%}.white-box{background-color:#fff;padding:10px}mat-selection-list{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}mat-list-option{border:1px solid #ccc;text-align:center;border-radius:4px;padding:10px;cursor:pointer}mat-list-option:hover{background-color:#f0f0f0}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i8.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: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SignUpComponent, deps: [{ token: i1.HttpService }, { token: i1.AlertService }, { token: i2.Router }, { token: i1.ErrorHandlerService }, { token: i3.UntypedFormBuilder }, { token: i1.FormValidatorService }, { token: i4.UserConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SignUpComponent, selector: "signup", ngImport: i0, template: "<div class=\"h-100  row align-items-center mx-0\">\n    <div class=\"col\">\n        <header class=\"branding-block mb-0 mt-4\">\n            <div class=\"branding text-center\">\n                <a *ngIf=\"userConfig.appLogoUrl\" href=\"{{userConfig.appUrl}}\" target=\"_blank\">\n                    <img class=\"techlify-logo d-inline-block\" [src]=\"userConfig.appLogoUrl\" />\n                </a>\n            </div>\n            <div class=\"product-info text-center mt-2\">\n                <h3 class=\"product-name\">{{ userConfig.appName }}</h3>\n            </div>\n        </header>\n\n        <div id=\"login-form-wrapper\"\n            class=\"form-bordered mx-auto form-medium form-bordered form-centered form-horizontal mt-3 white-box\"\n            style=\"width:550px\">\n\n            <h4 class=\"section-title text-center\">REGISTER</h4>\n\n            <form [formGroup]=\"signUpForm\" (ngSubmit)=\"signUp()\" class=\"pt-4 pr-4 pl-4 pb-1 mt-4 ml-4 mr-4 mb-1\">\n                <div class=\"form-group row\">\n                    <mat-form-field class=\"col-12\">\n                        <input matInput formControlName=\"business_name\" placeholder=\"Business / Company Name\"\n                            type=\"text\" autocomplete=\"off\" required />\n                        <mat-error *ngIf=\"isFieldValid('business_name')\">{{getErrorMessage('business_name')}}\n                        </mat-error>\n                    </mat-form-field>\n                </div>\n                <div class=\"form-group row\">\n                    <mat-form-field class=\"col-12\">\n                        <input matInput formControlName=\"business_email\" placeholder=\"Business / Company Email\"\n                            type=\"email\" autocomplete=\"off\" required />\n                        <mat-error *ngIf=\"isFieldValid('business_email')\">{{getErrorMessage('business_email')}}\n                        </mat-error>\n                    </mat-form-field>\n                </div>\n                <div class=\"form-group row\">\n                    <mat-form-field class=\"col-12\">\n                        <input matInput formControlName=\"user_name\" placeholder=\"User Name\" type=\"text\"\n                            autocomplete=\"off\" required />\n                        <mat-error *ngIf=\"isFieldValid('user_name')\">{{getErrorMessage('user_name')}}</mat-error>\n                    </mat-form-field>\n                </div>\n                <div class=\"form-group row\">\n                    <mat-form-field class=\"col-12\">\n                        <input matInput formControlName=\"user_email\" placeholder=\"User Email\" type=\"email\"\n                            autocomplete=\"off\" required />\n                        <mat-error *ngIf=\"isFieldValid('user_email')\">{{getErrorMessage('user_email')}}</mat-error>\n                    </mat-form-field>\n                </div>\n                <div class=\"row mt-4\">\n                    <div class=\"col-12 text-center\">\n                        <button mat-button type=\"submit\" class=\"btn btn-sm btn-primary w-100\"\n                            [disabled]=\"isWorking\">Register</button>\n                    </div>\n                </div>\n                <div class=\"row mt-2\" *ngIf=\"userConfig.showSocialLogin\">\n                    <div class=\"col-6\">\n                        <button class=\"col-12 google-button\" mat-raised-button type=\"button\"\n                            (click)=\"redirect('google')\">Google</button>\n                    </div>\n                    <div class=\"col-6\">\n                        <button class=\"col-12 facebook-button\" mat-raised-button type=\"button\"\n                            (click)=\"redirect('facebook')\">Facebook</button>\n                    </div>\n                </div>\n            </form>\n        </div>\n        <div class=\"row mt-3 mr-0 ml-0\">\n            <div class=\"col-12 text-center\">\n                <p>Already an {{ userConfig.appName }} member?</p>\n                <button mat-button class=\"btn btn-sm btn-secondary text-white\" style=\"width: 550px;\" type=\"button\"\n                    [routerLink]=\"['/login']\">\n                    Continue with login\n                </button>\n            </div>\n        </div>\n    </div>\n</div>", styles: ["#login-form-wrapper{margin-top:40px}#login-form-wrapper .branding-block{margin-bottom:60px}#login-form-wrapper .techlify-logo{height:40px;padding-right:10px;bottom:10px;position:relative}#login-form-wrapper .company-name{margin-bottom:0}#login-form-wrapper .google-button{background:#ce1d1d;color:#fff}#login-form-wrapper .facebook-button{background:#38388e;color:#fff}:host{width:100%}.white-box{background-color:#fff;padding:10px}mat-selection-list{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}mat-list-option{border:1px solid #ccc;text-align:center;border-radius:4px;padding:10px;cursor:pointer}mat-list-option:hover{background-color:#f0f0f0}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i8.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: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SignUpComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SignUpComponent, decorators: [{
             type: Component,
             args: [{ selector: 'signup', template: "<div class=\"h-100  row align-items-center mx-0\">\n    <div class=\"col\">\n        <header class=\"branding-block mb-0 mt-4\">\n            <div class=\"branding text-center\">\n                <a *ngIf=\"userConfig.appLogoUrl\" href=\"{{userConfig.appUrl}}\" target=\"_blank\">\n                    <img class=\"techlify-logo d-inline-block\" [src]=\"userConfig.appLogoUrl\" />\n                </a>\n            </div>\n            <div class=\"product-info text-center mt-2\">\n                <h3 class=\"product-name\">{{ userConfig.appName }}</h3>\n            </div>\n        </header>\n\n        <div id=\"login-form-wrapper\"\n            class=\"form-bordered mx-auto form-medium form-bordered form-centered form-horizontal mt-3 white-box\"\n            style=\"width:550px\">\n\n            <h4 class=\"section-title text-center\">REGISTER</h4>\n\n            <form [formGroup]=\"signUpForm\" (ngSubmit)=\"signUp()\" class=\"pt-4 pr-4 pl-4 pb-1 mt-4 ml-4 mr-4 mb-1\">\n                <div class=\"form-group row\">\n                    <mat-form-field class=\"col-12\">\n                        <input matInput formControlName=\"business_name\" placeholder=\"Business / Company Name\"\n                            type=\"text\" autocomplete=\"off\" required />\n                        <mat-error *ngIf=\"isFieldValid('business_name')\">{{getErrorMessage('business_name')}}\n                        </mat-error>\n                    </mat-form-field>\n                </div>\n                <div class=\"form-group row\">\n                    <mat-form-field class=\"col-12\">\n                        <input matInput formControlName=\"business_email\" placeholder=\"Business / Company Email\"\n                            type=\"email\" autocomplete=\"off\" required />\n                        <mat-error *ngIf=\"isFieldValid('business_email')\">{{getErrorMessage('business_email')}}\n                        </mat-error>\n                    </mat-form-field>\n                </div>\n                <div class=\"form-group row\">\n                    <mat-form-field class=\"col-12\">\n                        <input matInput formControlName=\"user_name\" placeholder=\"User Name\" type=\"text\"\n                            autocomplete=\"off\" required />\n                        <mat-error *ngIf=\"isFieldValid('user_name')\">{{getErrorMessage('user_name')}}</mat-error>\n                    </mat-form-field>\n                </div>\n                <div class=\"form-group row\">\n                    <mat-form-field class=\"col-12\">\n                        <input matInput formControlName=\"user_email\" placeholder=\"User Email\" type=\"email\"\n                            autocomplete=\"off\" required />\n                        <mat-error *ngIf=\"isFieldValid('user_email')\">{{getErrorMessage('user_email')}}</mat-error>\n                    </mat-form-field>\n                </div>\n                <div class=\"row mt-4\">\n                    <div class=\"col-12 text-center\">\n                        <button mat-button type=\"submit\" class=\"btn btn-sm btn-primary w-100\"\n                            [disabled]=\"isWorking\">Register</button>\n                    </div>\n                </div>\n                <div class=\"row mt-2\" *ngIf=\"userConfig.showSocialLogin\">\n                    <div class=\"col-6\">\n                        <button class=\"col-12 google-button\" mat-raised-button type=\"button\"\n                            (click)=\"redirect('google')\">Google</button>\n                    </div>\n                    <div class=\"col-6\">\n                        <button class=\"col-12 facebook-button\" mat-raised-button type=\"button\"\n                            (click)=\"redirect('facebook')\">Facebook</button>\n                    </div>\n                </div>\n            </form>\n        </div>\n        <div class=\"row mt-3 mr-0 ml-0\">\n            <div class=\"col-12 text-center\">\n                <p>Already an {{ userConfig.appName }} member?</p>\n                <button mat-button class=\"btn btn-sm btn-secondary text-white\" style=\"width: 550px;\" type=\"button\"\n                    [routerLink]=\"['/login']\">\n                    Continue with login\n                </button>\n            </div>\n        </div>\n    </div>\n</div>", styles: ["#login-form-wrapper{margin-top:40px}#login-form-wrapper .branding-block{margin-bottom:60px}#login-form-wrapper .techlify-logo{height:40px;padding-right:10px;bottom:10px;position:relative}#login-form-wrapper .company-name{margin-bottom:0}#login-form-wrapper .google-button{background:#ce1d1d;color:#fff}#login-form-wrapper .facebook-button{background:#38388e;color:#fff}:host{width:100%}.white-box{background-color:#fff;padding:10px}mat-selection-list{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}mat-list-option{border:1px solid #ccc;text-align:center;border-radius:4px;padding:10px;cursor:pointer}mat-list-option:hover{background-color:#f0f0f0}\n"] }]
         }], ctorParameters: () => [{ type: i1.HttpService }, { type: i1.AlertService }, { type: i2.Router }, { type: i1.ErrorHandlerService }, { type: i3.UntypedFormBuilder }, { type: i1.FormValidatorService }, { type: i4.UserConfigService }] });

package/esm2022/lib/signup/signup.module.mjs

@@ -6,17 +6,17 @@ import { SignUpComponent } from './signup.component';
 import { MaterialModule } from '../material.module';
 import * as i0 from "@angular/core";
 export class SignupModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SignupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: SignupModule, declarations: [SignUpComponent], imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SignupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: SignupModule, declarations: [SignUpComponent], imports: [CommonModule,
             ReactiveFormsModule,
             MaterialModule,
             SignupRoutingModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SignupModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SignupModule, imports: [CommonModule,
             ReactiveFormsModule,
             MaterialModule,
             SignupRoutingModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SignupModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SignupModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/esm2022/lib/subscription/subscription-form/subscription-form-routing.module.mjs

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

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

@@ -131,10 +131,10 @@ export class SubscriptionFormComponent extends TechlifyFormComponentInterface {
             startedAt.updateValueAndValidity();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SubscriptionFormComponent, deps: [{ token: i1.FormValidatorService }, { token: i2.MatDialog }, { token: i3.UntypedFormBuilder }, { token: i4.SubscriptionService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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: i5.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: i2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i7.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i10.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i10.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i12.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i12.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: i13.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i14.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: i15.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.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: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i16.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: i16.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: i16.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: i16.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SubscriptionFormComponent, deps: [{ token: i1.FormValidatorService }, { token: i2.MatDialog }, { token: i3.UntypedFormBuilder }, { token: i4.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: i5.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: i2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i7.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i10.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i10.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i12.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i12.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: i13.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i14.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: i15.SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.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: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i16.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: i16.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: i16.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: i16.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SubscriptionFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SubscriptionFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-subscription-form', 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>" }]
         }], ctorParameters: () => [{ type: i1.FormValidatorService }, { type: i2.MatDialog }, { type: i3.UntypedFormBuilder }, { type: i4.SubscriptionService }], propDecorators: { isUpdate: [{

package/esm2022/lib/subscription/subscription-form/subscription-form.module.mjs

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

package/esm2022/lib/subscription/subscription-listing/subscription-listing-routing.module.mjs

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