qms-angular 2.0.6 → 2.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/components/dialog/dialog.mjs +1 -4
- package/esm2022/lib/components/qms-nav-drawer/qms-nav-drawer.component.mjs +3 -3
- package/esm2022/lib/components/qms-paginator/qms-paginator.component.mjs +3 -3
- package/esm2022/lib/components/qms-stepper/qms-stepper.component.mjs +3 -3
- package/esm2022/lib/components/select-access-dialog/model/select-access-config.model.mjs +2 -1
- package/esm2022/lib/components/select-access-dialog/model/select-access-data.mjs +3 -1
- package/esm2022/lib/components/select-access-dialog/select-access-dialog.component.mjs +90 -15
- package/esm2022/lib/components/select-department-tree/select-department-tree.component.mjs +3 -3
- package/esm2022/lib/components/select-process-data-tree/select-process-data-tree.component.mjs +3 -3
- package/fesm2022/qms-angular.mjs +102 -27
- package/fesm2022/qms-angular.mjs.map +1 -1
- package/lib/components/dialog/dialog.d.ts +2 -3
- package/lib/components/select-access-dialog/model/select-access-config.model.d.ts +1 -0
- package/lib/components/select-access-dialog/model/select-access-data.d.ts +2 -0
- package/lib/components/select-access-dialog/select-access-dialog.component.d.ts +8 -1
- package/package.json +1 -1
- package/src/lib/components/select-access-dialog/select-access-dialog.component.scss +9 -8
- package/src/themes/core/_form.scss +2 -2
- package/src/themes/core/_tab.scss +61 -3
package/fesm2022/qms-angular.mjs
CHANGED
|
@@ -2552,9 +2552,6 @@ class QMSConfirmDialog {
|
|
|
2552
2552
|
console.log(data);
|
|
2553
2553
|
this.info = { ...data };
|
|
2554
2554
|
}
|
|
2555
|
-
ngAfterViewInit() {
|
|
2556
|
-
throw new Error('Method not implemented.');
|
|
2557
|
-
}
|
|
2558
2555
|
ngOnInit() {
|
|
2559
2556
|
}
|
|
2560
2557
|
save() {
|
|
@@ -33834,11 +33831,11 @@ class QmsStepperComponent {
|
|
|
33834
33831
|
this.selectionChangeEvent.emit(this.currentStep);
|
|
33835
33832
|
}
|
|
33836
33833
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: QmsStepperComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
33837
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: QmsStepperComponent, selector: "app-qms-stepper", inputs: { steps: "steps", width: "width", height: "height", isHorizontal: "isHorizontal", currentStep: "currentStep", labelPosition: "labelPosition" }, outputs: { selectionChangeEvent: "selectionChangeEvent" }, viewQueries: [{ propertyName: "stepper", first: true, predicate: ["stepper"], descendants: true }], ngImport: i0, template: "<div class=\"qms-stepper-container\">\n <div *ngIf=\"isHorizontal\">\n <mat-horizontal-stepper [style.width.px]=\"width\" labelPosition=\"{{labelPosition}}\" #stepper\n (selectionChange)=\"changeStep($event.selectedIndex)\" class=\"overflow-auto\" [selectedIndex]=\"currentStep\">\n <mat-step *ngFor=\"let step of steps; let i = index;\" [completed]=\"false\"\n [aria-labelledby]=\"step.disabled ? 'disabled' : 'step-item'\">\n <ng-template matStepLabel>\n <span tabindex=\"0\" (keydown.enter)=\"changeStep(i)\" class=\"title-step\"
|
|
33834
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: QmsStepperComponent, selector: "app-qms-stepper", inputs: { steps: "steps", width: "width", height: "height", isHorizontal: "isHorizontal", currentStep: "currentStep", labelPosition: "labelPosition" }, outputs: { selectionChangeEvent: "selectionChangeEvent" }, viewQueries: [{ propertyName: "stepper", first: true, predicate: ["stepper"], descendants: true }], ngImport: i0, template: "<div class=\"qms-stepper-container\">\n <div *ngIf=\"isHorizontal\">\n <mat-horizontal-stepper [style.width.px]=\"width\" labelPosition=\"{{labelPosition}}\" #stepper\n (selectionChange)=\"changeStep($event.selectedIndex)\" class=\"overflow-auto\" [selectedIndex]=\"currentStep\">\n <mat-step *ngFor=\"let step of steps; let i = index;\" [completed]=\"false\"\n [aria-labelledby]=\"step.disabled ? 'disabled' : 'step-item'\">\n <ng-template matStepLabel>\n <span tabindex=\"0\" (keydown.enter)=\"changeStep(i)\" class=\"title-step\"\n [ngClass]=\"{ 'is-deleted-field': step.isDeleted }\">{{step.name}}<span\n *ngIf=\"step.isMandatory && !step.isDeleted\" class=\"is-mandatory-field\"> *</span></span>\n </ng-template>\n <ng-template matStepContent>\n </ng-template>\n </mat-step>\n <ng-template matStepperIcon=\"edit\">\n {{stepper.selectedIndex + 1}}\n </ng-template>\n </mat-horizontal-stepper>\n </div>\n <div *ngIf=\"!isHorizontal\">\n <mat-vertical-stepper [style.height.px]=\"height\" #stepper (selectionChange)=\"changeStep($event.selectedIndex)\"\n [selectedIndex]=\"currentStep\" class=\"overflow-auto\">\n <mat-step *ngFor=\"let step of steps; let i = index;\" [completed]=\"false\"\n [aria-label]=\"step.disabled ? 'disabled' : 'step-item'\">\n <ng-template matStepLabel>\n <span tabindex=\"0\" (keydown.enter)=\"changeStep(i)\" class=\"title-step\"\n [ngClass]=\"{ 'is-deleted-field': step.isDeleted }\">{{step.name}}<span\n *ngIf=\"step.isMandatory && !step.isDeleted\" class=\"is-mandatory-field\"> *</span></span>\n </ng-template>\n <ng-template matStepContent>\n </ng-template>\n </mat-step>\n <ng-template matStepperIcon=\"edit\">\n <span>{{stepper.selectedIndex + 1}}</span>\n </ng-template>\n </mat-vertical-stepper>\n </div>\n</div>", styles: [".qms-stepper-container ::ng-deep .mat-step-header[aria-labelledby=step-item]{height:22px!important;padding:8px 12px;left:0;top:0;border-radius:4px;color:#fff}.qms-stepper-container ::ng-deep .mat-step-header[aria-labelledby=step-item].mat-horizontal-stepper-header{min-width:fit-content}.qms-stepper-container ::ng-deep .mat-step-header[aria-labelledby=step-item].mat-vertical-stepper-header{width:156px}.qms-stepper-container ::ng-deep .mat-step-header .mat-step-icon{background:#0009;margin-right:14px}.qms-stepper-container ::ng-deep .mat-step-header .mat-step-icon-selected{background-color:#1954a9!important;color:#fff}.qms-stepper-container ::ng-deep .mat-step-header[aria-selected=true] .title-step{font-weight:600!important;outline:none!important;-webkit-font-smoothing:antialiased!important}.qms-stepper-container ::ng-deep mat-step-header:active{background:#e5eefb}.qms-stepper-container ::ng-deep mat-step-header:active mat-step-label{color:#fff}.qms-stepper-container ::ng-deep mat-step-header:active mat-step-icon{color:#323232;background:#0009}.qms-stepper-container ::ng-deep mat-step-header .mat-ripple-element{background-color:#e5eefb4d}.qms-stepper-container ::ng-deep mat-step-header:hover{background:#f2f7fd}.qms-stepper-container ::ng-deep mat-step-header:hover mat-step-label{color:#fff}.qms-stepper-container ::ng-deep mat-step-header:hover mat-step-icon{color:#323232;background:#0009}.qms-stepper-container ::ng-deep .mat-step-header[aria-labelledby=disabled]{pointer-events:none!important;cursor:not-allowed;opacity:.6;height:22px!important;width:156px;left:0;top:0;border-radius:4px;padding:8px 12px}.qms-stepper-container ::ng-deep mat-step-header:focus{border:2px solid rgb(25,84,169)}.qms-stepper-container ::ng-deep mat-step-header:focus mat-step-label{color:#fff}.qms-stepper-container ::ng-deep mat-step-header:focus mat-step-icon{color:#323232;background:#0009}.qms-stepper-container ::ng-deep mat-step-header.mat-step-header.cdk-keyboard-focused,.qms-stepper-container ::ng-deep mat-step-header.mat-step-header.cdk-program-focused{border:3px solid rgb(25,84,169);background:#fff}.qms-stepper-container ::ng-deep mat-step-header:focus:not(:focus-visible){border:none}.qms-stepper-container ::ng-deep .mat-step-header[aria-labelledby=active]{pointer-events:none!important;cursor:not-allowed;opacity:.6}.qms-stepper-container .title-step{font-family:Open Sans;font-size:14px;font-style:normal;font-weight:400;letter-spacing:0px;text-align:center;color:#323232;outline:none!important}.qms-stepper-container ::ng-deep .mat-step-icon{width:24px;height:24px}.qms-stepper-container ::ng-deep .mat-step-icon .mat-step-icon-content{font-family:Open Sans;font-size:14px;font-style:normal;font-weight:400;letter-spacing:0px;text-align:center;color:#fff;padding-top:1px}.qms-stepper-container ::ng-deep .mat-stepper-vertical-line:before{border-left-width:0;border-right-width:0}.qms-stepper-container ::ng-deep .mat-stepper-vertical-line{margin-left:23px;background:#0000001f;height:30px;width:1px}.qms-stepper-container ::ng-deep .mat-stepper-horizontal-line{height:1px;width:22px!important;left:0;top:18px;border-radius:0;margin:8px;background:#0000001f;max-width:22px!important}.qms-stepper-container .is-mandatory-field{color:#002e68!important}.qms-stepper-container .is-deleted-field{color:#ef1d34!important}\n"], dependencies: [{ kind: "component", type: i1$6.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i1$6.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i1$6.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { kind: "directive", type: i1$6.MatStepperIcon, selector: "ng-template[matStepperIcon]", inputs: ["matStepperIcon"] }, { kind: "directive", type: i1$6.MatStepContent, selector: "ng-template[matStepContent]" }, { kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
33838
33835
|
}
|
|
33839
33836
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: QmsStepperComponent, decorators: [{
|
|
33840
33837
|
type: Component,
|
|
33841
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-qms-stepper', template: "<div class=\"qms-stepper-container\">\n <div *ngIf=\"isHorizontal\">\n <mat-horizontal-stepper [style.width.px]=\"width\" labelPosition=\"{{labelPosition}}\" #stepper\n (selectionChange)=\"changeStep($event.selectedIndex)\" class=\"overflow-auto\" [selectedIndex]=\"currentStep\">\n <mat-step *ngFor=\"let step of steps; let i = index;\" [completed]=\"false\"\n [aria-labelledby]=\"step.disabled ? 'disabled' : 'step-item'\">\n <ng-template matStepLabel>\n <span tabindex=\"0\" (keydown.enter)=\"changeStep(i)\" class=\"title-step\"
|
|
33838
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-qms-stepper', template: "<div class=\"qms-stepper-container\">\n <div *ngIf=\"isHorizontal\">\n <mat-horizontal-stepper [style.width.px]=\"width\" labelPosition=\"{{labelPosition}}\" #stepper\n (selectionChange)=\"changeStep($event.selectedIndex)\" class=\"overflow-auto\" [selectedIndex]=\"currentStep\">\n <mat-step *ngFor=\"let step of steps; let i = index;\" [completed]=\"false\"\n [aria-labelledby]=\"step.disabled ? 'disabled' : 'step-item'\">\n <ng-template matStepLabel>\n <span tabindex=\"0\" (keydown.enter)=\"changeStep(i)\" class=\"title-step\"\n [ngClass]=\"{ 'is-deleted-field': step.isDeleted }\">{{step.name}}<span\n *ngIf=\"step.isMandatory && !step.isDeleted\" class=\"is-mandatory-field\"> *</span></span>\n </ng-template>\n <ng-template matStepContent>\n </ng-template>\n </mat-step>\n <ng-template matStepperIcon=\"edit\">\n {{stepper.selectedIndex + 1}}\n </ng-template>\n </mat-horizontal-stepper>\n </div>\n <div *ngIf=\"!isHorizontal\">\n <mat-vertical-stepper [style.height.px]=\"height\" #stepper (selectionChange)=\"changeStep($event.selectedIndex)\"\n [selectedIndex]=\"currentStep\" class=\"overflow-auto\">\n <mat-step *ngFor=\"let step of steps; let i = index;\" [completed]=\"false\"\n [aria-label]=\"step.disabled ? 'disabled' : 'step-item'\">\n <ng-template matStepLabel>\n <span tabindex=\"0\" (keydown.enter)=\"changeStep(i)\" class=\"title-step\"\n [ngClass]=\"{ 'is-deleted-field': step.isDeleted }\">{{step.name}}<span\n *ngIf=\"step.isMandatory && !step.isDeleted\" class=\"is-mandatory-field\"> *</span></span>\n </ng-template>\n <ng-template matStepContent>\n </ng-template>\n </mat-step>\n <ng-template matStepperIcon=\"edit\">\n <span>{{stepper.selectedIndex + 1}}</span>\n </ng-template>\n </mat-vertical-stepper>\n </div>\n</div>", styles: [".qms-stepper-container ::ng-deep .mat-step-header[aria-labelledby=step-item]{height:22px!important;padding:8px 12px;left:0;top:0;border-radius:4px;color:#fff}.qms-stepper-container ::ng-deep .mat-step-header[aria-labelledby=step-item].mat-horizontal-stepper-header{min-width:fit-content}.qms-stepper-container ::ng-deep .mat-step-header[aria-labelledby=step-item].mat-vertical-stepper-header{width:156px}.qms-stepper-container ::ng-deep .mat-step-header .mat-step-icon{background:#0009;margin-right:14px}.qms-stepper-container ::ng-deep .mat-step-header .mat-step-icon-selected{background-color:#1954a9!important;color:#fff}.qms-stepper-container ::ng-deep .mat-step-header[aria-selected=true] .title-step{font-weight:600!important;outline:none!important;-webkit-font-smoothing:antialiased!important}.qms-stepper-container ::ng-deep mat-step-header:active{background:#e5eefb}.qms-stepper-container ::ng-deep mat-step-header:active mat-step-label{color:#fff}.qms-stepper-container ::ng-deep mat-step-header:active mat-step-icon{color:#323232;background:#0009}.qms-stepper-container ::ng-deep mat-step-header .mat-ripple-element{background-color:#e5eefb4d}.qms-stepper-container ::ng-deep mat-step-header:hover{background:#f2f7fd}.qms-stepper-container ::ng-deep mat-step-header:hover mat-step-label{color:#fff}.qms-stepper-container ::ng-deep mat-step-header:hover mat-step-icon{color:#323232;background:#0009}.qms-stepper-container ::ng-deep .mat-step-header[aria-labelledby=disabled]{pointer-events:none!important;cursor:not-allowed;opacity:.6;height:22px!important;width:156px;left:0;top:0;border-radius:4px;padding:8px 12px}.qms-stepper-container ::ng-deep mat-step-header:focus{border:2px solid rgb(25,84,169)}.qms-stepper-container ::ng-deep mat-step-header:focus mat-step-label{color:#fff}.qms-stepper-container ::ng-deep mat-step-header:focus mat-step-icon{color:#323232;background:#0009}.qms-stepper-container ::ng-deep mat-step-header.mat-step-header.cdk-keyboard-focused,.qms-stepper-container ::ng-deep mat-step-header.mat-step-header.cdk-program-focused{border:3px solid rgb(25,84,169);background:#fff}.qms-stepper-container ::ng-deep mat-step-header:focus:not(:focus-visible){border:none}.qms-stepper-container ::ng-deep .mat-step-header[aria-labelledby=active]{pointer-events:none!important;cursor:not-allowed;opacity:.6}.qms-stepper-container .title-step{font-family:Open Sans;font-size:14px;font-style:normal;font-weight:400;letter-spacing:0px;text-align:center;color:#323232;outline:none!important}.qms-stepper-container ::ng-deep .mat-step-icon{width:24px;height:24px}.qms-stepper-container ::ng-deep .mat-step-icon .mat-step-icon-content{font-family:Open Sans;font-size:14px;font-style:normal;font-weight:400;letter-spacing:0px;text-align:center;color:#fff;padding-top:1px}.qms-stepper-container ::ng-deep .mat-stepper-vertical-line:before{border-left-width:0;border-right-width:0}.qms-stepper-container ::ng-deep .mat-stepper-vertical-line{margin-left:23px;background:#0000001f;height:30px;width:1px}.qms-stepper-container ::ng-deep .mat-stepper-horizontal-line{height:1px;width:22px!important;left:0;top:18px;border-radius:0;margin:8px;background:#0000001f;max-width:22px!important}.qms-stepper-container .is-mandatory-field{color:#002e68!important}.qms-stepper-container .is-deleted-field{color:#ef1d34!important}\n"] }]
|
|
33842
33839
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { stepper: [{
|
|
33843
33840
|
type: ViewChild,
|
|
33844
33841
|
args: ['stepper', { static: false }]
|
|
@@ -35394,7 +35391,7 @@ class QMSPaginatorComponent {
|
|
|
35394
35391
|
provide: MAT_SELECT_CONFIG,
|
|
35395
35392
|
useValue: { overlayPanelClass: 'customCDKpanel' },
|
|
35396
35393
|
},
|
|
35397
|
-
], ngImport: i0, template: "<div class=\"qms-paginator-outer-container\" [class.size-small]='size == sizeSmall' [class.d-none]='numHidden > length'>\n <div class=\"mat-paginator-container\" *ngIf='size != sizeMobile'>\n <div class=\"qms-total-result\" [class.mr-b-size-small]='size == sizeSmall'>\n <span>{{LANG.RESULTS}}: {{length}}</span>\n </div>\n <div class=\"qms-paginator-page-size\" *ngIf='size != sizeSmall'>\n <div class=\"qms-pagesize-label\">{{LANG.ROW_PER_PAGE}}:</div>\n <mat-form-field qms-form qms-select-input class=\"qms-form-page-size\" appearance=\"fill\">\n <mat-select [panelClass]=\"overlayClass\" [value]=\"pageSize\"\n (selectionChange)=\"_changePageSize($event.value)\" qms-select disableOptionCentering>\n <mat-option *ngFor=\"let item of pageSizeOptions\" [value]=\"item\">\n {{ item }}\n </mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n <div class=\"qms-paginator-page-size\" *ngIf='size != sizeMedium && size != sizeSmall'>\n <div class=\"qms-pagesize-label \">{{LANG.JUM_TO_PAGE}}:</div>\n\n <mat-form-field qms-form qms-select-input class=\"qms-form-page-size qms-form-select-page-size\"\n appearance=\"fill\">\n <mat-select [panelClass]=\"overlayClass\" [value]=\"pageIndex\"\n (selectionChange)=\"_changePageNumber($event.value)\" qms-select disableOptionCentering>\n <mat-option *ngFor=\"let item of numberOfPages\" [value]=\"item\">\n {{ item }}\n </mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n <div class=\"qms-paginator-range-actions\">\n <ul class=\"nav-list-pagination\">\n <li class=\"nav-item\">\n <button qms-btn-icon color=\"light\" (click)='previousPage()' [disabled]='minPage == pageIndex'>\n <mat-icon>chevron_left</mat-icon>\n </button>\n </li>\n <ng-container *ngFor='let item of displayNumberOfPages'>\n <li class=\"nav-item\"> <span *ngIf='item == \"...\"' class=\"qms-3d\">{{item}}</span></li>\n <li class=\"nav-item\">\n <button *ngIf='item != \"...\"' qms-btn-icon color=\"light\" [class.selected]='pageIndex == item'\n [disabled]='pageIndex == item' (click)='changePage(item)'>\n {{item}}\n </button>\n </li>\n </ng-container>\n <li class=\"nav-item\">\n <button qms-btn-icon color=\"light\" (click)='nextPage()' [disabled]='maxpage == pageIndex'>\n <mat-icon>chevron_right</mat-icon>\n </button>\n </li>\n </ul>\n </div>\n </div>\n\n <div class=\"mat-paginator-container-mobile\" *ngIf='size == sizeMobile'>\n <div class=\"mat-paginator-container\" *ngIf='size == sizeMobile'>\n <div class=\"qms-paginator-range-actions\">\n <ul class=\"nav-list-pagination\">\n <li class=\"nav-item\">\n <button qms-btn-icon color=\"light\" (click)='previousPage()' [disabled]='minPage == pageIndex'>\n <mat-icon>chevron_left</mat-icon>\n </button>\n </li>\n <ng-container *ngFor='let item of displayNumberOfPages'>\n <li class=\"nav-item\"> <span *ngIf='item == \"...\"' class=\"qms-3d\">{{item}}</span></li>\n <li class=\"nav-item\">\n <button *ngIf='item != \"...\"' qms-btn-icon color=\"light\"\n [class.selected]='pageIndex == item' [disabled]='pageIndex == item'\n (click)='changePage(item)'>\n {{item}}\n </button>\n </li>\n </ng-container>\n <li class=\"nav-item\">\n <button qms-btn-icon color=\"light\" (click)='nextPage()' [disabled]='maxpage == pageIndex'>\n <mat-icon>chevron_right</mat-icon>\n </button>\n </li>\n </ul>\n </div>\n </div>\n <div class=\"qms-total-result\">\n <span>{{LANG.RESULTS}}: {{length}}</span>\n </div>\n <div style=\"display: flex;\">\n <div class=\"qms-paginator-page-size\" *ngIf='size != sizeSmall'>\n <div class=\"qms-pagesize-label\">{{LANG.ROW_PER_PAGE}}:</div>\n <mat-form-field qms-form qms-select-input class=\"qms-form-page-size\" appearance=\"fill\">\n <mat-select [panelClass]=\"overlayClass\" [value]=\"pageSize\"\n (selectionChange)=\"_changePageSize($event.value)\" qms-select>\n <mat-option *ngFor=\"let item of pageSizeOptions\" [value]=\"item\">\n {{ item }}\n </mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n <div class=\"qms-paginator-page-size\" *ngIf='size != sizeMedium && size != sizeSmall'>\n <div class=\"qms-pagesize-label \">{{LANG.JUM_TO_PAGE}}:</div>\n <mat-form-field qms-form qms-select-input class=\"qms-form-page-size qms-form-select-page-size\"\n appearance=\"fill\">\n <mat-select [panelClass]=\"overlayClass\" [value]=\"pageIndex\"\n (selectionChange)=\"_changePageNumber($event.value)\" qms-select>\n <mat-option *ngFor=\"let item of numberOfPages\" [value]=\"item\">\n {{ item }}\n </mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n </div>\n\n </div>\n\n</div>", styles: ["::ng-deep .customCDKpanel{transform:none!important}::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-mdc-select .mat-select-arrow{margin-top:20px}::ng-deep .qms-paginator .mat-paginator-container .qms-total-result{margin-right:24px;margin-bottom:21px}::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:#0009}::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-mdc-text-field-wrapper{width:70px}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-page-size .qms-form-select-page-size .mat-mdc-text-field-wrapper{width:60px;padding-left:9px;padding-right:5px}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-page-size .jump-page .mat-form-field-wrapper{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:0px;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 .qms-paginator-range-actions .nav-list-pagination{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0;margin:0;list-style:none}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-range-actions .nav-list-pagination .nav-item button.qms-btn-icon{line-height:1.43;letter-spacing:.01071em;border-radius:20px;text-align:center;box-sizing:border-box;min-width:40px;width:unset;height:40px;padding:0 5px}::ng-deep .qms-paginator .mat-paginator-container-mobile .mat-mdc-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:#0009}::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-mdc-text-field-wrapper{width:70px}::ng-deep .qms-paginator .mat-paginator-container-mobile .qms-paginator-page-size .qms-form-select-page-size .mat-mdc-text-field-wrapper{width:60px;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:0px;padding-bottom:0;height:25px}::ng-deep .qms-paginator .size-small .mat-mdc-paginator-container{justify-content:flex-start}::ng-deep .qms-paginator .mr-b-size-small{margin-bottom:17px!important}::ng-deep div.mat-mdc-select-panel{min-width:fit-content!important}\n"], dependencies: [{ kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i13.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i14.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: QMSFormFieldDirective, selector: "[qms-form]" }, { kind: "component", type: QMSButtonIcon, selector: "button[qms-btn-icon]", inputs: ["disabled", "color", "active"], exportAs: ["qmsButtonIcon"] }] }); }
|
|
35394
|
+
], ngImport: i0, template: "<div class=\"qms-paginator-outer-container\" [class.size-small]='size == sizeSmall' [class.d-none]='numHidden > length'>\n <div class=\"mat-paginator-container\" *ngIf='size != sizeMobile'>\n <div class=\"qms-total-result\" [class.mr-b-size-small]='size == sizeSmall'>\n <span>{{LANG.RESULTS}}: {{length}}</span>\n </div>\n <div class=\"qms-paginator-page-size\" *ngIf='size != sizeSmall'>\n <div class=\"qms-pagesize-label\">{{LANG.ROW_PER_PAGE}}:</div>\n <mat-form-field qms-form qms-select-input class=\"qms-form-page-size\" appearance=\"fill\">\n <mat-select [panelClass]=\"overlayClass\" [value]=\"pageSize\"\n (selectionChange)=\"_changePageSize($event.value)\" qms-select disableOptionCentering>\n <mat-option *ngFor=\"let item of pageSizeOptions\" [value]=\"item\">\n {{ item }}\n </mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n <div class=\"qms-paginator-page-size\" *ngIf='size != sizeMedium && size != sizeSmall'>\n <div class=\"qms-pagesize-label \">{{LANG.JUM_TO_PAGE}}:</div>\n\n <mat-form-field qms-form qms-select-input class=\"qms-form-page-size qms-form-select-page-size\"\n appearance=\"fill\">\n <mat-select [panelClass]=\"overlayClass\" [value]=\"pageIndex\"\n (selectionChange)=\"_changePageNumber($event.value)\" qms-select disableOptionCentering>\n <mat-option *ngFor=\"let item of numberOfPages\" [value]=\"item\">\n {{ item }}\n </mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n <div class=\"qms-paginator-range-actions\">\n <ul class=\"nav-list-pagination\">\n <li class=\"nav-item\">\n <button aria-label=\"Previous page\" qms-btn-icon color=\"light\" (click)='previousPage()'\n [disabled]='minPage == pageIndex'>\n <mat-icon>chevron_left</mat-icon>\n </button>\n </li>\n <ng-container *ngFor='let item of displayNumberOfPages'>\n <li class=\"nav-item\"> <span *ngIf='item == \"...\"' class=\"qms-3d\">{{item}}</span></li>\n <li class=\"nav-item\">\n <button *ngIf='item != \"...\"' qms-btn-icon color=\"light\" [class.selected]='pageIndex == item'\n [disabled]='pageIndex == item' (click)='changePage(item)'>\n {{item}}\n </button>\n </li>\n </ng-container>\n <li class=\"nav-item\">\n <button aria-label=\"Next page\" qms-btn-icon color=\"light\" (click)='nextPage()'\n [disabled]='maxpage == pageIndex'>\n <mat-icon>chevron_right</mat-icon>\n </button>\n </li>\n </ul>\n </div>\n </div>\n\n <div class=\"mat-paginator-container-mobile\" *ngIf='size == sizeMobile'>\n <div class=\"mat-paginator-container\" *ngIf='size == sizeMobile'>\n <div class=\"qms-paginator-range-actions\">\n <ul class=\"nav-list-pagination\">\n <li class=\"nav-item\">\n <button aria-label=\"Previous page\" qms-btn-icon color=\"light\" (click)='previousPage()'\n [disabled]='minPage == pageIndex'>\n <mat-icon>chevron_left</mat-icon>\n </button>\n </li>\n <ng-container *ngFor='let item of displayNumberOfPages'>\n <li class=\"nav-item\"> <span *ngIf='item == \"...\"' class=\"qms-3d\">{{item}}</span></li>\n <li class=\"nav-item\">\n <button *ngIf='item != \"...\"' qms-btn-icon color=\"light\"\n [class.selected]='pageIndex == item' [disabled]='pageIndex == item'\n (click)='changePage(item)'>\n {{item}}\n </button>\n </li>\n </ng-container>\n <li class=\"nav-item\">\n <button aria-label=\"Next page\" qms-btn-icon color=\"light\" (click)='nextPage()'\n [disabled]='maxpage == pageIndex'>\n <mat-icon>chevron_right</mat-icon>\n </button>\n </li>\n </ul>\n </div>\n </div>\n <div class=\"qms-total-result\">\n <span>{{LANG.RESULTS}}: {{length}}</span>\n </div>\n <div style=\"display: flex;\">\n <div class=\"qms-paginator-page-size\" *ngIf='size != sizeSmall'>\n <div class=\"qms-pagesize-label\">{{LANG.ROW_PER_PAGE}}:</div>\n <mat-form-field qms-form qms-select-input class=\"qms-form-page-size\" appearance=\"fill\">\n <mat-select [panelClass]=\"overlayClass\" [value]=\"pageSize\"\n (selectionChange)=\"_changePageSize($event.value)\" qms-select>\n <mat-option *ngFor=\"let item of pageSizeOptions\" [value]=\"item\">\n {{ item }}\n </mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n <div class=\"qms-paginator-page-size\" *ngIf='size != sizeMedium && size != sizeSmall'>\n <div class=\"qms-pagesize-label \">{{LANG.JUM_TO_PAGE}}:</div>\n <mat-form-field qms-form qms-select-input class=\"qms-form-page-size qms-form-select-page-size\"\n appearance=\"fill\">\n <mat-select [panelClass]=\"overlayClass\" [value]=\"pageIndex\"\n (selectionChange)=\"_changePageNumber($event.value)\" qms-select>\n <mat-option *ngFor=\"let item of numberOfPages\" [value]=\"item\">\n {{ item }}\n </mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n </div>\n\n </div>\n\n</div>", styles: ["::ng-deep .customCDKpanel{transform:none!important}::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-mdc-select .mat-select-arrow{margin-top:20px}::ng-deep .qms-paginator .mat-paginator-container .qms-total-result{margin-right:24px;margin-bottom:21px}::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:#0009}::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-mdc-text-field-wrapper{width:70px}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-page-size .qms-form-select-page-size .mat-mdc-text-field-wrapper{width:60px;padding-left:9px;padding-right:5px}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-page-size .jump-page .mat-form-field-wrapper{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:0px;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 .qms-paginator-range-actions .nav-list-pagination{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0;margin:0;list-style:none}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-range-actions .nav-list-pagination .nav-item button.qms-btn-icon{line-height:1.43;letter-spacing:.01071em;border-radius:20px;text-align:center;box-sizing:border-box;min-width:40px;width:unset;height:40px;padding:0 5px}::ng-deep .qms-paginator .mat-paginator-container-mobile .mat-mdc-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:#0009}::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-mdc-text-field-wrapper{width:70px}::ng-deep .qms-paginator .mat-paginator-container-mobile .qms-paginator-page-size .qms-form-select-page-size .mat-mdc-text-field-wrapper{width:60px;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:0px;padding-bottom:0;height:25px}::ng-deep .qms-paginator .size-small .mat-mdc-paginator-container{justify-content:flex-start}::ng-deep .qms-paginator .mr-b-size-small{margin-bottom:17px!important}::ng-deep div.mat-mdc-select-panel{min-width:fit-content!important}\n"], dependencies: [{ kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i13.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i14.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: QMSFormFieldDirective, selector: "[qms-form]" }, { kind: "component", type: QMSButtonIcon, selector: "button[qms-btn-icon]", inputs: ["disabled", "color", "active"], exportAs: ["qmsButtonIcon"] }] }); }
|
|
35398
35395
|
}
|
|
35399
35396
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: QMSPaginatorComponent, decorators: [{
|
|
35400
35397
|
type: Component,
|
|
@@ -35405,7 +35402,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
35405
35402
|
provide: MAT_SELECT_CONFIG,
|
|
35406
35403
|
useValue: { overlayPanelClass: 'customCDKpanel' },
|
|
35407
35404
|
},
|
|
35408
|
-
], template: "<div class=\"qms-paginator-outer-container\" [class.size-small]='size == sizeSmall' [class.d-none]='numHidden > length'>\n <div class=\"mat-paginator-container\" *ngIf='size != sizeMobile'>\n <div class=\"qms-total-result\" [class.mr-b-size-small]='size == sizeSmall'>\n <span>{{LANG.RESULTS}}: {{length}}</span>\n </div>\n <div class=\"qms-paginator-page-size\" *ngIf='size != sizeSmall'>\n <div class=\"qms-pagesize-label\">{{LANG.ROW_PER_PAGE}}:</div>\n <mat-form-field qms-form qms-select-input class=\"qms-form-page-size\" appearance=\"fill\">\n <mat-select [panelClass]=\"overlayClass\" [value]=\"pageSize\"\n (selectionChange)=\"_changePageSize($event.value)\" qms-select disableOptionCentering>\n <mat-option *ngFor=\"let item of pageSizeOptions\" [value]=\"item\">\n {{ item }}\n </mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n <div class=\"qms-paginator-page-size\" *ngIf='size != sizeMedium && size != sizeSmall'>\n <div class=\"qms-pagesize-label \">{{LANG.JUM_TO_PAGE}}:</div>\n\n <mat-form-field qms-form qms-select-input class=\"qms-form-page-size qms-form-select-page-size\"\n appearance=\"fill\">\n <mat-select [panelClass]=\"overlayClass\" [value]=\"pageIndex\"\n (selectionChange)=\"_changePageNumber($event.value)\" qms-select disableOptionCentering>\n <mat-option *ngFor=\"let item of numberOfPages\" [value]=\"item\">\n {{ item }}\n </mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n <div class=\"qms-paginator-range-actions\">\n <ul class=\"nav-list-pagination\">\n <li class=\"nav-item\">\n <button qms-btn-icon color=\"light\" (click)='previousPage()' [disabled]='minPage == pageIndex'>\n <mat-icon>chevron_left</mat-icon>\n </button>\n </li>\n <ng-container *ngFor='let item of displayNumberOfPages'>\n <li class=\"nav-item\"> <span *ngIf='item == \"...\"' class=\"qms-3d\">{{item}}</span></li>\n <li class=\"nav-item\">\n <button *ngIf='item != \"...\"' qms-btn-icon color=\"light\" [class.selected]='pageIndex == item'\n [disabled]='pageIndex == item' (click)='changePage(item)'>\n {{item}}\n </button>\n </li>\n </ng-container>\n <li class=\"nav-item\">\n <button qms-btn-icon color=\"light\" (click)='nextPage()' [disabled]='maxpage == pageIndex'>\n <mat-icon>chevron_right</mat-icon>\n </button>\n </li>\n </ul>\n </div>\n </div>\n\n <div class=\"mat-paginator-container-mobile\" *ngIf='size == sizeMobile'>\n <div class=\"mat-paginator-container\" *ngIf='size == sizeMobile'>\n <div class=\"qms-paginator-range-actions\">\n <ul class=\"nav-list-pagination\">\n <li class=\"nav-item\">\n <button qms-btn-icon color=\"light\" (click)='previousPage()' [disabled]='minPage == pageIndex'>\n <mat-icon>chevron_left</mat-icon>\n </button>\n </li>\n <ng-container *ngFor='let item of displayNumberOfPages'>\n <li class=\"nav-item\"> <span *ngIf='item == \"...\"' class=\"qms-3d\">{{item}}</span></li>\n <li class=\"nav-item\">\n <button *ngIf='item != \"...\"' qms-btn-icon color=\"light\"\n [class.selected]='pageIndex == item' [disabled]='pageIndex == item'\n (click)='changePage(item)'>\n {{item}}\n </button>\n </li>\n </ng-container>\n <li class=\"nav-item\">\n <button qms-btn-icon color=\"light\" (click)='nextPage()' [disabled]='maxpage == pageIndex'>\n <mat-icon>chevron_right</mat-icon>\n </button>\n </li>\n </ul>\n </div>\n </div>\n <div class=\"qms-total-result\">\n <span>{{LANG.RESULTS}}: {{length}}</span>\n </div>\n <div style=\"display: flex;\">\n <div class=\"qms-paginator-page-size\" *ngIf='size != sizeSmall'>\n <div class=\"qms-pagesize-label\">{{LANG.ROW_PER_PAGE}}:</div>\n <mat-form-field qms-form qms-select-input class=\"qms-form-page-size\" appearance=\"fill\">\n <mat-select [panelClass]=\"overlayClass\" [value]=\"pageSize\"\n (selectionChange)=\"_changePageSize($event.value)\" qms-select>\n <mat-option *ngFor=\"let item of pageSizeOptions\" [value]=\"item\">\n {{ item }}\n </mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n <div class=\"qms-paginator-page-size\" *ngIf='size != sizeMedium && size != sizeSmall'>\n <div class=\"qms-pagesize-label \">{{LANG.JUM_TO_PAGE}}:</div>\n <mat-form-field qms-form qms-select-input class=\"qms-form-page-size qms-form-select-page-size\"\n appearance=\"fill\">\n <mat-select [panelClass]=\"overlayClass\" [value]=\"pageIndex\"\n (selectionChange)=\"_changePageNumber($event.value)\" qms-select>\n <mat-option *ngFor=\"let item of numberOfPages\" [value]=\"item\">\n {{ item }}\n </mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n </div>\n\n </div>\n\n</div>", styles: ["::ng-deep .customCDKpanel{transform:none!important}::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-mdc-select .mat-select-arrow{margin-top:20px}::ng-deep .qms-paginator .mat-paginator-container .qms-total-result{margin-right:24px;margin-bottom:21px}::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:#0009}::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-mdc-text-field-wrapper{width:70px}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-page-size .qms-form-select-page-size .mat-mdc-text-field-wrapper{width:60px;padding-left:9px;padding-right:5px}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-page-size .jump-page .mat-form-field-wrapper{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:0px;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 .qms-paginator-range-actions .nav-list-pagination{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0;margin:0;list-style:none}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-range-actions .nav-list-pagination .nav-item button.qms-btn-icon{line-height:1.43;letter-spacing:.01071em;border-radius:20px;text-align:center;box-sizing:border-box;min-width:40px;width:unset;height:40px;padding:0 5px}::ng-deep .qms-paginator .mat-paginator-container-mobile .mat-mdc-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:#0009}::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-mdc-text-field-wrapper{width:70px}::ng-deep .qms-paginator .mat-paginator-container-mobile .qms-paginator-page-size .qms-form-select-page-size .mat-mdc-text-field-wrapper{width:60px;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:0px;padding-bottom:0;height:25px}::ng-deep .qms-paginator .size-small .mat-mdc-paginator-container{justify-content:flex-start}::ng-deep .qms-paginator .mr-b-size-small{margin-bottom:17px!important}::ng-deep div.mat-mdc-select-panel{min-width:fit-content!important}\n"] }]
|
|
35405
|
+
], template: "<div class=\"qms-paginator-outer-container\" [class.size-small]='size == sizeSmall' [class.d-none]='numHidden > length'>\n <div class=\"mat-paginator-container\" *ngIf='size != sizeMobile'>\n <div class=\"qms-total-result\" [class.mr-b-size-small]='size == sizeSmall'>\n <span>{{LANG.RESULTS}}: {{length}}</span>\n </div>\n <div class=\"qms-paginator-page-size\" *ngIf='size != sizeSmall'>\n <div class=\"qms-pagesize-label\">{{LANG.ROW_PER_PAGE}}:</div>\n <mat-form-field qms-form qms-select-input class=\"qms-form-page-size\" appearance=\"fill\">\n <mat-select [panelClass]=\"overlayClass\" [value]=\"pageSize\"\n (selectionChange)=\"_changePageSize($event.value)\" qms-select disableOptionCentering>\n <mat-option *ngFor=\"let item of pageSizeOptions\" [value]=\"item\">\n {{ item }}\n </mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n <div class=\"qms-paginator-page-size\" *ngIf='size != sizeMedium && size != sizeSmall'>\n <div class=\"qms-pagesize-label \">{{LANG.JUM_TO_PAGE}}:</div>\n\n <mat-form-field qms-form qms-select-input class=\"qms-form-page-size qms-form-select-page-size\"\n appearance=\"fill\">\n <mat-select [panelClass]=\"overlayClass\" [value]=\"pageIndex\"\n (selectionChange)=\"_changePageNumber($event.value)\" qms-select disableOptionCentering>\n <mat-option *ngFor=\"let item of numberOfPages\" [value]=\"item\">\n {{ item }}\n </mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n <div class=\"qms-paginator-range-actions\">\n <ul class=\"nav-list-pagination\">\n <li class=\"nav-item\">\n <button aria-label=\"Previous page\" qms-btn-icon color=\"light\" (click)='previousPage()'\n [disabled]='minPage == pageIndex'>\n <mat-icon>chevron_left</mat-icon>\n </button>\n </li>\n <ng-container *ngFor='let item of displayNumberOfPages'>\n <li class=\"nav-item\"> <span *ngIf='item == \"...\"' class=\"qms-3d\">{{item}}</span></li>\n <li class=\"nav-item\">\n <button *ngIf='item != \"...\"' qms-btn-icon color=\"light\" [class.selected]='pageIndex == item'\n [disabled]='pageIndex == item' (click)='changePage(item)'>\n {{item}}\n </button>\n </li>\n </ng-container>\n <li class=\"nav-item\">\n <button aria-label=\"Next page\" qms-btn-icon color=\"light\" (click)='nextPage()'\n [disabled]='maxpage == pageIndex'>\n <mat-icon>chevron_right</mat-icon>\n </button>\n </li>\n </ul>\n </div>\n </div>\n\n <div class=\"mat-paginator-container-mobile\" *ngIf='size == sizeMobile'>\n <div class=\"mat-paginator-container\" *ngIf='size == sizeMobile'>\n <div class=\"qms-paginator-range-actions\">\n <ul class=\"nav-list-pagination\">\n <li class=\"nav-item\">\n <button aria-label=\"Previous page\" qms-btn-icon color=\"light\" (click)='previousPage()'\n [disabled]='minPage == pageIndex'>\n <mat-icon>chevron_left</mat-icon>\n </button>\n </li>\n <ng-container *ngFor='let item of displayNumberOfPages'>\n <li class=\"nav-item\"> <span *ngIf='item == \"...\"' class=\"qms-3d\">{{item}}</span></li>\n <li class=\"nav-item\">\n <button *ngIf='item != \"...\"' qms-btn-icon color=\"light\"\n [class.selected]='pageIndex == item' [disabled]='pageIndex == item'\n (click)='changePage(item)'>\n {{item}}\n </button>\n </li>\n </ng-container>\n <li class=\"nav-item\">\n <button aria-label=\"Next page\" qms-btn-icon color=\"light\" (click)='nextPage()'\n [disabled]='maxpage == pageIndex'>\n <mat-icon>chevron_right</mat-icon>\n </button>\n </li>\n </ul>\n </div>\n </div>\n <div class=\"qms-total-result\">\n <span>{{LANG.RESULTS}}: {{length}}</span>\n </div>\n <div style=\"display: flex;\">\n <div class=\"qms-paginator-page-size\" *ngIf='size != sizeSmall'>\n <div class=\"qms-pagesize-label\">{{LANG.ROW_PER_PAGE}}:</div>\n <mat-form-field qms-form qms-select-input class=\"qms-form-page-size\" appearance=\"fill\">\n <mat-select [panelClass]=\"overlayClass\" [value]=\"pageSize\"\n (selectionChange)=\"_changePageSize($event.value)\" qms-select>\n <mat-option *ngFor=\"let item of pageSizeOptions\" [value]=\"item\">\n {{ item }}\n </mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n <div class=\"qms-paginator-page-size\" *ngIf='size != sizeMedium && size != sizeSmall'>\n <div class=\"qms-pagesize-label \">{{LANG.JUM_TO_PAGE}}:</div>\n <mat-form-field qms-form qms-select-input class=\"qms-form-page-size qms-form-select-page-size\"\n appearance=\"fill\">\n <mat-select [panelClass]=\"overlayClass\" [value]=\"pageIndex\"\n (selectionChange)=\"_changePageNumber($event.value)\" qms-select>\n <mat-option *ngFor=\"let item of numberOfPages\" [value]=\"item\">\n {{ item }}\n </mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n </div>\n\n </div>\n\n</div>", styles: ["::ng-deep .customCDKpanel{transform:none!important}::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-mdc-select .mat-select-arrow{margin-top:20px}::ng-deep .qms-paginator .mat-paginator-container .qms-total-result{margin-right:24px;margin-bottom:21px}::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:#0009}::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-mdc-text-field-wrapper{width:70px}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-page-size .qms-form-select-page-size .mat-mdc-text-field-wrapper{width:60px;padding-left:9px;padding-right:5px}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-page-size .jump-page .mat-form-field-wrapper{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:0px;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 .qms-paginator-range-actions .nav-list-pagination{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0;margin:0;list-style:none}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-range-actions .nav-list-pagination .nav-item button.qms-btn-icon{line-height:1.43;letter-spacing:.01071em;border-radius:20px;text-align:center;box-sizing:border-box;min-width:40px;width:unset;height:40px;padding:0 5px}::ng-deep .qms-paginator .mat-paginator-container-mobile .mat-mdc-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:#0009}::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-mdc-text-field-wrapper{width:70px}::ng-deep .qms-paginator .mat-paginator-container-mobile .qms-paginator-page-size .qms-form-select-page-size .mat-mdc-text-field-wrapper{width:60px;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:0px;padding-bottom:0;height:25px}::ng-deep .qms-paginator .size-small .mat-mdc-paginator-container{justify-content:flex-start}::ng-deep .qms-paginator .mr-b-size-small{margin-bottom:17px!important}::ng-deep div.mat-mdc-select-panel{min-width:fit-content!important}\n"] }]
|
|
35409
35406
|
}], ctorParameters: () => [{ type: TranslateLibraryService }], propDecorators: { numHidden: [{
|
|
35410
35407
|
type: Input
|
|
35411
35408
|
}], size: [{
|
|
@@ -35645,11 +35642,11 @@ class QMSNavDrawerComponent {
|
|
|
35645
35642
|
return roots;
|
|
35646
35643
|
}
|
|
35647
35644
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: QMSNavDrawerComponent, deps: [{ token: QMSTreeGlobalService }, { token: i0.ChangeDetectorRef }, { token: i0.IterableDiffers }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
35648
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: QMSNavDrawerComponent, selector: "qms-nav-drawer", inputs: { treeData: "treeData", openNodes: "openNodes", favoriteAction: "favoriteAction", addLocationAction: "addLocationAction" }, outputs: { nodeExpandEvent: "nodeExpandEvent", onClickNodeEvent: "onClickNodeEvent", updateFavoriteEvent: "updateFavoriteEvent", addLocationEvent: "addLocationEvent" }, usesOnChanges: true, ngImport: i0, template: "<mat-tree class=\"qms-nav-drawer-container\" [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\n <!-- This is the tree node template for leaf nodes -->\n <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodeToggle matTreeNodePadding [ngClass]=\"{\n active: activeNode === getActiveNode(node.id, node.parentId)\n }\">\n\n <div class=\"d-flex align-items-center w-100\">\n <button mat-icon-button disabled></button>\n <img *ngIf=\"node.itemIconSvg\" class=\"material-icons type-icon cursor-pointer\" [src]=\"node.itemIconSvg\"\n (click)=\"onClickNode(node)\" />\n <span *ngIf=\"node.itemIcon\" [class]=\"node.itemIcon\" [qmsTransformIcon]=\"node.itemIcon\"\n class=\"material-icons-outlined type-icon cursor-pointer\" (click)=\"onClickNode(node)\"></span>\n <span *ngIf=\"node.itemMatIcon\" class=\"material-icons-outlined type-icon cursor-pointer\"\n (click)=\"onClickNode(node)\">{{\n node.itemMatIcon }}\n </span>\n\n <span class=\"text-name cursor-pointer mx-2\" (click)=\"onClickNode(node)\">{{ node.name }}</span>\n\n <ng-container *ngIf=\"favoriteAction\">\n <button class=\"btn-action\" (click)=\"updateFavorite(node, $event)\" qms-btn-icon color=\"light\"\n qms-tool-tip=\"{{node.isFavorite ? favoriteAction.tooltipRemoveFavorite : favoriteAction.tooltipAddFavorite}}\"\n mode=\"dark\">\n <mat-icon class=\"material-icons-outlined\" [ngClass]=\"{'primary': node.isFavorite}\">\n {{node.isFavorite ? 'star' : 'star_outline' }}\n </mat-icon>\n </button>\n </ng-container>\n\n <ng-container *ngIf=\"addLocationAction\">\n <button class=\"btn-action\" (click)=\"addLocation(node, $event)\" qms-btn-icon color=\"light\"\n qms-tool-tip=\"{{addLocationAction.tooltipAddLocation}}\" mode=\"dark\">\n <mat-icon class=\"material-icons-outlined\">\n add\n </mat-icon>\n </button>\n </ng-container>\n\n </div>\n\n\n </mat-tree-node>\n <!-- This is the tree node template for expandable nodes -->\n <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" matTreeNodePadding [ngClass]=\"{\n 'expand-node': treeControl.isExpanded(node),\n 'collapse-node': !treeControl.isExpanded(node),\n active: activeNode === getActiveNode(node.id, node.parentId)\n }\">\n\n <div class=\"d-flex align-items-center w-100\">\n <button mat-icon-button (click)=\"onExpandNode(node)\" matTreeNodeToggle>\n <mat-icon class=\"mat-icon-rtl-mirror\">\n {{ treeControl.isExpanded(node) ? \"expand_more\" : \"chevron_right\" }}\n </mat-icon>\n </button>\n\n <img *ngIf=\"node.itemIconSvg\" class=\"material-icons type-icon cursor-pointer\" [src]=\"node.itemIconSvg\"\n (click)=\"onClickNode(node)\" />\n <span *ngIf=\"node.itemIcon\" [class]=\"node.itemIcon\" [qmsTransformIcon]=\"node.itemIcon\"\n class=\"material-icons-outlined type-icon cursor-pointer\" (click)=\"onClickNode(node)\"></span>\n <span *ngIf=\"node.itemMatIcon\" class=\"material-icons-outlined type-icon cursor-pointer\"\n (click)=\"onClickNode(node)\">{{\n node.itemMatIcon }}\n </span>\n\n <span class=\"text-name cursor-pointer mx-2\" (click)=\"onClickNode(node)\">{{ node.name }}</span>\n\n <ng-container *ngIf=\"favoriteAction\">\n <button class=\"btn-action\" (click)=\"updateFavorite(node, $event)\" qms-btn-icon color=\"light\"\n qms-tool-tip=\"{{node.isFavorite ? favoriteAction.tooltipRemoveFavorite : favoriteAction.tooltipAddFavorite}}\"\n mode=\"dark\">\n <mat-icon class=\"material-icons-outlined\" [ngClass]=\"{'primary': node.isFavorite}\">\n {{node.isFavorite ? 'star' : 'star_outline' }}\n </mat-icon>\n </button>\n </ng-container>\n\n <ng-container *ngIf=\"addLocationAction\">\n <button class=\"btn-action\" (click)=\"addLocation(node, $event)\" qms-btn-icon color=\"light\"\n qms-tool-tip=\"{{addLocationAction.tooltipAddLocation}}\" mode=\"dark\">\n <mat-icon class=\"material-icons-outlined\">\n add\n </mat-icon>\n </button>\n </ng-container>\n </div>\n </mat-tree-node>\n</mat-tree>", styles: ["@font-face{font-family:icomoon;src:url(/assets/fonts/icomoon.eot?aghldx);src:url(/assets/fonts/icomoon.eot?aghldx#iefix) format(\"embedded-opentype\"),url(/assets/fonts/icomoon.ttf?aghldx) format(\"truetype\"),url(/assets/fonts/icomoon.woff?aghldx) format(\"woff\"),url(/assets/fonts/icomoon.svg?aghldx#icomoon) format(\"svg\");font-weight:400;font-style:normal;font-display:block}[class^=icon-],[class*=\" icon-\"]{font-family:icomoon!important;speak:never;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-acutely-toxic .path1:before{content:\"\\e91b\";color:#e32730}.icon-acutely-toxic .path2:before{content:\"\\e922\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path3:before{content:\"\\e923\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path4:before{content:\"\\e924\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path5:before{content:\"\\e925\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path6:before{content:\"\\e926\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path7:before{content:\"\\e927\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path8:before{content:\"\\e928\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path9:before{content:\"\\e929\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path10:before{content:\"\\e92a\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path11:before{content:\"\\e92b\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path12:before{content:\"\\e92c\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path13:before{content:\"\\e92d\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path14:before{content:\"\\e92e\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path15:before{content:\"\\e92f\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path16:before{content:\"\\e930\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path17:before{content:\"\\e931\";margin-left:-1em;color:#323232}.icon-add-column:before{content:\"\\e932\"}.icon-add-tooltip:before{content:\"\\e933\"}.icon-admin:before{content:\"\\e934\"}.icon-annual-cycle:before{content:\"\\e935\"}.icon-assignment-repete:before{content:\"\\e936\"}.icon-barrier-add:before{content:\"\\e937\"}.icon-barrier-edit:before{content:\"\\e938\"}.icon-barrier-view:before{content:\"\\e939\"}.icon-button-group:before{content:\"\\e93a\"}.icon-chemical-manager:before{content:\"\\e93b\"}.icon-chronic-health-hazard .path1:before{content:\"\\e93c\";color:#e32730}.icon-chronic-health-hazard .path2:before{content:\"\\e93d\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path3:before{content:\"\\e93e\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path4:before{content:\"\\e93f\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path5:before{content:\"\\e940\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path6:before{content:\"\\e941\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path7:before{content:\"\\e942\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path8:before{content:\"\\e943\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path9:before{content:\"\\e944\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path10:before{content:\"\\e945\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path11:before{content:\"\\e946\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path12:before{content:\"\\e947\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path13:before{content:\"\\e948\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path14:before{content:\"\\e949\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path15:before{content:\"\\e94a\";margin-left:-1em;color:#323232}.icon-contingency:before{content:\"\\e94b\"}.icon-corrosive .path1:before{content:\"\\e94c\";color:#323232}.icon-corrosive .path2:before{content:\"\\e94d\";margin-left:-1em;color:#323232}.icon-corrosive .path3:before{content:\"\\e94e\";margin-left:-1em;color:#323232}.icon-corrosive .path4:before{content:\"\\e94f\";margin-left:-1em;color:#323232}.icon-corrosive .path5:before{content:\"\\e950\";margin-left:-1em;color:#323232}.icon-corrosive .path6:before{content:\"\\e951\";margin-left:-1em;color:#323232}.icon-corrosive .path7:before{content:\"\\e952\";margin-left:-1em;color:#323232}.icon-corrosive .path8:before{content:\"\\e953\";margin-left:-1em;color:#323232}.icon-corrosive .path9:before{content:\"\\e954\";margin-left:-1em;color:#323232}.icon-corrosive .path10:before{content:\"\\e955\";margin-left:-1em;color:#323232}.icon-corrosive .path11:before{content:\"\\e956\";margin-left:-1em;color:#323232}.icon-corrosive .path12:before{content:\"\\e957\";margin-left:-1em;color:#323232}.icon-corrosive .path13:before{content:\"\\e958\";margin-left:-1em;color:#323232}.icon-corrosive .path14:before{content:\"\\e959\";margin-left:-1em;color:#323232}.icon-corrosive .path15:before{content:\"\\e95a\";margin-left:-1em;color:#323232}.icon-corrosive .path16:before{content:\"\\e95b\";margin-left:-1em;color:#323232}.icon-corrosive .path17:before{content:\"\\e95c\";margin-left:-1em;color:#323232}.icon-corrosive .path18:before{content:\"\\e95d\";margin-left:-1em;color:#323232}.icon-corrosive .path19:before{content:\"\\e95e\";margin-left:-1em;color:#323232}.icon-corrosive .path20:before{content:\"\\e95f\";margin-left:-1em;color:#323232}.icon-corrosive .path21:before{content:\"\\e960\";margin-left:-1em;color:#e32730}.icon-dashboard:before{content:\"\\e961\"}.icon-database-sds:before{content:\"\\e962\"}.icon-description-add:before{content:\"\\e963\"}.icon-description-edit:before{content:\"\\e964\"}.icon-description-view:before{content:\"\\e965\";color:#666}.icon-document-read .path1:before{content:\"\\e966\";color:#000;opacity:.6}.icon-document-read .path2:before{content:\"\\e967\";margin-left:-1em;color:#fff}.icon-document-read .path3:before{content:\"\\e968\";margin-left:-1em;color:#000;opacity:.6}.icon-draft:before{content:\"\\e969\"}.icon-expired-off:before{content:\"\\e96a\"}.icon-expired-on:before{content:\"\\e96b\"}.icon-explosive .path1:before{content:\"\\e96c\";color:#e32730}.icon-explosive .path2:before{content:\"\\e96d\";margin-left:-1em;color:#323232}.icon-explosive .path3:before{content:\"\\e96e\";margin-left:-1em;color:#323232}.icon-explosive .path4:before{content:\"\\e96f\";margin-left:-1em;color:#323232}.icon-explosive .path5:before{content:\"\\e970\";margin-left:-1em;color:#323232}.icon-explosive .path6:before{content:\"\\e971\";margin-left:-1em;color:#323232}.icon-explosive .path7:before{content:\"\\e972\";margin-left:-1em;color:#323232}.icon-explosive .path8:before{content:\"\\e973\";margin-left:-1em;color:#323232}.icon-explosive .path9:before{content:\"\\e974\";margin-left:-1em;color:#323232}.icon-explosive .path10:before{content:\"\\e975\";margin-left:-1em;color:#323232}.icon-explosive .path11:before{content:\"\\e976\";margin-left:-1em;color:#323232}.icon-explosive .path12:before{content:\"\\e977\";margin-left:-1em;color:#323232}.icon-explosive .path13:before{content:\"\\e978\";margin-left:-1em;color:#323232}.icon-explosive .path14:before{content:\"\\e979\";margin-left:-1em;color:#323232}.icon-explosive .path15:before{content:\"\\e97a\";margin-left:-1em;color:#323232}.icon-explosive .path16:before{content:\"\\e97b\";margin-left:-1em;color:#323232}.icon-explosive .path17:before{content:\"\\e97c\";margin-left:-1em;color:#323232}.icon-explosive .path18:before{content:\"\\e97d\";margin-left:-1em;color:#323232}.icon-explosive .path19:before{content:\"\\e97e\";margin-left:-1em;color:#323232}.icon-explosive .path20:before{content:\"\\e97f\";margin-left:-1em;color:#323232}.icon-explosive .path21:before{content:\"\\e980\";margin-left:-1em;color:#323232}.icon-explosive .path22:before{content:\"\\e981\";margin-left:-1em;color:#323232}.icon-explosive .path23:before{content:\"\\e982\";margin-left:-1em;color:#323232}.icon-explosive .path24:before{content:\"\\e983\";margin-left:-1em;color:#323232}.icon-explosive .path25:before{content:\"\\e984\";margin-left:-1em;color:#323232}.icon-explosive .path26:before{content:\"\\e985\";margin-left:-1em;color:#323232}.icon-explosive .path27:before{content:\"\\e986\";margin-left:-1em;color:#323232}.icon-explosive .path28:before{content:\"\\e987\";margin-left:-1em;color:#323232}.icon-explosive .path29:before{content:\"\\e988\";margin-left:-1em;color:#323232}.icon-explosive .path30:before{content:\"\\e989\";margin-left:-1em;color:#323232}.icon-explosive .path31:before{content:\"\\e98a\";margin-left:-1em;color:#323232}.icon-explosive .path32:before{content:\"\\e98b\";margin-left:-1em;color:#323232}.icon-explosive .path33:before{content:\"\\e98c\";margin-left:-1em;color:#323232}.icon-explosive .path34:before{content:\"\\e98d\";margin-left:-1em;color:#323232}.icon-explosive .path35:before{content:\"\\e98e\";margin-left:-1em;color:#323232}.icon-explosive .path36:before{content:\"\\e98f\";margin-left:-1em;color:#323232}.icon-explosive .path37:before{content:\"\\e990\";margin-left:-1em;color:#323232}.icon-explosive .path38:before{content:\"\\e991\";margin-left:-1em;color:#323232}.icon-explosive .path39:before{content:\"\\e992\";margin-left:-1em;color:#323232}.icon-explosive .path40:before{content:\"\\e993\";margin-left:-1em;color:#323232}.icon-explosive .path41:before{content:\"\\e994\";margin-left:-1em;color:#323232}.icon-explosive .path42:before{content:\"\\e995\";margin-left:-1em;color:#323232}.icon-explosive .path43:before{content:\"\\e996\";margin-left:-1em;color:#323232}.icon-explosive .path44:before{content:\"\\e997\";margin-left:-1em;color:#323232}.icon-explosive .path45:before{content:\"\\e998\";margin-left:-1em;color:#323232}.icon-explosive .path46:before{content:\"\\e999\";margin-left:-1em;color:#323232}.icon-file-excel:before{content:\"\\e99a\"}.icon-file-pdf:before{content:\"\\e99b\"}.icon-file-pdf-verified .path1:before{content:\"\\e99c\";color:#000;opacity:.6}.icon-file-pdf-verified .path2:before{content:\"\\e99d\";margin-left:-1em;color:#fff}.icon-file-pdf-verified .path3:before{content:\"\\e99e\";margin-left:-1em;color:#000;opacity:.6}.icon-file-word:before{content:\"\\e99f\"}.icon-filter-alt:before{content:\"\\e9a0\"}.icon-flammable .path1:before{content:\"\\e9a1\";color:#323232}.icon-flammable .path2:before{content:\"\\e9a2\";margin-left:-1em;color:#323232}.icon-flammable .path3:before{content:\"\\e9a3\";margin-left:-1em;color:#e32730}.icon-gas-under-pressure .path1:before{content:\"\\e9a4\";color:#323232}.icon-gas-under-pressure .path2:before{content:\"\\e9a5\";margin-left:-1em;color:#e32730}.icon-health-hazard .path1:before{content:\"\\e9a6\";color:#323232}.icon-health-hazard .path2:before{content:\"\\e9a7\";margin-left:-1em;color:#e32730}.icon-line-break:before{content:\"\\e9a8\"}.icon-location:before{content:\"\\e9a9\"}.icon-measure-add:before{content:\"\\e9aa\"}.icon-measure-edit:before{content:\"\\e9ab\"}.icon-measure-view:before{content:\"\\e9ac\";color:#666}.icon-messages:before{content:\"\\e9ad\"}.icon-monitoring:before{content:\"\\e9ae\";color:#666}.icon-move:before{content:\"\\e9af\"}.icon-oxidizing .path1:before{content:\"\\e9b0\";color:#e32730}.icon-oxidizing .path2:before{content:\"\\e9b1\";margin-left:-1em;color:#323232}.icon-oxidizing .path3:before{content:\"\\e9b2\";margin-left:-1em;color:#323232}.icon-oxidizing .path4:before{content:\"\\e9b3\";margin-left:-1em;color:#323232}.icon-process-area-closed:before{content:\"\\e9b4\"}.icon-process-area-open:before{content:\"\\e9b5\"}.icon-process-linked .path1:before{content:\"\\e9b6\";color:#000;opacity:.6}.icon-process-linked .path2:before{content:\"\\e9b7\";margin-left:-1em;color:#666}.icon-risk:before{content:\"\\e9b8\"}.icon-search-in-file:before{content:\"\\e9b9\"}.icon-sort-ascending:before{content:\"\\e9ba\"}.icon-sort-descending:before{content:\"\\e9bb\"}.icon-subscript:before{content:\"\\e9bc\"}.icon-superscript:before{content:\"\\e9bd\"}.icon-syncronice-favorites:before{content:\"\\e9be\"}.icon-system-settings:before{content:\"\\e9bf\"}.icon-view-three-outlined:before{content:\"\\e9c0\"}.icon-workplace-safety:before{content:\"\\e9c1\"}.icon-checklist:before{content:\"\\e900\"}.icon-department-document .path1:before{content:\"\\e901\";color:#000;opacity:.6}.icon-department-document .path2:before{content:\"\\e902\";margin-left:-1em;color:#00804c}.icon-department-folder-closed .path1:before{content:\"\\e903\";color:#000;opacity:.6}.icon-department-folder-closed .path2:before{content:\"\\e904\";margin-left:-1em;color:#00804c}.icon-department-folder-open .path1:before{content:\"\\e905\";color:#000;opacity:.6}.icon-department-folder-open .path2:before{content:\"\\e906\";margin-left:-1em;color:#00804c}.icon-deviation:before{content:\"\\e907\"}.icon-dropdown-folder .path1:before{content:\"\\e908\";color:#00324e}.icon-dropdown-folder .path2:before{content:\"\\e909\";margin-left:-1em;color:#fff;opacity:.6}.icon-enterprise-document .path1:before{content:\"\\e90a\";color:#000;opacity:.6}.icon-enterprise-document .path2:before{content:\"\\e90b\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-closed .path1:before{content:\"\\e90c\";color:#000;opacity:.6}.icon-enterprise-folder-closed .path2:before{content:\"\\e90d\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-open .path1:before{content:\"\\e90e\";color:#000;opacity:.6}.icon-enterprise-folder-open .path2:before{content:\"\\e90f\";margin-left:-1em;color:#cf4714}.icon-folder-closed:before{content:\"\\e910\"}.icon-folder-open:before{content:\"\\e911\"}.icon-keyboard_arrow_down:before{content:\"\\e912\"}.icon-keyboard_arrow_up:before{content:\"\\e913\"}.icon-local-document .path1:before{content:\"\\e914\";color:#000;opacity:.6}.icon-local-document .path2:before{content:\"\\e915\";margin-left:-1em;color:#1954a9}.icon-local-folder-closed .path1:before{content:\"\\e916\";color:#000;opacity:.6}.icon-local-folder-closed .path2:before{content:\"\\e917\";margin-left:-1em;color:#1954a9}.icon-local-folder-open .path1:before{content:\"\\e918\";color:#000;opacity:.6}.icon-local-folder-open .path2:before{content:\"\\e919\";margin-left:-1em;color:#1954a9}.icon-process:before{content:\"\\e91a\"}.icon-regional-document .path1:before{content:\"\\e91c\";color:#000;opacity:.6}.icon-regional-document .path2:before{content:\"\\e91d\";margin-left:-1em;color:#662e0d}.icon-regional-folder-closed .path1:before{content:\"\\e91e\";color:#000;opacity:.6}.icon-regional-folder-closed .path2:before{content:\"\\e91f\";margin-left:-1em;color:#662e0d}.icon-regional-folder-open .path1:before{content:\"\\e920\";color:#000;opacity:.6}.icon-regional-folder-open .path2:before{content:\"\\e921\";margin-left:-1em;color:#662e0d}.mat-tree.qms-nav-drawer-container{font-family:Open Sans}.mat-tree.qms-nav-drawer-container .mat-tree-node:hover,.mat-tree.qms-nav-drawer-container .mat-tree-node:active,.mat-tree.qms-nav-drawer-container .mat-tree-node:focus{background:#00000014;padding-right:5px}.mat-tree.qms-nav-drawer-container .mat-tree-node:hover .btn-action,.mat-tree.qms-nav-drawer-container .mat-tree-node:active .btn-action,.mat-tree.qms-nav-drawer-container .mat-tree-node:focus .btn-action{display:block}.mat-tree.qms-nav-drawer-container .mat-tree-node:active{background:#0000001f}.mat-tree.qms-nav-drawer-container .mat-tree-node.active{color:var(--primary);background:var(--primary-light-6-opacity)}.mat-tree.qms-nav-drawer-container .mat-tree-node.active:active{background:var(--primary-light-12-opacity)}.mat-tree.qms-nav-drawer-container .mat-tree-node.active button,.mat-tree.qms-nav-drawer-container .mat-tree-node.active .mat-icon-rtl-mirror,.mat-tree.qms-nav-drawer-container .mat-tree-node.active .type-icon,.mat-tree.qms-nav-drawer-container .mat-tree-node.active .text-name,.mat-tree.qms-nav-drawer-container .mat-tree-node.collapse-node.active button,.mat-tree.qms-nav-drawer-container .mat-tree-node.collapse-node.active .mat-icon-rtl-mirror,.mat-tree.qms-nav-drawer-container .mat-tree-node.collapse-node.active .type-icon,.mat-tree.qms-nav-drawer-container .mat-tree-node.collapse-node.active .text-name{color:var(--primary)}.mat-tree.qms-nav-drawer-container .mat-tree-node.collapse-node.active:hover{background:var(--primary-light-6-opacity)}.mat-tree.qms-nav-drawer-container .mat-tree-node.collapse-node.active:active{background:var(--primary-light-12-opacity)}.mat-tree.qms-nav-drawer-container .mat-tree-node.expand-node,.mat-tree.qms-nav-drawer-container .mat-tree-node.expand-node button,.mat-tree.qms-nav-drawer-container .mat-tree-node.expand-node .mat-icon-rtl-mirror,.mat-tree.qms-nav-drawer-container .mat-tree-node.expand-node .type-icon,.mat-tree.qms-nav-drawer-container .mat-tree-node.expand-node .text-name{color:var(--primary)}.mat-tree.qms-nav-drawer-container .mat-tree-node.expand-node:hover{background:var(--primary-light-6-opacity)}.mat-tree.qms-nav-drawer-container .mat-tree-node.expand-node:active{background:var(--primary-light-12-opacity)}.mat-tree.qms-nav-drawer-container .type-icon{margin-right:5px;color:var(--ws-action-active);font-size:18px}.mat-tree.qms-nav-drawer-container .text-name{color:var(--default-color)}.mat-tree.qms-nav-drawer-container .mat-icon-rtl-mirror,.mat-tree.qms-nav-drawer-container .mat-icon{color:#0009}.mat-tree.qms-nav-drawer-container button.qms-btn-icon{width:40px;height:40px;line-height:40px}.text-name{position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;cursor:pointer;width:100%;min-width:20px}.cursor-pointer{cursor:pointer}.btn-action{display:none}.btn-action .material-icons-outlined.primary{color:var(--checkbox-color)}\n"], dependencies: [{ kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: QMSButtonIcon, selector: "button[qms-btn-icon]", inputs: ["disabled", "color", "active"], exportAs: ["qmsButtonIcon"] }, { kind: "directive", type: i5.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i5.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "directive", type: i5.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i5.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i5.MatTreeNode, selector: "mat-tree-node", inputs: ["disabled", "tabIndex"], exportAs: ["matTreeNode"] }, { kind: "component", type: i8$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: QMSToolTipRendererDirective, selector: "[qms-tool-tip]", inputs: ["showToolTip", "mode", "qms-tool-tip", "contentTemplate", "position"] }, { kind: "directive", type: QMSMultiIconDirective, selector: "[qmsTransformIcon]", inputs: ["qmsTransformIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
35645
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: QMSNavDrawerComponent, selector: "qms-nav-drawer", inputs: { treeData: "treeData", openNodes: "openNodes", favoriteAction: "favoriteAction", addLocationAction: "addLocationAction" }, outputs: { nodeExpandEvent: "nodeExpandEvent", onClickNodeEvent: "onClickNodeEvent", updateFavoriteEvent: "updateFavoriteEvent", addLocationEvent: "addLocationEvent" }, usesOnChanges: true, ngImport: i0, template: "<mat-tree class=\"qms-nav-drawer-container\" [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\n <!-- This is the tree node template for leaf nodes -->\n <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodeToggle matTreeNodePadding [ngClass]=\"{\n active: activeNode === getActiveNode(node.id, node.parentId)\n }\">\n\n <div class=\"d-flex align-items-center w-100\">\n <button aria-label=\"disabled\" mat-icon-button disabled></button>\n <img *ngIf=\"node.itemIconSvg\" class=\"material-icons type-icon cursor-pointer\" [src]=\"node.itemIconSvg\"\n (click)=\"onClickNode(node)\" alt=\"Image icon\" />\n <span *ngIf=\"node.itemIcon\" [class]=\"node.itemIcon\" [qmsTransformIcon]=\"node.itemIcon\"\n class=\"material-icons-outlined type-icon cursor-pointer\" (click)=\"onClickNode(node)\"></span>\n <span *ngIf=\"node.itemMatIcon\" class=\"material-icons-outlined type-icon cursor-pointer\"\n (click)=\"onClickNode(node)\">{{\n node.itemMatIcon }}\n </span>\n\n <span class=\"text-name cursor-pointer mx-2\" (click)=\"onClickNode(node)\">{{ node.name }}</span>\n\n <ng-container *ngIf=\"favoriteAction\">\n <button class=\"btn-action\" aria-label=\"Add or remove favorite\" (click)=\"updateFavorite(node, $event)\"\n qms-btn-icon color=\"light\"\n qms-tool-tip=\"{{node.isFavorite ? favoriteAction.tooltipRemoveFavorite : favoriteAction.tooltipAddFavorite}}\"\n mode=\"dark\">\n <mat-icon class=\"material-icons-outlined\" [ngClass]=\"{'primary': node.isFavorite}\">\n {{node.isFavorite ? 'star' : 'star_outline' }}\n </mat-icon>\n </button>\n </ng-container>\n\n <ng-container *ngIf=\"addLocationAction\">\n <button class=\"btn-action\" aria-label=\"Add location\" (click)=\"addLocation(node, $event)\" qms-btn-icon\n color=\"light\" qms-tool-tip=\"{{addLocationAction.tooltipAddLocation}}\" mode=\"dark\">\n <mat-icon class=\"material-icons-outlined\">\n add\n </mat-icon>\n </button>\n </ng-container>\n\n </div>\n\n\n </mat-tree-node>\n <!-- This is the tree node template for expandable nodes -->\n <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" matTreeNodePadding [ngClass]=\"{\n 'expand-node': treeControl.isExpanded(node),\n 'collapse-node': !treeControl.isExpanded(node),\n active: activeNode === getActiveNode(node.id, node.parentId)\n }\">\n\n <div class=\"d-flex align-items-center w-100\">\n <button mat-icon-button aria-label=\"Toggle expand\" (click)=\"onExpandNode(node)\" matTreeNodeToggle>\n <mat-icon class=\"mat-icon-rtl-mirror\">\n {{ treeControl.isExpanded(node) ? \"expand_more\" : \"chevron_right\" }}\n </mat-icon>\n </button>\n\n <img *ngIf=\"node.itemIconSvg\" class=\"material-icons type-icon cursor-pointer\" [src]=\"node.itemIconSvg\"\n (click)=\"onClickNode(node)\" alt=\"Image icon\" />\n <span *ngIf=\"node.itemIcon\" [class]=\"node.itemIcon\" [qmsTransformIcon]=\"node.itemIcon\"\n class=\"material-icons-outlined type-icon cursor-pointer\" (click)=\"onClickNode(node)\"></span>\n <span *ngIf=\"node.itemMatIcon\" class=\"material-icons-outlined type-icon cursor-pointer\"\n (click)=\"onClickNode(node)\">{{\n node.itemMatIcon }}\n </span>\n\n <span class=\"text-name cursor-pointer mx-2\" (click)=\"onClickNode(node)\">{{ node.name }}</span>\n\n <ng-container *ngIf=\"favoriteAction\">\n <button class=\"btn-action\" aria-label=\"Add or remove favorite\" (click)=\"updateFavorite(node, $event)\"\n qms-btn-icon color=\"light\"\n qms-tool-tip=\"{{node.isFavorite ? favoriteAction.tooltipRemoveFavorite : favoriteAction.tooltipAddFavorite}}\"\n mode=\"dark\">\n <mat-icon class=\"material-icons-outlined\" [ngClass]=\"{'primary': node.isFavorite}\">\n {{node.isFavorite ? 'star' : 'star_outline' }}\n </mat-icon>\n </button>\n </ng-container>\n\n <ng-container *ngIf=\"addLocationAction\">\n <button class=\"btn-action\" aria-label=\"Add location\" (click)=\"addLocation(node, $event)\" qms-btn-icon\n color=\"light\" qms-tool-tip=\"{{addLocationAction.tooltipAddLocation}}\" mode=\"dark\">\n <mat-icon class=\"material-icons-outlined\">\n add\n </mat-icon>\n </button>\n </ng-container>\n </div>\n </mat-tree-node>\n</mat-tree>", styles: ["@font-face{font-family:icomoon;src:url(/assets/fonts/icomoon.eot?aghldx);src:url(/assets/fonts/icomoon.eot?aghldx#iefix) format(\"embedded-opentype\"),url(/assets/fonts/icomoon.ttf?aghldx) format(\"truetype\"),url(/assets/fonts/icomoon.woff?aghldx) format(\"woff\"),url(/assets/fonts/icomoon.svg?aghldx#icomoon) format(\"svg\");font-weight:400;font-style:normal;font-display:block}[class^=icon-],[class*=\" icon-\"]{font-family:icomoon!important;speak:never;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-acutely-toxic .path1:before{content:\"\\e91b\";color:#e32730}.icon-acutely-toxic .path2:before{content:\"\\e922\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path3:before{content:\"\\e923\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path4:before{content:\"\\e924\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path5:before{content:\"\\e925\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path6:before{content:\"\\e926\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path7:before{content:\"\\e927\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path8:before{content:\"\\e928\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path9:before{content:\"\\e929\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path10:before{content:\"\\e92a\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path11:before{content:\"\\e92b\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path12:before{content:\"\\e92c\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path13:before{content:\"\\e92d\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path14:before{content:\"\\e92e\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path15:before{content:\"\\e92f\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path16:before{content:\"\\e930\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path17:before{content:\"\\e931\";margin-left:-1em;color:#323232}.icon-add-column:before{content:\"\\e932\"}.icon-add-tooltip:before{content:\"\\e933\"}.icon-admin:before{content:\"\\e934\"}.icon-annual-cycle:before{content:\"\\e935\"}.icon-assignment-repete:before{content:\"\\e936\"}.icon-barrier-add:before{content:\"\\e937\"}.icon-barrier-edit:before{content:\"\\e938\"}.icon-barrier-view:before{content:\"\\e939\"}.icon-button-group:before{content:\"\\e93a\"}.icon-chemical-manager:before{content:\"\\e93b\"}.icon-chronic-health-hazard .path1:before{content:\"\\e93c\";color:#e32730}.icon-chronic-health-hazard .path2:before{content:\"\\e93d\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path3:before{content:\"\\e93e\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path4:before{content:\"\\e93f\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path5:before{content:\"\\e940\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path6:before{content:\"\\e941\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path7:before{content:\"\\e942\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path8:before{content:\"\\e943\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path9:before{content:\"\\e944\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path10:before{content:\"\\e945\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path11:before{content:\"\\e946\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path12:before{content:\"\\e947\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path13:before{content:\"\\e948\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path14:before{content:\"\\e949\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path15:before{content:\"\\e94a\";margin-left:-1em;color:#323232}.icon-contingency:before{content:\"\\e94b\"}.icon-corrosive .path1:before{content:\"\\e94c\";color:#323232}.icon-corrosive .path2:before{content:\"\\e94d\";margin-left:-1em;color:#323232}.icon-corrosive .path3:before{content:\"\\e94e\";margin-left:-1em;color:#323232}.icon-corrosive .path4:before{content:\"\\e94f\";margin-left:-1em;color:#323232}.icon-corrosive .path5:before{content:\"\\e950\";margin-left:-1em;color:#323232}.icon-corrosive .path6:before{content:\"\\e951\";margin-left:-1em;color:#323232}.icon-corrosive .path7:before{content:\"\\e952\";margin-left:-1em;color:#323232}.icon-corrosive .path8:before{content:\"\\e953\";margin-left:-1em;color:#323232}.icon-corrosive .path9:before{content:\"\\e954\";margin-left:-1em;color:#323232}.icon-corrosive .path10:before{content:\"\\e955\";margin-left:-1em;color:#323232}.icon-corrosive .path11:before{content:\"\\e956\";margin-left:-1em;color:#323232}.icon-corrosive .path12:before{content:\"\\e957\";margin-left:-1em;color:#323232}.icon-corrosive .path13:before{content:\"\\e958\";margin-left:-1em;color:#323232}.icon-corrosive .path14:before{content:\"\\e959\";margin-left:-1em;color:#323232}.icon-corrosive .path15:before{content:\"\\e95a\";margin-left:-1em;color:#323232}.icon-corrosive .path16:before{content:\"\\e95b\";margin-left:-1em;color:#323232}.icon-corrosive .path17:before{content:\"\\e95c\";margin-left:-1em;color:#323232}.icon-corrosive .path18:before{content:\"\\e95d\";margin-left:-1em;color:#323232}.icon-corrosive .path19:before{content:\"\\e95e\";margin-left:-1em;color:#323232}.icon-corrosive .path20:before{content:\"\\e95f\";margin-left:-1em;color:#323232}.icon-corrosive .path21:before{content:\"\\e960\";margin-left:-1em;color:#e32730}.icon-dashboard:before{content:\"\\e961\"}.icon-database-sds:before{content:\"\\e962\"}.icon-description-add:before{content:\"\\e963\"}.icon-description-edit:before{content:\"\\e964\"}.icon-description-view:before{content:\"\\e965\";color:#666}.icon-document-read .path1:before{content:\"\\e966\";color:#000;opacity:.6}.icon-document-read .path2:before{content:\"\\e967\";margin-left:-1em;color:#fff}.icon-document-read .path3:before{content:\"\\e968\";margin-left:-1em;color:#000;opacity:.6}.icon-draft:before{content:\"\\e969\"}.icon-expired-off:before{content:\"\\e96a\"}.icon-expired-on:before{content:\"\\e96b\"}.icon-explosive .path1:before{content:\"\\e96c\";color:#e32730}.icon-explosive .path2:before{content:\"\\e96d\";margin-left:-1em;color:#323232}.icon-explosive .path3:before{content:\"\\e96e\";margin-left:-1em;color:#323232}.icon-explosive .path4:before{content:\"\\e96f\";margin-left:-1em;color:#323232}.icon-explosive .path5:before{content:\"\\e970\";margin-left:-1em;color:#323232}.icon-explosive .path6:before{content:\"\\e971\";margin-left:-1em;color:#323232}.icon-explosive .path7:before{content:\"\\e972\";margin-left:-1em;color:#323232}.icon-explosive .path8:before{content:\"\\e973\";margin-left:-1em;color:#323232}.icon-explosive .path9:before{content:\"\\e974\";margin-left:-1em;color:#323232}.icon-explosive .path10:before{content:\"\\e975\";margin-left:-1em;color:#323232}.icon-explosive .path11:before{content:\"\\e976\";margin-left:-1em;color:#323232}.icon-explosive .path12:before{content:\"\\e977\";margin-left:-1em;color:#323232}.icon-explosive .path13:before{content:\"\\e978\";margin-left:-1em;color:#323232}.icon-explosive .path14:before{content:\"\\e979\";margin-left:-1em;color:#323232}.icon-explosive .path15:before{content:\"\\e97a\";margin-left:-1em;color:#323232}.icon-explosive .path16:before{content:\"\\e97b\";margin-left:-1em;color:#323232}.icon-explosive .path17:before{content:\"\\e97c\";margin-left:-1em;color:#323232}.icon-explosive .path18:before{content:\"\\e97d\";margin-left:-1em;color:#323232}.icon-explosive .path19:before{content:\"\\e97e\";margin-left:-1em;color:#323232}.icon-explosive .path20:before{content:\"\\e97f\";margin-left:-1em;color:#323232}.icon-explosive .path21:before{content:\"\\e980\";margin-left:-1em;color:#323232}.icon-explosive .path22:before{content:\"\\e981\";margin-left:-1em;color:#323232}.icon-explosive .path23:before{content:\"\\e982\";margin-left:-1em;color:#323232}.icon-explosive .path24:before{content:\"\\e983\";margin-left:-1em;color:#323232}.icon-explosive .path25:before{content:\"\\e984\";margin-left:-1em;color:#323232}.icon-explosive .path26:before{content:\"\\e985\";margin-left:-1em;color:#323232}.icon-explosive .path27:before{content:\"\\e986\";margin-left:-1em;color:#323232}.icon-explosive .path28:before{content:\"\\e987\";margin-left:-1em;color:#323232}.icon-explosive .path29:before{content:\"\\e988\";margin-left:-1em;color:#323232}.icon-explosive .path30:before{content:\"\\e989\";margin-left:-1em;color:#323232}.icon-explosive .path31:before{content:\"\\e98a\";margin-left:-1em;color:#323232}.icon-explosive .path32:before{content:\"\\e98b\";margin-left:-1em;color:#323232}.icon-explosive .path33:before{content:\"\\e98c\";margin-left:-1em;color:#323232}.icon-explosive .path34:before{content:\"\\e98d\";margin-left:-1em;color:#323232}.icon-explosive .path35:before{content:\"\\e98e\";margin-left:-1em;color:#323232}.icon-explosive .path36:before{content:\"\\e98f\";margin-left:-1em;color:#323232}.icon-explosive .path37:before{content:\"\\e990\";margin-left:-1em;color:#323232}.icon-explosive .path38:before{content:\"\\e991\";margin-left:-1em;color:#323232}.icon-explosive .path39:before{content:\"\\e992\";margin-left:-1em;color:#323232}.icon-explosive .path40:before{content:\"\\e993\";margin-left:-1em;color:#323232}.icon-explosive .path41:before{content:\"\\e994\";margin-left:-1em;color:#323232}.icon-explosive .path42:before{content:\"\\e995\";margin-left:-1em;color:#323232}.icon-explosive .path43:before{content:\"\\e996\";margin-left:-1em;color:#323232}.icon-explosive .path44:before{content:\"\\e997\";margin-left:-1em;color:#323232}.icon-explosive .path45:before{content:\"\\e998\";margin-left:-1em;color:#323232}.icon-explosive .path46:before{content:\"\\e999\";margin-left:-1em;color:#323232}.icon-file-excel:before{content:\"\\e99a\"}.icon-file-pdf:before{content:\"\\e99b\"}.icon-file-pdf-verified .path1:before{content:\"\\e99c\";color:#000;opacity:.6}.icon-file-pdf-verified .path2:before{content:\"\\e99d\";margin-left:-1em;color:#fff}.icon-file-pdf-verified .path3:before{content:\"\\e99e\";margin-left:-1em;color:#000;opacity:.6}.icon-file-word:before{content:\"\\e99f\"}.icon-filter-alt:before{content:\"\\e9a0\"}.icon-flammable .path1:before{content:\"\\e9a1\";color:#323232}.icon-flammable .path2:before{content:\"\\e9a2\";margin-left:-1em;color:#323232}.icon-flammable .path3:before{content:\"\\e9a3\";margin-left:-1em;color:#e32730}.icon-gas-under-pressure .path1:before{content:\"\\e9a4\";color:#323232}.icon-gas-under-pressure .path2:before{content:\"\\e9a5\";margin-left:-1em;color:#e32730}.icon-health-hazard .path1:before{content:\"\\e9a6\";color:#323232}.icon-health-hazard .path2:before{content:\"\\e9a7\";margin-left:-1em;color:#e32730}.icon-line-break:before{content:\"\\e9a8\"}.icon-location:before{content:\"\\e9a9\"}.icon-measure-add:before{content:\"\\e9aa\"}.icon-measure-edit:before{content:\"\\e9ab\"}.icon-measure-view:before{content:\"\\e9ac\";color:#666}.icon-messages:before{content:\"\\e9ad\"}.icon-monitoring:before{content:\"\\e9ae\";color:#666}.icon-move:before{content:\"\\e9af\"}.icon-oxidizing .path1:before{content:\"\\e9b0\";color:#e32730}.icon-oxidizing .path2:before{content:\"\\e9b1\";margin-left:-1em;color:#323232}.icon-oxidizing .path3:before{content:\"\\e9b2\";margin-left:-1em;color:#323232}.icon-oxidizing .path4:before{content:\"\\e9b3\";margin-left:-1em;color:#323232}.icon-process-area-closed:before{content:\"\\e9b4\"}.icon-process-area-open:before{content:\"\\e9b5\"}.icon-process-linked .path1:before{content:\"\\e9b6\";color:#000;opacity:.6}.icon-process-linked .path2:before{content:\"\\e9b7\";margin-left:-1em;color:#666}.icon-risk:before{content:\"\\e9b8\"}.icon-search-in-file:before{content:\"\\e9b9\"}.icon-sort-ascending:before{content:\"\\e9ba\"}.icon-sort-descending:before{content:\"\\e9bb\"}.icon-subscript:before{content:\"\\e9bc\"}.icon-superscript:before{content:\"\\e9bd\"}.icon-syncronice-favorites:before{content:\"\\e9be\"}.icon-system-settings:before{content:\"\\e9bf\"}.icon-view-three-outlined:before{content:\"\\e9c0\"}.icon-workplace-safety:before{content:\"\\e9c1\"}.icon-checklist:before{content:\"\\e900\"}.icon-department-document .path1:before{content:\"\\e901\";color:#000;opacity:.6}.icon-department-document .path2:before{content:\"\\e902\";margin-left:-1em;color:#00804c}.icon-department-folder-closed .path1:before{content:\"\\e903\";color:#000;opacity:.6}.icon-department-folder-closed .path2:before{content:\"\\e904\";margin-left:-1em;color:#00804c}.icon-department-folder-open .path1:before{content:\"\\e905\";color:#000;opacity:.6}.icon-department-folder-open .path2:before{content:\"\\e906\";margin-left:-1em;color:#00804c}.icon-deviation:before{content:\"\\e907\"}.icon-dropdown-folder .path1:before{content:\"\\e908\";color:#00324e}.icon-dropdown-folder .path2:before{content:\"\\e909\";margin-left:-1em;color:#fff;opacity:.6}.icon-enterprise-document .path1:before{content:\"\\e90a\";color:#000;opacity:.6}.icon-enterprise-document .path2:before{content:\"\\e90b\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-closed .path1:before{content:\"\\e90c\";color:#000;opacity:.6}.icon-enterprise-folder-closed .path2:before{content:\"\\e90d\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-open .path1:before{content:\"\\e90e\";color:#000;opacity:.6}.icon-enterprise-folder-open .path2:before{content:\"\\e90f\";margin-left:-1em;color:#cf4714}.icon-folder-closed:before{content:\"\\e910\"}.icon-folder-open:before{content:\"\\e911\"}.icon-keyboard_arrow_down:before{content:\"\\e912\"}.icon-keyboard_arrow_up:before{content:\"\\e913\"}.icon-local-document .path1:before{content:\"\\e914\";color:#000;opacity:.6}.icon-local-document .path2:before{content:\"\\e915\";margin-left:-1em;color:#1954a9}.icon-local-folder-closed .path1:before{content:\"\\e916\";color:#000;opacity:.6}.icon-local-folder-closed .path2:before{content:\"\\e917\";margin-left:-1em;color:#1954a9}.icon-local-folder-open .path1:before{content:\"\\e918\";color:#000;opacity:.6}.icon-local-folder-open .path2:before{content:\"\\e919\";margin-left:-1em;color:#1954a9}.icon-process:before{content:\"\\e91a\"}.icon-regional-document .path1:before{content:\"\\e91c\";color:#000;opacity:.6}.icon-regional-document .path2:before{content:\"\\e91d\";margin-left:-1em;color:#662e0d}.icon-regional-folder-closed .path1:before{content:\"\\e91e\";color:#000;opacity:.6}.icon-regional-folder-closed .path2:before{content:\"\\e91f\";margin-left:-1em;color:#662e0d}.icon-regional-folder-open .path1:before{content:\"\\e920\";color:#000;opacity:.6}.icon-regional-folder-open .path2:before{content:\"\\e921\";margin-left:-1em;color:#662e0d}.mat-tree.qms-nav-drawer-container{font-family:Open Sans}.mat-tree.qms-nav-drawer-container .mat-tree-node:hover,.mat-tree.qms-nav-drawer-container .mat-tree-node:active,.mat-tree.qms-nav-drawer-container .mat-tree-node:focus{background:#00000014;padding-right:5px}.mat-tree.qms-nav-drawer-container .mat-tree-node:hover .btn-action,.mat-tree.qms-nav-drawer-container .mat-tree-node:active .btn-action,.mat-tree.qms-nav-drawer-container .mat-tree-node:focus .btn-action{display:block}.mat-tree.qms-nav-drawer-container .mat-tree-node:active{background:#0000001f}.mat-tree.qms-nav-drawer-container .mat-tree-node.active{color:var(--primary);background:var(--primary-light-6-opacity)}.mat-tree.qms-nav-drawer-container .mat-tree-node.active:active{background:var(--primary-light-12-opacity)}.mat-tree.qms-nav-drawer-container .mat-tree-node.active button,.mat-tree.qms-nav-drawer-container .mat-tree-node.active .mat-icon-rtl-mirror,.mat-tree.qms-nav-drawer-container .mat-tree-node.active .type-icon,.mat-tree.qms-nav-drawer-container .mat-tree-node.active .text-name,.mat-tree.qms-nav-drawer-container .mat-tree-node.collapse-node.active button,.mat-tree.qms-nav-drawer-container .mat-tree-node.collapse-node.active .mat-icon-rtl-mirror,.mat-tree.qms-nav-drawer-container .mat-tree-node.collapse-node.active .type-icon,.mat-tree.qms-nav-drawer-container .mat-tree-node.collapse-node.active .text-name{color:var(--primary)}.mat-tree.qms-nav-drawer-container .mat-tree-node.collapse-node.active:hover{background:var(--primary-light-6-opacity)}.mat-tree.qms-nav-drawer-container .mat-tree-node.collapse-node.active:active{background:var(--primary-light-12-opacity)}.mat-tree.qms-nav-drawer-container .mat-tree-node.expand-node,.mat-tree.qms-nav-drawer-container .mat-tree-node.expand-node button,.mat-tree.qms-nav-drawer-container .mat-tree-node.expand-node .mat-icon-rtl-mirror,.mat-tree.qms-nav-drawer-container .mat-tree-node.expand-node .type-icon,.mat-tree.qms-nav-drawer-container .mat-tree-node.expand-node .text-name{color:var(--primary)}.mat-tree.qms-nav-drawer-container .mat-tree-node.expand-node:hover{background:var(--primary-light-6-opacity)}.mat-tree.qms-nav-drawer-container .mat-tree-node.expand-node:active{background:var(--primary-light-12-opacity)}.mat-tree.qms-nav-drawer-container .type-icon{margin-right:5px;color:var(--ws-action-active);font-size:18px}.mat-tree.qms-nav-drawer-container .text-name{color:var(--default-color)}.mat-tree.qms-nav-drawer-container .mat-icon-rtl-mirror,.mat-tree.qms-nav-drawer-container .mat-icon{color:#0009}.mat-tree.qms-nav-drawer-container button.qms-btn-icon{width:40px;height:40px;line-height:40px}.text-name{position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;cursor:pointer;width:100%;min-width:20px}.cursor-pointer{cursor:pointer}.btn-action{display:none}.btn-action .material-icons-outlined.primary{color:var(--checkbox-color)}\n"], dependencies: [{ kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: QMSButtonIcon, selector: "button[qms-btn-icon]", inputs: ["disabled", "color", "active"], exportAs: ["qmsButtonIcon"] }, { kind: "directive", type: i5.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i5.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "directive", type: i5.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i5.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i5.MatTreeNode, selector: "mat-tree-node", inputs: ["disabled", "tabIndex"], exportAs: ["matTreeNode"] }, { kind: "component", type: i8$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: QMSToolTipRendererDirective, selector: "[qms-tool-tip]", inputs: ["showToolTip", "mode", "qms-tool-tip", "contentTemplate", "position"] }, { kind: "directive", type: QMSMultiIconDirective, selector: "[qmsTransformIcon]", inputs: ["qmsTransformIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
35649
35646
|
}
|
|
35650
35647
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: QMSNavDrawerComponent, decorators: [{
|
|
35651
35648
|
type: Component,
|
|
35652
|
-
args: [{ selector: 'qms-nav-drawer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-tree class=\"qms-nav-drawer-container\" [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\n <!-- This is the tree node template for leaf nodes -->\n <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodeToggle matTreeNodePadding [ngClass]=\"{\n active: activeNode === getActiveNode(node.id, node.parentId)\n }\">\n\n <div class=\"d-flex align-items-center w-100\">\n <button mat-icon-button disabled></button>\n <img *ngIf=\"node.itemIconSvg\" class=\"material-icons type-icon cursor-pointer\" [src]=\"node.itemIconSvg\"\n (click)=\"onClickNode(node)\" />\n <span *ngIf=\"node.itemIcon\" [class]=\"node.itemIcon\" [qmsTransformIcon]=\"node.itemIcon\"\n class=\"material-icons-outlined type-icon cursor-pointer\" (click)=\"onClickNode(node)\"></span>\n <span *ngIf=\"node.itemMatIcon\" class=\"material-icons-outlined type-icon cursor-pointer\"\n (click)=\"onClickNode(node)\">{{\n node.itemMatIcon }}\n </span>\n\n <span class=\"text-name cursor-pointer mx-2\" (click)=\"onClickNode(node)\">{{ node.name }}</span>\n\n <ng-container *ngIf=\"favoriteAction\">\n <button class=\"btn-action\" (click)=\"updateFavorite(node, $event)\" qms-btn-icon color=\"light\"\n qms-tool-tip=\"{{node.isFavorite ? favoriteAction.tooltipRemoveFavorite : favoriteAction.tooltipAddFavorite}}\"\n mode=\"dark\">\n <mat-icon class=\"material-icons-outlined\" [ngClass]=\"{'primary': node.isFavorite}\">\n {{node.isFavorite ? 'star' : 'star_outline' }}\n </mat-icon>\n </button>\n </ng-container>\n\n <ng-container *ngIf=\"addLocationAction\">\n <button class=\"btn-action\" (click)=\"addLocation(node, $event)\" qms-btn-icon color=\"light\"\n qms-tool-tip=\"{{addLocationAction.tooltipAddLocation}}\" mode=\"dark\">\n <mat-icon class=\"material-icons-outlined\">\n add\n </mat-icon>\n </button>\n </ng-container>\n\n </div>\n\n\n </mat-tree-node>\n <!-- This is the tree node template for expandable nodes -->\n <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" matTreeNodePadding [ngClass]=\"{\n 'expand-node': treeControl.isExpanded(node),\n 'collapse-node': !treeControl.isExpanded(node),\n active: activeNode === getActiveNode(node.id, node.parentId)\n }\">\n\n <div class=\"d-flex align-items-center w-100\">\n <button mat-icon-button (click)=\"onExpandNode(node)\" matTreeNodeToggle>\n <mat-icon class=\"mat-icon-rtl-mirror\">\n {{ treeControl.isExpanded(node) ? \"expand_more\" : \"chevron_right\" }}\n </mat-icon>\n </button>\n\n <img *ngIf=\"node.itemIconSvg\" class=\"material-icons type-icon cursor-pointer\" [src]=\"node.itemIconSvg\"\n (click)=\"onClickNode(node)\" />\n <span *ngIf=\"node.itemIcon\" [class]=\"node.itemIcon\" [qmsTransformIcon]=\"node.itemIcon\"\n class=\"material-icons-outlined type-icon cursor-pointer\" (click)=\"onClickNode(node)\"></span>\n <span *ngIf=\"node.itemMatIcon\" class=\"material-icons-outlined type-icon cursor-pointer\"\n (click)=\"onClickNode(node)\">{{\n node.itemMatIcon }}\n </span>\n\n <span class=\"text-name cursor-pointer mx-2\" (click)=\"onClickNode(node)\">{{ node.name }}</span>\n\n <ng-container *ngIf=\"favoriteAction\">\n <button class=\"btn-action\" (click)=\"updateFavorite(node, $event)\" qms-btn-icon color=\"light\"\n qms-tool-tip=\"{{node.isFavorite ? favoriteAction.tooltipRemoveFavorite : favoriteAction.tooltipAddFavorite}}\"\n mode=\"dark\">\n <mat-icon class=\"material-icons-outlined\" [ngClass]=\"{'primary': node.isFavorite}\">\n {{node.isFavorite ? 'star' : 'star_outline' }}\n </mat-icon>\n </button>\n </ng-container>\n\n <ng-container *ngIf=\"addLocationAction\">\n <button class=\"btn-action\" (click)=\"addLocation(node, $event)\" qms-btn-icon color=\"light\"\n qms-tool-tip=\"{{addLocationAction.tooltipAddLocation}}\" mode=\"dark\">\n <mat-icon class=\"material-icons-outlined\">\n add\n </mat-icon>\n </button>\n </ng-container>\n </div>\n </mat-tree-node>\n</mat-tree>", styles: ["@font-face{font-family:icomoon;src:url(/assets/fonts/icomoon.eot?aghldx);src:url(/assets/fonts/icomoon.eot?aghldx#iefix) format(\"embedded-opentype\"),url(/assets/fonts/icomoon.ttf?aghldx) format(\"truetype\"),url(/assets/fonts/icomoon.woff?aghldx) format(\"woff\"),url(/assets/fonts/icomoon.svg?aghldx#icomoon) format(\"svg\");font-weight:400;font-style:normal;font-display:block}[class^=icon-],[class*=\" icon-\"]{font-family:icomoon!important;speak:never;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-acutely-toxic .path1:before{content:\"\\e91b\";color:#e32730}.icon-acutely-toxic .path2:before{content:\"\\e922\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path3:before{content:\"\\e923\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path4:before{content:\"\\e924\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path5:before{content:\"\\e925\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path6:before{content:\"\\e926\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path7:before{content:\"\\e927\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path8:before{content:\"\\e928\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path9:before{content:\"\\e929\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path10:before{content:\"\\e92a\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path11:before{content:\"\\e92b\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path12:before{content:\"\\e92c\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path13:before{content:\"\\e92d\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path14:before{content:\"\\e92e\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path15:before{content:\"\\e92f\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path16:before{content:\"\\e930\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path17:before{content:\"\\e931\";margin-left:-1em;color:#323232}.icon-add-column:before{content:\"\\e932\"}.icon-add-tooltip:before{content:\"\\e933\"}.icon-admin:before{content:\"\\e934\"}.icon-annual-cycle:before{content:\"\\e935\"}.icon-assignment-repete:before{content:\"\\e936\"}.icon-barrier-add:before{content:\"\\e937\"}.icon-barrier-edit:before{content:\"\\e938\"}.icon-barrier-view:before{content:\"\\e939\"}.icon-button-group:before{content:\"\\e93a\"}.icon-chemical-manager:before{content:\"\\e93b\"}.icon-chronic-health-hazard .path1:before{content:\"\\e93c\";color:#e32730}.icon-chronic-health-hazard .path2:before{content:\"\\e93d\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path3:before{content:\"\\e93e\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path4:before{content:\"\\e93f\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path5:before{content:\"\\e940\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path6:before{content:\"\\e941\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path7:before{content:\"\\e942\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path8:before{content:\"\\e943\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path9:before{content:\"\\e944\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path10:before{content:\"\\e945\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path11:before{content:\"\\e946\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path12:before{content:\"\\e947\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path13:before{content:\"\\e948\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path14:before{content:\"\\e949\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path15:before{content:\"\\e94a\";margin-left:-1em;color:#323232}.icon-contingency:before{content:\"\\e94b\"}.icon-corrosive .path1:before{content:\"\\e94c\";color:#323232}.icon-corrosive .path2:before{content:\"\\e94d\";margin-left:-1em;color:#323232}.icon-corrosive .path3:before{content:\"\\e94e\";margin-left:-1em;color:#323232}.icon-corrosive .path4:before{content:\"\\e94f\";margin-left:-1em;color:#323232}.icon-corrosive .path5:before{content:\"\\e950\";margin-left:-1em;color:#323232}.icon-corrosive .path6:before{content:\"\\e951\";margin-left:-1em;color:#323232}.icon-corrosive .path7:before{content:\"\\e952\";margin-left:-1em;color:#323232}.icon-corrosive .path8:before{content:\"\\e953\";margin-left:-1em;color:#323232}.icon-corrosive .path9:before{content:\"\\e954\";margin-left:-1em;color:#323232}.icon-corrosive .path10:before{content:\"\\e955\";margin-left:-1em;color:#323232}.icon-corrosive .path11:before{content:\"\\e956\";margin-left:-1em;color:#323232}.icon-corrosive .path12:before{content:\"\\e957\";margin-left:-1em;color:#323232}.icon-corrosive .path13:before{content:\"\\e958\";margin-left:-1em;color:#323232}.icon-corrosive .path14:before{content:\"\\e959\";margin-left:-1em;color:#323232}.icon-corrosive .path15:before{content:\"\\e95a\";margin-left:-1em;color:#323232}.icon-corrosive .path16:before{content:\"\\e95b\";margin-left:-1em;color:#323232}.icon-corrosive .path17:before{content:\"\\e95c\";margin-left:-1em;color:#323232}.icon-corrosive .path18:before{content:\"\\e95d\";margin-left:-1em;color:#323232}.icon-corrosive .path19:before{content:\"\\e95e\";margin-left:-1em;color:#323232}.icon-corrosive .path20:before{content:\"\\e95f\";margin-left:-1em;color:#323232}.icon-corrosive .path21:before{content:\"\\e960\";margin-left:-1em;color:#e32730}.icon-dashboard:before{content:\"\\e961\"}.icon-database-sds:before{content:\"\\e962\"}.icon-description-add:before{content:\"\\e963\"}.icon-description-edit:before{content:\"\\e964\"}.icon-description-view:before{content:\"\\e965\";color:#666}.icon-document-read .path1:before{content:\"\\e966\";color:#000;opacity:.6}.icon-document-read .path2:before{content:\"\\e967\";margin-left:-1em;color:#fff}.icon-document-read .path3:before{content:\"\\e968\";margin-left:-1em;color:#000;opacity:.6}.icon-draft:before{content:\"\\e969\"}.icon-expired-off:before{content:\"\\e96a\"}.icon-expired-on:before{content:\"\\e96b\"}.icon-explosive .path1:before{content:\"\\e96c\";color:#e32730}.icon-explosive .path2:before{content:\"\\e96d\";margin-left:-1em;color:#323232}.icon-explosive .path3:before{content:\"\\e96e\";margin-left:-1em;color:#323232}.icon-explosive .path4:before{content:\"\\e96f\";margin-left:-1em;color:#323232}.icon-explosive .path5:before{content:\"\\e970\";margin-left:-1em;color:#323232}.icon-explosive .path6:before{content:\"\\e971\";margin-left:-1em;color:#323232}.icon-explosive .path7:before{content:\"\\e972\";margin-left:-1em;color:#323232}.icon-explosive .path8:before{content:\"\\e973\";margin-left:-1em;color:#323232}.icon-explosive .path9:before{content:\"\\e974\";margin-left:-1em;color:#323232}.icon-explosive .path10:before{content:\"\\e975\";margin-left:-1em;color:#323232}.icon-explosive .path11:before{content:\"\\e976\";margin-left:-1em;color:#323232}.icon-explosive .path12:before{content:\"\\e977\";margin-left:-1em;color:#323232}.icon-explosive .path13:before{content:\"\\e978\";margin-left:-1em;color:#323232}.icon-explosive .path14:before{content:\"\\e979\";margin-left:-1em;color:#323232}.icon-explosive .path15:before{content:\"\\e97a\";margin-left:-1em;color:#323232}.icon-explosive .path16:before{content:\"\\e97b\";margin-left:-1em;color:#323232}.icon-explosive .path17:before{content:\"\\e97c\";margin-left:-1em;color:#323232}.icon-explosive .path18:before{content:\"\\e97d\";margin-left:-1em;color:#323232}.icon-explosive .path19:before{content:\"\\e97e\";margin-left:-1em;color:#323232}.icon-explosive .path20:before{content:\"\\e97f\";margin-left:-1em;color:#323232}.icon-explosive .path21:before{content:\"\\e980\";margin-left:-1em;color:#323232}.icon-explosive .path22:before{content:\"\\e981\";margin-left:-1em;color:#323232}.icon-explosive .path23:before{content:\"\\e982\";margin-left:-1em;color:#323232}.icon-explosive .path24:before{content:\"\\e983\";margin-left:-1em;color:#323232}.icon-explosive .path25:before{content:\"\\e984\";margin-left:-1em;color:#323232}.icon-explosive .path26:before{content:\"\\e985\";margin-left:-1em;color:#323232}.icon-explosive .path27:before{content:\"\\e986\";margin-left:-1em;color:#323232}.icon-explosive .path28:before{content:\"\\e987\";margin-left:-1em;color:#323232}.icon-explosive .path29:before{content:\"\\e988\";margin-left:-1em;color:#323232}.icon-explosive .path30:before{content:\"\\e989\";margin-left:-1em;color:#323232}.icon-explosive .path31:before{content:\"\\e98a\";margin-left:-1em;color:#323232}.icon-explosive .path32:before{content:\"\\e98b\";margin-left:-1em;color:#323232}.icon-explosive .path33:before{content:\"\\e98c\";margin-left:-1em;color:#323232}.icon-explosive .path34:before{content:\"\\e98d\";margin-left:-1em;color:#323232}.icon-explosive .path35:before{content:\"\\e98e\";margin-left:-1em;color:#323232}.icon-explosive .path36:before{content:\"\\e98f\";margin-left:-1em;color:#323232}.icon-explosive .path37:before{content:\"\\e990\";margin-left:-1em;color:#323232}.icon-explosive .path38:before{content:\"\\e991\";margin-left:-1em;color:#323232}.icon-explosive .path39:before{content:\"\\e992\";margin-left:-1em;color:#323232}.icon-explosive .path40:before{content:\"\\e993\";margin-left:-1em;color:#323232}.icon-explosive .path41:before{content:\"\\e994\";margin-left:-1em;color:#323232}.icon-explosive .path42:before{content:\"\\e995\";margin-left:-1em;color:#323232}.icon-explosive .path43:before{content:\"\\e996\";margin-left:-1em;color:#323232}.icon-explosive .path44:before{content:\"\\e997\";margin-left:-1em;color:#323232}.icon-explosive .path45:before{content:\"\\e998\";margin-left:-1em;color:#323232}.icon-explosive .path46:before{content:\"\\e999\";margin-left:-1em;color:#323232}.icon-file-excel:before{content:\"\\e99a\"}.icon-file-pdf:before{content:\"\\e99b\"}.icon-file-pdf-verified .path1:before{content:\"\\e99c\";color:#000;opacity:.6}.icon-file-pdf-verified .path2:before{content:\"\\e99d\";margin-left:-1em;color:#fff}.icon-file-pdf-verified .path3:before{content:\"\\e99e\";margin-left:-1em;color:#000;opacity:.6}.icon-file-word:before{content:\"\\e99f\"}.icon-filter-alt:before{content:\"\\e9a0\"}.icon-flammable .path1:before{content:\"\\e9a1\";color:#323232}.icon-flammable .path2:before{content:\"\\e9a2\";margin-left:-1em;color:#323232}.icon-flammable .path3:before{content:\"\\e9a3\";margin-left:-1em;color:#e32730}.icon-gas-under-pressure .path1:before{content:\"\\e9a4\";color:#323232}.icon-gas-under-pressure .path2:before{content:\"\\e9a5\";margin-left:-1em;color:#e32730}.icon-health-hazard .path1:before{content:\"\\e9a6\";color:#323232}.icon-health-hazard .path2:before{content:\"\\e9a7\";margin-left:-1em;color:#e32730}.icon-line-break:before{content:\"\\e9a8\"}.icon-location:before{content:\"\\e9a9\"}.icon-measure-add:before{content:\"\\e9aa\"}.icon-measure-edit:before{content:\"\\e9ab\"}.icon-measure-view:before{content:\"\\e9ac\";color:#666}.icon-messages:before{content:\"\\e9ad\"}.icon-monitoring:before{content:\"\\e9ae\";color:#666}.icon-move:before{content:\"\\e9af\"}.icon-oxidizing .path1:before{content:\"\\e9b0\";color:#e32730}.icon-oxidizing .path2:before{content:\"\\e9b1\";margin-left:-1em;color:#323232}.icon-oxidizing .path3:before{content:\"\\e9b2\";margin-left:-1em;color:#323232}.icon-oxidizing .path4:before{content:\"\\e9b3\";margin-left:-1em;color:#323232}.icon-process-area-closed:before{content:\"\\e9b4\"}.icon-process-area-open:before{content:\"\\e9b5\"}.icon-process-linked .path1:before{content:\"\\e9b6\";color:#000;opacity:.6}.icon-process-linked .path2:before{content:\"\\e9b7\";margin-left:-1em;color:#666}.icon-risk:before{content:\"\\e9b8\"}.icon-search-in-file:before{content:\"\\e9b9\"}.icon-sort-ascending:before{content:\"\\e9ba\"}.icon-sort-descending:before{content:\"\\e9bb\"}.icon-subscript:before{content:\"\\e9bc\"}.icon-superscript:before{content:\"\\e9bd\"}.icon-syncronice-favorites:before{content:\"\\e9be\"}.icon-system-settings:before{content:\"\\e9bf\"}.icon-view-three-outlined:before{content:\"\\e9c0\"}.icon-workplace-safety:before{content:\"\\e9c1\"}.icon-checklist:before{content:\"\\e900\"}.icon-department-document .path1:before{content:\"\\e901\";color:#000;opacity:.6}.icon-department-document .path2:before{content:\"\\e902\";margin-left:-1em;color:#00804c}.icon-department-folder-closed .path1:before{content:\"\\e903\";color:#000;opacity:.6}.icon-department-folder-closed .path2:before{content:\"\\e904\";margin-left:-1em;color:#00804c}.icon-department-folder-open .path1:before{content:\"\\e905\";color:#000;opacity:.6}.icon-department-folder-open .path2:before{content:\"\\e906\";margin-left:-1em;color:#00804c}.icon-deviation:before{content:\"\\e907\"}.icon-dropdown-folder .path1:before{content:\"\\e908\";color:#00324e}.icon-dropdown-folder .path2:before{content:\"\\e909\";margin-left:-1em;color:#fff;opacity:.6}.icon-enterprise-document .path1:before{content:\"\\e90a\";color:#000;opacity:.6}.icon-enterprise-document .path2:before{content:\"\\e90b\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-closed .path1:before{content:\"\\e90c\";color:#000;opacity:.6}.icon-enterprise-folder-closed .path2:before{content:\"\\e90d\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-open .path1:before{content:\"\\e90e\";color:#000;opacity:.6}.icon-enterprise-folder-open .path2:before{content:\"\\e90f\";margin-left:-1em;color:#cf4714}.icon-folder-closed:before{content:\"\\e910\"}.icon-folder-open:before{content:\"\\e911\"}.icon-keyboard_arrow_down:before{content:\"\\e912\"}.icon-keyboard_arrow_up:before{content:\"\\e913\"}.icon-local-document .path1:before{content:\"\\e914\";color:#000;opacity:.6}.icon-local-document .path2:before{content:\"\\e915\";margin-left:-1em;color:#1954a9}.icon-local-folder-closed .path1:before{content:\"\\e916\";color:#000;opacity:.6}.icon-local-folder-closed .path2:before{content:\"\\e917\";margin-left:-1em;color:#1954a9}.icon-local-folder-open .path1:before{content:\"\\e918\";color:#000;opacity:.6}.icon-local-folder-open .path2:before{content:\"\\e919\";margin-left:-1em;color:#1954a9}.icon-process:before{content:\"\\e91a\"}.icon-regional-document .path1:before{content:\"\\e91c\";color:#000;opacity:.6}.icon-regional-document .path2:before{content:\"\\e91d\";margin-left:-1em;color:#662e0d}.icon-regional-folder-closed .path1:before{content:\"\\e91e\";color:#000;opacity:.6}.icon-regional-folder-closed .path2:before{content:\"\\e91f\";margin-left:-1em;color:#662e0d}.icon-regional-folder-open .path1:before{content:\"\\e920\";color:#000;opacity:.6}.icon-regional-folder-open .path2:before{content:\"\\e921\";margin-left:-1em;color:#662e0d}.mat-tree.qms-nav-drawer-container{font-family:Open Sans}.mat-tree.qms-nav-drawer-container .mat-tree-node:hover,.mat-tree.qms-nav-drawer-container .mat-tree-node:active,.mat-tree.qms-nav-drawer-container .mat-tree-node:focus{background:#00000014;padding-right:5px}.mat-tree.qms-nav-drawer-container .mat-tree-node:hover .btn-action,.mat-tree.qms-nav-drawer-container .mat-tree-node:active .btn-action,.mat-tree.qms-nav-drawer-container .mat-tree-node:focus .btn-action{display:block}.mat-tree.qms-nav-drawer-container .mat-tree-node:active{background:#0000001f}.mat-tree.qms-nav-drawer-container .mat-tree-node.active{color:var(--primary);background:var(--primary-light-6-opacity)}.mat-tree.qms-nav-drawer-container .mat-tree-node.active:active{background:var(--primary-light-12-opacity)}.mat-tree.qms-nav-drawer-container .mat-tree-node.active button,.mat-tree.qms-nav-drawer-container .mat-tree-node.active .mat-icon-rtl-mirror,.mat-tree.qms-nav-drawer-container .mat-tree-node.active .type-icon,.mat-tree.qms-nav-drawer-container .mat-tree-node.active .text-name,.mat-tree.qms-nav-drawer-container .mat-tree-node.collapse-node.active button,.mat-tree.qms-nav-drawer-container .mat-tree-node.collapse-node.active .mat-icon-rtl-mirror,.mat-tree.qms-nav-drawer-container .mat-tree-node.collapse-node.active .type-icon,.mat-tree.qms-nav-drawer-container .mat-tree-node.collapse-node.active .text-name{color:var(--primary)}.mat-tree.qms-nav-drawer-container .mat-tree-node.collapse-node.active:hover{background:var(--primary-light-6-opacity)}.mat-tree.qms-nav-drawer-container .mat-tree-node.collapse-node.active:active{background:var(--primary-light-12-opacity)}.mat-tree.qms-nav-drawer-container .mat-tree-node.expand-node,.mat-tree.qms-nav-drawer-container .mat-tree-node.expand-node button,.mat-tree.qms-nav-drawer-container .mat-tree-node.expand-node .mat-icon-rtl-mirror,.mat-tree.qms-nav-drawer-container .mat-tree-node.expand-node .type-icon,.mat-tree.qms-nav-drawer-container .mat-tree-node.expand-node .text-name{color:var(--primary)}.mat-tree.qms-nav-drawer-container .mat-tree-node.expand-node:hover{background:var(--primary-light-6-opacity)}.mat-tree.qms-nav-drawer-container .mat-tree-node.expand-node:active{background:var(--primary-light-12-opacity)}.mat-tree.qms-nav-drawer-container .type-icon{margin-right:5px;color:var(--ws-action-active);font-size:18px}.mat-tree.qms-nav-drawer-container .text-name{color:var(--default-color)}.mat-tree.qms-nav-drawer-container .mat-icon-rtl-mirror,.mat-tree.qms-nav-drawer-container .mat-icon{color:#0009}.mat-tree.qms-nav-drawer-container button.qms-btn-icon{width:40px;height:40px;line-height:40px}.text-name{position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;cursor:pointer;width:100%;min-width:20px}.cursor-pointer{cursor:pointer}.btn-action{display:none}.btn-action .material-icons-outlined.primary{color:var(--checkbox-color)}\n"] }]
|
|
35649
|
+
args: [{ selector: 'qms-nav-drawer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-tree class=\"qms-nav-drawer-container\" [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\n <!-- This is the tree node template for leaf nodes -->\n <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodeToggle matTreeNodePadding [ngClass]=\"{\n active: activeNode === getActiveNode(node.id, node.parentId)\n }\">\n\n <div class=\"d-flex align-items-center w-100\">\n <button aria-label=\"disabled\" mat-icon-button disabled></button>\n <img *ngIf=\"node.itemIconSvg\" class=\"material-icons type-icon cursor-pointer\" [src]=\"node.itemIconSvg\"\n (click)=\"onClickNode(node)\" alt=\"Image icon\" />\n <span *ngIf=\"node.itemIcon\" [class]=\"node.itemIcon\" [qmsTransformIcon]=\"node.itemIcon\"\n class=\"material-icons-outlined type-icon cursor-pointer\" (click)=\"onClickNode(node)\"></span>\n <span *ngIf=\"node.itemMatIcon\" class=\"material-icons-outlined type-icon cursor-pointer\"\n (click)=\"onClickNode(node)\">{{\n node.itemMatIcon }}\n </span>\n\n <span class=\"text-name cursor-pointer mx-2\" (click)=\"onClickNode(node)\">{{ node.name }}</span>\n\n <ng-container *ngIf=\"favoriteAction\">\n <button class=\"btn-action\" aria-label=\"Add or remove favorite\" (click)=\"updateFavorite(node, $event)\"\n qms-btn-icon color=\"light\"\n qms-tool-tip=\"{{node.isFavorite ? favoriteAction.tooltipRemoveFavorite : favoriteAction.tooltipAddFavorite}}\"\n mode=\"dark\">\n <mat-icon class=\"material-icons-outlined\" [ngClass]=\"{'primary': node.isFavorite}\">\n {{node.isFavorite ? 'star' : 'star_outline' }}\n </mat-icon>\n </button>\n </ng-container>\n\n <ng-container *ngIf=\"addLocationAction\">\n <button class=\"btn-action\" aria-label=\"Add location\" (click)=\"addLocation(node, $event)\" qms-btn-icon\n color=\"light\" qms-tool-tip=\"{{addLocationAction.tooltipAddLocation}}\" mode=\"dark\">\n <mat-icon class=\"material-icons-outlined\">\n add\n </mat-icon>\n </button>\n </ng-container>\n\n </div>\n\n\n </mat-tree-node>\n <!-- This is the tree node template for expandable nodes -->\n <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" matTreeNodePadding [ngClass]=\"{\n 'expand-node': treeControl.isExpanded(node),\n 'collapse-node': !treeControl.isExpanded(node),\n active: activeNode === getActiveNode(node.id, node.parentId)\n }\">\n\n <div class=\"d-flex align-items-center w-100\">\n <button mat-icon-button aria-label=\"Toggle expand\" (click)=\"onExpandNode(node)\" matTreeNodeToggle>\n <mat-icon class=\"mat-icon-rtl-mirror\">\n {{ treeControl.isExpanded(node) ? \"expand_more\" : \"chevron_right\" }}\n </mat-icon>\n </button>\n\n <img *ngIf=\"node.itemIconSvg\" class=\"material-icons type-icon cursor-pointer\" [src]=\"node.itemIconSvg\"\n (click)=\"onClickNode(node)\" alt=\"Image icon\" />\n <span *ngIf=\"node.itemIcon\" [class]=\"node.itemIcon\" [qmsTransformIcon]=\"node.itemIcon\"\n class=\"material-icons-outlined type-icon cursor-pointer\" (click)=\"onClickNode(node)\"></span>\n <span *ngIf=\"node.itemMatIcon\" class=\"material-icons-outlined type-icon cursor-pointer\"\n (click)=\"onClickNode(node)\">{{\n node.itemMatIcon }}\n </span>\n\n <span class=\"text-name cursor-pointer mx-2\" (click)=\"onClickNode(node)\">{{ node.name }}</span>\n\n <ng-container *ngIf=\"favoriteAction\">\n <button class=\"btn-action\" aria-label=\"Add or remove favorite\" (click)=\"updateFavorite(node, $event)\"\n qms-btn-icon color=\"light\"\n qms-tool-tip=\"{{node.isFavorite ? favoriteAction.tooltipRemoveFavorite : favoriteAction.tooltipAddFavorite}}\"\n mode=\"dark\">\n <mat-icon class=\"material-icons-outlined\" [ngClass]=\"{'primary': node.isFavorite}\">\n {{node.isFavorite ? 'star' : 'star_outline' }}\n </mat-icon>\n </button>\n </ng-container>\n\n <ng-container *ngIf=\"addLocationAction\">\n <button class=\"btn-action\" aria-label=\"Add location\" (click)=\"addLocation(node, $event)\" qms-btn-icon\n color=\"light\" qms-tool-tip=\"{{addLocationAction.tooltipAddLocation}}\" mode=\"dark\">\n <mat-icon class=\"material-icons-outlined\">\n add\n </mat-icon>\n </button>\n </ng-container>\n </div>\n </mat-tree-node>\n</mat-tree>", styles: ["@font-face{font-family:icomoon;src:url(/assets/fonts/icomoon.eot?aghldx);src:url(/assets/fonts/icomoon.eot?aghldx#iefix) format(\"embedded-opentype\"),url(/assets/fonts/icomoon.ttf?aghldx) format(\"truetype\"),url(/assets/fonts/icomoon.woff?aghldx) format(\"woff\"),url(/assets/fonts/icomoon.svg?aghldx#icomoon) format(\"svg\");font-weight:400;font-style:normal;font-display:block}[class^=icon-],[class*=\" icon-\"]{font-family:icomoon!important;speak:never;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-acutely-toxic .path1:before{content:\"\\e91b\";color:#e32730}.icon-acutely-toxic .path2:before{content:\"\\e922\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path3:before{content:\"\\e923\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path4:before{content:\"\\e924\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path5:before{content:\"\\e925\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path6:before{content:\"\\e926\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path7:before{content:\"\\e927\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path8:before{content:\"\\e928\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path9:before{content:\"\\e929\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path10:before{content:\"\\e92a\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path11:before{content:\"\\e92b\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path12:before{content:\"\\e92c\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path13:before{content:\"\\e92d\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path14:before{content:\"\\e92e\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path15:before{content:\"\\e92f\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path16:before{content:\"\\e930\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path17:before{content:\"\\e931\";margin-left:-1em;color:#323232}.icon-add-column:before{content:\"\\e932\"}.icon-add-tooltip:before{content:\"\\e933\"}.icon-admin:before{content:\"\\e934\"}.icon-annual-cycle:before{content:\"\\e935\"}.icon-assignment-repete:before{content:\"\\e936\"}.icon-barrier-add:before{content:\"\\e937\"}.icon-barrier-edit:before{content:\"\\e938\"}.icon-barrier-view:before{content:\"\\e939\"}.icon-button-group:before{content:\"\\e93a\"}.icon-chemical-manager:before{content:\"\\e93b\"}.icon-chronic-health-hazard .path1:before{content:\"\\e93c\";color:#e32730}.icon-chronic-health-hazard .path2:before{content:\"\\e93d\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path3:before{content:\"\\e93e\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path4:before{content:\"\\e93f\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path5:before{content:\"\\e940\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path6:before{content:\"\\e941\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path7:before{content:\"\\e942\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path8:before{content:\"\\e943\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path9:before{content:\"\\e944\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path10:before{content:\"\\e945\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path11:before{content:\"\\e946\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path12:before{content:\"\\e947\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path13:before{content:\"\\e948\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path14:before{content:\"\\e949\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path15:before{content:\"\\e94a\";margin-left:-1em;color:#323232}.icon-contingency:before{content:\"\\e94b\"}.icon-corrosive .path1:before{content:\"\\e94c\";color:#323232}.icon-corrosive .path2:before{content:\"\\e94d\";margin-left:-1em;color:#323232}.icon-corrosive .path3:before{content:\"\\e94e\";margin-left:-1em;color:#323232}.icon-corrosive .path4:before{content:\"\\e94f\";margin-left:-1em;color:#323232}.icon-corrosive .path5:before{content:\"\\e950\";margin-left:-1em;color:#323232}.icon-corrosive .path6:before{content:\"\\e951\";margin-left:-1em;color:#323232}.icon-corrosive .path7:before{content:\"\\e952\";margin-left:-1em;color:#323232}.icon-corrosive .path8:before{content:\"\\e953\";margin-left:-1em;color:#323232}.icon-corrosive .path9:before{content:\"\\e954\";margin-left:-1em;color:#323232}.icon-corrosive .path10:before{content:\"\\e955\";margin-left:-1em;color:#323232}.icon-corrosive .path11:before{content:\"\\e956\";margin-left:-1em;color:#323232}.icon-corrosive .path12:before{content:\"\\e957\";margin-left:-1em;color:#323232}.icon-corrosive .path13:before{content:\"\\e958\";margin-left:-1em;color:#323232}.icon-corrosive .path14:before{content:\"\\e959\";margin-left:-1em;color:#323232}.icon-corrosive .path15:before{content:\"\\e95a\";margin-left:-1em;color:#323232}.icon-corrosive .path16:before{content:\"\\e95b\";margin-left:-1em;color:#323232}.icon-corrosive .path17:before{content:\"\\e95c\";margin-left:-1em;color:#323232}.icon-corrosive .path18:before{content:\"\\e95d\";margin-left:-1em;color:#323232}.icon-corrosive .path19:before{content:\"\\e95e\";margin-left:-1em;color:#323232}.icon-corrosive .path20:before{content:\"\\e95f\";margin-left:-1em;color:#323232}.icon-corrosive .path21:before{content:\"\\e960\";margin-left:-1em;color:#e32730}.icon-dashboard:before{content:\"\\e961\"}.icon-database-sds:before{content:\"\\e962\"}.icon-description-add:before{content:\"\\e963\"}.icon-description-edit:before{content:\"\\e964\"}.icon-description-view:before{content:\"\\e965\";color:#666}.icon-document-read .path1:before{content:\"\\e966\";color:#000;opacity:.6}.icon-document-read .path2:before{content:\"\\e967\";margin-left:-1em;color:#fff}.icon-document-read .path3:before{content:\"\\e968\";margin-left:-1em;color:#000;opacity:.6}.icon-draft:before{content:\"\\e969\"}.icon-expired-off:before{content:\"\\e96a\"}.icon-expired-on:before{content:\"\\e96b\"}.icon-explosive .path1:before{content:\"\\e96c\";color:#e32730}.icon-explosive .path2:before{content:\"\\e96d\";margin-left:-1em;color:#323232}.icon-explosive .path3:before{content:\"\\e96e\";margin-left:-1em;color:#323232}.icon-explosive .path4:before{content:\"\\e96f\";margin-left:-1em;color:#323232}.icon-explosive .path5:before{content:\"\\e970\";margin-left:-1em;color:#323232}.icon-explosive .path6:before{content:\"\\e971\";margin-left:-1em;color:#323232}.icon-explosive .path7:before{content:\"\\e972\";margin-left:-1em;color:#323232}.icon-explosive .path8:before{content:\"\\e973\";margin-left:-1em;color:#323232}.icon-explosive .path9:before{content:\"\\e974\";margin-left:-1em;color:#323232}.icon-explosive .path10:before{content:\"\\e975\";margin-left:-1em;color:#323232}.icon-explosive .path11:before{content:\"\\e976\";margin-left:-1em;color:#323232}.icon-explosive .path12:before{content:\"\\e977\";margin-left:-1em;color:#323232}.icon-explosive .path13:before{content:\"\\e978\";margin-left:-1em;color:#323232}.icon-explosive .path14:before{content:\"\\e979\";margin-left:-1em;color:#323232}.icon-explosive .path15:before{content:\"\\e97a\";margin-left:-1em;color:#323232}.icon-explosive .path16:before{content:\"\\e97b\";margin-left:-1em;color:#323232}.icon-explosive .path17:before{content:\"\\e97c\";margin-left:-1em;color:#323232}.icon-explosive .path18:before{content:\"\\e97d\";margin-left:-1em;color:#323232}.icon-explosive .path19:before{content:\"\\e97e\";margin-left:-1em;color:#323232}.icon-explosive .path20:before{content:\"\\e97f\";margin-left:-1em;color:#323232}.icon-explosive .path21:before{content:\"\\e980\";margin-left:-1em;color:#323232}.icon-explosive .path22:before{content:\"\\e981\";margin-left:-1em;color:#323232}.icon-explosive .path23:before{content:\"\\e982\";margin-left:-1em;color:#323232}.icon-explosive .path24:before{content:\"\\e983\";margin-left:-1em;color:#323232}.icon-explosive .path25:before{content:\"\\e984\";margin-left:-1em;color:#323232}.icon-explosive .path26:before{content:\"\\e985\";margin-left:-1em;color:#323232}.icon-explosive .path27:before{content:\"\\e986\";margin-left:-1em;color:#323232}.icon-explosive .path28:before{content:\"\\e987\";margin-left:-1em;color:#323232}.icon-explosive .path29:before{content:\"\\e988\";margin-left:-1em;color:#323232}.icon-explosive .path30:before{content:\"\\e989\";margin-left:-1em;color:#323232}.icon-explosive .path31:before{content:\"\\e98a\";margin-left:-1em;color:#323232}.icon-explosive .path32:before{content:\"\\e98b\";margin-left:-1em;color:#323232}.icon-explosive .path33:before{content:\"\\e98c\";margin-left:-1em;color:#323232}.icon-explosive .path34:before{content:\"\\e98d\";margin-left:-1em;color:#323232}.icon-explosive .path35:before{content:\"\\e98e\";margin-left:-1em;color:#323232}.icon-explosive .path36:before{content:\"\\e98f\";margin-left:-1em;color:#323232}.icon-explosive .path37:before{content:\"\\e990\";margin-left:-1em;color:#323232}.icon-explosive .path38:before{content:\"\\e991\";margin-left:-1em;color:#323232}.icon-explosive .path39:before{content:\"\\e992\";margin-left:-1em;color:#323232}.icon-explosive .path40:before{content:\"\\e993\";margin-left:-1em;color:#323232}.icon-explosive .path41:before{content:\"\\e994\";margin-left:-1em;color:#323232}.icon-explosive .path42:before{content:\"\\e995\";margin-left:-1em;color:#323232}.icon-explosive .path43:before{content:\"\\e996\";margin-left:-1em;color:#323232}.icon-explosive .path44:before{content:\"\\e997\";margin-left:-1em;color:#323232}.icon-explosive .path45:before{content:\"\\e998\";margin-left:-1em;color:#323232}.icon-explosive .path46:before{content:\"\\e999\";margin-left:-1em;color:#323232}.icon-file-excel:before{content:\"\\e99a\"}.icon-file-pdf:before{content:\"\\e99b\"}.icon-file-pdf-verified .path1:before{content:\"\\e99c\";color:#000;opacity:.6}.icon-file-pdf-verified .path2:before{content:\"\\e99d\";margin-left:-1em;color:#fff}.icon-file-pdf-verified .path3:before{content:\"\\e99e\";margin-left:-1em;color:#000;opacity:.6}.icon-file-word:before{content:\"\\e99f\"}.icon-filter-alt:before{content:\"\\e9a0\"}.icon-flammable .path1:before{content:\"\\e9a1\";color:#323232}.icon-flammable .path2:before{content:\"\\e9a2\";margin-left:-1em;color:#323232}.icon-flammable .path3:before{content:\"\\e9a3\";margin-left:-1em;color:#e32730}.icon-gas-under-pressure .path1:before{content:\"\\e9a4\";color:#323232}.icon-gas-under-pressure .path2:before{content:\"\\e9a5\";margin-left:-1em;color:#e32730}.icon-health-hazard .path1:before{content:\"\\e9a6\";color:#323232}.icon-health-hazard .path2:before{content:\"\\e9a7\";margin-left:-1em;color:#e32730}.icon-line-break:before{content:\"\\e9a8\"}.icon-location:before{content:\"\\e9a9\"}.icon-measure-add:before{content:\"\\e9aa\"}.icon-measure-edit:before{content:\"\\e9ab\"}.icon-measure-view:before{content:\"\\e9ac\";color:#666}.icon-messages:before{content:\"\\e9ad\"}.icon-monitoring:before{content:\"\\e9ae\";color:#666}.icon-move:before{content:\"\\e9af\"}.icon-oxidizing .path1:before{content:\"\\e9b0\";color:#e32730}.icon-oxidizing .path2:before{content:\"\\e9b1\";margin-left:-1em;color:#323232}.icon-oxidizing .path3:before{content:\"\\e9b2\";margin-left:-1em;color:#323232}.icon-oxidizing .path4:before{content:\"\\e9b3\";margin-left:-1em;color:#323232}.icon-process-area-closed:before{content:\"\\e9b4\"}.icon-process-area-open:before{content:\"\\e9b5\"}.icon-process-linked .path1:before{content:\"\\e9b6\";color:#000;opacity:.6}.icon-process-linked .path2:before{content:\"\\e9b7\";margin-left:-1em;color:#666}.icon-risk:before{content:\"\\e9b8\"}.icon-search-in-file:before{content:\"\\e9b9\"}.icon-sort-ascending:before{content:\"\\e9ba\"}.icon-sort-descending:before{content:\"\\e9bb\"}.icon-subscript:before{content:\"\\e9bc\"}.icon-superscript:before{content:\"\\e9bd\"}.icon-syncronice-favorites:before{content:\"\\e9be\"}.icon-system-settings:before{content:\"\\e9bf\"}.icon-view-three-outlined:before{content:\"\\e9c0\"}.icon-workplace-safety:before{content:\"\\e9c1\"}.icon-checklist:before{content:\"\\e900\"}.icon-department-document .path1:before{content:\"\\e901\";color:#000;opacity:.6}.icon-department-document .path2:before{content:\"\\e902\";margin-left:-1em;color:#00804c}.icon-department-folder-closed .path1:before{content:\"\\e903\";color:#000;opacity:.6}.icon-department-folder-closed .path2:before{content:\"\\e904\";margin-left:-1em;color:#00804c}.icon-department-folder-open .path1:before{content:\"\\e905\";color:#000;opacity:.6}.icon-department-folder-open .path2:before{content:\"\\e906\";margin-left:-1em;color:#00804c}.icon-deviation:before{content:\"\\e907\"}.icon-dropdown-folder .path1:before{content:\"\\e908\";color:#00324e}.icon-dropdown-folder .path2:before{content:\"\\e909\";margin-left:-1em;color:#fff;opacity:.6}.icon-enterprise-document .path1:before{content:\"\\e90a\";color:#000;opacity:.6}.icon-enterprise-document .path2:before{content:\"\\e90b\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-closed .path1:before{content:\"\\e90c\";color:#000;opacity:.6}.icon-enterprise-folder-closed .path2:before{content:\"\\e90d\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-open .path1:before{content:\"\\e90e\";color:#000;opacity:.6}.icon-enterprise-folder-open .path2:before{content:\"\\e90f\";margin-left:-1em;color:#cf4714}.icon-folder-closed:before{content:\"\\e910\"}.icon-folder-open:before{content:\"\\e911\"}.icon-keyboard_arrow_down:before{content:\"\\e912\"}.icon-keyboard_arrow_up:before{content:\"\\e913\"}.icon-local-document .path1:before{content:\"\\e914\";color:#000;opacity:.6}.icon-local-document .path2:before{content:\"\\e915\";margin-left:-1em;color:#1954a9}.icon-local-folder-closed .path1:before{content:\"\\e916\";color:#000;opacity:.6}.icon-local-folder-closed .path2:before{content:\"\\e917\";margin-left:-1em;color:#1954a9}.icon-local-folder-open .path1:before{content:\"\\e918\";color:#000;opacity:.6}.icon-local-folder-open .path2:before{content:\"\\e919\";margin-left:-1em;color:#1954a9}.icon-process:before{content:\"\\e91a\"}.icon-regional-document .path1:before{content:\"\\e91c\";color:#000;opacity:.6}.icon-regional-document .path2:before{content:\"\\e91d\";margin-left:-1em;color:#662e0d}.icon-regional-folder-closed .path1:before{content:\"\\e91e\";color:#000;opacity:.6}.icon-regional-folder-closed .path2:before{content:\"\\e91f\";margin-left:-1em;color:#662e0d}.icon-regional-folder-open .path1:before{content:\"\\e920\";color:#000;opacity:.6}.icon-regional-folder-open .path2:before{content:\"\\e921\";margin-left:-1em;color:#662e0d}.mat-tree.qms-nav-drawer-container{font-family:Open Sans}.mat-tree.qms-nav-drawer-container .mat-tree-node:hover,.mat-tree.qms-nav-drawer-container .mat-tree-node:active,.mat-tree.qms-nav-drawer-container .mat-tree-node:focus{background:#00000014;padding-right:5px}.mat-tree.qms-nav-drawer-container .mat-tree-node:hover .btn-action,.mat-tree.qms-nav-drawer-container .mat-tree-node:active .btn-action,.mat-tree.qms-nav-drawer-container .mat-tree-node:focus .btn-action{display:block}.mat-tree.qms-nav-drawer-container .mat-tree-node:active{background:#0000001f}.mat-tree.qms-nav-drawer-container .mat-tree-node.active{color:var(--primary);background:var(--primary-light-6-opacity)}.mat-tree.qms-nav-drawer-container .mat-tree-node.active:active{background:var(--primary-light-12-opacity)}.mat-tree.qms-nav-drawer-container .mat-tree-node.active button,.mat-tree.qms-nav-drawer-container .mat-tree-node.active .mat-icon-rtl-mirror,.mat-tree.qms-nav-drawer-container .mat-tree-node.active .type-icon,.mat-tree.qms-nav-drawer-container .mat-tree-node.active .text-name,.mat-tree.qms-nav-drawer-container .mat-tree-node.collapse-node.active button,.mat-tree.qms-nav-drawer-container .mat-tree-node.collapse-node.active .mat-icon-rtl-mirror,.mat-tree.qms-nav-drawer-container .mat-tree-node.collapse-node.active .type-icon,.mat-tree.qms-nav-drawer-container .mat-tree-node.collapse-node.active .text-name{color:var(--primary)}.mat-tree.qms-nav-drawer-container .mat-tree-node.collapse-node.active:hover{background:var(--primary-light-6-opacity)}.mat-tree.qms-nav-drawer-container .mat-tree-node.collapse-node.active:active{background:var(--primary-light-12-opacity)}.mat-tree.qms-nav-drawer-container .mat-tree-node.expand-node,.mat-tree.qms-nav-drawer-container .mat-tree-node.expand-node button,.mat-tree.qms-nav-drawer-container .mat-tree-node.expand-node .mat-icon-rtl-mirror,.mat-tree.qms-nav-drawer-container .mat-tree-node.expand-node .type-icon,.mat-tree.qms-nav-drawer-container .mat-tree-node.expand-node .text-name{color:var(--primary)}.mat-tree.qms-nav-drawer-container .mat-tree-node.expand-node:hover{background:var(--primary-light-6-opacity)}.mat-tree.qms-nav-drawer-container .mat-tree-node.expand-node:active{background:var(--primary-light-12-opacity)}.mat-tree.qms-nav-drawer-container .type-icon{margin-right:5px;color:var(--ws-action-active);font-size:18px}.mat-tree.qms-nav-drawer-container .text-name{color:var(--default-color)}.mat-tree.qms-nav-drawer-container .mat-icon-rtl-mirror,.mat-tree.qms-nav-drawer-container .mat-icon{color:#0009}.mat-tree.qms-nav-drawer-container button.qms-btn-icon{width:40px;height:40px;line-height:40px}.text-name{position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;cursor:pointer;width:100%;min-width:20px}.cursor-pointer{cursor:pointer}.btn-action{display:none}.btn-action .material-icons-outlined.primary{color:var(--checkbox-color)}\n"] }]
|
|
35653
35650
|
}], ctorParameters: () => [{ type: QMSTreeGlobalService }, { type: i0.ChangeDetectorRef }, { type: i0.IterableDiffers }], propDecorators: { treeData: [{
|
|
35654
35651
|
type: Input
|
|
35655
35652
|
}], openNodes: [{
|
|
@@ -37167,7 +37164,7 @@ class SelectDepartmentTreeComponent {
|
|
|
37167
37164
|
}
|
|
37168
37165
|
}
|
|
37169
37166
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectDepartmentTreeComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$3.DomSanitizer }, { token: QMSIconRegistryService }, { token: i4.MatIconRegistry }, { token: i0.ElementRef }, { token: TranslateLibraryService }, { token: i1$1.Overlay }, { token: i0.ViewContainerRef }, { token: QMSSelectDepartmentTreeGlobalService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
37170
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SelectDepartmentTreeComponent, selector: "qms-select-department-tree", inputs: { rowsSkeleton: "rowsSkeleton", height: "height", config: "config", maxWidthNode: "maxWidthNode" }, outputs: { onSearchEvent: "onSearchEvent", onPagingSearchEvent: "onPagingSearchEvent", onValueChangeEvent: "onValueChangeEvent", selectionNodeChangeEvent: "selectionNodeChangeEvent", onCheckNodeEvent: "onCheckNodeEvent", onExpandNodeEvent: "onExpandNodeEvent", onLoadMoreEvent: "onLoadMoreEvent", onCheckItemSearchEvent: "onCheckItemSearchEvent", onCheckAllItemSearchEvent: "onCheckAllItemSearchEvent", toggleIncludeChildEvent: "toggleIncludeChildEvent", isPushingChildNodes: "isPushingChildNodes" }, viewQueries: [{ propertyName: "cdkVirtualScrollViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "paginatorSearch", first: true, predicate: ["paginatorSearch"], descendants: true }], ngImport: i0, template: "<div [ngClass]=\"['qms-select-department-tree-container', (config.customClass || '')]\">\r\n <div class=\"input-select-department\">\r\n <form (ngSubmit)=\"!getLoading$.value && onSearch()\" *ngIf=\"config.enableTreeSearch\" class=\"input-field\">\r\n <mat-form-field class=\"w100\" qms-form qms-search-field>\r\n <input [formControl]=\"formSearchControl\" type=\"text\" placeholder=\"{{ LANG.SEARCH }}\" matInput />\r\n <button *ngIf=\"!getLoading$.value\" type=\"submit\" qms-btn-icon color=\"light\" matSuffix>\r\n <mat-icon>search</mat-icon>\r\n </button>\r\n <mat-progress-spinner [@inOutAnimation] matSuffix mode=\"indeterminate\" diameter=\"20\"\r\n *ngIf=\"getLoading$.value\"></mat-progress-spinner>\r\n <div *ngIf=\"!!formSearchControl.value && !getLoading$.value\" qms-input-clear matSuffix>\r\n <button qms-btn-icon color=\"light\" [@inOutAnimation] aria-label=\"Clear\" (click)=\"formSearchControl.reset()\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n </mat-form-field>\r\n </form>\r\n <div [@inOutAnimation] *ngIf=\"(getIndexView$ | async) === 1 && (textSearchSubject$ | async)\"\r\n class=\"sub-text ms-1 fw500\">\r\n {{LANG.RESULT_SEARCH_FOR}}<i><b>\"{{textSearchSubject$ | async}}\"</b></i>\r\n </div>\r\n <div [class.justify-content-between]=\"config.enableIncludeChild && !config.isSelectOne\"\r\n class=\"select__toggle-include toggle-include-child my-1 d-flex justify-content-end align-items-center\">\r\n <mat-slide-toggle *ngIf=\"config.enableIncludeChild && !config.isSelectOne\"\r\n [disabled]=\"(getIndexView$ | async) === 1 && config.disableToggleIncludeChildWhenChangeView\"\r\n [(ngModel)]=\"isIncludeChildren\" (ngModelChange)=\"toggleIncludeChildEvent.emit($event)\" color=\"default\"\r\n qms-group-options>\r\n <span class=\"text-label\">{{config.selectIncludeLabel || LANG.SELECT_INCLUDE_CHILD}}</span>\r\n </mat-slide-toggle>\r\n <button class=\"btn-arrow\" [@inOutAnimation] *ngIf=\"(getIndexView$ | async) === 1 && config.enableTreeSearch\"\r\n (click)=\"setIndexView(0)\" qms-btn-icon color=\"light\" [qms-tool-tip]=\"LANG.BACK_TO_TREE\" mode=\"dark\"\r\n position=\"top\">\r\n <mat-icon>arrow_back</mat-icon>\r\n </button>\r\n <button class=\"btn-arrow\" [@inOutAnimation]\r\n *ngIf=\"(getIndexView$ | async) === 0 && config.enableTreeSearch && (textSearchSubject$ | async)\"\r\n (click)=\"setIndexView(1)\" qms-btn-icon color=\"light\" [qms-tool-tip]=\"LANG.GOTO_SEACH_RESULT\" mode=\"dark\"\r\n position=\"top\">\r\n <mat-icon>arrow_forward</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n <div [@inOutAnimation]\r\n *ngIf=\"(getIndexView$ | async) === 0 && config.modeView === MODE_VIEW_ENUM.ExternalView && !!config.headerName\"\r\n class=\"header-view-tree\">\r\n <div class=\"header-view header-title\">\r\n {{config.headerName.treeName}}\r\n </div>\r\n <div class=\"header-view header-title\">\r\n {{config.headerName.externalName}}\r\n </div>\r\n </div>\r\n <mat-divider class=\"mx-auto\"></mat-divider>\r\n <div [@animateSlideView]=\"(getIndexView$ | async)\" [ngStyle]=\"{\r\n minHeight: height\r\n }\" class=\"tree-department-wrapper\">\r\n <div *ngIf=\"(getIndexView$ | async) === 0\" class=\"tree-view w100 h100\">\r\n <div class=\"tree-view-main h100\">\r\n <div *ngIf=\"!config.isSelectOne && !!treeControl.dataNodes && config.activeSelectAllNode\"\r\n class=\"checkbox-all-tree\" [class.sticky-position]=\"config.modeView === MODE_VIEW_ENUM.ExternalView\">\r\n <!-- Checkbox all root node -->\r\n <mat-checkbox [@inOutAnimation] (click)=\"onCheckAllRootTreeNode()\"\r\n [indeterminate]=\"isIndeterminateCheckboxAllTree\" [checked]=\"isAllDepartmentSelected\" qms-group-options\r\n color=\"default\" label=\"none\" class=\"checkbox-all\">\r\n <span class=\"text-label \">{{LANG.CHOOSE_ALL}} (<b>{{treeControl.dataNodes.length}}</b>)</span>\r\n </mat-checkbox>\r\n <mat-divider class=\"mx-auto\"></mat-divider>\r\n </div>\r\n <cdk-virtual-scroll-viewport *ngIf=\"dataSource.data\" [ngClass]=\"{\r\n 'has-checkbox-all': !config.isSelectOne && config.modeView === MODE_VIEW_ENUM.Basic,\r\n 'select-department-tree': true\r\n }\" [itemSize]=\"ITEM_SIZE\" [ngStyle]=\"{height: height}\">\r\n <ng-container *cdkVirtualFor=\"let node of dataSource; trackBy: trackBy\">\r\n <div class=\"qms-tree-node mt-1\" [style.padding-left]=\"node.level * (config.isMobile ? 12 :24) + 'px'\"\r\n [attr.data-id]=\"node.id\" [id]=\"'mat-node-'+node.id\" [@triggerColor]=\"activeNode == node.id\" [ngClass]=\"{\r\n 'w-100': config.isSelectOne,\r\n 'selected-theme': this.checkListSelection.isSelected(node) && config.isSelectOne,\r\n 'expand-node': treeControl.isExpandable(node) && treeControl.isExpanded(node),\r\n 'active-external-view': config.modeView === MODE_VIEW_ENUM.ExternalView,\r\n 'node-loading': node.isLoading,\r\n 'move-location-mode': config.moveLocationMode\r\n }\">\r\n <div class=\"node-expand-area\">\r\n <button class=\"btn-toggle\" qms-btn-icon color=\"light\"\r\n [disabled]=\"(config.moveLocationMode && checkListSelection.isSelected(node))\"\r\n (click)=\"onExpandNode(node)\" *ngIf=\"treeControl.isExpandable(node) && !node.isLoading\">\r\n <mat-icon>\r\n {{ treeControl.isExpanded(node) ? node?.expandIcon?.collapse : node?.expandIcon?.expand }}\r\n </mat-icon>\r\n </button>\r\n <ng-container *ngIf=\"node.isLoading; then loadingSpinner\"></ng-container>\r\n </div>\r\n <ng-container [ngTemplateOutlet]=\"config.isSelectOne ? nodeWithoutCheckboxTemplate : showCheckboxTemplate\"\r\n [ngTemplateOutletContext]=\"{ node: node }\"></ng-container>\r\n <div *ngIf=\"config.modeView === MODE_VIEW_ENUM.ExternalView\" class=\"external-view-node\">\r\n <span class=\"node-external\" qms-elipsify position=\"top\" mode=\"dark\">\r\n {{node.externalName || ''}}\r\n </span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </cdk-virtual-scroll-viewport>\r\n <ng-container [@inOutAnimation] *ngIf=\"config.spinnerWhenGetMore && getLoadingMore$| async ;then maskOverlay\">\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div *ngIf=\"(getIndexView$ | async) === 1\" [ngStyle]=\"{\r\n height: height\r\n }\" class=\"qms-view-search-result\">\r\n <div *ngIf=\"config.modeView === MODE_VIEW_ENUM.ExternalView\"\r\n class=\"qms-view-search-result__header d-flex align-items-center justify-content-between\">\r\n <div class=\"header-title\">\r\n <span qms-elipsify mode=\"dark\" position=\"top\">\r\n {{config.headerName.resultSearchName}}\r\n </span>\r\n </div>\r\n <div class=\"header-title\">\r\n <span qms-elipsify mode=\"dark\" position=\"top\">\r\n {{config.headerName.externalName}}\r\n </span>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"getLoading$.value; then loading\"></ng-container>\r\n <div class=\"qms-view-search-result__wrapper\" [ngClass]=\"{\r\n 'active-external': config.modeView === MODE_VIEW_ENUM.ExternalView}\"\r\n *ngIf=\"!!resultSearch.length && !getLoading$.value\">\r\n <div *ngIf=\"!config.moveLocationMode\">\r\n <mat-checkbox [@inOutAnimation]\r\n [disabled]=\"!resultSearch.length || config.isSelectOne || isDisableChecboxAllSearch()\" #checkAllSearch\r\n [indeterminate]=\"indeterminateSearchResult\" [checked]=\"isSelectAllResultSearch\" qms-group-options\r\n color=\"default\" label=\"none\" class=\"checkbox-all\"\r\n (click)=\"!config.isSelectOne && onSelectAllSearchResult(checkAllSearch.checked)\">\r\n <span class=\"text-label header-title\">{{LANG.CHOOSE_ALL}}</span>\r\n <span>(<b>{{resultSearch.length}}</b>)</span>\r\n </mat-checkbox>\r\n </div>\r\n <div [@inOutAnimation] [@listAnimation]\r\n [class.active-paging]=\"searchDepartment$.value.length > 10 && config.enablePagingSearch\" class=\"result\">\r\n <div [qms-tool-tip]=\"!canHandleItemSearchResult(item) ? LANG.ITEM_NOT_MATCH_TO_TREE : ''\" mode=\"dark\"\r\n position=\"top\" *ngFor=\"let item of resultSearch\"\r\n (click)=\"$event.stopImmediatePropagation(); !item.disabled && onCheckItemSearchResult(item)\"\r\n [ngClass]=\"{'active': checkListSelectionSearch.isSelected(item), 'no-checkbox': config.moveLocationMode}\"\r\n class=\"result-item user-select-none\" matRipple>\r\n <mat-checkbox [@inOutAnimation] *ngIf=\"!item.isLoading && !config.moveLocationMode\"\r\n [disabled]=\"item.disabled\"\r\n (click)=\"$event.stopImmediatePropagation(); !item.disabled && onCheckItemSearchResult(item)\"\r\n [checked]=\"checkListSelectionSearch.isSelected(item)\" qms-group-options color=\"default\" label=\"none\">\r\n </mat-checkbox>\r\n <div *ngIf=\"item.isLoading\" [@inOutAnimation] class=\"position-relative\">\r\n <ng-container *ngIf=\"item.isLoading; then loadingSpinner\"></ng-container>\r\n </div>\r\n <div class=\"result-item__content\">\r\n <div class=\"item-result-content-wraper\">\r\n <div class=\"text-gray fw-bold fs-base mb0\">{{item.name}}</div>\r\n <qms-breadcrumb *ngIf=\"item.location?.length > 1\" [type]=\"config.isMobile ? 'mobile': ''\"\r\n [numDisplayItem]=\"6\" (onItemClick)=\"$event.stopImmediatePropagation()\" class=\"breadcrumb-container\"\r\n [nodes]=\"item.location\">\r\n </qms-breadcrumb>\r\n <div *ngIf=\"item.location?.length === 1\" class=\"d-flex align-items-center\">\r\n <span qms-elipsify mode=\"dark\" position=\"top\"\r\n class=\"item-breadcrumb-disable d-block\">{{item.location[0].name}}</span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"config.moveLocationMode\">\r\n <button class=\"move-location-btn\" qms-btn-icon [matMenuTriggerFor]=\"menu\">\r\n <mat-icon>swap_vert</mat-icon>\r\n </button>\r\n <mat-menu class=\"move-location-menu\" #menu=\"matMenu\">\r\n <button (click)=\"setDestinationLocation(item, 'sibling')\" mat-menu-item>\r\n <span>{{LANG.PLACE_NEXT_TO}}</span>\r\n </button>\r\n <button (click)=\"setDestinationLocation(item, 'child')\" mat-menu-item>\r\n <span>{{LANG.PLACE_UNDER}}</span>\r\n </button>\r\n </mat-menu>\r\n </div>\r\n <div *ngIf=\"config.modeView === MODE_VIEW_ENUM.ExternalView\" class=\"external-name\">\r\n <span qms-elipsify mode=\"dark\" position=\"top\" class=\"text-gray fs-base mb0\">{{item.externalName}}\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div [@inOutAnimation] *ngIf=\"!resultSearch.length && !getLoading$.value\" class=\"result no-result\">\r\n <ng-container *ngTemplateOutlet=\"noResult\"></ng-container>\r\n </div>\r\n <mat-divider *ngIf=\"searchDepartment$.value.length > 10 && config.enablePagingSearch\"\r\n class=\"mx-auto\"></mat-divider>\r\n <qms-paginator #paginatorSearch *ngIf=\"searchDepartment$.value.length > 10 && config.enablePagingSearch \"\r\n [length]=\"searchDepartment$.value.length\" [numHidden]=\"0\" [pageSize]=\"CURRENT_PAGESIZE\"\r\n [pageSizeOptions]=\"PAGE_SIZE_OPTION\" (page)='onPagingSearchResult($event)'\r\n [size]='config.isMobile ? PAGINATION_SIZE.small : PAGINATION_SIZE.medium'>\r\n </qms-paginator>\r\n </div>\r\n </div>\r\n\r\n <!-- Template for Checkbox -->\r\n <ng-template #showCheckboxTemplate let-node=\"node\">\r\n <mat-checkbox [id]=\"'node-'+node.id\" qms-group-options color=\"default\" label=\"none\" class=\"flex-direction-row\"\r\n [disabled]=\"node.isLoading || node.disabled\" [checked]=\"checkListSelection.isSelected(node)\"\r\n (click)=\"!node.isLoading && onCheckNode(node)\" [attr.disabled]=\"node.disabled || node.isLoading\">\r\n <img [title]=\"node.itemIconSvg\" *ngIf=\"node.itemIconSvg\" class=\"material-icons type-icon\"\r\n [src]=\"node.itemIconSvg\" />\r\n <span *ngIf=\"node.itemIcon\" [class]=\"node.itemIcon\" [qmsTransformIcon]=\"node.itemIcon\"\r\n class=\"material-icons-outlined type-icon\"></span>\r\n <span *ngIf=\"node.itemMatIcon\" class=\"material-icons-outlined type-icon\">{{\r\n node.itemMatIcon }}\r\n </span>\r\n <div class=\"node-text\" [ngStyle]=\"{\r\n maxWidth: (maxWidthNode - 20*node.level)+ 'px'\r\n }\">\r\n <span qms-elipsify [mode]=\"'dark'\" position=\"top\" class=\"text-name cursor-pointer ml5 123\"\r\n [ngClass]=\"{ disabled: node.disabled}\">{{ node.name}}\r\n </span>\r\n </div>\r\n </mat-checkbox>\r\n </ng-template>\r\n\r\n <!-- Template node without checkbox -->\r\n <ng-template #nodeWithoutCheckboxTemplate let-node=\"node\">\r\n <div [id]=\"'node-'+node.id\" (click)=\"onCheckNode(node)\" class=\"node-without-checkbox\">\r\n <div class=\"node-info\">\r\n <span *ngIf=\"node.itemIcon\" [class]=\"node.itemIcon\" [qmsTransformIcon]=\"node.itemIcon\"\r\n class=\"material-icons-outlined type-icon\"></span>\r\n <span *ngIf=\"node.itemMatIcon\" class=\"material-icons-outlined type-icon\">{{\r\n node.itemMatIcon }}\r\n </span>\r\n <span class=\"text-name cursor-pointer pl-10 123\" [ngClass]=\"{ disabled: node.disabled }\">{{ node.name }}</span>\r\n </div>\r\n <div class=\"node-state\">\r\n <mat-icon [class.disabled]=\"(config.moveLocationMode && checkListSelection.isSelected(node))\"\r\n *ngIf=\"checkListSelection.isSelected(node)\">check</mat-icon>\r\n <button class=\"move-location-btn\" *ngIf=\"config.moveLocationMode && !checkListSelection.isSelected(node)\"\r\n qms-btn-icon [matMenuTriggerFor]=\"menu\">\r\n <mat-icon>swap_vert</mat-icon>\r\n </button>\r\n <mat-menu class=\"move-location-menu\" #menu=\"matMenu\">\r\n <button (click)=\"moveToLocation(node, 'sibling')\" mat-menu-item>\r\n <span>{{LANG.PLACE_NEXT_TO}}</span>\r\n </button>\r\n <button (click)=\"moveToLocation(node, 'child')\" mat-menu-item>\r\n <span>{{LANG.PLACE_UNDER}}</span>\r\n </button>\r\n </mat-menu>\r\n </div>\r\n </div>\r\n </ng-template>\r\n</div>\r\n\r\n<ng-template #noResult>\r\n <svg width=\"89\" height=\"130\" viewBox=\"0 0 89 88\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"white\" />\r\n <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"#0163B2\" fill-opacity=\"0.12\" />\r\n <path\r\n d=\"M44.5 56.6936L58.096 64.8996L54.488 49.4336L66.5 39.0276L50.682 37.6856L44.5 23.0996L38.318 37.6856L22.5 39.0276L34.512 49.4336L30.904 64.8996L44.5 56.6936Z\"\r\n fill=\"#0163B3\" />\r\n <text x=\"10\" y=\"105\" fill=\"#0163B2\">{{LANG.NO_RESULT}}</text>\r\n </svg>\r\n</ng-template>\r\n\r\n<!-- Template loading -->\r\n<ng-template #loading>\r\n <div [ngStyle]=\"{\r\n 'height': searchDepartment$.value.length ? (config.modeView === MODE_VIEW_ENUM.ExternalView ? 'calc(100% - 90px)' : 'calc(100% - 50px)' ) : height\r\n }\" class=\"qms-loading-container\">\r\n <div class=\"qms-loader\" *ngFor=\"let item of arrSkeleton\">\r\n <div class=\"qms-loader__wrapper\">\r\n <div class=\"row-loader\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<!-- Template mask overlay -->\r\n<ng-template #maskOverlay>\r\n <div class=\"mask-overlay\">\r\n <mat-spinner [diameter]=\"50\" [strokeWidth]=\"5\" color=\"primary\"></mat-spinner>\r\n </div>\r\n</ng-template>\r\n\r\n<!-- Loading spinner -->\r\n<ng-template #loadingSpinner>\r\n <div class=\"qms-spinner center\">\r\n <mat-spinner [diameter]=\"20\" [strokeWidth]=\"2\"></mat-spinner>\r\n </div>\r\n</ng-template>", styles: ["@font-face{font-family:icomoon;src:url(/assets/fonts/icomoon.eot?aghldx);src:url(/assets/fonts/icomoon.eot?aghldx#iefix) format(\"embedded-opentype\"),url(/assets/fonts/icomoon.ttf?aghldx) format(\"truetype\"),url(/assets/fonts/icomoon.woff?aghldx) format(\"woff\"),url(/assets/fonts/icomoon.svg?aghldx#icomoon) format(\"svg\");font-weight:400;font-style:normal;font-display:block}[class^=icon-],[class*=\" icon-\"]{font-family:icomoon!important;speak:never;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-acutely-toxic .path1:before{content:\"\\e91b\";color:#e32730}.icon-acutely-toxic .path2:before{content:\"\\e922\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path3:before{content:\"\\e923\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path4:before{content:\"\\e924\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path5:before{content:\"\\e925\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path6:before{content:\"\\e926\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path7:before{content:\"\\e927\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path8:before{content:\"\\e928\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path9:before{content:\"\\e929\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path10:before{content:\"\\e92a\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path11:before{content:\"\\e92b\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path12:before{content:\"\\e92c\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path13:before{content:\"\\e92d\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path14:before{content:\"\\e92e\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path15:before{content:\"\\e92f\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path16:before{content:\"\\e930\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path17:before{content:\"\\e931\";margin-left:-1em;color:#323232}.icon-add-column:before{content:\"\\e932\"}.icon-add-tooltip:before{content:\"\\e933\"}.icon-admin:before{content:\"\\e934\"}.icon-annual-cycle:before{content:\"\\e935\"}.icon-assignment-repete:before{content:\"\\e936\"}.icon-barrier-add:before{content:\"\\e937\"}.icon-barrier-edit:before{content:\"\\e938\"}.icon-barrier-view:before{content:\"\\e939\"}.icon-button-group:before{content:\"\\e93a\"}.icon-chemical-manager:before{content:\"\\e93b\"}.icon-chronic-health-hazard .path1:before{content:\"\\e93c\";color:#e32730}.icon-chronic-health-hazard .path2:before{content:\"\\e93d\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path3:before{content:\"\\e93e\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path4:before{content:\"\\e93f\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path5:before{content:\"\\e940\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path6:before{content:\"\\e941\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path7:before{content:\"\\e942\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path8:before{content:\"\\e943\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path9:before{content:\"\\e944\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path10:before{content:\"\\e945\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path11:before{content:\"\\e946\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path12:before{content:\"\\e947\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path13:before{content:\"\\e948\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path14:before{content:\"\\e949\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path15:before{content:\"\\e94a\";margin-left:-1em;color:#323232}.icon-contingency:before{content:\"\\e94b\"}.icon-corrosive .path1:before{content:\"\\e94c\";color:#323232}.icon-corrosive .path2:before{content:\"\\e94d\";margin-left:-1em;color:#323232}.icon-corrosive .path3:before{content:\"\\e94e\";margin-left:-1em;color:#323232}.icon-corrosive .path4:before{content:\"\\e94f\";margin-left:-1em;color:#323232}.icon-corrosive .path5:before{content:\"\\e950\";margin-left:-1em;color:#323232}.icon-corrosive .path6:before{content:\"\\e951\";margin-left:-1em;color:#323232}.icon-corrosive .path7:before{content:\"\\e952\";margin-left:-1em;color:#323232}.icon-corrosive .path8:before{content:\"\\e953\";margin-left:-1em;color:#323232}.icon-corrosive .path9:before{content:\"\\e954\";margin-left:-1em;color:#323232}.icon-corrosive .path10:before{content:\"\\e955\";margin-left:-1em;color:#323232}.icon-corrosive .path11:before{content:\"\\e956\";margin-left:-1em;color:#323232}.icon-corrosive .path12:before{content:\"\\e957\";margin-left:-1em;color:#323232}.icon-corrosive .path13:before{content:\"\\e958\";margin-left:-1em;color:#323232}.icon-corrosive .path14:before{content:\"\\e959\";margin-left:-1em;color:#323232}.icon-corrosive .path15:before{content:\"\\e95a\";margin-left:-1em;color:#323232}.icon-corrosive .path16:before{content:\"\\e95b\";margin-left:-1em;color:#323232}.icon-corrosive .path17:before{content:\"\\e95c\";margin-left:-1em;color:#323232}.icon-corrosive .path18:before{content:\"\\e95d\";margin-left:-1em;color:#323232}.icon-corrosive .path19:before{content:\"\\e95e\";margin-left:-1em;color:#323232}.icon-corrosive .path20:before{content:\"\\e95f\";margin-left:-1em;color:#323232}.icon-corrosive .path21:before{content:\"\\e960\";margin-left:-1em;color:#e32730}.icon-dashboard:before{content:\"\\e961\"}.icon-database-sds:before{content:\"\\e962\"}.icon-description-add:before{content:\"\\e963\"}.icon-description-edit:before{content:\"\\e964\"}.icon-description-view:before{content:\"\\e965\";color:#666}.icon-document-read .path1:before{content:\"\\e966\";color:#000;opacity:.6}.icon-document-read .path2:before{content:\"\\e967\";margin-left:-1em;color:#fff}.icon-document-read .path3:before{content:\"\\e968\";margin-left:-1em;color:#000;opacity:.6}.icon-draft:before{content:\"\\e969\"}.icon-expired-off:before{content:\"\\e96a\"}.icon-expired-on:before{content:\"\\e96b\"}.icon-explosive .path1:before{content:\"\\e96c\";color:#e32730}.icon-explosive .path2:before{content:\"\\e96d\";margin-left:-1em;color:#323232}.icon-explosive .path3:before{content:\"\\e96e\";margin-left:-1em;color:#323232}.icon-explosive .path4:before{content:\"\\e96f\";margin-left:-1em;color:#323232}.icon-explosive .path5:before{content:\"\\e970\";margin-left:-1em;color:#323232}.icon-explosive .path6:before{content:\"\\e971\";margin-left:-1em;color:#323232}.icon-explosive .path7:before{content:\"\\e972\";margin-left:-1em;color:#323232}.icon-explosive .path8:before{content:\"\\e973\";margin-left:-1em;color:#323232}.icon-explosive .path9:before{content:\"\\e974\";margin-left:-1em;color:#323232}.icon-explosive .path10:before{content:\"\\e975\";margin-left:-1em;color:#323232}.icon-explosive .path11:before{content:\"\\e976\";margin-left:-1em;color:#323232}.icon-explosive .path12:before{content:\"\\e977\";margin-left:-1em;color:#323232}.icon-explosive .path13:before{content:\"\\e978\";margin-left:-1em;color:#323232}.icon-explosive .path14:before{content:\"\\e979\";margin-left:-1em;color:#323232}.icon-explosive .path15:before{content:\"\\e97a\";margin-left:-1em;color:#323232}.icon-explosive .path16:before{content:\"\\e97b\";margin-left:-1em;color:#323232}.icon-explosive .path17:before{content:\"\\e97c\";margin-left:-1em;color:#323232}.icon-explosive .path18:before{content:\"\\e97d\";margin-left:-1em;color:#323232}.icon-explosive .path19:before{content:\"\\e97e\";margin-left:-1em;color:#323232}.icon-explosive .path20:before{content:\"\\e97f\";margin-left:-1em;color:#323232}.icon-explosive .path21:before{content:\"\\e980\";margin-left:-1em;color:#323232}.icon-explosive .path22:before{content:\"\\e981\";margin-left:-1em;color:#323232}.icon-explosive .path23:before{content:\"\\e982\";margin-left:-1em;color:#323232}.icon-explosive .path24:before{content:\"\\e983\";margin-left:-1em;color:#323232}.icon-explosive .path25:before{content:\"\\e984\";margin-left:-1em;color:#323232}.icon-explosive .path26:before{content:\"\\e985\";margin-left:-1em;color:#323232}.icon-explosive .path27:before{content:\"\\e986\";margin-left:-1em;color:#323232}.icon-explosive .path28:before{content:\"\\e987\";margin-left:-1em;color:#323232}.icon-explosive .path29:before{content:\"\\e988\";margin-left:-1em;color:#323232}.icon-explosive .path30:before{content:\"\\e989\";margin-left:-1em;color:#323232}.icon-explosive .path31:before{content:\"\\e98a\";margin-left:-1em;color:#323232}.icon-explosive .path32:before{content:\"\\e98b\";margin-left:-1em;color:#323232}.icon-explosive .path33:before{content:\"\\e98c\";margin-left:-1em;color:#323232}.icon-explosive .path34:before{content:\"\\e98d\";margin-left:-1em;color:#323232}.icon-explosive .path35:before{content:\"\\e98e\";margin-left:-1em;color:#323232}.icon-explosive .path36:before{content:\"\\e98f\";margin-left:-1em;color:#323232}.icon-explosive .path37:before{content:\"\\e990\";margin-left:-1em;color:#323232}.icon-explosive .path38:before{content:\"\\e991\";margin-left:-1em;color:#323232}.icon-explosive .path39:before{content:\"\\e992\";margin-left:-1em;color:#323232}.icon-explosive .path40:before{content:\"\\e993\";margin-left:-1em;color:#323232}.icon-explosive .path41:before{content:\"\\e994\";margin-left:-1em;color:#323232}.icon-explosive .path42:before{content:\"\\e995\";margin-left:-1em;color:#323232}.icon-explosive .path43:before{content:\"\\e996\";margin-left:-1em;color:#323232}.icon-explosive .path44:before{content:\"\\e997\";margin-left:-1em;color:#323232}.icon-explosive .path45:before{content:\"\\e998\";margin-left:-1em;color:#323232}.icon-explosive .path46:before{content:\"\\e999\";margin-left:-1em;color:#323232}.icon-file-excel:before{content:\"\\e99a\"}.icon-file-pdf:before{content:\"\\e99b\"}.icon-file-pdf-verified .path1:before{content:\"\\e99c\";color:#000;opacity:.6}.icon-file-pdf-verified .path2:before{content:\"\\e99d\";margin-left:-1em;color:#fff}.icon-file-pdf-verified .path3:before{content:\"\\e99e\";margin-left:-1em;color:#000;opacity:.6}.icon-file-word:before{content:\"\\e99f\"}.icon-filter-alt:before{content:\"\\e9a0\"}.icon-flammable .path1:before{content:\"\\e9a1\";color:#323232}.icon-flammable .path2:before{content:\"\\e9a2\";margin-left:-1em;color:#323232}.icon-flammable .path3:before{content:\"\\e9a3\";margin-left:-1em;color:#e32730}.icon-gas-under-pressure .path1:before{content:\"\\e9a4\";color:#323232}.icon-gas-under-pressure .path2:before{content:\"\\e9a5\";margin-left:-1em;color:#e32730}.icon-health-hazard .path1:before{content:\"\\e9a6\";color:#323232}.icon-health-hazard .path2:before{content:\"\\e9a7\";margin-left:-1em;color:#e32730}.icon-line-break:before{content:\"\\e9a8\"}.icon-location:before{content:\"\\e9a9\"}.icon-measure-add:before{content:\"\\e9aa\"}.icon-measure-edit:before{content:\"\\e9ab\"}.icon-measure-view:before{content:\"\\e9ac\";color:#666}.icon-messages:before{content:\"\\e9ad\"}.icon-monitoring:before{content:\"\\e9ae\";color:#666}.icon-move:before{content:\"\\e9af\"}.icon-oxidizing .path1:before{content:\"\\e9b0\";color:#e32730}.icon-oxidizing .path2:before{content:\"\\e9b1\";margin-left:-1em;color:#323232}.icon-oxidizing .path3:before{content:\"\\e9b2\";margin-left:-1em;color:#323232}.icon-oxidizing .path4:before{content:\"\\e9b3\";margin-left:-1em;color:#323232}.icon-process-area-closed:before{content:\"\\e9b4\"}.icon-process-area-open:before{content:\"\\e9b5\"}.icon-process-linked .path1:before{content:\"\\e9b6\";color:#000;opacity:.6}.icon-process-linked .path2:before{content:\"\\e9b7\";margin-left:-1em;color:#666}.icon-risk:before{content:\"\\e9b8\"}.icon-search-in-file:before{content:\"\\e9b9\"}.icon-sort-ascending:before{content:\"\\e9ba\"}.icon-sort-descending:before{content:\"\\e9bb\"}.icon-subscript:before{content:\"\\e9bc\"}.icon-superscript:before{content:\"\\e9bd\"}.icon-syncronice-favorites:before{content:\"\\e9be\"}.icon-system-settings:before{content:\"\\e9bf\"}.icon-view-three-outlined:before{content:\"\\e9c0\"}.icon-workplace-safety:before{content:\"\\e9c1\"}.icon-checklist:before{content:\"\\e900\"}.icon-department-document .path1:before{content:\"\\e901\";color:#000;opacity:.6}.icon-department-document .path2:before{content:\"\\e902\";margin-left:-1em;color:#00804c}.icon-department-folder-closed .path1:before{content:\"\\e903\";color:#000;opacity:.6}.icon-department-folder-closed .path2:before{content:\"\\e904\";margin-left:-1em;color:#00804c}.icon-department-folder-open .path1:before{content:\"\\e905\";color:#000;opacity:.6}.icon-department-folder-open .path2:before{content:\"\\e906\";margin-left:-1em;color:#00804c}.icon-deviation:before{content:\"\\e907\"}.icon-dropdown-folder .path1:before{content:\"\\e908\";color:#00324e}.icon-dropdown-folder .path2:before{content:\"\\e909\";margin-left:-1em;color:#fff;opacity:.6}.icon-enterprise-document .path1:before{content:\"\\e90a\";color:#000;opacity:.6}.icon-enterprise-document .path2:before{content:\"\\e90b\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-closed .path1:before{content:\"\\e90c\";color:#000;opacity:.6}.icon-enterprise-folder-closed .path2:before{content:\"\\e90d\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-open .path1:before{content:\"\\e90e\";color:#000;opacity:.6}.icon-enterprise-folder-open .path2:before{content:\"\\e90f\";margin-left:-1em;color:#cf4714}.icon-folder-closed:before{content:\"\\e910\"}.icon-folder-open:before{content:\"\\e911\"}.icon-keyboard_arrow_down:before{content:\"\\e912\"}.icon-keyboard_arrow_up:before{content:\"\\e913\"}.icon-local-document .path1:before{content:\"\\e914\";color:#000;opacity:.6}.icon-local-document .path2:before{content:\"\\e915\";margin-left:-1em;color:#1954a9}.icon-local-folder-closed .path1:before{content:\"\\e916\";color:#000;opacity:.6}.icon-local-folder-closed .path2:before{content:\"\\e917\";margin-left:-1em;color:#1954a9}.icon-local-folder-open .path1:before{content:\"\\e918\";color:#000;opacity:.6}.icon-local-folder-open .path2:before{content:\"\\e919\";margin-left:-1em;color:#1954a9}.icon-process:before{content:\"\\e91a\"}.icon-regional-document .path1:before{content:\"\\e91c\";color:#000;opacity:.6}.icon-regional-document .path2:before{content:\"\\e91d\";margin-left:-1em;color:#662e0d}.icon-regional-folder-closed .path1:before{content:\"\\e91e\";color:#000;opacity:.6}.icon-regional-folder-closed .path2:before{content:\"\\e91f\";margin-left:-1em;color:#662e0d}.icon-regional-folder-open .path1:before{content:\"\\e920\";color:#000;opacity:.6}.icon-regional-folder-open .path2:before{content:\"\\e921\";margin-left:-1em;color:#662e0d}.qms-select-department-tree-container{font-family:Open Sans,sans-serif}.qms-select-department-tree-container .mr10{margin-right:10px}.qms-select-department-tree-container .mt5{margin-bottom:5px}.qms-select-department-tree-container .mb5{margin-top:5px}.qms-select-department-tree-container .w100{width:100%}.qms-select-department-tree-container .h100{height:100%}.qms-select-department-tree-container .fw500{font-weight:500!important}.qms-select-department-tree-container .text-right{text-align:right}.qms-select-department-tree-container .mt20{margin-top:20px}.qms-select-department-tree-container .d-flex{display:flex}.qms-select-department-tree-container .align-items-center{align-items:center}.qms-select-department-tree-container .justify-content-end{justify-content:flex-end}.qms-select-department-tree-container .text-selected{color:#0009;font-size:12px;line-height:16px;margin-top:1rem}.qms-select-department-tree-container .input-field{display:flex;align-items:center;position:relative}.qms-select-department-tree-container .input-field ::ng-deep .mat-form-field-wrapper{padding-bottom:8px!important}.qms-select-department-tree-container .input-field ::ng-deep .mat-form-field-underline{bottom:8px!important}.qms-select-department-tree-container .input-field input.input-search{width:100%;padding:10px;outline:none;border:none;background:var(--background-input-text)}.qms-select-department-tree-container .input-field .btn-search{cursor:pointer;vertical-align:middle;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.qms-select-department-tree-container .input-field .line__divider{border-bottom:1px solid #ccc;height:1px;margin-top:10px;min-width:300px;max-width:100%}.qms-select-department-tree-container .header-title{font-weight:500;color:var(--ws-text-primary);font-size:16px;display:flex;align-items:center}.qms-select-department-tree-container .header-title .header-view{padding:4px 0}.qms-select-department-tree-container .sticky-position{position:sticky;top:0;left:0;z-index:1;background:#fff}.qms-select-department-tree-container .header-view-tree{display:grid;grid-template-columns:1fr 200px;column-gap:2px;padding:4px 12px 4px 0}.qms-select-department-tree-container .header-view-tree .header-view:nth-child(1){padding-left:12px}.qms-select-department-tree-container .tree-department-wrapper{padding-right:4px;overflow:hidden;position:relative;transition:height .3s ease-in-out}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view{width:100%;display:grid;grid-template-columns:1fr 200px;column-gap:2px}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main>.separate{height:38px}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main>.separate.h-0{height:0}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main:last-child{height:100%;padding-left:4px;position:relative}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main:last-child:after{position:absolute;content:\"\";top:0;bottom:-38px;left:0;width:1px;background:#0000001f}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main .external-list-item-container .node-external{overflow:hidden;transition:all .1s ease-in-out}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main .external-list-item-container .node-external .node-external-content{padding:5px 15px;height:calc(100% - 2px);color:var(--default-color);font-size:14px;display:flex;align-items:center}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main .external-list-item-container .node-external .node-external-content span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qms-select-department-tree-container .mask-overlay{z-index:1000;background-color:#2221211a;position:absolute;top:0;left:0;width:100%;height:100%;border-radius:4px;overflow:hidden;display:grid;place-items:center}.qms-select-department-tree-container .select-department-tree>.cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper{padding:0 4px!important}.qms-select-department-tree-container .select-department-tree .qms-tree-node{display:flex;align-items:center;border-radius:4px}.qms-select-department-tree-container .select-department-tree .qms-tree-node:hover{background-color:#00000014}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.node-expand-area{width:48px;height:48px;position:relative}.qms-select-department-tree-container .select-department-tree .qms-tree-node.active-external-view .mat-mdc-checkbox.qms-group-options{width:calc(100% - 250px)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.node-loading{background:var(--primary-light-6-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node{flex-basis:200px;overflow:hidden}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node .node-external{overflow:hidden;transition:all .1s ease-in-out;display:block}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node .node-external .node-external-content{padding:5px 15px;height:calc(100% - 2px);color:var(--default-color);font-size:14px;display:flex;align-items:center}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node .node-external .node-external-content span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node{color:var(--primary)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node:hover{background:var(--primary-light-6-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node:active{background:var(--primary-light-12-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node .mat-icon{color:var(--primary)}.qms-select-department-tree-container .select-department-tree .qms-tree-node .node-without-checkbox{cursor:pointer;width:100%;display:flex;justify-content:space-between;align-items:center}.qms-select-department-tree-container .select-department-tree .qms-tree-node .node-without-checkbox .mat-icon{color:var(--primary);margin-right:4px}.qms-select-department-tree-container .select-department-tree .qms-tree-node.selected-theme{background:var(--primary-light-12-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all{cursor:default!important;pointer-events:none;-webkit-user-select:none;user-select:none}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all button.mat-button-disabled,.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all .mat-icon-rtl-mirror,.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all .type-icon{color:#00000061}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all .text-name.disabled{color:#00000061;cursor:default!important;pointer-events:none;-webkit-user-select:none;user-select:none}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all.active{background-color:transparent}.qms-select-department-tree-container .select-department-tree .qms-tree-node.move-location-mode:hover .move-location-btn,.qms-select-department-tree-container .select-department-tree .qms-tree-node.move-location-mode:active .move-location-btn{display:block}.qms-select-department-tree-container .text-name{position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;cursor:pointer;width:100%}.qms-select-department-tree-container .cursor-pointer{cursor:pointer}.qms-select-department-tree-container .ml5{margin-left:15px!important}.qms-select-department-tree-container .pl-10{padding-left:10px}.qms-select-department-tree-container ::ng-deep .mat-mdc-checkbox.qms-group-options.flex-direction-row .mat-checkbox-layout{white-space:normal}.qms-select-department-tree-container ::ng-deep .mat-mdc-checkbox.qms-group-options.flex-direction-row .node-text>span{display:block}.qms-select-department-tree-container ::ng-deep .mat-mdc-checkbox.qms-group-options.flex-direction-row .mat-checkbox-label{flex-direction:row;align-items:center;position:relative;padding-bottom:2px}.qms-select-department-tree-container .qms-view-search-result{width:100%;overflow:hidden}.qms-select-department-tree-container .qms-view-search-result__header{position:relative}.qms-select-department-tree-container .qms-view-search-result__header:after{position:absolute;content:\"\";bottom:0;left:0;width:100%;height:1px;background-color:#0000001a}.qms-select-department-tree-container .qms-view-search-result__header .header-title{padding:8px 0;display:inline-block}.qms-select-department-tree-container .qms-view-search-result__header .header-title:nth-child(1){padding-left:12px}.qms-select-department-tree-container .qms-view-search-result__header .header-title:nth-child(2){flex-basis:200px}.qms-select-department-tree-container .qms-view-search-result>.no-result{height:100%;display:flex;justify-content:center;align-items:center}.qms-select-department-tree-container .qms-view-search-result__wrapper{height:calc(100% - 50px);width:100%}.qms-select-department-tree-container .qms-view-search-result__wrapper.active-external{height:calc(100% - 90px)!important}.qms-select-department-tree-container .qms-view-search-result__wrapper .result{max-height:100%;overflow-y:auto;margin-bottom:4px;padding-right:4px}.qms-select-department-tree-container .qms-view-search-result__wrapper .result.active-paging{max-height:calc(100% - 40px)}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item{border-radius:4px;display:grid;grid-template-columns:45px 1fr;align-items:center;cursor:pointer;transition:background .3s ease;min-height:40px}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item:not(:nth-child(1)){margin-top:4px!important}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item:hover{background:linear-gradient(0deg,#0163b21f,#0163b21f),#fff}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item:hover .move-location-btn{display:block}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item.active{background:linear-gradient(0deg,#0163b21f,#0163b21f),#fff}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item.no-checkbox{grid-template-columns:1fr}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content{display:flex;align-items:center}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content .item-result-content-wraper{padding:5px 15px;width:100%}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content .external-name{flex-basis:200px}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content .external-name span{width:200px;display:inline-block}.qms-select-department-tree-container .qms-view-search-result ::ng-deep .mat-mdc-checkbox.qms-group-options{display:flex;height:100%}.qms-select-department-tree-container ::ng-deep .breadcrumb-container{flex-wrap:wrap}.qms-select-department-tree-container ::ng-deep .mat-button-focus-overlay{background-color:transparent}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item{margin:0}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;transition:color .3s ease}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item-text:not(:last-child){max-width:150px!important}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-total-result{margin-bottom:0;margin-right:12px;height:100%;display:flex;align-items:center}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-total-result span{font-weight:600;color:#000c}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-paginator-range-actions{margin-bottom:0;column-gap:2px}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-paginator-range-actions>.qms-total-result{margin-bottom:0}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-form-field-wrapper{padding-bottom:0}.qms-select-department-tree-container ::ng-deep .qms-paginator .qms-paginator-page-size{align-items:center}.qms-select-department-tree-container .text-gray{color:#242424}.qms-select-department-tree-container .mb0{margin-bottom:0!important}.qms-select-department-tree-container .fs-base{font-size:14px!important}.qms-select-department-tree-container .user-select-none{-webkit-user-select:none;user-select:none}.qms-select-department-tree-container .item-breadcrumb-disable{cursor:not-allowed;color:#0009;font-weight:400;font-size:14px}.qms-select-department-tree-container ::ng-deep .mat-mdc-checkbox.checkbox-all .mat-checkbox-label{flex-direction:row;align-items:center;column-gap:4px}.qms-select-department-tree-container ::ng-deep .btn-arrow{width:40px;height:40px;line-height:40px}.qms-select-department-tree-container .qms-loading-container{overflow:hidden;display:grid;grid-template-rows:repeat(60px)}.qms-select-department-tree-container .qms-loading-container .qms-loader{position:relative;width:100%;height:100%;padding:10px 0;overflow:hidden}.qms-select-department-tree-container .qms-loading-container .qms-loader:after{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;background:linear-gradient(110deg,#e9e9e900,#e3e3e300 40%,#e3e3e380 50%,#e3e3e300 60% 100%);animation:animate-loading 1.2s linear infinite}.qms-select-department-tree-container .qms-loading-container .qms-loader__wrapper{position:relative;width:100%;height:100%}.qms-select-department-tree-container .qms-loading-container .qms-loader__wrapper .row-loader{background-color:#eee;position:absolute;left:0;width:100%;height:40px}@keyframes animate-loading{0%{transform:translate(-100%)}to{transform:translate(100%)}}.qms-select-department-tree-container .qms-spinner{font-size:20px;position:relative;display:inline-block;width:1em;height:1em}.qms-select-department-tree-container .qms-spinner.center{position:absolute;inset:0;margin:auto}.qms-select-department-tree-container ::ng-deep .mat-mdc-progress-spinner circle,.qms-select-department-tree-container .mat-mdc-progress-spinner circle{stroke:#1b75be!important}@media screen and (max-width: 600px){.qms-select-department-tree-container .external-view-node{flex-basis:65px!important}.qms-select-department-tree-container .qms-tree-node.active-external-view .mat-mdc-checkbox.qms-group-options{width:calc(100% - 110px)!important}.qms-select-department-tree-container .header-view-tree{grid-template-columns:1fr 80px!important}.qms-select-department-tree-container ::ng-deep .cdk-virtual-scroll-content-wrapper{right:0!important}.qms-select-department-tree-container .header-title{font-size:14px!important}.qms-select-department-tree-container .text-name,.qms-select-department-tree-container .node-external,.qms-select-department-tree-container .text-label,.qms-select-department-tree-container .text-label+span{font-size:12px}.qms-select-department-tree-container .node-expand-area{width:30px!important;height:30px!important}.qms-select-department-tree-container .node-expand-area .qms-btn-icon{width:30px;height:30px;line-height:30px}.qms-select-department-tree-container .fs-base{font-size:12px!important}.qms-select-department-tree-container .qms-select-department-tree-container .breadcrumb-container{flex-wrap:nowrap!important}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item-text{font-size:12px!important;max-width:175px!important}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-total-result{display:none!important}.qms-select-department-tree-container ::ng-deep .qms-paginator .size-small .mat-mdc-paginator-container{justify-content:center!important}.qms-select-department-tree-container .qms-view-search-result__header>.header-title:nth-child(2){flex-basis:120px!important}.qms-select-department-tree-container .result-item__content .external-name{flex-basis:75px!important}.qms-select-department-tree-container .result-item__content .external-name span{width:75px!important}}.qms-select-department-tree-container ::ng-deep .qms-paginator{margin-top:0}.move-location-btn{display:none;color:var(--primary)}::ng-deep .move-location-menu .mat-mdc-menu-item:hover{color:var(--primary)}\n"], dependencies: [{ kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i7.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i7$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: QMSSearchFieldDirective, selector: "mat-form-field[qms-search-field]", inputs: ["isLoading"] }, { kind: "directive", type: QMSInputClearDirective, selector: "[qms-input-clear]" }, { kind: "directive", type: QMSFormFieldDirective, selector: "[qms-form]" }, { kind: "directive", type: QMSGroupOptionDirective, selector: "[qms-group-options]", inputs: ["label"] }, { kind: "directive", type: AutocompleteOffDirective, selector: "[qms-group-options]" }, { kind: "directive", type: QMSToolTipRendererDirective, selector: "[qms-tool-tip]", inputs: ["showToolTip", "mode", "qms-tool-tip", "contentTemplate", "position"] }, { kind: "directive", type: QMSMultiIconDirective, selector: "[qmsTransformIcon]", inputs: ["qmsTransformIcon"] }, { kind: "directive", type: EllipsifyDirective, selector: "[qms-elipsify]" }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i11.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i11.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i17.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: QMSButtonIcon, selector: "button[qms-btn-icon]", inputs: ["disabled", "color", "active"], exportAs: ["qmsButtonIcon"] }, { kind: "component", type: i16.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: QMSBreadcrumb, selector: "qms-breadcrumb", inputs: ["nodes", "type", "maxLine", "numDisplayItem", "onlyItem", "disabledLastItem"], outputs: ["onItemClick"] }, { kind: "directive", type: i14.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: QMSPaginatorComponent, selector: "qms-paginator", inputs: ["numHidden", "size", "pageSizeOptions", "pageSize", "length", "pageIndex", "overlayPanelClass"], outputs: ["page"] }, { kind: "component", type: i23.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i24.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i24.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i24.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: i10.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i10.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i10.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }], animations: [
|
|
37167
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SelectDepartmentTreeComponent, selector: "qms-select-department-tree", inputs: { rowsSkeleton: "rowsSkeleton", height: "height", config: "config", maxWidthNode: "maxWidthNode" }, outputs: { onSearchEvent: "onSearchEvent", onPagingSearchEvent: "onPagingSearchEvent", onValueChangeEvent: "onValueChangeEvent", selectionNodeChangeEvent: "selectionNodeChangeEvent", onCheckNodeEvent: "onCheckNodeEvent", onExpandNodeEvent: "onExpandNodeEvent", onLoadMoreEvent: "onLoadMoreEvent", onCheckItemSearchEvent: "onCheckItemSearchEvent", onCheckAllItemSearchEvent: "onCheckAllItemSearchEvent", toggleIncludeChildEvent: "toggleIncludeChildEvent", isPushingChildNodes: "isPushingChildNodes" }, viewQueries: [{ propertyName: "cdkVirtualScrollViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "paginatorSearch", first: true, predicate: ["paginatorSearch"], descendants: true }], ngImport: i0, template: "<div [ngClass]=\"['qms-select-department-tree-container', (config.customClass || '')]\">\r\n <div class=\"input-select-department\">\r\n <form (ngSubmit)=\"!getLoading$.value && onSearch()\" *ngIf=\"config.enableTreeSearch\" class=\"input-field\">\r\n <mat-form-field class=\"w100\" qms-form qms-search-field>\r\n <input [formControl]=\"formSearchControl\" type=\"text\" placeholder=\"{{ LANG.SEARCH }}\" matInput />\r\n <button *ngIf=\"!getLoading$.value\" type=\"submit\" qms-btn-icon color=\"light\" matSuffix>\r\n <mat-icon>search</mat-icon>\r\n </button>\r\n <div matSuffix class=\"d-inline-block\">\r\n <mat-progress-spinner [@inOutAnimation] mode=\"indeterminate\" diameter=\"20\"\r\n *ngIf=\"getLoading$.value\"></mat-progress-spinner>\r\n </div>\r\n <button *ngIf=\"formSearchControl.value && !getLoading$.value\" qms-btn-icon color=\"light\" [@inOutAnimation]\r\n aria-label=\"Clear\" matSuffix (click)=\"formSearchControl.reset()\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </mat-form-field>\r\n </form>\r\n <div [@inOutAnimation] *ngIf=\"(getIndexView$ | async) === 1 && (textSearchSubject$ | async)\"\r\n class=\"sub-text ms-1 fw500\">\r\n {{LANG.RESULT_SEARCH_FOR}}<i><b>\"{{textSearchSubject$ | async}}\"</b></i>\r\n </div>\r\n <div [class.justify-content-between]=\"config.enableIncludeChild && !config.isSelectOne\"\r\n class=\"select__toggle-include toggle-include-child my-1 d-flex justify-content-end align-items-center\">\r\n <mat-slide-toggle *ngIf=\"config.enableIncludeChild && !config.isSelectOne\"\r\n [disabled]=\"(getIndexView$ | async) === 1 && config.disableToggleIncludeChildWhenChangeView\"\r\n [(ngModel)]=\"isIncludeChildren\" (ngModelChange)=\"toggleIncludeChildEvent.emit($event)\" color=\"default\"\r\n qms-group-options>\r\n <span class=\"text-label\">{{config.selectIncludeLabel || LANG.SELECT_INCLUDE_CHILD}}</span>\r\n </mat-slide-toggle>\r\n <button class=\"btn-arrow\" [@inOutAnimation] *ngIf=\"(getIndexView$ | async) === 1 && config.enableTreeSearch\"\r\n (click)=\"setIndexView(0)\" qms-btn-icon color=\"light\" [qms-tool-tip]=\"LANG.BACK_TO_TREE\" mode=\"dark\"\r\n position=\"top\">\r\n <mat-icon>arrow_back</mat-icon>\r\n </button>\r\n <button class=\"btn-arrow\" [@inOutAnimation]\r\n *ngIf=\"(getIndexView$ | async) === 0 && config.enableTreeSearch && (textSearchSubject$ | async)\"\r\n (click)=\"setIndexView(1)\" qms-btn-icon color=\"light\" [qms-tool-tip]=\"LANG.GOTO_SEACH_RESULT\" mode=\"dark\"\r\n position=\"top\">\r\n <mat-icon>arrow_forward</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n <div [@inOutAnimation]\r\n *ngIf=\"(getIndexView$ | async) === 0 && config.modeView === MODE_VIEW_ENUM.ExternalView && !!config.headerName\"\r\n class=\"header-view-tree\">\r\n <div class=\"header-view header-title\">\r\n {{config.headerName.treeName}}\r\n </div>\r\n <div class=\"header-view header-title\">\r\n {{config.headerName.externalName}}\r\n </div>\r\n </div>\r\n <mat-divider class=\"mx-auto\"></mat-divider>\r\n <div [@animateSlideView]=\"(getIndexView$ | async)\" [ngStyle]=\"{\r\n minHeight: height\r\n }\" class=\"tree-department-wrapper\">\r\n <div *ngIf=\"(getIndexView$ | async) === 0\" class=\"tree-view w100 h100\">\r\n <div class=\"tree-view-main h100\">\r\n <div *ngIf=\"!config.isSelectOne && !!treeControl.dataNodes && config.activeSelectAllNode\"\r\n class=\"checkbox-all-tree\" [class.sticky-position]=\"config.modeView === MODE_VIEW_ENUM.ExternalView\">\r\n <!-- Checkbox all root node -->\r\n <mat-checkbox [@inOutAnimation] (click)=\"onCheckAllRootTreeNode()\"\r\n [indeterminate]=\"isIndeterminateCheckboxAllTree\" [checked]=\"isAllDepartmentSelected\" qms-group-options\r\n color=\"default\" label=\"none\" class=\"checkbox-all\">\r\n <span class=\"text-label \">{{LANG.CHOOSE_ALL}} (<b>{{treeControl.dataNodes.length}}</b>)</span>\r\n </mat-checkbox>\r\n <mat-divider class=\"mx-auto\"></mat-divider>\r\n </div>\r\n <cdk-virtual-scroll-viewport *ngIf=\"dataSource.data\" [ngClass]=\"{\r\n 'has-checkbox-all': !config.isSelectOne && config.modeView === MODE_VIEW_ENUM.Basic,\r\n 'select-department-tree': true\r\n }\" [itemSize]=\"ITEM_SIZE\" [ngStyle]=\"{height: height}\">\r\n <ng-container *cdkVirtualFor=\"let node of dataSource; trackBy: trackBy\">\r\n <div class=\"qms-tree-node mt-1\" [style.padding-left]=\"node.level * (config.isMobile ? 12 :24) + 'px'\"\r\n [attr.data-id]=\"node.id\" [id]=\"'mat-node-'+node.id\" [@triggerColor]=\"activeNode == node.id\" [ngClass]=\"{\r\n 'w-100': config.isSelectOne,\r\n 'selected-theme': this.checkListSelection.isSelected(node) && config.isSelectOne,\r\n 'expand-node': treeControl.isExpandable(node) && treeControl.isExpanded(node),\r\n 'active-external-view': config.modeView === MODE_VIEW_ENUM.ExternalView,\r\n 'node-loading': node.isLoading,\r\n 'move-location-mode': config.moveLocationMode\r\n }\">\r\n <div class=\"node-expand-area\">\r\n <button class=\"btn-toggle\" qms-btn-icon color=\"light\"\r\n [disabled]=\"(config.moveLocationMode && checkListSelection.isSelected(node))\"\r\n (click)=\"onExpandNode(node)\" *ngIf=\"treeControl.isExpandable(node) && !node.isLoading\">\r\n <mat-icon>\r\n {{ treeControl.isExpanded(node) ? node?.expandIcon?.collapse : node?.expandIcon?.expand }}\r\n </mat-icon>\r\n </button>\r\n <ng-container *ngIf=\"node.isLoading; then loadingSpinner\"></ng-container>\r\n </div>\r\n <ng-container [ngTemplateOutlet]=\"config.isSelectOne ? nodeWithoutCheckboxTemplate : showCheckboxTemplate\"\r\n [ngTemplateOutletContext]=\"{ node: node }\"></ng-container>\r\n <div *ngIf=\"config.modeView === MODE_VIEW_ENUM.ExternalView\" class=\"external-view-node\">\r\n <span class=\"node-external\" qms-elipsify position=\"top\" mode=\"dark\">\r\n {{node.externalName || ''}}\r\n </span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </cdk-virtual-scroll-viewport>\r\n <ng-container [@inOutAnimation] *ngIf=\"config.spinnerWhenGetMore && getLoadingMore$| async ;then maskOverlay\">\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div *ngIf=\"(getIndexView$ | async) === 1\" [ngStyle]=\"{\r\n height: height\r\n }\" class=\"qms-view-search-result\">\r\n <div *ngIf=\"config.modeView === MODE_VIEW_ENUM.ExternalView\"\r\n class=\"qms-view-search-result__header d-flex align-items-center justify-content-between\">\r\n <div class=\"header-title\">\r\n <span qms-elipsify mode=\"dark\" position=\"top\">\r\n {{config.headerName.resultSearchName}}\r\n </span>\r\n </div>\r\n <div class=\"header-title\">\r\n <span qms-elipsify mode=\"dark\" position=\"top\">\r\n {{config.headerName.externalName}}\r\n </span>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"getLoading$.value; then loading\"></ng-container>\r\n <div class=\"qms-view-search-result__wrapper\" [ngClass]=\"{\r\n 'active-external': config.modeView === MODE_VIEW_ENUM.ExternalView}\"\r\n *ngIf=\"!!resultSearch.length && !getLoading$.value\">\r\n <div *ngIf=\"!config.moveLocationMode\">\r\n <mat-checkbox [@inOutAnimation]\r\n [disabled]=\"!resultSearch.length || config.isSelectOne || isDisableChecboxAllSearch()\" #checkAllSearch\r\n [indeterminate]=\"indeterminateSearchResult\" [checked]=\"isSelectAllResultSearch\" qms-group-options\r\n color=\"default\" label=\"none\" class=\"checkbox-all\"\r\n (click)=\"!config.isSelectOne && onSelectAllSearchResult(checkAllSearch.checked)\">\r\n <span class=\"text-label header-title\">{{LANG.CHOOSE_ALL}}</span>\r\n <span>(<b>{{resultSearch.length}}</b>)</span>\r\n </mat-checkbox>\r\n </div>\r\n <div [@inOutAnimation] [@listAnimation]\r\n [class.active-paging]=\"searchDepartment$.value.length > 10 && config.enablePagingSearch\" class=\"result\">\r\n <div [qms-tool-tip]=\"!canHandleItemSearchResult(item) ? LANG.ITEM_NOT_MATCH_TO_TREE : ''\" mode=\"dark\"\r\n position=\"top\" *ngFor=\"let item of resultSearch\"\r\n (click)=\"$event.stopImmediatePropagation(); !item.disabled && onCheckItemSearchResult(item)\"\r\n [ngClass]=\"{'active': checkListSelectionSearch.isSelected(item), 'no-checkbox': config.moveLocationMode}\"\r\n class=\"result-item user-select-none\" matRipple>\r\n <mat-checkbox [@inOutAnimation] *ngIf=\"!item.isLoading && !config.moveLocationMode\"\r\n [disabled]=\"item.disabled\"\r\n (click)=\"$event.stopImmediatePropagation(); !item.disabled && onCheckItemSearchResult(item)\"\r\n [checked]=\"checkListSelectionSearch.isSelected(item)\" qms-group-options color=\"default\" label=\"none\">\r\n </mat-checkbox>\r\n <div *ngIf=\"item.isLoading\" [@inOutAnimation] class=\"position-relative\">\r\n <ng-container *ngIf=\"item.isLoading; then loadingSpinner\"></ng-container>\r\n </div>\r\n <div class=\"result-item__content\">\r\n <div class=\"item-result-content-wraper\">\r\n <div class=\"text-gray fw-bold fs-base mb0\">{{item.name}}</div>\r\n <qms-breadcrumb *ngIf=\"item.location?.length > 1\" [type]=\"config.isMobile ? 'mobile': ''\"\r\n [numDisplayItem]=\"6\" (onItemClick)=\"$event.stopImmediatePropagation()\" class=\"breadcrumb-container\"\r\n [nodes]=\"item.location\">\r\n </qms-breadcrumb>\r\n <div *ngIf=\"item.location?.length === 1\" class=\"d-flex align-items-center\">\r\n <span qms-elipsify mode=\"dark\" position=\"top\"\r\n class=\"item-breadcrumb-disable d-block\">{{item.location[0].name}}</span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"config.moveLocationMode\">\r\n <button class=\"move-location-btn\" qms-btn-icon [matMenuTriggerFor]=\"menu\">\r\n <mat-icon>swap_vert</mat-icon>\r\n </button>\r\n <mat-menu class=\"move-location-menu\" #menu=\"matMenu\">\r\n <button (click)=\"setDestinationLocation(item, 'sibling')\" mat-menu-item>\r\n <span>{{LANG.PLACE_NEXT_TO}}</span>\r\n </button>\r\n <button (click)=\"setDestinationLocation(item, 'child')\" mat-menu-item>\r\n <span>{{LANG.PLACE_UNDER}}</span>\r\n </button>\r\n </mat-menu>\r\n </div>\r\n <div *ngIf=\"config.modeView === MODE_VIEW_ENUM.ExternalView\" class=\"external-name\">\r\n <span qms-elipsify mode=\"dark\" position=\"top\" class=\"text-gray fs-base mb0\">{{item.externalName}}\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div [@inOutAnimation] *ngIf=\"!resultSearch.length && !getLoading$.value\" class=\"result no-result\">\r\n <ng-container *ngTemplateOutlet=\"noResult\"></ng-container>\r\n </div>\r\n <mat-divider *ngIf=\"searchDepartment$.value.length > 10 && config.enablePagingSearch\"\r\n class=\"mx-auto\"></mat-divider>\r\n <qms-paginator #paginatorSearch *ngIf=\"searchDepartment$.value.length > 10 && config.enablePagingSearch \"\r\n [length]=\"searchDepartment$.value.length\" [numHidden]=\"0\" [pageSize]=\"CURRENT_PAGESIZE\"\r\n [pageSizeOptions]=\"PAGE_SIZE_OPTION\" (page)='onPagingSearchResult($event)'\r\n [size]='config.isMobile ? PAGINATION_SIZE.small : PAGINATION_SIZE.medium'>\r\n </qms-paginator>\r\n </div>\r\n </div>\r\n\r\n <!-- Template for Checkbox -->\r\n <ng-template #showCheckboxTemplate let-node=\"node\">\r\n <mat-checkbox [id]=\"'node-'+node.id\" qms-group-options color=\"default\" label=\"none\" class=\"flex-direction-row\"\r\n [disabled]=\"node.isLoading || node.disabled\" [checked]=\"checkListSelection.isSelected(node)\"\r\n (click)=\"!node.isLoading && onCheckNode(node)\" [attr.disabled]=\"node.disabled || node.isLoading\">\r\n <img [title]=\"node.itemIconSvg\" *ngIf=\"node.itemIconSvg\" class=\"material-icons type-icon\"\r\n [src]=\"node.itemIconSvg\" />\r\n <span *ngIf=\"node.itemIcon\" [class]=\"node.itemIcon\" [qmsTransformIcon]=\"node.itemIcon\"\r\n class=\"material-icons-outlined type-icon\"></span>\r\n <span *ngIf=\"node.itemMatIcon\" class=\"material-icons-outlined type-icon\">{{\r\n node.itemMatIcon }}\r\n </span>\r\n <div class=\"node-text\" [ngStyle]=\"{\r\n maxWidth: (maxWidthNode - 20*node.level)+ 'px'\r\n }\">\r\n <span qms-elipsify [mode]=\"'dark'\" position=\"top\" class=\"text-name cursor-pointer ml5 123\"\r\n [ngClass]=\"{ disabled: node.disabled}\">{{ node.name}}\r\n </span>\r\n </div>\r\n </mat-checkbox>\r\n </ng-template>\r\n\r\n <!-- Template node without checkbox -->\r\n <ng-template #nodeWithoutCheckboxTemplate let-node=\"node\">\r\n <div [id]=\"'node-'+node.id\" (click)=\"onCheckNode(node)\" class=\"node-without-checkbox\">\r\n <div class=\"node-info\">\r\n <span *ngIf=\"node.itemIcon\" [class]=\"node.itemIcon\" [qmsTransformIcon]=\"node.itemIcon\"\r\n class=\"material-icons-outlined type-icon\"></span>\r\n <span *ngIf=\"node.itemMatIcon\" class=\"material-icons-outlined type-icon\">{{\r\n node.itemMatIcon }}\r\n </span>\r\n <span class=\"text-name cursor-pointer pl-10 123\" [ngClass]=\"{ disabled: node.disabled }\">{{ node.name }}</span>\r\n </div>\r\n <div class=\"node-state\">\r\n <mat-icon [class.disabled]=\"(config.moveLocationMode && checkListSelection.isSelected(node))\"\r\n *ngIf=\"checkListSelection.isSelected(node)\">check</mat-icon>\r\n <button class=\"move-location-btn\" *ngIf=\"config.moveLocationMode && !checkListSelection.isSelected(node)\"\r\n qms-btn-icon [matMenuTriggerFor]=\"menu\">\r\n <mat-icon>swap_vert</mat-icon>\r\n </button>\r\n <mat-menu class=\"move-location-menu\" #menu=\"matMenu\">\r\n <button (click)=\"moveToLocation(node, 'sibling')\" mat-menu-item>\r\n <span>{{LANG.PLACE_NEXT_TO}}</span>\r\n </button>\r\n <button (click)=\"moveToLocation(node, 'child')\" mat-menu-item>\r\n <span>{{LANG.PLACE_UNDER}}</span>\r\n </button>\r\n </mat-menu>\r\n </div>\r\n </div>\r\n </ng-template>\r\n</div>\r\n\r\n<ng-template #noResult>\r\n <svg width=\"89\" height=\"130\" viewBox=\"0 0 89 88\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"white\" />\r\n <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"#0163B2\" fill-opacity=\"0.12\" />\r\n <path\r\n d=\"M44.5 56.6936L58.096 64.8996L54.488 49.4336L66.5 39.0276L50.682 37.6856L44.5 23.0996L38.318 37.6856L22.5 39.0276L34.512 49.4336L30.904 64.8996L44.5 56.6936Z\"\r\n fill=\"#0163B3\" />\r\n <text x=\"10\" y=\"105\" fill=\"#0163B2\">{{LANG.NO_RESULT}}</text>\r\n </svg>\r\n</ng-template>\r\n\r\n<!-- Template loading -->\r\n<ng-template #loading>\r\n <div [ngStyle]=\"{\r\n 'height': searchDepartment$.value.length ? (config.modeView === MODE_VIEW_ENUM.ExternalView ? 'calc(100% - 90px)' : 'calc(100% - 50px)' ) : height\r\n }\" class=\"qms-loading-container\">\r\n <div class=\"qms-loader\" *ngFor=\"let item of arrSkeleton\">\r\n <div class=\"qms-loader__wrapper\">\r\n <div class=\"row-loader\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<!-- Template mask overlay -->\r\n<ng-template #maskOverlay>\r\n <div class=\"mask-overlay\">\r\n <mat-spinner [diameter]=\"50\" [strokeWidth]=\"5\" color=\"primary\"></mat-spinner>\r\n </div>\r\n</ng-template>\r\n\r\n<!-- Loading spinner -->\r\n<ng-template #loadingSpinner>\r\n <div class=\"qms-spinner center\">\r\n <mat-spinner [diameter]=\"20\" [strokeWidth]=\"2\"></mat-spinner>\r\n </div>\r\n</ng-template>", styles: ["@font-face{font-family:icomoon;src:url(/assets/fonts/icomoon.eot?aghldx);src:url(/assets/fonts/icomoon.eot?aghldx#iefix) format(\"embedded-opentype\"),url(/assets/fonts/icomoon.ttf?aghldx) format(\"truetype\"),url(/assets/fonts/icomoon.woff?aghldx) format(\"woff\"),url(/assets/fonts/icomoon.svg?aghldx#icomoon) format(\"svg\");font-weight:400;font-style:normal;font-display:block}[class^=icon-],[class*=\" icon-\"]{font-family:icomoon!important;speak:never;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-acutely-toxic .path1:before{content:\"\\e91b\";color:#e32730}.icon-acutely-toxic .path2:before{content:\"\\e922\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path3:before{content:\"\\e923\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path4:before{content:\"\\e924\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path5:before{content:\"\\e925\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path6:before{content:\"\\e926\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path7:before{content:\"\\e927\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path8:before{content:\"\\e928\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path9:before{content:\"\\e929\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path10:before{content:\"\\e92a\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path11:before{content:\"\\e92b\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path12:before{content:\"\\e92c\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path13:before{content:\"\\e92d\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path14:before{content:\"\\e92e\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path15:before{content:\"\\e92f\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path16:before{content:\"\\e930\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path17:before{content:\"\\e931\";margin-left:-1em;color:#323232}.icon-add-column:before{content:\"\\e932\"}.icon-add-tooltip:before{content:\"\\e933\"}.icon-admin:before{content:\"\\e934\"}.icon-annual-cycle:before{content:\"\\e935\"}.icon-assignment-repete:before{content:\"\\e936\"}.icon-barrier-add:before{content:\"\\e937\"}.icon-barrier-edit:before{content:\"\\e938\"}.icon-barrier-view:before{content:\"\\e939\"}.icon-button-group:before{content:\"\\e93a\"}.icon-chemical-manager:before{content:\"\\e93b\"}.icon-chronic-health-hazard .path1:before{content:\"\\e93c\";color:#e32730}.icon-chronic-health-hazard .path2:before{content:\"\\e93d\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path3:before{content:\"\\e93e\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path4:before{content:\"\\e93f\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path5:before{content:\"\\e940\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path6:before{content:\"\\e941\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path7:before{content:\"\\e942\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path8:before{content:\"\\e943\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path9:before{content:\"\\e944\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path10:before{content:\"\\e945\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path11:before{content:\"\\e946\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path12:before{content:\"\\e947\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path13:before{content:\"\\e948\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path14:before{content:\"\\e949\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path15:before{content:\"\\e94a\";margin-left:-1em;color:#323232}.icon-contingency:before{content:\"\\e94b\"}.icon-corrosive .path1:before{content:\"\\e94c\";color:#323232}.icon-corrosive .path2:before{content:\"\\e94d\";margin-left:-1em;color:#323232}.icon-corrosive .path3:before{content:\"\\e94e\";margin-left:-1em;color:#323232}.icon-corrosive .path4:before{content:\"\\e94f\";margin-left:-1em;color:#323232}.icon-corrosive .path5:before{content:\"\\e950\";margin-left:-1em;color:#323232}.icon-corrosive .path6:before{content:\"\\e951\";margin-left:-1em;color:#323232}.icon-corrosive .path7:before{content:\"\\e952\";margin-left:-1em;color:#323232}.icon-corrosive .path8:before{content:\"\\e953\";margin-left:-1em;color:#323232}.icon-corrosive .path9:before{content:\"\\e954\";margin-left:-1em;color:#323232}.icon-corrosive .path10:before{content:\"\\e955\";margin-left:-1em;color:#323232}.icon-corrosive .path11:before{content:\"\\e956\";margin-left:-1em;color:#323232}.icon-corrosive .path12:before{content:\"\\e957\";margin-left:-1em;color:#323232}.icon-corrosive .path13:before{content:\"\\e958\";margin-left:-1em;color:#323232}.icon-corrosive .path14:before{content:\"\\e959\";margin-left:-1em;color:#323232}.icon-corrosive .path15:before{content:\"\\e95a\";margin-left:-1em;color:#323232}.icon-corrosive .path16:before{content:\"\\e95b\";margin-left:-1em;color:#323232}.icon-corrosive .path17:before{content:\"\\e95c\";margin-left:-1em;color:#323232}.icon-corrosive .path18:before{content:\"\\e95d\";margin-left:-1em;color:#323232}.icon-corrosive .path19:before{content:\"\\e95e\";margin-left:-1em;color:#323232}.icon-corrosive .path20:before{content:\"\\e95f\";margin-left:-1em;color:#323232}.icon-corrosive .path21:before{content:\"\\e960\";margin-left:-1em;color:#e32730}.icon-dashboard:before{content:\"\\e961\"}.icon-database-sds:before{content:\"\\e962\"}.icon-description-add:before{content:\"\\e963\"}.icon-description-edit:before{content:\"\\e964\"}.icon-description-view:before{content:\"\\e965\";color:#666}.icon-document-read .path1:before{content:\"\\e966\";color:#000;opacity:.6}.icon-document-read .path2:before{content:\"\\e967\";margin-left:-1em;color:#fff}.icon-document-read .path3:before{content:\"\\e968\";margin-left:-1em;color:#000;opacity:.6}.icon-draft:before{content:\"\\e969\"}.icon-expired-off:before{content:\"\\e96a\"}.icon-expired-on:before{content:\"\\e96b\"}.icon-explosive .path1:before{content:\"\\e96c\";color:#e32730}.icon-explosive .path2:before{content:\"\\e96d\";margin-left:-1em;color:#323232}.icon-explosive .path3:before{content:\"\\e96e\";margin-left:-1em;color:#323232}.icon-explosive .path4:before{content:\"\\e96f\";margin-left:-1em;color:#323232}.icon-explosive .path5:before{content:\"\\e970\";margin-left:-1em;color:#323232}.icon-explosive .path6:before{content:\"\\e971\";margin-left:-1em;color:#323232}.icon-explosive .path7:before{content:\"\\e972\";margin-left:-1em;color:#323232}.icon-explosive .path8:before{content:\"\\e973\";margin-left:-1em;color:#323232}.icon-explosive .path9:before{content:\"\\e974\";margin-left:-1em;color:#323232}.icon-explosive .path10:before{content:\"\\e975\";margin-left:-1em;color:#323232}.icon-explosive .path11:before{content:\"\\e976\";margin-left:-1em;color:#323232}.icon-explosive .path12:before{content:\"\\e977\";margin-left:-1em;color:#323232}.icon-explosive .path13:before{content:\"\\e978\";margin-left:-1em;color:#323232}.icon-explosive .path14:before{content:\"\\e979\";margin-left:-1em;color:#323232}.icon-explosive .path15:before{content:\"\\e97a\";margin-left:-1em;color:#323232}.icon-explosive .path16:before{content:\"\\e97b\";margin-left:-1em;color:#323232}.icon-explosive .path17:before{content:\"\\e97c\";margin-left:-1em;color:#323232}.icon-explosive .path18:before{content:\"\\e97d\";margin-left:-1em;color:#323232}.icon-explosive .path19:before{content:\"\\e97e\";margin-left:-1em;color:#323232}.icon-explosive .path20:before{content:\"\\e97f\";margin-left:-1em;color:#323232}.icon-explosive .path21:before{content:\"\\e980\";margin-left:-1em;color:#323232}.icon-explosive .path22:before{content:\"\\e981\";margin-left:-1em;color:#323232}.icon-explosive .path23:before{content:\"\\e982\";margin-left:-1em;color:#323232}.icon-explosive .path24:before{content:\"\\e983\";margin-left:-1em;color:#323232}.icon-explosive .path25:before{content:\"\\e984\";margin-left:-1em;color:#323232}.icon-explosive .path26:before{content:\"\\e985\";margin-left:-1em;color:#323232}.icon-explosive .path27:before{content:\"\\e986\";margin-left:-1em;color:#323232}.icon-explosive .path28:before{content:\"\\e987\";margin-left:-1em;color:#323232}.icon-explosive .path29:before{content:\"\\e988\";margin-left:-1em;color:#323232}.icon-explosive .path30:before{content:\"\\e989\";margin-left:-1em;color:#323232}.icon-explosive .path31:before{content:\"\\e98a\";margin-left:-1em;color:#323232}.icon-explosive .path32:before{content:\"\\e98b\";margin-left:-1em;color:#323232}.icon-explosive .path33:before{content:\"\\e98c\";margin-left:-1em;color:#323232}.icon-explosive .path34:before{content:\"\\e98d\";margin-left:-1em;color:#323232}.icon-explosive .path35:before{content:\"\\e98e\";margin-left:-1em;color:#323232}.icon-explosive .path36:before{content:\"\\e98f\";margin-left:-1em;color:#323232}.icon-explosive .path37:before{content:\"\\e990\";margin-left:-1em;color:#323232}.icon-explosive .path38:before{content:\"\\e991\";margin-left:-1em;color:#323232}.icon-explosive .path39:before{content:\"\\e992\";margin-left:-1em;color:#323232}.icon-explosive .path40:before{content:\"\\e993\";margin-left:-1em;color:#323232}.icon-explosive .path41:before{content:\"\\e994\";margin-left:-1em;color:#323232}.icon-explosive .path42:before{content:\"\\e995\";margin-left:-1em;color:#323232}.icon-explosive .path43:before{content:\"\\e996\";margin-left:-1em;color:#323232}.icon-explosive .path44:before{content:\"\\e997\";margin-left:-1em;color:#323232}.icon-explosive .path45:before{content:\"\\e998\";margin-left:-1em;color:#323232}.icon-explosive .path46:before{content:\"\\e999\";margin-left:-1em;color:#323232}.icon-file-excel:before{content:\"\\e99a\"}.icon-file-pdf:before{content:\"\\e99b\"}.icon-file-pdf-verified .path1:before{content:\"\\e99c\";color:#000;opacity:.6}.icon-file-pdf-verified .path2:before{content:\"\\e99d\";margin-left:-1em;color:#fff}.icon-file-pdf-verified .path3:before{content:\"\\e99e\";margin-left:-1em;color:#000;opacity:.6}.icon-file-word:before{content:\"\\e99f\"}.icon-filter-alt:before{content:\"\\e9a0\"}.icon-flammable .path1:before{content:\"\\e9a1\";color:#323232}.icon-flammable .path2:before{content:\"\\e9a2\";margin-left:-1em;color:#323232}.icon-flammable .path3:before{content:\"\\e9a3\";margin-left:-1em;color:#e32730}.icon-gas-under-pressure .path1:before{content:\"\\e9a4\";color:#323232}.icon-gas-under-pressure .path2:before{content:\"\\e9a5\";margin-left:-1em;color:#e32730}.icon-health-hazard .path1:before{content:\"\\e9a6\";color:#323232}.icon-health-hazard .path2:before{content:\"\\e9a7\";margin-left:-1em;color:#e32730}.icon-line-break:before{content:\"\\e9a8\"}.icon-location:before{content:\"\\e9a9\"}.icon-measure-add:before{content:\"\\e9aa\"}.icon-measure-edit:before{content:\"\\e9ab\"}.icon-measure-view:before{content:\"\\e9ac\";color:#666}.icon-messages:before{content:\"\\e9ad\"}.icon-monitoring:before{content:\"\\e9ae\";color:#666}.icon-move:before{content:\"\\e9af\"}.icon-oxidizing .path1:before{content:\"\\e9b0\";color:#e32730}.icon-oxidizing .path2:before{content:\"\\e9b1\";margin-left:-1em;color:#323232}.icon-oxidizing .path3:before{content:\"\\e9b2\";margin-left:-1em;color:#323232}.icon-oxidizing .path4:before{content:\"\\e9b3\";margin-left:-1em;color:#323232}.icon-process-area-closed:before{content:\"\\e9b4\"}.icon-process-area-open:before{content:\"\\e9b5\"}.icon-process-linked .path1:before{content:\"\\e9b6\";color:#000;opacity:.6}.icon-process-linked .path2:before{content:\"\\e9b7\";margin-left:-1em;color:#666}.icon-risk:before{content:\"\\e9b8\"}.icon-search-in-file:before{content:\"\\e9b9\"}.icon-sort-ascending:before{content:\"\\e9ba\"}.icon-sort-descending:before{content:\"\\e9bb\"}.icon-subscript:before{content:\"\\e9bc\"}.icon-superscript:before{content:\"\\e9bd\"}.icon-syncronice-favorites:before{content:\"\\e9be\"}.icon-system-settings:before{content:\"\\e9bf\"}.icon-view-three-outlined:before{content:\"\\e9c0\"}.icon-workplace-safety:before{content:\"\\e9c1\"}.icon-checklist:before{content:\"\\e900\"}.icon-department-document .path1:before{content:\"\\e901\";color:#000;opacity:.6}.icon-department-document .path2:before{content:\"\\e902\";margin-left:-1em;color:#00804c}.icon-department-folder-closed .path1:before{content:\"\\e903\";color:#000;opacity:.6}.icon-department-folder-closed .path2:before{content:\"\\e904\";margin-left:-1em;color:#00804c}.icon-department-folder-open .path1:before{content:\"\\e905\";color:#000;opacity:.6}.icon-department-folder-open .path2:before{content:\"\\e906\";margin-left:-1em;color:#00804c}.icon-deviation:before{content:\"\\e907\"}.icon-dropdown-folder .path1:before{content:\"\\e908\";color:#00324e}.icon-dropdown-folder .path2:before{content:\"\\e909\";margin-left:-1em;color:#fff;opacity:.6}.icon-enterprise-document .path1:before{content:\"\\e90a\";color:#000;opacity:.6}.icon-enterprise-document .path2:before{content:\"\\e90b\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-closed .path1:before{content:\"\\e90c\";color:#000;opacity:.6}.icon-enterprise-folder-closed .path2:before{content:\"\\e90d\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-open .path1:before{content:\"\\e90e\";color:#000;opacity:.6}.icon-enterprise-folder-open .path2:before{content:\"\\e90f\";margin-left:-1em;color:#cf4714}.icon-folder-closed:before{content:\"\\e910\"}.icon-folder-open:before{content:\"\\e911\"}.icon-keyboard_arrow_down:before{content:\"\\e912\"}.icon-keyboard_arrow_up:before{content:\"\\e913\"}.icon-local-document .path1:before{content:\"\\e914\";color:#000;opacity:.6}.icon-local-document .path2:before{content:\"\\e915\";margin-left:-1em;color:#1954a9}.icon-local-folder-closed .path1:before{content:\"\\e916\";color:#000;opacity:.6}.icon-local-folder-closed .path2:before{content:\"\\e917\";margin-left:-1em;color:#1954a9}.icon-local-folder-open .path1:before{content:\"\\e918\";color:#000;opacity:.6}.icon-local-folder-open .path2:before{content:\"\\e919\";margin-left:-1em;color:#1954a9}.icon-process:before{content:\"\\e91a\"}.icon-regional-document .path1:before{content:\"\\e91c\";color:#000;opacity:.6}.icon-regional-document .path2:before{content:\"\\e91d\";margin-left:-1em;color:#662e0d}.icon-regional-folder-closed .path1:before{content:\"\\e91e\";color:#000;opacity:.6}.icon-regional-folder-closed .path2:before{content:\"\\e91f\";margin-left:-1em;color:#662e0d}.icon-regional-folder-open .path1:before{content:\"\\e920\";color:#000;opacity:.6}.icon-regional-folder-open .path2:before{content:\"\\e921\";margin-left:-1em;color:#662e0d}.qms-select-department-tree-container{font-family:Open Sans,sans-serif}.qms-select-department-tree-container .mr10{margin-right:10px}.qms-select-department-tree-container .mt5{margin-bottom:5px}.qms-select-department-tree-container .mb5{margin-top:5px}.qms-select-department-tree-container .w100{width:100%}.qms-select-department-tree-container .h100{height:100%}.qms-select-department-tree-container .fw500{font-weight:500!important}.qms-select-department-tree-container .text-right{text-align:right}.qms-select-department-tree-container .mt20{margin-top:20px}.qms-select-department-tree-container .d-flex{display:flex}.qms-select-department-tree-container .align-items-center{align-items:center}.qms-select-department-tree-container .justify-content-end{justify-content:flex-end}.qms-select-department-tree-container .text-selected{color:#0009;font-size:12px;line-height:16px;margin-top:1rem}.qms-select-department-tree-container .input-field{display:flex;align-items:center;position:relative}.qms-select-department-tree-container .input-field ::ng-deep .mat-form-field-wrapper{padding-bottom:8px!important}.qms-select-department-tree-container .input-field ::ng-deep .mat-form-field-underline{bottom:8px!important}.qms-select-department-tree-container .input-field input.input-search{width:100%;padding:10px;outline:none;border:none;background:var(--background-input-text)}.qms-select-department-tree-container .input-field .btn-search{cursor:pointer;vertical-align:middle;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.qms-select-department-tree-container .input-field .line__divider{border-bottom:1px solid #ccc;height:1px;margin-top:10px;min-width:300px;max-width:100%}.qms-select-department-tree-container .header-title{font-weight:500;color:var(--ws-text-primary);font-size:16px;display:flex;align-items:center}.qms-select-department-tree-container .header-title .header-view{padding:4px 0}.qms-select-department-tree-container .sticky-position{position:sticky;top:0;left:0;z-index:1;background:#fff}.qms-select-department-tree-container .header-view-tree{display:grid;grid-template-columns:1fr 200px;column-gap:2px;padding:4px 12px 4px 0}.qms-select-department-tree-container .header-view-tree .header-view:nth-child(1){padding-left:12px}.qms-select-department-tree-container .tree-department-wrapper{padding-right:4px;overflow:hidden;position:relative;transition:height .3s ease-in-out}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view{width:100%;display:grid;grid-template-columns:1fr 200px;column-gap:2px}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main>.separate{height:38px}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main>.separate.h-0{height:0}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main:last-child{height:100%;padding-left:4px;position:relative}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main:last-child:after{position:absolute;content:\"\";top:0;bottom:-38px;left:0;width:1px;background:#0000001f}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main .external-list-item-container .node-external{overflow:hidden;transition:all .1s ease-in-out}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main .external-list-item-container .node-external .node-external-content{padding:5px 15px;height:calc(100% - 2px);color:var(--default-color);font-size:14px;display:flex;align-items:center}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main .external-list-item-container .node-external .node-external-content span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qms-select-department-tree-container .mask-overlay{z-index:1000;background-color:#2221211a;position:absolute;top:0;left:0;width:100%;height:100%;border-radius:4px;overflow:hidden;display:grid;place-items:center}.qms-select-department-tree-container .select-department-tree>.cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper{padding:0 4px!important}.qms-select-department-tree-container .select-department-tree .qms-tree-node{display:flex;align-items:center;border-radius:4px}.qms-select-department-tree-container .select-department-tree .qms-tree-node:hover{background-color:#00000014}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.node-expand-area{width:48px;height:48px;position:relative}.qms-select-department-tree-container .select-department-tree .qms-tree-node.active-external-view .mat-mdc-checkbox.qms-group-options{width:calc(100% - 250px)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.node-loading{background:var(--primary-light-6-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node{flex-basis:200px;overflow:hidden}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node .node-external{overflow:hidden;transition:all .1s ease-in-out;display:block}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node .node-external .node-external-content{padding:5px 15px;height:calc(100% - 2px);color:var(--default-color);font-size:14px;display:flex;align-items:center}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node .node-external .node-external-content span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node{color:var(--primary)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node:hover{background:var(--primary-light-6-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node:active{background:var(--primary-light-12-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node .mat-icon{color:var(--primary)}.qms-select-department-tree-container .select-department-tree .qms-tree-node .node-without-checkbox{cursor:pointer;width:100%;display:flex;justify-content:space-between;align-items:center}.qms-select-department-tree-container .select-department-tree .qms-tree-node .node-without-checkbox .mat-icon{color:var(--primary);margin-right:4px}.qms-select-department-tree-container .select-department-tree .qms-tree-node.selected-theme{background:var(--primary-light-12-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all{cursor:default!important;pointer-events:none;-webkit-user-select:none;user-select:none}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all button.mat-button-disabled,.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all .mat-icon-rtl-mirror,.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all .type-icon{color:#00000061}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all .text-name.disabled{color:#00000061;cursor:default!important;pointer-events:none;-webkit-user-select:none;user-select:none}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all.active{background-color:transparent}.qms-select-department-tree-container .select-department-tree .qms-tree-node.move-location-mode:hover .move-location-btn,.qms-select-department-tree-container .select-department-tree .qms-tree-node.move-location-mode:active .move-location-btn{display:block}.qms-select-department-tree-container .text-name{position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;cursor:pointer;width:100%}.qms-select-department-tree-container .cursor-pointer{cursor:pointer}.qms-select-department-tree-container .ml5{margin-left:15px!important}.qms-select-department-tree-container .pl-10{padding-left:10px}.qms-select-department-tree-container ::ng-deep .mat-mdc-checkbox.qms-group-options.flex-direction-row .mat-checkbox-layout{white-space:normal}.qms-select-department-tree-container ::ng-deep .mat-mdc-checkbox.qms-group-options.flex-direction-row .node-text>span{display:block}.qms-select-department-tree-container ::ng-deep .mat-mdc-checkbox.qms-group-options.flex-direction-row .mat-checkbox-label{flex-direction:row;align-items:center;position:relative;padding-bottom:2px}.qms-select-department-tree-container .qms-view-search-result{width:100%;overflow:hidden}.qms-select-department-tree-container .qms-view-search-result__header{position:relative}.qms-select-department-tree-container .qms-view-search-result__header:after{position:absolute;content:\"\";bottom:0;left:0;width:100%;height:1px;background-color:#0000001a}.qms-select-department-tree-container .qms-view-search-result__header .header-title{padding:8px 0;display:inline-block}.qms-select-department-tree-container .qms-view-search-result__header .header-title:nth-child(1){padding-left:12px}.qms-select-department-tree-container .qms-view-search-result__header .header-title:nth-child(2){flex-basis:200px}.qms-select-department-tree-container .qms-view-search-result>.no-result{height:100%;display:flex;justify-content:center;align-items:center}.qms-select-department-tree-container .qms-view-search-result__wrapper{height:calc(100% - 50px);width:100%}.qms-select-department-tree-container .qms-view-search-result__wrapper.active-external{height:calc(100% - 90px)!important}.qms-select-department-tree-container .qms-view-search-result__wrapper .result{max-height:100%;overflow-y:auto;margin-bottom:4px;padding-right:4px}.qms-select-department-tree-container .qms-view-search-result__wrapper .result.active-paging{max-height:calc(100% - 40px)}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item{border-radius:4px;display:grid;grid-template-columns:45px 1fr;align-items:center;cursor:pointer;transition:background .3s ease;min-height:40px}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item:not(:nth-child(1)){margin-top:4px!important}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item:hover{background:linear-gradient(0deg,#0163b21f,#0163b21f),#fff}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item:hover .move-location-btn{display:block}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item.active{background:linear-gradient(0deg,#0163b21f,#0163b21f),#fff}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item.no-checkbox{grid-template-columns:1fr}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content{display:flex;align-items:center}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content .item-result-content-wraper{padding:5px 15px;width:100%}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content .external-name{flex-basis:200px}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content .external-name span{width:200px;display:inline-block}.qms-select-department-tree-container .qms-view-search-result ::ng-deep .mat-mdc-checkbox.qms-group-options{display:flex;height:100%}.qms-select-department-tree-container ::ng-deep .breadcrumb-container{flex-wrap:wrap}.qms-select-department-tree-container ::ng-deep .mat-button-focus-overlay{background-color:transparent}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item{margin:0}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;transition:color .3s ease}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item-text:not(:last-child){max-width:150px!important}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-total-result{margin-bottom:0;margin-right:12px;height:100%;display:flex;align-items:center}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-total-result span{font-weight:600;color:#000c}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-paginator-range-actions{margin-bottom:0;column-gap:2px}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-paginator-range-actions>.qms-total-result{margin-bottom:0}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-form-field-wrapper{padding-bottom:0}.qms-select-department-tree-container ::ng-deep .qms-paginator .qms-paginator-page-size{align-items:center}.qms-select-department-tree-container .text-gray{color:#242424}.qms-select-department-tree-container .mb0{margin-bottom:0!important}.qms-select-department-tree-container .fs-base{font-size:14px!important}.qms-select-department-tree-container .user-select-none{-webkit-user-select:none;user-select:none}.qms-select-department-tree-container .item-breadcrumb-disable{cursor:not-allowed;color:#0009;font-weight:400;font-size:14px}.qms-select-department-tree-container ::ng-deep .mat-mdc-checkbox.checkbox-all .mat-checkbox-label{flex-direction:row;align-items:center;column-gap:4px}.qms-select-department-tree-container ::ng-deep .btn-arrow{width:40px;height:40px;line-height:40px}.qms-select-department-tree-container .qms-loading-container{overflow:hidden;display:grid;grid-template-rows:repeat(60px)}.qms-select-department-tree-container .qms-loading-container .qms-loader{position:relative;width:100%;height:100%;padding:10px 0;overflow:hidden}.qms-select-department-tree-container .qms-loading-container .qms-loader:after{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;background:linear-gradient(110deg,#e9e9e900,#e3e3e300 40%,#e3e3e380 50%,#e3e3e300 60% 100%);animation:animate-loading 1.2s linear infinite}.qms-select-department-tree-container .qms-loading-container .qms-loader__wrapper{position:relative;width:100%;height:100%}.qms-select-department-tree-container .qms-loading-container .qms-loader__wrapper .row-loader{background-color:#eee;position:absolute;left:0;width:100%;height:40px}@keyframes animate-loading{0%{transform:translate(-100%)}to{transform:translate(100%)}}.qms-select-department-tree-container .qms-spinner{font-size:20px;position:relative;display:inline-block;width:1em;height:1em}.qms-select-department-tree-container .qms-spinner.center{position:absolute;inset:0;margin:auto}.qms-select-department-tree-container ::ng-deep .mat-mdc-progress-spinner circle,.qms-select-department-tree-container .mat-mdc-progress-spinner circle{stroke:#1b75be!important}@media screen and (max-width: 600px){.qms-select-department-tree-container .external-view-node{flex-basis:65px!important}.qms-select-department-tree-container .qms-tree-node.active-external-view .mat-mdc-checkbox.qms-group-options{width:calc(100% - 110px)!important}.qms-select-department-tree-container .header-view-tree{grid-template-columns:1fr 80px!important}.qms-select-department-tree-container ::ng-deep .cdk-virtual-scroll-content-wrapper{right:0!important}.qms-select-department-tree-container .header-title{font-size:14px!important}.qms-select-department-tree-container .text-name,.qms-select-department-tree-container .node-external,.qms-select-department-tree-container .text-label,.qms-select-department-tree-container .text-label+span{font-size:12px}.qms-select-department-tree-container .node-expand-area{width:30px!important;height:30px!important}.qms-select-department-tree-container .node-expand-area .qms-btn-icon{width:30px;height:30px;line-height:30px}.qms-select-department-tree-container .fs-base{font-size:12px!important}.qms-select-department-tree-container .qms-select-department-tree-container .breadcrumb-container{flex-wrap:nowrap!important}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item-text{font-size:12px!important;max-width:175px!important}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-total-result{display:none!important}.qms-select-department-tree-container ::ng-deep .qms-paginator .size-small .mat-mdc-paginator-container{justify-content:center!important}.qms-select-department-tree-container .qms-view-search-result__header>.header-title:nth-child(2){flex-basis:120px!important}.qms-select-department-tree-container .result-item__content .external-name{flex-basis:75px!important}.qms-select-department-tree-container .result-item__content .external-name span{width:75px!important}}.qms-select-department-tree-container ::ng-deep .qms-paginator{margin-top:0}.move-location-btn{display:none;color:var(--primary)}::ng-deep .move-location-menu .mat-mdc-menu-item:hover{color:var(--primary)}\n"], dependencies: [{ kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i7.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i7$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: QMSSearchFieldDirective, selector: "mat-form-field[qms-search-field]", inputs: ["isLoading"] }, { kind: "directive", type: QMSFormFieldDirective, selector: "[qms-form]" }, { kind: "directive", type: QMSGroupOptionDirective, selector: "[qms-group-options]", inputs: ["label"] }, { kind: "directive", type: AutocompleteOffDirective, selector: "[qms-group-options]" }, { kind: "directive", type: QMSToolTipRendererDirective, selector: "[qms-tool-tip]", inputs: ["showToolTip", "mode", "qms-tool-tip", "contentTemplate", "position"] }, { kind: "directive", type: QMSMultiIconDirective, selector: "[qmsTransformIcon]", inputs: ["qmsTransformIcon"] }, { kind: "directive", type: EllipsifyDirective, selector: "[qms-elipsify]" }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i11.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i11.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i17.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: QMSButtonIcon, selector: "button[qms-btn-icon]", inputs: ["disabled", "color", "active"], exportAs: ["qmsButtonIcon"] }, { kind: "component", type: i16.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: QMSBreadcrumb, selector: "qms-breadcrumb", inputs: ["nodes", "type", "maxLine", "numDisplayItem", "onlyItem", "disabledLastItem"], outputs: ["onItemClick"] }, { kind: "directive", type: i14.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: QMSPaginatorComponent, selector: "qms-paginator", inputs: ["numHidden", "size", "pageSizeOptions", "pageSize", "length", "pageIndex", "overlayPanelClass"], outputs: ["page"] }, { kind: "component", type: i23.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i24.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i24.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i24.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: i10.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i10.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i10.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }], animations: [
|
|
37171
37168
|
AnimationTreeDepartment
|
|
37172
37169
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
37173
37170
|
}
|
|
@@ -37175,7 +37172,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
37175
37172
|
type: Component,
|
|
37176
37173
|
args: [{ selector: 'qms-select-department-tree', animations: [
|
|
37177
37174
|
AnimationTreeDepartment
|
|
37178
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['qms-select-department-tree-container', (config.customClass || '')]\">\r\n <div class=\"input-select-department\">\r\n <form (ngSubmit)=\"!getLoading$.value && onSearch()\" *ngIf=\"config.enableTreeSearch\" class=\"input-field\">\r\n <mat-form-field class=\"w100\" qms-form qms-search-field>\r\n <input [formControl]=\"formSearchControl\" type=\"text\" placeholder=\"{{ LANG.SEARCH }}\" matInput />\r\n <button *ngIf=\"!getLoading$.value\" type=\"submit\" qms-btn-icon color=\"light\" matSuffix>\r\n <mat-icon>search</mat-icon>\r\n </button>\r\n <mat-progress-spinner [@inOutAnimation] matSuffix mode=\"indeterminate\" diameter=\"20\"\r\n *ngIf=\"getLoading$.value\"></mat-progress-spinner>\r\n <div *ngIf=\"!!formSearchControl.value && !getLoading$.value\" qms-input-clear matSuffix>\r\n <button qms-btn-icon color=\"light\" [@inOutAnimation] aria-label=\"Clear\" (click)=\"formSearchControl.reset()\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n </mat-form-field>\r\n </form>\r\n <div [@inOutAnimation] *ngIf=\"(getIndexView$ | async) === 1 && (textSearchSubject$ | async)\"\r\n class=\"sub-text ms-1 fw500\">\r\n {{LANG.RESULT_SEARCH_FOR}}<i><b>\"{{textSearchSubject$ | async}}\"</b></i>\r\n </div>\r\n <div [class.justify-content-between]=\"config.enableIncludeChild && !config.isSelectOne\"\r\n class=\"select__toggle-include toggle-include-child my-1 d-flex justify-content-end align-items-center\">\r\n <mat-slide-toggle *ngIf=\"config.enableIncludeChild && !config.isSelectOne\"\r\n [disabled]=\"(getIndexView$ | async) === 1 && config.disableToggleIncludeChildWhenChangeView\"\r\n [(ngModel)]=\"isIncludeChildren\" (ngModelChange)=\"toggleIncludeChildEvent.emit($event)\" color=\"default\"\r\n qms-group-options>\r\n <span class=\"text-label\">{{config.selectIncludeLabel || LANG.SELECT_INCLUDE_CHILD}}</span>\r\n </mat-slide-toggle>\r\n <button class=\"btn-arrow\" [@inOutAnimation] *ngIf=\"(getIndexView$ | async) === 1 && config.enableTreeSearch\"\r\n (click)=\"setIndexView(0)\" qms-btn-icon color=\"light\" [qms-tool-tip]=\"LANG.BACK_TO_TREE\" mode=\"dark\"\r\n position=\"top\">\r\n <mat-icon>arrow_back</mat-icon>\r\n </button>\r\n <button class=\"btn-arrow\" [@inOutAnimation]\r\n *ngIf=\"(getIndexView$ | async) === 0 && config.enableTreeSearch && (textSearchSubject$ | async)\"\r\n (click)=\"setIndexView(1)\" qms-btn-icon color=\"light\" [qms-tool-tip]=\"LANG.GOTO_SEACH_RESULT\" mode=\"dark\"\r\n position=\"top\">\r\n <mat-icon>arrow_forward</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n <div [@inOutAnimation]\r\n *ngIf=\"(getIndexView$ | async) === 0 && config.modeView === MODE_VIEW_ENUM.ExternalView && !!config.headerName\"\r\n class=\"header-view-tree\">\r\n <div class=\"header-view header-title\">\r\n {{config.headerName.treeName}}\r\n </div>\r\n <div class=\"header-view header-title\">\r\n {{config.headerName.externalName}}\r\n </div>\r\n </div>\r\n <mat-divider class=\"mx-auto\"></mat-divider>\r\n <div [@animateSlideView]=\"(getIndexView$ | async)\" [ngStyle]=\"{\r\n minHeight: height\r\n }\" class=\"tree-department-wrapper\">\r\n <div *ngIf=\"(getIndexView$ | async) === 0\" class=\"tree-view w100 h100\">\r\n <div class=\"tree-view-main h100\">\r\n <div *ngIf=\"!config.isSelectOne && !!treeControl.dataNodes && config.activeSelectAllNode\"\r\n class=\"checkbox-all-tree\" [class.sticky-position]=\"config.modeView === MODE_VIEW_ENUM.ExternalView\">\r\n <!-- Checkbox all root node -->\r\n <mat-checkbox [@inOutAnimation] (click)=\"onCheckAllRootTreeNode()\"\r\n [indeterminate]=\"isIndeterminateCheckboxAllTree\" [checked]=\"isAllDepartmentSelected\" qms-group-options\r\n color=\"default\" label=\"none\" class=\"checkbox-all\">\r\n <span class=\"text-label \">{{LANG.CHOOSE_ALL}} (<b>{{treeControl.dataNodes.length}}</b>)</span>\r\n </mat-checkbox>\r\n <mat-divider class=\"mx-auto\"></mat-divider>\r\n </div>\r\n <cdk-virtual-scroll-viewport *ngIf=\"dataSource.data\" [ngClass]=\"{\r\n 'has-checkbox-all': !config.isSelectOne && config.modeView === MODE_VIEW_ENUM.Basic,\r\n 'select-department-tree': true\r\n }\" [itemSize]=\"ITEM_SIZE\" [ngStyle]=\"{height: height}\">\r\n <ng-container *cdkVirtualFor=\"let node of dataSource; trackBy: trackBy\">\r\n <div class=\"qms-tree-node mt-1\" [style.padding-left]=\"node.level * (config.isMobile ? 12 :24) + 'px'\"\r\n [attr.data-id]=\"node.id\" [id]=\"'mat-node-'+node.id\" [@triggerColor]=\"activeNode == node.id\" [ngClass]=\"{\r\n 'w-100': config.isSelectOne,\r\n 'selected-theme': this.checkListSelection.isSelected(node) && config.isSelectOne,\r\n 'expand-node': treeControl.isExpandable(node) && treeControl.isExpanded(node),\r\n 'active-external-view': config.modeView === MODE_VIEW_ENUM.ExternalView,\r\n 'node-loading': node.isLoading,\r\n 'move-location-mode': config.moveLocationMode\r\n }\">\r\n <div class=\"node-expand-area\">\r\n <button class=\"btn-toggle\" qms-btn-icon color=\"light\"\r\n [disabled]=\"(config.moveLocationMode && checkListSelection.isSelected(node))\"\r\n (click)=\"onExpandNode(node)\" *ngIf=\"treeControl.isExpandable(node) && !node.isLoading\">\r\n <mat-icon>\r\n {{ treeControl.isExpanded(node) ? node?.expandIcon?.collapse : node?.expandIcon?.expand }}\r\n </mat-icon>\r\n </button>\r\n <ng-container *ngIf=\"node.isLoading; then loadingSpinner\"></ng-container>\r\n </div>\r\n <ng-container [ngTemplateOutlet]=\"config.isSelectOne ? nodeWithoutCheckboxTemplate : showCheckboxTemplate\"\r\n [ngTemplateOutletContext]=\"{ node: node }\"></ng-container>\r\n <div *ngIf=\"config.modeView === MODE_VIEW_ENUM.ExternalView\" class=\"external-view-node\">\r\n <span class=\"node-external\" qms-elipsify position=\"top\" mode=\"dark\">\r\n {{node.externalName || ''}}\r\n </span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </cdk-virtual-scroll-viewport>\r\n <ng-container [@inOutAnimation] *ngIf=\"config.spinnerWhenGetMore && getLoadingMore$| async ;then maskOverlay\">\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div *ngIf=\"(getIndexView$ | async) === 1\" [ngStyle]=\"{\r\n height: height\r\n }\" class=\"qms-view-search-result\">\r\n <div *ngIf=\"config.modeView === MODE_VIEW_ENUM.ExternalView\"\r\n class=\"qms-view-search-result__header d-flex align-items-center justify-content-between\">\r\n <div class=\"header-title\">\r\n <span qms-elipsify mode=\"dark\" position=\"top\">\r\n {{config.headerName.resultSearchName}}\r\n </span>\r\n </div>\r\n <div class=\"header-title\">\r\n <span qms-elipsify mode=\"dark\" position=\"top\">\r\n {{config.headerName.externalName}}\r\n </span>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"getLoading$.value; then loading\"></ng-container>\r\n <div class=\"qms-view-search-result__wrapper\" [ngClass]=\"{\r\n 'active-external': config.modeView === MODE_VIEW_ENUM.ExternalView}\"\r\n *ngIf=\"!!resultSearch.length && !getLoading$.value\">\r\n <div *ngIf=\"!config.moveLocationMode\">\r\n <mat-checkbox [@inOutAnimation]\r\n [disabled]=\"!resultSearch.length || config.isSelectOne || isDisableChecboxAllSearch()\" #checkAllSearch\r\n [indeterminate]=\"indeterminateSearchResult\" [checked]=\"isSelectAllResultSearch\" qms-group-options\r\n color=\"default\" label=\"none\" class=\"checkbox-all\"\r\n (click)=\"!config.isSelectOne && onSelectAllSearchResult(checkAllSearch.checked)\">\r\n <span class=\"text-label header-title\">{{LANG.CHOOSE_ALL}}</span>\r\n <span>(<b>{{resultSearch.length}}</b>)</span>\r\n </mat-checkbox>\r\n </div>\r\n <div [@inOutAnimation] [@listAnimation]\r\n [class.active-paging]=\"searchDepartment$.value.length > 10 && config.enablePagingSearch\" class=\"result\">\r\n <div [qms-tool-tip]=\"!canHandleItemSearchResult(item) ? LANG.ITEM_NOT_MATCH_TO_TREE : ''\" mode=\"dark\"\r\n position=\"top\" *ngFor=\"let item of resultSearch\"\r\n (click)=\"$event.stopImmediatePropagation(); !item.disabled && onCheckItemSearchResult(item)\"\r\n [ngClass]=\"{'active': checkListSelectionSearch.isSelected(item), 'no-checkbox': config.moveLocationMode}\"\r\n class=\"result-item user-select-none\" matRipple>\r\n <mat-checkbox [@inOutAnimation] *ngIf=\"!item.isLoading && !config.moveLocationMode\"\r\n [disabled]=\"item.disabled\"\r\n (click)=\"$event.stopImmediatePropagation(); !item.disabled && onCheckItemSearchResult(item)\"\r\n [checked]=\"checkListSelectionSearch.isSelected(item)\" qms-group-options color=\"default\" label=\"none\">\r\n </mat-checkbox>\r\n <div *ngIf=\"item.isLoading\" [@inOutAnimation] class=\"position-relative\">\r\n <ng-container *ngIf=\"item.isLoading; then loadingSpinner\"></ng-container>\r\n </div>\r\n <div class=\"result-item__content\">\r\n <div class=\"item-result-content-wraper\">\r\n <div class=\"text-gray fw-bold fs-base mb0\">{{item.name}}</div>\r\n <qms-breadcrumb *ngIf=\"item.location?.length > 1\" [type]=\"config.isMobile ? 'mobile': ''\"\r\n [numDisplayItem]=\"6\" (onItemClick)=\"$event.stopImmediatePropagation()\" class=\"breadcrumb-container\"\r\n [nodes]=\"item.location\">\r\n </qms-breadcrumb>\r\n <div *ngIf=\"item.location?.length === 1\" class=\"d-flex align-items-center\">\r\n <span qms-elipsify mode=\"dark\" position=\"top\"\r\n class=\"item-breadcrumb-disable d-block\">{{item.location[0].name}}</span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"config.moveLocationMode\">\r\n <button class=\"move-location-btn\" qms-btn-icon [matMenuTriggerFor]=\"menu\">\r\n <mat-icon>swap_vert</mat-icon>\r\n </button>\r\n <mat-menu class=\"move-location-menu\" #menu=\"matMenu\">\r\n <button (click)=\"setDestinationLocation(item, 'sibling')\" mat-menu-item>\r\n <span>{{LANG.PLACE_NEXT_TO}}</span>\r\n </button>\r\n <button (click)=\"setDestinationLocation(item, 'child')\" mat-menu-item>\r\n <span>{{LANG.PLACE_UNDER}}</span>\r\n </button>\r\n </mat-menu>\r\n </div>\r\n <div *ngIf=\"config.modeView === MODE_VIEW_ENUM.ExternalView\" class=\"external-name\">\r\n <span qms-elipsify mode=\"dark\" position=\"top\" class=\"text-gray fs-base mb0\">{{item.externalName}}\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div [@inOutAnimation] *ngIf=\"!resultSearch.length && !getLoading$.value\" class=\"result no-result\">\r\n <ng-container *ngTemplateOutlet=\"noResult\"></ng-container>\r\n </div>\r\n <mat-divider *ngIf=\"searchDepartment$.value.length > 10 && config.enablePagingSearch\"\r\n class=\"mx-auto\"></mat-divider>\r\n <qms-paginator #paginatorSearch *ngIf=\"searchDepartment$.value.length > 10 && config.enablePagingSearch \"\r\n [length]=\"searchDepartment$.value.length\" [numHidden]=\"0\" [pageSize]=\"CURRENT_PAGESIZE\"\r\n [pageSizeOptions]=\"PAGE_SIZE_OPTION\" (page)='onPagingSearchResult($event)'\r\n [size]='config.isMobile ? PAGINATION_SIZE.small : PAGINATION_SIZE.medium'>\r\n </qms-paginator>\r\n </div>\r\n </div>\r\n\r\n <!-- Template for Checkbox -->\r\n <ng-template #showCheckboxTemplate let-node=\"node\">\r\n <mat-checkbox [id]=\"'node-'+node.id\" qms-group-options color=\"default\" label=\"none\" class=\"flex-direction-row\"\r\n [disabled]=\"node.isLoading || node.disabled\" [checked]=\"checkListSelection.isSelected(node)\"\r\n (click)=\"!node.isLoading && onCheckNode(node)\" [attr.disabled]=\"node.disabled || node.isLoading\">\r\n <img [title]=\"node.itemIconSvg\" *ngIf=\"node.itemIconSvg\" class=\"material-icons type-icon\"\r\n [src]=\"node.itemIconSvg\" />\r\n <span *ngIf=\"node.itemIcon\" [class]=\"node.itemIcon\" [qmsTransformIcon]=\"node.itemIcon\"\r\n class=\"material-icons-outlined type-icon\"></span>\r\n <span *ngIf=\"node.itemMatIcon\" class=\"material-icons-outlined type-icon\">{{\r\n node.itemMatIcon }}\r\n </span>\r\n <div class=\"node-text\" [ngStyle]=\"{\r\n maxWidth: (maxWidthNode - 20*node.level)+ 'px'\r\n }\">\r\n <span qms-elipsify [mode]=\"'dark'\" position=\"top\" class=\"text-name cursor-pointer ml5 123\"\r\n [ngClass]=\"{ disabled: node.disabled}\">{{ node.name}}\r\n </span>\r\n </div>\r\n </mat-checkbox>\r\n </ng-template>\r\n\r\n <!-- Template node without checkbox -->\r\n <ng-template #nodeWithoutCheckboxTemplate let-node=\"node\">\r\n <div [id]=\"'node-'+node.id\" (click)=\"onCheckNode(node)\" class=\"node-without-checkbox\">\r\n <div class=\"node-info\">\r\n <span *ngIf=\"node.itemIcon\" [class]=\"node.itemIcon\" [qmsTransformIcon]=\"node.itemIcon\"\r\n class=\"material-icons-outlined type-icon\"></span>\r\n <span *ngIf=\"node.itemMatIcon\" class=\"material-icons-outlined type-icon\">{{\r\n node.itemMatIcon }}\r\n </span>\r\n <span class=\"text-name cursor-pointer pl-10 123\" [ngClass]=\"{ disabled: node.disabled }\">{{ node.name }}</span>\r\n </div>\r\n <div class=\"node-state\">\r\n <mat-icon [class.disabled]=\"(config.moveLocationMode && checkListSelection.isSelected(node))\"\r\n *ngIf=\"checkListSelection.isSelected(node)\">check</mat-icon>\r\n <button class=\"move-location-btn\" *ngIf=\"config.moveLocationMode && !checkListSelection.isSelected(node)\"\r\n qms-btn-icon [matMenuTriggerFor]=\"menu\">\r\n <mat-icon>swap_vert</mat-icon>\r\n </button>\r\n <mat-menu class=\"move-location-menu\" #menu=\"matMenu\">\r\n <button (click)=\"moveToLocation(node, 'sibling')\" mat-menu-item>\r\n <span>{{LANG.PLACE_NEXT_TO}}</span>\r\n </button>\r\n <button (click)=\"moveToLocation(node, 'child')\" mat-menu-item>\r\n <span>{{LANG.PLACE_UNDER}}</span>\r\n </button>\r\n </mat-menu>\r\n </div>\r\n </div>\r\n </ng-template>\r\n</div>\r\n\r\n<ng-template #noResult>\r\n <svg width=\"89\" height=\"130\" viewBox=\"0 0 89 88\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"white\" />\r\n <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"#0163B2\" fill-opacity=\"0.12\" />\r\n <path\r\n d=\"M44.5 56.6936L58.096 64.8996L54.488 49.4336L66.5 39.0276L50.682 37.6856L44.5 23.0996L38.318 37.6856L22.5 39.0276L34.512 49.4336L30.904 64.8996L44.5 56.6936Z\"\r\n fill=\"#0163B3\" />\r\n <text x=\"10\" y=\"105\" fill=\"#0163B2\">{{LANG.NO_RESULT}}</text>\r\n </svg>\r\n</ng-template>\r\n\r\n<!-- Template loading -->\r\n<ng-template #loading>\r\n <div [ngStyle]=\"{\r\n 'height': searchDepartment$.value.length ? (config.modeView === MODE_VIEW_ENUM.ExternalView ? 'calc(100% - 90px)' : 'calc(100% - 50px)' ) : height\r\n }\" class=\"qms-loading-container\">\r\n <div class=\"qms-loader\" *ngFor=\"let item of arrSkeleton\">\r\n <div class=\"qms-loader__wrapper\">\r\n <div class=\"row-loader\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<!-- Template mask overlay -->\r\n<ng-template #maskOverlay>\r\n <div class=\"mask-overlay\">\r\n <mat-spinner [diameter]=\"50\" [strokeWidth]=\"5\" color=\"primary\"></mat-spinner>\r\n </div>\r\n</ng-template>\r\n\r\n<!-- Loading spinner -->\r\n<ng-template #loadingSpinner>\r\n <div class=\"qms-spinner center\">\r\n <mat-spinner [diameter]=\"20\" [strokeWidth]=\"2\"></mat-spinner>\r\n </div>\r\n</ng-template>", styles: ["@font-face{font-family:icomoon;src:url(/assets/fonts/icomoon.eot?aghldx);src:url(/assets/fonts/icomoon.eot?aghldx#iefix) format(\"embedded-opentype\"),url(/assets/fonts/icomoon.ttf?aghldx) format(\"truetype\"),url(/assets/fonts/icomoon.woff?aghldx) format(\"woff\"),url(/assets/fonts/icomoon.svg?aghldx#icomoon) format(\"svg\");font-weight:400;font-style:normal;font-display:block}[class^=icon-],[class*=\" icon-\"]{font-family:icomoon!important;speak:never;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-acutely-toxic .path1:before{content:\"\\e91b\";color:#e32730}.icon-acutely-toxic .path2:before{content:\"\\e922\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path3:before{content:\"\\e923\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path4:before{content:\"\\e924\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path5:before{content:\"\\e925\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path6:before{content:\"\\e926\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path7:before{content:\"\\e927\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path8:before{content:\"\\e928\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path9:before{content:\"\\e929\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path10:before{content:\"\\e92a\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path11:before{content:\"\\e92b\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path12:before{content:\"\\e92c\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path13:before{content:\"\\e92d\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path14:before{content:\"\\e92e\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path15:before{content:\"\\e92f\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path16:before{content:\"\\e930\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path17:before{content:\"\\e931\";margin-left:-1em;color:#323232}.icon-add-column:before{content:\"\\e932\"}.icon-add-tooltip:before{content:\"\\e933\"}.icon-admin:before{content:\"\\e934\"}.icon-annual-cycle:before{content:\"\\e935\"}.icon-assignment-repete:before{content:\"\\e936\"}.icon-barrier-add:before{content:\"\\e937\"}.icon-barrier-edit:before{content:\"\\e938\"}.icon-barrier-view:before{content:\"\\e939\"}.icon-button-group:before{content:\"\\e93a\"}.icon-chemical-manager:before{content:\"\\e93b\"}.icon-chronic-health-hazard .path1:before{content:\"\\e93c\";color:#e32730}.icon-chronic-health-hazard .path2:before{content:\"\\e93d\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path3:before{content:\"\\e93e\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path4:before{content:\"\\e93f\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path5:before{content:\"\\e940\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path6:before{content:\"\\e941\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path7:before{content:\"\\e942\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path8:before{content:\"\\e943\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path9:before{content:\"\\e944\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path10:before{content:\"\\e945\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path11:before{content:\"\\e946\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path12:before{content:\"\\e947\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path13:before{content:\"\\e948\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path14:before{content:\"\\e949\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path15:before{content:\"\\e94a\";margin-left:-1em;color:#323232}.icon-contingency:before{content:\"\\e94b\"}.icon-corrosive .path1:before{content:\"\\e94c\";color:#323232}.icon-corrosive .path2:before{content:\"\\e94d\";margin-left:-1em;color:#323232}.icon-corrosive .path3:before{content:\"\\e94e\";margin-left:-1em;color:#323232}.icon-corrosive .path4:before{content:\"\\e94f\";margin-left:-1em;color:#323232}.icon-corrosive .path5:before{content:\"\\e950\";margin-left:-1em;color:#323232}.icon-corrosive .path6:before{content:\"\\e951\";margin-left:-1em;color:#323232}.icon-corrosive .path7:before{content:\"\\e952\";margin-left:-1em;color:#323232}.icon-corrosive .path8:before{content:\"\\e953\";margin-left:-1em;color:#323232}.icon-corrosive .path9:before{content:\"\\e954\";margin-left:-1em;color:#323232}.icon-corrosive .path10:before{content:\"\\e955\";margin-left:-1em;color:#323232}.icon-corrosive .path11:before{content:\"\\e956\";margin-left:-1em;color:#323232}.icon-corrosive .path12:before{content:\"\\e957\";margin-left:-1em;color:#323232}.icon-corrosive .path13:before{content:\"\\e958\";margin-left:-1em;color:#323232}.icon-corrosive .path14:before{content:\"\\e959\";margin-left:-1em;color:#323232}.icon-corrosive .path15:before{content:\"\\e95a\";margin-left:-1em;color:#323232}.icon-corrosive .path16:before{content:\"\\e95b\";margin-left:-1em;color:#323232}.icon-corrosive .path17:before{content:\"\\e95c\";margin-left:-1em;color:#323232}.icon-corrosive .path18:before{content:\"\\e95d\";margin-left:-1em;color:#323232}.icon-corrosive .path19:before{content:\"\\e95e\";margin-left:-1em;color:#323232}.icon-corrosive .path20:before{content:\"\\e95f\";margin-left:-1em;color:#323232}.icon-corrosive .path21:before{content:\"\\e960\";margin-left:-1em;color:#e32730}.icon-dashboard:before{content:\"\\e961\"}.icon-database-sds:before{content:\"\\e962\"}.icon-description-add:before{content:\"\\e963\"}.icon-description-edit:before{content:\"\\e964\"}.icon-description-view:before{content:\"\\e965\";color:#666}.icon-document-read .path1:before{content:\"\\e966\";color:#000;opacity:.6}.icon-document-read .path2:before{content:\"\\e967\";margin-left:-1em;color:#fff}.icon-document-read .path3:before{content:\"\\e968\";margin-left:-1em;color:#000;opacity:.6}.icon-draft:before{content:\"\\e969\"}.icon-expired-off:before{content:\"\\e96a\"}.icon-expired-on:before{content:\"\\e96b\"}.icon-explosive .path1:before{content:\"\\e96c\";color:#e32730}.icon-explosive .path2:before{content:\"\\e96d\";margin-left:-1em;color:#323232}.icon-explosive .path3:before{content:\"\\e96e\";margin-left:-1em;color:#323232}.icon-explosive .path4:before{content:\"\\e96f\";margin-left:-1em;color:#323232}.icon-explosive .path5:before{content:\"\\e970\";margin-left:-1em;color:#323232}.icon-explosive .path6:before{content:\"\\e971\";margin-left:-1em;color:#323232}.icon-explosive .path7:before{content:\"\\e972\";margin-left:-1em;color:#323232}.icon-explosive .path8:before{content:\"\\e973\";margin-left:-1em;color:#323232}.icon-explosive .path9:before{content:\"\\e974\";margin-left:-1em;color:#323232}.icon-explosive .path10:before{content:\"\\e975\";margin-left:-1em;color:#323232}.icon-explosive .path11:before{content:\"\\e976\";margin-left:-1em;color:#323232}.icon-explosive .path12:before{content:\"\\e977\";margin-left:-1em;color:#323232}.icon-explosive .path13:before{content:\"\\e978\";margin-left:-1em;color:#323232}.icon-explosive .path14:before{content:\"\\e979\";margin-left:-1em;color:#323232}.icon-explosive .path15:before{content:\"\\e97a\";margin-left:-1em;color:#323232}.icon-explosive .path16:before{content:\"\\e97b\";margin-left:-1em;color:#323232}.icon-explosive .path17:before{content:\"\\e97c\";margin-left:-1em;color:#323232}.icon-explosive .path18:before{content:\"\\e97d\";margin-left:-1em;color:#323232}.icon-explosive .path19:before{content:\"\\e97e\";margin-left:-1em;color:#323232}.icon-explosive .path20:before{content:\"\\e97f\";margin-left:-1em;color:#323232}.icon-explosive .path21:before{content:\"\\e980\";margin-left:-1em;color:#323232}.icon-explosive .path22:before{content:\"\\e981\";margin-left:-1em;color:#323232}.icon-explosive .path23:before{content:\"\\e982\";margin-left:-1em;color:#323232}.icon-explosive .path24:before{content:\"\\e983\";margin-left:-1em;color:#323232}.icon-explosive .path25:before{content:\"\\e984\";margin-left:-1em;color:#323232}.icon-explosive .path26:before{content:\"\\e985\";margin-left:-1em;color:#323232}.icon-explosive .path27:before{content:\"\\e986\";margin-left:-1em;color:#323232}.icon-explosive .path28:before{content:\"\\e987\";margin-left:-1em;color:#323232}.icon-explosive .path29:before{content:\"\\e988\";margin-left:-1em;color:#323232}.icon-explosive .path30:before{content:\"\\e989\";margin-left:-1em;color:#323232}.icon-explosive .path31:before{content:\"\\e98a\";margin-left:-1em;color:#323232}.icon-explosive .path32:before{content:\"\\e98b\";margin-left:-1em;color:#323232}.icon-explosive .path33:before{content:\"\\e98c\";margin-left:-1em;color:#323232}.icon-explosive .path34:before{content:\"\\e98d\";margin-left:-1em;color:#323232}.icon-explosive .path35:before{content:\"\\e98e\";margin-left:-1em;color:#323232}.icon-explosive .path36:before{content:\"\\e98f\";margin-left:-1em;color:#323232}.icon-explosive .path37:before{content:\"\\e990\";margin-left:-1em;color:#323232}.icon-explosive .path38:before{content:\"\\e991\";margin-left:-1em;color:#323232}.icon-explosive .path39:before{content:\"\\e992\";margin-left:-1em;color:#323232}.icon-explosive .path40:before{content:\"\\e993\";margin-left:-1em;color:#323232}.icon-explosive .path41:before{content:\"\\e994\";margin-left:-1em;color:#323232}.icon-explosive .path42:before{content:\"\\e995\";margin-left:-1em;color:#323232}.icon-explosive .path43:before{content:\"\\e996\";margin-left:-1em;color:#323232}.icon-explosive .path44:before{content:\"\\e997\";margin-left:-1em;color:#323232}.icon-explosive .path45:before{content:\"\\e998\";margin-left:-1em;color:#323232}.icon-explosive .path46:before{content:\"\\e999\";margin-left:-1em;color:#323232}.icon-file-excel:before{content:\"\\e99a\"}.icon-file-pdf:before{content:\"\\e99b\"}.icon-file-pdf-verified .path1:before{content:\"\\e99c\";color:#000;opacity:.6}.icon-file-pdf-verified .path2:before{content:\"\\e99d\";margin-left:-1em;color:#fff}.icon-file-pdf-verified .path3:before{content:\"\\e99e\";margin-left:-1em;color:#000;opacity:.6}.icon-file-word:before{content:\"\\e99f\"}.icon-filter-alt:before{content:\"\\e9a0\"}.icon-flammable .path1:before{content:\"\\e9a1\";color:#323232}.icon-flammable .path2:before{content:\"\\e9a2\";margin-left:-1em;color:#323232}.icon-flammable .path3:before{content:\"\\e9a3\";margin-left:-1em;color:#e32730}.icon-gas-under-pressure .path1:before{content:\"\\e9a4\";color:#323232}.icon-gas-under-pressure .path2:before{content:\"\\e9a5\";margin-left:-1em;color:#e32730}.icon-health-hazard .path1:before{content:\"\\e9a6\";color:#323232}.icon-health-hazard .path2:before{content:\"\\e9a7\";margin-left:-1em;color:#e32730}.icon-line-break:before{content:\"\\e9a8\"}.icon-location:before{content:\"\\e9a9\"}.icon-measure-add:before{content:\"\\e9aa\"}.icon-measure-edit:before{content:\"\\e9ab\"}.icon-measure-view:before{content:\"\\e9ac\";color:#666}.icon-messages:before{content:\"\\e9ad\"}.icon-monitoring:before{content:\"\\e9ae\";color:#666}.icon-move:before{content:\"\\e9af\"}.icon-oxidizing .path1:before{content:\"\\e9b0\";color:#e32730}.icon-oxidizing .path2:before{content:\"\\e9b1\";margin-left:-1em;color:#323232}.icon-oxidizing .path3:before{content:\"\\e9b2\";margin-left:-1em;color:#323232}.icon-oxidizing .path4:before{content:\"\\e9b3\";margin-left:-1em;color:#323232}.icon-process-area-closed:before{content:\"\\e9b4\"}.icon-process-area-open:before{content:\"\\e9b5\"}.icon-process-linked .path1:before{content:\"\\e9b6\";color:#000;opacity:.6}.icon-process-linked .path2:before{content:\"\\e9b7\";margin-left:-1em;color:#666}.icon-risk:before{content:\"\\e9b8\"}.icon-search-in-file:before{content:\"\\e9b9\"}.icon-sort-ascending:before{content:\"\\e9ba\"}.icon-sort-descending:before{content:\"\\e9bb\"}.icon-subscript:before{content:\"\\e9bc\"}.icon-superscript:before{content:\"\\e9bd\"}.icon-syncronice-favorites:before{content:\"\\e9be\"}.icon-system-settings:before{content:\"\\e9bf\"}.icon-view-three-outlined:before{content:\"\\e9c0\"}.icon-workplace-safety:before{content:\"\\e9c1\"}.icon-checklist:before{content:\"\\e900\"}.icon-department-document .path1:before{content:\"\\e901\";color:#000;opacity:.6}.icon-department-document .path2:before{content:\"\\e902\";margin-left:-1em;color:#00804c}.icon-department-folder-closed .path1:before{content:\"\\e903\";color:#000;opacity:.6}.icon-department-folder-closed .path2:before{content:\"\\e904\";margin-left:-1em;color:#00804c}.icon-department-folder-open .path1:before{content:\"\\e905\";color:#000;opacity:.6}.icon-department-folder-open .path2:before{content:\"\\e906\";margin-left:-1em;color:#00804c}.icon-deviation:before{content:\"\\e907\"}.icon-dropdown-folder .path1:before{content:\"\\e908\";color:#00324e}.icon-dropdown-folder .path2:before{content:\"\\e909\";margin-left:-1em;color:#fff;opacity:.6}.icon-enterprise-document .path1:before{content:\"\\e90a\";color:#000;opacity:.6}.icon-enterprise-document .path2:before{content:\"\\e90b\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-closed .path1:before{content:\"\\e90c\";color:#000;opacity:.6}.icon-enterprise-folder-closed .path2:before{content:\"\\e90d\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-open .path1:before{content:\"\\e90e\";color:#000;opacity:.6}.icon-enterprise-folder-open .path2:before{content:\"\\e90f\";margin-left:-1em;color:#cf4714}.icon-folder-closed:before{content:\"\\e910\"}.icon-folder-open:before{content:\"\\e911\"}.icon-keyboard_arrow_down:before{content:\"\\e912\"}.icon-keyboard_arrow_up:before{content:\"\\e913\"}.icon-local-document .path1:before{content:\"\\e914\";color:#000;opacity:.6}.icon-local-document .path2:before{content:\"\\e915\";margin-left:-1em;color:#1954a9}.icon-local-folder-closed .path1:before{content:\"\\e916\";color:#000;opacity:.6}.icon-local-folder-closed .path2:before{content:\"\\e917\";margin-left:-1em;color:#1954a9}.icon-local-folder-open .path1:before{content:\"\\e918\";color:#000;opacity:.6}.icon-local-folder-open .path2:before{content:\"\\e919\";margin-left:-1em;color:#1954a9}.icon-process:before{content:\"\\e91a\"}.icon-regional-document .path1:before{content:\"\\e91c\";color:#000;opacity:.6}.icon-regional-document .path2:before{content:\"\\e91d\";margin-left:-1em;color:#662e0d}.icon-regional-folder-closed .path1:before{content:\"\\e91e\";color:#000;opacity:.6}.icon-regional-folder-closed .path2:before{content:\"\\e91f\";margin-left:-1em;color:#662e0d}.icon-regional-folder-open .path1:before{content:\"\\e920\";color:#000;opacity:.6}.icon-regional-folder-open .path2:before{content:\"\\e921\";margin-left:-1em;color:#662e0d}.qms-select-department-tree-container{font-family:Open Sans,sans-serif}.qms-select-department-tree-container .mr10{margin-right:10px}.qms-select-department-tree-container .mt5{margin-bottom:5px}.qms-select-department-tree-container .mb5{margin-top:5px}.qms-select-department-tree-container .w100{width:100%}.qms-select-department-tree-container .h100{height:100%}.qms-select-department-tree-container .fw500{font-weight:500!important}.qms-select-department-tree-container .text-right{text-align:right}.qms-select-department-tree-container .mt20{margin-top:20px}.qms-select-department-tree-container .d-flex{display:flex}.qms-select-department-tree-container .align-items-center{align-items:center}.qms-select-department-tree-container .justify-content-end{justify-content:flex-end}.qms-select-department-tree-container .text-selected{color:#0009;font-size:12px;line-height:16px;margin-top:1rem}.qms-select-department-tree-container .input-field{display:flex;align-items:center;position:relative}.qms-select-department-tree-container .input-field ::ng-deep .mat-form-field-wrapper{padding-bottom:8px!important}.qms-select-department-tree-container .input-field ::ng-deep .mat-form-field-underline{bottom:8px!important}.qms-select-department-tree-container .input-field input.input-search{width:100%;padding:10px;outline:none;border:none;background:var(--background-input-text)}.qms-select-department-tree-container .input-field .btn-search{cursor:pointer;vertical-align:middle;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.qms-select-department-tree-container .input-field .line__divider{border-bottom:1px solid #ccc;height:1px;margin-top:10px;min-width:300px;max-width:100%}.qms-select-department-tree-container .header-title{font-weight:500;color:var(--ws-text-primary);font-size:16px;display:flex;align-items:center}.qms-select-department-tree-container .header-title .header-view{padding:4px 0}.qms-select-department-tree-container .sticky-position{position:sticky;top:0;left:0;z-index:1;background:#fff}.qms-select-department-tree-container .header-view-tree{display:grid;grid-template-columns:1fr 200px;column-gap:2px;padding:4px 12px 4px 0}.qms-select-department-tree-container .header-view-tree .header-view:nth-child(1){padding-left:12px}.qms-select-department-tree-container .tree-department-wrapper{padding-right:4px;overflow:hidden;position:relative;transition:height .3s ease-in-out}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view{width:100%;display:grid;grid-template-columns:1fr 200px;column-gap:2px}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main>.separate{height:38px}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main>.separate.h-0{height:0}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main:last-child{height:100%;padding-left:4px;position:relative}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main:last-child:after{position:absolute;content:\"\";top:0;bottom:-38px;left:0;width:1px;background:#0000001f}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main .external-list-item-container .node-external{overflow:hidden;transition:all .1s ease-in-out}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main .external-list-item-container .node-external .node-external-content{padding:5px 15px;height:calc(100% - 2px);color:var(--default-color);font-size:14px;display:flex;align-items:center}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main .external-list-item-container .node-external .node-external-content span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qms-select-department-tree-container .mask-overlay{z-index:1000;background-color:#2221211a;position:absolute;top:0;left:0;width:100%;height:100%;border-radius:4px;overflow:hidden;display:grid;place-items:center}.qms-select-department-tree-container .select-department-tree>.cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper{padding:0 4px!important}.qms-select-department-tree-container .select-department-tree .qms-tree-node{display:flex;align-items:center;border-radius:4px}.qms-select-department-tree-container .select-department-tree .qms-tree-node:hover{background-color:#00000014}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.node-expand-area{width:48px;height:48px;position:relative}.qms-select-department-tree-container .select-department-tree .qms-tree-node.active-external-view .mat-mdc-checkbox.qms-group-options{width:calc(100% - 250px)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.node-loading{background:var(--primary-light-6-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node{flex-basis:200px;overflow:hidden}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node .node-external{overflow:hidden;transition:all .1s ease-in-out;display:block}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node .node-external .node-external-content{padding:5px 15px;height:calc(100% - 2px);color:var(--default-color);font-size:14px;display:flex;align-items:center}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node .node-external .node-external-content span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node{color:var(--primary)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node:hover{background:var(--primary-light-6-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node:active{background:var(--primary-light-12-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node .mat-icon{color:var(--primary)}.qms-select-department-tree-container .select-department-tree .qms-tree-node .node-without-checkbox{cursor:pointer;width:100%;display:flex;justify-content:space-between;align-items:center}.qms-select-department-tree-container .select-department-tree .qms-tree-node .node-without-checkbox .mat-icon{color:var(--primary);margin-right:4px}.qms-select-department-tree-container .select-department-tree .qms-tree-node.selected-theme{background:var(--primary-light-12-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all{cursor:default!important;pointer-events:none;-webkit-user-select:none;user-select:none}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all button.mat-button-disabled,.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all .mat-icon-rtl-mirror,.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all .type-icon{color:#00000061}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all .text-name.disabled{color:#00000061;cursor:default!important;pointer-events:none;-webkit-user-select:none;user-select:none}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all.active{background-color:transparent}.qms-select-department-tree-container .select-department-tree .qms-tree-node.move-location-mode:hover .move-location-btn,.qms-select-department-tree-container .select-department-tree .qms-tree-node.move-location-mode:active .move-location-btn{display:block}.qms-select-department-tree-container .text-name{position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;cursor:pointer;width:100%}.qms-select-department-tree-container .cursor-pointer{cursor:pointer}.qms-select-department-tree-container .ml5{margin-left:15px!important}.qms-select-department-tree-container .pl-10{padding-left:10px}.qms-select-department-tree-container ::ng-deep .mat-mdc-checkbox.qms-group-options.flex-direction-row .mat-checkbox-layout{white-space:normal}.qms-select-department-tree-container ::ng-deep .mat-mdc-checkbox.qms-group-options.flex-direction-row .node-text>span{display:block}.qms-select-department-tree-container ::ng-deep .mat-mdc-checkbox.qms-group-options.flex-direction-row .mat-checkbox-label{flex-direction:row;align-items:center;position:relative;padding-bottom:2px}.qms-select-department-tree-container .qms-view-search-result{width:100%;overflow:hidden}.qms-select-department-tree-container .qms-view-search-result__header{position:relative}.qms-select-department-tree-container .qms-view-search-result__header:after{position:absolute;content:\"\";bottom:0;left:0;width:100%;height:1px;background-color:#0000001a}.qms-select-department-tree-container .qms-view-search-result__header .header-title{padding:8px 0;display:inline-block}.qms-select-department-tree-container .qms-view-search-result__header .header-title:nth-child(1){padding-left:12px}.qms-select-department-tree-container .qms-view-search-result__header .header-title:nth-child(2){flex-basis:200px}.qms-select-department-tree-container .qms-view-search-result>.no-result{height:100%;display:flex;justify-content:center;align-items:center}.qms-select-department-tree-container .qms-view-search-result__wrapper{height:calc(100% - 50px);width:100%}.qms-select-department-tree-container .qms-view-search-result__wrapper.active-external{height:calc(100% - 90px)!important}.qms-select-department-tree-container .qms-view-search-result__wrapper .result{max-height:100%;overflow-y:auto;margin-bottom:4px;padding-right:4px}.qms-select-department-tree-container .qms-view-search-result__wrapper .result.active-paging{max-height:calc(100% - 40px)}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item{border-radius:4px;display:grid;grid-template-columns:45px 1fr;align-items:center;cursor:pointer;transition:background .3s ease;min-height:40px}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item:not(:nth-child(1)){margin-top:4px!important}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item:hover{background:linear-gradient(0deg,#0163b21f,#0163b21f),#fff}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item:hover .move-location-btn{display:block}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item.active{background:linear-gradient(0deg,#0163b21f,#0163b21f),#fff}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item.no-checkbox{grid-template-columns:1fr}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content{display:flex;align-items:center}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content .item-result-content-wraper{padding:5px 15px;width:100%}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content .external-name{flex-basis:200px}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content .external-name span{width:200px;display:inline-block}.qms-select-department-tree-container .qms-view-search-result ::ng-deep .mat-mdc-checkbox.qms-group-options{display:flex;height:100%}.qms-select-department-tree-container ::ng-deep .breadcrumb-container{flex-wrap:wrap}.qms-select-department-tree-container ::ng-deep .mat-button-focus-overlay{background-color:transparent}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item{margin:0}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;transition:color .3s ease}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item-text:not(:last-child){max-width:150px!important}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-total-result{margin-bottom:0;margin-right:12px;height:100%;display:flex;align-items:center}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-total-result span{font-weight:600;color:#000c}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-paginator-range-actions{margin-bottom:0;column-gap:2px}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-paginator-range-actions>.qms-total-result{margin-bottom:0}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-form-field-wrapper{padding-bottom:0}.qms-select-department-tree-container ::ng-deep .qms-paginator .qms-paginator-page-size{align-items:center}.qms-select-department-tree-container .text-gray{color:#242424}.qms-select-department-tree-container .mb0{margin-bottom:0!important}.qms-select-department-tree-container .fs-base{font-size:14px!important}.qms-select-department-tree-container .user-select-none{-webkit-user-select:none;user-select:none}.qms-select-department-tree-container .item-breadcrumb-disable{cursor:not-allowed;color:#0009;font-weight:400;font-size:14px}.qms-select-department-tree-container ::ng-deep .mat-mdc-checkbox.checkbox-all .mat-checkbox-label{flex-direction:row;align-items:center;column-gap:4px}.qms-select-department-tree-container ::ng-deep .btn-arrow{width:40px;height:40px;line-height:40px}.qms-select-department-tree-container .qms-loading-container{overflow:hidden;display:grid;grid-template-rows:repeat(60px)}.qms-select-department-tree-container .qms-loading-container .qms-loader{position:relative;width:100%;height:100%;padding:10px 0;overflow:hidden}.qms-select-department-tree-container .qms-loading-container .qms-loader:after{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;background:linear-gradient(110deg,#e9e9e900,#e3e3e300 40%,#e3e3e380 50%,#e3e3e300 60% 100%);animation:animate-loading 1.2s linear infinite}.qms-select-department-tree-container .qms-loading-container .qms-loader__wrapper{position:relative;width:100%;height:100%}.qms-select-department-tree-container .qms-loading-container .qms-loader__wrapper .row-loader{background-color:#eee;position:absolute;left:0;width:100%;height:40px}@keyframes animate-loading{0%{transform:translate(-100%)}to{transform:translate(100%)}}.qms-select-department-tree-container .qms-spinner{font-size:20px;position:relative;display:inline-block;width:1em;height:1em}.qms-select-department-tree-container .qms-spinner.center{position:absolute;inset:0;margin:auto}.qms-select-department-tree-container ::ng-deep .mat-mdc-progress-spinner circle,.qms-select-department-tree-container .mat-mdc-progress-spinner circle{stroke:#1b75be!important}@media screen and (max-width: 600px){.qms-select-department-tree-container .external-view-node{flex-basis:65px!important}.qms-select-department-tree-container .qms-tree-node.active-external-view .mat-mdc-checkbox.qms-group-options{width:calc(100% - 110px)!important}.qms-select-department-tree-container .header-view-tree{grid-template-columns:1fr 80px!important}.qms-select-department-tree-container ::ng-deep .cdk-virtual-scroll-content-wrapper{right:0!important}.qms-select-department-tree-container .header-title{font-size:14px!important}.qms-select-department-tree-container .text-name,.qms-select-department-tree-container .node-external,.qms-select-department-tree-container .text-label,.qms-select-department-tree-container .text-label+span{font-size:12px}.qms-select-department-tree-container .node-expand-area{width:30px!important;height:30px!important}.qms-select-department-tree-container .node-expand-area .qms-btn-icon{width:30px;height:30px;line-height:30px}.qms-select-department-tree-container .fs-base{font-size:12px!important}.qms-select-department-tree-container .qms-select-department-tree-container .breadcrumb-container{flex-wrap:nowrap!important}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item-text{font-size:12px!important;max-width:175px!important}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-total-result{display:none!important}.qms-select-department-tree-container ::ng-deep .qms-paginator .size-small .mat-mdc-paginator-container{justify-content:center!important}.qms-select-department-tree-container .qms-view-search-result__header>.header-title:nth-child(2){flex-basis:120px!important}.qms-select-department-tree-container .result-item__content .external-name{flex-basis:75px!important}.qms-select-department-tree-container .result-item__content .external-name span{width:75px!important}}.qms-select-department-tree-container ::ng-deep .qms-paginator{margin-top:0}.move-location-btn{display:none;color:var(--primary)}::ng-deep .move-location-menu .mat-mdc-menu-item:hover{color:var(--primary)}\n"] }]
|
|
37175
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['qms-select-department-tree-container', (config.customClass || '')]\">\r\n <div class=\"input-select-department\">\r\n <form (ngSubmit)=\"!getLoading$.value && onSearch()\" *ngIf=\"config.enableTreeSearch\" class=\"input-field\">\r\n <mat-form-field class=\"w100\" qms-form qms-search-field>\r\n <input [formControl]=\"formSearchControl\" type=\"text\" placeholder=\"{{ LANG.SEARCH }}\" matInput />\r\n <button *ngIf=\"!getLoading$.value\" type=\"submit\" qms-btn-icon color=\"light\" matSuffix>\r\n <mat-icon>search</mat-icon>\r\n </button>\r\n <div matSuffix class=\"d-inline-block\">\r\n <mat-progress-spinner [@inOutAnimation] mode=\"indeterminate\" diameter=\"20\"\r\n *ngIf=\"getLoading$.value\"></mat-progress-spinner>\r\n </div>\r\n <button *ngIf=\"formSearchControl.value && !getLoading$.value\" qms-btn-icon color=\"light\" [@inOutAnimation]\r\n aria-label=\"Clear\" matSuffix (click)=\"formSearchControl.reset()\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </mat-form-field>\r\n </form>\r\n <div [@inOutAnimation] *ngIf=\"(getIndexView$ | async) === 1 && (textSearchSubject$ | async)\"\r\n class=\"sub-text ms-1 fw500\">\r\n {{LANG.RESULT_SEARCH_FOR}}<i><b>\"{{textSearchSubject$ | async}}\"</b></i>\r\n </div>\r\n <div [class.justify-content-between]=\"config.enableIncludeChild && !config.isSelectOne\"\r\n class=\"select__toggle-include toggle-include-child my-1 d-flex justify-content-end align-items-center\">\r\n <mat-slide-toggle *ngIf=\"config.enableIncludeChild && !config.isSelectOne\"\r\n [disabled]=\"(getIndexView$ | async) === 1 && config.disableToggleIncludeChildWhenChangeView\"\r\n [(ngModel)]=\"isIncludeChildren\" (ngModelChange)=\"toggleIncludeChildEvent.emit($event)\" color=\"default\"\r\n qms-group-options>\r\n <span class=\"text-label\">{{config.selectIncludeLabel || LANG.SELECT_INCLUDE_CHILD}}</span>\r\n </mat-slide-toggle>\r\n <button class=\"btn-arrow\" [@inOutAnimation] *ngIf=\"(getIndexView$ | async) === 1 && config.enableTreeSearch\"\r\n (click)=\"setIndexView(0)\" qms-btn-icon color=\"light\" [qms-tool-tip]=\"LANG.BACK_TO_TREE\" mode=\"dark\"\r\n position=\"top\">\r\n <mat-icon>arrow_back</mat-icon>\r\n </button>\r\n <button class=\"btn-arrow\" [@inOutAnimation]\r\n *ngIf=\"(getIndexView$ | async) === 0 && config.enableTreeSearch && (textSearchSubject$ | async)\"\r\n (click)=\"setIndexView(1)\" qms-btn-icon color=\"light\" [qms-tool-tip]=\"LANG.GOTO_SEACH_RESULT\" mode=\"dark\"\r\n position=\"top\">\r\n <mat-icon>arrow_forward</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n <div [@inOutAnimation]\r\n *ngIf=\"(getIndexView$ | async) === 0 && config.modeView === MODE_VIEW_ENUM.ExternalView && !!config.headerName\"\r\n class=\"header-view-tree\">\r\n <div class=\"header-view header-title\">\r\n {{config.headerName.treeName}}\r\n </div>\r\n <div class=\"header-view header-title\">\r\n {{config.headerName.externalName}}\r\n </div>\r\n </div>\r\n <mat-divider class=\"mx-auto\"></mat-divider>\r\n <div [@animateSlideView]=\"(getIndexView$ | async)\" [ngStyle]=\"{\r\n minHeight: height\r\n }\" class=\"tree-department-wrapper\">\r\n <div *ngIf=\"(getIndexView$ | async) === 0\" class=\"tree-view w100 h100\">\r\n <div class=\"tree-view-main h100\">\r\n <div *ngIf=\"!config.isSelectOne && !!treeControl.dataNodes && config.activeSelectAllNode\"\r\n class=\"checkbox-all-tree\" [class.sticky-position]=\"config.modeView === MODE_VIEW_ENUM.ExternalView\">\r\n <!-- Checkbox all root node -->\r\n <mat-checkbox [@inOutAnimation] (click)=\"onCheckAllRootTreeNode()\"\r\n [indeterminate]=\"isIndeterminateCheckboxAllTree\" [checked]=\"isAllDepartmentSelected\" qms-group-options\r\n color=\"default\" label=\"none\" class=\"checkbox-all\">\r\n <span class=\"text-label \">{{LANG.CHOOSE_ALL}} (<b>{{treeControl.dataNodes.length}}</b>)</span>\r\n </mat-checkbox>\r\n <mat-divider class=\"mx-auto\"></mat-divider>\r\n </div>\r\n <cdk-virtual-scroll-viewport *ngIf=\"dataSource.data\" [ngClass]=\"{\r\n 'has-checkbox-all': !config.isSelectOne && config.modeView === MODE_VIEW_ENUM.Basic,\r\n 'select-department-tree': true\r\n }\" [itemSize]=\"ITEM_SIZE\" [ngStyle]=\"{height: height}\">\r\n <ng-container *cdkVirtualFor=\"let node of dataSource; trackBy: trackBy\">\r\n <div class=\"qms-tree-node mt-1\" [style.padding-left]=\"node.level * (config.isMobile ? 12 :24) + 'px'\"\r\n [attr.data-id]=\"node.id\" [id]=\"'mat-node-'+node.id\" [@triggerColor]=\"activeNode == node.id\" [ngClass]=\"{\r\n 'w-100': config.isSelectOne,\r\n 'selected-theme': this.checkListSelection.isSelected(node) && config.isSelectOne,\r\n 'expand-node': treeControl.isExpandable(node) && treeControl.isExpanded(node),\r\n 'active-external-view': config.modeView === MODE_VIEW_ENUM.ExternalView,\r\n 'node-loading': node.isLoading,\r\n 'move-location-mode': config.moveLocationMode\r\n }\">\r\n <div class=\"node-expand-area\">\r\n <button class=\"btn-toggle\" qms-btn-icon color=\"light\"\r\n [disabled]=\"(config.moveLocationMode && checkListSelection.isSelected(node))\"\r\n (click)=\"onExpandNode(node)\" *ngIf=\"treeControl.isExpandable(node) && !node.isLoading\">\r\n <mat-icon>\r\n {{ treeControl.isExpanded(node) ? node?.expandIcon?.collapse : node?.expandIcon?.expand }}\r\n </mat-icon>\r\n </button>\r\n <ng-container *ngIf=\"node.isLoading; then loadingSpinner\"></ng-container>\r\n </div>\r\n <ng-container [ngTemplateOutlet]=\"config.isSelectOne ? nodeWithoutCheckboxTemplate : showCheckboxTemplate\"\r\n [ngTemplateOutletContext]=\"{ node: node }\"></ng-container>\r\n <div *ngIf=\"config.modeView === MODE_VIEW_ENUM.ExternalView\" class=\"external-view-node\">\r\n <span class=\"node-external\" qms-elipsify position=\"top\" mode=\"dark\">\r\n {{node.externalName || ''}}\r\n </span>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </cdk-virtual-scroll-viewport>\r\n <ng-container [@inOutAnimation] *ngIf=\"config.spinnerWhenGetMore && getLoadingMore$| async ;then maskOverlay\">\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div *ngIf=\"(getIndexView$ | async) === 1\" [ngStyle]=\"{\r\n height: height\r\n }\" class=\"qms-view-search-result\">\r\n <div *ngIf=\"config.modeView === MODE_VIEW_ENUM.ExternalView\"\r\n class=\"qms-view-search-result__header d-flex align-items-center justify-content-between\">\r\n <div class=\"header-title\">\r\n <span qms-elipsify mode=\"dark\" position=\"top\">\r\n {{config.headerName.resultSearchName}}\r\n </span>\r\n </div>\r\n <div class=\"header-title\">\r\n <span qms-elipsify mode=\"dark\" position=\"top\">\r\n {{config.headerName.externalName}}\r\n </span>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"getLoading$.value; then loading\"></ng-container>\r\n <div class=\"qms-view-search-result__wrapper\" [ngClass]=\"{\r\n 'active-external': config.modeView === MODE_VIEW_ENUM.ExternalView}\"\r\n *ngIf=\"!!resultSearch.length && !getLoading$.value\">\r\n <div *ngIf=\"!config.moveLocationMode\">\r\n <mat-checkbox [@inOutAnimation]\r\n [disabled]=\"!resultSearch.length || config.isSelectOne || isDisableChecboxAllSearch()\" #checkAllSearch\r\n [indeterminate]=\"indeterminateSearchResult\" [checked]=\"isSelectAllResultSearch\" qms-group-options\r\n color=\"default\" label=\"none\" class=\"checkbox-all\"\r\n (click)=\"!config.isSelectOne && onSelectAllSearchResult(checkAllSearch.checked)\">\r\n <span class=\"text-label header-title\">{{LANG.CHOOSE_ALL}}</span>\r\n <span>(<b>{{resultSearch.length}}</b>)</span>\r\n </mat-checkbox>\r\n </div>\r\n <div [@inOutAnimation] [@listAnimation]\r\n [class.active-paging]=\"searchDepartment$.value.length > 10 && config.enablePagingSearch\" class=\"result\">\r\n <div [qms-tool-tip]=\"!canHandleItemSearchResult(item) ? LANG.ITEM_NOT_MATCH_TO_TREE : ''\" mode=\"dark\"\r\n position=\"top\" *ngFor=\"let item of resultSearch\"\r\n (click)=\"$event.stopImmediatePropagation(); !item.disabled && onCheckItemSearchResult(item)\"\r\n [ngClass]=\"{'active': checkListSelectionSearch.isSelected(item), 'no-checkbox': config.moveLocationMode}\"\r\n class=\"result-item user-select-none\" matRipple>\r\n <mat-checkbox [@inOutAnimation] *ngIf=\"!item.isLoading && !config.moveLocationMode\"\r\n [disabled]=\"item.disabled\"\r\n (click)=\"$event.stopImmediatePropagation(); !item.disabled && onCheckItemSearchResult(item)\"\r\n [checked]=\"checkListSelectionSearch.isSelected(item)\" qms-group-options color=\"default\" label=\"none\">\r\n </mat-checkbox>\r\n <div *ngIf=\"item.isLoading\" [@inOutAnimation] class=\"position-relative\">\r\n <ng-container *ngIf=\"item.isLoading; then loadingSpinner\"></ng-container>\r\n </div>\r\n <div class=\"result-item__content\">\r\n <div class=\"item-result-content-wraper\">\r\n <div class=\"text-gray fw-bold fs-base mb0\">{{item.name}}</div>\r\n <qms-breadcrumb *ngIf=\"item.location?.length > 1\" [type]=\"config.isMobile ? 'mobile': ''\"\r\n [numDisplayItem]=\"6\" (onItemClick)=\"$event.stopImmediatePropagation()\" class=\"breadcrumb-container\"\r\n [nodes]=\"item.location\">\r\n </qms-breadcrumb>\r\n <div *ngIf=\"item.location?.length === 1\" class=\"d-flex align-items-center\">\r\n <span qms-elipsify mode=\"dark\" position=\"top\"\r\n class=\"item-breadcrumb-disable d-block\">{{item.location[0].name}}</span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"config.moveLocationMode\">\r\n <button class=\"move-location-btn\" qms-btn-icon [matMenuTriggerFor]=\"menu\">\r\n <mat-icon>swap_vert</mat-icon>\r\n </button>\r\n <mat-menu class=\"move-location-menu\" #menu=\"matMenu\">\r\n <button (click)=\"setDestinationLocation(item, 'sibling')\" mat-menu-item>\r\n <span>{{LANG.PLACE_NEXT_TO}}</span>\r\n </button>\r\n <button (click)=\"setDestinationLocation(item, 'child')\" mat-menu-item>\r\n <span>{{LANG.PLACE_UNDER}}</span>\r\n </button>\r\n </mat-menu>\r\n </div>\r\n <div *ngIf=\"config.modeView === MODE_VIEW_ENUM.ExternalView\" class=\"external-name\">\r\n <span qms-elipsify mode=\"dark\" position=\"top\" class=\"text-gray fs-base mb0\">{{item.externalName}}\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div [@inOutAnimation] *ngIf=\"!resultSearch.length && !getLoading$.value\" class=\"result no-result\">\r\n <ng-container *ngTemplateOutlet=\"noResult\"></ng-container>\r\n </div>\r\n <mat-divider *ngIf=\"searchDepartment$.value.length > 10 && config.enablePagingSearch\"\r\n class=\"mx-auto\"></mat-divider>\r\n <qms-paginator #paginatorSearch *ngIf=\"searchDepartment$.value.length > 10 && config.enablePagingSearch \"\r\n [length]=\"searchDepartment$.value.length\" [numHidden]=\"0\" [pageSize]=\"CURRENT_PAGESIZE\"\r\n [pageSizeOptions]=\"PAGE_SIZE_OPTION\" (page)='onPagingSearchResult($event)'\r\n [size]='config.isMobile ? PAGINATION_SIZE.small : PAGINATION_SIZE.medium'>\r\n </qms-paginator>\r\n </div>\r\n </div>\r\n\r\n <!-- Template for Checkbox -->\r\n <ng-template #showCheckboxTemplate let-node=\"node\">\r\n <mat-checkbox [id]=\"'node-'+node.id\" qms-group-options color=\"default\" label=\"none\" class=\"flex-direction-row\"\r\n [disabled]=\"node.isLoading || node.disabled\" [checked]=\"checkListSelection.isSelected(node)\"\r\n (click)=\"!node.isLoading && onCheckNode(node)\" [attr.disabled]=\"node.disabled || node.isLoading\">\r\n <img [title]=\"node.itemIconSvg\" *ngIf=\"node.itemIconSvg\" class=\"material-icons type-icon\"\r\n [src]=\"node.itemIconSvg\" />\r\n <span *ngIf=\"node.itemIcon\" [class]=\"node.itemIcon\" [qmsTransformIcon]=\"node.itemIcon\"\r\n class=\"material-icons-outlined type-icon\"></span>\r\n <span *ngIf=\"node.itemMatIcon\" class=\"material-icons-outlined type-icon\">{{\r\n node.itemMatIcon }}\r\n </span>\r\n <div class=\"node-text\" [ngStyle]=\"{\r\n maxWidth: (maxWidthNode - 20*node.level)+ 'px'\r\n }\">\r\n <span qms-elipsify [mode]=\"'dark'\" position=\"top\" class=\"text-name cursor-pointer ml5 123\"\r\n [ngClass]=\"{ disabled: node.disabled}\">{{ node.name}}\r\n </span>\r\n </div>\r\n </mat-checkbox>\r\n </ng-template>\r\n\r\n <!-- Template node without checkbox -->\r\n <ng-template #nodeWithoutCheckboxTemplate let-node=\"node\">\r\n <div [id]=\"'node-'+node.id\" (click)=\"onCheckNode(node)\" class=\"node-without-checkbox\">\r\n <div class=\"node-info\">\r\n <span *ngIf=\"node.itemIcon\" [class]=\"node.itemIcon\" [qmsTransformIcon]=\"node.itemIcon\"\r\n class=\"material-icons-outlined type-icon\"></span>\r\n <span *ngIf=\"node.itemMatIcon\" class=\"material-icons-outlined type-icon\">{{\r\n node.itemMatIcon }}\r\n </span>\r\n <span class=\"text-name cursor-pointer pl-10 123\" [ngClass]=\"{ disabled: node.disabled }\">{{ node.name }}</span>\r\n </div>\r\n <div class=\"node-state\">\r\n <mat-icon [class.disabled]=\"(config.moveLocationMode && checkListSelection.isSelected(node))\"\r\n *ngIf=\"checkListSelection.isSelected(node)\">check</mat-icon>\r\n <button class=\"move-location-btn\" *ngIf=\"config.moveLocationMode && !checkListSelection.isSelected(node)\"\r\n qms-btn-icon [matMenuTriggerFor]=\"menu\">\r\n <mat-icon>swap_vert</mat-icon>\r\n </button>\r\n <mat-menu class=\"move-location-menu\" #menu=\"matMenu\">\r\n <button (click)=\"moveToLocation(node, 'sibling')\" mat-menu-item>\r\n <span>{{LANG.PLACE_NEXT_TO}}</span>\r\n </button>\r\n <button (click)=\"moveToLocation(node, 'child')\" mat-menu-item>\r\n <span>{{LANG.PLACE_UNDER}}</span>\r\n </button>\r\n </mat-menu>\r\n </div>\r\n </div>\r\n </ng-template>\r\n</div>\r\n\r\n<ng-template #noResult>\r\n <svg width=\"89\" height=\"130\" viewBox=\"0 0 89 88\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"white\" />\r\n <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"#0163B2\" fill-opacity=\"0.12\" />\r\n <path\r\n d=\"M44.5 56.6936L58.096 64.8996L54.488 49.4336L66.5 39.0276L50.682 37.6856L44.5 23.0996L38.318 37.6856L22.5 39.0276L34.512 49.4336L30.904 64.8996L44.5 56.6936Z\"\r\n fill=\"#0163B3\" />\r\n <text x=\"10\" y=\"105\" fill=\"#0163B2\">{{LANG.NO_RESULT}}</text>\r\n </svg>\r\n</ng-template>\r\n\r\n<!-- Template loading -->\r\n<ng-template #loading>\r\n <div [ngStyle]=\"{\r\n 'height': searchDepartment$.value.length ? (config.modeView === MODE_VIEW_ENUM.ExternalView ? 'calc(100% - 90px)' : 'calc(100% - 50px)' ) : height\r\n }\" class=\"qms-loading-container\">\r\n <div class=\"qms-loader\" *ngFor=\"let item of arrSkeleton\">\r\n <div class=\"qms-loader__wrapper\">\r\n <div class=\"row-loader\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<!-- Template mask overlay -->\r\n<ng-template #maskOverlay>\r\n <div class=\"mask-overlay\">\r\n <mat-spinner [diameter]=\"50\" [strokeWidth]=\"5\" color=\"primary\"></mat-spinner>\r\n </div>\r\n</ng-template>\r\n\r\n<!-- Loading spinner -->\r\n<ng-template #loadingSpinner>\r\n <div class=\"qms-spinner center\">\r\n <mat-spinner [diameter]=\"20\" [strokeWidth]=\"2\"></mat-spinner>\r\n </div>\r\n</ng-template>", styles: ["@font-face{font-family:icomoon;src:url(/assets/fonts/icomoon.eot?aghldx);src:url(/assets/fonts/icomoon.eot?aghldx#iefix) format(\"embedded-opentype\"),url(/assets/fonts/icomoon.ttf?aghldx) format(\"truetype\"),url(/assets/fonts/icomoon.woff?aghldx) format(\"woff\"),url(/assets/fonts/icomoon.svg?aghldx#icomoon) format(\"svg\");font-weight:400;font-style:normal;font-display:block}[class^=icon-],[class*=\" icon-\"]{font-family:icomoon!important;speak:never;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-acutely-toxic .path1:before{content:\"\\e91b\";color:#e32730}.icon-acutely-toxic .path2:before{content:\"\\e922\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path3:before{content:\"\\e923\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path4:before{content:\"\\e924\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path5:before{content:\"\\e925\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path6:before{content:\"\\e926\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path7:before{content:\"\\e927\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path8:before{content:\"\\e928\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path9:before{content:\"\\e929\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path10:before{content:\"\\e92a\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path11:before{content:\"\\e92b\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path12:before{content:\"\\e92c\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path13:before{content:\"\\e92d\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path14:before{content:\"\\e92e\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path15:before{content:\"\\e92f\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path16:before{content:\"\\e930\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path17:before{content:\"\\e931\";margin-left:-1em;color:#323232}.icon-add-column:before{content:\"\\e932\"}.icon-add-tooltip:before{content:\"\\e933\"}.icon-admin:before{content:\"\\e934\"}.icon-annual-cycle:before{content:\"\\e935\"}.icon-assignment-repete:before{content:\"\\e936\"}.icon-barrier-add:before{content:\"\\e937\"}.icon-barrier-edit:before{content:\"\\e938\"}.icon-barrier-view:before{content:\"\\e939\"}.icon-button-group:before{content:\"\\e93a\"}.icon-chemical-manager:before{content:\"\\e93b\"}.icon-chronic-health-hazard .path1:before{content:\"\\e93c\";color:#e32730}.icon-chronic-health-hazard .path2:before{content:\"\\e93d\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path3:before{content:\"\\e93e\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path4:before{content:\"\\e93f\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path5:before{content:\"\\e940\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path6:before{content:\"\\e941\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path7:before{content:\"\\e942\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path8:before{content:\"\\e943\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path9:before{content:\"\\e944\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path10:before{content:\"\\e945\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path11:before{content:\"\\e946\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path12:before{content:\"\\e947\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path13:before{content:\"\\e948\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path14:before{content:\"\\e949\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path15:before{content:\"\\e94a\";margin-left:-1em;color:#323232}.icon-contingency:before{content:\"\\e94b\"}.icon-corrosive .path1:before{content:\"\\e94c\";color:#323232}.icon-corrosive .path2:before{content:\"\\e94d\";margin-left:-1em;color:#323232}.icon-corrosive .path3:before{content:\"\\e94e\";margin-left:-1em;color:#323232}.icon-corrosive .path4:before{content:\"\\e94f\";margin-left:-1em;color:#323232}.icon-corrosive .path5:before{content:\"\\e950\";margin-left:-1em;color:#323232}.icon-corrosive .path6:before{content:\"\\e951\";margin-left:-1em;color:#323232}.icon-corrosive .path7:before{content:\"\\e952\";margin-left:-1em;color:#323232}.icon-corrosive .path8:before{content:\"\\e953\";margin-left:-1em;color:#323232}.icon-corrosive .path9:before{content:\"\\e954\";margin-left:-1em;color:#323232}.icon-corrosive .path10:before{content:\"\\e955\";margin-left:-1em;color:#323232}.icon-corrosive .path11:before{content:\"\\e956\";margin-left:-1em;color:#323232}.icon-corrosive .path12:before{content:\"\\e957\";margin-left:-1em;color:#323232}.icon-corrosive .path13:before{content:\"\\e958\";margin-left:-1em;color:#323232}.icon-corrosive .path14:before{content:\"\\e959\";margin-left:-1em;color:#323232}.icon-corrosive .path15:before{content:\"\\e95a\";margin-left:-1em;color:#323232}.icon-corrosive .path16:before{content:\"\\e95b\";margin-left:-1em;color:#323232}.icon-corrosive .path17:before{content:\"\\e95c\";margin-left:-1em;color:#323232}.icon-corrosive .path18:before{content:\"\\e95d\";margin-left:-1em;color:#323232}.icon-corrosive .path19:before{content:\"\\e95e\";margin-left:-1em;color:#323232}.icon-corrosive .path20:before{content:\"\\e95f\";margin-left:-1em;color:#323232}.icon-corrosive .path21:before{content:\"\\e960\";margin-left:-1em;color:#e32730}.icon-dashboard:before{content:\"\\e961\"}.icon-database-sds:before{content:\"\\e962\"}.icon-description-add:before{content:\"\\e963\"}.icon-description-edit:before{content:\"\\e964\"}.icon-description-view:before{content:\"\\e965\";color:#666}.icon-document-read .path1:before{content:\"\\e966\";color:#000;opacity:.6}.icon-document-read .path2:before{content:\"\\e967\";margin-left:-1em;color:#fff}.icon-document-read .path3:before{content:\"\\e968\";margin-left:-1em;color:#000;opacity:.6}.icon-draft:before{content:\"\\e969\"}.icon-expired-off:before{content:\"\\e96a\"}.icon-expired-on:before{content:\"\\e96b\"}.icon-explosive .path1:before{content:\"\\e96c\";color:#e32730}.icon-explosive .path2:before{content:\"\\e96d\";margin-left:-1em;color:#323232}.icon-explosive .path3:before{content:\"\\e96e\";margin-left:-1em;color:#323232}.icon-explosive .path4:before{content:\"\\e96f\";margin-left:-1em;color:#323232}.icon-explosive .path5:before{content:\"\\e970\";margin-left:-1em;color:#323232}.icon-explosive .path6:before{content:\"\\e971\";margin-left:-1em;color:#323232}.icon-explosive .path7:before{content:\"\\e972\";margin-left:-1em;color:#323232}.icon-explosive .path8:before{content:\"\\e973\";margin-left:-1em;color:#323232}.icon-explosive .path9:before{content:\"\\e974\";margin-left:-1em;color:#323232}.icon-explosive .path10:before{content:\"\\e975\";margin-left:-1em;color:#323232}.icon-explosive .path11:before{content:\"\\e976\";margin-left:-1em;color:#323232}.icon-explosive .path12:before{content:\"\\e977\";margin-left:-1em;color:#323232}.icon-explosive .path13:before{content:\"\\e978\";margin-left:-1em;color:#323232}.icon-explosive .path14:before{content:\"\\e979\";margin-left:-1em;color:#323232}.icon-explosive .path15:before{content:\"\\e97a\";margin-left:-1em;color:#323232}.icon-explosive .path16:before{content:\"\\e97b\";margin-left:-1em;color:#323232}.icon-explosive .path17:before{content:\"\\e97c\";margin-left:-1em;color:#323232}.icon-explosive .path18:before{content:\"\\e97d\";margin-left:-1em;color:#323232}.icon-explosive .path19:before{content:\"\\e97e\";margin-left:-1em;color:#323232}.icon-explosive .path20:before{content:\"\\e97f\";margin-left:-1em;color:#323232}.icon-explosive .path21:before{content:\"\\e980\";margin-left:-1em;color:#323232}.icon-explosive .path22:before{content:\"\\e981\";margin-left:-1em;color:#323232}.icon-explosive .path23:before{content:\"\\e982\";margin-left:-1em;color:#323232}.icon-explosive .path24:before{content:\"\\e983\";margin-left:-1em;color:#323232}.icon-explosive .path25:before{content:\"\\e984\";margin-left:-1em;color:#323232}.icon-explosive .path26:before{content:\"\\e985\";margin-left:-1em;color:#323232}.icon-explosive .path27:before{content:\"\\e986\";margin-left:-1em;color:#323232}.icon-explosive .path28:before{content:\"\\e987\";margin-left:-1em;color:#323232}.icon-explosive .path29:before{content:\"\\e988\";margin-left:-1em;color:#323232}.icon-explosive .path30:before{content:\"\\e989\";margin-left:-1em;color:#323232}.icon-explosive .path31:before{content:\"\\e98a\";margin-left:-1em;color:#323232}.icon-explosive .path32:before{content:\"\\e98b\";margin-left:-1em;color:#323232}.icon-explosive .path33:before{content:\"\\e98c\";margin-left:-1em;color:#323232}.icon-explosive .path34:before{content:\"\\e98d\";margin-left:-1em;color:#323232}.icon-explosive .path35:before{content:\"\\e98e\";margin-left:-1em;color:#323232}.icon-explosive .path36:before{content:\"\\e98f\";margin-left:-1em;color:#323232}.icon-explosive .path37:before{content:\"\\e990\";margin-left:-1em;color:#323232}.icon-explosive .path38:before{content:\"\\e991\";margin-left:-1em;color:#323232}.icon-explosive .path39:before{content:\"\\e992\";margin-left:-1em;color:#323232}.icon-explosive .path40:before{content:\"\\e993\";margin-left:-1em;color:#323232}.icon-explosive .path41:before{content:\"\\e994\";margin-left:-1em;color:#323232}.icon-explosive .path42:before{content:\"\\e995\";margin-left:-1em;color:#323232}.icon-explosive .path43:before{content:\"\\e996\";margin-left:-1em;color:#323232}.icon-explosive .path44:before{content:\"\\e997\";margin-left:-1em;color:#323232}.icon-explosive .path45:before{content:\"\\e998\";margin-left:-1em;color:#323232}.icon-explosive .path46:before{content:\"\\e999\";margin-left:-1em;color:#323232}.icon-file-excel:before{content:\"\\e99a\"}.icon-file-pdf:before{content:\"\\e99b\"}.icon-file-pdf-verified .path1:before{content:\"\\e99c\";color:#000;opacity:.6}.icon-file-pdf-verified .path2:before{content:\"\\e99d\";margin-left:-1em;color:#fff}.icon-file-pdf-verified .path3:before{content:\"\\e99e\";margin-left:-1em;color:#000;opacity:.6}.icon-file-word:before{content:\"\\e99f\"}.icon-filter-alt:before{content:\"\\e9a0\"}.icon-flammable .path1:before{content:\"\\e9a1\";color:#323232}.icon-flammable .path2:before{content:\"\\e9a2\";margin-left:-1em;color:#323232}.icon-flammable .path3:before{content:\"\\e9a3\";margin-left:-1em;color:#e32730}.icon-gas-under-pressure .path1:before{content:\"\\e9a4\";color:#323232}.icon-gas-under-pressure .path2:before{content:\"\\e9a5\";margin-left:-1em;color:#e32730}.icon-health-hazard .path1:before{content:\"\\e9a6\";color:#323232}.icon-health-hazard .path2:before{content:\"\\e9a7\";margin-left:-1em;color:#e32730}.icon-line-break:before{content:\"\\e9a8\"}.icon-location:before{content:\"\\e9a9\"}.icon-measure-add:before{content:\"\\e9aa\"}.icon-measure-edit:before{content:\"\\e9ab\"}.icon-measure-view:before{content:\"\\e9ac\";color:#666}.icon-messages:before{content:\"\\e9ad\"}.icon-monitoring:before{content:\"\\e9ae\";color:#666}.icon-move:before{content:\"\\e9af\"}.icon-oxidizing .path1:before{content:\"\\e9b0\";color:#e32730}.icon-oxidizing .path2:before{content:\"\\e9b1\";margin-left:-1em;color:#323232}.icon-oxidizing .path3:before{content:\"\\e9b2\";margin-left:-1em;color:#323232}.icon-oxidizing .path4:before{content:\"\\e9b3\";margin-left:-1em;color:#323232}.icon-process-area-closed:before{content:\"\\e9b4\"}.icon-process-area-open:before{content:\"\\e9b5\"}.icon-process-linked .path1:before{content:\"\\e9b6\";color:#000;opacity:.6}.icon-process-linked .path2:before{content:\"\\e9b7\";margin-left:-1em;color:#666}.icon-risk:before{content:\"\\e9b8\"}.icon-search-in-file:before{content:\"\\e9b9\"}.icon-sort-ascending:before{content:\"\\e9ba\"}.icon-sort-descending:before{content:\"\\e9bb\"}.icon-subscript:before{content:\"\\e9bc\"}.icon-superscript:before{content:\"\\e9bd\"}.icon-syncronice-favorites:before{content:\"\\e9be\"}.icon-system-settings:before{content:\"\\e9bf\"}.icon-view-three-outlined:before{content:\"\\e9c0\"}.icon-workplace-safety:before{content:\"\\e9c1\"}.icon-checklist:before{content:\"\\e900\"}.icon-department-document .path1:before{content:\"\\e901\";color:#000;opacity:.6}.icon-department-document .path2:before{content:\"\\e902\";margin-left:-1em;color:#00804c}.icon-department-folder-closed .path1:before{content:\"\\e903\";color:#000;opacity:.6}.icon-department-folder-closed .path2:before{content:\"\\e904\";margin-left:-1em;color:#00804c}.icon-department-folder-open .path1:before{content:\"\\e905\";color:#000;opacity:.6}.icon-department-folder-open .path2:before{content:\"\\e906\";margin-left:-1em;color:#00804c}.icon-deviation:before{content:\"\\e907\"}.icon-dropdown-folder .path1:before{content:\"\\e908\";color:#00324e}.icon-dropdown-folder .path2:before{content:\"\\e909\";margin-left:-1em;color:#fff;opacity:.6}.icon-enterprise-document .path1:before{content:\"\\e90a\";color:#000;opacity:.6}.icon-enterprise-document .path2:before{content:\"\\e90b\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-closed .path1:before{content:\"\\e90c\";color:#000;opacity:.6}.icon-enterprise-folder-closed .path2:before{content:\"\\e90d\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-open .path1:before{content:\"\\e90e\";color:#000;opacity:.6}.icon-enterprise-folder-open .path2:before{content:\"\\e90f\";margin-left:-1em;color:#cf4714}.icon-folder-closed:before{content:\"\\e910\"}.icon-folder-open:before{content:\"\\e911\"}.icon-keyboard_arrow_down:before{content:\"\\e912\"}.icon-keyboard_arrow_up:before{content:\"\\e913\"}.icon-local-document .path1:before{content:\"\\e914\";color:#000;opacity:.6}.icon-local-document .path2:before{content:\"\\e915\";margin-left:-1em;color:#1954a9}.icon-local-folder-closed .path1:before{content:\"\\e916\";color:#000;opacity:.6}.icon-local-folder-closed .path2:before{content:\"\\e917\";margin-left:-1em;color:#1954a9}.icon-local-folder-open .path1:before{content:\"\\e918\";color:#000;opacity:.6}.icon-local-folder-open .path2:before{content:\"\\e919\";margin-left:-1em;color:#1954a9}.icon-process:before{content:\"\\e91a\"}.icon-regional-document .path1:before{content:\"\\e91c\";color:#000;opacity:.6}.icon-regional-document .path2:before{content:\"\\e91d\";margin-left:-1em;color:#662e0d}.icon-regional-folder-closed .path1:before{content:\"\\e91e\";color:#000;opacity:.6}.icon-regional-folder-closed .path2:before{content:\"\\e91f\";margin-left:-1em;color:#662e0d}.icon-regional-folder-open .path1:before{content:\"\\e920\";color:#000;opacity:.6}.icon-regional-folder-open .path2:before{content:\"\\e921\";margin-left:-1em;color:#662e0d}.qms-select-department-tree-container{font-family:Open Sans,sans-serif}.qms-select-department-tree-container .mr10{margin-right:10px}.qms-select-department-tree-container .mt5{margin-bottom:5px}.qms-select-department-tree-container .mb5{margin-top:5px}.qms-select-department-tree-container .w100{width:100%}.qms-select-department-tree-container .h100{height:100%}.qms-select-department-tree-container .fw500{font-weight:500!important}.qms-select-department-tree-container .text-right{text-align:right}.qms-select-department-tree-container .mt20{margin-top:20px}.qms-select-department-tree-container .d-flex{display:flex}.qms-select-department-tree-container .align-items-center{align-items:center}.qms-select-department-tree-container .justify-content-end{justify-content:flex-end}.qms-select-department-tree-container .text-selected{color:#0009;font-size:12px;line-height:16px;margin-top:1rem}.qms-select-department-tree-container .input-field{display:flex;align-items:center;position:relative}.qms-select-department-tree-container .input-field ::ng-deep .mat-form-field-wrapper{padding-bottom:8px!important}.qms-select-department-tree-container .input-field ::ng-deep .mat-form-field-underline{bottom:8px!important}.qms-select-department-tree-container .input-field input.input-search{width:100%;padding:10px;outline:none;border:none;background:var(--background-input-text)}.qms-select-department-tree-container .input-field .btn-search{cursor:pointer;vertical-align:middle;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.qms-select-department-tree-container .input-field .line__divider{border-bottom:1px solid #ccc;height:1px;margin-top:10px;min-width:300px;max-width:100%}.qms-select-department-tree-container .header-title{font-weight:500;color:var(--ws-text-primary);font-size:16px;display:flex;align-items:center}.qms-select-department-tree-container .header-title .header-view{padding:4px 0}.qms-select-department-tree-container .sticky-position{position:sticky;top:0;left:0;z-index:1;background:#fff}.qms-select-department-tree-container .header-view-tree{display:grid;grid-template-columns:1fr 200px;column-gap:2px;padding:4px 12px 4px 0}.qms-select-department-tree-container .header-view-tree .header-view:nth-child(1){padding-left:12px}.qms-select-department-tree-container .tree-department-wrapper{padding-right:4px;overflow:hidden;position:relative;transition:height .3s ease-in-out}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view{width:100%;display:grid;grid-template-columns:1fr 200px;column-gap:2px}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main>.separate{height:38px}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main>.separate.h-0{height:0}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main:last-child{height:100%;padding-left:4px;position:relative}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main:last-child:after{position:absolute;content:\"\";top:0;bottom:-38px;left:0;width:1px;background:#0000001f}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main .external-list-item-container .node-external{overflow:hidden;transition:all .1s ease-in-out}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main .external-list-item-container .node-external .node-external-content{padding:5px 15px;height:calc(100% - 2px);color:var(--default-color);font-size:14px;display:flex;align-items:center}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main .external-list-item-container .node-external .node-external-content span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qms-select-department-tree-container .mask-overlay{z-index:1000;background-color:#2221211a;position:absolute;top:0;left:0;width:100%;height:100%;border-radius:4px;overflow:hidden;display:grid;place-items:center}.qms-select-department-tree-container .select-department-tree>.cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper{padding:0 4px!important}.qms-select-department-tree-container .select-department-tree .qms-tree-node{display:flex;align-items:center;border-radius:4px}.qms-select-department-tree-container .select-department-tree .qms-tree-node:hover{background-color:#00000014}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.node-expand-area{width:48px;height:48px;position:relative}.qms-select-department-tree-container .select-department-tree .qms-tree-node.active-external-view .mat-mdc-checkbox.qms-group-options{width:calc(100% - 250px)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.node-loading{background:var(--primary-light-6-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node{flex-basis:200px;overflow:hidden}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node .node-external{overflow:hidden;transition:all .1s ease-in-out;display:block}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node .node-external .node-external-content{padding:5px 15px;height:calc(100% - 2px);color:var(--default-color);font-size:14px;display:flex;align-items:center}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node .node-external .node-external-content span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node{color:var(--primary)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node:hover{background:var(--primary-light-6-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node:active{background:var(--primary-light-12-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node .mat-icon{color:var(--primary)}.qms-select-department-tree-container .select-department-tree .qms-tree-node .node-without-checkbox{cursor:pointer;width:100%;display:flex;justify-content:space-between;align-items:center}.qms-select-department-tree-container .select-department-tree .qms-tree-node .node-without-checkbox .mat-icon{color:var(--primary);margin-right:4px}.qms-select-department-tree-container .select-department-tree .qms-tree-node.selected-theme{background:var(--primary-light-12-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all{cursor:default!important;pointer-events:none;-webkit-user-select:none;user-select:none}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all button.mat-button-disabled,.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all .mat-icon-rtl-mirror,.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all .type-icon{color:#00000061}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all .text-name.disabled{color:#00000061;cursor:default!important;pointer-events:none;-webkit-user-select:none;user-select:none}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all.active{background-color:transparent}.qms-select-department-tree-container .select-department-tree .qms-tree-node.move-location-mode:hover .move-location-btn,.qms-select-department-tree-container .select-department-tree .qms-tree-node.move-location-mode:active .move-location-btn{display:block}.qms-select-department-tree-container .text-name{position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;cursor:pointer;width:100%}.qms-select-department-tree-container .cursor-pointer{cursor:pointer}.qms-select-department-tree-container .ml5{margin-left:15px!important}.qms-select-department-tree-container .pl-10{padding-left:10px}.qms-select-department-tree-container ::ng-deep .mat-mdc-checkbox.qms-group-options.flex-direction-row .mat-checkbox-layout{white-space:normal}.qms-select-department-tree-container ::ng-deep .mat-mdc-checkbox.qms-group-options.flex-direction-row .node-text>span{display:block}.qms-select-department-tree-container ::ng-deep .mat-mdc-checkbox.qms-group-options.flex-direction-row .mat-checkbox-label{flex-direction:row;align-items:center;position:relative;padding-bottom:2px}.qms-select-department-tree-container .qms-view-search-result{width:100%;overflow:hidden}.qms-select-department-tree-container .qms-view-search-result__header{position:relative}.qms-select-department-tree-container .qms-view-search-result__header:after{position:absolute;content:\"\";bottom:0;left:0;width:100%;height:1px;background-color:#0000001a}.qms-select-department-tree-container .qms-view-search-result__header .header-title{padding:8px 0;display:inline-block}.qms-select-department-tree-container .qms-view-search-result__header .header-title:nth-child(1){padding-left:12px}.qms-select-department-tree-container .qms-view-search-result__header .header-title:nth-child(2){flex-basis:200px}.qms-select-department-tree-container .qms-view-search-result>.no-result{height:100%;display:flex;justify-content:center;align-items:center}.qms-select-department-tree-container .qms-view-search-result__wrapper{height:calc(100% - 50px);width:100%}.qms-select-department-tree-container .qms-view-search-result__wrapper.active-external{height:calc(100% - 90px)!important}.qms-select-department-tree-container .qms-view-search-result__wrapper .result{max-height:100%;overflow-y:auto;margin-bottom:4px;padding-right:4px}.qms-select-department-tree-container .qms-view-search-result__wrapper .result.active-paging{max-height:calc(100% - 40px)}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item{border-radius:4px;display:grid;grid-template-columns:45px 1fr;align-items:center;cursor:pointer;transition:background .3s ease;min-height:40px}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item:not(:nth-child(1)){margin-top:4px!important}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item:hover{background:linear-gradient(0deg,#0163b21f,#0163b21f),#fff}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item:hover .move-location-btn{display:block}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item.active{background:linear-gradient(0deg,#0163b21f,#0163b21f),#fff}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item.no-checkbox{grid-template-columns:1fr}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content{display:flex;align-items:center}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content .item-result-content-wraper{padding:5px 15px;width:100%}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content .external-name{flex-basis:200px}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content .external-name span{width:200px;display:inline-block}.qms-select-department-tree-container .qms-view-search-result ::ng-deep .mat-mdc-checkbox.qms-group-options{display:flex;height:100%}.qms-select-department-tree-container ::ng-deep .breadcrumb-container{flex-wrap:wrap}.qms-select-department-tree-container ::ng-deep .mat-button-focus-overlay{background-color:transparent}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item{margin:0}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;transition:color .3s ease}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item-text:not(:last-child){max-width:150px!important}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-total-result{margin-bottom:0;margin-right:12px;height:100%;display:flex;align-items:center}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-total-result span{font-weight:600;color:#000c}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-paginator-range-actions{margin-bottom:0;column-gap:2px}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-paginator-range-actions>.qms-total-result{margin-bottom:0}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-form-field-wrapper{padding-bottom:0}.qms-select-department-tree-container ::ng-deep .qms-paginator .qms-paginator-page-size{align-items:center}.qms-select-department-tree-container .text-gray{color:#242424}.qms-select-department-tree-container .mb0{margin-bottom:0!important}.qms-select-department-tree-container .fs-base{font-size:14px!important}.qms-select-department-tree-container .user-select-none{-webkit-user-select:none;user-select:none}.qms-select-department-tree-container .item-breadcrumb-disable{cursor:not-allowed;color:#0009;font-weight:400;font-size:14px}.qms-select-department-tree-container ::ng-deep .mat-mdc-checkbox.checkbox-all .mat-checkbox-label{flex-direction:row;align-items:center;column-gap:4px}.qms-select-department-tree-container ::ng-deep .btn-arrow{width:40px;height:40px;line-height:40px}.qms-select-department-tree-container .qms-loading-container{overflow:hidden;display:grid;grid-template-rows:repeat(60px)}.qms-select-department-tree-container .qms-loading-container .qms-loader{position:relative;width:100%;height:100%;padding:10px 0;overflow:hidden}.qms-select-department-tree-container .qms-loading-container .qms-loader:after{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;background:linear-gradient(110deg,#e9e9e900,#e3e3e300 40%,#e3e3e380 50%,#e3e3e300 60% 100%);animation:animate-loading 1.2s linear infinite}.qms-select-department-tree-container .qms-loading-container .qms-loader__wrapper{position:relative;width:100%;height:100%}.qms-select-department-tree-container .qms-loading-container .qms-loader__wrapper .row-loader{background-color:#eee;position:absolute;left:0;width:100%;height:40px}@keyframes animate-loading{0%{transform:translate(-100%)}to{transform:translate(100%)}}.qms-select-department-tree-container .qms-spinner{font-size:20px;position:relative;display:inline-block;width:1em;height:1em}.qms-select-department-tree-container .qms-spinner.center{position:absolute;inset:0;margin:auto}.qms-select-department-tree-container ::ng-deep .mat-mdc-progress-spinner circle,.qms-select-department-tree-container .mat-mdc-progress-spinner circle{stroke:#1b75be!important}@media screen and (max-width: 600px){.qms-select-department-tree-container .external-view-node{flex-basis:65px!important}.qms-select-department-tree-container .qms-tree-node.active-external-view .mat-mdc-checkbox.qms-group-options{width:calc(100% - 110px)!important}.qms-select-department-tree-container .header-view-tree{grid-template-columns:1fr 80px!important}.qms-select-department-tree-container ::ng-deep .cdk-virtual-scroll-content-wrapper{right:0!important}.qms-select-department-tree-container .header-title{font-size:14px!important}.qms-select-department-tree-container .text-name,.qms-select-department-tree-container .node-external,.qms-select-department-tree-container .text-label,.qms-select-department-tree-container .text-label+span{font-size:12px}.qms-select-department-tree-container .node-expand-area{width:30px!important;height:30px!important}.qms-select-department-tree-container .node-expand-area .qms-btn-icon{width:30px;height:30px;line-height:30px}.qms-select-department-tree-container .fs-base{font-size:12px!important}.qms-select-department-tree-container .qms-select-department-tree-container .breadcrumb-container{flex-wrap:nowrap!important}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item-text{font-size:12px!important;max-width:175px!important}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-total-result{display:none!important}.qms-select-department-tree-container ::ng-deep .qms-paginator .size-small .mat-mdc-paginator-container{justify-content:center!important}.qms-select-department-tree-container .qms-view-search-result__header>.header-title:nth-child(2){flex-basis:120px!important}.qms-select-department-tree-container .result-item__content .external-name{flex-basis:75px!important}.qms-select-department-tree-container .result-item__content .external-name span{width:75px!important}}.qms-select-department-tree-container ::ng-deep .qms-paginator{margin-top:0}.move-location-btn{display:none;color:var(--primary)}::ng-deep .move-location-menu .mat-mdc-menu-item:hover{color:var(--primary)}\n"] }]
|
|
37179
37176
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$3.DomSanitizer }, { type: QMSIconRegistryService }, { type: i4.MatIconRegistry }, { type: i0.ElementRef }, { type: TranslateLibraryService }, { type: i1$1.Overlay }, { type: i0.ViewContainerRef }, { type: QMSSelectDepartmentTreeGlobalService }], propDecorators: { rowsSkeleton: [{
|
|
37180
37177
|
type: Input
|
|
37181
37178
|
}], height: [{
|
|
@@ -37824,6 +37821,7 @@ class QMSSelectAccessResult {
|
|
|
37824
37821
|
this.userGroups = [];
|
|
37825
37822
|
this.departments = [];
|
|
37826
37823
|
this.persons = [];
|
|
37824
|
+
this.departmentsFlat = [];
|
|
37827
37825
|
}
|
|
37828
37826
|
}
|
|
37829
37827
|
class QMSSelectAccessData {
|
|
@@ -37832,6 +37830,7 @@ class QMSSelectAccessData {
|
|
|
37832
37830
|
this.selectedData = new QMSSelectAccessResult();
|
|
37833
37831
|
this.accessPersons = new QMSAccessPagingModel();
|
|
37834
37832
|
this.accessUserGroups = new QMSAccessPagingModel();
|
|
37833
|
+
this.accessDepartmentsFlat = new QMSAccessPagingModel();
|
|
37835
37834
|
}
|
|
37836
37835
|
}
|
|
37837
37836
|
|
|
@@ -37875,6 +37874,7 @@ class QMSSelectAccessDialog {
|
|
|
37875
37874
|
this.formatMsgDisable = null;
|
|
37876
37875
|
this.maxWidthNode = 510;
|
|
37877
37876
|
this.skipFirstAskingScreen = false;
|
|
37877
|
+
this.isDepartmentPaging = false;
|
|
37878
37878
|
}
|
|
37879
37879
|
}
|
|
37880
37880
|
|
|
@@ -37924,6 +37924,13 @@ class QMSSelectAccessDialogComponent {
|
|
|
37924
37924
|
return userGroups.data || [];
|
|
37925
37925
|
}
|
|
37926
37926
|
;
|
|
37927
|
+
get departmentFiltered() {
|
|
37928
|
+
const departments = this.getDepartment$.value;
|
|
37929
|
+
const ids = this.resultAccess.departmentsFlat.map(x => x.id);
|
|
37930
|
+
departments.data?.forEach(x => x.selected = ids.includes(x.id));
|
|
37931
|
+
return departments.data || [];
|
|
37932
|
+
}
|
|
37933
|
+
;
|
|
37927
37934
|
constructor(dialogRef, dialogData, translate, _fb, cdRef) {
|
|
37928
37935
|
this.dialogRef = dialogRef;
|
|
37929
37936
|
this.dialogData = dialogData;
|
|
@@ -37941,6 +37948,8 @@ class QMSSelectAccessDialogComponent {
|
|
|
37941
37948
|
this.onSearchPersonFreeTextEvent = new EventEmitter();
|
|
37942
37949
|
this.onSearchUserGroupEvent = new EventEmitter();
|
|
37943
37950
|
this.onSearchDepartmentEvent = new EventEmitter();
|
|
37951
|
+
this.onSearchDepartmentPagingEvent = new EventEmitter();
|
|
37952
|
+
this.departmentSearchForm = new UntypedFormControl('');
|
|
37944
37953
|
this.onPagingEvent = new EventEmitter();
|
|
37945
37954
|
this.onSelectOptionChange$ = new Subject();
|
|
37946
37955
|
/** list filtered by search keyword */
|
|
@@ -37954,6 +37963,7 @@ class QMSSelectAccessDialogComponent {
|
|
|
37954
37963
|
};
|
|
37955
37964
|
this.getPerson$ = new BehaviorSubject(new QMSAccessPagingModel());
|
|
37956
37965
|
this.getUserGroup$ = new BehaviorSubject(new QMSAccessPagingModel());
|
|
37966
|
+
this.getDepartment$ = new BehaviorSubject(new QMSAccessPagingModel());
|
|
37957
37967
|
this.PAGINATION_SIZE = PaginationSize;
|
|
37958
37968
|
this.PAGE_SIZE_OPTION = [5, 10, 15, 20, 25, 100];
|
|
37959
37969
|
this.resultAccess = new QMSSelectAccessResult();
|
|
@@ -37994,10 +38004,12 @@ class QMSSelectAccessDialogComponent {
|
|
|
37994
38004
|
if (response) {
|
|
37995
38005
|
this.personForm && this.personForm.disable();
|
|
37996
38006
|
this.userGroupForm && this.userGroupForm.disable();
|
|
38007
|
+
this.departmentSearchForm && this.departmentSearchForm.disable();
|
|
37997
38008
|
return;
|
|
37998
38009
|
}
|
|
37999
38010
|
this.personForm && this.personForm.enable();
|
|
38000
38011
|
this.userGroupForm && this.userGroupForm.enable();
|
|
38012
|
+
this.departmentSearchForm && this.departmentSearchForm.enable();
|
|
38001
38013
|
});
|
|
38002
38014
|
}
|
|
38003
38015
|
ngOnDestroy() {
|
|
@@ -38096,8 +38108,9 @@ class QMSSelectAccessDialogComponent {
|
|
|
38096
38108
|
const resultObj = {
|
|
38097
38109
|
0: this.resultAccess.persons,
|
|
38098
38110
|
1: this.resultAccess.userGroups,
|
|
38099
|
-
2: this.resultAccess.departments
|
|
38111
|
+
2: this.resultAccess.departments || this.resultAccess.departmentsFlat
|
|
38100
38112
|
};
|
|
38113
|
+
console.log('resultObj', resultObj[this.optionSelect.value]);
|
|
38101
38114
|
return resultObj[this.optionSelect.value];
|
|
38102
38115
|
}
|
|
38103
38116
|
checkExistOptionSelect(option) {
|
|
@@ -38126,10 +38139,10 @@ class QMSSelectAccessDialogComponent {
|
|
|
38126
38139
|
recursive: formValue.recursive
|
|
38127
38140
|
};
|
|
38128
38141
|
this.getSearching$.next(true);
|
|
38129
|
-
this.
|
|
38142
|
+
this._resetPaginator(this.pagingPerson);
|
|
38130
38143
|
this.onSearchPersonEvent.emit(filterData);
|
|
38131
38144
|
}
|
|
38132
|
-
|
|
38145
|
+
_resetPaginator(paginator) {
|
|
38133
38146
|
if (!paginator)
|
|
38134
38147
|
return;
|
|
38135
38148
|
paginator.changePage(0);
|
|
@@ -38139,14 +38152,20 @@ class QMSSelectAccessDialogComponent {
|
|
|
38139
38152
|
this.getLoading$.next(true);
|
|
38140
38153
|
this.getSearching$.next(true);
|
|
38141
38154
|
this.onSearchPersonFreeTextEvent.emit(this.personForm.get('keyword').value);
|
|
38142
|
-
this.
|
|
38155
|
+
this._resetPaginator(this.pagingPerson);
|
|
38143
38156
|
}
|
|
38144
38157
|
onFilterUserGroup() {
|
|
38145
38158
|
this.getLoading$.next(true);
|
|
38146
38159
|
this.getSearching$.next(true);
|
|
38147
|
-
this.
|
|
38160
|
+
this._resetPaginator(this.pagingUserGroup);
|
|
38148
38161
|
this.onSearchUserGroupEvent.emit(this.userGroupForm.value);
|
|
38149
38162
|
}
|
|
38163
|
+
onFilterDepartment() {
|
|
38164
|
+
this.getLoading$.next(true);
|
|
38165
|
+
this.getSearching$.next(true);
|
|
38166
|
+
this._resetPaginator(this.pagingDepartment);
|
|
38167
|
+
this.onSearchDepartmentPagingEvent.emit(this.departmentSearchForm.value);
|
|
38168
|
+
}
|
|
38150
38169
|
onSelectItem(type, item) {
|
|
38151
38170
|
if (!this.allowRemove(type, item))
|
|
38152
38171
|
return;
|
|
@@ -38190,6 +38209,24 @@ class QMSSelectAccessDialogComponent {
|
|
|
38190
38209
|
indexItem > -1 && this.resultAccess.userGroups.splice(indexItem, 1);
|
|
38191
38210
|
}
|
|
38192
38211
|
break;
|
|
38212
|
+
case OptionSelectAccessEnum.DEPARTMENT:
|
|
38213
|
+
{
|
|
38214
|
+
if (this.dialogData.modeSelectOneUserGroup) {
|
|
38215
|
+
this.resultAccess.departmentsFlat = item.selected ? [item] : [];
|
|
38216
|
+
this.departmentFiltered.forEach(item => {
|
|
38217
|
+
if (item.id !== item.id) {
|
|
38218
|
+
item.selected = false;
|
|
38219
|
+
}
|
|
38220
|
+
});
|
|
38221
|
+
return;
|
|
38222
|
+
}
|
|
38223
|
+
if (item.selected) {
|
|
38224
|
+
this.resultAccess.departmentsFlat.push(item);
|
|
38225
|
+
return;
|
|
38226
|
+
}
|
|
38227
|
+
const indexItem = this.resultAccess.departmentsFlat.findIndex(x => x.id === item.id);
|
|
38228
|
+
indexItem > -1 && this.resultAccess.departmentsFlat.splice(indexItem, 1);
|
|
38229
|
+
}
|
|
38193
38230
|
default:
|
|
38194
38231
|
return;
|
|
38195
38232
|
}
|
|
@@ -38209,12 +38246,21 @@ class QMSSelectAccessDialogComponent {
|
|
|
38209
38246
|
}
|
|
38210
38247
|
break;
|
|
38211
38248
|
case this.OPTION_ENUM.DEPARTMENT:
|
|
38212
|
-
this.
|
|
38213
|
-
|
|
38214
|
-
|
|
38215
|
-
|
|
38216
|
-
|
|
38217
|
-
|
|
38249
|
+
if (!this.dialogData.isDepartmentPaging) {
|
|
38250
|
+
this.resultAccess.departments.splice(index, 1);
|
|
38251
|
+
this._departmentSelected = _.cloneDeep(this.resultAccess.departments);
|
|
38252
|
+
if (!this.treeDepartment)
|
|
38253
|
+
return;
|
|
38254
|
+
this.treeDepartment.onRemoveNode(item.id);
|
|
38255
|
+
break;
|
|
38256
|
+
}
|
|
38257
|
+
else {
|
|
38258
|
+
this.resultAccess.departmentsFlat.splice(index, 1);
|
|
38259
|
+
if (this.departmentFiltered[index]) {
|
|
38260
|
+
this.departmentFiltered[index].selected = false;
|
|
38261
|
+
}
|
|
38262
|
+
break;
|
|
38263
|
+
}
|
|
38218
38264
|
default:
|
|
38219
38265
|
return;
|
|
38220
38266
|
}
|
|
@@ -38245,6 +38291,8 @@ class QMSSelectAccessDialogComponent {
|
|
|
38245
38291
|
return !this.dialogData.modeSelectOnePerson && this.personFiltered.length && this.personFiltered.every(x => x.selected);
|
|
38246
38292
|
case this.OPTION_ENUM.USER_GROUP:
|
|
38247
38293
|
return !this.dialogData.modeSelectOneUserGroup && this.userGroupFiltered.length && this.userGroupFiltered.every(x => x.selected);
|
|
38294
|
+
case this.OPTION_ENUM.DEPARTMENT:
|
|
38295
|
+
return !this.dialogData.modeSelectOneUserGroup && this.departmentFiltered.length && this.departmentFiltered.every(x => x.selected);
|
|
38248
38296
|
default:
|
|
38249
38297
|
return false;
|
|
38250
38298
|
}
|
|
@@ -38253,6 +38301,7 @@ class QMSSelectAccessDialogComponent {
|
|
|
38253
38301
|
switch (type) {
|
|
38254
38302
|
case OptionSelectAccessEnum.PERSON: return !this.personFiltered.length || this.personFiltered.every(x => !this.allowRemove(type, x));
|
|
38255
38303
|
case OptionSelectAccessEnum.USER_GROUP: return !this.userGroupFiltered.length || this.userGroupFiltered.every(x => !this.allowRemove(type, x));
|
|
38304
|
+
case OptionSelectAccessEnum.DEPARTMENT: return !this.departmentFiltered.length || this.departmentFiltered.every(x => !this.allowRemove(type, x));
|
|
38256
38305
|
default: return false;
|
|
38257
38306
|
}
|
|
38258
38307
|
}
|
|
@@ -38262,6 +38311,8 @@ class QMSSelectAccessDialogComponent {
|
|
|
38262
38311
|
return !this.dialogData.modeSelectOnePerson && !this.isCheckAll(type) && this.personFiltered?.some(x => x.selected);
|
|
38263
38312
|
case this.OPTION_ENUM.USER_GROUP:
|
|
38264
38313
|
return !this.dialogData.modeSelectOneUserGroup && !this.isCheckAll(type) && this.userGroupFiltered?.some(x => x.selected);
|
|
38314
|
+
case this.OPTION_ENUM.DEPARTMENT:
|
|
38315
|
+
return !this.dialogData.modeSelectOneUserGroup && !this.isCheckAll(type) && this.departmentFiltered?.some(x => x.selected);
|
|
38265
38316
|
default:
|
|
38266
38317
|
return false;
|
|
38267
38318
|
}
|
|
@@ -38304,6 +38355,22 @@ class QMSSelectAccessDialogComponent {
|
|
|
38304
38355
|
this.resultAccess.userGroups = this.resultAccess.userGroups.filter(x => !this.allowRemove(type, x) || !idFiltered.includes(x.id));
|
|
38305
38356
|
break;
|
|
38306
38357
|
}
|
|
38358
|
+
case this.OPTION_ENUM.DEPARTMENT: {
|
|
38359
|
+
if (this.dialogData.modeSelectOneUserGroup) {
|
|
38360
|
+
$event.checked = false;
|
|
38361
|
+
return;
|
|
38362
|
+
}
|
|
38363
|
+
const departmentPaging = this.departmentFiltered;
|
|
38364
|
+
departmentPaging.filter(x => this.allowRemove(type, x)).forEach(x => x.selected = $event.checked);
|
|
38365
|
+
const idFiltered = departmentPaging.map(x => x.id);
|
|
38366
|
+
if ($event.checked) {
|
|
38367
|
+
const idSelected = this.resultAccess.departmentsFlat.map(x => x.id);
|
|
38368
|
+
this.resultAccess.departmentsFlat = [...this.resultAccess.departmentsFlat, ...departmentPaging.filter(x => this.allowRemove(type, x) && !idSelected.includes(x.id))];
|
|
38369
|
+
return;
|
|
38370
|
+
}
|
|
38371
|
+
this.resultAccess.departmentsFlat = this.resultAccess.departmentsFlat.filter(x => !this.allowRemove(type, x) || !idFiltered.includes(x.id));
|
|
38372
|
+
break;
|
|
38373
|
+
}
|
|
38307
38374
|
default:
|
|
38308
38375
|
return;
|
|
38309
38376
|
}
|
|
@@ -38369,7 +38436,7 @@ class QMSSelectAccessDialogComponent {
|
|
|
38369
38436
|
onPaginatorEvent(val, type) {
|
|
38370
38437
|
if (this.getSearching$.value)
|
|
38371
38438
|
return;
|
|
38372
|
-
this.getLoading$.next(this.optionSelect.value !==
|
|
38439
|
+
this.getLoading$.next(this.optionSelect.value !== '');
|
|
38373
38440
|
this.onPagingEvent.emit({
|
|
38374
38441
|
...val,
|
|
38375
38442
|
type: type
|
|
@@ -38387,6 +38454,11 @@ class QMSSelectAccessDialogComponent {
|
|
|
38387
38454
|
}
|
|
38388
38455
|
this.treeDepartment.setResultSearch(data);
|
|
38389
38456
|
}
|
|
38457
|
+
updateDepartmentFilter(data) {
|
|
38458
|
+
this.getDepartment$.next(data);
|
|
38459
|
+
this.getLoading$.next(false);
|
|
38460
|
+
this.getSearching$.next(false);
|
|
38461
|
+
}
|
|
38390
38462
|
generateTooltip(node) {
|
|
38391
38463
|
if (this.dialogData?.formatTooltip)
|
|
38392
38464
|
return this.dialogData.formatTooltip(node);
|
|
@@ -38427,7 +38499,7 @@ class QMSSelectAccessDialogComponent {
|
|
|
38427
38499
|
clickAction: 'noop'
|
|
38428
38500
|
}
|
|
38429
38501
|
}
|
|
38430
|
-
], viewQueries: [{ propertyName: "tree", first: true, predicate: ["tree"], descendants: true, read: SelectDepartmentTreeComponent }, { propertyName: "pagingPerson", first: true, predicate: ["pagingPerson"], descendants: true }, { propertyName: "pagingUserGroup", first: true, predicate: ["pagingUserGroup"], descendants: true }], ngImport: i0, template: "<h3 mat-dialog-title class=\"more-action\">\n {{dialogData.titleDialog || LANG.SELECT_ACCESS}}\n <button matDialogClose class=\"close-btn\" qms-btn-icon color=\"light\">\n <mat-icon class=\"mat-icons-outlined\">close</mat-icon>\n </button>\n</h3>\n<mat-dialog-content>\n <div [class.active]=\"optionSelect.value !== null\" class=\"qms-dialog-content\">\n <div class=\"access-dialog-wraper\">\n <mat-form-field *ngIf=\"options.length > 1\" qms-form qms-select-input class=\"field-select-option w-100 mb-2\"\n appearance=\"fill\">\n <mat-label qms-select-input>{{LANG.TYPE}}</mat-label>\n <mat-select (selectionChange)=\"onSelectionTypeChange($event)\" [formControl]=\"optionSelect\" placeholder=\"Select\"\n disableOptionCentering #singleSelect panelClass=\"qms-select-panel\" qms-select>\n\n <mat-option *ngFor=\"let item of options\" [value]=\"item.type\">\n {{ LANG[item.displayName] }}\n </mat-option>\n </mat-select>\n </mat-form-field>\n <div class=\"body-dialog-container\">\n <div class=\"option-selected-content\">\n <ng-container *ngIf=\"optionSelect.value === OPTION_ENUM.PERSON\">\n <form *ngIf=\"personForm\" [formGroup]=\"personForm\">\n <div class=\"group-filter-person-option\">\n <mat-form-field *ngIf=\"optionFilterPersonDataGlobal.userGroups.length\" qms-form qms-select-input\n class=\"w-100 mb-2\" appearance=\"fill\">\n <mat-label qms-select-input>{{LANG.ROLE}}</mat-label>\n <mat-select panelClass=\"qms-select-panel\" qms-select formControlName=\"userGroup\"\n disableOptionCentering>\n <mat-select-trigger>\n {{personForm.controls['userGroup'].value?.name || ''}}\n </mat-select-trigger>\n <mat-option>\n <ngx-mat-select-search formControlName=\"userGroupFilter\" placeholderLabel=\"{{ LANG.ROLE }}\"\n noEntriesFoundLabel=\"\">\n </ngx-mat-select-search>\n </mat-option>\n <mat-option mode=\"dark\" class=\"opt-check-icon\"\n *ngFor=\"let item of filteredSearchTextBox.userGroup.value\" [value]=\"item\">\n <span qms-elipsify position=\"top\" mode=\"dark\" class=\"text-option-content\">{{ item.name }}</span>\n <mat-icon class=\"check-icon\"\n *ngIf=\"personForm.controls['userGroup'].value?.id == item.id\">check</mat-icon>\n </mat-option>\n </mat-select>\n <span [@inOutAnimation] (click)=\"personForm.get('userGroup').setValue('')\" class=\"pointer \" matSuffix\n aria-label=\"Clear\" *ngIf=\"personForm.get('userGroup').value && !getLoading$.value\">\n <mat-icon>close</mat-icon>\n </span>\n </mat-form-field>\n <mat-form-field *ngIf=\"optionFilterPersonDataGlobal.departments.length\"\n class=\"w-100 input-select-option mb-2\" qms-form qms-select-input>\n <mat-label>{{LANG.DEPARTMENT_UNIT}}</mat-label>\n <mat-select panelClass=\"qms-select-panel\" qms-select disableOptionCentering\n formControlName=\"department\">\n <mat-select-trigger>\n {{personForm.controls['department'].value?.name || ''}}\n </mat-select-trigger>\n <mat-option>\n <ngx-mat-select-search formControlName=\"departmentFilter\"\n [placeholderLabel]=\"LANG.DEPARTMENT_UNIT\" noEntriesFoundLabel=\"\">\n </ngx-mat-select-search>\n </mat-option>\n <mat-option class=\"opt-check-icon\" *ngFor=\"let item of filteredSearchTextBox.department.value\"\n [value]=\"item\">\n <span qms-elipsify mode=\"dark\" position=\"top\" class=\"text-option-content\">{{ item.name }}</span>\n <mat-icon class=\"check-icon\"\n *ngIf=\"personForm.controls['department'].value?.id == item.id\">check</mat-icon>\n </mat-option>\n </mat-select>\n <span (click)=\"setFormControlValue(['recursive','department'], [false,''])\" [@inOutAnimation]\n class=\"pointer\" matSuffix aria-label=\"Clear\"\n *ngIf=\"personForm.get('department').value && !getLoading$.value\">\n <mat-icon>close</mat-icon>\n </span>\n </mat-form-field>\n </div>\n\n <mat-slide-toggle [@inOutAnimation] *ngIf=\"personForm.controls['department'].value\"\n class=\"w-100 slide-toggle\" formControlName=\"recursive\" color=\"default\" qms-group-options>\n <span class=\"text-label\">{{LANG.INCLUDE_SUB_DEPARTMENTS}}</span>\n </mat-slide-toggle>\n\n <mat-form-field class=\"w-100 mb-2\" appearance=\"fill\" qms-form qms-search-field>\n <input matInput appearance=\"off\" [placeholder]=\"LANG.SEARCH_WITH_NAME\" formControlName=\"keyword\"\n type=\"text\" autocomplete=\"off\" />\n <button *ngIf=\"!getLoading$.value\" qms-btn-icon color=\"light\" [@inOutAnimation]\n (click)=\"onSearchPersonFreeText()\" class=\"pointer me-1\" matSuffix aria-label=\"Search\">\n <mat-icon>search</mat-icon>\n </button>\n <mat-progress-spinner [@inOutAnimation] *ngIf=\"getLoading$.value\" matSuffix mode=\"indeterminate\"\n diameter=\"20\"></mat-progress-spinner>\n <span [@inOutAnimation] (click)=\"personForm.get('keyword').setValue('')\"\n class=\"pointer btn-icon-clear d-flex justify-content-center align-items-center \" matSuffix\n aria-label=\"Clear\" *ngIf=\"personForm.get('keyword').value && !getLoading$.value\">\n <button qms-btn-icon color=\"light\">\n <mat-icon>close</mat-icon>\n </button>\n </span>\n </mat-form-field>\n <button (click)=\"onFilterPerson()\" qms-btn-outlined class=\"w-100 my-1\">\n {{LANG.FILTER}}\n </button>\n\n <div qms-scrollbar>\n <div class=\"item\">\n <mat-checkbox [@inOutAnimation]\n *ngIf=\"!getLoading$.value && personFiltered.length && !dialogData.modeSelectOnePerson\"\n [disabled]=\"isDisabledSelectAll(OPTION_ENUM.PERSON)\" #checkPerson class=\"w-100 mb-1 checkbox-all\"\n (click)=\"personFiltered.length && onCheckAll(OPTION_ENUM.PERSON,checkPerson)\"\n [checked]=\"isCheckAll(OPTION_ENUM.PERSON)\" [indeterminate]=\"isIndeterminate(OPTION_ENUM.PERSON)\"\n color=\"default\" qms-group-options>\n <span class=\"text-label header-title\">{{LANG.CHOOSE_ALL}} </span>\n <span>(<b>{{personFiltered.length}}</b>)</span>\n </mat-checkbox>\n </div>\n <mat-divider class=\"mx-auto\"></mat-divider>\n <ng-container *ngIf=\"getLoading$.value; then loading\">\n </ng-container>\n <div [@inOutAnimation] *ngIf=\"personFiltered.length && !getLoading$.value\" [@listAnimation]\n class=\"item-list-wrapper\">\n <div class=\"item mt-1\" [@inOutAnimation] *ngFor=\"let employee of personFiltered; trackBy: trackByFn\">\n <ng-container\n [ngTemplateOutlet]=\"dialogData.modeSelectOnePerson ?itemWithoutCheckboxTemplate : itemCheckboxTemplate\"\n [ngTemplateOutletContext]=\"{item: employee, type: OPTION_ENUM.PERSON}\">\n </ng-container>\n </div>\n </div>\n <div [@inOutAnimation] *ngIf=\"!personFiltered.length && !getLoading$.value\"\n class=\"item-list-wrapper no-result\">\n <ng-container *ngTemplateOutlet=\"noResult\"></ng-container>\n </div>\n <mat-divider class=\"mx-auto\"></mat-divider>\n <qms-paginator overlayPanelClass=\"select-access-paginator\" #pagingPerson\n *ngIf=\"getPerson$.value.length > 10\" [length]=\"getPerson$.value.length\" [numHidden]=\"0\"\n [pageSize]=\"getPerson$.value.pageSize\" [pageSizeOptions]=\"PAGE_SIZE_OPTION\"\n (page)='onPaginatorEvent($event, OPTION_ENUM.PERSON)' [size]='PAGINATION_SIZE.medium'>\n </qms-paginator>\n </div>\n </form>\n </ng-container>\n <ng-container *ngIf=\"optionSelect.value === OPTION_ENUM.USER_GROUP\">\n <div>\n <form (submit)=\"onFilterUserGroup()\">\n <mat-form-field class=\"w-100 mb-2\" qms-form qms-search-field>\n <input [formControl]=\"userGroupForm\" matInput type=\"text\" autocomplete=\"off\"\n placeholder=\"User group\" />\n <button [@inOutAnimation] *ngIf=\"!getLoading$.value\" type=\"submit\" qms-btn-icon color=\"light\"\n matSuffix>\n <mat-icon>search</mat-icon>\n </button>\n <mat-progress-spinner [@inOutAnimation] *ngIf=\"getLoading$.value\" matSuffix mode=\"indeterminate\"\n diameter=\"20\"></mat-progress-spinner>\n <div [@inOutAnimation] *ngIf=\"!!userGroupForm.value && !getLoading$.value\" matSuffix qms-input-clear>\n <button (click)=\"userGroupForm.setValue('')\" qms-btn-icon color=\"light\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n </mat-form-field>\n </form>\n <div qms-scrollbar>\n <div class=\"item\">\n <mat-checkbox [@inOutAnimation]\n *ngIf=\"!getLoading$.value && (userGroupFiltered.length && !dialogData.modeSelectOneUserGroup)\"\n [disabled]=\"isDisabledSelectAll(OPTION_ENUM.USER_GROUP)\" #checkUserGroup\n class=\"w-100 checkbox-all mb-1\" color=\"default\" [checked]=\"isCheckAll(OPTION_ENUM.USER_GROUP)\"\n [indeterminate]=\"isIndeterminate(OPTION_ENUM.USER_GROUP)\"\n (click)=\"userGroupFiltered.length && onCheckAll(OPTION_ENUM.USER_GROUP,checkUserGroup)\"\n qms-group-options>\n <span class=\"text-label header-title\">{{LANG.CHOOSE_ALL}}</span>\n <span>(<b>{{userGroupFiltered.length}}</b>)</span>\n </mat-checkbox>\n </div>\n <mat-divider class=\"mx-auto\"></mat-divider>\n <ng-container *ngIf=\"getLoading$.value;then loading\">\n </ng-container>\n <div *ngIf=\"userGroupFiltered.length && !getLoading$.value\" [@listAnimation] class=\"item-list-wrapper\">\n <div [@inOutAnimation] class=\"item mt-1\" *ngFor=\"let userGroup of userGroupFiltered\">\n <ng-container\n [ngTemplateOutlet]=\"dialogData.modeSelectOneUserGroup ? itemWithoutCheckboxTemplate : itemCheckboxTemplate\"\n [ngTemplateOutletContext]=\"{item: userGroup,type: OPTION_ENUM.USER_GROUP}\">\n </ng-container>\n </div>\n </div>\n <div [@inOutAnimation] *ngIf=\"!userGroupFiltered.length && !getLoading$.value\"\n class=\"item-list-wrapper no-result\">\n <ng-container *ngTemplateOutlet=\"noResult\"></ng-container>\n </div>\n <mat-divider class=\"mx-auto\"></mat-divider>\n <qms-paginator overlayPanelClass=\"select-access-paginator\" #pagingUserGroup class=\"my-1\"\n *ngIf=\"getUserGroup$.value.length > 10 \" [length]=\"getUserGroup$.value.length\" [numHidden]=\"0\"\n [pageSize]=\"getUserGroup$.value.pageSize\" [pageSizeOptions]=\"PAGE_SIZE_OPTION\"\n (page)='onPaginatorEvent($event, OPTION_ENUM.USER_GROUP)' [size]='PAGINATION_SIZE.medium'>\n </qms-paginator>\n </div>\n </div>\n </ng-container>\n <ng-container\n *ngIf=\"optionSelect.value === OPTION_ENUM.DEPARTMENT && getLoading$.value; then loading\"></ng-container>\n <ng-container *ngIf=\"optionSelect.value === OPTION_ENUM.DEPARTMENT && !getLoading$.value\"\n class=\"person-access\">\n <qms-select-department-tree #tree [rowsSkeleton]=\"8\" [config]=\"dialogData.treeDepartmentConfig\"\n [maxWidthNode]=\"dialogData.maxWidthNode\" (onSearchEvent)=\"onSearchDepartmentEvent.emit($event)\"\n (onValueChangeEvent)=\"onResultDepartmentChange($event)\"\n (selectionNodeChangeEvent)=\"onSelectionNodeDepartmentChange($event)\"\n (onPagingSearchEvent)=\"onPaginatorEvent($event, OPTION_ENUM.DEPARTMENT)\">\n </qms-select-department-tree>\n </ng-container>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"optionSelect.value !== null\" class=\"result-wrapper\">\n <div class=\"result-selected-container\">\n <div [@inOutAnimation] *ngIf=\"(options.length === 1) || (options.length > 1 && optionSelect.value !== null)\"\n class=\"header-title result-header\">\n <span>\n {{\n dialogData.titleResult || LANG.RESULTS}}\n <span *ngIf=\"options.length === 1 && hasItemSelected()\">\n ({{getResultTabActive().length}})\n </span>\n </span>\n </div>\n <div class=\"result-body\">\n <ng-container *ngIf=\"checkExistOptionSelect(OPTION_ENUM.PERSON)\"\n [ngTemplateOutlet]=\"options?.length == 1 ? listChip : viewResultCollapse\"\n [ngTemplateOutletContext]=\"{data:resultAccess.persons, type:OPTION_ENUM.PERSON, title:LANG.PERSON}\">\n </ng-container>\n <ng-container *ngIf=\"checkExistOptionSelect(OPTION_ENUM.USER_GROUP)\"\n [ngTemplateOutlet]=\"options?.length == 1 ? listChip : viewResultCollapse\"\n [ngTemplateOutletContext]=\"{data:resultAccess.userGroups, type:OPTION_ENUM.USER_GROUP, title:LANG.USER_GROUP}\">\n </ng-container>\n <ng-container *ngIf=\"checkExistOptionSelect(OPTION_ENUM.DEPARTMENT)\"\n [ngTemplateOutlet]=\"options?.length == 1 ? listChip : viewResultCollapse\"\n [ngTemplateOutletContext]=\"{data: resultAccess.departments, type:OPTION_ENUM.DEPARTMENT, title:LANG.DEPARTMENT}\">\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n\n</mat-dialog-content>\n<mat-dialog-actions align=\"end\">\n <mat-divider class=\"w-100 mb-3\"></mat-divider>\n <button class=\"me-2\" qms-btn-text mat-dialog-close>\n {{dialogData.cancelTitle || LANG.CANCEL}}\n </button>\n <button *ngIf=\"optionSelect.value !== null\"\n [disabled]=\"!hasItemSelected() && !dialogData.treeDepartmentConfig.canAddNullResult\" class=\"btn-add\"\n [class.qms-btn-disabled]=\"!hasItemSelected() && !dialogData.treeDepartmentConfig.canAddNullResult\"\n [mat-dialog-close]=\"resultAccess\" qms-btn>\n <span>{{dialogData.confirmTitle || LANG.ADD}}</span>\n </button>\n</mat-dialog-actions>\n\n<ng-template #noResult>\n <svg width=\"89\" height=\"130\" viewBox=\"0 0 89 88\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"white\" />\n <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"#0163B2\" fill-opacity=\"0.12\" />\n <path\n d=\"M44.5 56.6936L58.096 64.8996L54.488 49.4336L66.5 39.0276L50.682 37.6856L44.5 23.0996L38.318 37.6856L22.5 39.0276L34.512 49.4336L30.904 64.8996L44.5 56.6936Z\"\n fill=\"#0163B3\" />\n <text x=\"10\" y=\"105\" fill=\"#0163B2\">{{LANG.NO_RESULT}}</text>\n </svg>\n</ng-template>\n<ng-template #listChip let-data=\"data\" let-type=\"type\">\n <mat-chip-set [@inOutAnimation] *ngIf=\"data?.length\" class=\"panel__item qms-scrollbar\">\n <div [@inOutAnimation_2] *ngFor=\"let item of data; let i = index\">\n <mat-chip (click)=\"onScollToNodeTreeDepartment(item)\" [@updateItemAnimation]\n *qmsContentChanges=\"item.children?.length\" class=\"chip-item-result\" qms-chip [removable]=\"true\">\n <span qms-chip-body>\n <span [qms-tool-tip]=\"generateTooltip(item)\" position=\"top\" mode=\"dark\" class=\"text-label\">\n {{item.name}}\n <span *ngIf=\"item.subName\">({{ item.subName }})</span>\n </span>\n <span class=\"chip-item-children__count ms-1\" *ngIf=\"item?.children && item?.isGroup\">\n {{item.children.length}}/{{item.childCount}}\n </span>\n </span>\n\n <button matChipRemove *ngIf=\"allowRemove(type, item)\" (click)=\"onRemoveChip(type,item, i)\">\n <mat-icon class=\"remove-chip-icon\">cancel</mat-icon>\n <mat-icon *ngIf=\"allowRemove(type, item) && dialogData.formatMsgDisable\" position=\"top\" mode=\"dark\"\n [qms-tool-tip]=\"dialogData.formatMsgDisable(item)\" class=\"remove-chip-icon\">info_i</mat-icon>\n </button>\n <button matChipRemove *ngIf=\"!allowRemove(type, item) && dialogData.formatMsgDisable\"\n (click)=\"onRemoveChip(type,item, i)\">\n <mat-icon class=\"remove-chip-icon\">cancel</mat-icon>\n <mat-icon *ngIf=\"!allowRemove(type, item) && dialogData.formatMsgDisable\" position=\"top\" mode=\"dark\"\n [qms-tool-tip]=\"dialogData.formatMsgDisable(item)\" class=\"remove-chip-icon\">info_i</mat-icon>\n </button>\n </mat-chip>\n </div>\n </mat-chip-set>\n</ng-template>\n\n\n<ng-template #viewResultCollapse let-title=\"title\" let-data=\"data\" let-type=\"type\">\n <mat-expansion-panel qms-expansion [expanded]=\"optionSelect.value === type\">\n <mat-expansion-panel-header>\n <div class=\"title-content\">\n <div class=\"qms-list-text\">\n <div qms-line color=\"default-subtitle\">{{title}}\n <span class=\"fw-600\">\n ({{data?.length}})\n </span>\n </div>\n </div>\n </div>\n </mat-expansion-panel-header>\n <ng-container [ngTemplateOutlet]=\"listChip\" [ngTemplateOutletContext]=\"{data: data,type: type}\">\n </ng-container>\n </mat-expansion-panel>\n</ng-template>\n\n<ng-template #itemWithoutCheckboxTemplate let-item=\"item\" let-type=\"type\">\n <div (click)=\"onSelectItem(type,item)\" class=\"item-without-checkbox w-100\" [class.active]=\"item.selected\">\n <div class=\"item-content\">\n <div class=\"text-label\">\n <span class=\"text-label label-item fs-14 \">\n {{ item.name }}\n </span>\n <span *ngIf=\"item.subName\" class=\"ms-1 sub-label\">({{item.subName}})</span>\n </div>\n <small *ngIf=\"item.helpText\" class=\"text-help px-1 fs-12 sub-label\">{{ item.helpText }}</small>\n </div>\n <div class=\"item-state\">\n <mat-icon [@inOutAnimation] *ngIf=\"item.selected\">check</mat-icon>\n </div>\n </div>\n</ng-template>\n\n<ng-template #itemCheckboxTemplate let-item=\"item\" let-type=\"type\">\n <mat-checkbox [disabled]=\"!allowRemove(type, item)\" [checked]=\"item.selected\" (click)=\"onSelectItem(type,item)\"\n class=\"w-100\" color=\"default\" qms-group-options>\n <div class=\"text-label\">\n <span class=\"text-label label-item fs-14 \">\n {{ item.name }}\n </span>\n <span *ngIf=\"item.subName\" class=\"ms-1 sub-label\">({{item.subName}})</span>\n </div>\n <small *ngIf=\"item.helpText\" class=\"text-help px-1 fs-12 sub-label\">{{ item.helpText }}</small>\n </mat-checkbox>\n</ng-template>\n\n<ng-template #loading>\n <div class=\"qms-loading-container\">\n <div class=\"qms-loader\" *ngFor=\"let item of arrSkeleton\">\n <div class=\"qms-loader__wrapper\">\n <div class=\"row-loader\">\n </div>\n </div>\n </div>\n </div>\n</ng-template>", styles: ["@font-face{font-family:icomoon;src:url(/assets/fonts/icomoon.eot?aghldx);src:url(/assets/fonts/icomoon.eot?aghldx#iefix) format(\"embedded-opentype\"),url(/assets/fonts/icomoon.ttf?aghldx) format(\"truetype\"),url(/assets/fonts/icomoon.woff?aghldx) format(\"woff\"),url(/assets/fonts/icomoon.svg?aghldx#icomoon) format(\"svg\");font-weight:400;font-style:normal;font-display:block}[class^=icon-],[class*=\" icon-\"]{font-family:icomoon!important;speak:never;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-acutely-toxic .path1:before{content:\"\\e91b\";color:#e32730}.icon-acutely-toxic .path2:before{content:\"\\e922\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path3:before{content:\"\\e923\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path4:before{content:\"\\e924\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path5:before{content:\"\\e925\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path6:before{content:\"\\e926\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path7:before{content:\"\\e927\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path8:before{content:\"\\e928\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path9:before{content:\"\\e929\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path10:before{content:\"\\e92a\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path11:before{content:\"\\e92b\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path12:before{content:\"\\e92c\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path13:before{content:\"\\e92d\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path14:before{content:\"\\e92e\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path15:before{content:\"\\e92f\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path16:before{content:\"\\e930\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path17:before{content:\"\\e931\";margin-left:-1em;color:#323232}.icon-add-column:before{content:\"\\e932\"}.icon-add-tooltip:before{content:\"\\e933\"}.icon-admin:before{content:\"\\e934\"}.icon-annual-cycle:before{content:\"\\e935\"}.icon-assignment-repete:before{content:\"\\e936\"}.icon-barrier-add:before{content:\"\\e937\"}.icon-barrier-edit:before{content:\"\\e938\"}.icon-barrier-view:before{content:\"\\e939\"}.icon-button-group:before{content:\"\\e93a\"}.icon-chemical-manager:before{content:\"\\e93b\"}.icon-chronic-health-hazard .path1:before{content:\"\\e93c\";color:#e32730}.icon-chronic-health-hazard .path2:before{content:\"\\e93d\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path3:before{content:\"\\e93e\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path4:before{content:\"\\e93f\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path5:before{content:\"\\e940\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path6:before{content:\"\\e941\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path7:before{content:\"\\e942\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path8:before{content:\"\\e943\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path9:before{content:\"\\e944\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path10:before{content:\"\\e945\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path11:before{content:\"\\e946\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path12:before{content:\"\\e947\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path13:before{content:\"\\e948\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path14:before{content:\"\\e949\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path15:before{content:\"\\e94a\";margin-left:-1em;color:#323232}.icon-contingency:before{content:\"\\e94b\"}.icon-corrosive .path1:before{content:\"\\e94c\";color:#323232}.icon-corrosive .path2:before{content:\"\\e94d\";margin-left:-1em;color:#323232}.icon-corrosive .path3:before{content:\"\\e94e\";margin-left:-1em;color:#323232}.icon-corrosive .path4:before{content:\"\\e94f\";margin-left:-1em;color:#323232}.icon-corrosive .path5:before{content:\"\\e950\";margin-left:-1em;color:#323232}.icon-corrosive .path6:before{content:\"\\e951\";margin-left:-1em;color:#323232}.icon-corrosive .path7:before{content:\"\\e952\";margin-left:-1em;color:#323232}.icon-corrosive .path8:before{content:\"\\e953\";margin-left:-1em;color:#323232}.icon-corrosive .path9:before{content:\"\\e954\";margin-left:-1em;color:#323232}.icon-corrosive .path10:before{content:\"\\e955\";margin-left:-1em;color:#323232}.icon-corrosive .path11:before{content:\"\\e956\";margin-left:-1em;color:#323232}.icon-corrosive .path12:before{content:\"\\e957\";margin-left:-1em;color:#323232}.icon-corrosive .path13:before{content:\"\\e958\";margin-left:-1em;color:#323232}.icon-corrosive .path14:before{content:\"\\e959\";margin-left:-1em;color:#323232}.icon-corrosive .path15:before{content:\"\\e95a\";margin-left:-1em;color:#323232}.icon-corrosive .path16:before{content:\"\\e95b\";margin-left:-1em;color:#323232}.icon-corrosive .path17:before{content:\"\\e95c\";margin-left:-1em;color:#323232}.icon-corrosive .path18:before{content:\"\\e95d\";margin-left:-1em;color:#323232}.icon-corrosive .path19:before{content:\"\\e95e\";margin-left:-1em;color:#323232}.icon-corrosive .path20:before{content:\"\\e95f\";margin-left:-1em;color:#323232}.icon-corrosive .path21:before{content:\"\\e960\";margin-left:-1em;color:#e32730}.icon-dashboard:before{content:\"\\e961\"}.icon-database-sds:before{content:\"\\e962\"}.icon-description-add:before{content:\"\\e963\"}.icon-description-edit:before{content:\"\\e964\"}.icon-description-view:before{content:\"\\e965\";color:#666}.icon-document-read .path1:before{content:\"\\e966\";color:#000;opacity:.6}.icon-document-read .path2:before{content:\"\\e967\";margin-left:-1em;color:#fff}.icon-document-read .path3:before{content:\"\\e968\";margin-left:-1em;color:#000;opacity:.6}.icon-draft:before{content:\"\\e969\"}.icon-expired-off:before{content:\"\\e96a\"}.icon-expired-on:before{content:\"\\e96b\"}.icon-explosive .path1:before{content:\"\\e96c\";color:#e32730}.icon-explosive .path2:before{content:\"\\e96d\";margin-left:-1em;color:#323232}.icon-explosive .path3:before{content:\"\\e96e\";margin-left:-1em;color:#323232}.icon-explosive .path4:before{content:\"\\e96f\";margin-left:-1em;color:#323232}.icon-explosive .path5:before{content:\"\\e970\";margin-left:-1em;color:#323232}.icon-explosive .path6:before{content:\"\\e971\";margin-left:-1em;color:#323232}.icon-explosive .path7:before{content:\"\\e972\";margin-left:-1em;color:#323232}.icon-explosive .path8:before{content:\"\\e973\";margin-left:-1em;color:#323232}.icon-explosive .path9:before{content:\"\\e974\";margin-left:-1em;color:#323232}.icon-explosive .path10:before{content:\"\\e975\";margin-left:-1em;color:#323232}.icon-explosive .path11:before{content:\"\\e976\";margin-left:-1em;color:#323232}.icon-explosive .path12:before{content:\"\\e977\";margin-left:-1em;color:#323232}.icon-explosive .path13:before{content:\"\\e978\";margin-left:-1em;color:#323232}.icon-explosive .path14:before{content:\"\\e979\";margin-left:-1em;color:#323232}.icon-explosive .path15:before{content:\"\\e97a\";margin-left:-1em;color:#323232}.icon-explosive .path16:before{content:\"\\e97b\";margin-left:-1em;color:#323232}.icon-explosive .path17:before{content:\"\\e97c\";margin-left:-1em;color:#323232}.icon-explosive .path18:before{content:\"\\e97d\";margin-left:-1em;color:#323232}.icon-explosive .path19:before{content:\"\\e97e\";margin-left:-1em;color:#323232}.icon-explosive .path20:before{content:\"\\e97f\";margin-left:-1em;color:#323232}.icon-explosive .path21:before{content:\"\\e980\";margin-left:-1em;color:#323232}.icon-explosive .path22:before{content:\"\\e981\";margin-left:-1em;color:#323232}.icon-explosive .path23:before{content:\"\\e982\";margin-left:-1em;color:#323232}.icon-explosive .path24:before{content:\"\\e983\";margin-left:-1em;color:#323232}.icon-explosive .path25:before{content:\"\\e984\";margin-left:-1em;color:#323232}.icon-explosive .path26:before{content:\"\\e985\";margin-left:-1em;color:#323232}.icon-explosive .path27:before{content:\"\\e986\";margin-left:-1em;color:#323232}.icon-explosive .path28:before{content:\"\\e987\";margin-left:-1em;color:#323232}.icon-explosive .path29:before{content:\"\\e988\";margin-left:-1em;color:#323232}.icon-explosive .path30:before{content:\"\\e989\";margin-left:-1em;color:#323232}.icon-explosive .path31:before{content:\"\\e98a\";margin-left:-1em;color:#323232}.icon-explosive .path32:before{content:\"\\e98b\";margin-left:-1em;color:#323232}.icon-explosive .path33:before{content:\"\\e98c\";margin-left:-1em;color:#323232}.icon-explosive .path34:before{content:\"\\e98d\";margin-left:-1em;color:#323232}.icon-explosive .path35:before{content:\"\\e98e\";margin-left:-1em;color:#323232}.icon-explosive .path36:before{content:\"\\e98f\";margin-left:-1em;color:#323232}.icon-explosive .path37:before{content:\"\\e990\";margin-left:-1em;color:#323232}.icon-explosive .path38:before{content:\"\\e991\";margin-left:-1em;color:#323232}.icon-explosive .path39:before{content:\"\\e992\";margin-left:-1em;color:#323232}.icon-explosive .path40:before{content:\"\\e993\";margin-left:-1em;color:#323232}.icon-explosive .path41:before{content:\"\\e994\";margin-left:-1em;color:#323232}.icon-explosive .path42:before{content:\"\\e995\";margin-left:-1em;color:#323232}.icon-explosive .path43:before{content:\"\\e996\";margin-left:-1em;color:#323232}.icon-explosive .path44:before{content:\"\\e997\";margin-left:-1em;color:#323232}.icon-explosive .path45:before{content:\"\\e998\";margin-left:-1em;color:#323232}.icon-explosive .path46:before{content:\"\\e999\";margin-left:-1em;color:#323232}.icon-file-excel:before{content:\"\\e99a\"}.icon-file-pdf:before{content:\"\\e99b\"}.icon-file-pdf-verified .path1:before{content:\"\\e99c\";color:#000;opacity:.6}.icon-file-pdf-verified .path2:before{content:\"\\e99d\";margin-left:-1em;color:#fff}.icon-file-pdf-verified .path3:before{content:\"\\e99e\";margin-left:-1em;color:#000;opacity:.6}.icon-file-word:before{content:\"\\e99f\"}.icon-filter-alt:before{content:\"\\e9a0\"}.icon-flammable .path1:before{content:\"\\e9a1\";color:#323232}.icon-flammable .path2:before{content:\"\\e9a2\";margin-left:-1em;color:#323232}.icon-flammable .path3:before{content:\"\\e9a3\";margin-left:-1em;color:#e32730}.icon-gas-under-pressure .path1:before{content:\"\\e9a4\";color:#323232}.icon-gas-under-pressure .path2:before{content:\"\\e9a5\";margin-left:-1em;color:#e32730}.icon-health-hazard .path1:before{content:\"\\e9a6\";color:#323232}.icon-health-hazard .path2:before{content:\"\\e9a7\";margin-left:-1em;color:#e32730}.icon-line-break:before{content:\"\\e9a8\"}.icon-location:before{content:\"\\e9a9\"}.icon-measure-add:before{content:\"\\e9aa\"}.icon-measure-edit:before{content:\"\\e9ab\"}.icon-measure-view:before{content:\"\\e9ac\";color:#666}.icon-messages:before{content:\"\\e9ad\"}.icon-monitoring:before{content:\"\\e9ae\";color:#666}.icon-move:before{content:\"\\e9af\"}.icon-oxidizing .path1:before{content:\"\\e9b0\";color:#e32730}.icon-oxidizing .path2:before{content:\"\\e9b1\";margin-left:-1em;color:#323232}.icon-oxidizing .path3:before{content:\"\\e9b2\";margin-left:-1em;color:#323232}.icon-oxidizing .path4:before{content:\"\\e9b3\";margin-left:-1em;color:#323232}.icon-process-area-closed:before{content:\"\\e9b4\"}.icon-process-area-open:before{content:\"\\e9b5\"}.icon-process-linked .path1:before{content:\"\\e9b6\";color:#000;opacity:.6}.icon-process-linked .path2:before{content:\"\\e9b7\";margin-left:-1em;color:#666}.icon-risk:before{content:\"\\e9b8\"}.icon-search-in-file:before{content:\"\\e9b9\"}.icon-sort-ascending:before{content:\"\\e9ba\"}.icon-sort-descending:before{content:\"\\e9bb\"}.icon-subscript:before{content:\"\\e9bc\"}.icon-superscript:before{content:\"\\e9bd\"}.icon-syncronice-favorites:before{content:\"\\e9be\"}.icon-system-settings:before{content:\"\\e9bf\"}.icon-view-three-outlined:before{content:\"\\e9c0\"}.icon-workplace-safety:before{content:\"\\e9c1\"}.icon-checklist:before{content:\"\\e900\"}.icon-department-document .path1:before{content:\"\\e901\";color:#000;opacity:.6}.icon-department-document .path2:before{content:\"\\e902\";margin-left:-1em;color:#00804c}.icon-department-folder-closed .path1:before{content:\"\\e903\";color:#000;opacity:.6}.icon-department-folder-closed .path2:before{content:\"\\e904\";margin-left:-1em;color:#00804c}.icon-department-folder-open .path1:before{content:\"\\e905\";color:#000;opacity:.6}.icon-department-folder-open .path2:before{content:\"\\e906\";margin-left:-1em;color:#00804c}.icon-deviation:before{content:\"\\e907\"}.icon-dropdown-folder .path1:before{content:\"\\e908\";color:#00324e}.icon-dropdown-folder .path2:before{content:\"\\e909\";margin-left:-1em;color:#fff;opacity:.6}.icon-enterprise-document .path1:before{content:\"\\e90a\";color:#000;opacity:.6}.icon-enterprise-document .path2:before{content:\"\\e90b\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-closed .path1:before{content:\"\\e90c\";color:#000;opacity:.6}.icon-enterprise-folder-closed .path2:before{content:\"\\e90d\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-open .path1:before{content:\"\\e90e\";color:#000;opacity:.6}.icon-enterprise-folder-open .path2:before{content:\"\\e90f\";margin-left:-1em;color:#cf4714}.icon-folder-closed:before{content:\"\\e910\"}.icon-folder-open:before{content:\"\\e911\"}.icon-keyboard_arrow_down:before{content:\"\\e912\"}.icon-keyboard_arrow_up:before{content:\"\\e913\"}.icon-local-document .path1:before{content:\"\\e914\";color:#000;opacity:.6}.icon-local-document .path2:before{content:\"\\e915\";margin-left:-1em;color:#1954a9}.icon-local-folder-closed .path1:before{content:\"\\e916\";color:#000;opacity:.6}.icon-local-folder-closed .path2:before{content:\"\\e917\";margin-left:-1em;color:#1954a9}.icon-local-folder-open .path1:before{content:\"\\e918\";color:#000;opacity:.6}.icon-local-folder-open .path2:before{content:\"\\e919\";margin-left:-1em;color:#1954a9}.icon-process:before{content:\"\\e91a\"}.icon-regional-document .path1:before{content:\"\\e91c\";color:#000;opacity:.6}.icon-regional-document .path2:before{content:\"\\e91d\";margin-left:-1em;color:#662e0d}.icon-regional-folder-closed .path1:before{content:\"\\e91e\";color:#000;opacity:.6}.icon-regional-folder-closed .path2:before{content:\"\\e91f\";margin-left:-1em;color:#662e0d}.icon-regional-folder-open .path1:before{content:\"\\e920\";color:#000;opacity:.6}.icon-regional-folder-open .path2:before{content:\"\\e921\";margin-left:-1em;color:#662e0d}.select-access-paginator{max-height:150px!important}.mat-expansion-panel .mat-expansion-panel-body{padding-top:0!important}.mat-expansion-panel-header{font-weight:800!important}.mat-expansion-panel-header .title-content{font-size:12px!important}.w-100{width:100%}.h-100{height:100%}.pointer{cursor:pointer}.fw-600{font-weight:600}.label-item{font-weight:600;color:var(--ws-text-primary)}.sub-label{color:var(--ws-text-secondary)}.fs-14{font-size:14px}.fs-12{font-size:12px}.color-primary{color:var(--primary-light)!important}.header-title{font-weight:600;color:var(--ws-text-primary);font-size:16px}.chip-item-result.item-department .qms-chip-body{display:flex;justify-content:center;align-items:center}.remove-chip-icon{cursor:pointer}.remove-chip-icon:hover{color:#000000b3}.mat-form-field-wrapper{padding-bottom:8px!important}.mat-expansion-panel{border-radius:unset!important}.mat-expansion-panel-header:not([aria-disabled=true]){background:unset}.mat-expansion-panel.mat-expanded .mat-expansion-panel-header{background:#e5eefb}.mat-expansion-panel.mat-expanded .mat-expansion-panel-header .qms-line{color:var(--primary-light)!important}.access-dialog-header{display:flex;justify-content:space-between;align-items:center}.mat-chip-list-wrapper{margin:unset!important}.item-list-wrapper{height:40vh;padding:4px 4px 4px 0;overflow-y:auto}.item-list-wrapper.no-result{height:50vh;display:flex;justify-content:center;align-items:center}.item-list-wrapper .item{min-height:40px}.item-list-wrapper .item-without-checkbox{min-height:45px;display:flex;justify-content:space-between;align-items:center;padding:4px 8px;cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:4px;transition:background .3s ease}.item-list-wrapper .item-without-checkbox.active{background:var(--primary-light-12-opacity)}.item-list-wrapper .item-without-checkbox:hover{background:var(--primary-light-6-opacity)}.item-list-wrapper .item-without-checkbox .mat-icon{color:var(--primary-light)!important}.confirm__button__groups .btn-add>.qms-btn-wrapper{display:flex;justify-content:center;align-items:center}.qms-dialog-content{display:grid;column-gap:8px}.qms-dialog-content.active{grid-template-columns:2fr 1fr;min-height:50vh}.qms-dialog-content .access-dialog-wraper .field-select-option .mat-form-field-wrapper{padding-bottom:16px!important}.qms-dialog-content .access-dialog-wraper .field-select-option .mat-form-field-underline{bottom:16px!important}.qms-dialog-content .result-wrapper{position:relative;width:100%;margin-left:8px}.qms-dialog-content .result-wrapper:after{position:absolute;content:\"\";top:0;left:0;background-color:#0000001f;height:100%;width:1px}.qms-dialog-content .result-selected-container{position:absolute;inset:0;overflow-y:auto;padding:0 8px}.qms-dialog-content .result-selected-container .result-header{height:51px;display:flex;align-items:center;position:sticky;top:0;z-index:10;padding:0!important;background:#fff;margin-bottom:12px}.qms-dialog-content .result-selected-container .result-header:after{position:absolute;content:\"\";bottom:0;left:0;width:100%;height:1px;background:#0000000a}.qms-dialog-content .result-selected-container .result-header .mat-mdc-card-content{height:51px;width:100%;padding-left:4px;display:flex;align-items:center;background-color:#0000000a}.option-selected-content .group-filter-person-option{display:flex;flex-direction:row-reverse;justify-content:center;align-items:center;gap:8px}span.chip-item__content_name{display:inline-block;max-width:175px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}span.chip-item-children__count{font-size:.75rem;color:#00000080;font-weight:600}.mat-mdc-slide-toggle.qms-group-options{padding:unset!important}.input-option-filter .mat-form-field-wrapper{padding-bottom:8px!important}.input-option-filter .mat-form-field-underline{bottom:8px!important}.slide-toggle{margin-bottom:8px}.confirm__button__groups.none-option{margin-top:85px}.btn-icon-clear{position:relative;padding:0 1rem}.btn-icon-clear .qms-btn-icon{margin-right:unset!important}.btn-icon-clear:after{position:absolute;content:\"\";left:0;top:0;height:100%;width:1px;background:#0000004d}.qms-paginator .mat-mdc-paginator-container .qms-total-result{margin-bottom:0;margin-right:12px;height:100%;display:flex;align-items:center}.qms-paginator .mat-mdc-paginator-container .qms-total-result span{font-weight:600;color:#000c}.qms-paginator .mat-mdc-paginator-container .qms-paginator-range-actions{margin-bottom:0;column-gap:2px}.qms-paginator .mat-mdc-paginator-container .qms-paginator-range-actions>.qms-total-result{margin-bottom:0}.qms-paginator .qms-paginator-page-size{align-items:center}.qms-paginator .mat-form-field-wrapper{padding-bottom:0!important}.mat-mdc-checkbox.checkbox-all .mat-checkbox-label{flex-direction:row!important;align-items:center!important;column-gap:4px!important}.mat-expansion-panel.qms-expansion{margin:0!important}.access-department .qms-view-search-result{height:100%!important}.access-department .qms-view-search-result .result{max-height:calc(100% - 80px)!important}.access-department .loading-container{height:calc(100% - 40px)!important}.qms-loading-container{height:45vh;overflow:hidden;display:grid;grid-template-rows:repeat(60px)}.qms-loading-container .qms-loader{position:relative;width:100%;height:100%;padding:10px 0;overflow:hidden}.qms-loading-container .qms-loader:after{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;background:linear-gradient(110deg,#e9e9e900,#e3e3e300 40%,#e3e3e380 50%,#e3e3e300 60% 100%);animation:animate-loading 1.2s linear infinite}.qms-loading-container .qms-loader__wrapper{position:relative;width:100%;height:100%}.qms-loading-container .qms-loader__wrapper .row-loader{background-color:#eee;position:absolute;left:0;width:100%;height:40px;overflow:hidden}@keyframes animate-loading{0%{transform:translate(-100%)}to{transform:translate(100%)}}.btn-close-dialog.qms-btn-icon:focus:not(:hover){background-color:unset!important;color:unset!important}::ng-deep .mdc-evolution-chip__text-label.mat-mdc-chip-action-label{white-space:nowrap;width:225px;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i11.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i11.MatLabel, selector: "mat-label" }, { kind: "directive", type: i11.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: QMSSearchFieldDirective, selector: "mat-form-field[qms-search-field]", inputs: ["isLoading"] }, { kind: "directive", type: QMSInputClearDirective, selector: "[qms-input-clear]" }, { kind: "directive", type: QMSFormFieldDirective, selector: "[qms-form]" }, { kind: "directive", type: QMSGroupOptionDirective, selector: "[qms-group-options]", inputs: ["label"] }, { kind: "directive", type: AutocompleteOffDirective, selector: "[qms-group-options]" }, { kind: "directive", type: QMSInputChipDirective, selector: "mat-chip[qms-chip]", inputs: ["selected"] }, { kind: "directive", type: QMSChipBodyDirective, selector: "[qms-chip-body]" }, { kind: "directive", type: QMSScrollbarDirective, selector: "[qms-scrollbar]", inputs: ["isNoneBackground"] }, { kind: "directive", type: QMSToolTipRendererDirective, selector: "[qms-tool-tip]", inputs: ["showToolTip", "mode", "qms-tool-tip", "contentTemplate", "position"] }, { kind: "directive", type: EllipsifyDirective, selector: "[qms-elipsify]" }, { kind: "directive", type: QMSContentChangesDirective, selector: "[qmsContentChanges]", inputs: ["qmsContentChanges"] }, { kind: "component", type: i13.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i13.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i14.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i23$1.MatSelectSearchComponent, selector: "ngx-mat-select-search", inputs: ["placeholderLabel", "type", "closeIcon", "closeSvgIcon", "noEntriesFoundLabel", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toggleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti", "recreateValuesArray"], outputs: ["toggleAll"] }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: QMSButton, selector: "button[qms-btn], button[qms-btn-lg], button[qms-btn-outlined],\n button[qms-btn-outlined-lg], button[qms-btn-text], button[qms-btn-text-lg],\n button[qms-btn-fab],button[qms-btn-fab-sm],button[qms-btn-fab-ext],\n button[qms-btn-fab-outlined],button[qms-btn-fab-outlined-sm],button[qms-btn-fab-outlined-ext]", inputs: ["disabled", "color"], exportAs: ["qmsButton"] }, { kind: "component", type: QMSButtonIcon, selector: "button[qms-btn-icon]", inputs: ["disabled", "color", "active"], exportAs: ["qmsButtonIcon"] }, { kind: "component", type: i16.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i11$2.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled", "tabIndex"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: i11$2.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i11$2.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: i23.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i9.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i9.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "component", type: SelectDepartmentTreeComponent, selector: "qms-select-department-tree", inputs: ["rowsSkeleton", "height", "config", "maxWidthNode"], outputs: ["onSearchEvent", "onPagingSearchEvent", "onValueChangeEvent", "selectionNodeChangeEvent", "onCheckNodeEvent", "onExpandNodeEvent", "onLoadMoreEvent", "onCheckItemSearchEvent", "onCheckAllItemSearchEvent", "toggleIncludeChildEvent", "isPushingChildNodes"] }, { kind: "component", type: i17.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: QMSListLine, selector: "[qms-line]", inputs: ["size", "type", "color"] }, { kind: "directive", type: QMSListExpansion, selector: "[qms-expansion]" }, { kind: "component", type: QMSPaginatorComponent, selector: "qms-paginator", inputs: ["numHidden", "size", "pageSizeOptions", "pageSize", "length", "pageIndex", "overlayPanelClass"], outputs: ["page"] }], animations: [SelectAccessAnimationTrigger], encapsulation: i0.ViewEncapsulation.None }); }
|
|
38502
|
+
], viewQueries: [{ propertyName: "tree", first: true, predicate: ["tree"], descendants: true, read: SelectDepartmentTreeComponent }, { propertyName: "pagingPerson", first: true, predicate: ["pagingPerson"], descendants: true }, { propertyName: "pagingUserGroup", first: true, predicate: ["pagingUserGroup"], descendants: true }, { propertyName: "pagingDepartment", first: true, predicate: ["pagingDepartment"], descendants: true }], ngImport: i0, template: "<h3 mat-dialog-title class=\"more-action\">\n {{dialogData.titleDialog || LANG.SELECT_ACCESS}}\n <button matDialogClose class=\"close-btn\" qms-btn-icon color=\"light\">\n <mat-icon class=\"mat-icons-outlined\">close</mat-icon>\n </button>\n</h3>\n<mat-dialog-content>\n <div [class.active]=\"optionSelect.value !== null\" class=\"qms-dialog-content\">\n <div class=\"access-dialog-wraper\">\n <mat-form-field *ngIf=\"options.length > 1\" qms-form qms-select-input class=\"field-select-option w-100 mb-2\"\n appearance=\"fill\">\n <mat-label [attr.aria-label]=\"LANG.TYPE\" qms-select-input>{{LANG.TYPE}}</mat-label>\n <mat-select (selectionChange)=\"onSelectionTypeChange($event)\" [formControl]=\"optionSelect\" placeholder=\"Select\"\n disableOptionCentering #singleSelect panelClass=\"qms-select-panel\" qms-select>\n\n <mat-option *ngFor=\"let item of options\" [value]=\"item.type\">\n {{ LANG[item.displayName] }}\n </mat-option>\n </mat-select>\n </mat-form-field>\n <div class=\"body-dialog-container\">\n <div class=\"option-selected-content\">\n <ng-container *ngIf=\"optionSelect.value === OPTION_ENUM.PERSON\">\n <form *ngIf=\"personForm\" [formGroup]=\"personForm\">\n <div class=\"group-filter-person-option\">\n <mat-form-field *ngIf=\"optionFilterPersonDataGlobal.userGroups.length\" qms-form qms-select-input\n class=\"w-100 mb-2\" appearance=\"fill\">\n <mat-label [attr.aria-label]=\"LANG.ROLE\" qms-select-input>{{LANG.ROLE}}</mat-label>\n <mat-select panelClass=\"qms-select-panel\" qms-select formControlName=\"userGroup\"\n disableOptionCentering>\n <mat-select-trigger>\n {{personForm.controls['userGroup'].value?.name || ''}}\n </mat-select-trigger>\n <mat-option>\n <ngx-mat-select-search formControlName=\"userGroupFilter\" placeholderLabel=\"{{ LANG.ROLE }}\"\n noEntriesFoundLabel=\"\">\n </ngx-mat-select-search>\n </mat-option>\n <mat-option mode=\"dark\" class=\"opt-check-icon\"\n *ngFor=\"let item of filteredSearchTextBox.userGroup.value\" [value]=\"item\">\n <span qms-elipsify position=\"top\" mode=\"dark\" class=\"text-option-content\">{{ item.name }}</span>\n <mat-icon class=\"check-icon\"\n *ngIf=\"personForm.controls['userGroup'].value?.id == item.id\">check</mat-icon>\n </mat-option>\n </mat-select>\n <span [@inOutAnimation] (click)=\"personForm.get('userGroup').setValue('')\" class=\"pointer \" matSuffix\n aria-label=\"Clear\" *ngIf=\"personForm.get('userGroup').value && !getLoading$.value\">\n <mat-icon>close</mat-icon>\n </span>\n </mat-form-field>\n <mat-form-field *ngIf=\"optionFilterPersonDataGlobal.departments.length\"\n class=\"w-100 input-select-option mb-2\" qms-form qms-select-input>\n <mat-label [attr.aria-label]=\"LANG.DEPARTMENT_UNIT\">{{LANG.DEPARTMENT_UNIT}}</mat-label>\n <mat-select panelClass=\"qms-select-panel\" qms-select disableOptionCentering\n formControlName=\"department\">\n <mat-select-trigger>\n {{personForm.controls['department'].value?.name || ''}}\n </mat-select-trigger>\n <mat-option>\n <ngx-mat-select-search formControlName=\"departmentFilter\"\n [placeholderLabel]=\"LANG.DEPARTMENT_UNIT\" noEntriesFoundLabel=\"\">\n </ngx-mat-select-search>\n </mat-option>\n <mat-option class=\"opt-check-icon\" *ngFor=\"let item of filteredSearchTextBox.department.value\"\n [value]=\"item\">\n <span qms-elipsify mode=\"dark\" position=\"top\" class=\"text-option-content\">{{ item.name }}</span>\n <mat-icon class=\"check-icon\"\n *ngIf=\"personForm.controls['department'].value?.id == item.id\">check</mat-icon>\n </mat-option>\n </mat-select>\n <span (click)=\"setFormControlValue(['recursive','department'], [false,''])\" [@inOutAnimation]\n class=\"pointer\" matSuffix aria-label=\"Clear\"\n *ngIf=\"personForm.get('department').value && !getLoading$.value\">\n <mat-icon>close</mat-icon>\n </span>\n </mat-form-field>\n </div>\n\n <mat-slide-toggle [@inOutAnimation] *ngIf=\"personForm.controls['department'].value\"\n class=\"w-100 slide-toggle\" formControlName=\"recursive\" color=\"default\" qms-group-options>\n <span class=\"text-label\">{{LANG.INCLUDE_SUB_DEPARTMENTS}}</span>\n </mat-slide-toggle>\n\n <mat-form-field class=\"w-100 mb-2\" appearance=\"fill\" qms-form qms-search-field>\n <mat-label [attr.aria-label]=\"LANG.SEARCH_WITH_NAME\" class=\"visually-hidden\"\n qms-select-input>{{LANG.SEARCH_WITH_NAME}}</mat-label>\n <input matInput appearance=\"off\" placeholder=\"{{LANG.SEARCH_WITH_NAME}}\" formControlName=\"keyword\"\n type=\"text\" autocomplete=\"off\" />\n <button *ngIf=\"!getLoading$.value\" qms-btn-icon color=\"light\" [@inOutAnimation]\n (click)=\"onSearchPersonFreeText()\" class=\"pointer me-1\" matSuffix aria-label=\"Search\">\n <mat-icon>search</mat-icon>\n </button>\n <div matSuffix class=\"d-inline-block\">\n <mat-progress-spinner [@inOutAnimation] *ngIf=\"getLoading$.value\" mode=\"indeterminate\"\n diameter=\"20\"></mat-progress-spinner>\n </div>\n <button [@inOutAnimation] (click)=\"personForm.get('keyword').setValue('')\" matSuffix aria-label=\"Clear\"\n *ngIf=\"personForm.get('keyword').value && !getLoading$.value\">\n <mat-icon>close</mat-icon>\n </button>\n </mat-form-field>\n <button (click)=\"onFilterPerson()\" qms-btn-outlined class=\"w-100 my-1\">\n {{LANG.FILTER}}\n </button>\n\n <div qms-scrollbar>\n <div class=\"item\">\n <mat-checkbox [@inOutAnimation]\n *ngIf=\"!getLoading$.value && personFiltered.length && !dialogData.modeSelectOnePerson\"\n [disabled]=\"isDisabledSelectAll(OPTION_ENUM.PERSON)\" #checkPerson class=\"w-100 mb-1 checkbox-all\"\n (click)=\"personFiltered.length && onCheckAll(OPTION_ENUM.PERSON,checkPerson)\"\n [checked]=\"isCheckAll(OPTION_ENUM.PERSON)\" [indeterminate]=\"isIndeterminate(OPTION_ENUM.PERSON)\"\n color=\"default\" qms-group-options>\n <span class=\"text-label header-title\">{{LANG.CHOOSE_ALL}} (<b>{{personFiltered.length}}</b>)</span>\n </mat-checkbox>\n </div>\n <mat-divider class=\"mx-auto\"></mat-divider>\n <ng-container *ngIf=\"getLoading$.value; then loading\">\n </ng-container>\n <div [@inOutAnimation] *ngIf=\"personFiltered.length && !getLoading$.value\" [@listAnimation]\n class=\"item-list-wrapper\">\n <div class=\"item mt-1\" [@inOutAnimation] *ngFor=\"let employee of personFiltered; trackBy: trackByFn\">\n <ng-container\n [ngTemplateOutlet]=\"dialogData.modeSelectOnePerson ?itemWithoutCheckboxTemplate : itemCheckboxTemplate\"\n [ngTemplateOutletContext]=\"{item: employee, type: OPTION_ENUM.PERSON}\">\n </ng-container>\n </div>\n </div>\n <div [@inOutAnimation] *ngIf=\"!personFiltered.length && !getLoading$.value\"\n class=\"item-list-wrapper no-result\">\n <ng-container *ngTemplateOutlet=\"noResult\"></ng-container>\n </div>\n <mat-divider class=\"mx-auto\"></mat-divider>\n <qms-paginator overlayPanelClass=\"select-access-paginator\" #pagingPerson\n *ngIf=\"getPerson$.value.length > 10\" [length]=\"getPerson$.value.length\" [numHidden]=\"0\"\n [pageSize]=\"getPerson$.value.pageSize\" [pageSizeOptions]=\"PAGE_SIZE_OPTION\"\n (page)='onPaginatorEvent($event, OPTION_ENUM.PERSON)' [size]='PAGINATION_SIZE.medium'>\n </qms-paginator>\n </div>\n </form>\n </ng-container>\n <ng-container *ngIf=\"optionSelect.value === OPTION_ENUM.USER_GROUP\">\n <div>\n <form (submit)=\"onFilterUserGroup()\">\n <mat-form-field class=\"w-100 mb-2\" qms-form qms-search-field>\n <mat-label aria-label=\"User group\" class=\"visually-hidden\" qms-select-input>User group</mat-label>\n <input [formControl]=\"userGroupForm\" matInput type=\"text\" autocomplete=\"off\"\n placeholder=\"{{ LANG.SEARCH }}\" />\n <button [@inOutAnimation] *ngIf=\"!getLoading$.value\" type=\"submit\" qms-btn-icon color=\"light\"\n matSuffix>\n <mat-icon>search</mat-icon>\n </button>\n <div matSuffix class=\"d-inline-block\">\n <mat-progress-spinner [@inOutAnimation] *ngIf=\"getLoading$.value\" mode=\"indeterminate\"\n diameter=\"20\"></mat-progress-spinner>\n </div>\n <button matSuffix (click)=\"userGroupForm.setValue('')\" qms-btn-icon color=\"light\">\n <mat-icon>close</mat-icon>\n </button>\n </mat-form-field>\n </form>\n <div qms-scrollbar>\n <div class=\"item\">\n <mat-checkbox [@inOutAnimation]\n *ngIf=\"!getLoading$.value && (userGroupFiltered.length && !dialogData.modeSelectOneUserGroup)\"\n [disabled]=\"isDisabledSelectAll(OPTION_ENUM.USER_GROUP)\" #checkUserGroup\n class=\"w-100 checkbox-all mb-1\" color=\"default\" [checked]=\"isCheckAll(OPTION_ENUM.USER_GROUP)\"\n [indeterminate]=\"isIndeterminate(OPTION_ENUM.USER_GROUP)\"\n (click)=\"userGroupFiltered.length && onCheckAll(OPTION_ENUM.USER_GROUP,checkUserGroup)\"\n qms-group-options>\n <span class=\"text-label header-title\">{{LANG.CHOOSE_ALL}}\n (<b>{{userGroupFiltered.length}}</b>)</span>\n </mat-checkbox>\n </div>\n <mat-divider class=\"mx-auto\"></mat-divider>\n <ng-container *ngIf=\"getLoading$.value;then loading\">\n </ng-container>\n <div *ngIf=\"userGroupFiltered.length && !getLoading$.value\" [@listAnimation] class=\"item-list-wrapper\">\n <div [@inOutAnimation] class=\"item mt-1\" *ngFor=\"let userGroup of userGroupFiltered\">\n <ng-container\n [ngTemplateOutlet]=\"dialogData.modeSelectOneUserGroup ? itemWithoutCheckboxTemplate : itemCheckboxTemplate\"\n [ngTemplateOutletContext]=\"{item: userGroup,type: OPTION_ENUM.USER_GROUP}\">\n </ng-container>\n </div>\n </div>\n <div [@inOutAnimation] *ngIf=\"!userGroupFiltered.length && !getLoading$.value\"\n class=\"item-list-wrapper no-result\">\n <ng-container *ngTemplateOutlet=\"noResult\"></ng-container>\n </div>\n <mat-divider class=\"mx-auto\"></mat-divider>\n <qms-paginator overlayPanelClass=\"select-access-paginator\" #pagingUserGroup class=\"my-1\"\n *ngIf=\"getUserGroup$.value.length > 10 \" [length]=\"getUserGroup$.value.length\" [numHidden]=\"0\"\n [pageSize]=\"getUserGroup$.value.pageSize\" [pageSizeOptions]=\"PAGE_SIZE_OPTION\"\n (page)='onPaginatorEvent($event, OPTION_ENUM.USER_GROUP)' [size]='PAGINATION_SIZE.medium'>\n </qms-paginator>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"optionSelect.value === OPTION_ENUM.DEPARTMENT\">\n\n <ng-container *ngIf=\"!dialogData.isDepartmentPaging\">\n <qms-select-department-tree #tree [rowsSkeleton]=\"8\" [config]=\"dialogData.treeDepartmentConfig\"\n [maxWidthNode]=\"dialogData.maxWidthNode\" (onSearchEvent)=\"onSearchDepartmentEvent.emit($event)\"\n (onValueChangeEvent)=\"onResultDepartmentChange($event)\"\n (selectionNodeChangeEvent)=\"onSelectionNodeDepartmentChange($event)\"\n (onPagingSearchEvent)=\"onPaginatorEvent($event, OPTION_ENUM.DEPARTMENT)\">\n </qms-select-department-tree>\n </ng-container>\n\n <ng-container *ngIf=\"dialogData.isDepartmentPaging\">\n\n <form (ngSubmit)=\"onFilterDepartment()\">\n <mat-form-field class=\"w-100 mb-2\" qms-form qms-search-field>\n <mat-label aria-label=\"Department\" class=\"visually-hidden\" qms-select-input>Department</mat-label>\n <input [formControl]=\"departmentSearchForm\" matInput type=\"text\" autocomplete=\"off\"\n placeholder=\"{{ LANG.SEARCH }}\" />\n <button [@inOutAnimation] *ngIf=\"!getLoading$.value\" type=\"submit\" qms-btn-icon color=\"light\"\n matSuffix>\n <mat-icon>search</mat-icon>\n </button>\n <div matSuffix class=\"d-inline-block\">\n <mat-progress-spinner [@inOutAnimation] *ngIf=\"getLoading$.value\" mode=\"indeterminate\"\n diameter=\"20\"></mat-progress-spinner>\n </div>\n <div [@inOutAnimation] *ngIf=\"!!departmentSearchForm.value && !getLoading$.value\" matSuffix\n qms-input-clear>\n <button (click)=\"departmentSearchForm.setValue('')\" qms-btn-icon color=\"light\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n </mat-form-field>\n </form>\n\n <div qms-scrollbar>\n <div class=\"item\">\n <mat-checkbox [@inOutAnimation] *ngIf=\"!getLoading$.value && departmentFiltered.length\"\n [disabled]=\"isDisabledSelectAll(OPTION_ENUM.DEPARTMENT)\" #checkDepartment\n class=\"w-100 checkbox-all mb-1\" color=\"default\" [checked]=\"isCheckAll(OPTION_ENUM.DEPARTMENT)\"\n [indeterminate]=\"isIndeterminate(OPTION_ENUM.DEPARTMENT)\"\n (click)=\"departmentFiltered.length && onCheckAll(OPTION_ENUM.DEPARTMENT,checkDepartment)\"\n qms-group-options>\n <span class=\"text-label header-title\">{{LANG.CHOOSE_ALL}}\n (<b>{{departmentFiltered.length}}</b>)</span>\n </mat-checkbox>\n </div>\n <mat-divider class=\"mx-auto\"></mat-divider>\n <ng-container *ngIf=\"getLoading$.value;then loading\">\n </ng-container>\n <div *ngIf=\"departmentFiltered.length && !getLoading$.value\" [@listAnimation] class=\"item-list-wrapper\">\n <div [@inOutAnimation] class=\"item mt-1\" *ngFor=\"let item of departmentFiltered\">\n <ng-container [ngTemplateOutlet]=\"itemCheckboxTemplate\"\n [ngTemplateOutletContext]=\"{item: item,type: OPTION_ENUM.DEPARTMENT}\">\n </ng-container>\n </div>\n </div>\n <div [@inOutAnimation] *ngIf=\"!departmentFiltered.length && !getLoading$.value\"\n class=\"item-list-wrapper no-result\">\n <ng-container *ngTemplateOutlet=\"noResult\"></ng-container>\n </div>\n <mat-divider class=\"mx-auto\"></mat-divider>\n <qms-paginator overlayPanelClass=\"select-access-paginator\" #pagingDepartment class=\"my-1\"\n *ngIf=\"getDepartment$.value.length > 10 \" [length]=\"getDepartment$.value.length\" [numHidden]=\"0\"\n [pageSize]=\"getDepartment$.value.pageSize\" [pageSizeOptions]=\"PAGE_SIZE_OPTION\"\n (page)='onPaginatorEvent($event, OPTION_ENUM.DEPARTMENT)' [size]='PAGINATION_SIZE.medium'>\n </qms-paginator>\n </div>\n </ng-container>\n </ng-container>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"optionSelect.value !== null\" class=\"result-wrapper\">\n <div class=\"result-selected-container\">\n <div [@inOutAnimation] *ngIf=\"(options.length === 1) || (options.length > 1 && optionSelect.value !== null)\"\n class=\"header-title result-header\">\n <span>\n {{\n dialogData.titleResult || LANG.RESULTS}}\n <span *ngIf=\"options.length === 1 && hasItemSelected()\">\n ({{getResultTabActive().length}})\n </span>\n </span>\n </div>\n <div class=\"result-body\">\n <ng-container *ngIf=\"checkExistOptionSelect(OPTION_ENUM.PERSON)\"\n [ngTemplateOutlet]=\"options?.length == 1 ? listChip : viewResultCollapse\"\n [ngTemplateOutletContext]=\"{data:resultAccess.persons, type:OPTION_ENUM.PERSON, title:LANG.PERSON}\">\n </ng-container>\n <ng-container *ngIf=\"checkExistOptionSelect(OPTION_ENUM.USER_GROUP)\"\n [ngTemplateOutlet]=\"options?.length == 1 ? listChip : viewResultCollapse\"\n [ngTemplateOutletContext]=\"{data:resultAccess.userGroups, type:OPTION_ENUM.USER_GROUP, title:LANG.USER_GROUP}\">\n </ng-container>\n <ng-container *ngIf=\"checkExistOptionSelect(OPTION_ENUM.DEPARTMENT) && !dialogData.isDepartmentPaging\"\n [ngTemplateOutlet]=\"options?.length == 1 ? listChip : viewResultCollapse\"\n [ngTemplateOutletContext]=\"{data: resultAccess.departments || resultAccess.departmentsFlat, type:OPTION_ENUM.DEPARTMENT, title:LANG.DEPARTMENT}\">\n </ng-container>\n <ng-container *ngIf=\"checkExistOptionSelect(OPTION_ENUM.DEPARTMENT) && dialogData.isDepartmentPaging\"\n [ngTemplateOutlet]=\"options?.length == 1 ? listChip : viewResultCollapse\"\n [ngTemplateOutletContext]=\"{data: resultAccess.departmentsFlat, type:OPTION_ENUM.DEPARTMENT, title:LANG.DEPARTMENT}\">\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n\n</mat-dialog-content>\n<mat-dialog-actions align=\"end\">\n <mat-divider class=\"w-100 mb-3\"></mat-divider>\n <button class=\"me-2\" qms-btn-text mat-dialog-close>\n {{dialogData.cancelTitle || LANG.CANCEL}}\n </button>\n <button *ngIf=\"optionSelect.value !== null\"\n [disabled]=\"!hasItemSelected() && !dialogData.treeDepartmentConfig.canAddNullResult\" class=\"btn-add\"\n [class.qms-btn-disabled]=\"!hasItemSelected() && !dialogData.treeDepartmentConfig.canAddNullResult\"\n [mat-dialog-close]=\"resultAccess\" qms-btn>\n <span>{{dialogData.confirmTitle || LANG.ADD}}</span>\n </button>\n</mat-dialog-actions>\n\n<ng-template #noResult>\n <svg width=\"89\" height=\"130\" viewBox=\"0 0 89 88\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"white\" />\n <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"#0163B2\" fill-opacity=\"0.12\" />\n <path\n d=\"M44.5 56.6936L58.096 64.8996L54.488 49.4336L66.5 39.0276L50.682 37.6856L44.5 23.0996L38.318 37.6856L22.5 39.0276L34.512 49.4336L30.904 64.8996L44.5 56.6936Z\"\n fill=\"#0163B3\" />\n <text x=\"10\" y=\"105\" fill=\"#0163B2\">{{LANG.NO_RESULT}}</text>\n </svg>\n</ng-template>\n<ng-template #listChip let-data=\"data\" let-type=\"type\">\n <mat-chip-set [@inOutAnimation] *ngIf=\"data?.length\" class=\"panel__item qms-scrollbar\">\n <div [@inOutAnimation_2] *ngFor=\"let item of data; let i = index\">\n <mat-chip (click)=\"onScollToNodeTreeDepartment(item)\" [@updateItemAnimation]\n *qmsContentChanges=\"item.children?.length\" class=\"chip-item-result\" qms-chip [removable]=\"true\">\n <span qms-chip-body>\n <span [qms-tool-tip]=\"generateTooltip(item)\" position=\"top\" mode=\"dark\" class=\"text-label\">\n {{item.name}}\n <span *ngIf=\"item.subName\">({{ item.subName }})</span>\n </span>\n <span class=\"chip-item-children__count ms-1\" *ngIf=\"item?.children && item?.isGroup\">\n {{item.children.length}}/{{item.childCount}}\n </span>\n </span>\n\n <button matChipRemove *ngIf=\"allowRemove(type, item)\" (click)=\"onRemoveChip(type,item, i)\">\n <mat-icon class=\"remove-chip-icon\">cancel</mat-icon>\n <mat-icon *ngIf=\"allowRemove(type, item) && dialogData.formatMsgDisable\" position=\"top\" mode=\"dark\"\n [qms-tool-tip]=\"dialogData.formatMsgDisable(item)\" class=\"remove-chip-icon\">info_i</mat-icon>\n </button>\n <button matChipRemove *ngIf=\"!allowRemove(type, item) && dialogData.formatMsgDisable\"\n (click)=\"onRemoveChip(type,item, i)\">\n <mat-icon class=\"remove-chip-icon\">cancel</mat-icon>\n <mat-icon *ngIf=\"!allowRemove(type, item) && dialogData.formatMsgDisable\" position=\"top\" mode=\"dark\"\n [qms-tool-tip]=\"dialogData.formatMsgDisable(item)\" class=\"remove-chip-icon\">info_i</mat-icon>\n </button>\n </mat-chip>\n </div>\n </mat-chip-set>\n</ng-template>\n\n\n<ng-template #viewResultCollapse let-title=\"title\" let-data=\"data\" let-type=\"type\">\n <mat-expansion-panel qms-expansion [expanded]=\"optionSelect.value === type\">\n <mat-expansion-panel-header>\n <div class=\"title-content\">\n <div class=\"qms-list-text\">\n <div qms-line color=\"default-subtitle\">{{title}}\n <span class=\"fw-600\">\n ({{data?.length}})\n </span>\n </div>\n </div>\n </div>\n </mat-expansion-panel-header>\n <ng-container [ngTemplateOutlet]=\"listChip\" [ngTemplateOutletContext]=\"{data: data,type: type}\">\n </ng-container>\n </mat-expansion-panel>\n</ng-template>\n\n<ng-template #itemWithoutCheckboxTemplate let-item=\"item\" let-type=\"type\">\n <div (click)=\"onSelectItem(type,item)\" class=\"item-without-checkbox w-100\" [class.active]=\"item.selected\">\n <div class=\"item-content\">\n <div class=\"text-label\">\n <span class=\"text-label label-item fs-14 \">\n {{ item.name }}\n </span>\n <span *ngIf=\"item.subName\" class=\"ms-1 sub-label\">({{item.subName}})</span>\n </div>\n <small *ngIf=\"item.helpText\" class=\"text-help px-1 fs-12 sub-label\">{{ item.helpText }}</small>\n </div>\n <div class=\"item-state\">\n <mat-icon [@inOutAnimation] *ngIf=\"item.selected\">check</mat-icon>\n </div>\n </div>\n</ng-template>\n\n<ng-template #itemCheckboxTemplate let-item=\"item\" let-type=\"type\">\n <mat-checkbox [disabled]=\"!allowRemove(type, item)\" [checked]=\"item.selected\" (click)=\"onSelectItem(type,item)\"\n class=\"w-100\" color=\"default\" qms-group-options>\n <div class=\"text-label\">\n <span class=\"text-label label-item fs-14 \">\n {{ item.name }}\n </span>\n <span *ngIf=\"item.subName\" class=\"ms-1 sub-label\">({{item.subName}})</span>\n </div>\n <small *ngIf=\"item.helpText\" class=\"text-help px-1 fs-12 sub-label\">{{ item.helpText }}</small>\n </mat-checkbox>\n</ng-template>\n\n<ng-template #loading>\n <div class=\"qms-loading-container\">\n <div class=\"qms-loader\" *ngFor=\"let item of arrSkeleton\">\n <div class=\"qms-loader__wrapper\">\n <div class=\"row-loader\">\n </div>\n </div>\n </div>\n </div>\n</ng-template>", styles: ["@font-face{font-family:icomoon;src:url(/assets/fonts/icomoon.eot?aghldx);src:url(/assets/fonts/icomoon.eot?aghldx#iefix) format(\"embedded-opentype\"),url(/assets/fonts/icomoon.ttf?aghldx) format(\"truetype\"),url(/assets/fonts/icomoon.woff?aghldx) format(\"woff\"),url(/assets/fonts/icomoon.svg?aghldx#icomoon) format(\"svg\");font-weight:400;font-style:normal;font-display:block}[class^=icon-],[class*=\" icon-\"]{font-family:icomoon!important;speak:never;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-acutely-toxic .path1:before{content:\"\\e91b\";color:#e32730}.icon-acutely-toxic .path2:before{content:\"\\e922\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path3:before{content:\"\\e923\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path4:before{content:\"\\e924\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path5:before{content:\"\\e925\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path6:before{content:\"\\e926\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path7:before{content:\"\\e927\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path8:before{content:\"\\e928\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path9:before{content:\"\\e929\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path10:before{content:\"\\e92a\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path11:before{content:\"\\e92b\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path12:before{content:\"\\e92c\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path13:before{content:\"\\e92d\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path14:before{content:\"\\e92e\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path15:before{content:\"\\e92f\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path16:before{content:\"\\e930\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path17:before{content:\"\\e931\";margin-left:-1em;color:#323232}.icon-add-column:before{content:\"\\e932\"}.icon-add-tooltip:before{content:\"\\e933\"}.icon-admin:before{content:\"\\e934\"}.icon-annual-cycle:before{content:\"\\e935\"}.icon-assignment-repete:before{content:\"\\e936\"}.icon-barrier-add:before{content:\"\\e937\"}.icon-barrier-edit:before{content:\"\\e938\"}.icon-barrier-view:before{content:\"\\e939\"}.icon-button-group:before{content:\"\\e93a\"}.icon-chemical-manager:before{content:\"\\e93b\"}.icon-chronic-health-hazard .path1:before{content:\"\\e93c\";color:#e32730}.icon-chronic-health-hazard .path2:before{content:\"\\e93d\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path3:before{content:\"\\e93e\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path4:before{content:\"\\e93f\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path5:before{content:\"\\e940\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path6:before{content:\"\\e941\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path7:before{content:\"\\e942\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path8:before{content:\"\\e943\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path9:before{content:\"\\e944\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path10:before{content:\"\\e945\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path11:before{content:\"\\e946\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path12:before{content:\"\\e947\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path13:before{content:\"\\e948\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path14:before{content:\"\\e949\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path15:before{content:\"\\e94a\";margin-left:-1em;color:#323232}.icon-contingency:before{content:\"\\e94b\"}.icon-corrosive .path1:before{content:\"\\e94c\";color:#323232}.icon-corrosive .path2:before{content:\"\\e94d\";margin-left:-1em;color:#323232}.icon-corrosive .path3:before{content:\"\\e94e\";margin-left:-1em;color:#323232}.icon-corrosive .path4:before{content:\"\\e94f\";margin-left:-1em;color:#323232}.icon-corrosive .path5:before{content:\"\\e950\";margin-left:-1em;color:#323232}.icon-corrosive .path6:before{content:\"\\e951\";margin-left:-1em;color:#323232}.icon-corrosive .path7:before{content:\"\\e952\";margin-left:-1em;color:#323232}.icon-corrosive .path8:before{content:\"\\e953\";margin-left:-1em;color:#323232}.icon-corrosive .path9:before{content:\"\\e954\";margin-left:-1em;color:#323232}.icon-corrosive .path10:before{content:\"\\e955\";margin-left:-1em;color:#323232}.icon-corrosive .path11:before{content:\"\\e956\";margin-left:-1em;color:#323232}.icon-corrosive .path12:before{content:\"\\e957\";margin-left:-1em;color:#323232}.icon-corrosive .path13:before{content:\"\\e958\";margin-left:-1em;color:#323232}.icon-corrosive .path14:before{content:\"\\e959\";margin-left:-1em;color:#323232}.icon-corrosive .path15:before{content:\"\\e95a\";margin-left:-1em;color:#323232}.icon-corrosive .path16:before{content:\"\\e95b\";margin-left:-1em;color:#323232}.icon-corrosive .path17:before{content:\"\\e95c\";margin-left:-1em;color:#323232}.icon-corrosive .path18:before{content:\"\\e95d\";margin-left:-1em;color:#323232}.icon-corrosive .path19:before{content:\"\\e95e\";margin-left:-1em;color:#323232}.icon-corrosive .path20:before{content:\"\\e95f\";margin-left:-1em;color:#323232}.icon-corrosive .path21:before{content:\"\\e960\";margin-left:-1em;color:#e32730}.icon-dashboard:before{content:\"\\e961\"}.icon-database-sds:before{content:\"\\e962\"}.icon-description-add:before{content:\"\\e963\"}.icon-description-edit:before{content:\"\\e964\"}.icon-description-view:before{content:\"\\e965\";color:#666}.icon-document-read .path1:before{content:\"\\e966\";color:#000;opacity:.6}.icon-document-read .path2:before{content:\"\\e967\";margin-left:-1em;color:#fff}.icon-document-read .path3:before{content:\"\\e968\";margin-left:-1em;color:#000;opacity:.6}.icon-draft:before{content:\"\\e969\"}.icon-expired-off:before{content:\"\\e96a\"}.icon-expired-on:before{content:\"\\e96b\"}.icon-explosive .path1:before{content:\"\\e96c\";color:#e32730}.icon-explosive .path2:before{content:\"\\e96d\";margin-left:-1em;color:#323232}.icon-explosive .path3:before{content:\"\\e96e\";margin-left:-1em;color:#323232}.icon-explosive .path4:before{content:\"\\e96f\";margin-left:-1em;color:#323232}.icon-explosive .path5:before{content:\"\\e970\";margin-left:-1em;color:#323232}.icon-explosive .path6:before{content:\"\\e971\";margin-left:-1em;color:#323232}.icon-explosive .path7:before{content:\"\\e972\";margin-left:-1em;color:#323232}.icon-explosive .path8:before{content:\"\\e973\";margin-left:-1em;color:#323232}.icon-explosive .path9:before{content:\"\\e974\";margin-left:-1em;color:#323232}.icon-explosive .path10:before{content:\"\\e975\";margin-left:-1em;color:#323232}.icon-explosive .path11:before{content:\"\\e976\";margin-left:-1em;color:#323232}.icon-explosive .path12:before{content:\"\\e977\";margin-left:-1em;color:#323232}.icon-explosive .path13:before{content:\"\\e978\";margin-left:-1em;color:#323232}.icon-explosive .path14:before{content:\"\\e979\";margin-left:-1em;color:#323232}.icon-explosive .path15:before{content:\"\\e97a\";margin-left:-1em;color:#323232}.icon-explosive .path16:before{content:\"\\e97b\";margin-left:-1em;color:#323232}.icon-explosive .path17:before{content:\"\\e97c\";margin-left:-1em;color:#323232}.icon-explosive .path18:before{content:\"\\e97d\";margin-left:-1em;color:#323232}.icon-explosive .path19:before{content:\"\\e97e\";margin-left:-1em;color:#323232}.icon-explosive .path20:before{content:\"\\e97f\";margin-left:-1em;color:#323232}.icon-explosive .path21:before{content:\"\\e980\";margin-left:-1em;color:#323232}.icon-explosive .path22:before{content:\"\\e981\";margin-left:-1em;color:#323232}.icon-explosive .path23:before{content:\"\\e982\";margin-left:-1em;color:#323232}.icon-explosive .path24:before{content:\"\\e983\";margin-left:-1em;color:#323232}.icon-explosive .path25:before{content:\"\\e984\";margin-left:-1em;color:#323232}.icon-explosive .path26:before{content:\"\\e985\";margin-left:-1em;color:#323232}.icon-explosive .path27:before{content:\"\\e986\";margin-left:-1em;color:#323232}.icon-explosive .path28:before{content:\"\\e987\";margin-left:-1em;color:#323232}.icon-explosive .path29:before{content:\"\\e988\";margin-left:-1em;color:#323232}.icon-explosive .path30:before{content:\"\\e989\";margin-left:-1em;color:#323232}.icon-explosive .path31:before{content:\"\\e98a\";margin-left:-1em;color:#323232}.icon-explosive .path32:before{content:\"\\e98b\";margin-left:-1em;color:#323232}.icon-explosive .path33:before{content:\"\\e98c\";margin-left:-1em;color:#323232}.icon-explosive .path34:before{content:\"\\e98d\";margin-left:-1em;color:#323232}.icon-explosive .path35:before{content:\"\\e98e\";margin-left:-1em;color:#323232}.icon-explosive .path36:before{content:\"\\e98f\";margin-left:-1em;color:#323232}.icon-explosive .path37:before{content:\"\\e990\";margin-left:-1em;color:#323232}.icon-explosive .path38:before{content:\"\\e991\";margin-left:-1em;color:#323232}.icon-explosive .path39:before{content:\"\\e992\";margin-left:-1em;color:#323232}.icon-explosive .path40:before{content:\"\\e993\";margin-left:-1em;color:#323232}.icon-explosive .path41:before{content:\"\\e994\";margin-left:-1em;color:#323232}.icon-explosive .path42:before{content:\"\\e995\";margin-left:-1em;color:#323232}.icon-explosive .path43:before{content:\"\\e996\";margin-left:-1em;color:#323232}.icon-explosive .path44:before{content:\"\\e997\";margin-left:-1em;color:#323232}.icon-explosive .path45:before{content:\"\\e998\";margin-left:-1em;color:#323232}.icon-explosive .path46:before{content:\"\\e999\";margin-left:-1em;color:#323232}.icon-file-excel:before{content:\"\\e99a\"}.icon-file-pdf:before{content:\"\\e99b\"}.icon-file-pdf-verified .path1:before{content:\"\\e99c\";color:#000;opacity:.6}.icon-file-pdf-verified .path2:before{content:\"\\e99d\";margin-left:-1em;color:#fff}.icon-file-pdf-verified .path3:before{content:\"\\e99e\";margin-left:-1em;color:#000;opacity:.6}.icon-file-word:before{content:\"\\e99f\"}.icon-filter-alt:before{content:\"\\e9a0\"}.icon-flammable .path1:before{content:\"\\e9a1\";color:#323232}.icon-flammable .path2:before{content:\"\\e9a2\";margin-left:-1em;color:#323232}.icon-flammable .path3:before{content:\"\\e9a3\";margin-left:-1em;color:#e32730}.icon-gas-under-pressure .path1:before{content:\"\\e9a4\";color:#323232}.icon-gas-under-pressure .path2:before{content:\"\\e9a5\";margin-left:-1em;color:#e32730}.icon-health-hazard .path1:before{content:\"\\e9a6\";color:#323232}.icon-health-hazard .path2:before{content:\"\\e9a7\";margin-left:-1em;color:#e32730}.icon-line-break:before{content:\"\\e9a8\"}.icon-location:before{content:\"\\e9a9\"}.icon-measure-add:before{content:\"\\e9aa\"}.icon-measure-edit:before{content:\"\\e9ab\"}.icon-measure-view:before{content:\"\\e9ac\";color:#666}.icon-messages:before{content:\"\\e9ad\"}.icon-monitoring:before{content:\"\\e9ae\";color:#666}.icon-move:before{content:\"\\e9af\"}.icon-oxidizing .path1:before{content:\"\\e9b0\";color:#e32730}.icon-oxidizing .path2:before{content:\"\\e9b1\";margin-left:-1em;color:#323232}.icon-oxidizing .path3:before{content:\"\\e9b2\";margin-left:-1em;color:#323232}.icon-oxidizing .path4:before{content:\"\\e9b3\";margin-left:-1em;color:#323232}.icon-process-area-closed:before{content:\"\\e9b4\"}.icon-process-area-open:before{content:\"\\e9b5\"}.icon-process-linked .path1:before{content:\"\\e9b6\";color:#000;opacity:.6}.icon-process-linked .path2:before{content:\"\\e9b7\";margin-left:-1em;color:#666}.icon-risk:before{content:\"\\e9b8\"}.icon-search-in-file:before{content:\"\\e9b9\"}.icon-sort-ascending:before{content:\"\\e9ba\"}.icon-sort-descending:before{content:\"\\e9bb\"}.icon-subscript:before{content:\"\\e9bc\"}.icon-superscript:before{content:\"\\e9bd\"}.icon-syncronice-favorites:before{content:\"\\e9be\"}.icon-system-settings:before{content:\"\\e9bf\"}.icon-view-three-outlined:before{content:\"\\e9c0\"}.icon-workplace-safety:before{content:\"\\e9c1\"}.icon-checklist:before{content:\"\\e900\"}.icon-department-document .path1:before{content:\"\\e901\";color:#000;opacity:.6}.icon-department-document .path2:before{content:\"\\e902\";margin-left:-1em;color:#00804c}.icon-department-folder-closed .path1:before{content:\"\\e903\";color:#000;opacity:.6}.icon-department-folder-closed .path2:before{content:\"\\e904\";margin-left:-1em;color:#00804c}.icon-department-folder-open .path1:before{content:\"\\e905\";color:#000;opacity:.6}.icon-department-folder-open .path2:before{content:\"\\e906\";margin-left:-1em;color:#00804c}.icon-deviation:before{content:\"\\e907\"}.icon-dropdown-folder .path1:before{content:\"\\e908\";color:#00324e}.icon-dropdown-folder .path2:before{content:\"\\e909\";margin-left:-1em;color:#fff;opacity:.6}.icon-enterprise-document .path1:before{content:\"\\e90a\";color:#000;opacity:.6}.icon-enterprise-document .path2:before{content:\"\\e90b\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-closed .path1:before{content:\"\\e90c\";color:#000;opacity:.6}.icon-enterprise-folder-closed .path2:before{content:\"\\e90d\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-open .path1:before{content:\"\\e90e\";color:#000;opacity:.6}.icon-enterprise-folder-open .path2:before{content:\"\\e90f\";margin-left:-1em;color:#cf4714}.icon-folder-closed:before{content:\"\\e910\"}.icon-folder-open:before{content:\"\\e911\"}.icon-keyboard_arrow_down:before{content:\"\\e912\"}.icon-keyboard_arrow_up:before{content:\"\\e913\"}.icon-local-document .path1:before{content:\"\\e914\";color:#000;opacity:.6}.icon-local-document .path2:before{content:\"\\e915\";margin-left:-1em;color:#1954a9}.icon-local-folder-closed .path1:before{content:\"\\e916\";color:#000;opacity:.6}.icon-local-folder-closed .path2:before{content:\"\\e917\";margin-left:-1em;color:#1954a9}.icon-local-folder-open .path1:before{content:\"\\e918\";color:#000;opacity:.6}.icon-local-folder-open .path2:before{content:\"\\e919\";margin-left:-1em;color:#1954a9}.icon-process:before{content:\"\\e91a\"}.icon-regional-document .path1:before{content:\"\\e91c\";color:#000;opacity:.6}.icon-regional-document .path2:before{content:\"\\e91d\";margin-left:-1em;color:#662e0d}.icon-regional-folder-closed .path1:before{content:\"\\e91e\";color:#000;opacity:.6}.icon-regional-folder-closed .path2:before{content:\"\\e91f\";margin-left:-1em;color:#662e0d}.icon-regional-folder-open .path1:before{content:\"\\e920\";color:#000;opacity:.6}.icon-regional-folder-open .path2:before{content:\"\\e921\";margin-left:-1em;color:#662e0d}.select-access-paginator{max-height:150px!important}.mat-expansion-panel .mat-expansion-panel-body{padding-top:0!important}.mat-expansion-panel-header{font-weight:800!important}.mat-expansion-panel-header .title-content{font-size:12px!important}.w-100{width:100%}.h-100{height:100%}.pointer{cursor:pointer}.fw-600{font-weight:600}.label-item{font-weight:600;color:var(--ws-text-primary)}.sub-label{color:var(--ws-text-secondary)}.fs-14{font-size:14px}.fs-12{font-size:12px}.color-primary{color:var(--primary-light)!important}.header-title{font-weight:600;color:var(--ws-text-primary);font-size:16px}.mat-mdc-chip.chip-item-result{max-width:250px}.mat-mdc-chip.chip-item-result.item-department .qms-chip-body{display:flex;justify-content:center;align-items:center}.remove-chip-icon{cursor:pointer}.remove-chip-icon:hover{color:#000000b3}.mat-form-field-wrapper{padding-bottom:8px!important}.mat-expansion-panel{border-radius:unset!important}.mat-expansion-panel-header:not([aria-disabled=true]){background:unset}.mat-expansion-panel.mat-expanded .mat-expansion-panel-header{background:#e5eefb}.mat-expansion-panel.mat-expanded .mat-expansion-panel-header .qms-line{color:var(--primary-light)!important}.access-dialog-header{display:flex;justify-content:space-between;align-items:center}.mat-chip-list-wrapper{margin:unset!important}.item-list-wrapper{height:40vh;padding:4px 4px 4px 0;overflow-y:auto}.item-list-wrapper.no-result{height:50vh;display:flex;justify-content:center;align-items:center}.item-list-wrapper .item{min-height:40px}.item-list-wrapper .item-without-checkbox{min-height:45px;display:flex;justify-content:space-between;align-items:center;padding:4px 8px;cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:4px;transition:background .3s ease}.item-list-wrapper .item-without-checkbox.active{background:var(--primary-light-12-opacity)}.item-list-wrapper .item-without-checkbox:hover{background:var(--primary-light-6-opacity)}.item-list-wrapper .item-without-checkbox .mat-icon{color:var(--primary-light)!important}.confirm__button__groups .btn-add>.qms-btn-wrapper{display:flex;justify-content:center;align-items:center}.qms-dialog-content{display:grid;column-gap:8px}.qms-dialog-content.active{grid-template-columns:2fr 1fr;min-height:50vh}.qms-dialog-content .access-dialog-wraper .field-select-option .mat-form-field-wrapper{padding-bottom:16px!important}.qms-dialog-content .access-dialog-wraper .field-select-option .mat-form-field-underline{bottom:16px!important}.qms-dialog-content .result-wrapper{position:relative;width:100%;margin-left:8px}.qms-dialog-content .result-wrapper:after{position:absolute;content:\"\";top:0;left:0;background-color:#0000001f;height:100%;width:1px}.qms-dialog-content .result-selected-container{position:absolute;inset:0;overflow-y:auto;padding:0 8px}.qms-dialog-content .result-selected-container .result-header{height:51px;display:flex;align-items:center;position:sticky;top:0;z-index:10;padding:0!important;background:#fff;margin-bottom:12px}.qms-dialog-content .result-selected-container .result-header:after{position:absolute;content:\"\";bottom:0;left:0;width:100%;height:1px;background:#0000000a}.qms-dialog-content .result-selected-container .result-header .mat-mdc-card-content{height:51px;width:100%;padding-left:4px;display:flex;align-items:center;background-color:#0000000a}.option-selected-content .group-filter-person-option{display:flex;flex-direction:row-reverse;justify-content:center;align-items:center;gap:8px}span.chip-item__content_name{display:inline-block;max-width:175px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}span.chip-item-children__count{font-size:.75rem;color:#00000080;font-weight:600}.mat-mdc-slide-toggle.qms-group-options{padding:unset!important}.input-option-filter .mat-form-field-wrapper{padding-bottom:8px!important}.input-option-filter .mat-form-field-underline{bottom:8px!important}.slide-toggle{margin-bottom:8px}.confirm__button__groups.none-option{margin-top:85px}.btn-icon-clear{position:relative;padding:0 1rem}.btn-icon-clear .qms-btn-icon{margin-right:unset!important}.btn-icon-clear:after{position:absolute;content:\"\";left:0;top:0;height:100%;width:1px;background:#0000004d}.qms-paginator .mat-mdc-paginator-container .qms-total-result{margin-bottom:0;margin-right:12px;height:100%;display:flex;align-items:center}.qms-paginator .mat-mdc-paginator-container .qms-total-result span{font-weight:600;color:#000c}.qms-paginator .mat-mdc-paginator-container .qms-paginator-range-actions{margin-bottom:0;column-gap:2px}.qms-paginator .mat-mdc-paginator-container .qms-paginator-range-actions>.qms-total-result{margin-bottom:0}.qms-paginator .qms-paginator-page-size{align-items:center}.qms-paginator .mat-form-field-wrapper{padding-bottom:0!important}.mat-mdc-checkbox.checkbox-all .mat-checkbox-label{flex-direction:row!important;align-items:center!important;column-gap:4px!important}.mat-expansion-panel.qms-expansion{margin:0!important}.access-department .qms-view-search-result{height:100%!important}.access-department .qms-view-search-result .result{max-height:calc(100% - 80px)!important}.access-department .loading-container{height:calc(100% - 40px)!important}.qms-loading-container{height:45vh;overflow:hidden;display:grid;grid-template-rows:repeat(60px)}.qms-loading-container .qms-loader{position:relative;width:100%;height:100%;padding:10px 0;overflow:hidden}.qms-loading-container .qms-loader:after{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;background:linear-gradient(110deg,#e9e9e900,#e3e3e300 40%,#e3e3e380 50%,#e3e3e300 60% 100%);animation:animate-loading 1.2s linear infinite}.qms-loading-container .qms-loader__wrapper{position:relative;width:100%;height:100%}.qms-loading-container .qms-loader__wrapper .row-loader{background-color:#eee;position:absolute;left:0;width:100%;height:40px;overflow:hidden}@keyframes animate-loading{0%{transform:translate(-100%)}to{transform:translate(100%)}}.btn-close-dialog.qms-btn-icon:focus:not(:hover){background-color:unset!important;color:unset!important}.mdc-evolution-chip-set .mat-mdc-standard-chip .mdc-evolution-chip__cell--primary,.mdc-evolution-chip-set .mat-mdc-standard-chip .mdc-evolution-chip__action--primary,.mdc-evolution-chip-set .mat-mdc-standard-chip .mat-mdc-chip-action-label{overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i11.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i11.MatLabel, selector: "mat-label" }, { kind: "directive", type: i11.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: QMSSearchFieldDirective, selector: "mat-form-field[qms-search-field]", inputs: ["isLoading"] }, { kind: "directive", type: QMSInputClearDirective, selector: "[qms-input-clear]" }, { kind: "directive", type: QMSFormFieldDirective, selector: "[qms-form]" }, { kind: "directive", type: QMSGroupOptionDirective, selector: "[qms-group-options]", inputs: ["label"] }, { kind: "directive", type: AutocompleteOffDirective, selector: "[qms-group-options]" }, { kind: "directive", type: QMSInputChipDirective, selector: "mat-chip[qms-chip]", inputs: ["selected"] }, { kind: "directive", type: QMSChipBodyDirective, selector: "[qms-chip-body]" }, { kind: "directive", type: QMSScrollbarDirective, selector: "[qms-scrollbar]", inputs: ["isNoneBackground"] }, { kind: "directive", type: QMSToolTipRendererDirective, selector: "[qms-tool-tip]", inputs: ["showToolTip", "mode", "qms-tool-tip", "contentTemplate", "position"] }, { kind: "directive", type: EllipsifyDirective, selector: "[qms-elipsify]" }, { kind: "directive", type: QMSContentChangesDirective, selector: "[qmsContentChanges]", inputs: ["qmsContentChanges"] }, { kind: "component", type: i13.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i13.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i14.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i23$1.MatSelectSearchComponent, selector: "ngx-mat-select-search", inputs: ["placeholderLabel", "type", "closeIcon", "closeSvgIcon", "noEntriesFoundLabel", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toggleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti", "recreateValuesArray"], outputs: ["toggleAll"] }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: QMSButton, selector: "button[qms-btn], button[qms-btn-lg], button[qms-btn-outlined],\n button[qms-btn-outlined-lg], button[qms-btn-text], button[qms-btn-text-lg],\n button[qms-btn-fab],button[qms-btn-fab-sm],button[qms-btn-fab-ext],\n button[qms-btn-fab-outlined],button[qms-btn-fab-outlined-sm],button[qms-btn-fab-outlined-ext]", inputs: ["disabled", "color"], exportAs: ["qmsButton"] }, { kind: "component", type: QMSButtonIcon, selector: "button[qms-btn-icon]", inputs: ["disabled", "color", "active"], exportAs: ["qmsButtonIcon"] }, { kind: "component", type: i16.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i11$2.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled", "tabIndex"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: i11$2.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i11$2.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: i23.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i9.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i9.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "component", type: SelectDepartmentTreeComponent, selector: "qms-select-department-tree", inputs: ["rowsSkeleton", "height", "config", "maxWidthNode"], outputs: ["onSearchEvent", "onPagingSearchEvent", "onValueChangeEvent", "selectionNodeChangeEvent", "onCheckNodeEvent", "onExpandNodeEvent", "onLoadMoreEvent", "onCheckItemSearchEvent", "onCheckAllItemSearchEvent", "toggleIncludeChildEvent", "isPushingChildNodes"] }, { kind: "component", type: i17.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: QMSListLine, selector: "[qms-line]", inputs: ["size", "type", "color"] }, { kind: "directive", type: QMSListExpansion, selector: "[qms-expansion]" }, { kind: "component", type: QMSPaginatorComponent, selector: "qms-paginator", inputs: ["numHidden", "size", "pageSizeOptions", "pageSize", "length", "pageIndex", "overlayPanelClass"], outputs: ["page"] }], animations: [SelectAccessAnimationTrigger], encapsulation: i0.ViewEncapsulation.None }); }
|
|
38431
38503
|
}
|
|
38432
38504
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: QMSSelectAccessDialogComponent, decorators: [{
|
|
38433
38505
|
type: Component,
|
|
@@ -38438,7 +38510,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
38438
38510
|
clickAction: 'noop'
|
|
38439
38511
|
}
|
|
38440
38512
|
}
|
|
38441
|
-
], encapsulation: ViewEncapsulation.None, template: "<h3 mat-dialog-title class=\"more-action\">\n {{dialogData.titleDialog || LANG.SELECT_ACCESS}}\n <button matDialogClose class=\"close-btn\" qms-btn-icon color=\"light\">\n <mat-icon class=\"mat-icons-outlined\">close</mat-icon>\n </button>\n</h3>\n<mat-dialog-content>\n <div [class.active]=\"optionSelect.value !== null\" class=\"qms-dialog-content\">\n <div class=\"access-dialog-wraper\">\n <mat-form-field *ngIf=\"options.length > 1\" qms-form qms-select-input class=\"field-select-option w-100 mb-2\"\n appearance=\"fill\">\n <mat-label qms-select-input>{{LANG.TYPE}}</mat-label>\n <mat-select (selectionChange)=\"onSelectionTypeChange($event)\" [formControl]=\"optionSelect\" placeholder=\"Select\"\n disableOptionCentering #singleSelect panelClass=\"qms-select-panel\" qms-select>\n\n <mat-option *ngFor=\"let item of options\" [value]=\"item.type\">\n {{ LANG[item.displayName] }}\n </mat-option>\n </mat-select>\n </mat-form-field>\n <div class=\"body-dialog-container\">\n <div class=\"option-selected-content\">\n <ng-container *ngIf=\"optionSelect.value === OPTION_ENUM.PERSON\">\n <form *ngIf=\"personForm\" [formGroup]=\"personForm\">\n <div class=\"group-filter-person-option\">\n <mat-form-field *ngIf=\"optionFilterPersonDataGlobal.userGroups.length\" qms-form qms-select-input\n class=\"w-100 mb-2\" appearance=\"fill\">\n <mat-label qms-select-input>{{LANG.ROLE}}</mat-label>\n <mat-select panelClass=\"qms-select-panel\" qms-select formControlName=\"userGroup\"\n disableOptionCentering>\n <mat-select-trigger>\n {{personForm.controls['userGroup'].value?.name || ''}}\n </mat-select-trigger>\n <mat-option>\n <ngx-mat-select-search formControlName=\"userGroupFilter\" placeholderLabel=\"{{ LANG.ROLE }}\"\n noEntriesFoundLabel=\"\">\n </ngx-mat-select-search>\n </mat-option>\n <mat-option mode=\"dark\" class=\"opt-check-icon\"\n *ngFor=\"let item of filteredSearchTextBox.userGroup.value\" [value]=\"item\">\n <span qms-elipsify position=\"top\" mode=\"dark\" class=\"text-option-content\">{{ item.name }}</span>\n <mat-icon class=\"check-icon\"\n *ngIf=\"personForm.controls['userGroup'].value?.id == item.id\">check</mat-icon>\n </mat-option>\n </mat-select>\n <span [@inOutAnimation] (click)=\"personForm.get('userGroup').setValue('')\" class=\"pointer \" matSuffix\n aria-label=\"Clear\" *ngIf=\"personForm.get('userGroup').value && !getLoading$.value\">\n <mat-icon>close</mat-icon>\n </span>\n </mat-form-field>\n <mat-form-field *ngIf=\"optionFilterPersonDataGlobal.departments.length\"\n class=\"w-100 input-select-option mb-2\" qms-form qms-select-input>\n <mat-label>{{LANG.DEPARTMENT_UNIT}}</mat-label>\n <mat-select panelClass=\"qms-select-panel\" qms-select disableOptionCentering\n formControlName=\"department\">\n <mat-select-trigger>\n {{personForm.controls['department'].value?.name || ''}}\n </mat-select-trigger>\n <mat-option>\n <ngx-mat-select-search formControlName=\"departmentFilter\"\n [placeholderLabel]=\"LANG.DEPARTMENT_UNIT\" noEntriesFoundLabel=\"\">\n </ngx-mat-select-search>\n </mat-option>\n <mat-option class=\"opt-check-icon\" *ngFor=\"let item of filteredSearchTextBox.department.value\"\n [value]=\"item\">\n <span qms-elipsify mode=\"dark\" position=\"top\" class=\"text-option-content\">{{ item.name }}</span>\n <mat-icon class=\"check-icon\"\n *ngIf=\"personForm.controls['department'].value?.id == item.id\">check</mat-icon>\n </mat-option>\n </mat-select>\n <span (click)=\"setFormControlValue(['recursive','department'], [false,''])\" [@inOutAnimation]\n class=\"pointer\" matSuffix aria-label=\"Clear\"\n *ngIf=\"personForm.get('department').value && !getLoading$.value\">\n <mat-icon>close</mat-icon>\n </span>\n </mat-form-field>\n </div>\n\n <mat-slide-toggle [@inOutAnimation] *ngIf=\"personForm.controls['department'].value\"\n class=\"w-100 slide-toggle\" formControlName=\"recursive\" color=\"default\" qms-group-options>\n <span class=\"text-label\">{{LANG.INCLUDE_SUB_DEPARTMENTS}}</span>\n </mat-slide-toggle>\n\n <mat-form-field class=\"w-100 mb-2\" appearance=\"fill\" qms-form qms-search-field>\n <input matInput appearance=\"off\" [placeholder]=\"LANG.SEARCH_WITH_NAME\" formControlName=\"keyword\"\n type=\"text\" autocomplete=\"off\" />\n <button *ngIf=\"!getLoading$.value\" qms-btn-icon color=\"light\" [@inOutAnimation]\n (click)=\"onSearchPersonFreeText()\" class=\"pointer me-1\" matSuffix aria-label=\"Search\">\n <mat-icon>search</mat-icon>\n </button>\n <mat-progress-spinner [@inOutAnimation] *ngIf=\"getLoading$.value\" matSuffix mode=\"indeterminate\"\n diameter=\"20\"></mat-progress-spinner>\n <span [@inOutAnimation] (click)=\"personForm.get('keyword').setValue('')\"\n class=\"pointer btn-icon-clear d-flex justify-content-center align-items-center \" matSuffix\n aria-label=\"Clear\" *ngIf=\"personForm.get('keyword').value && !getLoading$.value\">\n <button qms-btn-icon color=\"light\">\n <mat-icon>close</mat-icon>\n </button>\n </span>\n </mat-form-field>\n <button (click)=\"onFilterPerson()\" qms-btn-outlined class=\"w-100 my-1\">\n {{LANG.FILTER}}\n </button>\n\n <div qms-scrollbar>\n <div class=\"item\">\n <mat-checkbox [@inOutAnimation]\n *ngIf=\"!getLoading$.value && personFiltered.length && !dialogData.modeSelectOnePerson\"\n [disabled]=\"isDisabledSelectAll(OPTION_ENUM.PERSON)\" #checkPerson class=\"w-100 mb-1 checkbox-all\"\n (click)=\"personFiltered.length && onCheckAll(OPTION_ENUM.PERSON,checkPerson)\"\n [checked]=\"isCheckAll(OPTION_ENUM.PERSON)\" [indeterminate]=\"isIndeterminate(OPTION_ENUM.PERSON)\"\n color=\"default\" qms-group-options>\n <span class=\"text-label header-title\">{{LANG.CHOOSE_ALL}} </span>\n <span>(<b>{{personFiltered.length}}</b>)</span>\n </mat-checkbox>\n </div>\n <mat-divider class=\"mx-auto\"></mat-divider>\n <ng-container *ngIf=\"getLoading$.value; then loading\">\n </ng-container>\n <div [@inOutAnimation] *ngIf=\"personFiltered.length && !getLoading$.value\" [@listAnimation]\n class=\"item-list-wrapper\">\n <div class=\"item mt-1\" [@inOutAnimation] *ngFor=\"let employee of personFiltered; trackBy: trackByFn\">\n <ng-container\n [ngTemplateOutlet]=\"dialogData.modeSelectOnePerson ?itemWithoutCheckboxTemplate : itemCheckboxTemplate\"\n [ngTemplateOutletContext]=\"{item: employee, type: OPTION_ENUM.PERSON}\">\n </ng-container>\n </div>\n </div>\n <div [@inOutAnimation] *ngIf=\"!personFiltered.length && !getLoading$.value\"\n class=\"item-list-wrapper no-result\">\n <ng-container *ngTemplateOutlet=\"noResult\"></ng-container>\n </div>\n <mat-divider class=\"mx-auto\"></mat-divider>\n <qms-paginator overlayPanelClass=\"select-access-paginator\" #pagingPerson\n *ngIf=\"getPerson$.value.length > 10\" [length]=\"getPerson$.value.length\" [numHidden]=\"0\"\n [pageSize]=\"getPerson$.value.pageSize\" [pageSizeOptions]=\"PAGE_SIZE_OPTION\"\n (page)='onPaginatorEvent($event, OPTION_ENUM.PERSON)' [size]='PAGINATION_SIZE.medium'>\n </qms-paginator>\n </div>\n </form>\n </ng-container>\n <ng-container *ngIf=\"optionSelect.value === OPTION_ENUM.USER_GROUP\">\n <div>\n <form (submit)=\"onFilterUserGroup()\">\n <mat-form-field class=\"w-100 mb-2\" qms-form qms-search-field>\n <input [formControl]=\"userGroupForm\" matInput type=\"text\" autocomplete=\"off\"\n placeholder=\"User group\" />\n <button [@inOutAnimation] *ngIf=\"!getLoading$.value\" type=\"submit\" qms-btn-icon color=\"light\"\n matSuffix>\n <mat-icon>search</mat-icon>\n </button>\n <mat-progress-spinner [@inOutAnimation] *ngIf=\"getLoading$.value\" matSuffix mode=\"indeterminate\"\n diameter=\"20\"></mat-progress-spinner>\n <div [@inOutAnimation] *ngIf=\"!!userGroupForm.value && !getLoading$.value\" matSuffix qms-input-clear>\n <button (click)=\"userGroupForm.setValue('')\" qms-btn-icon color=\"light\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n </mat-form-field>\n </form>\n <div qms-scrollbar>\n <div class=\"item\">\n <mat-checkbox [@inOutAnimation]\n *ngIf=\"!getLoading$.value && (userGroupFiltered.length && !dialogData.modeSelectOneUserGroup)\"\n [disabled]=\"isDisabledSelectAll(OPTION_ENUM.USER_GROUP)\" #checkUserGroup\n class=\"w-100 checkbox-all mb-1\" color=\"default\" [checked]=\"isCheckAll(OPTION_ENUM.USER_GROUP)\"\n [indeterminate]=\"isIndeterminate(OPTION_ENUM.USER_GROUP)\"\n (click)=\"userGroupFiltered.length && onCheckAll(OPTION_ENUM.USER_GROUP,checkUserGroup)\"\n qms-group-options>\n <span class=\"text-label header-title\">{{LANG.CHOOSE_ALL}}</span>\n <span>(<b>{{userGroupFiltered.length}}</b>)</span>\n </mat-checkbox>\n </div>\n <mat-divider class=\"mx-auto\"></mat-divider>\n <ng-container *ngIf=\"getLoading$.value;then loading\">\n </ng-container>\n <div *ngIf=\"userGroupFiltered.length && !getLoading$.value\" [@listAnimation] class=\"item-list-wrapper\">\n <div [@inOutAnimation] class=\"item mt-1\" *ngFor=\"let userGroup of userGroupFiltered\">\n <ng-container\n [ngTemplateOutlet]=\"dialogData.modeSelectOneUserGroup ? itemWithoutCheckboxTemplate : itemCheckboxTemplate\"\n [ngTemplateOutletContext]=\"{item: userGroup,type: OPTION_ENUM.USER_GROUP}\">\n </ng-container>\n </div>\n </div>\n <div [@inOutAnimation] *ngIf=\"!userGroupFiltered.length && !getLoading$.value\"\n class=\"item-list-wrapper no-result\">\n <ng-container *ngTemplateOutlet=\"noResult\"></ng-container>\n </div>\n <mat-divider class=\"mx-auto\"></mat-divider>\n <qms-paginator overlayPanelClass=\"select-access-paginator\" #pagingUserGroup class=\"my-1\"\n *ngIf=\"getUserGroup$.value.length > 10 \" [length]=\"getUserGroup$.value.length\" [numHidden]=\"0\"\n [pageSize]=\"getUserGroup$.value.pageSize\" [pageSizeOptions]=\"PAGE_SIZE_OPTION\"\n (page)='onPaginatorEvent($event, OPTION_ENUM.USER_GROUP)' [size]='PAGINATION_SIZE.medium'>\n </qms-paginator>\n </div>\n </div>\n </ng-container>\n <ng-container\n *ngIf=\"optionSelect.value === OPTION_ENUM.DEPARTMENT && getLoading$.value; then loading\"></ng-container>\n <ng-container *ngIf=\"optionSelect.value === OPTION_ENUM.DEPARTMENT && !getLoading$.value\"\n class=\"person-access\">\n <qms-select-department-tree #tree [rowsSkeleton]=\"8\" [config]=\"dialogData.treeDepartmentConfig\"\n [maxWidthNode]=\"dialogData.maxWidthNode\" (onSearchEvent)=\"onSearchDepartmentEvent.emit($event)\"\n (onValueChangeEvent)=\"onResultDepartmentChange($event)\"\n (selectionNodeChangeEvent)=\"onSelectionNodeDepartmentChange($event)\"\n (onPagingSearchEvent)=\"onPaginatorEvent($event, OPTION_ENUM.DEPARTMENT)\">\n </qms-select-department-tree>\n </ng-container>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"optionSelect.value !== null\" class=\"result-wrapper\">\n <div class=\"result-selected-container\">\n <div [@inOutAnimation] *ngIf=\"(options.length === 1) || (options.length > 1 && optionSelect.value !== null)\"\n class=\"header-title result-header\">\n <span>\n {{\n dialogData.titleResult || LANG.RESULTS}}\n <span *ngIf=\"options.length === 1 && hasItemSelected()\">\n ({{getResultTabActive().length}})\n </span>\n </span>\n </div>\n <div class=\"result-body\">\n <ng-container *ngIf=\"checkExistOptionSelect(OPTION_ENUM.PERSON)\"\n [ngTemplateOutlet]=\"options?.length == 1 ? listChip : viewResultCollapse\"\n [ngTemplateOutletContext]=\"{data:resultAccess.persons, type:OPTION_ENUM.PERSON, title:LANG.PERSON}\">\n </ng-container>\n <ng-container *ngIf=\"checkExistOptionSelect(OPTION_ENUM.USER_GROUP)\"\n [ngTemplateOutlet]=\"options?.length == 1 ? listChip : viewResultCollapse\"\n [ngTemplateOutletContext]=\"{data:resultAccess.userGroups, type:OPTION_ENUM.USER_GROUP, title:LANG.USER_GROUP}\">\n </ng-container>\n <ng-container *ngIf=\"checkExistOptionSelect(OPTION_ENUM.DEPARTMENT)\"\n [ngTemplateOutlet]=\"options?.length == 1 ? listChip : viewResultCollapse\"\n [ngTemplateOutletContext]=\"{data: resultAccess.departments, type:OPTION_ENUM.DEPARTMENT, title:LANG.DEPARTMENT}\">\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n\n</mat-dialog-content>\n<mat-dialog-actions align=\"end\">\n <mat-divider class=\"w-100 mb-3\"></mat-divider>\n <button class=\"me-2\" qms-btn-text mat-dialog-close>\n {{dialogData.cancelTitle || LANG.CANCEL}}\n </button>\n <button *ngIf=\"optionSelect.value !== null\"\n [disabled]=\"!hasItemSelected() && !dialogData.treeDepartmentConfig.canAddNullResult\" class=\"btn-add\"\n [class.qms-btn-disabled]=\"!hasItemSelected() && !dialogData.treeDepartmentConfig.canAddNullResult\"\n [mat-dialog-close]=\"resultAccess\" qms-btn>\n <span>{{dialogData.confirmTitle || LANG.ADD}}</span>\n </button>\n</mat-dialog-actions>\n\n<ng-template #noResult>\n <svg width=\"89\" height=\"130\" viewBox=\"0 0 89 88\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"white\" />\n <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"#0163B2\" fill-opacity=\"0.12\" />\n <path\n d=\"M44.5 56.6936L58.096 64.8996L54.488 49.4336L66.5 39.0276L50.682 37.6856L44.5 23.0996L38.318 37.6856L22.5 39.0276L34.512 49.4336L30.904 64.8996L44.5 56.6936Z\"\n fill=\"#0163B3\" />\n <text x=\"10\" y=\"105\" fill=\"#0163B2\">{{LANG.NO_RESULT}}</text>\n </svg>\n</ng-template>\n<ng-template #listChip let-data=\"data\" let-type=\"type\">\n <mat-chip-set [@inOutAnimation] *ngIf=\"data?.length\" class=\"panel__item qms-scrollbar\">\n <div [@inOutAnimation_2] *ngFor=\"let item of data; let i = index\">\n <mat-chip (click)=\"onScollToNodeTreeDepartment(item)\" [@updateItemAnimation]\n *qmsContentChanges=\"item.children?.length\" class=\"chip-item-result\" qms-chip [removable]=\"true\">\n <span qms-chip-body>\n <span [qms-tool-tip]=\"generateTooltip(item)\" position=\"top\" mode=\"dark\" class=\"text-label\">\n {{item.name}}\n <span *ngIf=\"item.subName\">({{ item.subName }})</span>\n </span>\n <span class=\"chip-item-children__count ms-1\" *ngIf=\"item?.children && item?.isGroup\">\n {{item.children.length}}/{{item.childCount}}\n </span>\n </span>\n\n <button matChipRemove *ngIf=\"allowRemove(type, item)\" (click)=\"onRemoveChip(type,item, i)\">\n <mat-icon class=\"remove-chip-icon\">cancel</mat-icon>\n <mat-icon *ngIf=\"allowRemove(type, item) && dialogData.formatMsgDisable\" position=\"top\" mode=\"dark\"\n [qms-tool-tip]=\"dialogData.formatMsgDisable(item)\" class=\"remove-chip-icon\">info_i</mat-icon>\n </button>\n <button matChipRemove *ngIf=\"!allowRemove(type, item) && dialogData.formatMsgDisable\"\n (click)=\"onRemoveChip(type,item, i)\">\n <mat-icon class=\"remove-chip-icon\">cancel</mat-icon>\n <mat-icon *ngIf=\"!allowRemove(type, item) && dialogData.formatMsgDisable\" position=\"top\" mode=\"dark\"\n [qms-tool-tip]=\"dialogData.formatMsgDisable(item)\" class=\"remove-chip-icon\">info_i</mat-icon>\n </button>\n </mat-chip>\n </div>\n </mat-chip-set>\n</ng-template>\n\n\n<ng-template #viewResultCollapse let-title=\"title\" let-data=\"data\" let-type=\"type\">\n <mat-expansion-panel qms-expansion [expanded]=\"optionSelect.value === type\">\n <mat-expansion-panel-header>\n <div class=\"title-content\">\n <div class=\"qms-list-text\">\n <div qms-line color=\"default-subtitle\">{{title}}\n <span class=\"fw-600\">\n ({{data?.length}})\n </span>\n </div>\n </div>\n </div>\n </mat-expansion-panel-header>\n <ng-container [ngTemplateOutlet]=\"listChip\" [ngTemplateOutletContext]=\"{data: data,type: type}\">\n </ng-container>\n </mat-expansion-panel>\n</ng-template>\n\n<ng-template #itemWithoutCheckboxTemplate let-item=\"item\" let-type=\"type\">\n <div (click)=\"onSelectItem(type,item)\" class=\"item-without-checkbox w-100\" [class.active]=\"item.selected\">\n <div class=\"item-content\">\n <div class=\"text-label\">\n <span class=\"text-label label-item fs-14 \">\n {{ item.name }}\n </span>\n <span *ngIf=\"item.subName\" class=\"ms-1 sub-label\">({{item.subName}})</span>\n </div>\n <small *ngIf=\"item.helpText\" class=\"text-help px-1 fs-12 sub-label\">{{ item.helpText }}</small>\n </div>\n <div class=\"item-state\">\n <mat-icon [@inOutAnimation] *ngIf=\"item.selected\">check</mat-icon>\n </div>\n </div>\n</ng-template>\n\n<ng-template #itemCheckboxTemplate let-item=\"item\" let-type=\"type\">\n <mat-checkbox [disabled]=\"!allowRemove(type, item)\" [checked]=\"item.selected\" (click)=\"onSelectItem(type,item)\"\n class=\"w-100\" color=\"default\" qms-group-options>\n <div class=\"text-label\">\n <span class=\"text-label label-item fs-14 \">\n {{ item.name }}\n </span>\n <span *ngIf=\"item.subName\" class=\"ms-1 sub-label\">({{item.subName}})</span>\n </div>\n <small *ngIf=\"item.helpText\" class=\"text-help px-1 fs-12 sub-label\">{{ item.helpText }}</small>\n </mat-checkbox>\n</ng-template>\n\n<ng-template #loading>\n <div class=\"qms-loading-container\">\n <div class=\"qms-loader\" *ngFor=\"let item of arrSkeleton\">\n <div class=\"qms-loader__wrapper\">\n <div class=\"row-loader\">\n </div>\n </div>\n </div>\n </div>\n</ng-template>", styles: ["@font-face{font-family:icomoon;src:url(/assets/fonts/icomoon.eot?aghldx);src:url(/assets/fonts/icomoon.eot?aghldx#iefix) format(\"embedded-opentype\"),url(/assets/fonts/icomoon.ttf?aghldx) format(\"truetype\"),url(/assets/fonts/icomoon.woff?aghldx) format(\"woff\"),url(/assets/fonts/icomoon.svg?aghldx#icomoon) format(\"svg\");font-weight:400;font-style:normal;font-display:block}[class^=icon-],[class*=\" icon-\"]{font-family:icomoon!important;speak:never;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-acutely-toxic .path1:before{content:\"\\e91b\";color:#e32730}.icon-acutely-toxic .path2:before{content:\"\\e922\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path3:before{content:\"\\e923\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path4:before{content:\"\\e924\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path5:before{content:\"\\e925\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path6:before{content:\"\\e926\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path7:before{content:\"\\e927\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path8:before{content:\"\\e928\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path9:before{content:\"\\e929\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path10:before{content:\"\\e92a\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path11:before{content:\"\\e92b\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path12:before{content:\"\\e92c\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path13:before{content:\"\\e92d\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path14:before{content:\"\\e92e\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path15:before{content:\"\\e92f\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path16:before{content:\"\\e930\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path17:before{content:\"\\e931\";margin-left:-1em;color:#323232}.icon-add-column:before{content:\"\\e932\"}.icon-add-tooltip:before{content:\"\\e933\"}.icon-admin:before{content:\"\\e934\"}.icon-annual-cycle:before{content:\"\\e935\"}.icon-assignment-repete:before{content:\"\\e936\"}.icon-barrier-add:before{content:\"\\e937\"}.icon-barrier-edit:before{content:\"\\e938\"}.icon-barrier-view:before{content:\"\\e939\"}.icon-button-group:before{content:\"\\e93a\"}.icon-chemical-manager:before{content:\"\\e93b\"}.icon-chronic-health-hazard .path1:before{content:\"\\e93c\";color:#e32730}.icon-chronic-health-hazard .path2:before{content:\"\\e93d\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path3:before{content:\"\\e93e\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path4:before{content:\"\\e93f\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path5:before{content:\"\\e940\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path6:before{content:\"\\e941\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path7:before{content:\"\\e942\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path8:before{content:\"\\e943\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path9:before{content:\"\\e944\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path10:before{content:\"\\e945\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path11:before{content:\"\\e946\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path12:before{content:\"\\e947\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path13:before{content:\"\\e948\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path14:before{content:\"\\e949\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path15:before{content:\"\\e94a\";margin-left:-1em;color:#323232}.icon-contingency:before{content:\"\\e94b\"}.icon-corrosive .path1:before{content:\"\\e94c\";color:#323232}.icon-corrosive .path2:before{content:\"\\e94d\";margin-left:-1em;color:#323232}.icon-corrosive .path3:before{content:\"\\e94e\";margin-left:-1em;color:#323232}.icon-corrosive .path4:before{content:\"\\e94f\";margin-left:-1em;color:#323232}.icon-corrosive .path5:before{content:\"\\e950\";margin-left:-1em;color:#323232}.icon-corrosive .path6:before{content:\"\\e951\";margin-left:-1em;color:#323232}.icon-corrosive .path7:before{content:\"\\e952\";margin-left:-1em;color:#323232}.icon-corrosive .path8:before{content:\"\\e953\";margin-left:-1em;color:#323232}.icon-corrosive .path9:before{content:\"\\e954\";margin-left:-1em;color:#323232}.icon-corrosive .path10:before{content:\"\\e955\";margin-left:-1em;color:#323232}.icon-corrosive .path11:before{content:\"\\e956\";margin-left:-1em;color:#323232}.icon-corrosive .path12:before{content:\"\\e957\";margin-left:-1em;color:#323232}.icon-corrosive .path13:before{content:\"\\e958\";margin-left:-1em;color:#323232}.icon-corrosive .path14:before{content:\"\\e959\";margin-left:-1em;color:#323232}.icon-corrosive .path15:before{content:\"\\e95a\";margin-left:-1em;color:#323232}.icon-corrosive .path16:before{content:\"\\e95b\";margin-left:-1em;color:#323232}.icon-corrosive .path17:before{content:\"\\e95c\";margin-left:-1em;color:#323232}.icon-corrosive .path18:before{content:\"\\e95d\";margin-left:-1em;color:#323232}.icon-corrosive .path19:before{content:\"\\e95e\";margin-left:-1em;color:#323232}.icon-corrosive .path20:before{content:\"\\e95f\";margin-left:-1em;color:#323232}.icon-corrosive .path21:before{content:\"\\e960\";margin-left:-1em;color:#e32730}.icon-dashboard:before{content:\"\\e961\"}.icon-database-sds:before{content:\"\\e962\"}.icon-description-add:before{content:\"\\e963\"}.icon-description-edit:before{content:\"\\e964\"}.icon-description-view:before{content:\"\\e965\";color:#666}.icon-document-read .path1:before{content:\"\\e966\";color:#000;opacity:.6}.icon-document-read .path2:before{content:\"\\e967\";margin-left:-1em;color:#fff}.icon-document-read .path3:before{content:\"\\e968\";margin-left:-1em;color:#000;opacity:.6}.icon-draft:before{content:\"\\e969\"}.icon-expired-off:before{content:\"\\e96a\"}.icon-expired-on:before{content:\"\\e96b\"}.icon-explosive .path1:before{content:\"\\e96c\";color:#e32730}.icon-explosive .path2:before{content:\"\\e96d\";margin-left:-1em;color:#323232}.icon-explosive .path3:before{content:\"\\e96e\";margin-left:-1em;color:#323232}.icon-explosive .path4:before{content:\"\\e96f\";margin-left:-1em;color:#323232}.icon-explosive .path5:before{content:\"\\e970\";margin-left:-1em;color:#323232}.icon-explosive .path6:before{content:\"\\e971\";margin-left:-1em;color:#323232}.icon-explosive .path7:before{content:\"\\e972\";margin-left:-1em;color:#323232}.icon-explosive .path8:before{content:\"\\e973\";margin-left:-1em;color:#323232}.icon-explosive .path9:before{content:\"\\e974\";margin-left:-1em;color:#323232}.icon-explosive .path10:before{content:\"\\e975\";margin-left:-1em;color:#323232}.icon-explosive .path11:before{content:\"\\e976\";margin-left:-1em;color:#323232}.icon-explosive .path12:before{content:\"\\e977\";margin-left:-1em;color:#323232}.icon-explosive .path13:before{content:\"\\e978\";margin-left:-1em;color:#323232}.icon-explosive .path14:before{content:\"\\e979\";margin-left:-1em;color:#323232}.icon-explosive .path15:before{content:\"\\e97a\";margin-left:-1em;color:#323232}.icon-explosive .path16:before{content:\"\\e97b\";margin-left:-1em;color:#323232}.icon-explosive .path17:before{content:\"\\e97c\";margin-left:-1em;color:#323232}.icon-explosive .path18:before{content:\"\\e97d\";margin-left:-1em;color:#323232}.icon-explosive .path19:before{content:\"\\e97e\";margin-left:-1em;color:#323232}.icon-explosive .path20:before{content:\"\\e97f\";margin-left:-1em;color:#323232}.icon-explosive .path21:before{content:\"\\e980\";margin-left:-1em;color:#323232}.icon-explosive .path22:before{content:\"\\e981\";margin-left:-1em;color:#323232}.icon-explosive .path23:before{content:\"\\e982\";margin-left:-1em;color:#323232}.icon-explosive .path24:before{content:\"\\e983\";margin-left:-1em;color:#323232}.icon-explosive .path25:before{content:\"\\e984\";margin-left:-1em;color:#323232}.icon-explosive .path26:before{content:\"\\e985\";margin-left:-1em;color:#323232}.icon-explosive .path27:before{content:\"\\e986\";margin-left:-1em;color:#323232}.icon-explosive .path28:before{content:\"\\e987\";margin-left:-1em;color:#323232}.icon-explosive .path29:before{content:\"\\e988\";margin-left:-1em;color:#323232}.icon-explosive .path30:before{content:\"\\e989\";margin-left:-1em;color:#323232}.icon-explosive .path31:before{content:\"\\e98a\";margin-left:-1em;color:#323232}.icon-explosive .path32:before{content:\"\\e98b\";margin-left:-1em;color:#323232}.icon-explosive .path33:before{content:\"\\e98c\";margin-left:-1em;color:#323232}.icon-explosive .path34:before{content:\"\\e98d\";margin-left:-1em;color:#323232}.icon-explosive .path35:before{content:\"\\e98e\";margin-left:-1em;color:#323232}.icon-explosive .path36:before{content:\"\\e98f\";margin-left:-1em;color:#323232}.icon-explosive .path37:before{content:\"\\e990\";margin-left:-1em;color:#323232}.icon-explosive .path38:before{content:\"\\e991\";margin-left:-1em;color:#323232}.icon-explosive .path39:before{content:\"\\e992\";margin-left:-1em;color:#323232}.icon-explosive .path40:before{content:\"\\e993\";margin-left:-1em;color:#323232}.icon-explosive .path41:before{content:\"\\e994\";margin-left:-1em;color:#323232}.icon-explosive .path42:before{content:\"\\e995\";margin-left:-1em;color:#323232}.icon-explosive .path43:before{content:\"\\e996\";margin-left:-1em;color:#323232}.icon-explosive .path44:before{content:\"\\e997\";margin-left:-1em;color:#323232}.icon-explosive .path45:before{content:\"\\e998\";margin-left:-1em;color:#323232}.icon-explosive .path46:before{content:\"\\e999\";margin-left:-1em;color:#323232}.icon-file-excel:before{content:\"\\e99a\"}.icon-file-pdf:before{content:\"\\e99b\"}.icon-file-pdf-verified .path1:before{content:\"\\e99c\";color:#000;opacity:.6}.icon-file-pdf-verified .path2:before{content:\"\\e99d\";margin-left:-1em;color:#fff}.icon-file-pdf-verified .path3:before{content:\"\\e99e\";margin-left:-1em;color:#000;opacity:.6}.icon-file-word:before{content:\"\\e99f\"}.icon-filter-alt:before{content:\"\\e9a0\"}.icon-flammable .path1:before{content:\"\\e9a1\";color:#323232}.icon-flammable .path2:before{content:\"\\e9a2\";margin-left:-1em;color:#323232}.icon-flammable .path3:before{content:\"\\e9a3\";margin-left:-1em;color:#e32730}.icon-gas-under-pressure .path1:before{content:\"\\e9a4\";color:#323232}.icon-gas-under-pressure .path2:before{content:\"\\e9a5\";margin-left:-1em;color:#e32730}.icon-health-hazard .path1:before{content:\"\\e9a6\";color:#323232}.icon-health-hazard .path2:before{content:\"\\e9a7\";margin-left:-1em;color:#e32730}.icon-line-break:before{content:\"\\e9a8\"}.icon-location:before{content:\"\\e9a9\"}.icon-measure-add:before{content:\"\\e9aa\"}.icon-measure-edit:before{content:\"\\e9ab\"}.icon-measure-view:before{content:\"\\e9ac\";color:#666}.icon-messages:before{content:\"\\e9ad\"}.icon-monitoring:before{content:\"\\e9ae\";color:#666}.icon-move:before{content:\"\\e9af\"}.icon-oxidizing .path1:before{content:\"\\e9b0\";color:#e32730}.icon-oxidizing .path2:before{content:\"\\e9b1\";margin-left:-1em;color:#323232}.icon-oxidizing .path3:before{content:\"\\e9b2\";margin-left:-1em;color:#323232}.icon-oxidizing .path4:before{content:\"\\e9b3\";margin-left:-1em;color:#323232}.icon-process-area-closed:before{content:\"\\e9b4\"}.icon-process-area-open:before{content:\"\\e9b5\"}.icon-process-linked .path1:before{content:\"\\e9b6\";color:#000;opacity:.6}.icon-process-linked .path2:before{content:\"\\e9b7\";margin-left:-1em;color:#666}.icon-risk:before{content:\"\\e9b8\"}.icon-search-in-file:before{content:\"\\e9b9\"}.icon-sort-ascending:before{content:\"\\e9ba\"}.icon-sort-descending:before{content:\"\\e9bb\"}.icon-subscript:before{content:\"\\e9bc\"}.icon-superscript:before{content:\"\\e9bd\"}.icon-syncronice-favorites:before{content:\"\\e9be\"}.icon-system-settings:before{content:\"\\e9bf\"}.icon-view-three-outlined:before{content:\"\\e9c0\"}.icon-workplace-safety:before{content:\"\\e9c1\"}.icon-checklist:before{content:\"\\e900\"}.icon-department-document .path1:before{content:\"\\e901\";color:#000;opacity:.6}.icon-department-document .path2:before{content:\"\\e902\";margin-left:-1em;color:#00804c}.icon-department-folder-closed .path1:before{content:\"\\e903\";color:#000;opacity:.6}.icon-department-folder-closed .path2:before{content:\"\\e904\";margin-left:-1em;color:#00804c}.icon-department-folder-open .path1:before{content:\"\\e905\";color:#000;opacity:.6}.icon-department-folder-open .path2:before{content:\"\\e906\";margin-left:-1em;color:#00804c}.icon-deviation:before{content:\"\\e907\"}.icon-dropdown-folder .path1:before{content:\"\\e908\";color:#00324e}.icon-dropdown-folder .path2:before{content:\"\\e909\";margin-left:-1em;color:#fff;opacity:.6}.icon-enterprise-document .path1:before{content:\"\\e90a\";color:#000;opacity:.6}.icon-enterprise-document .path2:before{content:\"\\e90b\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-closed .path1:before{content:\"\\e90c\";color:#000;opacity:.6}.icon-enterprise-folder-closed .path2:before{content:\"\\e90d\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-open .path1:before{content:\"\\e90e\";color:#000;opacity:.6}.icon-enterprise-folder-open .path2:before{content:\"\\e90f\";margin-left:-1em;color:#cf4714}.icon-folder-closed:before{content:\"\\e910\"}.icon-folder-open:before{content:\"\\e911\"}.icon-keyboard_arrow_down:before{content:\"\\e912\"}.icon-keyboard_arrow_up:before{content:\"\\e913\"}.icon-local-document .path1:before{content:\"\\e914\";color:#000;opacity:.6}.icon-local-document .path2:before{content:\"\\e915\";margin-left:-1em;color:#1954a9}.icon-local-folder-closed .path1:before{content:\"\\e916\";color:#000;opacity:.6}.icon-local-folder-closed .path2:before{content:\"\\e917\";margin-left:-1em;color:#1954a9}.icon-local-folder-open .path1:before{content:\"\\e918\";color:#000;opacity:.6}.icon-local-folder-open .path2:before{content:\"\\e919\";margin-left:-1em;color:#1954a9}.icon-process:before{content:\"\\e91a\"}.icon-regional-document .path1:before{content:\"\\e91c\";color:#000;opacity:.6}.icon-regional-document .path2:before{content:\"\\e91d\";margin-left:-1em;color:#662e0d}.icon-regional-folder-closed .path1:before{content:\"\\e91e\";color:#000;opacity:.6}.icon-regional-folder-closed .path2:before{content:\"\\e91f\";margin-left:-1em;color:#662e0d}.icon-regional-folder-open .path1:before{content:\"\\e920\";color:#000;opacity:.6}.icon-regional-folder-open .path2:before{content:\"\\e921\";margin-left:-1em;color:#662e0d}.select-access-paginator{max-height:150px!important}.mat-expansion-panel .mat-expansion-panel-body{padding-top:0!important}.mat-expansion-panel-header{font-weight:800!important}.mat-expansion-panel-header .title-content{font-size:12px!important}.w-100{width:100%}.h-100{height:100%}.pointer{cursor:pointer}.fw-600{font-weight:600}.label-item{font-weight:600;color:var(--ws-text-primary)}.sub-label{color:var(--ws-text-secondary)}.fs-14{font-size:14px}.fs-12{font-size:12px}.color-primary{color:var(--primary-light)!important}.header-title{font-weight:600;color:var(--ws-text-primary);font-size:16px}.chip-item-result.item-department .qms-chip-body{display:flex;justify-content:center;align-items:center}.remove-chip-icon{cursor:pointer}.remove-chip-icon:hover{color:#000000b3}.mat-form-field-wrapper{padding-bottom:8px!important}.mat-expansion-panel{border-radius:unset!important}.mat-expansion-panel-header:not([aria-disabled=true]){background:unset}.mat-expansion-panel.mat-expanded .mat-expansion-panel-header{background:#e5eefb}.mat-expansion-panel.mat-expanded .mat-expansion-panel-header .qms-line{color:var(--primary-light)!important}.access-dialog-header{display:flex;justify-content:space-between;align-items:center}.mat-chip-list-wrapper{margin:unset!important}.item-list-wrapper{height:40vh;padding:4px 4px 4px 0;overflow-y:auto}.item-list-wrapper.no-result{height:50vh;display:flex;justify-content:center;align-items:center}.item-list-wrapper .item{min-height:40px}.item-list-wrapper .item-without-checkbox{min-height:45px;display:flex;justify-content:space-between;align-items:center;padding:4px 8px;cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:4px;transition:background .3s ease}.item-list-wrapper .item-without-checkbox.active{background:var(--primary-light-12-opacity)}.item-list-wrapper .item-without-checkbox:hover{background:var(--primary-light-6-opacity)}.item-list-wrapper .item-without-checkbox .mat-icon{color:var(--primary-light)!important}.confirm__button__groups .btn-add>.qms-btn-wrapper{display:flex;justify-content:center;align-items:center}.qms-dialog-content{display:grid;column-gap:8px}.qms-dialog-content.active{grid-template-columns:2fr 1fr;min-height:50vh}.qms-dialog-content .access-dialog-wraper .field-select-option .mat-form-field-wrapper{padding-bottom:16px!important}.qms-dialog-content .access-dialog-wraper .field-select-option .mat-form-field-underline{bottom:16px!important}.qms-dialog-content .result-wrapper{position:relative;width:100%;margin-left:8px}.qms-dialog-content .result-wrapper:after{position:absolute;content:\"\";top:0;left:0;background-color:#0000001f;height:100%;width:1px}.qms-dialog-content .result-selected-container{position:absolute;inset:0;overflow-y:auto;padding:0 8px}.qms-dialog-content .result-selected-container .result-header{height:51px;display:flex;align-items:center;position:sticky;top:0;z-index:10;padding:0!important;background:#fff;margin-bottom:12px}.qms-dialog-content .result-selected-container .result-header:after{position:absolute;content:\"\";bottom:0;left:0;width:100%;height:1px;background:#0000000a}.qms-dialog-content .result-selected-container .result-header .mat-mdc-card-content{height:51px;width:100%;padding-left:4px;display:flex;align-items:center;background-color:#0000000a}.option-selected-content .group-filter-person-option{display:flex;flex-direction:row-reverse;justify-content:center;align-items:center;gap:8px}span.chip-item__content_name{display:inline-block;max-width:175px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}span.chip-item-children__count{font-size:.75rem;color:#00000080;font-weight:600}.mat-mdc-slide-toggle.qms-group-options{padding:unset!important}.input-option-filter .mat-form-field-wrapper{padding-bottom:8px!important}.input-option-filter .mat-form-field-underline{bottom:8px!important}.slide-toggle{margin-bottom:8px}.confirm__button__groups.none-option{margin-top:85px}.btn-icon-clear{position:relative;padding:0 1rem}.btn-icon-clear .qms-btn-icon{margin-right:unset!important}.btn-icon-clear:after{position:absolute;content:\"\";left:0;top:0;height:100%;width:1px;background:#0000004d}.qms-paginator .mat-mdc-paginator-container .qms-total-result{margin-bottom:0;margin-right:12px;height:100%;display:flex;align-items:center}.qms-paginator .mat-mdc-paginator-container .qms-total-result span{font-weight:600;color:#000c}.qms-paginator .mat-mdc-paginator-container .qms-paginator-range-actions{margin-bottom:0;column-gap:2px}.qms-paginator .mat-mdc-paginator-container .qms-paginator-range-actions>.qms-total-result{margin-bottom:0}.qms-paginator .qms-paginator-page-size{align-items:center}.qms-paginator .mat-form-field-wrapper{padding-bottom:0!important}.mat-mdc-checkbox.checkbox-all .mat-checkbox-label{flex-direction:row!important;align-items:center!important;column-gap:4px!important}.mat-expansion-panel.qms-expansion{margin:0!important}.access-department .qms-view-search-result{height:100%!important}.access-department .qms-view-search-result .result{max-height:calc(100% - 80px)!important}.access-department .loading-container{height:calc(100% - 40px)!important}.qms-loading-container{height:45vh;overflow:hidden;display:grid;grid-template-rows:repeat(60px)}.qms-loading-container .qms-loader{position:relative;width:100%;height:100%;padding:10px 0;overflow:hidden}.qms-loading-container .qms-loader:after{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;background:linear-gradient(110deg,#e9e9e900,#e3e3e300 40%,#e3e3e380 50%,#e3e3e300 60% 100%);animation:animate-loading 1.2s linear infinite}.qms-loading-container .qms-loader__wrapper{position:relative;width:100%;height:100%}.qms-loading-container .qms-loader__wrapper .row-loader{background-color:#eee;position:absolute;left:0;width:100%;height:40px;overflow:hidden}@keyframes animate-loading{0%{transform:translate(-100%)}to{transform:translate(100%)}}.btn-close-dialog.qms-btn-icon:focus:not(:hover){background-color:unset!important;color:unset!important}::ng-deep .mdc-evolution-chip__text-label.mat-mdc-chip-action-label{white-space:nowrap;width:225px;overflow:hidden;text-overflow:ellipsis}\n"] }]
|
|
38513
|
+
], encapsulation: ViewEncapsulation.None, template: "<h3 mat-dialog-title class=\"more-action\">\n {{dialogData.titleDialog || LANG.SELECT_ACCESS}}\n <button matDialogClose class=\"close-btn\" qms-btn-icon color=\"light\">\n <mat-icon class=\"mat-icons-outlined\">close</mat-icon>\n </button>\n</h3>\n<mat-dialog-content>\n <div [class.active]=\"optionSelect.value !== null\" class=\"qms-dialog-content\">\n <div class=\"access-dialog-wraper\">\n <mat-form-field *ngIf=\"options.length > 1\" qms-form qms-select-input class=\"field-select-option w-100 mb-2\"\n appearance=\"fill\">\n <mat-label [attr.aria-label]=\"LANG.TYPE\" qms-select-input>{{LANG.TYPE}}</mat-label>\n <mat-select (selectionChange)=\"onSelectionTypeChange($event)\" [formControl]=\"optionSelect\" placeholder=\"Select\"\n disableOptionCentering #singleSelect panelClass=\"qms-select-panel\" qms-select>\n\n <mat-option *ngFor=\"let item of options\" [value]=\"item.type\">\n {{ LANG[item.displayName] }}\n </mat-option>\n </mat-select>\n </mat-form-field>\n <div class=\"body-dialog-container\">\n <div class=\"option-selected-content\">\n <ng-container *ngIf=\"optionSelect.value === OPTION_ENUM.PERSON\">\n <form *ngIf=\"personForm\" [formGroup]=\"personForm\">\n <div class=\"group-filter-person-option\">\n <mat-form-field *ngIf=\"optionFilterPersonDataGlobal.userGroups.length\" qms-form qms-select-input\n class=\"w-100 mb-2\" appearance=\"fill\">\n <mat-label [attr.aria-label]=\"LANG.ROLE\" qms-select-input>{{LANG.ROLE}}</mat-label>\n <mat-select panelClass=\"qms-select-panel\" qms-select formControlName=\"userGroup\"\n disableOptionCentering>\n <mat-select-trigger>\n {{personForm.controls['userGroup'].value?.name || ''}}\n </mat-select-trigger>\n <mat-option>\n <ngx-mat-select-search formControlName=\"userGroupFilter\" placeholderLabel=\"{{ LANG.ROLE }}\"\n noEntriesFoundLabel=\"\">\n </ngx-mat-select-search>\n </mat-option>\n <mat-option mode=\"dark\" class=\"opt-check-icon\"\n *ngFor=\"let item of filteredSearchTextBox.userGroup.value\" [value]=\"item\">\n <span qms-elipsify position=\"top\" mode=\"dark\" class=\"text-option-content\">{{ item.name }}</span>\n <mat-icon class=\"check-icon\"\n *ngIf=\"personForm.controls['userGroup'].value?.id == item.id\">check</mat-icon>\n </mat-option>\n </mat-select>\n <span [@inOutAnimation] (click)=\"personForm.get('userGroup').setValue('')\" class=\"pointer \" matSuffix\n aria-label=\"Clear\" *ngIf=\"personForm.get('userGroup').value && !getLoading$.value\">\n <mat-icon>close</mat-icon>\n </span>\n </mat-form-field>\n <mat-form-field *ngIf=\"optionFilterPersonDataGlobal.departments.length\"\n class=\"w-100 input-select-option mb-2\" qms-form qms-select-input>\n <mat-label [attr.aria-label]=\"LANG.DEPARTMENT_UNIT\">{{LANG.DEPARTMENT_UNIT}}</mat-label>\n <mat-select panelClass=\"qms-select-panel\" qms-select disableOptionCentering\n formControlName=\"department\">\n <mat-select-trigger>\n {{personForm.controls['department'].value?.name || ''}}\n </mat-select-trigger>\n <mat-option>\n <ngx-mat-select-search formControlName=\"departmentFilter\"\n [placeholderLabel]=\"LANG.DEPARTMENT_UNIT\" noEntriesFoundLabel=\"\">\n </ngx-mat-select-search>\n </mat-option>\n <mat-option class=\"opt-check-icon\" *ngFor=\"let item of filteredSearchTextBox.department.value\"\n [value]=\"item\">\n <span qms-elipsify mode=\"dark\" position=\"top\" class=\"text-option-content\">{{ item.name }}</span>\n <mat-icon class=\"check-icon\"\n *ngIf=\"personForm.controls['department'].value?.id == item.id\">check</mat-icon>\n </mat-option>\n </mat-select>\n <span (click)=\"setFormControlValue(['recursive','department'], [false,''])\" [@inOutAnimation]\n class=\"pointer\" matSuffix aria-label=\"Clear\"\n *ngIf=\"personForm.get('department').value && !getLoading$.value\">\n <mat-icon>close</mat-icon>\n </span>\n </mat-form-field>\n </div>\n\n <mat-slide-toggle [@inOutAnimation] *ngIf=\"personForm.controls['department'].value\"\n class=\"w-100 slide-toggle\" formControlName=\"recursive\" color=\"default\" qms-group-options>\n <span class=\"text-label\">{{LANG.INCLUDE_SUB_DEPARTMENTS}}</span>\n </mat-slide-toggle>\n\n <mat-form-field class=\"w-100 mb-2\" appearance=\"fill\" qms-form qms-search-field>\n <mat-label [attr.aria-label]=\"LANG.SEARCH_WITH_NAME\" class=\"visually-hidden\"\n qms-select-input>{{LANG.SEARCH_WITH_NAME}}</mat-label>\n <input matInput appearance=\"off\" placeholder=\"{{LANG.SEARCH_WITH_NAME}}\" formControlName=\"keyword\"\n type=\"text\" autocomplete=\"off\" />\n <button *ngIf=\"!getLoading$.value\" qms-btn-icon color=\"light\" [@inOutAnimation]\n (click)=\"onSearchPersonFreeText()\" class=\"pointer me-1\" matSuffix aria-label=\"Search\">\n <mat-icon>search</mat-icon>\n </button>\n <div matSuffix class=\"d-inline-block\">\n <mat-progress-spinner [@inOutAnimation] *ngIf=\"getLoading$.value\" mode=\"indeterminate\"\n diameter=\"20\"></mat-progress-spinner>\n </div>\n <button [@inOutAnimation] (click)=\"personForm.get('keyword').setValue('')\" matSuffix aria-label=\"Clear\"\n *ngIf=\"personForm.get('keyword').value && !getLoading$.value\">\n <mat-icon>close</mat-icon>\n </button>\n </mat-form-field>\n <button (click)=\"onFilterPerson()\" qms-btn-outlined class=\"w-100 my-1\">\n {{LANG.FILTER}}\n </button>\n\n <div qms-scrollbar>\n <div class=\"item\">\n <mat-checkbox [@inOutAnimation]\n *ngIf=\"!getLoading$.value && personFiltered.length && !dialogData.modeSelectOnePerson\"\n [disabled]=\"isDisabledSelectAll(OPTION_ENUM.PERSON)\" #checkPerson class=\"w-100 mb-1 checkbox-all\"\n (click)=\"personFiltered.length && onCheckAll(OPTION_ENUM.PERSON,checkPerson)\"\n [checked]=\"isCheckAll(OPTION_ENUM.PERSON)\" [indeterminate]=\"isIndeterminate(OPTION_ENUM.PERSON)\"\n color=\"default\" qms-group-options>\n <span class=\"text-label header-title\">{{LANG.CHOOSE_ALL}} (<b>{{personFiltered.length}}</b>)</span>\n </mat-checkbox>\n </div>\n <mat-divider class=\"mx-auto\"></mat-divider>\n <ng-container *ngIf=\"getLoading$.value; then loading\">\n </ng-container>\n <div [@inOutAnimation] *ngIf=\"personFiltered.length && !getLoading$.value\" [@listAnimation]\n class=\"item-list-wrapper\">\n <div class=\"item mt-1\" [@inOutAnimation] *ngFor=\"let employee of personFiltered; trackBy: trackByFn\">\n <ng-container\n [ngTemplateOutlet]=\"dialogData.modeSelectOnePerson ?itemWithoutCheckboxTemplate : itemCheckboxTemplate\"\n [ngTemplateOutletContext]=\"{item: employee, type: OPTION_ENUM.PERSON}\">\n </ng-container>\n </div>\n </div>\n <div [@inOutAnimation] *ngIf=\"!personFiltered.length && !getLoading$.value\"\n class=\"item-list-wrapper no-result\">\n <ng-container *ngTemplateOutlet=\"noResult\"></ng-container>\n </div>\n <mat-divider class=\"mx-auto\"></mat-divider>\n <qms-paginator overlayPanelClass=\"select-access-paginator\" #pagingPerson\n *ngIf=\"getPerson$.value.length > 10\" [length]=\"getPerson$.value.length\" [numHidden]=\"0\"\n [pageSize]=\"getPerson$.value.pageSize\" [pageSizeOptions]=\"PAGE_SIZE_OPTION\"\n (page)='onPaginatorEvent($event, OPTION_ENUM.PERSON)' [size]='PAGINATION_SIZE.medium'>\n </qms-paginator>\n </div>\n </form>\n </ng-container>\n <ng-container *ngIf=\"optionSelect.value === OPTION_ENUM.USER_GROUP\">\n <div>\n <form (submit)=\"onFilterUserGroup()\">\n <mat-form-field class=\"w-100 mb-2\" qms-form qms-search-field>\n <mat-label aria-label=\"User group\" class=\"visually-hidden\" qms-select-input>User group</mat-label>\n <input [formControl]=\"userGroupForm\" matInput type=\"text\" autocomplete=\"off\"\n placeholder=\"{{ LANG.SEARCH }}\" />\n <button [@inOutAnimation] *ngIf=\"!getLoading$.value\" type=\"submit\" qms-btn-icon color=\"light\"\n matSuffix>\n <mat-icon>search</mat-icon>\n </button>\n <div matSuffix class=\"d-inline-block\">\n <mat-progress-spinner [@inOutAnimation] *ngIf=\"getLoading$.value\" mode=\"indeterminate\"\n diameter=\"20\"></mat-progress-spinner>\n </div>\n <button matSuffix (click)=\"userGroupForm.setValue('')\" qms-btn-icon color=\"light\">\n <mat-icon>close</mat-icon>\n </button>\n </mat-form-field>\n </form>\n <div qms-scrollbar>\n <div class=\"item\">\n <mat-checkbox [@inOutAnimation]\n *ngIf=\"!getLoading$.value && (userGroupFiltered.length && !dialogData.modeSelectOneUserGroup)\"\n [disabled]=\"isDisabledSelectAll(OPTION_ENUM.USER_GROUP)\" #checkUserGroup\n class=\"w-100 checkbox-all mb-1\" color=\"default\" [checked]=\"isCheckAll(OPTION_ENUM.USER_GROUP)\"\n [indeterminate]=\"isIndeterminate(OPTION_ENUM.USER_GROUP)\"\n (click)=\"userGroupFiltered.length && onCheckAll(OPTION_ENUM.USER_GROUP,checkUserGroup)\"\n qms-group-options>\n <span class=\"text-label header-title\">{{LANG.CHOOSE_ALL}}\n (<b>{{userGroupFiltered.length}}</b>)</span>\n </mat-checkbox>\n </div>\n <mat-divider class=\"mx-auto\"></mat-divider>\n <ng-container *ngIf=\"getLoading$.value;then loading\">\n </ng-container>\n <div *ngIf=\"userGroupFiltered.length && !getLoading$.value\" [@listAnimation] class=\"item-list-wrapper\">\n <div [@inOutAnimation] class=\"item mt-1\" *ngFor=\"let userGroup of userGroupFiltered\">\n <ng-container\n [ngTemplateOutlet]=\"dialogData.modeSelectOneUserGroup ? itemWithoutCheckboxTemplate : itemCheckboxTemplate\"\n [ngTemplateOutletContext]=\"{item: userGroup,type: OPTION_ENUM.USER_GROUP}\">\n </ng-container>\n </div>\n </div>\n <div [@inOutAnimation] *ngIf=\"!userGroupFiltered.length && !getLoading$.value\"\n class=\"item-list-wrapper no-result\">\n <ng-container *ngTemplateOutlet=\"noResult\"></ng-container>\n </div>\n <mat-divider class=\"mx-auto\"></mat-divider>\n <qms-paginator overlayPanelClass=\"select-access-paginator\" #pagingUserGroup class=\"my-1\"\n *ngIf=\"getUserGroup$.value.length > 10 \" [length]=\"getUserGroup$.value.length\" [numHidden]=\"0\"\n [pageSize]=\"getUserGroup$.value.pageSize\" [pageSizeOptions]=\"PAGE_SIZE_OPTION\"\n (page)='onPaginatorEvent($event, OPTION_ENUM.USER_GROUP)' [size]='PAGINATION_SIZE.medium'>\n </qms-paginator>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"optionSelect.value === OPTION_ENUM.DEPARTMENT\">\n\n <ng-container *ngIf=\"!dialogData.isDepartmentPaging\">\n <qms-select-department-tree #tree [rowsSkeleton]=\"8\" [config]=\"dialogData.treeDepartmentConfig\"\n [maxWidthNode]=\"dialogData.maxWidthNode\" (onSearchEvent)=\"onSearchDepartmentEvent.emit($event)\"\n (onValueChangeEvent)=\"onResultDepartmentChange($event)\"\n (selectionNodeChangeEvent)=\"onSelectionNodeDepartmentChange($event)\"\n (onPagingSearchEvent)=\"onPaginatorEvent($event, OPTION_ENUM.DEPARTMENT)\">\n </qms-select-department-tree>\n </ng-container>\n\n <ng-container *ngIf=\"dialogData.isDepartmentPaging\">\n\n <form (ngSubmit)=\"onFilterDepartment()\">\n <mat-form-field class=\"w-100 mb-2\" qms-form qms-search-field>\n <mat-label aria-label=\"Department\" class=\"visually-hidden\" qms-select-input>Department</mat-label>\n <input [formControl]=\"departmentSearchForm\" matInput type=\"text\" autocomplete=\"off\"\n placeholder=\"{{ LANG.SEARCH }}\" />\n <button [@inOutAnimation] *ngIf=\"!getLoading$.value\" type=\"submit\" qms-btn-icon color=\"light\"\n matSuffix>\n <mat-icon>search</mat-icon>\n </button>\n <div matSuffix class=\"d-inline-block\">\n <mat-progress-spinner [@inOutAnimation] *ngIf=\"getLoading$.value\" mode=\"indeterminate\"\n diameter=\"20\"></mat-progress-spinner>\n </div>\n <div [@inOutAnimation] *ngIf=\"!!departmentSearchForm.value && !getLoading$.value\" matSuffix\n qms-input-clear>\n <button (click)=\"departmentSearchForm.setValue('')\" qms-btn-icon color=\"light\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n </mat-form-field>\n </form>\n\n <div qms-scrollbar>\n <div class=\"item\">\n <mat-checkbox [@inOutAnimation] *ngIf=\"!getLoading$.value && departmentFiltered.length\"\n [disabled]=\"isDisabledSelectAll(OPTION_ENUM.DEPARTMENT)\" #checkDepartment\n class=\"w-100 checkbox-all mb-1\" color=\"default\" [checked]=\"isCheckAll(OPTION_ENUM.DEPARTMENT)\"\n [indeterminate]=\"isIndeterminate(OPTION_ENUM.DEPARTMENT)\"\n (click)=\"departmentFiltered.length && onCheckAll(OPTION_ENUM.DEPARTMENT,checkDepartment)\"\n qms-group-options>\n <span class=\"text-label header-title\">{{LANG.CHOOSE_ALL}}\n (<b>{{departmentFiltered.length}}</b>)</span>\n </mat-checkbox>\n </div>\n <mat-divider class=\"mx-auto\"></mat-divider>\n <ng-container *ngIf=\"getLoading$.value;then loading\">\n </ng-container>\n <div *ngIf=\"departmentFiltered.length && !getLoading$.value\" [@listAnimation] class=\"item-list-wrapper\">\n <div [@inOutAnimation] class=\"item mt-1\" *ngFor=\"let item of departmentFiltered\">\n <ng-container [ngTemplateOutlet]=\"itemCheckboxTemplate\"\n [ngTemplateOutletContext]=\"{item: item,type: OPTION_ENUM.DEPARTMENT}\">\n </ng-container>\n </div>\n </div>\n <div [@inOutAnimation] *ngIf=\"!departmentFiltered.length && !getLoading$.value\"\n class=\"item-list-wrapper no-result\">\n <ng-container *ngTemplateOutlet=\"noResult\"></ng-container>\n </div>\n <mat-divider class=\"mx-auto\"></mat-divider>\n <qms-paginator overlayPanelClass=\"select-access-paginator\" #pagingDepartment class=\"my-1\"\n *ngIf=\"getDepartment$.value.length > 10 \" [length]=\"getDepartment$.value.length\" [numHidden]=\"0\"\n [pageSize]=\"getDepartment$.value.pageSize\" [pageSizeOptions]=\"PAGE_SIZE_OPTION\"\n (page)='onPaginatorEvent($event, OPTION_ENUM.DEPARTMENT)' [size]='PAGINATION_SIZE.medium'>\n </qms-paginator>\n </div>\n </ng-container>\n </ng-container>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"optionSelect.value !== null\" class=\"result-wrapper\">\n <div class=\"result-selected-container\">\n <div [@inOutAnimation] *ngIf=\"(options.length === 1) || (options.length > 1 && optionSelect.value !== null)\"\n class=\"header-title result-header\">\n <span>\n {{\n dialogData.titleResult || LANG.RESULTS}}\n <span *ngIf=\"options.length === 1 && hasItemSelected()\">\n ({{getResultTabActive().length}})\n </span>\n </span>\n </div>\n <div class=\"result-body\">\n <ng-container *ngIf=\"checkExistOptionSelect(OPTION_ENUM.PERSON)\"\n [ngTemplateOutlet]=\"options?.length == 1 ? listChip : viewResultCollapse\"\n [ngTemplateOutletContext]=\"{data:resultAccess.persons, type:OPTION_ENUM.PERSON, title:LANG.PERSON}\">\n </ng-container>\n <ng-container *ngIf=\"checkExistOptionSelect(OPTION_ENUM.USER_GROUP)\"\n [ngTemplateOutlet]=\"options?.length == 1 ? listChip : viewResultCollapse\"\n [ngTemplateOutletContext]=\"{data:resultAccess.userGroups, type:OPTION_ENUM.USER_GROUP, title:LANG.USER_GROUP}\">\n </ng-container>\n <ng-container *ngIf=\"checkExistOptionSelect(OPTION_ENUM.DEPARTMENT) && !dialogData.isDepartmentPaging\"\n [ngTemplateOutlet]=\"options?.length == 1 ? listChip : viewResultCollapse\"\n [ngTemplateOutletContext]=\"{data: resultAccess.departments || resultAccess.departmentsFlat, type:OPTION_ENUM.DEPARTMENT, title:LANG.DEPARTMENT}\">\n </ng-container>\n <ng-container *ngIf=\"checkExistOptionSelect(OPTION_ENUM.DEPARTMENT) && dialogData.isDepartmentPaging\"\n [ngTemplateOutlet]=\"options?.length == 1 ? listChip : viewResultCollapse\"\n [ngTemplateOutletContext]=\"{data: resultAccess.departmentsFlat, type:OPTION_ENUM.DEPARTMENT, title:LANG.DEPARTMENT}\">\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n\n</mat-dialog-content>\n<mat-dialog-actions align=\"end\">\n <mat-divider class=\"w-100 mb-3\"></mat-divider>\n <button class=\"me-2\" qms-btn-text mat-dialog-close>\n {{dialogData.cancelTitle || LANG.CANCEL}}\n </button>\n <button *ngIf=\"optionSelect.value !== null\"\n [disabled]=\"!hasItemSelected() && !dialogData.treeDepartmentConfig.canAddNullResult\" class=\"btn-add\"\n [class.qms-btn-disabled]=\"!hasItemSelected() && !dialogData.treeDepartmentConfig.canAddNullResult\"\n [mat-dialog-close]=\"resultAccess\" qms-btn>\n <span>{{dialogData.confirmTitle || LANG.ADD}}</span>\n </button>\n</mat-dialog-actions>\n\n<ng-template #noResult>\n <svg width=\"89\" height=\"130\" viewBox=\"0 0 89 88\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"white\" />\n <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"#0163B2\" fill-opacity=\"0.12\" />\n <path\n d=\"M44.5 56.6936L58.096 64.8996L54.488 49.4336L66.5 39.0276L50.682 37.6856L44.5 23.0996L38.318 37.6856L22.5 39.0276L34.512 49.4336L30.904 64.8996L44.5 56.6936Z\"\n fill=\"#0163B3\" />\n <text x=\"10\" y=\"105\" fill=\"#0163B2\">{{LANG.NO_RESULT}}</text>\n </svg>\n</ng-template>\n<ng-template #listChip let-data=\"data\" let-type=\"type\">\n <mat-chip-set [@inOutAnimation] *ngIf=\"data?.length\" class=\"panel__item qms-scrollbar\">\n <div [@inOutAnimation_2] *ngFor=\"let item of data; let i = index\">\n <mat-chip (click)=\"onScollToNodeTreeDepartment(item)\" [@updateItemAnimation]\n *qmsContentChanges=\"item.children?.length\" class=\"chip-item-result\" qms-chip [removable]=\"true\">\n <span qms-chip-body>\n <span [qms-tool-tip]=\"generateTooltip(item)\" position=\"top\" mode=\"dark\" class=\"text-label\">\n {{item.name}}\n <span *ngIf=\"item.subName\">({{ item.subName }})</span>\n </span>\n <span class=\"chip-item-children__count ms-1\" *ngIf=\"item?.children && item?.isGroup\">\n {{item.children.length}}/{{item.childCount}}\n </span>\n </span>\n\n <button matChipRemove *ngIf=\"allowRemove(type, item)\" (click)=\"onRemoveChip(type,item, i)\">\n <mat-icon class=\"remove-chip-icon\">cancel</mat-icon>\n <mat-icon *ngIf=\"allowRemove(type, item) && dialogData.formatMsgDisable\" position=\"top\" mode=\"dark\"\n [qms-tool-tip]=\"dialogData.formatMsgDisable(item)\" class=\"remove-chip-icon\">info_i</mat-icon>\n </button>\n <button matChipRemove *ngIf=\"!allowRemove(type, item) && dialogData.formatMsgDisable\"\n (click)=\"onRemoveChip(type,item, i)\">\n <mat-icon class=\"remove-chip-icon\">cancel</mat-icon>\n <mat-icon *ngIf=\"!allowRemove(type, item) && dialogData.formatMsgDisable\" position=\"top\" mode=\"dark\"\n [qms-tool-tip]=\"dialogData.formatMsgDisable(item)\" class=\"remove-chip-icon\">info_i</mat-icon>\n </button>\n </mat-chip>\n </div>\n </mat-chip-set>\n</ng-template>\n\n\n<ng-template #viewResultCollapse let-title=\"title\" let-data=\"data\" let-type=\"type\">\n <mat-expansion-panel qms-expansion [expanded]=\"optionSelect.value === type\">\n <mat-expansion-panel-header>\n <div class=\"title-content\">\n <div class=\"qms-list-text\">\n <div qms-line color=\"default-subtitle\">{{title}}\n <span class=\"fw-600\">\n ({{data?.length}})\n </span>\n </div>\n </div>\n </div>\n </mat-expansion-panel-header>\n <ng-container [ngTemplateOutlet]=\"listChip\" [ngTemplateOutletContext]=\"{data: data,type: type}\">\n </ng-container>\n </mat-expansion-panel>\n</ng-template>\n\n<ng-template #itemWithoutCheckboxTemplate let-item=\"item\" let-type=\"type\">\n <div (click)=\"onSelectItem(type,item)\" class=\"item-without-checkbox w-100\" [class.active]=\"item.selected\">\n <div class=\"item-content\">\n <div class=\"text-label\">\n <span class=\"text-label label-item fs-14 \">\n {{ item.name }}\n </span>\n <span *ngIf=\"item.subName\" class=\"ms-1 sub-label\">({{item.subName}})</span>\n </div>\n <small *ngIf=\"item.helpText\" class=\"text-help px-1 fs-12 sub-label\">{{ item.helpText }}</small>\n </div>\n <div class=\"item-state\">\n <mat-icon [@inOutAnimation] *ngIf=\"item.selected\">check</mat-icon>\n </div>\n </div>\n</ng-template>\n\n<ng-template #itemCheckboxTemplate let-item=\"item\" let-type=\"type\">\n <mat-checkbox [disabled]=\"!allowRemove(type, item)\" [checked]=\"item.selected\" (click)=\"onSelectItem(type,item)\"\n class=\"w-100\" color=\"default\" qms-group-options>\n <div class=\"text-label\">\n <span class=\"text-label label-item fs-14 \">\n {{ item.name }}\n </span>\n <span *ngIf=\"item.subName\" class=\"ms-1 sub-label\">({{item.subName}})</span>\n </div>\n <small *ngIf=\"item.helpText\" class=\"text-help px-1 fs-12 sub-label\">{{ item.helpText }}</small>\n </mat-checkbox>\n</ng-template>\n\n<ng-template #loading>\n <div class=\"qms-loading-container\">\n <div class=\"qms-loader\" *ngFor=\"let item of arrSkeleton\">\n <div class=\"qms-loader__wrapper\">\n <div class=\"row-loader\">\n </div>\n </div>\n </div>\n </div>\n</ng-template>", styles: ["@font-face{font-family:icomoon;src:url(/assets/fonts/icomoon.eot?aghldx);src:url(/assets/fonts/icomoon.eot?aghldx#iefix) format(\"embedded-opentype\"),url(/assets/fonts/icomoon.ttf?aghldx) format(\"truetype\"),url(/assets/fonts/icomoon.woff?aghldx) format(\"woff\"),url(/assets/fonts/icomoon.svg?aghldx#icomoon) format(\"svg\");font-weight:400;font-style:normal;font-display:block}[class^=icon-],[class*=\" icon-\"]{font-family:icomoon!important;speak:never;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-acutely-toxic .path1:before{content:\"\\e91b\";color:#e32730}.icon-acutely-toxic .path2:before{content:\"\\e922\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path3:before{content:\"\\e923\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path4:before{content:\"\\e924\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path5:before{content:\"\\e925\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path6:before{content:\"\\e926\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path7:before{content:\"\\e927\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path8:before{content:\"\\e928\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path9:before{content:\"\\e929\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path10:before{content:\"\\e92a\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path11:before{content:\"\\e92b\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path12:before{content:\"\\e92c\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path13:before{content:\"\\e92d\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path14:before{content:\"\\e92e\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path15:before{content:\"\\e92f\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path16:before{content:\"\\e930\";margin-left:-1em;color:#323232}.icon-acutely-toxic .path17:before{content:\"\\e931\";margin-left:-1em;color:#323232}.icon-add-column:before{content:\"\\e932\"}.icon-add-tooltip:before{content:\"\\e933\"}.icon-admin:before{content:\"\\e934\"}.icon-annual-cycle:before{content:\"\\e935\"}.icon-assignment-repete:before{content:\"\\e936\"}.icon-barrier-add:before{content:\"\\e937\"}.icon-barrier-edit:before{content:\"\\e938\"}.icon-barrier-view:before{content:\"\\e939\"}.icon-button-group:before{content:\"\\e93a\"}.icon-chemical-manager:before{content:\"\\e93b\"}.icon-chronic-health-hazard .path1:before{content:\"\\e93c\";color:#e32730}.icon-chronic-health-hazard .path2:before{content:\"\\e93d\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path3:before{content:\"\\e93e\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path4:before{content:\"\\e93f\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path5:before{content:\"\\e940\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path6:before{content:\"\\e941\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path7:before{content:\"\\e942\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path8:before{content:\"\\e943\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path9:before{content:\"\\e944\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path10:before{content:\"\\e945\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path11:before{content:\"\\e946\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path12:before{content:\"\\e947\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path13:before{content:\"\\e948\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path14:before{content:\"\\e949\";margin-left:-1em;color:#323232}.icon-chronic-health-hazard .path15:before{content:\"\\e94a\";margin-left:-1em;color:#323232}.icon-contingency:before{content:\"\\e94b\"}.icon-corrosive .path1:before{content:\"\\e94c\";color:#323232}.icon-corrosive .path2:before{content:\"\\e94d\";margin-left:-1em;color:#323232}.icon-corrosive .path3:before{content:\"\\e94e\";margin-left:-1em;color:#323232}.icon-corrosive .path4:before{content:\"\\e94f\";margin-left:-1em;color:#323232}.icon-corrosive .path5:before{content:\"\\e950\";margin-left:-1em;color:#323232}.icon-corrosive .path6:before{content:\"\\e951\";margin-left:-1em;color:#323232}.icon-corrosive .path7:before{content:\"\\e952\";margin-left:-1em;color:#323232}.icon-corrosive .path8:before{content:\"\\e953\";margin-left:-1em;color:#323232}.icon-corrosive .path9:before{content:\"\\e954\";margin-left:-1em;color:#323232}.icon-corrosive .path10:before{content:\"\\e955\";margin-left:-1em;color:#323232}.icon-corrosive .path11:before{content:\"\\e956\";margin-left:-1em;color:#323232}.icon-corrosive .path12:before{content:\"\\e957\";margin-left:-1em;color:#323232}.icon-corrosive .path13:before{content:\"\\e958\";margin-left:-1em;color:#323232}.icon-corrosive .path14:before{content:\"\\e959\";margin-left:-1em;color:#323232}.icon-corrosive .path15:before{content:\"\\e95a\";margin-left:-1em;color:#323232}.icon-corrosive .path16:before{content:\"\\e95b\";margin-left:-1em;color:#323232}.icon-corrosive .path17:before{content:\"\\e95c\";margin-left:-1em;color:#323232}.icon-corrosive .path18:before{content:\"\\e95d\";margin-left:-1em;color:#323232}.icon-corrosive .path19:before{content:\"\\e95e\";margin-left:-1em;color:#323232}.icon-corrosive .path20:before{content:\"\\e95f\";margin-left:-1em;color:#323232}.icon-corrosive .path21:before{content:\"\\e960\";margin-left:-1em;color:#e32730}.icon-dashboard:before{content:\"\\e961\"}.icon-database-sds:before{content:\"\\e962\"}.icon-description-add:before{content:\"\\e963\"}.icon-description-edit:before{content:\"\\e964\"}.icon-description-view:before{content:\"\\e965\";color:#666}.icon-document-read .path1:before{content:\"\\e966\";color:#000;opacity:.6}.icon-document-read .path2:before{content:\"\\e967\";margin-left:-1em;color:#fff}.icon-document-read .path3:before{content:\"\\e968\";margin-left:-1em;color:#000;opacity:.6}.icon-draft:before{content:\"\\e969\"}.icon-expired-off:before{content:\"\\e96a\"}.icon-expired-on:before{content:\"\\e96b\"}.icon-explosive .path1:before{content:\"\\e96c\";color:#e32730}.icon-explosive .path2:before{content:\"\\e96d\";margin-left:-1em;color:#323232}.icon-explosive .path3:before{content:\"\\e96e\";margin-left:-1em;color:#323232}.icon-explosive .path4:before{content:\"\\e96f\";margin-left:-1em;color:#323232}.icon-explosive .path5:before{content:\"\\e970\";margin-left:-1em;color:#323232}.icon-explosive .path6:before{content:\"\\e971\";margin-left:-1em;color:#323232}.icon-explosive .path7:before{content:\"\\e972\";margin-left:-1em;color:#323232}.icon-explosive .path8:before{content:\"\\e973\";margin-left:-1em;color:#323232}.icon-explosive .path9:before{content:\"\\e974\";margin-left:-1em;color:#323232}.icon-explosive .path10:before{content:\"\\e975\";margin-left:-1em;color:#323232}.icon-explosive .path11:before{content:\"\\e976\";margin-left:-1em;color:#323232}.icon-explosive .path12:before{content:\"\\e977\";margin-left:-1em;color:#323232}.icon-explosive .path13:before{content:\"\\e978\";margin-left:-1em;color:#323232}.icon-explosive .path14:before{content:\"\\e979\";margin-left:-1em;color:#323232}.icon-explosive .path15:before{content:\"\\e97a\";margin-left:-1em;color:#323232}.icon-explosive .path16:before{content:\"\\e97b\";margin-left:-1em;color:#323232}.icon-explosive .path17:before{content:\"\\e97c\";margin-left:-1em;color:#323232}.icon-explosive .path18:before{content:\"\\e97d\";margin-left:-1em;color:#323232}.icon-explosive .path19:before{content:\"\\e97e\";margin-left:-1em;color:#323232}.icon-explosive .path20:before{content:\"\\e97f\";margin-left:-1em;color:#323232}.icon-explosive .path21:before{content:\"\\e980\";margin-left:-1em;color:#323232}.icon-explosive .path22:before{content:\"\\e981\";margin-left:-1em;color:#323232}.icon-explosive .path23:before{content:\"\\e982\";margin-left:-1em;color:#323232}.icon-explosive .path24:before{content:\"\\e983\";margin-left:-1em;color:#323232}.icon-explosive .path25:before{content:\"\\e984\";margin-left:-1em;color:#323232}.icon-explosive .path26:before{content:\"\\e985\";margin-left:-1em;color:#323232}.icon-explosive .path27:before{content:\"\\e986\";margin-left:-1em;color:#323232}.icon-explosive .path28:before{content:\"\\e987\";margin-left:-1em;color:#323232}.icon-explosive .path29:before{content:\"\\e988\";margin-left:-1em;color:#323232}.icon-explosive .path30:before{content:\"\\e989\";margin-left:-1em;color:#323232}.icon-explosive .path31:before{content:\"\\e98a\";margin-left:-1em;color:#323232}.icon-explosive .path32:before{content:\"\\e98b\";margin-left:-1em;color:#323232}.icon-explosive .path33:before{content:\"\\e98c\";margin-left:-1em;color:#323232}.icon-explosive .path34:before{content:\"\\e98d\";margin-left:-1em;color:#323232}.icon-explosive .path35:before{content:\"\\e98e\";margin-left:-1em;color:#323232}.icon-explosive .path36:before{content:\"\\e98f\";margin-left:-1em;color:#323232}.icon-explosive .path37:before{content:\"\\e990\";margin-left:-1em;color:#323232}.icon-explosive .path38:before{content:\"\\e991\";margin-left:-1em;color:#323232}.icon-explosive .path39:before{content:\"\\e992\";margin-left:-1em;color:#323232}.icon-explosive .path40:before{content:\"\\e993\";margin-left:-1em;color:#323232}.icon-explosive .path41:before{content:\"\\e994\";margin-left:-1em;color:#323232}.icon-explosive .path42:before{content:\"\\e995\";margin-left:-1em;color:#323232}.icon-explosive .path43:before{content:\"\\e996\";margin-left:-1em;color:#323232}.icon-explosive .path44:before{content:\"\\e997\";margin-left:-1em;color:#323232}.icon-explosive .path45:before{content:\"\\e998\";margin-left:-1em;color:#323232}.icon-explosive .path46:before{content:\"\\e999\";margin-left:-1em;color:#323232}.icon-file-excel:before{content:\"\\e99a\"}.icon-file-pdf:before{content:\"\\e99b\"}.icon-file-pdf-verified .path1:before{content:\"\\e99c\";color:#000;opacity:.6}.icon-file-pdf-verified .path2:before{content:\"\\e99d\";margin-left:-1em;color:#fff}.icon-file-pdf-verified .path3:before{content:\"\\e99e\";margin-left:-1em;color:#000;opacity:.6}.icon-file-word:before{content:\"\\e99f\"}.icon-filter-alt:before{content:\"\\e9a0\"}.icon-flammable .path1:before{content:\"\\e9a1\";color:#323232}.icon-flammable .path2:before{content:\"\\e9a2\";margin-left:-1em;color:#323232}.icon-flammable .path3:before{content:\"\\e9a3\";margin-left:-1em;color:#e32730}.icon-gas-under-pressure .path1:before{content:\"\\e9a4\";color:#323232}.icon-gas-under-pressure .path2:before{content:\"\\e9a5\";margin-left:-1em;color:#e32730}.icon-health-hazard .path1:before{content:\"\\e9a6\";color:#323232}.icon-health-hazard .path2:before{content:\"\\e9a7\";margin-left:-1em;color:#e32730}.icon-line-break:before{content:\"\\e9a8\"}.icon-location:before{content:\"\\e9a9\"}.icon-measure-add:before{content:\"\\e9aa\"}.icon-measure-edit:before{content:\"\\e9ab\"}.icon-measure-view:before{content:\"\\e9ac\";color:#666}.icon-messages:before{content:\"\\e9ad\"}.icon-monitoring:before{content:\"\\e9ae\";color:#666}.icon-move:before{content:\"\\e9af\"}.icon-oxidizing .path1:before{content:\"\\e9b0\";color:#e32730}.icon-oxidizing .path2:before{content:\"\\e9b1\";margin-left:-1em;color:#323232}.icon-oxidizing .path3:before{content:\"\\e9b2\";margin-left:-1em;color:#323232}.icon-oxidizing .path4:before{content:\"\\e9b3\";margin-left:-1em;color:#323232}.icon-process-area-closed:before{content:\"\\e9b4\"}.icon-process-area-open:before{content:\"\\e9b5\"}.icon-process-linked .path1:before{content:\"\\e9b6\";color:#000;opacity:.6}.icon-process-linked .path2:before{content:\"\\e9b7\";margin-left:-1em;color:#666}.icon-risk:before{content:\"\\e9b8\"}.icon-search-in-file:before{content:\"\\e9b9\"}.icon-sort-ascending:before{content:\"\\e9ba\"}.icon-sort-descending:before{content:\"\\e9bb\"}.icon-subscript:before{content:\"\\e9bc\"}.icon-superscript:before{content:\"\\e9bd\"}.icon-syncronice-favorites:before{content:\"\\e9be\"}.icon-system-settings:before{content:\"\\e9bf\"}.icon-view-three-outlined:before{content:\"\\e9c0\"}.icon-workplace-safety:before{content:\"\\e9c1\"}.icon-checklist:before{content:\"\\e900\"}.icon-department-document .path1:before{content:\"\\e901\";color:#000;opacity:.6}.icon-department-document .path2:before{content:\"\\e902\";margin-left:-1em;color:#00804c}.icon-department-folder-closed .path1:before{content:\"\\e903\";color:#000;opacity:.6}.icon-department-folder-closed .path2:before{content:\"\\e904\";margin-left:-1em;color:#00804c}.icon-department-folder-open .path1:before{content:\"\\e905\";color:#000;opacity:.6}.icon-department-folder-open .path2:before{content:\"\\e906\";margin-left:-1em;color:#00804c}.icon-deviation:before{content:\"\\e907\"}.icon-dropdown-folder .path1:before{content:\"\\e908\";color:#00324e}.icon-dropdown-folder .path2:before{content:\"\\e909\";margin-left:-1em;color:#fff;opacity:.6}.icon-enterprise-document .path1:before{content:\"\\e90a\";color:#000;opacity:.6}.icon-enterprise-document .path2:before{content:\"\\e90b\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-closed .path1:before{content:\"\\e90c\";color:#000;opacity:.6}.icon-enterprise-folder-closed .path2:before{content:\"\\e90d\";margin-left:-1em;color:#cf4714}.icon-enterprise-folder-open .path1:before{content:\"\\e90e\";color:#000;opacity:.6}.icon-enterprise-folder-open .path2:before{content:\"\\e90f\";margin-left:-1em;color:#cf4714}.icon-folder-closed:before{content:\"\\e910\"}.icon-folder-open:before{content:\"\\e911\"}.icon-keyboard_arrow_down:before{content:\"\\e912\"}.icon-keyboard_arrow_up:before{content:\"\\e913\"}.icon-local-document .path1:before{content:\"\\e914\";color:#000;opacity:.6}.icon-local-document .path2:before{content:\"\\e915\";margin-left:-1em;color:#1954a9}.icon-local-folder-closed .path1:before{content:\"\\e916\";color:#000;opacity:.6}.icon-local-folder-closed .path2:before{content:\"\\e917\";margin-left:-1em;color:#1954a9}.icon-local-folder-open .path1:before{content:\"\\e918\";color:#000;opacity:.6}.icon-local-folder-open .path2:before{content:\"\\e919\";margin-left:-1em;color:#1954a9}.icon-process:before{content:\"\\e91a\"}.icon-regional-document .path1:before{content:\"\\e91c\";color:#000;opacity:.6}.icon-regional-document .path2:before{content:\"\\e91d\";margin-left:-1em;color:#662e0d}.icon-regional-folder-closed .path1:before{content:\"\\e91e\";color:#000;opacity:.6}.icon-regional-folder-closed .path2:before{content:\"\\e91f\";margin-left:-1em;color:#662e0d}.icon-regional-folder-open .path1:before{content:\"\\e920\";color:#000;opacity:.6}.icon-regional-folder-open .path2:before{content:\"\\e921\";margin-left:-1em;color:#662e0d}.select-access-paginator{max-height:150px!important}.mat-expansion-panel .mat-expansion-panel-body{padding-top:0!important}.mat-expansion-panel-header{font-weight:800!important}.mat-expansion-panel-header .title-content{font-size:12px!important}.w-100{width:100%}.h-100{height:100%}.pointer{cursor:pointer}.fw-600{font-weight:600}.label-item{font-weight:600;color:var(--ws-text-primary)}.sub-label{color:var(--ws-text-secondary)}.fs-14{font-size:14px}.fs-12{font-size:12px}.color-primary{color:var(--primary-light)!important}.header-title{font-weight:600;color:var(--ws-text-primary);font-size:16px}.mat-mdc-chip.chip-item-result{max-width:250px}.mat-mdc-chip.chip-item-result.item-department .qms-chip-body{display:flex;justify-content:center;align-items:center}.remove-chip-icon{cursor:pointer}.remove-chip-icon:hover{color:#000000b3}.mat-form-field-wrapper{padding-bottom:8px!important}.mat-expansion-panel{border-radius:unset!important}.mat-expansion-panel-header:not([aria-disabled=true]){background:unset}.mat-expansion-panel.mat-expanded .mat-expansion-panel-header{background:#e5eefb}.mat-expansion-panel.mat-expanded .mat-expansion-panel-header .qms-line{color:var(--primary-light)!important}.access-dialog-header{display:flex;justify-content:space-between;align-items:center}.mat-chip-list-wrapper{margin:unset!important}.item-list-wrapper{height:40vh;padding:4px 4px 4px 0;overflow-y:auto}.item-list-wrapper.no-result{height:50vh;display:flex;justify-content:center;align-items:center}.item-list-wrapper .item{min-height:40px}.item-list-wrapper .item-without-checkbox{min-height:45px;display:flex;justify-content:space-between;align-items:center;padding:4px 8px;cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:4px;transition:background .3s ease}.item-list-wrapper .item-without-checkbox.active{background:var(--primary-light-12-opacity)}.item-list-wrapper .item-without-checkbox:hover{background:var(--primary-light-6-opacity)}.item-list-wrapper .item-without-checkbox .mat-icon{color:var(--primary-light)!important}.confirm__button__groups .btn-add>.qms-btn-wrapper{display:flex;justify-content:center;align-items:center}.qms-dialog-content{display:grid;column-gap:8px}.qms-dialog-content.active{grid-template-columns:2fr 1fr;min-height:50vh}.qms-dialog-content .access-dialog-wraper .field-select-option .mat-form-field-wrapper{padding-bottom:16px!important}.qms-dialog-content .access-dialog-wraper .field-select-option .mat-form-field-underline{bottom:16px!important}.qms-dialog-content .result-wrapper{position:relative;width:100%;margin-left:8px}.qms-dialog-content .result-wrapper:after{position:absolute;content:\"\";top:0;left:0;background-color:#0000001f;height:100%;width:1px}.qms-dialog-content .result-selected-container{position:absolute;inset:0;overflow-y:auto;padding:0 8px}.qms-dialog-content .result-selected-container .result-header{height:51px;display:flex;align-items:center;position:sticky;top:0;z-index:10;padding:0!important;background:#fff;margin-bottom:12px}.qms-dialog-content .result-selected-container .result-header:after{position:absolute;content:\"\";bottom:0;left:0;width:100%;height:1px;background:#0000000a}.qms-dialog-content .result-selected-container .result-header .mat-mdc-card-content{height:51px;width:100%;padding-left:4px;display:flex;align-items:center;background-color:#0000000a}.option-selected-content .group-filter-person-option{display:flex;flex-direction:row-reverse;justify-content:center;align-items:center;gap:8px}span.chip-item__content_name{display:inline-block;max-width:175px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}span.chip-item-children__count{font-size:.75rem;color:#00000080;font-weight:600}.mat-mdc-slide-toggle.qms-group-options{padding:unset!important}.input-option-filter .mat-form-field-wrapper{padding-bottom:8px!important}.input-option-filter .mat-form-field-underline{bottom:8px!important}.slide-toggle{margin-bottom:8px}.confirm__button__groups.none-option{margin-top:85px}.btn-icon-clear{position:relative;padding:0 1rem}.btn-icon-clear .qms-btn-icon{margin-right:unset!important}.btn-icon-clear:after{position:absolute;content:\"\";left:0;top:0;height:100%;width:1px;background:#0000004d}.qms-paginator .mat-mdc-paginator-container .qms-total-result{margin-bottom:0;margin-right:12px;height:100%;display:flex;align-items:center}.qms-paginator .mat-mdc-paginator-container .qms-total-result span{font-weight:600;color:#000c}.qms-paginator .mat-mdc-paginator-container .qms-paginator-range-actions{margin-bottom:0;column-gap:2px}.qms-paginator .mat-mdc-paginator-container .qms-paginator-range-actions>.qms-total-result{margin-bottom:0}.qms-paginator .qms-paginator-page-size{align-items:center}.qms-paginator .mat-form-field-wrapper{padding-bottom:0!important}.mat-mdc-checkbox.checkbox-all .mat-checkbox-label{flex-direction:row!important;align-items:center!important;column-gap:4px!important}.mat-expansion-panel.qms-expansion{margin:0!important}.access-department .qms-view-search-result{height:100%!important}.access-department .qms-view-search-result .result{max-height:calc(100% - 80px)!important}.access-department .loading-container{height:calc(100% - 40px)!important}.qms-loading-container{height:45vh;overflow:hidden;display:grid;grid-template-rows:repeat(60px)}.qms-loading-container .qms-loader{position:relative;width:100%;height:100%;padding:10px 0;overflow:hidden}.qms-loading-container .qms-loader:after{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;background:linear-gradient(110deg,#e9e9e900,#e3e3e300 40%,#e3e3e380 50%,#e3e3e300 60% 100%);animation:animate-loading 1.2s linear infinite}.qms-loading-container .qms-loader__wrapper{position:relative;width:100%;height:100%}.qms-loading-container .qms-loader__wrapper .row-loader{background-color:#eee;position:absolute;left:0;width:100%;height:40px;overflow:hidden}@keyframes animate-loading{0%{transform:translate(-100%)}to{transform:translate(100%)}}.btn-close-dialog.qms-btn-icon:focus:not(:hover){background-color:unset!important;color:unset!important}.mdc-evolution-chip-set .mat-mdc-standard-chip .mdc-evolution-chip__cell--primary,.mdc-evolution-chip-set .mat-mdc-standard-chip .mdc-evolution-chip__action--primary,.mdc-evolution-chip-set .mat-mdc-standard-chip .mat-mdc-chip-action-label{overflow:hidden}\n"] }]
|
|
38442
38514
|
}], ctorParameters: () => [{ type: i1$2.MatDialogRef }, { type: QMSSelectAccessDialog, decorators: [{
|
|
38443
38515
|
type: Inject,
|
|
38444
38516
|
args: [MAT_DIALOG_DATA]
|
|
@@ -38453,6 +38525,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
38453
38525
|
}], pagingUserGroup: [{
|
|
38454
38526
|
type: ViewChild,
|
|
38455
38527
|
args: ['pagingUserGroup']
|
|
38528
|
+
}], pagingDepartment: [{
|
|
38529
|
+
type: ViewChild,
|
|
38530
|
+
args: ['pagingDepartment']
|
|
38456
38531
|
}] } });
|
|
38457
38532
|
|
|
38458
38533
|
class QMSSelectAccessDialogModule {
|
|
@@ -39618,7 +39693,7 @@ class SelectProcessDataTreeComponent {
|
|
|
39618
39693
|
//this.handleCheckNode(node);
|
|
39619
39694
|
}
|
|
39620
39695
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectProcessDataTreeComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$3.DomSanitizer }, { token: QMSIconRegistryService }, { token: i4.MatIconRegistry }, { token: i0.ElementRef }, { token: TranslateLibraryService }, { token: i1$1.Overlay }, { token: i0.ViewContainerRef }, { token: QMSSelectDepartmentTreeGlobalService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
39621
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SelectProcessDataTreeComponent, selector: "qms-select-process-data-tree", inputs: { rowsSkeleton: "rowsSkeleton", height: "height", config: "config" }, outputs: { onSearchEvent: "onSearchEvent", onPagingSearchEvent: "onPagingSearchEvent", onValueChangeEvent: "onValueChangeEvent", selectionNodeChangeEvent: "selectionNodeChangeEvent", onCheckNodeEvent: "onCheckNodeEvent", onExpandNodeEvent: "onExpandNodeEvent", onLoadMoreEvent: "onLoadMoreEvent", onCheckItemSearchEvent: "onCheckItemSearchEvent", onCheckAllItemSearchEvent: "onCheckAllItemSearchEvent", toggleIncludeChildEvent: "toggleIncludeChildEvent" }, viewQueries: [{ propertyName: "cdkVirtualScrollViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "paginatorSearch", first: true, predicate: ["paginatorSearch"], descendants: true }], ngImport: i0, template: "<div [ngClass]=\"['qms-select-department-tree-container', (config.customClass || '')]\">\n <div class=\"input-select-department\">\n <form (ngSubmit)=\"!getLoading$.value\" *ngIf=\"config.enableTreeSearch\" class=\"input-field\">\n <mat-form-field class=\"w100\" qms-form qms-search-field>\n <input [formControl]=\"formSearchControl\" type=\"text\" placeholder=\"{{ LANG.SEARCH }}\" matInput />\n <button *ngIf=\"!getLoading$.value\" type=\"submit\" qms-btn-icon color=\"light\" matSuffix>\n <mat-icon>search</mat-icon>\n </button>\n <mat-progress-spinner [@inOutAnimation] matSuffix mode=\"indeterminate\" diameter=\"20\"\n *ngIf=\"getLoading$.value\"></mat-progress-spinner>\n <div *ngIf=\"!!formSearchControl.value && !getLoading$.value\" qms-input-clear matSuffix>\n <button qms-btn-icon color=\"light\" [@inOutAnimation] aria-label=\"Clear\" (click)=\"formSearchControl.reset()\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n </mat-form-field>\n </form>\n <div [@inOutAnimation] *ngIf=\"(getIndexView$ | async) === 1 && (textSearchSubject$ | async)\"\n class=\"sub-text ms-1 fw500\">\n {{LANG.RESULT_SEARCH_FOR}}<i><b>\"{{textSearchSubject$ | async}}\"</b></i>\n </div>\n <div [class.justify-content-between]=\"config.enableIncludeChild && !config.isSelectOne\"\n class=\"select__toggle-include toggle-include-child my-1 d-flex justify-content-end align-items-center\">\n <mat-slide-toggle *ngIf=\"config.enableIncludeChild && !config.isSelectOne\"\n [disabled]=\"(getIndexView$ | async) === 1 && config.disableToggleIncludeChildWhenChangeView\"\n [(ngModel)]=\"isIncludeChildren\" (ngModelChange)=\"toggleIncludeChildEvent.emit($event)\" color=\"default\"\n qms-group-options>\n <span class=\"text-label\">{{config.selectIncludeLabel || LANG.SELECT_INCLUDE_CHILD}}</span>\n </mat-slide-toggle>\n <button class=\"btn-arrow\" [@inOutAnimation] *ngIf=\"(getIndexView$ | async) === 1 && config.enableTreeSearch\"\n (click)=\"setIndexView(0)\" qms-btn-icon color=\"light\" [qms-tool-tip]=\"LANG.BACK_TO_TREE\" mode=\"dark\"\n position=\"top\">\n <mat-icon>arrow_back</mat-icon>\n </button>\n <button class=\"btn-arrow\" [@inOutAnimation]\n *ngIf=\"(getIndexView$ | async) === 0 && config.enableTreeSearch && (textSearchSubject$ | async)\"\n (click)=\"setIndexView(1)\" qms-btn-icon color=\"light\" [qms-tool-tip]=\"LANG.GOTO_SEACH_RESULT\" mode=\"dark\"\n position=\"top\">\n <mat-icon>arrow_forward</mat-icon>\n </button>\n </div>\n </div>\n <div [@inOutAnimation]\n *ngIf=\"(getIndexView$ | async) === 0 && config.modeView === MODE_VIEW_ENUM.ExternalView && !!config.headerName\"\n class=\"header-view-tree\">\n <div class=\"header-view header-title\">\n {{config.headerName.treeName}}\n </div>\n <div class=\"header-view header-title\">\n {{config.headerName.externalName}}\n </div>\n </div>\n <mat-divider class=\"mx-auto\"></mat-divider>\n <div [@animateSlideView]=\"(getIndexView$ | async)\" [ngStyle]=\"{\n minHeight: height\n }\" class=\"tree-department-wrapper\">\n <div *ngIf=\"(getIndexView$ | async) === 0\" class=\"tree-view w100 h100\">\n <div class=\"tree-view-main h100\">\n <div *ngIf=\"!config.isSelectOne && !!treeControl.dataNodes && config.activeSelectAllNode\"\n class=\"checkbox-all-tree\" [class.sticky-position]=\"config.modeView === MODE_VIEW_ENUM.ExternalView\">\n <!-- Checkbox all root node -->\n <mat-checkbox [@inOutAnimation] (click)=\"onCheckAllRootTreeNode()\"\n [indeterminate]=\"isIndeterminateCheckboxAllTree\" [checked]=\"isAllDepartmentSelected\" qms-group-options\n color=\"default\" label=\"none\" class=\"checkbox-all\">\n <span class=\"text-label \">{{LANG.CHOOSE_ALL}}(<b>{{treeControl.dataNodes.length}}</b>)</span>\n </mat-checkbox>\n <mat-divider class=\"mx-auto\"></mat-divider>\n </div>\n <cdk-virtual-scroll-viewport *ngIf=\"dataSource.data\" [ngClass]=\"{\n 'has-checkbox-all': !config.isSelectOne && config.modeView === MODE_VIEW_ENUM.Basic,\n 'select-department-tree': true\n }\" [itemSize]=\"ITEM_SIZE\" [ngStyle]=\"{height: height}\">\n <ng-container *cdkVirtualFor=\"let node of dataSource; trackBy: trackBy\">\n <div class=\"qms-tree-node mt-1\" [style.padding-left]=\"node.level * (config.isMobile ? 12 :24) + 'px'\"\n [attr.data-id]=\"node.id\" [id]=\"'mat-node-'+node.id\" [@triggerColor]=\"activeNode == node.id\" [ngClass]=\"{\n 'mat-tree-node-disabled-all': node.disabled,\n 'w-100': config.isSelectOne,\n 'selected-theme': this.checkListSelection.isSelected(node) && config.isSelectOne,\n 'expand-node': treeControl.isExpandable(node) && treeControl.isExpanded(node),\n 'active-external-view': config.modeView === MODE_VIEW_ENUM.ExternalView,\n 'node-loading': node.isLoading\n }\">\n <div class=\"node-expand-area\">\n <button class=\"btn-toggle\" qms-btn-icon color=\"light\" (click)=\"onExpandNode(node)\"\n *ngIf=\"treeControl.isExpandable(node) && !node.isLoading\">\n <mat-icon>\n {{ treeControl.isExpanded(node) ? \"expand_more\" : \"chevron_right\" }}\n </mat-icon>\n </button>\n <ng-container *ngIf=\"node.isLoading; then loadingSpinner\"></ng-container>\n </div>\n <ng-container [ngTemplateOutlet]=\"config.isSelectOne ? nodeWithoutCheckboxTemplate : showCheckboxTemplate\"\n [ngTemplateOutletContext]=\"{ node: node }\"></ng-container>\n <div *ngIf=\"config.modeView === MODE_VIEW_ENUM.ExternalView\" class=\"external-view-node\">\n <span class=\"node-external\" qms-elipsify position=\"top\" mode=\"dark\">\n {{node.externalName || ''}}\n </span>\n </div>\n </div>\n </ng-container>\n </cdk-virtual-scroll-viewport>\n <ng-container [@inOutAnimation] *ngIf=\"config.spinnerWhenGetMore && getLoadingMore$| async ;then maskOverlay\">\n </ng-container>\n </div>\n </div>\n <div *ngIf=\"(getIndexView$ | async) === 1\" [ngStyle]=\"{\n height: height\n }\" class=\"qms-view-search-result\">\n <div *ngIf=\"config.modeView === MODE_VIEW_ENUM.ExternalView\"\n class=\"qms-view-search-result__header d-flex align-items-center justify-content-between\">\n <div class=\"header-title\">\n <span qms-elipsify mode=\"dark\" position=\"top\">\n {{config.headerName.resultSearchName}}\n </span>\n </div>\n <div class=\"header-title\">\n <span qms-elipsify mode=\"dark\" position=\"top\">\n {{config.headerName.externalName}}\n </span>\n </div>\n </div>\n <ng-container *ngIf=\"getLoading$.value; then loading\"></ng-container>\n <div class=\"qms-view-search-result__wrapper\"\n [class.active-external]=\"config.modeView === MODE_VIEW_ENUM.ExternalView\"\n *ngIf=\"!!resultSearch.length && !getLoading$.value\">\n <div class=\"\">\n <mat-checkbox [@inOutAnimation]\n [disabled]=\"!resultSearch.length || config.isSelectOne || isDisableChecboxAllSearch()\" #checkAllSearch\n [indeterminate]=\"indeterminateSearchResult\" [checked]=\"isSelectAllResultSearch\" qms-group-options\n color=\"default\" label=\"none\" class=\"checkbox-all\"\n (click)=\"!config.isSelectOne && onSelectAllSearchResult(checkAllSearch.checked)\">\n <span class=\"text-label header-title\">{{LANG.CHOOSE_ALL}}</span>\n <span>(<b>{{resultSearch.length}}</b>)</span>\n </mat-checkbox>\n </div>\n <div [@inOutAnimation] [@listAnimation]\n [class.active-paging]=\"searchDepartment$.value.length > 10 && config.enablePagingSearch\" class=\"result\">\n <div [qms-tool-tip]=\"!canHandleItemSearchResult(item) ? LANG.ITEM_NOT_MATCH_TO_TREE : ''\" mode=\"dark\"\n position=\"top\" *ngFor=\"let item of resultSearch\"\n (click)=\"$event.stopImmediatePropagation(); !item.disabled && onCheckItemSearchResult(item)\"\n [class.active]=\"checkListSelectionSearch.isSelected(item)\" class=\"result-item user-select-none\" matRipple>\n <mat-checkbox [@inOutAnimation] *ngIf=\"!item.isLoading\" [disabled]=\"item.disabled\"\n (click)=\"$event.stopImmediatePropagation(); !item.disabled && onCheckItemSearchResult(item)\"\n [checked]=\"checkListSelectionSearch.isSelected(item)\" qms-group-options color=\"default\" label=\"none\">\n </mat-checkbox>\n <div *ngIf=\"item.isLoading\" [@inOutAnimation] class=\"position-relative\">\n <ng-container *ngIf=\"item.isLoading; then loadingSpinner\"></ng-container>\n </div>\n <div class=\"result-item__content\">\n <div class=\"item-result-content-wraper\">\n <div class=\"text-gray fw-bold fs-base mb0\">{{item.name}}</div>\n <qms-breadcrumb *ngIf=\"item.location?.length > 1\" [type]=\"config.isMobile ? 'mobile': ''\"\n [numDisplayItem]=\"6\" (onItemClick)=\"$event.stopImmediatePropagation()\" class=\"breadcrumb-container\"\n [nodes]=\"item.location\">\n </qms-breadcrumb>\n <div *ngIf=\"item.location?.length === 1\" class=\"d-flex align-items-center\">\n <span qms-elipsify mode=\"dark\" position=\"top\"\n class=\"item-breadcrumb-disable d-block\">{{item.location[0].name}}</span>\n </div>\n </div>\n <div *ngIf=\"config.modeView === MODE_VIEW_ENUM.ExternalView\" class=\"external-name\">\n <span qms-elipsify mode=\"dark\" position=\"top\" class=\"text-gray fs-base mb0\">{{item.externalName}}\n </span>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div [@inOutAnimation] *ngIf=\"!resultSearch.length && !getLoading$.value\" class=\"result no-result\">\n <ng-container *ngTemplateOutlet=\"noResult\"></ng-container>\n </div>\n <mat-divider *ngIf=\"searchDepartment$.value.length > 10 && config.enablePagingSearch\"\n class=\"mx-auto\"></mat-divider>\n <qms-paginator #paginatorSearch *ngIf=\"searchDepartment$.value.length > 10 && config.enablePagingSearch \"\n [length]=\"searchDepartment$.value.length\" [numHidden]=\"0\" [pageSize]=\"CURRENT_PAGESIZE\"\n [pageSizeOptions]=\"PAGE_SIZE_OPTION\" (page)='onPagingSearchResult($event)'\n [size]='config.isMobile ? PAGINATION_SIZE.small : PAGINATION_SIZE.medium'>\n </qms-paginator>\n </div>\n </div>\n\n <!-- Template for Checkbox -->\n <ng-template #showCheckboxTemplate let-node=\"node\">\n <mat-checkbox [id]=\"'node-'+node.id\" qms-group-options color=\"default\" label=\"none\" class=\"flex-direction-row\"\n [disabled]=\"node.isLoading\" [checked]=\"checkListSelection.isSelected(node)\"\n (click)=\"!node.isLoading && onCheckNode(node)\" [attr.disabled]=\"node.disabled || node.isLoading\">\n <img [title]=\"node.itemIconSvg\" *ngIf=\"node.itemIconSvg\" class=\"material-icons type-icon\"\n [src]=\"node.itemIconSvg\" />\n <span *ngIf=\"node.itemIcon\" [class]=\"node.itemIcon\" [qmsTransformIcon]=\"node.itemIcon\"\n class=\"material-icons-outlined type-icon\"></span>\n <span *ngIf=\"node.itemMatIcon\" class=\"material-icons-outlined type-icon\">{{\n node.itemMatIcon }}\n </span>\n <span class=\"text-name cursor-pointer ml5 123\" [ngClass]=\"{ disabled: node.disabled }\">{{ node.name}}\n </span>\n </mat-checkbox>\n </ng-template>\n\n <!-- Template node without checkbox -->\n <ng-template #nodeWithoutCheckboxTemplate let-node=\"node\">\n <div [id]=\"'node-'+node.id\" (click)=\"onCheckNode(node)\" class=\"node-without-checkbox\">\n <div class=\"node-info\">\n <span *ngIf=\"node.itemIcon\" [class]=\"node.itemIcon\" [qmsTransformIcon]=\"node.itemIcon\"\n class=\"material-icons-outlined type-icon\"></span>\n <span *ngIf=\"node.itemMatIcon\" class=\"material-icons-outlined type-icon\">{{\n node.itemMatIcon }}\n </span>\n <span class=\"text-name cursor-pointer pl-10 123\" [ngClass]=\"{ disabled: node.disabled }\">{{ node.name }}</span>\n </div>\n <div class=\"node-state\">\n <mat-icon *ngIf=\"checkListSelection.isSelected(node)\">check</mat-icon>\n </div>\n </div>\n </ng-template>\n</div>\n\n<ng-template #noResult>\n <svg width=\"89\" height=\"130\" viewBox=\"0 0 89 88\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"white\" />\n <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"#0163B2\" fill-opacity=\"0.12\" />\n <path\n d=\"M44.5 56.6936L58.096 64.8996L54.488 49.4336L66.5 39.0276L50.682 37.6856L44.5 23.0996L38.318 37.6856L22.5 39.0276L34.512 49.4336L30.904 64.8996L44.5 56.6936Z\"\n fill=\"#0163B3\" />\n <text x=\"10\" y=\"105\" fill=\"#0163B2\">{{LANG.NO_RESULT}}</text>\n </svg>\n</ng-template>\n\n<!-- Template loading -->\n<ng-template #loading>\n <div [ngStyle]=\"{\n 'height': searchDepartment$.value.length ? (config.modeView === MODE_VIEW_ENUM.ExternalView ? 'calc(100% - 90px)' : 'calc(100% - 50px)' ) : height\n }\" class=\"qms-loading-container\">\n <div class=\"qms-loader\" *ngFor=\"let item of arrSkeleton\">\n <div class=\"qms-loader__wrapper\">\n <div class=\"row-loader\">\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n\n<!-- Template mask overlay -->\n<ng-template #maskOverlay>\n <div class=\"mask-overlay\">\n <mat-spinner [diameter]=\"50\" [strokeWidth]=\"5\"></mat-spinner>\n </div>\n</ng-template>\n\n<!-- Loading spinner -->\n<ng-template #loadingSpinner>\n <div class=\"qms-spinner center\">\n <mat-spinner [diameter]=\"20\" [strokeWidth]=\"2\"></mat-spinner>\n </div>\n</ng-template>", styles: [".qms-select-department-tree-container{font-family:Open Sans,sans-serif}.qms-select-department-tree-container .mr10{margin-right:10px}.qms-select-department-tree-container .mt5{margin-bottom:5px}.qms-select-department-tree-container .mb5{margin-top:5px}.qms-select-department-tree-container .w100{width:100%}.qms-select-department-tree-container .h100{height:100%}.qms-select-department-tree-container .fw500{font-weight:500!important}.qms-select-department-tree-container .text-right{text-align:right}.qms-select-department-tree-container .mt20{margin-top:20px}.qms-select-department-tree-container .d-flex{display:flex}.qms-select-department-tree-container .align-items-center{align-items:center}.qms-select-department-tree-container .justify-content-end{justify-content:flex-end}.qms-select-department-tree-container .text-selected{color:#0009;font-size:12px;line-height:16px;margin-top:1rem}.qms-select-department-tree-container .input-field{display:flex;align-items:center;position:relative}.qms-select-department-tree-container .input-field ::ng-deep .mat-form-field-wrapper{padding-bottom:8px!important}.qms-select-department-tree-container .input-field ::ng-deep .mat-form-field-underline{bottom:8px!important}.qms-select-department-tree-container .input-field input.input-search{width:100%;padding:10px;outline:none;border:none;background:var(--background-input-text)}.qms-select-department-tree-container .input-field .btn-search{cursor:pointer;vertical-align:middle;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.qms-select-department-tree-container .input-field .line__divider{border-bottom:1px solid #ccc;height:1px;margin-top:10px;min-width:300px;max-width:100%}.qms-select-department-tree-container .header-title{font-weight:500;color:var(--ws-text-primary);font-size:16px;display:flex;align-items:center}.qms-select-department-tree-container .header-title .header-view{padding:4px 0}.qms-select-department-tree-container .sticky-position{position:sticky;top:0;left:0;z-index:1;background:#fff}.qms-select-department-tree-container .header-view-tree{display:grid;grid-template-columns:1fr 200px;column-gap:2px;padding:4px 12px 4px 0}.qms-select-department-tree-container .header-view-tree .header-view:nth-child(1){padding-left:12px}.qms-select-department-tree-container .tree-department-wrapper{padding-right:4px;overflow:hidden;position:relative;transition:height .3s ease-in-out}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view{width:100%;display:grid;grid-template-columns:1fr 200px;column-gap:2px}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main>.separate{height:38px}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main>.separate.h-0{height:0}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main:last-child{height:100%;padding-left:4px;position:relative}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main:last-child:after{position:absolute;content:\"\";top:0;bottom:-38px;left:0;width:1px;background:#0000001f}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main .external-list-item-container .node-external{overflow:hidden;transition:all .1s ease-in-out}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main .external-list-item-container .node-external .node-external-content{padding:5px 15px;height:calc(100% - 2px);color:var(--default-color);font-size:14px;display:flex;align-items:center}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main .external-list-item-container .node-external .node-external-content span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qms-select-department-tree-container .mask-overlay{z-index:1000;background-color:#2221211a;position:absolute;top:0;left:0;width:100%;height:100%;border-radius:4px;overflow:hidden;display:grid;place-items:center}.qms-select-department-tree-container .select-department-tree>.cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper{padding:0 4px!important}.qms-select-department-tree-container .select-department-tree .qms-tree-node{display:flex;align-items:center;border-radius:4px}.qms-select-department-tree-container .select-department-tree .qms-tree-node:hover{background-color:#00000014}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.node-expand-area{width:48px;height:48px;position:relative}.qms-select-department-tree-container .select-department-tree .qms-tree-node.active-external-view .mat-mdc-checkbox.qms-group-options{width:calc(100% - 250px)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.node-loading{background:var(--primary-light-6-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node{flex-basis:200px;overflow:hidden}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node .node-external{overflow:hidden;transition:all .1s ease-in-out;display:block}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node .node-external .node-external-content{padding:5px 15px;height:calc(100% - 2px);color:var(--default-color);font-size:14px;display:flex;align-items:center}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node .node-external .node-external-content span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node{color:var(--primary)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node:hover{background:var(--primary-light-6-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node:active{background:var(--primary-light-12-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node .mat-icon{color:var(--primary)}.qms-select-department-tree-container .select-department-tree .qms-tree-node .node-without-checkbox{cursor:pointer;width:100%;display:flex;justify-content:space-between;align-items:center}.qms-select-department-tree-container .select-department-tree .qms-tree-node .node-without-checkbox .mat-icon{color:var(--primary);margin-right:4px}.qms-select-department-tree-container .select-department-tree .qms-tree-node.selected-theme{background:var(--primary-light-12-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all{cursor:default!important;pointer-events:none;-webkit-user-select:none;user-select:none}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all button.mat-button-disabled,.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all .mat-icon-rtl-mirror,.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all .type-icon{color:#00000061}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all .text-name.disabled{color:#00000061;cursor:default!important;pointer-events:none;-webkit-user-select:none;user-select:none}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all.active{background-color:transparent}.qms-select-department-tree-container .text-name{position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;cursor:pointer;width:100%}.qms-select-department-tree-container .cursor-pointer{cursor:pointer}.qms-select-department-tree-container .ml5{margin-left:15px!important}.qms-select-department-tree-container .pl-10{padding-left:10px}.qms-select-department-tree-container ::ng-deep .mat-mdc-checkbox.qms-group-options.flex-direction-row .mat-checkbox-layout{white-space:normal}.qms-select-department-tree-container ::ng-deep .mat-mdc-checkbox.qms-group-options.flex-direction-row .node-text>span{display:block}.qms-select-department-tree-container ::ng-deep .mat-mdc-checkbox.qms-group-options.flex-direction-row .mat-checkbox-label{flex-direction:row;align-items:center;position:relative;padding-bottom:2px}.qms-select-department-tree-container .qms-view-search-result{width:100%;overflow:hidden}.qms-select-department-tree-container .qms-view-search-result__header{position:relative}.qms-select-department-tree-container .qms-view-search-result__header:after{position:absolute;content:\"\";bottom:0;left:0;width:100%;height:1px;background-color:#0000001a}.qms-select-department-tree-container .qms-view-search-result__header .header-title{padding:8px 0;display:inline-block}.qms-select-department-tree-container .qms-view-search-result__header .header-title:nth-child(1){padding-left:12px}.qms-select-department-tree-container .qms-view-search-result__header .header-title:nth-child(2){flex-basis:200px}.qms-select-department-tree-container .qms-view-search-result>.no-result{height:100%;display:flex;justify-content:center;align-items:center}.qms-select-department-tree-container .qms-view-search-result__wrapper{height:calc(100% - 50px);width:100%}.qms-select-department-tree-container .qms-view-search-result__wrapper.active-external{height:calc(100% - 90px)!important}.qms-select-department-tree-container .qms-view-search-result__wrapper .result{max-height:calc(100% - 44px);overflow-y:auto;margin-bottom:4px;padding-right:4px}.qms-select-department-tree-container .qms-view-search-result__wrapper .result.active-paging{max-height:calc(100% - 40px)}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item{border-radius:4px;display:grid;grid-template-columns:45px 1fr;align-items:center;cursor:pointer;transition:background .3s ease;min-height:40px}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item:not(:nth-child(1)){margin-top:4px!important}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item:hover,.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item.active{background:linear-gradient(0deg,#0163b21f,#0163b21f),#fff}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content{display:flex;align-items:center}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content .item-result-content-wraper{padding:5px 15px;width:100%}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content .external-name{flex-basis:200px}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content .external-name span{width:200px;display:inline-block}.qms-select-department-tree-container .qms-view-search-result ::ng-deep .mat-mdc-checkbox.qms-group-options{display:flex;height:100%}.qms-select-department-tree-container ::ng-deep .breadcrumb-container{flex-wrap:wrap}.qms-select-department-tree-container ::ng-deep .mat-button-focus-overlay{background-color:transparent}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item{margin:0}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;transition:color .3s ease}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item-text:not(:last-child){max-width:150px!important}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-total-result{margin-bottom:0;margin-right:12px;height:100%;display:flex;align-items:center}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-total-result span{font-weight:600;color:#000c}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-paginator-range-actions{margin-bottom:0;column-gap:2px}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-paginator-range-actions>.qms-total-result{margin-bottom:0}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-form-field-wrapper{padding-bottom:0}.qms-select-department-tree-container ::ng-deep .qms-paginator .qms-paginator-page-size{align-items:center}.qms-select-department-tree-container .text-gray{color:#242424}.qms-select-department-tree-container .mb0{margin-bottom:0!important}.qms-select-department-tree-container .fs-base{font-size:14px!important}.qms-select-department-tree-container .user-select-none{-webkit-user-select:none;user-select:none}.qms-select-department-tree-container .item-breadcrumb-disable{cursor:not-allowed;color:#0009;font-weight:400;font-size:14px}.qms-select-department-tree-container ::ng-deep .mat-mdc-checkbox.checkbox-all .mat-checkbox-label{flex-direction:row;align-items:center;column-gap:4px}.qms-select-department-tree-container ::ng-deep .btn-arrow{width:40px;height:40px;line-height:40px}.qms-select-department-tree-container .qms-loading-container{overflow:hidden;display:grid;grid-template-rows:repeat(60px)}.qms-select-department-tree-container .qms-loading-container .qms-loader{position:relative;width:100%;height:100%;padding:10px 0;overflow:hidden}.qms-select-department-tree-container .qms-loading-container .qms-loader:after{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;background:linear-gradient(110deg,#e9e9e900,#e3e3e300 40%,#e3e3e380 50%,#e3e3e300 60% 100%);animation:animate-loading 1.2s linear infinite}.qms-select-department-tree-container .qms-loading-container .qms-loader__wrapper{position:relative;width:100%;height:100%}.qms-select-department-tree-container .qms-loading-container .qms-loader__wrapper .row-loader{background-color:#eee;position:absolute;left:0;width:100%;height:40px}@keyframes animate-loading{0%{transform:translate(-100%)}to{transform:translate(100%)}}.qms-select-department-tree-container .qms-spinner{font-size:20px;position:relative;display:inline-block;width:1em;height:1em}.qms-select-department-tree-container .qms-spinner.center{position:absolute;inset:0;margin:auto}.qms-select-department-tree-container ::ng-deep .mat-mdc-progress-spinner circle,.qms-select-department-tree-container .mat-mdc-progress-spinner circle{stroke:#1b75be!important}@media screen and (max-width: 600px){.qms-select-department-tree-container .external-view-node{flex-basis:65px!important}.qms-select-department-tree-container .qms-tree-node.active-external-view .mat-mdc-checkbox.qms-group-options{width:calc(100% - 110px)!important}.qms-select-department-tree-container .header-view-tree{grid-template-columns:1fr 80px!important}.qms-select-department-tree-container ::ng-deep .cdk-virtual-scroll-content-wrapper{right:0!important}.qms-select-department-tree-container .header-title{font-size:14px!important}.qms-select-department-tree-container .text-name,.qms-select-department-tree-container .node-external,.qms-select-department-tree-container .text-label,.qms-select-department-tree-container .text-label+span{font-size:12px}.qms-select-department-tree-container .node-expand-area{width:30px!important;height:30px!important}.qms-select-department-tree-container .node-expand-area .qms-btn-icon{width:30px;height:30px;line-height:30px}.qms-select-department-tree-container .fs-base{font-size:12px!important}.qms-select-department-tree-container .qms-select-department-tree-container .breadcrumb-container{flex-wrap:nowrap!important}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item-text{font-size:12px!important;max-width:175px!important}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-total-result{display:none!important}.qms-select-department-tree-container ::ng-deep .qms-paginator .size-small .mat-mdc-paginator-container{justify-content:center!important}.qms-select-department-tree-container .qms-view-search-result__header>.header-title:nth-child(2){flex-basis:120px!important}.qms-select-department-tree-container .result-item__content .external-name{flex-basis:75px!important}.qms-select-department-tree-container .result-item__content .external-name span{width:75px!important}}\n"], dependencies: [{ kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i7.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i7$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: QMSSearchFieldDirective, selector: "mat-form-field[qms-search-field]", inputs: ["isLoading"] }, { kind: "directive", type: QMSInputClearDirective, selector: "[qms-input-clear]" }, { kind: "directive", type: QMSFormFieldDirective, selector: "[qms-form]" }, { kind: "directive", type: QMSGroupOptionDirective, selector: "[qms-group-options]", inputs: ["label"] }, { kind: "directive", type: AutocompleteOffDirective, selector: "[qms-group-options]" }, { kind: "directive", type: QMSToolTipRendererDirective, selector: "[qms-tool-tip]", inputs: ["showToolTip", "mode", "qms-tool-tip", "contentTemplate", "position"] }, { kind: "directive", type: QMSMultiIconDirective, selector: "[qmsTransformIcon]", inputs: ["qmsTransformIcon"] }, { kind: "directive", type: EllipsifyDirective, selector: "[qms-elipsify]" }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i11.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i11.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i17.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: QMSButtonIcon, selector: "button[qms-btn-icon]", inputs: ["disabled", "color", "active"], exportAs: ["qmsButtonIcon"] }, { kind: "component", type: i16.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: QMSBreadcrumb, selector: "qms-breadcrumb", inputs: ["nodes", "type", "maxLine", "numDisplayItem", "onlyItem", "disabledLastItem"], outputs: ["onItemClick"] }, { kind: "directive", type: i14.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: QMSPaginatorComponent, selector: "qms-paginator", inputs: ["numHidden", "size", "pageSizeOptions", "pageSize", "length", "pageIndex", "overlayPanelClass"], outputs: ["page"] }, { kind: "component", type: i23.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i24.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i24.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i24.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }], animations: [
|
|
39696
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SelectProcessDataTreeComponent, selector: "qms-select-process-data-tree", inputs: { rowsSkeleton: "rowsSkeleton", height: "height", config: "config" }, outputs: { onSearchEvent: "onSearchEvent", onPagingSearchEvent: "onPagingSearchEvent", onValueChangeEvent: "onValueChangeEvent", selectionNodeChangeEvent: "selectionNodeChangeEvent", onCheckNodeEvent: "onCheckNodeEvent", onExpandNodeEvent: "onExpandNodeEvent", onLoadMoreEvent: "onLoadMoreEvent", onCheckItemSearchEvent: "onCheckItemSearchEvent", onCheckAllItemSearchEvent: "onCheckAllItemSearchEvent", toggleIncludeChildEvent: "toggleIncludeChildEvent" }, viewQueries: [{ propertyName: "cdkVirtualScrollViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "paginatorSearch", first: true, predicate: ["paginatorSearch"], descendants: true }], ngImport: i0, template: "<div [ngClass]=\"['qms-select-department-tree-container', (config.customClass || '')]\">\n <div class=\"input-select-department\">\n <form (ngSubmit)=\"!getLoading$.value\" *ngIf=\"config.enableTreeSearch\" class=\"input-field\">\n <mat-form-field class=\"w100\" qms-form qms-search-field>\n <input [formControl]=\"formSearchControl\" type=\"text\" placeholder=\"{{ LANG.SEARCH }}\" matInput />\n <button *ngIf=\"!getLoading$.value\" type=\"submit\" qms-btn-icon color=\"light\" matSuffix>\n <mat-icon>search</mat-icon>\n </button>\n <div matSuffix class=\"d-inline-block\">\n <mat-progress-spinner [@inOutAnimation] mode=\"indeterminate\" diameter=\"20\"\n *ngIf=\"getLoading$.value\"></mat-progress-spinner>\n </div>\n <button *ngIf=\"!!formSearchControl.value && !getLoading$.value\" matSuffix qms-btn-icon color=\"light\"\n [@inOutAnimation] aria-label=\"Clear\" (click)=\"formSearchControl.reset()\">\n <mat-icon>close</mat-icon>\n </button>\n </mat-form-field>\n </form>\n <div [@inOutAnimation] *ngIf=\"(getIndexView$ | async) === 1 && (textSearchSubject$ | async)\"\n class=\"sub-text ms-1 fw500\">\n {{LANG.RESULT_SEARCH_FOR}}<i><b>\"{{textSearchSubject$ | async}}\"</b></i>\n </div>\n <div [class.justify-content-between]=\"config.enableIncludeChild && !config.isSelectOne\"\n class=\"select__toggle-include toggle-include-child my-1 d-flex justify-content-end align-items-center\">\n <mat-slide-toggle *ngIf=\"config.enableIncludeChild && !config.isSelectOne\"\n [disabled]=\"(getIndexView$ | async) === 1 && config.disableToggleIncludeChildWhenChangeView\"\n [(ngModel)]=\"isIncludeChildren\" (ngModelChange)=\"toggleIncludeChildEvent.emit($event)\" color=\"default\"\n qms-group-options>\n <span class=\"text-label\">{{config.selectIncludeLabel || LANG.SELECT_INCLUDE_CHILD}}</span>\n </mat-slide-toggle>\n <button class=\"btn-arrow\" [@inOutAnimation] *ngIf=\"(getIndexView$ | async) === 1 && config.enableTreeSearch\"\n (click)=\"setIndexView(0)\" qms-btn-icon color=\"light\" [qms-tool-tip]=\"LANG.BACK_TO_TREE\" mode=\"dark\"\n position=\"top\">\n <mat-icon>arrow_back</mat-icon>\n </button>\n <button class=\"btn-arrow\" [@inOutAnimation]\n *ngIf=\"(getIndexView$ | async) === 0 && config.enableTreeSearch && (textSearchSubject$ | async)\"\n (click)=\"setIndexView(1)\" qms-btn-icon color=\"light\" [qms-tool-tip]=\"LANG.GOTO_SEACH_RESULT\" mode=\"dark\"\n position=\"top\">\n <mat-icon>arrow_forward</mat-icon>\n </button>\n </div>\n </div>\n <div [@inOutAnimation]\n *ngIf=\"(getIndexView$ | async) === 0 && config.modeView === MODE_VIEW_ENUM.ExternalView && !!config.headerName\"\n class=\"header-view-tree\">\n <div class=\"header-view header-title\">\n {{config.headerName.treeName}}\n </div>\n <div class=\"header-view header-title\">\n {{config.headerName.externalName}}\n </div>\n </div>\n <mat-divider class=\"mx-auto\"></mat-divider>\n <div [@animateSlideView]=\"(getIndexView$ | async)\" [ngStyle]=\"{\n minHeight: height\n }\" class=\"tree-department-wrapper\">\n <div *ngIf=\"(getIndexView$ | async) === 0\" class=\"tree-view w100 h100\">\n <div class=\"tree-view-main h100\">\n <div *ngIf=\"!config.isSelectOne && !!treeControl.dataNodes && config.activeSelectAllNode\"\n class=\"checkbox-all-tree\" [class.sticky-position]=\"config.modeView === MODE_VIEW_ENUM.ExternalView\">\n <!-- Checkbox all root node -->\n <mat-checkbox [@inOutAnimation] (click)=\"onCheckAllRootTreeNode()\"\n [indeterminate]=\"isIndeterminateCheckboxAllTree\" [checked]=\"isAllDepartmentSelected\" qms-group-options\n color=\"default\" label=\"none\" class=\"checkbox-all\">\n <span class=\"text-label \">{{LANG.CHOOSE_ALL}}(<b>{{treeControl.dataNodes.length}}</b>)</span>\n </mat-checkbox>\n <mat-divider class=\"mx-auto\"></mat-divider>\n </div>\n <cdk-virtual-scroll-viewport *ngIf=\"dataSource.data\" [ngClass]=\"{\n 'has-checkbox-all': !config.isSelectOne && config.modeView === MODE_VIEW_ENUM.Basic,\n 'select-department-tree': true\n }\" [itemSize]=\"ITEM_SIZE\" [ngStyle]=\"{height: height}\">\n <ng-container *cdkVirtualFor=\"let node of dataSource; trackBy: trackBy\">\n <div class=\"qms-tree-node mt-1\" [style.padding-left]=\"node.level * (config.isMobile ? 12 :24) + 'px'\"\n [attr.data-id]=\"node.id\" [id]=\"'mat-node-'+node.id\" [@triggerColor]=\"activeNode == node.id\" [ngClass]=\"{\n 'mat-tree-node-disabled-all': node.disabled,\n 'w-100': config.isSelectOne,\n 'selected-theme': this.checkListSelection.isSelected(node) && config.isSelectOne,\n 'expand-node': treeControl.isExpandable(node) && treeControl.isExpanded(node),\n 'active-external-view': config.modeView === MODE_VIEW_ENUM.ExternalView,\n 'node-loading': node.isLoading\n }\">\n <div class=\"node-expand-area\">\n <button class=\"btn-toggle\" qms-btn-icon color=\"light\" (click)=\"onExpandNode(node)\"\n *ngIf=\"treeControl.isExpandable(node) && !node.isLoading\">\n <mat-icon>\n {{ treeControl.isExpanded(node) ? \"expand_more\" : \"chevron_right\" }}\n </mat-icon>\n </button>\n <ng-container *ngIf=\"node.isLoading; then loadingSpinner\"></ng-container>\n </div>\n <ng-container [ngTemplateOutlet]=\"config.isSelectOne ? nodeWithoutCheckboxTemplate : showCheckboxTemplate\"\n [ngTemplateOutletContext]=\"{ node: node }\"></ng-container>\n <div *ngIf=\"config.modeView === MODE_VIEW_ENUM.ExternalView\" class=\"external-view-node\">\n <span class=\"node-external\" qms-elipsify position=\"top\" mode=\"dark\">\n {{node.externalName || ''}}\n </span>\n </div>\n </div>\n </ng-container>\n </cdk-virtual-scroll-viewport>\n <ng-container [@inOutAnimation] *ngIf=\"config.spinnerWhenGetMore && getLoadingMore$| async ;then maskOverlay\">\n </ng-container>\n </div>\n </div>\n <div *ngIf=\"(getIndexView$ | async) === 1\" [ngStyle]=\"{\n height: height\n }\" class=\"qms-view-search-result\">\n <div *ngIf=\"config.modeView === MODE_VIEW_ENUM.ExternalView\"\n class=\"qms-view-search-result__header d-flex align-items-center justify-content-between\">\n <div class=\"header-title\">\n <span qms-elipsify mode=\"dark\" position=\"top\">\n {{config.headerName.resultSearchName}}\n </span>\n </div>\n <div class=\"header-title\">\n <span qms-elipsify mode=\"dark\" position=\"top\">\n {{config.headerName.externalName}}\n </span>\n </div>\n </div>\n <ng-container *ngIf=\"getLoading$.value; then loading\"></ng-container>\n <div class=\"qms-view-search-result__wrapper\"\n [class.active-external]=\"config.modeView === MODE_VIEW_ENUM.ExternalView\"\n *ngIf=\"!!resultSearch.length && !getLoading$.value\">\n <div class=\"\">\n <mat-checkbox [@inOutAnimation]\n [disabled]=\"!resultSearch.length || config.isSelectOne || isDisableChecboxAllSearch()\" #checkAllSearch\n [indeterminate]=\"indeterminateSearchResult\" [checked]=\"isSelectAllResultSearch\" qms-group-options\n color=\"default\" label=\"none\" class=\"checkbox-all\"\n (click)=\"!config.isSelectOne && onSelectAllSearchResult(checkAllSearch.checked)\">\n <span class=\"text-label header-title\">{{LANG.CHOOSE_ALL}}</span>\n <span>(<b>{{resultSearch.length}}</b>)</span>\n </mat-checkbox>\n </div>\n <div [@inOutAnimation] [@listAnimation]\n [class.active-paging]=\"searchDepartment$.value.length > 10 && config.enablePagingSearch\" class=\"result\">\n <div [qms-tool-tip]=\"!canHandleItemSearchResult(item) ? LANG.ITEM_NOT_MATCH_TO_TREE : ''\" mode=\"dark\"\n position=\"top\" *ngFor=\"let item of resultSearch\"\n (click)=\"$event.stopImmediatePropagation(); !item.disabled && onCheckItemSearchResult(item)\"\n [class.active]=\"checkListSelectionSearch.isSelected(item)\" class=\"result-item user-select-none\" matRipple>\n <mat-checkbox [@inOutAnimation] *ngIf=\"!item.isLoading\" [disabled]=\"item.disabled\"\n (click)=\"$event.stopImmediatePropagation(); !item.disabled && onCheckItemSearchResult(item)\"\n [checked]=\"checkListSelectionSearch.isSelected(item)\" qms-group-options color=\"default\" label=\"none\">\n </mat-checkbox>\n <div *ngIf=\"item.isLoading\" [@inOutAnimation] class=\"position-relative\">\n <ng-container *ngIf=\"item.isLoading; then loadingSpinner\"></ng-container>\n </div>\n <div class=\"result-item__content\">\n <div class=\"item-result-content-wraper\">\n <div class=\"text-gray fw-bold fs-base mb0\">{{item.name}}</div>\n <qms-breadcrumb *ngIf=\"item.location?.length > 1\" [type]=\"config.isMobile ? 'mobile': ''\"\n [numDisplayItem]=\"6\" (onItemClick)=\"$event.stopImmediatePropagation()\" class=\"breadcrumb-container\"\n [nodes]=\"item.location\">\n </qms-breadcrumb>\n <div *ngIf=\"item.location?.length === 1\" class=\"d-flex align-items-center\">\n <span qms-elipsify mode=\"dark\" position=\"top\"\n class=\"item-breadcrumb-disable d-block\">{{item.location[0].name}}</span>\n </div>\n </div>\n <div *ngIf=\"config.modeView === MODE_VIEW_ENUM.ExternalView\" class=\"external-name\">\n <span qms-elipsify mode=\"dark\" position=\"top\" class=\"text-gray fs-base mb0\">{{item.externalName}}\n </span>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div [@inOutAnimation] *ngIf=\"!resultSearch.length && !getLoading$.value\" class=\"result no-result\">\n <ng-container *ngTemplateOutlet=\"noResult\"></ng-container>\n </div>\n <mat-divider *ngIf=\"searchDepartment$.value.length > 10 && config.enablePagingSearch\"\n class=\"mx-auto\"></mat-divider>\n <qms-paginator #paginatorSearch *ngIf=\"searchDepartment$.value.length > 10 && config.enablePagingSearch \"\n [length]=\"searchDepartment$.value.length\" [numHidden]=\"0\" [pageSize]=\"CURRENT_PAGESIZE\"\n [pageSizeOptions]=\"PAGE_SIZE_OPTION\" (page)='onPagingSearchResult($event)'\n [size]='config.isMobile ? PAGINATION_SIZE.small : PAGINATION_SIZE.medium'>\n </qms-paginator>\n </div>\n </div>\n\n <!-- Template for Checkbox -->\n <ng-template #showCheckboxTemplate let-node=\"node\">\n <mat-checkbox [id]=\"'node-'+node.id\" qms-group-options color=\"default\" label=\"none\" class=\"flex-direction-row\"\n [disabled]=\"node.isLoading\" [checked]=\"checkListSelection.isSelected(node)\"\n (click)=\"!node.isLoading && onCheckNode(node)\" [attr.disabled]=\"node.disabled || node.isLoading\">\n <img [title]=\"node.itemIconSvg\" *ngIf=\"node.itemIconSvg\" class=\"material-icons type-icon\"\n [src]=\"node.itemIconSvg\" />\n <span *ngIf=\"node.itemIcon\" [class]=\"node.itemIcon\" [qmsTransformIcon]=\"node.itemIcon\"\n class=\"material-icons-outlined type-icon\"></span>\n <span *ngIf=\"node.itemMatIcon\" class=\"material-icons-outlined type-icon\">{{\n node.itemMatIcon }}\n </span>\n <span class=\"text-name cursor-pointer ml5 123\" [ngClass]=\"{ disabled: node.disabled }\">{{ node.name}}\n </span>\n </mat-checkbox>\n </ng-template>\n\n <!-- Template node without checkbox -->\n <ng-template #nodeWithoutCheckboxTemplate let-node=\"node\">\n <div [id]=\"'node-'+node.id\" (click)=\"onCheckNode(node)\" class=\"node-without-checkbox\">\n <div class=\"node-info\">\n <span *ngIf=\"node.itemIcon\" [class]=\"node.itemIcon\" [qmsTransformIcon]=\"node.itemIcon\"\n class=\"material-icons-outlined type-icon\"></span>\n <span *ngIf=\"node.itemMatIcon\" class=\"material-icons-outlined type-icon\">{{\n node.itemMatIcon }}\n </span>\n <span class=\"text-name cursor-pointer pl-10 123\" [ngClass]=\"{ disabled: node.disabled }\">{{ node.name }}</span>\n </div>\n <div class=\"node-state\">\n <mat-icon *ngIf=\"checkListSelection.isSelected(node)\">check</mat-icon>\n </div>\n </div>\n </ng-template>\n</div>\n\n<ng-template #noResult>\n <svg width=\"89\" height=\"130\" viewBox=\"0 0 89 88\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"white\" />\n <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"#0163B2\" fill-opacity=\"0.12\" />\n <path\n d=\"M44.5 56.6936L58.096 64.8996L54.488 49.4336L66.5 39.0276L50.682 37.6856L44.5 23.0996L38.318 37.6856L22.5 39.0276L34.512 49.4336L30.904 64.8996L44.5 56.6936Z\"\n fill=\"#0163B3\" />\n <text x=\"10\" y=\"105\" fill=\"#0163B2\">{{LANG.NO_RESULT}}</text>\n </svg>\n</ng-template>\n\n<!-- Template loading -->\n<ng-template #loading>\n <div [ngStyle]=\"{\n 'height': searchDepartment$.value.length ? (config.modeView === MODE_VIEW_ENUM.ExternalView ? 'calc(100% - 90px)' : 'calc(100% - 50px)' ) : height\n }\" class=\"qms-loading-container\">\n <div class=\"qms-loader\" *ngFor=\"let item of arrSkeleton\">\n <div class=\"qms-loader__wrapper\">\n <div class=\"row-loader\">\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n\n<!-- Template mask overlay -->\n<ng-template #maskOverlay>\n <div class=\"mask-overlay\">\n <mat-spinner [diameter]=\"50\" [strokeWidth]=\"5\"></mat-spinner>\n </div>\n</ng-template>\n\n<!-- Loading spinner -->\n<ng-template #loadingSpinner>\n <div class=\"qms-spinner center\">\n <mat-spinner [diameter]=\"20\" [strokeWidth]=\"2\"></mat-spinner>\n </div>\n</ng-template>", styles: [".qms-select-department-tree-container{font-family:Open Sans,sans-serif}.qms-select-department-tree-container .mr10{margin-right:10px}.qms-select-department-tree-container .mt5{margin-bottom:5px}.qms-select-department-tree-container .mb5{margin-top:5px}.qms-select-department-tree-container .w100{width:100%}.qms-select-department-tree-container .h100{height:100%}.qms-select-department-tree-container .fw500{font-weight:500!important}.qms-select-department-tree-container .text-right{text-align:right}.qms-select-department-tree-container .mt20{margin-top:20px}.qms-select-department-tree-container .d-flex{display:flex}.qms-select-department-tree-container .align-items-center{align-items:center}.qms-select-department-tree-container .justify-content-end{justify-content:flex-end}.qms-select-department-tree-container .text-selected{color:#0009;font-size:12px;line-height:16px;margin-top:1rem}.qms-select-department-tree-container .input-field{display:flex;align-items:center;position:relative}.qms-select-department-tree-container .input-field ::ng-deep .mat-form-field-wrapper{padding-bottom:8px!important}.qms-select-department-tree-container .input-field ::ng-deep .mat-form-field-underline{bottom:8px!important}.qms-select-department-tree-container .input-field input.input-search{width:100%;padding:10px;outline:none;border:none;background:var(--background-input-text)}.qms-select-department-tree-container .input-field .btn-search{cursor:pointer;vertical-align:middle;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.qms-select-department-tree-container .input-field .line__divider{border-bottom:1px solid #ccc;height:1px;margin-top:10px;min-width:300px;max-width:100%}.qms-select-department-tree-container .header-title{font-weight:500;color:var(--ws-text-primary);font-size:16px;display:flex;align-items:center}.qms-select-department-tree-container .header-title .header-view{padding:4px 0}.qms-select-department-tree-container .sticky-position{position:sticky;top:0;left:0;z-index:1;background:#fff}.qms-select-department-tree-container .header-view-tree{display:grid;grid-template-columns:1fr 200px;column-gap:2px;padding:4px 12px 4px 0}.qms-select-department-tree-container .header-view-tree .header-view:nth-child(1){padding-left:12px}.qms-select-department-tree-container .tree-department-wrapper{padding-right:4px;overflow:hidden;position:relative;transition:height .3s ease-in-out}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view{width:100%;display:grid;grid-template-columns:1fr 200px;column-gap:2px}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main>.separate{height:38px}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main>.separate.h-0{height:0}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main:last-child{height:100%;padding-left:4px;position:relative}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main:last-child:after{position:absolute;content:\"\";top:0;bottom:-38px;left:0;width:1px;background:#0000001f}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main .external-list-item-container .node-external{overflow:hidden;transition:all .1s ease-in-out}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main .external-list-item-container .node-external .node-external-content{padding:5px 15px;height:calc(100% - 2px);color:var(--default-color);font-size:14px;display:flex;align-items:center}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main .external-list-item-container .node-external .node-external-content span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qms-select-department-tree-container .mask-overlay{z-index:1000;background-color:#2221211a;position:absolute;top:0;left:0;width:100%;height:100%;border-radius:4px;overflow:hidden;display:grid;place-items:center}.qms-select-department-tree-container .select-department-tree>.cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper{padding:0 4px!important}.qms-select-department-tree-container .select-department-tree .qms-tree-node{display:flex;align-items:center;border-radius:4px}.qms-select-department-tree-container .select-department-tree .qms-tree-node:hover{background-color:#00000014}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.node-expand-area{width:48px;height:48px;position:relative}.qms-select-department-tree-container .select-department-tree .qms-tree-node.active-external-view .mat-mdc-checkbox.qms-group-options{width:calc(100% - 250px)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.node-loading{background:var(--primary-light-6-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node{flex-basis:200px;overflow:hidden}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node .node-external{overflow:hidden;transition:all .1s ease-in-out;display:block}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node .node-external .node-external-content{padding:5px 15px;height:calc(100% - 2px);color:var(--default-color);font-size:14px;display:flex;align-items:center}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node .node-external .node-external-content span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node{color:var(--primary)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node:hover{background:var(--primary-light-6-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node:active{background:var(--primary-light-12-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node .mat-icon{color:var(--primary)}.qms-select-department-tree-container .select-department-tree .qms-tree-node .node-without-checkbox{cursor:pointer;width:100%;display:flex;justify-content:space-between;align-items:center}.qms-select-department-tree-container .select-department-tree .qms-tree-node .node-without-checkbox .mat-icon{color:var(--primary);margin-right:4px}.qms-select-department-tree-container .select-department-tree .qms-tree-node.selected-theme{background:var(--primary-light-12-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all{cursor:default!important;pointer-events:none;-webkit-user-select:none;user-select:none}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all button.mat-button-disabled,.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all .mat-icon-rtl-mirror,.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all .type-icon{color:#00000061}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all .text-name.disabled{color:#00000061;cursor:default!important;pointer-events:none;-webkit-user-select:none;user-select:none}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all.active{background-color:transparent}.qms-select-department-tree-container .text-name{position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;cursor:pointer;width:100%}.qms-select-department-tree-container .cursor-pointer{cursor:pointer}.qms-select-department-tree-container .ml5{margin-left:15px!important}.qms-select-department-tree-container .pl-10{padding-left:10px}.qms-select-department-tree-container ::ng-deep .mat-mdc-checkbox.qms-group-options.flex-direction-row .mat-checkbox-layout{white-space:normal}.qms-select-department-tree-container ::ng-deep .mat-mdc-checkbox.qms-group-options.flex-direction-row .node-text>span{display:block}.qms-select-department-tree-container ::ng-deep .mat-mdc-checkbox.qms-group-options.flex-direction-row .mat-checkbox-label{flex-direction:row;align-items:center;position:relative;padding-bottom:2px}.qms-select-department-tree-container .qms-view-search-result{width:100%;overflow:hidden}.qms-select-department-tree-container .qms-view-search-result__header{position:relative}.qms-select-department-tree-container .qms-view-search-result__header:after{position:absolute;content:\"\";bottom:0;left:0;width:100%;height:1px;background-color:#0000001a}.qms-select-department-tree-container .qms-view-search-result__header .header-title{padding:8px 0;display:inline-block}.qms-select-department-tree-container .qms-view-search-result__header .header-title:nth-child(1){padding-left:12px}.qms-select-department-tree-container .qms-view-search-result__header .header-title:nth-child(2){flex-basis:200px}.qms-select-department-tree-container .qms-view-search-result>.no-result{height:100%;display:flex;justify-content:center;align-items:center}.qms-select-department-tree-container .qms-view-search-result__wrapper{height:calc(100% - 50px);width:100%}.qms-select-department-tree-container .qms-view-search-result__wrapper.active-external{height:calc(100% - 90px)!important}.qms-select-department-tree-container .qms-view-search-result__wrapper .result{max-height:calc(100% - 44px);overflow-y:auto;margin-bottom:4px;padding-right:4px}.qms-select-department-tree-container .qms-view-search-result__wrapper .result.active-paging{max-height:calc(100% - 40px)}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item{border-radius:4px;display:grid;grid-template-columns:45px 1fr;align-items:center;cursor:pointer;transition:background .3s ease;min-height:40px}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item:not(:nth-child(1)){margin-top:4px!important}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item:hover,.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item.active{background:linear-gradient(0deg,#0163b21f,#0163b21f),#fff}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content{display:flex;align-items:center}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content .item-result-content-wraper{padding:5px 15px;width:100%}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content .external-name{flex-basis:200px}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content .external-name span{width:200px;display:inline-block}.qms-select-department-tree-container .qms-view-search-result ::ng-deep .mat-mdc-checkbox.qms-group-options{display:flex;height:100%}.qms-select-department-tree-container ::ng-deep .breadcrumb-container{flex-wrap:wrap}.qms-select-department-tree-container ::ng-deep .mat-button-focus-overlay{background-color:transparent}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item{margin:0}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;transition:color .3s ease}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item-text:not(:last-child){max-width:150px!important}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-total-result{margin-bottom:0;margin-right:12px;height:100%;display:flex;align-items:center}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-total-result span{font-weight:600;color:#000c}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-paginator-range-actions{margin-bottom:0;column-gap:2px}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-paginator-range-actions>.qms-total-result{margin-bottom:0}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-form-field-wrapper{padding-bottom:0}.qms-select-department-tree-container ::ng-deep .qms-paginator .qms-paginator-page-size{align-items:center}.qms-select-department-tree-container .text-gray{color:#242424}.qms-select-department-tree-container .mb0{margin-bottom:0!important}.qms-select-department-tree-container .fs-base{font-size:14px!important}.qms-select-department-tree-container .user-select-none{-webkit-user-select:none;user-select:none}.qms-select-department-tree-container .item-breadcrumb-disable{cursor:not-allowed;color:#0009;font-weight:400;font-size:14px}.qms-select-department-tree-container ::ng-deep .mat-mdc-checkbox.checkbox-all .mat-checkbox-label{flex-direction:row;align-items:center;column-gap:4px}.qms-select-department-tree-container ::ng-deep .btn-arrow{width:40px;height:40px;line-height:40px}.qms-select-department-tree-container .qms-loading-container{overflow:hidden;display:grid;grid-template-rows:repeat(60px)}.qms-select-department-tree-container .qms-loading-container .qms-loader{position:relative;width:100%;height:100%;padding:10px 0;overflow:hidden}.qms-select-department-tree-container .qms-loading-container .qms-loader:after{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;background:linear-gradient(110deg,#e9e9e900,#e3e3e300 40%,#e3e3e380 50%,#e3e3e300 60% 100%);animation:animate-loading 1.2s linear infinite}.qms-select-department-tree-container .qms-loading-container .qms-loader__wrapper{position:relative;width:100%;height:100%}.qms-select-department-tree-container .qms-loading-container .qms-loader__wrapper .row-loader{background-color:#eee;position:absolute;left:0;width:100%;height:40px}@keyframes animate-loading{0%{transform:translate(-100%)}to{transform:translate(100%)}}.qms-select-department-tree-container .qms-spinner{font-size:20px;position:relative;display:inline-block;width:1em;height:1em}.qms-select-department-tree-container .qms-spinner.center{position:absolute;inset:0;margin:auto}.qms-select-department-tree-container ::ng-deep .mat-mdc-progress-spinner circle,.qms-select-department-tree-container .mat-mdc-progress-spinner circle{stroke:#1b75be!important}@media screen and (max-width: 600px){.qms-select-department-tree-container .external-view-node{flex-basis:65px!important}.qms-select-department-tree-container .qms-tree-node.active-external-view .mat-mdc-checkbox.qms-group-options{width:calc(100% - 110px)!important}.qms-select-department-tree-container .header-view-tree{grid-template-columns:1fr 80px!important}.qms-select-department-tree-container ::ng-deep .cdk-virtual-scroll-content-wrapper{right:0!important}.qms-select-department-tree-container .header-title{font-size:14px!important}.qms-select-department-tree-container .text-name,.qms-select-department-tree-container .node-external,.qms-select-department-tree-container .text-label,.qms-select-department-tree-container .text-label+span{font-size:12px}.qms-select-department-tree-container .node-expand-area{width:30px!important;height:30px!important}.qms-select-department-tree-container .node-expand-area .qms-btn-icon{width:30px;height:30px;line-height:30px}.qms-select-department-tree-container .fs-base{font-size:12px!important}.qms-select-department-tree-container .qms-select-department-tree-container .breadcrumb-container{flex-wrap:nowrap!important}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item-text{font-size:12px!important;max-width:175px!important}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-total-result{display:none!important}.qms-select-department-tree-container ::ng-deep .qms-paginator .size-small .mat-mdc-paginator-container{justify-content:center!important}.qms-select-department-tree-container .qms-view-search-result__header>.header-title:nth-child(2){flex-basis:120px!important}.qms-select-department-tree-container .result-item__content .external-name{flex-basis:75px!important}.qms-select-department-tree-container .result-item__content .external-name span{width:75px!important}}\n"], dependencies: [{ kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i7.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i7$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: QMSSearchFieldDirective, selector: "mat-form-field[qms-search-field]", inputs: ["isLoading"] }, { kind: "directive", type: QMSFormFieldDirective, selector: "[qms-form]" }, { kind: "directive", type: QMSGroupOptionDirective, selector: "[qms-group-options]", inputs: ["label"] }, { kind: "directive", type: AutocompleteOffDirective, selector: "[qms-group-options]" }, { kind: "directive", type: QMSToolTipRendererDirective, selector: "[qms-tool-tip]", inputs: ["showToolTip", "mode", "qms-tool-tip", "contentTemplate", "position"] }, { kind: "directive", type: QMSMultiIconDirective, selector: "[qmsTransformIcon]", inputs: ["qmsTransformIcon"] }, { kind: "directive", type: EllipsifyDirective, selector: "[qms-elipsify]" }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i11.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i11.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i17.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: QMSButtonIcon, selector: "button[qms-btn-icon]", inputs: ["disabled", "color", "active"], exportAs: ["qmsButtonIcon"] }, { kind: "component", type: i16.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: QMSBreadcrumb, selector: "qms-breadcrumb", inputs: ["nodes", "type", "maxLine", "numDisplayItem", "onlyItem", "disabledLastItem"], outputs: ["onItemClick"] }, { kind: "directive", type: i14.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: QMSPaginatorComponent, selector: "qms-paginator", inputs: ["numHidden", "size", "pageSizeOptions", "pageSize", "length", "pageIndex", "overlayPanelClass"], outputs: ["page"] }, { kind: "component", type: i23.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i24.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i24.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i24.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }], animations: [
|
|
39622
39697
|
AnimationTreeDepartment
|
|
39623
39698
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
39624
39699
|
}
|
|
@@ -39626,7 +39701,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
39626
39701
|
type: Component,
|
|
39627
39702
|
args: [{ selector: 'qms-select-process-data-tree', animations: [
|
|
39628
39703
|
AnimationTreeDepartment
|
|
39629
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['qms-select-department-tree-container', (config.customClass || '')]\">\n <div class=\"input-select-department\">\n <form (ngSubmit)=\"!getLoading$.value\" *ngIf=\"config.enableTreeSearch\" class=\"input-field\">\n <mat-form-field class=\"w100\" qms-form qms-search-field>\n <input [formControl]=\"formSearchControl\" type=\"text\" placeholder=\"{{ LANG.SEARCH }}\" matInput />\n <button *ngIf=\"!getLoading$.value\" type=\"submit\" qms-btn-icon color=\"light\" matSuffix>\n <mat-icon>search</mat-icon>\n </button>\n <mat-progress-spinner [@inOutAnimation] matSuffix mode=\"indeterminate\" diameter=\"20\"\n *ngIf=\"getLoading$.value\"></mat-progress-spinner>\n <div *ngIf=\"!!formSearchControl.value && !getLoading$.value\" qms-input-clear matSuffix>\n <button qms-btn-icon color=\"light\" [@inOutAnimation] aria-label=\"Clear\" (click)=\"formSearchControl.reset()\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n </mat-form-field>\n </form>\n <div [@inOutAnimation] *ngIf=\"(getIndexView$ | async) === 1 && (textSearchSubject$ | async)\"\n class=\"sub-text ms-1 fw500\">\n {{LANG.RESULT_SEARCH_FOR}}<i><b>\"{{textSearchSubject$ | async}}\"</b></i>\n </div>\n <div [class.justify-content-between]=\"config.enableIncludeChild && !config.isSelectOne\"\n class=\"select__toggle-include toggle-include-child my-1 d-flex justify-content-end align-items-center\">\n <mat-slide-toggle *ngIf=\"config.enableIncludeChild && !config.isSelectOne\"\n [disabled]=\"(getIndexView$ | async) === 1 && config.disableToggleIncludeChildWhenChangeView\"\n [(ngModel)]=\"isIncludeChildren\" (ngModelChange)=\"toggleIncludeChildEvent.emit($event)\" color=\"default\"\n qms-group-options>\n <span class=\"text-label\">{{config.selectIncludeLabel || LANG.SELECT_INCLUDE_CHILD}}</span>\n </mat-slide-toggle>\n <button class=\"btn-arrow\" [@inOutAnimation] *ngIf=\"(getIndexView$ | async) === 1 && config.enableTreeSearch\"\n (click)=\"setIndexView(0)\" qms-btn-icon color=\"light\" [qms-tool-tip]=\"LANG.BACK_TO_TREE\" mode=\"dark\"\n position=\"top\">\n <mat-icon>arrow_back</mat-icon>\n </button>\n <button class=\"btn-arrow\" [@inOutAnimation]\n *ngIf=\"(getIndexView$ | async) === 0 && config.enableTreeSearch && (textSearchSubject$ | async)\"\n (click)=\"setIndexView(1)\" qms-btn-icon color=\"light\" [qms-tool-tip]=\"LANG.GOTO_SEACH_RESULT\" mode=\"dark\"\n position=\"top\">\n <mat-icon>arrow_forward</mat-icon>\n </button>\n </div>\n </div>\n <div [@inOutAnimation]\n *ngIf=\"(getIndexView$ | async) === 0 && config.modeView === MODE_VIEW_ENUM.ExternalView && !!config.headerName\"\n class=\"header-view-tree\">\n <div class=\"header-view header-title\">\n {{config.headerName.treeName}}\n </div>\n <div class=\"header-view header-title\">\n {{config.headerName.externalName}}\n </div>\n </div>\n <mat-divider class=\"mx-auto\"></mat-divider>\n <div [@animateSlideView]=\"(getIndexView$ | async)\" [ngStyle]=\"{\n minHeight: height\n }\" class=\"tree-department-wrapper\">\n <div *ngIf=\"(getIndexView$ | async) === 0\" class=\"tree-view w100 h100\">\n <div class=\"tree-view-main h100\">\n <div *ngIf=\"!config.isSelectOne && !!treeControl.dataNodes && config.activeSelectAllNode\"\n class=\"checkbox-all-tree\" [class.sticky-position]=\"config.modeView === MODE_VIEW_ENUM.ExternalView\">\n <!-- Checkbox all root node -->\n <mat-checkbox [@inOutAnimation] (click)=\"onCheckAllRootTreeNode()\"\n [indeterminate]=\"isIndeterminateCheckboxAllTree\" [checked]=\"isAllDepartmentSelected\" qms-group-options\n color=\"default\" label=\"none\" class=\"checkbox-all\">\n <span class=\"text-label \">{{LANG.CHOOSE_ALL}}(<b>{{treeControl.dataNodes.length}}</b>)</span>\n </mat-checkbox>\n <mat-divider class=\"mx-auto\"></mat-divider>\n </div>\n <cdk-virtual-scroll-viewport *ngIf=\"dataSource.data\" [ngClass]=\"{\n 'has-checkbox-all': !config.isSelectOne && config.modeView === MODE_VIEW_ENUM.Basic,\n 'select-department-tree': true\n }\" [itemSize]=\"ITEM_SIZE\" [ngStyle]=\"{height: height}\">\n <ng-container *cdkVirtualFor=\"let node of dataSource; trackBy: trackBy\">\n <div class=\"qms-tree-node mt-1\" [style.padding-left]=\"node.level * (config.isMobile ? 12 :24) + 'px'\"\n [attr.data-id]=\"node.id\" [id]=\"'mat-node-'+node.id\" [@triggerColor]=\"activeNode == node.id\" [ngClass]=\"{\n 'mat-tree-node-disabled-all': node.disabled,\n 'w-100': config.isSelectOne,\n 'selected-theme': this.checkListSelection.isSelected(node) && config.isSelectOne,\n 'expand-node': treeControl.isExpandable(node) && treeControl.isExpanded(node),\n 'active-external-view': config.modeView === MODE_VIEW_ENUM.ExternalView,\n 'node-loading': node.isLoading\n }\">\n <div class=\"node-expand-area\">\n <button class=\"btn-toggle\" qms-btn-icon color=\"light\" (click)=\"onExpandNode(node)\"\n *ngIf=\"treeControl.isExpandable(node) && !node.isLoading\">\n <mat-icon>\n {{ treeControl.isExpanded(node) ? \"expand_more\" : \"chevron_right\" }}\n </mat-icon>\n </button>\n <ng-container *ngIf=\"node.isLoading; then loadingSpinner\"></ng-container>\n </div>\n <ng-container [ngTemplateOutlet]=\"config.isSelectOne ? nodeWithoutCheckboxTemplate : showCheckboxTemplate\"\n [ngTemplateOutletContext]=\"{ node: node }\"></ng-container>\n <div *ngIf=\"config.modeView === MODE_VIEW_ENUM.ExternalView\" class=\"external-view-node\">\n <span class=\"node-external\" qms-elipsify position=\"top\" mode=\"dark\">\n {{node.externalName || ''}}\n </span>\n </div>\n </div>\n </ng-container>\n </cdk-virtual-scroll-viewport>\n <ng-container [@inOutAnimation] *ngIf=\"config.spinnerWhenGetMore && getLoadingMore$| async ;then maskOverlay\">\n </ng-container>\n </div>\n </div>\n <div *ngIf=\"(getIndexView$ | async) === 1\" [ngStyle]=\"{\n height: height\n }\" class=\"qms-view-search-result\">\n <div *ngIf=\"config.modeView === MODE_VIEW_ENUM.ExternalView\"\n class=\"qms-view-search-result__header d-flex align-items-center justify-content-between\">\n <div class=\"header-title\">\n <span qms-elipsify mode=\"dark\" position=\"top\">\n {{config.headerName.resultSearchName}}\n </span>\n </div>\n <div class=\"header-title\">\n <span qms-elipsify mode=\"dark\" position=\"top\">\n {{config.headerName.externalName}}\n </span>\n </div>\n </div>\n <ng-container *ngIf=\"getLoading$.value; then loading\"></ng-container>\n <div class=\"qms-view-search-result__wrapper\"\n [class.active-external]=\"config.modeView === MODE_VIEW_ENUM.ExternalView\"\n *ngIf=\"!!resultSearch.length && !getLoading$.value\">\n <div class=\"\">\n <mat-checkbox [@inOutAnimation]\n [disabled]=\"!resultSearch.length || config.isSelectOne || isDisableChecboxAllSearch()\" #checkAllSearch\n [indeterminate]=\"indeterminateSearchResult\" [checked]=\"isSelectAllResultSearch\" qms-group-options\n color=\"default\" label=\"none\" class=\"checkbox-all\"\n (click)=\"!config.isSelectOne && onSelectAllSearchResult(checkAllSearch.checked)\">\n <span class=\"text-label header-title\">{{LANG.CHOOSE_ALL}}</span>\n <span>(<b>{{resultSearch.length}}</b>)</span>\n </mat-checkbox>\n </div>\n <div [@inOutAnimation] [@listAnimation]\n [class.active-paging]=\"searchDepartment$.value.length > 10 && config.enablePagingSearch\" class=\"result\">\n <div [qms-tool-tip]=\"!canHandleItemSearchResult(item) ? LANG.ITEM_NOT_MATCH_TO_TREE : ''\" mode=\"dark\"\n position=\"top\" *ngFor=\"let item of resultSearch\"\n (click)=\"$event.stopImmediatePropagation(); !item.disabled && onCheckItemSearchResult(item)\"\n [class.active]=\"checkListSelectionSearch.isSelected(item)\" class=\"result-item user-select-none\" matRipple>\n <mat-checkbox [@inOutAnimation] *ngIf=\"!item.isLoading\" [disabled]=\"item.disabled\"\n (click)=\"$event.stopImmediatePropagation(); !item.disabled && onCheckItemSearchResult(item)\"\n [checked]=\"checkListSelectionSearch.isSelected(item)\" qms-group-options color=\"default\" label=\"none\">\n </mat-checkbox>\n <div *ngIf=\"item.isLoading\" [@inOutAnimation] class=\"position-relative\">\n <ng-container *ngIf=\"item.isLoading; then loadingSpinner\"></ng-container>\n </div>\n <div class=\"result-item__content\">\n <div class=\"item-result-content-wraper\">\n <div class=\"text-gray fw-bold fs-base mb0\">{{item.name}}</div>\n <qms-breadcrumb *ngIf=\"item.location?.length > 1\" [type]=\"config.isMobile ? 'mobile': ''\"\n [numDisplayItem]=\"6\" (onItemClick)=\"$event.stopImmediatePropagation()\" class=\"breadcrumb-container\"\n [nodes]=\"item.location\">\n </qms-breadcrumb>\n <div *ngIf=\"item.location?.length === 1\" class=\"d-flex align-items-center\">\n <span qms-elipsify mode=\"dark\" position=\"top\"\n class=\"item-breadcrumb-disable d-block\">{{item.location[0].name}}</span>\n </div>\n </div>\n <div *ngIf=\"config.modeView === MODE_VIEW_ENUM.ExternalView\" class=\"external-name\">\n <span qms-elipsify mode=\"dark\" position=\"top\" class=\"text-gray fs-base mb0\">{{item.externalName}}\n </span>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div [@inOutAnimation] *ngIf=\"!resultSearch.length && !getLoading$.value\" class=\"result no-result\">\n <ng-container *ngTemplateOutlet=\"noResult\"></ng-container>\n </div>\n <mat-divider *ngIf=\"searchDepartment$.value.length > 10 && config.enablePagingSearch\"\n class=\"mx-auto\"></mat-divider>\n <qms-paginator #paginatorSearch *ngIf=\"searchDepartment$.value.length > 10 && config.enablePagingSearch \"\n [length]=\"searchDepartment$.value.length\" [numHidden]=\"0\" [pageSize]=\"CURRENT_PAGESIZE\"\n [pageSizeOptions]=\"PAGE_SIZE_OPTION\" (page)='onPagingSearchResult($event)'\n [size]='config.isMobile ? PAGINATION_SIZE.small : PAGINATION_SIZE.medium'>\n </qms-paginator>\n </div>\n </div>\n\n <!-- Template for Checkbox -->\n <ng-template #showCheckboxTemplate let-node=\"node\">\n <mat-checkbox [id]=\"'node-'+node.id\" qms-group-options color=\"default\" label=\"none\" class=\"flex-direction-row\"\n [disabled]=\"node.isLoading\" [checked]=\"checkListSelection.isSelected(node)\"\n (click)=\"!node.isLoading && onCheckNode(node)\" [attr.disabled]=\"node.disabled || node.isLoading\">\n <img [title]=\"node.itemIconSvg\" *ngIf=\"node.itemIconSvg\" class=\"material-icons type-icon\"\n [src]=\"node.itemIconSvg\" />\n <span *ngIf=\"node.itemIcon\" [class]=\"node.itemIcon\" [qmsTransformIcon]=\"node.itemIcon\"\n class=\"material-icons-outlined type-icon\"></span>\n <span *ngIf=\"node.itemMatIcon\" class=\"material-icons-outlined type-icon\">{{\n node.itemMatIcon }}\n </span>\n <span class=\"text-name cursor-pointer ml5 123\" [ngClass]=\"{ disabled: node.disabled }\">{{ node.name}}\n </span>\n </mat-checkbox>\n </ng-template>\n\n <!-- Template node without checkbox -->\n <ng-template #nodeWithoutCheckboxTemplate let-node=\"node\">\n <div [id]=\"'node-'+node.id\" (click)=\"onCheckNode(node)\" class=\"node-without-checkbox\">\n <div class=\"node-info\">\n <span *ngIf=\"node.itemIcon\" [class]=\"node.itemIcon\" [qmsTransformIcon]=\"node.itemIcon\"\n class=\"material-icons-outlined type-icon\"></span>\n <span *ngIf=\"node.itemMatIcon\" class=\"material-icons-outlined type-icon\">{{\n node.itemMatIcon }}\n </span>\n <span class=\"text-name cursor-pointer pl-10 123\" [ngClass]=\"{ disabled: node.disabled }\">{{ node.name }}</span>\n </div>\n <div class=\"node-state\">\n <mat-icon *ngIf=\"checkListSelection.isSelected(node)\">check</mat-icon>\n </div>\n </div>\n </ng-template>\n</div>\n\n<ng-template #noResult>\n <svg width=\"89\" height=\"130\" viewBox=\"0 0 89 88\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"white\" />\n <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"#0163B2\" fill-opacity=\"0.12\" />\n <path\n d=\"M44.5 56.6936L58.096 64.8996L54.488 49.4336L66.5 39.0276L50.682 37.6856L44.5 23.0996L38.318 37.6856L22.5 39.0276L34.512 49.4336L30.904 64.8996L44.5 56.6936Z\"\n fill=\"#0163B3\" />\n <text x=\"10\" y=\"105\" fill=\"#0163B2\">{{LANG.NO_RESULT}}</text>\n </svg>\n</ng-template>\n\n<!-- Template loading -->\n<ng-template #loading>\n <div [ngStyle]=\"{\n 'height': searchDepartment$.value.length ? (config.modeView === MODE_VIEW_ENUM.ExternalView ? 'calc(100% - 90px)' : 'calc(100% - 50px)' ) : height\n }\" class=\"qms-loading-container\">\n <div class=\"qms-loader\" *ngFor=\"let item of arrSkeleton\">\n <div class=\"qms-loader__wrapper\">\n <div class=\"row-loader\">\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n\n<!-- Template mask overlay -->\n<ng-template #maskOverlay>\n <div class=\"mask-overlay\">\n <mat-spinner [diameter]=\"50\" [strokeWidth]=\"5\"></mat-spinner>\n </div>\n</ng-template>\n\n<!-- Loading spinner -->\n<ng-template #loadingSpinner>\n <div class=\"qms-spinner center\">\n <mat-spinner [diameter]=\"20\" [strokeWidth]=\"2\"></mat-spinner>\n </div>\n</ng-template>", styles: [".qms-select-department-tree-container{font-family:Open Sans,sans-serif}.qms-select-department-tree-container .mr10{margin-right:10px}.qms-select-department-tree-container .mt5{margin-bottom:5px}.qms-select-department-tree-container .mb5{margin-top:5px}.qms-select-department-tree-container .w100{width:100%}.qms-select-department-tree-container .h100{height:100%}.qms-select-department-tree-container .fw500{font-weight:500!important}.qms-select-department-tree-container .text-right{text-align:right}.qms-select-department-tree-container .mt20{margin-top:20px}.qms-select-department-tree-container .d-flex{display:flex}.qms-select-department-tree-container .align-items-center{align-items:center}.qms-select-department-tree-container .justify-content-end{justify-content:flex-end}.qms-select-department-tree-container .text-selected{color:#0009;font-size:12px;line-height:16px;margin-top:1rem}.qms-select-department-tree-container .input-field{display:flex;align-items:center;position:relative}.qms-select-department-tree-container .input-field ::ng-deep .mat-form-field-wrapper{padding-bottom:8px!important}.qms-select-department-tree-container .input-field ::ng-deep .mat-form-field-underline{bottom:8px!important}.qms-select-department-tree-container .input-field input.input-search{width:100%;padding:10px;outline:none;border:none;background:var(--background-input-text)}.qms-select-department-tree-container .input-field .btn-search{cursor:pointer;vertical-align:middle;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.qms-select-department-tree-container .input-field .line__divider{border-bottom:1px solid #ccc;height:1px;margin-top:10px;min-width:300px;max-width:100%}.qms-select-department-tree-container .header-title{font-weight:500;color:var(--ws-text-primary);font-size:16px;display:flex;align-items:center}.qms-select-department-tree-container .header-title .header-view{padding:4px 0}.qms-select-department-tree-container .sticky-position{position:sticky;top:0;left:0;z-index:1;background:#fff}.qms-select-department-tree-container .header-view-tree{display:grid;grid-template-columns:1fr 200px;column-gap:2px;padding:4px 12px 4px 0}.qms-select-department-tree-container .header-view-tree .header-view:nth-child(1){padding-left:12px}.qms-select-department-tree-container .tree-department-wrapper{padding-right:4px;overflow:hidden;position:relative;transition:height .3s ease-in-out}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view{width:100%;display:grid;grid-template-columns:1fr 200px;column-gap:2px}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main>.separate{height:38px}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main>.separate.h-0{height:0}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main:last-child{height:100%;padding-left:4px;position:relative}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main:last-child:after{position:absolute;content:\"\";top:0;bottom:-38px;left:0;width:1px;background:#0000001f}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main .external-list-item-container .node-external{overflow:hidden;transition:all .1s ease-in-out}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main .external-list-item-container .node-external .node-external-content{padding:5px 15px;height:calc(100% - 2px);color:var(--default-color);font-size:14px;display:flex;align-items:center}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main .external-list-item-container .node-external .node-external-content span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qms-select-department-tree-container .mask-overlay{z-index:1000;background-color:#2221211a;position:absolute;top:0;left:0;width:100%;height:100%;border-radius:4px;overflow:hidden;display:grid;place-items:center}.qms-select-department-tree-container .select-department-tree>.cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper{padding:0 4px!important}.qms-select-department-tree-container .select-department-tree .qms-tree-node{display:flex;align-items:center;border-radius:4px}.qms-select-department-tree-container .select-department-tree .qms-tree-node:hover{background-color:#00000014}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.node-expand-area{width:48px;height:48px;position:relative}.qms-select-department-tree-container .select-department-tree .qms-tree-node.active-external-view .mat-mdc-checkbox.qms-group-options{width:calc(100% - 250px)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.node-loading{background:var(--primary-light-6-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node{flex-basis:200px;overflow:hidden}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node .node-external{overflow:hidden;transition:all .1s ease-in-out;display:block}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node .node-external .node-external-content{padding:5px 15px;height:calc(100% - 2px);color:var(--default-color);font-size:14px;display:flex;align-items:center}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node .node-external .node-external-content span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node{color:var(--primary)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node:hover{background:var(--primary-light-6-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node:active{background:var(--primary-light-12-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node .mat-icon{color:var(--primary)}.qms-select-department-tree-container .select-department-tree .qms-tree-node .node-without-checkbox{cursor:pointer;width:100%;display:flex;justify-content:space-between;align-items:center}.qms-select-department-tree-container .select-department-tree .qms-tree-node .node-without-checkbox .mat-icon{color:var(--primary);margin-right:4px}.qms-select-department-tree-container .select-department-tree .qms-tree-node.selected-theme{background:var(--primary-light-12-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all{cursor:default!important;pointer-events:none;-webkit-user-select:none;user-select:none}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all button.mat-button-disabled,.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all .mat-icon-rtl-mirror,.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all .type-icon{color:#00000061}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all .text-name.disabled{color:#00000061;cursor:default!important;pointer-events:none;-webkit-user-select:none;user-select:none}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all.active{background-color:transparent}.qms-select-department-tree-container .text-name{position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;cursor:pointer;width:100%}.qms-select-department-tree-container .cursor-pointer{cursor:pointer}.qms-select-department-tree-container .ml5{margin-left:15px!important}.qms-select-department-tree-container .pl-10{padding-left:10px}.qms-select-department-tree-container ::ng-deep .mat-mdc-checkbox.qms-group-options.flex-direction-row .mat-checkbox-layout{white-space:normal}.qms-select-department-tree-container ::ng-deep .mat-mdc-checkbox.qms-group-options.flex-direction-row .node-text>span{display:block}.qms-select-department-tree-container ::ng-deep .mat-mdc-checkbox.qms-group-options.flex-direction-row .mat-checkbox-label{flex-direction:row;align-items:center;position:relative;padding-bottom:2px}.qms-select-department-tree-container .qms-view-search-result{width:100%;overflow:hidden}.qms-select-department-tree-container .qms-view-search-result__header{position:relative}.qms-select-department-tree-container .qms-view-search-result__header:after{position:absolute;content:\"\";bottom:0;left:0;width:100%;height:1px;background-color:#0000001a}.qms-select-department-tree-container .qms-view-search-result__header .header-title{padding:8px 0;display:inline-block}.qms-select-department-tree-container .qms-view-search-result__header .header-title:nth-child(1){padding-left:12px}.qms-select-department-tree-container .qms-view-search-result__header .header-title:nth-child(2){flex-basis:200px}.qms-select-department-tree-container .qms-view-search-result>.no-result{height:100%;display:flex;justify-content:center;align-items:center}.qms-select-department-tree-container .qms-view-search-result__wrapper{height:calc(100% - 50px);width:100%}.qms-select-department-tree-container .qms-view-search-result__wrapper.active-external{height:calc(100% - 90px)!important}.qms-select-department-tree-container .qms-view-search-result__wrapper .result{max-height:calc(100% - 44px);overflow-y:auto;margin-bottom:4px;padding-right:4px}.qms-select-department-tree-container .qms-view-search-result__wrapper .result.active-paging{max-height:calc(100% - 40px)}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item{border-radius:4px;display:grid;grid-template-columns:45px 1fr;align-items:center;cursor:pointer;transition:background .3s ease;min-height:40px}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item:not(:nth-child(1)){margin-top:4px!important}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item:hover,.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item.active{background:linear-gradient(0deg,#0163b21f,#0163b21f),#fff}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content{display:flex;align-items:center}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content .item-result-content-wraper{padding:5px 15px;width:100%}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content .external-name{flex-basis:200px}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content .external-name span{width:200px;display:inline-block}.qms-select-department-tree-container .qms-view-search-result ::ng-deep .mat-mdc-checkbox.qms-group-options{display:flex;height:100%}.qms-select-department-tree-container ::ng-deep .breadcrumb-container{flex-wrap:wrap}.qms-select-department-tree-container ::ng-deep .mat-button-focus-overlay{background-color:transparent}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item{margin:0}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;transition:color .3s ease}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item-text:not(:last-child){max-width:150px!important}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-total-result{margin-bottom:0;margin-right:12px;height:100%;display:flex;align-items:center}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-total-result span{font-weight:600;color:#000c}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-paginator-range-actions{margin-bottom:0;column-gap:2px}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-paginator-range-actions>.qms-total-result{margin-bottom:0}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-form-field-wrapper{padding-bottom:0}.qms-select-department-tree-container ::ng-deep .qms-paginator .qms-paginator-page-size{align-items:center}.qms-select-department-tree-container .text-gray{color:#242424}.qms-select-department-tree-container .mb0{margin-bottom:0!important}.qms-select-department-tree-container .fs-base{font-size:14px!important}.qms-select-department-tree-container .user-select-none{-webkit-user-select:none;user-select:none}.qms-select-department-tree-container .item-breadcrumb-disable{cursor:not-allowed;color:#0009;font-weight:400;font-size:14px}.qms-select-department-tree-container ::ng-deep .mat-mdc-checkbox.checkbox-all .mat-checkbox-label{flex-direction:row;align-items:center;column-gap:4px}.qms-select-department-tree-container ::ng-deep .btn-arrow{width:40px;height:40px;line-height:40px}.qms-select-department-tree-container .qms-loading-container{overflow:hidden;display:grid;grid-template-rows:repeat(60px)}.qms-select-department-tree-container .qms-loading-container .qms-loader{position:relative;width:100%;height:100%;padding:10px 0;overflow:hidden}.qms-select-department-tree-container .qms-loading-container .qms-loader:after{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;background:linear-gradient(110deg,#e9e9e900,#e3e3e300 40%,#e3e3e380 50%,#e3e3e300 60% 100%);animation:animate-loading 1.2s linear infinite}.qms-select-department-tree-container .qms-loading-container .qms-loader__wrapper{position:relative;width:100%;height:100%}.qms-select-department-tree-container .qms-loading-container .qms-loader__wrapper .row-loader{background-color:#eee;position:absolute;left:0;width:100%;height:40px}@keyframes animate-loading{0%{transform:translate(-100%)}to{transform:translate(100%)}}.qms-select-department-tree-container .qms-spinner{font-size:20px;position:relative;display:inline-block;width:1em;height:1em}.qms-select-department-tree-container .qms-spinner.center{position:absolute;inset:0;margin:auto}.qms-select-department-tree-container ::ng-deep .mat-mdc-progress-spinner circle,.qms-select-department-tree-container .mat-mdc-progress-spinner circle{stroke:#1b75be!important}@media screen and (max-width: 600px){.qms-select-department-tree-container .external-view-node{flex-basis:65px!important}.qms-select-department-tree-container .qms-tree-node.active-external-view .mat-mdc-checkbox.qms-group-options{width:calc(100% - 110px)!important}.qms-select-department-tree-container .header-view-tree{grid-template-columns:1fr 80px!important}.qms-select-department-tree-container ::ng-deep .cdk-virtual-scroll-content-wrapper{right:0!important}.qms-select-department-tree-container .header-title{font-size:14px!important}.qms-select-department-tree-container .text-name,.qms-select-department-tree-container .node-external,.qms-select-department-tree-container .text-label,.qms-select-department-tree-container .text-label+span{font-size:12px}.qms-select-department-tree-container .node-expand-area{width:30px!important;height:30px!important}.qms-select-department-tree-container .node-expand-area .qms-btn-icon{width:30px;height:30px;line-height:30px}.qms-select-department-tree-container .fs-base{font-size:12px!important}.qms-select-department-tree-container .qms-select-department-tree-container .breadcrumb-container{flex-wrap:nowrap!important}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item-text{font-size:12px!important;max-width:175px!important}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-total-result{display:none!important}.qms-select-department-tree-container ::ng-deep .qms-paginator .size-small .mat-mdc-paginator-container{justify-content:center!important}.qms-select-department-tree-container .qms-view-search-result__header>.header-title:nth-child(2){flex-basis:120px!important}.qms-select-department-tree-container .result-item__content .external-name{flex-basis:75px!important}.qms-select-department-tree-container .result-item__content .external-name span{width:75px!important}}\n"] }]
|
|
39704
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['qms-select-department-tree-container', (config.customClass || '')]\">\n <div class=\"input-select-department\">\n <form (ngSubmit)=\"!getLoading$.value\" *ngIf=\"config.enableTreeSearch\" class=\"input-field\">\n <mat-form-field class=\"w100\" qms-form qms-search-field>\n <input [formControl]=\"formSearchControl\" type=\"text\" placeholder=\"{{ LANG.SEARCH }}\" matInput />\n <button *ngIf=\"!getLoading$.value\" type=\"submit\" qms-btn-icon color=\"light\" matSuffix>\n <mat-icon>search</mat-icon>\n </button>\n <div matSuffix class=\"d-inline-block\">\n <mat-progress-spinner [@inOutAnimation] mode=\"indeterminate\" diameter=\"20\"\n *ngIf=\"getLoading$.value\"></mat-progress-spinner>\n </div>\n <button *ngIf=\"!!formSearchControl.value && !getLoading$.value\" matSuffix qms-btn-icon color=\"light\"\n [@inOutAnimation] aria-label=\"Clear\" (click)=\"formSearchControl.reset()\">\n <mat-icon>close</mat-icon>\n </button>\n </mat-form-field>\n </form>\n <div [@inOutAnimation] *ngIf=\"(getIndexView$ | async) === 1 && (textSearchSubject$ | async)\"\n class=\"sub-text ms-1 fw500\">\n {{LANG.RESULT_SEARCH_FOR}}<i><b>\"{{textSearchSubject$ | async}}\"</b></i>\n </div>\n <div [class.justify-content-between]=\"config.enableIncludeChild && !config.isSelectOne\"\n class=\"select__toggle-include toggle-include-child my-1 d-flex justify-content-end align-items-center\">\n <mat-slide-toggle *ngIf=\"config.enableIncludeChild && !config.isSelectOne\"\n [disabled]=\"(getIndexView$ | async) === 1 && config.disableToggleIncludeChildWhenChangeView\"\n [(ngModel)]=\"isIncludeChildren\" (ngModelChange)=\"toggleIncludeChildEvent.emit($event)\" color=\"default\"\n qms-group-options>\n <span class=\"text-label\">{{config.selectIncludeLabel || LANG.SELECT_INCLUDE_CHILD}}</span>\n </mat-slide-toggle>\n <button class=\"btn-arrow\" [@inOutAnimation] *ngIf=\"(getIndexView$ | async) === 1 && config.enableTreeSearch\"\n (click)=\"setIndexView(0)\" qms-btn-icon color=\"light\" [qms-tool-tip]=\"LANG.BACK_TO_TREE\" mode=\"dark\"\n position=\"top\">\n <mat-icon>arrow_back</mat-icon>\n </button>\n <button class=\"btn-arrow\" [@inOutAnimation]\n *ngIf=\"(getIndexView$ | async) === 0 && config.enableTreeSearch && (textSearchSubject$ | async)\"\n (click)=\"setIndexView(1)\" qms-btn-icon color=\"light\" [qms-tool-tip]=\"LANG.GOTO_SEACH_RESULT\" mode=\"dark\"\n position=\"top\">\n <mat-icon>arrow_forward</mat-icon>\n </button>\n </div>\n </div>\n <div [@inOutAnimation]\n *ngIf=\"(getIndexView$ | async) === 0 && config.modeView === MODE_VIEW_ENUM.ExternalView && !!config.headerName\"\n class=\"header-view-tree\">\n <div class=\"header-view header-title\">\n {{config.headerName.treeName}}\n </div>\n <div class=\"header-view header-title\">\n {{config.headerName.externalName}}\n </div>\n </div>\n <mat-divider class=\"mx-auto\"></mat-divider>\n <div [@animateSlideView]=\"(getIndexView$ | async)\" [ngStyle]=\"{\n minHeight: height\n }\" class=\"tree-department-wrapper\">\n <div *ngIf=\"(getIndexView$ | async) === 0\" class=\"tree-view w100 h100\">\n <div class=\"tree-view-main h100\">\n <div *ngIf=\"!config.isSelectOne && !!treeControl.dataNodes && config.activeSelectAllNode\"\n class=\"checkbox-all-tree\" [class.sticky-position]=\"config.modeView === MODE_VIEW_ENUM.ExternalView\">\n <!-- Checkbox all root node -->\n <mat-checkbox [@inOutAnimation] (click)=\"onCheckAllRootTreeNode()\"\n [indeterminate]=\"isIndeterminateCheckboxAllTree\" [checked]=\"isAllDepartmentSelected\" qms-group-options\n color=\"default\" label=\"none\" class=\"checkbox-all\">\n <span class=\"text-label \">{{LANG.CHOOSE_ALL}}(<b>{{treeControl.dataNodes.length}}</b>)</span>\n </mat-checkbox>\n <mat-divider class=\"mx-auto\"></mat-divider>\n </div>\n <cdk-virtual-scroll-viewport *ngIf=\"dataSource.data\" [ngClass]=\"{\n 'has-checkbox-all': !config.isSelectOne && config.modeView === MODE_VIEW_ENUM.Basic,\n 'select-department-tree': true\n }\" [itemSize]=\"ITEM_SIZE\" [ngStyle]=\"{height: height}\">\n <ng-container *cdkVirtualFor=\"let node of dataSource; trackBy: trackBy\">\n <div class=\"qms-tree-node mt-1\" [style.padding-left]=\"node.level * (config.isMobile ? 12 :24) + 'px'\"\n [attr.data-id]=\"node.id\" [id]=\"'mat-node-'+node.id\" [@triggerColor]=\"activeNode == node.id\" [ngClass]=\"{\n 'mat-tree-node-disabled-all': node.disabled,\n 'w-100': config.isSelectOne,\n 'selected-theme': this.checkListSelection.isSelected(node) && config.isSelectOne,\n 'expand-node': treeControl.isExpandable(node) && treeControl.isExpanded(node),\n 'active-external-view': config.modeView === MODE_VIEW_ENUM.ExternalView,\n 'node-loading': node.isLoading\n }\">\n <div class=\"node-expand-area\">\n <button class=\"btn-toggle\" qms-btn-icon color=\"light\" (click)=\"onExpandNode(node)\"\n *ngIf=\"treeControl.isExpandable(node) && !node.isLoading\">\n <mat-icon>\n {{ treeControl.isExpanded(node) ? \"expand_more\" : \"chevron_right\" }}\n </mat-icon>\n </button>\n <ng-container *ngIf=\"node.isLoading; then loadingSpinner\"></ng-container>\n </div>\n <ng-container [ngTemplateOutlet]=\"config.isSelectOne ? nodeWithoutCheckboxTemplate : showCheckboxTemplate\"\n [ngTemplateOutletContext]=\"{ node: node }\"></ng-container>\n <div *ngIf=\"config.modeView === MODE_VIEW_ENUM.ExternalView\" class=\"external-view-node\">\n <span class=\"node-external\" qms-elipsify position=\"top\" mode=\"dark\">\n {{node.externalName || ''}}\n </span>\n </div>\n </div>\n </ng-container>\n </cdk-virtual-scroll-viewport>\n <ng-container [@inOutAnimation] *ngIf=\"config.spinnerWhenGetMore && getLoadingMore$| async ;then maskOverlay\">\n </ng-container>\n </div>\n </div>\n <div *ngIf=\"(getIndexView$ | async) === 1\" [ngStyle]=\"{\n height: height\n }\" class=\"qms-view-search-result\">\n <div *ngIf=\"config.modeView === MODE_VIEW_ENUM.ExternalView\"\n class=\"qms-view-search-result__header d-flex align-items-center justify-content-between\">\n <div class=\"header-title\">\n <span qms-elipsify mode=\"dark\" position=\"top\">\n {{config.headerName.resultSearchName}}\n </span>\n </div>\n <div class=\"header-title\">\n <span qms-elipsify mode=\"dark\" position=\"top\">\n {{config.headerName.externalName}}\n </span>\n </div>\n </div>\n <ng-container *ngIf=\"getLoading$.value; then loading\"></ng-container>\n <div class=\"qms-view-search-result__wrapper\"\n [class.active-external]=\"config.modeView === MODE_VIEW_ENUM.ExternalView\"\n *ngIf=\"!!resultSearch.length && !getLoading$.value\">\n <div class=\"\">\n <mat-checkbox [@inOutAnimation]\n [disabled]=\"!resultSearch.length || config.isSelectOne || isDisableChecboxAllSearch()\" #checkAllSearch\n [indeterminate]=\"indeterminateSearchResult\" [checked]=\"isSelectAllResultSearch\" qms-group-options\n color=\"default\" label=\"none\" class=\"checkbox-all\"\n (click)=\"!config.isSelectOne && onSelectAllSearchResult(checkAllSearch.checked)\">\n <span class=\"text-label header-title\">{{LANG.CHOOSE_ALL}}</span>\n <span>(<b>{{resultSearch.length}}</b>)</span>\n </mat-checkbox>\n </div>\n <div [@inOutAnimation] [@listAnimation]\n [class.active-paging]=\"searchDepartment$.value.length > 10 && config.enablePagingSearch\" class=\"result\">\n <div [qms-tool-tip]=\"!canHandleItemSearchResult(item) ? LANG.ITEM_NOT_MATCH_TO_TREE : ''\" mode=\"dark\"\n position=\"top\" *ngFor=\"let item of resultSearch\"\n (click)=\"$event.stopImmediatePropagation(); !item.disabled && onCheckItemSearchResult(item)\"\n [class.active]=\"checkListSelectionSearch.isSelected(item)\" class=\"result-item user-select-none\" matRipple>\n <mat-checkbox [@inOutAnimation] *ngIf=\"!item.isLoading\" [disabled]=\"item.disabled\"\n (click)=\"$event.stopImmediatePropagation(); !item.disabled && onCheckItemSearchResult(item)\"\n [checked]=\"checkListSelectionSearch.isSelected(item)\" qms-group-options color=\"default\" label=\"none\">\n </mat-checkbox>\n <div *ngIf=\"item.isLoading\" [@inOutAnimation] class=\"position-relative\">\n <ng-container *ngIf=\"item.isLoading; then loadingSpinner\"></ng-container>\n </div>\n <div class=\"result-item__content\">\n <div class=\"item-result-content-wraper\">\n <div class=\"text-gray fw-bold fs-base mb0\">{{item.name}}</div>\n <qms-breadcrumb *ngIf=\"item.location?.length > 1\" [type]=\"config.isMobile ? 'mobile': ''\"\n [numDisplayItem]=\"6\" (onItemClick)=\"$event.stopImmediatePropagation()\" class=\"breadcrumb-container\"\n [nodes]=\"item.location\">\n </qms-breadcrumb>\n <div *ngIf=\"item.location?.length === 1\" class=\"d-flex align-items-center\">\n <span qms-elipsify mode=\"dark\" position=\"top\"\n class=\"item-breadcrumb-disable d-block\">{{item.location[0].name}}</span>\n </div>\n </div>\n <div *ngIf=\"config.modeView === MODE_VIEW_ENUM.ExternalView\" class=\"external-name\">\n <span qms-elipsify mode=\"dark\" position=\"top\" class=\"text-gray fs-base mb0\">{{item.externalName}}\n </span>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div [@inOutAnimation] *ngIf=\"!resultSearch.length && !getLoading$.value\" class=\"result no-result\">\n <ng-container *ngTemplateOutlet=\"noResult\"></ng-container>\n </div>\n <mat-divider *ngIf=\"searchDepartment$.value.length > 10 && config.enablePagingSearch\"\n class=\"mx-auto\"></mat-divider>\n <qms-paginator #paginatorSearch *ngIf=\"searchDepartment$.value.length > 10 && config.enablePagingSearch \"\n [length]=\"searchDepartment$.value.length\" [numHidden]=\"0\" [pageSize]=\"CURRENT_PAGESIZE\"\n [pageSizeOptions]=\"PAGE_SIZE_OPTION\" (page)='onPagingSearchResult($event)'\n [size]='config.isMobile ? PAGINATION_SIZE.small : PAGINATION_SIZE.medium'>\n </qms-paginator>\n </div>\n </div>\n\n <!-- Template for Checkbox -->\n <ng-template #showCheckboxTemplate let-node=\"node\">\n <mat-checkbox [id]=\"'node-'+node.id\" qms-group-options color=\"default\" label=\"none\" class=\"flex-direction-row\"\n [disabled]=\"node.isLoading\" [checked]=\"checkListSelection.isSelected(node)\"\n (click)=\"!node.isLoading && onCheckNode(node)\" [attr.disabled]=\"node.disabled || node.isLoading\">\n <img [title]=\"node.itemIconSvg\" *ngIf=\"node.itemIconSvg\" class=\"material-icons type-icon\"\n [src]=\"node.itemIconSvg\" />\n <span *ngIf=\"node.itemIcon\" [class]=\"node.itemIcon\" [qmsTransformIcon]=\"node.itemIcon\"\n class=\"material-icons-outlined type-icon\"></span>\n <span *ngIf=\"node.itemMatIcon\" class=\"material-icons-outlined type-icon\">{{\n node.itemMatIcon }}\n </span>\n <span class=\"text-name cursor-pointer ml5 123\" [ngClass]=\"{ disabled: node.disabled }\">{{ node.name}}\n </span>\n </mat-checkbox>\n </ng-template>\n\n <!-- Template node without checkbox -->\n <ng-template #nodeWithoutCheckboxTemplate let-node=\"node\">\n <div [id]=\"'node-'+node.id\" (click)=\"onCheckNode(node)\" class=\"node-without-checkbox\">\n <div class=\"node-info\">\n <span *ngIf=\"node.itemIcon\" [class]=\"node.itemIcon\" [qmsTransformIcon]=\"node.itemIcon\"\n class=\"material-icons-outlined type-icon\"></span>\n <span *ngIf=\"node.itemMatIcon\" class=\"material-icons-outlined type-icon\">{{\n node.itemMatIcon }}\n </span>\n <span class=\"text-name cursor-pointer pl-10 123\" [ngClass]=\"{ disabled: node.disabled }\">{{ node.name }}</span>\n </div>\n <div class=\"node-state\">\n <mat-icon *ngIf=\"checkListSelection.isSelected(node)\">check</mat-icon>\n </div>\n </div>\n </ng-template>\n</div>\n\n<ng-template #noResult>\n <svg width=\"89\" height=\"130\" viewBox=\"0 0 89 88\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"white\" />\n <rect x=\"0.5\" width=\"88\" height=\"88\" rx=\"44\" fill=\"#0163B2\" fill-opacity=\"0.12\" />\n <path\n d=\"M44.5 56.6936L58.096 64.8996L54.488 49.4336L66.5 39.0276L50.682 37.6856L44.5 23.0996L38.318 37.6856L22.5 39.0276L34.512 49.4336L30.904 64.8996L44.5 56.6936Z\"\n fill=\"#0163B3\" />\n <text x=\"10\" y=\"105\" fill=\"#0163B2\">{{LANG.NO_RESULT}}</text>\n </svg>\n</ng-template>\n\n<!-- Template loading -->\n<ng-template #loading>\n <div [ngStyle]=\"{\n 'height': searchDepartment$.value.length ? (config.modeView === MODE_VIEW_ENUM.ExternalView ? 'calc(100% - 90px)' : 'calc(100% - 50px)' ) : height\n }\" class=\"qms-loading-container\">\n <div class=\"qms-loader\" *ngFor=\"let item of arrSkeleton\">\n <div class=\"qms-loader__wrapper\">\n <div class=\"row-loader\">\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n\n<!-- Template mask overlay -->\n<ng-template #maskOverlay>\n <div class=\"mask-overlay\">\n <mat-spinner [diameter]=\"50\" [strokeWidth]=\"5\"></mat-spinner>\n </div>\n</ng-template>\n\n<!-- Loading spinner -->\n<ng-template #loadingSpinner>\n <div class=\"qms-spinner center\">\n <mat-spinner [diameter]=\"20\" [strokeWidth]=\"2\"></mat-spinner>\n </div>\n</ng-template>", styles: [".qms-select-department-tree-container{font-family:Open Sans,sans-serif}.qms-select-department-tree-container .mr10{margin-right:10px}.qms-select-department-tree-container .mt5{margin-bottom:5px}.qms-select-department-tree-container .mb5{margin-top:5px}.qms-select-department-tree-container .w100{width:100%}.qms-select-department-tree-container .h100{height:100%}.qms-select-department-tree-container .fw500{font-weight:500!important}.qms-select-department-tree-container .text-right{text-align:right}.qms-select-department-tree-container .mt20{margin-top:20px}.qms-select-department-tree-container .d-flex{display:flex}.qms-select-department-tree-container .align-items-center{align-items:center}.qms-select-department-tree-container .justify-content-end{justify-content:flex-end}.qms-select-department-tree-container .text-selected{color:#0009;font-size:12px;line-height:16px;margin-top:1rem}.qms-select-department-tree-container .input-field{display:flex;align-items:center;position:relative}.qms-select-department-tree-container .input-field ::ng-deep .mat-form-field-wrapper{padding-bottom:8px!important}.qms-select-department-tree-container .input-field ::ng-deep .mat-form-field-underline{bottom:8px!important}.qms-select-department-tree-container .input-field input.input-search{width:100%;padding:10px;outline:none;border:none;background:var(--background-input-text)}.qms-select-department-tree-container .input-field .btn-search{cursor:pointer;vertical-align:middle;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.qms-select-department-tree-container .input-field .line__divider{border-bottom:1px solid #ccc;height:1px;margin-top:10px;min-width:300px;max-width:100%}.qms-select-department-tree-container .header-title{font-weight:500;color:var(--ws-text-primary);font-size:16px;display:flex;align-items:center}.qms-select-department-tree-container .header-title .header-view{padding:4px 0}.qms-select-department-tree-container .sticky-position{position:sticky;top:0;left:0;z-index:1;background:#fff}.qms-select-department-tree-container .header-view-tree{display:grid;grid-template-columns:1fr 200px;column-gap:2px;padding:4px 12px 4px 0}.qms-select-department-tree-container .header-view-tree .header-view:nth-child(1){padding-left:12px}.qms-select-department-tree-container .tree-department-wrapper{padding-right:4px;overflow:hidden;position:relative;transition:height .3s ease-in-out}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view{width:100%;display:grid;grid-template-columns:1fr 200px;column-gap:2px}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main>.separate{height:38px}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main>.separate.h-0{height:0}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main:last-child{height:100%;padding-left:4px;position:relative}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main:last-child:after{position:absolute;content:\"\";top:0;bottom:-38px;left:0;width:1px;background:#0000001f}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main .external-list-item-container .node-external{overflow:hidden;transition:all .1s ease-in-out}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main .external-list-item-container .node-external .node-external-content{padding:5px 15px;height:calc(100% - 2px);color:var(--default-color);font-size:14px;display:flex;align-items:center}.qms-select-department-tree-container .tree-department-wrapper .tree-view.active-mode-external-view .tree-view-main .external-list-item-container .node-external .node-external-content span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qms-select-department-tree-container .mask-overlay{z-index:1000;background-color:#2221211a;position:absolute;top:0;left:0;width:100%;height:100%;border-radius:4px;overflow:hidden;display:grid;place-items:center}.qms-select-department-tree-container .select-department-tree>.cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper{padding:0 4px!important}.qms-select-department-tree-container .select-department-tree .qms-tree-node{display:flex;align-items:center;border-radius:4px}.qms-select-department-tree-container .select-department-tree .qms-tree-node:hover{background-color:#00000014}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.node-expand-area{width:48px;height:48px;position:relative}.qms-select-department-tree-container .select-department-tree .qms-tree-node.active-external-view .mat-mdc-checkbox.qms-group-options{width:calc(100% - 250px)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.node-loading{background:var(--primary-light-6-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node{flex-basis:200px;overflow:hidden}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node .node-external{overflow:hidden;transition:all .1s ease-in-out;display:block}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node .node-external .node-external-content{padding:5px 15px;height:calc(100% - 2px);color:var(--default-color);font-size:14px;display:flex;align-items:center}.qms-select-department-tree-container .select-department-tree .qms-tree-node>.external-view-node .node-external .node-external-content span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node{color:var(--primary)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node:hover{background:var(--primary-light-6-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node:active{background:var(--primary-light-12-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.expand-node .mat-icon{color:var(--primary)}.qms-select-department-tree-container .select-department-tree .qms-tree-node .node-without-checkbox{cursor:pointer;width:100%;display:flex;justify-content:space-between;align-items:center}.qms-select-department-tree-container .select-department-tree .qms-tree-node .node-without-checkbox .mat-icon{color:var(--primary);margin-right:4px}.qms-select-department-tree-container .select-department-tree .qms-tree-node.selected-theme{background:var(--primary-light-12-opacity)}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all{cursor:default!important;pointer-events:none;-webkit-user-select:none;user-select:none}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all button.mat-button-disabled,.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all .mat-icon-rtl-mirror,.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all .type-icon{color:#00000061}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all .text-name.disabled{color:#00000061;cursor:default!important;pointer-events:none;-webkit-user-select:none;user-select:none}.qms-select-department-tree-container .select-department-tree .qms-tree-node.mat-tree-node-disabled-all.active{background-color:transparent}.qms-select-department-tree-container .text-name{position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;cursor:pointer;width:100%}.qms-select-department-tree-container .cursor-pointer{cursor:pointer}.qms-select-department-tree-container .ml5{margin-left:15px!important}.qms-select-department-tree-container .pl-10{padding-left:10px}.qms-select-department-tree-container ::ng-deep .mat-mdc-checkbox.qms-group-options.flex-direction-row .mat-checkbox-layout{white-space:normal}.qms-select-department-tree-container ::ng-deep .mat-mdc-checkbox.qms-group-options.flex-direction-row .node-text>span{display:block}.qms-select-department-tree-container ::ng-deep .mat-mdc-checkbox.qms-group-options.flex-direction-row .mat-checkbox-label{flex-direction:row;align-items:center;position:relative;padding-bottom:2px}.qms-select-department-tree-container .qms-view-search-result{width:100%;overflow:hidden}.qms-select-department-tree-container .qms-view-search-result__header{position:relative}.qms-select-department-tree-container .qms-view-search-result__header:after{position:absolute;content:\"\";bottom:0;left:0;width:100%;height:1px;background-color:#0000001a}.qms-select-department-tree-container .qms-view-search-result__header .header-title{padding:8px 0;display:inline-block}.qms-select-department-tree-container .qms-view-search-result__header .header-title:nth-child(1){padding-left:12px}.qms-select-department-tree-container .qms-view-search-result__header .header-title:nth-child(2){flex-basis:200px}.qms-select-department-tree-container .qms-view-search-result>.no-result{height:100%;display:flex;justify-content:center;align-items:center}.qms-select-department-tree-container .qms-view-search-result__wrapper{height:calc(100% - 50px);width:100%}.qms-select-department-tree-container .qms-view-search-result__wrapper.active-external{height:calc(100% - 90px)!important}.qms-select-department-tree-container .qms-view-search-result__wrapper .result{max-height:calc(100% - 44px);overflow-y:auto;margin-bottom:4px;padding-right:4px}.qms-select-department-tree-container .qms-view-search-result__wrapper .result.active-paging{max-height:calc(100% - 40px)}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item{border-radius:4px;display:grid;grid-template-columns:45px 1fr;align-items:center;cursor:pointer;transition:background .3s ease;min-height:40px}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item:not(:nth-child(1)){margin-top:4px!important}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item:hover,.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item.active{background:linear-gradient(0deg,#0163b21f,#0163b21f),#fff}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content{display:flex;align-items:center}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content .item-result-content-wraper{padding:5px 15px;width:100%}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content .external-name{flex-basis:200px}.qms-select-department-tree-container .qms-view-search-result__wrapper .result-item__content .external-name span{width:200px;display:inline-block}.qms-select-department-tree-container .qms-view-search-result ::ng-deep .mat-mdc-checkbox.qms-group-options{display:flex;height:100%}.qms-select-department-tree-container ::ng-deep .breadcrumb-container{flex-wrap:wrap}.qms-select-department-tree-container ::ng-deep .mat-button-focus-overlay{background-color:transparent}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item{margin:0}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item-text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;transition:color .3s ease}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item-text:not(:last-child){max-width:150px!important}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-total-result{margin-bottom:0;margin-right:12px;height:100%;display:flex;align-items:center}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-total-result span{font-weight:600;color:#000c}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-paginator-range-actions{margin-bottom:0;column-gap:2px}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-paginator-range-actions>.qms-total-result{margin-bottom:0}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-form-field-wrapper{padding-bottom:0}.qms-select-department-tree-container ::ng-deep .qms-paginator .qms-paginator-page-size{align-items:center}.qms-select-department-tree-container .text-gray{color:#242424}.qms-select-department-tree-container .mb0{margin-bottom:0!important}.qms-select-department-tree-container .fs-base{font-size:14px!important}.qms-select-department-tree-container .user-select-none{-webkit-user-select:none;user-select:none}.qms-select-department-tree-container .item-breadcrumb-disable{cursor:not-allowed;color:#0009;font-weight:400;font-size:14px}.qms-select-department-tree-container ::ng-deep .mat-mdc-checkbox.checkbox-all .mat-checkbox-label{flex-direction:row;align-items:center;column-gap:4px}.qms-select-department-tree-container ::ng-deep .btn-arrow{width:40px;height:40px;line-height:40px}.qms-select-department-tree-container .qms-loading-container{overflow:hidden;display:grid;grid-template-rows:repeat(60px)}.qms-select-department-tree-container .qms-loading-container .qms-loader{position:relative;width:100%;height:100%;padding:10px 0;overflow:hidden}.qms-select-department-tree-container .qms-loading-container .qms-loader:after{content:\"\";position:absolute;width:100%;height:100%;top:0;left:0;background:linear-gradient(110deg,#e9e9e900,#e3e3e300 40%,#e3e3e380 50%,#e3e3e300 60% 100%);animation:animate-loading 1.2s linear infinite}.qms-select-department-tree-container .qms-loading-container .qms-loader__wrapper{position:relative;width:100%;height:100%}.qms-select-department-tree-container .qms-loading-container .qms-loader__wrapper .row-loader{background-color:#eee;position:absolute;left:0;width:100%;height:40px}@keyframes animate-loading{0%{transform:translate(-100%)}to{transform:translate(100%)}}.qms-select-department-tree-container .qms-spinner{font-size:20px;position:relative;display:inline-block;width:1em;height:1em}.qms-select-department-tree-container .qms-spinner.center{position:absolute;inset:0;margin:auto}.qms-select-department-tree-container ::ng-deep .mat-mdc-progress-spinner circle,.qms-select-department-tree-container .mat-mdc-progress-spinner circle{stroke:#1b75be!important}@media screen and (max-width: 600px){.qms-select-department-tree-container .external-view-node{flex-basis:65px!important}.qms-select-department-tree-container .qms-tree-node.active-external-view .mat-mdc-checkbox.qms-group-options{width:calc(100% - 110px)!important}.qms-select-department-tree-container .header-view-tree{grid-template-columns:1fr 80px!important}.qms-select-department-tree-container ::ng-deep .cdk-virtual-scroll-content-wrapper{right:0!important}.qms-select-department-tree-container .header-title{font-size:14px!important}.qms-select-department-tree-container .text-name,.qms-select-department-tree-container .node-external,.qms-select-department-tree-container .text-label,.qms-select-department-tree-container .text-label+span{font-size:12px}.qms-select-department-tree-container .node-expand-area{width:30px!important;height:30px!important}.qms-select-department-tree-container .node-expand-area .qms-btn-icon{width:30px;height:30px;line-height:30px}.qms-select-department-tree-container .fs-base{font-size:12px!important}.qms-select-department-tree-container .qms-select-department-tree-container .breadcrumb-container{flex-wrap:nowrap!important}.qms-select-department-tree-container ::ng-deep .qms-breadcrumb-item-text{font-size:12px!important;max-width:175px!important}.qms-select-department-tree-container ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-total-result{display:none!important}.qms-select-department-tree-container ::ng-deep .qms-paginator .size-small .mat-mdc-paginator-container{justify-content:center!important}.qms-select-department-tree-container .qms-view-search-result__header>.header-title:nth-child(2){flex-basis:120px!important}.qms-select-department-tree-container .result-item__content .external-name{flex-basis:75px!important}.qms-select-department-tree-container .result-item__content .external-name span{width:75px!important}}\n"] }]
|
|
39630
39705
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$3.DomSanitizer }, { type: QMSIconRegistryService }, { type: i4.MatIconRegistry }, { type: i0.ElementRef }, { type: TranslateLibraryService }, { type: i1$1.Overlay }, { type: i0.ViewContainerRef }, { type: QMSSelectDepartmentTreeGlobalService }], propDecorators: { rowsSkeleton: [{
|
|
39631
39706
|
type: Input
|
|
39632
39707
|
}], height: [{
|