@energycap/components 0.39.4-ECAP-23220-bc-file-upload-dialog.20231221-1411 → 0.39.4-ECAP-23219-bills-tree-collapse.20240103-1423
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 +27 -70
- 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 +26 -71
- package/fesm2015/energycap-components.mjs.map +1 -1
- package/fesm2020/energycap-components.mjs +25 -66
- package/fesm2020/energycap-components.mjs.map +1 -1
- package/lib/controls/file-upload/file-upload.component.d.ts +1 -26
- package/lib/display/hierarchy/hierarchy-base.d.ts +6 -2
- package/package.json +1 -1
- package/src/assets/locales/en_US.json +1 -3
|
@@ -3759,7 +3759,7 @@ class FileUploadComponent extends FormControlBase {
|
|
|
3759
3759
|
file: new UntypedFormControl({ value: null, disabled: disabled }, validators),
|
|
3760
3760
|
name: new UntypedFormControl({ value: null, disabled: disabled }, validators),
|
|
3761
3761
|
base64FileString: new UntypedFormControl(null),
|
|
3762
|
-
uploadResult: new UntypedFormControl(null)
|
|
3762
|
+
uploadResult: new UntypedFormControl(null)
|
|
3763
3763
|
});
|
|
3764
3764
|
if (disabled) {
|
|
3765
3765
|
formGroup.disable();
|
|
@@ -3778,16 +3778,6 @@ class FileUploadComponent extends FormControlBase {
|
|
|
3778
3778
|
* File output, determines which properties are supplied on the formModel
|
|
3779
3779
|
*/
|
|
3780
3780
|
this.fileOutput = 'base64';
|
|
3781
|
-
/**
|
|
3782
|
-
* Optional display type that controls whether the file input textbox is displayed or
|
|
3783
|
-
* simply a button the user clicks to launch the OS file storage dialog.
|
|
3784
|
-
* Default: file
|
|
3785
|
-
*/
|
|
3786
|
-
this.displayType = 'file';
|
|
3787
|
-
/**
|
|
3788
|
-
* Optional property to control whether the user can select multiple files
|
|
3789
|
-
*/
|
|
3790
|
-
this.multiSelect = false;
|
|
3791
3781
|
}
|
|
3792
3782
|
ngOnChanges(changes) {
|
|
3793
3783
|
super.ngOnChanges(changes);
|
|
@@ -3802,7 +3792,6 @@ class FileUploadComponent extends FormControlBase {
|
|
|
3802
3792
|
if (!value) {
|
|
3803
3793
|
this.formModel.patchValue({
|
|
3804
3794
|
file: null,
|
|
3805
|
-
name: null,
|
|
3806
3795
|
base64FileString: null,
|
|
3807
3796
|
uploadResult: null
|
|
3808
3797
|
});
|
|
@@ -3810,19 +3799,25 @@ class FileUploadComponent extends FormControlBase {
|
|
|
3810
3799
|
});
|
|
3811
3800
|
}
|
|
3812
3801
|
async fileChange(files) {
|
|
3813
|
-
|
|
3814
|
-
|
|
3815
|
-
|
|
3816
|
-
|
|
3817
|
-
|
|
3818
|
-
|
|
3819
|
-
|
|
3802
|
+
let file = files.item(0);
|
|
3803
|
+
// If there is a file selected and then opened again and click cancel you get null so don't try and set anything
|
|
3804
|
+
if (file) {
|
|
3805
|
+
let reader = new FileReader();
|
|
3806
|
+
reader.onloadend = async (e) => {
|
|
3807
|
+
let base64FileString = reader?.result?.toString().split(",")[1];
|
|
3808
|
+
this.processFile(file, base64FileString);
|
|
3809
|
+
};
|
|
3810
|
+
if (this.isBase64FileOutput()) {
|
|
3811
|
+
reader.readAsDataURL(file);
|
|
3812
|
+
}
|
|
3813
|
+
else {
|
|
3814
|
+
await this.processFile(file);
|
|
3815
|
+
}
|
|
3816
|
+
// Clear the file inputs value, this will allow the user to pick the same filename and cause
|
|
3817
|
+
// the fileChange to trigger.
|
|
3818
|
+
if (this.fileInput) {
|
|
3819
|
+
this.fileInput.nativeElement.value = '';
|
|
3820
3820
|
}
|
|
3821
|
-
}
|
|
3822
|
-
// Clear the file inputs value, this will allow the user to pick the same filenames again
|
|
3823
|
-
// and cause fileChange to re-trigger.
|
|
3824
|
-
if (this.fileInput) {
|
|
3825
|
-
this.fileInput.nativeElement.value = '';
|
|
3826
3821
|
}
|
|
3827
3822
|
}
|
|
3828
3823
|
/**
|
|
@@ -3855,7 +3850,7 @@ class FileUploadComponent extends FormControlBase {
|
|
|
3855
3850
|
this.patchFileResult(file, base64FileString, result);
|
|
3856
3851
|
}
|
|
3857
3852
|
catch (e) {
|
|
3858
|
-
// Bummer, we're not going to do anything about it though.
|
|
3853
|
+
// Bummer, we're not going to do anything about it though.
|
|
3859
3854
|
// We are not patching any of the result so any existing information remains
|
|
3860
3855
|
}
|
|
3861
3856
|
}
|
|
@@ -3890,40 +3885,12 @@ class FileUploadComponent extends FormControlBase {
|
|
|
3890
3885
|
this.formModel.patchValue({ uploadResult: null });
|
|
3891
3886
|
}
|
|
3892
3887
|
}
|
|
3893
|
-
/** Maps the files to an array of File objects and sends them along
|
|
3894
|
-
* to the derived onMultipleFileSelected method in the hosting component
|
|
3895
|
-
*/
|
|
3896
|
-
async handleMultipleFiles(files) {
|
|
3897
|
-
const filesArray = Array.from(files);
|
|
3898
|
-
if (this.onMultipleFilesSelected) {
|
|
3899
|
-
try {
|
|
3900
|
-
let result = await this.onMultipleFilesSelected(filesArray);
|
|
3901
|
-
}
|
|
3902
|
-
catch (e) {
|
|
3903
|
-
console.log('error: ', e);
|
|
3904
|
-
}
|
|
3905
|
-
}
|
|
3906
|
-
}
|
|
3907
|
-
;
|
|
3908
|
-
async readFile(file) {
|
|
3909
|
-
const reader = new FileReader();
|
|
3910
|
-
reader.onloadend = async (e) => {
|
|
3911
|
-
let base64FileString = reader?.result?.toString().split(",")[1];
|
|
3912
|
-
await this.processFile(file, base64FileString);
|
|
3913
|
-
};
|
|
3914
|
-
if (this.isBase64FileOutput()) {
|
|
3915
|
-
reader.readAsDataURL(file);
|
|
3916
|
-
}
|
|
3917
|
-
else {
|
|
3918
|
-
await this.processFile(file);
|
|
3919
|
-
}
|
|
3920
|
-
}
|
|
3921
3888
|
}
|
|
3922
3889
|
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 });
|
|
3923
|
-
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"
|
|
3890
|
+
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 (click)=\"browseBtn.focus()\"\r\n (change)=\"fileChange($event.target.files)\"\r\n [class.has-value]=\"formModel?.get('name')?.value\">\r\n <ec-form-control 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 #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-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: 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"] }] });
|
|
3924
3891
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FileUploadComponent, decorators: [{
|
|
3925
3892
|
type: Component,
|
|
3926
|
-
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]=\"
|
|
3893
|
+
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 (click)=\"browseBtn.focus()\"\r\n (change)=\"fileChange($event.target.files)\"\r\n [class.has-value]=\"formModel?.get('name')?.value\">\r\n <ec-form-control 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 #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-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"] }]
|
|
3927
3894
|
}], ctorParameters: function () { return [{ type: ValidationMessageService }, { type: FormGroupHelper }]; }, propDecorators: { placeholder: [{
|
|
3928
3895
|
type: Input
|
|
3929
3896
|
}], fileType: [{
|
|
@@ -3934,14 +3901,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
3934
3901
|
type: Input
|
|
3935
3902
|
}], onFileSelected: [{
|
|
3936
3903
|
type: Input
|
|
3937
|
-
}], onMultipleFilesSelected: [{
|
|
3938
|
-
type: Input
|
|
3939
|
-
}], displayType: [{
|
|
3940
|
-
type: Input
|
|
3941
|
-
}], buttonLabel: [{
|
|
3942
|
-
type: Input
|
|
3943
|
-
}], multiSelect: [{
|
|
3944
|
-
type: Input
|
|
3945
3904
|
}], fileInput: [{
|
|
3946
3905
|
type: ViewChild,
|
|
3947
3906
|
args: ["fileInput", { read: ElementRef, static: true }]
|
|
@@ -5654,7 +5613,7 @@ class HierarchyItem {
|
|
|
5654
5613
|
this.label = '';
|
|
5655
5614
|
/** Indicates how many levels deep the item is in the parent structure */
|
|
5656
5615
|
this.level = 0;
|
|
5657
|
-
/** Display item as a link or a
|
|
5616
|
+
/** Display item as a link, a heading, or with a divider line below it */
|
|
5658
5617
|
this.display = 'default';
|
|
5659
5618
|
/** Set to hide toggle, even if item has children */
|
|
5660
5619
|
this.hideToggle = false;
|
|
@@ -5787,10 +5746,10 @@ class HierarchyTreeComponent extends HierarchyBase {
|
|
|
5787
5746
|
}
|
|
5788
5747
|
}
|
|
5789
5748
|
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 });
|
|
5790
|
-
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"] }] });
|
|
5749
|
+
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 [ngClass]=\"{'divider': item.display === 'divider'}\"\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 *ngIf=\"!item.noIndent\"\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 li.divider{border-bottom:1px solid var(--ec-border-color);padding-bottom:.25rem;margin-bottom:.25rem}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"] }] });
|
|
5791
5750
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: HierarchyTreeComponent, decorators: [{
|
|
5792
5751
|
type: Component,
|
|
5793
|
-
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"] }]
|
|
5752
|
+
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 [ngClass]=\"{'divider': item.display === 'divider'}\"\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 *ngIf=\"!item.noIndent\"\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 li.divider{border-bottom:1px solid var(--ec-border-color);padding-bottom:.25rem;margin-bottom:.25rem}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"] }]
|
|
5794
5753
|
}], ctorParameters: function () { return [{ type: ScrollService }, { type: i0.Injector }]; }, propDecorators: { id: [{
|
|
5795
5754
|
type: Input
|
|
5796
5755
|
}], hideRootNode: [{
|