barsa-sap-ui 2.0.129 → 2.0.130
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.
- package/esm2022/lib/barsa-table-column/barsa-table-column.component.mjs +5 -3
- package/esm2022/lib/barsa-table-row/barsa-table-row.component.mjs +1 -1
- package/esm2022/lib/card-item/card-item.component.mjs +3 -3
- package/esm2022/lib/column-renderer/column-renderer.component.mjs +5 -3
- package/esm2022/lib/layout-wizard/layout-wizard.component.mjs +10 -3
- package/esm2022/lib/list-item/list-item.component.mjs +1 -1
- package/fesm2022/barsa-sap-ui.mjs +21 -10
- package/fesm2022/barsa-sap-ui.mjs.map +1 -1
- package/lib/barsa-table-column/barsa-table-column.component.d.ts +2 -1
- package/lib/column-renderer/column-renderer.component.d.ts +2 -1
- package/lib/layout-wizard/layout-wizard.component.d.ts +1 -0
- package/package.json +1 -1
|
@@ -4735,11 +4735,11 @@ class ColumnRendererComponent extends BaseComponent {
|
|
|
4735
4735
|
this._cdr.detectChanges();
|
|
4736
4736
|
}
|
|
4737
4737
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: ColumnRendererComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4738
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: ColumnRendererComponent, selector: "bsu-column-renderer,[colRenderer]", inputs: { column: "column", mo: "mo", index: "index", editMode: "editMode", customRowHeight: "customRowHeight", controlUi: "controlUi", formLayoutShowLabel: "formLayoutShowLabel", isChecked: "isChecked", isNewInlineMo: "isNewInlineMo", containerDom: "containerDom", disableEllapsis: "disableEllapsis", rtl: "rtl", isMobile: "isMobile", deviceName: "deviceName", deviceSize: "deviceSize", value: "value", icon: "icon" }, host: { properties: { "class.isMobile": "this._isSmall" } }, usesInheritance: true, ngImport: i0, template: "@if (column) {\n<ng-container *ngTemplateOutlet=\"editMode ? formControlTemplate : renderCellTemplate\"> </ng-container>\n}\n<ng-template #renderCellTemplate>\n @switch (column.FieldTypeId) { @case (42) {\n <ng-container *ngTemplateOutlet=\"renderCellImage\"></ng-container>\n } @case (33) {\n <ng-container *ngTemplateOutlet=\"renderCellFileInfo\"></ng-container>\n } @case (31) {\n <ng-container *ngTemplateOutlet=\"renderCellFileListKhati\"></ng-container>\n } @case (11) {\n <ng-container *ngTemplateOutlet=\"renderCellListTasavir\"></ng-container>\n } @case (5) {\n <ng-container\n *ngTemplateOutlet=\"column.Extra?.ShowCheckInGrid ? renderCellChecbox : renderChecboxImage\"\n ></ng-container>\n } @default {\n <ng-container *ngTemplateOutlet=\"renderGeneral\"></ng-container>\n } }\n</ng-template>\n<ng-template #renderGeneral>\n <div class=\"renderGeneral\" [class.onlyIcon]=\"column.Extra?.IconDisplayTypeEnum === 'Image'\" [style.width]=\"\">\n @if (icon) {\n <img [attr.rtl]=\"rtl\" [src]=\"icon\" />\n }\n <!-- <fd-text\n #fdText\n *ngIf=\"column.Extra?.IconDisplayTypeEnum !== 'Image'\"\n [maxLines]=\"1\"\n [text]=\"value\"\n [fd-inline-help]=\"value\"\n [disabled]=\"!fdText._hasMore\"\n ></fd-text> -->\n\n <!-- <bsu-barsa-text-ellipsis\n [style.width]=\"column.$Width\"\n *ngIf=\"column.Extra?.IconDisplayTypeEnum !== 'Image'\"\n [text]=\"value\"\n></bsu-barsa-text-ellipsis> -->\n <!-- <div *ngIf=\"column.Extra?.IconDisplayTypeEnum !== 'Image'\" style=\"word-break:break-word\">\n{{ value }}\n</div> -->\n @if (column.Extra?.IconDisplayTypeEnum !== 'Image') { @if(!isMobile){\n <div\n [ellapsisText]=\"value\"\n [disableEllapsis]=\"editMode\"\n [class.ellapsis]=\"!disableEllapsis\"\n [attr.title]=\"value\"\n (ellapsised)=\"onElapsised($event)\"\n >\n {{ value }}\n </div>\n } @else{\n <fd-text class=\"col-value\" [text]=\"value\" [maxLines]=\"2\"></fd-text>\n } }\n </div>\n</ng-template>\n<ng-template #formControlTemplate>\n <ng-container\n *ngTemplateOutlet=\"\n !controlUi || controlUi.FieldUi.originalXtype === 'Ui.ReadOnlyField'\n ? renderCellTemplate\n : layoutControlTemplate\n \"\n ></ng-container>\n</ng-template>\n<ng-template #layoutControlTemplate>\n @if (controlUi) {\n <bsu-layout-control\n [inlineEdit]=\"true\"\n [caption]=\"column.Caption\"\n [config]=\"controlUi\"\n [focusControl]=\"index === 0 && (isChecked || isNewInlineMo)\"\n [showLabel]=\"formLayoutShowLabel\"\n ></bsu-layout-control>\n }\n</ng-template>\n<ng-template #renderCellListTasavir>\n @if (mo[column.Name] && mo[column.Name].Images) {\n <div style=\"display: flex; flex-wrap: wrap; gap: 0.15rem\">\n @for (pic of mo[column.Name].Images; track pic) {\n <img\n fullscreen\n fullscreenFiles\n [files]=\"mo[column.Name].Images\"\n [isImageGallery]=\"true\"\n [deviceSize]=\"deviceSize\"\n [src]=\"pic.FileId | picFieldSrc: 'BarsaPicture.Thumbnail':null:'':32:32\"\n style=\"width: 3rem; height: 3rem\"\n />\n }\n </div>\n }\n</ng-template>\n<ng-template #renderCellFileListKhati>\n @if (mo[column.Name]) {\n <div class=\"file-viewer-attachments\">\n @for (file of mo[column.Name].Files; track file) { @if (!file.IsDeleted) {\n <bsu-file-viewer-popover\n [style.max-width.px]=\"containerDom && containerDom.offsetWidth ? containerDom.offsetWidth : null\"\n [file]=\"file\"\n [files]=\"mo[column.Name].Files\"\n [deviceSize]=\"deviceSize\"\n [canDownload]=\"true\"\n [disableRemove]=\"true\"\n [fdType]=\"'transparent'\"\n ></bsu-file-viewer-popover>\n }\n <!-- <fd-token *ngIf=\"!file.IsDeleted\" [readOnly]=\"true\">{{ file.FileName }}</fd-token> -->\n }\n </div>\n }\n</ng-template>\n<ng-template #renderCellFileInfo>\n @if (mo[column.Name]) {\n <fd-avatar\n [transparent]=\"true\"\n [size]=\"column.FieldTypeId === '42' || column.FieldTypeId === 42 ? 'xs' : deviceSize === 's' ? 's' : 'm'\"\n [image]=\"mo[column.Name] | picFieldSrc: 'PictureFileInfo':null:column.FieldDefId\"\n ></fd-avatar>\n }\n</ng-template>\n<ng-template #renderCellChecbox>\n <fd-icon [glyph]=\"mo[column.Name] === true ? 'accept' : 'less'\"></fd-icon>\n</ng-template>\n<ng-template #renderChecboxImage>\n @if (column.Extra?.TrueImage === '') {\n {{ value }}\n } @if (column.Extra?.TrueImage !== '') {\n <img [src]=\"mo[column.Name] ? column.Extra?.TrueImage : column.Extra?.FalseImage\" aling=\"middle\" />\n }\n</ng-template>\n<ng-template #renderCellImage>\n @if (mo[column.Name] && mo[column.Name]['Url']) {\n <fd-avatar\n [size]=\"column.FieldTypeId === '42' || column.FieldTypeId === 42 ? 'xs' : deviceSize === 's' ? 's' : 'm'\"\n [transparent]=\"true\"\n [image]=\"mo[column.Name]['Url']\"\n ></fd-avatar>\n }\n</ng-template>\n", styles: [":host{display:contents;overflow:hidden;padding:0}:host.isMobile span{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;white-space:pre-wrap}fd-avatar{min-width:100%;width:100%;max-width:64px}.renderGeneral{display:flex;width:100%;height:100%;align-items:center;justify-content:start}.renderGeneral.onlyIcon{justify-content:center}fd-text.col-value ::ng-deep p{color:inherit}\n"], dependencies: [{ kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.EllapsisTextDirective, selector: "[ellapsisText]", inputs: ["ellapsisText", "fontSize", "disableEllapsis"], outputs: ["ellapsised"] }, { kind: "component", type: i3$5.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "font", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "random", "clickable", "valueState", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i6.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "component", type: i5$3.TextComponent, selector: "fd-text", inputs: ["text", "maxLines", "whitespaces", "hyphenation", "expandable", "isCollapsed"], outputs: ["isCollapsedChange"] }, { kind: "component", type: LayoutControlComponent, selector: "bsu-layout-control", inputs: ["inlineEdit", "caption", "focusControl", "showLabel", "maxLabelWidth", "hasHorizontalText", "contentDensity", "flex", "RefreshLabel", "SetVisible"], outputs: ["events"] }, { kind: "component", type: FileViewerPopoverComponent, selector: "bsu-file-viewer-popover", inputs: ["files", "file", "deviceSize", "canDownload", "disableRemove", "fdType"], outputs: ["remove"] }, { kind: "directive", type: FullscreenFilesDirective, selector: "[fullscreenFiles]", inputs: ["files", "title", "deviceSize", "isImageGallery", "component"] }, { kind: "pipe", type: i2.PictureFieldSourcePipe, name: "picFieldSrc" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4738
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: ColumnRendererComponent, selector: "bsu-column-renderer,[colRenderer]", inputs: { column: "column", mo: "mo", index: "index", editMode: "editMode", customRowHeight: "customRowHeight", controlUi: "controlUi", formLayoutShowLabel: "formLayoutShowLabel", isChecked: "isChecked", isNewInlineMo: "isNewInlineMo", containerDom: "containerDom", disableEllapsis: "disableEllapsis", rtl: "rtl", isMobile: "isMobile", fdTextMode: "fdTextMode", deviceName: "deviceName", deviceSize: "deviceSize", value: "value", icon: "icon" }, host: { properties: { "class.isMobile": "this._isSmall" } }, usesInheritance: true, ngImport: i0, template: "@if (column) {\n<ng-container *ngTemplateOutlet=\"editMode ? formControlTemplate : renderCellTemplate\"> </ng-container>\n}\n<ng-template #renderCellTemplate>\n @switch (column.FieldTypeId) { @case (42) {\n <ng-container *ngTemplateOutlet=\"renderCellImage\"></ng-container>\n } @case (33) {\n <ng-container *ngTemplateOutlet=\"renderCellFileInfo\"></ng-container>\n } @case (31) {\n <ng-container *ngTemplateOutlet=\"renderCellFileListKhati\"></ng-container>\n } @case (11) {\n <ng-container *ngTemplateOutlet=\"renderCellListTasavir\"></ng-container>\n } @case (5) {\n <ng-container\n *ngTemplateOutlet=\"column.Extra?.ShowCheckInGrid ? renderCellChecbox : renderChecboxImage\"\n ></ng-container>\n } @default {\n <ng-container *ngTemplateOutlet=\"renderGeneral\"></ng-container>\n } }\n</ng-template>\n<ng-template #renderGeneral>\n <div class=\"renderGeneral\" [class.onlyIcon]=\"column.Extra?.IconDisplayTypeEnum === 'Image'\" [style.width]=\"\">\n @if (icon) {\n <img [attr.rtl]=\"rtl\" [src]=\"icon\" />\n }\n <!-- <fd-text\n #fdText\n *ngIf=\"column.Extra?.IconDisplayTypeEnum !== 'Image'\"\n [maxLines]=\"1\"\n [text]=\"value\"\n [fd-inline-help]=\"value\"\n [disabled]=\"!fdText._hasMore\"\n ></fd-text> -->\n\n <!-- <bsu-barsa-text-ellipsis\n [style.width]=\"column.$Width\"\n *ngIf=\"column.Extra?.IconDisplayTypeEnum !== 'Image'\"\n [text]=\"value\"\n></bsu-barsa-text-ellipsis> -->\n <!-- <div *ngIf=\"column.Extra?.IconDisplayTypeEnum !== 'Image'\" style=\"word-break:break-word\">\n{{ value }}\n</div> -->\n @if (column.Extra?.IconDisplayTypeEnum !== 'Image') { @if(!isMobile && !fdTextMode){\n <div\n [ellapsisText]=\"value\"\n [disableEllapsis]=\"editMode\"\n [class.ellapsis]=\"!disableEllapsis\"\n [attr.title]=\"value\"\n (ellapsised)=\"onElapsised($event)\"\n >\n {{ value }}\n </div>\n } @else{\n <fd-text [attr.title]=\"value\" class=\"col-value\" [text]=\"value\" [maxLines]=\"2\"></fd-text>\n } }\n </div>\n</ng-template>\n<ng-template #formControlTemplate>\n <ng-container\n *ngTemplateOutlet=\"\n !controlUi || controlUi.FieldUi.originalXtype === 'Ui.ReadOnlyField'\n ? renderCellTemplate\n : layoutControlTemplate\n \"\n ></ng-container>\n</ng-template>\n<ng-template #layoutControlTemplate>\n @if (controlUi) {\n <bsu-layout-control\n [inlineEdit]=\"true\"\n [caption]=\"column.Caption\"\n [config]=\"controlUi\"\n [focusControl]=\"index === 0 && (isChecked || isNewInlineMo)\"\n [showLabel]=\"formLayoutShowLabel\"\n ></bsu-layout-control>\n }\n</ng-template>\n<ng-template #renderCellListTasavir>\n @if (mo[column.Name] && mo[column.Name].Images) {\n <div style=\"display: flex; flex-wrap: wrap; gap: 0.15rem\">\n @for (pic of mo[column.Name].Images; track pic) {\n <img\n fullscreen\n fullscreenFiles\n [files]=\"mo[column.Name].Images\"\n [isImageGallery]=\"true\"\n [deviceSize]=\"deviceSize\"\n [src]=\"pic.FileId | picFieldSrc: 'BarsaPicture.Thumbnail':null:'':32:32\"\n style=\"width: 3rem; height: 3rem\"\n />\n }\n </div>\n }\n</ng-template>\n<ng-template #renderCellFileListKhati>\n @if (mo[column.Name]) {\n <div class=\"file-viewer-attachments\">\n @for (file of mo[column.Name].Files; track file) { @if (!file.IsDeleted) {\n <bsu-file-viewer-popover\n [style.max-width.px]=\"containerDom && containerDom.offsetWidth ? containerDom.offsetWidth : null\"\n [file]=\"file\"\n [files]=\"mo[column.Name].Files\"\n [deviceSize]=\"deviceSize\"\n [canDownload]=\"true\"\n [disableRemove]=\"true\"\n [fdType]=\"'transparent'\"\n ></bsu-file-viewer-popover>\n }\n <!-- <fd-token *ngIf=\"!file.IsDeleted\" [readOnly]=\"true\">{{ file.FileName }}</fd-token> -->\n }\n </div>\n }\n</ng-template>\n<ng-template #renderCellFileInfo>\n @if (mo[column.Name]) {\n <fd-avatar\n [transparent]=\"true\"\n [size]=\"column.FieldTypeId === '42' || column.FieldTypeId === 42 ? 'xs' : deviceSize === 's' ? 's' : 'm'\"\n [image]=\"mo[column.Name] | picFieldSrc: 'PictureFileInfo':null:column.FieldDefId\"\n ></fd-avatar>\n }\n</ng-template>\n<ng-template #renderCellChecbox>\n <fd-icon [glyph]=\"mo[column.Name] === true ? 'accept' : 'less'\"></fd-icon>\n</ng-template>\n<ng-template #renderChecboxImage>\n @if (column.Extra?.TrueImage === '') {\n {{ value }}\n } @if (column.Extra?.TrueImage !== '') {\n <img [src]=\"mo[column.Name] ? column.Extra?.TrueImage : column.Extra?.FalseImage\" aling=\"middle\" />\n }\n</ng-template>\n<ng-template #renderCellImage>\n @if (mo[column.Name] && mo[column.Name]['Url']) {\n <fd-avatar\n [size]=\"column.FieldTypeId === '42' || column.FieldTypeId === 42 ? 'xs' : deviceSize === 's' ? 's' : 'm'\"\n [transparent]=\"true\"\n [image]=\"mo[column.Name]['Url']\"\n ></fd-avatar>\n }\n</ng-template>\n", styles: [":host{display:contents;overflow:hidden;padding:0}:host.isMobile span{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;white-space:pre-wrap}fd-avatar{min-width:100%;width:100%;max-width:64px}.renderGeneral{display:flex;width:100%;height:100%;align-items:center;justify-content:start}.renderGeneral.onlyIcon{justify-content:center}fd-text.col-value ::ng-deep p{color:inherit;font-size:inherit;font-family:inherit}\n"], dependencies: [{ kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.EllapsisTextDirective, selector: "[ellapsisText]", inputs: ["ellapsisText", "fontSize", "disableEllapsis"], outputs: ["ellapsised"] }, { kind: "component", type: i3$5.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "font", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "random", "clickable", "valueState", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i6.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "component", type: i5$3.TextComponent, selector: "fd-text", inputs: ["text", "maxLines", "whitespaces", "hyphenation", "expandable", "isCollapsed"], outputs: ["isCollapsedChange"] }, { kind: "component", type: LayoutControlComponent, selector: "bsu-layout-control", inputs: ["inlineEdit", "caption", "focusControl", "showLabel", "maxLabelWidth", "hasHorizontalText", "contentDensity", "flex", "RefreshLabel", "SetVisible"], outputs: ["events"] }, { kind: "component", type: FileViewerPopoverComponent, selector: "bsu-file-viewer-popover", inputs: ["files", "file", "deviceSize", "canDownload", "disableRemove", "fdType"], outputs: ["remove"] }, { kind: "directive", type: FullscreenFilesDirective, selector: "[fullscreenFiles]", inputs: ["files", "title", "deviceSize", "isImageGallery", "component"] }, { kind: "pipe", type: i2.PictureFieldSourcePipe, name: "picFieldSrc" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4739
4739
|
}
|
|
4740
4740
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: ColumnRendererComponent, decorators: [{
|
|
4741
4741
|
type: Component,
|
|
4742
|
-
args: [{ selector: 'bsu-column-renderer,[colRenderer]', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (column) {\n<ng-container *ngTemplateOutlet=\"editMode ? formControlTemplate : renderCellTemplate\"> </ng-container>\n}\n<ng-template #renderCellTemplate>\n @switch (column.FieldTypeId) { @case (42) {\n <ng-container *ngTemplateOutlet=\"renderCellImage\"></ng-container>\n } @case (33) {\n <ng-container *ngTemplateOutlet=\"renderCellFileInfo\"></ng-container>\n } @case (31) {\n <ng-container *ngTemplateOutlet=\"renderCellFileListKhati\"></ng-container>\n } @case (11) {\n <ng-container *ngTemplateOutlet=\"renderCellListTasavir\"></ng-container>\n } @case (5) {\n <ng-container\n *ngTemplateOutlet=\"column.Extra?.ShowCheckInGrid ? renderCellChecbox : renderChecboxImage\"\n ></ng-container>\n } @default {\n <ng-container *ngTemplateOutlet=\"renderGeneral\"></ng-container>\n } }\n</ng-template>\n<ng-template #renderGeneral>\n <div class=\"renderGeneral\" [class.onlyIcon]=\"column.Extra?.IconDisplayTypeEnum === 'Image'\" [style.width]=\"\">\n @if (icon) {\n <img [attr.rtl]=\"rtl\" [src]=\"icon\" />\n }\n <!-- <fd-text\n #fdText\n *ngIf=\"column.Extra?.IconDisplayTypeEnum !== 'Image'\"\n [maxLines]=\"1\"\n [text]=\"value\"\n [fd-inline-help]=\"value\"\n [disabled]=\"!fdText._hasMore\"\n ></fd-text> -->\n\n <!-- <bsu-barsa-text-ellipsis\n [style.width]=\"column.$Width\"\n *ngIf=\"column.Extra?.IconDisplayTypeEnum !== 'Image'\"\n [text]=\"value\"\n></bsu-barsa-text-ellipsis> -->\n <!-- <div *ngIf=\"column.Extra?.IconDisplayTypeEnum !== 'Image'\" style=\"word-break:break-word\">\n{{ value }}\n</div> -->\n @if (column.Extra?.IconDisplayTypeEnum !== 'Image') { @if(!isMobile){\n <div\n [ellapsisText]=\"value\"\n [disableEllapsis]=\"editMode\"\n [class.ellapsis]=\"!disableEllapsis\"\n [attr.title]=\"value\"\n (ellapsised)=\"onElapsised($event)\"\n >\n {{ value }}\n </div>\n } @else{\n <fd-text class=\"col-value\" [text]=\"value\" [maxLines]=\"2\"></fd-text>\n } }\n </div>\n</ng-template>\n<ng-template #formControlTemplate>\n <ng-container\n *ngTemplateOutlet=\"\n !controlUi || controlUi.FieldUi.originalXtype === 'Ui.ReadOnlyField'\n ? renderCellTemplate\n : layoutControlTemplate\n \"\n ></ng-container>\n</ng-template>\n<ng-template #layoutControlTemplate>\n @if (controlUi) {\n <bsu-layout-control\n [inlineEdit]=\"true\"\n [caption]=\"column.Caption\"\n [config]=\"controlUi\"\n [focusControl]=\"index === 0 && (isChecked || isNewInlineMo)\"\n [showLabel]=\"formLayoutShowLabel\"\n ></bsu-layout-control>\n }\n</ng-template>\n<ng-template #renderCellListTasavir>\n @if (mo[column.Name] && mo[column.Name].Images) {\n <div style=\"display: flex; flex-wrap: wrap; gap: 0.15rem\">\n @for (pic of mo[column.Name].Images; track pic) {\n <img\n fullscreen\n fullscreenFiles\n [files]=\"mo[column.Name].Images\"\n [isImageGallery]=\"true\"\n [deviceSize]=\"deviceSize\"\n [src]=\"pic.FileId | picFieldSrc: 'BarsaPicture.Thumbnail':null:'':32:32\"\n style=\"width: 3rem; height: 3rem\"\n />\n }\n </div>\n }\n</ng-template>\n<ng-template #renderCellFileListKhati>\n @if (mo[column.Name]) {\n <div class=\"file-viewer-attachments\">\n @for (file of mo[column.Name].Files; track file) { @if (!file.IsDeleted) {\n <bsu-file-viewer-popover\n [style.max-width.px]=\"containerDom && containerDom.offsetWidth ? containerDom.offsetWidth : null\"\n [file]=\"file\"\n [files]=\"mo[column.Name].Files\"\n [deviceSize]=\"deviceSize\"\n [canDownload]=\"true\"\n [disableRemove]=\"true\"\n [fdType]=\"'transparent'\"\n ></bsu-file-viewer-popover>\n }\n <!-- <fd-token *ngIf=\"!file.IsDeleted\" [readOnly]=\"true\">{{ file.FileName }}</fd-token> -->\n }\n </div>\n }\n</ng-template>\n<ng-template #renderCellFileInfo>\n @if (mo[column.Name]) {\n <fd-avatar\n [transparent]=\"true\"\n [size]=\"column.FieldTypeId === '42' || column.FieldTypeId === 42 ? 'xs' : deviceSize === 's' ? 's' : 'm'\"\n [image]=\"mo[column.Name] | picFieldSrc: 'PictureFileInfo':null:column.FieldDefId\"\n ></fd-avatar>\n }\n</ng-template>\n<ng-template #renderCellChecbox>\n <fd-icon [glyph]=\"mo[column.Name] === true ? 'accept' : 'less'\"></fd-icon>\n</ng-template>\n<ng-template #renderChecboxImage>\n @if (column.Extra?.TrueImage === '') {\n {{ value }}\n } @if (column.Extra?.TrueImage !== '') {\n <img [src]=\"mo[column.Name] ? column.Extra?.TrueImage : column.Extra?.FalseImage\" aling=\"middle\" />\n }\n</ng-template>\n<ng-template #renderCellImage>\n @if (mo[column.Name] && mo[column.Name]['Url']) {\n <fd-avatar\n [size]=\"column.FieldTypeId === '42' || column.FieldTypeId === 42 ? 'xs' : deviceSize === 's' ? 's' : 'm'\"\n [transparent]=\"true\"\n [image]=\"mo[column.Name]['Url']\"\n ></fd-avatar>\n }\n</ng-template>\n", styles: [":host{display:contents;overflow:hidden;padding:0}:host.isMobile span{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;white-space:pre-wrap}fd-avatar{min-width:100%;width:100%;max-width:64px}.renderGeneral{display:flex;width:100%;height:100%;align-items:center;justify-content:start}.renderGeneral.onlyIcon{justify-content:center}fd-text.col-value ::ng-deep p{color:inherit}\n"] }]
|
|
4742
|
+
args: [{ selector: 'bsu-column-renderer,[colRenderer]', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (column) {\n<ng-container *ngTemplateOutlet=\"editMode ? formControlTemplate : renderCellTemplate\"> </ng-container>\n}\n<ng-template #renderCellTemplate>\n @switch (column.FieldTypeId) { @case (42) {\n <ng-container *ngTemplateOutlet=\"renderCellImage\"></ng-container>\n } @case (33) {\n <ng-container *ngTemplateOutlet=\"renderCellFileInfo\"></ng-container>\n } @case (31) {\n <ng-container *ngTemplateOutlet=\"renderCellFileListKhati\"></ng-container>\n } @case (11) {\n <ng-container *ngTemplateOutlet=\"renderCellListTasavir\"></ng-container>\n } @case (5) {\n <ng-container\n *ngTemplateOutlet=\"column.Extra?.ShowCheckInGrid ? renderCellChecbox : renderChecboxImage\"\n ></ng-container>\n } @default {\n <ng-container *ngTemplateOutlet=\"renderGeneral\"></ng-container>\n } }\n</ng-template>\n<ng-template #renderGeneral>\n <div class=\"renderGeneral\" [class.onlyIcon]=\"column.Extra?.IconDisplayTypeEnum === 'Image'\" [style.width]=\"\">\n @if (icon) {\n <img [attr.rtl]=\"rtl\" [src]=\"icon\" />\n }\n <!-- <fd-text\n #fdText\n *ngIf=\"column.Extra?.IconDisplayTypeEnum !== 'Image'\"\n [maxLines]=\"1\"\n [text]=\"value\"\n [fd-inline-help]=\"value\"\n [disabled]=\"!fdText._hasMore\"\n ></fd-text> -->\n\n <!-- <bsu-barsa-text-ellipsis\n [style.width]=\"column.$Width\"\n *ngIf=\"column.Extra?.IconDisplayTypeEnum !== 'Image'\"\n [text]=\"value\"\n></bsu-barsa-text-ellipsis> -->\n <!-- <div *ngIf=\"column.Extra?.IconDisplayTypeEnum !== 'Image'\" style=\"word-break:break-word\">\n{{ value }}\n</div> -->\n @if (column.Extra?.IconDisplayTypeEnum !== 'Image') { @if(!isMobile && !fdTextMode){\n <div\n [ellapsisText]=\"value\"\n [disableEllapsis]=\"editMode\"\n [class.ellapsis]=\"!disableEllapsis\"\n [attr.title]=\"value\"\n (ellapsised)=\"onElapsised($event)\"\n >\n {{ value }}\n </div>\n } @else{\n <fd-text [attr.title]=\"value\" class=\"col-value\" [text]=\"value\" [maxLines]=\"2\"></fd-text>\n } }\n </div>\n</ng-template>\n<ng-template #formControlTemplate>\n <ng-container\n *ngTemplateOutlet=\"\n !controlUi || controlUi.FieldUi.originalXtype === 'Ui.ReadOnlyField'\n ? renderCellTemplate\n : layoutControlTemplate\n \"\n ></ng-container>\n</ng-template>\n<ng-template #layoutControlTemplate>\n @if (controlUi) {\n <bsu-layout-control\n [inlineEdit]=\"true\"\n [caption]=\"column.Caption\"\n [config]=\"controlUi\"\n [focusControl]=\"index === 0 && (isChecked || isNewInlineMo)\"\n [showLabel]=\"formLayoutShowLabel\"\n ></bsu-layout-control>\n }\n</ng-template>\n<ng-template #renderCellListTasavir>\n @if (mo[column.Name] && mo[column.Name].Images) {\n <div style=\"display: flex; flex-wrap: wrap; gap: 0.15rem\">\n @for (pic of mo[column.Name].Images; track pic) {\n <img\n fullscreen\n fullscreenFiles\n [files]=\"mo[column.Name].Images\"\n [isImageGallery]=\"true\"\n [deviceSize]=\"deviceSize\"\n [src]=\"pic.FileId | picFieldSrc: 'BarsaPicture.Thumbnail':null:'':32:32\"\n style=\"width: 3rem; height: 3rem\"\n />\n }\n </div>\n }\n</ng-template>\n<ng-template #renderCellFileListKhati>\n @if (mo[column.Name]) {\n <div class=\"file-viewer-attachments\">\n @for (file of mo[column.Name].Files; track file) { @if (!file.IsDeleted) {\n <bsu-file-viewer-popover\n [style.max-width.px]=\"containerDom && containerDom.offsetWidth ? containerDom.offsetWidth : null\"\n [file]=\"file\"\n [files]=\"mo[column.Name].Files\"\n [deviceSize]=\"deviceSize\"\n [canDownload]=\"true\"\n [disableRemove]=\"true\"\n [fdType]=\"'transparent'\"\n ></bsu-file-viewer-popover>\n }\n <!-- <fd-token *ngIf=\"!file.IsDeleted\" [readOnly]=\"true\">{{ file.FileName }}</fd-token> -->\n }\n </div>\n }\n</ng-template>\n<ng-template #renderCellFileInfo>\n @if (mo[column.Name]) {\n <fd-avatar\n [transparent]=\"true\"\n [size]=\"column.FieldTypeId === '42' || column.FieldTypeId === 42 ? 'xs' : deviceSize === 's' ? 's' : 'm'\"\n [image]=\"mo[column.Name] | picFieldSrc: 'PictureFileInfo':null:column.FieldDefId\"\n ></fd-avatar>\n }\n</ng-template>\n<ng-template #renderCellChecbox>\n <fd-icon [glyph]=\"mo[column.Name] === true ? 'accept' : 'less'\"></fd-icon>\n</ng-template>\n<ng-template #renderChecboxImage>\n @if (column.Extra?.TrueImage === '') {\n {{ value }}\n } @if (column.Extra?.TrueImage !== '') {\n <img [src]=\"mo[column.Name] ? column.Extra?.TrueImage : column.Extra?.FalseImage\" aling=\"middle\" />\n }\n</ng-template>\n<ng-template #renderCellImage>\n @if (mo[column.Name] && mo[column.Name]['Url']) {\n <fd-avatar\n [size]=\"column.FieldTypeId === '42' || column.FieldTypeId === 42 ? 'xs' : deviceSize === 's' ? 's' : 'm'\"\n [transparent]=\"true\"\n [image]=\"mo[column.Name]['Url']\"\n ></fd-avatar>\n }\n</ng-template>\n", styles: [":host{display:contents;overflow:hidden;padding:0}:host.isMobile span{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;white-space:pre-wrap}fd-avatar{min-width:100%;width:100%;max-width:64px}.renderGeneral{display:flex;width:100%;height:100%;align-items:center;justify-content:start}.renderGeneral.onlyIcon{justify-content:center}fd-text.col-value ::ng-deep p{color:inherit;font-size:inherit;font-family:inherit}\n"] }]
|
|
4743
4743
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { _isSmall: [{
|
|
4744
4744
|
type: HostBinding,
|
|
4745
4745
|
args: ['class.isMobile']
|
|
@@ -4769,6 +4769,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
|
|
|
4769
4769
|
type: Input
|
|
4770
4770
|
}], isMobile: [{
|
|
4771
4771
|
type: Input
|
|
4772
|
+
}], fdTextMode: [{
|
|
4773
|
+
type: Input
|
|
4772
4774
|
}], deviceName: [{
|
|
4773
4775
|
type: Input
|
|
4774
4776
|
}], deviceSize: [{
|
|
@@ -5274,13 +5276,15 @@ class BarsaTableColumnComponent extends BaseColumnPropsComponent {
|
|
|
5274
5276
|
}
|
|
5275
5277
|
}
|
|
5276
5278
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: BarsaTableColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
5277
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: BarsaTableColumnComponent, selector: "bsu-barsa-table-column", inputs: { disableEllapsis: "disableEllapsis" }, providers: [FormPanelService, ColumnService], usesInheritance: true, ngImport: i0, template: "<div\n [class.editMode]=\"editMode\"\n [class.isdirty]=\"isdirty\"\n #divDom\n style=\"display: flex; width: 100%\"\n [style.column-gap]=\"column.$MergedFieldsToColumn?.length ? '0.2rem' : null\"\n>\n @if (customComponent && customComponent.Selector) {\n <bnrc-dynamic-item-component\n [component]=\"customComponent\"\n [mo]=\"mo\"\n [isChecked]=\"isChecked\"\n [setting]=\"detailsComponentSetting\"\n [parameters]=\"customComponent.Settings\"\n [column]=\"column\"\n [value]=\"value\"\n [icon]=\"icon\"\n [editMode]=\"editMode\"\n [rtl]=\"rtl\"\n [isMobile]=\"isMobile\"\n [deviceName]=\"deviceName\"\n [deviceSize]=\"deviceSize\"\n [index]=\"index\"\n [allColumns]=\"allColumns\"\n [containerDom]=\"divDom\"\n ></bnrc-dynamic-item-component>\n } @else {\n <bsu-column-renderer\n [mo]=\"mo\"\n [containerDom]=\"divDom\"\n [column]=\"column\"\n [disableEllapsis]=\"disableEllapsis\"\n [value]=\"value | bbbTranslate\"\n [icon]=\"icon\"\n [editMode]=\"editMode\"\n [isChecked]=\"isChecked\"\n [index]=\"index\"\n [isMobile]=\"isMobile\"\n [rtl]=\"rtl\"\n [deviceName]=\"deviceName\"\n [formLayoutShowLabel]=\"false\"\n [deviceSize]=\"deviceSize\"\n [controlUi]=\"column.Caption | controlUi: layout94:column.Name\"\n (keyup.control.enter)=\"save.emit($event)\"\n (keyup.esc)=\"cancel.emit($event)\"\n (keydown.Tab)=\"tab.emit($event)\"\n ></bsu-column-renderer>\n } @if (editMode) { @for (fieldCaption of column.$MergedFieldsToColumn; track fieldCaption) { @if (fieldCaption |\n controlUi: layout94; as layoutConfig) {\n <bsu-layout-control\n [caption]=\"fieldCaption\"\n [config]=\"layoutConfig\"\n [showLabel]=\"false\"\n [inlineEdit]=\"true\"\n (keyup.control.enter)=\"save.emit($event)\"\n (keyup.esc)=\"cancel.emit($event)\"\n (keydown.Tab)=\"tab.emit($event)\"\n ></bsu-layout-control>\n } } }\n</div>\n", styles: [":host{display:contents;width:100%}:host>div.isdirty{background:url(/Lib/ui/resources/images/default/grid/dirty.gif);background-repeat:no-repeat}:host ::ng-deep .row-group.mobile-mode{border-bottom:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #e4e4e4)!important}:host ::ng-deep .editMode bnrc-field-ui{padding:0;margin:0}:host ::ng-deep .editMode bsu-ui-simple-combo{margin:0!important}bsu-layout-control:not(.hide-form-item){align-items:center;height:100%;min-width:auto;width:auto}td{vertical-align:middle}tr.brule-message td{border:0}.row-group{background-color:var(--sapBackgroundColor, \"#f7f7ff\")}.cell-expand{cursor:pointer;display:inline-flex;justify-content:center;align-items:center;font-size:.75rem;color:#0854a0;color:var(--sapContent_IconColor, #0854a0);min-width:2rem;max-width:2rem}.save-error{color:var(--sapField_InvalidColor)}.save-success{color:var(--sapField_SuccessColor)}.showdetails-on td{border-bottom:none!important}.flow{max-width:100%}.flow-item{display:flex}.flow-item fd-micro-process-flow-icon{width:1.375rem;height:1.375rem}.flow-item h5{padding-right:.3rem}.cartable-template{padding:.5rem 0}\n"], dependencies: [{ kind: "component", type: i2.DynamicItemComponent, selector: "bnrc-dynamic-item-component", inputs: ["mo", "allColumns", "moDataList", "columns", "column", "index", "last", "deviceName", "deviceSize", "rtl", "editMode", "setting", "parameters", "contextMenuItems", "canView", "showRowNumber", "rowNumber", "formSetting", "conditionalFormats", "disableOverflowContextMenu", "navigationArrow", "isCheckList", "fields", "isChecked", "layout94$", "inlineEditMode", "isNewInlineMo", "allowInlineEdit", "typeDefId", "rowIndicator", "rowIndicatorColor", "UlvMainCtrlr"] }, { kind: "component", type: LayoutControlComponent, selector: "bsu-layout-control", inputs: ["inlineEdit", "caption", "focusControl", "showLabel", "maxLabelWidth", "hasHorizontalText", "contentDensity", "flex", "RefreshLabel", "SetVisible"], outputs: ["events"] }, { kind: "component", type: ColumnRendererComponent, selector: "bsu-column-renderer,[colRenderer]", inputs: ["column", "mo", "index", "editMode", "customRowHeight", "controlUi", "formLayoutShowLabel", "isChecked", "isNewInlineMo", "containerDom", "disableEllapsis", "rtl", "isMobile", "deviceName", "deviceSize", "value", "icon"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i2.ControlUiPipe, name: "controlUi" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5279
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: BarsaTableColumnComponent, selector: "bsu-barsa-table-column", inputs: { disableEllapsis: "disableEllapsis", fdTextMode: "fdTextMode" }, providers: [FormPanelService, ColumnService], usesInheritance: true, ngImport: i0, template: "<div\n [class.editMode]=\"editMode\"\n [class.isdirty]=\"isdirty\"\n #divDom\n style=\"display: flex; width: 100%\"\n [style.column-gap]=\"column.$MergedFieldsToColumn?.length ? '0.2rem' : null\"\n>\n @if (customComponent && customComponent.Selector) {\n <bnrc-dynamic-item-component\n [component]=\"customComponent\"\n [mo]=\"mo\"\n [isChecked]=\"isChecked\"\n [setting]=\"detailsComponentSetting\"\n [parameters]=\"customComponent.Settings\"\n [column]=\"column\"\n [value]=\"value\"\n [disableEllapsis]=\"disableEllapsis\"\n [fdTextMode]=\"fdTextMode\"\n [icon]=\"icon\"\n [editMode]=\"editMode\"\n [rtl]=\"rtl\"\n [isMobile]=\"isMobile\"\n [deviceName]=\"deviceName\"\n [deviceSize]=\"deviceSize\"\n [index]=\"index\"\n [allColumns]=\"allColumns\"\n [containerDom]=\"divDom\"\n ></bnrc-dynamic-item-component>\n } @else {\n <bsu-column-renderer\n [mo]=\"mo\"\n [containerDom]=\"divDom\"\n [column]=\"column\"\n [disableEllapsis]=\"disableEllapsis\"\n [fdTextMode]=\"fdTextMode\"\n [value]=\"value | bbbTranslate\"\n [icon]=\"icon\"\n [editMode]=\"editMode\"\n [isChecked]=\"isChecked\"\n [index]=\"index\"\n [isMobile]=\"isMobile\"\n [rtl]=\"rtl\"\n [deviceName]=\"deviceName\"\n [formLayoutShowLabel]=\"false\"\n [deviceSize]=\"deviceSize\"\n [controlUi]=\"column.Caption | controlUi: layout94:column.Name\"\n (keyup.control.enter)=\"save.emit($event)\"\n (keyup.esc)=\"cancel.emit($event)\"\n (keydown.Tab)=\"tab.emit($event)\"\n ></bsu-column-renderer>\n } @if (editMode) { @for (fieldCaption of column.$MergedFieldsToColumn; track fieldCaption) { @if (fieldCaption |\n controlUi: layout94; as layoutConfig) {\n <bsu-layout-control\n [caption]=\"fieldCaption\"\n [config]=\"layoutConfig\"\n [showLabel]=\"false\"\n [inlineEdit]=\"true\"\n (keyup.control.enter)=\"save.emit($event)\"\n (keyup.esc)=\"cancel.emit($event)\"\n (keydown.Tab)=\"tab.emit($event)\"\n ></bsu-layout-control>\n } } }\n</div>\n", styles: [":host{display:contents;width:100%}:host>div.isdirty{background:url(/Lib/ui/resources/images/default/grid/dirty.gif);background-repeat:no-repeat}:host ::ng-deep .row-group.mobile-mode{border-bottom:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #e4e4e4)!important}:host ::ng-deep .editMode bnrc-field-ui{padding:0;margin:0}:host ::ng-deep .editMode bsu-ui-simple-combo{margin:0!important}bsu-layout-control:not(.hide-form-item){align-items:center;height:100%;min-width:auto;width:auto}td{vertical-align:middle}tr.brule-message td{border:0}.row-group{background-color:var(--sapBackgroundColor, \"#f7f7ff\")}.cell-expand{cursor:pointer;display:inline-flex;justify-content:center;align-items:center;font-size:.75rem;color:#0854a0;color:var(--sapContent_IconColor, #0854a0);min-width:2rem;max-width:2rem}.save-error{color:var(--sapField_InvalidColor)}.save-success{color:var(--sapField_SuccessColor)}.showdetails-on td{border-bottom:none!important}.flow{max-width:100%}.flow-item{display:flex}.flow-item fd-micro-process-flow-icon{width:1.375rem;height:1.375rem}.flow-item h5{padding-right:.3rem}.cartable-template{padding:.5rem 0}\n"], dependencies: [{ kind: "component", type: i2.DynamicItemComponent, selector: "bnrc-dynamic-item-component", inputs: ["mo", "allColumns", "moDataList", "columns", "column", "index", "last", "deviceName", "deviceSize", "rtl", "editMode", "setting", "parameters", "contextMenuItems", "canView", "showRowNumber", "rowNumber", "formSetting", "conditionalFormats", "disableOverflowContextMenu", "navigationArrow", "isCheckList", "fields", "isChecked", "layout94$", "inlineEditMode", "isNewInlineMo", "allowInlineEdit", "typeDefId", "rowIndicator", "rowIndicatorColor", "UlvMainCtrlr"] }, { kind: "component", type: LayoutControlComponent, selector: "bsu-layout-control", inputs: ["inlineEdit", "caption", "focusControl", "showLabel", "maxLabelWidth", "hasHorizontalText", "contentDensity", "flex", "RefreshLabel", "SetVisible"], outputs: ["events"] }, { kind: "component", type: ColumnRendererComponent, selector: "bsu-column-renderer,[colRenderer]", inputs: ["column", "mo", "index", "editMode", "customRowHeight", "controlUi", "formLayoutShowLabel", "isChecked", "isNewInlineMo", "containerDom", "disableEllapsis", "rtl", "isMobile", "fdTextMode", "deviceName", "deviceSize", "value", "icon"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i2.ControlUiPipe, name: "controlUi" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5278
5280
|
}
|
|
5279
5281
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: BarsaTableColumnComponent, decorators: [{
|
|
5280
5282
|
type: Component,
|
|
5281
|
-
args: [{ selector: 'bsu-barsa-table-column', providers: [FormPanelService, ColumnService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n [class.editMode]=\"editMode\"\n [class.isdirty]=\"isdirty\"\n #divDom\n style=\"display: flex; width: 100%\"\n [style.column-gap]=\"column.$MergedFieldsToColumn?.length ? '0.2rem' : null\"\n>\n @if (customComponent && customComponent.Selector) {\n <bnrc-dynamic-item-component\n [component]=\"customComponent\"\n [mo]=\"mo\"\n [isChecked]=\"isChecked\"\n [setting]=\"detailsComponentSetting\"\n [parameters]=\"customComponent.Settings\"\n [column]=\"column\"\n [value]=\"value\"\n [icon]=\"icon\"\n [editMode]=\"editMode\"\n [rtl]=\"rtl\"\n [isMobile]=\"isMobile\"\n [deviceName]=\"deviceName\"\n [deviceSize]=\"deviceSize\"\n [index]=\"index\"\n [allColumns]=\"allColumns\"\n [containerDom]=\"divDom\"\n ></bnrc-dynamic-item-component>\n } @else {\n <bsu-column-renderer\n [mo]=\"mo\"\n [containerDom]=\"divDom\"\n [column]=\"column\"\n [disableEllapsis]=\"disableEllapsis\"\n [value]=\"value | bbbTranslate\"\n [icon]=\"icon\"\n [editMode]=\"editMode\"\n [isChecked]=\"isChecked\"\n [index]=\"index\"\n [isMobile]=\"isMobile\"\n [rtl]=\"rtl\"\n [deviceName]=\"deviceName\"\n [formLayoutShowLabel]=\"false\"\n [deviceSize]=\"deviceSize\"\n [controlUi]=\"column.Caption | controlUi: layout94:column.Name\"\n (keyup.control.enter)=\"save.emit($event)\"\n (keyup.esc)=\"cancel.emit($event)\"\n (keydown.Tab)=\"tab.emit($event)\"\n ></bsu-column-renderer>\n } @if (editMode) { @for (fieldCaption of column.$MergedFieldsToColumn; track fieldCaption) { @if (fieldCaption |\n controlUi: layout94; as layoutConfig) {\n <bsu-layout-control\n [caption]=\"fieldCaption\"\n [config]=\"layoutConfig\"\n [showLabel]=\"false\"\n [inlineEdit]=\"true\"\n (keyup.control.enter)=\"save.emit($event)\"\n (keyup.esc)=\"cancel.emit($event)\"\n (keydown.Tab)=\"tab.emit($event)\"\n ></bsu-layout-control>\n } } }\n</div>\n", styles: [":host{display:contents;width:100%}:host>div.isdirty{background:url(/Lib/ui/resources/images/default/grid/dirty.gif);background-repeat:no-repeat}:host ::ng-deep .row-group.mobile-mode{border-bottom:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #e4e4e4)!important}:host ::ng-deep .editMode bnrc-field-ui{padding:0;margin:0}:host ::ng-deep .editMode bsu-ui-simple-combo{margin:0!important}bsu-layout-control:not(.hide-form-item){align-items:center;height:100%;min-width:auto;width:auto}td{vertical-align:middle}tr.brule-message td{border:0}.row-group{background-color:var(--sapBackgroundColor, \"#f7f7ff\")}.cell-expand{cursor:pointer;display:inline-flex;justify-content:center;align-items:center;font-size:.75rem;color:#0854a0;color:var(--sapContent_IconColor, #0854a0);min-width:2rem;max-width:2rem}.save-error{color:var(--sapField_InvalidColor)}.save-success{color:var(--sapField_SuccessColor)}.showdetails-on td{border-bottom:none!important}.flow{max-width:100%}.flow-item{display:flex}.flow-item fd-micro-process-flow-icon{width:1.375rem;height:1.375rem}.flow-item h5{padding-right:.3rem}.cartable-template{padding:.5rem 0}\n"] }]
|
|
5283
|
+
args: [{ selector: 'bsu-barsa-table-column', providers: [FormPanelService, ColumnService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n [class.editMode]=\"editMode\"\n [class.isdirty]=\"isdirty\"\n #divDom\n style=\"display: flex; width: 100%\"\n [style.column-gap]=\"column.$MergedFieldsToColumn?.length ? '0.2rem' : null\"\n>\n @if (customComponent && customComponent.Selector) {\n <bnrc-dynamic-item-component\n [component]=\"customComponent\"\n [mo]=\"mo\"\n [isChecked]=\"isChecked\"\n [setting]=\"detailsComponentSetting\"\n [parameters]=\"customComponent.Settings\"\n [column]=\"column\"\n [value]=\"value\"\n [disableEllapsis]=\"disableEllapsis\"\n [fdTextMode]=\"fdTextMode\"\n [icon]=\"icon\"\n [editMode]=\"editMode\"\n [rtl]=\"rtl\"\n [isMobile]=\"isMobile\"\n [deviceName]=\"deviceName\"\n [deviceSize]=\"deviceSize\"\n [index]=\"index\"\n [allColumns]=\"allColumns\"\n [containerDom]=\"divDom\"\n ></bnrc-dynamic-item-component>\n } @else {\n <bsu-column-renderer\n [mo]=\"mo\"\n [containerDom]=\"divDom\"\n [column]=\"column\"\n [disableEllapsis]=\"disableEllapsis\"\n [fdTextMode]=\"fdTextMode\"\n [value]=\"value | bbbTranslate\"\n [icon]=\"icon\"\n [editMode]=\"editMode\"\n [isChecked]=\"isChecked\"\n [index]=\"index\"\n [isMobile]=\"isMobile\"\n [rtl]=\"rtl\"\n [deviceName]=\"deviceName\"\n [formLayoutShowLabel]=\"false\"\n [deviceSize]=\"deviceSize\"\n [controlUi]=\"column.Caption | controlUi: layout94:column.Name\"\n (keyup.control.enter)=\"save.emit($event)\"\n (keyup.esc)=\"cancel.emit($event)\"\n (keydown.Tab)=\"tab.emit($event)\"\n ></bsu-column-renderer>\n } @if (editMode) { @for (fieldCaption of column.$MergedFieldsToColumn; track fieldCaption) { @if (fieldCaption |\n controlUi: layout94; as layoutConfig) {\n <bsu-layout-control\n [caption]=\"fieldCaption\"\n [config]=\"layoutConfig\"\n [showLabel]=\"false\"\n [inlineEdit]=\"true\"\n (keyup.control.enter)=\"save.emit($event)\"\n (keyup.esc)=\"cancel.emit($event)\"\n (keydown.Tab)=\"tab.emit($event)\"\n ></bsu-layout-control>\n } } }\n</div>\n", styles: [":host{display:contents;width:100%}:host>div.isdirty{background:url(/Lib/ui/resources/images/default/grid/dirty.gif);background-repeat:no-repeat}:host ::ng-deep .row-group.mobile-mode{border-bottom:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #e4e4e4)!important}:host ::ng-deep .editMode bnrc-field-ui{padding:0;margin:0}:host ::ng-deep .editMode bsu-ui-simple-combo{margin:0!important}bsu-layout-control:not(.hide-form-item){align-items:center;height:100%;min-width:auto;width:auto}td{vertical-align:middle}tr.brule-message td{border:0}.row-group{background-color:var(--sapBackgroundColor, \"#f7f7ff\")}.cell-expand{cursor:pointer;display:inline-flex;justify-content:center;align-items:center;font-size:.75rem;color:#0854a0;color:var(--sapContent_IconColor, #0854a0);min-width:2rem;max-width:2rem}.save-error{color:var(--sapField_InvalidColor)}.save-success{color:var(--sapField_SuccessColor)}.showdetails-on td{border-bottom:none!important}.flow{max-width:100%}.flow-item{display:flex}.flow-item fd-micro-process-flow-icon{width:1.375rem;height:1.375rem}.flow-item h5{padding-right:.3rem}.cartable-template{padding:.5rem 0}\n"] }]
|
|
5282
5284
|
}], propDecorators: { disableEllapsis: [{
|
|
5283
5285
|
type: Input
|
|
5286
|
+
}], fdTextMode: [{
|
|
5287
|
+
type: Input
|
|
5284
5288
|
}] } });
|
|
5285
5289
|
|
|
5286
5290
|
class CardItemComponent extends BaseViewItemPropsComponent {
|
|
@@ -5314,11 +5318,11 @@ class CardItemComponent extends BaseViewItemPropsComponent {
|
|
|
5314
5318
|
}
|
|
5315
5319
|
}
|
|
5316
5320
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: CardItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
5317
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: CardItemComponent, selector: "bsu-card-item", inputs: { setting: "setting" }, providers: [FormPanelService], viewQueries: [{ propertyName: "_quickViewTemplate", first: true, predicate: ["quickViewTemplate"], descendants: true, static: true }, { propertyName: "_contentTemplate", first: true, predicate: ["contentTemplate"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<fd-card\n [cardType]=\"setting.CardType$Caption\"\n class=\"docs-flex-item-margin\"\n [class.openOnClick]=\"setting.openOnClick\"\n [style.width]=\"cardWidth\"\n [style.min-width]=\"minWidth\"\n [style.max-width]=\"maxWidth\"\n>\n <ng-container\n *ngTemplateOutlet=\"\n setting.HeaderComponent ? renderHeaderComponent : renderHeader;\n context: {\n $implicit: mo,\n index: this.index\n }\n \"\n ></ng-container>\n\n @if (!noContent || contextMenuItems) {\n <fd-card-content (click)=\"onRowCheck()\" (dblclick)=\"onRowClick()\" ellipsify>\n <div #divEl [applyConditionalFormats]=\"conditionalFormats\" [styleIndex]=\"styleIndex\" [hostEl]=\"divEl\">\n <ng-container\n *ngTemplateOutlet=\"\n setting.ContentComponent ? contentTemplateComponent : contentTemplateRef;\n context: {\n $implicit: mo,\n index: this.index\n }\n \"\n ></ng-container>\n </div>\n </fd-card-content>\n } @if(detailsText || contextMenuEnabled){\n <fd-card-footer\n (click)=\"!isChecked && onRowCheck()\"\n (dblclick)=\"onRowClick()\"\n [class.hasDetailsAndContextMenu]=\"detailsText && contextMenuEnabled && contextMenuInFooter\"\n [class.!tw-border-y-0]=\"noContent\"\n >\n @if(detailsText){<button *fdCardFooterActionItem fd-button fdType=\"transparent\" [fdPopoverTrigger]=\"popover\">\n {{ detailsText }}\n </button>\n } @if(contextMenuInFooter){\n <div\n *fdCardFooterActionItem\n ulvContextMenu\n [allColumns]=\"allColumns\"\n [footerMode]=\"false\"\n [menuItems]=\"contextMenuItems\"\n [styleIndex]=\"styleIndex\"\n [conditionalFormats]=\"conditionalFormats\"\n [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n [mo]=\"mo\"\n (commandClick)=\"onUlvCommand()\"\n ></div>\n }\n <fd-popover #popover>\n @if (detailsColumns?.length) {\n <ng-container\n *ngTemplateOutlet=\"\n detailsColumnsTemplate;\n context: { mo: mo, inlineEditMode: inlineEditMode, layout94: layout$ | async }\n \"\n ></ng-container>\n }\n </fd-popover>\n </fd-card-footer>\n }\n</fd-card>\n<ng-template #detailsColumnsTemplate let-mo=\"mo\" let-inlineEditMode=\"inlineEditMode\" let-layout94=\"layout94\">\n <ng-container\n *ngTemplateOutlet=\"\n detailsFormItems;\n context: {\n $implicit: detailsColumns,\n mo: this.mo,\n inlineEditMode: this.inlineEditMode,\n layout94: layout94\n }\n \"\n ></ng-container>\n</ng-template>\n<ng-template\n #detailsFormItems\n let-detailsColumns\n let-mo=\"mo\"\n let-inlineEditMode=\"inlineEditMode\"\n let-layout94=\"layout94\"\n>\n <div class=\"form-items\" class=\"tw-p-2\">\n @for (column of detailsColumns; track column; let columnIndex = $index) {\n <div fd-form-item class=\"!tw-flex-row\">\n @if(!column.$CustomComponent?.HideColumnCaption) {<label fd-form-label for=\"input-2\"\n >{{ column.Caption }}<span>:</span></label\n >}\n <ng-container\n *ngTemplateOutlet=\"\n columnTemplate;\n context: {\n $implicit: column,\n mo: mo,\n index: columnIndex,\n inlineEditMode: inlineEditMode,\n layout94: layout94\n }\n \"\n ></ng-container>\n </div>\n }\n </div>\n</ng-template>\n<ng-template\n #columnTemplate\n let-column\n let-mo=\"mo\"\n let-index=\"index\"\n let-layout94=\"layout94\"\n let-disableEllapsis=\"disableEllapsis\"\n>\n @if (column) {\n <bsu-barsa-table-column\n [mo]=\"mo\"\n [allColumns]=\"allColumns\"\n [column]=\"column\"\n [isdirty]=\"false\"\n [value]=\"column | columnValue: mo\"\n [icon]=\"column | columnIcon: mo\"\n [customComponent]=\"column.$CustomComponent\"\n [column]=\"column\"\n [disableEllapsis]=\"disableEllapsis === false ? false : true\"\n [editMode]=\"isChecked && inlineEditMode && allowInlineEdit\"\n [inlineEditMode]=\"inlineEditMode\"\n [isChecked]=\"isChecked\"\n [index]=\"index\"\n [formSetting]=\"formSetting\"\n [rtl]=\"rtl\"\n [deviceName]=\"deviceName\"\n [deviceSize]=\"deviceSize\"\n [layout94]=\"layout94\"\n (save)=\"onEditFormPanelSave(null)\"\n (cancel)=\"onEditFormPanelCancel(null)\"\n (tab)=\"onTabKeyDown($event, index)\"\n (changeToEditMode)=\"onColumnChangeToEditMode($event, index)\"\n >\n </bsu-barsa-table-column>\n\n }\n</ng-template>\n<ng-template #quickViewTemplate let-mo let-index=\"index\">\n @if (!noContent) {\n <fd-quick-view [id]=\"'id'\">\n <fd-quick-view-group>\n @for (column of setting.FieldListMapped; track column) {\n <fd-quick-view-group-item [class.rowDirection]=\"column?.$CustomComponent?.IsRowDirection\">\n @if (column) { @if(!column.$CustomComponent?.HideColumnCaption) {<fd-quick-view-group-item-label>\n {{ column.Caption | bbbTranslate }} </fd-quick-view-group-item-label\n >}\n <fd-quick-view-group-item-content>\n <div fd-quick-view-group-item-content-element class=\"group-item-content\">\n <ng-container\n *ngTemplateOutlet=\"\n columnTemplate;\n context: {\n $implicit: column,\n layout94: layout$ | async,\n mo: mo,\n index: index\n }\n \"\n ></ng-container>\n </div>\n </fd-quick-view-group-item-content>\n }\n </fd-quick-view-group-item>\n } @if (setting.DescriptionField) {\n <fd-quick-view-group-item>\n <fd-quick-view-group-item-content>\n @if (inlineEditMode && allowInlineEdit) {\n <fd-quick-view-group-item-label>\n {{ setting.DescriptionField?.Alias | bbbTranslate }}\n </fd-quick-view-group-item-label>\n }\n <div fd-quick-view-group-item-content-element class=\"group-item-content\">\n <ng-container\n *ngTemplateOutlet=\"\n columnTemplate;\n context: {\n $implicit: setting.DescriptionField,\n layout94: layout$ | async,\n mo: mo,\n index: index\n }\n \"\n ></ng-container>\n </div>\n </fd-quick-view-group-item-content>\n @if (setting.ActionFieldNameField) {\n <fd-quick-view-group-item-content\n class=\"action\"\n (click)=\"onAction(setting.ActionFieldCommandField || '')\"\n >\n <a fd-link>\n <ng-container\n *ngTemplateOutlet=\"\n columnTemplate;\n context: {\n $implicit: setting.ActionFieldNameField,\n layout94: layout$ | async,\n mo: mo,\n index: index\n }\n \"\n ></ng-container>\n </a>\n </fd-quick-view-group-item-content>\n }\n </fd-quick-view-group-item>\n }\n </fd-quick-view-group>\n </fd-quick-view>\n }\n</ng-template>\n<ng-template #contentTemplate let-mo let-index=\"index\">\n <fd-layout-grid>\n <div fdLayoutGridRow style=\"align-items: center\">\n <div [fdLayoutGridCol]=\"12\">\n @for (column of setting.FieldListMapped; track column) {\n <div style=\"display: flex\">\n <label fd-form-label [colon]=\"true\">{{ column.Caption | bbbTranslate }}</label>\n <ng-container\n *ngTemplateOutlet=\"\n columnTemplate;\n context: {\n $implicit: column,\n layout94: layout$ | async,\n mo: mo,\n index: index\n }\n \"\n ></ng-container>\n </div>\n }\n </div>\n @if (setting.DescriptionField) {\n <div [fdLayoutGridCol]=\"12\">\n @if (inlineEditMode && allowInlineEdit) {\n <label>\n {{ setting.DescriptionField?.Alias | bbbTranslate }}\n </label>\n }\n <ng-container\n *ngTemplateOutlet=\"\n columnTemplate;\n context: {\n $implicit: setting.DescriptionField,\n layout94: layout$ | async,\n mo: mo,\n index: index\n }\n \"\n ></ng-container>\n </div>\n }\n </div>\n </fd-layout-grid>\n</ng-template>\n<ng-template #avatar let-avatar let-visible=\"visible\" let-circle=\"circle\" let-avatarField=\"avatarField\">\n @if (visible) {\n <fd-avatar\n alterIcon=\"alt|content|backup|default-icon\"\n [circle]=\"circle\"\n [image]=\"avatarField ? (mo[avatarField.Name]?.FileId | picFieldSrc: 'ID':avatarField.FieldDefId) : ''\"\n [size]=\"\n deviceSize === 'xl' || deviceSize === 'l' ? setting.AvatarSizeDesktop$Caption : setting.AvatarSize$Caption\n \"\n [glyph]=\"avatar || (mo.$State === 'New' && !isChecked ? 'favorite' : inlineEditMode && isChecked ? 'edit' : '')\"\n >\n </fd-avatar>\n }\n</ng-template>\n\n<ng-template #contentTemplateComponent let-mo let-index=\"index\">\n <bnrc-dynamic-item-component\n [component]=\"setting.ContentComponent\"\n [mo]=\"mo\"\n [styleIndex]=\"mo.$StyleIndex\"\n [isChecked]=\"isChecked\"\n [setting]=\"setting\"\n [parameters]=\"setting.ContentComponent.Settings\"\n [editMode]=\"inlineEditMode\"\n [rtl]=\"rtl\"\n [deviceName]=\"deviceName\"\n [deviceSize]=\"deviceSize\"\n [index]=\"index\"\n [allColumns]=\"allColumns\"\n ></bnrc-dynamic-item-component>\n</ng-template>\n\n<ng-template #renderHeader let-mo let-index=\"index\">\n @if(!hideOpenIcon && (openOnClick || (canView && deviceName !== 'desktop'))){\n <ng-container\n *ngTemplateOutlet=\"\n renderHeaderMobileCanView;\n context: {\n $implicit: mo,\n index: index\n }\n \"\n ></ng-container>\n }@else{\n <ng-container\n *ngTemplateOutlet=\"\n renderHeaderDesktop;\n context: {\n $implicit: mo,\n index: index\n }\n \"\n ></ng-container>\n }\n</ng-template>\n<ng-template #renderHeaderDesktop let-mo let-index=\"index\">\n <fd-card-header class=\"HeaderDesktop\">\n <div>\n @if(isCheckList){\n <fd-checkbox [name]=\"mo.$Caption\" [ngModel]=\"isChecked\" (ngModelChange)=\"onRowCheck()\"></fd-checkbox>\n }\n </div>\n <fd-card-main-header (click)=\"onRowCheck()\" (dblclick)=\"onRowClick()\">\n @if (setting.AvatarField || setting.Avatar) {\n <fd-avatar\n alterIcon=\"alt|content|backup|default-icon\"\n [circle]=\"setting.CircleAvatar\"\n [image]=\"\n setting.AvatarField\n ? (mo[setting.AvatarField.Name]?.FileId | picFieldSrc: 'ID':setting.AvatarField.FieldDefId)\n : ''\n \"\n [size]=\"\n deviceSize === 'xl' || deviceSize === 'l'\n ? setting.AvatarSizeDesktop$Caption\n : setting.AvatarSize$Caption\n \"\n [glyph]=\"\n setting.Avatar ||\n (mo.$State === 'New' && !isChecked ? 'favorite' : inlineEditMode && isChecked ? 'edit' : '')\n \"\n ></fd-avatar>\n }\n <h2 fd-card-title>\n <ng-container\n *ngTemplateOutlet=\"\n columnTemplate;\n context: {\n $implicit: setting.TitleField,\n layout94: layout$ | async,\n mo: mo,\n index: index,\n disableEllapsis: false\n }\n \"\n ></ng-container>\n </h2>\n <h3 fd-card-subtitle>\n <ng-container\n *ngTemplateOutlet=\"\n columnTemplate;\n context: {\n $implicit: setting.SubtitleField,\n layout94: layout$ | async,\n mo: mo,\n index: index,\n disableEllapsis: false\n }\n \"\n ></ng-container>\n </h3>\n @if (!contextMenuInFooter && (contextMenuItems && contextMenuItems.length > 0)) {\n <div\n ulvContextMenu\n [allColumns]=\"allColumns\"\n [footerMode]=\"false\"\n [menuItems]=\"contextMenuItems\"\n [styleIndex]=\"styleIndex\"\n [conditionalFormats]=\"conditionalFormats\"\n [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n [mo]=\"mo\"\n (commandClick)=\"onUlvCommand()\"\n ></div>\n }\n </fd-card-main-header>\n </fd-card-header>\n</ng-template>\n<ng-template #renderHeaderMobileCanView let-mo let-index=\"index\">\n <fd-card-header class=\"HeaderMobileCanView\">\n <div>\n @if(isCheckList){\n <fd-checkbox [name]=\"mo.$Caption\" [ngModel]=\"isChecked\" (ngModelChange)=\"onRowCheck()\"></fd-checkbox>\n }\n </div>\n <fd-card-main-header (click)=\"onRowCheck()\" (dblclick)=\"onRowClick()\">\n @if (setting.AvatarField || setting.Avatar) {\n <fd-avatar\n alterIcon=\"alt|content|backup|default-icon\"\n [circle]=\"setting.CircleAvatar\"\n [image]=\"\n setting.AvatarField\n ? (mo[setting.AvatarField.Name]?.FileId | picFieldSrc: 'ID':setting.AvatarField.FieldDefId)\n : ''\n \"\n [size]=\"\n deviceSize === 'xl' || deviceSize === 'l'\n ? setting.AvatarSizeDesktop$Caption\n : setting.AvatarSize$Caption\n \"\n [glyph]=\"\n setting.Avatar ||\n (mo.$State === 'New' && !isChecked ? 'favorite' : inlineEditMode && isChecked ? 'edit' : '')\n \"\n ></fd-avatar>\n }\n <h2 fd-card-title>\n <ng-container\n *ngTemplateOutlet=\"\n columnTemplate;\n context: {\n $implicit: setting.TitleField,\n layout94: layout$ | async,\n mo: mo,\n index: index\n }\n \"\n ></ng-container>\n </h2>\n <h3 fd-card-subtitle>\n <ng-container\n *ngTemplateOutlet=\"\n columnTemplate;\n context: {\n $implicit: setting.SubtitleField,\n layout94: layout$ | async,\n mo: mo,\n index: index\n }\n \"\n ></ng-container>\n </h3>\n <button\n fd-card-header-action\n fd-button\n class=\"view-btn\"\n (click)=\"onRowClick()\"\n [glyph]=\"navigationArrow\"\n fdType=\"transparent\"\n ></button>\n </fd-card-main-header>\n </fd-card-header>\n</ng-template>\n<ng-template #renderHeaderComponent let-mo let-index=\"index\">\n <bnrc-dynamic-item-component\n [component]=\"setting.HeaderComponent\"\n [mo]=\"mo\"\n [styleIndex]=\"mo.$StyleIndex\"\n [isChecked]=\"isChecked\"\n [setting]=\"setting\"\n [parameters]=\"setting.HeaderComponent.Settings\"\n [editMode]=\"inlineEditMode\"\n [rtl]=\"rtl\"\n [deviceName]=\"deviceName\"\n [deviceSize]=\"deviceSize\"\n [index]=\"index\"\n [allColumns]=\"allColumns\"\n [contextMenuItems]=\"contextMenuItems\"\n [canView]=\"canView\"\n [conditionalFormats]=\"conditionalFormats\"\n [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n [navigationArrow]=\"navigationArrow\"\n [isCheckList]=\"isCheckList\"\n (events)=\"onDynamicComponentEvents($event)\"\n ></bnrc-dynamic-item-component>\n</ng-template>\n", styles: ["fd-card:hover{box-shadow:0 0 0 .0625rem #2235487a,0 .625rem 1.875rem #22354840}fd-card div[ulvcontextmenu] ::ng-deep .fd-bar{background-color:transparent}fd-card ::ng-deep bsu-column-renderer div.renderGeneral{font-family:IranYekanDigits}fd-card fd-card-footer.hasDetailsAndContextMenu ::ng-deep .fd-card__footer-actions{justify-content:space-between!important}fd-card fd-card-content{padding:0!important}fd-card fd-card-content>div>fd-quick-view ::ng-deep .fd-quick-view__content{padding-top:0}fd-card fd-card-content>div>fd-quick-view fd-quick-view-group-item.rowDirection ::ng-deep .fd-form-item{flex-direction:row}fd-card fd-card-header{padding:.5rem}fd-card fd-card-header:hover{background:var(--fdCard_Background_Color)}fd-card fd-card-header .fd-card__title{display:flex;justify-content:space-between;align-items:center;width:100%}fd-card fd-card-header button,fd-card fd-card-header div[ulvcontextmenu]{z-index:6}fd-card fd-card-header:hover{background:inherit}fd-quick-view-subheader ::ng-deep div{background:inherit}.action{cursor:pointer;margin-top:6px;flex:1;display:flex;justify-content:end;flex-direction:column}.openOnClick{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.DynamicItemComponent, selector: "bnrc-dynamic-item-component", inputs: ["mo", "allColumns", "moDataList", "columns", "column", "index", "last", "deviceName", "deviceSize", "rtl", "editMode", "setting", "parameters", "contextMenuItems", "canView", "showRowNumber", "rowNumber", "formSetting", "conditionalFormats", "disableOverflowContextMenu", "navigationArrow", "isCheckList", "fields", "isChecked", "layout94$", "inlineEditMode", "isNewInlineMo", "allowInlineEdit", "typeDefId", "rowIndicator", "rowIndicatorColor", "UlvMainCtrlr"] }, { kind: "directive", type: i2.EllipsifyDirective, selector: "[ellipsify]", inputs: ["limitLine"] }, { kind: "component", type: i3$5.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "font", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "random", "clickable", "valueState", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i2$5.LinkComponent, selector: "[fdLink], [fd-link]", inputs: ["class", "emphasized", "disabled", "inverted", "subtle", "undecorated"] }, { kind: "component", type: i4$1.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i5$2.CardComponent, selector: "fd-card", inputs: ["badge", "badgeIcon", "badgeColor", "badgeColorSecondary", "badgeStatus", "badgeAriaLabel", "secondBadge", "secondBadgeIcon", "secondBadgeColor", "secondBadgeColorSecondary", "secondBadgeStatus", "secondBadgeAriaLabel", "isLoading", "cardType", "id", "ariaRoledescription", "ariaDescription", "ariaLabel", "role", "interactive", "selected", "ariaPosinset", "ariaSetsize"], outputs: ["ariaPosinsetChange", "ariaSetsizeChange"] }, { kind: "component", type: i5$2.CardHeaderComponent, selector: "fd-card-header", inputs: ["ariaRoleDescription"] }, { kind: "component", type: i5$2.CardMainHeaderComponent, selector: "fd-card-main-header", inputs: ["interactive", "title"] }, { kind: "directive", type: i5$2.CardHeaderActionDirective, selector: "[fd-card-header-action]" }, { kind: "component", type: i5$2.CardContentComponent, selector: "fd-card-content" }, { kind: "directive", type: i5$2.CardTitleDirective, selector: "[fd-card-title]", inputs: ["id"] }, { kind: "directive", type: i5$2.CardSubtitleDirective, selector: "[fd-card-subtitle]" }, { kind: "component", type: i5$2.CardFooterComponent, selector: "fd-card-footer" }, { kind: "directive", type: i5$2.CardFooterActionItemDirective, selector: "[fdCardFooterActionItem]" }, { kind: "component", type: i5.CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "role", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "component", type: i2$1.FormItemComponent, selector: "[fd-form-item]", inputs: ["isInline", "horizontal"] }, { kind: "component", type: i2$1.FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "alignLabelEnd", "inlineHelpContent", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "inlineHelpLabel", "id"] }, { kind: "component", type: i4$3.LayoutGridComponent, selector: "fd-layout-grid, [fdLayoutGrid]", inputs: ["class", "noGap", "noHorizontalGap", "noVerticalGap"] }, { kind: "directive", type: i4$3.LayoutGridColDirective, selector: "[fd-layout-grid-col], [fdLayoutGridCol]", inputs: ["fdLayoutGridCol", "colGrow", "colMd", "colLg", "colXl", "colOffset", "colOffsetMd", "colOffsetLg", "colOffsetXl", "class"] }, { kind: "directive", type: i4$3.LayoutGridRowDirective, selector: "[fd-layout-grid-row], [fdLayoutGridRow]" }, { kind: "component", type: i7$3.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "directive", type: i7$3.PopoverTriggerDirective, selector: "[fdPopoverTrigger], [fd-popover-trigger]", inputs: ["fdPopoverTrigger"] }, { kind: "component", type: i12.QuickViewComponent, selector: "fd-quick-view", inputs: ["id"] }, { kind: "component", type: i12.QuickViewGroupComponent, selector: "fd-quick-view-group" }, { kind: "component", type: i12.QuickViewGroupItemComponent, selector: "fd-quick-view-group-item", inputs: ["id"] }, { kind: "component", type: i12.QuickViewGroupItemLabelComponent, selector: "fd-quick-view-group-item-label" }, { kind: "component", type: i12.QuickViewGroupItemContentComponent, selector: "fd-quick-view-group-item-content" }, { kind: "directive", type: i12.QuickViewGroupItemContentElementDirective, selector: "[fd-quick-view-group-item-content-element]" }, { kind: "component", type: UlvContextMenuComponent, selector: "bsu-ulv-context-menu,[ulvContextMenu]", inputs: ["onlyOverflow", "rightClickEnable", "deviceName", "menuItems", "allColumns", "index", "mo", "styleIndex", "conditionalFormats", "disableOverflowContextMenu", "footerMode", "appendTo"], outputs: ["commandClick"] }, { kind: "component", type: BarsaTableColumnComponent, selector: "bsu-barsa-table-column", inputs: ["disableEllapsis"] }, { kind: "directive", type: ApplyConditionalFormatsDirective, selector: "[applyConditionalFormats]", inputs: ["applyConditionalFormats", "styleIndex", "hostEl", "dbName"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i2.ColumnIconPipe, name: "columnIcon" }, { kind: "pipe", type: i2.ColumnValuePipe, name: "columnValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5321
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: CardItemComponent, selector: "bsu-card-item", inputs: { setting: "setting" }, providers: [FormPanelService], viewQueries: [{ propertyName: "_quickViewTemplate", first: true, predicate: ["quickViewTemplate"], descendants: true, static: true }, { propertyName: "_contentTemplate", first: true, predicate: ["contentTemplate"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<fd-card\n [cardType]=\"setting.CardType$Caption\"\n class=\"docs-flex-item-margin\"\n [class.openOnClick]=\"setting.openOnClick\"\n [style.width]=\"cardWidth\"\n [style.min-width]=\"minWidth\"\n [style.max-width]=\"maxWidth\"\n>\n <ng-container\n *ngTemplateOutlet=\"\n setting.HeaderComponent ? renderHeaderComponent : renderHeader;\n context: {\n $implicit: mo,\n index: this.index\n }\n \"\n ></ng-container>\n\n @if (!noContent || contextMenuItems) {\n <fd-card-content (click)=\"onRowCheck()\" (dblclick)=\"onRowClick()\" ellipsify>\n <div #divEl [applyConditionalFormats]=\"conditionalFormats\" [styleIndex]=\"styleIndex\" [hostEl]=\"divEl\">\n <ng-container\n *ngTemplateOutlet=\"\n setting.ContentComponent ? contentTemplateComponent : contentTemplateRef;\n context: {\n $implicit: mo,\n index: this.index\n }\n \"\n ></ng-container>\n </div>\n </fd-card-content>\n } @if(detailsText || contextMenuEnabled){\n <fd-card-footer\n (click)=\"!isChecked && onRowCheck()\"\n (dblclick)=\"onRowClick()\"\n [class.hasDetailsAndContextMenu]=\"detailsText && contextMenuEnabled && contextMenuInFooter\"\n [class.!tw-border-y-0]=\"noContent\"\n >\n @if(detailsText){<button *fdCardFooterActionItem fd-button fdType=\"transparent\" [fdPopoverTrigger]=\"popover\">\n {{ detailsText }}\n </button>\n } @if(contextMenuInFooter){\n <div\n *fdCardFooterActionItem\n ulvContextMenu\n [allColumns]=\"allColumns\"\n [footerMode]=\"false\"\n [menuItems]=\"contextMenuItems\"\n [styleIndex]=\"styleIndex\"\n [conditionalFormats]=\"conditionalFormats\"\n [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n [mo]=\"mo\"\n (commandClick)=\"onUlvCommand()\"\n ></div>\n }\n <fd-popover #popover>\n @if (detailsColumns?.length) {\n <ng-container\n *ngTemplateOutlet=\"\n detailsColumnsTemplate;\n context: { mo: mo, inlineEditMode: inlineEditMode, layout94: layout$ | async }\n \"\n ></ng-container>\n }\n </fd-popover>\n </fd-card-footer>\n }\n</fd-card>\n<ng-template #detailsColumnsTemplate let-mo=\"mo\" let-inlineEditMode=\"inlineEditMode\" let-layout94=\"layout94\">\n <ng-container\n *ngTemplateOutlet=\"\n detailsFormItems;\n context: {\n $implicit: detailsColumns,\n mo: this.mo,\n inlineEditMode: this.inlineEditMode,\n layout94: layout94\n }\n \"\n ></ng-container>\n</ng-template>\n<ng-template\n #detailsFormItems\n let-detailsColumns\n let-mo=\"mo\"\n let-inlineEditMode=\"inlineEditMode\"\n let-layout94=\"layout94\"\n>\n <div class=\"form-items\" class=\"tw-p-2\">\n @for (column of detailsColumns; track column; let columnIndex = $index) {\n <div fd-form-item class=\"!tw-flex-row\">\n @if(!column.$CustomComponent?.HideColumnCaption) {<label fd-form-label for=\"input-2\"\n >{{ column.Caption }}<span>:</span></label\n >}\n <ng-container\n *ngTemplateOutlet=\"\n columnTemplate;\n context: {\n $implicit: column,\n mo: mo,\n index: columnIndex,\n inlineEditMode: inlineEditMode,\n layout94: layout94\n }\n \"\n ></ng-container>\n </div>\n }\n </div>\n</ng-template>\n<ng-template\n #columnTemplate\n let-column\n let-mo=\"mo\"\n let-index=\"index\"\n let-layout94=\"layout94\"\n let-disableEllapsis=\"disableEllapsis\"\n let-fdTextMode=\"fdTextMode\"\n>\n @if (column) {\n <bsu-barsa-table-column\n [mo]=\"mo\"\n [allColumns]=\"allColumns\"\n [column]=\"column\"\n [isdirty]=\"false\"\n [value]=\"column | columnValue: mo\"\n [icon]=\"column | columnIcon: mo\"\n [customComponent]=\"column.$CustomComponent\"\n [column]=\"column\"\n [disableEllapsis]=\"disableEllapsis === false ? false : true\"\n [fdTextMode]=\"fdTextMode\"\n [editMode]=\"isChecked && inlineEditMode && allowInlineEdit\"\n [inlineEditMode]=\"inlineEditMode\"\n [isChecked]=\"isChecked\"\n [index]=\"index\"\n [formSetting]=\"formSetting\"\n [rtl]=\"rtl\"\n [deviceName]=\"deviceName\"\n [deviceSize]=\"deviceSize\"\n [layout94]=\"layout94\"\n (save)=\"onEditFormPanelSave(null)\"\n (cancel)=\"onEditFormPanelCancel(null)\"\n (tab)=\"onTabKeyDown($event, index)\"\n (changeToEditMode)=\"onColumnChangeToEditMode($event, index)\"\n >\n </bsu-barsa-table-column>\n\n }\n</ng-template>\n<ng-template #quickViewTemplate let-mo let-index=\"index\">\n @if (!noContent) {\n <fd-quick-view [id]=\"'id'\">\n <fd-quick-view-group>\n @for (column of setting.FieldListMapped; track column) {\n <fd-quick-view-group-item [class.rowDirection]=\"column?.$CustomComponent?.IsRowDirection\">\n @if (column) { @if(!column.$CustomComponent?.HideColumnCaption) {<fd-quick-view-group-item-label>\n {{ column.Caption | bbbTranslate }} </fd-quick-view-group-item-label\n >}\n <fd-quick-view-group-item-content>\n <div fd-quick-view-group-item-content-element class=\"group-item-content\">\n <ng-container\n *ngTemplateOutlet=\"\n columnTemplate;\n context: {\n $implicit: column,\n layout94: layout$ | async,\n mo: mo,\n index: index\n }\n \"\n ></ng-container>\n </div>\n </fd-quick-view-group-item-content>\n }\n </fd-quick-view-group-item>\n } @if (setting.DescriptionField) {\n <fd-quick-view-group-item>\n <fd-quick-view-group-item-content>\n @if (inlineEditMode && allowInlineEdit) {\n <fd-quick-view-group-item-label>\n {{ setting.DescriptionField?.Alias | bbbTranslate }}\n </fd-quick-view-group-item-label>\n }\n <div fd-quick-view-group-item-content-element class=\"group-item-content\">\n <ng-container\n *ngTemplateOutlet=\"\n columnTemplate;\n context: {\n $implicit: setting.DescriptionField,\n layout94: layout$ | async,\n mo: mo,\n index: index\n }\n \"\n ></ng-container>\n </div>\n </fd-quick-view-group-item-content>\n @if (setting.ActionFieldNameField) {\n <fd-quick-view-group-item-content\n class=\"action\"\n (click)=\"onAction(setting.ActionFieldCommandField || '')\"\n >\n <a fd-link>\n <ng-container\n *ngTemplateOutlet=\"\n columnTemplate;\n context: {\n $implicit: setting.ActionFieldNameField,\n layout94: layout$ | async,\n mo: mo,\n index: index\n }\n \"\n ></ng-container>\n </a>\n </fd-quick-view-group-item-content>\n }\n </fd-quick-view-group-item>\n }\n </fd-quick-view-group>\n </fd-quick-view>\n }\n</ng-template>\n<ng-template #contentTemplate let-mo let-index=\"index\">\n <fd-layout-grid>\n <div fdLayoutGridRow style=\"align-items: center\">\n <div [fdLayoutGridCol]=\"12\">\n @for (column of setting.FieldListMapped; track column) {\n <div style=\"display: flex\">\n <label fd-form-label [colon]=\"true\">{{ column.Caption | bbbTranslate }}</label>\n <ng-container\n *ngTemplateOutlet=\"\n columnTemplate;\n context: {\n $implicit: column,\n layout94: layout$ | async,\n mo: mo,\n index: index\n }\n \"\n ></ng-container>\n </div>\n }\n </div>\n @if (setting.DescriptionField) {\n <div [fdLayoutGridCol]=\"12\">\n @if (inlineEditMode && allowInlineEdit) {\n <label>\n {{ setting.DescriptionField?.Alias | bbbTranslate }}\n </label>\n }\n <ng-container\n *ngTemplateOutlet=\"\n columnTemplate;\n context: {\n $implicit: setting.DescriptionField,\n layout94: layout$ | async,\n mo: mo,\n index: index\n }\n \"\n ></ng-container>\n </div>\n }\n </div>\n </fd-layout-grid>\n</ng-template>\n<ng-template #avatar let-avatar let-visible=\"visible\" let-circle=\"circle\" let-avatarField=\"avatarField\">\n @if (visible) {\n <fd-avatar\n alterIcon=\"alt|content|backup|default-icon\"\n [circle]=\"circle\"\n [image]=\"avatarField ? (mo[avatarField.Name]?.FileId | picFieldSrc: 'ID':avatarField.FieldDefId) : ''\"\n [size]=\"\n deviceSize === 'xl' || deviceSize === 'l' ? setting.AvatarSizeDesktop$Caption : setting.AvatarSize$Caption\n \"\n [glyph]=\"avatar || (mo.$State === 'New' && !isChecked ? 'favorite' : inlineEditMode && isChecked ? 'edit' : '')\"\n >\n </fd-avatar>\n }\n</ng-template>\n\n<ng-template #contentTemplateComponent let-mo let-index=\"index\">\n <bnrc-dynamic-item-component\n [component]=\"setting.ContentComponent\"\n [mo]=\"mo\"\n [styleIndex]=\"mo.$StyleIndex\"\n [isChecked]=\"isChecked\"\n [setting]=\"setting\"\n [parameters]=\"setting.ContentComponent.Settings\"\n [editMode]=\"inlineEditMode\"\n [rtl]=\"rtl\"\n [deviceName]=\"deviceName\"\n [deviceSize]=\"deviceSize\"\n [index]=\"index\"\n [allColumns]=\"allColumns\"\n ></bnrc-dynamic-item-component>\n</ng-template>\n\n<ng-template #renderHeader let-mo let-index=\"index\">\n @if(!hideOpenIcon && (openOnClick || (canView && deviceName !== 'desktop'))){\n <ng-container\n *ngTemplateOutlet=\"\n renderHeaderMobileCanView;\n context: {\n $implicit: mo,\n index: index\n }\n \"\n ></ng-container>\n }@else{\n <ng-container\n *ngTemplateOutlet=\"\n renderHeaderDesktop;\n context: {\n $implicit: mo,\n index: index\n }\n \"\n ></ng-container>\n }\n</ng-template>\n<ng-template #renderHeaderDesktop let-mo let-index=\"index\">\n <fd-card-header class=\"HeaderDesktop\">\n <div>\n @if(isCheckList){\n <fd-checkbox [name]=\"mo.$Caption\" [ngModel]=\"isChecked\" (ngModelChange)=\"onRowCheck()\"></fd-checkbox>\n }\n </div>\n <fd-card-main-header (click)=\"onRowCheck()\" (dblclick)=\"onRowClick()\">\n @if (setting.AvatarField || setting.Avatar) {\n <fd-avatar\n alterIcon=\"alt|content|backup|default-icon\"\n [circle]=\"setting.CircleAvatar\"\n [image]=\"\n setting.AvatarField\n ? (mo[setting.AvatarField.Name]?.FileId | picFieldSrc: 'ID':setting.AvatarField.FieldDefId)\n : ''\n \"\n [size]=\"\n deviceSize === 'xl' || deviceSize === 'l'\n ? setting.AvatarSizeDesktop$Caption\n : setting.AvatarSize$Caption\n \"\n [glyph]=\"\n setting.Avatar ||\n (mo.$State === 'New' && !isChecked ? 'favorite' : inlineEditMode && isChecked ? 'edit' : '')\n \"\n ></fd-avatar>\n }\n <h2 fd-card-title>\n <ng-container\n *ngTemplateOutlet=\"\n columnTemplate;\n context: {\n $implicit: setting.TitleField,\n layout94: layout$ | async,\n mo: mo,\n index: index,\n disableEllapsis: false,\n fdTextMode: true\n }\n \"\n ></ng-container>\n </h2>\n <h3 fd-card-subtitle>\n <ng-container\n *ngTemplateOutlet=\"\n columnTemplate;\n context: {\n $implicit: setting.SubtitleField,\n layout94: layout$ | async,\n mo: mo,\n index: index,\n disableEllapsis: false\n }\n \"\n ></ng-container>\n </h3>\n @if (!contextMenuInFooter && (contextMenuItems && contextMenuItems.length > 0)) {\n <div\n ulvContextMenu\n [allColumns]=\"allColumns\"\n [footerMode]=\"false\"\n [menuItems]=\"contextMenuItems\"\n [styleIndex]=\"styleIndex\"\n [conditionalFormats]=\"conditionalFormats\"\n [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n [mo]=\"mo\"\n (commandClick)=\"onUlvCommand()\"\n ></div>\n }\n </fd-card-main-header>\n </fd-card-header>\n</ng-template>\n<ng-template #renderHeaderMobileCanView let-mo let-index=\"index\">\n <fd-card-header class=\"HeaderMobileCanView\">\n <div>\n @if(isCheckList){\n <fd-checkbox [name]=\"mo.$Caption\" [ngModel]=\"isChecked\" (ngModelChange)=\"onRowCheck()\"></fd-checkbox>\n }\n </div>\n <fd-card-main-header (click)=\"onRowCheck()\" (dblclick)=\"onRowClick()\">\n @if (setting.AvatarField || setting.Avatar) {\n <fd-avatar\n alterIcon=\"alt|content|backup|default-icon\"\n [circle]=\"setting.CircleAvatar\"\n [image]=\"\n setting.AvatarField\n ? (mo[setting.AvatarField.Name]?.FileId | picFieldSrc: 'ID':setting.AvatarField.FieldDefId)\n : ''\n \"\n [size]=\"\n deviceSize === 'xl' || deviceSize === 'l'\n ? setting.AvatarSizeDesktop$Caption\n : setting.AvatarSize$Caption\n \"\n [glyph]=\"\n setting.Avatar ||\n (mo.$State === 'New' && !isChecked ? 'favorite' : inlineEditMode && isChecked ? 'edit' : '')\n \"\n ></fd-avatar>\n }\n <h2 fd-card-title>\n <ng-container\n *ngTemplateOutlet=\"\n columnTemplate;\n context: {\n $implicit: setting.TitleField,\n layout94: layout$ | async,\n mo: mo,\n index: index,\n fdTextMode: true\n }\n \"\n ></ng-container>\n </h2>\n <h3 fd-card-subtitle>\n <ng-container\n *ngTemplateOutlet=\"\n columnTemplate;\n context: {\n $implicit: setting.SubtitleField,\n layout94: layout$ | async,\n mo: mo,\n index: index\n }\n \"\n ></ng-container>\n </h3>\n <button\n fd-card-header-action\n fd-button\n class=\"view-btn\"\n (click)=\"onRowClick()\"\n [glyph]=\"navigationArrow\"\n fdType=\"transparent\"\n ></button>\n </fd-card-main-header>\n </fd-card-header>\n</ng-template>\n<ng-template #renderHeaderComponent let-mo let-index=\"index\">\n <bnrc-dynamic-item-component\n [component]=\"setting.HeaderComponent\"\n [mo]=\"mo\"\n [styleIndex]=\"mo.$StyleIndex\"\n [isChecked]=\"isChecked\"\n [setting]=\"setting\"\n [parameters]=\"setting.HeaderComponent.Settings\"\n [editMode]=\"inlineEditMode\"\n [rtl]=\"rtl\"\n [deviceName]=\"deviceName\"\n [deviceSize]=\"deviceSize\"\n [index]=\"index\"\n [allColumns]=\"allColumns\"\n [contextMenuItems]=\"contextMenuItems\"\n [canView]=\"canView\"\n [conditionalFormats]=\"conditionalFormats\"\n [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n [navigationArrow]=\"navigationArrow\"\n [isCheckList]=\"isCheckList\"\n (events)=\"onDynamicComponentEvents($event)\"\n ></bnrc-dynamic-item-component>\n</ng-template>\n", styles: ["fd-card:hover{box-shadow:0 0 0 .0625rem #2235487a,0 .625rem 1.875rem #22354840}fd-card div[ulvcontextmenu] ::ng-deep .fd-bar{background-color:transparent}fd-card ::ng-deep bsu-column-renderer div.renderGeneral{font-family:IranYekanDigits}fd-card fd-card-footer.hasDetailsAndContextMenu ::ng-deep .fd-card__footer-actions{justify-content:space-between!important}fd-card fd-card-content{padding:0!important}fd-card fd-card-content>div>fd-quick-view ::ng-deep .fd-quick-view__content{padding-top:0}fd-card fd-card-content>div>fd-quick-view fd-quick-view-group-item.rowDirection ::ng-deep .fd-form-item{flex-direction:row}fd-card fd-card-header{padding:.5rem}fd-card fd-card-header:hover{background:var(--fdCard_Background_Color)}fd-card fd-card-header .fd-card__title{display:flex;justify-content:space-between;align-items:center;width:100%}fd-card fd-card-header button,fd-card fd-card-header div[ulvcontextmenu]{z-index:6}fd-card fd-card-header:hover{background:inherit}fd-quick-view-subheader ::ng-deep div{background:inherit}.action{cursor:pointer;margin-top:6px;flex:1;display:flex;justify-content:end;flex-direction:column}.openOnClick{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.DynamicItemComponent, selector: "bnrc-dynamic-item-component", inputs: ["mo", "allColumns", "moDataList", "columns", "column", "index", "last", "deviceName", "deviceSize", "rtl", "editMode", "setting", "parameters", "contextMenuItems", "canView", "showRowNumber", "rowNumber", "formSetting", "conditionalFormats", "disableOverflowContextMenu", "navigationArrow", "isCheckList", "fields", "isChecked", "layout94$", "inlineEditMode", "isNewInlineMo", "allowInlineEdit", "typeDefId", "rowIndicator", "rowIndicatorColor", "UlvMainCtrlr"] }, { kind: "directive", type: i2.EllipsifyDirective, selector: "[ellipsify]", inputs: ["limitLine"] }, { kind: "component", type: i3$5.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "font", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "random", "clickable", "valueState", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i2$5.LinkComponent, selector: "[fdLink], [fd-link]", inputs: ["class", "emphasized", "disabled", "inverted", "subtle", "undecorated"] }, { kind: "component", type: i4$1.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i5$2.CardComponent, selector: "fd-card", inputs: ["badge", "badgeIcon", "badgeColor", "badgeColorSecondary", "badgeStatus", "badgeAriaLabel", "secondBadge", "secondBadgeIcon", "secondBadgeColor", "secondBadgeColorSecondary", "secondBadgeStatus", "secondBadgeAriaLabel", "isLoading", "cardType", "id", "ariaRoledescription", "ariaDescription", "ariaLabel", "role", "interactive", "selected", "ariaPosinset", "ariaSetsize"], outputs: ["ariaPosinsetChange", "ariaSetsizeChange"] }, { kind: "component", type: i5$2.CardHeaderComponent, selector: "fd-card-header", inputs: ["ariaRoleDescription"] }, { kind: "component", type: i5$2.CardMainHeaderComponent, selector: "fd-card-main-header", inputs: ["interactive", "title"] }, { kind: "directive", type: i5$2.CardHeaderActionDirective, selector: "[fd-card-header-action]" }, { kind: "component", type: i5$2.CardContentComponent, selector: "fd-card-content" }, { kind: "directive", type: i5$2.CardTitleDirective, selector: "[fd-card-title]", inputs: ["id"] }, { kind: "directive", type: i5$2.CardSubtitleDirective, selector: "[fd-card-subtitle]" }, { kind: "component", type: i5$2.CardFooterComponent, selector: "fd-card-footer" }, { kind: "directive", type: i5$2.CardFooterActionItemDirective, selector: "[fdCardFooterActionItem]" }, { kind: "component", type: i5.CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "role", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "component", type: i2$1.FormItemComponent, selector: "[fd-form-item]", inputs: ["isInline", "horizontal"] }, { kind: "component", type: i2$1.FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "alignLabelEnd", "inlineHelpContent", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "inlineHelpLabel", "id"] }, { kind: "component", type: i4$3.LayoutGridComponent, selector: "fd-layout-grid, [fdLayoutGrid]", inputs: ["class", "noGap", "noHorizontalGap", "noVerticalGap"] }, { kind: "directive", type: i4$3.LayoutGridColDirective, selector: "[fd-layout-grid-col], [fdLayoutGridCol]", inputs: ["fdLayoutGridCol", "colGrow", "colMd", "colLg", "colXl", "colOffset", "colOffsetMd", "colOffsetLg", "colOffsetXl", "class"] }, { kind: "directive", type: i4$3.LayoutGridRowDirective, selector: "[fd-layout-grid-row], [fdLayoutGridRow]" }, { kind: "component", type: i7$3.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll"] }, { kind: "directive", type: i7$3.PopoverTriggerDirective, selector: "[fdPopoverTrigger], [fd-popover-trigger]", inputs: ["fdPopoverTrigger"] }, { kind: "component", type: i12.QuickViewComponent, selector: "fd-quick-view", inputs: ["id"] }, { kind: "component", type: i12.QuickViewGroupComponent, selector: "fd-quick-view-group" }, { kind: "component", type: i12.QuickViewGroupItemComponent, selector: "fd-quick-view-group-item", inputs: ["id"] }, { kind: "component", type: i12.QuickViewGroupItemLabelComponent, selector: "fd-quick-view-group-item-label" }, { kind: "component", type: i12.QuickViewGroupItemContentComponent, selector: "fd-quick-view-group-item-content" }, { kind: "directive", type: i12.QuickViewGroupItemContentElementDirective, selector: "[fd-quick-view-group-item-content-element]" }, { kind: "component", type: UlvContextMenuComponent, selector: "bsu-ulv-context-menu,[ulvContextMenu]", inputs: ["onlyOverflow", "rightClickEnable", "deviceName", "menuItems", "allColumns", "index", "mo", "styleIndex", "conditionalFormats", "disableOverflowContextMenu", "footerMode", "appendTo"], outputs: ["commandClick"] }, { kind: "component", type: BarsaTableColumnComponent, selector: "bsu-barsa-table-column", inputs: ["disableEllapsis", "fdTextMode"] }, { kind: "directive", type: ApplyConditionalFormatsDirective, selector: "[applyConditionalFormats]", inputs: ["applyConditionalFormats", "styleIndex", "hostEl", "dbName"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i2.ColumnIconPipe, name: "columnIcon" }, { kind: "pipe", type: i2.ColumnValuePipe, name: "columnValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5318
5322
|
}
|
|
5319
5323
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: CardItemComponent, decorators: [{
|
|
5320
5324
|
type: Component,
|
|
5321
|
-
args: [{ selector: 'bsu-card-item', providers: [FormPanelService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-card\n [cardType]=\"setting.CardType$Caption\"\n class=\"docs-flex-item-margin\"\n [class.openOnClick]=\"setting.openOnClick\"\n [style.width]=\"cardWidth\"\n [style.min-width]=\"minWidth\"\n [style.max-width]=\"maxWidth\"\n>\n <ng-container\n *ngTemplateOutlet=\"\n setting.HeaderComponent ? renderHeaderComponent : renderHeader;\n context: {\n $implicit: mo,\n index: this.index\n }\n \"\n ></ng-container>\n\n @if (!noContent || contextMenuItems) {\n <fd-card-content (click)=\"onRowCheck()\" (dblclick)=\"onRowClick()\" ellipsify>\n <div #divEl [applyConditionalFormats]=\"conditionalFormats\" [styleIndex]=\"styleIndex\" [hostEl]=\"divEl\">\n <ng-container\n *ngTemplateOutlet=\"\n setting.ContentComponent ? contentTemplateComponent : contentTemplateRef;\n context: {\n $implicit: mo,\n index: this.index\n }\n \"\n ></ng-container>\n </div>\n </fd-card-content>\n } @if(detailsText || contextMenuEnabled){\n <fd-card-footer\n (click)=\"!isChecked && onRowCheck()\"\n (dblclick)=\"onRowClick()\"\n [class.hasDetailsAndContextMenu]=\"detailsText && contextMenuEnabled && contextMenuInFooter\"\n [class.!tw-border-y-0]=\"noContent\"\n >\n @if(detailsText){<button *fdCardFooterActionItem fd-button fdType=\"transparent\" [fdPopoverTrigger]=\"popover\">\n {{ detailsText }}\n </button>\n } @if(contextMenuInFooter){\n <div\n *fdCardFooterActionItem\n ulvContextMenu\n [allColumns]=\"allColumns\"\n [footerMode]=\"false\"\n [menuItems]=\"contextMenuItems\"\n [styleIndex]=\"styleIndex\"\n [conditionalFormats]=\"conditionalFormats\"\n [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n [mo]=\"mo\"\n (commandClick)=\"onUlvCommand()\"\n ></div>\n }\n <fd-popover #popover>\n @if (detailsColumns?.length) {\n <ng-container\n *ngTemplateOutlet=\"\n detailsColumnsTemplate;\n context: { mo: mo, inlineEditMode: inlineEditMode, layout94: layout$ | async }\n \"\n ></ng-container>\n }\n </fd-popover>\n </fd-card-footer>\n }\n</fd-card>\n<ng-template #detailsColumnsTemplate let-mo=\"mo\" let-inlineEditMode=\"inlineEditMode\" let-layout94=\"layout94\">\n <ng-container\n *ngTemplateOutlet=\"\n detailsFormItems;\n context: {\n $implicit: detailsColumns,\n mo: this.mo,\n inlineEditMode: this.inlineEditMode,\n layout94: layout94\n }\n \"\n ></ng-container>\n</ng-template>\n<ng-template\n #detailsFormItems\n let-detailsColumns\n let-mo=\"mo\"\n let-inlineEditMode=\"inlineEditMode\"\n let-layout94=\"layout94\"\n>\n <div class=\"form-items\" class=\"tw-p-2\">\n @for (column of detailsColumns; track column; let columnIndex = $index) {\n <div fd-form-item class=\"!tw-flex-row\">\n @if(!column.$CustomComponent?.HideColumnCaption) {<label fd-form-label for=\"input-2\"\n >{{ column.Caption }}<span>:</span></label\n >}\n <ng-container\n *ngTemplateOutlet=\"\n columnTemplate;\n context: {\n $implicit: column,\n mo: mo,\n index: columnIndex,\n inlineEditMode: inlineEditMode,\n layout94: layout94\n }\n \"\n ></ng-container>\n </div>\n }\n </div>\n</ng-template>\n<ng-template\n #columnTemplate\n let-column\n let-mo=\"mo\"\n let-index=\"index\"\n let-layout94=\"layout94\"\n let-disableEllapsis=\"disableEllapsis\"\n>\n @if (column) {\n <bsu-barsa-table-column\n [mo]=\"mo\"\n [allColumns]=\"allColumns\"\n [column]=\"column\"\n [isdirty]=\"false\"\n [value]=\"column | columnValue: mo\"\n [icon]=\"column | columnIcon: mo\"\n [customComponent]=\"column.$CustomComponent\"\n [column]=\"column\"\n [disableEllapsis]=\"disableEllapsis === false ? false : true\"\n [editMode]=\"isChecked && inlineEditMode && allowInlineEdit\"\n [inlineEditMode]=\"inlineEditMode\"\n [isChecked]=\"isChecked\"\n [index]=\"index\"\n [formSetting]=\"formSetting\"\n [rtl]=\"rtl\"\n [deviceName]=\"deviceName\"\n [deviceSize]=\"deviceSize\"\n [layout94]=\"layout94\"\n (save)=\"onEditFormPanelSave(null)\"\n (cancel)=\"onEditFormPanelCancel(null)\"\n (tab)=\"onTabKeyDown($event, index)\"\n (changeToEditMode)=\"onColumnChangeToEditMode($event, index)\"\n >\n </bsu-barsa-table-column>\n\n }\n</ng-template>\n<ng-template #quickViewTemplate let-mo let-index=\"index\">\n @if (!noContent) {\n <fd-quick-view [id]=\"'id'\">\n <fd-quick-view-group>\n @for (column of setting.FieldListMapped; track column) {\n <fd-quick-view-group-item [class.rowDirection]=\"column?.$CustomComponent?.IsRowDirection\">\n @if (column) { @if(!column.$CustomComponent?.HideColumnCaption) {<fd-quick-view-group-item-label>\n {{ column.Caption | bbbTranslate }} </fd-quick-view-group-item-label\n >}\n <fd-quick-view-group-item-content>\n <div fd-quick-view-group-item-content-element class=\"group-item-content\">\n <ng-container\n *ngTemplateOutlet=\"\n columnTemplate;\n context: {\n $implicit: column,\n layout94: layout$ | async,\n mo: mo,\n index: index\n }\n \"\n ></ng-container>\n </div>\n </fd-quick-view-group-item-content>\n }\n </fd-quick-view-group-item>\n } @if (setting.DescriptionField) {\n <fd-quick-view-group-item>\n <fd-quick-view-group-item-content>\n @if (inlineEditMode && allowInlineEdit) {\n <fd-quick-view-group-item-label>\n {{ setting.DescriptionField?.Alias | bbbTranslate }}\n </fd-quick-view-group-item-label>\n }\n <div fd-quick-view-group-item-content-element class=\"group-item-content\">\n <ng-container\n *ngTemplateOutlet=\"\n columnTemplate;\n context: {\n $implicit: setting.DescriptionField,\n layout94: layout$ | async,\n mo: mo,\n index: index\n }\n \"\n ></ng-container>\n </div>\n </fd-quick-view-group-item-content>\n @if (setting.ActionFieldNameField) {\n <fd-quick-view-group-item-content\n class=\"action\"\n (click)=\"onAction(setting.ActionFieldCommandField || '')\"\n >\n <a fd-link>\n <ng-container\n *ngTemplateOutlet=\"\n columnTemplate;\n context: {\n $implicit: setting.ActionFieldNameField,\n layout94: layout$ | async,\n mo: mo,\n index: index\n }\n \"\n ></ng-container>\n </a>\n </fd-quick-view-group-item-content>\n }\n </fd-quick-view-group-item>\n }\n </fd-quick-view-group>\n </fd-quick-view>\n }\n</ng-template>\n<ng-template #contentTemplate let-mo let-index=\"index\">\n <fd-layout-grid>\n <div fdLayoutGridRow style=\"align-items: center\">\n <div [fdLayoutGridCol]=\"12\">\n @for (column of setting.FieldListMapped; track column) {\n <div style=\"display: flex\">\n <label fd-form-label [colon]=\"true\">{{ column.Caption | bbbTranslate }}</label>\n <ng-container\n *ngTemplateOutlet=\"\n columnTemplate;\n context: {\n $implicit: column,\n layout94: layout$ | async,\n mo: mo,\n index: index\n }\n \"\n ></ng-container>\n </div>\n }\n </div>\n @if (setting.DescriptionField) {\n <div [fdLayoutGridCol]=\"12\">\n @if (inlineEditMode && allowInlineEdit) {\n <label>\n {{ setting.DescriptionField?.Alias | bbbTranslate }}\n </label>\n }\n <ng-container\n *ngTemplateOutlet=\"\n columnTemplate;\n context: {\n $implicit: setting.DescriptionField,\n layout94: layout$ | async,\n mo: mo,\n index: index\n }\n \"\n ></ng-container>\n </div>\n }\n </div>\n </fd-layout-grid>\n</ng-template>\n<ng-template #avatar let-avatar let-visible=\"visible\" let-circle=\"circle\" let-avatarField=\"avatarField\">\n @if (visible) {\n <fd-avatar\n alterIcon=\"alt|content|backup|default-icon\"\n [circle]=\"circle\"\n [image]=\"avatarField ? (mo[avatarField.Name]?.FileId | picFieldSrc: 'ID':avatarField.FieldDefId) : ''\"\n [size]=\"\n deviceSize === 'xl' || deviceSize === 'l' ? setting.AvatarSizeDesktop$Caption : setting.AvatarSize$Caption\n \"\n [glyph]=\"avatar || (mo.$State === 'New' && !isChecked ? 'favorite' : inlineEditMode && isChecked ? 'edit' : '')\"\n >\n </fd-avatar>\n }\n</ng-template>\n\n<ng-template #contentTemplateComponent let-mo let-index=\"index\">\n <bnrc-dynamic-item-component\n [component]=\"setting.ContentComponent\"\n [mo]=\"mo\"\n [styleIndex]=\"mo.$StyleIndex\"\n [isChecked]=\"isChecked\"\n [setting]=\"setting\"\n [parameters]=\"setting.ContentComponent.Settings\"\n [editMode]=\"inlineEditMode\"\n [rtl]=\"rtl\"\n [deviceName]=\"deviceName\"\n [deviceSize]=\"deviceSize\"\n [index]=\"index\"\n [allColumns]=\"allColumns\"\n ></bnrc-dynamic-item-component>\n</ng-template>\n\n<ng-template #renderHeader let-mo let-index=\"index\">\n @if(!hideOpenIcon && (openOnClick || (canView && deviceName !== 'desktop'))){\n <ng-container\n *ngTemplateOutlet=\"\n renderHeaderMobileCanView;\n context: {\n $implicit: mo,\n index: index\n }\n \"\n ></ng-container>\n }@else{\n <ng-container\n *ngTemplateOutlet=\"\n renderHeaderDesktop;\n context: {\n $implicit: mo,\n index: index\n }\n \"\n ></ng-container>\n }\n</ng-template>\n<ng-template #renderHeaderDesktop let-mo let-index=\"index\">\n <fd-card-header class=\"HeaderDesktop\">\n <div>\n @if(isCheckList){\n <fd-checkbox [name]=\"mo.$Caption\" [ngModel]=\"isChecked\" (ngModelChange)=\"onRowCheck()\"></fd-checkbox>\n }\n </div>\n <fd-card-main-header (click)=\"onRowCheck()\" (dblclick)=\"onRowClick()\">\n @if (setting.AvatarField || setting.Avatar) {\n <fd-avatar\n alterIcon=\"alt|content|backup|default-icon\"\n [circle]=\"setting.CircleAvatar\"\n [image]=\"\n setting.AvatarField\n ? (mo[setting.AvatarField.Name]?.FileId | picFieldSrc: 'ID':setting.AvatarField.FieldDefId)\n : ''\n \"\n [size]=\"\n deviceSize === 'xl' || deviceSize === 'l'\n ? setting.AvatarSizeDesktop$Caption\n : setting.AvatarSize$Caption\n \"\n [glyph]=\"\n setting.Avatar ||\n (mo.$State === 'New' && !isChecked ? 'favorite' : inlineEditMode && isChecked ? 'edit' : '')\n \"\n ></fd-avatar>\n }\n <h2 fd-card-title>\n <ng-container\n *ngTemplateOutlet=\"\n columnTemplate;\n context: {\n $implicit: setting.TitleField,\n layout94: layout$ | async,\n mo: mo,\n index: index,\n disableEllapsis: false\n }\n \"\n ></ng-container>\n </h2>\n <h3 fd-card-subtitle>\n <ng-container\n *ngTemplateOutlet=\"\n columnTemplate;\n context: {\n $implicit: setting.SubtitleField,\n layout94: layout$ | async,\n mo: mo,\n index: index,\n disableEllapsis: false\n }\n \"\n ></ng-container>\n </h3>\n @if (!contextMenuInFooter && (contextMenuItems && contextMenuItems.length > 0)) {\n <div\n ulvContextMenu\n [allColumns]=\"allColumns\"\n [footerMode]=\"false\"\n [menuItems]=\"contextMenuItems\"\n [styleIndex]=\"styleIndex\"\n [conditionalFormats]=\"conditionalFormats\"\n [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n [mo]=\"mo\"\n (commandClick)=\"onUlvCommand()\"\n ></div>\n }\n </fd-card-main-header>\n </fd-card-header>\n</ng-template>\n<ng-template #renderHeaderMobileCanView let-mo let-index=\"index\">\n <fd-card-header class=\"HeaderMobileCanView\">\n <div>\n @if(isCheckList){\n <fd-checkbox [name]=\"mo.$Caption\" [ngModel]=\"isChecked\" (ngModelChange)=\"onRowCheck()\"></fd-checkbox>\n }\n </div>\n <fd-card-main-header (click)=\"onRowCheck()\" (dblclick)=\"onRowClick()\">\n @if (setting.AvatarField || setting.Avatar) {\n <fd-avatar\n alterIcon=\"alt|content|backup|default-icon\"\n [circle]=\"setting.CircleAvatar\"\n [image]=\"\n setting.AvatarField\n ? (mo[setting.AvatarField.Name]?.FileId | picFieldSrc: 'ID':setting.AvatarField.FieldDefId)\n : ''\n \"\n [size]=\"\n deviceSize === 'xl' || deviceSize === 'l'\n ? setting.AvatarSizeDesktop$Caption\n : setting.AvatarSize$Caption\n \"\n [glyph]=\"\n setting.Avatar ||\n (mo.$State === 'New' && !isChecked ? 'favorite' : inlineEditMode && isChecked ? 'edit' : '')\n \"\n ></fd-avatar>\n }\n <h2 fd-card-title>\n <ng-container\n *ngTemplateOutlet=\"\n columnTemplate;\n context: {\n $implicit: setting.TitleField,\n layout94: layout$ | async,\n mo: mo,\n index: index\n }\n \"\n ></ng-container>\n </h2>\n <h3 fd-card-subtitle>\n <ng-container\n *ngTemplateOutlet=\"\n columnTemplate;\n context: {\n $implicit: setting.SubtitleField,\n layout94: layout$ | async,\n mo: mo,\n index: index\n }\n \"\n ></ng-container>\n </h3>\n <button\n fd-card-header-action\n fd-button\n class=\"view-btn\"\n (click)=\"onRowClick()\"\n [glyph]=\"navigationArrow\"\n fdType=\"transparent\"\n ></button>\n </fd-card-main-header>\n </fd-card-header>\n</ng-template>\n<ng-template #renderHeaderComponent let-mo let-index=\"index\">\n <bnrc-dynamic-item-component\n [component]=\"setting.HeaderComponent\"\n [mo]=\"mo\"\n [styleIndex]=\"mo.$StyleIndex\"\n [isChecked]=\"isChecked\"\n [setting]=\"setting\"\n [parameters]=\"setting.HeaderComponent.Settings\"\n [editMode]=\"inlineEditMode\"\n [rtl]=\"rtl\"\n [deviceName]=\"deviceName\"\n [deviceSize]=\"deviceSize\"\n [index]=\"index\"\n [allColumns]=\"allColumns\"\n [contextMenuItems]=\"contextMenuItems\"\n [canView]=\"canView\"\n [conditionalFormats]=\"conditionalFormats\"\n [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n [navigationArrow]=\"navigationArrow\"\n [isCheckList]=\"isCheckList\"\n (events)=\"onDynamicComponentEvents($event)\"\n ></bnrc-dynamic-item-component>\n</ng-template>\n", styles: ["fd-card:hover{box-shadow:0 0 0 .0625rem #2235487a,0 .625rem 1.875rem #22354840}fd-card div[ulvcontextmenu] ::ng-deep .fd-bar{background-color:transparent}fd-card ::ng-deep bsu-column-renderer div.renderGeneral{font-family:IranYekanDigits}fd-card fd-card-footer.hasDetailsAndContextMenu ::ng-deep .fd-card__footer-actions{justify-content:space-between!important}fd-card fd-card-content{padding:0!important}fd-card fd-card-content>div>fd-quick-view ::ng-deep .fd-quick-view__content{padding-top:0}fd-card fd-card-content>div>fd-quick-view fd-quick-view-group-item.rowDirection ::ng-deep .fd-form-item{flex-direction:row}fd-card fd-card-header{padding:.5rem}fd-card fd-card-header:hover{background:var(--fdCard_Background_Color)}fd-card fd-card-header .fd-card__title{display:flex;justify-content:space-between;align-items:center;width:100%}fd-card fd-card-header button,fd-card fd-card-header div[ulvcontextmenu]{z-index:6}fd-card fd-card-header:hover{background:inherit}fd-quick-view-subheader ::ng-deep div{background:inherit}.action{cursor:pointer;margin-top:6px;flex:1;display:flex;justify-content:end;flex-direction:column}.openOnClick{cursor:pointer}\n"] }]
|
|
5325
|
+
args: [{ selector: 'bsu-card-item', providers: [FormPanelService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-card\n [cardType]=\"setting.CardType$Caption\"\n class=\"docs-flex-item-margin\"\n [class.openOnClick]=\"setting.openOnClick\"\n [style.width]=\"cardWidth\"\n [style.min-width]=\"minWidth\"\n [style.max-width]=\"maxWidth\"\n>\n <ng-container\n *ngTemplateOutlet=\"\n setting.HeaderComponent ? renderHeaderComponent : renderHeader;\n context: {\n $implicit: mo,\n index: this.index\n }\n \"\n ></ng-container>\n\n @if (!noContent || contextMenuItems) {\n <fd-card-content (click)=\"onRowCheck()\" (dblclick)=\"onRowClick()\" ellipsify>\n <div #divEl [applyConditionalFormats]=\"conditionalFormats\" [styleIndex]=\"styleIndex\" [hostEl]=\"divEl\">\n <ng-container\n *ngTemplateOutlet=\"\n setting.ContentComponent ? contentTemplateComponent : contentTemplateRef;\n context: {\n $implicit: mo,\n index: this.index\n }\n \"\n ></ng-container>\n </div>\n </fd-card-content>\n } @if(detailsText || contextMenuEnabled){\n <fd-card-footer\n (click)=\"!isChecked && onRowCheck()\"\n (dblclick)=\"onRowClick()\"\n [class.hasDetailsAndContextMenu]=\"detailsText && contextMenuEnabled && contextMenuInFooter\"\n [class.!tw-border-y-0]=\"noContent\"\n >\n @if(detailsText){<button *fdCardFooterActionItem fd-button fdType=\"transparent\" [fdPopoverTrigger]=\"popover\">\n {{ detailsText }}\n </button>\n } @if(contextMenuInFooter){\n <div\n *fdCardFooterActionItem\n ulvContextMenu\n [allColumns]=\"allColumns\"\n [footerMode]=\"false\"\n [menuItems]=\"contextMenuItems\"\n [styleIndex]=\"styleIndex\"\n [conditionalFormats]=\"conditionalFormats\"\n [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n [mo]=\"mo\"\n (commandClick)=\"onUlvCommand()\"\n ></div>\n }\n <fd-popover #popover>\n @if (detailsColumns?.length) {\n <ng-container\n *ngTemplateOutlet=\"\n detailsColumnsTemplate;\n context: { mo: mo, inlineEditMode: inlineEditMode, layout94: layout$ | async }\n \"\n ></ng-container>\n }\n </fd-popover>\n </fd-card-footer>\n }\n</fd-card>\n<ng-template #detailsColumnsTemplate let-mo=\"mo\" let-inlineEditMode=\"inlineEditMode\" let-layout94=\"layout94\">\n <ng-container\n *ngTemplateOutlet=\"\n detailsFormItems;\n context: {\n $implicit: detailsColumns,\n mo: this.mo,\n inlineEditMode: this.inlineEditMode,\n layout94: layout94\n }\n \"\n ></ng-container>\n</ng-template>\n<ng-template\n #detailsFormItems\n let-detailsColumns\n let-mo=\"mo\"\n let-inlineEditMode=\"inlineEditMode\"\n let-layout94=\"layout94\"\n>\n <div class=\"form-items\" class=\"tw-p-2\">\n @for (column of detailsColumns; track column; let columnIndex = $index) {\n <div fd-form-item class=\"!tw-flex-row\">\n @if(!column.$CustomComponent?.HideColumnCaption) {<label fd-form-label for=\"input-2\"\n >{{ column.Caption }}<span>:</span></label\n >}\n <ng-container\n *ngTemplateOutlet=\"\n columnTemplate;\n context: {\n $implicit: column,\n mo: mo,\n index: columnIndex,\n inlineEditMode: inlineEditMode,\n layout94: layout94\n }\n \"\n ></ng-container>\n </div>\n }\n </div>\n</ng-template>\n<ng-template\n #columnTemplate\n let-column\n let-mo=\"mo\"\n let-index=\"index\"\n let-layout94=\"layout94\"\n let-disableEllapsis=\"disableEllapsis\"\n let-fdTextMode=\"fdTextMode\"\n>\n @if (column) {\n <bsu-barsa-table-column\n [mo]=\"mo\"\n [allColumns]=\"allColumns\"\n [column]=\"column\"\n [isdirty]=\"false\"\n [value]=\"column | columnValue: mo\"\n [icon]=\"column | columnIcon: mo\"\n [customComponent]=\"column.$CustomComponent\"\n [column]=\"column\"\n [disableEllapsis]=\"disableEllapsis === false ? false : true\"\n [fdTextMode]=\"fdTextMode\"\n [editMode]=\"isChecked && inlineEditMode && allowInlineEdit\"\n [inlineEditMode]=\"inlineEditMode\"\n [isChecked]=\"isChecked\"\n [index]=\"index\"\n [formSetting]=\"formSetting\"\n [rtl]=\"rtl\"\n [deviceName]=\"deviceName\"\n [deviceSize]=\"deviceSize\"\n [layout94]=\"layout94\"\n (save)=\"onEditFormPanelSave(null)\"\n (cancel)=\"onEditFormPanelCancel(null)\"\n (tab)=\"onTabKeyDown($event, index)\"\n (changeToEditMode)=\"onColumnChangeToEditMode($event, index)\"\n >\n </bsu-barsa-table-column>\n\n }\n</ng-template>\n<ng-template #quickViewTemplate let-mo let-index=\"index\">\n @if (!noContent) {\n <fd-quick-view [id]=\"'id'\">\n <fd-quick-view-group>\n @for (column of setting.FieldListMapped; track column) {\n <fd-quick-view-group-item [class.rowDirection]=\"column?.$CustomComponent?.IsRowDirection\">\n @if (column) { @if(!column.$CustomComponent?.HideColumnCaption) {<fd-quick-view-group-item-label>\n {{ column.Caption | bbbTranslate }} </fd-quick-view-group-item-label\n >}\n <fd-quick-view-group-item-content>\n <div fd-quick-view-group-item-content-element class=\"group-item-content\">\n <ng-container\n *ngTemplateOutlet=\"\n columnTemplate;\n context: {\n $implicit: column,\n layout94: layout$ | async,\n mo: mo,\n index: index\n }\n \"\n ></ng-container>\n </div>\n </fd-quick-view-group-item-content>\n }\n </fd-quick-view-group-item>\n } @if (setting.DescriptionField) {\n <fd-quick-view-group-item>\n <fd-quick-view-group-item-content>\n @if (inlineEditMode && allowInlineEdit) {\n <fd-quick-view-group-item-label>\n {{ setting.DescriptionField?.Alias | bbbTranslate }}\n </fd-quick-view-group-item-label>\n }\n <div fd-quick-view-group-item-content-element class=\"group-item-content\">\n <ng-container\n *ngTemplateOutlet=\"\n columnTemplate;\n context: {\n $implicit: setting.DescriptionField,\n layout94: layout$ | async,\n mo: mo,\n index: index\n }\n \"\n ></ng-container>\n </div>\n </fd-quick-view-group-item-content>\n @if (setting.ActionFieldNameField) {\n <fd-quick-view-group-item-content\n class=\"action\"\n (click)=\"onAction(setting.ActionFieldCommandField || '')\"\n >\n <a fd-link>\n <ng-container\n *ngTemplateOutlet=\"\n columnTemplate;\n context: {\n $implicit: setting.ActionFieldNameField,\n layout94: layout$ | async,\n mo: mo,\n index: index\n }\n \"\n ></ng-container>\n </a>\n </fd-quick-view-group-item-content>\n }\n </fd-quick-view-group-item>\n }\n </fd-quick-view-group>\n </fd-quick-view>\n }\n</ng-template>\n<ng-template #contentTemplate let-mo let-index=\"index\">\n <fd-layout-grid>\n <div fdLayoutGridRow style=\"align-items: center\">\n <div [fdLayoutGridCol]=\"12\">\n @for (column of setting.FieldListMapped; track column) {\n <div style=\"display: flex\">\n <label fd-form-label [colon]=\"true\">{{ column.Caption | bbbTranslate }}</label>\n <ng-container\n *ngTemplateOutlet=\"\n columnTemplate;\n context: {\n $implicit: column,\n layout94: layout$ | async,\n mo: mo,\n index: index\n }\n \"\n ></ng-container>\n </div>\n }\n </div>\n @if (setting.DescriptionField) {\n <div [fdLayoutGridCol]=\"12\">\n @if (inlineEditMode && allowInlineEdit) {\n <label>\n {{ setting.DescriptionField?.Alias | bbbTranslate }}\n </label>\n }\n <ng-container\n *ngTemplateOutlet=\"\n columnTemplate;\n context: {\n $implicit: setting.DescriptionField,\n layout94: layout$ | async,\n mo: mo,\n index: index\n }\n \"\n ></ng-container>\n </div>\n }\n </div>\n </fd-layout-grid>\n</ng-template>\n<ng-template #avatar let-avatar let-visible=\"visible\" let-circle=\"circle\" let-avatarField=\"avatarField\">\n @if (visible) {\n <fd-avatar\n alterIcon=\"alt|content|backup|default-icon\"\n [circle]=\"circle\"\n [image]=\"avatarField ? (mo[avatarField.Name]?.FileId | picFieldSrc: 'ID':avatarField.FieldDefId) : ''\"\n [size]=\"\n deviceSize === 'xl' || deviceSize === 'l' ? setting.AvatarSizeDesktop$Caption : setting.AvatarSize$Caption\n \"\n [glyph]=\"avatar || (mo.$State === 'New' && !isChecked ? 'favorite' : inlineEditMode && isChecked ? 'edit' : '')\"\n >\n </fd-avatar>\n }\n</ng-template>\n\n<ng-template #contentTemplateComponent let-mo let-index=\"index\">\n <bnrc-dynamic-item-component\n [component]=\"setting.ContentComponent\"\n [mo]=\"mo\"\n [styleIndex]=\"mo.$StyleIndex\"\n [isChecked]=\"isChecked\"\n [setting]=\"setting\"\n [parameters]=\"setting.ContentComponent.Settings\"\n [editMode]=\"inlineEditMode\"\n [rtl]=\"rtl\"\n [deviceName]=\"deviceName\"\n [deviceSize]=\"deviceSize\"\n [index]=\"index\"\n [allColumns]=\"allColumns\"\n ></bnrc-dynamic-item-component>\n</ng-template>\n\n<ng-template #renderHeader let-mo let-index=\"index\">\n @if(!hideOpenIcon && (openOnClick || (canView && deviceName !== 'desktop'))){\n <ng-container\n *ngTemplateOutlet=\"\n renderHeaderMobileCanView;\n context: {\n $implicit: mo,\n index: index\n }\n \"\n ></ng-container>\n }@else{\n <ng-container\n *ngTemplateOutlet=\"\n renderHeaderDesktop;\n context: {\n $implicit: mo,\n index: index\n }\n \"\n ></ng-container>\n }\n</ng-template>\n<ng-template #renderHeaderDesktop let-mo let-index=\"index\">\n <fd-card-header class=\"HeaderDesktop\">\n <div>\n @if(isCheckList){\n <fd-checkbox [name]=\"mo.$Caption\" [ngModel]=\"isChecked\" (ngModelChange)=\"onRowCheck()\"></fd-checkbox>\n }\n </div>\n <fd-card-main-header (click)=\"onRowCheck()\" (dblclick)=\"onRowClick()\">\n @if (setting.AvatarField || setting.Avatar) {\n <fd-avatar\n alterIcon=\"alt|content|backup|default-icon\"\n [circle]=\"setting.CircleAvatar\"\n [image]=\"\n setting.AvatarField\n ? (mo[setting.AvatarField.Name]?.FileId | picFieldSrc: 'ID':setting.AvatarField.FieldDefId)\n : ''\n \"\n [size]=\"\n deviceSize === 'xl' || deviceSize === 'l'\n ? setting.AvatarSizeDesktop$Caption\n : setting.AvatarSize$Caption\n \"\n [glyph]=\"\n setting.Avatar ||\n (mo.$State === 'New' && !isChecked ? 'favorite' : inlineEditMode && isChecked ? 'edit' : '')\n \"\n ></fd-avatar>\n }\n <h2 fd-card-title>\n <ng-container\n *ngTemplateOutlet=\"\n columnTemplate;\n context: {\n $implicit: setting.TitleField,\n layout94: layout$ | async,\n mo: mo,\n index: index,\n disableEllapsis: false,\n fdTextMode: true\n }\n \"\n ></ng-container>\n </h2>\n <h3 fd-card-subtitle>\n <ng-container\n *ngTemplateOutlet=\"\n columnTemplate;\n context: {\n $implicit: setting.SubtitleField,\n layout94: layout$ | async,\n mo: mo,\n index: index,\n disableEllapsis: false\n }\n \"\n ></ng-container>\n </h3>\n @if (!contextMenuInFooter && (contextMenuItems && contextMenuItems.length > 0)) {\n <div\n ulvContextMenu\n [allColumns]=\"allColumns\"\n [footerMode]=\"false\"\n [menuItems]=\"contextMenuItems\"\n [styleIndex]=\"styleIndex\"\n [conditionalFormats]=\"conditionalFormats\"\n [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n [mo]=\"mo\"\n (commandClick)=\"onUlvCommand()\"\n ></div>\n }\n </fd-card-main-header>\n </fd-card-header>\n</ng-template>\n<ng-template #renderHeaderMobileCanView let-mo let-index=\"index\">\n <fd-card-header class=\"HeaderMobileCanView\">\n <div>\n @if(isCheckList){\n <fd-checkbox [name]=\"mo.$Caption\" [ngModel]=\"isChecked\" (ngModelChange)=\"onRowCheck()\"></fd-checkbox>\n }\n </div>\n <fd-card-main-header (click)=\"onRowCheck()\" (dblclick)=\"onRowClick()\">\n @if (setting.AvatarField || setting.Avatar) {\n <fd-avatar\n alterIcon=\"alt|content|backup|default-icon\"\n [circle]=\"setting.CircleAvatar\"\n [image]=\"\n setting.AvatarField\n ? (mo[setting.AvatarField.Name]?.FileId | picFieldSrc: 'ID':setting.AvatarField.FieldDefId)\n : ''\n \"\n [size]=\"\n deviceSize === 'xl' || deviceSize === 'l'\n ? setting.AvatarSizeDesktop$Caption\n : setting.AvatarSize$Caption\n \"\n [glyph]=\"\n setting.Avatar ||\n (mo.$State === 'New' && !isChecked ? 'favorite' : inlineEditMode && isChecked ? 'edit' : '')\n \"\n ></fd-avatar>\n }\n <h2 fd-card-title>\n <ng-container\n *ngTemplateOutlet=\"\n columnTemplate;\n context: {\n $implicit: setting.TitleField,\n layout94: layout$ | async,\n mo: mo,\n index: index,\n fdTextMode: true\n }\n \"\n ></ng-container>\n </h2>\n <h3 fd-card-subtitle>\n <ng-container\n *ngTemplateOutlet=\"\n columnTemplate;\n context: {\n $implicit: setting.SubtitleField,\n layout94: layout$ | async,\n mo: mo,\n index: index\n }\n \"\n ></ng-container>\n </h3>\n <button\n fd-card-header-action\n fd-button\n class=\"view-btn\"\n (click)=\"onRowClick()\"\n [glyph]=\"navigationArrow\"\n fdType=\"transparent\"\n ></button>\n </fd-card-main-header>\n </fd-card-header>\n</ng-template>\n<ng-template #renderHeaderComponent let-mo let-index=\"index\">\n <bnrc-dynamic-item-component\n [component]=\"setting.HeaderComponent\"\n [mo]=\"mo\"\n [styleIndex]=\"mo.$StyleIndex\"\n [isChecked]=\"isChecked\"\n [setting]=\"setting\"\n [parameters]=\"setting.HeaderComponent.Settings\"\n [editMode]=\"inlineEditMode\"\n [rtl]=\"rtl\"\n [deviceName]=\"deviceName\"\n [deviceSize]=\"deviceSize\"\n [index]=\"index\"\n [allColumns]=\"allColumns\"\n [contextMenuItems]=\"contextMenuItems\"\n [canView]=\"canView\"\n [conditionalFormats]=\"conditionalFormats\"\n [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n [navigationArrow]=\"navigationArrow\"\n [isCheckList]=\"isCheckList\"\n (events)=\"onDynamicComponentEvents($event)\"\n ></bnrc-dynamic-item-component>\n</ng-template>\n", styles: ["fd-card:hover{box-shadow:0 0 0 .0625rem #2235487a,0 .625rem 1.875rem #22354840}fd-card div[ulvcontextmenu] ::ng-deep .fd-bar{background-color:transparent}fd-card ::ng-deep bsu-column-renderer div.renderGeneral{font-family:IranYekanDigits}fd-card fd-card-footer.hasDetailsAndContextMenu ::ng-deep .fd-card__footer-actions{justify-content:space-between!important}fd-card fd-card-content{padding:0!important}fd-card fd-card-content>div>fd-quick-view ::ng-deep .fd-quick-view__content{padding-top:0}fd-card fd-card-content>div>fd-quick-view fd-quick-view-group-item.rowDirection ::ng-deep .fd-form-item{flex-direction:row}fd-card fd-card-header{padding:.5rem}fd-card fd-card-header:hover{background:var(--fdCard_Background_Color)}fd-card fd-card-header .fd-card__title{display:flex;justify-content:space-between;align-items:center;width:100%}fd-card fd-card-header button,fd-card fd-card-header div[ulvcontextmenu]{z-index:6}fd-card fd-card-header:hover{background:inherit}fd-quick-view-subheader ::ng-deep div{background:inherit}.action{cursor:pointer;margin-top:6px;flex:1;display:flex;justify-content:end;flex-direction:column}.openOnClick{cursor:pointer}\n"] }]
|
|
5322
5326
|
}], propDecorators: { setting: [{
|
|
5323
5327
|
type: Input
|
|
5324
5328
|
}], _quickViewTemplate: [{
|
|
@@ -5423,7 +5427,7 @@ class ListItemComponent extends BaseViewItemPropsComponent {
|
|
|
5423
5427
|
PreventDefaulEvent(e);
|
|
5424
5428
|
}
|
|
5425
5429
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: ListItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
5426
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: ListItemComponent, selector: "bsu-list-item", inputs: { setting: "setting", isDisplayType: "isDisplayType" }, usesInheritance: true, ngImport: i0, template: "<ng-container\n *ngTemplateOutlet=\"isDisplayType ? displayTemplate : standardTemplate; context: { $implicit: mo }\"\n></ng-container>\n<ng-template #standardTemplate let-mo>\n <li\n fd-list-item\n class=\"standard-list-row\"\n [ngClass]=\"deviceSize\"\n [style.padding-right]=\"'calc( 1rem + ' + mo.level * 12 + 'px' + ' )'\"\n [class.selected]=\"isChecked === true\"\n [selected]=\"isChecked === true\"\n (dblclick)=\"onRowClick()\"\n (click)=\"onRowCheck()\"\n >\n <a\n fd-list-link\n [attr.rtl]=\"rtl\"\n class=\"li-link\"\n [class.checklist]=\"isCheckList\"\n #aEl\n [applyConditionalFormats]=\"conditionalFormats\"\n [styleIndex]=\"styleIndex\"\n [hostEl]=\"aEl\"\n >\n @if (isCheckList) {\n <fd-checkbox [name]=\"mo.$Caption\" [ngModel]=\"isChecked\" (change)=\"onRowCheck2($event)\"></fd-checkbox>\n } @if (setting.IconFont || setting.AvatarField) {\n <span fd-list-thumbnail>\n <fd-avatar\n alterIcon=\"alt|content|backup|default-icon\"\n [style.color]=\"setting.IconColor ? setting.IconColor : null\"\n [circle]=\"true\"\n [image]=\"\n setting.AvatarField\n ? (mo[setting.AvatarField.Name]?.FileId | picFieldSrc: 'ID':setting.AvatarField.FieldDefId)\n : ''\n \"\n [size]=\"avatarSize\"\n [transparent]=\"true\"\n [glyph]=\"\n setting.IconFont ??\n (mo.$State === 'New' && !isChecked ? 'favorite' : inlineEditMode && isChecked ? 'edit' : '')\n \"\n >\n </fd-avatar>\n </span>\n }\n <div fd-list-content>\n <div fd-list-byline [twoCol]=\"true\">\n <div fd-list-title>\n <ng-container\n *ngTemplateOutlet=\"\n renderColumn;\n context: {\n $implicit: setting.TitleField,\n layout94: layout$ | async,\n mo: mo,\n conditionalFormats: conditionalFormats,\n index: 0\n }\n \"\n ></ng-container>\n </div>\n <div fd-list-byline [style.padding-left]=\"canView && deviceName === 'desktop' ? '.9rem' : '0'\">\n <ng-container\n *ngTemplateOutlet=\"\n renderColumn;\n context: {\n $implicit: setting.StatusField,\n layout94: layout$ | async,\n mo: mo,\n conditionalFormats: conditionalFormats\n }\n \"\n ></ng-container>\n </div>\n </div>\n <div fd-list-byline>\n <ng-container\n *ngTemplateOutlet=\"\n renderColumn;\n context: {\n $implicit: setting.SubtitleField,\n layout94: layout$ | async,\n mo: mo,\n conditionalFormats: conditionalFormats\n }\n \"\n ></ng-container>\n </div>\n </div>\n @if (contextMenuItems.length) {\n <bsu-ulv-context-menu\n [menuItems]=\"contextMenuItems\"\n [conditionalFormats]=\"conditionalFormats\"\n [styleIndex]=\"styleIndex\"\n [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n [mo]=\"mo\"\n (commandClick)=\"onUlvCommand()\"\n ></bsu-ulv-context-menu>\n } @if (canView && !hideOpenIcon) {\n <button (click)=\"onRowClick()\" fdType=\"transparent\" [glyph]=\"navigationArrow\" fd-button></button>\n }\n </a>\n </li>\n</ng-template>\n<ng-template #displayTemplate let-mo>\n @if (!mo.parent || mo.parent?.expanded) {\n <li\n class=\"display\"\n [ngClass]=\"deviceSize\"\n fd-list-item\n [interactive]=\"false\"\n (dblclick)=\"onRowClick()\"\n (click)=\"onRowCheck()\"\n [style.padding-right]=\"'calc( 1rem + ' + mo.level * 12 + 'px' + ' )'\"\n >\n <a\n fd-list-link\n [attr.rtl]=\"rtl\"\n class=\"li-link\"\n style=\"cursor: default\"\n [class.checklist]=\"isCheckList\"\n #aEl\n [applyConditionalFormats]=\"conditionalFormats\"\n [styleIndex]=\"styleIndex\"\n [hostEl]=\"aEl\"\n style=\"column-gap: 3px\"\n >\n @if (setting.AvatarField) {\n <img\n [src]=\"mo[setting.AvatarField.Name]?.FileId | picFieldSrc: 'ID':setting.AvatarField.FieldDefId\"\n style=\"width: 24px; height: 24px\"\n />\n } @if (setting.IconFont) {\n <i fd-list-icon [glyph]=\"setting.IconFont\" [style.color]=\"setting.IconColor ? setting.IconColor : null\">\n </i>\n } @if (!setting.IconFont && mo.$State === 'New' && !isChecked) {\n <i fd-list-icon glyph=\"favorite\"></i>\n } @if (!setting.IconFont && inlineEditMode && isChecked) {\n <i fd-list-icon glyph=\"edit\"></i>\n } @if (isCheckList) {\n <fd-checkbox [name]=\"mo.$Caption\" [ngModel]=\"isChecked\" (change)=\"onRowCheck2($event)\"></fd-checkbox>\n }\n <span fd-list-title>\n <ng-container\n *ngTemplateOutlet=\"\n renderColumn;\n context: {\n $implicit: setting.TitleField,\n conditionalFormats: conditionalFormats,\n layout94: layout$ | async,\n mo: mo,\n index: 0\n }\n \"\n ></ng-container>\n </span>\n <span fd-list-secondary [dir]=\"rtl ? 'ltr' : 'rtl'\" [class.flex1]=\"contextMenuItems.length === 0\">\n <ng-container\n *ngTemplateOutlet=\"\n renderColumn;\n context: {\n $implicit: setting.CounterField,\n conditionalFormats: conditionalFormats,\n layout94: layout$ | async,\n mo: mo,\n index: index\n }\n \"\n ></ng-container>\n @if (canView && !hideOpenIcon) {\n <button fd-button (click)=\"onRowClick()\" [glyph]=\"navigationArrow\" fdType=\"transparent\"></button>\n } @if (contextMenuItems.length) {\n <bsu-ulv-context-menu\n [menuItems]=\"contextMenuItems\"\n [conditionalFormats]=\"conditionalFormats\"\n [styleIndex]=\"styleIndex\"\n [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n [mo]=\"mo\"\n (commandClick)=\"onUlvCommand()\"\n ></bsu-ulv-context-menu>\n }\n </span>\n </a>\n </li>\n }\n</ng-template>\n<ng-template\n #renderColumn\n let-column\n let-mo=\"mo\"\n let-conditionalFormats=\"conditionalFormats\"\n let-index=\"index\"\n let-layout94=\"layout94\"\n>\n @if (column) {\n <div\n #divEl\n [applyConditionalFormats]=\"conditionalFormats\"\n [styleIndex]=\"styleIndex\"\n [hostEl]=\"divEl\"\n [dbName]=\"column.Name\"\n >\n <bsu-column-renderer\n [mo]=\"mo\"\n [column]=\"column\"\n [disableEllapsis]=\"true\"\n [value]=\"column | columnValue: mo | bbbTranslate\"\n [icon]=\"column | columnIcon: mo\"\n [editMode]=\"inlineEditMode && allowInlineEdit\"\n [rtl]=\"rtl\"\n [deviceName]=\"deviceName\"\n [deviceSize]=\"deviceSize\"\n [index]=\"index\"\n [controlUi]=\"column.Caption | controlUi: layout94:column.Name\"\n (keyup.control.enter)=\"onEditFormPanelSave($event)\"\n (keyup.esc)=\"onEditFormPanelCancel($event)\"\n (keydown.Tab)=\"onTabKeyDown($event, index)\"\n [formLayoutShowLabel]=\"true\"\n ></bsu-column-renderer>\n </div>\n }\n</ng-template>\n", styles: [":host li.s{height:auto}:host .flex1{flex:1;display:flex;justify-content:start;flex-direction:row-reverse}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$5.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "font", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "random", "clickable", "valueState", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i4$1.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i5.CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "role", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "component", type: i7.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "ariaRole", "id"], outputs: ["keyDown"] }, { kind: "directive", type: i7.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i7.ListSecondaryDirective, selector: "[fd-list-secondary], [fdListSecondary]", inputs: ["type"] }, { kind: "directive", type: i7.ListIconDirective, selector: "[fdListIcon], [fd-list-icon]", inputs: ["glyph", "glyphFont", "class", "role", "ariaHidden"] }, { kind: "directive", type: i7.ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated", "focusable"] }, { kind: "directive", type: i7.ListBylineDirective, selector: "[fdListByline], [fd-list-byline]", inputs: ["twoCol", "wrap"] }, { kind: "directive", type: i7.ListContentDirective, selector: "[fdListContent], [fd-list-content]", inputs: ["twoCol"] }, { kind: "directive", type: i7.ListThumbnailDirective, selector: "[fdListThumbnail], [fd-list-thumbnail]" }, { kind: "directive", type: i7$5.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: UlvContextMenuComponent, selector: "bsu-ulv-context-menu,[ulvContextMenu]", inputs: ["onlyOverflow", "rightClickEnable", "deviceName", "menuItems", "allColumns", "index", "mo", "styleIndex", "conditionalFormats", "disableOverflowContextMenu", "footerMode", "appendTo"], outputs: ["commandClick"] }, { kind: "component", type: ColumnRendererComponent, selector: "bsu-column-renderer,[colRenderer]", inputs: ["column", "mo", "index", "editMode", "customRowHeight", "controlUi", "formLayoutShowLabel", "isChecked", "isNewInlineMo", "containerDom", "disableEllapsis", "rtl", "isMobile", "deviceName", "deviceSize", "value", "icon"] }, { kind: "directive", type: ApplyConditionalFormatsDirective, selector: "[applyConditionalFormats]", inputs: ["applyConditionalFormats", "styleIndex", "hostEl", "dbName"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i2.ControlUiPipe, name: "controlUi" }, { kind: "pipe", type: i2.ColumnIconPipe, name: "columnIcon" }, { kind: "pipe", type: i2.ColumnValuePipe, name: "columnValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5430
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: ListItemComponent, selector: "bsu-list-item", inputs: { setting: "setting", isDisplayType: "isDisplayType" }, usesInheritance: true, ngImport: i0, template: "<ng-container\n *ngTemplateOutlet=\"isDisplayType ? displayTemplate : standardTemplate; context: { $implicit: mo }\"\n></ng-container>\n<ng-template #standardTemplate let-mo>\n <li\n fd-list-item\n class=\"standard-list-row\"\n [ngClass]=\"deviceSize\"\n [style.padding-right]=\"'calc( 1rem + ' + mo.level * 12 + 'px' + ' )'\"\n [class.selected]=\"isChecked === true\"\n [selected]=\"isChecked === true\"\n (dblclick)=\"onRowClick()\"\n (click)=\"onRowCheck()\"\n >\n <a\n fd-list-link\n [attr.rtl]=\"rtl\"\n class=\"li-link\"\n [class.checklist]=\"isCheckList\"\n #aEl\n [applyConditionalFormats]=\"conditionalFormats\"\n [styleIndex]=\"styleIndex\"\n [hostEl]=\"aEl\"\n >\n @if (isCheckList) {\n <fd-checkbox [name]=\"mo.$Caption\" [ngModel]=\"isChecked\" (change)=\"onRowCheck2($event)\"></fd-checkbox>\n } @if (setting.IconFont || setting.AvatarField) {\n <span fd-list-thumbnail>\n <fd-avatar\n alterIcon=\"alt|content|backup|default-icon\"\n [style.color]=\"setting.IconColor ? setting.IconColor : null\"\n [circle]=\"true\"\n [image]=\"\n setting.AvatarField\n ? (mo[setting.AvatarField.Name]?.FileId | picFieldSrc: 'ID':setting.AvatarField.FieldDefId)\n : ''\n \"\n [size]=\"avatarSize\"\n [transparent]=\"true\"\n [glyph]=\"\n setting.IconFont ??\n (mo.$State === 'New' && !isChecked ? 'favorite' : inlineEditMode && isChecked ? 'edit' : '')\n \"\n >\n </fd-avatar>\n </span>\n }\n <div fd-list-content>\n <div fd-list-byline [twoCol]=\"true\">\n <div fd-list-title>\n <ng-container\n *ngTemplateOutlet=\"\n renderColumn;\n context: {\n $implicit: setting.TitleField,\n layout94: layout$ | async,\n mo: mo,\n conditionalFormats: conditionalFormats,\n index: 0\n }\n \"\n ></ng-container>\n </div>\n <div fd-list-byline [style.padding-left]=\"canView && deviceName === 'desktop' ? '.9rem' : '0'\">\n <ng-container\n *ngTemplateOutlet=\"\n renderColumn;\n context: {\n $implicit: setting.StatusField,\n layout94: layout$ | async,\n mo: mo,\n conditionalFormats: conditionalFormats\n }\n \"\n ></ng-container>\n </div>\n </div>\n <div fd-list-byline>\n <ng-container\n *ngTemplateOutlet=\"\n renderColumn;\n context: {\n $implicit: setting.SubtitleField,\n layout94: layout$ | async,\n mo: mo,\n conditionalFormats: conditionalFormats\n }\n \"\n ></ng-container>\n </div>\n </div>\n @if (contextMenuItems.length) {\n <bsu-ulv-context-menu\n [menuItems]=\"contextMenuItems\"\n [conditionalFormats]=\"conditionalFormats\"\n [styleIndex]=\"styleIndex\"\n [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n [mo]=\"mo\"\n (commandClick)=\"onUlvCommand()\"\n ></bsu-ulv-context-menu>\n } @if (canView && !hideOpenIcon) {\n <button (click)=\"onRowClick()\" fdType=\"transparent\" [glyph]=\"navigationArrow\" fd-button></button>\n }\n </a>\n </li>\n</ng-template>\n<ng-template #displayTemplate let-mo>\n @if (!mo.parent || mo.parent?.expanded) {\n <li\n class=\"display\"\n [ngClass]=\"deviceSize\"\n fd-list-item\n [interactive]=\"false\"\n (dblclick)=\"onRowClick()\"\n (click)=\"onRowCheck()\"\n [style.padding-right]=\"'calc( 1rem + ' + mo.level * 12 + 'px' + ' )'\"\n >\n <a\n fd-list-link\n [attr.rtl]=\"rtl\"\n class=\"li-link\"\n style=\"cursor: default\"\n [class.checklist]=\"isCheckList\"\n #aEl\n [applyConditionalFormats]=\"conditionalFormats\"\n [styleIndex]=\"styleIndex\"\n [hostEl]=\"aEl\"\n style=\"column-gap: 3px\"\n >\n @if (setting.AvatarField) {\n <img\n [src]=\"mo[setting.AvatarField.Name]?.FileId | picFieldSrc: 'ID':setting.AvatarField.FieldDefId\"\n style=\"width: 24px; height: 24px\"\n />\n } @if (setting.IconFont) {\n <i fd-list-icon [glyph]=\"setting.IconFont\" [style.color]=\"setting.IconColor ? setting.IconColor : null\">\n </i>\n } @if (!setting.IconFont && mo.$State === 'New' && !isChecked) {\n <i fd-list-icon glyph=\"favorite\"></i>\n } @if (!setting.IconFont && inlineEditMode && isChecked) {\n <i fd-list-icon glyph=\"edit\"></i>\n } @if (isCheckList) {\n <fd-checkbox [name]=\"mo.$Caption\" [ngModel]=\"isChecked\" (change)=\"onRowCheck2($event)\"></fd-checkbox>\n }\n <span fd-list-title>\n <ng-container\n *ngTemplateOutlet=\"\n renderColumn;\n context: {\n $implicit: setting.TitleField,\n conditionalFormats: conditionalFormats,\n layout94: layout$ | async,\n mo: mo,\n index: 0\n }\n \"\n ></ng-container>\n </span>\n <span fd-list-secondary [dir]=\"rtl ? 'ltr' : 'rtl'\" [class.flex1]=\"contextMenuItems.length === 0\">\n <ng-container\n *ngTemplateOutlet=\"\n renderColumn;\n context: {\n $implicit: setting.CounterField,\n conditionalFormats: conditionalFormats,\n layout94: layout$ | async,\n mo: mo,\n index: index\n }\n \"\n ></ng-container>\n @if (canView && !hideOpenIcon) {\n <button fd-button (click)=\"onRowClick()\" [glyph]=\"navigationArrow\" fdType=\"transparent\"></button>\n } @if (contextMenuItems.length) {\n <bsu-ulv-context-menu\n [menuItems]=\"contextMenuItems\"\n [conditionalFormats]=\"conditionalFormats\"\n [styleIndex]=\"styleIndex\"\n [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n [mo]=\"mo\"\n (commandClick)=\"onUlvCommand()\"\n ></bsu-ulv-context-menu>\n }\n </span>\n </a>\n </li>\n }\n</ng-template>\n<ng-template\n #renderColumn\n let-column\n let-mo=\"mo\"\n let-conditionalFormats=\"conditionalFormats\"\n let-index=\"index\"\n let-layout94=\"layout94\"\n>\n @if (column) {\n <div\n #divEl\n [applyConditionalFormats]=\"conditionalFormats\"\n [styleIndex]=\"styleIndex\"\n [hostEl]=\"divEl\"\n [dbName]=\"column.Name\"\n >\n <bsu-column-renderer\n [mo]=\"mo\"\n [column]=\"column\"\n [disableEllapsis]=\"true\"\n [value]=\"column | columnValue: mo | bbbTranslate\"\n [icon]=\"column | columnIcon: mo\"\n [editMode]=\"inlineEditMode && allowInlineEdit\"\n [rtl]=\"rtl\"\n [deviceName]=\"deviceName\"\n [deviceSize]=\"deviceSize\"\n [index]=\"index\"\n [controlUi]=\"column.Caption | controlUi: layout94:column.Name\"\n (keyup.control.enter)=\"onEditFormPanelSave($event)\"\n (keyup.esc)=\"onEditFormPanelCancel($event)\"\n (keydown.Tab)=\"onTabKeyDown($event, index)\"\n [formLayoutShowLabel]=\"true\"\n ></bsu-column-renderer>\n </div>\n }\n</ng-template>\n", styles: [":host li.s{height:auto}:host .flex1{flex:1;display:flex;justify-content:start;flex-direction:row-reverse}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$5.AvatarComponent, selector: "fd-avatar", inputs: ["class", "id", "ariaLabel", "ariaLabelledby", "label", "size", "font", "glyph", "zoomGlyph", "circle", "transparent", "contain", "placeholder", "tile", "border", "colorAccent", "random", "clickable", "valueState", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i4$1.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i5.CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "role", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "component", type: i7.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "ariaRole", "id"], outputs: ["keyDown"] }, { kind: "directive", type: i7.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i7.ListSecondaryDirective, selector: "[fd-list-secondary], [fdListSecondary]", inputs: ["type"] }, { kind: "directive", type: i7.ListIconDirective, selector: "[fdListIcon], [fd-list-icon]", inputs: ["glyph", "glyphFont", "class", "role", "ariaHidden"] }, { kind: "directive", type: i7.ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated", "focusable"] }, { kind: "directive", type: i7.ListBylineDirective, selector: "[fdListByline], [fd-list-byline]", inputs: ["twoCol", "wrap"] }, { kind: "directive", type: i7.ListContentDirective, selector: "[fdListContent], [fd-list-content]", inputs: ["twoCol"] }, { kind: "directive", type: i7.ListThumbnailDirective, selector: "[fdListThumbnail], [fd-list-thumbnail]" }, { kind: "directive", type: i7$5.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: UlvContextMenuComponent, selector: "bsu-ulv-context-menu,[ulvContextMenu]", inputs: ["onlyOverflow", "rightClickEnable", "deviceName", "menuItems", "allColumns", "index", "mo", "styleIndex", "conditionalFormats", "disableOverflowContextMenu", "footerMode", "appendTo"], outputs: ["commandClick"] }, { kind: "component", type: ColumnRendererComponent, selector: "bsu-column-renderer,[colRenderer]", inputs: ["column", "mo", "index", "editMode", "customRowHeight", "controlUi", "formLayoutShowLabel", "isChecked", "isNewInlineMo", "containerDom", "disableEllapsis", "rtl", "isMobile", "fdTextMode", "deviceName", "deviceSize", "value", "icon"] }, { kind: "directive", type: ApplyConditionalFormatsDirective, selector: "[applyConditionalFormats]", inputs: ["applyConditionalFormats", "styleIndex", "hostEl", "dbName"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.PictureFieldSourcePipe, name: "picFieldSrc" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i2.ControlUiPipe, name: "controlUi" }, { kind: "pipe", type: i2.ColumnIconPipe, name: "columnIcon" }, { kind: "pipe", type: i2.ColumnValuePipe, name: "columnValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5427
5431
|
}
|
|
5428
5432
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: ListItemComponent, decorators: [{
|
|
5429
5433
|
type: Component,
|
|
@@ -5868,7 +5872,7 @@ class BarsaTableRowComponent extends BaseViewItemPropsComponent {
|
|
|
5868
5872
|
this._cdr.detectChanges();
|
|
5869
5873
|
}
|
|
5870
5874
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: BarsaTableRowComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
5871
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: BarsaTableRowComponent, selector: "bsu-barsa-table-row", inputs: { showDetailsInRow: "showDetailsInRow", previewColumn: "previewColumn", columnComponents: "columnComponents", dirtyColumns: "dirtyColumns", detailsCollapsed: "detailsCollapsed" }, outputs: { columnSummary: "columnSummary" }, providers: [FormPanelService], viewQueries: [{ propertyName: "detailsFormItems", first: true, predicate: ["detailsFormItems"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "@if ((!mo.$Parent || parentExpanded) && visibility !== false) {\n<tr\n [class.row-error]=\"hasError\"\n [class.showdetails-on]=\"!detailsCollapsed && (detailsComponent?.Selector || detailsColumns?.length)\"\n [class.hasForm]=\"formSetting\"\n [class.hasCartable]=\"!!cartableParams\"\n #trEl\n fd-table-row\n [activable]=\"false\"\n [hoverable]=\"true\"\n [main]=\"true\"\n [focusable]=\"true\"\n [applyConditionalFormats]=\"conditionalFormats\"\n [styleIndex]=\"styleIndex\"\n [hostEl]=\"trEl\"\n [attr.aria-selected]=\"isChecked\"\n [class.has-preview-column]=\"!!previewColumn\"\n [class.brule-message]=\"bruleActionMessage || workflowState?.error\"\n [class.workflow-pending]=\"workflowState?.state === 'Pending'\"\n [style.background-color]=\"isOdd && !isChecked ? 'var(--sapList_Hover_Background)' : null\"\n>\n @if (mo.$Group || mo.$Group === '') {\n <td\n [style.padding-right]=\"rtl ? 'calc( 1rem + ' + level * 12 + 'px' + ' )' : 'inherit'\"\n [style.padding-left]=\"!rtl ? 'calc( 1rem + ' + level * 12 + 'px' + ' )' : 'inherit'\"\n fd-table-cell\n style=\"font-weight: bold; font-size: 1rem\"\n [attr.colspan]=\"\n columns.length +\n 1 +\n (rowIndicator ? -1 : 0) +\n (contextMenuItems && contextMenuItems.length > 0 && !inlineEditMode ? 1 : 0) +\n (showViewButton ? 1 : 0) +\n (showDetailsInRow && !inlineEditMode ? 1 : 0)\n \"\n class=\"row-group\"\n [class.mobile-mode]=\"secondaryColumns?.length\"\n [attr.level]=\"level\"\n [class.root-group]=\"level === 0\"\n >\n <button\n fd-button\n [fdType]=\"'transparent'\"\n [glyph]=\"expanded !== false ? 'navigation-down-arrow' : 'navigation-left-arrow'\"\n class=\"cell-expand\"\n (click)=\"onExpandClick()\"\n ></button>\n {{ mo.$Group === 'undefined' ? '' : mo.$Group }}\n </td>\n } @else {\n\n <ng-container *ngTemplateOutlet=\"statusIndicator\"></ng-container>\n @if (isCheckList) {\n <td fd-table-cell [style.width]=\"checkboxComponent ? '60px' : null\">\n @if (workflowState?.state === 'Pending') {\n <div style=\"position: absolute; left: 0; right: 0; bottom: 0; top: 0\">\n <bsu-mask [top]=\"'20px'\" [size]=\"'s'\"></bsu-mask>\n </div>\n } @if (checkboxComponent?.Selector) {\n <bnrc-dynamic-item-component\n [component]=\"checkboxComponent\"\n [mo]=\"mo\"\n [isChecked]=\"isChecked\"\n [UlvMainCtrlr]=\"UlvMainCtrlr\"\n [setting]=\"setting\"\n [parameters]=\"checkboxComponent.Parameters\"\n [editMode]=\"inlineEditMode\"\n [rtl]=\"rtl\"\n [deviceName]=\"deviceName\"\n [value]=\"isChecked\"\n [deviceSize]=\"deviceSize\"\n [index]=\"index\"\n [allColumns]=\"allColumns\"\n [typeDefId]=\"typeDefId\"\n (events)=\"onRowCheck()\"\n ></bnrc-dynamic-item-component>\n } @else {\n <fd-checkbox [name]=\"mo.$Caption\" [ngModel]=\"isChecked\" (ngModelChange)=\"onRowCheck()\"></fd-checkbox>\n }\n </td>\n } @if (!isCheckList && !showRowNumber) {\n <td\n fd-table-cell\n class=\"single-select\"\n (click)=\"!isCheckList && onRowCheck()\"\n style=\"padding: 0; text-align: center\"\n >\n @if (inlineEditMode && allowInlineEdit && (hasError || saving || saved)) { @if (hasError) {\n <fd-icon class=\"save-error\" glyph=\"error\"></fd-icon>\n } @if (saving) {\n <fd-busy-indicator [loading]=\"true\" [size]=\"'s'\" title=\"record saving\"></fd-busy-indicator>\n } @if (saved) {\n <fd-icon class=\"save-success\" glyph=\"accept\"></fd-icon>\n } } @else { @if (mo.$State === 'New' && !isChecked) {\n <fd-icon glyph=\"favorite\"></fd-icon>\n } @if (inlineEditMode && allowInlineEdit && isChecked) {\n <fd-icon glyph=\"edit\"></fd-icon>\n } }\n </td>\n }\n <ng-container *ngTemplateOutlet=\"rowNumberTemplate\"></ng-container>\n @for (column of columns; track column.Name; let columnIndex = $index) {\n <td\n class=\"rep-column\"\n [attr.dbName]=\"column.Name\"\n #tdEl\n fd-table-cell\n [applyConditionalFormats]=\"conditionalFormats\"\n [hostEl]=\"tdEl\"\n [styleIndex]=\"styleIndex\"\n [dbName]=\"column.Name\"\n [focusable]=\"false\"\n (click)=\"onColumnClick()\"\n (dblclick)=\"onRowClick()\"\n [hoverable]=\"inlineEditMode && allowInlineEdit\"\n [class.control-readonly]=\"column.IsReadonly\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n columnTemplate;\n context: {\n $implicit: column,\n mo: mo,\n index: columnIndex,\n inlineEditMode: inlineEditMode,\n layout94: layout$ | async\n }\n \"\n ></ng-container>\n </td>\n } @if (contextMenuItems.length && (!inlineEditMode || !allowInlineEdit)) {\n <td class=\"col-context-menu\" fd-table-cell>\n <bsu-ulv-context-menu\n [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n [conditionalFormats]=\"conditionalFormats\"\n [styleIndex]=\"styleIndex\"\n [mo]=\"mo\"\n [index]=\"index\"\n (commandClick)=\"onUlvCommand()\"\n [deviceName]=\"deviceName\"\n [menuItems]=\"contextMenuItems\"\n [allColumns]=\"allColumns\"\n ></bsu-ulv-context-menu>\n </td>\n } @if (showDetailsInRow && (!inlineEditMode || !allowInlineEdit)) {\n <td class=\"col-details\" fd-table-cell [fitContent]=\"true\">\n @if ((detailsComponent?.Selector || detailsColumns?.length || cartableParams?.moId ) && !hideDetailsText) {\n <div class=\"tw-flex tw-justify-end tw-w-full\">\n <button\n fd-button\n [label]=\"(detailsCollapsed ? detailsText : 'Hide') | bbbTranslate\"\n [fdType]=\"'transparent'\"\n (click)=\"onRowDetails()\"\n ></button>\n </div>\n }\n </td>\n } @if (actionList?.length && !inlineEditMode) {\n <td class=\"col-view\" [class.rtl]=\"rtl\" fd-table-cell [fitContent]=\"true\">\n <bsu-barsa-row-inline-actionlist\n [actionList]=\"actionList\"\n (btnClick)=\"actionListClick.emit($event)\"\n ></bsu-barsa-row-inline-actionlist>\n </td>\n } }\n</tr>\n} @if (secondaryColumns?.length && !mo.$Group && (!mo.$Parent || parentExpanded) && visibility !== false) {\n<tr\n #trEl\n fd-table-row\n [secondary]=\"true\"\n class=\"secondary-row\"\n [class.no-edit-mode]=\"!inlineEditMode\"\n [applyConditionalFormats]=\"conditionalFormats\"\n [styleIndex]=\"styleIndex\"\n [hostEl]=\"trEl\"\n [attr.aria-selected]=\"isChecked && !inlineEditMode ? true : false\"\n>\n <ng-container *ngTemplateOutlet=\"statusIndicator\"></ng-container>\n @if (!isCheckList) {\n <td fd-table-cell class=\"single-select\" (click)=\"onRowCheck()\"></td>\n }\n <td fd-table-cell colspan=\"100%\" (click)=\"onRowCheck()\" class=\"secondary p-wrapper\">\n <div style=\"display: flex; flex-direction: column\">\n @for (column of secondaryColumns; track _trackByColumn(columnIndex, column); let columnIndex = $index) {\n <p\n #pEl\n fd-table-text\n [applyConditionalFormats]=\"conditionalFormats\"\n [hostEl]=\"pEl\"\n [styleIndex]=\"styleIndex\"\n [dbName]=\"column.Name\"\n style=\"font-family: 'BARSAFONT Medium'\"\n >\n <label fd-form-label>{{ column.Caption }} :</label>\n <ng-container\n *ngTemplateOutlet=\"\n columnTemplate;\n context: {\n $implicit: column,\n mo: mo,\n index: columnIndex,\n inlineEditMode: inlineEditMode,\n layout94: layout$ | async\n }\n \"\n ></ng-container>\n </p>\n }\n </div>\n </td>\n</tr>\n} @if (cartableParams?.moId) {\n<tr\n [class.detailCollapsed]=\"detailsCollapsed\"\n fd-table-row\n class=\"showdetails cartable\"\n [attr.aria-selected]=\"isChecked\"\n [class.has-preview-column]=\"!!previewColumn\"\n>\n <ng-container *ngTemplateOutlet=\"statusIndicator\"></ng-container>\n <td\n (click)=\"onRowCheck()\"\n fd-table-cell\n [attr.colspan]=\"\n columns.length +\n 1 +\n (rowIndicator ? 1 : 0) +\n (contextMenuItems && contextMenuItems.length > 0 && !inlineEditMode ? 1 : 0) +\n (showViewButton ? 1 : 0) +\n (showDetailsInRow && !inlineEditMode ? 1 : 0)\n \"\n >\n <ng-container>\n <bnrc-form\n #cartableFormRef\n class=\"cartable-template\"\n [inlineEditInReport]=\"true\"\n [params]=\"cartableParams\"\n (beforeTransition)=\"onCartableBeforeTansition()\"\n (afterTransition)=\"onCartableAfterTansition($event)\"\n (bruleAction)=\"onCartableBruleAction($event)\"\n (click)=\"OnCartableFormClick($event)\"\n (formClose)=\"onCartableFormClosed()\"\n ></bnrc-form>\n </ng-container>\n </td>\n</tr>\n} @if (!detailsCollapsed && (detailsComponent?.Selector|| detailsColumns?.length)) {\n<tr fd-table-row class=\"showdetails\" [attr.aria-selected]=\"isChecked\" [class.has-preview-column]=\"!!previewColumn\">\n <ng-container *ngTemplateOutlet=\"statusIndicator\"></ng-container>\n <td\n (click)=\"onRowCheck()\"\n fd-table-cell\n [attr.colspan]=\"\n columns.length +\n 1 +\n (rowIndicator ? -1 : 0) +\n (contextMenuItems && contextMenuItems.length > 0 && !inlineEditMode ? 1 : 0) +\n (showViewButton ? 1 : 0) +\n (showDetailsInRow && !inlineEditMode ? 1 : 0)\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"\n detailsColumnsTemplate;\n context: { mo: mo, inlineEditMode: inlineEditMode, layout94: layout$ | async }\n \"\n ></ng-container>\n @if (detailsComponent && detailsComponent.Selector) {\n <bnrc-dynamic-item-component\n [component]=\"detailsComponent\"\n [mo]=\"mo\"\n [isChecked]=\"isChecked\"\n [UlvMainCtrlr]=\"UlvMainCtrlr\"\n [setting]=\"detailsComponentSetting\"\n [parameters]=\"detailsComponent.Settings\"\n [editMode]=\"inlineEditMode\"\n [formSetting]=\"formSetting\"\n [rtl]=\"rtl\"\n [deviceName]=\"deviceName\"\n [deviceSize]=\"deviceSize\"\n [index]=\"index\"\n [allColumns]=\"allColumns\"\n [typeDefId]=\"typeDefId\"\n ></bnrc-dynamic-item-component>\n }\n </td>\n</tr>\n} @if(previewColumn){\n<tr\n #trEl\n fd-table-row\n [secondary]=\"true\"\n class=\"preview-column\"\n [class.no-edit-mode]=\"!inlineEditMode\"\n [applyConditionalFormats]=\"conditionalFormats\"\n [styleIndex]=\"styleIndex\"\n [hostEl]=\"trEl\"\n [attr.aria-selected]=\"isChecked && !inlineEditMode ? true : false\"\n>\n <ng-container *ngTemplateOutlet=\"statusIndicator\"></ng-container>\n\n <td\n fd-table-cell\n [attr.colspan]=\"\n columns.length +\n 1 +\n (rowIndicator ? -1 : 0) +\n (contextMenuItems && contextMenuItems.length > 0 && !inlineEditMode ? 1 : 0) +\n (showViewButton ? 1 : 0) +\n (showDetailsInRow && !inlineEditMode ? 1 : 0)\n \"\n (click)=\"onRowCheck()\"\n >\n <div style=\"display: flex; flex-direction: column\">\n <p\n #pEl\n fd-table-text\n [applyConditionalFormats]=\"conditionalFormats\"\n [hostEl]=\"pEl\"\n [styleIndex]=\"styleIndex\"\n [dbName]=\"previewColumn.Name\"\n style=\"color: var(--sapAccentColor6)\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n columnTemplate;\n context: {\n $implicit: previewColumn,\n mo: mo,\n index: columns.length,\n inlineEditMode: inlineEditMode,\n layout94: layout$ | async\n }\n \"\n ></ng-container>\n </p>\n </div>\n </td>\n</tr>\n} @if(isLastChildGroup && groupSummary){\n<tr #trEl fd-table-row class=\"group-summary-row\" [class.no-edit-mode]=\"true\" [attr.aria-selected]=\"false\">\n <ng-container *ngTemplateOutlet=\"statusIndicator\"></ng-container>\n @if (!isCheckList) {\n <td fd-table-cell class=\"single-select\"></td>\n } @for (column of columns; track _trackByColumn(columnIndex, column); let columnIndex = $index) {\n <td fd-table-cell>\n <label #summaryRef>{{ reCalculateColumnSummary(summaryRef, column) }}</label>\n </td>\n } @if (contextMenuItems.length && (!inlineEditMode || !allowInlineEdit)) {\n <td class=\"col-context-menu\" fd-table-cell></td>\n } @if (showDetailsInRow && (!inlineEditMode || !allowInlineEdit)) {\n <td class=\"col-details\" fd-table-cell [fitContent]=\"true\"></td>\n } @if (actionList?.length && !inlineEditMode) {\n <td class=\"col-view\" fd-table-cell [fitContent]=\"true\"></td>\n }\n</tr>\n} @if (bruleActionMessage && inlineEditMode) {\n<tr fd-table-row>\n <ng-container *ngTemplateOutlet=\"statusIndicator\"></ng-container>\n <td\n fd-table-cell\n [attr.colspan]=\"\n columns.length +\n 1 +\n (rowIndicator ? -1 : 0) +\n (contextMenuItems && contextMenuItems.length > 0 && !inlineEditMode ? 1 : 0) +\n (showViewButton ? 1 : 0) +\n (showDetailsInRow && !inlineEditMode ? 1 : 0)\n \"\n >\n @if (bruleActionMessage.MessageType === 2) {\n <fd-message-strip [type]=\"bruleActionMessage.MessageType === 2 ? 'error' : 'information'\" [dismissible]=\"false\">\n {{ bruleActionMessage.MessageExpression }}\n </fd-message-strip>\n }\n </td>\n</tr>\n} @if (workflowState?.state === 'Finish' && workflowState?.error) {\n<tr fd-table-row>\n <ng-container *ngTemplateOutlet=\"statusIndicator\"></ng-container>\n <td\n fd-table-cell\n [attr.colspan]=\"\n columns.length +\n 1 +\n (rowIndicator ? -1 : 0) +\n (contextMenuItems && contextMenuItems.length > 0 && !inlineEditMode ? 1 : 0) +\n (showViewButton ? 1 : 0) +\n (showDetailsInRow && !inlineEditMode ? 1 : 0)\n \"\n >\n <fd-message-strip type=\"error\" [dismissible]=\"true\" (onDismiss)=\"onResetWorkflowState()\">\n {{ workflowState.error?.Text || workflowState.error?.MessageExpression }}\n </fd-message-strip>\n </td>\n</tr>\n}\n<ng-template #detailsColumnsTemplate let-mo=\"mo\" let-inlineEditMode=\"inlineEditMode\" let-layout94=\"layout94\">\n <ng-container\n *ngTemplateOutlet=\"\n detailsFormItems;\n context: {\n $implicit: detailsColumns,\n mo: this.mo,\n inlineEditMode: this.inlineEditMode,\n layout94: layout94\n }\n \"\n ></ng-container>\n</ng-template>\n<ng-template\n #detailsFormItems\n let-detailsColumns\n let-mo=\"mo\"\n let-inlineEditMode=\"inlineEditMode\"\n let-layout94=\"layout94\"\n>\n <div class=\"form-items\">\n @for (column of detailsColumns; track column; let columnIndex = $index) {\n <div fd-form-item>\n <label fd-form-label for=\"input-2\">{{ column.Caption }}</label>\n <ng-container\n *ngTemplateOutlet=\"\n columnTemplate;\n context: {\n $implicit: column,\n mo: mo,\n index: columnIndex,\n inlineEditMode: inlineEditMode,\n layout94: layout94\n }\n \"\n ></ng-container>\n </div>\n }\n </div>\n</ng-template>\n<ng-template\n #columnTemplate\n let-column\n let-mo=\"mo\"\n let-index=\"index\"\n let-inlineEditMode=\"inlineEditMode\"\n let-layout94=\"layout94\"\n>\n <bsu-barsa-table-column\n [mo]=\"mo\"\n [allColumns]=\"allColumns\"\n [column]=\"column\"\n [isdirty]=\"dirtyColumns && dirtyColumns[column.Name]\"\n [value]=\"column | columnValue: mo\"\n [icon]=\"column | columnIcon: mo\"\n [customComponent]=\"column.$CustomComponent\"\n [column]=\"column\"\n [disableEllapsis]=\"secondaryColumns?.length || disableEllapsis\"\n [editMode]=\"isChecked && inlineEditMode && allowInlineEdit\"\n [inlineEditMode]=\"inlineEditMode\"\n [isChecked]=\"isChecked\"\n [index]=\"index\"\n [formSetting]=\"formSetting\"\n [rtl]=\"rtl\"\n [isMobile]=\"isMobile\"\n [deviceName]=\"deviceName\"\n [deviceSize]=\"deviceSize\"\n [layout94]=\"layout94\"\n (save)=\"onEditFormPanelSave(null)\"\n (cancel)=\"onEditFormPanelCancel(null)\"\n (tab)=\"onTabKeyDown($event, index)\"\n (changeToEditMode)=\"onColumnChangeToEditMode($event, index)\"\n >\n </bsu-barsa-table-column>\n</ng-template>\n<ng-template #statusIndicator>\n @if (rowIndicator) {\n <bsu-barsa-column-indicator [hideBorderBottom]=\"!detailsCollapsed\" [backColor]=\"rowIndicatorColor\">\n </bsu-barsa-column-indicator>\n }\n</ng-template>\n<ng-template #rowNumberTemplate>\n @if (showRowNumber) {\n <td fd-table-cell bsu-barsa-column-rownumber [rowNumber]=\"rowNumber\" (click)=\"!isCheckList && onRowCheck()\"></td>\n }\n</ng-template>\n<tr fd-table-row style=\"pointer-events: none\"></tr>\n", styles: [":host{display:contents;width:100%}:host bnrc-form.cartable-template ::ng-deep bsu-ly-layout-container-of-root{padding-bottom:1rem}:host.has-preview-column .secondary-row td{border-bottom:none}:host ::ng-deep .row-group.mobile-mode{border-bottom:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #e4e4e4)!important}:host ::ng-deep .inlineEditMode bnrc-field-ui{padding:0;margin:0}:host ::ng-deep .inlineEditMode bsu-ui-simple-combo{margin:0!important}:host ::ng-deep .secondary.p-wrapper p{display:flex;align-items:center}bsu-layout-control:not(.hide-form-item){align-items:center;height:100%;min-width:auto;width:auto}tr.group-summary-row td{border:none;background-color:#dde5f0;border-right:none!important;font-weight:700}tr.group-summary-row td label{font-weight:700}tr.group-summary-row td label.NaN{display:none}td{vertical-align:middle}td.control-readonly{background-color:var(--sapList_HeaderBackground)}tr.brule-message td{border:0}.row-group{background-color:var(--sapBackgroundColor, \"#f7f7ff\")}.cell-expand{cursor:pointer;display:inline-flex;justify-content:center;align-items:center;font-size:.75rem;color:#0854a0;color:var(--sapContent_IconColor, #0854a0);min-width:2rem;max-width:2rem}.save-error{color:var(--sapField_InvalidColor)}.save-success{color:var(--sapField_SuccessColor)}.flow{max-width:100%}.flow-item{display:flex}.flow-item fd-micro-process-flow-icon{width:1.375rem;height:1.375rem}.flow-item h5{padding-right:.3rem}.cartable-template{padding:.5rem 0}.workflow-pending{opacity:.5;pointer-events:none;position:relative}.detailCollapsed{height:0;display:none}tr td.rep-column:first-child{position:sticky;right:0}tr:not([aria-selected=true]).preview-column td{border-bottom:var(--sapList_BorderWidth) var(--fdTable_Cell_Horizontal_Border_Style, solid) var(--sapList_BorderColor)}tr[aria-selected=true].has-preview-column td,tr.showdetails-on.hasCartable td,tr.showdetails-on.hasForm td{border-bottom:none}\n"], dependencies: [{ kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.FormComponent, selector: "bnrc-form", inputs: ["params", "customFormPanelUi", "formPanelCtrl", "UlvMainCtrlr", "formPanelCtrlId", "saveOnChange", "inlineEditInReport"], outputs: ["titleChanged", "moChanged", "formClose", "uiComponent", "formRendered", "bruleAction", "beforeTransition", "afterTransition"] }, { kind: "component", type: i2.DynamicItemComponent, selector: "bnrc-dynamic-item-component", inputs: ["mo", "allColumns", "moDataList", "columns", "column", "index", "last", "deviceName", "deviceSize", "rtl", "editMode", "setting", "parameters", "contextMenuItems", "canView", "showRowNumber", "rowNumber", "formSetting", "conditionalFormats", "disableOverflowContextMenu", "navigationArrow", "isCheckList", "fields", "isChecked", "layout94$", "inlineEditMode", "isNewInlineMo", "allowInlineEdit", "typeDefId", "rowIndicator", "rowIndicatorColor", "UlvMainCtrlr"] }, { kind: "directive", type: i2.FormCloseDirective, selector: "[formClose]", inputs: ["isMobile"] }, { kind: "component", type: i5$1.BusyIndicatorComponent, selector: "fd-busy-indicator", inputs: ["loading", "size", "block", "ariaLabel", "title", "label", "ariaLive"] }, { kind: "component", type: i4$1.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i5.CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "role", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "component", type: i2$1.FormItemComponent, selector: "[fd-form-item]", inputs: ["isInline", "horizontal"] }, { kind: "component", type: i2$1.FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "alignLabelEnd", "inlineHelpContent", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "inlineHelpLabel", "id"] }, { kind: "component", type: i6.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "component", type: i9.MessageStripComponent, selector: "fd-message-strip", inputs: ["class", "dismissible", "noIcon", "type", "id", "ariaLabelledBy", "ariaLabel", "width", "minWidth", "marginBottom", "indicationColor"], outputs: ["onDismiss"] }, { kind: "directive", type: i3$2.TableRowDirective, selector: "[fdTableRow], [fd-table-row]", inputs: ["activable", "highlightActive", "hoverable", "focusable", "main", "secondary", "active"] }, { kind: "directive", type: i3$2.TableCellDirective, selector: "[fdTableCell], [fd-table-cell]", inputs: ["noBorderX", "noBorderY", "activable", "focusable", "hoverable", "fitContent", "noPadding", "noData", "key"] }, { kind: "directive", type: i3$2.TableTextDirective, selector: "[fdTableText], [fd-table-text]", inputs: ["fdTableTextClass", "noWrap", "title", "maxWidth"] }, { kind: "component", type: MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "component", type: UlvContextMenuComponent, selector: "bsu-ulv-context-menu,[ulvContextMenu]", inputs: ["onlyOverflow", "rightClickEnable", "deviceName", "menuItems", "allColumns", "index", "mo", "styleIndex", "conditionalFormats", "disableOverflowContextMenu", "footerMode", "appendTo"], outputs: ["commandClick"] }, { kind: "component", type: BarsaTableColumnComponent, selector: "bsu-barsa-table-column", inputs: ["disableEllapsis"] }, { kind: "component", type: BarsaColumnIndicatorComponent, selector: "bsu-barsa-column-indicator", inputs: ["backColor", "hideBorderBottom"] }, { kind: "component", type: BarsaColumnRowNumberComponent, selector: "td[bsu-barsa-column-rownumber],bsu-barsa-column-rownumber", inputs: ["rowNumber"] }, { kind: "component", type: BarsaRowInlineActionlistComponent, selector: "bsu-barsa-row-inline-actionlist", inputs: ["actionList", "mo", "index"], outputs: ["btnClick"] }, { kind: "directive", type: ApplyConditionalFormatsDirective, selector: "[applyConditionalFormats]", inputs: ["applyConditionalFormats", "styleIndex", "hostEl", "dbName"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i2.ColumnIconPipe, name: "columnIcon" }, { kind: "pipe", type: i2.ColumnValuePipe, name: "columnValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5875
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: BarsaTableRowComponent, selector: "bsu-barsa-table-row", inputs: { showDetailsInRow: "showDetailsInRow", previewColumn: "previewColumn", columnComponents: "columnComponents", dirtyColumns: "dirtyColumns", detailsCollapsed: "detailsCollapsed" }, outputs: { columnSummary: "columnSummary" }, providers: [FormPanelService], viewQueries: [{ propertyName: "detailsFormItems", first: true, predicate: ["detailsFormItems"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "@if ((!mo.$Parent || parentExpanded) && visibility !== false) {\n<tr\n [class.row-error]=\"hasError\"\n [class.showdetails-on]=\"!detailsCollapsed && (detailsComponent?.Selector || detailsColumns?.length)\"\n [class.hasForm]=\"formSetting\"\n [class.hasCartable]=\"!!cartableParams\"\n #trEl\n fd-table-row\n [activable]=\"false\"\n [hoverable]=\"true\"\n [main]=\"true\"\n [focusable]=\"true\"\n [applyConditionalFormats]=\"conditionalFormats\"\n [styleIndex]=\"styleIndex\"\n [hostEl]=\"trEl\"\n [attr.aria-selected]=\"isChecked\"\n [class.has-preview-column]=\"!!previewColumn\"\n [class.brule-message]=\"bruleActionMessage || workflowState?.error\"\n [class.workflow-pending]=\"workflowState?.state === 'Pending'\"\n [style.background-color]=\"isOdd && !isChecked ? 'var(--sapList_Hover_Background)' : null\"\n>\n @if (mo.$Group || mo.$Group === '') {\n <td\n [style.padding-right]=\"rtl ? 'calc( 1rem + ' + level * 12 + 'px' + ' )' : 'inherit'\"\n [style.padding-left]=\"!rtl ? 'calc( 1rem + ' + level * 12 + 'px' + ' )' : 'inherit'\"\n fd-table-cell\n style=\"font-weight: bold; font-size: 1rem\"\n [attr.colspan]=\"\n columns.length +\n 1 +\n (rowIndicator ? -1 : 0) +\n (contextMenuItems && contextMenuItems.length > 0 && !inlineEditMode ? 1 : 0) +\n (showViewButton ? 1 : 0) +\n (showDetailsInRow && !inlineEditMode ? 1 : 0)\n \"\n class=\"row-group\"\n [class.mobile-mode]=\"secondaryColumns?.length\"\n [attr.level]=\"level\"\n [class.root-group]=\"level === 0\"\n >\n <button\n fd-button\n [fdType]=\"'transparent'\"\n [glyph]=\"expanded !== false ? 'navigation-down-arrow' : 'navigation-left-arrow'\"\n class=\"cell-expand\"\n (click)=\"onExpandClick()\"\n ></button>\n {{ mo.$Group === 'undefined' ? '' : mo.$Group }}\n </td>\n } @else {\n\n <ng-container *ngTemplateOutlet=\"statusIndicator\"></ng-container>\n @if (isCheckList) {\n <td fd-table-cell [style.width]=\"checkboxComponent ? '60px' : null\">\n @if (workflowState?.state === 'Pending') {\n <div style=\"position: absolute; left: 0; right: 0; bottom: 0; top: 0\">\n <bsu-mask [top]=\"'20px'\" [size]=\"'s'\"></bsu-mask>\n </div>\n } @if (checkboxComponent?.Selector) {\n <bnrc-dynamic-item-component\n [component]=\"checkboxComponent\"\n [mo]=\"mo\"\n [isChecked]=\"isChecked\"\n [UlvMainCtrlr]=\"UlvMainCtrlr\"\n [setting]=\"setting\"\n [parameters]=\"checkboxComponent.Parameters\"\n [editMode]=\"inlineEditMode\"\n [rtl]=\"rtl\"\n [deviceName]=\"deviceName\"\n [value]=\"isChecked\"\n [deviceSize]=\"deviceSize\"\n [index]=\"index\"\n [allColumns]=\"allColumns\"\n [typeDefId]=\"typeDefId\"\n (events)=\"onRowCheck()\"\n ></bnrc-dynamic-item-component>\n } @else {\n <fd-checkbox [name]=\"mo.$Caption\" [ngModel]=\"isChecked\" (ngModelChange)=\"onRowCheck()\"></fd-checkbox>\n }\n </td>\n } @if (!isCheckList && !showRowNumber) {\n <td\n fd-table-cell\n class=\"single-select\"\n (click)=\"!isCheckList && onRowCheck()\"\n style=\"padding: 0; text-align: center\"\n >\n @if (inlineEditMode && allowInlineEdit && (hasError || saving || saved)) { @if (hasError) {\n <fd-icon class=\"save-error\" glyph=\"error\"></fd-icon>\n } @if (saving) {\n <fd-busy-indicator [loading]=\"true\" [size]=\"'s'\" title=\"record saving\"></fd-busy-indicator>\n } @if (saved) {\n <fd-icon class=\"save-success\" glyph=\"accept\"></fd-icon>\n } } @else { @if (mo.$State === 'New' && !isChecked) {\n <fd-icon glyph=\"favorite\"></fd-icon>\n } @if (inlineEditMode && allowInlineEdit && isChecked) {\n <fd-icon glyph=\"edit\"></fd-icon>\n } }\n </td>\n }\n <ng-container *ngTemplateOutlet=\"rowNumberTemplate\"></ng-container>\n @for (column of columns; track column.Name; let columnIndex = $index) {\n <td\n class=\"rep-column\"\n [attr.dbName]=\"column.Name\"\n #tdEl\n fd-table-cell\n [applyConditionalFormats]=\"conditionalFormats\"\n [hostEl]=\"tdEl\"\n [styleIndex]=\"styleIndex\"\n [dbName]=\"column.Name\"\n [focusable]=\"false\"\n (click)=\"onColumnClick()\"\n (dblclick)=\"onRowClick()\"\n [hoverable]=\"inlineEditMode && allowInlineEdit\"\n [class.control-readonly]=\"column.IsReadonly\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n columnTemplate;\n context: {\n $implicit: column,\n mo: mo,\n index: columnIndex,\n inlineEditMode: inlineEditMode,\n layout94: layout$ | async\n }\n \"\n ></ng-container>\n </td>\n } @if (contextMenuItems.length && (!inlineEditMode || !allowInlineEdit)) {\n <td class=\"col-context-menu\" fd-table-cell>\n <bsu-ulv-context-menu\n [disableOverflowContextMenu]=\"disableOverflowContextMenu\"\n [conditionalFormats]=\"conditionalFormats\"\n [styleIndex]=\"styleIndex\"\n [mo]=\"mo\"\n [index]=\"index\"\n (commandClick)=\"onUlvCommand()\"\n [deviceName]=\"deviceName\"\n [menuItems]=\"contextMenuItems\"\n [allColumns]=\"allColumns\"\n ></bsu-ulv-context-menu>\n </td>\n } @if (showDetailsInRow && (!inlineEditMode || !allowInlineEdit)) {\n <td class=\"col-details\" fd-table-cell [fitContent]=\"true\">\n @if ((detailsComponent?.Selector || detailsColumns?.length || cartableParams?.moId ) && !hideDetailsText) {\n <div class=\"tw-flex tw-justify-end tw-w-full\">\n <button\n fd-button\n [label]=\"(detailsCollapsed ? detailsText : 'Hide') | bbbTranslate\"\n [fdType]=\"'transparent'\"\n (click)=\"onRowDetails()\"\n ></button>\n </div>\n }\n </td>\n } @if (actionList?.length && !inlineEditMode) {\n <td class=\"col-view\" [class.rtl]=\"rtl\" fd-table-cell [fitContent]=\"true\">\n <bsu-barsa-row-inline-actionlist\n [actionList]=\"actionList\"\n (btnClick)=\"actionListClick.emit($event)\"\n ></bsu-barsa-row-inline-actionlist>\n </td>\n } }\n</tr>\n} @if (secondaryColumns?.length && !mo.$Group && (!mo.$Parent || parentExpanded) && visibility !== false) {\n<tr\n #trEl\n fd-table-row\n [secondary]=\"true\"\n class=\"secondary-row\"\n [class.no-edit-mode]=\"!inlineEditMode\"\n [applyConditionalFormats]=\"conditionalFormats\"\n [styleIndex]=\"styleIndex\"\n [hostEl]=\"trEl\"\n [attr.aria-selected]=\"isChecked && !inlineEditMode ? true : false\"\n>\n <ng-container *ngTemplateOutlet=\"statusIndicator\"></ng-container>\n @if (!isCheckList) {\n <td fd-table-cell class=\"single-select\" (click)=\"onRowCheck()\"></td>\n }\n <td fd-table-cell colspan=\"100%\" (click)=\"onRowCheck()\" class=\"secondary p-wrapper\">\n <div style=\"display: flex; flex-direction: column\">\n @for (column of secondaryColumns; track _trackByColumn(columnIndex, column); let columnIndex = $index) {\n <p\n #pEl\n fd-table-text\n [applyConditionalFormats]=\"conditionalFormats\"\n [hostEl]=\"pEl\"\n [styleIndex]=\"styleIndex\"\n [dbName]=\"column.Name\"\n style=\"font-family: 'BARSAFONT Medium'\"\n >\n <label fd-form-label>{{ column.Caption }} :</label>\n <ng-container\n *ngTemplateOutlet=\"\n columnTemplate;\n context: {\n $implicit: column,\n mo: mo,\n index: columnIndex,\n inlineEditMode: inlineEditMode,\n layout94: layout$ | async\n }\n \"\n ></ng-container>\n </p>\n }\n </div>\n </td>\n</tr>\n} @if (cartableParams?.moId) {\n<tr\n [class.detailCollapsed]=\"detailsCollapsed\"\n fd-table-row\n class=\"showdetails cartable\"\n [attr.aria-selected]=\"isChecked\"\n [class.has-preview-column]=\"!!previewColumn\"\n>\n <ng-container *ngTemplateOutlet=\"statusIndicator\"></ng-container>\n <td\n (click)=\"onRowCheck()\"\n fd-table-cell\n [attr.colspan]=\"\n columns.length +\n 1 +\n (rowIndicator ? 1 : 0) +\n (contextMenuItems && contextMenuItems.length > 0 && !inlineEditMode ? 1 : 0) +\n (showViewButton ? 1 : 0) +\n (showDetailsInRow && !inlineEditMode ? 1 : 0)\n \"\n >\n <ng-container>\n <bnrc-form\n #cartableFormRef\n class=\"cartable-template\"\n [inlineEditInReport]=\"true\"\n [params]=\"cartableParams\"\n (beforeTransition)=\"onCartableBeforeTansition()\"\n (afterTransition)=\"onCartableAfterTansition($event)\"\n (bruleAction)=\"onCartableBruleAction($event)\"\n (click)=\"OnCartableFormClick($event)\"\n (formClose)=\"onCartableFormClosed()\"\n ></bnrc-form>\n </ng-container>\n </td>\n</tr>\n} @if (!detailsCollapsed && (detailsComponent?.Selector|| detailsColumns?.length)) {\n<tr fd-table-row class=\"showdetails\" [attr.aria-selected]=\"isChecked\" [class.has-preview-column]=\"!!previewColumn\">\n <ng-container *ngTemplateOutlet=\"statusIndicator\"></ng-container>\n <td\n (click)=\"onRowCheck()\"\n fd-table-cell\n [attr.colspan]=\"\n columns.length +\n 1 +\n (rowIndicator ? -1 : 0) +\n (contextMenuItems && contextMenuItems.length > 0 && !inlineEditMode ? 1 : 0) +\n (showViewButton ? 1 : 0) +\n (showDetailsInRow && !inlineEditMode ? 1 : 0)\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"\n detailsColumnsTemplate;\n context: { mo: mo, inlineEditMode: inlineEditMode, layout94: layout$ | async }\n \"\n ></ng-container>\n @if (detailsComponent && detailsComponent.Selector) {\n <bnrc-dynamic-item-component\n [component]=\"detailsComponent\"\n [mo]=\"mo\"\n [isChecked]=\"isChecked\"\n [UlvMainCtrlr]=\"UlvMainCtrlr\"\n [setting]=\"detailsComponentSetting\"\n [parameters]=\"detailsComponent.Settings\"\n [editMode]=\"inlineEditMode\"\n [formSetting]=\"formSetting\"\n [rtl]=\"rtl\"\n [deviceName]=\"deviceName\"\n [deviceSize]=\"deviceSize\"\n [index]=\"index\"\n [allColumns]=\"allColumns\"\n [typeDefId]=\"typeDefId\"\n ></bnrc-dynamic-item-component>\n }\n </td>\n</tr>\n} @if(previewColumn){\n<tr\n #trEl\n fd-table-row\n [secondary]=\"true\"\n class=\"preview-column\"\n [class.no-edit-mode]=\"!inlineEditMode\"\n [applyConditionalFormats]=\"conditionalFormats\"\n [styleIndex]=\"styleIndex\"\n [hostEl]=\"trEl\"\n [attr.aria-selected]=\"isChecked && !inlineEditMode ? true : false\"\n>\n <ng-container *ngTemplateOutlet=\"statusIndicator\"></ng-container>\n\n <td\n fd-table-cell\n [attr.colspan]=\"\n columns.length +\n 1 +\n (rowIndicator ? -1 : 0) +\n (contextMenuItems && contextMenuItems.length > 0 && !inlineEditMode ? 1 : 0) +\n (showViewButton ? 1 : 0) +\n (showDetailsInRow && !inlineEditMode ? 1 : 0)\n \"\n (click)=\"onRowCheck()\"\n >\n <div style=\"display: flex; flex-direction: column\">\n <p\n #pEl\n fd-table-text\n [applyConditionalFormats]=\"conditionalFormats\"\n [hostEl]=\"pEl\"\n [styleIndex]=\"styleIndex\"\n [dbName]=\"previewColumn.Name\"\n style=\"color: var(--sapAccentColor6)\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n columnTemplate;\n context: {\n $implicit: previewColumn,\n mo: mo,\n index: columns.length,\n inlineEditMode: inlineEditMode,\n layout94: layout$ | async\n }\n \"\n ></ng-container>\n </p>\n </div>\n </td>\n</tr>\n} @if(isLastChildGroup && groupSummary){\n<tr #trEl fd-table-row class=\"group-summary-row\" [class.no-edit-mode]=\"true\" [attr.aria-selected]=\"false\">\n <ng-container *ngTemplateOutlet=\"statusIndicator\"></ng-container>\n @if (!isCheckList) {\n <td fd-table-cell class=\"single-select\"></td>\n } @for (column of columns; track _trackByColumn(columnIndex, column); let columnIndex = $index) {\n <td fd-table-cell>\n <label #summaryRef>{{ reCalculateColumnSummary(summaryRef, column) }}</label>\n </td>\n } @if (contextMenuItems.length && (!inlineEditMode || !allowInlineEdit)) {\n <td class=\"col-context-menu\" fd-table-cell></td>\n } @if (showDetailsInRow && (!inlineEditMode || !allowInlineEdit)) {\n <td class=\"col-details\" fd-table-cell [fitContent]=\"true\"></td>\n } @if (actionList?.length && !inlineEditMode) {\n <td class=\"col-view\" fd-table-cell [fitContent]=\"true\"></td>\n }\n</tr>\n} @if (bruleActionMessage && inlineEditMode) {\n<tr fd-table-row>\n <ng-container *ngTemplateOutlet=\"statusIndicator\"></ng-container>\n <td\n fd-table-cell\n [attr.colspan]=\"\n columns.length +\n 1 +\n (rowIndicator ? -1 : 0) +\n (contextMenuItems && contextMenuItems.length > 0 && !inlineEditMode ? 1 : 0) +\n (showViewButton ? 1 : 0) +\n (showDetailsInRow && !inlineEditMode ? 1 : 0)\n \"\n >\n @if (bruleActionMessage.MessageType === 2) {\n <fd-message-strip [type]=\"bruleActionMessage.MessageType === 2 ? 'error' : 'information'\" [dismissible]=\"false\">\n {{ bruleActionMessage.MessageExpression }}\n </fd-message-strip>\n }\n </td>\n</tr>\n} @if (workflowState?.state === 'Finish' && workflowState?.error) {\n<tr fd-table-row>\n <ng-container *ngTemplateOutlet=\"statusIndicator\"></ng-container>\n <td\n fd-table-cell\n [attr.colspan]=\"\n columns.length +\n 1 +\n (rowIndicator ? -1 : 0) +\n (contextMenuItems && contextMenuItems.length > 0 && !inlineEditMode ? 1 : 0) +\n (showViewButton ? 1 : 0) +\n (showDetailsInRow && !inlineEditMode ? 1 : 0)\n \"\n >\n <fd-message-strip type=\"error\" [dismissible]=\"true\" (onDismiss)=\"onResetWorkflowState()\">\n {{ workflowState.error?.Text || workflowState.error?.MessageExpression }}\n </fd-message-strip>\n </td>\n</tr>\n}\n<ng-template #detailsColumnsTemplate let-mo=\"mo\" let-inlineEditMode=\"inlineEditMode\" let-layout94=\"layout94\">\n <ng-container\n *ngTemplateOutlet=\"\n detailsFormItems;\n context: {\n $implicit: detailsColumns,\n mo: this.mo,\n inlineEditMode: this.inlineEditMode,\n layout94: layout94\n }\n \"\n ></ng-container>\n</ng-template>\n<ng-template\n #detailsFormItems\n let-detailsColumns\n let-mo=\"mo\"\n let-inlineEditMode=\"inlineEditMode\"\n let-layout94=\"layout94\"\n>\n <div class=\"form-items\">\n @for (column of detailsColumns; track column; let columnIndex = $index) {\n <div fd-form-item>\n <label fd-form-label for=\"input-2\">{{ column.Caption }}</label>\n <ng-container\n *ngTemplateOutlet=\"\n columnTemplate;\n context: {\n $implicit: column,\n mo: mo,\n index: columnIndex,\n inlineEditMode: inlineEditMode,\n layout94: layout94\n }\n \"\n ></ng-container>\n </div>\n }\n </div>\n</ng-template>\n<ng-template\n #columnTemplate\n let-column\n let-mo=\"mo\"\n let-index=\"index\"\n let-inlineEditMode=\"inlineEditMode\"\n let-layout94=\"layout94\"\n>\n <bsu-barsa-table-column\n [mo]=\"mo\"\n [allColumns]=\"allColumns\"\n [column]=\"column\"\n [isdirty]=\"dirtyColumns && dirtyColumns[column.Name]\"\n [value]=\"column | columnValue: mo\"\n [icon]=\"column | columnIcon: mo\"\n [customComponent]=\"column.$CustomComponent\"\n [column]=\"column\"\n [disableEllapsis]=\"secondaryColumns?.length || disableEllapsis\"\n [editMode]=\"isChecked && inlineEditMode && allowInlineEdit\"\n [inlineEditMode]=\"inlineEditMode\"\n [isChecked]=\"isChecked\"\n [index]=\"index\"\n [formSetting]=\"formSetting\"\n [rtl]=\"rtl\"\n [isMobile]=\"isMobile\"\n [deviceName]=\"deviceName\"\n [deviceSize]=\"deviceSize\"\n [layout94]=\"layout94\"\n (save)=\"onEditFormPanelSave(null)\"\n (cancel)=\"onEditFormPanelCancel(null)\"\n (tab)=\"onTabKeyDown($event, index)\"\n (changeToEditMode)=\"onColumnChangeToEditMode($event, index)\"\n >\n </bsu-barsa-table-column>\n</ng-template>\n<ng-template #statusIndicator>\n @if (rowIndicator) {\n <bsu-barsa-column-indicator [hideBorderBottom]=\"!detailsCollapsed\" [backColor]=\"rowIndicatorColor\">\n </bsu-barsa-column-indicator>\n }\n</ng-template>\n<ng-template #rowNumberTemplate>\n @if (showRowNumber) {\n <td fd-table-cell bsu-barsa-column-rownumber [rowNumber]=\"rowNumber\" (click)=\"!isCheckList && onRowCheck()\"></td>\n }\n</ng-template>\n<tr fd-table-row style=\"pointer-events: none\"></tr>\n", styles: [":host{display:contents;width:100%}:host bnrc-form.cartable-template ::ng-deep bsu-ly-layout-container-of-root{padding-bottom:1rem}:host.has-preview-column .secondary-row td{border-bottom:none}:host ::ng-deep .row-group.mobile-mode{border-bottom:var(--sapList_BorderWidth, .0625rem) solid var(--sapList_BorderColor, #e4e4e4)!important}:host ::ng-deep .inlineEditMode bnrc-field-ui{padding:0;margin:0}:host ::ng-deep .inlineEditMode bsu-ui-simple-combo{margin:0!important}:host ::ng-deep .secondary.p-wrapper p{display:flex;align-items:center}bsu-layout-control:not(.hide-form-item){align-items:center;height:100%;min-width:auto;width:auto}tr.group-summary-row td{border:none;background-color:#dde5f0;border-right:none!important;font-weight:700}tr.group-summary-row td label{font-weight:700}tr.group-summary-row td label.NaN{display:none}td{vertical-align:middle}td.control-readonly{background-color:var(--sapList_HeaderBackground)}tr.brule-message td{border:0}.row-group{background-color:var(--sapBackgroundColor, \"#f7f7ff\")}.cell-expand{cursor:pointer;display:inline-flex;justify-content:center;align-items:center;font-size:.75rem;color:#0854a0;color:var(--sapContent_IconColor, #0854a0);min-width:2rem;max-width:2rem}.save-error{color:var(--sapField_InvalidColor)}.save-success{color:var(--sapField_SuccessColor)}.flow{max-width:100%}.flow-item{display:flex}.flow-item fd-micro-process-flow-icon{width:1.375rem;height:1.375rem}.flow-item h5{padding-right:.3rem}.cartable-template{padding:.5rem 0}.workflow-pending{opacity:.5;pointer-events:none;position:relative}.detailCollapsed{height:0;display:none}tr td.rep-column:first-child{position:sticky;right:0}tr:not([aria-selected=true]).preview-column td{border-bottom:var(--sapList_BorderWidth) var(--fdTable_Cell_Horizontal_Border_Style, solid) var(--sapList_BorderColor)}tr[aria-selected=true].has-preview-column td,tr.showdetails-on.hasCartable td,tr.showdetails-on.hasForm td{border-bottom:none}\n"], dependencies: [{ kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.FormComponent, selector: "bnrc-form", inputs: ["params", "customFormPanelUi", "formPanelCtrl", "UlvMainCtrlr", "formPanelCtrlId", "saveOnChange", "inlineEditInReport"], outputs: ["titleChanged", "moChanged", "formClose", "uiComponent", "formRendered", "bruleAction", "beforeTransition", "afterTransition"] }, { kind: "component", type: i2.DynamicItemComponent, selector: "bnrc-dynamic-item-component", inputs: ["mo", "allColumns", "moDataList", "columns", "column", "index", "last", "deviceName", "deviceSize", "rtl", "editMode", "setting", "parameters", "contextMenuItems", "canView", "showRowNumber", "rowNumber", "formSetting", "conditionalFormats", "disableOverflowContextMenu", "navigationArrow", "isCheckList", "fields", "isChecked", "layout94$", "inlineEditMode", "isNewInlineMo", "allowInlineEdit", "typeDefId", "rowIndicator", "rowIndicatorColor", "UlvMainCtrlr"] }, { kind: "directive", type: i2.FormCloseDirective, selector: "[formClose]", inputs: ["isMobile"] }, { kind: "component", type: i5$1.BusyIndicatorComponent, selector: "fd-busy-indicator", inputs: ["loading", "size", "block", "ariaLabel", "title", "label", "ariaLive"] }, { kind: "component", type: i4$1.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i5.CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "role", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "component", type: i2$1.FormItemComponent, selector: "[fd-form-item]", inputs: ["isInline", "horizontal"] }, { kind: "component", type: i2$1.FormLabelComponent, selector: "[fd-form-label]", inputs: ["required", "colon", "alignLabelEnd", "inlineHelpContent", "inlineHelpGlyph", "inlineHelpTriggers", "inlineHelpBodyPlacement", "inlineHelpPlacement", "inlineHelpLabel", "id"] }, { kind: "component", type: i6.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"] }, { kind: "component", type: i9.MessageStripComponent, selector: "fd-message-strip", inputs: ["class", "dismissible", "noIcon", "type", "id", "ariaLabelledBy", "ariaLabel", "width", "minWidth", "marginBottom", "indicationColor"], outputs: ["onDismiss"] }, { kind: "directive", type: i3$2.TableRowDirective, selector: "[fdTableRow], [fd-table-row]", inputs: ["activable", "highlightActive", "hoverable", "focusable", "main", "secondary", "active"] }, { kind: "directive", type: i3$2.TableCellDirective, selector: "[fdTableCell], [fd-table-cell]", inputs: ["noBorderX", "noBorderY", "activable", "focusable", "hoverable", "fitContent", "noPadding", "noData", "key"] }, { kind: "directive", type: i3$2.TableTextDirective, selector: "[fdTableText], [fd-table-text]", inputs: ["fdTableTextClass", "noWrap", "title", "maxWidth"] }, { kind: "component", type: MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "component", type: UlvContextMenuComponent, selector: "bsu-ulv-context-menu,[ulvContextMenu]", inputs: ["onlyOverflow", "rightClickEnable", "deviceName", "menuItems", "allColumns", "index", "mo", "styleIndex", "conditionalFormats", "disableOverflowContextMenu", "footerMode", "appendTo"], outputs: ["commandClick"] }, { kind: "component", type: BarsaTableColumnComponent, selector: "bsu-barsa-table-column", inputs: ["disableEllapsis", "fdTextMode"] }, { kind: "component", type: BarsaColumnIndicatorComponent, selector: "bsu-barsa-column-indicator", inputs: ["backColor", "hideBorderBottom"] }, { kind: "component", type: BarsaColumnRowNumberComponent, selector: "td[bsu-barsa-column-rownumber],bsu-barsa-column-rownumber", inputs: ["rowNumber"] }, { kind: "component", type: BarsaRowInlineActionlistComponent, selector: "bsu-barsa-row-inline-actionlist", inputs: ["actionList", "mo", "index"], outputs: ["btnClick"] }, { kind: "directive", type: ApplyConditionalFormatsDirective, selector: "[applyConditionalFormats]", inputs: ["applyConditionalFormats", "styleIndex", "hostEl", "dbName"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }, { kind: "pipe", type: i2.ColumnIconPipe, name: "columnIcon" }, { kind: "pipe", type: i2.ColumnValuePipe, name: "columnValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5872
5876
|
}
|
|
5873
5877
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: BarsaTableRowComponent, decorators: [{
|
|
5874
5878
|
type: Component,
|
|
@@ -10722,6 +10726,13 @@ class LayoutWizardComponent extends FormPropsBaseComponent {
|
|
|
10722
10726
|
this.setHeightOfFormContent();
|
|
10723
10727
|
}, 10);
|
|
10724
10728
|
}
|
|
10729
|
+
onMouseDown(i, e) {
|
|
10730
|
+
if (this.preventStepByClick) {
|
|
10731
|
+
e.stopPropagation();
|
|
10732
|
+
e.preventDefault();
|
|
10733
|
+
return;
|
|
10734
|
+
}
|
|
10735
|
+
}
|
|
10725
10736
|
onStepClick(i, e) {
|
|
10726
10737
|
if (i > this.selectedIndex || this.preventStepByClick) {
|
|
10727
10738
|
e.stopPropagation();
|
|
@@ -10782,11 +10793,11 @@ class LayoutWizardComponent extends FormPropsBaseComponent {
|
|
|
10782
10793
|
}
|
|
10783
10794
|
}
|
|
10784
10795
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: LayoutWizardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
10785
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: LayoutWizardComponent, selector: "bsu-layout-wizard", inputs: { root: "root", parentContentRef: "parentContentRef", selectedIndex: "selectedIndex", maxContentWidth: "maxContentWidth", minTabHeight: "minTabHeight" }, viewQueries: [{ propertyName: "layoutRef", first: true, predicate: ["layoutRef"], descendants: true }, { propertyName: "containerRootRef", first: true, predicate: ["containerRootRef"], descendants: true, read: ElementRef }, { propertyName: "wizardEl", first: true, predicate: WizardComponent, descendants: true, read: ElementRef }, { propertyName: "_wizardComponent", first: true, predicate: WizardComponent, descendants: true, read: ElementRef }, { propertyName: "wizardStepComponents", predicate: WizardStepComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<fd-wizard [appendToWizard]=\"false\">\n <fd-wizard-navigation>\n <ul fd-wizard-progress-bar [size]=\"wizardSize\" role=\"list\" aria-label=\"Wizard Steps\">\n @for (step of modernTabs; track step; let i = $index) {\n <li\n fd-wizard-step\n [status]=\"arrStatus[i]\"\n (statusChange)=\"onStatusChange(i, $event)\"\n [label]=\"step.Title || '' | bbbTranslate\"\n (click)=\"onStepClick(i, $event)\"\n >\n <fd-wizard-step-indicator>{{ i + 1 }}</fd-wizard-step-indicator>\n <fd-wizard-content>\n <div class=\"fix-form-content\">\n <div\n #layoutRef\n [style.max-width]=\"maxContentWidth ? maxContentWidth + 'px' : 'auto'\"\n [style.min-height.px]=\"minTabHeight ? minTabHeight : 400\"\n >\n @if (i === selectedIndex) {\n <bsu-ly-layout-container-of-root\n #containerRootRef\n class=\"content-wizard\"\n [config]=\"step\"\n [isPanel]=\"false\"\n [isRoot]=\"true\"\n ></bsu-ly-layout-container-of-root>\n }\n </div>\n </div>\n </fd-wizard-content>\n </li>\n }\n </ul>\n </fd-wizard-navigation>\n @if(showFooter){\n <bsu-layout-actions\n [canSend]=\"canSend\"\n [buttons]=\"layoutActions\"\n [isMobile]=\"isMobile\"\n [landscape]=\"landscape\"\n [standalone]=\"standalone\"\n [workflowButtons]=\"workflowButtons\"\n [footerDesign]=\"footerDesign\"\n [workflowButtonsComboMode]=\"workflowButtonsComboMode\"\n [deviceSize]=\"deviceSize\"\n [rtl]=\"rtl\"\n (toolClick)=\"onEvents('toolbarClick', $event)\"\n (workflowChoiceSelect)=\"onEvents('workflowChoiceSelect', $event)\"\n >\n </bsu-layout-actions>\n }\n</fd-wizard>\n", styles: [":host{width:100%;height:100%;display:block}:host ::ng-deep .fd-wizard-container-wrapper{background:var(--fdWizard_Content_Default_Background)}:host ::ng-deep fd-dynamic-page-content{padding:0!important}.fd-wizard__progress-bar{border-bottom:1px solid #e4e4e4;box-shadow:none;z-index:0}.fix-form-content{display:flex;justify-content:center;align-items:flex-start;overflow-y:auto}.fix-form-content>div{flex-grow:1;position:relative}.content-wizard{position:absolute}@media (max-width: 767px){.content-wizard{padding:0 10px}}\n"], dependencies: [{ kind: "component", type: i1$7.WizardComponent, selector: "fd-wizard", inputs: ["appendToWizard", "contentHeight", "responsivePaddings", "displaySummaryStep", "ariaLabel"] }, { kind: "component", type: i1$7.WizardNavigationComponent, selector: "fd-wizard-navigation", inputs: ["ariaLabel"] }, { kind: "directive", type: i1$7.WizardProgressBarDirective, selector: "[fd-wizard-progress-bar]", inputs: ["size"] }, { kind: "component", type: i1$7.WizardStepComponent, selector: "[fd-wizard-step]", inputs: ["ariaLabel", "ariaRoleDecription", "status", "branching", "label", "optionalText", "isSummary", "stepClickValidator"], outputs: ["statusChange", "stepClicked", "stepIndicatorItemClicked"] }, { kind: "component", type: i1$7.WizardStepIndicatorComponent, selector: "fd-wizard-step-indicator", inputs: ["glyph", "glyphFont"], outputs: ["stepIndicatorItemClicked"] }, { kind: "component", type: i1$7.WizardContentComponent, selector: "fd-wizard-content", inputs: ["contentBackground", "size"] }, { kind: "component", type: LyLayoutContainerOfRootComponent, selector: "bsu-ly-layout-container-of-root" }, { kind: "component", type: LayoutActionsComponent, selector: "bsu-layout-actions", inputs: ["workflowButtons", "workflowButtonsComboMode", "canSend", "simple", "footerDesign"], outputs: ["workflowChoiceSelect"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
10796
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: LayoutWizardComponent, selector: "bsu-layout-wizard", inputs: { root: "root", parentContentRef: "parentContentRef", selectedIndex: "selectedIndex", maxContentWidth: "maxContentWidth", minTabHeight: "minTabHeight" }, viewQueries: [{ propertyName: "layoutRef", first: true, predicate: ["layoutRef"], descendants: true }, { propertyName: "containerRootRef", first: true, predicate: ["containerRootRef"], descendants: true, read: ElementRef }, { propertyName: "wizardEl", first: true, predicate: WizardComponent, descendants: true, read: ElementRef }, { propertyName: "_wizardComponent", first: true, predicate: WizardComponent, descendants: true, read: ElementRef }, { propertyName: "wizardStepComponents", predicate: WizardStepComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<fd-wizard [appendToWizard]=\"false\">\n <fd-wizard-navigation>\n <ul fd-wizard-progress-bar [size]=\"wizardSize\" role=\"list\" aria-label=\"Wizard Steps\">\n @for (step of modernTabs; track step; let i = $index) {\n <li\n fd-wizard-step\n [status]=\"arrStatus[i]\"\n (statusChange)=\"onStatusChange(i, $event)\"\n [label]=\"step.Title || '' | bbbTranslate\"\n (click)=\"onStepClick(i, $event)\"\n (mousedown)=\"onMouseDown(i, $event)\"\n >\n <fd-wizard-step-indicator>{{ i + 1 }}</fd-wizard-step-indicator>\n <fd-wizard-content>\n <div class=\"fix-form-content\">\n <div\n #layoutRef\n [style.max-width]=\"maxContentWidth ? maxContentWidth + 'px' : 'auto'\"\n [style.min-height.px]=\"minTabHeight ? minTabHeight : 400\"\n >\n @if (i === selectedIndex) {\n <bsu-ly-layout-container-of-root\n #containerRootRef\n class=\"content-wizard\"\n [config]=\"step\"\n [isPanel]=\"false\"\n [isRoot]=\"true\"\n ></bsu-ly-layout-container-of-root>\n }\n </div>\n </div>\n </fd-wizard-content>\n </li>\n }\n </ul>\n </fd-wizard-navigation>\n @if(showFooter){\n <bsu-layout-actions\n [canSend]=\"canSend\"\n [buttons]=\"layoutActions\"\n [isMobile]=\"isMobile\"\n [landscape]=\"landscape\"\n [standalone]=\"standalone\"\n [workflowButtons]=\"workflowButtons\"\n [footerDesign]=\"footerDesign\"\n [workflowButtonsComboMode]=\"workflowButtonsComboMode\"\n [deviceSize]=\"deviceSize\"\n [rtl]=\"rtl\"\n (toolClick)=\"onEvents('toolbarClick', $event)\"\n (workflowChoiceSelect)=\"onEvents('workflowChoiceSelect', $event)\"\n >\n </bsu-layout-actions>\n }\n</fd-wizard>\n", styles: [":host{width:100%;height:100%;display:block}:host ::ng-deep .fd-wizard-container-wrapper{background:var(--fdWizard_Content_Default_Background)}:host ::ng-deep fd-dynamic-page-content{padding:0!important}.fd-wizard__progress-bar{border-bottom:1px solid #e4e4e4;box-shadow:none;z-index:0}.fix-form-content{display:flex;justify-content:center;align-items:flex-start;overflow-y:auto}.fix-form-content>div{flex-grow:1;position:relative}.content-wizard{position:absolute}@media (max-width: 767px){.content-wizard{padding:0 10px}}\n"], dependencies: [{ kind: "component", type: i1$7.WizardComponent, selector: "fd-wizard", inputs: ["appendToWizard", "contentHeight", "responsivePaddings", "displaySummaryStep", "ariaLabel"] }, { kind: "component", type: i1$7.WizardNavigationComponent, selector: "fd-wizard-navigation", inputs: ["ariaLabel"] }, { kind: "directive", type: i1$7.WizardProgressBarDirective, selector: "[fd-wizard-progress-bar]", inputs: ["size"] }, { kind: "component", type: i1$7.WizardStepComponent, selector: "[fd-wizard-step]", inputs: ["ariaLabel", "ariaRoleDecription", "status", "branching", "label", "optionalText", "isSummary", "stepClickValidator"], outputs: ["statusChange", "stepClicked", "stepIndicatorItemClicked"] }, { kind: "component", type: i1$7.WizardStepIndicatorComponent, selector: "fd-wizard-step-indicator", inputs: ["glyph", "glyphFont"], outputs: ["stepIndicatorItemClicked"] }, { kind: "component", type: i1$7.WizardContentComponent, selector: "fd-wizard-content", inputs: ["contentBackground", "size"] }, { kind: "component", type: LyLayoutContainerOfRootComponent, selector: "bsu-ly-layout-container-of-root" }, { kind: "component", type: LayoutActionsComponent, selector: "bsu-layout-actions", inputs: ["workflowButtons", "workflowButtonsComboMode", "canSend", "simple", "footerDesign"], outputs: ["workflowChoiceSelect"] }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
10786
10797
|
}
|
|
10787
10798
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: LayoutWizardComponent, decorators: [{
|
|
10788
10799
|
type: Component,
|
|
10789
|
-
args: [{ selector: 'bsu-layout-wizard', changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-wizard [appendToWizard]=\"false\">\n <fd-wizard-navigation>\n <ul fd-wizard-progress-bar [size]=\"wizardSize\" role=\"list\" aria-label=\"Wizard Steps\">\n @for (step of modernTabs; track step; let i = $index) {\n <li\n fd-wizard-step\n [status]=\"arrStatus[i]\"\n (statusChange)=\"onStatusChange(i, $event)\"\n [label]=\"step.Title || '' | bbbTranslate\"\n (click)=\"onStepClick(i, $event)\"\n >\n <fd-wizard-step-indicator>{{ i + 1 }}</fd-wizard-step-indicator>\n <fd-wizard-content>\n <div class=\"fix-form-content\">\n <div\n #layoutRef\n [style.max-width]=\"maxContentWidth ? maxContentWidth + 'px' : 'auto'\"\n [style.min-height.px]=\"minTabHeight ? minTabHeight : 400\"\n >\n @if (i === selectedIndex) {\n <bsu-ly-layout-container-of-root\n #containerRootRef\n class=\"content-wizard\"\n [config]=\"step\"\n [isPanel]=\"false\"\n [isRoot]=\"true\"\n ></bsu-ly-layout-container-of-root>\n }\n </div>\n </div>\n </fd-wizard-content>\n </li>\n }\n </ul>\n </fd-wizard-navigation>\n @if(showFooter){\n <bsu-layout-actions\n [canSend]=\"canSend\"\n [buttons]=\"layoutActions\"\n [isMobile]=\"isMobile\"\n [landscape]=\"landscape\"\n [standalone]=\"standalone\"\n [workflowButtons]=\"workflowButtons\"\n [footerDesign]=\"footerDesign\"\n [workflowButtonsComboMode]=\"workflowButtonsComboMode\"\n [deviceSize]=\"deviceSize\"\n [rtl]=\"rtl\"\n (toolClick)=\"onEvents('toolbarClick', $event)\"\n (workflowChoiceSelect)=\"onEvents('workflowChoiceSelect', $event)\"\n >\n </bsu-layout-actions>\n }\n</fd-wizard>\n", styles: [":host{width:100%;height:100%;display:block}:host ::ng-deep .fd-wizard-container-wrapper{background:var(--fdWizard_Content_Default_Background)}:host ::ng-deep fd-dynamic-page-content{padding:0!important}.fd-wizard__progress-bar{border-bottom:1px solid #e4e4e4;box-shadow:none;z-index:0}.fix-form-content{display:flex;justify-content:center;align-items:flex-start;overflow-y:auto}.fix-form-content>div{flex-grow:1;position:relative}.content-wizard{position:absolute}@media (max-width: 767px){.content-wizard{padding:0 10px}}\n"] }]
|
|
10800
|
+
args: [{ selector: 'bsu-layout-wizard', changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-wizard [appendToWizard]=\"false\">\n <fd-wizard-navigation>\n <ul fd-wizard-progress-bar [size]=\"wizardSize\" role=\"list\" aria-label=\"Wizard Steps\">\n @for (step of modernTabs; track step; let i = $index) {\n <li\n fd-wizard-step\n [status]=\"arrStatus[i]\"\n (statusChange)=\"onStatusChange(i, $event)\"\n [label]=\"step.Title || '' | bbbTranslate\"\n (click)=\"onStepClick(i, $event)\"\n (mousedown)=\"onMouseDown(i, $event)\"\n >\n <fd-wizard-step-indicator>{{ i + 1 }}</fd-wizard-step-indicator>\n <fd-wizard-content>\n <div class=\"fix-form-content\">\n <div\n #layoutRef\n [style.max-width]=\"maxContentWidth ? maxContentWidth + 'px' : 'auto'\"\n [style.min-height.px]=\"minTabHeight ? minTabHeight : 400\"\n >\n @if (i === selectedIndex) {\n <bsu-ly-layout-container-of-root\n #containerRootRef\n class=\"content-wizard\"\n [config]=\"step\"\n [isPanel]=\"false\"\n [isRoot]=\"true\"\n ></bsu-ly-layout-container-of-root>\n }\n </div>\n </div>\n </fd-wizard-content>\n </li>\n }\n </ul>\n </fd-wizard-navigation>\n @if(showFooter){\n <bsu-layout-actions\n [canSend]=\"canSend\"\n [buttons]=\"layoutActions\"\n [isMobile]=\"isMobile\"\n [landscape]=\"landscape\"\n [standalone]=\"standalone\"\n [workflowButtons]=\"workflowButtons\"\n [footerDesign]=\"footerDesign\"\n [workflowButtonsComboMode]=\"workflowButtonsComboMode\"\n [deviceSize]=\"deviceSize\"\n [rtl]=\"rtl\"\n (toolClick)=\"onEvents('toolbarClick', $event)\"\n (workflowChoiceSelect)=\"onEvents('workflowChoiceSelect', $event)\"\n >\n </bsu-layout-actions>\n }\n</fd-wizard>\n", styles: [":host{width:100%;height:100%;display:block}:host ::ng-deep .fd-wizard-container-wrapper{background:var(--fdWizard_Content_Default_Background)}:host ::ng-deep fd-dynamic-page-content{padding:0!important}.fd-wizard__progress-bar{border-bottom:1px solid #e4e4e4;box-shadow:none;z-index:0}.fix-form-content{display:flex;justify-content:center;align-items:flex-start;overflow-y:auto}.fix-form-content>div{flex-grow:1;position:relative}.content-wizard{position:absolute}@media (max-width: 767px){.content-wizard{padding:0 10px}}\n"] }]
|
|
10790
10801
|
}], propDecorators: { layoutRef: [{
|
|
10791
10802
|
type: ViewChild,
|
|
10792
10803
|
args: ['layoutRef']
|