@siemens/maps-ng 49.10.0 → 49.12.0
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.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { viewChild, input, signal, inject, ElementRef, Component, Directive, ViewContainerRef, TemplateRef, Injectable, model, output, contentChild, computed, NgZone, Injector, HostListener,
|
|
2
|
+
import { viewChild, input, signal, inject, ElementRef, ChangeDetectionStrategy, Component, Directive, ViewContainerRef, TemplateRef, Injectable, model, output, contentChild, computed, NgZone, Injector, HostListener, NgModule } from '@angular/core';
|
|
3
3
|
import { t, SiTranslatePipe, SiTranslateServiceBuilder, SiNoTranslateService } from '@siemens/element-translate-ng/translate';
|
|
4
4
|
import AnimatedCluster from 'ol-ext/layer/AnimatedCluster';
|
|
5
5
|
import Chart from 'ol-ext/style/Chart';
|
|
@@ -108,7 +108,7 @@ class SiMapTooltipComponent {
|
|
|
108
108
|
}
|
|
109
109
|
getLabelSnippet(label) {
|
|
110
110
|
if (this.maxLabelLength() != -1 && label.length > this.maxLabelLength()) {
|
|
111
|
-
return `<div>${label.substring(0, this.maxLabelLength())}
|
|
111
|
+
return `<div>${label.substring(0, this.maxLabelLength())}…</div>`;
|
|
112
112
|
}
|
|
113
113
|
else {
|
|
114
114
|
return `<div>${label}</div>`;
|
|
@@ -118,11 +118,11 @@ class SiMapTooltipComponent {
|
|
|
118
118
|
this.content().nativeElement.innerHTML = tooltip;
|
|
119
119
|
}
|
|
120
120
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiMapTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
121
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiMapTooltipComponent, isStandalone: true, selector: "si-map-tooltip", inputs: { moreText: { classPropertyName: "moreText", publicName: "moreText", isSignal: true, isRequired: false, transformFunction: null }, maxLabelLength: { classPropertyName: "maxLabelLength", publicName: "maxLabelLength", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"si-map-tooltip\">\n <div #content></div>\n @if (hiddenEntries()) {\n <div>{{ moreText() | translate: { length: hiddenEntries() } }}</div>\n }\n</div>\n", styles: [".si-map-tooltip{text-align:start;margin-block-start:4px;position:relative;max-inline-size:max-content;padding-block:4px;padding-inline:8px;color:var(--element-ui-5);background-color:var(--element-ui-1);border-radius:var(--element-radius-1)}.si-map-tooltip:before{content:\"\";position:absolute;inset-block-start:-4px;left:50%;transform:translate(-50%) rotate(45deg);block-size:8px;inline-size:8px;background-color:inherit}\n"], dependencies: [{ kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
|
|
121
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiMapTooltipComponent, isStandalone: true, selector: "si-map-tooltip", inputs: { moreText: { classPropertyName: "moreText", publicName: "moreText", isSignal: true, isRequired: false, transformFunction: null }, maxLabelLength: { classPropertyName: "maxLabelLength", publicName: "maxLabelLength", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"si-map-tooltip\">\n <div #content></div>\n @if (hiddenEntries()) {\n <div>{{ moreText() | translate: { length: hiddenEntries() } }}</div>\n }\n</div>\n", styles: [".si-map-tooltip{text-align:start;margin-block-start:4px;position:relative;max-inline-size:max-content;padding-block:4px;padding-inline:8px;color:var(--element-ui-5);background-color:var(--element-ui-1);border-radius:var(--element-radius-1)}.si-map-tooltip:before{content:\"\";position:absolute;inset-block-start:-4px;left:50%;transform:translate(-50%) rotate(45deg);block-size:8px;inline-size:8px;background-color:inherit}\n"], dependencies: [{ kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Default });
|
|
122
122
|
}
|
|
123
123
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiMapTooltipComponent, decorators: [{
|
|
124
124
|
type: Component,
|
|
125
|
-
args: [{ selector: 'si-map-tooltip', imports: [SiTranslatePipe], template: "<div class=\"si-map-tooltip\">\n <div #content></div>\n @if (hiddenEntries()) {\n <div>{{ moreText() | translate: { length: hiddenEntries() } }}</div>\n }\n</div>\n", styles: [".si-map-tooltip{text-align:start;margin-block-start:4px;position:relative;max-inline-size:max-content;padding-block:4px;padding-inline:8px;color:var(--element-ui-5);background-color:var(--element-ui-1);border-radius:var(--element-radius-1)}.si-map-tooltip:before{content:\"\";position:absolute;inset-block-start:-4px;left:50%;transform:translate(-50%) rotate(45deg);block-size:8px;inline-size:8px;background-color:inherit}\n"] }]
|
|
125
|
+
args: [{ selector: 'si-map-tooltip', imports: [SiTranslatePipe], changeDetection: ChangeDetectionStrategy.Default, template: "<div class=\"si-map-tooltip\">\n <div #content></div>\n @if (hiddenEntries()) {\n <div>{{ moreText() | translate: { length: hiddenEntries() } }}</div>\n }\n</div>\n", styles: [".si-map-tooltip{text-align:start;margin-block-start:4px;position:relative;max-inline-size:max-content;padding-block:4px;padding-inline:8px;color:var(--element-ui-5);background-color:var(--element-ui-1);border-radius:var(--element-radius-1)}.si-map-tooltip:before{content:\"\";position:absolute;inset-block-start:-4px;left:50%;transform:translate(-50%) rotate(45deg);block-size:8px;inline-size:8px;background-color:inherit}\n"] }]
|
|
126
126
|
}], propDecorators: { content: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }], moreText: [{ type: i0.Input, args: [{ isSignal: true, alias: "moreText", required: false }] }], maxLabelLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLabelLength", required: false }] }] } });
|
|
127
127
|
|
|
128
128
|
/**
|
|
@@ -205,11 +205,11 @@ class SiMapPopoverComponent {
|
|
|
205
205
|
this.contentContainer().createEmbeddedView(template, context).detectChanges();
|
|
206
206
|
}
|
|
207
207
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiMapPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
208
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiMapPopoverComponent, isStandalone: true, selector: "si-map-popover", viewQueries: [{ propertyName: "elementRef", first: true, predicate: ["popover"], descendants: true, isSignal: true }, { propertyName: "contentContainer", first: true, predicate: ["contentContainer"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "defaultContent", first: true, predicate: ["defaultContent"], descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "defaultCluster", first: true, predicate: ["defaultCluster"], descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<div #popover class=\"si-map-popover\">\n <div class=\"si-map-popover-arrow\"></div>\n\n <div class=\"si-map-popover-content\">\n <div class=\"overflow-auto px-5\">\n <div #contentContainer></div>\n </div>\n </div>\n</div>\n\n<ng-template #defaultContent let-mapPoint=\"mapPoint\" siMapPopoverTemplate>\n <div>{{ mapPoint?.name }}</div>\n <div [innerHTML]=\"mapPoint?.description\"></div>\n</ng-template>\n<ng-template #defaultCluster let-mapPoints=\"mapPoints\" siMapPopoverClusterTemplate>\n <div [style.max-block-size.px]=\"maxHeight()\">\n <div class=\"si-map-popover-list\">\n @for (point of mapPoints; track $index) {\n <div class=\"si-map-popover-item\">\n <div class=\"si-map-popover-item-title\">{{ point.name }}</div>\n <div class=\"si-map-popover-item-description\" [innerHTML]=\"point.description\"></div>\n </div>\n }\n </div>\n </div>\n</ng-template>\n", styles: [".si-map-popover{position:absolute;z-index:1070;display:block;min-inline-size:280px;word-wrap:break-word;background-color:var(--element-base-3);background-clip:padding-box;border:1px solid var(--element-ui-4);border-radius:var(--element-radius-2);box-shadow:0 0 8px var(--element-box-shadow-color-1),0 8px 8px var(--element-box-shadow-color-2);margin-block-start:4px;inset-inline-start:-20px}.si-map-popover-arrow{position:absolute;display:block;inline-size:12px;block-size:6px;margin-block:0;margin-inline:13px;inset-block-start:-7px}.si-map-popover-arrow:before,.si-map-popover-arrow:after{position:absolute;display:block;content:\"\";border-color:transparent;border-style:solid;border-inline-width:6px;border-block-width:0 6px}.si-map-popover-arrow:before{inset-block-start:0;border-block-end-color:var(--element-ui-4)}.si-map-popover-arrow:after{inset-block-start:1px;border-block-end-color:var(--element-base-3)}.si-map-popover-content{padding-block:12px;color:var(--element-text-primary)}.si-map-popover .si-map-popover-item{display:flex;margin-block-end:12px;flex-direction:column;gap:4px}.si-map-popover .si-map-popover-item-title{font-weight:bolder}\n"], dependencies: [{ kind: "directive", type: SiMapPopoverTemplateDirective, selector: "[siMapPopoverTemplate]" }, { kind: "directive", type: SiMapPopoverClusterTemplateDirective, selector: "[siMapPopoverClusterTemplate]" }] });
|
|
208
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiMapPopoverComponent, isStandalone: true, selector: "si-map-popover", viewQueries: [{ propertyName: "elementRef", first: true, predicate: ["popover"], descendants: true, isSignal: true }, { propertyName: "contentContainer", first: true, predicate: ["contentContainer"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "defaultContent", first: true, predicate: ["defaultContent"], descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "defaultCluster", first: true, predicate: ["defaultCluster"], descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<div #popover class=\"si-map-popover\">\n <div class=\"si-map-popover-arrow\"></div>\n\n <div class=\"si-map-popover-content\">\n <div class=\"overflow-auto px-5\">\n <div #contentContainer></div>\n </div>\n </div>\n</div>\n\n<ng-template #defaultContent let-mapPoint=\"mapPoint\" siMapPopoverTemplate>\n <div>{{ mapPoint?.name }}</div>\n <div [innerHTML]=\"mapPoint?.description\"></div>\n</ng-template>\n<ng-template #defaultCluster let-mapPoints=\"mapPoints\" siMapPopoverClusterTemplate>\n <div [style.max-block-size.px]=\"maxHeight()\">\n <div class=\"si-map-popover-list\">\n @for (point of mapPoints; track $index) {\n <div class=\"si-map-popover-item\">\n <div class=\"si-map-popover-item-title\">{{ point.name }}</div>\n <div class=\"si-map-popover-item-description\" [innerHTML]=\"point.description\"></div>\n </div>\n }\n </div>\n </div>\n</ng-template>\n", styles: [".si-map-popover{position:absolute;z-index:1070;display:block;min-inline-size:280px;word-wrap:break-word;background-color:var(--element-base-3);background-clip:padding-box;border:1px solid var(--element-ui-4);border-radius:var(--element-radius-2);box-shadow:0 0 8px var(--element-box-shadow-color-1),0 8px 8px var(--element-box-shadow-color-2);margin-block-start:4px;inset-inline-start:-20px}.si-map-popover-arrow{position:absolute;display:block;inline-size:12px;block-size:6px;margin-block:0;margin-inline:13px;inset-block-start:-7px}.si-map-popover-arrow:before,.si-map-popover-arrow:after{position:absolute;display:block;content:\"\";border-color:transparent;border-style:solid;border-inline-width:6px;border-block-width:0 6px}.si-map-popover-arrow:before{inset-block-start:0;border-block-end-color:var(--element-ui-4)}.si-map-popover-arrow:after{inset-block-start:1px;border-block-end-color:var(--element-base-3)}.si-map-popover-content{padding-block:12px;color:var(--element-text-primary)}.si-map-popover .si-map-popover-item{display:flex;margin-block-end:12px;flex-direction:column;gap:4px}.si-map-popover .si-map-popover-item-title{font-weight:bolder}\n"], dependencies: [{ kind: "directive", type: SiMapPopoverTemplateDirective, selector: "[siMapPopoverTemplate]" }, { kind: "directive", type: SiMapPopoverClusterTemplateDirective, selector: "[siMapPopoverClusterTemplate]" }], changeDetection: i0.ChangeDetectionStrategy.Default });
|
|
209
209
|
}
|
|
210
210
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiMapPopoverComponent, decorators: [{
|
|
211
211
|
type: Component,
|
|
212
|
-
args: [{ selector: 'si-map-popover', imports: [SiMapPopoverTemplateDirective, SiMapPopoverClusterTemplateDirective], template: "<div #popover class=\"si-map-popover\">\n <div class=\"si-map-popover-arrow\"></div>\n\n <div class=\"si-map-popover-content\">\n <div class=\"overflow-auto px-5\">\n <div #contentContainer></div>\n </div>\n </div>\n</div>\n\n<ng-template #defaultContent let-mapPoint=\"mapPoint\" siMapPopoverTemplate>\n <div>{{ mapPoint?.name }}</div>\n <div [innerHTML]=\"mapPoint?.description\"></div>\n</ng-template>\n<ng-template #defaultCluster let-mapPoints=\"mapPoints\" siMapPopoverClusterTemplate>\n <div [style.max-block-size.px]=\"maxHeight()\">\n <div class=\"si-map-popover-list\">\n @for (point of mapPoints; track $index) {\n <div class=\"si-map-popover-item\">\n <div class=\"si-map-popover-item-title\">{{ point.name }}</div>\n <div class=\"si-map-popover-item-description\" [innerHTML]=\"point.description\"></div>\n </div>\n }\n </div>\n </div>\n</ng-template>\n", styles: [".si-map-popover{position:absolute;z-index:1070;display:block;min-inline-size:280px;word-wrap:break-word;background-color:var(--element-base-3);background-clip:padding-box;border:1px solid var(--element-ui-4);border-radius:var(--element-radius-2);box-shadow:0 0 8px var(--element-box-shadow-color-1),0 8px 8px var(--element-box-shadow-color-2);margin-block-start:4px;inset-inline-start:-20px}.si-map-popover-arrow{position:absolute;display:block;inline-size:12px;block-size:6px;margin-block:0;margin-inline:13px;inset-block-start:-7px}.si-map-popover-arrow:before,.si-map-popover-arrow:after{position:absolute;display:block;content:\"\";border-color:transparent;border-style:solid;border-inline-width:6px;border-block-width:0 6px}.si-map-popover-arrow:before{inset-block-start:0;border-block-end-color:var(--element-ui-4)}.si-map-popover-arrow:after{inset-block-start:1px;border-block-end-color:var(--element-base-3)}.si-map-popover-content{padding-block:12px;color:var(--element-text-primary)}.si-map-popover .si-map-popover-item{display:flex;margin-block-end:12px;flex-direction:column;gap:4px}.si-map-popover .si-map-popover-item-title{font-weight:bolder}\n"] }]
|
|
212
|
+
args: [{ selector: 'si-map-popover', imports: [SiMapPopoverTemplateDirective, SiMapPopoverClusterTemplateDirective], changeDetection: ChangeDetectionStrategy.Default, template: "<div #popover class=\"si-map-popover\">\n <div class=\"si-map-popover-arrow\"></div>\n\n <div class=\"si-map-popover-content\">\n <div class=\"overflow-auto px-5\">\n <div #contentContainer></div>\n </div>\n </div>\n</div>\n\n<ng-template #defaultContent let-mapPoint=\"mapPoint\" siMapPopoverTemplate>\n <div>{{ mapPoint?.name }}</div>\n <div [innerHTML]=\"mapPoint?.description\"></div>\n</ng-template>\n<ng-template #defaultCluster let-mapPoints=\"mapPoints\" siMapPopoverClusterTemplate>\n <div [style.max-block-size.px]=\"maxHeight()\">\n <div class=\"si-map-popover-list\">\n @for (point of mapPoints; track $index) {\n <div class=\"si-map-popover-item\">\n <div class=\"si-map-popover-item-title\">{{ point.name }}</div>\n <div class=\"si-map-popover-item-description\" [innerHTML]=\"point.description\"></div>\n </div>\n }\n </div>\n </div>\n</ng-template>\n", styles: [".si-map-popover{position:absolute;z-index:1070;display:block;min-inline-size:280px;word-wrap:break-word;background-color:var(--element-base-3);background-clip:padding-box;border:1px solid var(--element-ui-4);border-radius:var(--element-radius-2);box-shadow:0 0 8px var(--element-box-shadow-color-1),0 8px 8px var(--element-box-shadow-color-2);margin-block-start:4px;inset-inline-start:-20px}.si-map-popover-arrow{position:absolute;display:block;inline-size:12px;block-size:6px;margin-block:0;margin-inline:13px;inset-block-start:-7px}.si-map-popover-arrow:before,.si-map-popover-arrow:after{position:absolute;display:block;content:\"\";border-color:transparent;border-style:solid;border-inline-width:6px;border-block-width:0 6px}.si-map-popover-arrow:before{inset-block-start:0;border-block-end-color:var(--element-ui-4)}.si-map-popover-arrow:after{inset-block-start:1px;border-block-end-color:var(--element-base-3)}.si-map-popover-content{padding-block:12px;color:var(--element-text-primary)}.si-map-popover .si-map-popover-item{display:flex;margin-block-end:12px;flex-direction:column;gap:4px}.si-map-popover .si-map-popover-item-title{font-weight:bolder}\n"] }]
|
|
213
213
|
}], propDecorators: { elementRef: [{ type: i0.ViewChild, args: ['popover', { isSignal: true }] }], contentContainer: [{ type: i0.ViewChild, args: ['contentContainer', { ...{
|
|
214
214
|
read: ViewContainerRef
|
|
215
215
|
}, isSignal: true }] }], defaultContent: [{ type: i0.ViewChild, args: ['defaultContent', { ...{
|