@energycap/components 0.39.4-ECAP-23219-bills-tree-collapse.20240103-1423 → 0.39.4-ECAP-23220-bc-file-upload-dialog.20240111-0843
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/esm2020/lib/controls/file-upload/file-upload.component.mjs +76 -27
- package/esm2020/lib/display/hierarchy/hierarchy-base.mjs +2 -2
- package/esm2020/lib/display/hierarchy/hierarchy-tree/hierarchy-tree.component.mjs +3 -3
- package/fesm2015/energycap-components.mjs +77 -26
- package/fesm2015/energycap-components.mjs.map +1 -1
- package/fesm2020/energycap-components.mjs +72 -25
- package/fesm2020/energycap-components.mjs.map +1 -1
- package/lib/controls/file-upload/file-upload.component.d.ts +30 -1
- package/lib/display/hierarchy/hierarchy-base.d.ts +2 -6
- package/package.json +1 -1
- package/src/assets/locales/en_US.json +3 -1
|
@@ -3783,7 +3783,7 @@ class FileUploadComponent extends FormControlBase {
|
|
|
3783
3783
|
file: new UntypedFormControl({ value: null, disabled: disabled }, validators),
|
|
3784
3784
|
name: new UntypedFormControl({ value: null, disabled: disabled }, validators),
|
|
3785
3785
|
base64FileString: new UntypedFormControl(null),
|
|
3786
|
-
uploadResult: new UntypedFormControl(null)
|
|
3786
|
+
uploadResult: new UntypedFormControl(null),
|
|
3787
3787
|
});
|
|
3788
3788
|
if (disabled) {
|
|
3789
3789
|
formGroup.disable();
|
|
@@ -3802,6 +3802,20 @@ class FileUploadComponent extends FormControlBase {
|
|
|
3802
3802
|
* File output, determines which properties are supplied on the formModel
|
|
3803
3803
|
*/
|
|
3804
3804
|
this.fileOutput = 'base64';
|
|
3805
|
+
/**
|
|
3806
|
+
* Optional display type that controls whether the file input textbox is displayed or
|
|
3807
|
+
* simply a button the user clicks to launch the OS file storage dialog.
|
|
3808
|
+
* Default: file
|
|
3809
|
+
*/
|
|
3810
|
+
this.displayType = 'file';
|
|
3811
|
+
/**
|
|
3812
|
+
* When display type is set to button this property will control the button type
|
|
3813
|
+
*/
|
|
3814
|
+
this.buttonType = 'primary';
|
|
3815
|
+
/**
|
|
3816
|
+
* Optional property to control whether the user can select multiple files
|
|
3817
|
+
*/
|
|
3818
|
+
this.multiSelect = false;
|
|
3805
3819
|
}
|
|
3806
3820
|
ngOnChanges(changes) {
|
|
3807
3821
|
super.ngOnChanges(changes);
|
|
@@ -3817,6 +3831,7 @@ class FileUploadComponent extends FormControlBase {
|
|
|
3817
3831
|
if (!value) {
|
|
3818
3832
|
this.formModel.patchValue({
|
|
3819
3833
|
file: null,
|
|
3834
|
+
name: null,
|
|
3820
3835
|
base64FileString: null,
|
|
3821
3836
|
uploadResult: null
|
|
3822
3837
|
});
|
|
@@ -3825,27 +3840,20 @@ class FileUploadComponent extends FormControlBase {
|
|
|
3825
3840
|
}
|
|
3826
3841
|
fileChange(files) {
|
|
3827
3842
|
return __awaiter(this, void 0, void 0, function* () {
|
|
3828
|
-
|
|
3829
|
-
|
|
3830
|
-
|
|
3831
|
-
|
|
3832
|
-
|
|
3833
|
-
|
|
3834
|
-
|
|
3835
|
-
this.processFile(file, base64FileString);
|
|
3836
|
-
});
|
|
3837
|
-
if (this.isBase64FileOutput()) {
|
|
3838
|
-
reader.readAsDataURL(file);
|
|
3839
|
-
}
|
|
3840
|
-
else {
|
|
3841
|
-
yield this.processFile(file);
|
|
3842
|
-
}
|
|
3843
|
-
// Clear the file inputs value, this will allow the user to pick the same filename and cause
|
|
3844
|
-
// the fileChange to trigger.
|
|
3845
|
-
if (this.fileInput) {
|
|
3846
|
-
this.fileInput.nativeElement.value = '';
|
|
3843
|
+
if (this.multiSelect) {
|
|
3844
|
+
this.handleMultipleFiles(files);
|
|
3845
|
+
}
|
|
3846
|
+
else {
|
|
3847
|
+
const file = files.item(0);
|
|
3848
|
+
if (file) {
|
|
3849
|
+
yield this.readFile(file);
|
|
3847
3850
|
}
|
|
3848
3851
|
}
|
|
3852
|
+
// Clear the file inputs value, this will allow the user to pick the same filenames again
|
|
3853
|
+
// and cause fileChange to re-trigger.
|
|
3854
|
+
if (this.fileInput) {
|
|
3855
|
+
this.fileInput.nativeElement.value = '';
|
|
3856
|
+
}
|
|
3849
3857
|
});
|
|
3850
3858
|
}
|
|
3851
3859
|
/**
|
|
@@ -3879,7 +3887,7 @@ class FileUploadComponent extends FormControlBase {
|
|
|
3879
3887
|
this.patchFileResult(file, base64FileString, result);
|
|
3880
3888
|
}
|
|
3881
3889
|
catch (e) {
|
|
3882
|
-
// Bummer, we're not going to do anything about it though.
|
|
3890
|
+
// Bummer, we're not going to do anything about it though.
|
|
3883
3891
|
// We are not patching any of the result so any existing information remains
|
|
3884
3892
|
}
|
|
3885
3893
|
}
|
|
@@ -3916,12 +3924,45 @@ class FileUploadComponent extends FormControlBase {
|
|
|
3916
3924
|
this.formModel.patchValue({ uploadResult: null });
|
|
3917
3925
|
}
|
|
3918
3926
|
}
|
|
3927
|
+
/** Maps the files to an array of File objects and sends them along
|
|
3928
|
+
* to the derived onMultipleFileSelected method in the hosting component
|
|
3929
|
+
*/
|
|
3930
|
+
handleMultipleFiles(files) {
|
|
3931
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
3932
|
+
const filesArray = Array.from(files);
|
|
3933
|
+
if (this.onMultipleFilesSelected) {
|
|
3934
|
+
try {
|
|
3935
|
+
let result = yield this.onMultipleFilesSelected(filesArray);
|
|
3936
|
+
}
|
|
3937
|
+
catch (e) {
|
|
3938
|
+
console.log('error: ', e);
|
|
3939
|
+
}
|
|
3940
|
+
}
|
|
3941
|
+
});
|
|
3942
|
+
}
|
|
3943
|
+
;
|
|
3944
|
+
readFile(file) {
|
|
3945
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
3946
|
+
const reader = new FileReader();
|
|
3947
|
+
reader.onloadend = (e) => __awaiter(this, void 0, void 0, function* () {
|
|
3948
|
+
var _a;
|
|
3949
|
+
let base64FileString = (_a = reader === null || reader === void 0 ? void 0 : reader.result) === null || _a === void 0 ? void 0 : _a.toString().split(",")[1];
|
|
3950
|
+
yield this.processFile(file, base64FileString);
|
|
3951
|
+
});
|
|
3952
|
+
if (this.isBase64FileOutput()) {
|
|
3953
|
+
reader.readAsDataURL(file);
|
|
3954
|
+
}
|
|
3955
|
+
else {
|
|
3956
|
+
yield this.processFile(file);
|
|
3957
|
+
}
|
|
3958
|
+
});
|
|
3959
|
+
}
|
|
3919
3960
|
}
|
|
3920
3961
|
FileUploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FileUploadComponent, deps: [{ token: ValidationMessageService }, { token: FormGroupHelper }], target: i0.ɵɵFactoryTarget.Component });
|
|
3921
|
-
FileUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: FileUploadComponent, selector: "ec-file-upload", inputs: { placeholder: "placeholder", fileType: "fileType", fileOutput: "fileOutput", customExtensions: "customExtensions", onFileSelected: "onFileSelected" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ec-form-group [label]=\"label\"\r\n [formGroup]=\"formModel\"\r\n class=\"mb-0\">\r\n <div class=\"d-flex control-group\">\r\n <div class=\"d-flex flex-grow position-relative\">\r\n <input #fileInput\r\n id=\"{{inputId}}_input\"\r\n type=\"file\"\r\n tabindex=\"-1\"\r\n [attr.accept]=\"fileTypeAccept\"\r\n (
|
|
3962
|
+
FileUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: FileUploadComponent, selector: "ec-file-upload", inputs: { placeholder: "placeholder", fileType: "fileType", fileOutput: "fileOutput", customExtensions: "customExtensions", onFileSelected: "onFileSelected", onMultipleFilesSelected: "onMultipleFilesSelected", displayType: "displayType", buttonLabel: "buttonLabel", buttonType: "buttonType", multiSelect: "multiSelect" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ec-form-group [label]=\"label\"\r\n [formGroup]=\"formModel\"\r\n class=\"mb-0\">\r\n <div class=\"d-flex control-group\">\r\n <div class=\"d-flex flex-grow position-relative\">\r\n <input #fileInput\r\n id=\"{{inputId}}_input\"\r\n type=\"file\"\r\n tabindex=\"-1\"\r\n [attr.accept]=\"fileTypeAccept\"\r\n (change)=\"fileChange($event.target.files)\"\r\n [class.has-value]=\"displayType === 'file' ? formModel?.get('name').value : undefined\"\r\n [attr.multiple]=\"multiSelect ? 'multiple' : undefined\">\r\n <ec-form-control *ngIf=\"displayType === 'file'\"\r\n id=\"{{inputId}}_formControl\"\r\n class=\"text-truncate\"\r\n [required]=\"required\"\r\n [pending]=\"pending\">\r\n <input id=\"{{inputId}}_name\"\r\n [formControl]=\"formModel?.get('name')\"\r\n type=\"text\"\r\n [placeholder]=\"placeholder\"\r\n [tabindex]=\"-1\">\r\n </ec-form-control>\r\n </div>\r\n <ec-button *ngIf=\"displayType === 'file'\"\r\n #browseBtn\r\n id=\"{{inputId}}_browseBtn\"\r\n (clicked)=\"fileInput.click()\"\r\n type=\"secondary\"\r\n [tabindex]=\"tabindex\"\r\n [disabled]=\"formModel?.get('name').disabled\"\r\n label=\"Browse\"\r\n [autofocus]=\"autofocus\">\r\n </ec-button>\r\n </div>\r\n <ec-button *ngIf=\"displayType === 'button'\"\r\n id=\"{{inputId}}_btn\"\r\n [pending]=\"pending\"\r\n [type]=\"buttonType\"\r\n [label]=\"buttonLabel ?? 'Browse_TC' | translate\"\r\n (clicked)=\"fileInput.click()\"\r\n style=\"width: 100%;\">\r\n </ec-button>\r\n</ec-form-group>", styles: [":host{display:block;margin-bottom:1rem}ec-form-control{margin-bottom:0}ec-form-control ::ng-deep>.ec-focus-ring{display:none!important}input[type=file]{opacity:0;display:block;position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;cursor:pointer}input[type=file].has-value{width:calc(100% - 1.5rem)}ec-button{--ec-button-border-color-secondary: var(--ec-form-control-border-color);--ec-button-color-icon-secondary: var(--ec-color-icon)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "icon", "label", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }, { kind: "component", type: FormControlComponent, selector: "ec-form-control", inputs: ["id", "icon", "actionIcon", "showClear", "pending", "required", "readonly"], outputs: ["actionClicked"] }, { kind: "component", type: FormGroupComponent, selector: "ec-form-group", inputs: ["id", "label", "formGroup", "labelPosition", "overrideValidationError", "hideValidationMessage"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
|
|
3922
3963
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FileUploadComponent, decorators: [{
|
|
3923
3964
|
type: Component,
|
|
3924
|
-
args: [{ selector: "ec-file-upload", template: "<ec-form-group [label]=\"label\"\r\n [formGroup]=\"formModel\"\r\n class=\"mb-0\">\r\n <div class=\"d-flex control-group\">\r\n <div class=\"d-flex flex-grow position-relative\">\r\n <input #fileInput\r\n id=\"{{inputId}}_input\"\r\n type=\"file\"\r\n tabindex=\"-1\"\r\n [attr.accept]=\"fileTypeAccept\"\r\n (
|
|
3965
|
+
args: [{ selector: "ec-file-upload", template: "<ec-form-group [label]=\"label\"\r\n [formGroup]=\"formModel\"\r\n class=\"mb-0\">\r\n <div class=\"d-flex control-group\">\r\n <div class=\"d-flex flex-grow position-relative\">\r\n <input #fileInput\r\n id=\"{{inputId}}_input\"\r\n type=\"file\"\r\n tabindex=\"-1\"\r\n [attr.accept]=\"fileTypeAccept\"\r\n (change)=\"fileChange($event.target.files)\"\r\n [class.has-value]=\"displayType === 'file' ? formModel?.get('name').value : undefined\"\r\n [attr.multiple]=\"multiSelect ? 'multiple' : undefined\">\r\n <ec-form-control *ngIf=\"displayType === 'file'\"\r\n id=\"{{inputId}}_formControl\"\r\n class=\"text-truncate\"\r\n [required]=\"required\"\r\n [pending]=\"pending\">\r\n <input id=\"{{inputId}}_name\"\r\n [formControl]=\"formModel?.get('name')\"\r\n type=\"text\"\r\n [placeholder]=\"placeholder\"\r\n [tabindex]=\"-1\">\r\n </ec-form-control>\r\n </div>\r\n <ec-button *ngIf=\"displayType === 'file'\"\r\n #browseBtn\r\n id=\"{{inputId}}_browseBtn\"\r\n (clicked)=\"fileInput.click()\"\r\n type=\"secondary\"\r\n [tabindex]=\"tabindex\"\r\n [disabled]=\"formModel?.get('name').disabled\"\r\n label=\"Browse\"\r\n [autofocus]=\"autofocus\">\r\n </ec-button>\r\n </div>\r\n <ec-button *ngIf=\"displayType === 'button'\"\r\n id=\"{{inputId}}_btn\"\r\n [pending]=\"pending\"\r\n [type]=\"buttonType\"\r\n [label]=\"buttonLabel ?? 'Browse_TC' | translate\"\r\n (clicked)=\"fileInput.click()\"\r\n style=\"width: 100%;\">\r\n </ec-button>\r\n</ec-form-group>", styles: [":host{display:block;margin-bottom:1rem}ec-form-control{margin-bottom:0}ec-form-control ::ng-deep>.ec-focus-ring{display:none!important}input[type=file]{opacity:0;display:block;position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;cursor:pointer}input[type=file].has-value{width:calc(100% - 1.5rem)}ec-button{--ec-button-border-color-secondary: var(--ec-form-control-border-color);--ec-button-color-icon-secondary: var(--ec-color-icon)}\n"] }]
|
|
3925
3966
|
}], ctorParameters: function () { return [{ type: ValidationMessageService }, { type: FormGroupHelper }]; }, propDecorators: { placeholder: [{
|
|
3926
3967
|
type: Input
|
|
3927
3968
|
}], fileType: [{
|
|
@@ -3932,6 +3973,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
3932
3973
|
type: Input
|
|
3933
3974
|
}], onFileSelected: [{
|
|
3934
3975
|
type: Input
|
|
3976
|
+
}], onMultipleFilesSelected: [{
|
|
3977
|
+
type: Input
|
|
3978
|
+
}], displayType: [{
|
|
3979
|
+
type: Input
|
|
3980
|
+
}], buttonLabel: [{
|
|
3981
|
+
type: Input
|
|
3982
|
+
}], buttonType: [{
|
|
3983
|
+
type: Input
|
|
3984
|
+
}], multiSelect: [{
|
|
3985
|
+
type: Input
|
|
3935
3986
|
}], fileInput: [{
|
|
3936
3987
|
type: ViewChild,
|
|
3937
3988
|
args: ["fileInput", { read: ElementRef, static: true }]
|
|
@@ -5658,7 +5709,7 @@ class HierarchyItem {
|
|
|
5658
5709
|
this.label = '';
|
|
5659
5710
|
/** Indicates how many levels deep the item is in the parent structure */
|
|
5660
5711
|
this.level = 0;
|
|
5661
|
-
/** Display item as a link
|
|
5712
|
+
/** Display item as a link or a heading */
|
|
5662
5713
|
this.display = 'default';
|
|
5663
5714
|
/** Set to hide toggle, even if item has children */
|
|
5664
5715
|
this.hideToggle = false;
|
|
@@ -5791,10 +5842,10 @@ class HierarchyTreeComponent extends HierarchyBase {
|
|
|
5791
5842
|
}
|
|
5792
5843
|
}
|
|
5793
5844
|
HierarchyTreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: HierarchyTreeComponent, deps: [{ token: ScrollService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
|
|
5794
|
-
HierarchyTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: HierarchyTreeComponent, selector: "ec-hierarchy-tree", inputs: { id: "id", hideRootNode: "hideRootNode", customItemTemplate: "customItemTemplate" }, outputs: { itemSelected: "itemSelected" }, usesInheritance: true, ngImport: i0, template: "<ul id=\"{{scrollContainerId}}\"\r\n class=\"flex-grow scroll-y py-1\">\r\n\r\n <li *ngIf=\"!hideRootNode && rootNode\">\r\n <div class=\"item-wrapper\"\r\n title=\"{{rootNode?.tooltip ?? rootNode?.label}}\"\r\n [ngClass]=\"{'is-heading': rootNode?.display === 'heading'}\"\r\n ecNavItemActive=\"is-selected\"\r\n [ecNavItemActiveUrl]=\"rootNode?.url\"\r\n [ecNavItemActiveExactMatch]='rootNode?.isActiveExactMatch'>\r\n <a id=\"rootNode_{{rootNode?.id}}_link\"\r\n class=\"item flex-grow d-flex align-items-center\"\r\n routerLink=\"{{rootNode?.url}}\"\r\n [queryParams]=\"rootNode?.queryParams\">\r\n <ng-container *ngTemplateOutlet=\"customItemTemplate || defaultItemTemplate; context: { $implicit: rootNode }\"></ng-container>\r\n </a>\r\n </div>\r\n </li>\r\n\r\n <ng-template #hierarchyView\r\n let-items>\r\n <li *ngFor=\"let item of items; index as index; first as isFirst\"\r\n
|
|
5845
|
+
HierarchyTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: HierarchyTreeComponent, selector: "ec-hierarchy-tree", inputs: { id: "id", hideRootNode: "hideRootNode", customItemTemplate: "customItemTemplate" }, outputs: { itemSelected: "itemSelected" }, usesInheritance: true, ngImport: i0, template: "<ul id=\"{{scrollContainerId}}\"\r\n class=\"flex-grow scroll-y py-1\">\r\n\r\n <li *ngIf=\"!hideRootNode && rootNode\">\r\n <div class=\"item-wrapper\"\r\n title=\"{{rootNode?.tooltip ?? rootNode?.label}}\"\r\n [ngClass]=\"{'is-heading': rootNode?.display === 'heading'}\"\r\n ecNavItemActive=\"is-selected\"\r\n [ecNavItemActiveUrl]=\"rootNode?.url\"\r\n [ecNavItemActiveExactMatch]='rootNode?.isActiveExactMatch'>\r\n <a id=\"rootNode_{{rootNode?.id}}_link\"\r\n class=\"item flex-grow d-flex align-items-center\"\r\n routerLink=\"{{rootNode?.url}}\"\r\n [queryParams]=\"rootNode?.queryParams\">\r\n <ng-container *ngTemplateOutlet=\"customItemTemplate || defaultItemTemplate; context: { $implicit: rootNode }\"></ng-container>\r\n </a>\r\n </div>\r\n </li>\r\n\r\n <ng-template #hierarchyView\r\n let-items>\r\n <li *ngFor=\"let item of items; index as index; first as isFirst\"\r\n id=\"treeItem_{{item.id}}\">\r\n <div class=\"item-wrapper\"\r\n title=\"{{item.tooltip ?? item.label}}\"\r\n [ngClass]=\"{'is-heading': item.display === 'heading'}\"\r\n ecNavItemActive=\"is-selected\"\r\n [ecNavItemActiveUrl]=\"item.url\"\r\n [ecNavItemActiveExactMatch]=\"item.isActiveExactMatch\"\r\n [ecNavItemActiveQueryParams]=\"item.queryParams\">\r\n\r\n <!-- This element provides the indentation for each level -->\r\n <span id=\"indent_{{item.id}}\"\r\n class=\"d-block h-100\"\r\n [style.width.px]=\"(indent) * (item.level - 1) + (item.level * 4) + (item.hasChildren ? 0 : indent)\">\r\n </span>\r\n\r\n <!-- Toggle the button icon to be a spinner when item.status is pending -->\r\n <ec-collapsible-toggle id=\"toggle_{{item.id}}\"\r\n class=\"flex-shrink\"\r\n [style.width.px]=\"indent\"\r\n *ngIf=\"item.hasChildren && !item.hideToggle\"\r\n [hidden]=\"item.status === 'pending'\"\r\n [expanded]=\"item.expanded\"\r\n (expandedChange)=\"toggleItemClicked(item, $event)\">\r\n </ec-collapsible-toggle>\r\n\r\n <i class=\"ec-icon icon-loading my-1\"\r\n [hidden]=\"item.status !== 'pending'\"></i>\r\n\r\n <a id=\"treeItem_{{item.id}}_link\"\r\n class=\"item\"\r\n *ngIf=\"item.url\"\r\n (click)=\"selectItem(item)\"\r\n [routerLink]=\"item.url\"\r\n [queryParams]=\"item.queryParams\"\r\n [queryParamsHandling]=\"item.queryParamsHandling || ''\">\r\n <ng-container *ngTemplateOutlet=\"customItemTemplate || defaultItemTemplate; context: { $implicit: item }\"></ng-container>\r\n </a>\r\n <div id=\"treeItem_{{item.id}}_heading\"\r\n class=\"item\"\r\n *ngIf=\"!item.url\"\r\n (click)=\"selectItem(item)\">\r\n <ng-container *ngTemplateOutlet=\"customItemTemplate || defaultItemTemplate; context: { $implicit: item }\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n\r\n <ul *ngIf=\"item.children.length > 0 && item.expanded\">\r\n <ng-container *ngTemplateOutlet=\"hierarchyView; context:{ $implicit: item.children }\"></ng-container>\r\n </ul>\r\n </li>\r\n </ng-template>\r\n\r\n <ng-container *ngTemplateOutlet=\"hierarchyView; context:{ $implicit: rootNode?.children }\"></ng-container>\r\n</ul>\r\n\r\n<ng-template #defaultItemTemplate\r\n let-item>\r\n <i class=\"ec-icon {{item.icon}} mx-1 flex-shrink\"\r\n *ngIf=\"item.icon\"></i>\r\n <span class=\"mx-1 text-truncate\">{{item.label}}</span>\r\n</ng-template>", styles: [":host{display:block;font-size:var(--ec-menu-font-size, var(--ec-font-size-action));background-color:var(--ec-menu-background-color, var(--ec-background-color))}ul{padding:0;margin:0;list-style:none;overflow-x:hidden}ul li{white-space:nowrap;padding:0}ul .item-wrapper{display:flex;align-items:center;padding:0 .25rem;margin:0 .25rem;height:1.75rem;border-radius:var(--ec-border-radius)}ul .item-wrapper.is-heading{cursor:pointer;color:var(--ec-color-hint-dark);text-transform:uppercase;font-weight:var(--ec-font-weight-bold);font-size:var(--ec-font-size-label)}ul .item-wrapper:hover{background-color:var(--ec-background-color-hover)}ul .item-wrapper.is-selected{font-weight:700}ul .item-wrapper a{text-decoration:none}ul .item{color:inherit;display:flex;align-items:center;flex:1 1;min-height:0;min-width:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NavItemActiveDirective, selector: "[ecNavItemActive]", inputs: ["ecNavItemActive", "ecNavItemActiveExactMatch", "ecNavItemActiveQueryParams", "ecNavItemActiveUrl"], outputs: ["routerLinkActivated"] }, { kind: "component", type: CollapsibleToggleComponent, selector: "ec-collapsible-toggle", inputs: ["id", "expanded", "tabindex"], outputs: ["expandedChange"] }] });
|
|
5795
5846
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: HierarchyTreeComponent, decorators: [{
|
|
5796
5847
|
type: Component,
|
|
5797
|
-
args: [{ selector: 'ec-hierarchy-tree', template: "<ul id=\"{{scrollContainerId}}\"\r\n class=\"flex-grow scroll-y py-1\">\r\n\r\n <li *ngIf=\"!hideRootNode && rootNode\">\r\n <div class=\"item-wrapper\"\r\n title=\"{{rootNode?.tooltip ?? rootNode?.label}}\"\r\n [ngClass]=\"{'is-heading': rootNode?.display === 'heading'}\"\r\n ecNavItemActive=\"is-selected\"\r\n [ecNavItemActiveUrl]=\"rootNode?.url\"\r\n [ecNavItemActiveExactMatch]='rootNode?.isActiveExactMatch'>\r\n <a id=\"rootNode_{{rootNode?.id}}_link\"\r\n class=\"item flex-grow d-flex align-items-center\"\r\n routerLink=\"{{rootNode?.url}}\"\r\n [queryParams]=\"rootNode?.queryParams\">\r\n <ng-container *ngTemplateOutlet=\"customItemTemplate || defaultItemTemplate; context: { $implicit: rootNode }\"></ng-container>\r\n </a>\r\n </div>\r\n </li>\r\n\r\n <ng-template #hierarchyView\r\n let-items>\r\n <li *ngFor=\"let item of items; index as index; first as isFirst\"\r\n
|
|
5848
|
+
args: [{ selector: 'ec-hierarchy-tree', template: "<ul id=\"{{scrollContainerId}}\"\r\n class=\"flex-grow scroll-y py-1\">\r\n\r\n <li *ngIf=\"!hideRootNode && rootNode\">\r\n <div class=\"item-wrapper\"\r\n title=\"{{rootNode?.tooltip ?? rootNode?.label}}\"\r\n [ngClass]=\"{'is-heading': rootNode?.display === 'heading'}\"\r\n ecNavItemActive=\"is-selected\"\r\n [ecNavItemActiveUrl]=\"rootNode?.url\"\r\n [ecNavItemActiveExactMatch]='rootNode?.isActiveExactMatch'>\r\n <a id=\"rootNode_{{rootNode?.id}}_link\"\r\n class=\"item flex-grow d-flex align-items-center\"\r\n routerLink=\"{{rootNode?.url}}\"\r\n [queryParams]=\"rootNode?.queryParams\">\r\n <ng-container *ngTemplateOutlet=\"customItemTemplate || defaultItemTemplate; context: { $implicit: rootNode }\"></ng-container>\r\n </a>\r\n </div>\r\n </li>\r\n\r\n <ng-template #hierarchyView\r\n let-items>\r\n <li *ngFor=\"let item of items; index as index; first as isFirst\"\r\n id=\"treeItem_{{item.id}}\">\r\n <div class=\"item-wrapper\"\r\n title=\"{{item.tooltip ?? item.label}}\"\r\n [ngClass]=\"{'is-heading': item.display === 'heading'}\"\r\n ecNavItemActive=\"is-selected\"\r\n [ecNavItemActiveUrl]=\"item.url\"\r\n [ecNavItemActiveExactMatch]=\"item.isActiveExactMatch\"\r\n [ecNavItemActiveQueryParams]=\"item.queryParams\">\r\n\r\n <!-- This element provides the indentation for each level -->\r\n <span id=\"indent_{{item.id}}\"\r\n class=\"d-block h-100\"\r\n [style.width.px]=\"(indent) * (item.level - 1) + (item.level * 4) + (item.hasChildren ? 0 : indent)\">\r\n </span>\r\n\r\n <!-- Toggle the button icon to be a spinner when item.status is pending -->\r\n <ec-collapsible-toggle id=\"toggle_{{item.id}}\"\r\n class=\"flex-shrink\"\r\n [style.width.px]=\"indent\"\r\n *ngIf=\"item.hasChildren && !item.hideToggle\"\r\n [hidden]=\"item.status === 'pending'\"\r\n [expanded]=\"item.expanded\"\r\n (expandedChange)=\"toggleItemClicked(item, $event)\">\r\n </ec-collapsible-toggle>\r\n\r\n <i class=\"ec-icon icon-loading my-1\"\r\n [hidden]=\"item.status !== 'pending'\"></i>\r\n\r\n <a id=\"treeItem_{{item.id}}_link\"\r\n class=\"item\"\r\n *ngIf=\"item.url\"\r\n (click)=\"selectItem(item)\"\r\n [routerLink]=\"item.url\"\r\n [queryParams]=\"item.queryParams\"\r\n [queryParamsHandling]=\"item.queryParamsHandling || ''\">\r\n <ng-container *ngTemplateOutlet=\"customItemTemplate || defaultItemTemplate; context: { $implicit: item }\"></ng-container>\r\n </a>\r\n <div id=\"treeItem_{{item.id}}_heading\"\r\n class=\"item\"\r\n *ngIf=\"!item.url\"\r\n (click)=\"selectItem(item)\">\r\n <ng-container *ngTemplateOutlet=\"customItemTemplate || defaultItemTemplate; context: { $implicit: item }\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n\r\n <ul *ngIf=\"item.children.length > 0 && item.expanded\">\r\n <ng-container *ngTemplateOutlet=\"hierarchyView; context:{ $implicit: item.children }\"></ng-container>\r\n </ul>\r\n </li>\r\n </ng-template>\r\n\r\n <ng-container *ngTemplateOutlet=\"hierarchyView; context:{ $implicit: rootNode?.children }\"></ng-container>\r\n</ul>\r\n\r\n<ng-template #defaultItemTemplate\r\n let-item>\r\n <i class=\"ec-icon {{item.icon}} mx-1 flex-shrink\"\r\n *ngIf=\"item.icon\"></i>\r\n <span class=\"mx-1 text-truncate\">{{item.label}}</span>\r\n</ng-template>", styles: [":host{display:block;font-size:var(--ec-menu-font-size, var(--ec-font-size-action));background-color:var(--ec-menu-background-color, var(--ec-background-color))}ul{padding:0;margin:0;list-style:none;overflow-x:hidden}ul li{white-space:nowrap;padding:0}ul .item-wrapper{display:flex;align-items:center;padding:0 .25rem;margin:0 .25rem;height:1.75rem;border-radius:var(--ec-border-radius)}ul .item-wrapper.is-heading{cursor:pointer;color:var(--ec-color-hint-dark);text-transform:uppercase;font-weight:var(--ec-font-weight-bold);font-size:var(--ec-font-size-label)}ul .item-wrapper:hover{background-color:var(--ec-background-color-hover)}ul .item-wrapper.is-selected{font-weight:700}ul .item-wrapper a{text-decoration:none}ul .item{color:inherit;display:flex;align-items:center;flex:1 1;min-height:0;min-width:0}\n"] }]
|
|
5798
5849
|
}], ctorParameters: function () { return [{ type: ScrollService }, { type: i0.Injector }]; }, propDecorators: { id: [{
|
|
5799
5850
|
type: Input
|
|
5800
5851
|
}], hideRootNode: [{
|