@yomotech/view-toolkit 0.0.31 → 0.0.32

package/src/lib/containers/grid/grid.component.html

@@ -0,0 +1,212 @@
+<div *ngIf="!tableitemInfo.data?.length" class="alert alert-warning col-md-12" role="alert">
+    {{ tableitemInfo.layoutSchema?.noRecordMessage}}
+</div>
+<div *ngIf="tableitemInfo.data?.length" class="reservation-container pt-5 px-3">
+    <nz-table #basicTable [nzData]="tableitemInfo.data" [nzBordered]="true"
+        [nzFrontPagination]="currenTableOptions?.pagination?.tabs"
+        [style]="getStyleWithoutClasses(currenTableOptions?.style).style" (scroll)="onScrollEvent($event)"
+        [nzLoading]="isTableDataLoad">
+        <thead>
+            <tr>
+                <th *ngFor="let column of tableitemInfo.layoutSchema.elements">{{ column?.label?.caption }}</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr *ngFor="let data of tableitemInfo.data; let i = index">
+                <td *ngFor="let col of tableitemInfo.layoutSchema.elements"
+                    [style]="getStyleWithoutClasses(col?.scope?.style).style">
+                    <ng-container
+                        *ngIf="tableitemInfo.propertySchema[getScope(col.scope?.reference)] && tableitemInfo.propertySchema[getScope(col.scope?.reference)][col?.scope?.reference?.split('/').pop()]?.type === 'string'"
+                        [class]="getStyleWithoutClasses(col?.scope?.style).classes"
+                        [style]="getStyleWithoutClasses(col?.scope?.style).style">
+                        <span *ngIf="col.option.protected">
+                            <span *ngIf="col.option?.link" (click)="showLinkDetails(col.option, data)">
+                                {{data[col.scope?.reference.split('/').pop()]}}
+                            </span>
+                            <span *ngIf="!col.option?.link">
+                                <ng-container *ngIf="col?.option?.dateFormat; else string">
+                                    {{ data[col.scope?.reference.split('/').pop()] | date:'yyyy-MM-dd' }}
+                                </ng-container>
+                                <ng-template #string>
+                                    {{ data[col.scope?.reference.split('/').pop()] }}
+                                </ng-template>
+                            </span>
+                        </span>
+                        <span *ngIf="!col.option.protected">
+                            <input [(ngModel)]="data[col.scope?.reference.split('/').pop()]"
+                                class="p-inputtext p-component" />
+                        </span>
+                    </ng-container>
+
+                    <ng-container
+                        *ngIf="tableitemInfo.propertySchema[getScope(col.scope?.reference)] && tableitemInfo.propertySchema[getScope(col.scope?.reference)][col?.scope?.reference?.split('/').pop()]?.type === 'number'">
+                        <span *ngIf="col.option.protected">
+                            <span *ngIf="col.option?.innerAction?.action == 'multiply'">
+                                {{
+                                (data[col.option?.innerAction?.from] * data[col.option?.innerAction?.to])
+                                | number:'1.2-2'
+                                }}
+                            </span>
+                            <span *ngIf="!col.option?.innerAction">
+                                {{data[col.scope?.reference.split('/').pop()] | currency:
+                                tableitemInfo.propertySchema[getScope(col.scope?.reference)][col?.scope?.reference?.split('/').pop()]?.currency
+                                :true }}
+                            </span>
+                        </span>
+                        <span *ngIf="!col.option.protected">
+                            <input [(ngModel)]="data[col.scope?.reference.split('/').pop()]" type="number"
+                                class="p-inputtext p-component" />
+                        </span>
+                    </ng-container>
+
+                    <ng-container
+                        *ngIf="tableitemInfo.propertySchema[getScope(col.scope?.reference)] && tableitemInfo.propertySchema[getScope(col.scope?.reference)][col?.scope?.reference?.split('/').pop()]?.type === 'image'">
+                        <img *ngIf="data[col.scope?.reference.split('/').pop()]"
+                            [src]="data[col.scope?.reference.split('/').pop()]" alt="Image"
+                            (click)="invokeTableImageClick(col, data)"
+                            [style]="getStyleWithoutClasses(col?.scope?.style).style" />
+                    </ng-container>
+
+                    <ng-container *ngIf="!col?.scope?.reference">
+                        <span *ngIf="col.option?.actionColumn">
+                            <span nz-icon *ngIf="setActionColumn(col.option?.save, data)" [nzType]="col.option?.save?.icon" [nzTheme]="'twotone'"
+                                [style]="col.option?.save?.style" [nzTwotoneColor]="'#52c41a'"
+                                [class]="col.option?.save?.style?.classes[0]" (click)="upsertAction(col.option?.save, data)">
+                            </span>
+                            <span nz-icon *ngIf="setActionColumn(col.option?.delete, data)" [nzType]="col.option?.delete?.icon" [nzTheme]="'twotone'"
+                                [style]="col.option?.delete?.style" [nzTwotoneColor]="'#FF0000'"
+                                [class]="col.option?.delete?.style?.classes[0]"
+                                (click)="upsertAction(col.option?.delete, data)"></span>
+
+                        </span>
+                        <span *ngIf="!col.option?.actionColumn">
+                            <button type="submit" [style]="getStyleWithoutClasses(col?.label?.style).style"
+                                (click)="invokeGridBtnClick(col.option, data)" [class]="col?.label?.style?.classes[0]">
+                                {{ col.label?.caption }}
+                            </button>
+                        </span>
+                    </ng-container>
+
+                    <!-- For quantity column, display increment/decrement buttons -->
+                    <ng-container
+                        *ngIf="tableitemInfo.propertySchema[getScope(col.scope?.reference)] && tableitemInfo.propertySchema[getScope(col.scope?.reference)][col?.scope?.reference?.split('/').pop()]?.type === 'quantity'">
+                        <div style="display: flex; align-items: center;">
+                            <button pButton icon="pi pi-minus"
+                                (click)="decrementQuantity(i,col.scope?.reference.split('/').pop(), col.option)"
+                                [disabled]="data.quantity <= 0"
+                                style="margin-right: 8px; height: 10px; width: 10px;"></button>
+                            <span>{{ data[col.scope?.reference.split('/').pop()] }}</span>
+                            <button pButton icon="pi pi-plus"
+                                (click)="incrementQuantity(i, col.scope?.reference.split('/').pop(), col.option)"
+                                style="margin-left: 8px; height: 10px; width: 10px;"></button>
+                        </div>
+                    </ng-container>
+                </td>
+            </tr>
+        </tbody>
+    </nz-table>
+</div>
+
+<!-- table footer -->
+<div *ngIf="tableitemInfo?.footer?.formFields && tableitemInfo.data?.length"
+    class="table-footer flex flex-column align-items-end gap-2 pt-2 mx-4 border-top-1 border-cyan-500">
+    <div *ngFor="let tableField of tableitemInfo?.footer?.formFields">
+        <div
+            [ngSwitch]="tableField?.scope?.reference && tableitemInfo.propertySchema[getScope(tableField.scope?.reference)] && tableitemInfo.propertySchema[getScope(tableField.scope?.reference)][tableField.scope?.reference.split('/').pop()] ?
+         tableitemInfo.propertySchema[getScope(tableField.scope?.reference)][tableField.scope?.reference.split('/').pop()]?.type : 'default'">
+
+            <!-- string control -->
+            <div *ngSwitchCase="'string'" class="form-group">
+                <span *ngIf="tableField.option.protected">
+                    <h5 style="display: flex; justify-content: space-between;">
+                        <span [style]="getStyleWithoutClasses(tableField?.label?.style).style"
+                            [class]="tableField?.label?.style?.classes[0]">
+                            {{
+                            tableitemInfo.propertySchema[getScope(tableField.scope?.reference)][tableField.scope?.reference.split('/').pop()]?.caption
+                            }}
+                        </span>
+                        <span>
+                            {{
+                            tableitemInfo.propertySchema[getScope(tableField.scope?.reference)][tableField.scope?.reference.split('/').pop()]?.value
+                            }}
+                        </span>
+                    </h5>
+                </span>
+                <div *ngIf="!tableField.option.protected">
+                    <div [class]="tableField?.layout == 'horizontal' ? 'horizontal-layout' : 'row'">
+                        <label [style]="getStyleWithoutClasses(tableField?.label?.style).style"
+                            [class]="tableField?.label?.style?.classes[0]">{{ tableField.label?.value ?
+                            tableField.label?.value :
+                            tableitemInfo.propertySchema[getScope(tableField.scope?.reference)][tableField.scope?.reference.split('/').pop()]?.caption
+                            }}</label>
+                        <input type="text" #inputField="ngModel" [required]="tableField.option.required"
+                            [email]="tableField.option.email" [class]="tableField.scope?.style?.classes[0]"
+                            [style]="getStyleWithoutClasses(tableField?.scope?.style).style"
+                            [(ngModel)]="tableitemInfo.propertySchema[getScope(tableField.scope?.reference)][tableField.scope?.reference.split('/').pop()].value"
+                            [name]="tableField.scope?.reference"
+                            [placeholder]="tableitemInfo.propertySchema[getScope(tableField.scope?.reference)][tableField.scope?.reference.split('/').pop()]?.placeholder" />
+                    </div>
+                    <!-- Error Message -->
+                    <div *ngIf="inputField?.touched && inputField?.invalid"
+                        [style]="getStyleWithoutClasses(tableField?.validation?.style).style">
+                        <p class="text-danger" *ngIf="inputField?.errors?.['required']">{{tableField.label?.value ?
+                            tableField.label?.value :
+                            tableitemInfo.propertySchema[getScope(tableField.scope?.reference)][tableField.scope?.reference.split('/').pop()]?.caption
+                            +
+                            ' ' + errorMessages.required}}</p>
+                        <p class="text-danger" *ngIf="inputField?.errors?.['email']">{{(tableField.label?.value ?
+                            tableField.label?.value :
+                            tableitemInfo.propertySchema[getScope(tableField.scope?.reference)][tableField.scope?.reference.split('/').pop()]?.caption)
+                            +
+                            ' ' + errorMessages.pattern}}</p>
+                    </div>
+                </div>
+            </div>
+
+            <!-- number control -->
+            <div *ngSwitchCase="'number'" class="form-group">
+                <span *ngIf="tableField.option.protected"
+                    [style]="getStyleWithoutClasses(tableField?.label?.style).style"
+                    [class]="tableField?.label?.style?.classes[0]">
+                    <h5>{{
+                        form.propertySchema[getScope(tableField.scope?.reference)][tableField.scope?.reference.split('/').pop()]?.caption
+                        }} {{
+                        form.propertySchema[getScope(tableField.scope?.reference)][tableField.scope?.reference.split('/').pop()]?.value
+                        |
+                        currency:tableField.option.currency :true: tableField.option?.decimalPoint}}
+                    </h5>
+                </span>
+                <span *ngIf="!tableField.option.protected">
+                    <div [class]="tableField?.layout == 'horizontal' ? 'horizontal-layout' : 'row'">
+                        <label [style]="getStyleWithoutClasses(tableField?.label?.style).style"
+                            [class]="tableField?.label?.style?.classes[0]">{{ tableField.label?.value ?
+                            tableField.label?.value :
+                            form.propertySchema[getScope(tableField.scope?.reference)][tableField.scope?.reference.split('/').pop()]?.caption
+                            }}</label>
+                        <input type="number" [class]="tableField.scope?.style?.classes[0]"
+                            [style]="getStyleWithoutClasses(tableField?.scope?.style).style"
+                            [(ngModel)]="form.propertySchema[getScope(tableField.scope?.reference)][tableField.scope?.reference.split('/').pop()].value"
+                            [name]="tableField.scope?.reference"
+                            [placeholder]="form.propertySchema[getScope(tableField.scope?.reference)][tableField.scope?.reference.split('/').pop()]?.placeholder" />
+                    </div>
+                </span>
+            </div>
+
+            <!-- button control -->
+            <div *ngSwitchCase="'default'">
+                <button type="submit" [style]="getStyleWithoutClasses(tableField.label.style).style"
+                    (click)="invokeGridBtnClick(tableField.option, tableitemInfo.propertySchema)">
+                    {{ tableField.label?.caption }}
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- bottom pagination on grid -->
+<div
+    *ngIf="tableitemInfo.data?.length && !tableitemInfo?.layoutSchema?.pagination?.top && tableitemInfo?.layoutSchema?.pagination?.bottom">
+    <vl-pagination [itemInfo]="tableitemInfo" [pageSize]="pageSize" [currentPage]="currentPage" [pages]="pages"
+        (pageSizeChange)="invokeOnPageSizeChange($event)" (onGoToPage)="invokeGoToPage($event)">
+    </vl-pagination>
+</div>

package/src/lib/containers/grid/grid.component.ts

@@ -0,0 +1,228 @@
+import { AfterViewInit, Component, EventEmitter, Input, Output, SimpleChanges } from '@angular/core';
+import { RequestService } from '../../services/request.service';
+import { UtilityService } from '../../services/utility.service';
+import { OktaAuthStateService } from '@okta/okta-angular';
+import { NotificationService } from '../../services/notification.service';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { NzTableModule } from 'ng-zorro-antd/table';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+import { ButtonModule } from 'primeng/button';
+import { PaginationComponent } from '../pagination/pagination.component';
+
+@Component({
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    NzTableModule,
+    NzIconModule,
+    ButtonModule,
+    PaginationComponent
+  ],
+  selector: 'vl-grid',
+  templateUrl: './grid.component.html',
+  styleUrl: './grid.component.css'
+})
+export class GridComponent implements AfterViewInit {
+  isLogined: boolean = false;
+  tableitemInfoCopy: any = {};
+  @Input() errorMessages: any = {};
+  @Input() environment: any;
+  @Input() selectedLanguageInfo: any = {};
+  @Input() tableitemInfo: any = {};
+  @Input() form: any = {};
+  @Input() isTableDataLoad: boolean = false;
+  @Input() currenTableOptions: any = {};
+  @Input() projectSeleted: any = '';
+  @Input() pageSize: number = 5;
+  @Input() currentPage: number = 0;
+  @Input() pages: number[] = [];
+  @Input() userInfo: any;
+  @Output() onPageChange: EventEmitter<any> = new EventEmitter();
+  @Output() onPageSizeChange: EventEmitter<any> = new EventEmitter();
+  @Output() onGridScroll: EventEmitter<any> = new EventEmitter();
+  @Output() showGridLink: EventEmitter<any> = new EventEmitter();
+  @Output() gridButtonClick: EventEmitter<any> = new EventEmitter();
+  @Output() gridIncreamentClick: EventEmitter<any> = new EventEmitter();
+  @Output() gridDecreamentClick: EventEmitter<any> = new EventEmitter();
+  @Output() gridImgClick: EventEmitter<any> = new EventEmitter();
+
+  constructor(private requestService: RequestService,
+    private utilityService: UtilityService,
+    private notificationService: NotificationService,
+    private oktaAuthService: OktaAuthStateService,) {
+  }
+
+  ngAfterViewInit(): void {
+    this.authenticating();
+    setTimeout(() => {
+      if (this.environment && this.environment?.login && this.environment?.login?.type == "oktaAuth") {
+        this.oktaAuthService.authState$.subscribe(
+          (result) => {
+            if (result.isAuthenticated) {
+              this.isLogined = true;
+            }
+          }
+        );
+      }
+    }, 500);
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    setTimeout(() => {
+      if (changes['tableitemInfo'] && this.tableitemInfo) {
+        console.log('this.tableitemInfo: ', this.tableitemInfo);
+        console.log('this.selectedLanguageInfo?: ', this.selectedLanguageInfo);
+        this.tableitemInfoCopy = JSON.parse(JSON.stringify(this.tableitemInfo));
+      }
+      if (changes['SelectedLanguage'] || this.selectedLanguageInfo?.selectedLanguage) {
+        if (this.tableitemInfoCopy?.layoutSchema && this.tableitemInfoCopy.layoutSchema?.elements?.length) {
+          this.tableitemInfo.propertySchema = JSON.parse(JSON.stringify(this.tableitemInfoCopy.propertySchema));
+          this.tableitemInfo.propertySchema = this.translateSchema(this.tableitemInfo.propertySchema, this.selectedLanguageInfo.selectedLanguage);
+          if (this.tableitemInfoCopy?.footer) {
+            this.tableitemInfo.footer = JSON.parse(JSON.stringify(this.tableitemInfoCopy.footer));
+            this.tableitemInfo.footer = this.translateSchema(this.tableitemInfo.footer, this.selectedLanguageInfo.selectedLanguage);
+          }
+          this.tableitemInfoCopy.layoutSchema.elements.forEach((column: any, index: any) => {
+            if (column.label && column.label.caption && this.selectedLanguageInfo.selectedLanguage[column.label.caption]) {
+              this.tableitemInfo.layoutSchema.elements[index].label.caption = this.selectedLanguageInfo.selectedLanguage[column.label.caption];
+            }
+          });
+        }
+      }
+    }, 500);
+  }
+
+  translateSchema(schema: any, SelectedLanguage: any): any {
+    if (schema && typeof schema === 'object') {
+      for (const key of Object.keys(schema)) {
+        const val = schema[key];
+        if (val && typeof val === 'object') {
+          this.translateSchema(val, SelectedLanguage);
+        }
+        if (val && val.caption !== undefined && typeof val.caption === 'string') {
+          const original = val.caption.trim();
+          if (original && SelectedLanguage[original]) {
+            val.caption = SelectedLanguage[original];
+          }
+        }
+        if (val && val.value !== undefined && typeof val.value === 'string' && !val.value.includes("{{")) {
+          const originalVal = val.value.trim();
+          if (originalVal && SelectedLanguage[originalVal]) {
+            val.value = SelectedLanguage[originalVal];
+          }
+        }
+      }
+    }
+    return schema;
+  }
+
+
+  getScope(scope: any) {
+    let propertyScope = "";
+    let start = scope?.indexOf("#/") + 2;
+    let end = scope?.indexOf("/", start);
+    if (start && end) {
+      propertyScope = scope.substring(start, end);
+    }
+    return propertyScope;
+  }
+
+  getStyleWithoutClasses(styleObject: any) {
+    if (!styleObject) {
+      return { classes: '', style: {} };
+    }
+    const { classes, ...styleWithoutClasses } = styleObject;
+    return { classes: classes && classes.length > 0 ? classes[0] : '', style: styleWithoutClasses };
+  }
+
+  onScrollEvent(event: any) {
+    this.onGridScroll.emit(event);
+  }
+
+  showLinkDetails(option: any, data: any) {
+    this.showGridLink.emit({ option: option, data: data });
+  }
+
+  invokeGridBtnClick(option: any, propertySchema: any) {
+    this.gridButtonClick.emit({ option: option, propertySchema: propertySchema });
+  }
+
+  upsertAction(option: any, data: any) {
+    let url = option?.data_url;
+    if (url && url?.includes("{{")) {
+      const regex = /{{(.*?)}}/g;
+      const matches = [...url.matchAll(regex)].map(m => m[1]);
+      if (matches && data && data[matches[0]]) {
+        option.data_url = url.replace(`{{${matches[0]}}}`, data[matches[0]])
+      }
+    }
+    let baseUrl = this.environment?.apiUrl + option.data_url;
+    this.requestService.dynamicCall(option.method, {}, baseUrl, option?.passToken, this.projectSeleted, this.userInfo).subscribe((res: any) => {
+      console.log('res: ', res);
+      if (option?.reload) {
+        window.location.reload();
+      } else if (option.notifcation) {
+        if(option.notifcation.success){
+          this.notificationService.success(option.notifcation.success);
+          let findObj: any = this.findDynamicKeyAndValue(option);
+          if(findObj.keyName){
+            data[findObj.keyName] = "APPROVED";
+          }
+        }
+      }
+    })
+  }
+
+  setActionColumn(option: any, data: any) {
+    let showAction: boolean = true;
+    let findCondiontionalKey: any = this.findDynamicKeyAndValue(option);
+    if (findCondiontionalKey.keyName) {
+      showAction = data[findCondiontionalKey.keyName] === findCondiontionalKey.value ? true : false;
+    }
+    return showAction;
+  }
+
+  findDynamicKeyAndValue(object: Record<string, any>) {
+    const regex = /^\{\{(.*?)\}\}$/;
+    for (const key of Object.keys(object)) {
+      const match = key.match(regex);
+      if (match) {
+        return {
+          keyName: match[1].trim(), 
+          value: object[key] 
+        };
+      }
+    }
+    return null;
+  }
+
+  incrementQuantity(index: any, field: any, option: any) {
+    this.gridIncreamentClick.emit({ index: index, field: field, option: option });
+  }
+
+  invokeTableImageClick(column: any, data: any) {
+    this.gridImgClick.emit({ col: column, data: data });
+  }
+
+  decrementQuantity(index: any, field: any, option: any) {
+    this.gridDecreamentClick.emit({ index: index, field: field, option: option });
+  }
+
+  invokeOnPageSizeChange(pageSize: any) {
+    this.onPageSizeChange.emit(pageSize);
+  }
+
+  invokeGoToPage(page: any) {
+    this.onPageChange.emit(page);
+  }
+
+  authenticating() {
+    this.utilityService.getStorage(`${this.projectSeleted}Logined`).then((logined: any) => {
+      if (logined == "true") {
+        this.isLogined = true;
+      }
+    })
+  }
+}

package/src/lib/containers/header-menu/header-menu.component.html

@@ -0,0 +1,72 @@
+<header *ngIf="headerItems.length > 0" [ngStyle]="getStyle(headerLayout?.style)">
+
+    <ng-container *ngFor="let header of headerItems"
+        [ngSwitch]="header.scope?.reference ? header.scope?.reference.split('/').pop() : 'default'">
+
+        <!-- Logo -->
+        <ng-container *ngSwitchCase="'logo'">
+            <div *ngIf="isVisible(header)" [ngStyle]="getStyle(header?.option?.style)">
+
+                <img [src]="header.option.src" [alt]="header.alt || 'Logo'"
+                    [ngStyle]="getStyle(header?.scope?.style)" />
+            </div>
+        </ng-container>
+
+        <!-- Search -->
+        <ng-container *ngSwitchCase="'searchInput'">
+            <div *ngIf="isVisible(header)" [ngStyle]="getStyle(header?.option?.style)">
+
+                <input #search type="text" [placeholder]="header.option.placeholder"
+                    (keyup.enter)="invokeSearchedItems(header.option, search)"
+                    [ngStyle]="getStyle(header?.scope?.style)" />
+
+                <button *ngIf="header.option.button !== false" type="button"
+                    (click)="invokeSearchedItems(header.option, search)" [ngStyle]="getStyle(header?.buttonStyle)">
+                    <ng-container *ngIf="!header.caption; else searchTextContent">
+                        <i nz-icon [nzType]="header.icon" nzTheme="outline"></i>
+                    </ng-container>
+
+                    <ng-template #searchTextContent>
+                        {{ header.caption }}
+                    </ng-template>
+                </button>
+            </div>
+        </ng-container>
+
+        <!-- Cart -->
+        <ng-container *ngSwitchCase="'cart'">
+            <div *ngIf="isVisible(header)" [ngStyle]="getStyle(header?.option?.style)"
+                (click)="invokeShowtableContent(header.option)">
+
+                <span [ngStyle]="getStyle(header?.priceStyle)">
+                    {{ cartInfo.totalPrice | currency : header.option?.currency ? header.option.currency : 'USD' }}
+                </span>
+
+                <span [ngStyle]="getStyle(header?.quantityStyle)">
+                    {{ cartInfo.quantity }}
+                </span>
+
+                <i [class]="header.icon" [ngStyle]="getStyle(header?.iconStyle)">
+                </i>
+            </div>
+        </ng-container>
+
+        <!-- Default Button -->
+        <ng-container *ngSwitchCase="'default'">
+            <div *ngIf="shouldShowDefaultButton(header)" [ngStyle]="getStyle(header?.option?.style)">
+
+                <button type="button" (click)="invokeHeaderButtonClick(header.option)"
+                    [ngStyle]="getStyle(header?.buttonStyle)">
+                    <ng-container *ngIf="!header.label; else buttonTextContent">
+                        <i nz-icon [nzType]="header.icon" nzTheme="outline"></i>
+                    </ng-container>
+
+                    <ng-template #buttonTextContent>
+                        {{ header.label }}
+                    </ng-template>
+                </button>  
+            </div>
+        </ng-container>
+
+    </ng-container>
+</header>

package/src/lib/containers/header-menu/header-menu.component.ts

@@ -0,0 +1,105 @@
+import { AfterViewInit, Component, EventEmitter, Input, Output } from '@angular/core';
+import { OktaAuthStateService } from '@okta/okta-angular';
+import { Platform } from '@angular/cdk/platform';
+import { CommonModule } from '@angular/common';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+import { RequestService } from '../../services/request.service';
+import { UtilityService } from '../../services/utility.service';
+
+@Component({
+  standalone: true,
+  imports: [
+    CommonModule,
+    NzIconModule
+  ],
+  selector: 'vl-header-menu',
+  templateUrl: './header-menu.component.html',
+  styleUrl: './header-menu.component.css'
+})
+export class HeaderMenuComponent implements AfterViewInit {
+  isLogined: boolean = false;
+
+  @Input() headerItems: any[] = [];
+  @Input() headerLayout: any = {};
+  @Input() environment: any;
+  @Input() projectSeleted: any;
+  @Input() cartInfo: any = {
+    items: [],
+    totalPrice: 0,
+    quantity: 0
+  };
+
+  @Output() buttonClick: EventEmitter<any> = new EventEmitter();
+  @Output() showTableContent: EventEmitter<any> = new EventEmitter();
+  @Output() searchItems: EventEmitter<any> = new EventEmitter();
+
+  constructor(
+    private oktaAuthService: OktaAuthStateService,
+    private requestService: RequestService,
+    private utilityService: UtilityService,
+    private platform: Platform
+  ) {}
+
+  ngAfterViewInit(): void {
+    setTimeout(() => {
+      if (this.environment && this.environment?.login && this.environment?.login?.type == "oktaAuth") {
+        if (this.platform.ANDROID || this.platform.IOS) {
+          this.utilityService.getLocalStorage(`loginedUser`).then((logined: any) => {
+            if (logined && logined.token) {
+              this.requestService.getLoginUser(logined?.token).subscribe(() => {
+                this.isLogined = true;
+              });
+            }
+          });
+        }
+
+        this.oktaAuthService.authState$.subscribe((result) => {
+          if (result.isAuthenticated) {
+            this.isLogined = true;
+          }
+        });
+      }
+    }, 500);
+  }
+
+  getStyle(styleObject: any): Record<string, any> {
+    if (!styleObject || typeof styleObject !== 'object') {
+      return {};
+    }
+
+    const { classes, ...styleWithoutClasses } = styleObject;
+    return styleWithoutClasses;
+  }
+
+  isVisible(header: any): boolean {
+    return header?.option?.visible !== false;
+  }
+
+  shouldShowDefaultButton(header: any): boolean {
+    if (!this.isVisible(header)) {
+      return false;
+    }
+
+    if (header?.option?.islogin === true) {
+      return this.isLogined;
+    }
+
+    if (header?.option?.islogin === false) {
+      return !this.isLogined;
+    }
+
+    return true;
+  }
+
+  invokeSearchedItems(option: any, search: any) {
+    this.searchItems.emit({ option: option, search: search });
+  }
+
+  invokeHeaderButtonClick(option: any) {
+    this.buttonClick.emit(option);
+  }
+
+  invokeShowtableContent(option: any) {
+    this.showTableContent.emit(option);
+  }
+}