barsa-sap-ui 1.0.305 → 1.0.307

package/fesm2020/barsa-sap-ui.mjs

@@ -8811,10 +8811,10 @@ class UiPicturesInfoComponent extends DeviceInfoFieldBaseComponent {
     }
 }
 UiPicturesInfoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: UiPicturesInfoComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-UiPicturesInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", 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\"\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<!-- <ng-container *ngTemplateOutlet=\"toolbarTpl\"></ng-container>\r\n<ng-template #toolbarTpl let-inDialog=\"inDialog\">\r\n    <fd-toolbar *untilInView=\"el\" [fdType]=\"'transparent'\" [clearBorder]=\"true\" [shouldOverflow]=\"true\">\r\n        <fdp-button *ngIf=\"!inDialog\"\r\n            [disabled]=\"!(value | canUploadFile: maxFileCount:(disable$ | async)!!:(readonly$ | async)!!)\"\r\n            fd-toolbar-item glyph=\"attachment\" buttonType=\"transparent\" (click)=\"uploader.open()\"></fdp-button>\r\n        <fdp-button [disabled]=\"selectedIndex === -1 || (disableOrReadonly$ | async)!!\" class=\"delete\" fd-toolbar-item\r\n            glyph=\"delete\" [buttonType]=\"'transparent'\" (click)=\"onDelete()\"></fdp-button>\r\n        <fdp-button fd-toolbar-item glyph=\"zoom-in\" [buttonType]=\"'transparent'\" (click)=\"onZoomIn()\"></fdp-button>\r\n        <fdp-button fd-toolbar-item glyph=\"zoom-out\" [buttonType]=\"'transparent'\" (click)=\"onZoomOut()\"></fdp-button>\r\n        <fdp-button fd-toolbar-item glyph=\"exitfullscreen\" [buttonType]=\"'transparent'\"\r\n            (click)=\"onFillOriginal()\"></fdp-button>\r\n        <fdp-button fd-toolbar-item glyph=\"resize-horizontal\" [buttonType]=\"'transparent'\"\r\n            (click)=\"onFillWidth()\"></fdp-button>\r\n        <fdp-button fd-toolbar-item glyph=\"resize\" [buttonType]=\"'transparent'\" (click)=\"onFillAll()\"></fdp-button>\r\n        <ng-container *ngIf=\"!inDialog\">\r\n            <fdp-split-menu-button fd-toolbar-item [readonly]=\"(readonly$ | async)!!\" [disabled]=\"(readonly$ | async)!!\"\r\n                *ngIf=\"value | canUploadFile: maxFileCount:(disable$ | async)!!:(readonly$ | async)!!\" [menu]=\"menu1\"\r\n                [buttonLabel]=\"'Scan' | bbbTranslate\" [title]=\"'Scan' | bbbTranslate\" type=\"transparent\"\r\n                [menuTitle]=\"'Scan' | bbbTranslate\" (primaryButtonClick)=\"onScan()\">\r\n            </fdp-split-menu-button>\r\n            <fdp-menu #menu1 xPosition=\"after\">\r\n                <fdp-menu-item (itemSelect)=\"onAdvanceScan()\">{{ 'AdvancedScan' | bbbTranslate }}</fdp-menu-item>\r\n            </fdp-menu>\r\n        </ng-container>\r\n    </fd-toolbar>\r\n</ng-template> -->\r\n\r\n<!-- <ng-container *ngIf=\"mediaData$ | async as mediaData\">\r\n    <div *ngIf=\"mediaData.length > 0; else hashed\" dir=\"rtl\" class=\"gallery\" #gallery>\r\n        <div class=\"column small-imgs-box\">\r\n            <div class=\"pics\" (click)=\"onThumbnailClicked(i)\" *ngFor=\"let media of mediaData; let i = index\"\r\n                [class.selected]=\"i === selectedIndex || (!selectedIndex && i === 0)\">\r\n                <img [src]=\"media.thumbnailUrl\" />\r\n            </div>\r\n        </div>\r\n        <div class=\"column big-imgs-box\" [class.fill-width]=\"fillWidth\" [class.fill-all]=\"fillAll\"\r\n            [class.fill-original]=\"fillOriginal\" [ngClass]=\"selectedZoom\">\r\n            <div class=\"pics\" [id]=\"i\" *ngFor=\"let media of mediaData; let i = index\">\r\n                <img imgLazy [imgLazy]=\"media.mediaUrl\" [src]=\"media.mediaUrl\" />\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <ng-template #hashed>\r\n        <div class=\"hatchBackground\" style=\"display: flex; align-items: center; justify-content: center\"></div>\r\n    </ng-template>\r\n</ng-container> -->\r\n\r\n<ng-container *ngTemplateOutlet=\"layoutGridTpl\"></ng-container>\r\n<ng-template #layoutGridTpl let-inDialog=\"inDialog\">\r\n    <fd-layout-grid>\r\n        <div fdLayoutGridRow *ngIf=\"mediaData$ | async as mediaData\">\r\n            <div\r\n                *ngFor=\"let media of mediaData; let i = index\"\r\n                [fdLayoutGridCol]=\"6\"\r\n                [colMd]=\"3\"\r\n                [colLg]=\"2\"\r\n                [colXl]=\"2\"\r\n                (click)=\"onMedaiClick(media, i)\"\r\n            >\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        cardTpl;\r\n                        context: { $implicit: media, mediaData: this.mediaData, inDialog: this.inDialog, index: i }\r\n                    \"\r\n                ></ng-container>\r\n            </div>\r\n            <div *ngIf=\"!inDialog\" [fdLayoutGridCol]=\"6\" [colMd]=\"3\" [colLg]=\"2\" [colXl]=\"2\">\r\n                <ng-container *ngTemplateOutlet=\"newFile\"></ng-container>\r\n            </div>\r\n        </div>\r\n    </fd-layout-grid>\r\n</ng-template>\r\n<ng-template #cardTpl let-media let-mediaData=\"mediaData\" let-inDialog=\"inDialog\" let-index=\"index\">\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\" />\r\n        </fd-card-content>\r\n        <fd-card-footer *ngIf=\"!inDialog\">\r\n            <button\r\n                glyph=\"message-information\"\r\n                *fdCardFooterActionItem\r\n                fd-button\r\n                fdType=\"transparent\"\r\n                [fd-inline-help]=\"media.title\"\r\n                [triggers]=\"['click']\"\r\n                [closeOnOutsideClick]=\"true\"\r\n            ></button>\r\n            <button\r\n                glyph=\"full-screen\"\r\n                *fdCardFooterActionItem\r\n                fd-button\r\n                fdType=\"transparent\"\r\n                (click)=\"onFullscreen(media, mediaData)\"\r\n            ></button>\r\n            <button\r\n                glyph=\"delete\"\r\n                *fdCardFooterActionItem\r\n                fd-button\r\n                fdType=\"transparent\"\r\n                (click)=\"onDelete(index)\"\r\n            ></button>\r\n        </fd-card-footer>\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        <bsu-mask *ngIf=\"(uploadingState$ | async)?.uploading === true\"></bsu-mask>\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 fdTemplate=\"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                        *ngIf=\"!dialogConfig.fullscreen\"\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                    <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                <div\r\n                    *ngFor=\"let media of dialog.data.mediaData; let i = index\"\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                    <div class=\"pics\" [id]=\"i\">\r\n                        <bsu-mask></bsu-mask>\r\n                        <img imgLazy [imgLazy]=\"media.mediaUrl\" [src]=\"media.mediaUrl\" />\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div *ngIf=\"(deviceSize$ | async) !== 's'\" class=\"thumbnail\" style=\"flex-shrink: 1\">\r\n                <ng-cotainer *ngTemplateOutlet=\"layoutGridTpl; context: { inDialog: true }\"></ng-cotainer>\r\n            </div>\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}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:rgb(85,84,84);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-width img{width:100%!important}.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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.ImageLazyDirective, selector: "[imgLazy]", inputs: ["auto", "threshold", "imgLazy"], outputs: ["imageLoaded"] }, { kind: "directive", type: i4.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i4.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: i4.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth", "isTitle"] }, { kind: "component", type: i4.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "component", type: i3$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i7$4.CardComponent, selector: "fd-card", inputs: ["badge", "isLoading", "cardType", "id", "role"] }, { kind: "component", type: i7$4.CardContentComponent, selector: "fd-card-content" }, { kind: "component", type: i7$4.CardFooterComponent, selector: "fd-card-footer" }, { kind: "directive", type: i7$4.CardFooterActionItemDirective, selector: "[fdCardFooterActionItem]" }, { kind: "component", type: i6$5.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: "directive", type: i7$a.InlineHelpDirective, selector: "[fd-inline-help], [fd-inline-help-template]", inputs: ["triggers", "noArrow", "closeOnEscapeKey", "closeOnOutsideClick", "fd-inline-help", "fd-inline-help-template"] }, { kind: "component", type: i4$6.LayoutGridComponent, selector: "fd-layout-grid, [fdLayoutGrid]", inputs: ["class", "noGap", "noHorizontalGap", "noVerticalGap"] }, { kind: "directive", type: i4$6.LayoutGridColDirective, selector: "[fd-layout-grid-col], [fdLayoutGridCol]", inputs: ["fdLayoutGridCol", "colGrow", "colMd", "colLg", "colXl", "colOffset", "colOffsetMd", "colOffsetLg", "colOffsetXl", "class"] }, { kind: "directive", type: i4$6.LayoutGridRowDirective, selector: "[fd-layout-grid-row], [fdLayoutGridRow]" }, { kind: "component", type: i9.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { kind: "component", type: i9.MenuItemComponent, selector: "li[fd-menu-item]", inputs: ["disabled", "itemId", "submenu"], outputs: ["onSelect"], exportAs: ["fd-menu-item"] }, { kind: "directive", type: i9.MenuInteractiveDirective, selector: "[fd-menu-interactive]" }, { kind: "directive", type: i9.MenuTitleDirective, selector: "[fd-menu-title]" }, { kind: "directive", type: i9.MenuTriggerDirective, selector: "[fdMenuTrigger]", inputs: ["fdMenuTrigger"] }, { kind: "component", type: i4$1.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i4$1.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i4$1.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: i5.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: i6$2.TemplateDirective, selector: "[fdTemplate]", inputs: ["fdTemplate"] }, { kind: "component", type: MaskComponent, selector: "bsu-mask", inputs: ["size", "marginTop"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+UiPicturesInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", 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\n    #uploader\n    [style.display]=\"'none'\"\n    [id]=\"id\"\n    [name]=\"'pictures_' + id\"\n    [placeholder]=\"'AttachPicture' | bbbTranslate\"\n    [buttonLabel]=\"'AttachPicture' | bbbTranslate\"\n    [buttonAriaLabel]=\"'AttachPicture' | bbbTranslate\"\n    accept=\".png,.jpg,.bpm,.jpeg,.gif,.png,.tif\"\n    [fileLimit]=\"maxFileCount === 0 ? 100 : maxFileCount\"\n    [multiple]=\"maxFileCount === 0 || maxFileCount > 1\"\n    (selectedFilesChanged)=\"onFileSelection($event)\"\n></fd-file-uploader>\n<!-- <ng-container *ngTemplateOutlet=\"toolbarTpl\"></ng-container>\n<ng-template #toolbarTpl let-inDialog=\"inDialog\">\n    <fd-toolbar *untilInView=\"el\" [fdType]=\"'transparent'\" [clearBorder]=\"true\" [shouldOverflow]=\"true\">\n        <fdp-button *ngIf=\"!inDialog\"\n            [disabled]=\"!(value | canUploadFile: maxFileCount:(disable$ | async)!!:(readonly$ | async)!!)\"\n            fd-toolbar-item glyph=\"attachment\" buttonType=\"transparent\" (click)=\"uploader.open()\"></fdp-button>\n        <fdp-button [disabled]=\"selectedIndex === -1 || (disableOrReadonly$ | async)!!\" class=\"delete\" fd-toolbar-item\n            glyph=\"delete\" [buttonType]=\"'transparent'\" (click)=\"onDelete()\"></fdp-button>\n        <fdp-button fd-toolbar-item glyph=\"zoom-in\" [buttonType]=\"'transparent'\" (click)=\"onZoomIn()\"></fdp-button>\n        <fdp-button fd-toolbar-item glyph=\"zoom-out\" [buttonType]=\"'transparent'\" (click)=\"onZoomOut()\"></fdp-button>\n        <fdp-button fd-toolbar-item glyph=\"exitfullscreen\" [buttonType]=\"'transparent'\"\n            (click)=\"onFillOriginal()\"></fdp-button>\n        <fdp-button fd-toolbar-item glyph=\"resize-horizontal\" [buttonType]=\"'transparent'\"\n            (click)=\"onFillWidth()\"></fdp-button>\n        <fdp-button fd-toolbar-item glyph=\"resize\" [buttonType]=\"'transparent'\" (click)=\"onFillAll()\"></fdp-button>\n        <ng-container *ngIf=\"!inDialog\">\n            <fdp-split-menu-button fd-toolbar-item [readonly]=\"(readonly$ | async)!!\" [disabled]=\"(readonly$ | async)!!\"\n                *ngIf=\"value | canUploadFile: maxFileCount:(disable$ | async)!!:(readonly$ | async)!!\" [menu]=\"menu1\"\n                [buttonLabel]=\"'Scan' | bbbTranslate\" [title]=\"'Scan' | bbbTranslate\" type=\"transparent\"\n                [menuTitle]=\"'Scan' | bbbTranslate\" (primaryButtonClick)=\"onScan()\">\n            </fdp-split-menu-button>\n            <fdp-menu #menu1 xPosition=\"after\">\n                <fdp-menu-item (itemSelect)=\"onAdvanceScan()\">{{ 'AdvancedScan' | bbbTranslate }}</fdp-menu-item>\n            </fdp-menu>\n        </ng-container>\n    </fd-toolbar>\n</ng-template> -->\n\n<!-- <ng-container *ngIf=\"mediaData$ | async as mediaData\">\n    <div *ngIf=\"mediaData.length > 0; else hashed\" dir=\"rtl\" class=\"gallery\" #gallery>\n        <div class=\"column small-imgs-box\">\n            <div class=\"pics\" (click)=\"onThumbnailClicked(i)\" *ngFor=\"let media of mediaData; let i = index\"\n                [class.selected]=\"i === selectedIndex || (!selectedIndex && i === 0)\">\n                <img [src]=\"media.thumbnailUrl\" />\n            </div>\n        </div>\n        <div class=\"column big-imgs-box\" [class.fill-width]=\"fillWidth\" [class.fill-all]=\"fillAll\"\n            [class.fill-original]=\"fillOriginal\" [ngClass]=\"selectedZoom\">\n            <div class=\"pics\" [id]=\"i\" *ngFor=\"let media of mediaData; let i = index\">\n                <img imgLazy [imgLazy]=\"media.mediaUrl\" [src]=\"media.mediaUrl\" />\n            </div>\n        </div>\n    </div>\n\n    <ng-template #hashed>\n        <div class=\"hatchBackground\" style=\"display: flex; align-items: center; justify-content: center\"></div>\n    </ng-template>\n</ng-container> -->\n\n<ng-container *ngTemplateOutlet=\"layoutGridTpl\"></ng-container>\n<ng-template #layoutGridTpl let-inDialog=\"inDialog\">\n    <fd-layout-grid>\n        <div fdLayoutGridRow *ngIf=\"mediaData$ | async as mediaData\">\n            <div\n                *ngFor=\"let media of mediaData; let i = index\"\n                [fdLayoutGridCol]=\"6\"\n                [colMd]=\"3\"\n                [colLg]=\"2\"\n                [colXl]=\"2\"\n                (click)=\"onMedaiClick(media, i)\"\n            >\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        cardTpl;\n                        context: { $implicit: media, mediaData: this.mediaData, inDialog: this.inDialog, index: i }\n                    \"\n                ></ng-container>\n            </div>\n            <div\n                *ngIf=\"!inDialog && (disableOrReadonly$ | async) === false\"\n                [fdLayoutGridCol]=\"6\"\n                [colMd]=\"3\"\n                [colLg]=\"2\"\n                [colXl]=\"2\"\n            >\n                <ng-container *ngTemplateOutlet=\"newFile\"></ng-container>\n            </div>\n        </div>\n    </fd-layout-grid>\n</ng-template>\n<ng-template #cardTpl let-media let-mediaData=\"mediaData\" let-inDialog=\"inDialog\" let-index=\"index\">\n    <fd-card class=\"media\" [class.inDialog]=\"inDialog\">\n        <fd-card-content style=\"text-align: center; height: 120px\">\n            <img imgLazy [imgLazy]=\"media.thumbnailUrl\" [src]=\"media.thumbnailUrl\" />\n        </fd-card-content>\n        <fd-card-footer *ngIf=\"!inDialog\">\n            <button\n                glyph=\"message-information\"\n                *fdCardFooterActionItem\n                fd-button\n                fdType=\"transparent\"\n                [fd-inline-help]=\"media.title\"\n                [triggers]=\"['click']\"\n                [closeOnOutsideClick]=\"true\"\n            ></button>\n            <button\n                glyph=\"full-screen\"\n                *fdCardFooterActionItem\n                fd-button\n                fdType=\"transparent\"\n                (click)=\"onFullscreen(media, mediaData)\"\n            ></button>\n            <ng-container *ngIf=\"(disableOrReadonly$ | async) === false\">\n                <button\n                    glyph=\"delete\"\n                    *fdCardFooterActionItem\n                    fd-button\n                    fdType=\"transparent\"\n                    (click)=\"onDelete(index)\"\n                ></button>\n            </ng-container>\n        </fd-card-footer>\n    </fd-card>\n</ng-template>\n<ng-template #newFile>\n    <div style=\"position: relative; height: 100%\">\n        <fd-card>\n            <fd-card-content style=\"display: flex; align-items: center; justify-content: center; min-height: 120px\">\n                <button\n                    fd-button\n                    glyph=\"add-photo\"\n                    fdType=\"transparent\"\n                    [label]=\"'AttachFile' | bbbTranslate\"\n                    (click)=\"uploader.open()\"\n                ></button>\n            </fd-card-content>\n\n            <fd-card-footer style=\"border-top: 1px solid #ccc\">\n                <button fd-button [glyph]=\"'overflow'\" [fdType]=\"'transparent'\" [fdMenuTrigger]=\"menu\"></button>\n                <fd-menu #menu>\n                    <li fd-menu-item (click)=\"onScan()\">\n                        <a fd-menu-interactive>\n                            <span fd-menu-title>{{ 'Scan' | bbbTranslate }}</span>\n                        </a>\n                    </li>\n                    <li fd-menu-item (click)=\"onAdvanceScan()\">\n                        <a fd-menu-interactive>\n                            <span fd-menu-title>{{ 'AdvancedScan' | bbbTranslate }}</span>\n                        </a>\n                    </li>\n                </fd-menu>\n            </fd-card-footer>\n        </fd-card>\n        <bsu-mask *ngIf=\"(uploadingState$ | async)?.uploading === true\"></bsu-mask>\n    </div>\n</ng-template>\n<ng-template #dialogTemplate let-dialog let-dialogConfig=\"dialogConfig\">\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\" #dialogTpl class=\"vertical\">\n        <fd-dialog-header>\n            <ng-template fdTemplate=\"header\">\n                <div fd-bar-left>\n                    <fd-bar-element>\n                        <h1 fd-title>{{ Setting.ControlFieldCaptionTranslated }}</h1>\n                    </fd-bar-element>\n                </div>\n                <div fd-bar-right>\n                    <fd-button-bar\n                        *ngIf=\"!dialogConfig.fullscreen\"\n                        ariaLabel=\"Fit image size\"\n                        [glyph]=\"'resize'\"\n                        [fdType]=\"fillWidth ? 'emphasized' : 'transparent'\"\n                        (click)=\"fillWidth = !fillWidth\"\n                    ></fd-button-bar>\n                    <fd-button-bar ariaLabel=\"close\" glyph=\"decline\" (click)=\"dialog.close()\"></fd-button-bar>\n                </div>\n            </ng-template>\n        </fd-dialog-header>\n        <fd-dialog-body #fdbody>\n            <div #gallery class=\"gallery inDialog\" style=\"flex: 1\">\n                <div\n                    *ngFor=\"let media of dialog.data.mediaData; let i = index\"\n                    class=\"column big-imgs-box\"\n                    [class.fill-width]=\"fillWidth\"\n                    [class.fill-all]=\"fillAll\"\n                    [class.fill-original]=\"fillOriginal\"\n                    [ngClass]=\"selectedZoom\"\n                >\n                    <div class=\"pics\" [id]=\"i\">\n                        <bsu-mask></bsu-mask>\n                        <img imgLazy [imgLazy]=\"media.mediaUrl\" [src]=\"media.mediaUrl\" />\n                    </div>\n                </div>\n            </div>\n            <div *ngIf=\"(deviceSize$ | async) !== 's'\" class=\"thumbnail\" style=\"flex-shrink: 1\">\n                <ng-cotainer *ngTemplateOutlet=\"layoutGridTpl; context: { inDialog: true }\"></ng-cotainer>\n            </div>\n        </fd-dialog-body>\n    </fd-dialog>\n</ng-template>\n", styles: [":host{position:relative}:host ::ng-deep .delete button{border-color:transparent!important;background-color:transparent!important}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:rgb(85,84,84);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-width img{width:100%!important}.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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.ImageLazyDirective, selector: "[imgLazy]", inputs: ["auto", "threshold", "imgLazy"], outputs: ["imageLoaded"] }, { kind: "directive", type: i4.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i4.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: i4.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth", "isTitle"] }, { kind: "component", type: i4.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "component", type: i3$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i7$4.CardComponent, selector: "fd-card", inputs: ["badge", "isLoading", "cardType", "id", "role"] }, { kind: "component", type: i7$4.CardContentComponent, selector: "fd-card-content" }, { kind: "component", type: i7$4.CardFooterComponent, selector: "fd-card-footer" }, { kind: "directive", type: i7$4.CardFooterActionItemDirective, selector: "[fdCardFooterActionItem]" }, { kind: "component", type: i6$5.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: "directive", type: i7$a.InlineHelpDirective, selector: "[fd-inline-help], [fd-inline-help-template]", inputs: ["triggers", "noArrow", "closeOnEscapeKey", "closeOnOutsideClick", "fd-inline-help", "fd-inline-help-template"] }, { kind: "component", type: i4$6.LayoutGridComponent, selector: "fd-layout-grid, [fdLayoutGrid]", inputs: ["class", "noGap", "noHorizontalGap", "noVerticalGap"] }, { kind: "directive", type: i4$6.LayoutGridColDirective, selector: "[fd-layout-grid-col], [fdLayoutGridCol]", inputs: ["fdLayoutGridCol", "colGrow", "colMd", "colLg", "colXl", "colOffset", "colOffsetMd", "colOffsetLg", "colOffsetXl", "class"] }, { kind: "directive", type: i4$6.LayoutGridRowDirective, selector: "[fd-layout-grid-row], [fdLayoutGridRow]" }, { kind: "component", type: i9.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { kind: "component", type: i9.MenuItemComponent, selector: "li[fd-menu-item]", inputs: ["disabled", "itemId", "submenu"], outputs: ["onSelect"], exportAs: ["fd-menu-item"] }, { kind: "directive", type: i9.MenuInteractiveDirective, selector: "[fd-menu-interactive]" }, { kind: "directive", type: i9.MenuTitleDirective, selector: "[fd-menu-title]" }, { kind: "directive", type: i9.MenuTriggerDirective, selector: "[fdMenuTrigger]", inputs: ["fdMenuTrigger"] }, { kind: "component", type: i4$1.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: i4$1.DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: i4$1.DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: i5.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: i6$2.TemplateDirective, selector: "[fdTemplate]", inputs: ["fdTemplate"] }, { kind: "component", type: MaskComponent, selector: "bsu-mask", inputs: ["size", "marginTop"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: UiPicturesInfoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-ui-pictures-info', providers: [UploadService], changeDetection: ChangeDetectionStrategy.OnPush, 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\"\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<!-- <ng-container *ngTemplateOutlet=\"toolbarTpl\"></ng-container>\r\n<ng-template #toolbarTpl let-inDialog=\"inDialog\">\r\n    <fd-toolbar *untilInView=\"el\" [fdType]=\"'transparent'\" [clearBorder]=\"true\" [shouldOverflow]=\"true\">\r\n        <fdp-button *ngIf=\"!inDialog\"\r\n            [disabled]=\"!(value | canUploadFile: maxFileCount:(disable$ | async)!!:(readonly$ | async)!!)\"\r\n            fd-toolbar-item glyph=\"attachment\" buttonType=\"transparent\" (click)=\"uploader.open()\"></fdp-button>\r\n        <fdp-button [disabled]=\"selectedIndex === -1 || (disableOrReadonly$ | async)!!\" class=\"delete\" fd-toolbar-item\r\n            glyph=\"delete\" [buttonType]=\"'transparent'\" (click)=\"onDelete()\"></fdp-button>\r\n        <fdp-button fd-toolbar-item glyph=\"zoom-in\" [buttonType]=\"'transparent'\" (click)=\"onZoomIn()\"></fdp-button>\r\n        <fdp-button fd-toolbar-item glyph=\"zoom-out\" [buttonType]=\"'transparent'\" (click)=\"onZoomOut()\"></fdp-button>\r\n        <fdp-button fd-toolbar-item glyph=\"exitfullscreen\" [buttonType]=\"'transparent'\"\r\n            (click)=\"onFillOriginal()\"></fdp-button>\r\n        <fdp-button fd-toolbar-item glyph=\"resize-horizontal\" [buttonType]=\"'transparent'\"\r\n            (click)=\"onFillWidth()\"></fdp-button>\r\n        <fdp-button fd-toolbar-item glyph=\"resize\" [buttonType]=\"'transparent'\" (click)=\"onFillAll()\"></fdp-button>\r\n        <ng-container *ngIf=\"!inDialog\">\r\n            <fdp-split-menu-button fd-toolbar-item [readonly]=\"(readonly$ | async)!!\" [disabled]=\"(readonly$ | async)!!\"\r\n                *ngIf=\"value | canUploadFile: maxFileCount:(disable$ | async)!!:(readonly$ | async)!!\" [menu]=\"menu1\"\r\n                [buttonLabel]=\"'Scan' | bbbTranslate\" [title]=\"'Scan' | bbbTranslate\" type=\"transparent\"\r\n                [menuTitle]=\"'Scan' | bbbTranslate\" (primaryButtonClick)=\"onScan()\">\r\n            </fdp-split-menu-button>\r\n            <fdp-menu #menu1 xPosition=\"after\">\r\n                <fdp-menu-item (itemSelect)=\"onAdvanceScan()\">{{ 'AdvancedScan' | bbbTranslate }}</fdp-menu-item>\r\n            </fdp-menu>\r\n        </ng-container>\r\n    </fd-toolbar>\r\n</ng-template> -->\r\n\r\n<!-- <ng-container *ngIf=\"mediaData$ | async as mediaData\">\r\n    <div *ngIf=\"mediaData.length > 0; else hashed\" dir=\"rtl\" class=\"gallery\" #gallery>\r\n        <div class=\"column small-imgs-box\">\r\n            <div class=\"pics\" (click)=\"onThumbnailClicked(i)\" *ngFor=\"let media of mediaData; let i = index\"\r\n                [class.selected]=\"i === selectedIndex || (!selectedIndex && i === 0)\">\r\n                <img [src]=\"media.thumbnailUrl\" />\r\n            </div>\r\n        </div>\r\n        <div class=\"column big-imgs-box\" [class.fill-width]=\"fillWidth\" [class.fill-all]=\"fillAll\"\r\n            [class.fill-original]=\"fillOriginal\" [ngClass]=\"selectedZoom\">\r\n            <div class=\"pics\" [id]=\"i\" *ngFor=\"let media of mediaData; let i = index\">\r\n                <img imgLazy [imgLazy]=\"media.mediaUrl\" [src]=\"media.mediaUrl\" />\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <ng-template #hashed>\r\n        <div class=\"hatchBackground\" style=\"display: flex; align-items: center; justify-content: center\"></div>\r\n    </ng-template>\r\n</ng-container> -->\r\n\r\n<ng-container *ngTemplateOutlet=\"layoutGridTpl\"></ng-container>\r\n<ng-template #layoutGridTpl let-inDialog=\"inDialog\">\r\n    <fd-layout-grid>\r\n        <div fdLayoutGridRow *ngIf=\"mediaData$ | async as mediaData\">\r\n            <div\r\n                *ngFor=\"let media of mediaData; let i = index\"\r\n                [fdLayoutGridCol]=\"6\"\r\n                [colMd]=\"3\"\r\n                [colLg]=\"2\"\r\n                [colXl]=\"2\"\r\n                (click)=\"onMedaiClick(media, i)\"\r\n            >\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                        cardTpl;\r\n                        context: { $implicit: media, mediaData: this.mediaData, inDialog: this.inDialog, index: i }\r\n                    \"\r\n                ></ng-container>\r\n            </div>\r\n            <div *ngIf=\"!inDialog\" [fdLayoutGridCol]=\"6\" [colMd]=\"3\" [colLg]=\"2\" [colXl]=\"2\">\r\n                <ng-container *ngTemplateOutlet=\"newFile\"></ng-container>\r\n            </div>\r\n        </div>\r\n    </fd-layout-grid>\r\n</ng-template>\r\n<ng-template #cardTpl let-media let-mediaData=\"mediaData\" let-inDialog=\"inDialog\" let-index=\"index\">\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\" />\r\n        </fd-card-content>\r\n        <fd-card-footer *ngIf=\"!inDialog\">\r\n            <button\r\n                glyph=\"message-information\"\r\n                *fdCardFooterActionItem\r\n                fd-button\r\n                fdType=\"transparent\"\r\n                [fd-inline-help]=\"media.title\"\r\n                [triggers]=\"['click']\"\r\n                [closeOnOutsideClick]=\"true\"\r\n            ></button>\r\n            <button\r\n                glyph=\"full-screen\"\r\n                *fdCardFooterActionItem\r\n                fd-button\r\n                fdType=\"transparent\"\r\n                (click)=\"onFullscreen(media, mediaData)\"\r\n            ></button>\r\n            <button\r\n                glyph=\"delete\"\r\n                *fdCardFooterActionItem\r\n                fd-button\r\n                fdType=\"transparent\"\r\n                (click)=\"onDelete(index)\"\r\n            ></button>\r\n        </fd-card-footer>\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        <bsu-mask *ngIf=\"(uploadingState$ | async)?.uploading === true\"></bsu-mask>\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 fdTemplate=\"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                        *ngIf=\"!dialogConfig.fullscreen\"\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                    <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                <div\r\n                    *ngFor=\"let media of dialog.data.mediaData; let i = index\"\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                    <div class=\"pics\" [id]=\"i\">\r\n                        <bsu-mask></bsu-mask>\r\n                        <img imgLazy [imgLazy]=\"media.mediaUrl\" [src]=\"media.mediaUrl\" />\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div *ngIf=\"(deviceSize$ | async) !== 's'\" class=\"thumbnail\" style=\"flex-shrink: 1\">\r\n                <ng-cotainer *ngTemplateOutlet=\"layoutGridTpl; context: { inDialog: true }\"></ng-cotainer>\r\n            </div>\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}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:rgb(85,84,84);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-width img{width:100%!important}.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"] }]
+            args: [{ selector: 'bsu-ui-pictures-info', providers: [UploadService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-file-uploader\n    #uploader\n    [style.display]=\"'none'\"\n    [id]=\"id\"\n    [name]=\"'pictures_' + id\"\n    [placeholder]=\"'AttachPicture' | bbbTranslate\"\n    [buttonLabel]=\"'AttachPicture' | bbbTranslate\"\n    [buttonAriaLabel]=\"'AttachPicture' | bbbTranslate\"\n    accept=\".png,.jpg,.bpm,.jpeg,.gif,.png,.tif\"\n    [fileLimit]=\"maxFileCount === 0 ? 100 : maxFileCount\"\n    [multiple]=\"maxFileCount === 0 || maxFileCount > 1\"\n    (selectedFilesChanged)=\"onFileSelection($event)\"\n></fd-file-uploader>\n<!-- <ng-container *ngTemplateOutlet=\"toolbarTpl\"></ng-container>\n<ng-template #toolbarTpl let-inDialog=\"inDialog\">\n    <fd-toolbar *untilInView=\"el\" [fdType]=\"'transparent'\" [clearBorder]=\"true\" [shouldOverflow]=\"true\">\n        <fdp-button *ngIf=\"!inDialog\"\n            [disabled]=\"!(value | canUploadFile: maxFileCount:(disable$ | async)!!:(readonly$ | async)!!)\"\n            fd-toolbar-item glyph=\"attachment\" buttonType=\"transparent\" (click)=\"uploader.open()\"></fdp-button>\n        <fdp-button [disabled]=\"selectedIndex === -1 || (disableOrReadonly$ | async)!!\" class=\"delete\" fd-toolbar-item\n            glyph=\"delete\" [buttonType]=\"'transparent'\" (click)=\"onDelete()\"></fdp-button>\n        <fdp-button fd-toolbar-item glyph=\"zoom-in\" [buttonType]=\"'transparent'\" (click)=\"onZoomIn()\"></fdp-button>\n        <fdp-button fd-toolbar-item glyph=\"zoom-out\" [buttonType]=\"'transparent'\" (click)=\"onZoomOut()\"></fdp-button>\n        <fdp-button fd-toolbar-item glyph=\"exitfullscreen\" [buttonType]=\"'transparent'\"\n            (click)=\"onFillOriginal()\"></fdp-button>\n        <fdp-button fd-toolbar-item glyph=\"resize-horizontal\" [buttonType]=\"'transparent'\"\n            (click)=\"onFillWidth()\"></fdp-button>\n        <fdp-button fd-toolbar-item glyph=\"resize\" [buttonType]=\"'transparent'\" (click)=\"onFillAll()\"></fdp-button>\n        <ng-container *ngIf=\"!inDialog\">\n            <fdp-split-menu-button fd-toolbar-item [readonly]=\"(readonly$ | async)!!\" [disabled]=\"(readonly$ | async)!!\"\n                *ngIf=\"value | canUploadFile: maxFileCount:(disable$ | async)!!:(readonly$ | async)!!\" [menu]=\"menu1\"\n                [buttonLabel]=\"'Scan' | bbbTranslate\" [title]=\"'Scan' | bbbTranslate\" type=\"transparent\"\n                [menuTitle]=\"'Scan' | bbbTranslate\" (primaryButtonClick)=\"onScan()\">\n            </fdp-split-menu-button>\n            <fdp-menu #menu1 xPosition=\"after\">\n                <fdp-menu-item (itemSelect)=\"onAdvanceScan()\">{{ 'AdvancedScan' | bbbTranslate }}</fdp-menu-item>\n            </fdp-menu>\n        </ng-container>\n    </fd-toolbar>\n</ng-template> -->\n\n<!-- <ng-container *ngIf=\"mediaData$ | async as mediaData\">\n    <div *ngIf=\"mediaData.length > 0; else hashed\" dir=\"rtl\" class=\"gallery\" #gallery>\n        <div class=\"column small-imgs-box\">\n            <div class=\"pics\" (click)=\"onThumbnailClicked(i)\" *ngFor=\"let media of mediaData; let i = index\"\n                [class.selected]=\"i === selectedIndex || (!selectedIndex && i === 0)\">\n                <img [src]=\"media.thumbnailUrl\" />\n            </div>\n        </div>\n        <div class=\"column big-imgs-box\" [class.fill-width]=\"fillWidth\" [class.fill-all]=\"fillAll\"\n            [class.fill-original]=\"fillOriginal\" [ngClass]=\"selectedZoom\">\n            <div class=\"pics\" [id]=\"i\" *ngFor=\"let media of mediaData; let i = index\">\n                <img imgLazy [imgLazy]=\"media.mediaUrl\" [src]=\"media.mediaUrl\" />\n            </div>\n        </div>\n    </div>\n\n    <ng-template #hashed>\n        <div class=\"hatchBackground\" style=\"display: flex; align-items: center; justify-content: center\"></div>\n    </ng-template>\n</ng-container> -->\n\n<ng-container *ngTemplateOutlet=\"layoutGridTpl\"></ng-container>\n<ng-template #layoutGridTpl let-inDialog=\"inDialog\">\n    <fd-layout-grid>\n        <div fdLayoutGridRow *ngIf=\"mediaData$ | async as mediaData\">\n            <div\n                *ngFor=\"let media of mediaData; let i = index\"\n                [fdLayoutGridCol]=\"6\"\n                [colMd]=\"3\"\n                [colLg]=\"2\"\n                [colXl]=\"2\"\n                (click)=\"onMedaiClick(media, i)\"\n            >\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        cardTpl;\n                        context: { $implicit: media, mediaData: this.mediaData, inDialog: this.inDialog, index: i }\n                    \"\n                ></ng-container>\n            </div>\n            <div\n                *ngIf=\"!inDialog && (disableOrReadonly$ | async) === false\"\n                [fdLayoutGridCol]=\"6\"\n                [colMd]=\"3\"\n                [colLg]=\"2\"\n                [colXl]=\"2\"\n            >\n                <ng-container *ngTemplateOutlet=\"newFile\"></ng-container>\n            </div>\n        </div>\n    </fd-layout-grid>\n</ng-template>\n<ng-template #cardTpl let-media let-mediaData=\"mediaData\" let-inDialog=\"inDialog\" let-index=\"index\">\n    <fd-card class=\"media\" [class.inDialog]=\"inDialog\">\n        <fd-card-content style=\"text-align: center; height: 120px\">\n            <img imgLazy [imgLazy]=\"media.thumbnailUrl\" [src]=\"media.thumbnailUrl\" />\n        </fd-card-content>\n        <fd-card-footer *ngIf=\"!inDialog\">\n            <button\n                glyph=\"message-information\"\n                *fdCardFooterActionItem\n                fd-button\n                fdType=\"transparent\"\n                [fd-inline-help]=\"media.title\"\n                [triggers]=\"['click']\"\n                [closeOnOutsideClick]=\"true\"\n            ></button>\n            <button\n                glyph=\"full-screen\"\n                *fdCardFooterActionItem\n                fd-button\n                fdType=\"transparent\"\n                (click)=\"onFullscreen(media, mediaData)\"\n            ></button>\n            <ng-container *ngIf=\"(disableOrReadonly$ | async) === false\">\n                <button\n                    glyph=\"delete\"\n                    *fdCardFooterActionItem\n                    fd-button\n                    fdType=\"transparent\"\n                    (click)=\"onDelete(index)\"\n                ></button>\n            </ng-container>\n        </fd-card-footer>\n    </fd-card>\n</ng-template>\n<ng-template #newFile>\n    <div style=\"position: relative; height: 100%\">\n        <fd-card>\n            <fd-card-content style=\"display: flex; align-items: center; justify-content: center; min-height: 120px\">\n                <button\n                    fd-button\n                    glyph=\"add-photo\"\n                    fdType=\"transparent\"\n                    [label]=\"'AttachFile' | bbbTranslate\"\n                    (click)=\"uploader.open()\"\n                ></button>\n            </fd-card-content>\n\n            <fd-card-footer style=\"border-top: 1px solid #ccc\">\n                <button fd-button [glyph]=\"'overflow'\" [fdType]=\"'transparent'\" [fdMenuTrigger]=\"menu\"></button>\n                <fd-menu #menu>\n                    <li fd-menu-item (click)=\"onScan()\">\n                        <a fd-menu-interactive>\n                            <span fd-menu-title>{{ 'Scan' | bbbTranslate }}</span>\n                        </a>\n                    </li>\n                    <li fd-menu-item (click)=\"onAdvanceScan()\">\n                        <a fd-menu-interactive>\n                            <span fd-menu-title>{{ 'AdvancedScan' | bbbTranslate }}</span>\n                        </a>\n                    </li>\n                </fd-menu>\n            </fd-card-footer>\n        </fd-card>\n        <bsu-mask *ngIf=\"(uploadingState$ | async)?.uploading === true\"></bsu-mask>\n    </div>\n</ng-template>\n<ng-template #dialogTemplate let-dialog let-dialogConfig=\"dialogConfig\">\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\" #dialogTpl class=\"vertical\">\n        <fd-dialog-header>\n            <ng-template fdTemplate=\"header\">\n                <div fd-bar-left>\n                    <fd-bar-element>\n                        <h1 fd-title>{{ Setting.ControlFieldCaptionTranslated }}</h1>\n                    </fd-bar-element>\n                </div>\n                <div fd-bar-right>\n                    <fd-button-bar\n                        *ngIf=\"!dialogConfig.fullscreen\"\n                        ariaLabel=\"Fit image size\"\n                        [glyph]=\"'resize'\"\n                        [fdType]=\"fillWidth ? 'emphasized' : 'transparent'\"\n                        (click)=\"fillWidth = !fillWidth\"\n                    ></fd-button-bar>\n                    <fd-button-bar ariaLabel=\"close\" glyph=\"decline\" (click)=\"dialog.close()\"></fd-button-bar>\n                </div>\n            </ng-template>\n        </fd-dialog-header>\n        <fd-dialog-body #fdbody>\n            <div #gallery class=\"gallery inDialog\" style=\"flex: 1\">\n                <div\n                    *ngFor=\"let media of dialog.data.mediaData; let i = index\"\n                    class=\"column big-imgs-box\"\n                    [class.fill-width]=\"fillWidth\"\n                    [class.fill-all]=\"fillAll\"\n                    [class.fill-original]=\"fillOriginal\"\n                    [ngClass]=\"selectedZoom\"\n                >\n                    <div class=\"pics\" [id]=\"i\">\n                        <bsu-mask></bsu-mask>\n                        <img imgLazy [imgLazy]=\"media.mediaUrl\" [src]=\"media.mediaUrl\" />\n                    </div>\n                </div>\n            </div>\n            <div *ngIf=\"(deviceSize$ | async) !== 's'\" class=\"thumbnail\" style=\"flex-shrink: 1\">\n                <ng-cotainer *ngTemplateOutlet=\"layoutGridTpl; context: { inDialog: true }\"></ng-cotainer>\n            </div>\n        </fd-dialog-body>\n    </fd-dialog>\n</ng-template>\n", styles: [":host{position:relative}:host ::ng-deep .delete button{border-color:transparent!important;background-color:transparent!important}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:rgb(85,84,84);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-width img{width:100%!important}.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"] }]
         }], propDecorators: { value: [{
                 type: Input
             }], gallery: [{
@@ -11623,10 +11623,10 @@ class BarsaCartableGroupComponent extends BaseViewItemPropsComponent {
     }
 }
 BarsaCartableGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: BarsaCartableGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-BarsaCartableGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: BarsaCartableGroupComponent, selector: "bsu-barsa-cartable-group", outputs: { events: "events" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<!-- <li\n    [interactive]=\"true\"\n    fd-list-item\n    [selected]=\"allItemChecked ? true : false\"\n    (click)=\"onRowCheckAll()\"\n    *ngIf=\"allItem\"\n>\n    <div class=\"title-container\">\n        <div style=\"background-color: transparent; width: 0.2rem; height: 100%\"></div>\n        <span fd-list-title>\n            <div style=\"height: 100%; display: flex; align-items: center\">\n                <span [style.fontSize]=\"allItem.unreadCount > 0 ? 'bold' : null\">{{ '\u0647\u0645\u0647 \u0645\u0648\u0627\u0631\u062F' | bbbTranslate }}</span>\n                <ng-container *ngIf=\"allItem.unreadCount > 0\">\n                    <strong style=\"padding: 0 2px; direction: ltr\">({{ allItem.unreadCount }})</strong>\n                </ng-container>\n                <span style=\"padding: 0 5px\" *ngIf=\"allItem.allCount > 0\">{{ allItem.allCount }}</span>\n            </div>\n        </span>\n    </div>\n</li> -->\n\n<ng-container>\n    <ng-container *ngIf=\"allItem\">\n        <ng-container\n            *ngTemplateOutlet=\"\n                itemTemplate;\n                context: {\n                    $implicit: '\u0647\u0645\u0647 \u0645\u0648\u0627\u0631\u062F' | bbbTranslate,\n                    unreadCount: allItem.unreadCount,\n                    allCount: allItem.allCount,\n                    backColor: 'transparent',\n                    isAll: true,\n                    isChecked: allItemChecked\n                }\n            \"\n        ></ng-container>\n    </ng-container>\n\n    <ng-container\n        *ngTemplateOutlet=\"\n            itemTemplate;\n            context: {\n                $implicit: parameters.CartableGroupField | rval: mo:allColumns:true,\n                unreadCount: parameters.UnreadCountField | rval: mo:allColumns,\n                allCount: parameters.AllCountField | rval: mo:allColumns,\n                backColor: isBuiltin ? 'transparent' : (columns[0].Caption | rval: mo:columns),\n                isChecked: isChecked,\n                icon: parameters.IconField | rval: mo:allColumns:true,\n                isBuiltin: isBuiltin\n            }\n        \"\n    ></ng-container>\n</ng-container>\n<ng-container *ngIf=\"isLastBuiltin\">\n    <li fd-list-item class=\"space\">\n        <span fd-list-title></span>\n    </li>\n</ng-container>\n<!-- <ng-container *ngIf=\"last\">\n    <ul fd-list>\n        <li fd-list-group-header>\n            <span fd-list-title style=\"background:#f7f7f7\"></span>\n        </li>\n        <ng-container *ngFor=\"let mo2 of moDataList\">\n            <ng-container *ngIf=\"'\u0633\u06CC\u0633\u062A\u0645\u06CC' | rval: mo2:allColumns\">\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        itemTemplate;\n                        context: {\n                            $implicit: parameters.CartableGroupField | rval: mo2:allColumns:true,\n                            unreadCount: parameters.UnreadCountField | rval: mo2:allColumns,\n                            allCount: parameters.AllCountField | rval: mo2:allColumns,\n                            backColor: columns[0].Caption | rval: mo2:columns,\n                            isChecked: isChecked\n                        }\n                    \"\n                ></ng-container>\n            </ng-container>\n        </ng-container>\n    </ul>\n</ng-container> -->\n\n<!-- <li fd-list-item [selected]=\"isChecked ? true : false\" (click)=\"onRowCheck()\" [interactive]=\"true\">\n    <div class=\"title-container\">\n        <div [style.backgroundColor]=\"columns[0].Caption | rval: mo:columns\" style=\"width: 0.2rem; height: 100%\"></div>\n        <span fd-list-title>\n            <div style=\"height: 100%; display: flex; align-items: center\">\n                <span [style.fontSize]=\"parameters.UnreadCountField | rval: mo:allColumns:(true ? 'bold' : null)\"\n                    >{{ parameters.CartableGroupField | rval: mo:allColumns:true }}\n                </span>\n                <ng-container *ngIf=\"parameters.UnreadCountField | rval: mo:allColumns:true\">\n                    <strong style=\"padding: 0 2px; direction: ltr\"\n                        >({{ parameters.UnreadCountField | rval: mo:allColumns:true }})</strong\n                    >\n                </ng-container>\n                <span style=\"padding: 0 5px\">{{ parameters.AllCountField | rval: mo:allColumns:true }}</span>\n            </div>\n        </span>\n    </div>\n</li> -->\n<ng-template\n    #itemTemplate\n    let-caption\n    let-unreadCount=\"unreadCount\"\n    let-allCount=\"allCount\"\n    let-backColor=\"backColor\"\n    let-isAll=\"isAll\"\n    let-isChecked=\"isChecked\"\n    let-icon=\"icon\"\n    let-isBuiltin=\"isBuiltin\"\n>\n    <li\n        *ngIf=\"isBuiltin || allCount > 0 || isAll\"\n        fd-list-item\n        [selected]=\"isChecked ? true : false\"\n        (click)=\"onClick(isAll)\"\n        [interactive]=\"true\"\n    >\n        <div class=\"title-container\">\n            <div [style.backgroundColor]=\"backColor\" style=\"width: 0.2rem; height: 100%\"></div>\n            <i *ngIf=\"icon\" fd-list-icon [glyph]=\"icon\"></i>\n            <span fd-list-title>\n                <div style=\"height: 100%; display: flex; align-items: center; column-gap: 5px\">\n                    <ng-container *ngIf=\"unreadCount && unreadCount > 0; else spanTemplate\">\n                        <strong>{{ caption }}</strong>\n                        <strong style=\"padding: 0 2px; direction: ltr\">({{ unreadCount }})</strong>\n                    </ng-container>\n                    <ng-template #spanTemplate>\n                        <span>{{ caption }}</span>\n                    </ng-template>\n                    <span style=\"padding: 0 5px\" *ngIf=\"allCount && allCount > 0\">{{ allCount }}</span>\n                </div>\n            </span>\n        </div>\n    </li>\n</ng-template>\n", styles: [":host{display:contents;width:100%;height:100%;cursor:pointer}.title-container{align-items:center;display:flex;column-gap:10px;height:100%;width:100%}li{padding:0}.space{cursor:default;pointer-events:none}.space:focus:before{border:none}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i6$1.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], outputs: ["keyDown"] }, { kind: "directive", type: i6$1.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i6$1.ListIconDirective, selector: "[fdListIcon], [fd-list-icon]", inputs: ["glyph", "class", "role"] }, { kind: "pipe", type: i2.MoReportValuePipe, name: "rval" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+BarsaCartableGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: BarsaCartableGroupComponent, selector: "bsu-barsa-cartable-group", outputs: { events: "events" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<!-- <li\n    [interactive]=\"true\"\n    fd-list-item\n    [selected]=\"allItemChecked ? true : false\"\n    (click)=\"onRowCheckAll()\"\n    *ngIf=\"allItem\"\n>\n    <div class=\"title-container\">\n        <div style=\"background-color: transparent; width: 0.2rem; height: 100%\"></div>\n        <span fd-list-title>\n            <div style=\"height: 100%; display: flex; align-items: center\">\n                <span [style.fontSize]=\"allItem.unreadCount > 0 ? 'bold' : null\">{{ '\u0647\u0645\u0647 \u0645\u0648\u0627\u0631\u062F' | bbbTranslate }}</span>\n                <ng-container *ngIf=\"allItem.unreadCount > 0\">\n                    <strong style=\"padding: 0 2px; direction: ltr\">({{ allItem.unreadCount }})</strong>\n                </ng-container>\n                <span style=\"padding: 0 5px\" *ngIf=\"allItem.allCount > 0\">{{ allItem.allCount }}</span>\n            </div>\n        </span>\n    </div>\n</li> -->\n\n<ng-container>\n    <ng-container *ngIf=\"allItem\">\n        <ng-container\n            *ngTemplateOutlet=\"\n                itemTemplate;\n                context: {\n                    $implicit: '\u0647\u0645\u0647 \u0645\u0648\u0627\u0631\u062F' | bbbTranslate,\n                    unreadCount: allItem.unreadCount,\n                    allCount: allItem.allCount,\n                    backColor: 'transparent',\n                    isAll: true,\n                    isChecked: allItemChecked\n                }\n            \"\n        ></ng-container>\n    </ng-container>\n\n    <ng-container\n        *ngTemplateOutlet=\"\n            itemTemplate;\n            context: {\n                $implicit: parameters.CartableGroupField | rval: mo:allColumns:true,\n                unreadCount: parameters.UnreadCountField | rval: mo:allColumns,\n                allCount: parameters.AllCountField | rval: mo:allColumns,\n                backColor: (columns[0].Caption | rval: mo:columns),\n                isChecked: isChecked,\n                icon: parameters.IconField | rval: mo:allColumns:true,\n                isBuiltin: isBuiltin\n            }\n        \"\n    ></ng-container>\n</ng-container>\n<ng-container *ngIf=\"isLastBuiltin\">\n    <li fd-list-item class=\"space\">\n        <span fd-list-title></span>\n    </li>\n</ng-container>\n<!-- <ng-container *ngIf=\"last\">\n    <ul fd-list>\n        <li fd-list-group-header>\n            <span fd-list-title style=\"background:#f7f7f7\"></span>\n        </li>\n        <ng-container *ngFor=\"let mo2 of moDataList\">\n            <ng-container *ngIf=\"'\u0633\u06CC\u0633\u062A\u0645\u06CC' | rval: mo2:allColumns\">\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        itemTemplate;\n                        context: {\n                            $implicit: parameters.CartableGroupField | rval: mo2:allColumns:true,\n                            unreadCount: parameters.UnreadCountField | rval: mo2:allColumns,\n                            allCount: parameters.AllCountField | rval: mo2:allColumns,\n                            backColor: columns[0].Caption | rval: mo2:columns,\n                            isChecked: isChecked\n                        }\n                    \"\n                ></ng-container>\n            </ng-container>\n        </ng-container>\n    </ul>\n</ng-container> -->\n\n<!-- <li fd-list-item [selected]=\"isChecked ? true : false\" (click)=\"onRowCheck()\" [interactive]=\"true\">\n    <div class=\"title-container\">\n        <div [style.backgroundColor]=\"columns[0].Caption | rval: mo:columns\" style=\"width: 0.2rem; height: 100%\"></div>\n        <span fd-list-title>\n            <div style=\"height: 100%; display: flex; align-items: center\">\n                <span [style.fontSize]=\"parameters.UnreadCountField | rval: mo:allColumns:(true ? 'bold' : null)\"\n                    >{{ parameters.CartableGroupField | rval: mo:allColumns:true }}\n                </span>\n                <ng-container *ngIf=\"parameters.UnreadCountField | rval: mo:allColumns:true\">\n                    <strong style=\"padding: 0 2px; direction: ltr\"\n                        >({{ parameters.UnreadCountField | rval: mo:allColumns:true }})</strong\n                    >\n                </ng-container>\n                <span style=\"padding: 0 5px\">{{ parameters.AllCountField | rval: mo:allColumns:true }}</span>\n            </div>\n        </span>\n    </div>\n</li> -->\n<ng-template\n    #itemTemplate\n    let-caption\n    let-unreadCount=\"unreadCount\"\n    let-allCount=\"allCount\"\n    let-backColor=\"backColor\"\n    let-isAll=\"isAll\"\n    let-isChecked=\"isChecked\"\n    let-icon=\"icon\"\n    let-isBuiltin=\"isBuiltin\"\n>\n    <li\n        *ngIf=\"isBuiltin || allCount > 0 || isAll\"\n        fd-list-item\n        [selected]=\"isChecked ? true : false\"\n        (click)=\"onClick(isAll)\"\n        [interactive]=\"true\"\n    >\n        <div class=\"title-container\">\n            <div [style.backgroundColor]=\"backColor\" style=\"width: 0.2rem; height: 100%\"></div>\n            <i *ngIf=\"icon\" fd-list-icon [glyph]=\"icon\"></i>\n            <span fd-list-title>\n                <div style=\"height: 100%; display: flex; align-items: center; column-gap: 5px\">\n                    <ng-container *ngIf=\"unreadCount && unreadCount > 0; else spanTemplate\">\n                        <strong>{{ caption }}</strong>\n                        <strong style=\"padding: 0 2px; direction: ltr\">({{ unreadCount }})</strong>\n                    </ng-container>\n                    <ng-template #spanTemplate>\n                        <span>{{ caption }}</span>\n                    </ng-template>\n                    <span style=\"padding: 0 5px\" *ngIf=\"allCount && allCount > 0\">{{ allCount }}</span>\n                </div>\n            </span>\n        </div>\n    </li>\n</ng-template>\n", styles: [":host{display:contents;width:100%;height:100%;cursor:pointer}.title-container{align-items:center;display:flex;column-gap:10px;height:100%;width:100%}li{padding:0}.space{cursor:default;pointer-events:none}.space:focus:before{border:none}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i6$1.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], outputs: ["keyDown"] }, { kind: "directive", type: i6$1.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i6$1.ListIconDirective, selector: "[fdListIcon], [fd-list-icon]", inputs: ["glyph", "class", "role"] }, { kind: "pipe", type: i2.MoReportValuePipe, name: "rval" }, { kind: "pipe", type: i2.BbbTranslatePipe, name: "bbbTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: BarsaCartableGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bsu-barsa-cartable-group', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- <li\n    [interactive]=\"true\"\n    fd-list-item\n    [selected]=\"allItemChecked ? true : false\"\n    (click)=\"onRowCheckAll()\"\n    *ngIf=\"allItem\"\n>\n    <div class=\"title-container\">\n        <div style=\"background-color: transparent; width: 0.2rem; height: 100%\"></div>\n        <span fd-list-title>\n            <div style=\"height: 100%; display: flex; align-items: center\">\n                <span [style.fontSize]=\"allItem.unreadCount > 0 ? 'bold' : null\">{{ '\u0647\u0645\u0647 \u0645\u0648\u0627\u0631\u062F' | bbbTranslate }}</span>\n                <ng-container *ngIf=\"allItem.unreadCount > 0\">\n                    <strong style=\"padding: 0 2px; direction: ltr\">({{ allItem.unreadCount }})</strong>\n                </ng-container>\n                <span style=\"padding: 0 5px\" *ngIf=\"allItem.allCount > 0\">{{ allItem.allCount }}</span>\n            </div>\n        </span>\n    </div>\n</li> -->\n\n<ng-container>\n    <ng-container *ngIf=\"allItem\">\n        <ng-container\n            *ngTemplateOutlet=\"\n                itemTemplate;\n                context: {\n                    $implicit: '\u0647\u0645\u0647 \u0645\u0648\u0627\u0631\u062F' | bbbTranslate,\n                    unreadCount: allItem.unreadCount,\n                    allCount: allItem.allCount,\n                    backColor: 'transparent',\n                    isAll: true,\n                    isChecked: allItemChecked\n                }\n            \"\n        ></ng-container>\n    </ng-container>\n\n    <ng-container\n        *ngTemplateOutlet=\"\n            itemTemplate;\n            context: {\n                $implicit: parameters.CartableGroupField | rval: mo:allColumns:true,\n                unreadCount: parameters.UnreadCountField | rval: mo:allColumns,\n                allCount: parameters.AllCountField | rval: mo:allColumns,\n                backColor: isBuiltin ? 'transparent' : (columns[0].Caption | rval: mo:columns),\n                isChecked: isChecked,\n                icon: parameters.IconField | rval: mo:allColumns:true,\n                isBuiltin: isBuiltin\n            }\n        \"\n    ></ng-container>\n</ng-container>\n<ng-container *ngIf=\"isLastBuiltin\">\n    <li fd-list-item class=\"space\">\n        <span fd-list-title></span>\n    </li>\n</ng-container>\n<!-- <ng-container *ngIf=\"last\">\n    <ul fd-list>\n        <li fd-list-group-header>\n            <span fd-list-title style=\"background:#f7f7f7\"></span>\n        </li>\n        <ng-container *ngFor=\"let mo2 of moDataList\">\n            <ng-container *ngIf=\"'\u0633\u06CC\u0633\u062A\u0645\u06CC' | rval: mo2:allColumns\">\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        itemTemplate;\n                        context: {\n                            $implicit: parameters.CartableGroupField | rval: mo2:allColumns:true,\n                            unreadCount: parameters.UnreadCountField | rval: mo2:allColumns,\n                            allCount: parameters.AllCountField | rval: mo2:allColumns,\n                            backColor: columns[0].Caption | rval: mo2:columns,\n                            isChecked: isChecked\n                        }\n                    \"\n                ></ng-container>\n            </ng-container>\n        </ng-container>\n    </ul>\n</ng-container> -->\n\n<!-- <li fd-list-item [selected]=\"isChecked ? true : false\" (click)=\"onRowCheck()\" [interactive]=\"true\">\n    <div class=\"title-container\">\n        <div [style.backgroundColor]=\"columns[0].Caption | rval: mo:columns\" style=\"width: 0.2rem; height: 100%\"></div>\n        <span fd-list-title>\n            <div style=\"height: 100%; display: flex; align-items: center\">\n                <span [style.fontSize]=\"parameters.UnreadCountField | rval: mo:allColumns:(true ? 'bold' : null)\"\n                    >{{ parameters.CartableGroupField | rval: mo:allColumns:true }}\n                </span>\n                <ng-container *ngIf=\"parameters.UnreadCountField | rval: mo:allColumns:true\">\n                    <strong style=\"padding: 0 2px; direction: ltr\"\n                        >({{ parameters.UnreadCountField | rval: mo:allColumns:true }})</strong\n                    >\n                </ng-container>\n                <span style=\"padding: 0 5px\">{{ parameters.AllCountField | rval: mo:allColumns:true }}</span>\n            </div>\n        </span>\n    </div>\n</li> -->\n<ng-template\n    #itemTemplate\n    let-caption\n    let-unreadCount=\"unreadCount\"\n    let-allCount=\"allCount\"\n    let-backColor=\"backColor\"\n    let-isAll=\"isAll\"\n    let-isChecked=\"isChecked\"\n    let-icon=\"icon\"\n    let-isBuiltin=\"isBuiltin\"\n>\n    <li\n        *ngIf=\"isBuiltin || allCount > 0 || isAll\"\n        fd-list-item\n        [selected]=\"isChecked ? true : false\"\n        (click)=\"onClick(isAll)\"\n        [interactive]=\"true\"\n    >\n        <div class=\"title-container\">\n            <div [style.backgroundColor]=\"backColor\" style=\"width: 0.2rem; height: 100%\"></div>\n            <i *ngIf=\"icon\" fd-list-icon [glyph]=\"icon\"></i>\n            <span fd-list-title>\n                <div style=\"height: 100%; display: flex; align-items: center; column-gap: 5px\">\n                    <ng-container *ngIf=\"unreadCount && unreadCount > 0; else spanTemplate\">\n                        <strong>{{ caption }}</strong>\n                        <strong style=\"padding: 0 2px; direction: ltr\">({{ unreadCount }})</strong>\n                    </ng-container>\n                    <ng-template #spanTemplate>\n                        <span>{{ caption }}</span>\n                    </ng-template>\n                    <span style=\"padding: 0 5px\" *ngIf=\"allCount && allCount > 0\">{{ allCount }}</span>\n                </div>\n            </span>\n        </div>\n    </li>\n</ng-template>\n", styles: [":host{display:contents;width:100%;height:100%;cursor:pointer}.title-container{align-items:center;display:flex;column-gap:10px;height:100%;width:100%}li{padding:0}.space{cursor:default;pointer-events:none}.space:focus:before{border:none}\n"] }]
+            args: [{ selector: 'bsu-barsa-cartable-group', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- <li\n    [interactive]=\"true\"\n    fd-list-item\n    [selected]=\"allItemChecked ? true : false\"\n    (click)=\"onRowCheckAll()\"\n    *ngIf=\"allItem\"\n>\n    <div class=\"title-container\">\n        <div style=\"background-color: transparent; width: 0.2rem; height: 100%\"></div>\n        <span fd-list-title>\n            <div style=\"height: 100%; display: flex; align-items: center\">\n                <span [style.fontSize]=\"allItem.unreadCount > 0 ? 'bold' : null\">{{ '\u0647\u0645\u0647 \u0645\u0648\u0627\u0631\u062F' | bbbTranslate }}</span>\n                <ng-container *ngIf=\"allItem.unreadCount > 0\">\n                    <strong style=\"padding: 0 2px; direction: ltr\">({{ allItem.unreadCount }})</strong>\n                </ng-container>\n                <span style=\"padding: 0 5px\" *ngIf=\"allItem.allCount > 0\">{{ allItem.allCount }}</span>\n            </div>\n        </span>\n    </div>\n</li> -->\n\n<ng-container>\n    <ng-container *ngIf=\"allItem\">\n        <ng-container\n            *ngTemplateOutlet=\"\n                itemTemplate;\n                context: {\n                    $implicit: '\u0647\u0645\u0647 \u0645\u0648\u0627\u0631\u062F' | bbbTranslate,\n                    unreadCount: allItem.unreadCount,\n                    allCount: allItem.allCount,\n                    backColor: 'transparent',\n                    isAll: true,\n                    isChecked: allItemChecked\n                }\n            \"\n        ></ng-container>\n    </ng-container>\n\n    <ng-container\n        *ngTemplateOutlet=\"\n            itemTemplate;\n            context: {\n                $implicit: parameters.CartableGroupField | rval: mo:allColumns:true,\n                unreadCount: parameters.UnreadCountField | rval: mo:allColumns,\n                allCount: parameters.AllCountField | rval: mo:allColumns,\n                backColor: (columns[0].Caption | rval: mo:columns),\n                isChecked: isChecked,\n                icon: parameters.IconField | rval: mo:allColumns:true,\n                isBuiltin: isBuiltin\n            }\n        \"\n    ></ng-container>\n</ng-container>\n<ng-container *ngIf=\"isLastBuiltin\">\n    <li fd-list-item class=\"space\">\n        <span fd-list-title></span>\n    </li>\n</ng-container>\n<!-- <ng-container *ngIf=\"last\">\n    <ul fd-list>\n        <li fd-list-group-header>\n            <span fd-list-title style=\"background:#f7f7f7\"></span>\n        </li>\n        <ng-container *ngFor=\"let mo2 of moDataList\">\n            <ng-container *ngIf=\"'\u0633\u06CC\u0633\u062A\u0645\u06CC' | rval: mo2:allColumns\">\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        itemTemplate;\n                        context: {\n                            $implicit: parameters.CartableGroupField | rval: mo2:allColumns:true,\n                            unreadCount: parameters.UnreadCountField | rval: mo2:allColumns,\n                            allCount: parameters.AllCountField | rval: mo2:allColumns,\n                            backColor: columns[0].Caption | rval: mo2:columns,\n                            isChecked: isChecked\n                        }\n                    \"\n                ></ng-container>\n            </ng-container>\n        </ng-container>\n    </ul>\n</ng-container> -->\n\n<!-- <li fd-list-item [selected]=\"isChecked ? true : false\" (click)=\"onRowCheck()\" [interactive]=\"true\">\n    <div class=\"title-container\">\n        <div [style.backgroundColor]=\"columns[0].Caption | rval: mo:columns\" style=\"width: 0.2rem; height: 100%\"></div>\n        <span fd-list-title>\n            <div style=\"height: 100%; display: flex; align-items: center\">\n                <span [style.fontSize]=\"parameters.UnreadCountField | rval: mo:allColumns:(true ? 'bold' : null)\"\n                    >{{ parameters.CartableGroupField | rval: mo:allColumns:true }}\n                </span>\n                <ng-container *ngIf=\"parameters.UnreadCountField | rval: mo:allColumns:true\">\n                    <strong style=\"padding: 0 2px; direction: ltr\"\n                        >({{ parameters.UnreadCountField | rval: mo:allColumns:true }})</strong\n                    >\n                </ng-container>\n                <span style=\"padding: 0 5px\">{{ parameters.AllCountField | rval: mo:allColumns:true }}</span>\n            </div>\n        </span>\n    </div>\n</li> -->\n<ng-template\n    #itemTemplate\n    let-caption\n    let-unreadCount=\"unreadCount\"\n    let-allCount=\"allCount\"\n    let-backColor=\"backColor\"\n    let-isAll=\"isAll\"\n    let-isChecked=\"isChecked\"\n    let-icon=\"icon\"\n    let-isBuiltin=\"isBuiltin\"\n>\n    <li\n        *ngIf=\"isBuiltin || allCount > 0 || isAll\"\n        fd-list-item\n        [selected]=\"isChecked ? true : false\"\n        (click)=\"onClick(isAll)\"\n        [interactive]=\"true\"\n    >\n        <div class=\"title-container\">\n            <div [style.backgroundColor]=\"backColor\" style=\"width: 0.2rem; height: 100%\"></div>\n            <i *ngIf=\"icon\" fd-list-icon [glyph]=\"icon\"></i>\n            <span fd-list-title>\n                <div style=\"height: 100%; display: flex; align-items: center; column-gap: 5px\">\n                    <ng-container *ngIf=\"unreadCount && unreadCount > 0; else spanTemplate\">\n                        <strong>{{ caption }}</strong>\n                        <strong style=\"padding: 0 2px; direction: ltr\">({{ unreadCount }})</strong>\n                    </ng-container>\n                    <ng-template #spanTemplate>\n                        <span>{{ caption }}</span>\n                    </ng-template>\n                    <span style=\"padding: 0 5px\" *ngIf=\"allCount && allCount > 0\">{{ allCount }}</span>\n                </div>\n            </span>\n        </div>\n    </li>\n</ng-template>\n", styles: [":host{display:contents;width:100%;height:100%;cursor:pointer}.title-container{align-items:center;display:flex;column-gap:10px;height:100%;width:100%}li{padding:0}.space{cursor:default;pointer-events:none}.space:focus:before{border:none}\n"] }]
         }], propDecorators: { events: [{
                 type: Output
             }] } });