@yomotech/view-toolkit 0.0.17 → 0.0.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -829,9 +829,6 @@ class CardComponent {
|
|
|
829
829
|
if ((this.platform.ANDROID || this.platform.IOS) && !this.platform?.isBrowser) {
|
|
830
830
|
this.mobileDisplay = true;
|
|
831
831
|
}
|
|
832
|
-
else {
|
|
833
|
-
this.mobileDisplay = false;
|
|
834
|
-
}
|
|
835
832
|
if (changes['itemInfo']) {
|
|
836
833
|
if (this.itemInfo.layoutSchema) {
|
|
837
834
|
this.layoutSchemaCopy = JSON.parse(JSON.stringify(this.itemInfo.layoutSchema));
|
|
@@ -1180,7 +1177,7 @@ class CardComponent {
|
|
|
1180
1177
|
return propertyScope;
|
|
1181
1178
|
}
|
|
1182
1179
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: CardComponent, deps: [{ token: UtilityService }, { token: i1.Platform }, { token: i1$1.HttpClient }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i4.NzModalService }, { token: i5$1.OAuthService }, { token: RequestService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1183
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: CardComponent, isStandalone: true, selector: "vl-card", inputs: { itemInfo: "itemInfo", currentPage: "currentPage", pageSize: "pageSize", selectedLanguageInfo: "selectedLanguageInfo", mobileDisplay: "mobileDisplay", pages: "pages" }, outputs: { cardButtonClick: "cardButtonClick", cardHeaderButtonClick: "cardHeaderButtonClick", linkDetails: "linkDetails", imageDetails: "imageDetails", onPageSizeChange: "onPageSizeChange", onPageChange: "onPageChange" }, usesOnChanges: true, ngImport: i0, template: "<!-- Loader Spinner -->\r\n<div *ngIf=\"isLoading\" class=\"loader-overlay\">\r\n <div class=\"spinner\"></div>\r\n</div>\r\n<span *ngIf=\"this.selectedLanguageInfo?.selectedLanguage\">\r\n <!-- top pagination on card -->\r\n <div *ngIf=\"itemInfo?.layoutSchema?.pagination?.pageSize && itemInfo?.layoutSchema?.pagination?.top\">\r\n <vl-pagination [itemInfo]=\"itemInfo\" [pageSize]=\"pageSize\" [currentPage]=\"currentPage\" [pages]=\"pages\"\r\n (pageSizeChange)=\"invokeOnPageSizeChange($event)\" (onGoToPage)=\"invokeGoToPage($event)\">\r\n </vl-pagination>\r\n </div>\r\n <div *ngIf=\"itemInfo?.header?.elements\" [style]=\"getStyleWithoutClasses(itemInfo?.header?.style).style\"\r\n [class]=\"getStyleWithoutClasses(itemInfo?.header?.style).classes\">\r\n <span *ngFor=\"let element of itemInfo.header?.elements; let c = index\">\r\n <ng-container\r\n [ngSwitch]=\"element.scope?.reference && itemInfo.propertySchema[getScope(element.scope?.reference)] ? itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()]?.type : 'default'\">\r\n\r\n <!-- String Control -->\r\n <div *ngSwitchCase=\"'string'\" [class]=\"element.option?.visible ? 'card-field-wrapper' : 'hidden'\">\r\n\r\n <!-- LABEL -->\r\n <span *ngIf=\"element.label?.caption\" [style]=\"getStyleWithoutClasses(element.label?.style).style\"\r\n [class]=\"element.label?.style?.classes?.[0]\">\r\n {{ element.label.caption }}\r\n </span>\r\n </div>\r\n\r\n <!-- Date control -->\r\n <div *ngSwitchCase=\"'date'\" class=\"mb-3\">\r\n <span *ngIf=\"element.option.protected\" [style]=\"getStyleWithoutClasses(element?.label?.style).style\"\r\n [class]=\"element?.label?.style?.classes[0]\">\r\n <vl-string [formField]=\"element\" [modalItemInfo]=\"itemInfo\">\r\n </vl-string>\r\n </span>\r\n <div *ngIf=\"!element.option.protected\"\r\n [class]=\"element?.layout == 'horizontal' ? 'horizontal-layout' : ''\"\r\n [ngClass]=\"element?.style?.classes[0]\" [style]=\"getStyleWithoutClasses(element?.style).style\">\r\n <label [style]=\"getStyleWithoutClasses(element?.label?.style).style\"\r\n [class]=\"element?.label?.style?.classes[0]\">{{ element.label?.value\r\n ?\r\n element.label?.value : element.label?.caption ?\r\n element.label?.caption :\r\n itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()]?.caption\r\n }}</label>\r\n <p-datepicker (ngModelChange)=\"dateChangeEvent(element, $event)\" [showIcon]=\"true\" type=\"number\"\r\n inputmode=\"numeric\"\r\n [dateFormat]=\"itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()]?.format ? itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()].format : 'yy-mm-dd'\"\r\n [(ngModel)]=\"itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()].value\"\r\n (onFocus)=\"forceNumericKeyboard($event)\" (onInput)=\"onDateTyping($event)\"\r\n [class]=\"element?.scope?.style?.classes[0]\"\r\n [style]=\"getStyleWithoutClasses(element?.scope?.style).style\">\r\n </p-datepicker>\r\n </div>\r\n </div>\r\n\r\n <!-- Button Control -->\r\n <div *ngSwitchCase=\"'default'\" [class]=\"element.option?.visible ? 'row' : 'hidden'\"\r\n (click)=\"invokeOnCardHeader(element)\">\r\n <button nz-button [style]=\"getStyleWithoutClasses(element.style).style\"\r\n [class]=\"element.option.protected ? 'disabled-button' : getStyleWithoutClasses(element.style).classes\">\r\n <ng-container *ngIf=\"!element.caption; else textContent\">\r\n <i nz-icon [nzType]=\"element.icon\" nzTheme=\"outline\"></i>\r\n </ng-container>\r\n <ng-template #textContent>\r\n {{ element.caption }}\r\n </ng-template>\r\n </button>\r\n </div>\r\n </ng-container>\r\n </span>\r\n </div>\r\n <div [class]=\"itemInfo.class\" [style]=\"itemInfo.style\">\r\n <div *ngFor=\"let record of itemInfo.data; let k = index\"\r\n [ngClass]=\"mobileDisplay && itemInfo.layoutSchema.pagination ? cardPerRow + itemInfo.layoutSchema?.stylePerCard?.elementPerRow[k % itemInfo.layoutSchema?.stylePerCard?.elementPerRow.length] : ''\">\r\n <div [class]=\"itemInfo.layoutSchema?.stylePerCard?.classes[0]\"\r\n [style]=\"getStyleWithoutClasses(itemInfo.layoutSchema?.stylePerCard).style\">\r\n <div *ngFor=\"let layout of itemInfo.layoutSchema.cards\">\r\n <ng-container\r\n [ngSwitch]=\"layout?.scope?.reference && itemInfo.propertySchema[getScope(layout.scope?.reference)] ? itemInfo.propertySchema[getScope(layout.scope?.reference)][layout.scope?.reference.split('/').pop()]?.type : layout?.type == 'HorizontalLayout' ? 'HorizontalLayout' : 'default'\">\r\n <!-- Image Control -->\r\n <div *ngSwitchCase=\"'image'\" [class]=\"layout.option?.visible ? 'row' : 'hidden'\">\r\n <img [class]=\"getStyleWithoutClasses(layout?.scope?.style).classes\"\r\n [style]=\"getStyleWithoutClasses(layout?.scope?.style).style\"\r\n [src]=\"layout?.option?.src ? layout?.option?.src : record[layout.scope?.reference.split('/').pop()]\"\r\n alt=\"{{ layout.label ? layout.label : getProperty(layout.scope?.reference).productSchema.caption }}\"\r\n (click)=\"showImageDetails(layout.option, record)\" />\r\n </div>\r\n\r\n <!-- String Control -->\r\n <div *ngSwitchCase=\"'string'\" [class]=\"layout.option?.visible ? 'card-field-wrapper' : 'hidden'\"\r\n [style]=\"getStyleWithoutClasses(layout?.scope?.style).style\">\r\n\r\n <!-- LABEL -->\r\n <span *ngIf=\"layout?.label?.caption\" [class]=\"layout.label?.style?.classes?.[0]\">\r\n {{ layout.label.caption }}\r\n </span>\r\n\r\n <!-- VALUE -->\r\n <p *ngIf=\"layout.option?.protected && layout.option?.visible\"\r\n [class]=\"getStyleWithoutClasses(layout?.scope?.style).classes\"\r\n (click)=\"showLinkDetails(layout.option, record)\">\r\n {{\r\n record?.[layout.scope?.reference.split('/').pop()]\r\n ?? itemInfo.propertySchema[\r\n getScope(layout.scope?.reference)\r\n ]?.[layout.scope?.reference.split('/').pop()]?.default\r\n ?? '--'\r\n }}\r\n </p>\r\n </div>\r\n\r\n <!-- Date Control -->\r\n <div *ngSwitchCase=\"'date'\" [class]=\"layout.option?.visible ? 'card-field-wrapper' : 'hidden'\"\r\n [style]=\"getStyleWithoutClasses(layout?.scope?.style).style\">\r\n\r\n <!-- LABEL -->\r\n <span *ngIf=\"layout?.label?.caption\" [class]=\"layout.label?.style?.classes?.[0]\">\r\n {{ layout.label.caption }}\r\n </span>\r\n\r\n <!-- VALUE -->\r\n <p *ngIf=\"layout.option?.protected && layout.option?.visible\"\r\n [class]=\"getStyleWithoutClasses(layout?.scope?.style).classes\"\r\n (click)=\"showLinkDetails(layout.option, record)\">\r\n {{\r\n record?.[layout.scope?.reference.split('/').pop()]\r\n ?? itemInfo.propertySchema[\r\n getScope(layout.scope?.reference)\r\n ]?.[layout.scope?.reference.split('/').pop()]?.default\r\n ?? '--'\r\n }}\r\n </p>\r\n </div>\r\n\r\n <!-- Time Control -->\r\n <div *ngSwitchCase=\"'time'\" [class]=\"layout.option?.visible ? 'card-field-wrapper' : 'hidden'\"\r\n [style]=\"getStyleWithoutClasses(layout?.scope?.style).style\">\r\n\r\n <!-- LABEL -->\r\n <span *ngIf=\"layout?.label?.caption\" [class]=\"layout.label?.style?.classes?.[0]\">\r\n {{ layout.label.caption }}\r\n </span>\r\n\r\n <!-- VALUE -->\r\n <p *ngIf=\"layout.option?.protected && layout.option?.visible\"\r\n [class]=\"getStyleWithoutClasses(layout?.scope?.style).classes\"\r\n (click)=\"showLinkDetails(layout.option, record)\">\r\n {{\r\n record?.[layout.scope?.reference.split('/').pop()]\r\n ?? itemInfo.propertySchema[\r\n getScope(layout.scope?.reference)\r\n ]?.[layout.scope?.reference.split('/').pop()]?.default\r\n ?? '--'\r\n }}\r\n </p>\r\n </div>\r\n\r\n <!-- number Control -->\r\n <div *ngSwitchCase=\"'number'\" [class]=\"layout.option?.visible ? 'row' : 'hidden'\">\r\n <h3 *ngIf=\"itemInfo.propertySchema[getScope(layout.scope?.reference)] && itemInfo.propertySchema[getScope(layout.scope?.reference)][layout.scope?.reference.split('/').pop()]?.format.currency\"\r\n [class]=\"getStyleWithoutClasses(layout?.scope?.style).classes\"\r\n [style]=\"getStyleWithoutClasses(layout?.scope?.style).style\">\r\n {{ record[layout.scope?.reference.split('/').pop()] | currency: layout.option?.currency\r\n ?\r\n layout.option.currency\r\n :\r\n 'USD' }}\r\n </h3>\r\n </div>\r\n\r\n <!-- Button Control -->\r\n <div *ngSwitchCase=\"'default'\" [class]=\"layout.option?.visible ? 'row' : 'hidden'\">\r\n <button [style]=\"getStyleWithoutClasses(layout?.style).style\"\r\n [class]=\"layout.option.protected ? 'disabled-button' : getStyleWithoutClasses(layout?.style).classes\"\r\n (click)=\"invokeButtonClick(layout, record, k)\">\r\n <ng-container *ngIf=\"!layout.caption; else textContent\">\r\n <i nz-icon [nzType]=\"layout.icon\" nzTheme=\"outline\"></i>\r\n </ng-container>\r\n <ng-template #textContent>\r\n {{ layout.caption }}\r\n </ng-template>\r\n </button>\r\n </div>\r\n\r\n <!-- HorizontalLayout Control -->\r\n <div *ngSwitchCase=\"'HorizontalLayout'\">\r\n <div [class]=\"getStyleWithoutClasses(layout?.style).classes\"\r\n [style]=\"getStyleWithoutClasses(layout?.style).style\">\r\n <ng-container *ngFor=\"let innerLayout of layout.elements\">\r\n <ng-container\r\n [ngSwitch]=\"innerLayout.scope?.reference && itemInfo.propertySchema[getScope(innerLayout.scope?.reference)] ? itemInfo.propertySchema[getScope(innerLayout.scope?.reference)][innerLayout.scope?.reference.split('/').pop()]?.type : 'default'\">\r\n <!-- Image Control -->\r\n <div *ngSwitchCase=\"'image'\"\r\n [class]=\"innerLayout.option?.visible ? 'row' : 'hidden'\">\r\n <img [class]=\"getStyleWithoutClasses(innerLayout?.scope?.style).classes\"\r\n [style]=\"getStyleWithoutClasses(innerLayout?.scope?.style).style\"\r\n [src]=\"innerLayout?.option?.src ? innerLayout?.option?.src : record[innerLayout.scope?.reference.split('/').pop()]\"\r\n alt=\"{{ innerLayout.label ? innerLayout.label : getProperty(innerLayout.scope?.reference).productSchema.caption }}\"\r\n (click)=\"showImageDetails(innerLayout.option, record)\" />\r\n </div>\r\n\r\n <!-- String Control -->\r\n <div *ngSwitchCase=\"'string'\"\r\n [class]=\"innerLayout.option?.visible ? 'card-field-wrapper' : 'hidden'\">\r\n\r\n <!-- LABEL -->\r\n <span *ngIf=\"innerLayout.label?.caption\"\r\n [style]=\"getStyleWithoutClasses(innerLayout.label?.style).style\"\r\n [class]=\"innerLayout.label?.style?.classes?.[0]\">\r\n {{ innerLayout.label.caption }}\r\n </span>\r\n\r\n <!-- VALUE -->\r\n <h3 *ngIf=\"innerLayout.option?.protected && innerLayout.option?.visible\"\r\n [class]=\"getStyleWithoutClasses(innerLayout?.scope?.style).classes\"\r\n [style]=\"getStyleWithoutClasses(innerLayout?.scope?.style).style\"\r\n (click)=\"showLinkDetails(innerLayout.option, record)\">\r\n\r\n <!-- DATE FORMAT -->\r\n <ng-container *ngIf=\"innerLayout.option?.dateFormat; else checkTime\">\r\n {{\r\n record?.[innerLayout.scope?.reference.split('/').pop()]\r\n ? (record[innerLayout.scope?.reference.split('/').pop()] | date:\r\n innerLayout.option.dateFormat)\r\n : '--'\r\n }}\r\n </ng-container>\r\n\r\n <!-- TIME FORMAT -->\r\n <ng-template #checkTime>\r\n <ng-container\r\n *ngIf=\"innerLayout.option?.timeFormat; else normalValue\">\r\n {{\r\n record?.[innerLayout.scope?.reference.split('/').pop()]\r\n ? (record[innerLayout.scope?.reference.split('/').pop()] | date:\r\n innerLayout.option.timeFormat)\r\n : '--'\r\n }}\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- NORMAL STRING -->\r\n <ng-template #normalValue>\r\n {{\r\n record?.[innerLayout.scope?.reference.split('/').pop()]\r\n ?? '--'\r\n }}\r\n </ng-template>\r\n\r\n </h3>\r\n </div>\r\n\r\n <!-- number Control -->\r\n <div *ngSwitchCase=\"'number'\"\r\n [class]=\"innerLayout.option?.visible ? 'row' : 'hidden'\">\r\n <h3 *ngIf=\"itemInfo.propertySchema[getScope(innerLayout.scope?.reference)] &&itemInfo.propertySchema[getScope(innerLayout.scope?.reference)][innerLayout.scope?.reference.split('/').pop()]?.format.currency\"\r\n [class]=\"getStyleWithoutClasses(innerLayout?.scope?.style).classes\"\r\n [style]=\"getStyleWithoutClasses(innerLayout?.scope?.style).style\">\r\n {{ record[innerLayout.scope?.reference.split('/').pop()] | currency:\r\n innerLayout.option?.currency ?\r\n innerLayout.option.currency\r\n :\r\n 'USD' }}\r\n </h3>\r\n </div>\r\n\r\n <!-- Date Control -->\r\n <div *ngSwitchCase=\"'date'\"\r\n [class]=\"innerLayout.option?.visible ? 'card-field-wrapper' : 'hidden'\">\r\n\r\n <!-- LABEL -->\r\n <span *ngIf=\"innerLayout.label?.caption\"\r\n [style]=\"getStyleWithoutClasses(innerLayout.label?.style).style\"\r\n [class]=\"innerLayout.label?.style?.classes?.[0]\">\r\n {{ innerLayout.label.caption }}\r\n </span>\r\n\r\n <!-- VALUE -->\r\n <h3 *ngIf=\"innerLayout.option?.protected && innerLayout.option?.visible\"\r\n [class]=\"getStyleWithoutClasses(innerLayout?.scope?.style).classes\"\r\n [style]=\"getStyleWithoutClasses(innerLayout?.scope?.style).style\"\r\n (click)=\"showLinkDetails(innerLayout.option, record)\">\r\n\r\n <!-- DATE FORMAT -->\r\n <ng-container *ngIf=\"innerLayout.option?.dateFormat; else checkTime\">\r\n {{\r\n record?.[innerLayout.scope?.reference.split('/').pop()]\r\n ? (record[innerLayout.scope?.reference.split('/').pop()] | date:\r\n innerLayout.option.dateFormat)\r\n : '--'\r\n }}\r\n </ng-container>\r\n\r\n <!-- TIME FORMAT -->\r\n <ng-template #checkTime>\r\n <ng-container\r\n *ngIf=\"innerLayout.option?.timeFormat; else normalValue\">\r\n {{\r\n record?.[innerLayout.scope?.reference.split('/').pop()]\r\n ? (record[innerLayout.scope?.reference.split('/').pop()] | date:\r\n innerLayout.option.timeFormat)\r\n : '--'\r\n }}\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- NORMAL STRING -->\r\n <ng-template #normalValue>\r\n {{\r\n record?.[innerLayout.scope?.reference.split('/').pop()]\r\n ?? '--'\r\n }}\r\n </ng-template>\r\n\r\n </h3>\r\n </div>\r\n\r\n <!-- Time Control -->\r\n <div *ngSwitchCase=\"'time'\"\r\n [class]=\"innerLayout.option?.visible ? 'card-field-wrapper' : 'hidden'\">\r\n\r\n <!-- LABEL -->\r\n <span *ngIf=\"innerLayout.label?.caption\"\r\n [style]=\"getStyleWithoutClasses(innerLayout.label?.style).style\"\r\n [class]=\"innerLayout.label?.style?.classes?.[0]\">\r\n {{ innerLayout.label.caption }}\r\n </span>\r\n\r\n <!-- VALUE -->\r\n <h3 *ngIf=\"innerLayout.option?.protected && innerLayout.option?.visible\"\r\n [class]=\"getStyleWithoutClasses(innerLayout?.scope?.style).classes\"\r\n [style]=\"getStyleWithoutClasses(innerLayout?.scope?.style).style\"\r\n (click)=\"showLinkDetails(innerLayout.option, record)\">\r\n\r\n <!-- DATE FORMAT -->\r\n <ng-container *ngIf=\"innerLayout.option?.dateFormat; else checkTime\">\r\n {{\r\n record?.[innerLayout.scope?.reference.split('/').pop()]\r\n ? (record[innerLayout.scope?.reference.split('/').pop()] | date:\r\n innerLayout.option.dateFormat)\r\n : '--'\r\n }}\r\n </ng-container>\r\n\r\n <!-- TIME FORMAT -->\r\n <ng-template #checkTime>\r\n <ng-container\r\n *ngIf=\"innerLayout.option?.timeFormat; else normalValue\">\r\n {{\r\n record?.[innerLayout.scope?.reference.split('/').pop()]\r\n ? (record[innerLayout.scope?.reference.split('/').pop()] | date:\r\n innerLayout.option.timeFormat)\r\n : '--'\r\n }}\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- NORMAL STRING -->\r\n <ng-template #normalValue>\r\n {{\r\n record?.[innerLayout.scope?.reference.split('/').pop()]\r\n ?? '--'\r\n }}\r\n </ng-template>\r\n\r\n </h3>\r\n </div>\r\n\r\n <!-- Button Control -->\r\n <div *ngSwitchCase=\"'default'\">\r\n <button nz-button [style]=\"getStyleWithoutClasses(innerLayout?.style).style\"\r\n [class]=\"innerLayout.option?.visible ? innerLayout.option.protected ? 'disabled-button' : getStyleWithoutClasses(innerLayout?.style).classes : 'hidden'\"\r\n (click)=\"invokeButtonClick(innerLayout, record, k)\">\r\n <ng-container *ngIf=\"!innerLayout.caption; else textContent\">\r\n <i nz-icon [nzType]=\"innerLayout.icon\" nzTheme=\"outline\"></i>\r\n </ng-container>\r\n <ng-template #textContent>\r\n {{ innerLayout.caption }}\r\n </ng-template>\r\n </button>\r\n </div>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"itemInfo?.footer?.elements && itemInfo?.data && itemInfo?.data.length\"\r\n [class]=\"getStyleWithoutClasses(itemInfo?.footer?.style).classes\">\r\n <span *ngFor=\"let element of itemInfo.footer?.elements; let c = index\">\r\n <ng-container\r\n [ngSwitch]=\"element.scope?.reference && itemInfo.propertySchema[getScope(element.scope?.reference)] ? itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()]?.type : 'default'\">\r\n\r\n <!-- Date control -->\r\n <div *ngSwitchCase=\"'date'\" class=\"form-group mb-3\">\r\n <span *ngIf=\"element.option.protected\" [style]=\"getStyleWithoutClasses(element?.label?.style).style\"\r\n [class]=\"element?.label?.style?.classes[0]\">\r\n <h5>{{\r\n itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()]?.caption\r\n }}\r\n </h5>\r\n </span>\r\n <div *ngIf=\"!element.option.protected\">\r\n <div [class]=\"element?.layout == 'horizontal' ? 'horizontal-layout' : 'row'\">\r\n <label [style]=\"getStyleWithoutClasses(element?.label?.style).style\"\r\n [class]=\"element?.label?.style?.classes[0]\">{{ element.label?.value\r\n ?\r\n element.label?.value : element.label?.caption ?\r\n element.label?.caption :\r\n itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()]?.caption\r\n }}</label>\r\n\r\n <nz-date-picker [required]=\"element.option.required\" [name]=\"element.scope?.reference\"\r\n [nzDisabled]=\"element?.option?.disabled\"\r\n (ngModelChange)=\"dateChangeEvent(element, $event)\"\r\n [nzFormat]=\"itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()]?.format ? itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()]?.format : 'yyyy-MM-dd'\"\r\n [(ngModel)]=\"itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()].value\"\r\n [style]=\"getStyleWithoutClasses(element?.style).style\"></nz-date-picker>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <!-- Button Control -->\r\n <div *ngSwitchCase=\"'default'\" [class]=\"element.option?.visible ? 'row' : 'hidden'\"\r\n (click)=\"invokeOnCardFooter(element)\">\r\n <button nz-button [style]=\"getStyleWithoutClasses(element.style).style\"\r\n [class]=\"element.option.protected ? 'disabled-button' : getStyleWithoutClasses(element.style).classes\">\r\n <ng-container *ngIf=\"!element.caption; else textContent\">\r\n <i nz-icon [nzType]=\"element.icon\" nzTheme=\"outline\"></i>\r\n </ng-container>\r\n <ng-template #textContent>\r\n {{ element.caption }}\r\n </ng-template>\r\n </button>\r\n </div>\r\n </ng-container>\r\n </span>\r\n </div>\r\n <!-- bottom pagination on card -->\r\n <div *ngIf=\"itemInfo?.layoutSchema?.pagination && itemInfo?.layoutSchema?.pagination?.bottom\">\r\n <vl-pagination [itemInfo]=\"itemInfo\" [pageSize]=\"pageSize\" [currentPage]=\"currentPage\" [pages]=\"pages\"\r\n (pageSizeChange)=\"invokeOnPageSizeChange($event)\" (onGoToPage)=\"invokeGoToPage($event)\">\r\n </vl-pagination>\r\n </div>\r\n</span>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i9.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i10.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i11.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i12.ɵNzTransitionPatchDirective, selector: "[nz-button], [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "directive", type: i13.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "ngmodule", type: NzDatePickerModule }, { kind: "component", type: i5$2.NzDatePickerComponent, selector: "nz-date-picker,nz-week-picker,nz-month-picker,nz-quarter-picker,nz-year-picker,nz-range-picker", inputs: ["nzInline", "nzAllowClear", "nzAutoFocus", "nzDisabled", "nzInputReadOnly", "nzOpen", "nzDisabledDate", "nzLocale", "nzPlaceHolder", "nzPopupStyle", "nzDropdownClassName", "nzSize", "nzStatus", "nzFormat", "nzVariant", "nzDateRender", "nzDisabledTime", "nzRenderExtraFooter", "nzShowToday", "nzMode", "nzShowNow", "nzRanges", "nzDefaultPickerValue", "nzSeparator", "nzSuffixIcon", "nzBackdrop", "nzId", "nzPlacement", "nzShowWeekNumber", "nzShowTime"], outputs: ["nzOnPanelChange", "nzOnCalendarChange", "nzOnOk", "nzOnOpenChange"], exportAs: ["nzDatePicker"] }, { kind: "ngmodule", type: NzModalModule }, { kind: "component", type:
|
|
1180
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: CardComponent, isStandalone: true, selector: "vl-card", inputs: { itemInfo: "itemInfo", currentPage: "currentPage", pageSize: "pageSize", selectedLanguageInfo: "selectedLanguageInfo", mobileDisplay: "mobileDisplay", pages: "pages" }, outputs: { cardButtonClick: "cardButtonClick", cardHeaderButtonClick: "cardHeaderButtonClick", linkDetails: "linkDetails", imageDetails: "imageDetails", onPageSizeChange: "onPageSizeChange", onPageChange: "onPageChange" }, usesOnChanges: true, ngImport: i0, template: "<!-- Loader Spinner -->\r\n<div *ngIf=\"isLoading\" class=\"loader-overlay\">\r\n <div class=\"spinner\"></div>\r\n</div>\r\n<span *ngIf=\"this.selectedLanguageInfo?.selectedLanguage\">\r\n <!-- top pagination on card -->\r\n <div *ngIf=\"itemInfo?.layoutSchema?.pagination?.pageSize && itemInfo?.layoutSchema?.pagination?.top\">\r\n <vl-pagination [itemInfo]=\"itemInfo\" [pageSize]=\"pageSize\" [currentPage]=\"currentPage\" [pages]=\"pages\"\r\n (pageSizeChange)=\"invokeOnPageSizeChange($event)\" (onGoToPage)=\"invokeGoToPage($event)\">\r\n </vl-pagination>\r\n </div>\r\n <div *ngIf=\"itemInfo?.header?.elements\" [style]=\"getStyleWithoutClasses(itemInfo?.header?.style).style\"\r\n [class]=\"getStyleWithoutClasses(itemInfo?.header?.style).classes\">\r\n <span *ngFor=\"let element of itemInfo.header?.elements; let c = index\">\r\n <ng-container\r\n [ngSwitch]=\"element.scope?.reference && itemInfo.propertySchema[getScope(element.scope?.reference)] ? itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()]?.type : 'default'\">\r\n\r\n <!-- String Control -->\r\n <div *ngSwitchCase=\"'string'\" [class]=\"element.option?.visible ? 'card-field-wrapper' : 'hidden'\">\r\n\r\n <!-- LABEL -->\r\n <span *ngIf=\"element.label?.caption\" [style]=\"getStyleWithoutClasses(element.label?.style).style\"\r\n [class]=\"element.label?.style?.classes?.[0]\">\r\n {{ element.label.caption }}\r\n </span>\r\n </div>\r\n\r\n <!-- Date control -->\r\n <div *ngSwitchCase=\"'date'\" class=\"mb-3\">\r\n <span *ngIf=\"element.option.protected\" [style]=\"getStyleWithoutClasses(element?.label?.style).style\"\r\n [class]=\"element?.label?.style?.classes[0]\">\r\n <vl-string [formField]=\"element\" [modalItemInfo]=\"itemInfo\">\r\n </vl-string>\r\n </span>\r\n <div *ngIf=\"!element.option.protected\"\r\n [class]=\"element?.layout == 'horizontal' ? 'horizontal-layout' : ''\"\r\n [ngClass]=\"element?.style?.classes[0]\" [style]=\"getStyleWithoutClasses(element?.style).style\">\r\n <label [style]=\"getStyleWithoutClasses(element?.label?.style).style\"\r\n [class]=\"element?.label?.style?.classes[0]\">{{ element.label?.value\r\n ?\r\n element.label?.value : element.label?.caption ?\r\n element.label?.caption :\r\n itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()]?.caption\r\n }}</label>\r\n <p-datepicker (ngModelChange)=\"dateChangeEvent(element, $event)\" [showIcon]=\"true\" type=\"number\"\r\n inputmode=\"numeric\"\r\n [dateFormat]=\"itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()]?.format ? itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()].format : 'yy-mm-dd'\"\r\n [(ngModel)]=\"itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()].value\"\r\n (onFocus)=\"forceNumericKeyboard($event)\" (onInput)=\"onDateTyping($event)\"\r\n [class]=\"element?.scope?.style?.classes[0]\"\r\n [style]=\"getStyleWithoutClasses(element?.scope?.style).style\">\r\n </p-datepicker>\r\n </div>\r\n </div>\r\n\r\n <!-- Button Control -->\r\n <div *ngSwitchCase=\"'default'\" [class]=\"element.option?.visible ? 'row' : 'hidden'\"\r\n (click)=\"invokeOnCardHeader(element)\">\r\n <button nz-button [style]=\"getStyleWithoutClasses(element.style).style\"\r\n [class]=\"element.option.protected ? 'disabled-button' : getStyleWithoutClasses(element.style).classes\">\r\n <ng-container *ngIf=\"!element.caption; else textContent\">\r\n <i nz-icon [nzType]=\"element.icon\" nzTheme=\"outline\"></i>\r\n </ng-container>\r\n <ng-template #textContent>\r\n {{ element.caption }}\r\n </ng-template>\r\n </button>\r\n </div>\r\n </ng-container>\r\n </span>\r\n </div>\r\n <div [class]=\"itemInfo.class\" [style]=\"itemInfo.style\">\r\n <div *ngFor=\"let record of itemInfo.data; let k = index\"\r\n [ngClass]=\"mobileDisplay ? '' : itemInfo.layoutSchema.pagination ? cardPerRow + itemInfo.layoutSchema?.stylePerCard?.elementPerRow[k % itemInfo.layoutSchema?.stylePerCard?.elementPerRow.length] : ''\">\r\n <div [class]=\"itemInfo.layoutSchema?.stylePerCard?.classes[0]\"\r\n [style]=\"getStyleWithoutClasses(itemInfo.layoutSchema?.stylePerCard).style\">\r\n <div *ngFor=\"let layout of itemInfo.layoutSchema.cards\">\r\n <ng-container\r\n [ngSwitch]=\"layout?.scope?.reference && itemInfo.propertySchema[getScope(layout.scope?.reference)] ? itemInfo.propertySchema[getScope(layout.scope?.reference)][layout.scope?.reference.split('/').pop()]?.type : layout?.type == 'HorizontalLayout' ? 'HorizontalLayout' : 'default'\">\r\n <!-- Image Control -->\r\n <div *ngSwitchCase=\"'image'\" [class]=\"layout.option?.visible ? 'row' : 'hidden'\">\r\n <img [class]=\"getStyleWithoutClasses(layout?.scope?.style).classes\"\r\n [style]=\"getStyleWithoutClasses(layout?.scope?.style).style\"\r\n [src]=\"layout?.option?.src ? layout?.option?.src : record[layout.scope?.reference.split('/').pop()]\"\r\n alt=\"{{ layout.label ? layout.label : getProperty(layout.scope?.reference).productSchema.caption }}\"\r\n (click)=\"showImageDetails(layout.option, record)\" />\r\n </div>\r\n\r\n <!-- String Control -->\r\n <div *ngSwitchCase=\"'string'\" [class]=\"layout.option?.visible ? 'card-field-wrapper' : 'hidden'\"\r\n [style]=\"getStyleWithoutClasses(layout?.scope?.style).style\">\r\n\r\n <!-- LABEL -->\r\n <span *ngIf=\"layout?.label?.caption\" [class]=\"layout.label?.style?.classes?.[0]\">\r\n {{ layout.label.caption }}\r\n </span>\r\n\r\n <!-- VALUE -->\r\n <p *ngIf=\"layout.option?.protected && layout.option?.visible\"\r\n [class]=\"getStyleWithoutClasses(layout?.scope?.style).classes\"\r\n (click)=\"showLinkDetails(layout.option, record)\">\r\n {{\r\n record?.[layout.scope?.reference.split('/').pop()]\r\n ?? itemInfo.propertySchema[\r\n getScope(layout.scope?.reference)\r\n ]?.[layout.scope?.reference.split('/').pop()]?.default\r\n ?? '--'\r\n }}\r\n </p>\r\n </div>\r\n\r\n <!-- Date Control -->\r\n <div *ngSwitchCase=\"'date'\" [class]=\"layout.option?.visible ? 'card-field-wrapper' : 'hidden'\"\r\n [style]=\"getStyleWithoutClasses(layout?.scope?.style).style\">\r\n\r\n <!-- LABEL -->\r\n <span *ngIf=\"layout?.label?.caption\" [class]=\"layout.label?.style?.classes?.[0]\">\r\n {{ layout.label.caption }}\r\n </span>\r\n\r\n <!-- VALUE -->\r\n <p *ngIf=\"layout.option?.protected && layout.option?.visible\"\r\n [class]=\"getStyleWithoutClasses(layout?.scope?.style).classes\"\r\n (click)=\"showLinkDetails(layout.option, record)\">\r\n {{\r\n record?.[layout.scope?.reference.split('/').pop()]\r\n ?? itemInfo.propertySchema[\r\n getScope(layout.scope?.reference)\r\n ]?.[layout.scope?.reference.split('/').pop()]?.default\r\n ?? '--'\r\n }}\r\n </p>\r\n </div>\r\n\r\n <!-- Time Control -->\r\n <div *ngSwitchCase=\"'time'\" [class]=\"layout.option?.visible ? 'card-field-wrapper' : 'hidden'\"\r\n [style]=\"getStyleWithoutClasses(layout?.scope?.style).style\">\r\n\r\n <!-- LABEL -->\r\n <span *ngIf=\"layout?.label?.caption\" [class]=\"layout.label?.style?.classes?.[0]\">\r\n {{ layout.label.caption }}\r\n </span>\r\n\r\n <!-- VALUE -->\r\n <p *ngIf=\"layout.option?.protected && layout.option?.visible\"\r\n [class]=\"getStyleWithoutClasses(layout?.scope?.style).classes\"\r\n (click)=\"showLinkDetails(layout.option, record)\">\r\n {{\r\n record?.[layout.scope?.reference.split('/').pop()]\r\n ?? itemInfo.propertySchema[\r\n getScope(layout.scope?.reference)\r\n ]?.[layout.scope?.reference.split('/').pop()]?.default\r\n ?? '--'\r\n }}\r\n </p>\r\n </div>\r\n\r\n <!-- number Control -->\r\n <div *ngSwitchCase=\"'number'\" [class]=\"layout.option?.visible ? 'row' : 'hidden'\">\r\n <h3 *ngIf=\"itemInfo.propertySchema[getScope(layout.scope?.reference)] && itemInfo.propertySchema[getScope(layout.scope?.reference)][layout.scope?.reference.split('/').pop()]?.format.currency\"\r\n [class]=\"getStyleWithoutClasses(layout?.scope?.style).classes\"\r\n [style]=\"getStyleWithoutClasses(layout?.scope?.style).style\">\r\n {{ record[layout.scope?.reference.split('/').pop()] | currency: layout.option?.currency\r\n ?\r\n layout.option.currency\r\n :\r\n 'USD' }}\r\n </h3>\r\n </div>\r\n\r\n <!-- Button Control -->\r\n <div *ngSwitchCase=\"'default'\" [class]=\"layout.option?.visible ? 'row' : 'hidden'\">\r\n <button [style]=\"getStyleWithoutClasses(layout?.style).style\"\r\n [class]=\"layout.option.protected ? 'disabled-button' : getStyleWithoutClasses(layout?.style).classes\"\r\n (click)=\"invokeButtonClick(layout, record, k)\">\r\n <ng-container *ngIf=\"!layout.caption; else textContent\">\r\n <i nz-icon [nzType]=\"layout.icon\" nzTheme=\"outline\"></i>\r\n </ng-container>\r\n <ng-template #textContent>\r\n {{ layout.caption }}\r\n </ng-template>\r\n </button>\r\n </div>\r\n\r\n <!-- HorizontalLayout Control -->\r\n <div *ngSwitchCase=\"'HorizontalLayout'\">\r\n <div [class]=\"getStyleWithoutClasses(layout?.style).classes\"\r\n [style]=\"getStyleWithoutClasses(layout?.style).style\">\r\n <ng-container *ngFor=\"let innerLayout of layout.elements\">\r\n <ng-container\r\n [ngSwitch]=\"innerLayout.scope?.reference && itemInfo.propertySchema[getScope(innerLayout.scope?.reference)] ? itemInfo.propertySchema[getScope(innerLayout.scope?.reference)][innerLayout.scope?.reference.split('/').pop()]?.type : 'default'\">\r\n <!-- Image Control -->\r\n <div *ngSwitchCase=\"'image'\"\r\n [class]=\"innerLayout.option?.visible ? 'row' : 'hidden'\">\r\n <img [class]=\"getStyleWithoutClasses(innerLayout?.scope?.style).classes\"\r\n [style]=\"getStyleWithoutClasses(innerLayout?.scope?.style).style\"\r\n [src]=\"innerLayout?.option?.src ? innerLayout?.option?.src : record[innerLayout.scope?.reference.split('/').pop()]\"\r\n alt=\"{{ innerLayout.label ? innerLayout.label : getProperty(innerLayout.scope?.reference).productSchema.caption }}\"\r\n (click)=\"showImageDetails(innerLayout.option, record)\" />\r\n </div>\r\n\r\n <!-- String Control -->\r\n <div *ngSwitchCase=\"'string'\"\r\n [class]=\"innerLayout.option?.visible ? 'card-field-wrapper' : 'hidden'\">\r\n\r\n <!-- LABEL -->\r\n <span *ngIf=\"innerLayout.label?.caption\"\r\n [style]=\"getStyleWithoutClasses(innerLayout.label?.style).style\"\r\n [class]=\"innerLayout.label?.style?.classes?.[0]\">\r\n {{ innerLayout.label.caption }}\r\n </span>\r\n\r\n <!-- VALUE -->\r\n <h3 *ngIf=\"innerLayout.option?.protected && innerLayout.option?.visible\"\r\n [class]=\"getStyleWithoutClasses(innerLayout?.scope?.style).classes\"\r\n [style]=\"getStyleWithoutClasses(innerLayout?.scope?.style).style\"\r\n (click)=\"showLinkDetails(innerLayout.option, record)\">\r\n\r\n <!-- DATE FORMAT -->\r\n <ng-container *ngIf=\"innerLayout.option?.dateFormat; else checkTime\">\r\n {{\r\n record?.[innerLayout.scope?.reference.split('/').pop()]\r\n ? (record[innerLayout.scope?.reference.split('/').pop()] | date:\r\n innerLayout.option.dateFormat)\r\n : '--'\r\n }}\r\n </ng-container>\r\n\r\n <!-- TIME FORMAT -->\r\n <ng-template #checkTime>\r\n <ng-container\r\n *ngIf=\"innerLayout.option?.timeFormat; else normalValue\">\r\n {{\r\n record?.[innerLayout.scope?.reference.split('/').pop()]\r\n ? (record[innerLayout.scope?.reference.split('/').pop()] | date:\r\n innerLayout.option.timeFormat)\r\n : '--'\r\n }}\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- NORMAL STRING -->\r\n <ng-template #normalValue>\r\n {{\r\n record?.[innerLayout.scope?.reference.split('/').pop()]\r\n ?? '--'\r\n }}\r\n </ng-template>\r\n\r\n </h3>\r\n </div>\r\n\r\n <!-- number Control -->\r\n <div *ngSwitchCase=\"'number'\"\r\n [class]=\"innerLayout.option?.visible ? 'row' : 'hidden'\">\r\n <h3 *ngIf=\"itemInfo.propertySchema[getScope(innerLayout.scope?.reference)] &&itemInfo.propertySchema[getScope(innerLayout.scope?.reference)][innerLayout.scope?.reference.split('/').pop()]?.format.currency\"\r\n [class]=\"getStyleWithoutClasses(innerLayout?.scope?.style).classes\"\r\n [style]=\"getStyleWithoutClasses(innerLayout?.scope?.style).style\">\r\n {{ record[innerLayout.scope?.reference.split('/').pop()] | currency:\r\n innerLayout.option?.currency ?\r\n innerLayout.option.currency\r\n :\r\n 'USD' }}\r\n </h3>\r\n </div>\r\n\r\n <!-- Date Control -->\r\n <div *ngSwitchCase=\"'date'\"\r\n [class]=\"innerLayout.option?.visible ? 'card-field-wrapper' : 'hidden'\">\r\n\r\n <!-- LABEL -->\r\n <span *ngIf=\"innerLayout.label?.caption\"\r\n [style]=\"getStyleWithoutClasses(innerLayout.label?.style).style\"\r\n [class]=\"innerLayout.label?.style?.classes?.[0]\">\r\n {{ innerLayout.label.caption }}\r\n </span>\r\n\r\n <!-- VALUE -->\r\n <h3 *ngIf=\"innerLayout.option?.protected && innerLayout.option?.visible\"\r\n [class]=\"getStyleWithoutClasses(innerLayout?.scope?.style).classes\"\r\n [style]=\"getStyleWithoutClasses(innerLayout?.scope?.style).style\"\r\n (click)=\"showLinkDetails(innerLayout.option, record)\">\r\n\r\n <!-- DATE FORMAT -->\r\n <ng-container *ngIf=\"innerLayout.option?.dateFormat; else checkTime\">\r\n {{\r\n record?.[innerLayout.scope?.reference.split('/').pop()]\r\n ? (record[innerLayout.scope?.reference.split('/').pop()] | date:\r\n innerLayout.option.dateFormat)\r\n : '--'\r\n }}\r\n </ng-container>\r\n\r\n <!-- TIME FORMAT -->\r\n <ng-template #checkTime>\r\n <ng-container\r\n *ngIf=\"innerLayout.option?.timeFormat; else normalValue\">\r\n {{\r\n record?.[innerLayout.scope?.reference.split('/').pop()]\r\n ? (record[innerLayout.scope?.reference.split('/').pop()] | date:\r\n innerLayout.option.timeFormat)\r\n : '--'\r\n }}\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- NORMAL STRING -->\r\n <ng-template #normalValue>\r\n {{\r\n record?.[innerLayout.scope?.reference.split('/').pop()]\r\n ?? '--'\r\n }}\r\n </ng-template>\r\n\r\n </h3>\r\n </div>\r\n\r\n <!-- Time Control -->\r\n <div *ngSwitchCase=\"'time'\"\r\n [class]=\"innerLayout.option?.visible ? 'card-field-wrapper' : 'hidden'\">\r\n\r\n <!-- LABEL -->\r\n <span *ngIf=\"innerLayout.label?.caption\"\r\n [style]=\"getStyleWithoutClasses(innerLayout.label?.style).style\"\r\n [class]=\"innerLayout.label?.style?.classes?.[0]\">\r\n {{ innerLayout.label.caption }}\r\n </span>\r\n\r\n <!-- VALUE -->\r\n <h3 *ngIf=\"innerLayout.option?.protected && innerLayout.option?.visible\"\r\n [class]=\"getStyleWithoutClasses(innerLayout?.scope?.style).classes\"\r\n [style]=\"getStyleWithoutClasses(innerLayout?.scope?.style).style\"\r\n (click)=\"showLinkDetails(innerLayout.option, record)\">\r\n\r\n <!-- DATE FORMAT -->\r\n <ng-container *ngIf=\"innerLayout.option?.dateFormat; else checkTime\">\r\n {{\r\n record?.[innerLayout.scope?.reference.split('/').pop()]\r\n ? (record[innerLayout.scope?.reference.split('/').pop()] | date:\r\n innerLayout.option.dateFormat)\r\n : '--'\r\n }}\r\n </ng-container>\r\n\r\n <!-- TIME FORMAT -->\r\n <ng-template #checkTime>\r\n <ng-container\r\n *ngIf=\"innerLayout.option?.timeFormat; else normalValue\">\r\n {{\r\n record?.[innerLayout.scope?.reference.split('/').pop()]\r\n ? (record[innerLayout.scope?.reference.split('/').pop()] | date:\r\n innerLayout.option.timeFormat)\r\n : '--'\r\n }}\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- NORMAL STRING -->\r\n <ng-template #normalValue>\r\n {{\r\n record?.[innerLayout.scope?.reference.split('/').pop()]\r\n ?? '--'\r\n }}\r\n </ng-template>\r\n\r\n </h3>\r\n </div>\r\n\r\n <!-- Button Control -->\r\n <div *ngSwitchCase=\"'default'\">\r\n <button nz-button [style]=\"getStyleWithoutClasses(innerLayout?.style).style\"\r\n [class]=\"innerLayout.option?.visible ? innerLayout.option.protected ? 'disabled-button' : getStyleWithoutClasses(innerLayout?.style).classes : 'hidden'\"\r\n (click)=\"invokeButtonClick(innerLayout, record, k)\">\r\n <ng-container *ngIf=\"!innerLayout.caption; else textContent\">\r\n <i nz-icon [nzType]=\"innerLayout.icon\" nzTheme=\"outline\"></i>\r\n </ng-container>\r\n <ng-template #textContent>\r\n {{ innerLayout.caption }}\r\n </ng-template>\r\n </button>\r\n </div>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"itemInfo?.footer?.elements && itemInfo?.data && itemInfo?.data.length\"\r\n [class]=\"getStyleWithoutClasses(itemInfo?.footer?.style).classes\">\r\n <span *ngFor=\"let element of itemInfo.footer?.elements; let c = index\">\r\n <ng-container\r\n [ngSwitch]=\"element.scope?.reference && itemInfo.propertySchema[getScope(element.scope?.reference)] ? itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()]?.type : 'default'\">\r\n\r\n <!-- Date control -->\r\n <div *ngSwitchCase=\"'date'\" class=\"form-group mb-3\">\r\n <span *ngIf=\"element.option.protected\" [style]=\"getStyleWithoutClasses(element?.label?.style).style\"\r\n [class]=\"element?.label?.style?.classes[0]\">\r\n <h5>{{\r\n itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()]?.caption\r\n }}\r\n </h5>\r\n </span>\r\n <div *ngIf=\"!element.option.protected\">\r\n <div [class]=\"element?.layout == 'horizontal' ? 'horizontal-layout' : 'row'\">\r\n <label [style]=\"getStyleWithoutClasses(element?.label?.style).style\"\r\n [class]=\"element?.label?.style?.classes[0]\">{{ element.label?.value\r\n ?\r\n element.label?.value : element.label?.caption ?\r\n element.label?.caption :\r\n itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()]?.caption\r\n }}</label>\r\n\r\n <nz-date-picker [required]=\"element.option.required\" [name]=\"element.scope?.reference\"\r\n [nzDisabled]=\"element?.option?.disabled\"\r\n (ngModelChange)=\"dateChangeEvent(element, $event)\"\r\n [nzFormat]=\"itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()]?.format ? itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()]?.format : 'yyyy-MM-dd'\"\r\n [(ngModel)]=\"itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()].value\"\r\n [style]=\"getStyleWithoutClasses(element?.style).style\"></nz-date-picker>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <!-- Button Control -->\r\n <div *ngSwitchCase=\"'default'\" [class]=\"element.option?.visible ? 'row' : 'hidden'\"\r\n (click)=\"invokeOnCardFooter(element)\">\r\n <button nz-button [style]=\"getStyleWithoutClasses(element.style).style\"\r\n [class]=\"element.option.protected ? 'disabled-button' : getStyleWithoutClasses(element.style).classes\">\r\n <ng-container *ngIf=\"!element.caption; else textContent\">\r\n <i nz-icon [nzType]=\"element.icon\" nzTheme=\"outline\"></i>\r\n </ng-container>\r\n <ng-template #textContent>\r\n {{ element.caption }}\r\n </ng-template>\r\n </button>\r\n </div>\r\n </ng-container>\r\n </span>\r\n </div>\r\n <!-- bottom pagination on card -->\r\n <div *ngIf=\"itemInfo?.layoutSchema?.pagination && itemInfo?.layoutSchema?.pagination?.bottom\">\r\n <vl-pagination [itemInfo]=\"itemInfo\" [pageSize]=\"pageSize\" [currentPage]=\"currentPage\" [pages]=\"pages\"\r\n (pageSizeChange)=\"invokeOnPageSizeChange($event)\" (onGoToPage)=\"invokeGoToPage($event)\">\r\n </vl-pagination>\r\n </div>\r\n</span>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i9.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i10.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: NzButtonModule }, { kind: "component", type: i11.NzButtonComponent, selector: "button[nz-button], a[nz-button]", inputs: ["nzBlock", "nzGhost", "nzSearch", "nzLoading", "nzDanger", "disabled", "tabIndex", "nzType", "nzShape", "nzSize"], exportAs: ["nzButton"] }, { kind: "directive", type: i12.ɵNzTransitionPatchDirective, selector: "[nz-button], [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group", inputs: ["hidden"] }, { kind: "directive", type: i13.NzWaveDirective, selector: "[nz-wave],button[nz-button]:not([nzType=\"link\"]):not([nzType=\"text\"])", inputs: ["nzWaveExtraNode"], exportAs: ["nzWave"] }, { kind: "ngmodule", type: NzDatePickerModule }, { kind: "component", type: i5$2.NzDatePickerComponent, selector: "nz-date-picker,nz-week-picker,nz-month-picker,nz-quarter-picker,nz-year-picker,nz-range-picker", inputs: ["nzInline", "nzAllowClear", "nzAutoFocus", "nzDisabled", "nzInputReadOnly", "nzOpen", "nzDisabledDate", "nzLocale", "nzPlaceHolder", "nzPopupStyle", "nzDropdownClassName", "nzSize", "nzStatus", "nzFormat", "nzVariant", "nzDateRender", "nzDisabledTime", "nzRenderExtraFooter", "nzShowToday", "nzMode", "nzShowNow", "nzRanges", "nzDefaultPickerValue", "nzSeparator", "nzSuffixIcon", "nzBackdrop", "nzId", "nzPlacement", "nzShowWeekNumber", "nzShowTime"], outputs: ["nzOnPanelChange", "nzOnCalendarChange", "nzOnOk", "nzOnOpenChange"], exportAs: ["nzDatePicker"] }, { kind: "ngmodule", type: NzModalModule }, { kind: "component", type:
|
|
1184
1181
|
// StringComponent,
|
|
1185
1182
|
PaginationComponent, selector: "vl-pagination", inputs: ["itemInfo", "pageSize", "currentPage", "pages"], outputs: ["pageSizeChange", "onGoToPage"] }, { kind: "component", type: String$1, selector: "vl-string", inputs: ["formField", "modalItemInfo"] }, { kind: "pipe", type: i5.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i5.DatePipe, name: "date" }] });
|
|
1186
1183
|
}
|
|
@@ -1197,7 +1194,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
|
|
|
1197
1194
|
// StringComponent,
|
|
1198
1195
|
PaginationComponent,
|
|
1199
1196
|
String$1
|
|
1200
|
-
], standalone: true, template: "<!-- Loader Spinner -->\r\n<div *ngIf=\"isLoading\" class=\"loader-overlay\">\r\n <div class=\"spinner\"></div>\r\n</div>\r\n<span *ngIf=\"this.selectedLanguageInfo?.selectedLanguage\">\r\n <!-- top pagination on card -->\r\n <div *ngIf=\"itemInfo?.layoutSchema?.pagination?.pageSize && itemInfo?.layoutSchema?.pagination?.top\">\r\n <vl-pagination [itemInfo]=\"itemInfo\" [pageSize]=\"pageSize\" [currentPage]=\"currentPage\" [pages]=\"pages\"\r\n (pageSizeChange)=\"invokeOnPageSizeChange($event)\" (onGoToPage)=\"invokeGoToPage($event)\">\r\n </vl-pagination>\r\n </div>\r\n <div *ngIf=\"itemInfo?.header?.elements\" [style]=\"getStyleWithoutClasses(itemInfo?.header?.style).style\"\r\n [class]=\"getStyleWithoutClasses(itemInfo?.header?.style).classes\">\r\n <span *ngFor=\"let element of itemInfo.header?.elements; let c = index\">\r\n <ng-container\r\n [ngSwitch]=\"element.scope?.reference && itemInfo.propertySchema[getScope(element.scope?.reference)] ? itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()]?.type : 'default'\">\r\n\r\n <!-- String Control -->\r\n <div *ngSwitchCase=\"'string'\" [class]=\"element.option?.visible ? 'card-field-wrapper' : 'hidden'\">\r\n\r\n <!-- LABEL -->\r\n <span *ngIf=\"element.label?.caption\" [style]=\"getStyleWithoutClasses(element.label?.style).style\"\r\n [class]=\"element.label?.style?.classes?.[0]\">\r\n {{ element.label.caption }}\r\n </span>\r\n </div>\r\n\r\n <!-- Date control -->\r\n <div *ngSwitchCase=\"'date'\" class=\"mb-3\">\r\n <span *ngIf=\"element.option.protected\" [style]=\"getStyleWithoutClasses(element?.label?.style).style\"\r\n [class]=\"element?.label?.style?.classes[0]\">\r\n <vl-string [formField]=\"element\" [modalItemInfo]=\"itemInfo\">\r\n </vl-string>\r\n </span>\r\n <div *ngIf=\"!element.option.protected\"\r\n [class]=\"element?.layout == 'horizontal' ? 'horizontal-layout' : ''\"\r\n [ngClass]=\"element?.style?.classes[0]\" [style]=\"getStyleWithoutClasses(element?.style).style\">\r\n <label [style]=\"getStyleWithoutClasses(element?.label?.style).style\"\r\n [class]=\"element?.label?.style?.classes[0]\">{{ element.label?.value\r\n ?\r\n element.label?.value : element.label?.caption ?\r\n element.label?.caption :\r\n itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()]?.caption\r\n }}</label>\r\n <p-datepicker (ngModelChange)=\"dateChangeEvent(element, $event)\" [showIcon]=\"true\" type=\"number\"\r\n inputmode=\"numeric\"\r\n [dateFormat]=\"itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()]?.format ? itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()].format : 'yy-mm-dd'\"\r\n [(ngModel)]=\"itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()].value\"\r\n (onFocus)=\"forceNumericKeyboard($event)\" (onInput)=\"onDateTyping($event)\"\r\n [class]=\"element?.scope?.style?.classes[0]\"\r\n [style]=\"getStyleWithoutClasses(element?.scope?.style).style\">\r\n </p-datepicker>\r\n </div>\r\n </div>\r\n\r\n <!-- Button Control -->\r\n <div *ngSwitchCase=\"'default'\" [class]=\"element.option?.visible ? 'row' : 'hidden'\"\r\n (click)=\"invokeOnCardHeader(element)\">\r\n <button nz-button [style]=\"getStyleWithoutClasses(element.style).style\"\r\n [class]=\"element.option.protected ? 'disabled-button' : getStyleWithoutClasses(element.style).classes\">\r\n <ng-container *ngIf=\"!element.caption; else textContent\">\r\n <i nz-icon [nzType]=\"element.icon\" nzTheme=\"outline\"></i>\r\n </ng-container>\r\n <ng-template #textContent>\r\n {{ element.caption }}\r\n </ng-template>\r\n </button>\r\n </div>\r\n </ng-container>\r\n </span>\r\n </div>\r\n <div [class]=\"itemInfo.class\" [style]=\"itemInfo.style\">\r\n <div *ngFor=\"let record of itemInfo.data; let k = index\"\r\n [ngClass]=\"mobileDisplay && itemInfo.layoutSchema.pagination ? cardPerRow + itemInfo.layoutSchema?.stylePerCard?.elementPerRow[k % itemInfo.layoutSchema?.stylePerCard?.elementPerRow.length] : ''\">\r\n <div [class]=\"itemInfo.layoutSchema?.stylePerCard?.classes[0]\"\r\n [style]=\"getStyleWithoutClasses(itemInfo.layoutSchema?.stylePerCard).style\">\r\n <div *ngFor=\"let layout of itemInfo.layoutSchema.cards\">\r\n <ng-container\r\n [ngSwitch]=\"layout?.scope?.reference && itemInfo.propertySchema[getScope(layout.scope?.reference)] ? itemInfo.propertySchema[getScope(layout.scope?.reference)][layout.scope?.reference.split('/').pop()]?.type : layout?.type == 'HorizontalLayout' ? 'HorizontalLayout' : 'default'\">\r\n <!-- Image Control -->\r\n <div *ngSwitchCase=\"'image'\" [class]=\"layout.option?.visible ? 'row' : 'hidden'\">\r\n <img [class]=\"getStyleWithoutClasses(layout?.scope?.style).classes\"\r\n [style]=\"getStyleWithoutClasses(layout?.scope?.style).style\"\r\n [src]=\"layout?.option?.src ? layout?.option?.src : record[layout.scope?.reference.split('/').pop()]\"\r\n alt=\"{{ layout.label ? layout.label : getProperty(layout.scope?.reference).productSchema.caption }}\"\r\n (click)=\"showImageDetails(layout.option, record)\" />\r\n </div>\r\n\r\n <!-- String Control -->\r\n <div *ngSwitchCase=\"'string'\" [class]=\"layout.option?.visible ? 'card-field-wrapper' : 'hidden'\"\r\n [style]=\"getStyleWithoutClasses(layout?.scope?.style).style\">\r\n\r\n <!-- LABEL -->\r\n <span *ngIf=\"layout?.label?.caption\" [class]=\"layout.label?.style?.classes?.[0]\">\r\n {{ layout.label.caption }}\r\n </span>\r\n\r\n <!-- VALUE -->\r\n <p *ngIf=\"layout.option?.protected && layout.option?.visible\"\r\n [class]=\"getStyleWithoutClasses(layout?.scope?.style).classes\"\r\n (click)=\"showLinkDetails(layout.option, record)\">\r\n {{\r\n record?.[layout.scope?.reference.split('/').pop()]\r\n ?? itemInfo.propertySchema[\r\n getScope(layout.scope?.reference)\r\n ]?.[layout.scope?.reference.split('/').pop()]?.default\r\n ?? '--'\r\n }}\r\n </p>\r\n </div>\r\n\r\n <!-- Date Control -->\r\n <div *ngSwitchCase=\"'date'\" [class]=\"layout.option?.visible ? 'card-field-wrapper' : 'hidden'\"\r\n [style]=\"getStyleWithoutClasses(layout?.scope?.style).style\">\r\n\r\n <!-- LABEL -->\r\n <span *ngIf=\"layout?.label?.caption\" [class]=\"layout.label?.style?.classes?.[0]\">\r\n {{ layout.label.caption }}\r\n </span>\r\n\r\n <!-- VALUE -->\r\n <p *ngIf=\"layout.option?.protected && layout.option?.visible\"\r\n [class]=\"getStyleWithoutClasses(layout?.scope?.style).classes\"\r\n (click)=\"showLinkDetails(layout.option, record)\">\r\n {{\r\n record?.[layout.scope?.reference.split('/').pop()]\r\n ?? itemInfo.propertySchema[\r\n getScope(layout.scope?.reference)\r\n ]?.[layout.scope?.reference.split('/').pop()]?.default\r\n ?? '--'\r\n }}\r\n </p>\r\n </div>\r\n\r\n <!-- Time Control -->\r\n <div *ngSwitchCase=\"'time'\" [class]=\"layout.option?.visible ? 'card-field-wrapper' : 'hidden'\"\r\n [style]=\"getStyleWithoutClasses(layout?.scope?.style).style\">\r\n\r\n <!-- LABEL -->\r\n <span *ngIf=\"layout?.label?.caption\" [class]=\"layout.label?.style?.classes?.[0]\">\r\n {{ layout.label.caption }}\r\n </span>\r\n\r\n <!-- VALUE -->\r\n <p *ngIf=\"layout.option?.protected && layout.option?.visible\"\r\n [class]=\"getStyleWithoutClasses(layout?.scope?.style).classes\"\r\n (click)=\"showLinkDetails(layout.option, record)\">\r\n {{\r\n record?.[layout.scope?.reference.split('/').pop()]\r\n ?? itemInfo.propertySchema[\r\n getScope(layout.scope?.reference)\r\n ]?.[layout.scope?.reference.split('/').pop()]?.default\r\n ?? '--'\r\n }}\r\n </p>\r\n </div>\r\n\r\n <!-- number Control -->\r\n <div *ngSwitchCase=\"'number'\" [class]=\"layout.option?.visible ? 'row' : 'hidden'\">\r\n <h3 *ngIf=\"itemInfo.propertySchema[getScope(layout.scope?.reference)] && itemInfo.propertySchema[getScope(layout.scope?.reference)][layout.scope?.reference.split('/').pop()]?.format.currency\"\r\n [class]=\"getStyleWithoutClasses(layout?.scope?.style).classes\"\r\n [style]=\"getStyleWithoutClasses(layout?.scope?.style).style\">\r\n {{ record[layout.scope?.reference.split('/').pop()] | currency: layout.option?.currency\r\n ?\r\n layout.option.currency\r\n :\r\n 'USD' }}\r\n </h3>\r\n </div>\r\n\r\n <!-- Button Control -->\r\n <div *ngSwitchCase=\"'default'\" [class]=\"layout.option?.visible ? 'row' : 'hidden'\">\r\n <button [style]=\"getStyleWithoutClasses(layout?.style).style\"\r\n [class]=\"layout.option.protected ? 'disabled-button' : getStyleWithoutClasses(layout?.style).classes\"\r\n (click)=\"invokeButtonClick(layout, record, k)\">\r\n <ng-container *ngIf=\"!layout.caption; else textContent\">\r\n <i nz-icon [nzType]=\"layout.icon\" nzTheme=\"outline\"></i>\r\n </ng-container>\r\n <ng-template #textContent>\r\n {{ layout.caption }}\r\n </ng-template>\r\n </button>\r\n </div>\r\n\r\n <!-- HorizontalLayout Control -->\r\n <div *ngSwitchCase=\"'HorizontalLayout'\">\r\n <div [class]=\"getStyleWithoutClasses(layout?.style).classes\"\r\n [style]=\"getStyleWithoutClasses(layout?.style).style\">\r\n <ng-container *ngFor=\"let innerLayout of layout.elements\">\r\n <ng-container\r\n [ngSwitch]=\"innerLayout.scope?.reference && itemInfo.propertySchema[getScope(innerLayout.scope?.reference)] ? itemInfo.propertySchema[getScope(innerLayout.scope?.reference)][innerLayout.scope?.reference.split('/').pop()]?.type : 'default'\">\r\n <!-- Image Control -->\r\n <div *ngSwitchCase=\"'image'\"\r\n [class]=\"innerLayout.option?.visible ? 'row' : 'hidden'\">\r\n <img [class]=\"getStyleWithoutClasses(innerLayout?.scope?.style).classes\"\r\n [style]=\"getStyleWithoutClasses(innerLayout?.scope?.style).style\"\r\n [src]=\"innerLayout?.option?.src ? innerLayout?.option?.src : record[innerLayout.scope?.reference.split('/').pop()]\"\r\n alt=\"{{ innerLayout.label ? innerLayout.label : getProperty(innerLayout.scope?.reference).productSchema.caption }}\"\r\n (click)=\"showImageDetails(innerLayout.option, record)\" />\r\n </div>\r\n\r\n <!-- String Control -->\r\n <div *ngSwitchCase=\"'string'\"\r\n [class]=\"innerLayout.option?.visible ? 'card-field-wrapper' : 'hidden'\">\r\n\r\n <!-- LABEL -->\r\n <span *ngIf=\"innerLayout.label?.caption\"\r\n [style]=\"getStyleWithoutClasses(innerLayout.label?.style).style\"\r\n [class]=\"innerLayout.label?.style?.classes?.[0]\">\r\n {{ innerLayout.label.caption }}\r\n </span>\r\n\r\n <!-- VALUE -->\r\n <h3 *ngIf=\"innerLayout.option?.protected && innerLayout.option?.visible\"\r\n [class]=\"getStyleWithoutClasses(innerLayout?.scope?.style).classes\"\r\n [style]=\"getStyleWithoutClasses(innerLayout?.scope?.style).style\"\r\n (click)=\"showLinkDetails(innerLayout.option, record)\">\r\n\r\n <!-- DATE FORMAT -->\r\n <ng-container *ngIf=\"innerLayout.option?.dateFormat; else checkTime\">\r\n {{\r\n record?.[innerLayout.scope?.reference.split('/').pop()]\r\n ? (record[innerLayout.scope?.reference.split('/').pop()] | date:\r\n innerLayout.option.dateFormat)\r\n : '--'\r\n }}\r\n </ng-container>\r\n\r\n <!-- TIME FORMAT -->\r\n <ng-template #checkTime>\r\n <ng-container\r\n *ngIf=\"innerLayout.option?.timeFormat; else normalValue\">\r\n {{\r\n record?.[innerLayout.scope?.reference.split('/').pop()]\r\n ? (record[innerLayout.scope?.reference.split('/').pop()] | date:\r\n innerLayout.option.timeFormat)\r\n : '--'\r\n }}\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- NORMAL STRING -->\r\n <ng-template #normalValue>\r\n {{\r\n record?.[innerLayout.scope?.reference.split('/').pop()]\r\n ?? '--'\r\n }}\r\n </ng-template>\r\n\r\n </h3>\r\n </div>\r\n\r\n <!-- number Control -->\r\n <div *ngSwitchCase=\"'number'\"\r\n [class]=\"innerLayout.option?.visible ? 'row' : 'hidden'\">\r\n <h3 *ngIf=\"itemInfo.propertySchema[getScope(innerLayout.scope?.reference)] &&itemInfo.propertySchema[getScope(innerLayout.scope?.reference)][innerLayout.scope?.reference.split('/').pop()]?.format.currency\"\r\n [class]=\"getStyleWithoutClasses(innerLayout?.scope?.style).classes\"\r\n [style]=\"getStyleWithoutClasses(innerLayout?.scope?.style).style\">\r\n {{ record[innerLayout.scope?.reference.split('/').pop()] | currency:\r\n innerLayout.option?.currency ?\r\n innerLayout.option.currency\r\n :\r\n 'USD' }}\r\n </h3>\r\n </div>\r\n\r\n <!-- Date Control -->\r\n <div *ngSwitchCase=\"'date'\"\r\n [class]=\"innerLayout.option?.visible ? 'card-field-wrapper' : 'hidden'\">\r\n\r\n <!-- LABEL -->\r\n <span *ngIf=\"innerLayout.label?.caption\"\r\n [style]=\"getStyleWithoutClasses(innerLayout.label?.style).style\"\r\n [class]=\"innerLayout.label?.style?.classes?.[0]\">\r\n {{ innerLayout.label.caption }}\r\n </span>\r\n\r\n <!-- VALUE -->\r\n <h3 *ngIf=\"innerLayout.option?.protected && innerLayout.option?.visible\"\r\n [class]=\"getStyleWithoutClasses(innerLayout?.scope?.style).classes\"\r\n [style]=\"getStyleWithoutClasses(innerLayout?.scope?.style).style\"\r\n (click)=\"showLinkDetails(innerLayout.option, record)\">\r\n\r\n <!-- DATE FORMAT -->\r\n <ng-container *ngIf=\"innerLayout.option?.dateFormat; else checkTime\">\r\n {{\r\n record?.[innerLayout.scope?.reference.split('/').pop()]\r\n ? (record[innerLayout.scope?.reference.split('/').pop()] | date:\r\n innerLayout.option.dateFormat)\r\n : '--'\r\n }}\r\n </ng-container>\r\n\r\n <!-- TIME FORMAT -->\r\n <ng-template #checkTime>\r\n <ng-container\r\n *ngIf=\"innerLayout.option?.timeFormat; else normalValue\">\r\n {{\r\n record?.[innerLayout.scope?.reference.split('/').pop()]\r\n ? (record[innerLayout.scope?.reference.split('/').pop()] | date:\r\n innerLayout.option.timeFormat)\r\n : '--'\r\n }}\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- NORMAL STRING -->\r\n <ng-template #normalValue>\r\n {{\r\n record?.[innerLayout.scope?.reference.split('/').pop()]\r\n ?? '--'\r\n }}\r\n </ng-template>\r\n\r\n </h3>\r\n </div>\r\n\r\n <!-- Time Control -->\r\n <div *ngSwitchCase=\"'time'\"\r\n [class]=\"innerLayout.option?.visible ? 'card-field-wrapper' : 'hidden'\">\r\n\r\n <!-- LABEL -->\r\n <span *ngIf=\"innerLayout.label?.caption\"\r\n [style]=\"getStyleWithoutClasses(innerLayout.label?.style).style\"\r\n [class]=\"innerLayout.label?.style?.classes?.[0]\">\r\n {{ innerLayout.label.caption }}\r\n </span>\r\n\r\n <!-- VALUE -->\r\n <h3 *ngIf=\"innerLayout.option?.protected && innerLayout.option?.visible\"\r\n [class]=\"getStyleWithoutClasses(innerLayout?.scope?.style).classes\"\r\n [style]=\"getStyleWithoutClasses(innerLayout?.scope?.style).style\"\r\n (click)=\"showLinkDetails(innerLayout.option, record)\">\r\n\r\n <!-- DATE FORMAT -->\r\n <ng-container *ngIf=\"innerLayout.option?.dateFormat; else checkTime\">\r\n {{\r\n record?.[innerLayout.scope?.reference.split('/').pop()]\r\n ? (record[innerLayout.scope?.reference.split('/').pop()] | date:\r\n innerLayout.option.dateFormat)\r\n : '--'\r\n }}\r\n </ng-container>\r\n\r\n <!-- TIME FORMAT -->\r\n <ng-template #checkTime>\r\n <ng-container\r\n *ngIf=\"innerLayout.option?.timeFormat; else normalValue\">\r\n {{\r\n record?.[innerLayout.scope?.reference.split('/').pop()]\r\n ? (record[innerLayout.scope?.reference.split('/').pop()] | date:\r\n innerLayout.option.timeFormat)\r\n : '--'\r\n }}\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- NORMAL STRING -->\r\n <ng-template #normalValue>\r\n {{\r\n record?.[innerLayout.scope?.reference.split('/').pop()]\r\n ?? '--'\r\n }}\r\n </ng-template>\r\n\r\n </h3>\r\n </div>\r\n\r\n <!-- Button Control -->\r\n <div *ngSwitchCase=\"'default'\">\r\n <button nz-button [style]=\"getStyleWithoutClasses(innerLayout?.style).style\"\r\n [class]=\"innerLayout.option?.visible ? innerLayout.option.protected ? 'disabled-button' : getStyleWithoutClasses(innerLayout?.style).classes : 'hidden'\"\r\n (click)=\"invokeButtonClick(innerLayout, record, k)\">\r\n <ng-container *ngIf=\"!innerLayout.caption; else textContent\">\r\n <i nz-icon [nzType]=\"innerLayout.icon\" nzTheme=\"outline\"></i>\r\n </ng-container>\r\n <ng-template #textContent>\r\n {{ innerLayout.caption }}\r\n </ng-template>\r\n </button>\r\n </div>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"itemInfo?.footer?.elements && itemInfo?.data && itemInfo?.data.length\"\r\n [class]=\"getStyleWithoutClasses(itemInfo?.footer?.style).classes\">\r\n <span *ngFor=\"let element of itemInfo.footer?.elements; let c = index\">\r\n <ng-container\r\n [ngSwitch]=\"element.scope?.reference && itemInfo.propertySchema[getScope(element.scope?.reference)] ? itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()]?.type : 'default'\">\r\n\r\n <!-- Date control -->\r\n <div *ngSwitchCase=\"'date'\" class=\"form-group mb-3\">\r\n <span *ngIf=\"element.option.protected\" [style]=\"getStyleWithoutClasses(element?.label?.style).style\"\r\n [class]=\"element?.label?.style?.classes[0]\">\r\n <h5>{{\r\n itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()]?.caption\r\n }}\r\n </h5>\r\n </span>\r\n <div *ngIf=\"!element.option.protected\">\r\n <div [class]=\"element?.layout == 'horizontal' ? 'horizontal-layout' : 'row'\">\r\n <label [style]=\"getStyleWithoutClasses(element?.label?.style).style\"\r\n [class]=\"element?.label?.style?.classes[0]\">{{ element.label?.value\r\n ?\r\n element.label?.value : element.label?.caption ?\r\n element.label?.caption :\r\n itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()]?.caption\r\n }}</label>\r\n\r\n <nz-date-picker [required]=\"element.option.required\" [name]=\"element.scope?.reference\"\r\n [nzDisabled]=\"element?.option?.disabled\"\r\n (ngModelChange)=\"dateChangeEvent(element, $event)\"\r\n [nzFormat]=\"itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()]?.format ? itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()]?.format : 'yyyy-MM-dd'\"\r\n [(ngModel)]=\"itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()].value\"\r\n [style]=\"getStyleWithoutClasses(element?.style).style\"></nz-date-picker>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <!-- Button Control -->\r\n <div *ngSwitchCase=\"'default'\" [class]=\"element.option?.visible ? 'row' : 'hidden'\"\r\n (click)=\"invokeOnCardFooter(element)\">\r\n <button nz-button [style]=\"getStyleWithoutClasses(element.style).style\"\r\n [class]=\"element.option.protected ? 'disabled-button' : getStyleWithoutClasses(element.style).classes\">\r\n <ng-container *ngIf=\"!element.caption; else textContent\">\r\n <i nz-icon [nzType]=\"element.icon\" nzTheme=\"outline\"></i>\r\n </ng-container>\r\n <ng-template #textContent>\r\n {{ element.caption }}\r\n </ng-template>\r\n </button>\r\n </div>\r\n </ng-container>\r\n </span>\r\n </div>\r\n <!-- bottom pagination on card -->\r\n <div *ngIf=\"itemInfo?.layoutSchema?.pagination && itemInfo?.layoutSchema?.pagination?.bottom\">\r\n <vl-pagination [itemInfo]=\"itemInfo\" [pageSize]=\"pageSize\" [currentPage]=\"currentPage\" [pages]=\"pages\"\r\n (pageSizeChange)=\"invokeOnPageSizeChange($event)\" (onGoToPage)=\"invokeGoToPage($event)\">\r\n </vl-pagination>\r\n </div>\r\n</span>" }]
|
|
1197
|
+
], standalone: true, template: "<!-- Loader Spinner -->\r\n<div *ngIf=\"isLoading\" class=\"loader-overlay\">\r\n <div class=\"spinner\"></div>\r\n</div>\r\n<span *ngIf=\"this.selectedLanguageInfo?.selectedLanguage\">\r\n <!-- top pagination on card -->\r\n <div *ngIf=\"itemInfo?.layoutSchema?.pagination?.pageSize && itemInfo?.layoutSchema?.pagination?.top\">\r\n <vl-pagination [itemInfo]=\"itemInfo\" [pageSize]=\"pageSize\" [currentPage]=\"currentPage\" [pages]=\"pages\"\r\n (pageSizeChange)=\"invokeOnPageSizeChange($event)\" (onGoToPage)=\"invokeGoToPage($event)\">\r\n </vl-pagination>\r\n </div>\r\n <div *ngIf=\"itemInfo?.header?.elements\" [style]=\"getStyleWithoutClasses(itemInfo?.header?.style).style\"\r\n [class]=\"getStyleWithoutClasses(itemInfo?.header?.style).classes\">\r\n <span *ngFor=\"let element of itemInfo.header?.elements; let c = index\">\r\n <ng-container\r\n [ngSwitch]=\"element.scope?.reference && itemInfo.propertySchema[getScope(element.scope?.reference)] ? itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()]?.type : 'default'\">\r\n\r\n <!-- String Control -->\r\n <div *ngSwitchCase=\"'string'\" [class]=\"element.option?.visible ? 'card-field-wrapper' : 'hidden'\">\r\n\r\n <!-- LABEL -->\r\n <span *ngIf=\"element.label?.caption\" [style]=\"getStyleWithoutClasses(element.label?.style).style\"\r\n [class]=\"element.label?.style?.classes?.[0]\">\r\n {{ element.label.caption }}\r\n </span>\r\n </div>\r\n\r\n <!-- Date control -->\r\n <div *ngSwitchCase=\"'date'\" class=\"mb-3\">\r\n <span *ngIf=\"element.option.protected\" [style]=\"getStyleWithoutClasses(element?.label?.style).style\"\r\n [class]=\"element?.label?.style?.classes[0]\">\r\n <vl-string [formField]=\"element\" [modalItemInfo]=\"itemInfo\">\r\n </vl-string>\r\n </span>\r\n <div *ngIf=\"!element.option.protected\"\r\n [class]=\"element?.layout == 'horizontal' ? 'horizontal-layout' : ''\"\r\n [ngClass]=\"element?.style?.classes[0]\" [style]=\"getStyleWithoutClasses(element?.style).style\">\r\n <label [style]=\"getStyleWithoutClasses(element?.label?.style).style\"\r\n [class]=\"element?.label?.style?.classes[0]\">{{ element.label?.value\r\n ?\r\n element.label?.value : element.label?.caption ?\r\n element.label?.caption :\r\n itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()]?.caption\r\n }}</label>\r\n <p-datepicker (ngModelChange)=\"dateChangeEvent(element, $event)\" [showIcon]=\"true\" type=\"number\"\r\n inputmode=\"numeric\"\r\n [dateFormat]=\"itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()]?.format ? itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()].format : 'yy-mm-dd'\"\r\n [(ngModel)]=\"itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()].value\"\r\n (onFocus)=\"forceNumericKeyboard($event)\" (onInput)=\"onDateTyping($event)\"\r\n [class]=\"element?.scope?.style?.classes[0]\"\r\n [style]=\"getStyleWithoutClasses(element?.scope?.style).style\">\r\n </p-datepicker>\r\n </div>\r\n </div>\r\n\r\n <!-- Button Control -->\r\n <div *ngSwitchCase=\"'default'\" [class]=\"element.option?.visible ? 'row' : 'hidden'\"\r\n (click)=\"invokeOnCardHeader(element)\">\r\n <button nz-button [style]=\"getStyleWithoutClasses(element.style).style\"\r\n [class]=\"element.option.protected ? 'disabled-button' : getStyleWithoutClasses(element.style).classes\">\r\n <ng-container *ngIf=\"!element.caption; else textContent\">\r\n <i nz-icon [nzType]=\"element.icon\" nzTheme=\"outline\"></i>\r\n </ng-container>\r\n <ng-template #textContent>\r\n {{ element.caption }}\r\n </ng-template>\r\n </button>\r\n </div>\r\n </ng-container>\r\n </span>\r\n </div>\r\n <div [class]=\"itemInfo.class\" [style]=\"itemInfo.style\">\r\n <div *ngFor=\"let record of itemInfo.data; let k = index\"\r\n [ngClass]=\"mobileDisplay ? '' : itemInfo.layoutSchema.pagination ? cardPerRow + itemInfo.layoutSchema?.stylePerCard?.elementPerRow[k % itemInfo.layoutSchema?.stylePerCard?.elementPerRow.length] : ''\">\r\n <div [class]=\"itemInfo.layoutSchema?.stylePerCard?.classes[0]\"\r\n [style]=\"getStyleWithoutClasses(itemInfo.layoutSchema?.stylePerCard).style\">\r\n <div *ngFor=\"let layout of itemInfo.layoutSchema.cards\">\r\n <ng-container\r\n [ngSwitch]=\"layout?.scope?.reference && itemInfo.propertySchema[getScope(layout.scope?.reference)] ? itemInfo.propertySchema[getScope(layout.scope?.reference)][layout.scope?.reference.split('/').pop()]?.type : layout?.type == 'HorizontalLayout' ? 'HorizontalLayout' : 'default'\">\r\n <!-- Image Control -->\r\n <div *ngSwitchCase=\"'image'\" [class]=\"layout.option?.visible ? 'row' : 'hidden'\">\r\n <img [class]=\"getStyleWithoutClasses(layout?.scope?.style).classes\"\r\n [style]=\"getStyleWithoutClasses(layout?.scope?.style).style\"\r\n [src]=\"layout?.option?.src ? layout?.option?.src : record[layout.scope?.reference.split('/').pop()]\"\r\n alt=\"{{ layout.label ? layout.label : getProperty(layout.scope?.reference).productSchema.caption }}\"\r\n (click)=\"showImageDetails(layout.option, record)\" />\r\n </div>\r\n\r\n <!-- String Control -->\r\n <div *ngSwitchCase=\"'string'\" [class]=\"layout.option?.visible ? 'card-field-wrapper' : 'hidden'\"\r\n [style]=\"getStyleWithoutClasses(layout?.scope?.style).style\">\r\n\r\n <!-- LABEL -->\r\n <span *ngIf=\"layout?.label?.caption\" [class]=\"layout.label?.style?.classes?.[0]\">\r\n {{ layout.label.caption }}\r\n </span>\r\n\r\n <!-- VALUE -->\r\n <p *ngIf=\"layout.option?.protected && layout.option?.visible\"\r\n [class]=\"getStyleWithoutClasses(layout?.scope?.style).classes\"\r\n (click)=\"showLinkDetails(layout.option, record)\">\r\n {{\r\n record?.[layout.scope?.reference.split('/').pop()]\r\n ?? itemInfo.propertySchema[\r\n getScope(layout.scope?.reference)\r\n ]?.[layout.scope?.reference.split('/').pop()]?.default\r\n ?? '--'\r\n }}\r\n </p>\r\n </div>\r\n\r\n <!-- Date Control -->\r\n <div *ngSwitchCase=\"'date'\" [class]=\"layout.option?.visible ? 'card-field-wrapper' : 'hidden'\"\r\n [style]=\"getStyleWithoutClasses(layout?.scope?.style).style\">\r\n\r\n <!-- LABEL -->\r\n <span *ngIf=\"layout?.label?.caption\" [class]=\"layout.label?.style?.classes?.[0]\">\r\n {{ layout.label.caption }}\r\n </span>\r\n\r\n <!-- VALUE -->\r\n <p *ngIf=\"layout.option?.protected && layout.option?.visible\"\r\n [class]=\"getStyleWithoutClasses(layout?.scope?.style).classes\"\r\n (click)=\"showLinkDetails(layout.option, record)\">\r\n {{\r\n record?.[layout.scope?.reference.split('/').pop()]\r\n ?? itemInfo.propertySchema[\r\n getScope(layout.scope?.reference)\r\n ]?.[layout.scope?.reference.split('/').pop()]?.default\r\n ?? '--'\r\n }}\r\n </p>\r\n </div>\r\n\r\n <!-- Time Control -->\r\n <div *ngSwitchCase=\"'time'\" [class]=\"layout.option?.visible ? 'card-field-wrapper' : 'hidden'\"\r\n [style]=\"getStyleWithoutClasses(layout?.scope?.style).style\">\r\n\r\n <!-- LABEL -->\r\n <span *ngIf=\"layout?.label?.caption\" [class]=\"layout.label?.style?.classes?.[0]\">\r\n {{ layout.label.caption }}\r\n </span>\r\n\r\n <!-- VALUE -->\r\n <p *ngIf=\"layout.option?.protected && layout.option?.visible\"\r\n [class]=\"getStyleWithoutClasses(layout?.scope?.style).classes\"\r\n (click)=\"showLinkDetails(layout.option, record)\">\r\n {{\r\n record?.[layout.scope?.reference.split('/').pop()]\r\n ?? itemInfo.propertySchema[\r\n getScope(layout.scope?.reference)\r\n ]?.[layout.scope?.reference.split('/').pop()]?.default\r\n ?? '--'\r\n }}\r\n </p>\r\n </div>\r\n\r\n <!-- number Control -->\r\n <div *ngSwitchCase=\"'number'\" [class]=\"layout.option?.visible ? 'row' : 'hidden'\">\r\n <h3 *ngIf=\"itemInfo.propertySchema[getScope(layout.scope?.reference)] && itemInfo.propertySchema[getScope(layout.scope?.reference)][layout.scope?.reference.split('/').pop()]?.format.currency\"\r\n [class]=\"getStyleWithoutClasses(layout?.scope?.style).classes\"\r\n [style]=\"getStyleWithoutClasses(layout?.scope?.style).style\">\r\n {{ record[layout.scope?.reference.split('/').pop()] | currency: layout.option?.currency\r\n ?\r\n layout.option.currency\r\n :\r\n 'USD' }}\r\n </h3>\r\n </div>\r\n\r\n <!-- Button Control -->\r\n <div *ngSwitchCase=\"'default'\" [class]=\"layout.option?.visible ? 'row' : 'hidden'\">\r\n <button [style]=\"getStyleWithoutClasses(layout?.style).style\"\r\n [class]=\"layout.option.protected ? 'disabled-button' : getStyleWithoutClasses(layout?.style).classes\"\r\n (click)=\"invokeButtonClick(layout, record, k)\">\r\n <ng-container *ngIf=\"!layout.caption; else textContent\">\r\n <i nz-icon [nzType]=\"layout.icon\" nzTheme=\"outline\"></i>\r\n </ng-container>\r\n <ng-template #textContent>\r\n {{ layout.caption }}\r\n </ng-template>\r\n </button>\r\n </div>\r\n\r\n <!-- HorizontalLayout Control -->\r\n <div *ngSwitchCase=\"'HorizontalLayout'\">\r\n <div [class]=\"getStyleWithoutClasses(layout?.style).classes\"\r\n [style]=\"getStyleWithoutClasses(layout?.style).style\">\r\n <ng-container *ngFor=\"let innerLayout of layout.elements\">\r\n <ng-container\r\n [ngSwitch]=\"innerLayout.scope?.reference && itemInfo.propertySchema[getScope(innerLayout.scope?.reference)] ? itemInfo.propertySchema[getScope(innerLayout.scope?.reference)][innerLayout.scope?.reference.split('/').pop()]?.type : 'default'\">\r\n <!-- Image Control -->\r\n <div *ngSwitchCase=\"'image'\"\r\n [class]=\"innerLayout.option?.visible ? 'row' : 'hidden'\">\r\n <img [class]=\"getStyleWithoutClasses(innerLayout?.scope?.style).classes\"\r\n [style]=\"getStyleWithoutClasses(innerLayout?.scope?.style).style\"\r\n [src]=\"innerLayout?.option?.src ? innerLayout?.option?.src : record[innerLayout.scope?.reference.split('/').pop()]\"\r\n alt=\"{{ innerLayout.label ? innerLayout.label : getProperty(innerLayout.scope?.reference).productSchema.caption }}\"\r\n (click)=\"showImageDetails(innerLayout.option, record)\" />\r\n </div>\r\n\r\n <!-- String Control -->\r\n <div *ngSwitchCase=\"'string'\"\r\n [class]=\"innerLayout.option?.visible ? 'card-field-wrapper' : 'hidden'\">\r\n\r\n <!-- LABEL -->\r\n <span *ngIf=\"innerLayout.label?.caption\"\r\n [style]=\"getStyleWithoutClasses(innerLayout.label?.style).style\"\r\n [class]=\"innerLayout.label?.style?.classes?.[0]\">\r\n {{ innerLayout.label.caption }}\r\n </span>\r\n\r\n <!-- VALUE -->\r\n <h3 *ngIf=\"innerLayout.option?.protected && innerLayout.option?.visible\"\r\n [class]=\"getStyleWithoutClasses(innerLayout?.scope?.style).classes\"\r\n [style]=\"getStyleWithoutClasses(innerLayout?.scope?.style).style\"\r\n (click)=\"showLinkDetails(innerLayout.option, record)\">\r\n\r\n <!-- DATE FORMAT -->\r\n <ng-container *ngIf=\"innerLayout.option?.dateFormat; else checkTime\">\r\n {{\r\n record?.[innerLayout.scope?.reference.split('/').pop()]\r\n ? (record[innerLayout.scope?.reference.split('/').pop()] | date:\r\n innerLayout.option.dateFormat)\r\n : '--'\r\n }}\r\n </ng-container>\r\n\r\n <!-- TIME FORMAT -->\r\n <ng-template #checkTime>\r\n <ng-container\r\n *ngIf=\"innerLayout.option?.timeFormat; else normalValue\">\r\n {{\r\n record?.[innerLayout.scope?.reference.split('/').pop()]\r\n ? (record[innerLayout.scope?.reference.split('/').pop()] | date:\r\n innerLayout.option.timeFormat)\r\n : '--'\r\n }}\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- NORMAL STRING -->\r\n <ng-template #normalValue>\r\n {{\r\n record?.[innerLayout.scope?.reference.split('/').pop()]\r\n ?? '--'\r\n }}\r\n </ng-template>\r\n\r\n </h3>\r\n </div>\r\n\r\n <!-- number Control -->\r\n <div *ngSwitchCase=\"'number'\"\r\n [class]=\"innerLayout.option?.visible ? 'row' : 'hidden'\">\r\n <h3 *ngIf=\"itemInfo.propertySchema[getScope(innerLayout.scope?.reference)] &&itemInfo.propertySchema[getScope(innerLayout.scope?.reference)][innerLayout.scope?.reference.split('/').pop()]?.format.currency\"\r\n [class]=\"getStyleWithoutClasses(innerLayout?.scope?.style).classes\"\r\n [style]=\"getStyleWithoutClasses(innerLayout?.scope?.style).style\">\r\n {{ record[innerLayout.scope?.reference.split('/').pop()] | currency:\r\n innerLayout.option?.currency ?\r\n innerLayout.option.currency\r\n :\r\n 'USD' }}\r\n </h3>\r\n </div>\r\n\r\n <!-- Date Control -->\r\n <div *ngSwitchCase=\"'date'\"\r\n [class]=\"innerLayout.option?.visible ? 'card-field-wrapper' : 'hidden'\">\r\n\r\n <!-- LABEL -->\r\n <span *ngIf=\"innerLayout.label?.caption\"\r\n [style]=\"getStyleWithoutClasses(innerLayout.label?.style).style\"\r\n [class]=\"innerLayout.label?.style?.classes?.[0]\">\r\n {{ innerLayout.label.caption }}\r\n </span>\r\n\r\n <!-- VALUE -->\r\n <h3 *ngIf=\"innerLayout.option?.protected && innerLayout.option?.visible\"\r\n [class]=\"getStyleWithoutClasses(innerLayout?.scope?.style).classes\"\r\n [style]=\"getStyleWithoutClasses(innerLayout?.scope?.style).style\"\r\n (click)=\"showLinkDetails(innerLayout.option, record)\">\r\n\r\n <!-- DATE FORMAT -->\r\n <ng-container *ngIf=\"innerLayout.option?.dateFormat; else checkTime\">\r\n {{\r\n record?.[innerLayout.scope?.reference.split('/').pop()]\r\n ? (record[innerLayout.scope?.reference.split('/').pop()] | date:\r\n innerLayout.option.dateFormat)\r\n : '--'\r\n }}\r\n </ng-container>\r\n\r\n <!-- TIME FORMAT -->\r\n <ng-template #checkTime>\r\n <ng-container\r\n *ngIf=\"innerLayout.option?.timeFormat; else normalValue\">\r\n {{\r\n record?.[innerLayout.scope?.reference.split('/').pop()]\r\n ? (record[innerLayout.scope?.reference.split('/').pop()] | date:\r\n innerLayout.option.timeFormat)\r\n : '--'\r\n }}\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- NORMAL STRING -->\r\n <ng-template #normalValue>\r\n {{\r\n record?.[innerLayout.scope?.reference.split('/').pop()]\r\n ?? '--'\r\n }}\r\n </ng-template>\r\n\r\n </h3>\r\n </div>\r\n\r\n <!-- Time Control -->\r\n <div *ngSwitchCase=\"'time'\"\r\n [class]=\"innerLayout.option?.visible ? 'card-field-wrapper' : 'hidden'\">\r\n\r\n <!-- LABEL -->\r\n <span *ngIf=\"innerLayout.label?.caption\"\r\n [style]=\"getStyleWithoutClasses(innerLayout.label?.style).style\"\r\n [class]=\"innerLayout.label?.style?.classes?.[0]\">\r\n {{ innerLayout.label.caption }}\r\n </span>\r\n\r\n <!-- VALUE -->\r\n <h3 *ngIf=\"innerLayout.option?.protected && innerLayout.option?.visible\"\r\n [class]=\"getStyleWithoutClasses(innerLayout?.scope?.style).classes\"\r\n [style]=\"getStyleWithoutClasses(innerLayout?.scope?.style).style\"\r\n (click)=\"showLinkDetails(innerLayout.option, record)\">\r\n\r\n <!-- DATE FORMAT -->\r\n <ng-container *ngIf=\"innerLayout.option?.dateFormat; else checkTime\">\r\n {{\r\n record?.[innerLayout.scope?.reference.split('/').pop()]\r\n ? (record[innerLayout.scope?.reference.split('/').pop()] | date:\r\n innerLayout.option.dateFormat)\r\n : '--'\r\n }}\r\n </ng-container>\r\n\r\n <!-- TIME FORMAT -->\r\n <ng-template #checkTime>\r\n <ng-container\r\n *ngIf=\"innerLayout.option?.timeFormat; else normalValue\">\r\n {{\r\n record?.[innerLayout.scope?.reference.split('/').pop()]\r\n ? (record[innerLayout.scope?.reference.split('/').pop()] | date:\r\n innerLayout.option.timeFormat)\r\n : '--'\r\n }}\r\n </ng-container>\r\n </ng-template>\r\n\r\n <!-- NORMAL STRING -->\r\n <ng-template #normalValue>\r\n {{\r\n record?.[innerLayout.scope?.reference.split('/').pop()]\r\n ?? '--'\r\n }}\r\n </ng-template>\r\n\r\n </h3>\r\n </div>\r\n\r\n <!-- Button Control -->\r\n <div *ngSwitchCase=\"'default'\">\r\n <button nz-button [style]=\"getStyleWithoutClasses(innerLayout?.style).style\"\r\n [class]=\"innerLayout.option?.visible ? innerLayout.option.protected ? 'disabled-button' : getStyleWithoutClasses(innerLayout?.style).classes : 'hidden'\"\r\n (click)=\"invokeButtonClick(innerLayout, record, k)\">\r\n <ng-container *ngIf=\"!innerLayout.caption; else textContent\">\r\n <i nz-icon [nzType]=\"innerLayout.icon\" nzTheme=\"outline\"></i>\r\n </ng-container>\r\n <ng-template #textContent>\r\n {{ innerLayout.caption }}\r\n </ng-template>\r\n </button>\r\n </div>\r\n\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"itemInfo?.footer?.elements && itemInfo?.data && itemInfo?.data.length\"\r\n [class]=\"getStyleWithoutClasses(itemInfo?.footer?.style).classes\">\r\n <span *ngFor=\"let element of itemInfo.footer?.elements; let c = index\">\r\n <ng-container\r\n [ngSwitch]=\"element.scope?.reference && itemInfo.propertySchema[getScope(element.scope?.reference)] ? itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()]?.type : 'default'\">\r\n\r\n <!-- Date control -->\r\n <div *ngSwitchCase=\"'date'\" class=\"form-group mb-3\">\r\n <span *ngIf=\"element.option.protected\" [style]=\"getStyleWithoutClasses(element?.label?.style).style\"\r\n [class]=\"element?.label?.style?.classes[0]\">\r\n <h5>{{\r\n itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()]?.caption\r\n }}\r\n </h5>\r\n </span>\r\n <div *ngIf=\"!element.option.protected\">\r\n <div [class]=\"element?.layout == 'horizontal' ? 'horizontal-layout' : 'row'\">\r\n <label [style]=\"getStyleWithoutClasses(element?.label?.style).style\"\r\n [class]=\"element?.label?.style?.classes[0]\">{{ element.label?.value\r\n ?\r\n element.label?.value : element.label?.caption ?\r\n element.label?.caption :\r\n itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()]?.caption\r\n }}</label>\r\n\r\n <nz-date-picker [required]=\"element.option.required\" [name]=\"element.scope?.reference\"\r\n [nzDisabled]=\"element?.option?.disabled\"\r\n (ngModelChange)=\"dateChangeEvent(element, $event)\"\r\n [nzFormat]=\"itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()]?.format ? itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()]?.format : 'yyyy-MM-dd'\"\r\n [(ngModel)]=\"itemInfo.propertySchema[getScope(element.scope?.reference)][element.scope?.reference.split('/').pop()].value\"\r\n [style]=\"getStyleWithoutClasses(element?.style).style\"></nz-date-picker>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <!-- Button Control -->\r\n <div *ngSwitchCase=\"'default'\" [class]=\"element.option?.visible ? 'row' : 'hidden'\"\r\n (click)=\"invokeOnCardFooter(element)\">\r\n <button nz-button [style]=\"getStyleWithoutClasses(element.style).style\"\r\n [class]=\"element.option.protected ? 'disabled-button' : getStyleWithoutClasses(element.style).classes\">\r\n <ng-container *ngIf=\"!element.caption; else textContent\">\r\n <i nz-icon [nzType]=\"element.icon\" nzTheme=\"outline\"></i>\r\n </ng-container>\r\n <ng-template #textContent>\r\n {{ element.caption }}\r\n </ng-template>\r\n </button>\r\n </div>\r\n </ng-container>\r\n </span>\r\n </div>\r\n <!-- bottom pagination on card -->\r\n <div *ngIf=\"itemInfo?.layoutSchema?.pagination && itemInfo?.layoutSchema?.pagination?.bottom\">\r\n <vl-pagination [itemInfo]=\"itemInfo\" [pageSize]=\"pageSize\" [currentPage]=\"currentPage\" [pages]=\"pages\"\r\n (pageSizeChange)=\"invokeOnPageSizeChange($event)\" (onGoToPage)=\"invokeGoToPage($event)\">\r\n </vl-pagination>\r\n </div>\r\n</span>" }]
|
|
1201
1198
|
}], ctorParameters: () => [{ type: UtilityService }, { type: i1.Platform }, { type: i1$1.HttpClient }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i4.NzModalService }, { type: i5$1.OAuthService }, { type: RequestService }], propDecorators: { itemInfo: [{
|
|
1202
1199
|
type: Input
|
|
1203
1200
|
}], currentPage: [{
|
|
@@ -1696,6 +1693,7 @@ class HeaderMenuComponent {
|
|
|
1696
1693
|
platform;
|
|
1697
1694
|
isLogined = false;
|
|
1698
1695
|
headerItems = [];
|
|
1696
|
+
headerLayout = {};
|
|
1699
1697
|
environment;
|
|
1700
1698
|
projectSeleted;
|
|
1701
1699
|
cartInfo = {
|
|
@@ -1718,7 +1716,7 @@ class HeaderMenuComponent {
|
|
|
1718
1716
|
if (this.platform.ANDROID || this.platform.IOS) {
|
|
1719
1717
|
this.utilityService.getLocalStorage(`loginedUser`).then((logined) => {
|
|
1720
1718
|
if (logined && logined.token) {
|
|
1721
|
-
this.requestService.getLoginUser(logined?.token).subscribe((
|
|
1719
|
+
this.requestService.getLoginUser(logined?.token).subscribe(() => {
|
|
1722
1720
|
this.isLogined = true;
|
|
1723
1721
|
});
|
|
1724
1722
|
}
|
|
@@ -1732,6 +1730,28 @@ class HeaderMenuComponent {
|
|
|
1732
1730
|
}
|
|
1733
1731
|
}, 500);
|
|
1734
1732
|
}
|
|
1733
|
+
getStyle(styleObject) {
|
|
1734
|
+
if (!styleObject || typeof styleObject !== 'object') {
|
|
1735
|
+
return {};
|
|
1736
|
+
}
|
|
1737
|
+
const { classes, ...styleWithoutClasses } = styleObject;
|
|
1738
|
+
return styleWithoutClasses;
|
|
1739
|
+
}
|
|
1740
|
+
isVisible(header) {
|
|
1741
|
+
return header?.option?.visible !== false;
|
|
1742
|
+
}
|
|
1743
|
+
shouldShowDefaultButton(header) {
|
|
1744
|
+
if (!this.isVisible(header)) {
|
|
1745
|
+
return false;
|
|
1746
|
+
}
|
|
1747
|
+
if (header?.option?.islogin === true) {
|
|
1748
|
+
return this.isLogined;
|
|
1749
|
+
}
|
|
1750
|
+
if (header?.option?.islogin === false) {
|
|
1751
|
+
return !this.isLogined;
|
|
1752
|
+
}
|
|
1753
|
+
return true;
|
|
1754
|
+
}
|
|
1735
1755
|
invokeSearchedItems(option, search) {
|
|
1736
1756
|
this.searchItems.emit({ option: option, search: search });
|
|
1737
1757
|
}
|
|
@@ -1742,16 +1762,18 @@ class HeaderMenuComponent {
|
|
|
1742
1762
|
this.showTableContent.emit(option);
|
|
1743
1763
|
}
|
|
1744
1764
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HeaderMenuComponent, deps: [{ token: i4$1.OktaAuthStateService }, { token: RequestService }, { token: UtilityService }, { token: i1.Platform }], target: i0.ɵɵFactoryTarget.Component });
|
|
1745
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: HeaderMenuComponent, isStandalone: true, selector: "vl-header-menu", inputs: { headerItems: "headerItems", environment: "environment", projectSeleted: "projectSeleted", cartInfo: "cartInfo" }, outputs: { buttonClick: "buttonClick", showTableContent: "showTableContent", searchItems: "searchItems" }, ngImport: i0, template: "<header
|
|
1765
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: HeaderMenuComponent, isStandalone: true, selector: "vl-header-menu", inputs: { headerItems: "headerItems", headerLayout: "headerLayout", environment: "environment", projectSeleted: "projectSeleted", cartInfo: "cartInfo" }, outputs: { buttonClick: "buttonClick", showTableContent: "showTableContent", searchItems: "searchItems" }, ngImport: i0, template: "<header *ngIf=\"headerItems.length > 0\" [ngStyle]=\"getStyle(headerLayout?.style)\">\r\n\r\n <ng-container *ngFor=\"let header of headerItems\"\r\n [ngSwitch]=\"header.scope?.reference ? header.scope?.reference.split('/').pop() : 'default'\">\r\n\r\n <!-- Logo -->\r\n <ng-container *ngSwitchCase=\"'logo'\">\r\n <div *ngIf=\"isVisible(header)\" [ngStyle]=\"getStyle(header?.option?.style)\">\r\n\r\n <img [src]=\"header.option.src\" [alt]=\"header.alt || 'Logo'\"\r\n [ngStyle]=\"getStyle(header?.scope?.style)\" />\r\n </div>\r\n </ng-container>\r\n\r\n <!-- Search -->\r\n <ng-container *ngSwitchCase=\"'searchInput'\">\r\n <div *ngIf=\"isVisible(header)\" [ngStyle]=\"getStyle(header?.option?.style)\">\r\n\r\n <input #search type=\"text\" [placeholder]=\"header.option.placeholder\"\r\n (keyup.enter)=\"invokeSearchedItems(header.option, search)\"\r\n [ngStyle]=\"getStyle(header?.scope?.style)\" />\r\n\r\n <button *ngIf=\"header.option.button !== false\" type=\"button\"\r\n (click)=\"invokeSearchedItems(header.option, search)\" [ngStyle]=\"getStyle(header?.buttonStyle)\">\r\n <ng-container *ngIf=\"!header.caption; else searchTextContent\">\r\n <i nz-icon [nzType]=\"header.icon\" nzTheme=\"outline\"></i>\r\n </ng-container>\r\n\r\n <ng-template #searchTextContent>\r\n {{ header.caption }}\r\n </ng-template>\r\n </button>\r\n </div>\r\n </ng-container>\r\n\r\n <!-- Cart -->\r\n <ng-container *ngSwitchCase=\"'cart'\">\r\n <div *ngIf=\"isVisible(header)\" [ngStyle]=\"getStyle(header?.option?.style)\"\r\n (click)=\"invokeShowtableContent(header.option)\">\r\n\r\n <span [ngStyle]=\"getStyle(header?.priceStyle)\">\r\n {{ cartInfo.totalPrice | currency : header.option?.currency ? header.option.currency : 'USD' }}\r\n </span>\r\n\r\n <span [ngStyle]=\"getStyle(header?.quantityStyle)\">\r\n {{ cartInfo.quantity }}\r\n </span>\r\n\r\n <i [class]=\"header.icon\" [ngStyle]=\"getStyle(header?.iconStyle)\">\r\n </i>\r\n </div>\r\n </ng-container>\r\n\r\n <!-- Default Button -->\r\n <ng-container *ngSwitchCase=\"'default'\">\r\n <div *ngIf=\"shouldShowDefaultButton(header)\" [ngStyle]=\"getStyle(header?.option?.style)\">\r\n\r\n <button type=\"button\" (click)=\"invokeHeaderButtonClick(header.option)\"\r\n [ngStyle]=\"getStyle(header?.buttonStyle)\">\r\n <ng-container *ngIf=\"!header.label; else buttonTextContent\">\r\n <i nz-icon [nzType]=\"header.icon\" nzTheme=\"outline\"></i>\r\n </ng-container>\r\n\r\n <ng-template #buttonTextContent>\r\n {{ header.label }}\r\n </ng-template>\r\n </button>\r\n </div>\r\n </ng-container>\r\n\r\n </ng-container>\r\n</header>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i9.NzIconDirective, selector: "nz-icon,[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }, { kind: "pipe", type: i5.CurrencyPipe, name: "currency" }] });
|
|
1746
1766
|
}
|
|
1747
1767
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: HeaderMenuComponent, decorators: [{
|
|
1748
1768
|
type: Component,
|
|
1749
1769
|
args: [{ standalone: true, imports: [
|
|
1750
1770
|
CommonModule,
|
|
1751
1771
|
NzIconModule
|
|
1752
|
-
], selector: 'vl-header-menu', template: "<header
|
|
1772
|
+
], selector: 'vl-header-menu', template: "<header *ngIf=\"headerItems.length > 0\" [ngStyle]=\"getStyle(headerLayout?.style)\">\r\n\r\n <ng-container *ngFor=\"let header of headerItems\"\r\n [ngSwitch]=\"header.scope?.reference ? header.scope?.reference.split('/').pop() : 'default'\">\r\n\r\n <!-- Logo -->\r\n <ng-container *ngSwitchCase=\"'logo'\">\r\n <div *ngIf=\"isVisible(header)\" [ngStyle]=\"getStyle(header?.option?.style)\">\r\n\r\n <img [src]=\"header.option.src\" [alt]=\"header.alt || 'Logo'\"\r\n [ngStyle]=\"getStyle(header?.scope?.style)\" />\r\n </div>\r\n </ng-container>\r\n\r\n <!-- Search -->\r\n <ng-container *ngSwitchCase=\"'searchInput'\">\r\n <div *ngIf=\"isVisible(header)\" [ngStyle]=\"getStyle(header?.option?.style)\">\r\n\r\n <input #search type=\"text\" [placeholder]=\"header.option.placeholder\"\r\n (keyup.enter)=\"invokeSearchedItems(header.option, search)\"\r\n [ngStyle]=\"getStyle(header?.scope?.style)\" />\r\n\r\n <button *ngIf=\"header.option.button !== false\" type=\"button\"\r\n (click)=\"invokeSearchedItems(header.option, search)\" [ngStyle]=\"getStyle(header?.buttonStyle)\">\r\n <ng-container *ngIf=\"!header.caption; else searchTextContent\">\r\n <i nz-icon [nzType]=\"header.icon\" nzTheme=\"outline\"></i>\r\n </ng-container>\r\n\r\n <ng-template #searchTextContent>\r\n {{ header.caption }}\r\n </ng-template>\r\n </button>\r\n </div>\r\n </ng-container>\r\n\r\n <!-- Cart -->\r\n <ng-container *ngSwitchCase=\"'cart'\">\r\n <div *ngIf=\"isVisible(header)\" [ngStyle]=\"getStyle(header?.option?.style)\"\r\n (click)=\"invokeShowtableContent(header.option)\">\r\n\r\n <span [ngStyle]=\"getStyle(header?.priceStyle)\">\r\n {{ cartInfo.totalPrice | currency : header.option?.currency ? header.option.currency : 'USD' }}\r\n </span>\r\n\r\n <span [ngStyle]=\"getStyle(header?.quantityStyle)\">\r\n {{ cartInfo.quantity }}\r\n </span>\r\n\r\n <i [class]=\"header.icon\" [ngStyle]=\"getStyle(header?.iconStyle)\">\r\n </i>\r\n </div>\r\n </ng-container>\r\n\r\n <!-- Default Button -->\r\n <ng-container *ngSwitchCase=\"'default'\">\r\n <div *ngIf=\"shouldShowDefaultButton(header)\" [ngStyle]=\"getStyle(header?.option?.style)\">\r\n\r\n <button type=\"button\" (click)=\"invokeHeaderButtonClick(header.option)\"\r\n [ngStyle]=\"getStyle(header?.buttonStyle)\">\r\n <ng-container *ngIf=\"!header.label; else buttonTextContent\">\r\n <i nz-icon [nzType]=\"header.icon\" nzTheme=\"outline\"></i>\r\n </ng-container>\r\n\r\n <ng-template #buttonTextContent>\r\n {{ header.label }}\r\n </ng-template>\r\n </button>\r\n </div>\r\n </ng-container>\r\n\r\n </ng-container>\r\n</header>" }]
|
|
1753
1773
|
}], ctorParameters: () => [{ type: i4$1.OktaAuthStateService }, { type: RequestService }, { type: UtilityService }, { type: i1.Platform }], propDecorators: { headerItems: [{
|
|
1754
1774
|
type: Input
|
|
1775
|
+
}], headerLayout: [{
|
|
1776
|
+
type: Input
|
|
1755
1777
|
}], environment: [{
|
|
1756
1778
|
type: Input
|
|
1757
1779
|
}], projectSeleted: [{
|