@hestia-earth/ui-components 0.40.6 → 0.40.7
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.
|
@@ -32,12 +32,13 @@ import { trigger, state, transition, style, animate } from '@angular/animations'
|
|
|
32
32
|
import { signalStore, withState, withComputed, withMethods, patchState, withHooks } from '@ngrx/signals';
|
|
33
33
|
import { rxMethod } from '@ngrx/signals/rxjs-interop';
|
|
34
34
|
import { RouterLinkActive, RouterLink, ActivatedRoute } from '@angular/router';
|
|
35
|
+
import { CdkScrollable } from '@angular/cdk/scrolling';
|
|
36
|
+
import { moveItemInArray, CdkDropList, CdkDrag, CdkDragPreview } from '@angular/cdk/drag-drop';
|
|
35
37
|
import { GoogleMap, MapMarker, MapPolygon } from '@angular/google-maps';
|
|
36
38
|
import { Meta, DomSanitizer } from '@angular/platform-browser';
|
|
37
39
|
import removeMd from 'remove-markdown';
|
|
38
40
|
import orderBy from 'lodash.orderby';
|
|
39
41
|
import { headersFromCsv, toCsv as toCsv$1, toJson, toCsvPivot, ErrorKeys } from '@hestia-earth/schema-convert';
|
|
40
|
-
import { moveItemInArray, CdkDropList, CdkDrag } from '@angular/cdk/drag-drop';
|
|
41
42
|
import { isCSVIncluded, isDefaultCSVSelected } from '@hestia-earth/json-schema/schema-utils';
|
|
42
43
|
import { recommendedProperties, loadSchemas } from '@hestia-earth/json-schema';
|
|
43
44
|
import set from 'lodash.set';
|
|
@@ -3734,6 +3735,12 @@ class HorizontalButtonsGroupComponent extends ControlValueAccessor {
|
|
|
3734
3735
|
writeValue(value) {
|
|
3735
3736
|
this.value.set(value);
|
|
3736
3737
|
}
|
|
3738
|
+
drop(event) {
|
|
3739
|
+
const items = [...this.buttons()];
|
|
3740
|
+
moveItemInArray(items, event.previousIndex, event.currentIndex);
|
|
3741
|
+
this.itemMoved.emit(items);
|
|
3742
|
+
this.buttons.set(items);
|
|
3743
|
+
}
|
|
3737
3744
|
select({ id }) {
|
|
3738
3745
|
if (this.value() === id) {
|
|
3739
3746
|
return;
|
|
@@ -3748,18 +3755,20 @@ class HorizontalButtonsGroupComponent extends ControlValueAccessor {
|
|
|
3748
3755
|
constructor() {
|
|
3749
3756
|
super();
|
|
3750
3757
|
this.value = signal(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
3751
|
-
this.buttons =
|
|
3758
|
+
this.buttons = model.required(...(ngDevMode ? [{ debugName: "buttons" }] : []));
|
|
3752
3759
|
this.defaultSelectedIndex = input(...(ngDevMode ? [undefined, { debugName: "defaultSelectedIndex" }] : []));
|
|
3753
3760
|
this.removable = input(false, ...(ngDevMode ? [{ debugName: "removable" }] : []));
|
|
3761
|
+
this.sortable = input(true, ...(ngDevMode ? [{ debugName: "sortable" }] : []));
|
|
3754
3762
|
this.styles = input(...(ngDevMode ? [undefined, { debugName: "styles" }] : []));
|
|
3755
3763
|
this.itemRemoved = output();
|
|
3764
|
+
this.itemMoved = output();
|
|
3756
3765
|
effect(() => {
|
|
3757
3766
|
const defaultButton = this.buttons()?.[this.defaultSelectedIndex()];
|
|
3758
3767
|
return defaultButton && !this.value() && this.select(defaultButton);
|
|
3759
3768
|
});
|
|
3760
3769
|
}
|
|
3761
3770
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: HorizontalButtonsGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3762
|
-
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 }, styles: { classPropertyName: "styles", publicName: "styles", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemRemoved: "itemRemoved" }, 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 buttonScroller #scroller=\"buttonScroller\" class=\"is-overflow-hidden pt-1 | tabs-list\">\n <div
|
|
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]" }] }); }
|
|
3763
3772
|
}
|
|
3764
3773
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: HorizontalButtonsGroupComponent, decorators: [{
|
|
3765
3774
|
type: Component$1,
|
|
@@ -3768,9 +3777,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
3768
3777
|
ResizedDirective,
|
|
3769
3778
|
HESvgIconComponent,
|
|
3770
3779
|
LongPressDirective,
|
|
3771
|
-
IsEllipsisActiveDirective
|
|
3772
|
-
|
|
3773
|
-
|
|
3780
|
+
IsEllipsisActiveDirective,
|
|
3781
|
+
CdkDropList,
|
|
3782
|
+
CdkDrag,
|
|
3783
|
+
CdkDragPreview,
|
|
3784
|
+
NgTemplateOutlet,
|
|
3785
|
+
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"] }]
|
|
3787
|
+
}], 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"] }] } });
|
|
3774
3788
|
|
|
3775
3789
|
class IssueConfirmComponent {
|
|
3776
3790
|
constructor() {
|
|
@@ -14137,7 +14151,7 @@ class SitesManagementChartComponent {
|
|
|
14137
14151
|
});
|
|
14138
14152
|
}
|
|
14139
14153
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SitesManagementChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14140
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: SitesManagementChartComponent, isStandalone: true, selector: "he-sites-management-chart", inputs: { site: { classPropertyName: "site", publicName: "site", isSignal: true, isRequired: true, transformFunction: null }, cycles: { classPropertyName: "cycles", publicName: "cycles", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "tooltip", first: true, predicate: ChartTooltipComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n <he-chart-export-button [chart]=\"chart\" />\n\n <ng-content />\n</div>\n\n@if (termTypes().length > 1) {\n <he-horizontal-buttons-group\n [buttons]=\"termTypeButtons()\"\n [(ngModel)]=\"termTypeModel\"\n styles=\"primary\"\n class=\"is-hidden-mobile\" />\n\n <div class=\"field is-hidden-tablet\">\n <div class=\"control is-expanded\">\n <div class=\"select is-small is-fullwidth\">\n <select [(ngModel)]=\"termTypeModel\" if=\"termTypeModel\">\n @for (button of termTypeButtons(); track button.id) {\n <option [value]=\"button.id\">{{ button.name }}</option>\n }\n </select>\n </div>\n </div>\n </div>\n}\n\n<div class=\"chart-area-border\">\n <he-chart #chart=\"chart\" class=\"is-relative\" [data]=\"chartData()\" [config]=\"chartConfig()\" [showExportButton]=\"false\">\n <he-chart-tooltip [tooltipFn]=\"chartTooltipFn\" />\n </he-chart>\n</div>\n\n<div\n class=\"is-flex is-justify-content-center is-align-items-center is-flex-wrap-wrap is-gap-16 is-mt-2 chart-area-border is-legend\">\n @if (cycleDates().length) {\n <div class=\"is-flex is-align-items-center is-gap-8\">\n <div class=\"legend-color-dashed\"></div>\n <span class=\"is-size-7\">Cycle start/end date</span>\n </div>\n }\n @for (color of chartColors() | keyvalue; track color.key) {\n <div class=\"is-flex is-align-items-center is-gap-8\">\n <div class=\"legend-color\" [style.background-color]=\"color.value\"></div>\n <span class=\"is-size-7\">{{ color.key }}</span>\n </div>\n }\n</div>\n", styles: [":host{display:block;overflow:visible}he-chart ::ng-deep .chart-container{min-height:400px}he-horizontal-buttons-group ::ng-deep .tabs-list{border-bottom:none}.legend-container{background:#f5f7f9}.legend-color{width:20px;height:20px;border-radius:3px}.legend-color-dashed{width:0px;border-left:2px dashed red;height:20px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ChartComponent, selector: "he-chart", inputs: ["data", "config", "showExportButton"], exportAs: ["chart"] }, { kind: "component", type: ChartExportButtonComponent, selector: "he-chart-export-button", inputs: ["buttonClass", "chart", "config", "exportFormats", "chartExportFn"] }, { kind: "component", type: ChartTooltipComponent, selector: "he-chart-tooltip", inputs: ["tooltipFn"], exportAs: ["chartTooltip"] }, { kind: "component", type: HorizontalButtonsGroupComponent, selector: "he-horizontal-buttons-group", inputs: ["buttons", "defaultSelectedIndex", "removable", "styles"], outputs: ["itemRemoved"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
14154
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: SitesManagementChartComponent, isStandalone: true, selector: "he-sites-management-chart", inputs: { site: { classPropertyName: "site", publicName: "site", isSignal: true, isRequired: true, transformFunction: null }, cycles: { classPropertyName: "cycles", publicName: "cycles", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "tooltip", first: true, predicate: ChartTooltipComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n <he-chart-export-button [chart]=\"chart\" />\n\n <ng-content />\n</div>\n\n@if (termTypes().length > 1) {\n <he-horizontal-buttons-group\n [buttons]=\"termTypeButtons()\"\n [(ngModel)]=\"termTypeModel\"\n styles=\"primary\"\n class=\"is-hidden-mobile\" />\n\n <div class=\"field is-hidden-tablet\">\n <div class=\"control is-expanded\">\n <div class=\"select is-small is-fullwidth\">\n <select [(ngModel)]=\"termTypeModel\" if=\"termTypeModel\">\n @for (button of termTypeButtons(); track button.id) {\n <option [value]=\"button.id\">{{ button.name }}</option>\n }\n </select>\n </div>\n </div>\n </div>\n}\n\n<div class=\"chart-area-border\">\n <he-chart #chart=\"chart\" class=\"is-relative\" [data]=\"chartData()\" [config]=\"chartConfig()\" [showExportButton]=\"false\">\n <he-chart-tooltip [tooltipFn]=\"chartTooltipFn\" />\n </he-chart>\n</div>\n\n<div\n class=\"is-flex is-justify-content-center is-align-items-center is-flex-wrap-wrap is-gap-16 is-mt-2 chart-area-border is-legend\">\n @if (cycleDates().length) {\n <div class=\"is-flex is-align-items-center is-gap-8\">\n <div class=\"legend-color-dashed\"></div>\n <span class=\"is-size-7\">Cycle start/end date</span>\n </div>\n }\n @for (color of chartColors() | keyvalue; track color.key) {\n <div class=\"is-flex is-align-items-center is-gap-8\">\n <div class=\"legend-color\" [style.background-color]=\"color.value\"></div>\n <span class=\"is-size-7\">{{ color.key }}</span>\n </div>\n }\n</div>\n", styles: [":host{display:block;overflow:visible}he-chart ::ng-deep .chart-container{min-height:400px}he-horizontal-buttons-group ::ng-deep .tabs-list{border-bottom:none}.legend-container{background:#f5f7f9}.legend-color{width:20px;height:20px;border-radius:3px}.legend-color-dashed{width:0px;border-left:2px dashed red;height:20px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ChartComponent, selector: "he-chart", inputs: ["data", "config", "showExportButton"], exportAs: ["chart"] }, { kind: "component", type: ChartExportButtonComponent, selector: "he-chart-export-button", inputs: ["buttonClass", "chart", "config", "exportFormats", "chartExportFn"] }, { kind: "component", type: ChartTooltipComponent, selector: "he-chart-tooltip", inputs: ["tooltipFn"], exportAs: ["chartTooltip"] }, { kind: "component", type: HorizontalButtonsGroupComponent, selector: "he-horizontal-buttons-group", inputs: ["buttons", "defaultSelectedIndex", "removable", "sortable", "styles"], outputs: ["buttonsChange", "itemRemoved", "itemMoved"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
14141
14155
|
}
|
|
14142
14156
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SitesManagementChartComponent, decorators: [{
|
|
14143
14157
|
type: Component$1,
|