qms-angular 1.0.83 → 1.0.84

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.
Files changed (34) hide show
  1. package/bundles/qms-angular.umd.js +144 -15
  2. package/bundles/qms-angular.umd.js.map +1 -1
  3. package/esm2015/lib/components/qms-navigation-drawer/qms-navigation-drawer.component.js +3 -3
  4. package/esm2015/lib/components/qms-paginator/qms-paginator.component.js +14 -4
  5. package/esm2015/lib/components/select-process-document/select-process-document.component.js +2 -2
  6. package/esm2015/lib/directives/dialog/dialog.content.directive.js +96 -0
  7. package/esm2015/lib/directives/table/table-row.directive.js +3 -3
  8. package/esm2015/lib/directives/table/table.directive.js +6 -6
  9. package/esm2015/lib/model/en.js +4 -1
  10. package/esm2015/lib/model/no.js +4 -1
  11. package/esm2015/lib/qms-angular.module.js +12 -3
  12. package/esm2015/public-api.js +2 -1
  13. package/fesm2015/qms-angular.js +134 -16
  14. package/fesm2015/qms-angular.js.map +1 -1
  15. package/lib/components/qms-paginator/qms-paginator.component.d.ts +5 -1
  16. package/lib/directives/dialog/dialog.content.directive.d.ts +30 -0
  17. package/lib/directives/table/table-row.directive.d.ts +1 -1
  18. package/lib/directives/table/table.directive.d.ts +1 -1
  19. package/lib/model/en.d.ts +3 -0
  20. package/lib/model/no.d.ts +3 -0
  21. package/lib.theme.scss +1 -0
  22. package/package.json +1 -1
  23. package/public-api.d.ts +1 -0
  24. package/qms-angular.metadata.json +1 -1
  25. package/src/assets/qms-ckeditor-plugin/build/ckeditor.js +1 -1
  26. package/src/assets/qms-ckeditor-plugin/build/ckeditor.js.map +1 -1
  27. package/src/assets/qms-ckeditor-plugin/src/plugins/anchor/anchorediting.js +19 -1
  28. package/src/assets/qms-ckeditor-plugin/src/plugins/imagemap/converters.js +44 -0
  29. package/src/assets/qms-ckeditor-plugin/src/plugins/imagemap/imagemapediting.js +3 -1
  30. package/src/assets/qms-ckeditor-plugin/src/plugins/media/mediaembedediting.js +30 -0
  31. package/src/assets/qms-ckeditor-plugin/src/plugins/tooltip/tooltipediting.js +20 -9
  32. package/src/assets/qms-ckeditor-plugin/src/plugins/tooltip/utils.js +4 -1
  33. package/src/lib/components/qms-navigation-drawer/qms-navigation-drawer.component.scss +5 -5
  34. package/src/themes/core/_dialog.scss +35 -0
@@ -44,6 +44,9 @@
44
44
  QmsAngularService.ctorParameters = function () { return []; };
45
45
 
46
46
  var en = {
47
+ "RESULTS": "Results",
48
+ "ROW_PER_PAGE": "Items per page",
49
+ "JUM_TO_PAGE": "Go to page",
47
50
  "MY_COMPONENT": "My component",
48
51
  "SAVE_BUTTON": "Save",
49
52
  "CANCEL_BUTTON": "Cancel",
@@ -341,6 +344,9 @@
341
344
  };
342
345
 
343
346
  var no = {
347
+ "RESULTS": "Resultater",
348
+ "ROW_PER_PAGE": "Rader per side",
349
+ "JUM_TO_PAGE": "Hopp til side",
344
350
  "MY_COMPONENT": "Min komponent",
345
351
  "SAVE_BUTTON": "Lagre",
346
352
  "CANCEL_BUTTON": "Avbryt",
@@ -3230,7 +3236,7 @@
3230
3236
  enumerable: false,
3231
3237
  configurable: true
3232
3238
  });
3233
- Object.defineProperty(CdkDetailRowDirective.prototype, "cdkDetailRow", {
3239
+ Object.defineProperty(CdkDetailRowDirective.prototype, "qmsCdkDetailRow", {
3234
3240
  set: function (value) {
3235
3241
  if (value !== this.row) {
3236
3242
  this.row = value;
@@ -3310,7 +3316,7 @@
3310
3316
  }());
3311
3317
  CdkDetailRowDirective.decorators = [
3312
3318
  { type: i0.Directive, args: [{
3313
- selector: '[cdkDetailRow]'
3319
+ selector: '[qmsCdkDetailRow]'
3314
3320
  },] }
3315
3321
  ];
3316
3322
  CdkDetailRowDirective.ctorParameters = function () { return [
@@ -3320,9 +3326,9 @@
3320
3326
  CdkDetailRowDirective.propDecorators = {
3321
3327
  onRowExpandEvent: [{ type: i0.Output }],
3322
3328
  expanded: [{ type: i0.HostBinding, args: ['class.qms-row-expanded',] }],
3323
- cdkDetailRow: [{ type: i0.Input }],
3324
- template: [{ type: i0.Input, args: ['cdkDetailRowTpl',] }],
3325
- otherTemplate: [{ type: i0.Input, args: ['cdkotherTemplate',] }],
3329
+ qmsCdkDetailRow: [{ type: i0.Input }],
3330
+ template: [{ type: i0.Input, args: ['qmsCdkDetailRowTpl',] }],
3331
+ otherTemplate: [{ type: i0.Input, args: ['qmsCdkotherTemplate',] }],
3326
3332
  onClick: [{ type: i0.HostListener, args: ['click',] }],
3327
3333
  onKeydownHandler: [{ type: i0.HostListener, args: ['keydown.enter', ['$event'],] }],
3328
3334
  onClickItem: [{ type: i0.HostListener, args: ['document:click', ['$event.target'],] }],
@@ -3355,7 +3361,7 @@
3355
3361
  }
3356
3362
  }
3357
3363
  };
3358
- Object.defineProperty(QMSTableRowDirective.prototype, "cdkDetailRow", {
3364
+ Object.defineProperty(QMSTableRowDirective.prototype, "qmsCdkDetailRow", {
3359
3365
  set: function (value) {
3360
3366
  this._rowData = value;
3361
3367
  },
@@ -3403,13 +3409,114 @@
3403
3409
  { type: i0.Renderer2 }
3404
3410
  ]; };
3405
3411
  QMSTableRowDirective.propDecorators = {
3406
- cdkDetailRow: [{ type: i0.Input }],
3412
+ qmsCdkDetailRow: [{ type: i0.Input }],
3407
3413
  disable: [{ type: i0.HostBinding, args: ['class.qms-table-row-disabled',] }],
3408
3414
  select: [{ type: i0.HostBinding, args: ['class.qms-table-row-selected',] }],
3409
3415
  group: [{ type: i0.HostBinding, args: ['class.qms-table-row-group',] }],
3410
3416
  isDraft: [{ type: i0.HostBinding, args: ['class.qms-table-row-draft',] }]
3411
3417
  };
3412
3418
 
3419
+ var QMSDialogContainer = /** @class */ (function () {
3420
+ function QMSDialogContainer(el) {
3421
+ this.el = el;
3422
+ }
3423
+ QMSDialogContainer.prototype.ngOnInit = function () {
3424
+ if (this.min) {
3425
+ this.el.nativeElement.style["min-height"] = "" + this.min;
3426
+ }
3427
+ if (this.max) {
3428
+ this.el.nativeElement.style["max-height"] = "" + this.max;
3429
+ }
3430
+ };
3431
+ return QMSDialogContainer;
3432
+ }());
3433
+ QMSDialogContainer.decorators = [
3434
+ { type: i0.Directive, args: [{
3435
+ selector: "[qms-dialog-container], qms-dialog-container, [qmsDialogContainer]",
3436
+ host: { 'class': 'qms-dialog-container' },
3437
+ },] }
3438
+ ];
3439
+ QMSDialogContainer.ctorParameters = function () { return [
3440
+ { type: i0.ElementRef }
3441
+ ]; };
3442
+ QMSDialogContainer.propDecorators = {
3443
+ min: [{ type: i0.Input }],
3444
+ max: [{ type: i0.Input }]
3445
+ };
3446
+ var QMSDialogHeader = /** @class */ (function () {
3447
+ function QMSDialogHeader(el) {
3448
+ this.el = el;
3449
+ }
3450
+ QMSDialogHeader.prototype.ngOnInit = function () {
3451
+ if (this.height) {
3452
+ this.el.nativeElement.style["height"] = "" + this.height;
3453
+ }
3454
+ };
3455
+ return QMSDialogHeader;
3456
+ }());
3457
+ QMSDialogHeader.decorators = [
3458
+ { type: i0.Directive, args: [{
3459
+ selector: '[qms-dialog-header], qms-dialog-header, [qmsDialogHeader]',
3460
+ exportAs: 'qmsDialogHeader',
3461
+ host: {
3462
+ 'class': 'qms-dialog-header'
3463
+ },
3464
+ },] }
3465
+ ];
3466
+ QMSDialogHeader.ctorParameters = function () { return [
3467
+ { type: i0.ElementRef }
3468
+ ]; };
3469
+ QMSDialogHeader.propDecorators = {
3470
+ height: [{ type: i0.Input }]
3471
+ };
3472
+ /**
3473
+ * Scrollable content container of a dialog.
3474
+ */
3475
+ var QMSDialogContent = /** @class */ (function () {
3476
+ function QMSDialogContent() {
3477
+ }
3478
+ return QMSDialogContent;
3479
+ }());
3480
+ QMSDialogContent.decorators = [
3481
+ { type: i0.Directive, args: [{
3482
+ selector: "[qms-dialog-content], qms-dialog-content, [qmsDialogContent]",
3483
+ host: { 'class': 'qms-dialog-content' },
3484
+ },] }
3485
+ ];
3486
+ /**
3487
+ * Container for the bottom action buttons in a dialog.
3488
+ * Stays fixed to the bottom when scrolling.
3489
+ */
3490
+ var QMSDialogFooter = /** @class */ (function () {
3491
+ function QMSDialogFooter(el) {
3492
+ this.el = el;
3493
+ this.align = 'start';
3494
+ }
3495
+ QMSDialogFooter.prototype.ngOnInit = function () {
3496
+ if (this.height) {
3497
+ this.el.nativeElement.style["height"] = "" + this.height;
3498
+ }
3499
+ };
3500
+ return QMSDialogFooter;
3501
+ }());
3502
+ QMSDialogFooter.decorators = [
3503
+ { type: i0.Directive, args: [{
3504
+ selector: "[qms-dialog-footer], qms-dialog-footer, [qmsDialogFooter]",
3505
+ host: {
3506
+ 'class': 'qms-dialog-footer',
3507
+ '[class.qms-dialog-footer-align-center]': 'align === "center"',
3508
+ '[class.qms-dialog-footer-align-end]': 'align === "end"',
3509
+ },
3510
+ },] }
3511
+ ];
3512
+ QMSDialogFooter.ctorParameters = function () { return [
3513
+ { type: i0.ElementRef }
3514
+ ]; };
3515
+ QMSDialogFooter.propDecorators = {
3516
+ align: [{ type: i0.Input }],
3517
+ height: [{ type: i0.Input }]
3518
+ };
3519
+
3413
3520
  var ɵ0$2 = { appearance: 'fill' }, ɵ1 = { color: 'none' };
3414
3521
  var QmsAngularModule = /** @class */ (function () {
3415
3522
  function QmsAngularModule() {
@@ -3464,7 +3571,11 @@
3464
3571
  ScrollToSelectedDirective,
3465
3572
  QMSTooltipImageDirective,
3466
3573
  SelectDialog,
3467
- QMSAppBar
3574
+ QMSAppBar,
3575
+ QMSDialogContainer,
3576
+ QMSDialogHeader,
3577
+ QMSDialogContent,
3578
+ QMSDialogFooter
3468
3579
  ],
3469
3580
  imports: [
3470
3581
  common.CommonModule,
@@ -3518,7 +3629,11 @@
3518
3629
  QMSTableChildrenDirective,
3519
3630
  QMSRowDetailDirective,
3520
3631
  CdkDetailRowDirective,
3521
- QMSCollapseGroupDirective
3632
+ QMSCollapseGroupDirective,
3633
+ QMSDialogContainer,
3634
+ QMSDialogHeader,
3635
+ QMSDialogContent,
3636
+ QMSDialogFooter
3522
3637
  ],
3523
3638
  providers: [
3524
3639
  { provide: formField.MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: ɵ0$2 },
@@ -21637,7 +21752,7 @@
21637
21752
  SelectProcessDocumentPopupComponent.decorators = [
21638
21753
  { type: i0.Component, args: [{
21639
21754
  selector: 'qms-select-process-document',
21640
- template: "<div id=\"qmslib_related_popup\" class=\"qmslib__related__popup__container\">\r\n <div id=\"qmslib_related_popup_header\">\r\n <span mat-icon-button class=\"button__close\" (click)=\"onCloseClick()\">\r\n <mat-icon mat-icon>close</mat-icon>\r\n </span>\r\n <div id=\"qmslib_related_popup_header_001\" mat-dialog-content>\r\n <span>{{ moduleName | uppercase }}</span>\r\n </div>\r\n </div>\r\n\r\n <div id=\"qmslib_related_popup_search\" class=\"input__field\">\r\n <input\r\n type=\"text\"\r\n placeholder=\"{{ LANG.SEARCH }}\"\r\n matInput\r\n [formControl]=\"myControl\"\r\n [matAutocomplete]=\"auto\"\r\n />\r\n <mat-icon>search</mat-icon>\r\n </div>\r\n\r\n <div class=\"line__divider\"></div>\r\n\r\n <mat-autocomplete\r\n #auto=\"matAutocomplete\"\r\n class=\"mat-autocomplete_related-viewport\"\r\n (optionSelected)=\"selectRelated($event.option.value)\"\r\n [displayWith]=\"displayWhenSelectRelatedOption\"\r\n >\r\n <cdk-virtual-scroll-viewport\r\n qms-scrollbar\r\n itemSize=\"10\"\r\n [class.related-viewport]=\"isInputValue\"\r\n *ngIf=\"filteredOptions.length\"\r\n >\r\n <ng-container *ngFor=\"let type of searchOrder\">\r\n <div\r\n class=\"search__module-result\"\r\n *ngIf=\"canShowSearchOption(type.value)\"\r\n >\r\n <span class=\"search__module-title\">{{ getTitle(type.value) }}</span>\r\n <mat-option\r\n class=\"search__option\"\r\n *ngFor=\"let option of getModuleFilteredOptions(type.value)\"\r\n [value]=\"option\"\r\n [disabled]=\"option.disabled\"\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(option)\"\r\n ></mat-icon>\r\n <div qms-list-header>\r\n <div qms-line type=\"subtitle\" class=\"search__option-name\">\r\n {{ option.itemName }}\r\n </div>\r\n <div\r\n class=\"caption\"\r\n *ngIf=\"option.breadcumbs && option.breadcumbs.length\"\r\n >\r\n <qms-breadcrumb\r\n class=\"breadcrumb-containe\"\r\n type=\"table\"\r\n numDisplayItem=\"1\"\r\n [nodes]=\"option.breadcumbs\"\r\n >\r\n </qms-breadcrumb>\r\n </div>\r\n </div>\r\n <div qms-line color=\"default-subtitle\" *ngIf=\"getItemId(option)\">\r\n <span class=\"material-icons-outlined search__description-icon\">\r\n local_offer\r\n </span>\r\n {{ getItemId(option) }}\r\n </div>\r\n </qms-list-item>\r\n </mat-option>\r\n </div>\r\n </ng-container>\r\n </cdk-virtual-scroll-viewport>\r\n </mat-autocomplete>\r\n\r\n <div class=\"row\">\r\n <div\r\n class=\"qms-scrollbar qmslib_related_popup_content\"\r\n [ngClass]=\"{\r\n panel__content_item: checkedNodeList.length,\r\n panel__content: !checkedNodeList.length,\r\n 'col-6': splitView,\r\n 'col-12': !splitView\r\n }\"\r\n >\r\n <mat-expansion-panel\r\n hideToggle\r\n id=\"qmslib_related_popup_common_001\"\r\n [expanded]=\"isCommonExpanded\"\r\n (opened)=\"isCommonExpanded = true\"\r\n (closed)=\"isCommonExpanded = false\"\r\n class=\"panel-tree\"\r\n >\r\n <mat-expansion-panel-header class=\"padding-5\">\r\n <mat-panel-title *ngIf=\"moduleId === module.documentProcess\">\r\n {{ LANG.PROCESSES | uppercase }}\r\n </mat-panel-title>\r\n <button qms-btn-icon class=\"related_popup_toggle-btn\">\r\n <mat-icon>\r\n {{\r\n isCommonExpanded ? \"keyboard_arrow_up\" : \"keyboard_arrow_down\"\r\n }}\r\n </mat-icon>\r\n </button>\r\n </mat-expansion-panel-header>\r\n <div id=\"qmslib_related_popup_common_002\">\r\n <qms-tree-new\r\n [treeData]=\"treeData1\"\r\n [treeConfig]=\"treeConfig1\"\r\n [selectedData]=\"selectedData\"\r\n [selectedRiskData]=\"selectedRiskData\"\r\n [disabledList]=\"disabledList\"\r\n (nodeExpandEvent)=\"getChildrenOfFolder($event, dataType.area)\"\r\n (selectNodeEvent)=\"selectNodeTreeEvent($event)\"\r\n (getChildNodeSelectOne)=\"getChildNodeSelectOne($event)\"\r\n (selectFolderEvent)=\"getItemOfFolder($event, dataType.area)\"\r\n [expandOnTitleClick]=\"!splitView\"\r\n [parentNodeOnClick]=\"parentNodeSelected\"\r\n (treeControlNodes)=\"selectTreeControlNodeProcess($event)\"\r\n ></qms-tree-new>\r\n </div>\r\n </mat-expansion-panel>\r\n\r\n <div\r\n *ngIf=\"moduleId === module.documentProcess\"\r\n class=\"line__divider\"\r\n ></div>\r\n\r\n <mat-expansion-panel\r\n hideToggle\r\n *ngIf=\"moduleId === module.documentProcess\"\r\n id=\"qmslib_related_popup_document_001\"\r\n [expanded]=\"isDocumentExpanded\"\r\n (opened)=\"isDocumentExpanded = true\"\r\n (closed)=\"isDocumentExpanded = false\"\r\n class=\"panel-tree\"\r\n >\r\n <mat-expansion-panel-header class=\"padding-5\">\r\n <mat-panel-title> {{ LANG.DOCUMENTS | uppercase }} </mat-panel-title>\r\n <button qms-btn-icon class=\"related_popup_toggle-btn\">\r\n <mat-icon>\r\n {{\r\n isDocumentExpanded ? \"keyboard_arrow_up\" : \"keyboard_arrow_down\"\r\n }}\r\n </mat-icon>\r\n </button>\r\n </mat-expansion-panel-header>\r\n <div id=\"qmslib_related_popup_document_002\">\r\n <qms-tree-new\r\n [treeData]=\"treeData2\"\r\n [treeConfig]=\"treeConfig2\"\r\n [selectedData]=\"selectedData2\"\r\n [disabledList]=\"disabledList2\"\r\n (nodeExpandEvent)=\"getChildrenOfFolder($event, dataType.folder)\"\r\n (selectNodeEvent)=\"selectNodeTreeEvent($event)\"\r\n (getChildNodeSelectOne)=\"getChildNodeSelectOne($event)\"\r\n (selectFolderEvent)=\"getItemOfFolder($event, dataType.folder)\"\r\n [expandOnTitleClick]=\"!splitView\"\r\n [parentNodeOnClick]=\"parentNodeSelected\"\r\n (treeControlNodes)=\"selectTreeControlNodeDocument($event)\"\r\n ></qms-tree-new>\r\n </div>\r\n </mat-expansion-panel>\r\n </div>\r\n <div\r\n *ngIf=\"splitView\"\r\n class=\"qms-scrollbar qmslib-related-popup-splitview qmslib_related_popup_content col-6\"\r\n [ngClass]=\"{\r\n panel__content_item: checkedNodeList.length,\r\n panel__content: !checkedNodeList.length\r\n }\"\r\n >\r\n <div class=\"splitview-header\" *ngIf=\"selectedFolder\">\r\n {{ splitViewTitle }}\r\n </div>\r\n <div class=\"expand-node\" *ngFor=\"let node of itemInSplitview\">\r\n <mat-checkbox\r\n qms-group-options\r\n [disabled]=\"node.disabled\"\r\n color=\"default\"\r\n [checked]=\"isNodeSelected(node)\"\r\n (change)=\"toggleSelectItem(node)\"\r\n ></mat-checkbox>\r\n <mat-icon\r\n class=\"mat-icon-rtl-mirror material-icons-outlined\"\r\n [svgIcon]=\"getNodeIcon(node)\"\r\n ></mat-icon>\r\n <span class=\"text-node\">{{ node.itemName }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"checkedNodeList.length\" class=\"line__divider\"></div>\r\n\r\n <div class=\"row\">\r\n <div class=\"col-12 pr-0 pe-0\">\r\n <div *ngIf=\"checkedNodeList.length\" class=\"panel__item qms-scrollbar\">\r\n <div class=\"related__item__inline\" *ngFor=\"let item of checkedNodeList\">\r\n <button\r\n *ngIf=\"item.itemName\"\r\n mat-button\r\n class=\"related__item__content\"\r\n qms-tool-tip=\"{{\r\n isEllipsisActive(itemName) ? getItemChipName(item) : ''\r\n }}\"\r\n mode=\"dark\"\r\n >\r\n <span class=\"related__item__content_name\" #itemName>{{\r\n getItemChipName(item)\r\n }}</span>\r\n <mat-icon\r\n *ngIf=\"!(treeConfig1?.selectOne || treeConfig2?.selectOne)\"\r\n (click)=\"removeCheckedNodeList(item)\"\r\n >cancel</mat-icon\r\n >\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"line__divider\"></div>\r\n\r\n <div class=\"confirm__button__groups\">\r\n <button\r\n *ngIf=\"!checkedNodeList.length\"\r\n qms-btn\r\n style=\"margin-top: 7px\"\r\n (click)=\"onAddClick()\"\r\n >\r\n {{ LANG.ADD }}\r\n </button>\r\n <button\r\n *ngIf=\"checkedNodeList.length\"\r\n qms-btn\r\n style=\"margin-top: 0px\"\r\n (click)=\"onAddClick()\"\r\n >\r\n {{ LANG.ADD }} ({{ checkedNodeList.length }})\r\n </button>\r\n <button\r\n qms-btn-text\r\n [ngStyle]=\"{ 'margin-top': checkedNodeList.length ? '0px' : '7px' }\"\r\n (click)=\"onCloseClick()\"\r\n >\r\n {{ LANG.CANCEL }}\r\n </button>\r\n </div>\r\n</div>\r\n",
21755
+ template: "<div id=\"qmslib_related_popup\" class=\"qmslib__related__popup__container\">\r\n <div id=\"qmslib_related_popup_header\">\r\n <span mat-icon-button class=\"button__close\" (click)=\"onCloseClick()\">\r\n <mat-icon mat-icon>close</mat-icon>\r\n </span>\r\n <div id=\"qmslib_related_popup_header_001\" mat-dialog-content>\r\n <span>{{ moduleName | uppercase }}</span>\r\n </div>\r\n </div>\r\n\r\n <div id=\"qmslib_related_popup_search\" class=\"input__field\">\r\n <input\r\n type=\"text\"\r\n placeholder=\"{{ LANG.SEARCH }}\"\r\n matInput\r\n [formControl]=\"myControl\"\r\n [matAutocomplete]=\"auto\"\r\n />\r\n <mat-icon>search</mat-icon>\r\n </div>\r\n\r\n <div class=\"line__divider\"></div>\r\n\r\n <mat-autocomplete\r\n #auto=\"matAutocomplete\"\r\n class=\"mat-autocomplete_related-viewport\"\r\n (optionSelected)=\"selectRelated($event.option.value)\"\r\n [displayWith]=\"displayWhenSelectRelatedOption\"\r\n >\r\n <cdk-virtual-scroll-viewport\r\n qms-scrollbar\r\n itemSize=\"10\"\r\n [class.related-viewport]=\"isInputValue\"\r\n *ngIf=\"filteredOptions.length\"\r\n >\r\n <ng-container *ngFor=\"let type of searchOrder\">\r\n <div\r\n class=\"search__module-result\"\r\n *ngIf=\"canShowSearchOption(type.value)\"\r\n >\r\n <span class=\"search__module-title\">{{ getTitle(type.value) }}</span>\r\n <mat-option\r\n class=\"search__option\"\r\n *ngFor=\"let option of getModuleFilteredOptions(type.value)\"\r\n [value]=\"option\"\r\n [disabled]=\"option.disabled\"\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(option)\"\r\n ></mat-icon>\r\n <div qms-list-header>\r\n <div qms-line type=\"subtitle\" class=\"search__option-name\">\r\n {{ option.itemName }}\r\n </div>\r\n <div\r\n class=\"caption\"\r\n *ngIf=\"option.breadcumbs && option.breadcumbs.length\"\r\n >\r\n <qms-breadcrumb\r\n class=\"breadcrumb-containe\"\r\n type=\"table\"\r\n numDisplayItem=\"1\"\r\n [nodes]=\"option.breadcumbs\"\r\n >\r\n </qms-breadcrumb>\r\n </div>\r\n </div>\r\n <div qms-line color=\"default-subtitle\" *ngIf=\"getItemId(option)\">\r\n <span class=\"material-icons-outlined search__description-icon\">\r\n local_offer\r\n </span>\r\n {{ getItemId(option) }}\r\n </div>\r\n </qms-list-item>\r\n </mat-option>\r\n </div>\r\n </ng-container>\r\n </cdk-virtual-scroll-viewport>\r\n </mat-autocomplete>\r\n\r\n <div class=\"row\">\r\n <div\r\n class=\"qms-scrollbar qmslib_related_popup_content\"\r\n [ngClass]=\"{\r\n panel__content_item: checkedNodeList.length,\r\n panel__content: !checkedNodeList.length,\r\n 'col-6': splitView,\r\n 'col-12': !splitView\r\n }\"\r\n >\r\n <mat-expansion-panel\r\n hideToggle\r\n id=\"qmslib_related_popup_common_001\"\r\n [expanded]=\"isCommonExpanded\"\r\n (opened)=\"isCommonExpanded = true\"\r\n (closed)=\"isCommonExpanded = false\"\r\n class=\"panel-tree\"\r\n >\r\n <mat-expansion-panel-header class=\"padding-5\">\r\n <mat-panel-title *ngIf=\"moduleId === module.documentProcess\">\r\n {{ LANG.PROCESSES | uppercase }}\r\n </mat-panel-title>\r\n <button qms-btn-icon class=\"related_popup_toggle-btn\">\r\n <mat-icon>\r\n {{\r\n isCommonExpanded ? \"keyboard_arrow_up\" : \"keyboard_arrow_down\"\r\n }}\r\n </mat-icon>\r\n </button>\r\n </mat-expansion-panel-header>\r\n <div id=\"qmslib_related_popup_common_002\">\r\n <qms-tree-new\r\n [treeData]=\"treeData1\"\r\n [treeConfig]=\"treeConfig1\"\r\n [selectedData]=\"selectedData\"\r\n [selectedRiskData]=\"selectedRiskData\"\r\n [disabledList]=\"disabledList\"\r\n (nodeExpandEvent)=\"getChildrenOfFolder($event, dataType.area)\"\r\n (selectNodeEvent)=\"selectNodeTreeEvent($event)\"\r\n (getChildNodeSelectOne)=\"getChildNodeSelectOne($event)\"\r\n (selectFolderEvent)=\"getItemOfFolder($event, dataType.area)\"\r\n [expandOnTitleClick]=\"!splitView\"\r\n [parentNodeOnClick]=\"parentNodeSelected\"\r\n (treeControlNodes)=\"selectTreeControlNodeProcess($event)\"\r\n ></qms-tree-new>\r\n </div>\r\n </mat-expansion-panel>\r\n\r\n <div\r\n *ngIf=\"moduleId === module.documentProcess\"\r\n class=\"line__divider\"\r\n ></div>\r\n\r\n <mat-expansion-panel\r\n hideToggle\r\n *ngIf=\"moduleId === module.documentProcess\"\r\n id=\"qmslib_related_popup_document_001\"\r\n [expanded]=\"isDocumentExpanded\"\r\n (opened)=\"isDocumentExpanded = true\"\r\n (closed)=\"isDocumentExpanded = false\"\r\n class=\"panel-tree\"\r\n >\r\n <mat-expansion-panel-header class=\"padding-5\">\r\n <mat-panel-title> {{ LANG.DOCUMENTS | uppercase }} </mat-panel-title>\r\n <button qms-btn-icon class=\"related_popup_toggle-btn\">\r\n <mat-icon>\r\n {{\r\n isDocumentExpanded ? \"keyboard_arrow_up\" : \"keyboard_arrow_down\"\r\n }}\r\n </mat-icon>\r\n </button>\r\n </mat-expansion-panel-header>\r\n <div id=\"qmslib_related_popup_document_002\">\r\n <qms-tree-new\r\n [treeData]=\"treeData2\"\r\n [treeConfig]=\"treeConfig2\"\r\n [selectedData]=\"selectedData2\"\r\n [disabledList]=\"disabledList2\"\r\n (nodeExpandEvent)=\"getChildrenOfFolder($event, dataType.folder)\"\r\n (selectNodeEvent)=\"selectNodeTreeEvent($event)\"\r\n (getChildNodeSelectOne)=\"getChildNodeSelectOne($event)\"\r\n (selectFolderEvent)=\"getItemOfFolder($event, dataType.folder)\"\r\n [expandOnTitleClick]=\"!splitView\"\r\n [parentNodeOnClick]=\"parentNodeSelected\"\r\n (treeControlNodes)=\"selectTreeControlNodeDocument($event)\"\r\n ></qms-tree-new>\r\n </div>\r\n </mat-expansion-panel>\r\n </div>\r\n <div\r\n *ngIf=\"splitView\"\r\n class=\"qms-scrollbar qmslib-related-popup-splitview qmslib_related_popup_content col-6\"\r\n [ngClass]=\"{\r\n panel__content_item: checkedNodeList.length,\r\n panel__content: !checkedNodeList.length\r\n }\"\r\n >\r\n <div class=\"splitview-header\" *ngIf=\"selectedFolder\">\r\n {{ splitViewTitle }}\r\n </div>\r\n <div class=\"expand-node\" *ngFor=\"let node of itemInSplitview\">\r\n <mat-checkbox\r\n qms-group-options\r\n [disabled]=\"node.disabled\"\r\n color=\"default\"\r\n [checked]=\"isNodeSelected(node)\"\r\n (change)=\"toggleSelectItem(node)\"\r\n *ngIf=\"!hideSplitviewCheckbox\"\r\n >\r\n </mat-checkbox>\r\n <button\r\n class=\"button-boder\"\r\n mat-icon-button\r\n [disableRipple]=\"true\"\r\n (click)=\"toggleSelectItem(node)\"\r\n *ngIf=\"node.itemName\"\r\n >\r\n <mat-icon\r\n class=\"mat-icon-rtl-mirror material-icons-outlined\"\r\n [svgIcon]=\"getNodeIcon(node)\"\r\n >\r\n </mat-icon>\r\n </button>\r\n <span\r\n class=\"text-node-item\"\r\n style=\"cursor: pointer\"\r\n (click)=\"toggleSelectItem(node)\"\r\n [class.bgSelected]=\"\r\n isSelectOne &&\r\n idCheckIconSplitView == idToCheckSelectOne(node.id, node.parentId)\r\n \"\r\n >\r\n <span\r\n class=\"text-node\"\r\n [class.select-one-checked]=\"\r\n isSelectOne &&\r\n idCheckIconSplitView == idToCheckSelectOne(node.id, node.parentId)\r\n \"\r\n >{{ node.itemName }}</span\r\n >\r\n <mat-icon\r\n class=\"select-one-checked\"\r\n *ngIf=\"\r\n isSelectOne &&\r\n idCheckIconSplitView == idToCheckSelectOne(node.id, node.parentId)\r\n \"\r\n >\r\n done\r\n </mat-icon>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"checkedNodeList.length\" class=\"line__divider\"></div>\r\n\r\n <div class=\"row\">\r\n <div class=\"col-12\">\r\n <div *ngIf=\"checkedNodeList.length\" class=\"panel__item qms-scrollbar\">\r\n <div class=\"related__item__inline\" *ngFor=\"let item of checkedNodeList\">\r\n <button\r\n *ngIf=\"item.itemName\"\r\n mat-button\r\n class=\"related__item__content\"\r\n qms-tool-tip=\"{{\r\n isEllipsisActive(itemName) ? getItemChipName(item) : ''\r\n }}\"\r\n mode=\"dark\"\r\n >\r\n <span class=\"related__item__content_name\" #itemName>{{\r\n getItemChipName(item)\r\n }}</span>\r\n <mat-icon\r\n *ngIf=\"!(treeConfig1?.selectOne || treeConfig2?.selectOne)\"\r\n (click)=\"removeCheckedNodeList(item)\"\r\n >cancel</mat-icon\r\n >\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"line__divider\"></div>\r\n\r\n <div class=\"confirm__button__groups\">\r\n <button\r\n *ngIf=\"!checkedNodeList.length\"\r\n qms-btn\r\n style=\"margin-top: 7px\"\r\n (click)=\"onAddClick()\"\r\n >\r\n {{ LANG.ADD }}\r\n </button>\r\n <button\r\n *ngIf=\"checkedNodeList.length\"\r\n qms-btn\r\n style=\"margin-top: 0px\"\r\n (click)=\"onAddClick()\"\r\n >\r\n {{ LANG.ADD }} ({{ checkedNodeList.length }})\r\n </button>\r\n <button\r\n qms-btn-text\r\n [ngStyle]=\"{ 'margin-top': checkedNodeList.length ? '0px' : '7px' }\"\r\n (click)=\"onCloseClick()\"\r\n >\r\n {{ LANG.CANCEL }}\r\n </button>\r\n </div>\r\n</div>\r\n",
21641
21756
  encapsulation: i0.ViewEncapsulation.None,
21642
21757
  styles: [".qms-scrollbar::-webkit-scrollbar{width:12px}.qms-scrollbar::-webkit-scrollbar-track{background:rgba(0,0,0,.12);background-clip:content-box}.qms-scrollbar::-webkit-scrollbar-thumb{background:rgba(0,0,0,.38);border-radius:20px;width:4px;border:4px solid transparent;background-clip:content-box}.qms-scrollbar::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.5);background-clip:content-box;border:4px solid transparent}.qms-scrollbar.none-scroll-bg::-webkit-scrollbar-track{background:transparent;background-clip:content-box}.qms__popup .button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qms__danger button{border:none;color:#fff;padding:0;text-align:center;text-decoration:none;display:inline-block;cursor:pointer;height:20px;width:20px;font-family:Open Sans;font-size:12px;font-weight:600;font-style:normal;line-height:16px}.qms__danger .red{background-color:#9e360f;margin-left:10px}.qms__danger .yellow{background-color:#e4cf53;margin-left:10px;color:#323232}.qms__danger .green{background-color:#00804c;margin-left:10px}.confirm__button__groups{margin-top:11px}.confirm__button__groups button{min-height:36px;width:auto;font-family:Open Sans;font-weight:500;font-size:14px;letter-spacing:1px;line-height:16px;padding-left:15px;padding-right:15px;margin-right:5px;float:right}.confirm__button__groups .confirm{background:#f8f9f9}.confirm__button__groups .confirm:hover{background:#001983;color:#fff}.confirm__button__groups .confirm:disabled{cursor:not-allowed}.confirm__button__groups .cancel{background:#f8f9f9}.confirm__button__groups .cancel:hover{background:#001983;color:#fff}.qmslib__related__popup__container .input__field{display:flex;align-items:center}.qmslib__related__popup__container .input__field input{width:100%;padding:10px;outline:none;border:none;background:#eee}.qmslib__related__popup__container .input__field .mat-icon{margin-left:-30px;cursor:pointer;vertical-align:middle}.qmslib__related__popup__container .line__divider{border-bottom:1px solid #ccc;height:1px;margin-top:10px;min-width:300px;max-width:100%}.qmslib__related__popup__container .button__close{float:right;top:-24px;right:-24px;cursor:pointer}.qmslib__related__popup__container .panel__content{height:450px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .panel__content_item{height:350px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .panel-tree .mat-expansion-panel-body{padding:0 12px 12px}.qmslib__related__popup__container .mat-expansion-panel-header{height:30px;font-size:12px;letter-spacing:1px;font-family:Raleway;font-weight:600;padding:0}.qmslib__related__popup__container .mat-expansion-panel-header .mat-expansion-panel-header-title{align-items:center;margin-left:12px}.qmslib__related__popup__container .mat-expansion-panel-header .related_popup_toggle-btn{width:1.5rem;height:1.5rem;line-height:1.5rem}.qmslib__related__popup__container .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none}.qmslib__related__popup__container .panel__item{height:100px;margin-top:12px;overflow-x:hidden;overflow-y:auto;padding-right:5px;width:100%;max-width:100%;display:flex;flex-wrap:wrap;align-content:flex-start}.qmslib__related__popup__container .panel__item .related__item__inline{max-width:100%}.qmslib__related__popup__container .panel__item .related__item__content{height:32px;line-height:32px;background-color:#e5e5e5;max-width:100%;margin-bottom:5px;margin-left:2.5px;margin-right:2.5px}.qmslib__related__popup__container .panel__item .related__item__content .mat-icon{color:#8e8e8e;font-size:24px}.qmslib__related__popup__container .panel__item .related__item__content span.related__item__content_name{display:inline-block;min-width:calc(100% - 13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:278px}.qmslib__related__popup__container .qmslib-related-popup-splitview{background-color:#fff;border-left:1px solid #ccc;height:450px;overflow-y:auto;margin-top:12px}.qmslib__related__popup__container .qmslib-related-popup-splitview.panel__content{height:450px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .qmslib-related-popup-splitview.panel__content_item{height:350px;overflow:auto;margin-top:12px}.qmslib__related__popup__container .qmslib-related-popup-splitview .splitview-header{height:30px;font-size:12px;letter-spacing:1px;font-family:RALEWAY;font-weight:600;display:flex;align-items:center}.qmslib__related__popup__container .qmslib-related-popup-splitview .mat-checkbox.qms-group-options{padding:0}.qmslib__related__popup__container .qmslib-related-popup-splitview .mat-checkbox.qms-group-options .mat-checkbox-inner-container{margin-right:11px}.qmslib__related__popup__container .qmslib-related-popup-splitview .mat-checkbox.qms-group-options.mat-checkbox-checked{background:transparent!important}.qmslib__related__popup__container .qmslib-related-popup-splitview .expand-node{margin-left:8px;display:flex;align-items:center;min-height:40px}.qmslib__related__popup__container .qmslib-related-popup-splitview .expand-node .mat-icon{color:rgba(0,0,0,.6);margin-right:17px;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}.qmslib__related__popup__container .qmslib-related-popup-splitview .expand-node .mat-icon svg{display:block;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}.qmslib__related__popup__container .qmslib-related-popup-splitview .expand-node .text-node-item{margin-left:8px;display:flex;align-items:center;min-height:32px;justify-content:space-between;width:100%}.qmslib__related__popup__container .qmslib-related-popup-splitview .expand-node .text-node-item .select-one-checked{color:#1954a9}cdk-virtual-scroll-viewport{overflow-x:hidden}cdk-virtual-scroll-viewport .search__module-result{margin:1.5rem;padding:0 0 .5rem}cdk-virtual-scroll-viewport .search__module-result .search__module-title{font-size:14px;font-weight:600}cdk-virtual-scroll-viewport .search__module-result .search__option{height:auto;line-height:normal;padding:8px 0;border-bottom:1px solid #e0e0e0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item.mat-2-line.image-item{height:auto}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content{margin:0;border-bottom:none}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .wrap-image.image-square{width:2.5rem;height:100%;background:transparent;align-self:center;margin-right:0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .wrap-image.image-square img{width:24px;height:24px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .material-icons-outlined.leading-icon,cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content mat-icon.leading-icon{padding:4px 0 4px 4px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .subtitle{font-weight:400}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .caption{overflow:hidden;line-height:normal;white-space:normal;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;padding:0;margin:0}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .caption span.search__result__parent-name{display:inline-block;width:auto;width:calc(100% - 13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .default-subtitle{color:rgba(0,0,0,.38)}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .search__description-icon{margin-right:0;width:12px;height:12px;font-size:12px}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .qms-list-text{border-bottom:none}cdk-virtual-scroll-viewport .search__module-result .search__option .qms-list-item-content .breadcrumb-containe .qms-breadcrumb-item .mat-icon{font-size:16px!important;padding-bottom:1px}cdk-virtual-scroll-viewport .search__module-result svg{display:block}#qmslib_related_popup_header_001{margin-bottom:20px;padding:0;font-weight:600;font-family:Raleway}.padding-5{padding:5px}.mat-autocomplete_related-viewport{height:100%;max-height:100%!important}.mat-autocomplete_related-viewport .cdk-virtual-scroll-content-wrapper{width:100%}.mat-autocomplete_related-viewport .related-viewport{min-height:300px}"]
21643
21758
  },] }
@@ -22037,8 +22152,8 @@
22037
22152
  QMSNavigationDrawerComponent.decorators = [
22038
22153
  { type: i0.Component, args: [{
22039
22154
  selector: 'app-qms-navigation-drawer',
22040
- template: "\r\n<mat-tree class=\"qms-navigation-drawer-container\" [dataSource]=\"dataSource\" [treeControl]=\"treeControl\" cdkDropList\r\n (cdkDropListDropped)=\"drop($event)\" [cdkDropListDisabled]=\"dragDropListDisabled\">\r\n <!-- This is the tree node template for leaf nodes -->\r\n <mat-tree-node [class.pr-34]=\"showAddIcon\" *matTreeNodeDef=\"let node\" (mouseover)=\"onOver(node)\" matTreeNodePadding matTreeNodePaddingIndent=\"34\"\r\n cdkDrag [cdkDragData]=\"node\" (mouseenter)=\"dragHover(node)\" (mouseleave)=\"dragHoverEnd()\"\r\n (cdkDragStarted)=\"dragStart()\" (cdkDragReleased)=\"dragEnd()\"\r\n [ngClass]=\"{'expand-node' : treeControl.isExpanded(node), 'collapse-node': !treeControl.isExpanded(node), 'active': activeNode == node.id}\">\r\n <div *cdkDragPreview class=\"node-preview-item\">{{ node.name }}</div>\r\n <div *ngIf=\"!node.isReadOnly\" (click)=\"onClickNode(node, true)\" class=\"tree-content\">\r\n <button tabindex=\"-1\" qms-btn-outlined disabled class=\"border-0 bg-transparent\">\r\n <img class=\"img-icon\" [src]=\"faIconPath\" alt=\"\" />\r\n </button>\r\n <div class=\"span-text\">{{ node.name }}</div>\r\n <button tabindex=\"-1\" class=\"button-icon add-icon\"\r\n *ngIf=\"showFavoriteIcon && (node.id === hoverNode.id || node.favorite)\"\r\n (click)=\"addFavoriteNode(node.id, $event)\" (mouseenter)=\"setHoverFavorite(node.id)\"\r\n (mouseleave)=\"setHoverFavorite(null)\" [ngClass]=\"{'btn-favorite': (node.id === hoverNode.id && isHover)}\"\r\n qms-tool-tip=\"{{!node.favorite ? addFavoriteTooltip : deleteFavoriteTooltip}}\" mode=\"dark\" position=\"bottom\"\r\n qms-btn-icon>\r\n <mat-icon class=\"mat-icon-rtl-mirror blur-icon\" [class.favorite]=\"true\"\r\n [class.not-favorite]=\"!node.favorite && node.id === hoverNode.id && isHover\">\r\n {{node.favorite && node.id === hoverNode.id && isHover ? 'star_rate_outline' : ''}}\r\n {{!node.favorite && node.id === hoverNode.id && isHover ? 'star_border' : ''}}\r\n </mat-icon>\r\n </button>\r\n <button tabindex=\"-1\" class=\"button-icon add-icon\" *ngIf=\"node.id === hoverNode.id && showAddIcon && isHover\"\r\n qms-tool-tip=\"{{addNodeTooltip}}\" (click)=\"addNewNode(node.id, $event)\" mode=\"dark\" position=\"bottom\" qms-btn-icon>\r\n <mat-icon class=\"mat-icon-rtl-mirror\">\r\n add\r\n </mat-icon>\r\n </button>\r\n </div>\r\n </mat-tree-node>\r\n <!-- This is the tree node template for expandable nodes -->\r\n <mat-tree-node [class.pr-34]=\"showAddIcon\" *matTreeNodeDef=\"let node;when: hasChild\" (mouseover)=\"onOver(node)\" matTreeNodePadding\r\n matTreeNodePaddingIndent=\"34\" cdkDrag [cdkDragData]=\"node\" (mouseenter)=\"dragHover(node)\"\r\n (mouseleave)=\"dragHoverEnd()\" (cdkDragStarted)=\"dragStart()\" (cdkDragReleased)=\"dragEnd()\"\r\n [ngClass]=\"\r\n {'expand-node' : treeControl.isExpanded(node), 'collapse-node': !treeControl.isExpanded(node), 'active': activeNode == node.id}\">\r\n <div *cdkDragPreview class=\"node-preview-item\">{{ node.name }}</div>\r\n <div *ngIf=\"!node.isReadOnly\" class=\"tree-content\"\r\n (keydown)=\"onKeyDownNode($event, node)\">\r\n <button matTreeNodeToggle (click)=\"onClickNode(node, false)\" tabindex=\"-1\" class=\"button-icon collapse-expand-icon\" qms-btn-icon [attr.aria-label]=\"'toggle ' + node.name\">\r\n <mat-icon class=\"mat-icon-rtl-mirror arrow-icon left-icon\">\r\n {{treeControl.isExpanded(node) ? 'expand_less' : 'expand_more'}}\r\n </mat-icon>\r\n </button>\r\n <div class=\"span-text\" matTreeNodeToggle (click)=\"onClickNode(node, true)\">{{ node.name }}</div>\r\n <button tabindex=\"-1\" class=\"button-icon add-icon\"\r\n qms-tool-tip=\"{{!node.favorite ? addFavoriteTooltip : deleteFavoriteTooltip}}\"\r\n *ngIf=\"showFavoriteIcon && (node.id === hoverNode.id || node.favorite)\"\r\n (click)=\"addFavoriteNode(node.id, $event)\" [ngClass]=\"{'btn-favorite': (node.id === hoverNode.id && isHover)}\"\r\n (mouseenter)=\"setHoverFavorite(node.id)\" (mouseleave)=\"setHoverFavorite(null)\" mode=\"dark\" position=\"below\"\r\n qms-btn-icon>\r\n <mat-icon class=\"mat-icon-rtl-mirror blur-icon\" [class.favorite]=\"true\"\r\n [class.not-favorite]=\"!node.favorite && node.id === hoverNode.id && isHover\">\r\n {{node.favorite && node.id === hoverNode.id && isHover ? 'star_rate_outline' : ''}}\r\n {{!node.favorite && node.id === hoverNode.id && isHover ? 'star_border' : ''}}\r\n </mat-icon>\r\n </button>\r\n <button tabindex=\"-1\" class=\"button-icon add-icon\" *ngIf=\"node.id === hoverNode.id && showAddIcon && isHover\"\r\n qms-tool-tip=\"{{addNodeTooltip}}\" mode=\"dark\" position=\"bottom\" (click)=\"addNewNode(node.id, $event)\" qms-btn-icon>\r\n <mat-icon class=\"mat-icon-rtl-mirror\">\r\n add\r\n </mat-icon>\r\n </button>\r\n </div>\r\n </mat-tree-node>\r\n</mat-tree>\r\n",
22041
- styles: ["::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node{min-width:272px!important;height:48px!important}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node{min-height:34px;margin:16px 0}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node.active{background-color:#f2f7fd;color:#1954a9!important}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node.active img{filter:opacity(.5) drop-shadow(0 0 0 #1954A9)}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node.active:hover{background-color:#e5eefb!important}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content{width:100%;position:relative;cursor:pointer;align-items:center}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .arrow-icon{color:#00324e}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .collapse-expand-icon{color:#3e57b7}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .collapse-expand-icon:hover{background:rgba(0,0,0,.08)}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .add-icon:hover{background:rgba(0,0,0,.08)}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .left-icon{color:#919191}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node.expand-node{padding-left:0;position:static;height:32px;left:calc(50% - 216px/2);top:0;font-family:Open Sans;font-style:normal;font-weight:400;font-size:14px;line-height:19px;display:flex;align-items:center;color:#1954a9;flex:none;order:0;align-self:stretch;flex-grow:1}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node.expand-node ::ng-deep mat-icon{color:#1954a9}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node.expand-node:hover{background-color:#e5eefb!important}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node.collapse-node{position:static;height:32px;left:calc(50% - 176px/2);top:0;font-family:Open Sans;font-style:normal;font-weight:400;font-size:14px;line-height:19px;display:flex;align-items:center;color:#323232;flex:none;order:0;align-self:stretch;flex-grow:1}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content{display:flex}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .button-icon{width:40px;height:40px;line-height:30px!important;border-radius:50%}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .button-icon:hover{border-radius:50%}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .img-icon{max-height:25px;max-width:25px}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .add-icon{position:absolute;right:-34px}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .add-icon mat-icon{top:3px;right:3px;border-radius:50%;color:rgba(0,0,0,.6)}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .favorite{color:#b13514!important}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .not-favorite{color:rgba(0,0,0,.6)!important}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .btn-favorite{right:6px;color:unset}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .space-icon{position:absolute;top:-5px;left:0}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .span-text{position:relative;overflow:hidden;text-overflow:ellipsis;padding-left:7px;max-width:calc(100% - 56px);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .span-text:after{content:\"\";display:block;clear:both}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node:first-child{margin:0}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node.collapse-node:hover{background:#00000014}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node.collapse-node:active{background:#0000001f}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node.expand-node:active{background:#f2f7fd}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node:hover .span-text{max-width:calc(100% - 96px)}::ng-deep mat-tree.qms-navigation-drawer-container .pr-34{padding-right:34px}.node-preview-item{display:flex;background-color:#0000001f;min-width:272px!important;height:48px!important;margin:0 auto;align-items:center;padding:0 16px}"]
22155
+ template: "\r\n<mat-tree class=\"qms-navigation-drawer-container\" [dataSource]=\"dataSource\" [treeControl]=\"treeControl\" cdkDropList\r\n (cdkDropListDropped)=\"drop($event)\" [cdkDropListDisabled]=\"dragDropListDisabled\">\r\n <!-- This is the tree node template for leaf nodes -->\r\n <mat-tree-node [class.pr-34]=\"showAddIcon\" *matTreeNodeDef=\"let node\" (mouseover)=\"onOver(node)\" matTreeNodePadding matTreeNodePaddingIndent=\"34\"\r\n cdkDrag [cdkDragData]=\"node\" (mouseenter)=\"dragHover(node)\" (mouseleave)=\"dragHoverEnd()\"\r\n (cdkDragStarted)=\"dragStart()\" (cdkDragReleased)=\"dragEnd()\"\r\n [ngClass]=\"{'expand-node' : treeControl.isExpanded(node), 'collapse-node': !treeControl.isExpanded(node), 'active': activeNode == node.id}\">\r\n <div *cdkDragPreview class=\"node-preview-item\">{{ node.name }}</div>\r\n <div *ngIf=\"!node.isReadOnly\" (click)=\"onClickNode(node, true)\" class=\"tree-content\">\r\n <button tabindex=\"-1\" qms-btn-outlined disabled class=\"border-0 bg-transparent\">\r\n <img class=\"img-icon\" [src]=\"faIconPath\" alt=\"\" />\r\n </button>\r\n <div class=\"span-text\">{{ node.name }}</div>\r\n <button tabindex=\"-1\" class=\"button-icon add-icon\"\r\n *ngIf=\"showFavoriteIcon && (node.id === hoverNode.id || node.favorite)\"\r\n (click)=\"addFavoriteNode(node.id, $event)\" (mouseenter)=\"setHoverFavorite(node.id)\"\r\n (mouseleave)=\"setHoverFavorite(null)\" [ngClass]=\"{'btn-favorite': (node.id === hoverNode.id && isHover)}\"\r\n qms-tool-tip=\"{{!node.favorite ? addFavoriteTooltip : deleteFavoriteTooltip}}\" mode=\"dark\" position=\"bottom\"\r\n qms-btn-icon>\r\n <mat-icon class=\"mat-icon-rtl-mirror blur-icon\" [class.favorite]=\"true\"\r\n [class.not-favorite]=\"!node.favorite && node.id === hoverNode.id && isHover\">\r\n {{node.favorite && node.id === hoverNode.id && isHover ? 'star_rate_outline' : ''}}\r\n {{!node.favorite && node.id === hoverNode.id && isHover ? 'star_border' : ''}}\r\n </mat-icon>\r\n </button>\r\n <button tabindex=\"-1\" class=\"button-icon add-icon\" *ngIf=\"node.id === hoverNode.id && showAddIcon && isHover\"\r\n qms-tool-tip=\"{{addNodeTooltip}}\" (click)=\"addNewNode(node.id, $event)\" mode=\"dark\" position=\"bottom\" qms-btn-icon>\r\n <mat-icon class=\"mat-icon-rtl-mirror\">\r\n add\r\n </mat-icon>\r\n </button>\r\n </div>\r\n </mat-tree-node>\r\n <!-- This is the tree node template for expandable nodes -->\r\n <mat-tree-node [class.pr-34]=\"showAddIcon\" *matTreeNodeDef=\"let node;when: hasChild\" (mouseover)=\"onOver(node)\" matTreeNodePadding\r\n matTreeNodePaddingIndent=\"34\" cdkDrag [cdkDragData]=\"node\" (mouseenter)=\"dragHover(node)\"\r\n (mouseleave)=\"dragHoverEnd()\" (cdkDragStarted)=\"dragStart()\" (cdkDragReleased)=\"dragEnd()\"\r\n [ngClass]=\"\r\n {'expand-node' : treeControl.isExpanded(node), 'collapse-node': !treeControl.isExpanded(node), 'active': activeNode == node.id}\">\r\n <div *cdkDragPreview class=\"node-preview-item\">{{ node.name }}</div>\r\n <div *ngIf=\"!node.isReadOnly\" class=\"tree-content\"\r\n (keydown)=\"onKeyDownNode($event, node)\">\r\n <button matTreeNodeToggle (click)=\"onClickNode(node, false)\" tabindex=\"-1\" class=\"button-icon collapse-expand-icon\" qms-btn-icon [attr.aria-label]=\"'toggle ' + node.name\">\r\n <mat-icon class=\"mat-icon-rtl-mirror arrow-icon left-icon\">\r\n {{treeControl.isExpanded(node) ? 'expand_less' : 'expand_more'}}\r\n </mat-icon>\r\n </button>\r\n <div class=\"span-text\" matTreeNodeToggle (click)=\"onClickNode(node, true)\">{{ node.name }}</div>\r\n <button tabindex=\"-1\" class=\"button-icon add-icon\"\r\n qms-tool-tip=\"{{!node.favorite ? addFavoriteTooltip : deleteFavoriteTooltip}}\"\r\n *ngIf=\"showFavoriteIcon && (node.id === hoverNode.id || node.favorite)\"\r\n (click)=\"addFavoriteNode(node.id, $event)\" [ngClass]=\"{'btn-favorite': (node.id === hoverNode.id && isHover)}\"\r\n (mouseenter)=\"setHoverFavorite(node.id)\" (mouseleave)=\"setHoverFavorite(null)\" mode=\"dark\" position=\"below\"\r\n qms-btn-icon>\r\n <mat-icon class=\"mat-icon-rtl-mirror blur-icon\" [class.favorite]=\"true\"\r\n [class.not-favorite]=\"!node.favorite && node.id === hoverNode.id && isHover\">\r\n {{node.favorite && node.id === hoverNode.id && isHover ? 'star_rate_outline' : ''}}\r\n {{!node.favorite && node.id === hoverNode.id && isHover ? 'star_border' : ''}}\r\n </mat-icon>\r\n </button>\r\n <button tabindex=\"-1\" class=\"button-icon add-icon\" *ngIf=\"node.id === hoverNode.id && showAddIcon && isHover\"\r\n qms-tool-tip=\"{{addNodeTooltip}}\" mode=\"dark\" position=\"bottom\" (click)=\"addNewNode(node.id, $event)\" qms-btn-icon>\r\n <mat-icon class=\"mat-icon-rtl-mirror\">\r\n add\r\n </mat-icon>\r\n </button>\r\n </div>\r\n </mat-tree-node>\r\n</mat-tree>\r\n",
22156
+ styles: ["::ng-deep mat-tree.qms-navigation-drawer-container{padding:.25rem!important}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node{min-width:272px!important;height:48px!important}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node{min-height:34px}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node.active{background-color:#f2f7fd;color:#1954a9!important}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node.active img{filter:opacity(.5) drop-shadow(0 0 0 #1954A9)}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node.active:hover{background-color:#e5eefb!important}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content{width:100%;position:relative;align-items:center}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .arrow-icon{color:#00324e}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .collapse-expand-icon{color:#3e57b7}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .collapse-expand-icon:hover{background:rgba(0,0,0,.08)}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .add-icon:hover{background:rgba(0,0,0,.08)}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .left-icon{color:#919191}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node.expand-node{padding-left:0;position:static;height:32px;left:calc(50% - 216px/2);top:0;font-family:Open Sans;font-style:normal;font-weight:400;font-size:14px;line-height:19px;display:flex;align-items:center;color:#1954a9;flex:none;order:0;align-self:stretch;flex-grow:1}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node.expand-node ::ng-deep mat-icon{color:#1954a9}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node.expand-node:hover{background-color:#e5eefb!important}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node.collapse-node{position:static;height:32px;left:calc(50% - 176px/2);top:0;font-family:Open Sans;font-style:normal;font-weight:400;font-size:14px;line-height:19px;display:flex;align-items:center;color:#323232;flex:none;order:0;align-self:stretch;flex-grow:1}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content{display:flex}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .button-icon{width:40px;height:40px;line-height:30px!important;border-radius:50%}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .button-icon:hover{border-radius:50%}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .img-icon{max-height:25px;max-width:25px}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .add-icon{position:absolute;right:-34px}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .add-icon mat-icon{top:3px;right:3px;border-radius:50%;color:rgba(0,0,0,.6)}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .favorite{color:#b13514!important}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .not-favorite{color:rgba(0,0,0,.6)!important}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .btn-favorite{right:6px;color:unset}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .space-icon{position:absolute;top:-5px;left:0}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .span-text{position:relative;overflow:hidden;text-overflow:ellipsis;padding-left:7px;max-width:calc(100% - 56px);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;cursor:pointer}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node .tree-content .span-text:after{content:\"\";display:block;clear:both}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node:first-child{margin:0}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node.collapse-node:hover{background:#00000014}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node.collapse-node:active{background:#0000001f}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node.expand-node:active{background:#f2f7fd}::ng-deep mat-tree.qms-navigation-drawer-container .mat-tree-node:hover .span-text{max-width:calc(100% - 96px)}::ng-deep mat-tree.qms-navigation-drawer-container .pr-34{padding-right:34px}.node-preview-item{display:flex;background-color:#0000001f;min-width:272px!important;height:48px!important;margin:0 auto;align-items:center;padding:0 16px}"]
22042
22157
  },] }
22043
22158
  ];
22044
22159
  QMSNavigationDrawerComponent.ctorParameters = function () { return []; };
@@ -22097,11 +22212,13 @@
22097
22212
  PaginationSize["mobile"] = "mobile";
22098
22213
  })(exports.PaginationSize || (exports.PaginationSize = {}));
22099
22214
  var QMSPaginatorComponent = /** @class */ (function () {
22100
- function QMSPaginatorComponent() {
22215
+ function QMSPaginatorComponent(trans) {
22216
+ this.trans = trans;
22101
22217
  this.sizeMedium = 'medium';
22102
22218
  this.sizeSmall = 'small';
22103
22219
  this.sizeLarge = 'large';
22104
22220
  this.sizeMobile = 'mobile';
22221
+ this.numHidden = 10;
22105
22222
  this.size = exports.PaginationSize.large;
22106
22223
  this._pageSizeOptions = [5, 10, 25, 100];
22107
22224
  this._pageSize = 10;
@@ -22159,6 +22276,11 @@
22159
22276
  configurable: true
22160
22277
  });
22161
22278
  QMSPaginatorComponent.prototype.ngOnInit = function () {
22279
+ var _this = this;
22280
+ var langDefault = 'en';
22281
+ this.trans.getLanguageSubject$.pipe().subscribe(function (res) {
22282
+ _this.LANG = _this.trans.getObjectLang(res || langDefault);
22283
+ });
22162
22284
  this.getNumberOfPages();
22163
22285
  };
22164
22286
  QMSPaginatorComponent.prototype._updateDisplayedPageSizeOptions = function () {
@@ -22272,15 +22394,18 @@
22272
22394
  QMSPaginatorComponent.decorators = [
22273
22395
  { type: i0.Component, args: [{
22274
22396
  selector: 'qms-paginator',
22275
- template: "<div class=\"qms-paginator-outer-container\" [class.size-small]='size == sizeSmall'>\r\n <div class=\"mat-paginator-container\" *ngIf='size != sizeMobile'>\r\n <div class=\"qms-total-result\">\r\n <span>Resultater: {{length}}</span>\r\n </div>\r\n <div class=\"qms-paginator-page-size\" *ngIf='size != sizeSmall'>\r\n <div class=\"qms-pagesize-label\">Rader per side:</div>\r\n <mat-form-field\r\n qms-form\r\n qms-select-input\r\n class=\"qms-form-page-size\"\r\n appearance=\"fill\">\r\n <mat-select\r\n panelClass=\"qms-select-panel\"\r\n [value]=\"pageSize\"\r\n (selectionChange)=\"_changePageSize($event.value)\"\r\n qms-select>\r\n <mat-option *ngFor=\"let item of pageSizeOptions\" [value]=\"item\">\r\n {{ item }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n <div class=\"qms-paginator-page-size\" *ngIf='size != sizeMedium && size != sizeSmall'>\r\n <div class=\"qms-pagesize-label \">Hopp til side:</div>\r\n\r\n <mat-form-field\r\n qms-form\r\n qms-select-input\r\n class=\"qms-form-page-size qms-form-select-page-size\"\r\n appearance=\"fill\">\r\n <mat-select\r\n panelClass=\"qms-select-panel\"\r\n [value]=\"pageIndex\"\r\n (selectionChange)=\"_changePageNumber($event.value)\"\r\n qms-select>\r\n <mat-option *ngFor=\"let item of numberOfPages\" [value]=\"item\">\r\n {{ item }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field> \r\n </div>\r\n <div class=\"qms-paginator-range-actions\">\r\n <button qms-btn-icon color=\"light\" (click)='previousPage()' [disabled]='minPage == pageIndex'>\r\n <mat-icon>chevron_left</mat-icon>\r\n </button>\r\n <ng-container *ngFor='let item of displayNumberOfPages' >\r\n <span *ngIf='item == \"...\"' class=\"qms-3d\">{{item}}</span>\r\n <button *ngIf='item != \"...\"' qms-btn-icon color=\"light\" \r\n [class.selected]='pageIndex == item' [disabled]='pageIndex == item'\r\n (click)='changePage(item)'>\r\n {{item}}\r\n </button>\r\n </ng-container>\r\n \r\n <button qms-btn-icon color=\"light\" (click)='nextPage()' [disabled]='maxpage == pageIndex'>\r\n <mat-icon>chevron_right</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mat-paginator-container-mobile\" *ngIf='size == sizeMobile'>\r\n <div class=\"mat-paginator-container\" *ngIf='size == sizeMobile'>\r\n <div class=\"qms-paginator-range-actions\">\r\n <button qms-btn-icon color=\"light\" (click)='previousPage()' [disabled]='minPage == pageIndex'>\r\n <mat-icon>chevron_left</mat-icon>\r\n </button>\r\n <ng-container *ngFor='let item of displayNumberOfPages' >\r\n <span *ngIf='item == \"...\"' class=\"qms-3d\">{{item}}</span>\r\n <button *ngIf='item != \"...\"' qms-btn-icon color=\"light\" \r\n [class.selected]='pageIndex == item' [disabled]='pageIndex == item'\r\n (click)='changePage(item)'>\r\n {{item}}\r\n </button>\r\n </ng-container>\r\n \r\n <button qms-btn-icon color=\"light\" (click)='nextPage()' [disabled]='maxpage == pageIndex'>\r\n <mat-icon>chevron_right</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"qms-total-result\">\r\n <span>Resultater: {{length}}</span>\r\n </div>\r\n <div style=\"display: flex;\">\r\n <div class=\"qms-paginator-page-size\" *ngIf='size != sizeSmall'>\r\n <div class=\"qms-pagesize-label\">Rader per side:</div>\r\n <mat-form-field\r\n qms-form\r\n qms-select-input\r\n class=\"qms-form-page-size\"\r\n appearance=\"fill\">\r\n <mat-select\r\n panelClass=\"qms-select-panel\"\r\n [value]=\"pageSize\"\r\n (selectionChange)=\"_changePageSize($event.value)\"\r\n qms-select>\r\n <mat-option *ngFor=\"let item of pageSizeOptions\" [value]=\"item\">\r\n {{ item }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n <div class=\"qms-paginator-page-size\" *ngIf='size != sizeMedium && size != sizeSmall'>\r\n <div class=\"qms-pagesize-label \">Hopp til side:</div>\r\n <mat-form-field\r\n qms-form\r\n qms-select-input\r\n class=\"qms-form-page-size qms-form-select-page-size\"\r\n appearance=\"fill\">\r\n <mat-select\r\n panelClass=\"qms-select-panel\"\r\n [value]=\"pageIndex\"\r\n (selectionChange)=\"_changePageNumber($event.value)\"\r\n qms-select>\r\n <mat-option *ngFor=\"let item of numberOfPages\" [value]=\"item\">\r\n {{ item }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field> \r\n </div>\r\n </div>\r\n \r\n </div>\r\n \r\n</div>",
22397
+ template: "<div class=\"qms-paginator-outer-container\" [class.size-small]='size == sizeSmall' [class.d-none]='numHidden > length'>\r\n <div class=\"mat-paginator-container\" *ngIf='size != sizeMobile'>\r\n <div class=\"qms-total-result\">\r\n <span>{{LANG.RESULTS}}: {{length}}</span>\r\n </div>\r\n <div class=\"qms-paginator-page-size\" *ngIf='size != sizeSmall'>\r\n <div class=\"qms-pagesize-label\">{{LANG.ROW_PER_PAGE}}:</div>\r\n <mat-form-field\r\n qms-form\r\n qms-select-input\r\n class=\"qms-form-page-size\"\r\n appearance=\"fill\">\r\n <mat-select\r\n panelClass=\"qms-select-panel\"\r\n [value]=\"pageSize\"\r\n (selectionChange)=\"_changePageSize($event.value)\"\r\n qms-select>\r\n <mat-option *ngFor=\"let item of pageSizeOptions\" [value]=\"item\">\r\n {{ item }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n <div class=\"qms-paginator-page-size\" *ngIf='size != sizeMedium && size != sizeSmall'>\r\n <div class=\"qms-pagesize-label \">{{LANG.JUM_TO_PAGE}}:</div>\r\n\r\n <mat-form-field\r\n qms-form\r\n qms-select-input\r\n class=\"qms-form-page-size qms-form-select-page-size\"\r\n appearance=\"fill\">\r\n <mat-select\r\n panelClass=\"qms-select-panel\"\r\n [value]=\"pageIndex\"\r\n (selectionChange)=\"_changePageNumber($event.value)\"\r\n qms-select>\r\n <mat-option *ngFor=\"let item of numberOfPages\" [value]=\"item\">\r\n {{ item }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field> \r\n </div>\r\n <div class=\"qms-paginator-range-actions\">\r\n <button qms-btn-icon color=\"light\" (click)='previousPage()' [disabled]='minPage == pageIndex'>\r\n <mat-icon>chevron_left</mat-icon>\r\n </button>\r\n <ng-container *ngFor='let item of displayNumberOfPages' >\r\n <span *ngIf='item == \"...\"' class=\"qms-3d\">{{item}}</span>\r\n <button *ngIf='item != \"...\"' qms-btn-icon color=\"light\" \r\n [class.selected]='pageIndex == item' [disabled]='pageIndex == item'\r\n (click)='changePage(item)'>\r\n {{item}}\r\n </button>\r\n </ng-container>\r\n \r\n <button qms-btn-icon color=\"light\" (click)='nextPage()' [disabled]='maxpage == pageIndex'>\r\n <mat-icon>chevron_right</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mat-paginator-container-mobile\" *ngIf='size == sizeMobile'>\r\n <div class=\"mat-paginator-container\" *ngIf='size == sizeMobile'>\r\n <div class=\"qms-paginator-range-actions\">\r\n <button qms-btn-icon color=\"light\" (click)='previousPage()' [disabled]='minPage == pageIndex'>\r\n <mat-icon>chevron_left</mat-icon>\r\n </button>\r\n <ng-container *ngFor='let item of displayNumberOfPages' >\r\n <span *ngIf='item == \"...\"' class=\"qms-3d\">{{item}}</span>\r\n <button *ngIf='item != \"...\"' qms-btn-icon color=\"light\" \r\n [class.selected]='pageIndex == item' [disabled]='pageIndex == item'\r\n (click)='changePage(item)'>\r\n {{item}}\r\n </button>\r\n </ng-container>\r\n \r\n <button qms-btn-icon color=\"light\" (click)='nextPage()' [disabled]='maxpage == pageIndex'>\r\n <mat-icon>chevron_right</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"qms-total-result\">\r\n <span>{{LANG.RESULTS}}: {{length}}</span>\r\n </div>\r\n <div style=\"display: flex;\">\r\n <div class=\"qms-paginator-page-size\" *ngIf='size != sizeSmall'>\r\n <div class=\"qms-pagesize-label\">{{LANG.ROW_PER_PAGE}}:</div>\r\n <mat-form-field\r\n qms-form\r\n qms-select-input\r\n class=\"qms-form-page-size\"\r\n appearance=\"fill\">\r\n <mat-select\r\n panelClass=\"qms-select-panel\"\r\n [value]=\"pageSize\"\r\n (selectionChange)=\"_changePageSize($event.value)\"\r\n qms-select>\r\n <mat-option *ngFor=\"let item of pageSizeOptions\" [value]=\"item\">\r\n {{ item }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n <div class=\"qms-paginator-page-size\" *ngIf='size != sizeMedium && size != sizeSmall'>\r\n <div class=\"qms-pagesize-label \">{{LANG.JUM_TO_PAGE}}:</div>\r\n <mat-form-field\r\n qms-form\r\n qms-select-input\r\n class=\"qms-form-page-size qms-form-select-page-size\"\r\n appearance=\"fill\">\r\n <mat-select\r\n panelClass=\"qms-select-panel\"\r\n [value]=\"pageIndex\"\r\n (selectionChange)=\"_changePageNumber($event.value)\"\r\n qms-select>\r\n <mat-option *ngFor=\"let item of numberOfPages\" [value]=\"item\">\r\n {{ item }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field> \r\n </div>\r\n </div>\r\n \r\n </div>\r\n \r\n</div>",
22276
22398
  host: {
22277
22399
  'class': 'qms-paginator'
22278
22400
  },
22279
22401
  styles: ["::ng-deep .qms-paginator{display:block}::ng-deep .qms-paginator .qms-paginator-outer-container{display:flex}::ng-deep .qms-paginator .mat-paginator-container{display:flex;align-items:center;justify-content:flex-end;padding:0 8px;flex-wrap:wrap-reverse;width:100%}::ng-deep .qms-paginator .mat-paginator-container .qms-btn-icon{width:40px;height:40px;line-height:40px}::ng-deep .qms-paginator .mat-paginator-container .mat-select .mat-select-arrow{margin-top:20px}::ng-deep .qms-paginator .mat-paginator-container .qms-total-result{margin-right:24px;margin-bottom:20px}::ng-deep .qms-paginator .mat-paginator-container .qms-total-result span{font-family:Open Sans;font-weight:400;font-size:14px;line-height:22px;color:rgba(0,0,0,.6)}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-page-size{margin-right:24px;display:flex;align-items:baseline}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-page-size .qms-pagesize-label{font-weight:400;font-size:14px;line-height:22px;color:#323232;font-family:Open Sans;font-style:normal;margin-right:8px}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-page-size .qms-form-page-size .mat-form-field-flex{width:80px}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-page-size .qms-form-select-page-size .mat-form-field-flex{width:51px;padding-left:9px;padding-right:5px}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-page-size .jump-page .mat-form-field-wrapper .mat-form-field-flex{width:55px}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-page-size .mat-form-field-flex{height:40px}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-page-size .mat-form-field-flex .mat-form-field-infix{padding-top:4px;border-top:0;padding-bottom:0;height:25px}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-range-actions{display:flex;align-items:center;margin-bottom:15px}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-range-actions .selected{background-color:#e5eefb;color:#1954a9}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-range-actions .qms-3d{font-weight:600;font-size:14px;line-height:22px;color:#323232}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-range-actions button:not(.qms-btn-disabled) .qms-btn-icon-wrapper{color:#323232}::ng-deep .qms-paginator .mat-paginator-container-mobile .mat-select .mat-select-arrow{margin-top:20px}::ng-deep .qms-paginator .mat-paginator-container-mobile .qms-total-result{margin-bottom:16px}::ng-deep .qms-paginator .mat-paginator-container-mobile .qms-total-result span{font-family:Open Sans;font-style:normal;font-weight:400;font-size:12px;line-height:16px;color:rgba(0,0,0,.6)}::ng-deep .qms-paginator .mat-paginator-container-mobile .mat-paginator-container{justify-content:flex-start}::ng-deep .qms-paginator .mat-paginator-container-mobile .qms-paginator-page-size{margin-right:24px;display:flex;align-items:baseline}::ng-deep .qms-paginator .mat-paginator-container-mobile .qms-paginator-page-size .qms-pagesize-label{font-weight:400;font-size:12px;line-height:22px;color:#323232;font-family:Open Sans;font-style:normal;margin-right:8px}::ng-deep .qms-paginator .mat-paginator-container-mobile .qms-paginator-page-size .qms-form-page-size .mat-form-field-flex{width:80px}::ng-deep .qms-paginator .mat-paginator-container-mobile .qms-paginator-page-size .qms-form-select-page-size .mat-form-field-flex{width:51px;padding-left:9px;padding-right:5px}::ng-deep .qms-paginator .mat-paginator-container-mobile .qms-paginator-page-size .jump-page .mat-form-field-wrapper .mat-form-field-flex{width:55px}::ng-deep .qms-paginator .mat-paginator-container-mobile .qms-paginator-page-size .mat-form-field-flex{height:40px}::ng-deep .qms-paginator .mat-paginator-container-mobile .qms-paginator-page-size .mat-form-field-flex .mat-form-field-infix{padding-top:4px;border-top:0;padding-bottom:0;height:25px}::ng-deep .qms-paginator .size-small .mat-paginator-container{justify-content:flex-start}"]
22280
22402
  },] }
22281
22403
  ];
22282
- QMSPaginatorComponent.ctorParameters = function () { return []; };
22404
+ QMSPaginatorComponent.ctorParameters = function () { return [
22405
+ { type: TranslateLibraryService }
22406
+ ]; };
22283
22407
  QMSPaginatorComponent.propDecorators = {
22408
+ numHidden: [{ type: i0.Input }],
22284
22409
  size: [{ type: i0.Input }],
22285
22410
  pageSizeOptions: [{ type: i0.Input }],
22286
22411
  pageSize: [{ type: i0.Input }],
@@ -22415,6 +22540,10 @@
22415
22540
  exports.QMSComment = QMSComment;
22416
22541
  exports.QMSConfirmDialog = QMSConfirmDialog;
22417
22542
  exports.QMSDialogConfig = QMSDialogConfig;
22543
+ exports.QMSDialogContainer = QMSDialogContainer;
22544
+ exports.QMSDialogContent = QMSDialogContent;
22545
+ exports.QMSDialogFooter = QMSDialogFooter;
22546
+ exports.QMSDialogHeader = QMSDialogHeader;
22418
22547
  exports.QMSDrawerContentDirective = QMSDrawerContentDirective;
22419
22548
  exports.QMSDrawerDirective = QMSDrawerDirective;
22420
22549
  exports.QMSDrawerHeaderActionDirective = QMSDrawerHeaderActionDirective;