barsa-sap-ui 2.2.21 → 2.2.22
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/download-files.directive.mjs +2 -2
- package/esm2022/lib/report-new-top-form/report-new-top-form.component.mjs +2 -1
- package/esm2022/lib/ui-picture-file/ui-picture-file.component.mjs +3 -3
- package/esm2022/lib/ui-pictures-info/ui-pictures-info.component.mjs +3 -3
- package/fesm2022/barsa-sap-ui.mjs +6 -5
- package/fesm2022/barsa-sap-ui.mjs.map +1 -1
- package/lib/barsa-sap-ui.module.d.ts +1 -1
- package/lib/index.d.ts +2 -2
- package/lib/report-new-top-form/report-new-top-form.component.d.ts +1 -0
- package/package.json +1 -1
|
@@ -4703,7 +4703,7 @@ class DownloadFilesDirective {
|
|
|
4703
4703
|
constructor() { }
|
|
4704
4704
|
_handleClick() {
|
|
4705
4705
|
const files = this.files;
|
|
4706
|
-
if (!files
|
|
4706
|
+
if (!files?.length) {
|
|
4707
4707
|
return;
|
|
4708
4708
|
}
|
|
4709
4709
|
const firstFile = files[0];
|
|
@@ -4893,6 +4893,7 @@ class ReportNewTopFormComponent extends BaseViewItemPropsComponent {
|
|
|
4893
4893
|
this.add = new EventEmitter();
|
|
4894
4894
|
this.save = new EventEmitter();
|
|
4895
4895
|
this.rewriteInlineEditLayout94 = false;
|
|
4896
|
+
this.rewriteLayout = false;
|
|
4896
4897
|
}
|
|
4897
4898
|
ngOnInit() {
|
|
4898
4899
|
this._createNewMo();
|
|
@@ -10402,11 +10403,11 @@ class UiPicturesInfoComponent extends DeviceInfoFieldBaseComponent {
|
|
|
10402
10403
|
this.value = value;
|
|
10403
10404
|
}
|
|
10404
10405
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UiPicturesInfoComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
10405
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: UiPicturesInfoComponent, selector: "bsu-ui-pictures-info", inputs: { value: "value" }, providers: [UploadService], viewQueries: [{ propertyName: "gallery", first: true, predicate: ["gallery"], descendants: true }, { propertyName: "dialogTemplate", first: true, predicate: ["dialogTemplate"], descendants: true, read: TemplateRef }], usesInheritance: true, ngImport: i0, template: "<fd-file-uploader\r\n #uploader\r\n [style.display]=\"'none'\"\r\n [id]=\"id\"\r\n [name]=\"'pictures_' + id\"\r\n [placeholder]=\"'AttachPicture' | bbbTranslate\"\r\n [buttonLabel]=\"'AttachPicture' | bbbTranslate\"\r\n [buttonAriaLabel]=\"'AttachPicture' | bbbTranslate\"\r\n accept=\".png,.jpg,.bpm,.jpeg,.gif,.png,.tif,.pdf\"\r\n [fileLimit]=\"maxFileCount === 0 ? 100 : maxFileCount\"\r\n [multiple]=\"maxFileCount === 0 || maxFileCount > 1\"\r\n (selectedFilesChanged)=\"onFileSelection($event)\"\r\n></fd-file-uploader>\r\n\r\n<ng-container\r\n *ngTemplateOutlet=\"layoutGridTpl; context: { disableOrReadonly: disableOrReadonly$ | async }\"\r\n></ng-container>\r\n<ng-template #layoutGridTpl let-inDialog=\"inDialog\" let-gallery=\"gallery\" let-disableOrReadonly=\"disableOrReadonly\">\r\n <fd-layout-grid>\r\n @if (mediaData$ | async; as mediaData) {\r\n <div fdLayoutGridRow>\r\n @for (media of mediaData; track media; let i = $index) {\r\n <div [fdLayoutGridCol]=\"6\" [colMd]=\"3\" [colLg]=\"2\" [colXl]=\"2\" (click)=\"onMedaiClick(gallery, media, i)\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n cardTpl;\r\n context: {\r\n $implicit: media,\r\n mediaData: this.mediaData,\r\n inDialog: this.inDialog,\r\n index: i,\r\n disableOrReadonly: disableOrReadonly\r\n }\r\n \"\r\n ></ng-container>\r\n </div>\r\n } @if (!inDialog && !disableOrReadonly) {\r\n <div [fdLayoutGridCol]=\"6\" [colMd]=\"3\" [colLg]=\"2\" [colXl]=\"2\">\r\n <ng-container *ngTemplateOutlet=\"newFile\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </fd-layout-grid>\r\n</ng-template>\r\n<ng-template\r\n #cardTpl\r\n let-media\r\n let-mediaData=\"mediaData\"\r\n let-inDialog=\"inDialog\"\r\n let-index=\"index\"\r\n let-disableOrReadonly=\"disableOrReadonly\"\r\n>\r\n <fd-card class=\"media\" [class.inDialog]=\"inDialog\">\r\n <fd-card-content style=\"text-align: center; height: 120px\">\r\n <img imgLazy [imgLazy]=\"media.thumbnailUrl\" [src]=\"media.thumbnailUrl\" #img />\r\n </fd-card-content>\r\n @if (!inDialog) {\r\n <fd-card-footer>\r\n <button\r\n glyph=\"print\"\r\n *fdCardFooterActionItem\r\n fd-button\r\n fdType=\"transparent\"\r\n [files]=\"[media]\"\r\n printFiles\r\n ></button>\r\n <button\r\n glyph=\"full-screen\"\r\n [title]=\"'FullScreen' | bbbTranslate\"\r\n *fdCardFooterActionItem\r\n fd-button\r\n fdType=\"transparent\"\r\n (click)=\"onFullscreen(media, mediaData)\"\r\n ></button>\r\n\r\n <button fd-button [glyph]=\"'overflow'\" [fdType]=\"'transparent'\" [fdMenuTrigger]=\"menu\"></button>\r\n <fd-menu #menu>\r\n <li fd-menu-item [files]=\"mediaData\" printFiles>\r\n <a fd-menu-interactive>\r\n <fd-menu-addon position=\"before\" glyph=\"print\"></fd-menu-addon>\r\n <span fd-menu-title>{{ 'Print' | bbbTranslate }} {{ 'All' | bbbTranslate }}</span>\r\n </a>\r\n </li>\r\n\r\n @if (!disableOrReadonly) {\r\n <li fd-menu-item (click)=\"onRotate(img, media, index)\">\r\n <a fd-menu-interactive>\r\n <fd-menu-addon position=\"before\" glyph=\"rotate\"></fd-menu-addon>\r\n <span fd-menu-title>{{ 'Rotate' | bbbTranslate }}</span>\r\n </a>\r\n </li>\r\n <li fd-menu-item (click)=\"onDelete(index)\">\r\n <a fd-menu-interactive>\r\n <fd-menu-addon position=\"before\" glyph=\"delete\"></fd-menu-addon>\r\n <span fd-menu-title>{{ 'Delete' | bbbTranslate }}</span>\r\n </a>\r\n </li>\r\n }\r\n </fd-menu>\r\n </fd-card-footer>\r\n }\r\n </fd-card>\r\n</ng-template>\r\n<ng-template #newFile>\r\n <div style=\"position: relative; height: 100%\">\r\n <fd-card>\r\n <fd-card-content style=\"display: flex; align-items: center; justify-content: center; min-height: 120px\">\r\n <button\r\n fd-button\r\n glyph=\"add-photo\"\r\n fdType=\"transparent\"\r\n [label]=\"'AttachFile' | bbbTranslate\"\r\n (click)=\"uploader.open()\"\r\n ></button>\r\n </fd-card-content>\r\n\r\n <fd-card-footer style=\"border-top: 1px solid #ccc\">\r\n <button fd-button [glyph]=\"'overflow'\" [fdType]=\"'transparent'\" [fdMenuTrigger]=\"menu\"></button>\r\n <fd-menu #menu>\r\n <li fd-menu-item (click)=\"onScan()\">\r\n <a fd-menu-interactive>\r\n <span fd-menu-title>{{ 'Scan' | bbbTranslate }}</span>\r\n </a>\r\n </li>\r\n <li fd-menu-item (click)=\"onAdvanceScan()\">\r\n <a fd-menu-interactive>\r\n <span fd-menu-title>{{ 'AdvancedScan' | bbbTranslate }}</span>\r\n </a>\r\n </li>\r\n </fd-menu>\r\n </fd-card-footer>\r\n </fd-card>\r\n @if ((uploadingState$ | async)?.uploading === true) {\r\n <bsu-mask></bsu-mask>\r\n }\r\n </div>\r\n</ng-template>\r\n<ng-template #dialogTemplate let-dialog let-dialogConfig=\"dialogConfig\">\r\n <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\" #dialogTpl class=\"vertical\">\r\n <fd-dialog-header>\r\n <ng-template fdkTemplate=\"header\">\r\n <div fd-bar-left>\r\n <fd-bar-element>\r\n <h1 fd-title>{{ Setting.ControlFieldCaptionTranslated }}</h1>\r\n </fd-bar-element>\r\n </div>\r\n <div fd-bar-right>\r\n <fd-button-bar\r\n ariaLabel=\"print\"\r\n [glyph]=\"'print'\"\r\n fdType=\"transparent\"\r\n [files]=\"dialog.data.mediaData\"\r\n printFiles\r\n ></fd-button-bar>\r\n @if (!dialogConfig.fullscreen) {\r\n <fd-button-bar\r\n ariaLabel=\"Fit image size\"\r\n [glyph]=\"'resize'\"\r\n [fdType]=\"fillWidth ? 'emphasized' : 'transparent'\"\r\n (click)=\"fillWidth = !fillWidth\"\r\n ></fd-button-bar>\r\n }\r\n <fd-button-bar ariaLabel=\"close\" glyph=\"decline\" (click)=\"dialog.close()\"></fd-button-bar>\r\n </div>\r\n </ng-template>\r\n </fd-dialog-header>\r\n <fd-dialog-body #fdbody>\r\n <div #gallery class=\"gallery inDialog\" style=\"flex: 1\">\r\n @for (media of dialog.data.mediaData; track media.FileId; let i = $index) {\r\n <div\r\n class=\"column big-imgs-box\"\r\n [class.fill-width]=\"fillWidth\"\r\n [class.fill-all]=\"fillAll\"\r\n [class.fill-original]=\"fillOriginal\"\r\n [ngClass]=\"selectedZoom\"\r\n >\r\n <fd-toolbar fdType=\"solid\" fdType=\"transparent\" [clearBorder]=\"true\">\r\n <fd-toolbar-spacer></fd-toolbar-spacer>\r\n <button fd-toolbar-item fd-button glyph=\"rotate\" (click)=\"onRotate(img, media, i)\"></button>\r\n <fd-toolbar-spacer></fd-toolbar-spacer>\r\n </fd-toolbar>\r\n <div class=\"pics\" [id]=\"i\">\r\n <bsu-mask></bsu-mask>\r\n <img #img imgLazy [imgLazy]=\"media.mediaUrl\" [src]=\"media.mediaUrl\" />\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n @if ((deviceSize$ | async) !== 's') {\r\n <div class=\"thumbnail\" style=\"flex-shrink: 1\">\r\n <ng-cotainer\r\n *ngTemplateOutlet=\"\r\n layoutGridTpl;\r\n context: {\r\n inDialog: true,\r\n gallery: gallery,\r\n disableOrReadonly: disableOrReadonly$ | async\r\n }\r\n \"\r\n ></ng-cotainer>\r\n </div>\r\n }\r\n </fd-dialog-body>\r\n </fd-dialog>\r\n</ng-template>\r\n", styles: [":host{position:relative}:host ::ng-deep .delete button{border-color:transparent!important;background-color:transparent!important}.big-imgs-box{position:relative}.big-imgs-box>fd-toolbar{position:absolute;z-index:5;opacity:.5}.big-imgs-box>fd-toolbar:hover{opacity:1}fd-toolbar{width:100%}fd-dialog-footer{justify-content:center}.hatchBackground{min-height:100px}.gallery{display:flex;width:100%;height:400px;column-gap:1px;background-color:var(--sapField_Background, #fff)}.gallery ::-webkit-scrollbar{width:7px;height:7px}.gallery ::-webkit-scrollbar-track{box-shadow:inset 0 0 5px gray;border-radius:4px}.gallery ::-webkit-scrollbar-thumb{background:#555454;border-radius:4px}.gallery ::-webkit-scrollbar-thumb:hover{background:#2c2b2b}.gallery .column{overflow-y:scroll;display:flex;flex-direction:column;row-gap:3%;align-items:center}.gallery .column .pics{width:100%;display:flex;justify-content:center}.gallery .column .pics img{border-radius:5px}.gallery .column.small-imgs-box{flex:10%}.gallery .column.big-imgs-box{flex:90%}.gallery .selected{background-color:#fff;border:3px solid #0294d8;padding:10px}.gallery .fill-all .pics{height:100%}.gallery .fill-all img{width:100%!important;height:100%!important;object-fit:fill!important}.gallery .fill-original img{width:unset;height:unset}.gallery .zoom1 img{zoom:1}.gallery .zoom1-5 img{zoom:1.5}.gallery .zoom2 img{zoom:2}fd-dialog .gallery{overflow:auto}fd-dialog .gallery .column{overflow:initial}fd-dialog .gallery .pics{position:relative}fd-dialog fd-dialog-body{display:flex}fd-dialog.horizontal fd-dialog-body{flex-direction:column}fd-dialog.horizontal .gallery{flex-direction:row}fd-dialog.horizontal .thumbnail{border-top:1px solid #ccc;overflow-x:auto}fd-dialog.vertical fd-dialog-body{flex-direction:row-reverse}fd-dialog.vertical .gallery{flex-direction:column;height:100%}fd-dialog.vertical .thumbnail{border-left:1px solid #ccc;height:100%;width:200px;overflow-y:auto}fd-dialog.vertical .thumbnail ::ng-deep .fd-row>div{width:100%;min-width:100%}fd-card.media fd-card-footer button{border:none}fd-card.inDialog fd-card-header{padding-top:5px;padding-bottom:5px}.fd-col{min-width:165px}\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: i2.ImageLazyDirective, selector: "[imgLazy]", inputs: ["auto", "threshold", "imgLazy"], outputs: ["imageLoaded"] }, { kind: "directive", type: i2.PrintFilesDirective, selector: "[printFiles]", inputs: ["files", "file", "isImageGallery", "component"] }, { kind: "directive", type: i4$1.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i4$1.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: i4$1.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "component", type: i4$1.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "component", type: i3$1.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i5$4.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$4.CardContentComponent, selector: "fd-card-content" }, { kind: "component", type: i5$4.CardFooterComponent, selector: "fd-card-footer" }, { kind: "directive", type: i5$4.CardFooterActionItemDirective, selector: "[fdCardFooterActionItem]" }, { kind: "component", type: i2$7.FileUploaderComponent, selector: "fd-file-uploader", inputs: ["disabled", "required", "multiple", "accept", "dragndrop", "maxFileSize", "minFileSize", "id", "ariaLabel", "ariaLabelledBy", "placeholder", "buttonLabel", "buttonAriaLabel", "state", "fileLimit", "inputHidden", "width"], outputs: ["selectedFilesChanged", "selectedInvalidFiles", "onDragEnter", "onDragLeave"] }, { kind: "component", type: i10.LayoutGridComponent, selector: "fd-layout-grid, [fdLayoutGrid]", inputs: ["class", "noGap", "noHorizontalGap", "noVerticalGap"] }, { kind: "directive", type: i10.LayoutGridColDirective, selector: "[fd-layout-grid-col], [fdLayoutGridCol]", inputs: ["fdLayoutGridCol", "colGrow", "colMd", "colLg", "colXl", "colOffset", "colOffsetMd", "colOffsetLg", "colOffsetXl", "class"] }, { kind: "directive", type: i10.LayoutGridRowDirective, selector: "[fd-layout-grid-row], [fdLayoutGridRow]" }, { kind: "component", type: i6$2.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "focusAutoCapture", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { kind: "component", type: i6$2.MenuItemComponent, selector: "li[fd-menu-item]", inputs: ["disabled", "itemId", "submenu", "parentSubmenu", "hasSeparator"], outputs: ["onSelect"], exportAs: ["fd-menu-item"] }, { kind: "component", type: i6$2.MenuInteractiveComponent, selector: "[fd-menu-interactive]" }, { kind: "directive", type: i6$2.MenuTitleDirective, selector: "[fd-menu-title]" }, { kind: "component", type: i6$2.MenuAddonDirective, selector: "fd-menu-addon", inputs: ["position", "submenuIndicator", "ariaHidden"] }, { kind: "directive", type: i6$2.MenuTriggerDirective, selector: "[fdMenuTrigger]", inputs: ["fdMenuTrigger"] }, { kind: "component", type: i4$2.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i4$2.DialogBodyComponent, selector: "fd-dialog-body", inputs: ["disablePaddings"] }, { kind: "component", type: i4$2.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "directive", type: i5$2.TemplateDirective, selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }, { kind: "component", type: i6$1.TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: i12.ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "headingLevel", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i12.ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "directive", type: i12.ToolbarSpacerDirective, selector: "fd-toolbar-spacer", inputs: ["width", "class", "fixed"] }, { kind: "component", type: MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
10406
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: UiPicturesInfoComponent, selector: "bsu-ui-pictures-info", inputs: { value: "value" }, providers: [UploadService], viewQueries: [{ propertyName: "gallery", first: true, predicate: ["gallery"], descendants: true }, { propertyName: "dialogTemplate", first: true, predicate: ["dialogTemplate"], descendants: true, read: TemplateRef }], usesInheritance: true, ngImport: i0, template: "<fd-file-uploader\r\n #uploader\r\n [style.display]=\"'none'\"\r\n [id]=\"id\"\r\n [name]=\"'pictures_' + id\"\r\n [placeholder]=\"'AttachPicture' | bbbTranslate\"\r\n [buttonLabel]=\"'AttachPicture' | bbbTranslate\"\r\n [buttonAriaLabel]=\"'AttachPicture' | bbbTranslate\"\r\n accept=\".png,.jpg,.bpm,.jpeg,.gif,.png,.tif,.pdf\"\r\n [fileLimit]=\"maxFileCount === 0 ? 100 : maxFileCount\"\r\n [multiple]=\"maxFileCount === 0 || maxFileCount > 1\"\r\n (selectedFilesChanged)=\"onFileSelection($event)\"\r\n></fd-file-uploader>\r\n\r\n<ng-container\r\n *ngTemplateOutlet=\"layoutGridTpl; context: { disableOrReadonly: disableOrReadonly$ | async }\"\r\n></ng-container>\r\n<ng-template #layoutGridTpl let-inDialog=\"inDialog\" let-gallery=\"gallery\" let-disableOrReadonly=\"disableOrReadonly\">\r\n <fd-layout-grid>\r\n @if (mediaData$ | async; as mediaData) {\r\n <div fdLayoutGridRow>\r\n @for (media of mediaData; track media; let i = $index) {\r\n <div [fdLayoutGridCol]=\"6\" [colMd]=\"3\" [colLg]=\"2\" [colXl]=\"2\" (click)=\"onMedaiClick(gallery, media, i)\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n cardTpl;\r\n context: {\r\n $implicit: media,\r\n mediaData: mediaData,\r\n inDialog: inDialog,\r\n index: i,\r\n disableOrReadonly: disableOrReadonly\r\n }\r\n \"\r\n ></ng-container>\r\n </div>\r\n } @if (!inDialog && !disableOrReadonly) {\r\n <div [fdLayoutGridCol]=\"6\" [colMd]=\"3\" [colLg]=\"2\" [colXl]=\"2\">\r\n <ng-container *ngTemplateOutlet=\"newFile\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </fd-layout-grid>\r\n</ng-template>\r\n<ng-template\r\n #cardTpl\r\n let-media\r\n let-mediaData=\"mediaData\"\r\n let-inDialog=\"inDialog\"\r\n let-index=\"index\"\r\n let-disableOrReadonly=\"disableOrReadonly\"\r\n>\r\n <fd-card class=\"media\" [class.inDialog]=\"inDialog\">\r\n <fd-card-content style=\"text-align: center; height: 120px\">\r\n <img imgLazy [imgLazy]=\"media.thumbnailUrl\" [src]=\"media.thumbnailUrl\" #img />\r\n </fd-card-content>\r\n @if (!inDialog) {\r\n <fd-card-footer>\r\n <button\r\n glyph=\"print\"\r\n *fdCardFooterActionItem\r\n fd-button\r\n fdType=\"transparent\"\r\n [files]=\"[media]\"\r\n printFiles\r\n ></button>\r\n <button\r\n glyph=\"full-screen\"\r\n [title]=\"'FullScreen' | bbbTranslate\"\r\n *fdCardFooterActionItem\r\n fd-button\r\n fdType=\"transparent\"\r\n (click)=\"onFullscreen(media, mediaData)\"\r\n ></button>\r\n\r\n <button fd-button [glyph]=\"'overflow'\" [fdType]=\"'transparent'\" [fdMenuTrigger]=\"menu\"></button>\r\n <fd-menu #menu>\r\n <li fd-menu-item [files]=\"mediaData\" printFiles>\r\n <a fd-menu-interactive>\r\n <fd-menu-addon position=\"before\" glyph=\"print\"></fd-menu-addon>\r\n <span fd-menu-title>{{ 'Print' | bbbTranslate }} {{ 'All' | bbbTranslate }}</span>\r\n </a>\r\n </li>\r\n <li fd-menu-item [name]=\"media.label\" [src]=\"media.mediaUrl\" saveImage>\r\n <a fd-menu-interactive>\r\n <fd-menu-addon position=\"before\" glyph=\"download\"></fd-menu-addon>\r\n <span fd-menu-title>{{ 'Download' | bbbTranslate }}</span>\r\n </a>\r\n </li>\r\n @if (!disableOrReadonly) {\r\n <li fd-menu-item (click)=\"onRotate(img, media, index)\">\r\n <a fd-menu-interactive>\r\n <fd-menu-addon position=\"before\" glyph=\"rotate\"></fd-menu-addon>\r\n <span fd-menu-title>{{ 'Rotate' | bbbTranslate }}</span>\r\n </a>\r\n </li>\r\n <li fd-menu-item (click)=\"onDelete(index)\">\r\n <a fd-menu-interactive>\r\n <fd-menu-addon position=\"before\" glyph=\"delete\"></fd-menu-addon>\r\n <span fd-menu-title>{{ 'Delete' | bbbTranslate }}</span>\r\n </a>\r\n </li>\r\n }\r\n </fd-menu>\r\n </fd-card-footer>\r\n }\r\n </fd-card>\r\n</ng-template>\r\n<ng-template #newFile>\r\n <div style=\"position: relative; height: 100%\">\r\n <fd-card>\r\n <fd-card-content style=\"display: flex; align-items: center; justify-content: center; min-height: 120px\">\r\n <button\r\n fd-button\r\n glyph=\"add-photo\"\r\n fdType=\"transparent\"\r\n [label]=\"'AttachFile' | bbbTranslate\"\r\n (click)=\"uploader.open()\"\r\n ></button>\r\n </fd-card-content>\r\n\r\n <fd-card-footer style=\"border-top: 1px solid #ccc\">\r\n <button fd-button [glyph]=\"'overflow'\" [fdType]=\"'transparent'\" [fdMenuTrigger]=\"menu\"></button>\r\n <fd-menu #menu>\r\n <li fd-menu-item (click)=\"onScan()\">\r\n <a fd-menu-interactive>\r\n <span fd-menu-title>{{ 'Scan' | bbbTranslate }}</span>\r\n </a>\r\n </li>\r\n <li fd-menu-item (click)=\"onAdvanceScan()\">\r\n <a fd-menu-interactive>\r\n <span fd-menu-title>{{ 'AdvancedScan' | bbbTranslate }}</span>\r\n </a>\r\n </li>\r\n </fd-menu>\r\n </fd-card-footer>\r\n </fd-card>\r\n @if ((uploadingState$ | async)?.uploading === true) {\r\n <bsu-mask></bsu-mask>\r\n }\r\n </div>\r\n</ng-template>\r\n<ng-template #dialogTemplate let-dialog let-dialogConfig=\"dialogConfig\">\r\n <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\" #dialogTpl class=\"vertical\">\r\n <fd-dialog-header>\r\n <ng-template fdkTemplate=\"header\">\r\n <div fd-bar-left>\r\n <fd-bar-element>\r\n <h1 fd-title>{{ Setting.ControlFieldCaptionTranslated }}</h1>\r\n </fd-bar-element>\r\n </div>\r\n <div fd-bar-right>\r\n <fd-button-bar\r\n ariaLabel=\"print\"\r\n [glyph]=\"'print'\"\r\n fdType=\"transparent\"\r\n [files]=\"dialog.data.mediaData\"\r\n printFiles\r\n ></fd-button-bar>\r\n @if (!dialogConfig.fullscreen) {\r\n <fd-button-bar\r\n ariaLabel=\"Fit image size\"\r\n [glyph]=\"'resize'\"\r\n [fdType]=\"fillWidth ? 'emphasized' : 'transparent'\"\r\n (click)=\"fillWidth = !fillWidth\"\r\n ></fd-button-bar>\r\n }\r\n <fd-button-bar ariaLabel=\"close\" glyph=\"decline\" (click)=\"dialog.close()\"></fd-button-bar>\r\n </div>\r\n </ng-template>\r\n </fd-dialog-header>\r\n <fd-dialog-body #fdbody>\r\n <div #gallery class=\"gallery inDialog\" style=\"flex: 1\">\r\n @for (media of dialog.data.mediaData; track media.FileId; let i = $index) {\r\n <div\r\n class=\"column big-imgs-box\"\r\n [class.fill-width]=\"fillWidth\"\r\n [class.fill-all]=\"fillAll\"\r\n [class.fill-original]=\"fillOriginal\"\r\n [ngClass]=\"selectedZoom\"\r\n >\r\n <fd-toolbar fdType=\"solid\" fdType=\"transparent\" [clearBorder]=\"true\">\r\n <fd-toolbar-spacer></fd-toolbar-spacer>\r\n <button fd-toolbar-item fd-button glyph=\"rotate\" (click)=\"onRotate(img, media, i)\"></button>\r\n <fd-toolbar-spacer></fd-toolbar-spacer>\r\n </fd-toolbar>\r\n <div class=\"pics\" [id]=\"i\">\r\n <bsu-mask></bsu-mask>\r\n <img #img imgLazy [imgLazy]=\"media.mediaUrl\" [src]=\"media.mediaUrl\" />\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n @if ((deviceSize$ | async) !== 's') {\r\n <div class=\"thumbnail\" style=\"flex-shrink: 1\">\r\n <ng-cotainer\r\n *ngTemplateOutlet=\"\r\n layoutGridTpl;\r\n context: {\r\n inDialog: true,\r\n gallery: gallery,\r\n disableOrReadonly: disableOrReadonly$ | async\r\n }\r\n \"\r\n ></ng-cotainer>\r\n </div>\r\n }\r\n </fd-dialog-body>\r\n </fd-dialog>\r\n</ng-template>\r\n", styles: [":host{position:relative}:host ::ng-deep .delete button{border-color:transparent!important;background-color:transparent!important}.big-imgs-box{position:relative}.big-imgs-box>fd-toolbar{position:absolute;z-index:5;opacity:.5}.big-imgs-box>fd-toolbar:hover{opacity:1}fd-toolbar{width:100%}fd-dialog-footer{justify-content:center}.hatchBackground{min-height:100px}.gallery{display:flex;width:100%;height:400px;column-gap:1px;background-color:var(--sapField_Background, #fff)}.gallery ::-webkit-scrollbar{width:7px;height:7px}.gallery ::-webkit-scrollbar-track{box-shadow:inset 0 0 5px gray;border-radius:4px}.gallery ::-webkit-scrollbar-thumb{background:#555454;border-radius:4px}.gallery ::-webkit-scrollbar-thumb:hover{background:#2c2b2b}.gallery .column{overflow-y:scroll;display:flex;flex-direction:column;row-gap:3%;align-items:center}.gallery .column .pics{width:100%;display:flex;justify-content:center}.gallery .column .pics img{border-radius:5px}.gallery .column.small-imgs-box{flex:10%}.gallery .column.big-imgs-box{flex:90%}.gallery .selected{background-color:#fff;border:3px solid #0294d8;padding:10px}.gallery .fill-all .pics{height:100%}.gallery .fill-all img{width:100%!important;height:100%!important;object-fit:fill!important}.gallery .fill-original img{width:unset;height:unset}.gallery .zoom1 img{zoom:1}.gallery .zoom1-5 img{zoom:1.5}.gallery .zoom2 img{zoom:2}fd-dialog .gallery{overflow:auto}fd-dialog .gallery .column{overflow:initial}fd-dialog .gallery .pics{position:relative}fd-dialog fd-dialog-body{display:flex}fd-dialog.horizontal fd-dialog-body{flex-direction:column}fd-dialog.horizontal .gallery{flex-direction:row}fd-dialog.horizontal .thumbnail{border-top:1px solid #ccc;overflow-x:auto}fd-dialog.vertical fd-dialog-body{flex-direction:row-reverse}fd-dialog.vertical .gallery{flex-direction:column;height:100%}fd-dialog.vertical .thumbnail{border-left:1px solid #ccc;height:100%;width:200px;overflow-y:auto}fd-dialog.vertical .thumbnail ::ng-deep .fd-row>div{width:100%;min-width:100%}fd-card.media fd-card-footer button{border:none}fd-card.inDialog fd-card-header{padding-top:5px;padding-bottom:5px}.fd-col{min-width:165px}\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: i2.ImageLazyDirective, selector: "[imgLazy]", inputs: ["auto", "threshold", "imgLazy"], outputs: ["imageLoaded"] }, { kind: "directive", type: i2.PrintFilesDirective, selector: "[printFiles]", inputs: ["files", "file", "isImageGallery", "component"] }, { kind: "directive", type: i2.SaveImageDirective, selector: "[saveImage]", inputs: ["name", "src"] }, { kind: "directive", type: i4$1.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i4$1.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: i4$1.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "component", type: i4$1.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "component", type: i3$1.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i5$4.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$4.CardContentComponent, selector: "fd-card-content" }, { kind: "component", type: i5$4.CardFooterComponent, selector: "fd-card-footer" }, { kind: "directive", type: i5$4.CardFooterActionItemDirective, selector: "[fdCardFooterActionItem]" }, { kind: "component", type: i2$7.FileUploaderComponent, selector: "fd-file-uploader", inputs: ["disabled", "required", "multiple", "accept", "dragndrop", "maxFileSize", "minFileSize", "id", "ariaLabel", "ariaLabelledBy", "placeholder", "buttonLabel", "buttonAriaLabel", "state", "fileLimit", "inputHidden", "width"], outputs: ["selectedFilesChanged", "selectedInvalidFiles", "onDragEnter", "onDragLeave"] }, { kind: "component", type: i10.LayoutGridComponent, selector: "fd-layout-grid, [fdLayoutGrid]", inputs: ["class", "noGap", "noHorizontalGap", "noVerticalGap"] }, { kind: "directive", type: i10.LayoutGridColDirective, selector: "[fd-layout-grid-col], [fdLayoutGridCol]", inputs: ["fdLayoutGridCol", "colGrow", "colMd", "colLg", "colXl", "colOffset", "colOffsetMd", "colOffsetLg", "colOffsetXl", "class"] }, { kind: "directive", type: i10.LayoutGridRowDirective, selector: "[fd-layout-grid-row], [fdLayoutGridRow]" }, { kind: "component", type: i6$2.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "focusAutoCapture", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { kind: "component", type: i6$2.MenuItemComponent, selector: "li[fd-menu-item]", inputs: ["disabled", "itemId", "submenu", "parentSubmenu", "hasSeparator"], outputs: ["onSelect"], exportAs: ["fd-menu-item"] }, { kind: "component", type: i6$2.MenuInteractiveComponent, selector: "[fd-menu-interactive]" }, { kind: "directive", type: i6$2.MenuTitleDirective, selector: "[fd-menu-title]" }, { kind: "component", type: i6$2.MenuAddonDirective, selector: "fd-menu-addon", inputs: ["position", "submenuIndicator", "ariaHidden"] }, { kind: "directive", type: i6$2.MenuTriggerDirective, selector: "[fdMenuTrigger]", inputs: ["fdMenuTrigger"] }, { kind: "component", type: i4$2.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i4$2.DialogBodyComponent, selector: "fd-dialog-body", inputs: ["disablePaddings"] }, { kind: "component", type: i4$2.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "directive", type: i5$2.TemplateDirective, selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }, { kind: "component", type: i6$1.TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "component", type: i12.ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "headingLevel", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i12.ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "directive", type: i12.ToolbarSpacerDirective, selector: "fd-toolbar-spacer", inputs: ["width", "class", "fixed"] }, { kind: "component", type: MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
10406
10407
|
}
|
|
10407
10408
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UiPicturesInfoComponent, decorators: [{
|
|
10408
10409
|
type: Component,
|
|
10409
|
-
args: [{ selector: 'bsu-ui-pictures-info', providers: [UploadService], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<fd-file-uploader\r\n #uploader\r\n [style.display]=\"'none'\"\r\n [id]=\"id\"\r\n [name]=\"'pictures_' + id\"\r\n [placeholder]=\"'AttachPicture' | bbbTranslate\"\r\n [buttonLabel]=\"'AttachPicture' | bbbTranslate\"\r\n [buttonAriaLabel]=\"'AttachPicture' | bbbTranslate\"\r\n accept=\".png,.jpg,.bpm,.jpeg,.gif,.png,.tif,.pdf\"\r\n [fileLimit]=\"maxFileCount === 0 ? 100 : maxFileCount\"\r\n [multiple]=\"maxFileCount === 0 || maxFileCount > 1\"\r\n (selectedFilesChanged)=\"onFileSelection($event)\"\r\n></fd-file-uploader>\r\n\r\n<ng-container\r\n *ngTemplateOutlet=\"layoutGridTpl; context: { disableOrReadonly: disableOrReadonly$ | async }\"\r\n></ng-container>\r\n<ng-template #layoutGridTpl let-inDialog=\"inDialog\" let-gallery=\"gallery\" let-disableOrReadonly=\"disableOrReadonly\">\r\n <fd-layout-grid>\r\n @if (mediaData$ | async; as mediaData) {\r\n <div fdLayoutGridRow>\r\n @for (media of mediaData; track media; let i = $index) {\r\n <div [fdLayoutGridCol]=\"6\" [colMd]=\"3\" [colLg]=\"2\" [colXl]=\"2\" (click)=\"onMedaiClick(gallery, media, i)\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n cardTpl;\r\n context: {\r\n $implicit: media,\r\n mediaData: this.mediaData,\r\n inDialog: this.inDialog,\r\n index: i,\r\n disableOrReadonly: disableOrReadonly\r\n }\r\n \"\r\n ></ng-container>\r\n </div>\r\n } @if (!inDialog && !disableOrReadonly) {\r\n <div [fdLayoutGridCol]=\"6\" [colMd]=\"3\" [colLg]=\"2\" [colXl]=\"2\">\r\n <ng-container *ngTemplateOutlet=\"newFile\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </fd-layout-grid>\r\n</ng-template>\r\n<ng-template\r\n #cardTpl\r\n let-media\r\n let-mediaData=\"mediaData\"\r\n let-inDialog=\"inDialog\"\r\n let-index=\"index\"\r\n let-disableOrReadonly=\"disableOrReadonly\"\r\n>\r\n <fd-card class=\"media\" [class.inDialog]=\"inDialog\">\r\n <fd-card-content style=\"text-align: center; height: 120px\">\r\n <img imgLazy [imgLazy]=\"media.thumbnailUrl\" [src]=\"media.thumbnailUrl\" #img />\r\n </fd-card-content>\r\n @if (!inDialog) {\r\n <fd-card-footer>\r\n <button\r\n glyph=\"print\"\r\n *fdCardFooterActionItem\r\n fd-button\r\n fdType=\"transparent\"\r\n [files]=\"[media]\"\r\n printFiles\r\n ></button>\r\n <button\r\n glyph=\"full-screen\"\r\n [title]=\"'FullScreen' | bbbTranslate\"\r\n *fdCardFooterActionItem\r\n fd-button\r\n fdType=\"transparent\"\r\n (click)=\"onFullscreen(media, mediaData)\"\r\n ></button>\r\n\r\n <button fd-button [glyph]=\"'overflow'\" [fdType]=\"'transparent'\" [fdMenuTrigger]=\"menu\"></button>\r\n <fd-menu #menu>\r\n <li fd-menu-item [files]=\"mediaData\" printFiles>\r\n <a fd-menu-interactive>\r\n <fd-menu-addon position=\"before\" glyph=\"print\"></fd-menu-addon>\r\n <span fd-menu-title>{{ 'Print' | bbbTranslate }} {{ 'All' | bbbTranslate }}</span>\r\n </a>\r\n </li>\r\n\r\n @if (!disableOrReadonly) {\r\n <li fd-menu-item (click)=\"onRotate(img, media, index)\">\r\n <a fd-menu-interactive>\r\n <fd-menu-addon position=\"before\" glyph=\"rotate\"></fd-menu-addon>\r\n <span fd-menu-title>{{ 'Rotate' | bbbTranslate }}</span>\r\n </a>\r\n </li>\r\n <li fd-menu-item (click)=\"onDelete(index)\">\r\n <a fd-menu-interactive>\r\n <fd-menu-addon position=\"before\" glyph=\"delete\"></fd-menu-addon>\r\n <span fd-menu-title>{{ 'Delete' | bbbTranslate }}</span>\r\n </a>\r\n </li>\r\n }\r\n </fd-menu>\r\n </fd-card-footer>\r\n }\r\n </fd-card>\r\n</ng-template>\r\n<ng-template #newFile>\r\n <div style=\"position: relative; height: 100%\">\r\n <fd-card>\r\n <fd-card-content style=\"display: flex; align-items: center; justify-content: center; min-height: 120px\">\r\n <button\r\n fd-button\r\n glyph=\"add-photo\"\r\n fdType=\"transparent\"\r\n [label]=\"'AttachFile' | bbbTranslate\"\r\n (click)=\"uploader.open()\"\r\n ></button>\r\n </fd-card-content>\r\n\r\n <fd-card-footer style=\"border-top: 1px solid #ccc\">\r\n <button fd-button [glyph]=\"'overflow'\" [fdType]=\"'transparent'\" [fdMenuTrigger]=\"menu\"></button>\r\n <fd-menu #menu>\r\n <li fd-menu-item (click)=\"onScan()\">\r\n <a fd-menu-interactive>\r\n <span fd-menu-title>{{ 'Scan' | bbbTranslate }}</span>\r\n </a>\r\n </li>\r\n <li fd-menu-item (click)=\"onAdvanceScan()\">\r\n <a fd-menu-interactive>\r\n <span fd-menu-title>{{ 'AdvancedScan' | bbbTranslate }}</span>\r\n </a>\r\n </li>\r\n </fd-menu>\r\n </fd-card-footer>\r\n </fd-card>\r\n @if ((uploadingState$ | async)?.uploading === true) {\r\n <bsu-mask></bsu-mask>\r\n }\r\n </div>\r\n</ng-template>\r\n<ng-template #dialogTemplate let-dialog let-dialogConfig=\"dialogConfig\">\r\n <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\" #dialogTpl class=\"vertical\">\r\n <fd-dialog-header>\r\n <ng-template fdkTemplate=\"header\">\r\n <div fd-bar-left>\r\n <fd-bar-element>\r\n <h1 fd-title>{{ Setting.ControlFieldCaptionTranslated }}</h1>\r\n </fd-bar-element>\r\n </div>\r\n <div fd-bar-right>\r\n <fd-button-bar\r\n ariaLabel=\"print\"\r\n [glyph]=\"'print'\"\r\n fdType=\"transparent\"\r\n [files]=\"dialog.data.mediaData\"\r\n printFiles\r\n ></fd-button-bar>\r\n @if (!dialogConfig.fullscreen) {\r\n <fd-button-bar\r\n ariaLabel=\"Fit image size\"\r\n [glyph]=\"'resize'\"\r\n [fdType]=\"fillWidth ? 'emphasized' : 'transparent'\"\r\n (click)=\"fillWidth = !fillWidth\"\r\n ></fd-button-bar>\r\n }\r\n <fd-button-bar ariaLabel=\"close\" glyph=\"decline\" (click)=\"dialog.close()\"></fd-button-bar>\r\n </div>\r\n </ng-template>\r\n </fd-dialog-header>\r\n <fd-dialog-body #fdbody>\r\n <div #gallery class=\"gallery inDialog\" style=\"flex: 1\">\r\n @for (media of dialog.data.mediaData; track media.FileId; let i = $index) {\r\n <div\r\n class=\"column big-imgs-box\"\r\n [class.fill-width]=\"fillWidth\"\r\n [class.fill-all]=\"fillAll\"\r\n [class.fill-original]=\"fillOriginal\"\r\n [ngClass]=\"selectedZoom\"\r\n >\r\n <fd-toolbar fdType=\"solid\" fdType=\"transparent\" [clearBorder]=\"true\">\r\n <fd-toolbar-spacer></fd-toolbar-spacer>\r\n <button fd-toolbar-item fd-button glyph=\"rotate\" (click)=\"onRotate(img, media, i)\"></button>\r\n <fd-toolbar-spacer></fd-toolbar-spacer>\r\n </fd-toolbar>\r\n <div class=\"pics\" [id]=\"i\">\r\n <bsu-mask></bsu-mask>\r\n <img #img imgLazy [imgLazy]=\"media.mediaUrl\" [src]=\"media.mediaUrl\" />\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n @if ((deviceSize$ | async) !== 's') {\r\n <div class=\"thumbnail\" style=\"flex-shrink: 1\">\r\n <ng-cotainer\r\n *ngTemplateOutlet=\"\r\n layoutGridTpl;\r\n context: {\r\n inDialog: true,\r\n gallery: gallery,\r\n disableOrReadonly: disableOrReadonly$ | async\r\n }\r\n \"\r\n ></ng-cotainer>\r\n </div>\r\n }\r\n </fd-dialog-body>\r\n </fd-dialog>\r\n</ng-template>\r\n", styles: [":host{position:relative}:host ::ng-deep .delete button{border-color:transparent!important;background-color:transparent!important}.big-imgs-box{position:relative}.big-imgs-box>fd-toolbar{position:absolute;z-index:5;opacity:.5}.big-imgs-box>fd-toolbar:hover{opacity:1}fd-toolbar{width:100%}fd-dialog-footer{justify-content:center}.hatchBackground{min-height:100px}.gallery{display:flex;width:100%;height:400px;column-gap:1px;background-color:var(--sapField_Background, #fff)}.gallery ::-webkit-scrollbar{width:7px;height:7px}.gallery ::-webkit-scrollbar-track{box-shadow:inset 0 0 5px gray;border-radius:4px}.gallery ::-webkit-scrollbar-thumb{background:#555454;border-radius:4px}.gallery ::-webkit-scrollbar-thumb:hover{background:#2c2b2b}.gallery .column{overflow-y:scroll;display:flex;flex-direction:column;row-gap:3%;align-items:center}.gallery .column .pics{width:100%;display:flex;justify-content:center}.gallery .column .pics img{border-radius:5px}.gallery .column.small-imgs-box{flex:10%}.gallery .column.big-imgs-box{flex:90%}.gallery .selected{background-color:#fff;border:3px solid #0294d8;padding:10px}.gallery .fill-all .pics{height:100%}.gallery .fill-all img{width:100%!important;height:100%!important;object-fit:fill!important}.gallery .fill-original img{width:unset;height:unset}.gallery .zoom1 img{zoom:1}.gallery .zoom1-5 img{zoom:1.5}.gallery .zoom2 img{zoom:2}fd-dialog .gallery{overflow:auto}fd-dialog .gallery .column{overflow:initial}fd-dialog .gallery .pics{position:relative}fd-dialog fd-dialog-body{display:flex}fd-dialog.horizontal fd-dialog-body{flex-direction:column}fd-dialog.horizontal .gallery{flex-direction:row}fd-dialog.horizontal .thumbnail{border-top:1px solid #ccc;overflow-x:auto}fd-dialog.vertical fd-dialog-body{flex-direction:row-reverse}fd-dialog.vertical .gallery{flex-direction:column;height:100%}fd-dialog.vertical .thumbnail{border-left:1px solid #ccc;height:100%;width:200px;overflow-y:auto}fd-dialog.vertical .thumbnail ::ng-deep .fd-row>div{width:100%;min-width:100%}fd-card.media fd-card-footer button{border:none}fd-card.inDialog fd-card-header{padding-top:5px;padding-bottom:5px}.fd-col{min-width:165px}\n"] }]
|
|
10410
|
+
args: [{ selector: 'bsu-ui-pictures-info', providers: [UploadService], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<fd-file-uploader\r\n #uploader\r\n [style.display]=\"'none'\"\r\n [id]=\"id\"\r\n [name]=\"'pictures_' + id\"\r\n [placeholder]=\"'AttachPicture' | bbbTranslate\"\r\n [buttonLabel]=\"'AttachPicture' | bbbTranslate\"\r\n [buttonAriaLabel]=\"'AttachPicture' | bbbTranslate\"\r\n accept=\".png,.jpg,.bpm,.jpeg,.gif,.png,.tif,.pdf\"\r\n [fileLimit]=\"maxFileCount === 0 ? 100 : maxFileCount\"\r\n [multiple]=\"maxFileCount === 0 || maxFileCount > 1\"\r\n (selectedFilesChanged)=\"onFileSelection($event)\"\r\n></fd-file-uploader>\r\n\r\n<ng-container\r\n *ngTemplateOutlet=\"layoutGridTpl; context: { disableOrReadonly: disableOrReadonly$ | async }\"\r\n></ng-container>\r\n<ng-template #layoutGridTpl let-inDialog=\"inDialog\" let-gallery=\"gallery\" let-disableOrReadonly=\"disableOrReadonly\">\r\n <fd-layout-grid>\r\n @if (mediaData$ | async; as mediaData) {\r\n <div fdLayoutGridRow>\r\n @for (media of mediaData; track media; let i = $index) {\r\n <div [fdLayoutGridCol]=\"6\" [colMd]=\"3\" [colLg]=\"2\" [colXl]=\"2\" (click)=\"onMedaiClick(gallery, media, i)\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n cardTpl;\r\n context: {\r\n $implicit: media,\r\n mediaData: mediaData,\r\n inDialog: inDialog,\r\n index: i,\r\n disableOrReadonly: disableOrReadonly\r\n }\r\n \"\r\n ></ng-container>\r\n </div>\r\n } @if (!inDialog && !disableOrReadonly) {\r\n <div [fdLayoutGridCol]=\"6\" [colMd]=\"3\" [colLg]=\"2\" [colXl]=\"2\">\r\n <ng-container *ngTemplateOutlet=\"newFile\"></ng-container>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </fd-layout-grid>\r\n</ng-template>\r\n<ng-template\r\n #cardTpl\r\n let-media\r\n let-mediaData=\"mediaData\"\r\n let-inDialog=\"inDialog\"\r\n let-index=\"index\"\r\n let-disableOrReadonly=\"disableOrReadonly\"\r\n>\r\n <fd-card class=\"media\" [class.inDialog]=\"inDialog\">\r\n <fd-card-content style=\"text-align: center; height: 120px\">\r\n <img imgLazy [imgLazy]=\"media.thumbnailUrl\" [src]=\"media.thumbnailUrl\" #img />\r\n </fd-card-content>\r\n @if (!inDialog) {\r\n <fd-card-footer>\r\n <button\r\n glyph=\"print\"\r\n *fdCardFooterActionItem\r\n fd-button\r\n fdType=\"transparent\"\r\n [files]=\"[media]\"\r\n printFiles\r\n ></button>\r\n <button\r\n glyph=\"full-screen\"\r\n [title]=\"'FullScreen' | bbbTranslate\"\r\n *fdCardFooterActionItem\r\n fd-button\r\n fdType=\"transparent\"\r\n (click)=\"onFullscreen(media, mediaData)\"\r\n ></button>\r\n\r\n <button fd-button [glyph]=\"'overflow'\" [fdType]=\"'transparent'\" [fdMenuTrigger]=\"menu\"></button>\r\n <fd-menu #menu>\r\n <li fd-menu-item [files]=\"mediaData\" printFiles>\r\n <a fd-menu-interactive>\r\n <fd-menu-addon position=\"before\" glyph=\"print\"></fd-menu-addon>\r\n <span fd-menu-title>{{ 'Print' | bbbTranslate }} {{ 'All' | bbbTranslate }}</span>\r\n </a>\r\n </li>\r\n <li fd-menu-item [name]=\"media.label\" [src]=\"media.mediaUrl\" saveImage>\r\n <a fd-menu-interactive>\r\n <fd-menu-addon position=\"before\" glyph=\"download\"></fd-menu-addon>\r\n <span fd-menu-title>{{ 'Download' | bbbTranslate }}</span>\r\n </a>\r\n </li>\r\n @if (!disableOrReadonly) {\r\n <li fd-menu-item (click)=\"onRotate(img, media, index)\">\r\n <a fd-menu-interactive>\r\n <fd-menu-addon position=\"before\" glyph=\"rotate\"></fd-menu-addon>\r\n <span fd-menu-title>{{ 'Rotate' | bbbTranslate }}</span>\r\n </a>\r\n </li>\r\n <li fd-menu-item (click)=\"onDelete(index)\">\r\n <a fd-menu-interactive>\r\n <fd-menu-addon position=\"before\" glyph=\"delete\"></fd-menu-addon>\r\n <span fd-menu-title>{{ 'Delete' | bbbTranslate }}</span>\r\n </a>\r\n </li>\r\n }\r\n </fd-menu>\r\n </fd-card-footer>\r\n }\r\n </fd-card>\r\n</ng-template>\r\n<ng-template #newFile>\r\n <div style=\"position: relative; height: 100%\">\r\n <fd-card>\r\n <fd-card-content style=\"display: flex; align-items: center; justify-content: center; min-height: 120px\">\r\n <button\r\n fd-button\r\n glyph=\"add-photo\"\r\n fdType=\"transparent\"\r\n [label]=\"'AttachFile' | bbbTranslate\"\r\n (click)=\"uploader.open()\"\r\n ></button>\r\n </fd-card-content>\r\n\r\n <fd-card-footer style=\"border-top: 1px solid #ccc\">\r\n <button fd-button [glyph]=\"'overflow'\" [fdType]=\"'transparent'\" [fdMenuTrigger]=\"menu\"></button>\r\n <fd-menu #menu>\r\n <li fd-menu-item (click)=\"onScan()\">\r\n <a fd-menu-interactive>\r\n <span fd-menu-title>{{ 'Scan' | bbbTranslate }}</span>\r\n </a>\r\n </li>\r\n <li fd-menu-item (click)=\"onAdvanceScan()\">\r\n <a fd-menu-interactive>\r\n <span fd-menu-title>{{ 'AdvancedScan' | bbbTranslate }}</span>\r\n </a>\r\n </li>\r\n </fd-menu>\r\n </fd-card-footer>\r\n </fd-card>\r\n @if ((uploadingState$ | async)?.uploading === true) {\r\n <bsu-mask></bsu-mask>\r\n }\r\n </div>\r\n</ng-template>\r\n<ng-template #dialogTemplate let-dialog let-dialogConfig=\"dialogConfig\">\r\n <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\" #dialogTpl class=\"vertical\">\r\n <fd-dialog-header>\r\n <ng-template fdkTemplate=\"header\">\r\n <div fd-bar-left>\r\n <fd-bar-element>\r\n <h1 fd-title>{{ Setting.ControlFieldCaptionTranslated }}</h1>\r\n </fd-bar-element>\r\n </div>\r\n <div fd-bar-right>\r\n <fd-button-bar\r\n ariaLabel=\"print\"\r\n [glyph]=\"'print'\"\r\n fdType=\"transparent\"\r\n [files]=\"dialog.data.mediaData\"\r\n printFiles\r\n ></fd-button-bar>\r\n @if (!dialogConfig.fullscreen) {\r\n <fd-button-bar\r\n ariaLabel=\"Fit image size\"\r\n [glyph]=\"'resize'\"\r\n [fdType]=\"fillWidth ? 'emphasized' : 'transparent'\"\r\n (click)=\"fillWidth = !fillWidth\"\r\n ></fd-button-bar>\r\n }\r\n <fd-button-bar ariaLabel=\"close\" glyph=\"decline\" (click)=\"dialog.close()\"></fd-button-bar>\r\n </div>\r\n </ng-template>\r\n </fd-dialog-header>\r\n <fd-dialog-body #fdbody>\r\n <div #gallery class=\"gallery inDialog\" style=\"flex: 1\">\r\n @for (media of dialog.data.mediaData; track media.FileId; let i = $index) {\r\n <div\r\n class=\"column big-imgs-box\"\r\n [class.fill-width]=\"fillWidth\"\r\n [class.fill-all]=\"fillAll\"\r\n [class.fill-original]=\"fillOriginal\"\r\n [ngClass]=\"selectedZoom\"\r\n >\r\n <fd-toolbar fdType=\"solid\" fdType=\"transparent\" [clearBorder]=\"true\">\r\n <fd-toolbar-spacer></fd-toolbar-spacer>\r\n <button fd-toolbar-item fd-button glyph=\"rotate\" (click)=\"onRotate(img, media, i)\"></button>\r\n <fd-toolbar-spacer></fd-toolbar-spacer>\r\n </fd-toolbar>\r\n <div class=\"pics\" [id]=\"i\">\r\n <bsu-mask></bsu-mask>\r\n <img #img imgLazy [imgLazy]=\"media.mediaUrl\" [src]=\"media.mediaUrl\" />\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n @if ((deviceSize$ | async) !== 's') {\r\n <div class=\"thumbnail\" style=\"flex-shrink: 1\">\r\n <ng-cotainer\r\n *ngTemplateOutlet=\"\r\n layoutGridTpl;\r\n context: {\r\n inDialog: true,\r\n gallery: gallery,\r\n disableOrReadonly: disableOrReadonly$ | async\r\n }\r\n \"\r\n ></ng-cotainer>\r\n </div>\r\n }\r\n </fd-dialog-body>\r\n </fd-dialog>\r\n</ng-template>\r\n", styles: [":host{position:relative}:host ::ng-deep .delete button{border-color:transparent!important;background-color:transparent!important}.big-imgs-box{position:relative}.big-imgs-box>fd-toolbar{position:absolute;z-index:5;opacity:.5}.big-imgs-box>fd-toolbar:hover{opacity:1}fd-toolbar{width:100%}fd-dialog-footer{justify-content:center}.hatchBackground{min-height:100px}.gallery{display:flex;width:100%;height:400px;column-gap:1px;background-color:var(--sapField_Background, #fff)}.gallery ::-webkit-scrollbar{width:7px;height:7px}.gallery ::-webkit-scrollbar-track{box-shadow:inset 0 0 5px gray;border-radius:4px}.gallery ::-webkit-scrollbar-thumb{background:#555454;border-radius:4px}.gallery ::-webkit-scrollbar-thumb:hover{background:#2c2b2b}.gallery .column{overflow-y:scroll;display:flex;flex-direction:column;row-gap:3%;align-items:center}.gallery .column .pics{width:100%;display:flex;justify-content:center}.gallery .column .pics img{border-radius:5px}.gallery .column.small-imgs-box{flex:10%}.gallery .column.big-imgs-box{flex:90%}.gallery .selected{background-color:#fff;border:3px solid #0294d8;padding:10px}.gallery .fill-all .pics{height:100%}.gallery .fill-all img{width:100%!important;height:100%!important;object-fit:fill!important}.gallery .fill-original img{width:unset;height:unset}.gallery .zoom1 img{zoom:1}.gallery .zoom1-5 img{zoom:1.5}.gallery .zoom2 img{zoom:2}fd-dialog .gallery{overflow:auto}fd-dialog .gallery .column{overflow:initial}fd-dialog .gallery .pics{position:relative}fd-dialog fd-dialog-body{display:flex}fd-dialog.horizontal fd-dialog-body{flex-direction:column}fd-dialog.horizontal .gallery{flex-direction:row}fd-dialog.horizontal .thumbnail{border-top:1px solid #ccc;overflow-x:auto}fd-dialog.vertical fd-dialog-body{flex-direction:row-reverse}fd-dialog.vertical .gallery{flex-direction:column;height:100%}fd-dialog.vertical .thumbnail{border-left:1px solid #ccc;height:100%;width:200px;overflow-y:auto}fd-dialog.vertical .thumbnail ::ng-deep .fd-row>div{width:100%;min-width:100%}fd-card.media fd-card-footer button{border:none}fd-card.inDialog fd-card-header{padding-top:5px;padding-bottom:5px}.fd-col{min-width:165px}\n"] }]
|
|
10410
10411
|
}], propDecorators: { value: [{
|
|
10411
10412
|
type: Input
|
|
10412
10413
|
}], gallery: [{
|
|
@@ -12625,11 +12626,11 @@ class UiPictureFileComponent extends FieldBaseComponent {
|
|
|
12625
12626
|
}))));
|
|
12626
12627
|
}
|
|
12627
12628
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UiPictureFileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
12628
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: UiPictureFileComponent, selector: "bsu-ui-picture-file", inputs: { imageUrl: "imageUrl", sizeMode: "sizeMode" }, host: { properties: { "class.editable": "this._editable" } }, providers: [UploadService], usesInheritance: true, ngImport: i0, template: "<div\r\n [style.max-height]=\"Setting.SizeMode === '2' ? null : layoutHeight\"\r\n [class.no-inlineEdit]=\"!inlineEdit\"\r\n [style.min-height.px]=\"!value && !inlineEdit ? null : 140\"\r\n [class.inlineEdit]=\"inlineEdit\"\r\n>\r\n @if (!((disableOrReadonly$ | async) === true || Setting.IsReadOnly === true)) {\r\n <div>\r\n <fd-toolbar [fdType]=\"'transparent'\" [clearBorder]=\"value && imageUrl ? false : true\">\r\n <fd-file-uploader\r\n #uploader\r\n fd-toolbar-item\r\n [style.display]=\"'none'\"\r\n [id]=\"id\"\r\n [name]=\"'uploader_' + id\"\r\n [placeholder]=\"'AttachPicture' | bbbTranslate\"\r\n [buttonLabel]=\"'AttachPicture' | bbbTranslate\"\r\n [buttonAriaLabel]=\"'AttachPicture' | bbbTranslate\"\r\n [accept]=\"validExtensions\"\r\n [(ngModel)]=\"files\"\r\n [multiple]=\"false\"\r\n (selectedFilesChanged)=\"onFileSelection($event)\"\r\n ></fd-file-uploader>\r\n @if(value && !value?.IsDeleted){\r\n <button\r\n fd-button\r\n fd-toolbar-item\r\n glyph=\"print\"\r\n fdType=\"transparent\"\r\n printFiles\r\n [files]=\"[{ Id: '0', IsNew: true, IsDeleted: false, Type: 'image', mediaUrl: imageUrl }]\"\r\n ></button>\r\n }\r\n <button\r\n class=\"delete\"\r\n fd-button\r\n fd-toolbar-item\r\n [disabled]=\"!this.value || value?.IsDeleted\"\r\n glyph=\"delete\"\r\n [fdType]=\"'transparent'\"\r\n (click)=\"onFileDeleted(uploader)\"\r\n ></button>\r\n <button\r\n fd-toolbar-item\r\n fd-button\r\n [disabled]=\"this.value && value?.IsDeleted !== true\"\r\n glyph=\"attachment\"\r\n [fdType]=\"'transparent'\"\r\n (click)=\"uploader.open()\"\r\n ></button>\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n loadingTpl;\r\n context: {\r\n uploadingState: uploadingState$ | async\r\n }\r\n \"\r\n >\r\n </ng-container>\r\n </fd-toolbar>\r\n </div>\r\n } @if (!inlineEdit) {\r\n <div\r\n [style.max-height.px]=\"Setting.SizeMode === '0' ? layoutInfo.ControlBounds.height : null\"\r\n [style.max-width.px]=\"Setting.SizeMode === '0' ? layoutInfo.ControlBounds.width : null\"\r\n [class.centerImage]=\"Setting.SizeMode === '3'\"\r\n >\r\n @if (value && imageUrl) {\r\n <bsu-mask [top]=\"'0px'\"></bsu-mask>\r\n } @if ((value && imageUrl) || Setting.HasDefaultPicture) {\r\n <img\r\n imgLazy\r\n [imgLazy]=\"imageUrl\"\r\n [src]=\"imageUrl\"\r\n [ngClass]=\"Setting.SizeMode === '1' ? 'cover' : 'contain'\"\r\n [style.height.px]=\"Setting.SizeMode !== '2' ? layoutInfo.ControlBounds.height : null\"\r\n />\r\n }\r\n </div>\r\n } @else {\r\n <fd-avatar [size]=\"'m'\" [image]=\"imageUrl\"></fd-avatar>\r\n }\r\n</div>\r\n<ng-template #loadingTpl let-uploadingState=\"uploadingState\">\r\n @if (uploadingState && uploadingState.state !== 'Complete' && uploadingState.uploading) {\r\n <fd-slider\r\n [(ngModel)]=\"uploadingState.progress\"\r\n [name]=\"'slider_' + id\"\r\n fd-toolbar-item\r\n [id]=\"id + '1'\"\r\n [min]=\"0\"\r\n [max]=\"100\"\r\n [step]=\"1\"\r\n >\r\n </fd-slider>\r\n @if (uploadingState.state === 'Uploading') {\r\n <button fd-toolbar-item fd-button glyph=\"stop\" fdType=\"transparent\" (click)=\"onTerminate()\"></button>\r\n } @if (uploadingState.state === 'Error') {\r\n <button fd-toolbar-item fd-button glyph=\"refresh\" [fdType]=\"'transparent'\" (click)=\"onRetry()\"></button>\r\n } }\r\n</ng-template>\r\n", styles: [":host{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;overflow:hidden;margin-bottom:.25rem;margin-top:.1875rem}:host.editable{border:.0625rem solid var(--sapGroup_TitleBorderColor)}:host ::ng-deep .fd-slider__handle{display:none}:host ::ng-deep .delete button{border-color:transparent!important;background-color:transparent!important}img{width:100%}.pic-wrapper{background-repeat:no-repeat;background-position:center}.cover{max-width:100%;max-height:100%;min-height:100%;width:100%;height:100%;background-size:cover}.contain{max-width:100%;max-height:100%;min-height:100%;width:auto;height:100%;background-size:contain}.no-inlineEdit{width:100%;position:relative;display:flex;flex-direction:column}.inlineEdit{width:100%;position:relative;display:flex;flex-direction:row-reverse;align-items:flex-end;justify-content:flex-start}.centerImage{display:flex;justify-content:center}\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: "directive", type: i2.ImageLazyDirective, selector: "[imgLazy]", inputs: ["auto", "threshold", "imgLazy"], outputs: ["imageLoaded"] }, { kind: "directive", type: i2.PrintFilesDirective, selector: "[printFiles]", inputs: ["files", "file", "isImageGallery", "component"] }, { 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", "colorIndication", "random", "clickable", "valueState", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i3$1.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i2$7.FileUploaderComponent, selector: "fd-file-uploader", inputs: ["disabled", "required", "multiple", "accept", "dragndrop", "maxFileSize", "minFileSize", "id", "ariaLabel", "ariaLabelledBy", "placeholder", "buttonLabel", "buttonAriaLabel", "state", "fileLimit", "inputHidden", "width"], outputs: ["selectedFilesChanged", "selectedInvalidFiles", "onDragEnter", "onDragLeave"] }, { kind: "component", type: i12.ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "headingLevel", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i12.ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "component", type: i11$1.SliderComponent, selector: "fd-slider", inputs: ["id", "class", "ariaLabelledBy", "ariaLabel", "min", "max", "step", "jump", "tickmarksBetweenLabels", "mode", "showTicks", "showTicksLabels", "customValues", "tooltipMode", "hideProgressBar", "disabled", "vertical", "value"] }, { kind: "component", type: MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
12629
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: UiPictureFileComponent, selector: "bsu-ui-picture-file", inputs: { imageUrl: "imageUrl", sizeMode: "sizeMode" }, host: { properties: { "class.editable": "this._editable" } }, providers: [UploadService], usesInheritance: true, ngImport: i0, template: "<div\r\n [style.max-height]=\"Setting.SizeMode === '2' ? null : layoutHeight\"\r\n [class.no-inlineEdit]=\"!inlineEdit\"\r\n [style.min-height.px]=\"!value && !inlineEdit ? null : 140\"\r\n [class.inlineEdit]=\"inlineEdit\"\r\n>\r\n @if (!((disableOrReadonly$ | async) === true || Setting.IsReadOnly === true)) {\r\n <div>\r\n <fd-toolbar [fdType]=\"'transparent'\" [clearBorder]=\"value && imageUrl ? false : true\">\r\n <fd-file-uploader\r\n #uploader\r\n fd-toolbar-item\r\n [style.display]=\"'none'\"\r\n [id]=\"id\"\r\n [name]=\"'uploader_' + id\"\r\n [placeholder]=\"'AttachPicture' | bbbTranslate\"\r\n [buttonLabel]=\"'AttachPicture' | bbbTranslate\"\r\n [buttonAriaLabel]=\"'AttachPicture' | bbbTranslate\"\r\n [accept]=\"validExtensions\"\r\n [(ngModel)]=\"files\"\r\n [multiple]=\"false\"\r\n (selectedFilesChanged)=\"onFileSelection($event)\"\r\n ></fd-file-uploader>\r\n @if(value && !value?.IsDeleted){\r\n <button\r\n fd-button\r\n fd-toolbar-item\r\n glyph=\"print\"\r\n fdType=\"transparent\"\r\n printFiles\r\n [files]=\"[{ Id: '0', IsNew: true, IsDeleted: false, Type: 'image', mediaUrl: imageUrl }]\"\r\n ></button>\r\n <button\r\n fd-button\r\n fd-toolbar-item\r\n glyph=\"download\"\r\n fdType=\"transparent\"\r\n [name]=\"Setting.ControlFieldCaption + value.Ext\"\r\n [src]=\"imageUrl\"\r\n saveImage\r\n ></button>\r\n }\r\n <button\r\n class=\"delete\"\r\n fd-button\r\n fd-toolbar-item\r\n [disabled]=\"!this.value || value?.IsDeleted\"\r\n glyph=\"delete\"\r\n [fdType]=\"'transparent'\"\r\n (click)=\"onFileDeleted(uploader)\"\r\n ></button>\r\n <button\r\n fd-toolbar-item\r\n fd-button\r\n [disabled]=\"this.value && value?.IsDeleted !== true\"\r\n glyph=\"attachment\"\r\n [fdType]=\"'transparent'\"\r\n (click)=\"uploader.open()\"\r\n ></button>\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n loadingTpl;\r\n context: {\r\n uploadingState: uploadingState$ | async\r\n }\r\n \"\r\n >\r\n </ng-container>\r\n </fd-toolbar>\r\n </div>\r\n } @if (!inlineEdit) {\r\n <div\r\n [style.max-height.px]=\"Setting.SizeMode === '0' ? layoutInfo.ControlBounds.height : null\"\r\n [style.max-width.px]=\"Setting.SizeMode === '0' ? layoutInfo.ControlBounds.width : null\"\r\n [class.centerImage]=\"Setting.SizeMode === '3'\"\r\n >\r\n @if (value && imageUrl) {\r\n <bsu-mask [top]=\"'0px'\"></bsu-mask>\r\n } @if ((value && imageUrl) || Setting.HasDefaultPicture) {\r\n <img\r\n imgLazy\r\n [imgLazy]=\"imageUrl\"\r\n [src]=\"imageUrl\"\r\n [ngClass]=\"Setting.SizeMode === '1' ? 'cover' : 'contain'\"\r\n [style.height.px]=\"Setting.SizeMode !== '2' ? layoutInfo.ControlBounds.height : null\"\r\n />\r\n }\r\n </div>\r\n } @else {\r\n <fd-avatar [size]=\"'m'\" [image]=\"imageUrl\"></fd-avatar>\r\n }\r\n</div>\r\n<ng-template #loadingTpl let-uploadingState=\"uploadingState\">\r\n @if (uploadingState && uploadingState.state !== 'Complete' && uploadingState.uploading) {\r\n <fd-slider\r\n [(ngModel)]=\"uploadingState.progress\"\r\n [name]=\"'slider_' + id\"\r\n fd-toolbar-item\r\n [id]=\"id + '1'\"\r\n [min]=\"0\"\r\n [max]=\"100\"\r\n [step]=\"1\"\r\n >\r\n </fd-slider>\r\n @if (uploadingState.state === 'Uploading') {\r\n <button fd-toolbar-item fd-button glyph=\"stop\" fdType=\"transparent\" (click)=\"onTerminate()\"></button>\r\n } @if (uploadingState.state === 'Error') {\r\n <button fd-toolbar-item fd-button glyph=\"refresh\" [fdType]=\"'transparent'\" (click)=\"onRetry()\"></button>\r\n } }\r\n</ng-template>\r\n", styles: [":host{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;overflow:hidden;margin-bottom:.25rem;margin-top:.1875rem}:host.editable{border:.0625rem solid var(--sapGroup_TitleBorderColor)}:host ::ng-deep .fd-slider__handle{display:none}:host ::ng-deep .delete button{border-color:transparent!important;background-color:transparent!important}img{width:100%}.pic-wrapper{background-repeat:no-repeat;background-position:center}.cover{max-width:100%;max-height:100%;min-height:100%;width:100%;height:100%;background-size:cover}.contain{max-width:100%;max-height:100%;min-height:100%;width:auto;height:100%;background-size:contain}.no-inlineEdit{width:100%;position:relative;display:flex;flex-direction:column}.inlineEdit{width:100%;position:relative;display:flex;flex-direction:row-reverse;align-items:flex-end;justify-content:flex-start}.centerImage{display:flex;justify-content:center}\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: "directive", type: i2.ImageLazyDirective, selector: "[imgLazy]", inputs: ["auto", "threshold", "imgLazy"], outputs: ["imageLoaded"] }, { kind: "directive", type: i2.PrintFilesDirective, selector: "[printFiles]", inputs: ["files", "file", "isImageGallery", "component"] }, { kind: "directive", type: i2.SaveImageDirective, selector: "[saveImage]", inputs: ["name", "src"] }, { 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", "colorIndication", "random", "clickable", "valueState", "image", "alterIcon", "backupImage"], outputs: ["avatarClicked", "zoomGlyphClicked"] }, { kind: "component", type: i3$1.ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i2$7.FileUploaderComponent, selector: "fd-file-uploader", inputs: ["disabled", "required", "multiple", "accept", "dragndrop", "maxFileSize", "minFileSize", "id", "ariaLabel", "ariaLabelledBy", "placeholder", "buttonLabel", "buttonAriaLabel", "state", "fileLimit", "inputHidden", "width"], outputs: ["selectedFilesChanged", "selectedInvalidFiles", "onDragEnter", "onDragLeave"] }, { kind: "component", type: i12.ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "headingLevel", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i12.ToolbarItemDirective, selector: "[fd-toolbar-item], [fdOverflowGroup], [fdOverflowPriority]", inputs: ["fdOverflowPriority", "fdOverflowGroup"] }, { kind: "component", type: i11$1.SliderComponent, selector: "fd-slider", inputs: ["id", "class", "ariaLabelledBy", "ariaLabel", "min", "max", "step", "jump", "tickmarksBetweenLabels", "mode", "showTicks", "showTicksLabels", "customValues", "tooltipMode", "hideProgressBar", "disabled", "vertical", "value"] }, { kind: "component", type: MaskComponent, selector: "bsu-mask", inputs: ["size", "top"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
12629
12630
|
}
|
|
12630
12631
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UiPictureFileComponent, decorators: [{
|
|
12631
12632
|
type: Component,
|
|
12632
|
-
args: [{ selector: 'bsu-ui-picture-file', changeDetection: ChangeDetectionStrategy.OnPush, providers: [UploadService], standalone: false, template: "<div\r\n [style.max-height]=\"Setting.SizeMode === '2' ? null : layoutHeight\"\r\n [class.no-inlineEdit]=\"!inlineEdit\"\r\n [style.min-height.px]=\"!value && !inlineEdit ? null : 140\"\r\n [class.inlineEdit]=\"inlineEdit\"\r\n>\r\n @if (!((disableOrReadonly$ | async) === true || Setting.IsReadOnly === true)) {\r\n <div>\r\n <fd-toolbar [fdType]=\"'transparent'\" [clearBorder]=\"value && imageUrl ? false : true\">\r\n <fd-file-uploader\r\n #uploader\r\n fd-toolbar-item\r\n [style.display]=\"'none'\"\r\n [id]=\"id\"\r\n [name]=\"'uploader_' + id\"\r\n [placeholder]=\"'AttachPicture' | bbbTranslate\"\r\n [buttonLabel]=\"'AttachPicture' | bbbTranslate\"\r\n [buttonAriaLabel]=\"'AttachPicture' | bbbTranslate\"\r\n [accept]=\"validExtensions\"\r\n [(ngModel)]=\"files\"\r\n [multiple]=\"false\"\r\n (selectedFilesChanged)=\"onFileSelection($event)\"\r\n ></fd-file-uploader>\r\n @if(value && !value?.IsDeleted){\r\n <button\r\n fd-button\r\n fd-toolbar-item\r\n glyph=\"print\"\r\n fdType=\"transparent\"\r\n printFiles\r\n [files]=\"[{ Id: '0', IsNew: true, IsDeleted: false, Type: 'image', mediaUrl: imageUrl }]\"\r\n ></button>\r\n }\r\n <button\r\n class=\"delete\"\r\n fd-button\r\n fd-toolbar-item\r\n [disabled]=\"!this.value || value?.IsDeleted\"\r\n glyph=\"delete\"\r\n [fdType]=\"'transparent'\"\r\n (click)=\"onFileDeleted(uploader)\"\r\n ></button>\r\n <button\r\n fd-toolbar-item\r\n fd-button\r\n [disabled]=\"this.value && value?.IsDeleted !== true\"\r\n glyph=\"attachment\"\r\n [fdType]=\"'transparent'\"\r\n (click)=\"uploader.open()\"\r\n ></button>\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n loadingTpl;\r\n context: {\r\n uploadingState: uploadingState$ | async\r\n }\r\n \"\r\n >\r\n </ng-container>\r\n </fd-toolbar>\r\n </div>\r\n } @if (!inlineEdit) {\r\n <div\r\n [style.max-height.px]=\"Setting.SizeMode === '0' ? layoutInfo.ControlBounds.height : null\"\r\n [style.max-width.px]=\"Setting.SizeMode === '0' ? layoutInfo.ControlBounds.width : null\"\r\n [class.centerImage]=\"Setting.SizeMode === '3'\"\r\n >\r\n @if (value && imageUrl) {\r\n <bsu-mask [top]=\"'0px'\"></bsu-mask>\r\n } @if ((value && imageUrl) || Setting.HasDefaultPicture) {\r\n <img\r\n imgLazy\r\n [imgLazy]=\"imageUrl\"\r\n [src]=\"imageUrl\"\r\n [ngClass]=\"Setting.SizeMode === '1' ? 'cover' : 'contain'\"\r\n [style.height.px]=\"Setting.SizeMode !== '2' ? layoutInfo.ControlBounds.height : null\"\r\n />\r\n }\r\n </div>\r\n } @else {\r\n <fd-avatar [size]=\"'m'\" [image]=\"imageUrl\"></fd-avatar>\r\n }\r\n</div>\r\n<ng-template #loadingTpl let-uploadingState=\"uploadingState\">\r\n @if (uploadingState && uploadingState.state !== 'Complete' && uploadingState.uploading) {\r\n <fd-slider\r\n [(ngModel)]=\"uploadingState.progress\"\r\n [name]=\"'slider_' + id\"\r\n fd-toolbar-item\r\n [id]=\"id + '1'\"\r\n [min]=\"0\"\r\n [max]=\"100\"\r\n [step]=\"1\"\r\n >\r\n </fd-slider>\r\n @if (uploadingState.state === 'Uploading') {\r\n <button fd-toolbar-item fd-button glyph=\"stop\" fdType=\"transparent\" (click)=\"onTerminate()\"></button>\r\n } @if (uploadingState.state === 'Error') {\r\n <button fd-toolbar-item fd-button glyph=\"refresh\" [fdType]=\"'transparent'\" (click)=\"onRetry()\"></button>\r\n } }\r\n</ng-template>\r\n", styles: [":host{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;overflow:hidden;margin-bottom:.25rem;margin-top:.1875rem}:host.editable{border:.0625rem solid var(--sapGroup_TitleBorderColor)}:host ::ng-deep .fd-slider__handle{display:none}:host ::ng-deep .delete button{border-color:transparent!important;background-color:transparent!important}img{width:100%}.pic-wrapper{background-repeat:no-repeat;background-position:center}.cover{max-width:100%;max-height:100%;min-height:100%;width:100%;height:100%;background-size:cover}.contain{max-width:100%;max-height:100%;min-height:100%;width:auto;height:100%;background-size:contain}.no-inlineEdit{width:100%;position:relative;display:flex;flex-direction:column}.inlineEdit{width:100%;position:relative;display:flex;flex-direction:row-reverse;align-items:flex-end;justify-content:flex-start}.centerImage{display:flex;justify-content:center}\n"] }]
|
|
12633
|
+
args: [{ selector: 'bsu-ui-picture-file', changeDetection: ChangeDetectionStrategy.OnPush, providers: [UploadService], standalone: false, template: "<div\r\n [style.max-height]=\"Setting.SizeMode === '2' ? null : layoutHeight\"\r\n [class.no-inlineEdit]=\"!inlineEdit\"\r\n [style.min-height.px]=\"!value && !inlineEdit ? null : 140\"\r\n [class.inlineEdit]=\"inlineEdit\"\r\n>\r\n @if (!((disableOrReadonly$ | async) === true || Setting.IsReadOnly === true)) {\r\n <div>\r\n <fd-toolbar [fdType]=\"'transparent'\" [clearBorder]=\"value && imageUrl ? false : true\">\r\n <fd-file-uploader\r\n #uploader\r\n fd-toolbar-item\r\n [style.display]=\"'none'\"\r\n [id]=\"id\"\r\n [name]=\"'uploader_' + id\"\r\n [placeholder]=\"'AttachPicture' | bbbTranslate\"\r\n [buttonLabel]=\"'AttachPicture' | bbbTranslate\"\r\n [buttonAriaLabel]=\"'AttachPicture' | bbbTranslate\"\r\n [accept]=\"validExtensions\"\r\n [(ngModel)]=\"files\"\r\n [multiple]=\"false\"\r\n (selectedFilesChanged)=\"onFileSelection($event)\"\r\n ></fd-file-uploader>\r\n @if(value && !value?.IsDeleted){\r\n <button\r\n fd-button\r\n fd-toolbar-item\r\n glyph=\"print\"\r\n fdType=\"transparent\"\r\n printFiles\r\n [files]=\"[{ Id: '0', IsNew: true, IsDeleted: false, Type: 'image', mediaUrl: imageUrl }]\"\r\n ></button>\r\n <button\r\n fd-button\r\n fd-toolbar-item\r\n glyph=\"download\"\r\n fdType=\"transparent\"\r\n [name]=\"Setting.ControlFieldCaption + value.Ext\"\r\n [src]=\"imageUrl\"\r\n saveImage\r\n ></button>\r\n }\r\n <button\r\n class=\"delete\"\r\n fd-button\r\n fd-toolbar-item\r\n [disabled]=\"!this.value || value?.IsDeleted\"\r\n glyph=\"delete\"\r\n [fdType]=\"'transparent'\"\r\n (click)=\"onFileDeleted(uploader)\"\r\n ></button>\r\n <button\r\n fd-toolbar-item\r\n fd-button\r\n [disabled]=\"this.value && value?.IsDeleted !== true\"\r\n glyph=\"attachment\"\r\n [fdType]=\"'transparent'\"\r\n (click)=\"uploader.open()\"\r\n ></button>\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n loadingTpl;\r\n context: {\r\n uploadingState: uploadingState$ | async\r\n }\r\n \"\r\n >\r\n </ng-container>\r\n </fd-toolbar>\r\n </div>\r\n } @if (!inlineEdit) {\r\n <div\r\n [style.max-height.px]=\"Setting.SizeMode === '0' ? layoutInfo.ControlBounds.height : null\"\r\n [style.max-width.px]=\"Setting.SizeMode === '0' ? layoutInfo.ControlBounds.width : null\"\r\n [class.centerImage]=\"Setting.SizeMode === '3'\"\r\n >\r\n @if (value && imageUrl) {\r\n <bsu-mask [top]=\"'0px'\"></bsu-mask>\r\n } @if ((value && imageUrl) || Setting.HasDefaultPicture) {\r\n <img\r\n imgLazy\r\n [imgLazy]=\"imageUrl\"\r\n [src]=\"imageUrl\"\r\n [ngClass]=\"Setting.SizeMode === '1' ? 'cover' : 'contain'\"\r\n [style.height.px]=\"Setting.SizeMode !== '2' ? layoutInfo.ControlBounds.height : null\"\r\n />\r\n }\r\n </div>\r\n } @else {\r\n <fd-avatar [size]=\"'m'\" [image]=\"imageUrl\"></fd-avatar>\r\n }\r\n</div>\r\n<ng-template #loadingTpl let-uploadingState=\"uploadingState\">\r\n @if (uploadingState && uploadingState.state !== 'Complete' && uploadingState.uploading) {\r\n <fd-slider\r\n [(ngModel)]=\"uploadingState.progress\"\r\n [name]=\"'slider_' + id\"\r\n fd-toolbar-item\r\n [id]=\"id + '1'\"\r\n [min]=\"0\"\r\n [max]=\"100\"\r\n [step]=\"1\"\r\n >\r\n </fd-slider>\r\n @if (uploadingState.state === 'Uploading') {\r\n <button fd-toolbar-item fd-button glyph=\"stop\" fdType=\"transparent\" (click)=\"onTerminate()\"></button>\r\n } @if (uploadingState.state === 'Error') {\r\n <button fd-toolbar-item fd-button glyph=\"refresh\" [fdType]=\"'transparent'\" (click)=\"onRetry()\"></button>\r\n } }\r\n</ng-template>\r\n", styles: [":host{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;overflow:hidden;margin-bottom:.25rem;margin-top:.1875rem}:host.editable{border:.0625rem solid var(--sapGroup_TitleBorderColor)}:host ::ng-deep .fd-slider__handle{display:none}:host ::ng-deep .delete button{border-color:transparent!important;background-color:transparent!important}img{width:100%}.pic-wrapper{background-repeat:no-repeat;background-position:center}.cover{max-width:100%;max-height:100%;min-height:100%;width:100%;height:100%;background-size:cover}.contain{max-width:100%;max-height:100%;min-height:100%;width:auto;height:100%;background-size:contain}.no-inlineEdit{width:100%;position:relative;display:flex;flex-direction:column}.inlineEdit{width:100%;position:relative;display:flex;flex-direction:row-reverse;align-items:flex-end;justify-content:flex-start}.centerImage{display:flex;justify-content:center}\n"] }]
|
|
12633
12634
|
}], propDecorators: { _editable: [{
|
|
12634
12635
|
type: HostBinding,
|
|
12635
12636
|
args: ['class.editable']
|