@angular-helpers/openlayers 21.14.1 → 22.0.1
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/fesm2022/angular-helpers-openlayers-controls.mjs +114 -86
- package/fesm2022/angular-helpers-openlayers-core.mjs +42 -30
- package/fesm2022/angular-helpers-openlayers-interactions.mjs +76 -55
- package/fesm2022/angular-helpers-openlayers-layers.mjs +155 -97
- package/fesm2022/angular-helpers-openlayers-military.mjs +6 -6
- package/fesm2022/angular-helpers-openlayers-overlays.mjs +26 -19
- package/package.json +4 -4
- package/types/angular-helpers-openlayers-controls.d.ts +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { inject, input, DestroyRef, afterNextRender,
|
|
2
|
+
import { inject, input, DestroyRef, afterNextRender, Component, InjectionToken, output, signal, viewChild, Injectable, computed, effect } from '@angular/core';
|
|
3
3
|
import { OlMapService, OlZoneHelper, OlTimeService } from '@angular-helpers/openlayers/core';
|
|
4
4
|
import Zoom from 'ol/control/Zoom';
|
|
5
5
|
import Attribution from 'ol/control/Attribution';
|
|
@@ -18,8 +18,10 @@ import { Style, Circle, Stroke, Fill } from 'ol/style';
|
|
|
18
18
|
class OlZoomControlComponent {
|
|
19
19
|
mapService = inject(OlMapService);
|
|
20
20
|
zoneHelper = inject(OlZoneHelper);
|
|
21
|
-
delta = input(1,
|
|
22
|
-
|
|
21
|
+
delta = input(1, /* @ts-ignore */
|
|
22
|
+
...(ngDevMode ? [{ debugName: "delta" }] : /* istanbul ignore next */ []));
|
|
23
|
+
duration = input(250, /* @ts-ignore */
|
|
24
|
+
...(ngDevMode ? [{ debugName: "duration" }] : /* istanbul ignore next */ []));
|
|
23
25
|
control;
|
|
24
26
|
constructor() {
|
|
25
27
|
const destroyRef = inject(DestroyRef);
|
|
@@ -44,15 +46,14 @@ class OlZoomControlComponent {
|
|
|
44
46
|
});
|
|
45
47
|
});
|
|
46
48
|
}
|
|
47
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
48
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
49
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: OlZoomControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
50
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.0", type: OlZoomControlComponent, isStandalone: true, selector: "ol-zoom-control", inputs: { delta: { classPropertyName: "delta", publicName: "delta", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true });
|
|
49
51
|
}
|
|
50
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
52
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: OlZoomControlComponent, decorators: [{
|
|
51
53
|
type: Component,
|
|
52
54
|
args: [{
|
|
53
55
|
selector: 'ol-zoom-control',
|
|
54
56
|
template: '',
|
|
55
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
56
57
|
}]
|
|
57
58
|
}], ctorParameters: () => [], propDecorators: { delta: [{ type: i0.Input, args: [{ isSignal: true, alias: "delta", required: false }] }], duration: [{ type: i0.Input, args: [{ isSignal: true, alias: "duration", required: false }] }] } });
|
|
58
59
|
|
|
@@ -60,8 +61,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
|
|
|
60
61
|
class OlAttributionControlComponent {
|
|
61
62
|
mapService = inject(OlMapService);
|
|
62
63
|
zoneHelper = inject(OlZoneHelper);
|
|
63
|
-
collapsible = input(true,
|
|
64
|
-
|
|
64
|
+
collapsible = input(true, /* @ts-ignore */
|
|
65
|
+
...(ngDevMode ? [{ debugName: "collapsible" }] : /* istanbul ignore next */ []));
|
|
66
|
+
collapsed = input(true, /* @ts-ignore */
|
|
67
|
+
...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
|
|
65
68
|
control;
|
|
66
69
|
constructor() {
|
|
67
70
|
const destroyRef = inject(DestroyRef);
|
|
@@ -89,15 +92,14 @@ class OlAttributionControlComponent {
|
|
|
89
92
|
});
|
|
90
93
|
});
|
|
91
94
|
}
|
|
92
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
93
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
95
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: OlAttributionControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
96
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.0", type: OlAttributionControlComponent, isStandalone: true, selector: "ol-attribution-control", inputs: { collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true });
|
|
94
97
|
}
|
|
95
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
98
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: OlAttributionControlComponent, decorators: [{
|
|
96
99
|
type: Component,
|
|
97
100
|
args: [{
|
|
98
101
|
selector: 'ol-attribution-control',
|
|
99
102
|
template: '',
|
|
100
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
101
103
|
}]
|
|
102
104
|
}], ctorParameters: () => [], propDecorators: { collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }] } });
|
|
103
105
|
|
|
@@ -105,9 +107,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
|
|
|
105
107
|
class OlScaleLineControlComponent {
|
|
106
108
|
mapService = inject(OlMapService);
|
|
107
109
|
zoneHelper = inject(OlZoneHelper);
|
|
108
|
-
units = input('metric',
|
|
109
|
-
|
|
110
|
-
|
|
110
|
+
units = input('metric', /* @ts-ignore */
|
|
111
|
+
...(ngDevMode ? [{ debugName: "units" }] : /* istanbul ignore next */ []));
|
|
112
|
+
bar = input(false, /* @ts-ignore */
|
|
113
|
+
...(ngDevMode ? [{ debugName: "bar" }] : /* istanbul ignore next */ []));
|
|
114
|
+
steps = input(4, /* @ts-ignore */
|
|
115
|
+
...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));
|
|
111
116
|
control;
|
|
112
117
|
constructor() {
|
|
113
118
|
const destroyRef = inject(DestroyRef);
|
|
@@ -136,15 +141,14 @@ class OlScaleLineControlComponent {
|
|
|
136
141
|
});
|
|
137
142
|
});
|
|
138
143
|
}
|
|
139
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
140
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
144
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: OlScaleLineControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
145
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.0", type: OlScaleLineControlComponent, isStandalone: true, selector: "ol-scale-line-control", inputs: { units: { classPropertyName: "units", publicName: "units", isSignal: true, isRequired: false, transformFunction: null }, bar: { classPropertyName: "bar", publicName: "bar", isSignal: true, isRequired: false, transformFunction: null }, steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true });
|
|
141
146
|
}
|
|
142
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
147
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: OlScaleLineControlComponent, decorators: [{
|
|
143
148
|
type: Component,
|
|
144
149
|
args: [{
|
|
145
150
|
selector: 'ol-scale-line-control',
|
|
146
151
|
template: '',
|
|
147
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
148
152
|
}]
|
|
149
153
|
}], ctorParameters: () => [], propDecorators: { units: [{ type: i0.Input, args: [{ isSignal: true, alias: "units", required: false }] }], bar: [{ type: i0.Input, args: [{ isSignal: true, alias: "bar", required: false }] }], steps: [{ type: i0.Input, args: [{ isSignal: true, alias: "steps", required: false }] }] } });
|
|
150
154
|
|
|
@@ -152,10 +156,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
|
|
|
152
156
|
class OlFullscreenControlComponent {
|
|
153
157
|
mapService = inject(OlMapService);
|
|
154
158
|
zoneHelper = inject(OlZoneHelper);
|
|
155
|
-
source = input(
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
+
source = input(/* @ts-ignore */
|
|
160
|
+
...(ngDevMode ? [undefined, { debugName: "source" }] : /* istanbul ignore next */ []));
|
|
161
|
+
label = input('⤢', /* @ts-ignore */
|
|
162
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
163
|
+
labelActive = input('⤡', /* @ts-ignore */
|
|
164
|
+
...(ngDevMode ? [{ debugName: "labelActive" }] : /* istanbul ignore next */ []));
|
|
165
|
+
tipLabel = input('Toggle full-screen', /* @ts-ignore */
|
|
166
|
+
...(ngDevMode ? [{ debugName: "tipLabel" }] : /* istanbul ignore next */ []));
|
|
159
167
|
control;
|
|
160
168
|
constructor() {
|
|
161
169
|
const destroyRef = inject(DestroyRef);
|
|
@@ -185,15 +193,14 @@ class OlFullscreenControlComponent {
|
|
|
185
193
|
});
|
|
186
194
|
});
|
|
187
195
|
}
|
|
188
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
189
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
196
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: OlFullscreenControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
197
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.0", type: OlFullscreenControlComponent, isStandalone: true, selector: "ol-fullscreen-control", inputs: { source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelActive: { classPropertyName: "labelActive", publicName: "labelActive", isSignal: true, isRequired: false, transformFunction: null }, tipLabel: { classPropertyName: "tipLabel", publicName: "tipLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true });
|
|
190
198
|
}
|
|
191
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
199
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: OlFullscreenControlComponent, decorators: [{
|
|
192
200
|
type: Component,
|
|
193
201
|
args: [{
|
|
194
202
|
selector: 'ol-fullscreen-control',
|
|
195
203
|
template: '',
|
|
196
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
197
204
|
}]
|
|
198
205
|
}], ctorParameters: () => [], propDecorators: { source: [{ type: i0.Input, args: [{ isSignal: true, alias: "source", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelActive", required: false }] }], tipLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "tipLabel", required: false }] }] } });
|
|
199
206
|
|
|
@@ -209,9 +216,12 @@ const ROTATE_CONTROL_MAP_SERVICE = new InjectionToken('ROTATE_CONTROL_MAP_SERVIC
|
|
|
209
216
|
class OlRotateControlComponent {
|
|
210
217
|
mapService = inject(ROTATE_CONTROL_MAP_SERVICE, { optional: true });
|
|
211
218
|
zoneHelper = inject(OlZoneHelper);
|
|
212
|
-
autoHide = input(true,
|
|
213
|
-
|
|
214
|
-
|
|
219
|
+
autoHide = input(true, /* @ts-ignore */
|
|
220
|
+
...(ngDevMode ? [{ debugName: "autoHide" }] : /* istanbul ignore next */ []));
|
|
221
|
+
duration = input(250, /* @ts-ignore */
|
|
222
|
+
...(ngDevMode ? [{ debugName: "duration" }] : /* istanbul ignore next */ []));
|
|
223
|
+
tipLabel = input('Reset rotation', /* @ts-ignore */
|
|
224
|
+
...(ngDevMode ? [{ debugName: "tipLabel" }] : /* istanbul ignore next */ []));
|
|
215
225
|
control;
|
|
216
226
|
constructor() {
|
|
217
227
|
if (!this.mapService)
|
|
@@ -242,15 +252,14 @@ class OlRotateControlComponent {
|
|
|
242
252
|
});
|
|
243
253
|
});
|
|
244
254
|
}
|
|
245
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
246
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
255
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: OlRotateControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
256
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.0", type: OlRotateControlComponent, isStandalone: true, selector: "ol-rotate-control", inputs: { autoHide: { classPropertyName: "autoHide", publicName: "autoHide", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, tipLabel: { classPropertyName: "tipLabel", publicName: "tipLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true });
|
|
247
257
|
}
|
|
248
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
258
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: OlRotateControlComponent, decorators: [{
|
|
249
259
|
type: Component,
|
|
250
260
|
args: [{
|
|
251
261
|
selector: 'ol-rotate-control',
|
|
252
262
|
template: '',
|
|
253
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
254
263
|
}]
|
|
255
264
|
}], ctorParameters: () => [], propDecorators: { autoHide: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoHide", required: false }] }], duration: [{ type: i0.Input, args: [{ isSignal: true, alias: "duration", required: false }] }], tipLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "tipLabel", required: false }] }] } });
|
|
256
265
|
|
|
@@ -272,14 +281,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
|
|
|
272
281
|
* ```
|
|
273
282
|
*/
|
|
274
283
|
class OlLayerSwitcherComponent {
|
|
275
|
-
position = input('top-right',
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
284
|
+
position = input('top-right', /* @ts-ignore */
|
|
285
|
+
...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
|
|
286
|
+
layers = input([], /* @ts-ignore */
|
|
287
|
+
...(ngDevMode ? [{ debugName: "layers" }] : /* istanbul ignore next */ []));
|
|
288
|
+
collapsible = input(true, /* @ts-ignore */
|
|
289
|
+
...(ngDevMode ? [{ debugName: "collapsible" }] : /* istanbul ignore next */ []));
|
|
290
|
+
showOpacity = input(false, /* @ts-ignore */
|
|
291
|
+
...(ngDevMode ? [{ debugName: "showOpacity" }] : /* istanbul ignore next */ []));
|
|
292
|
+
startCollapsed = input(true, /* @ts-ignore */
|
|
293
|
+
...(ngDevMode ? [{ debugName: "startCollapsed" }] : /* istanbul ignore next */ []));
|
|
280
294
|
visibilityChange = output();
|
|
281
295
|
opacityChange = output();
|
|
282
|
-
isCollapsed = signal(true,
|
|
296
|
+
isCollapsed = signal(true, /* @ts-ignore */
|
|
297
|
+
...(ngDevMode ? [{ debugName: "isCollapsed" }] : /* istanbul ignore next */ []));
|
|
283
298
|
ngOnInit() {
|
|
284
299
|
this.isCollapsed.set(this.startCollapsed());
|
|
285
300
|
}
|
|
@@ -298,8 +313,8 @@ class OlLayerSwitcherComponent {
|
|
|
298
313
|
const value = event.target.valueAsNumber;
|
|
299
314
|
this.opacityChange.emit({ id, opacity: value });
|
|
300
315
|
}
|
|
301
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
302
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
316
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: OlLayerSwitcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
317
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: OlLayerSwitcherComponent, isStandalone: true, selector: "ol-layer-switcher", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, layers: { classPropertyName: "layers", publicName: "layers", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, showOpacity: { classPropertyName: "showOpacity", publicName: "showOpacity", isSignal: true, isRequired: false, transformFunction: null }, startCollapsed: { classPropertyName: "startCollapsed", publicName: "startCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visibilityChange: "visibilityChange", opacityChange: "opacityChange" }, ngImport: i0, template: `
|
|
303
318
|
<div
|
|
304
319
|
class="ol-layer-switcher"
|
|
305
320
|
[class.collapsed]="isCollapsed()"
|
|
@@ -381,11 +396,11 @@ class OlLayerSwitcherComponent {
|
|
|
381
396
|
</div>
|
|
382
397
|
}
|
|
383
398
|
</div>
|
|
384
|
-
`, isInline: true, styles: [":host{display:block}.ol-layer-switcher{position:absolute;background:#fffffff2;color:#333;border-radius:4px;border:none;box-shadow:0 1px 4px #0000004d;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;min-width:36px;z-index:10;transition:all .2s ease}.ol-layer-switcher--top-left{top:.5em;left:.5em}.ol-layer-switcher--top-right{top:10em;right:.5em}.ol-layer-switcher--bottom-left{bottom:.5em;left:.5em}.ol-layer-switcher--bottom-right{bottom:.5em;right:.5em}.ol-layer-switcher.collapsed{min-width:auto}.ol-layer-switcher__toggle{display:flex;align-items:center;gap:6px;padding:4px 8px;background:transparent;color:#333;border:none;border-bottom:1px solid rgba(0,0,0,.08);border-radius:4px 4px 0 0;cursor:pointer;width:100%;font-size:13px;font-weight:600;transition:background .15s ease;min-height:36px}.ol-layer-switcher.collapsed .ol-layer-switcher__toggle{border-bottom:none;border-radius:4px;padding:4px 6px;justify-content:center}.ol-layer-switcher__toggle:hover{background:#0000000d}.ol-layer-switcher__icon{font-size:14px;line-height:1}.ol-layer-switcher__title{font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.5px}.ol-layer-switcher.collapsed .ol-layer-switcher__title,.ol-layer-switcher.collapsed .ol-layer-switcher__panel{display:none}.ol-layer-switcher__panel{padding:6px;max-height:300px;overflow-y:auto}.ol-layer-switcher__empty{padding:12px;color:#6b7280;text-align:center;font-style:italic;font-size:12px}.ol-layer-switcher__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}.ol-layer-switcher__item{padding:5px 8px;border-radius:3px;transition:background .15s ease}.ol-layer-switcher__item:hover{background:#0000000a}.ol-layer-switcher__label{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:12px}.ol-layer-switcher__checkbox{cursor:pointer;accent-color:#1a73e8}.ol-layer-switcher__name{flex:1;font-weight:500;color:#333;font-size:12px}.ol-layer-switcher__type{font-size:9px;padding:2px 5px;border-radius:3px;font-weight:700;text-transform:uppercase;background:#0000000f;color:#555;letter-spacing:.3px}.ol-layer-switcher__type--vector{background:#3b82f61f;color:#2563eb}.ol-layer-switcher__type--tile{background:#22c55e1f;color:#16a34a}.ol-layer-switcher__type--image{background:#f59e0b1f;color:#d97706}.ol-layer-switcher__opacity{width:100%;margin-top:4px;cursor:pointer;height:4px;accent-color:#1a73e8}\n"]
|
|
399
|
+
`, isInline: true, styles: [":host{display:block}.ol-layer-switcher{position:absolute;background:#fffffff2;color:#333;border-radius:4px;border:none;box-shadow:0 1px 4px #0000004d;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;min-width:36px;z-index:10;transition:all .2s ease}.ol-layer-switcher--top-left{top:.5em;left:.5em}.ol-layer-switcher--top-right{top:10em;right:.5em}.ol-layer-switcher--bottom-left{bottom:.5em;left:.5em}.ol-layer-switcher--bottom-right{bottom:.5em;right:.5em}.ol-layer-switcher.collapsed{min-width:auto}.ol-layer-switcher__toggle{display:flex;align-items:center;gap:6px;padding:4px 8px;background:transparent;color:#333;border:none;border-bottom:1px solid rgba(0,0,0,.08);border-radius:4px 4px 0 0;cursor:pointer;width:100%;font-size:13px;font-weight:600;transition:background .15s ease;min-height:36px}.ol-layer-switcher.collapsed .ol-layer-switcher__toggle{border-bottom:none;border-radius:4px;padding:4px 6px;justify-content:center}.ol-layer-switcher__toggle:hover{background:#0000000d}.ol-layer-switcher__icon{font-size:14px;line-height:1}.ol-layer-switcher__title{font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.5px}.ol-layer-switcher.collapsed .ol-layer-switcher__title,.ol-layer-switcher.collapsed .ol-layer-switcher__panel{display:none}.ol-layer-switcher__panel{padding:6px;max-height:300px;overflow-y:auto}.ol-layer-switcher__empty{padding:12px;color:#6b7280;text-align:center;font-style:italic;font-size:12px}.ol-layer-switcher__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}.ol-layer-switcher__item{padding:5px 8px;border-radius:3px;transition:background .15s ease}.ol-layer-switcher__item:hover{background:#0000000a}.ol-layer-switcher__label{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:12px}.ol-layer-switcher__checkbox{cursor:pointer;accent-color:#1a73e8}.ol-layer-switcher__name{flex:1;font-weight:500;color:#333;font-size:12px}.ol-layer-switcher__type{font-size:9px;padding:2px 5px;border-radius:3px;font-weight:700;text-transform:uppercase;background:#0000000f;color:#555;letter-spacing:.3px}.ol-layer-switcher__type--vector{background:#3b82f61f;color:#2563eb}.ol-layer-switcher__type--tile{background:#22c55e1f;color:#16a34a}.ol-layer-switcher__type--image{background:#f59e0b1f;color:#d97706}.ol-layer-switcher__opacity{width:100%;margin-top:4px;cursor:pointer;height:4px;accent-color:#1a73e8}\n"] });
|
|
385
400
|
}
|
|
386
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
401
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: OlLayerSwitcherComponent, decorators: [{
|
|
387
402
|
type: Component,
|
|
388
|
-
args: [{ selector: 'ol-layer-switcher',
|
|
403
|
+
args: [{ selector: 'ol-layer-switcher', template: `
|
|
389
404
|
<div
|
|
390
405
|
class="ol-layer-switcher"
|
|
391
406
|
[class.collapsed]="isCollapsed()"
|
|
@@ -489,11 +504,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
|
|
|
489
504
|
* ```
|
|
490
505
|
*/
|
|
491
506
|
class OlBasemapSwitcherComponent {
|
|
492
|
-
basemaps = input([{ id: 'osm', name: 'OpenStreetMap', type: 'osm' }],
|
|
493
|
-
|
|
494
|
-
|
|
507
|
+
basemaps = input([{ id: 'osm', name: 'OpenStreetMap', type: 'osm' }], /* @ts-ignore */
|
|
508
|
+
...(ngDevMode ? [{ debugName: "basemaps" }] : /* istanbul ignore next */ []));
|
|
509
|
+
activeBasemap = input('osm', /* @ts-ignore */
|
|
510
|
+
...(ngDevMode ? [{ debugName: "activeBasemap" }] : /* istanbul ignore next */ []));
|
|
511
|
+
position = input('bottom-left', /* @ts-ignore */
|
|
512
|
+
...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
|
|
495
513
|
basemapChange = output();
|
|
496
|
-
isExpanded = signal(false,
|
|
514
|
+
isExpanded = signal(false, /* @ts-ignore */
|
|
515
|
+
...(ngDevMode ? [{ debugName: "isExpanded" }] : /* istanbul ignore next */ []));
|
|
497
516
|
toggleExpanded() {
|
|
498
517
|
this.isExpanded.update((v) => !v);
|
|
499
518
|
}
|
|
@@ -517,8 +536,8 @@ class OlBasemapSwitcherComponent {
|
|
|
517
536
|
return '🗺️';
|
|
518
537
|
}
|
|
519
538
|
}
|
|
520
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
521
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
539
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: OlBasemapSwitcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
540
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: OlBasemapSwitcherComponent, isStandalone: true, selector: "ol-basemap-switcher", inputs: { basemaps: { classPropertyName: "basemaps", publicName: "basemaps", isSignal: true, isRequired: false, transformFunction: null }, activeBasemap: { classPropertyName: "activeBasemap", publicName: "activeBasemap", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { basemapChange: "basemapChange" }, ngImport: i0, template: `
|
|
522
541
|
<div
|
|
523
542
|
class="ol-basemap-switcher"
|
|
524
543
|
[class.ol-basemap-switcher--top-left]="position() === 'top-left'"
|
|
@@ -576,11 +595,11 @@ class OlBasemapSwitcherComponent {
|
|
|
576
595
|
</span>
|
|
577
596
|
</button>
|
|
578
597
|
</div>
|
|
579
|
-
`, isInline: true, styles: [":host{display:block}.ol-basemap-switcher{position:absolute;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;color:#333;z-index:10}.ol-basemap-switcher--top-left{top:.5em;left:.5em}.ol-basemap-switcher--top-center{top:.5em;left:50%;transform:translate(-50%)}.ol-basemap-switcher--top-right{top:.5em;right:.5em}.ol-basemap-switcher--bottom-left{bottom:.5em;left:.5em}.ol-basemap-switcher--bottom-center{bottom:.5em;left:50%;transform:translate(-50%)}.ol-basemap-switcher--bottom-right{bottom:.5em;right:.5em}.ol-basemap-switcher__toggle{display:flex;align-items:center;gap:6px;padding:4px 10px;background:#fffffff2;color:#333;border:none;border-radius:4px;box-shadow:0 1px 4px #0000004d;cursor:pointer;font-size:12px;font-weight:600;transition:background .15s ease;min-height:36px}.ol-basemap-switcher__toggle:hover{background:#fff}.ol-basemap-switcher__toggle-icon{font-size:14px;line-height:1}.ol-basemap-switcher__toggle-text{font-weight:600;font-size:12px}.ol-basemap-switcher__panel{position:absolute;bottom:calc(100% + 6px);left:0;background:#fffffff2;border:none;color:#333;border-radius:4px;box-shadow:0 1px 4px #0000004d;padding:4px;min-width:160px;display:flex;flex-direction:column;gap:2px}.ol-basemap-switcher--bottom-right .ol-basemap-switcher__panel,.ol-basemap-switcher--top-right .ol-basemap-switcher__panel{left:auto;right:0}.ol-basemap-switcher--top-left .ol-basemap-switcher__panel,.ol-basemap-switcher--top-center .ol-basemap-switcher__panel,.ol-basemap-switcher--top-right .ol-basemap-switcher__panel{bottom:auto;top:calc(100% + 6px)}.ol-basemap-switcher--top-center .ol-basemap-switcher__panel,.ol-basemap-switcher--bottom-center .ol-basemap-switcher__panel{left:50%;transform:translate(-50%)}.ol-basemap-switcher__item{display:flex;align-items:center;gap:8px;width:100%;padding:6px 10px;border:none;background:transparent;border-radius:3px;cursor:pointer;text-align:left;font-size:12px;transition:background .15s ease}.ol-basemap-switcher__item:hover{background:#0000000d}.ol-basemap-switcher__item--active{background:#1a73e81f;color:#1a73e8;font-weight:600}.ol-basemap-switcher__item--active:hover{background:#1a73e82e}.ol-basemap-switcher__icon{font-size:14px}.ol-basemap-switcher__name{font-weight:500;color:#333;font-size:12px}\n"]
|
|
598
|
+
`, isInline: true, styles: [":host{display:block}.ol-basemap-switcher{position:absolute;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;color:#333;z-index:10}.ol-basemap-switcher--top-left{top:.5em;left:.5em}.ol-basemap-switcher--top-center{top:.5em;left:50%;transform:translate(-50%)}.ol-basemap-switcher--top-right{top:.5em;right:.5em}.ol-basemap-switcher--bottom-left{bottom:.5em;left:.5em}.ol-basemap-switcher--bottom-center{bottom:.5em;left:50%;transform:translate(-50%)}.ol-basemap-switcher--bottom-right{bottom:.5em;right:.5em}.ol-basemap-switcher__toggle{display:flex;align-items:center;gap:6px;padding:4px 10px;background:#fffffff2;color:#333;border:none;border-radius:4px;box-shadow:0 1px 4px #0000004d;cursor:pointer;font-size:12px;font-weight:600;transition:background .15s ease;min-height:36px}.ol-basemap-switcher__toggle:hover{background:#fff}.ol-basemap-switcher__toggle-icon{font-size:14px;line-height:1}.ol-basemap-switcher__toggle-text{font-weight:600;font-size:12px}.ol-basemap-switcher__panel{position:absolute;bottom:calc(100% + 6px);left:0;background:#fffffff2;border:none;color:#333;border-radius:4px;box-shadow:0 1px 4px #0000004d;padding:4px;min-width:160px;display:flex;flex-direction:column;gap:2px}.ol-basemap-switcher--bottom-right .ol-basemap-switcher__panel,.ol-basemap-switcher--top-right .ol-basemap-switcher__panel{left:auto;right:0}.ol-basemap-switcher--top-left .ol-basemap-switcher__panel,.ol-basemap-switcher--top-center .ol-basemap-switcher__panel,.ol-basemap-switcher--top-right .ol-basemap-switcher__panel{bottom:auto;top:calc(100% + 6px)}.ol-basemap-switcher--top-center .ol-basemap-switcher__panel,.ol-basemap-switcher--bottom-center .ol-basemap-switcher__panel{left:50%;transform:translate(-50%)}.ol-basemap-switcher__item{display:flex;align-items:center;gap:8px;width:100%;padding:6px 10px;border:none;background:transparent;border-radius:3px;cursor:pointer;text-align:left;font-size:12px;transition:background .15s ease}.ol-basemap-switcher__item:hover{background:#0000000d}.ol-basemap-switcher__item--active{background:#1a73e81f;color:#1a73e8;font-weight:600}.ol-basemap-switcher__item--active:hover{background:#1a73e82e}.ol-basemap-switcher__icon{font-size:14px}.ol-basemap-switcher__name{font-weight:500;color:#333;font-size:12px}\n"] });
|
|
580
599
|
}
|
|
581
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
600
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: OlBasemapSwitcherComponent, decorators: [{
|
|
582
601
|
type: Component,
|
|
583
|
-
args: [{ selector: 'ol-basemap-switcher',
|
|
602
|
+
args: [{ selector: 'ol-basemap-switcher', template: `
|
|
584
603
|
<div
|
|
585
604
|
class="ol-basemap-switcher"
|
|
586
605
|
[class.ol-basemap-switcher--top-left]="position() === 'top-left'"
|
|
@@ -645,10 +664,12 @@ class OlGeolocationControlComponent {
|
|
|
645
664
|
mapService = inject(OlMapService);
|
|
646
665
|
zoneHelper = inject(OlZoneHelper);
|
|
647
666
|
destroyRef = inject(DestroyRef);
|
|
648
|
-
position = input('top-right',
|
|
667
|
+
position = input('top-right', /* @ts-ignore */
|
|
668
|
+
...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
|
|
649
669
|
trackingChange = output();
|
|
650
|
-
controlElement;
|
|
651
|
-
tracking = signal(false,
|
|
670
|
+
controlElement = viewChild.required('controlElement');
|
|
671
|
+
tracking = signal(false, /* @ts-ignore */
|
|
672
|
+
...(ngDevMode ? [{ debugName: "tracking" }] : /* istanbul ignore next */ []));
|
|
652
673
|
control;
|
|
653
674
|
geolocation;
|
|
654
675
|
positionFeature;
|
|
@@ -662,7 +683,7 @@ class OlGeolocationControlComponent {
|
|
|
662
683
|
this.zoneHelper.runOutsideAngular(() => {
|
|
663
684
|
// Create the Control
|
|
664
685
|
this.control = new Control({
|
|
665
|
-
element: this.controlElement.nativeElement,
|
|
686
|
+
element: this.controlElement().nativeElement,
|
|
666
687
|
});
|
|
667
688
|
map.addControl(this.control);
|
|
668
689
|
// Setup Geolocation
|
|
@@ -746,8 +767,8 @@ class OlGeolocationControlComponent {
|
|
|
746
767
|
});
|
|
747
768
|
}
|
|
748
769
|
}
|
|
749
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
750
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.
|
|
770
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: OlGeolocationControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
771
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.0", type: OlGeolocationControlComponent, isStandalone: true, selector: "ol-geolocation-control", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { trackingChange: "trackingChange" }, viewQueries: [{ propertyName: "controlElement", first: true, predicate: ["controlElement"], descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
751
772
|
<div
|
|
752
773
|
#controlElement
|
|
753
774
|
class="ol-geolocation-control ol-unselectable ol-control"
|
|
@@ -778,11 +799,11 @@ class OlGeolocationControlComponent {
|
|
|
778
799
|
</svg>
|
|
779
800
|
</button>
|
|
780
801
|
</div>
|
|
781
|
-
`, isInline: true, styles: [".ol-geolocation-control{position:absolute}.ol-geolocation-control.top-left{top:4.5em;left:.5em}.ol-geolocation-control.top-right{top:4.5em;right:.5em}.ol-geolocation-control.bottom-left{bottom:.5em;left:.5em}.ol-geolocation-control.bottom-right{bottom:.5em;right:.5em}button{display:flex;align-items:center;justify-content:center;width:1.375em;height:1.375em;padding:0;background-color:#fff6;border:none;cursor:pointer;border-radius:2px;color:#333;transition:all .2s}button:hover{background-color:#fffc}button.active{color:#3b82f6;background-color:#ffffffe6}.geolocation-icon{width:1em;height:1em}\n"]
|
|
802
|
+
`, isInline: true, styles: [".ol-geolocation-control{position:absolute}.ol-geolocation-control.top-left{top:4.5em;left:.5em}.ol-geolocation-control.top-right{top:4.5em;right:.5em}.ol-geolocation-control.bottom-left{bottom:.5em;left:.5em}.ol-geolocation-control.bottom-right{bottom:.5em;right:.5em}button{display:flex;align-items:center;justify-content:center;width:1.375em;height:1.375em;padding:0;background-color:#fff6;border:none;cursor:pointer;border-radius:2px;color:#333;transition:all .2s}button:hover{background-color:#fffc}button.active{color:#3b82f6;background-color:#ffffffe6}.geolocation-icon{width:1em;height:1em}\n"] });
|
|
782
803
|
}
|
|
783
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
804
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: OlGeolocationControlComponent, decorators: [{
|
|
784
805
|
type: Component,
|
|
785
|
-
args: [{ selector: 'ol-geolocation-control',
|
|
806
|
+
args: [{ selector: 'ol-geolocation-control', template: `
|
|
786
807
|
<div
|
|
787
808
|
#controlElement
|
|
788
809
|
class="ol-geolocation-control ol-unselectable ol-control"
|
|
@@ -814,19 +835,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
|
|
|
814
835
|
</button>
|
|
815
836
|
</div>
|
|
816
837
|
`, styles: [".ol-geolocation-control{position:absolute}.ol-geolocation-control.top-left{top:4.5em;left:.5em}.ol-geolocation-control.top-right{top:4.5em;right:.5em}.ol-geolocation-control.bottom-left{bottom:.5em;left:.5em}.ol-geolocation-control.bottom-right{bottom:.5em;right:.5em}button{display:flex;align-items:center;justify-content:center;width:1.375em;height:1.375em;padding:0;background-color:#fff6;border:none;cursor:pointer;border-radius:2px;color:#333;transition:all .2s}button:hover{background-color:#fffc}button.active{color:#3b82f6;background-color:#ffffffe6}.geolocation-icon{width:1em;height:1em}\n"] }]
|
|
817
|
-
}], ctorParameters: () => [], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], trackingChange: [{ type: i0.Output, args: ["trackingChange"] }], controlElement: [{
|
|
818
|
-
type: ViewChild,
|
|
819
|
-
args: ['controlElement']
|
|
820
|
-
}] } });
|
|
838
|
+
}], ctorParameters: () => [], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], trackingChange: [{ type: i0.Output, args: ["trackingChange"] }], controlElement: [{ type: i0.ViewChild, args: ['controlElement', { isSignal: true }] }] } });
|
|
821
839
|
|
|
822
840
|
// OlControlService
|
|
823
841
|
class OlControlService {
|
|
824
842
|
addCustomControl(element, position) { }
|
|
825
843
|
removeCustomControl(element) { }
|
|
826
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
827
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
844
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: OlControlService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
845
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: OlControlService });
|
|
828
846
|
}
|
|
829
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
847
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: OlControlService, decorators: [{
|
|
830
848
|
type: Injectable
|
|
831
849
|
}] });
|
|
832
850
|
|
|
@@ -876,25 +894,35 @@ function provideControls() {
|
|
|
876
894
|
class OlTimelineComponent {
|
|
877
895
|
timeService = inject(OlTimeService);
|
|
878
896
|
/** Start bounds of time-series (Epoch ms) */
|
|
879
|
-
startTime = input.required(
|
|
897
|
+
startTime = input.required(/* @ts-ignore */
|
|
898
|
+
...(ngDevMode ? [{ debugName: "startTime" }] : /* istanbul ignore next */ []));
|
|
880
899
|
/** End bounds of time-series (Epoch ms) */
|
|
881
|
-
endTime = input.required(
|
|
900
|
+
endTime = input.required(/* @ts-ignore */
|
|
901
|
+
...(ngDevMode ? [{ debugName: "endTime" }] : /* istanbul ignore next */ []));
|
|
882
902
|
/** Default speed multiplier (e.g. 1, 5, 10, 60, 3600) */
|
|
883
|
-
playSpeed = input(1,
|
|
903
|
+
playSpeed = input(1, /* @ts-ignore */
|
|
904
|
+
...(ngDevMode ? [{ debugName: "playSpeed" }] : /* istanbul ignore next */ []));
|
|
884
905
|
/** Loop playback when reaching endTime */
|
|
885
|
-
loop = input(false,
|
|
906
|
+
loop = input(false, /* @ts-ignore */
|
|
907
|
+
...(ngDevMode ? [{ debugName: "loop" }] : /* istanbul ignore next */ []));
|
|
886
908
|
/** Position overlay alignment */
|
|
887
|
-
position = input('bottom-center',
|
|
909
|
+
position = input('bottom-center', /* @ts-ignore */
|
|
910
|
+
...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
|
|
888
911
|
/** Custom label formatter */
|
|
889
|
-
formatLabel = input((t) => new Date(t).toLocaleString(),
|
|
912
|
+
formatLabel = input((t) => new Date(t).toLocaleString(), /* @ts-ignore */
|
|
913
|
+
...(ngDevMode ? [{ debugName: "formatLabel" }] : /* istanbul ignore next */ []));
|
|
890
914
|
/** Outputs */
|
|
891
915
|
timeChange = output();
|
|
892
916
|
playStateChange = output();
|
|
893
917
|
/** Computeds binding directly to OlTimeService */
|
|
894
|
-
currentTime = computed(() => this.timeService.currentTime(),
|
|
895
|
-
|
|
896
|
-
|
|
897
|
-
|
|
918
|
+
currentTime = computed(() => this.timeService.currentTime(), /* @ts-ignore */
|
|
919
|
+
...(ngDevMode ? [{ debugName: "currentTime" }] : /* istanbul ignore next */ []));
|
|
920
|
+
isPlaying = computed(() => this.timeService.isPlaying(), /* @ts-ignore */
|
|
921
|
+
...(ngDevMode ? [{ debugName: "isPlaying" }] : /* istanbul ignore next */ []));
|
|
922
|
+
speed = computed(() => this.timeService.speed(), /* @ts-ignore */
|
|
923
|
+
...(ngDevMode ? [{ debugName: "speed" }] : /* istanbul ignore next */ []));
|
|
924
|
+
formattedTime = computed(() => this.formatLabel()(this.currentTime()), /* @ts-ignore */
|
|
925
|
+
...(ngDevMode ? [{ debugName: "formattedTime" }] : /* istanbul ignore next */ []));
|
|
898
926
|
constructor() {
|
|
899
927
|
// Sync default configuration settings when the inputs initialize
|
|
900
928
|
effect(() => {
|
|
@@ -949,8 +977,8 @@ class OlTimelineComponent {
|
|
|
949
977
|
const value = Number(target.value);
|
|
950
978
|
this.timeService.setSpeed(value);
|
|
951
979
|
}
|
|
952
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
953
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
980
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: OlTimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
981
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: OlTimelineComponent, isStandalone: true, selector: "ol-timeline", inputs: { startTime: { classPropertyName: "startTime", publicName: "startTime", isSignal: true, isRequired: true, transformFunction: null }, endTime: { classPropertyName: "endTime", publicName: "endTime", isSignal: true, isRequired: true, transformFunction: null }, playSpeed: { classPropertyName: "playSpeed", publicName: "playSpeed", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, formatLabel: { classPropertyName: "formatLabel", publicName: "formatLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { timeChange: "timeChange", playStateChange: "playStateChange" }, ngImport: i0, template: `
|
|
954
982
|
<div
|
|
955
983
|
class="ol-timeline"
|
|
956
984
|
[class.ol-timeline--top-left]="position() === 'top-left'"
|
|
@@ -1014,11 +1042,11 @@ class OlTimelineComponent {
|
|
|
1014
1042
|
</select>
|
|
1015
1043
|
</div>
|
|
1016
1044
|
</div>
|
|
1017
|
-
`, isInline: true, styles: [":host{display:block}.ol-timeline{position:absolute;display:flex;align-items:center;gap:16px;padding:8px 16px;background:#1e1e1ebf;backdrop-filter:blur(12px) saturate(160%);-webkit-backdrop-filter:blur(12px) saturate(160%);border:1px solid rgba(255,255,255,.08);border-radius:24px;box-shadow:0 8px 32px #0000004d;color:#f3f3f3;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;z-index:10;width:calc(100% - 32px);max-width:600px;box-sizing:border-box}.ol-timeline--top-left{top:12px;left:12px}.ol-timeline--top-center{top:12px;left:50%;transform:translate(-50%)}.ol-timeline--top-right{top:12px;right:12px}.ol-timeline--bottom-left{bottom:12px;left:12px}.ol-timeline--bottom-center{bottom:24px;left:50%;transform:translate(-50%)}.ol-timeline--bottom-right{bottom:12px;right:12px}.ol-timeline__controls{display:flex;align-items:center;gap:12px;flex-shrink:0}.ol-timeline__btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;border-radius:50%;background:#ffffff1a;color:#fff;cursor:pointer;transition:background .15s ease,transform .15s ease}.ol-timeline__btn:hover{background:#fff3;transform:scale(1.05)}.ol-timeline__btn:active{transform:scale(.95)}.ol-timeline__time-display{font-variant-numeric:tabular-nums;font-weight:500;color:#e0e0e0;min-width:140px;text-align:center}.ol-timeline__slider-container{flex-grow:1;display:flex;align-items:center}.ol-timeline__slider{-webkit-appearance:none;width:100%;height:4px;border-radius:2px;background:#fff3;outline:none;cursor:pointer;transition:background .15s ease}.ol-timeline__slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:#1a73e8;box-shadow:0 1px 4px #0006;cursor:pointer;transition:background .15s ease,transform .15s ease}.ol-timeline__slider::-webkit-slider-thumb:hover{background:#2b84f0;transform:scale(1.15)}.ol-timeline__slider::-moz-range-thumb{width:14px;height:14px;border:none;border-radius:50%;background:#1a73e8;box-shadow:0 1px 4px #0006;cursor:pointer;transition:background .15s ease,transform .15s ease}.ol-timeline__slider::-moz-range-thumb:hover{background:#2b84f0;transform:scale(1.15)}.ol-timeline__settings{flex-shrink:0}.ol-timeline__speed-select{background:#ffffff1a;color:#fff;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:4px 8px;font-size:11px;font-weight:500;outline:none;cursor:pointer;transition:background .15s ease}.ol-timeline__speed-select:hover{background:#ffffff26}.ol-timeline__speed-select option{background:#1e1e1e;color:#fff}\n"]
|
|
1045
|
+
`, isInline: true, styles: [":host{display:block}.ol-timeline{position:absolute;display:flex;align-items:center;gap:16px;padding:8px 16px;background:#1e1e1ebf;backdrop-filter:blur(12px) saturate(160%);-webkit-backdrop-filter:blur(12px) saturate(160%);border:1px solid rgba(255,255,255,.08);border-radius:24px;box-shadow:0 8px 32px #0000004d;color:#f3f3f3;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;z-index:10;width:calc(100% - 32px);max-width:600px;box-sizing:border-box}.ol-timeline--top-left{top:12px;left:12px}.ol-timeline--top-center{top:12px;left:50%;transform:translate(-50%)}.ol-timeline--top-right{top:12px;right:12px}.ol-timeline--bottom-left{bottom:12px;left:12px}.ol-timeline--bottom-center{bottom:24px;left:50%;transform:translate(-50%)}.ol-timeline--bottom-right{bottom:12px;right:12px}.ol-timeline__controls{display:flex;align-items:center;gap:12px;flex-shrink:0}.ol-timeline__btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;border-radius:50%;background:#ffffff1a;color:#fff;cursor:pointer;transition:background .15s ease,transform .15s ease}.ol-timeline__btn:hover{background:#fff3;transform:scale(1.05)}.ol-timeline__btn:active{transform:scale(.95)}.ol-timeline__time-display{font-variant-numeric:tabular-nums;font-weight:500;color:#e0e0e0;min-width:140px;text-align:center}.ol-timeline__slider-container{flex-grow:1;display:flex;align-items:center}.ol-timeline__slider{-webkit-appearance:none;width:100%;height:4px;border-radius:2px;background:#fff3;outline:none;cursor:pointer;transition:background .15s ease}.ol-timeline__slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:#1a73e8;box-shadow:0 1px 4px #0006;cursor:pointer;transition:background .15s ease,transform .15s ease}.ol-timeline__slider::-webkit-slider-thumb:hover{background:#2b84f0;transform:scale(1.15)}.ol-timeline__slider::-moz-range-thumb{width:14px;height:14px;border:none;border-radius:50%;background:#1a73e8;box-shadow:0 1px 4px #0006;cursor:pointer;transition:background .15s ease,transform .15s ease}.ol-timeline__slider::-moz-range-thumb:hover{background:#2b84f0;transform:scale(1.15)}.ol-timeline__settings{flex-shrink:0}.ol-timeline__speed-select{background:#ffffff1a;color:#fff;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:4px 8px;font-size:11px;font-weight:500;outline:none;cursor:pointer;transition:background .15s ease}.ol-timeline__speed-select:hover{background:#ffffff26}.ol-timeline__speed-select option{background:#1e1e1e;color:#fff}\n"] });
|
|
1018
1046
|
}
|
|
1019
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1047
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: OlTimelineComponent, decorators: [{
|
|
1020
1048
|
type: Component,
|
|
1021
|
-
args: [{ selector: 'ol-timeline', imports: [],
|
|
1049
|
+
args: [{ selector: 'ol-timeline', imports: [], template: `
|
|
1022
1050
|
<div
|
|
1023
1051
|
class="ol-timeline"
|
|
1024
1052
|
[class.ol-timeline--top-left]="position() === 'top-left'"
|