@hmcts/media-viewer 2.7.23 → 2.7.24

package/assets/sass/outline-attachment.scss

@@ -32,7 +32,7 @@ html[dir='rtl'] .outlineItem > .outlineItems {
 .attachmentsItem > button {
   text-decoration: none;
   display:inline-block;
-  width: calc(100% - 50px); /* Subtract the right padding (left, in RTL mode)
+  width: calc(100% - 1.5em); /* Subtract the right padding (left, in RTL mode)
                               of the container. */
   height: auto;
   margin-bottom: 1px;
@@ -47,6 +47,11 @@ html[dir='rtl'] .outlineItem > .outlineItems {
   white-space: normal;
 }
 
+.highlightedOutlineItem {
+  background-color: white;
+  color: rgba(0, 0, 0, 0.8);
+}
+
 .attachmentsItem > button {
   border: 0 none;
   background: none;

package/bundles/hmcts-media-viewer.umd.js

@@ -302,10 +302,10 @@
          */
             function (documentUrl) {
                 return __awaiter(this, void 0, void 0, function () {
-                    var loadingTask, pdfDocument, _a, pdfMetaData, e_1;
+                    var loadingTask, pdfDocument, outline, pdfMetaData, e_1;
                     var _this = this;
-                    return __generator(this, function (_b) {
-                        switch (_b.label) {
+                    return __generator(this, function (_a) {
+                        switch (_a.label) {
                             case 0:
                                 loadingTask = pdfjsLib.getDocument({
                                     url: documentUrl,
@@ -321,31 +321,143 @@
                                     _this.documentLoadProgress.next({ loaded: loaded, total: total });
                                 });
                                 this.documentLoadInit.next(documentUrl);
-                                _b.label = 1;
+                                _a.label = 1;
                             case 1:
-                                _b.trys.push([1, 5, , 6]);
+                                _a.trys.push([1, 6, , 7]);
                                 return [4 /*yield*/, loadingTask.promise];
                             case 2:
-                                pdfDocument = _b.sent();
+                                pdfDocument = _a.sent();
                                 this.documentLoaded.next(pdfDocument);
                                 this.toolbarEvents.pageCountSubject.next(pdfDocument.numPages);
                                 this.pdfViewer.setDocument(pdfDocument);
                                 this.pdfViewer.linkService.setDocument(pdfDocument, null);
-                                _a = this;
                                 return [4 /*yield*/, pdfDocument.getOutline()];
                             case 3:
-                                _a.documentOutline = _b.sent();
+                                outline = _a.sent();
+                                return [4 /*yield*/, this.setOutlinePageNumbers(pdfDocument, outline)];
+                            case 4:
+                                _a.sent();
+                                this.documentOutline = outline;
                                 this.outlineLoaded.next(this.documentOutline);
                                 return [4 /*yield*/, pdfDocument.getMetadata()];
-                            case 4:
-                                pdfMetaData = _b.sent();
-                                this.setCurrentPDFTitle(pdfMetaData.info.Title);
-                                return [3 /*break*/, 6];
                             case 5:
-                                e_1 = _b.sent();
+                                pdfMetaData = _a.sent();
+                                this.setCurrentPDFTitle(pdfMetaData.info.Title);
+                                return [3 /*break*/, 7];
+                            case 6:
+                                e_1 = _a.sent();
                                 this.documentLoadFailed.next(e_1);
-                                return [3 /*break*/, 6];
-                            case 6: return [2 /*return*/];
+                                return [3 /*break*/, 7];
+                            case 7: return [2 /*return*/];
+                        }
+                    });
+                });
+            };
+        /**
+         * @private
+         * @param {?} pdfDocument
+         * @param {?} outlineArray
+         * @return {?}
+         */
+        PdfJsWrapper.prototype.setOutlinePageNumbers = /**
+         * @private
+         * @param {?} pdfDocument
+         * @param {?} outlineArray
+         * @return {?}
+         */
+            function (pdfDocument, outlineArray) {
+                return __awaiter(this, void 0, void 0, function () {
+                    var _this = this;
+                    return __generator(this, function (_a) {
+                        outlineArray.forEach(( /**
+                         * @param {?} outline
+                         * @return {?}
+                         */function (outline) {
+                            return __awaiter(_this, void 0, void 0, function () {
+                                return __generator(this, function (_a) {
+                                    switch (_a.label) {
+                                        case 0: return [4 /*yield*/, this.setNestedOutlinePageNumbers(pdfDocument, outline)];
+                                        case 1:
+                                            _a.sent();
+                                            return [2 /*return*/];
+                                    }
+                                });
+                            });
+                        }));
+                        return [2 /*return*/];
+                    });
+                });
+            };
+        /**
+         * @private
+         * @param {?} pdfDocument
+         * @param {?} outline
+         * @return {?}
+         */
+        PdfJsWrapper.prototype.setNestedOutlinePageNumbers = /**
+         * @private
+         * @param {?} pdfDocument
+         * @param {?} outline
+         * @return {?}
+         */
+            function (pdfDocument, outline) {
+                return __awaiter(this, void 0, void 0, function () {
+                    var _a;
+                    var _this = this;
+                    return __generator(this, function (_b) {
+                        switch (_b.label) {
+                            case 0:
+                                _a = outline;
+                                return [4 /*yield*/, this.getOutlinePageNumber(pdfDocument, outline)];
+                            case 1:
+                                _a.pageNumber = _b.sent();
+                                outline.items.forEach(( /**
+                                 * @param {?} outlineItem
+                                 * @return {?}
+                                 */function (outlineItem) {
+                                    return __awaiter(_this, void 0, void 0, function () {
+                                        var _a;
+                                        return __generator(this, function (_b) {
+                                            switch (_b.label) {
+                                                case 0:
+                                                    _a = outlineItem;
+                                                    return [4 /*yield*/, this.getOutlinePageNumber(pdfDocument, outlineItem)];
+                                                case 1:
+                                                    _a.pageNumber = _b.sent();
+                                                    this.setNestedOutlinePageNumbers(pdfDocument, outlineItem);
+                                                    return [2 /*return*/];
+                                            }
+                                        });
+                                    });
+                                }));
+                                return [2 /*return*/];
+                        }
+                    });
+                });
+            };
+        /**
+         * @private
+         * @param {?} pdfDocument
+         * @param {?} outline
+         * @return {?}
+         */
+        PdfJsWrapper.prototype.getOutlinePageNumber = /**
+         * @private
+         * @param {?} pdfDocument
+         * @param {?} outline
+         * @return {?}
+         */
+            function (pdfDocument, outline) {
+                return __awaiter(this, void 0, void 0, function () {
+                    var dest, pageIndex;
+                    return __generator(this, function (_a) {
+                        switch (_a.label) {
+                            case 0:
+                                dest = outline.dest;
+                                return [4 /*yield*/, pdfDocument.getPageIndex(dest[0])];
+                            case 1:
+                                pageIndex = _a.sent();
+                                return [2 /*return*/, Number(pageIndex) + 1];
                         }
                     });
                 });
@@ -4318,10 +4430,19 @@
             function (destination) {
                 this.pdfWrapper.navigateTo(destination);
             };
+        /**
+         * @return {?}
+         */
+        PdfViewerComponent.prototype.getCurrentPageNumber = /**
+         * @return {?}
+         */
+            function () {
+                return this.pdfWrapper.getPageNumber();
+            };
         PdfViewerComponent.decorators = [
             { type: i0.Component, args: [{
                         selector: 'mv-pdf-viewer',
-                        template: "<mv-side-bar *ngIf=\"toolbarEvents.sidebarOpen\"\n             id=\"sidebarContainer\"\n             [url]=\"url\"\n             [zoom]=\"zoom\"\n             [rotate]=\"rotation\"\n             [outline]=\"documentOutline\"\n             [annotationsEnabled]=\"enableAnnotations\">\n</mv-side-bar>\n<mv-comment-set-header\n  *ngIf=\"enableAnnotations\"\n  [ngClass]=\"{'show-comments-panel': showCommentsPanel}\"\n  [showCommentSummary]=\"toolbarButtons.showCommentSummary\"\n  (showCommentSummaryDialog)=\"toggleCommentsSummary()\">\n</mv-comment-set-header>\n<mv-participants-list></mv-participants-list>\n<div\n     class=\"pdfContainer\"\n     [ngStyle]=\"{ height: height }\"\n     [ngClass]=\"{ 'pdfContainer': true, hidden: errorMessage }\">\n  <div\n    #viewerContainer\n    mvGrabNDrag\n    [dragX]=\"viewerContainer\"\n    [dragEnabled]=\"enableGrabNDrag\"\n    id=\"viewerContainer\"\n    class=\"viewer-container\"\n    [class.annotations]=\"enableAnnotations\"\n    [class.show-comments-panel]=\"(showCommentsPanel || showIcpParticipantsList) && !(toolbarEvents.redactionMode | async)\"\n    [class.grabNDrag]=\"enableGrabNDrag\">\n    <div #pdfViewer\n         class=\"pdfViewer\"\n         mvCreateTextHighlight\n         [ngClass]=\"{ hidden: loadingDocument, highlightMode: highlightMode | async, drawMode: drawMode | async }\">\n    </div>\n    <mv-redactions *ngIf=\"(toolbarEvents.redactionMode | async); else annotationTemplate\"\n                   [zoom]=\"zoom\"\n                   [rotate]=\"rotation\"\n    ></mv-redactions>\n    <ng-template #annotationTemplate>\n      <mv-metadata-layer\n        *ngIf=\"enableAnnotations && annotationSet\"\n        [zoom]=\"zoom\"\n        [rotate]=\"rotation\">\n      </mv-metadata-layer>\n      <mv-bookmark-icons [zoom]=\"zoom\"\n                         [rotate]=\"rotation\">\n      </mv-bookmark-icons>\n    </ng-template>\n  </div>\n  <mv-comment-set [contentScrollTop]=\"viewerContainer.scrollTop\"\n                  *ngIf=\"enableAnnotations && annotationSet && !(toolbarEvents.redactionMode | async)\"\n                  [annotationSet]=\"annotationSet\"\n                  [zoom]=\"zoom\"\n                  [rotate]=\"rotation\"\n                  [height]=\"pdfViewer.offsetHeight\"\n                  [pageHeights]=\"pageHeights\">\n  </mv-comment-set>\n  <div class=\"loadingMessage\" *ngIf=\"loadingDocument\">\n    <h3 class=\"govuk-heading-m\">Loading...{{ loadingDocumentProgress ? loadingDocumentProgress + '%' : '' }}</h3>\n  </div>\n</div>\n",
+                        template: "<mv-side-bar *ngIf=\"toolbarEvents.sidebarOpen\"\n             id=\"sidebarContainer\"\n             [url]=\"url\"\n             [zoom]=\"zoom\"\n             [rotate]=\"rotation\"\n             [outline]=\"documentOutline\"\n             [annotationsEnabled]=\"enableAnnotations\"\n             [currentPageNumber]=\"getCurrentPageNumber()\">\n</mv-side-bar>\n<mv-comment-set-header\n  *ngIf=\"enableAnnotations\"\n  [ngClass]=\"{'show-comments-panel': showCommentsPanel}\"\n  [showCommentSummary]=\"toolbarButtons.showCommentSummary\"\n  (showCommentSummaryDialog)=\"toggleCommentsSummary()\">\n</mv-comment-set-header>\n<mv-participants-list></mv-participants-list>\n<div\n     class=\"pdfContainer\"\n     [ngStyle]=\"{ height: height }\"\n     [ngClass]=\"{ 'pdfContainer': true, hidden: errorMessage }\">\n  <div\n    #viewerContainer\n    mvGrabNDrag\n    [dragX]=\"viewerContainer\"\n    [dragEnabled]=\"enableGrabNDrag\"\n    id=\"viewerContainer\"\n    class=\"viewer-container\"\n    [class.annotations]=\"enableAnnotations\"\n    [class.show-comments-panel]=\"(showCommentsPanel || showIcpParticipantsList) && !(toolbarEvents.redactionMode | async)\"\n    [class.grabNDrag]=\"enableGrabNDrag\">\n    <div #pdfViewer\n         class=\"pdfViewer\"\n         mvCreateTextHighlight\n         [ngClass]=\"{ hidden: loadingDocument, highlightMode: highlightMode | async, drawMode: drawMode | async }\">\n    </div>\n    <mv-redactions *ngIf=\"(toolbarEvents.redactionMode | async); else annotationTemplate\"\n                   [zoom]=\"zoom\"\n                   [rotate]=\"rotation\"\n    ></mv-redactions>\n    <ng-template #annotationTemplate>\n      <mv-metadata-layer\n        *ngIf=\"enableAnnotations && annotationSet\"\n        [zoom]=\"zoom\"\n        [rotate]=\"rotation\">\n      </mv-metadata-layer>\n      <mv-bookmark-icons [zoom]=\"zoom\"\n                         [rotate]=\"rotation\">\n      </mv-bookmark-icons>\n    </ng-template>\n  </div>\n  <mv-comment-set [contentScrollTop]=\"viewerContainer.scrollTop\"\n                  *ngIf=\"enableAnnotations && annotationSet && !(toolbarEvents.redactionMode | async)\"\n                  [annotationSet]=\"annotationSet\"\n                  [zoom]=\"zoom\"\n                  [rotate]=\"rotation\"\n                  [height]=\"pdfViewer.offsetHeight\"\n                  [pageHeights]=\"pageHeights\">\n  </mv-comment-set>\n  <div class=\"loadingMessage\" *ngIf=\"loadingDocument\">\n    <h3 class=\"govuk-heading-m\">Loading...{{ loadingDocumentProgress ? loadingDocumentProgress + '%' : '' }}</h3>\n  </div>\n</div>\n",
                         encapsulation: i0.ViewEncapsulation.None
                     }] }
         ];
@@ -5235,7 +5356,14 @@
         /** @type {?} */
         var comments = StoreUtils.filterCommentsSummary(commentSummary, filters.filters);
         if (comments.length) {
-            return comments.map(( /**
+            /** @type {?} */
+            var savedComments = comments.filter(( /**
+             * @param {?} comment
+             * @return {?}
+             */function (comment) {
+                return comment.createdByDetails !== undefined;
+            }));
+            return savedComments.map(( /**
              * @param {?} comment
              * @return {?}
              */function (comment) {
@@ -9790,10 +9918,35 @@
                     _this.store.dispatch(new CreateBookmark(( /** @type {?} */(__assign({}, bookmarkInfo, { name: '', id: uuid$1__default() })))));
                 }));
             };
+        /**
+         * @param {?} current
+         * @param {?} next
+         * @return {?}
+         */
+        SideBarComponent.prototype.isViewedItem = /**
+         * @param {?} current
+         * @param {?} next
+         * @return {?}
+         */
+            function (current, next) {
+                return next === undefined ? current.pageNumber <= this.currentPageNumber :
+                    current.pageNumber <= this.currentPageNumber && (next.pageNumber > this.currentPageNumber);
+            };
+        /**
+         * @param {?} next
+         * @return {?}
+         */
+        SideBarComponent.prototype.findEndPage = /**
+         * @param {?} next
+         * @return {?}
+         */
+            function (next) {
+                return next === undefined ? Number.MAX_SAFE_INTEGER : next.pageNumber;
+            };
         SideBarComponent.decorators = [
             { type: i0.Component, args: [{
                         selector: 'mv-side-bar',
-                        template: "<div id=\"toolbarSidebar\">\n  <div class=\"splitToolbarButton toggled\">\n    <button id=\"viewOutline\"\n            [ngClass]=\"{ 'toolbarButton': true, 'toggled': selectedView === 'outline' }\"\n            (click)=\"toggleSidebarView('outline')\"\n            title=\"Show Document Outline\" tabindex=\"1\" data-l10n-id=\"document_outline\">\n      <span data-l10n-id=\"document_outline_label\">Document Outline</span>\n    </button>\n    <button *ngIf=\"annotationsEnabled\"\n            id=\"viewBookmark\" class=\"toolbarButton bookmark\"\n            [ngClass]=\"{ toggled: selectedView === 'bookmarks' }\"\n            (click)=\"toggleSidebarView('bookmarks')\"\n            title=\"Show Bookmarks\" tabindex=\"2\" data-l10n-id=\"bookmarks\">\n      <span data-l10n-id=\"bookmarks_label\">Bookmarks</span>\n    </button>\n  </div>\n  <div class=\"splitToolbarButtonSeparator\"></div>\n  <div *ngIf=\"annotationsEnabled\"\n       class=\"splitToolbarButton right\">\n    <button id=\"addBookmark\"\n            class=\"toolbarButton addBookmark\"\n            (click)=\"onAddBookmarkClick()\"\n            title=\"Add bookmark\" tabindex=\"3\" data-l10n-id=\"addBookmark\">\n      <span data-l10n-id=\"addBookmark_label\">Add bookmark</span>\n    </button>\n  </div>\n</div>\n<div id=\"sidebarContent\">\n  <div id=\"outlineView\" class=\"outlineWithDeepNesting\">\n    <div class=\"outlineItem\" *ngIf=\"selectedView === 'outline'\">\n      <mv-outline-item *ngFor=\"let outlineItem of outline\"\n                       [outline]=\"outlineItem\"\n                       (navigationEvent)=\"goToDestination($event)\"></mv-outline-item>\n    </div>\n    <div *ngIf=\"annotationsEnabled && selectedView === 'bookmarks'\"\n         id=\"bookmarkContainer\">\n      <mv-bookmarks [bookmarkNodes]=\"bookmarkNodes$ | async\"\n                    [zoom]=\"zoom\" [rotate]=\"rotate\"\n                    (goToDestination)=\"goToDestination($event)\"></mv-bookmarks>\n    </div>\n  </div>\n</div>\n"
+                        template: "<div id=\"toolbarSidebar\">\n  <div class=\"splitToolbarButton toggled\">\n    <button id=\"viewOutline\"\n            [ngClass]=\"{ 'toolbarButton': true, 'toggled': selectedView === 'outline' }\"\n            (click)=\"toggleSidebarView('outline')\"\n            title=\"Show Document Outline\" tabindex=\"1\" data-l10n-id=\"document_outline\">\n      <span data-l10n-id=\"document_outline_label\">Document Outline</span>\n    </button>\n    <button *ngIf=\"annotationsEnabled\"\n            id=\"viewBookmark\" class=\"toolbarButton bookmark\"\n            [ngClass]=\"{ toggled: selectedView === 'bookmarks' }\"\n            (click)=\"toggleSidebarView('bookmarks')\"\n            title=\"Show Bookmarks\" tabindex=\"2\" data-l10n-id=\"bookmarks\">\n      <span data-l10n-id=\"bookmarks_label\">Bookmarks</span>\n    </button>\n  </div>\n  <div class=\"splitToolbarButtonSeparator\"></div>\n  <div *ngIf=\"annotationsEnabled\"\n       class=\"splitToolbarButton right\">\n    <button id=\"addBookmark\"\n            class=\"toolbarButton addBookmark\"\n            (click)=\"onAddBookmarkClick()\"\n            title=\"Add bookmark\" tabindex=\"3\" data-l10n-id=\"addBookmark\">\n      <span data-l10n-id=\"addBookmark_label\">Add bookmark</span>\n    </button>\n  </div>\n</div>\n<div id=\"sidebarContent\">\n  <div id=\"outlineView\" class=\"outlineWithDeepNesting\">\n    <div class=\"outlineItem\" *ngIf=\"selectedView === 'outline'\">\n      <mv-outline-item *ngFor=\"let outlineItem of outline; index as i\"\n                       [outline]=\"outlineItem\"\n                       [currentPageNumber]=\"currentPageNumber\"\n                       [isCurrentSection]= \"isViewedItem(outlineItem, outline[i+1])\"\n                       [endPage]=\"findEndPage(outline[i+1])\"\n                       (navigationEvent)=\"goToDestination($event)\"></mv-outline-item>\n    </div>\n    <div *ngIf=\"annotationsEnabled && selectedView === 'bookmarks'\"\n         id=\"bookmarkContainer\">\n      <mv-bookmarks [bookmarkNodes]=\"bookmarkNodes$ | async\"\n                    [zoom]=\"zoom\" [rotate]=\"rotate\"\n                    (goToDestination)=\"goToDestination($event)\"></mv-bookmarks>\n    </div>\n  </div>\n</div>\n"
                     }] }
         ];
         /** @nocollapse */
@@ -9808,7 +9961,8 @@
             outline: [{ type: i0.Input }],
             url: [{ type: i0.Input }],
             zoom: [{ type: i0.Input }],
-            rotate: [{ type: i0.Input }]
+            rotate: [{ type: i0.Input }],
+            currentPageNumber: [{ type: i0.Input }]
         };
         return SideBarComponent;
     }());
@@ -9852,14 +10006,51 @@
             function () {
                 this.showOutlineItems = !this.showOutlineItems;
             };
+        /**
+         * @param {?} current
+         * @param {?} next
+         * @return {?}
+         */
+        OutlineItemComponent.prototype.isViewedItem = /**
+         * @param {?} current
+         * @param {?} next
+         * @return {?}
+         */
+            function (current, next) {
+                return next === undefined ? current.pageNumber <= this.currentPageNumber && this.endPage > this.currentPageNumber :
+                    current.pageNumber <= this.currentPageNumber && (next.pageNumber > this.currentPageNumber);
+            };
+        /**
+         * @param {?} next
+         * @return {?}
+         */
+        OutlineItemComponent.prototype.findEndPage = /**
+         * @param {?} next
+         * @return {?}
+         */
+            function (next) {
+                return next === undefined ? Number.MAX_SAFE_INTEGER : next.pageNumber;
+            };
+        /**
+         * @return {?}
+         */
+        OutlineItemComponent.prototype.showHighlightOutlineCss = /**
+         * @return {?}
+         */
+            function () {
+                return this.isCurrentSection ? 'highlightedOutlineItem' : 'outlineItem';
+            };
         OutlineItemComponent.decorators = [
             { type: i0.Component, args: [{
                         selector: 'mv-outline-item',
-                        template: "<div class=\"outlineItem\">\n  <div *ngIf=\"outline.items.length > 0\"\n       [ngClass]=\"{ 'outlineItemToggler': true, 'outlineItemsHidden': !showOutlineItems }\"\n       (click)=\"toggleOutline()\"\n       (keyup.enter)=\"toggleOutline()\" tabindex=\"0\"></div>\n  <a (click)=\"goToDestination(outline?.dest)\"\n     (keyup.enter)=\"goToDestination(outline?.dest)\"\n     [style.font-weight]=\"outline.bold ? 'bold' : ''\"\n     [style.font-style]=\"outline.italic ? 'italic' : ''\"\n     tabindex=\"0\">\n    {{ outline.title }}\n  </a>\n  <div *ngIf=\"outline.items.length > 0\" class=\"outlineItems\">\n    <div *ngFor=\"let outline of outline.items\">\n      <mv-outline-item\n        [outline]=\"outline\" (navigationEvent)=\"goToDestination($event)\">\n      </mv-outline-item>\n    </div>\n  </div>\n</div>\n\n"
+                        template: "<div class=\"outlineItem\">\n  <div *ngIf=\"outline.items.length > 0\"\n       [ngClass]=\"{ 'outlineItemToggler': true, 'outlineItemsHidden': !showOutlineItems }\"\n       (click)=\"toggleOutline()\"\n       (keyup.enter)=\"toggleOutline()\" tabindex=\"0\"></div>\n  <a (click)=\"goToDestination(outline?.dest)\"\n     (keyup.enter)=\"goToDestination(outline?.dest)\"\n     [style.font-weight]=\"outline.bold ? 'bold' : ''\"\n     [style.font-style]=\"outline.italic ? 'italic' : ''\"\n     [ngClass]=\"showHighlightOutlineCss()\"\n     tabindex=\"0\">\n    <div style=\"text-align:left;\" [ngClass]=\"showHighlightOutlineCss()\">\n      {{ outline.title }}\n      <span style=\"float:right;\">\n        {{ outline.pageNumber }}\n      </span>\n    </div>\n  </a>\n  \n  <div *ngIf=\"outline.items.length > 0\" class=\"outlineItems\">\n    <div *ngFor=\"let outlineItem of outline.items; index as i\">\n      <mv-outline-item\n        [outline]=\"outlineItem\" \n        [currentPageNumber]= \"currentPageNumber\" \n        [isCurrentSection]= \"isViewedItem(outlineItem, outline.items[i+1])\"\n        [endPage]=\"findEndPage(outline.items[i+1])\"\n        (navigationEvent)=\"goToDestination($event)\">\n      </mv-outline-item>\n    </div>\n  </div>\n</div>\n\n"
                     }] }
         ];
         OutlineItemComponent.propDecorators = {
             outline: [{ type: i0.Input }],
+            currentPageNumber: [{ type: i0.Input }],
+            isCurrentSection: [{ type: i0.Input }],
+            endPage: [{ type: i0.Input }],
             navigationEvent: [{ type: i0.Output }]
         };
         return OutlineItemComponent;