@unifylib/ui-lib 1.0.73 → 1.0.75

package/fesm2022/iq-ui-lib.mjs

@@ -2293,11 +2293,19 @@ class BaseFormCanvasComponent {
         }
         const field = this.fields.find(f => f.property === prop);
         if (!field?.validationMessages) {
+            if (field?.type === 'phone-number' && control.touched && control.dirty && !control.value) {
+                const prefix = this.pageInfo.labelsSection + ".";
+                return prefix + 'INVALID_PHONE_NUMBER';
+            }
             if (control.value && control.status !== 'VALID' && this.getFirstErrorKey) {
                 return this.getFirstErrorKey(prop);
             }
             return '';
         }
+        if (field?.type === 'phone-number' && control.touched && control.dirty && !control.value) {
+            const prefix = this.pageInfo.labelsSection + ".";
+            return prefix + (field.validationMessages?.validatePhoneNumber || 'INVALID_PHONE_NUMBER');
+        }
         if (control.invalid) {
             const errors = control.errors || {};
             const prefix = this.pageInfo.labelsSection + ".";
@@ -2315,6 +2323,8 @@ class BaseFormCanvasComponent {
                 return prefix + (field.validationMessages?.decimalMax || 'DECIMAL_MAX');
             if (errors['pattern'])
                 return prefix + (field.validationMessages?.pattern || 'INVALID_FORMAT');
+            if (errors['validatePhoneNumber'])
+                return prefix + (field.validationMessages?.validatePhoneNumber || 'INVALID_PHONE_NUMBER');
             if (errors['invalidMathExpression'])
                 return prefix + 'INVALID_MATH';
             if (errors['dateRangeInvalid'])
@@ -2357,6 +2367,10 @@ class BaseFormCanvasComponent {
     }
     showError(prop) {
         const CONTROL = this.formParam?.get([prop]);
+        const field = this.fields.find(f => f.property === prop);
+        if (field?.type === 'phone-number') {
+            return CONTROL?.touched && CONTROL?.dirty && !CONTROL?.value;
+        }
         return (CONTROL?.value || CONTROL?.value === 0) && CONTROL?.status === 'INVALID';
     }
     clearFieldValue(prop) {
@@ -3904,7 +3918,7 @@ class AuditLogComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AuditLogComponent, deps: [{ token: i1.MatDialog }, { token: i3$3.ActivatedRoute }, { token: i3$1.Directionality }, { token: 'securityManager' }, { token: BackendService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AuditLogComponent, isStandalone: true, selector: "app-audit-log", inputs: { pageInfo: "pageInfo", statusName: "statusName", module: "module", identifier: "identifier", fields: "fields", showHiddenFields: "showHiddenFields" }, providers: [DatePipe], ngImport: i0, template: "<div *ngIf=\"itemId > 0 && this.auditLogEntries.length > 0\">\r\n\r\n<mat-expansion-panel class=\"location-card\"\r\n                     #panel=\"matExpansionPanel\"\r\n                     [expanded]=\"true\"\r\n                     [hideToggle]=\"true\"\r\n                     (opened)=\" panel.open() \"\r\n                     (closed)=\" panel.open()\">\r\n  <mat-expansion-panel-header class=\"card-header\" >\r\n    <mat-panel-title>\r\n      <div class=\"title-container\">\r\n        <h3 class=\"card-title\">\r\n          {{ 'audit-log.title' | translate }}\r\n        </h3>\r\n      </div>\r\n    </mat-panel-title>\r\n\r\n  </mat-expansion-panel-header>\r\n  <div class=\"panel-body\">\r\n    <hr class=\"divider\"/>\r\n    <div class=\"timeline-container\">\r\n      <div *ngFor=\"let auditLog of auditLogEntries; let i = index\" class=\"timeline-item\">\r\n        <div class=\"timeline-marker\">\r\n          <div class=\"timeline-circle\"></div>\r\n          <div *ngIf=\"i !== auditLogEntries.length - 1\" class=\"timeline-line\"></div>\r\n        </div>\r\n\r\n        <div class=\"timeline-content\">\r\n          <div class=\"log-main-text\">\r\n            <span class=\"actor-name\">{{ auditLog.createdBy || ('system' | translate) }}</span>\r\n            <span class=\"action-text\">\r\n  {{\r\n                'audit-log.action_' +\r\n                auditLog?.action +\r\n                '_' +\r\n                module\r\n                  | translate\r\n              }}\r\n</span>\r\n            <div *ngIf=\"statusName && auditLog.action === 'EDIT'\" style=\"display: inline\">\r\n              <span class=\"action-text\"> to   </span>\r\n              <button [ngClass]=\"auditLog.subject[statusName]\" class=\"stateType\" mat-button>\r\n                {{ pageInfo.labelsSection + '.' + auditLog.subject[statusName] | translate }}\r\n              </button>\r\n\r\n            </div>\r\n          </div>\r\n          <div class=\"log-timestamp\">\r\n            {{ auditLog.createdOn | date: 'dd MMM, yyyy  HH:mm a' }}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n\r\n  </div>\r\n</mat-expansion-panel>\r\n\r\n</div>\r\n", styles: [".audit-log-header{font-family:sans-serif;color:#333;margin-bottom:8px;padding-left:10px}.timeline-container{padding:20px;background-color:#fff}.timeline-item{display:flex;margin-bottom:15px;position:relative}.timeline-marker{display:flex;flex-direction:column;align-items:center;margin-right:20px;width:20px;justify-content:center}.timeline-marker .timeline-line{width:1px;background-color:#d1d1d1;flex-grow:1;position:absolute;top:0;height:calc(100% + 80px)}.timeline-circle{width:14px;height:14px;border-radius:50%;border:2px solid #345a7d;background:#fff;z-index:2}.timeline-content{flex-grow:1;background:#fff;border:1px solid #f0f0f0;border-radius:8px;padding:15px 20px;box-shadow:0 2px 4px #0000000d;cursor:pointer;transition:background .2s}.log-main-text{font-size:14px;margin-bottom:4px;color:#333}.log-main-text .actor-name,.log-main-text .target-name{font-weight:800;color:#002c44}.log-timestamp{font-size:12px;color:#888}.location-card{border:1px solid #dcdcdc;border-radius:8px;background:#fff;margin:18px auto;overflow:hidden}.location-card .mat-expansion-panel-header{padding:0 15px}.location-card .mat-expansion-panel-header ::ng-deep .mat-content{margin:0!important}.location-card .panel-body{padding:20px 15px;padding-top:0!important}.location-card .panel-body ::ng-deep app-base-form-canvas .main-form-canvas{margin-top:20px!important}.location-card .panel-description{justify-content:end!important;margin:0!important}.location-card .card-header{display:flex;justify-content:space-between;align-items:center;padding:10px 16px!important}.location-card .card-header .title-container{display:flex;flex-direction:column;gap:8px;align-items:flex-start;justify-content:center}.location-card .card-header .card-title{margin:0;font-size:24px;font-weight:700;line-height:1.2;color:#000;width:fit-content;white-space:nowrap}.location-card .card-header .card-subtitle{margin:0;font-family:lusail-light,sans-serif;font-weight:300;font-size:16px;line-height:1.2;color:#888;width:fit-content}.location-card .card-header .btn-edit{width:120px;min-height:32px!important;border-radius:9999px!important;font-size:16px!important}.location-card .card-header .expand-icon{color:#339dff;font-size:16px}.location-card .divider{border:none;border-top:2px solid var(--primary-color-3nd);margin-bottom:20px;margin-top:0}.flex-auto{flex:1 1 auto;display:flex;flex-direction:column}.row{display:flex;flex-direction:row;width:100%}.gap-20{gap:20px}.buttons-wrapper{display:flex;text-align-last:end;margin:0!important;gap:16px;justify-content:flex-end}.buttons-wrapper .action{min-height:44px!important;min-width:135px!important;width:auto!important}.button-text span{font-size:18px}.button-text mat-icon{font-size:18px!important}.btn-none-background-primary{margin:0!important}@media (max-width: 768px){.desktop-buttons{display:none!important}.desktop-buttons.show-on-mobile{display:flex!important}.mobile-buttons{display:flex;gap:12px;align-items:center;justify-content:flex-end}.btn-download-mobile{width:45px!important;height:44px!important;min-width:45px!important;padding:0!important;border-radius:8px!important;background:#0d4261!important;display:flex;align-items:center;justify-content:center}.btn-download-mobile mat-icon{color:#fff!important;font-size:24px!important;width:24px!important;height:28px!important;margin:0!important}.btn-download-mobile .mdc-button__label{padding:0!important}.btn-menu-mobile{width:44px!important;height:44px!important;min-width:44px!important;padding:0!important;border-radius:8px!important;border:1px solid #3e627b!important;background:#fff!important;display:flex;align-items:center;justify-content:center}.btn-menu-mobile mat-icon{color:#0d4261!important;font-size:24px!important;width:25px!important;height:24px!important;margin:0!important;rotate:90deg}.btn-menu-mobile .mdc-button__label{padding:0!important}}@media (min-width: 769px){.mobile-buttons{display:none!important}}@media (max-width: 600px){::ng-deep .main-form-canvas{display:block!important}}\n"], dependencies: [{ kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AuditLogComponent, isStandalone: true, selector: "app-audit-log", inputs: { pageInfo: "pageInfo", statusName: "statusName", module: "module", identifier: "identifier", fields: "fields", showHiddenFields: "showHiddenFields" }, providers: [DatePipe], ngImport: i0, template: "<div *ngIf=\"itemId > 0 && this.auditLogEntries.length > 0\">\r\n\r\n<mat-expansion-panel class=\"location-card\"\r\n                     #panel=\"matExpansionPanel\"\r\n                     [expanded]=\"true\"\r\n                     [hideToggle]=\"true\"\r\n                     (opened)=\" panel.open() \"\r\n                     (closed)=\" panel.open()\">\r\n  <mat-expansion-panel-header class=\"card-header\" >\r\n    <mat-panel-title>\r\n      <div class=\"title-container\">\r\n        <h3 class=\"card-title\">\r\n          {{ 'audit-log.title' | translate }}\r\n        </h3>\r\n      </div>\r\n    </mat-panel-title>\r\n\r\n  </mat-expansion-panel-header>\r\n  <div class=\"panel-body\">\r\n    <hr class=\"divider\"/>\r\n    <div class=\"timeline-container\">\r\n      <div *ngFor=\"let auditLog of auditLogEntries; let i = index\" class=\"timeline-item\">\r\n        <div class=\"timeline-marker\">\r\n          <div class=\"timeline-circle\"></div>\r\n          <div *ngIf=\"i !== auditLogEntries.length - 1\" class=\"timeline-line\"></div>\r\n        </div>\r\n\r\n        <div class=\"timeline-content\">\r\n          <div class=\"log-main-text\">\r\n            <span class=\"actor-name\">{{ auditLog.createdByDisplayName || auditLog.createdBy || ('system' | translate) }}</span>\r\n            <span class=\"action-text\">\r\n  {{\r\n                'audit-log.action_' +\r\n                auditLog?.action +\r\n                '_' +\r\n                module\r\n                  | translate\r\n              }}\r\n</span>\r\n            <div *ngIf=\"statusName && auditLog.action === 'EDIT'\" style=\"display: inline\">\r\n              <span class=\"action-text\"> to   </span>\r\n              <button [ngClass]=\"auditLog.subject[statusName]\" class=\"stateType\" mat-button>\r\n                {{ pageInfo.labelsSection + '.' + auditLog.subject[statusName] | translate }}\r\n              </button>\r\n\r\n            </div>\r\n          </div>\r\n          <div class=\"log-timestamp\">\r\n            {{ auditLog.createdOn | date: 'dd MMM, yyyy  HH:mm a' }}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n\r\n  </div>\r\n</mat-expansion-panel>\r\n\r\n</div>\r\n", styles: [".audit-log-header{font-family:sans-serif;color:#333;margin-bottom:8px;padding-left:10px}.timeline-container{padding:20px;background-color:#fff}.timeline-item{display:flex;margin-bottom:15px;position:relative}.timeline-marker{display:flex;flex-direction:column;align-items:center;margin-right:20px;width:20px;justify-content:center}.timeline-marker .timeline-line{width:1px;background-color:#d1d1d1;flex-grow:1;position:absolute;top:0;height:calc(100% + 80px)}.timeline-circle{width:14px;height:14px;border-radius:50%;border:2px solid #345a7d;background:#fff;z-index:2}.timeline-content{flex-grow:1;background:#fff;border:1px solid #f0f0f0;border-radius:8px;padding:15px 20px;box-shadow:0 2px 4px #0000000d;cursor:pointer;transition:background .2s}.log-main-text{font-size:14px;margin-bottom:4px;color:#333}.log-main-text .actor-name,.log-main-text .target-name{font-weight:800;color:#002c44}.log-timestamp{font-size:12px;color:#888}.location-card{border:1px solid #dcdcdc;border-radius:8px;background:#fff;margin:18px auto;overflow:hidden}.location-card .mat-expansion-panel-header{padding:0 15px}.location-card .mat-expansion-panel-header ::ng-deep .mat-content{margin:0!important}.location-card .panel-body{padding:20px 15px;padding-top:0!important}.location-card .panel-body ::ng-deep app-base-form-canvas .main-form-canvas{margin-top:20px!important}.location-card .panel-description{justify-content:end!important;margin:0!important}.location-card .card-header{display:flex;justify-content:space-between;align-items:center;padding:10px 16px!important}.location-card .card-header .title-container{display:flex;flex-direction:column;gap:8px;align-items:flex-start;justify-content:center}.location-card .card-header .card-title{margin:0;font-size:24px;font-weight:700;line-height:1.2;color:#000;width:fit-content;white-space:nowrap}.location-card .card-header .card-subtitle{margin:0;font-family:lusail-light,sans-serif;font-weight:300;font-size:16px;line-height:1.2;color:#888;width:fit-content}.location-card .card-header .btn-edit{width:120px;min-height:32px!important;border-radius:9999px!important;font-size:16px!important}.location-card .card-header .expand-icon{color:#339dff;font-size:16px}.location-card .divider{border:none;border-top:2px solid var(--primary-color-3nd);margin-bottom:20px;margin-top:0}.flex-auto{flex:1 1 auto;display:flex;flex-direction:column}.row{display:flex;flex-direction:row;width:100%}.gap-20{gap:20px}.buttons-wrapper{display:flex;text-align-last:end;margin:0!important;gap:16px;justify-content:flex-end}.buttons-wrapper .action{min-height:44px!important;min-width:135px!important;width:auto!important}.button-text span{font-size:18px}.button-text mat-icon{font-size:18px!important}.btn-none-background-primary{margin:0!important}@media (max-width: 768px){.desktop-buttons{display:none!important}.desktop-buttons.show-on-mobile{display:flex!important}.mobile-buttons{display:flex;gap:12px;align-items:center;justify-content:flex-end}.btn-download-mobile{width:45px!important;height:44px!important;min-width:45px!important;padding:0!important;border-radius:8px!important;background:#0d4261!important;display:flex;align-items:center;justify-content:center}.btn-download-mobile mat-icon{color:#fff!important;font-size:24px!important;width:24px!important;height:28px!important;margin:0!important}.btn-download-mobile .mdc-button__label{padding:0!important}.btn-menu-mobile{width:44px!important;height:44px!important;min-width:44px!important;padding:0!important;border-radius:8px!important;border:1px solid #3e627b!important;background:#fff!important;display:flex;align-items:center;justify-content:center}.btn-menu-mobile mat-icon{color:#0d4261!important;font-size:24px!important;width:25px!important;height:24px!important;margin:0!important;rotate:90deg}.btn-menu-mobile .mdc-button__label{padding:0!important}}@media (min-width: 769px){.mobile-buttons{display:none!important}}@media (max-width: 600px){::ng-deep .main-form-canvas{display:block!important}}\n"], dependencies: [{ kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AuditLogComponent, decorators: [{
             type: Component,
@@ -3919,7 +3933,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         MatExpansionPanelTitle,
                         MatExpansionPanel,
                         MatExpansionPanelHeader
-                    ], providers: [DatePipe], template: "<div *ngIf=\"itemId > 0 && this.auditLogEntries.length > 0\">\r\n\r\n<mat-expansion-panel class=\"location-card\"\r\n                     #panel=\"matExpansionPanel\"\r\n                     [expanded]=\"true\"\r\n                     [hideToggle]=\"true\"\r\n                     (opened)=\" panel.open() \"\r\n                     (closed)=\" panel.open()\">\r\n  <mat-expansion-panel-header class=\"card-header\" >\r\n    <mat-panel-title>\r\n      <div class=\"title-container\">\r\n        <h3 class=\"card-title\">\r\n          {{ 'audit-log.title' | translate }}\r\n        </h3>\r\n      </div>\r\n    </mat-panel-title>\r\n\r\n  </mat-expansion-panel-header>\r\n  <div class=\"panel-body\">\r\n    <hr class=\"divider\"/>\r\n    <div class=\"timeline-container\">\r\n      <div *ngFor=\"let auditLog of auditLogEntries; let i = index\" class=\"timeline-item\">\r\n        <div class=\"timeline-marker\">\r\n          <div class=\"timeline-circle\"></div>\r\n          <div *ngIf=\"i !== auditLogEntries.length - 1\" class=\"timeline-line\"></div>\r\n        </div>\r\n\r\n        <div class=\"timeline-content\">\r\n          <div class=\"log-main-text\">\r\n            <span class=\"actor-name\">{{ auditLog.createdBy || ('system' | translate) }}</span>\r\n            <span class=\"action-text\">\r\n  {{\r\n                'audit-log.action_' +\r\n                auditLog?.action +\r\n                '_' +\r\n                module\r\n                  | translate\r\n              }}\r\n</span>\r\n            <div *ngIf=\"statusName && auditLog.action === 'EDIT'\" style=\"display: inline\">\r\n              <span class=\"action-text\"> to   </span>\r\n              <button [ngClass]=\"auditLog.subject[statusName]\" class=\"stateType\" mat-button>\r\n                {{ pageInfo.labelsSection + '.' + auditLog.subject[statusName] | translate }}\r\n              </button>\r\n\r\n            </div>\r\n          </div>\r\n          <div class=\"log-timestamp\">\r\n            {{ auditLog.createdOn | date: 'dd MMM, yyyy  HH:mm a' }}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n\r\n  </div>\r\n</mat-expansion-panel>\r\n\r\n</div>\r\n", styles: [".audit-log-header{font-family:sans-serif;color:#333;margin-bottom:8px;padding-left:10px}.timeline-container{padding:20px;background-color:#fff}.timeline-item{display:flex;margin-bottom:15px;position:relative}.timeline-marker{display:flex;flex-direction:column;align-items:center;margin-right:20px;width:20px;justify-content:center}.timeline-marker .timeline-line{width:1px;background-color:#d1d1d1;flex-grow:1;position:absolute;top:0;height:calc(100% + 80px)}.timeline-circle{width:14px;height:14px;border-radius:50%;border:2px solid #345a7d;background:#fff;z-index:2}.timeline-content{flex-grow:1;background:#fff;border:1px solid #f0f0f0;border-radius:8px;padding:15px 20px;box-shadow:0 2px 4px #0000000d;cursor:pointer;transition:background .2s}.log-main-text{font-size:14px;margin-bottom:4px;color:#333}.log-main-text .actor-name,.log-main-text .target-name{font-weight:800;color:#002c44}.log-timestamp{font-size:12px;color:#888}.location-card{border:1px solid #dcdcdc;border-radius:8px;background:#fff;margin:18px auto;overflow:hidden}.location-card .mat-expansion-panel-header{padding:0 15px}.location-card .mat-expansion-panel-header ::ng-deep .mat-content{margin:0!important}.location-card .panel-body{padding:20px 15px;padding-top:0!important}.location-card .panel-body ::ng-deep app-base-form-canvas .main-form-canvas{margin-top:20px!important}.location-card .panel-description{justify-content:end!important;margin:0!important}.location-card .card-header{display:flex;justify-content:space-between;align-items:center;padding:10px 16px!important}.location-card .card-header .title-container{display:flex;flex-direction:column;gap:8px;align-items:flex-start;justify-content:center}.location-card .card-header .card-title{margin:0;font-size:24px;font-weight:700;line-height:1.2;color:#000;width:fit-content;white-space:nowrap}.location-card .card-header .card-subtitle{margin:0;font-family:lusail-light,sans-serif;font-weight:300;font-size:16px;line-height:1.2;color:#888;width:fit-content}.location-card .card-header .btn-edit{width:120px;min-height:32px!important;border-radius:9999px!important;font-size:16px!important}.location-card .card-header .expand-icon{color:#339dff;font-size:16px}.location-card .divider{border:none;border-top:2px solid var(--primary-color-3nd);margin-bottom:20px;margin-top:0}.flex-auto{flex:1 1 auto;display:flex;flex-direction:column}.row{display:flex;flex-direction:row;width:100%}.gap-20{gap:20px}.buttons-wrapper{display:flex;text-align-last:end;margin:0!important;gap:16px;justify-content:flex-end}.buttons-wrapper .action{min-height:44px!important;min-width:135px!important;width:auto!important}.button-text span{font-size:18px}.button-text mat-icon{font-size:18px!important}.btn-none-background-primary{margin:0!important}@media (max-width: 768px){.desktop-buttons{display:none!important}.desktop-buttons.show-on-mobile{display:flex!important}.mobile-buttons{display:flex;gap:12px;align-items:center;justify-content:flex-end}.btn-download-mobile{width:45px!important;height:44px!important;min-width:45px!important;padding:0!important;border-radius:8px!important;background:#0d4261!important;display:flex;align-items:center;justify-content:center}.btn-download-mobile mat-icon{color:#fff!important;font-size:24px!important;width:24px!important;height:28px!important;margin:0!important}.btn-download-mobile .mdc-button__label{padding:0!important}.btn-menu-mobile{width:44px!important;height:44px!important;min-width:44px!important;padding:0!important;border-radius:8px!important;border:1px solid #3e627b!important;background:#fff!important;display:flex;align-items:center;justify-content:center}.btn-menu-mobile mat-icon{color:#0d4261!important;font-size:24px!important;width:25px!important;height:24px!important;margin:0!important;rotate:90deg}.btn-menu-mobile .mdc-button__label{padding:0!important}}@media (min-width: 769px){.mobile-buttons{display:none!important}}@media (max-width: 600px){::ng-deep .main-form-canvas{display:block!important}}\n"] }]
+                    ], providers: [DatePipe], template: "<div *ngIf=\"itemId > 0 && this.auditLogEntries.length > 0\">\r\n\r\n<mat-expansion-panel class=\"location-card\"\r\n                     #panel=\"matExpansionPanel\"\r\n                     [expanded]=\"true\"\r\n                     [hideToggle]=\"true\"\r\n                     (opened)=\" panel.open() \"\r\n                     (closed)=\" panel.open()\">\r\n  <mat-expansion-panel-header class=\"card-header\" >\r\n    <mat-panel-title>\r\n      <div class=\"title-container\">\r\n        <h3 class=\"card-title\">\r\n          {{ 'audit-log.title' | translate }}\r\n        </h3>\r\n      </div>\r\n    </mat-panel-title>\r\n\r\n  </mat-expansion-panel-header>\r\n  <div class=\"panel-body\">\r\n    <hr class=\"divider\"/>\r\n    <div class=\"timeline-container\">\r\n      <div *ngFor=\"let auditLog of auditLogEntries; let i = index\" class=\"timeline-item\">\r\n        <div class=\"timeline-marker\">\r\n          <div class=\"timeline-circle\"></div>\r\n          <div *ngIf=\"i !== auditLogEntries.length - 1\" class=\"timeline-line\"></div>\r\n        </div>\r\n\r\n        <div class=\"timeline-content\">\r\n          <div class=\"log-main-text\">\r\n            <span class=\"actor-name\">{{ auditLog.createdByDisplayName || auditLog.createdBy || ('system' | translate) }}</span>\r\n            <span class=\"action-text\">\r\n  {{\r\n                'audit-log.action_' +\r\n                auditLog?.action +\r\n                '_' +\r\n                module\r\n                  | translate\r\n              }}\r\n</span>\r\n            <div *ngIf=\"statusName && auditLog.action === 'EDIT'\" style=\"display: inline\">\r\n              <span class=\"action-text\"> to   </span>\r\n              <button [ngClass]=\"auditLog.subject[statusName]\" class=\"stateType\" mat-button>\r\n                {{ pageInfo.labelsSection + '.' + auditLog.subject[statusName] | translate }}\r\n              </button>\r\n\r\n            </div>\r\n          </div>\r\n          <div class=\"log-timestamp\">\r\n            {{ auditLog.createdOn | date: 'dd MMM, yyyy  HH:mm a' }}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n\r\n  </div>\r\n</mat-expansion-panel>\r\n\r\n</div>\r\n", styles: [".audit-log-header{font-family:sans-serif;color:#333;margin-bottom:8px;padding-left:10px}.timeline-container{padding:20px;background-color:#fff}.timeline-item{display:flex;margin-bottom:15px;position:relative}.timeline-marker{display:flex;flex-direction:column;align-items:center;margin-right:20px;width:20px;justify-content:center}.timeline-marker .timeline-line{width:1px;background-color:#d1d1d1;flex-grow:1;position:absolute;top:0;height:calc(100% + 80px)}.timeline-circle{width:14px;height:14px;border-radius:50%;border:2px solid #345a7d;background:#fff;z-index:2}.timeline-content{flex-grow:1;background:#fff;border:1px solid #f0f0f0;border-radius:8px;padding:15px 20px;box-shadow:0 2px 4px #0000000d;cursor:pointer;transition:background .2s}.log-main-text{font-size:14px;margin-bottom:4px;color:#333}.log-main-text .actor-name,.log-main-text .target-name{font-weight:800;color:#002c44}.log-timestamp{font-size:12px;color:#888}.location-card{border:1px solid #dcdcdc;border-radius:8px;background:#fff;margin:18px auto;overflow:hidden}.location-card .mat-expansion-panel-header{padding:0 15px}.location-card .mat-expansion-panel-header ::ng-deep .mat-content{margin:0!important}.location-card .panel-body{padding:20px 15px;padding-top:0!important}.location-card .panel-body ::ng-deep app-base-form-canvas .main-form-canvas{margin-top:20px!important}.location-card .panel-description{justify-content:end!important;margin:0!important}.location-card .card-header{display:flex;justify-content:space-between;align-items:center;padding:10px 16px!important}.location-card .card-header .title-container{display:flex;flex-direction:column;gap:8px;align-items:flex-start;justify-content:center}.location-card .card-header .card-title{margin:0;font-size:24px;font-weight:700;line-height:1.2;color:#000;width:fit-content;white-space:nowrap}.location-card .card-header .card-subtitle{margin:0;font-family:lusail-light,sans-serif;font-weight:300;font-size:16px;line-height:1.2;color:#888;width:fit-content}.location-card .card-header .btn-edit{width:120px;min-height:32px!important;border-radius:9999px!important;font-size:16px!important}.location-card .card-header .expand-icon{color:#339dff;font-size:16px}.location-card .divider{border:none;border-top:2px solid var(--primary-color-3nd);margin-bottom:20px;margin-top:0}.flex-auto{flex:1 1 auto;display:flex;flex-direction:column}.row{display:flex;flex-direction:row;width:100%}.gap-20{gap:20px}.buttons-wrapper{display:flex;text-align-last:end;margin:0!important;gap:16px;justify-content:flex-end}.buttons-wrapper .action{min-height:44px!important;min-width:135px!important;width:auto!important}.button-text span{font-size:18px}.button-text mat-icon{font-size:18px!important}.btn-none-background-primary{margin:0!important}@media (max-width: 768px){.desktop-buttons{display:none!important}.desktop-buttons.show-on-mobile{display:flex!important}.mobile-buttons{display:flex;gap:12px;align-items:center;justify-content:flex-end}.btn-download-mobile{width:45px!important;height:44px!important;min-width:45px!important;padding:0!important;border-radius:8px!important;background:#0d4261!important;display:flex;align-items:center;justify-content:center}.btn-download-mobile mat-icon{color:#fff!important;font-size:24px!important;width:24px!important;height:28px!important;margin:0!important}.btn-download-mobile .mdc-button__label{padding:0!important}.btn-menu-mobile{width:44px!important;height:44px!important;min-width:44px!important;padding:0!important;border-radius:8px!important;border:1px solid #3e627b!important;background:#fff!important;display:flex;align-items:center;justify-content:center}.btn-menu-mobile mat-icon{color:#0d4261!important;font-size:24px!important;width:25px!important;height:24px!important;margin:0!important;rotate:90deg}.btn-menu-mobile .mdc-button__label{padding:0!important}}@media (min-width: 769px){.mobile-buttons{display:none!important}}@media (max-width: 600px){::ng-deep .main-form-canvas{display:block!important}}\n"] }]
         }], ctorParameters: () => [{ type: i1.MatDialog }, { type: i3$3.ActivatedRoute }, { type: i3$1.Directionality }, { type: undefined, decorators: [{
                     type: Inject,
                     args: ['securityManager']