qms-angular 1.0.94 → 1.0.95
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundles/qms-angular.umd.js +9 -10
- package/bundles/qms-angular.umd.js.map +1 -1
- package/esm2015/lib/components/breadcrumb/breadcrumb-item.directive.js +4 -6
- package/esm2015/lib/components/breadcrumb/breadcrumb.js +5 -4
- package/esm2015/lib/components/related/list-other-related/list-related.component.js +3 -3
- package/fesm2015/qms-angular.js +9 -10
- package/fesm2015/qms-angular.js.map +1 -1
- package/package.json +1 -1
- package/qms-angular.metadata.json +1 -1
- package/src/lib/components/breadcrumb/breadcrumb.scss +7 -5
- package/src/lib/components/related/list-other-related/list-related.component.scss +32 -11
@@ -4591,11 +4591,9 @@
|
|
4591
4591
|
this.showTooltipChange = new i0.EventEmitter();
|
4592
4592
|
}
|
4593
4593
|
QMSBreadcrumbItemDirective.prototype.ngAfterViewInit = function () {
|
4594
|
-
if (this.breadcrumbItemText && this.showTooltip) {
|
4595
|
-
this.breadcrumbItemText.nativeElement.classList.add('qms-breadcrumb-item-
|
4596
|
-
|
4597
|
-
this.showTooltipChange.emit(true);
|
4598
|
-
}
|
4594
|
+
if (this.breadcrumbItemText && this.showTooltip && this.breadcrumbItemText.nativeElement.innerText.length > 30) {
|
4595
|
+
this.breadcrumbItemText.nativeElement.classList.add('qms-breadcrumb-item-overflow');
|
4596
|
+
this.showTooltipChange.emit(true);
|
4599
4597
|
}
|
4600
4598
|
};
|
4601
4599
|
QMSBreadcrumbItemDirective.prototype.ngOnChanges = function () {
|
@@ -4682,7 +4680,8 @@
|
|
4682
4680
|
nodeWidths.shift();
|
4683
4681
|
nodeWidths.forEach(function (eleWidth, index) {
|
4684
4682
|
if (currentWidth > screenWidth_1) {
|
4685
|
-
_this.itemNodes[index].isShow = index ==
|
4683
|
+
_this.itemNodes[index].isShow = index == nodeWidths.length - 1 ? true : false;
|
4684
|
+
_this.itemNodes[index].isOverflow = index == nodeWidths.length - 1 ? false : _this.itemNodes[index].isOverflow;
|
4686
4685
|
_this.dropdownNodes.push(_this.itemNodes[index]);
|
4687
4686
|
currentWidth -= (eleWidth);
|
4688
4687
|
}
|
@@ -4786,9 +4785,9 @@
|
|
4786
4785
|
QMSBreadcrumb.decorators = [
|
4787
4786
|
{ type: i0.Component, args: [{
|
4788
4787
|
selector: 'qms-breadcrumb',
|
4789
|
-
template: "<div>\r\n <div class=\"breadcrumb-container\" *ngIf=\"!isMobileType\">\r\n <!-- Home -->\r\n <span\r\n qms-breadcrumb-item\r\n *ngIf=\"!isOverflow || type=='table'\"\r\n [(showTooltip)]=\"homeNode.isOverflow\"\r\n >\r\n <mat-icon\r\n *ngIf=\"homeNode.displayType === itemIconType.name\"\r\n class=\"mat-icon-rtl-mirror material-icons-outlined item-icon\"\r\n >\r\n {{ homeNode.itemIcon }}\r\n </mat-icon>\r\n <mat-icon\r\n *ngIf=\"homeNode.displayType === itemIconType.svg\"\r\n class=\"mat-icon-rtl-mirror material-icons-outlined item-icon\"\r\n [svgIcon]=\"homeNode.itemIconSvg\"\r\n >\r\n </mat-icon>\r\n <img\r\n *ngIf=\"homeNode.displayType === itemIconType.path\"\r\n class=\"mat-icon item-icon\"\r\n [src]=\"homeNode.itemIconPath\"\r\n />\r\n <img\r\n *ngIf=\"homeNode.displayType === itemIconType.base64\"\r\n class=\"mat-icon image-base64 item-icon\"\r\n [src]=\"getImagePath(homeNode)\"\r\n />\r\n <div\r\n [qms-tool-tip]=\"homeNode.name\"\r\n [showToolTip]=\"homeNode.isOverflow\"\r\n #breadcrumbItemText\r\n mode=\"dark\"\r\n (click)=\"onItemSelect(homeNode)\"\r\n >\r\n {{homeNode.name}}\r\n </div>\r\n <mat-icon *ngIf=\"!isOverflow && type !=='table'\">keyboard_arrow_right</mat-icon>\r\n <span\r\n *ngIf=\"itemNodes.length && type=='table'\"\r\n qms-breadcrumb-direction-icon\r\n >\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </span>\r\n </span>\r\n\r\n <!-- Dropdown not table -->\r\n <span qms-breadcrumb-item *ngIf=\"isOverflow && type!='table'\">\r\n <button\r\n qms-btn-icon\r\n color=\"light\"\r\n class=\"breadcrumb__dropdown-btn\"\r\n [matMenuTriggerFor]=\"bodyMediumMenu\"\r\n >\r\n <mat-icon svgIcon=\"breadcrumb_dropdown\"></mat-icon>\r\n </button>\r\n <mat-menu\r\n #bodyMediumMenu=\"matMenu\"\r\n yPosition=\"below\"\r\n class=\"qms-breadcrumb-menu\"\r\n >\r\n <div (click)=\"$event.stopPropagation()\">\r\n <div\r\n qms-menu-item\r\n mat-menu-item\r\n disableRipple\r\n *ngFor=\"let item of dropdownNodes\"\r\n (keydown.enter)=\"onKeyPressed($event)\"\r\n (click)=\"onItemSelect(item)\"\r\n >\r\n <div #menuItemContent qms-expansion-header>\r\n <div qms-list-header>\r\n <div qms-line color=\"default-subtitle\">{{item.name}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </mat-menu>\r\n\r\n <span qms-breadcrumb-direction-icon>\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </span>\r\n </span>\r\n\r\n <!-- Dropdown table -->\r\n <span qms-breadcrumb-item *ngIf=\"isOverflow && type=='table'\">\r\n <button qms-btn-icon color=\"light\" [matMenuTriggerFor]=\"bodyMediumMenu\">\r\n <mat-icon>more_horiz</mat-icon>\r\n </button>\r\n <mat-menu\r\n #bodyMediumMenu=\"matMenu\"\r\n yPosition=\"below\"\r\n class=\"qms-breadcrumb-menu\"\r\n >\r\n <div (click)=\"$event.stopPropagation()\">\r\n <div\r\n qms-menu-item\r\n mat-menu-item\r\n disableRipple\r\n *ngFor=\"let item of dropdownNodes\"\r\n (keydown.enter)=\"onKeyPressed($event)\"\r\n (click)=\"onItemSelect(item)\"\r\n >\r\n <div #menuItemContent qms-expansion-header>\r\n <div qms-list-header>\r\n <div qms-line color=\"default-subtitle\">{{item.name}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </mat-menu>\r\n\r\n <span qms-breadcrumb-direction-icon>\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </span>\r\n </span>\r\n <!-- Item list -->\r\n <span\r\n qms-breadcrumb-item\r\n *ngFor=\"let item of itemNodes;let i=index\"\r\n [isLastItem]=\"i === itemNodes.length - 1\"\r\n [(showTooltip)]=\"item.isOverflow\"\r\n >\r\n <mat-icon\r\n *ngIf=\"item.displayType === itemIconType.name && item.isShow\"\r\n class=\"mat-icon-rtl-mirror material-icons-outlined item-icon\"\r\n >\r\n {{ item.itemIcon }}\r\n </mat-icon>\r\n <mat-icon\r\n *ngIf=\"item.displayType === itemIconType.svg && item.isShow\"\r\n class=\"mat-icon-rtl-mirror material-icons-outlined item-icon\"\r\n [svgIcon]=\"item.itemIconSvg\"\r\n >\r\n </mat-icon>\r\n <img\r\n *ngIf=\"item.displayType === itemIconType.path && item.isShow\"\r\n class=\"mat-icon item-icon\"\r\n [src]=\"item.itemIconPath\"\r\n />\r\n <img\r\n *ngIf=\"item.displayType === itemIconType.base64 && item.isShow\"\r\n class=\"mat-icon image-base64 item-icon\"\r\n [src]=\"getImagePath(item)\"\r\n />\r\n <div\r\n [qms-tool-tip]=\"item.name\"\r\n [showToolTip]=\"item.isOverflow\"\r\n #breadcrumbItemText\r\n mode=\"dark\"\r\n *ngIf=\"item.isShow\"\r\n (click)=\"onItemSelect(item, i == itemNodes.length - 1);\"\r\n >\r\n {{item.name}}\r\n </div>\r\n <span\r\n qms-breadcrumb-direction-icon\r\n *ngIf=\"item.isShow && i !== itemNodes.length - 1\"\r\n >\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </span>\r\n </span>\r\n </div>\r\n\r\n <div class=\"breadcrumb-container\" *ngIf=\"isMobileType\">\r\n <!-- Home -->\r\n <span qms-breadcrumb-item [(showTooltip)]=\"previousNode.isOverflow\">\r\n <span qms-breadcrumb-direction-icon>\r\n <mat-icon>keyboard_backspace</mat-icon>\r\n </span>\r\n <mat-icon\r\n *ngIf=\"previousNode.displayType === itemIconType.name\"\r\n class=\"mat-icon-rtl-mirror material-icons-outlined item-icon\"\r\n >\r\n {{ previousNode.itemIcon }}\r\n </mat-icon>\r\n <mat-icon\r\n *ngIf=\"previousNode.displayType === itemIconType.svg\"\r\n class=\"mat-icon-rtl-mirror material-icons-outlined item-icon\"\r\n [svgIcon]=\"previousNode.itemIconSvg\"\r\n >\r\n </mat-icon>\r\n <img\r\n *ngIf=\"previousNode.displayType === itemIconType.path\"\r\n class=\"mat-icon item-icon\"\r\n [src]=\"previousNode.itemIconPath\"\r\n />\r\n <img\r\n *ngIf=\"previousNode.displayType === itemIconType.base64\"\r\n class=\"mat-icon image-base64 item-icon\"\r\n [src]=\"getImagePath(previousNode)\"\r\n />\r\n <div\r\n [qms-tool-tip]=\"previousNode.name\"\r\n [showToolTip]=\"previousNode.isOverflow\"\r\n #breadcrumbItemText\r\n mode=\"dark\"\r\n (click)=\"onItemSelect(previousNode)\"\r\n >\r\n {{previousNode.name}}\r\n </div>\r\n </span>\r\n </div>\r\n</div>\r\n",
|
4788
|
+
template: "<div>\r\n <div class=\"breadcrumb-container\" *ngIf=\"!isMobileType\">\r\n <!-- Home -->\r\n <span\r\n qms-breadcrumb-item\r\n *ngIf=\"!isOverflow || type=='table'\"\r\n [(showTooltip)]=\"homeNode.isOverflow\"\r\n >\r\n <mat-icon\r\n *ngIf=\"homeNode.displayType === itemIconType.name\"\r\n class=\"mat-icon-rtl-mirror material-icons-outlined item-icon\"\r\n >\r\n {{ homeNode.itemIcon }}\r\n </mat-icon>\r\n <mat-icon\r\n *ngIf=\"homeNode.displayType === itemIconType.svg\"\r\n class=\"mat-icon-rtl-mirror material-icons-outlined item-icon\"\r\n [svgIcon]=\"homeNode.itemIconSvg\"\r\n >\r\n </mat-icon>\r\n <img\r\n *ngIf=\"homeNode.displayType === itemIconType.path\"\r\n class=\"mat-icon item-icon\"\r\n [src]=\"homeNode.itemIconPath\"\r\n />\r\n <img\r\n *ngIf=\"homeNode.displayType === itemIconType.base64\"\r\n class=\"mat-icon image-base64 item-icon\"\r\n [src]=\"getImagePath(homeNode)\"\r\n />\r\n <div\r\n class=\"qms-breadcrumb-item-text\"\r\n [qms-tool-tip]=\"homeNode.name\"\r\n [showToolTip]=\"homeNode.isOverflow\"\r\n #breadcrumbItemText\r\n mode=\"dark\"\r\n (click)=\"onItemSelect(homeNode)\"\r\n >\r\n {{homeNode.name}}\r\n </div>\r\n <mat-icon *ngIf=\"!isOverflow && type !=='table'\">keyboard_arrow_right</mat-icon>\r\n <span\r\n *ngIf=\"itemNodes.length && type=='table'\"\r\n qms-breadcrumb-direction-icon\r\n >\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </span>\r\n </span>\r\n\r\n <!-- Dropdown not table -->\r\n <span qms-breadcrumb-item *ngIf=\"isOverflow && type!='table'\">\r\n <button\r\n qms-btn-icon\r\n color=\"light\"\r\n class=\"breadcrumb__dropdown-btn\"\r\n [matMenuTriggerFor]=\"bodyMediumMenu\"\r\n >\r\n <mat-icon svgIcon=\"breadcrumb_dropdown\"></mat-icon>\r\n </button>\r\n <mat-menu\r\n #bodyMediumMenu=\"matMenu\"\r\n yPosition=\"below\"\r\n class=\"qms-breadcrumb-menu\"\r\n >\r\n <div (click)=\"$event.stopPropagation()\">\r\n <div\r\n qms-menu-item\r\n mat-menu-item\r\n disableRipple\r\n *ngFor=\"let item of dropdownNodes\"\r\n (keydown.enter)=\"onKeyPressed($event)\"\r\n (click)=\"onItemSelect(item)\"\r\n >\r\n <div #menuItemContent qms-expansion-header>\r\n <div qms-list-header>\r\n <div qms-line color=\"default-subtitle\">{{item.name}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </mat-menu>\r\n\r\n <span qms-breadcrumb-direction-icon>\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </span>\r\n </span>\r\n\r\n <!-- Dropdown table -->\r\n <span qms-breadcrumb-item *ngIf=\"isOverflow && type=='table'\">\r\n <button qms-btn-icon color=\"light\" [matMenuTriggerFor]=\"bodyMediumMenu\">\r\n <mat-icon>more_horiz</mat-icon>\r\n </button>\r\n <mat-menu\r\n #bodyMediumMenu=\"matMenu\"\r\n yPosition=\"below\"\r\n class=\"qms-breadcrumb-menu\"\r\n >\r\n <div (click)=\"$event.stopPropagation()\">\r\n <div\r\n qms-menu-item\r\n mat-menu-item\r\n disableRipple\r\n *ngFor=\"let item of dropdownNodes\"\r\n (keydown.enter)=\"onKeyPressed($event)\"\r\n (click)=\"onItemSelect(item)\"\r\n >\r\n <div #menuItemContent qms-expansion-header>\r\n <div qms-list-header>\r\n <div qms-line color=\"default-subtitle\">{{item.name}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </mat-menu>\r\n\r\n <span qms-breadcrumb-direction-icon>\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </span>\r\n </span>\r\n <!-- Item list -->\r\n <span\r\n qms-breadcrumb-item\r\n *ngFor=\"let item of itemNodes;let i=index\"\r\n [isLastItem]=\"i === itemNodes.length - 1\"\r\n [(showTooltip)]=\"item.isOverflow\"\r\n >\r\n <mat-icon\r\n *ngIf=\"item.displayType === itemIconType.name && item.isShow\"\r\n class=\"mat-icon-rtl-mirror material-icons-outlined item-icon\"\r\n >\r\n {{ item.itemIcon }}\r\n </mat-icon>\r\n <mat-icon\r\n *ngIf=\"item.displayType === itemIconType.svg && item.isShow\"\r\n class=\"mat-icon-rtl-mirror material-icons-outlined item-icon\"\r\n [svgIcon]=\"item.itemIconSvg\"\r\n >\r\n </mat-icon>\r\n <img\r\n *ngIf=\"item.displayType === itemIconType.path && item.isShow\"\r\n class=\"mat-icon item-icon\"\r\n [src]=\"item.itemIconPath\"\r\n />\r\n <img\r\n *ngIf=\"item.displayType === itemIconType.base64 && item.isShow\"\r\n class=\"mat-icon image-base64 item-icon\"\r\n [src]=\"getImagePath(item)\"\r\n />\r\n <div\r\n class=\"qms-breadcrumb-item-text\"\r\n [qms-tool-tip]=\"item.name\"\r\n [showToolTip]=\"item.isOverflow\"\r\n #breadcrumbItemText\r\n mode=\"dark\"\r\n *ngIf=\"item.isShow\"\r\n (click)=\"onItemSelect(item, i == itemNodes.length - 1);\"\r\n >\r\n {{item.name}}\r\n </div>\r\n <span\r\n qms-breadcrumb-direction-icon\r\n *ngIf=\"item.isShow && i !== itemNodes.length - 1\"\r\n >\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </span>\r\n </span>\r\n </div>\r\n\r\n <div class=\"breadcrumb-container\" *ngIf=\"isMobileType\">\r\n <!-- Home -->\r\n <span qms-breadcrumb-item [(showTooltip)]=\"previousNode.isOverflow\">\r\n <span qms-breadcrumb-direction-icon>\r\n <mat-icon>keyboard_backspace</mat-icon>\r\n </span>\r\n <mat-icon\r\n *ngIf=\"previousNode.displayType === itemIconType.name\"\r\n class=\"mat-icon-rtl-mirror material-icons-outlined item-icon\"\r\n >\r\n {{ previousNode.itemIcon }}\r\n </mat-icon>\r\n <mat-icon\r\n *ngIf=\"previousNode.displayType === itemIconType.svg\"\r\n class=\"mat-icon-rtl-mirror material-icons-outlined item-icon\"\r\n [svgIcon]=\"previousNode.itemIconSvg\"\r\n >\r\n </mat-icon>\r\n <img\r\n *ngIf=\"previousNode.displayType === itemIconType.path\"\r\n class=\"mat-icon item-icon\"\r\n [src]=\"previousNode.itemIconPath\"\r\n />\r\n <img\r\n *ngIf=\"previousNode.displayType === itemIconType.base64\"\r\n class=\"mat-icon image-base64 item-icon\"\r\n [src]=\"getImagePath(previousNode)\"\r\n />\r\n <div\r\n class=\"qms-breadcrumb-item-text\"\r\n [qms-tool-tip]=\"previousNode.name\"\r\n [showToolTip]=\"previousNode.isOverflow\"\r\n #breadcrumbItemText\r\n mode=\"dark\"\r\n (click)=\"onItemSelect(previousNode)\"\r\n >\r\n {{previousNode.name}}\r\n </div>\r\n </span>\r\n </div>\r\n</div>\r\n",
|
4790
4789
|
encapsulation: i0.ViewEncapsulation.None,
|
4791
|
-
styles: [".breadcrumb-container{display:flex;font-family:Open Sans;font-size:14px;font-weight:600;color:#323232}.breadcrumb-container .qms-breadcrumb-direction-icon,.breadcrumb-container .qms-breadcrumb-item{display:flex;align-items:center;padding:3px 0 2px}.breadcrumb-container .qms-breadcrumb-direction-icon .mat-icon{width:18px;height:18px;font-size:18px;margin-left:.5rem;margin-right:.5rem}.breadcrumb-container .item-icon{margin-right:2px}.breadcrumb-container .qms-breadcrumb-item{cursor:inherit}.breadcrumb-container .qms-breadcrumb-item .qms-btn-icon{width:1.5rem;height:1.5rem;line-height:2rem}.breadcrumb-container .qms-breadcrumb-item .qms-breadcrumb-item-
|
4790
|
+
styles: [".breadcrumb-container{display:flex;font-family:Open Sans;font-size:14px;font-weight:600;color:#323232}.breadcrumb-container .qms-breadcrumb-direction-icon,.breadcrumb-container .qms-breadcrumb-item{display:flex;align-items:center;padding:3px 0 2px}.breadcrumb-container .qms-breadcrumb-direction-icon .mat-icon{width:18px;height:18px;font-size:18px;margin-left:.5rem;margin-right:.5rem}.breadcrumb-container .item-icon{margin-right:2px}.breadcrumb-container .qms-breadcrumb-item{cursor:inherit}.breadcrumb-container .qms-breadcrumb-item .qms-btn-icon{width:1.5rem;height:1.5rem;line-height:2rem}.breadcrumb-container .qms-breadcrumb-item .qms-breadcrumb-item-overflow{max-width:240px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.breadcrumb-container .qms-breadcrumb-item .breadcrumb__dropdown-btn{width:2rem;height:2rem}.breadcrumb-container .qms-breadcrumb-item .breadcrumb__dropdown-btn svg{display:block}.breadcrumb-container .qms-breadcrumb-last-item{color:rgba(0,0,0,.6);font-weight:400;cursor:not-allowed}.qms-breadcrumb-table .breadcrumb-container .qms-breadcrumb-direction-icon .mat-icon{width:12px;height:12px;font-size:12px;margin-left:.25rem;margin-right:.25rem;color:rgba(0,0,0,.6)}.qms-breadcrumb-table .breadcrumb-container .item-icon{margin-right:1px}.qms-breadcrumb-table .breadcrumb-container .qms-breadcrumb-item .qms-breadcrumb-item-text{font-size:12px;font-weight:400;color:rgba(0,0,0,.6)}.qms-breadcrumb-table .breadcrumb-container .qms-breadcrumb-item .qms-breadcrumb-item-overflow{max-width:200px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qms-breadcrumb__multi-line .breadcrumb-container{flex-wrap:wrap}.qms-breadcrumb-menu .qms-dropdown-menu-item{border:none}"]
|
4792
4791
|
},] }
|
4793
4792
|
];
|
4794
4793
|
QMSBreadcrumb.ctorParameters = function () { return [
|
@@ -6006,9 +6005,9 @@
|
|
6006
6005
|
RelatedListComponent.decorators = [
|
6007
6006
|
{ type: i0.Component, args: [{
|
6008
6007
|
selector: 'qms-related-list',
|
6009
|
-
template: "<div class=\"container list-related\">\r\n <div class=\"list-related__title\">\r\n <strong>{{ title }}</strong>\r\n </div>\r\n <div\r\n class=\"list-related__body\"\r\n *ngFor=\"let item of relatedData; let i = index\"\r\n >\r\n <div class=\"list-related__body-parent\">\r\n <qms-list-item type=\"image-square\">\r\n <mat-icon\r\n leading-icon\r\n type=\"image-square\"\r\n [svgIcon]=\"getNodeIcon(item)\"\r\n ></mat-icon>\r\n <div qms-list-header>\r\n <div\r\n qms-line\r\n type=\"subtitle\"\r\n class=\"search__option-name\"\r\n (click)=\"onItemClick(item)\"\r\n >\r\n <div class=\"caption\" *ngIf=\"canShowParent(item)\">\r\n {{ item?.parentName }}\r\n </div>\r\n <span class=\"cursor\">{{ item.itemName }}</span>\r\n </div>\r\n <div\r\n class=\"caption\"\r\n *ngIf=\"item.breadcumbs && item.breadcumbs.length\"\r\n >\r\n <qms-breadcrumb\r\n class=\"breadcrumb-containe\"\r\n type=\"table\"\r\n numDisplayItem=\"1\"\r\n [nodes]=\"item.breadcumbs\"\r\n >\r\n </qms-breadcrumb>\r\n </div>\r\n </div>\r\n <div qms-line color=\"default-subtitle\" *ngIf=\"item?.displayId\">\r\n <ng-container *ngIf=\"item?.displayId\">\r\n <span class=\"material-icons-outlined\"> local_offer </span> ID:\r\n {{ item?.displayId }}\r\n </ng-container>\r\n <ng-container *ngIf=\"item.statusName\">\r\n {{ getItemStatus(item) }}</ng-container
|
6008
|
+
template: "<div class=\"container list-related\">\r\n <div class=\"list-related__title\">\r\n <strong>{{ title }}</strong>\r\n </div>\r\n <div\r\n class=\"list-related__body\"\r\n *ngFor=\"let item of relatedData; let i = index\"\r\n >\r\n <div class=\"list-related__body-parent\">\r\n <qms-list-item type=\"image-square\">\r\n <mat-icon\r\n type=\"image-square\"\r\n leading-icon\r\n [svgIcon]=\"getNodeIcon(item)\"\r\n ></mat-icon>\r\n <div qms-list-header>\r\n <div\r\n qms-line\r\n (click)=\"onItemClick(item)\"\r\n type=\"caption\"\r\n *ngIf=\"canShowParent(item)\"\r\n >\r\n {{ item?.parentName }}\r\n </div>\r\n <div qms-line (click)=\"onItemClick(item)\" type=\"subtitle\">\r\n {{ item.itemName }}\r\n </div>\r\n </div>\r\n <div qms-line *ngIf=\"item.breadcumbs && item.breadcumbs.length\">\r\n <qms-breadcrumb\r\n class=\"breadcrumb-container\"\r\n type=\"table\"\r\n numDisplayItem=\"1\"\r\n [nodes]=\"item.breadcumbs\"\r\n >\r\n </qms-breadcrumb>\r\n </div>\r\n <div qms-line color=\"default-subtitle\" *ngIf=\"item?.displayId\">\r\n <ng-container *ngIf=\"item?.displayId\">\r\n <span class=\"material-icons-outlined\"> local_offer </span> ID:\r\n {{ item?.displayId }}\r\n </ng-container>\r\n <ng-container *ngIf=\"item.statusName\">\r\n {{ getItemStatus(item) }}\r\n </ng-container>\r\n </div>\r\n <button\r\n qms-btn-icon\r\n color=\"light\"\r\n mode=\"dark\"\r\n *ngIf=\"!isNotEditedItem\"\r\n (click)=\"removeItem(i)\"\r\n >\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </qms-list-item>\r\n\r\n <!-- <qms-list-item type=\"image-square\">\r\n <mat-icon\r\n leading-icon\r\n type=\"image-square\"\r\n [svgIcon]=\"getNodeIcon(item)\"\r\n ></mat-icon>\r\n <div qms-list-header>\r\n <div\r\n qms-line\r\n type=\"subtitle\"\r\n class=\"search__option-name\"\r\n (click)=\"onItemClick(item)\"\r\n >\r\n <div class=\"caption\" *ngIf=\"canShowParent(item)\">\r\n {{ item?.parentName }}\r\n </div>\r\n <span class=\"cursor\">{{ item.itemName }}</span>\r\n </div>\r\n <div\r\n class=\"caption\"\r\n *ngIf=\"item.breadcumbs && item.breadcumbs.length\"\r\n >\r\n <qms-breadcrumb\r\n class=\"breadcrumb-containe\"\r\n type=\"table\"\r\n numDisplayItem=\"1\"\r\n [nodes]=\"item.breadcumbs\"\r\n >\r\n </qms-breadcrumb>\r\n </div>\r\n </div>\r\n <div qms-line color=\"default-subtitle\" *ngIf=\"item?.displayId\">\r\n <ng-container *ngIf=\"item?.displayId\">\r\n <span class=\"material-icons-outlined\"> local_offer </span> ID:\r\n {{ item?.displayId }}\r\n </ng-container>\r\n <ng-container *ngIf=\"item.statusName\">\r\n {{ getItemStatus(item) }}\r\n </ng-container>\r\n </div>\r\n </qms-list-item>\r\n <div class=\"block\" *ngIf=\"!isNotEditedItem\">\r\n <button qms-btn-icon color=\"light\" mode=\"dark\" (click)=\"removeItem(i)\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div> -->\r\n </div>\r\n </div>\r\n</div>\r\n",
|
6010
6009
|
encapsulation: i0.ViewEncapsulation.None,
|
6011
|
-
styles: [".list-related{font-family:Open Sans;font-style:normal;font-weight:400;color:var(--default-color)}.list-related .list-related__title{font-weight:600;font-size:.875rem;line-height:22px;margin-bottom:1rem}.list-related .list-related__body .list-related__body-parent{min-height:48px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ddd}.list-related .list-related__body .list-related__body-parent .qms-list-item.mat-2-line.image-item{height:auto}.list-related .list-related__body .list-related__body-parent .qms-list-item.image-item .qms-list-item-content{margin:0}.list-related .list-related__body .list-related__body-parent .wrap-image.image-square,.list-related .list-related__body .list-related__body-parent .wrap-image.image-square img{background:transparent;margin:auto;height:24px;width:24px}.list-related .list-related__body .list-related__body-parent .qms-list-item.image-item .qms-list-text,.list-related .list-related__body .list-related__body-parent .qms-list-item.image-item .trailing-box{margin-left:1.5rem;border-bottom:none;padding-bottom:7px;padding-top:7px}.list-related .list-related__body .list-related__body-parent .qms-list-item.image-item .qms-list-text .material-icons-outlined,.list-related .list-related__body .list-related__body-parent .qms-list-item.image-item .trailing-box .material-icons-outlined{font-size:13px}.list-related .list-related__body .list-related__body-parent .
|
6010
|
+
styles: [".list-related{font-family:Open Sans;font-style:normal;font-weight:400;color:var(--default-color)}.list-related .list-related__title{font-weight:600;font-size:.875rem;line-height:22px;margin-bottom:1rem}.list-related .list-related__body .list-related__body-parent{min-height:48px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ddd}.list-related .list-related__body .list-related__body-parent .qms-list-item{height:unset!important}.list-related .list-related__body .list-related__body-parent .qms-list-item.mat-2-line.image-item{height:auto}.list-related .list-related__body .list-related__body-parent .qms-list-item.image-item .qms-list-item-content{margin:0}.list-related .list-related__body .list-related__body-parent .wrap-image.image-square,.list-related .list-related__body .list-related__body-parent .wrap-image.image-square img{background:transparent;margin:auto;height:24px;width:24px}.list-related .list-related__body .list-related__body-parent .qms-list-item.image-item .qms-list-text,.list-related .list-related__body .list-related__body-parent .qms-list-item.image-item .trailing-box{margin-left:1.5rem;border-bottom:none;padding-bottom:7px;padding-top:7px}.list-related .list-related__body .list-related__body-parent .qms-list-item.image-item .qms-list-text .material-icons-outlined,.list-related .list-related__body .list-related__body-parent .qms-list-item.image-item .trailing-box .material-icons-outlined{font-size:13px}.list-related .list-related__body .list-related__body-parent .block{font-weight:400;font-size:1rem;line-height:28px;display:flex;align-items:center}.list-related .list-related__body .list-related__body-parent .block .title{margin-left:1.5rem;padding-top:5px;padding-bottom:5px}.list-related .list-related__body .list-related__body-parent .block .title .caption{color:rgba(0,0,0,.6);font-size:.75rem;line-height:22px}.list-related .list-related__body .list-related__body-parent .block mat-icon{color:rgba(0,0,0,.6);padding:0}.list-related .list-related__body .list-related__body-parent .block button.qms-btn-icon{width:40px;height:40px;line-height:40px}.list-related .list-related__body .list-related__body-child{font-weight:400;font-size:.875rem;line-height:22px}.list-related .list-related__body .list-related__body-child .default{min-height:48px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ddd}.list-related .list-related__body .list-related__body-child .default .title{margin-left:3rem}.list-related .list-related__body .list-related__body-child .default .group-button{margin-right:2rem;display:flex}.list-related .list-related__body .remain{font-weight:600;font-size:.875rem;line-height:22px;display:flex;align-items:center;justify-content:space-between;background-color:#fafafa;color:var(--primary);min-height:48px;border-bottom:1px solid #ddd}.list-related .list-related__body .remain .title{margin-left:3rem}.list-related .list-related__body .qms-line{display:flex;align-items:center}.list-related .list-related__body .breadcrumb-container .qms-breadcrumb-item{cursor:inherit;line-height:16px;font-size:.75rem;color:rgba(0,0,0,.6);font-weight:400;line-height:22px}.list-related .list-related__body .trailing-box{display:flex;align-items:center}.list-related .list-related__body .trailing-box button{height:24px;width:24px;line-height:24px}.label-green,.label-red,.label-yellow{font-family:Open Sans;font-style:normal;font-weight:600;display:inline-block;text-align:center;margin-left:1rem;width:24px;height:24px;font-size:.75rem;border-radius:1px}.label-red{background-color:var(--secondary);color:#fff}.label-yellow{background-color:var(--risk-yellow);color:rgba(0,0,0,.87)}.label-green{background-color:var(--risk-green);color:#fff}.cursor{cursor:pointer}"]
|
6012
6011
|
},] }
|
6013
6012
|
];
|
6014
6013
|
RelatedListComponent.ctorParameters = function () { return [
|