@hestia-earth/ui-components 0.40.7 → 0.40.9
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.
|
@@ -57,7 +57,6 @@ import { linkHorizontal } from 'd3-shape';
|
|
|
57
57
|
import 'd3-transition';
|
|
58
58
|
import { hierarchy, tree } from 'd3-hierarchy';
|
|
59
59
|
import { easeElasticIn, easeElasticOut } from 'd3-ease';
|
|
60
|
-
import { zoom, zoomIdentity } from 'd3-zoom';
|
|
61
60
|
import { ComponentStore } from '@ngrx/component-store';
|
|
62
61
|
|
|
63
62
|
class HeAuthService {
|
|
@@ -3768,7 +3767,7 @@ class HorizontalButtonsGroupComponent extends ControlValueAccessor {
|
|
|
3768
3767
|
});
|
|
3769
3768
|
}
|
|
3770
3769
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: HorizontalButtonsGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3771
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: HorizontalButtonsGroupComponent, isStandalone: true, selector: "he-horizontal-buttons-group", inputs: { buttons: { classPropertyName: "buttons", publicName: "buttons", isSignal: true, isRequired: true, transformFunction: null }, defaultSelectedIndex: { classPropertyName: "defaultSelectedIndex", publicName: "defaultSelectedIndex", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, styles: { classPropertyName: "styles", publicName: "styles", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttons: "buttonsChange", itemRemoved: "itemRemoved", itemMoved: "itemMoved" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: HorizontalButtonsGroupComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"is-flex-grow-1\">\n <div class=\"tabs is-relative is-{{ styles() }} | horizontal-scroll\">\n @if (scroller.showLeftButton()) {\n <button heLongPress (longPress)=\"scroller.scrollLeft()\" class=\"button is-absolute | left-button\">\n <he-svg-icon name=\"chevron-left\" />\n </button>\n }\n <ul cdkScrollable buttonScroller #scroller=\"buttonScroller\" class=\"is-overflow-hidden pt-1 | tabs-list\">\n <div\n cdkDropList\n cdkDropListOrientation=\"horizontal\"\n (cdkDropListDropped)=\"drop($event)\"\n class=\"is-flex is-align-items-end | tabs-container\"\n heResized\n (resized)=\"scroller.update()\">\n <ng-template #tabContent let-tab=\"tab\">\n <a isEllipsisActive class=\"is-flex is-relative is-gap-2 pr-2\" [title]=\"tab.name\">\n <span class=\"is-block ellipsis\">{{ tab.name }}</span>\n @if (tab.removable !== false && removable()) {\n <button\n class=\"button is-ghost is-small p-0\"\n (click)=\"remove($event, tab)\"\n (keydown.enter)=\"remove($event, tab)\"\n type=\"button\"\n aria-label=\"Remove button\">\n <he-svg-icon name=\"xmark\" size=\"20\" />\n </button>\n }\n </a>\n </ng-template>\n @for (tab of buttons(); track tab.id) {\n <li\n cdkDrag\n cdkDragLockAxis=\"x\"\n [cdkDragDisabled]=\"!sortable()\"\n [class.is-active]=\"value() === tab.id\"\n (click)=\"select(tab)\"\n (keydown.enter)=\"select(tab)\"\n tabindex=\"0\"\n class=\"tabs-item\">\n <div *cdkDragPreview class=\"tabs is-{{ styles() }}\">\n <li class=\"tabs-item\">\n <ng-container *ngTemplateOutlet=\"tabContent; context: { tab: tab }\"></ng-container>\n </li>\n </div>\n <div class=\"cdk-drag-placeholder\" *cdkDragPlaceholder></div>\n <ng-container *ngTemplateOutlet=\"tabContent; context: { tab: tab }\"></ng-container>\n </li>\n }\n </div>\n </ul>\n @if (scroller.showRightButton()) {\n <button heLongPress (longPress)=\"scroller.scrollRight()\" class=\"button is-absolute | right-button\">\n <he-svg-icon name=\"chevron-right\" />\n </button>\n }\n </div>\n</div>\n", styles: [":root{--horizontal-buttons-list-margin: 0 20px}.horizontal-scroll .left-button,.horizontal-scroll .right-button{border:1px solid #dbe3ea;background-color:#fff;padding:8px 3px;bottom:0;z-index:3}.horizontal-scroll .left-button{border-radius:0 0 0 3px}.horizontal-scroll .right-button{right:0;border-radius:0 3px 0 0}.tabs .tabs-list{max-width:100%;margin:var(--horizontal-buttons-list-margin);border-bottom-color:#dbdbdb}.tabs .tabs-item{box-shadow:4px 0 10px #0000000d}.tabs .tabs-item a{max-width:300px;border-bottom-color:transparent;color:#4a4a4a;z-index:2}.tabs .tabs-item.is-active a{color:#1a0dab;overflow:visible}.tabs .tabs-item.is-active a:after{position:absolute;left:0;bottom:0;content:\"\";width:100%;height:1px;background-color:#1a0dab;z-index:99999}.tabs.is-primary .tabs-container,.tabs.is-secondary .tabs-container{gap:2px}.tabs.is-primary .tabs-item:not(.is-active),.tabs.is-secondary .tabs-item:not(.is-active){box-shadow:none}.tabs.is-primary .tabs-item.is-active,.tabs.is-secondary .tabs-item.is-active{background:#fff;border-radius:3px 3px 0 0;color:#4a4a4a!important}.tabs.is-primary .tabs-item.is-active a:after,.tabs.is-secondary .tabs-item.is-active a:after{background-color:transparent!important}.tabs.is-primary .tabs-item,.tabs.is-secondary .tabs-item{border-radius:0 3px 0 0;background:#f5f7f9}.tabs.is-primary .tabs-item.is-active{border-bottom:2px solid #ffc000}.tabs.is-secondary .tabs-item.is-active{border-bottom:2px solid #193957}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:.3}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.tabs-container.cdk-drop-list-dragging .tabs-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: ButtonScrollerDirective, selector: "[buttonScroller]", inputs: ["scrollUnit"], exportAs: ["buttonScroller"] }, { kind: "directive", type: ResizedDirective, selector: "[heResized]", outputs: ["resized"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "directive", type: LongPressDirective, selector: "[heLongPress]", inputs: ["intervalMs"], outputs: ["longPress"] }, { kind: "directive", type: IsEllipsisActiveDirective, selector: "[isEllipsisActive]" }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }] }); }
|
|
3770
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: HorizontalButtonsGroupComponent, isStandalone: true, selector: "he-horizontal-buttons-group", inputs: { buttons: { classPropertyName: "buttons", publicName: "buttons", isSignal: true, isRequired: true, transformFunction: null }, defaultSelectedIndex: { classPropertyName: "defaultSelectedIndex", publicName: "defaultSelectedIndex", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, styles: { classPropertyName: "styles", publicName: "styles", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttons: "buttonsChange", itemRemoved: "itemRemoved", itemMoved: "itemMoved" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: HorizontalButtonsGroupComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"is-flex-grow-1\">\n <div class=\"tabs is-relative is-{{ styles() }} | horizontal-scroll\">\n @if (scroller.showLeftButton()) {\n <button heLongPress (longPress)=\"scroller.scrollLeft()\" class=\"button is-absolute | left-button\">\n <he-svg-icon name=\"chevron-left\" />\n </button>\n }\n <ul cdkScrollable buttonScroller #scroller=\"buttonScroller\" class=\"is-overflow-hidden pt-1 | tabs-list\">\n <div\n cdkDropList\n cdkDropListOrientation=\"horizontal\"\n (cdkDropListDropped)=\"drop($event)\"\n class=\"is-flex is-align-items-end | tabs-container\"\n heResized\n (resized)=\"scroller.update()\">\n <ng-template #tabContent let-tab=\"tab\">\n <a isEllipsisActive class=\"is-flex is-relative is-gap-2 pr-2\" [title]=\"tab.name\">\n <span class=\"is-block ellipsis\">{{ tab.name }}</span>\n @if (tab.removable !== false && removable()) {\n <button\n class=\"button is-ghost is-small p-0\"\n (click)=\"remove($event, tab)\"\n (keydown.enter)=\"remove($event, tab)\"\n type=\"button\"\n aria-label=\"Remove button\">\n <he-svg-icon name=\"xmark\" size=\"20\" />\n </button>\n }\n </a>\n </ng-template>\n @for (tab of buttons(); track tab.id) {\n <li\n cdkDrag\n cdkDragLockAxis=\"x\"\n [cdkDragDisabled]=\"tab.sortable === false || !sortable()\"\n [class.is-active]=\"value() === tab.id\"\n (click)=\"select(tab)\"\n (keydown.enter)=\"select(tab)\"\n tabindex=\"0\"\n class=\"tabs-item\">\n <div *cdkDragPreview class=\"tabs is-{{ styles() }}\">\n <li class=\"tabs-item\">\n <ng-container *ngTemplateOutlet=\"tabContent; context: { tab: tab }\"></ng-container>\n </li>\n </div>\n <div class=\"cdk-drag-placeholder\" *cdkDragPlaceholder></div>\n <ng-container *ngTemplateOutlet=\"tabContent; context: { tab: tab }\"></ng-container>\n </li>\n }\n </div>\n </ul>\n @if (scroller.showRightButton()) {\n <button heLongPress (longPress)=\"scroller.scrollRight()\" class=\"button is-absolute | right-button\">\n <he-svg-icon name=\"chevron-right\" />\n </button>\n }\n </div>\n</div>\n", styles: [":root{--horizontal-buttons-list-margin: 0 20px}.horizontal-scroll .left-button,.horizontal-scroll .right-button{border:1px solid #dbe3ea;background-color:#fff;padding:8px 3px;bottom:0;z-index:3}.horizontal-scroll .left-button{border-radius:0 0 0 3px}.horizontal-scroll .right-button{right:0;border-radius:0 3px 0 0}.tabs .tabs-list{max-width:100%;margin:var(--horizontal-buttons-list-margin);border-bottom-color:#dbdbdb}.tabs .tabs-item{box-shadow:4px 0 10px #0000000d}.tabs .tabs-item a{max-width:300px;border-bottom-color:transparent;color:#4a4a4a;z-index:2}.tabs .tabs-item.is-active a{color:#1a0dab;overflow:visible}.tabs .tabs-item.is-active a:after{position:absolute;left:0;bottom:0;content:\"\";width:100%;height:1px;background-color:#1a0dab;z-index:99999}.tabs.is-primary .tabs-container,.tabs.is-secondary .tabs-container{gap:2px}.tabs.is-primary .tabs-item:not(.is-active),.tabs.is-secondary .tabs-item:not(.is-active){box-shadow:none}.tabs.is-primary .tabs-item.is-active,.tabs.is-secondary .tabs-item.is-active{background:#fff;border-radius:3px 3px 0 0;color:#4a4a4a!important}.tabs.is-primary .tabs-item.is-active a:after,.tabs.is-secondary .tabs-item.is-active a:after{background-color:transparent!important}.tabs.is-primary .tabs-item,.tabs.is-secondary .tabs-item{border-radius:0 3px 0 0;background:#f5f7f9}.tabs.is-primary .tabs-item.is-active{border-bottom:2px solid #ffc000}.tabs.is-secondary .tabs-item.is-active{border-bottom:2px solid #193957}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:.3}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.tabs-container.cdk-drop-list-dragging .tabs-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: ButtonScrollerDirective, selector: "[buttonScroller]", inputs: ["scrollUnit"], exportAs: ["buttonScroller"] }, { kind: "directive", type: ResizedDirective, selector: "[heResized]", outputs: ["resized"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "directive", type: LongPressDirective, selector: "[heLongPress]", inputs: ["intervalMs"], outputs: ["longPress"] }, { kind: "directive", type: IsEllipsisActiveDirective, selector: "[isEllipsisActive]" }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }] }); }
|
|
3772
3771
|
}
|
|
3773
3772
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: HorizontalButtonsGroupComponent, decorators: [{
|
|
3774
3773
|
type: Component$1,
|
|
@@ -3783,7 +3782,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
3783
3782
|
CdkDragPreview,
|
|
3784
3783
|
NgTemplateOutlet,
|
|
3785
3784
|
CdkScrollable
|
|
3786
|
-
], template: "<div class=\"is-flex-grow-1\">\n <div class=\"tabs is-relative is-{{ styles() }} | horizontal-scroll\">\n @if (scroller.showLeftButton()) {\n <button heLongPress (longPress)=\"scroller.scrollLeft()\" class=\"button is-absolute | left-button\">\n <he-svg-icon name=\"chevron-left\" />\n </button>\n }\n <ul cdkScrollable buttonScroller #scroller=\"buttonScroller\" class=\"is-overflow-hidden pt-1 | tabs-list\">\n <div\n cdkDropList\n cdkDropListOrientation=\"horizontal\"\n (cdkDropListDropped)=\"drop($event)\"\n class=\"is-flex is-align-items-end | tabs-container\"\n heResized\n (resized)=\"scroller.update()\">\n <ng-template #tabContent let-tab=\"tab\">\n <a isEllipsisActive class=\"is-flex is-relative is-gap-2 pr-2\" [title]=\"tab.name\">\n <span class=\"is-block ellipsis\">{{ tab.name }}</span>\n @if (tab.removable !== false && removable()) {\n <button\n class=\"button is-ghost is-small p-0\"\n (click)=\"remove($event, tab)\"\n (keydown.enter)=\"remove($event, tab)\"\n type=\"button\"\n aria-label=\"Remove button\">\n <he-svg-icon name=\"xmark\" size=\"20\" />\n </button>\n }\n </a>\n </ng-template>\n @for (tab of buttons(); track tab.id) {\n <li\n cdkDrag\n cdkDragLockAxis=\"x\"\n [cdkDragDisabled]=\"!sortable()\"\n [class.is-active]=\"value() === tab.id\"\n (click)=\"select(tab)\"\n (keydown.enter)=\"select(tab)\"\n tabindex=\"0\"\n class=\"tabs-item\">\n <div *cdkDragPreview class=\"tabs is-{{ styles() }}\">\n <li class=\"tabs-item\">\n <ng-container *ngTemplateOutlet=\"tabContent; context: { tab: tab }\"></ng-container>\n </li>\n </div>\n <div class=\"cdk-drag-placeholder\" *cdkDragPlaceholder></div>\n <ng-container *ngTemplateOutlet=\"tabContent; context: { tab: tab }\"></ng-container>\n </li>\n }\n </div>\n </ul>\n @if (scroller.showRightButton()) {\n <button heLongPress (longPress)=\"scroller.scrollRight()\" class=\"button is-absolute | right-button\">\n <he-svg-icon name=\"chevron-right\" />\n </button>\n }\n </div>\n</div>\n", styles: [":root{--horizontal-buttons-list-margin: 0 20px}.horizontal-scroll .left-button,.horizontal-scroll .right-button{border:1px solid #dbe3ea;background-color:#fff;padding:8px 3px;bottom:0;z-index:3}.horizontal-scroll .left-button{border-radius:0 0 0 3px}.horizontal-scroll .right-button{right:0;border-radius:0 3px 0 0}.tabs .tabs-list{max-width:100%;margin:var(--horizontal-buttons-list-margin);border-bottom-color:#dbdbdb}.tabs .tabs-item{box-shadow:4px 0 10px #0000000d}.tabs .tabs-item a{max-width:300px;border-bottom-color:transparent;color:#4a4a4a;z-index:2}.tabs .tabs-item.is-active a{color:#1a0dab;overflow:visible}.tabs .tabs-item.is-active a:after{position:absolute;left:0;bottom:0;content:\"\";width:100%;height:1px;background-color:#1a0dab;z-index:99999}.tabs.is-primary .tabs-container,.tabs.is-secondary .tabs-container{gap:2px}.tabs.is-primary .tabs-item:not(.is-active),.tabs.is-secondary .tabs-item:not(.is-active){box-shadow:none}.tabs.is-primary .tabs-item.is-active,.tabs.is-secondary .tabs-item.is-active{background:#fff;border-radius:3px 3px 0 0;color:#4a4a4a!important}.tabs.is-primary .tabs-item.is-active a:after,.tabs.is-secondary .tabs-item.is-active a:after{background-color:transparent!important}.tabs.is-primary .tabs-item,.tabs.is-secondary .tabs-item{border-radius:0 3px 0 0;background:#f5f7f9}.tabs.is-primary .tabs-item.is-active{border-bottom:2px solid #ffc000}.tabs.is-secondary .tabs-item.is-active{border-bottom:2px solid #193957}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:.3}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.tabs-container.cdk-drop-list-dragging .tabs-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
|
|
3785
|
+
], template: "<div class=\"is-flex-grow-1\">\n <div class=\"tabs is-relative is-{{ styles() }} | horizontal-scroll\">\n @if (scroller.showLeftButton()) {\n <button heLongPress (longPress)=\"scroller.scrollLeft()\" class=\"button is-absolute | left-button\">\n <he-svg-icon name=\"chevron-left\" />\n </button>\n }\n <ul cdkScrollable buttonScroller #scroller=\"buttonScroller\" class=\"is-overflow-hidden pt-1 | tabs-list\">\n <div\n cdkDropList\n cdkDropListOrientation=\"horizontal\"\n (cdkDropListDropped)=\"drop($event)\"\n class=\"is-flex is-align-items-end | tabs-container\"\n heResized\n (resized)=\"scroller.update()\">\n <ng-template #tabContent let-tab=\"tab\">\n <a isEllipsisActive class=\"is-flex is-relative is-gap-2 pr-2\" [title]=\"tab.name\">\n <span class=\"is-block ellipsis\">{{ tab.name }}</span>\n @if (tab.removable !== false && removable()) {\n <button\n class=\"button is-ghost is-small p-0\"\n (click)=\"remove($event, tab)\"\n (keydown.enter)=\"remove($event, tab)\"\n type=\"button\"\n aria-label=\"Remove button\">\n <he-svg-icon name=\"xmark\" size=\"20\" />\n </button>\n }\n </a>\n </ng-template>\n @for (tab of buttons(); track tab.id) {\n <li\n cdkDrag\n cdkDragLockAxis=\"x\"\n [cdkDragDisabled]=\"tab.sortable === false || !sortable()\"\n [class.is-active]=\"value() === tab.id\"\n (click)=\"select(tab)\"\n (keydown.enter)=\"select(tab)\"\n tabindex=\"0\"\n class=\"tabs-item\">\n <div *cdkDragPreview class=\"tabs is-{{ styles() }}\">\n <li class=\"tabs-item\">\n <ng-container *ngTemplateOutlet=\"tabContent; context: { tab: tab }\"></ng-container>\n </li>\n </div>\n <div class=\"cdk-drag-placeholder\" *cdkDragPlaceholder></div>\n <ng-container *ngTemplateOutlet=\"tabContent; context: { tab: tab }\"></ng-container>\n </li>\n }\n </div>\n </ul>\n @if (scroller.showRightButton()) {\n <button heLongPress (longPress)=\"scroller.scrollRight()\" class=\"button is-absolute | right-button\">\n <he-svg-icon name=\"chevron-right\" />\n </button>\n }\n </div>\n</div>\n", styles: [":root{--horizontal-buttons-list-margin: 0 20px}.horizontal-scroll .left-button,.horizontal-scroll .right-button{border:1px solid #dbe3ea;background-color:#fff;padding:8px 3px;bottom:0;z-index:3}.horizontal-scroll .left-button{border-radius:0 0 0 3px}.horizontal-scroll .right-button{right:0;border-radius:0 3px 0 0}.tabs .tabs-list{max-width:100%;margin:var(--horizontal-buttons-list-margin);border-bottom-color:#dbdbdb}.tabs .tabs-item{box-shadow:4px 0 10px #0000000d}.tabs .tabs-item a{max-width:300px;border-bottom-color:transparent;color:#4a4a4a;z-index:2}.tabs .tabs-item.is-active a{color:#1a0dab;overflow:visible}.tabs .tabs-item.is-active a:after{position:absolute;left:0;bottom:0;content:\"\";width:100%;height:1px;background-color:#1a0dab;z-index:99999}.tabs.is-primary .tabs-container,.tabs.is-secondary .tabs-container{gap:2px}.tabs.is-primary .tabs-item:not(.is-active),.tabs.is-secondary .tabs-item:not(.is-active){box-shadow:none}.tabs.is-primary .tabs-item.is-active,.tabs.is-secondary .tabs-item.is-active{background:#fff;border-radius:3px 3px 0 0;color:#4a4a4a!important}.tabs.is-primary .tabs-item.is-active a:after,.tabs.is-secondary .tabs-item.is-active a:after{background-color:transparent!important}.tabs.is-primary .tabs-item,.tabs.is-secondary .tabs-item{border-radius:0 3px 0 0;background:#f5f7f9}.tabs.is-primary .tabs-item.is-active{border-bottom:2px solid #ffc000}.tabs.is-secondary .tabs-item.is-active{border-bottom:2px solid #193957}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:.3}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.tabs-container.cdk-drop-list-dragging .tabs-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
|
|
3787
3786
|
}], ctorParameters: () => [], propDecorators: { buttons: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttons", required: true }] }, { type: i0.Output, args: ["buttonsChange"] }], defaultSelectedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultSelectedIndex", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], sortable: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortable", required: false }] }], styles: [{ type: i0.Input, args: [{ isSignal: true, alias: "styles", required: false }] }], itemRemoved: [{ type: i0.Output, args: ["itemRemoved"] }], itemMoved: [{ type: i0.Output, args: ["itemMoved"] }] } });
|
|
3788
3787
|
|
|
3789
3788
|
class IssueConfirmComponent {
|
|
@@ -12821,9 +12820,7 @@ const toCsv = (data, terms) => {
|
|
|
12821
12820
|
};
|
|
12822
12821
|
class HierarchyChartComponent {
|
|
12823
12822
|
constructor() {
|
|
12824
|
-
this.
|
|
12825
|
-
this.zoomContainer = viewChild.required('zoomContainer');
|
|
12826
|
-
this.chartContainer = viewChild.required('chartContainer');
|
|
12823
|
+
this.chartRef = viewChild.required('chart');
|
|
12827
12824
|
this.tooltipOperator = viewChild.required('t');
|
|
12828
12825
|
this.data = input([], ...(ngDevMode ? [{ debugName: "data" }] : []));
|
|
12829
12826
|
this.terms = input({}, ...(ngDevMode ? [{ debugName: "terms" }] : []));
|
|
@@ -12890,7 +12887,7 @@ class HierarchyChartComponent {
|
|
|
12890
12887
|
}[format]();
|
|
12891
12888
|
};
|
|
12892
12889
|
effect(() => {
|
|
12893
|
-
if ([!isEmpty(this.data()), !isEmpty(this.terms()), this.
|
|
12890
|
+
if ([!isEmpty(this.data()), !isEmpty(this.terms()), this.chartRef()?.nativeElement].every(Boolean)) {
|
|
12894
12891
|
this.init();
|
|
12895
12892
|
}
|
|
12896
12893
|
});
|
|
@@ -12936,35 +12933,18 @@ class HierarchyChartComponent {
|
|
|
12936
12933
|
this.renderChart();
|
|
12937
12934
|
}
|
|
12938
12935
|
renderChart() {
|
|
12939
|
-
this.svg = select(this.
|
|
12940
|
-
this.
|
|
12941
|
-
this.svgContainer.selectAll('*').remove();
|
|
12936
|
+
this.svg = select(this.chartRef()?.nativeElement);
|
|
12937
|
+
this.svg.selectAll('*').remove();
|
|
12942
12938
|
// root node is always positioned at ⟨0, 0⟩
|
|
12943
12939
|
const innerHeight = (this.root.children.length - 1) * nodeHeight * nodeSpacingFactor + nodeHeight;
|
|
12944
12940
|
this.yMin = (nodeHeight - innerHeight) / 2 - margin.top;
|
|
12945
|
-
this.yTotal =
|
|
12941
|
+
this.yTotal = innerHeight + margin.top + margin.bottom;
|
|
12946
12942
|
this.svg
|
|
12947
12943
|
.attr('viewBox', [-margin.left, this.yMin, width, this.yTotal].join(' '))
|
|
12948
12944
|
.attr('font-size', `${fontSize}px`);
|
|
12949
|
-
this.node = this.
|
|
12950
|
-
this.link = this.
|
|
12951
|
-
this.initZoom();
|
|
12945
|
+
this.node = this.svg.append('g').selectAll('g');
|
|
12946
|
+
this.link = this.svg.append('g').selectAll('path');
|
|
12952
12947
|
this.handleNodeClick(null, this.root.find(node => node.depth === 1));
|
|
12953
|
-
this.zoomToFit();
|
|
12954
|
-
}
|
|
12955
|
-
initZoom() {
|
|
12956
|
-
const zoomGroup = select(this.zoomContainer().nativeElement);
|
|
12957
|
-
// zoom and drag anywhere
|
|
12958
|
-
this.svg
|
|
12959
|
-
.insert('rect', ':first-child')
|
|
12960
|
-
.attr('width', '100%')
|
|
12961
|
-
.attr('height', '100%')
|
|
12962
|
-
.style('fill', 'none')
|
|
12963
|
-
.style('pointer-events', 'all');
|
|
12964
|
-
this.zoom = zoom()
|
|
12965
|
-
.scaleExtent([0.1, 10])
|
|
12966
|
-
.on('zoom', event => zoomGroup.attr('transform', event.transform));
|
|
12967
|
-
this.svg.call(this.zoom);
|
|
12968
12948
|
}
|
|
12969
12949
|
// flip x/y to go left-right instead of top-bottom
|
|
12970
12950
|
updateChart({ togglingGroup = false, switchingSelection = false } = {}) {
|
|
@@ -13087,41 +13067,19 @@ class HierarchyChartComponent {
|
|
|
13087
13067
|
d.children ? collapseChildren(d) : restoreChildren(d);
|
|
13088
13068
|
this.updateChart({ switchingSelection });
|
|
13089
13069
|
}
|
|
13090
|
-
zoomToFit() {
|
|
13091
|
-
const svg = this.chart().nativeElement;
|
|
13092
|
-
const container = this.chartContainer().nativeElement;
|
|
13093
|
-
const { width, height, x, y } = svg.viewBox.baseVal;
|
|
13094
|
-
const bounds = container.getBBox();
|
|
13095
|
-
const padding = 0.95;
|
|
13096
|
-
const scale = padding / Math.max(bounds.width / width, bounds.height / height);
|
|
13097
|
-
const transform = zoomIdentity.translate(-x, -y - margin.top).scale(scale);
|
|
13098
|
-
this.svg.transition().duration(750).call(this.zoom.transform, transform);
|
|
13099
|
-
}
|
|
13100
|
-
updateZoom(zoom) {
|
|
13101
|
-
this.svg.transition().duration(750).call(this.zoom.scaleBy, zoom);
|
|
13102
|
-
}
|
|
13103
|
-
zoomIn() {
|
|
13104
|
-
this.updateZoom(1.2); // Increase scale by 20%
|
|
13105
|
-
}
|
|
13106
|
-
zoomOut() {
|
|
13107
|
-
this.updateZoom(0.8); // Decrease scale by 20%
|
|
13108
|
-
}
|
|
13109
|
-
resetZoom() {
|
|
13110
|
-
this.zoomToFit();
|
|
13111
|
-
}
|
|
13112
13070
|
downloadSvg() {
|
|
13113
|
-
return downloadSvg(this.
|
|
13071
|
+
return downloadSvg(this.chartRef().nativeElement);
|
|
13114
13072
|
}
|
|
13115
13073
|
downloadPng() {
|
|
13116
|
-
return downloadPng(this.
|
|
13074
|
+
return downloadPng(this.chartRef().nativeElement);
|
|
13117
13075
|
}
|
|
13118
13076
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: HierarchyChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13119
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: HierarchyChartComponent, isStandalone: true, selector: "he-hierarchy-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, terms: { classPropertyName: "terms", publicName: "terms", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { chartError: "chartError" }, viewQueries: [{ propertyName: "
|
|
13077
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: HierarchyChartComponent, isStandalone: true, selector: "he-hierarchy-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, terms: { classPropertyName: "terms", publicName: "terms", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { chartError: "chartError" }, viewQueries: [{ propertyName: "chartRef", first: true, predicate: ["chart"], descendants: true, isSignal: true }, { propertyName: "tooltipOperator", first: true, predicate: ["t"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"chart-area-border\">\n <div\n class=\"is-flex is-justify-content-center is-align-items-center is-flex-wrap-wrap is-gap-16 chart-area-border is-legend\">\n @for (legendItem of legend(); track legendItem.type) {\n <div class=\"is-flex is-align-items-center is-gap-8 | is-legend-item\">\n <span\n class=\"is-inline-block-tablet is-align-middle | key-colour\"\n [style.backgroundColor]=\"nodeColours[legendItem.type]\"\n [style.borderColor]=\"nodeBorderColours[legendItem.type]\"></span>\n <span class=\"is-size-7\">{{ legendItem.text }}</span>\n </div>\n }\n </div>\n\n <div class=\"chart-container is-relative w-100 is-mt-2\">\n <svg class=\"w-100 h-100\" #chart></svg>\n\n <span\n class=\"is-hidden\"\n [ngbPopover]=\"tipContent\"\n triggers=\"manual\"\n placement=\"right left auto\"\n container=\"body\"\n #t=\"ngbPopover\"\n positionTarget=\".tip-target\"\n popoverClass=\"is-narrow driver-chart-tooltip\"\n [animation]=\"true\"></span>\n\n <div class=\"is-absolute | chart-controls\">\n <div class=\"is-flex is-flex-direction-column is-align-items-flex-end is-gap-4\">\n <he-chart-export-button\n buttonClass=\"button is-small\"\n [chartExportFn]=\"chartExportFn\"\n [exportFormats]=\"exportFormats\" />\n </div>\n </div>\n </div>\n</div>\n\n<ng-template #tipContent let-tipData=\"tipData\">\n @if (tipData.hasWeightedValue) {\n <p>contribution: {{ tipData.weightedValueText }}</p>\n }\n @if (tipData.valueValueText) {\n <p>\n <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.valueKeyHref\">value</a>\n <span class=\"is-pr-1\">:</span>\n <span>{{ tipData.valueValueText }}</span>\n @if (tipData.hasValue) {\n <a class=\"is-dark is-ml-2\" [href]=\"tipData.modelDocsHref\" target=\"_blank\">\n <span>Docs</span>\n <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n </a>\n }\n </p>\n }\n <p>\n <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.modelKeyHref\">methodModel</a>\n <span class=\"is-pr-1\">:</span>\n <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.modelValueHref\">{{ tipData.modelValue }}</a>\n </p>\n <p>\n <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.termKeyHref\">terms</a>\n <span class=\"is-pr-1\">:</span>\n @for (term of tipData.terms; track term.text; let lastTerm = $last) {\n <a class=\"is-dark\" target=\"_blank\" [href]=\"term.href\">{{ term.text }}</a>\n @if (!lastTerm) {\n <span class=\"is-px-1\">;</span>\n }\n }\n </p>\n</ng-template>\n", styles: ["@media screen and (min-width:1216px){.is-legend-item{min-width:130px}}.chart-controls{top:0;right:0}.chart-controls .button,.chart-controls he-chart-export-button ::ng-deep>.button{width:36px;height:36px}.key-colour{border-radius:3px;border:1px solid transparent;height:20px;width:20px}svg{pointer-events:none}:host ::ng-deep .node-box{fill-opacity:.3;stroke-opacity:.3;pointer-events:auto}:host ::ng-deep .node-openable:not(.mask-openable){cursor:pointer;stroke-opacity:1;fill-opacity:1}:host ::ng-deep .group-button,:host ::ng-deep .group-button-text{display:inline!important;cursor:pointer}:host ::ng-deep .node-label tspan{alignment-baseline:inherit}:host ::ng-deep .sibling-mask{pointer-events:none}:host ::ng-deep .mask-openable:hover{fill:none;stroke:none}:host ::ng-deep .mask-openable{cursor:pointer;pointer-events:all}\n"], dependencies: [{ kind: "directive", type: NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "component", type: ChartExportButtonComponent, selector: "he-chart-export-button", inputs: ["buttonClass", "chart", "config", "exportFormats", "chartExportFn"] }] }); }
|
|
13120
13078
|
}
|
|
13121
13079
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: HierarchyChartComponent, decorators: [{
|
|
13122
13080
|
type: Component$1,
|
|
13123
|
-
args: [{ selector: 'he-hierarchy-chart', imports: [NgbPopover, HESvgIconComponent, ChartExportButtonComponent], template: "<div class=\"chart-area-border\">\n <div\n class=\"is-flex is-justify-content-center is-align-items-center is-flex-wrap-wrap is-gap-16 chart-area-border is-legend\">\n @for (legendItem of legend(); track legendItem.type) {\n <div class=\"is-flex is-align-items-center is-gap-8 | is-legend-item\">\n <span\n class=\"is-inline-block-tablet is-align-middle | key-colour\"\n [style.backgroundColor]=\"nodeColours[legendItem.type]\"\n [style.borderColor]=\"nodeBorderColours[legendItem.type]\"></span>\n <span class=\"is-size-7\">{{ legendItem.text }}</span>\n </div>\n }\n </div>\n\n <div class=\"chart-container is-relative w-100 is-mt-2\">\n <svg class=\"w-100 h-100\" #chart
|
|
13124
|
-
}], ctorParameters: () => [], propDecorators: {
|
|
13081
|
+
args: [{ selector: 'he-hierarchy-chart', imports: [NgbPopover, HESvgIconComponent, ChartExportButtonComponent], template: "<div class=\"chart-area-border\">\n <div\n class=\"is-flex is-justify-content-center is-align-items-center is-flex-wrap-wrap is-gap-16 chart-area-border is-legend\">\n @for (legendItem of legend(); track legendItem.type) {\n <div class=\"is-flex is-align-items-center is-gap-8 | is-legend-item\">\n <span\n class=\"is-inline-block-tablet is-align-middle | key-colour\"\n [style.backgroundColor]=\"nodeColours[legendItem.type]\"\n [style.borderColor]=\"nodeBorderColours[legendItem.type]\"></span>\n <span class=\"is-size-7\">{{ legendItem.text }}</span>\n </div>\n }\n </div>\n\n <div class=\"chart-container is-relative w-100 is-mt-2\">\n <svg class=\"w-100 h-100\" #chart></svg>\n\n <span\n class=\"is-hidden\"\n [ngbPopover]=\"tipContent\"\n triggers=\"manual\"\n placement=\"right left auto\"\n container=\"body\"\n #t=\"ngbPopover\"\n positionTarget=\".tip-target\"\n popoverClass=\"is-narrow driver-chart-tooltip\"\n [animation]=\"true\"></span>\n\n <div class=\"is-absolute | chart-controls\">\n <div class=\"is-flex is-flex-direction-column is-align-items-flex-end is-gap-4\">\n <he-chart-export-button\n buttonClass=\"button is-small\"\n [chartExportFn]=\"chartExportFn\"\n [exportFormats]=\"exportFormats\" />\n </div>\n </div>\n </div>\n</div>\n\n<ng-template #tipContent let-tipData=\"tipData\">\n @if (tipData.hasWeightedValue) {\n <p>contribution: {{ tipData.weightedValueText }}</p>\n }\n @if (tipData.valueValueText) {\n <p>\n <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.valueKeyHref\">value</a>\n <span class=\"is-pr-1\">:</span>\n <span>{{ tipData.valueValueText }}</span>\n @if (tipData.hasValue) {\n <a class=\"is-dark is-ml-2\" [href]=\"tipData.modelDocsHref\" target=\"_blank\">\n <span>Docs</span>\n <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n </a>\n }\n </p>\n }\n <p>\n <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.modelKeyHref\">methodModel</a>\n <span class=\"is-pr-1\">:</span>\n <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.modelValueHref\">{{ tipData.modelValue }}</a>\n </p>\n <p>\n <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.termKeyHref\">terms</a>\n <span class=\"is-pr-1\">:</span>\n @for (term of tipData.terms; track term.text; let lastTerm = $last) {\n <a class=\"is-dark\" target=\"_blank\" [href]=\"term.href\">{{ term.text }}</a>\n @if (!lastTerm) {\n <span class=\"is-px-1\">;</span>\n }\n }\n </p>\n</ng-template>\n", styles: ["@media screen and (min-width:1216px){.is-legend-item{min-width:130px}}.chart-controls{top:0;right:0}.chart-controls .button,.chart-controls he-chart-export-button ::ng-deep>.button{width:36px;height:36px}.key-colour{border-radius:3px;border:1px solid transparent;height:20px;width:20px}svg{pointer-events:none}:host ::ng-deep .node-box{fill-opacity:.3;stroke-opacity:.3;pointer-events:auto}:host ::ng-deep .node-openable:not(.mask-openable){cursor:pointer;stroke-opacity:1;fill-opacity:1}:host ::ng-deep .group-button,:host ::ng-deep .group-button-text{display:inline!important;cursor:pointer}:host ::ng-deep .node-label tspan{alignment-baseline:inherit}:host ::ng-deep .sibling-mask{pointer-events:none}:host ::ng-deep .mask-openable:hover{fill:none;stroke:none}:host ::ng-deep .mask-openable{cursor:pointer;pointer-events:all}\n"] }]
|
|
13082
|
+
}], ctorParameters: () => [], propDecorators: { chartRef: [{ type: i0.ViewChild, args: ['chart', { isSignal: true }] }], tooltipOperator: [{ type: i0.ViewChild, args: ['t', { isSignal: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], terms: [{ type: i0.Input, args: [{ isSignal: true, alias: "terms", required: false }] }], chartError: [{ type: i0.Output, args: ["chartError"] }] } });
|
|
13125
13083
|
|
|
13126
13084
|
const filterTermTypes$1 = [
|
|
13127
13085
|
TermTermType.resourceUse,
|