@energycap/components 0.39.4-ECAP-23219-bills-tree-collapse.20231221-1308 → 0.39.4-ECAP-23220-bc-file-upload-dialog.20231221-1411
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 +70 -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 +71 -26
- package/fesm2015/energycap-components.mjs.map +1 -1
- package/fesm2020/energycap-components.mjs +66 -25
- package/fesm2020/energycap-components.mjs.map +1 -1
- package/lib/controls/file-upload/file-upload.component.d.ts +26 -1
- package/lib/display/hierarchy/hierarchy-base.d.ts +2 -2
- 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,16 @@ 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
|
+
* Optional property to control whether the user can select multiple files
|
|
3813
|
+
*/
|
|
3814
|
+
this.multiSelect = false;
|
|
3805
3815
|
}
|
|
3806
3816
|
ngOnChanges(changes) {
|
|
3807
3817
|
super.ngOnChanges(changes);
|
|
@@ -3817,6 +3827,7 @@ class FileUploadComponent extends FormControlBase {
|
|
|
3817
3827
|
if (!value) {
|
|
3818
3828
|
this.formModel.patchValue({
|
|
3819
3829
|
file: null,
|
|
3830
|
+
name: null,
|
|
3820
3831
|
base64FileString: null,
|
|
3821
3832
|
uploadResult: null
|
|
3822
3833
|
});
|
|
@@ -3825,27 +3836,20 @@ class FileUploadComponent extends FormControlBase {
|
|
|
3825
3836
|
}
|
|
3826
3837
|
fileChange(files) {
|
|
3827
3838
|
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 = '';
|
|
3839
|
+
if (this.multiSelect) {
|
|
3840
|
+
this.handleMultipleFiles(files);
|
|
3841
|
+
}
|
|
3842
|
+
else {
|
|
3843
|
+
const file = files.item(0);
|
|
3844
|
+
if (file) {
|
|
3845
|
+
yield this.readFile(file);
|
|
3847
3846
|
}
|
|
3848
3847
|
}
|
|
3848
|
+
// Clear the file inputs value, this will allow the user to pick the same filenames again
|
|
3849
|
+
// and cause fileChange to re-trigger.
|
|
3850
|
+
if (this.fileInput) {
|
|
3851
|
+
this.fileInput.nativeElement.value = '';
|
|
3852
|
+
}
|
|
3849
3853
|
});
|
|
3850
3854
|
}
|
|
3851
3855
|
/**
|
|
@@ -3879,7 +3883,7 @@ class FileUploadComponent extends FormControlBase {
|
|
|
3879
3883
|
this.patchFileResult(file, base64FileString, result);
|
|
3880
3884
|
}
|
|
3881
3885
|
catch (e) {
|
|
3882
|
-
// Bummer, we're not going to do anything about it though.
|
|
3886
|
+
// Bummer, we're not going to do anything about it though.
|
|
3883
3887
|
// We are not patching any of the result so any existing information remains
|
|
3884
3888
|
}
|
|
3885
3889
|
}
|
|
@@ -3916,12 +3920,45 @@ class FileUploadComponent extends FormControlBase {
|
|
|
3916
3920
|
this.formModel.patchValue({ uploadResult: null });
|
|
3917
3921
|
}
|
|
3918
3922
|
}
|
|
3923
|
+
/** Maps the files to an array of File objects and sends them along
|
|
3924
|
+
* to the derived onMultipleFileSelected method in the hosting component
|
|
3925
|
+
*/
|
|
3926
|
+
handleMultipleFiles(files) {
|
|
3927
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
3928
|
+
const filesArray = Array.from(files);
|
|
3929
|
+
if (this.onMultipleFilesSelected) {
|
|
3930
|
+
try {
|
|
3931
|
+
let result = yield this.onMultipleFilesSelected(filesArray);
|
|
3932
|
+
}
|
|
3933
|
+
catch (e) {
|
|
3934
|
+
console.log('error: ', e);
|
|
3935
|
+
}
|
|
3936
|
+
}
|
|
3937
|
+
});
|
|
3938
|
+
}
|
|
3939
|
+
;
|
|
3940
|
+
readFile(file) {
|
|
3941
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
3942
|
+
const reader = new FileReader();
|
|
3943
|
+
reader.onloadend = (e) => __awaiter(this, void 0, void 0, function* () {
|
|
3944
|
+
var _a;
|
|
3945
|
+
let base64FileString = (_a = reader === null || reader === void 0 ? void 0 : reader.result) === null || _a === void 0 ? void 0 : _a.toString().split(",")[1];
|
|
3946
|
+
yield this.processFile(file, base64FileString);
|
|
3947
|
+
});
|
|
3948
|
+
if (this.isBase64FileOutput()) {
|
|
3949
|
+
reader.readAsDataURL(file);
|
|
3950
|
+
}
|
|
3951
|
+
else {
|
|
3952
|
+
yield this.processFile(file);
|
|
3953
|
+
}
|
|
3954
|
+
});
|
|
3955
|
+
}
|
|
3919
3956
|
}
|
|
3920
3957
|
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 (
|
|
3958
|
+
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", 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 #selectZipFilesBtn\r\n id=\"{{inputId}}_btn\"\r\n [pending]=\"pending\"\r\n type=\"primary\"\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
3959
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FileUploadComponent, decorators: [{
|
|
3923
3960
|
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 (
|
|
3961
|
+
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 #selectZipFilesBtn\r\n id=\"{{inputId}}_btn\"\r\n [pending]=\"pending\"\r\n type=\"primary\"\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
3962
|
}], ctorParameters: function () { return [{ type: ValidationMessageService }, { type: FormGroupHelper }]; }, propDecorators: { placeholder: [{
|
|
3926
3963
|
type: Input
|
|
3927
3964
|
}], fileType: [{
|
|
@@ -3932,6 +3969,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
3932
3969
|
type: Input
|
|
3933
3970
|
}], onFileSelected: [{
|
|
3934
3971
|
type: Input
|
|
3972
|
+
}], onMultipleFilesSelected: [{
|
|
3973
|
+
type: Input
|
|
3974
|
+
}], displayType: [{
|
|
3975
|
+
type: Input
|
|
3976
|
+
}], buttonLabel: [{
|
|
3977
|
+
type: Input
|
|
3978
|
+
}], multiSelect: [{
|
|
3979
|
+
type: Input
|
|
3935
3980
|
}], fileInput: [{
|
|
3936
3981
|
type: ViewChild,
|
|
3937
3982
|
args: ["fileInput", { read: ElementRef, static: true }]
|
|
@@ -5658,7 +5703,7 @@ class HierarchyItem {
|
|
|
5658
5703
|
this.label = '';
|
|
5659
5704
|
/** Indicates how many levels deep the item is in the parent structure */
|
|
5660
5705
|
this.level = 0;
|
|
5661
|
-
/** Display item as a link
|
|
5706
|
+
/** Display item as a link or a heading */
|
|
5662
5707
|
this.display = 'default';
|
|
5663
5708
|
/** Set to hide toggle, even if item has children */
|
|
5664
5709
|
this.hideToggle = false;
|
|
@@ -5791,10 +5836,10 @@ class HierarchyTreeComponent extends HierarchyBase {
|
|
|
5791
5836
|
}
|
|
5792
5837
|
}
|
|
5793
5838
|
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
|
|
5839
|
+
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
5840
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: HierarchyTreeComponent, decorators: [{
|
|
5796
5841
|
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
|
|
5842
|
+
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
5843
|
}], ctorParameters: function () { return [{ type: ScrollService }, { type: i0.Injector }]; }, propDecorators: { id: [{
|
|
5799
5844
|
type: Input
|
|
5800
5845
|
}], hideRootNode: [{
|