@ethlete/core 1.10.1 → 2.0.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.
- package/esm2022/lib/directives/animatable/animatable.directive.mjs +3 -5
- package/esm2022/lib/directives/animated-lifecycle/animated-lifecycle.directive.mjs +4 -7
- package/esm2022/lib/directives/animated-lifecycle/index.mjs +2 -0
- package/esm2022/lib/directives/animated-overlay/animated-overlay.directive.mjs +181 -0
- package/esm2022/lib/directives/animated-overlay/public-api.mjs +2 -0
- package/esm2022/lib/directives/cursor-drag-scroll/cursor-drag-scroll.directive.mjs +7 -8
- package/esm2022/lib/directives/observe-scroll-state/observe-scroll-state.directive.mjs +4 -6
- package/esm2022/lib/directives/public-api.mjs +2 -1
- package/esm2022/lib/services/public-api.mjs +1 -2
- package/esm2022/lib/utils/destroy.utils.mjs +13 -0
- package/esm2022/lib/utils/public-api.mjs +2 -1
- package/esm2022/lib/utils/reactive-binding.util.mjs +5 -4
- package/fesm2022/ethlete-core.mjs +1224 -1063
- package/fesm2022/ethlete-core.mjs.map +1 -1
- package/lib/directives/animated-lifecycle/index.d.ts +1 -0
- package/lib/directives/animated-overlay/animated-overlay.directive.d.ts +62 -0
- package/lib/directives/animated-overlay/public-api.d.ts +1 -0
- package/lib/directives/public-api.d.ts +1 -0
- package/lib/services/public-api.d.ts +0 -1
- package/lib/utils/destroy.utils.d.ts +1 -0
- package/lib/utils/public-api.d.ts +1 -0
- package/package.json +2 -1
- package/esm2022/lib/services/destroy.service.mjs +0 -24
- package/lib/services/destroy.service.d.ts +0 -12
|
@@ -1,11 +1,14 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { inject, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, HostBinding, InjectionToken,
|
|
2
|
+
import { inject, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, HostBinding, InjectionToken, assertInInjectionContext, DestroyRef, ElementRef, isDevMode, Directive, Injector, ViewContainerRef, NgZone, Injectable, Inject, Optional, EventEmitter, Output, Pipe, QueryList } from '@angular/core';
|
|
3
3
|
import { DomSanitizer, Meta, Title } from '@angular/platform-browser';
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
4
|
+
import { Observable, combineLatest, Subject, startWith, map, takeUntil, distinctUntilChanged, BehaviorSubject, skip, take, tap, debounceTime, merge, fromEvent, filter, switchMap, pairwise, shareReplay } from 'rxjs';
|
|
5
|
+
import { coerceCssPixelValue, coerceElement, coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
|
|
6
|
+
import { supportsScrollBehavior } from '@angular/cdk/platform';
|
|
7
|
+
import { Overlay } from '@angular/cdk/overlay';
|
|
8
|
+
import { ComponentPortal } from '@angular/cdk/portal';
|
|
9
|
+
import { createPopper } from '@popperjs/core';
|
|
6
10
|
import { DOCUMENT } from '@angular/common';
|
|
7
11
|
import { Router, NavigationEnd } from '@angular/router';
|
|
8
|
-
import { supportsScrollBehavior } from '@angular/cdk/platform';
|
|
9
12
|
import { __decorate, __metadata } from 'tslib';
|
|
10
13
|
import * as i1 from '@angular/cdk/layout';
|
|
11
14
|
import { debounceTime as debounceTime$1 } from 'rxjs/operators';
|
|
@@ -85,938 +88,1318 @@ const Memo = (config = {}) => (_, __, descriptor) => {
|
|
|
85
88
|
return descriptor;
|
|
86
89
|
};
|
|
87
90
|
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
91
|
+
const nextFrame = (cb) => {
|
|
92
|
+
requestAnimationFrame(() => {
|
|
93
|
+
requestAnimationFrame(cb);
|
|
94
|
+
});
|
|
95
|
+
};
|
|
96
|
+
const fromNextFrame = () => {
|
|
97
|
+
return new Observable((observer) => {
|
|
98
|
+
nextFrame(() => {
|
|
99
|
+
observer.next();
|
|
100
|
+
observer.complete();
|
|
101
|
+
});
|
|
102
|
+
});
|
|
103
|
+
};
|
|
104
|
+
const forceReflow = (element = document.body) => {
|
|
105
|
+
return element.offsetHeight;
|
|
106
|
+
};
|
|
107
|
+
const createFlipAnimationGroup = (config) => {
|
|
108
|
+
const { elements, duration = 250, easing = 'cubic-bezier(0.4, 0, 0.2, 1)' } = config;
|
|
109
|
+
const flips = elements.map((el) => {
|
|
110
|
+
const element = 'element' in el ? el.element : el;
|
|
111
|
+
const originElement = 'originElement' in el ? el.originElement : undefined;
|
|
112
|
+
return createFlipAnimation({ element, originElement, duration, easing });
|
|
113
|
+
});
|
|
114
|
+
const onStart$ = combineLatest(flips.map((animation) => animation.onStart$));
|
|
115
|
+
const onFinish$ = combineLatest(flips.map((animation) => animation.onFinish$));
|
|
116
|
+
const onCancel$ = combineLatest(flips.map((animation) => animation.onCancel$));
|
|
117
|
+
const updateInit = () => {
|
|
118
|
+
flips.forEach((animation) => animation.updateInit());
|
|
119
|
+
};
|
|
120
|
+
const play = () => {
|
|
121
|
+
flips.forEach((animation) => animation.play());
|
|
122
|
+
};
|
|
123
|
+
const cancel = () => {
|
|
124
|
+
flips.forEach((animation) => animation.cancel());
|
|
125
|
+
};
|
|
126
|
+
return {
|
|
127
|
+
updateInit,
|
|
128
|
+
play,
|
|
129
|
+
cancel,
|
|
130
|
+
onStart$,
|
|
131
|
+
onFinish$,
|
|
132
|
+
onCancel$,
|
|
133
|
+
};
|
|
134
|
+
};
|
|
135
|
+
const createFlipAnimation = (config) => {
|
|
136
|
+
const { element: el, originElement = el, duration = 250, easing = 'cubic-bezier(0.4, 0, 0.2, 1)' } = config;
|
|
137
|
+
let initialRect = originElement.getBoundingClientRect();
|
|
138
|
+
let animation = null;
|
|
139
|
+
const onStart$ = new Subject();
|
|
140
|
+
const onFinish$ = new Subject();
|
|
141
|
+
const onCancel$ = new Subject();
|
|
142
|
+
const onAnimationFinish = () => {
|
|
143
|
+
cleanup();
|
|
144
|
+
onFinish$.next();
|
|
145
|
+
};
|
|
146
|
+
const onAnimationCancel = () => {
|
|
147
|
+
cleanup();
|
|
148
|
+
onCancel$.next();
|
|
149
|
+
};
|
|
150
|
+
const cleanup = () => {
|
|
151
|
+
if (!animation) {
|
|
152
|
+
return;
|
|
153
|
+
}
|
|
154
|
+
animation.removeEventListener('finish', onAnimationFinish);
|
|
155
|
+
animation.removeEventListener('cancel', onAnimationCancel);
|
|
156
|
+
};
|
|
157
|
+
const updateInit = () => {
|
|
158
|
+
initialRect = originElement.getBoundingClientRect();
|
|
159
|
+
};
|
|
160
|
+
const play = () => {
|
|
161
|
+
const lastRect = el.getBoundingClientRect();
|
|
162
|
+
const delta = {
|
|
163
|
+
x: initialRect.left - lastRect.left,
|
|
164
|
+
y: initialRect.top - lastRect.top,
|
|
165
|
+
scaleX: initialRect.width / lastRect.width,
|
|
166
|
+
scaleY: initialRect.height / lastRect.height,
|
|
167
|
+
};
|
|
168
|
+
animation = el.animate([
|
|
169
|
+
{
|
|
170
|
+
transformOrigin: 'top left',
|
|
171
|
+
transform: `
|
|
172
|
+
translate(${delta.x}px, ${delta.y}px)
|
|
173
|
+
scale(${delta.scaleX}, ${delta.scaleY})
|
|
174
|
+
`,
|
|
175
|
+
},
|
|
176
|
+
{
|
|
177
|
+
transformOrigin: 'top left',
|
|
178
|
+
transform: 'none',
|
|
179
|
+
},
|
|
180
|
+
], {
|
|
181
|
+
duration,
|
|
182
|
+
easing,
|
|
183
|
+
fill: 'both',
|
|
184
|
+
});
|
|
185
|
+
animation.addEventListener('finish', onAnimationFinish);
|
|
186
|
+
animation.addEventListener('cancel', onAnimationCancel);
|
|
187
|
+
onStart$.next();
|
|
188
|
+
};
|
|
189
|
+
const cancel = () => {
|
|
190
|
+
animation?.cancel();
|
|
191
|
+
cleanup();
|
|
192
|
+
};
|
|
193
|
+
return {
|
|
194
|
+
updateInit,
|
|
195
|
+
play,
|
|
196
|
+
cancel,
|
|
197
|
+
onStart$: onStart$.asObservable(),
|
|
198
|
+
onFinish$: onFinish$.asObservable(),
|
|
199
|
+
onCancel$: onCancel$.asObservable(),
|
|
200
|
+
};
|
|
201
|
+
};
|
|
202
|
+
|
|
203
|
+
const clamp = (value, min = 0, max = 100) => {
|
|
204
|
+
return Math.max(min, Math.min(max, value));
|
|
205
|
+
};
|
|
206
|
+
|
|
207
|
+
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
208
|
+
/* eslint-disable no-var */
|
|
209
|
+
/**
|
|
210
|
+
* Stolen from klona to avoid adding a dependency
|
|
211
|
+
* https://github.com/lukeed/klona
|
|
212
|
+
*
|
|
213
|
+
* MIT License
|
|
214
|
+
*
|
|
215
|
+
* Copyright (c) Luke Edwards <luke.edwards05@gmail.com> (lukeed.com)
|
|
216
|
+
*
|
|
217
|
+
* Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
|
218
|
+
*
|
|
219
|
+
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
|
220
|
+
*
|
|
221
|
+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
|
222
|
+
*/
|
|
223
|
+
const set = (obj, key, val) => {
|
|
224
|
+
if (typeof val.value === 'object')
|
|
225
|
+
val.value = clone(val.value);
|
|
226
|
+
if (!val.enumerable || val.get || val.set || !val.configurable || !val.writable || key === '__proto__') {
|
|
227
|
+
Object.defineProperty(obj, key, val);
|
|
92
228
|
}
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
this._observedElements = new Map();
|
|
229
|
+
else
|
|
230
|
+
obj[key] = val.value;
|
|
231
|
+
};
|
|
232
|
+
const clone = (original) => {
|
|
233
|
+
if (typeof original !== 'object')
|
|
234
|
+
return original;
|
|
235
|
+
var _og = original;
|
|
236
|
+
var i = 0, k, list, tmp, str = Object.prototype.toString.call(_og);
|
|
237
|
+
if (str === '[object Object]') {
|
|
238
|
+
tmp = Object.create(_og.__proto__ || null);
|
|
104
239
|
}
|
|
105
|
-
|
|
106
|
-
|
|
240
|
+
else if (str === '[object Array]') {
|
|
241
|
+
tmp = Array(_og.length);
|
|
107
242
|
}
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
const subscription = stream.subscribe(observer);
|
|
113
|
-
return () => {
|
|
114
|
-
subscription.unsubscribe();
|
|
115
|
-
this._unobserveElement(element);
|
|
116
|
-
};
|
|
243
|
+
else if (str === '[object Set]') {
|
|
244
|
+
tmp = new Set();
|
|
245
|
+
_og.forEach(function (val) {
|
|
246
|
+
tmp.add(clone(val));
|
|
117
247
|
});
|
|
118
248
|
}
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
this._observedElements.set(element, { observer: sub, stream, count: 1 });
|
|
125
|
-
}
|
|
126
|
-
else {
|
|
127
|
-
this._observedElements.get(element).count++;
|
|
128
|
-
}
|
|
129
|
-
return this._observedElements.get(element).stream;
|
|
249
|
+
else if (str === '[object Map]') {
|
|
250
|
+
tmp = new Map();
|
|
251
|
+
_og.forEach(function (val, key) {
|
|
252
|
+
tmp.set(clone(key), clone(val));
|
|
253
|
+
});
|
|
130
254
|
}
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
this._observedElements.get(element).count--;
|
|
134
|
-
if (!this._observedElements.get(element).count) {
|
|
135
|
-
this._cleanupObserver(element);
|
|
136
|
-
}
|
|
137
|
-
}
|
|
255
|
+
else if (str === '[object Date]') {
|
|
256
|
+
tmp = new Date(+_og);
|
|
138
257
|
}
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
const { observer, stream } = this._observedElements.get(element);
|
|
142
|
-
if (observer) {
|
|
143
|
-
observer.unsubscribe();
|
|
144
|
-
}
|
|
145
|
-
stream.complete();
|
|
146
|
-
this._observedElements.delete(element);
|
|
147
|
-
}
|
|
258
|
+
else if (str === '[object RegExp]') {
|
|
259
|
+
tmp = new RegExp(_og.source, _og.flags);
|
|
148
260
|
}
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
}
|
|
152
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: ClickObserverService, decorators: [{
|
|
153
|
-
type: Injectable,
|
|
154
|
-
args: [{ providedIn: 'root' }]
|
|
155
|
-
}], ctorParameters: function () { return [{ type: ClickObserverFactory }]; } });
|
|
156
|
-
|
|
157
|
-
/* eslint-disable @typescript-eslint/no-non-null-assertion */
|
|
158
|
-
class MutationObserverFactory {
|
|
159
|
-
create(callback) {
|
|
160
|
-
return typeof MutationObserver === 'undefined' ? null : new MutationObserver(callback);
|
|
261
|
+
else if (str === '[object DataView]') {
|
|
262
|
+
tmp = new _og.constructor(clone(_og.buffer));
|
|
161
263
|
}
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
}
|
|
165
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: MutationObserverFactory, decorators: [{
|
|
166
|
-
type: Injectable,
|
|
167
|
-
args: [{ providedIn: 'root' }]
|
|
168
|
-
}] });
|
|
169
|
-
class ContentObserverService {
|
|
170
|
-
constructor(_mutationObserverFactory) {
|
|
171
|
-
this._mutationObserverFactory = _mutationObserverFactory;
|
|
172
|
-
this._observedElements = new Map();
|
|
264
|
+
else if (str === '[object ArrayBuffer]') {
|
|
265
|
+
tmp = _og.slice(0);
|
|
173
266
|
}
|
|
174
|
-
|
|
175
|
-
|
|
267
|
+
else if (str.slice(-6) === 'Array]') {
|
|
268
|
+
// ArrayBuffer.isView(x)
|
|
269
|
+
// ~> `new` bcuz `Buffer.slice` => ref
|
|
270
|
+
tmp = new _og.constructor(_og);
|
|
176
271
|
}
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
const stream = this._observeElement(element);
|
|
181
|
-
const subscription = stream.subscribe(observer);
|
|
182
|
-
return () => {
|
|
183
|
-
subscription.unsubscribe();
|
|
184
|
-
this._unobserveElement(element);
|
|
185
|
-
};
|
|
186
|
-
});
|
|
187
|
-
}
|
|
188
|
-
_observeElement(element) {
|
|
189
|
-
if (!this._observedElements.has(element)) {
|
|
190
|
-
const stream = new Subject();
|
|
191
|
-
const observer = this._mutationObserverFactory.create((mutations) => stream.next(mutations));
|
|
192
|
-
if (observer) {
|
|
193
|
-
observer.observe(element, {
|
|
194
|
-
characterData: true,
|
|
195
|
-
childList: true,
|
|
196
|
-
subtree: true,
|
|
197
|
-
});
|
|
198
|
-
}
|
|
199
|
-
this._observedElements.set(element, { observer, stream, count: 1 });
|
|
200
|
-
}
|
|
201
|
-
else {
|
|
202
|
-
this._observedElements.get(element).count++;
|
|
203
|
-
}
|
|
204
|
-
return this._observedElements.get(element).stream;
|
|
205
|
-
}
|
|
206
|
-
_unobserveElement(element) {
|
|
207
|
-
if (this._observedElements.has(element)) {
|
|
208
|
-
this._observedElements.get(element).count--;
|
|
209
|
-
if (!this._observedElements.get(element).count) {
|
|
210
|
-
this._cleanupObserver(element);
|
|
211
|
-
}
|
|
272
|
+
if (tmp) {
|
|
273
|
+
for (list = Object.getOwnPropertySymbols(_og); i < list.length; i++) {
|
|
274
|
+
set(tmp, list[i], Object.getOwnPropertyDescriptor(_og, list[i]));
|
|
212
275
|
}
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
if (observer) {
|
|
218
|
-
observer.disconnect();
|
|
219
|
-
}
|
|
220
|
-
stream.complete();
|
|
221
|
-
this._observedElements.delete(element);
|
|
276
|
+
for (i = 0, list = Object.getOwnPropertyNames(_og); i < list.length; i++) {
|
|
277
|
+
if (Object.hasOwnProperty.call(tmp, (k = list[i])) && tmp[k] === _og[k])
|
|
278
|
+
continue;
|
|
279
|
+
set(tmp, k, Object.getOwnPropertyDescriptor(_og, k));
|
|
222
280
|
}
|
|
223
281
|
}
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
}
|
|
227
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: ContentObserverService, decorators: [{
|
|
228
|
-
type: Injectable,
|
|
229
|
-
args: [{ providedIn: 'root' }]
|
|
230
|
-
}], ctorParameters: function () { return [{ type: MutationObserverFactory }]; } });
|
|
282
|
+
return tmp || _og;
|
|
283
|
+
};
|
|
231
284
|
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
// TODO: Replace with Angular 16 `DestroyRef` feature when available.
|
|
236
|
-
class DestroyService {
|
|
237
|
-
constructor() {
|
|
238
|
-
this._destroy$ = new Subject();
|
|
239
|
-
this.destroy$ = this._destroy$.asObservable();
|
|
285
|
+
const hasCookie = (name) => {
|
|
286
|
+
if (typeof document === 'undefined') {
|
|
287
|
+
return false;
|
|
240
288
|
}
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
289
|
+
return document.cookie.split(';').some((c) => {
|
|
290
|
+
return c.trim().startsWith(name + '=');
|
|
291
|
+
});
|
|
292
|
+
};
|
|
293
|
+
const getCookie = (name) => {
|
|
294
|
+
if (typeof document === 'undefined') {
|
|
295
|
+
return null;
|
|
244
296
|
}
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
}
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
class FocusVisibleService {
|
|
253
|
-
get isFocusVisible() {
|
|
254
|
-
return this._hadKeyboardEvent;
|
|
297
|
+
// From https://stackoverflow.com/questions/10730362/get-cookie-by-name
|
|
298
|
+
return ('; ' + document.cookie).split(`; ${name}=`).pop()?.split(';')[0];
|
|
299
|
+
};
|
|
300
|
+
const setCookie = (name, data, expiresInDays = 30, domain = getDomain()) => {
|
|
301
|
+
if (typeof document === 'undefined') {
|
|
302
|
+
return;
|
|
255
303
|
}
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
304
|
+
const date = new Date();
|
|
305
|
+
date.setTime(date.getTime() + expiresInDays * 24 * 60 * 60 * 1000);
|
|
306
|
+
document.cookie = `${name}=${data}; path=/; expires=${date.toUTCString()}; domain=${domain}; SameSite=Lax;`;
|
|
307
|
+
};
|
|
308
|
+
const deleteCookie = (name, path, domain = getDomain()) => {
|
|
309
|
+
if (hasCookie(name)) {
|
|
310
|
+
document.cookie =
|
|
311
|
+
name +
|
|
312
|
+
'=' +
|
|
313
|
+
(path ? ';path=' + path : '') +
|
|
314
|
+
(domain ? ';domain=' + domain : '') +
|
|
315
|
+
';expires=Thu, 01 Jan 1970 00:00:01 GMT';
|
|
263
316
|
}
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
this._hadKeyboardEvent = true;
|
|
317
|
+
};
|
|
318
|
+
const getDomain = () => {
|
|
319
|
+
if (typeof navigator === 'undefined') {
|
|
320
|
+
return null;
|
|
269
321
|
}
|
|
270
|
-
|
|
271
|
-
|
|
322
|
+
const hostname = window.location.hostname;
|
|
323
|
+
if (hostname.includes('localhost')) {
|
|
324
|
+
return 'localhost';
|
|
272
325
|
}
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
}
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
providedIn: 'root',
|
|
280
|
-
}]
|
|
281
|
-
}], ctorParameters: function () { return []; } });
|
|
326
|
+
const splitHost = hostname.split('.');
|
|
327
|
+
if (splitHost.length > 2) {
|
|
328
|
+
return `${splitHost[splitHost.length - 2]}.${splitHost[splitHost.length - 1]}`;
|
|
329
|
+
}
|
|
330
|
+
return hostname;
|
|
331
|
+
};
|
|
282
332
|
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
333
|
+
const createDestroy = () => {
|
|
334
|
+
assertInInjectionContext(createDestroy);
|
|
335
|
+
const destroy$ = new Subject();
|
|
336
|
+
const ref = inject(DestroyRef);
|
|
337
|
+
ref.onDestroy(() => {
|
|
338
|
+
destroy$.next(true);
|
|
339
|
+
destroy$.complete();
|
|
340
|
+
});
|
|
341
|
+
return destroy$.asObservable();
|
|
342
|
+
};
|
|
343
|
+
|
|
344
|
+
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
345
|
+
/* eslint-disable no-var */
|
|
346
|
+
/**
|
|
347
|
+
* Stolen from dequal to avoid adding a dependency
|
|
348
|
+
* https://github.com/lukeed/dequal
|
|
349
|
+
*
|
|
350
|
+
* The MIT License (MIT)
|
|
351
|
+
*
|
|
352
|
+
* Copyright (c) Luke Edwards <luke.edwards05@gmail.com> (lukeed.com)
|
|
353
|
+
*
|
|
354
|
+
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
355
|
+
* of this software and associated documentation files (the "Software"), to deal
|
|
356
|
+
* in the Software without restriction, including without limitation the rights
|
|
357
|
+
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
358
|
+
* copies of the Software, and to permit persons to whom the Software is
|
|
359
|
+
* furnished to do so, subject to the following conditions:
|
|
360
|
+
*
|
|
361
|
+
* The above copyright notice and this permission notice shall be included in
|
|
362
|
+
* all copies or substantial portions of the Software.
|
|
363
|
+
*
|
|
364
|
+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
365
|
+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
366
|
+
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
367
|
+
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
368
|
+
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
369
|
+
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
|
370
|
+
* THE SOFTWARE.
|
|
371
|
+
*/
|
|
372
|
+
const has = Object.prototype.hasOwnProperty;
|
|
373
|
+
function find(iter, tar, key) {
|
|
374
|
+
for (key of iter.keys()) {
|
|
375
|
+
if (equal(key, tar))
|
|
376
|
+
return key;
|
|
287
377
|
}
|
|
288
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: ResizeObserverFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
289
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: ResizeObserverFactory, providedIn: 'root' }); }
|
|
290
378
|
}
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
const element = coerceElement(elementOrRef);
|
|
305
|
-
return new Observable((observer) => {
|
|
306
|
-
const stream = this._observeElement(element);
|
|
307
|
-
const subscription = stream.subscribe(observer);
|
|
308
|
-
return () => {
|
|
309
|
-
subscription.unsubscribe();
|
|
310
|
-
this._unobserveElement(element);
|
|
311
|
-
};
|
|
312
|
-
});
|
|
313
|
-
}
|
|
314
|
-
_observeElement(element) {
|
|
315
|
-
if (!this._observedElements.has(element)) {
|
|
316
|
-
const stream = new Subject();
|
|
317
|
-
const observer = this._mutationObserverFactory.create((resizes) => stream.next(resizes));
|
|
318
|
-
if (observer) {
|
|
319
|
-
observer.observe(element);
|
|
379
|
+
const equal = (foo, bar) => {
|
|
380
|
+
var ctor, len, tmp;
|
|
381
|
+
if (foo === bar)
|
|
382
|
+
return true;
|
|
383
|
+
if (foo && bar && (ctor = foo.constructor) === bar.constructor) {
|
|
384
|
+
if (ctor === Date)
|
|
385
|
+
return foo.getTime() === bar.getTime();
|
|
386
|
+
if (ctor === RegExp)
|
|
387
|
+
return foo.toString() === bar.toString();
|
|
388
|
+
if (ctor === Array) {
|
|
389
|
+
if ((len = foo.length) === bar.length) {
|
|
390
|
+
while (len-- && equal(foo[len], bar[len]))
|
|
391
|
+
;
|
|
320
392
|
}
|
|
321
|
-
|
|
322
|
-
}
|
|
323
|
-
else {
|
|
324
|
-
this._observedElements.get(element).count++;
|
|
393
|
+
return len === -1;
|
|
325
394
|
}
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
if (this._observedElements.has(element)) {
|
|
330
|
-
this._observedElements.get(element).count--;
|
|
331
|
-
if (!this._observedElements.get(element).count) {
|
|
332
|
-
this._cleanupObserver(element);
|
|
395
|
+
if (ctor === Set) {
|
|
396
|
+
if (foo.size !== bar.size) {
|
|
397
|
+
return false;
|
|
333
398
|
}
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
399
|
+
for (len of foo) {
|
|
400
|
+
tmp = len;
|
|
401
|
+
if (tmp && typeof tmp === 'object') {
|
|
402
|
+
tmp = find(bar, tmp);
|
|
403
|
+
if (!tmp)
|
|
404
|
+
return false;
|
|
405
|
+
}
|
|
406
|
+
if (!bar.has(tmp))
|
|
407
|
+
return false;
|
|
341
408
|
}
|
|
342
|
-
|
|
343
|
-
this._observedElements.delete(element);
|
|
409
|
+
return true;
|
|
344
410
|
}
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
}
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
}
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
411
|
+
if (ctor === Map) {
|
|
412
|
+
if (foo.size !== bar.size) {
|
|
413
|
+
return false;
|
|
414
|
+
}
|
|
415
|
+
for (len of foo) {
|
|
416
|
+
tmp = len[0];
|
|
417
|
+
if (tmp && typeof tmp === 'object') {
|
|
418
|
+
tmp = find(bar, tmp);
|
|
419
|
+
if (!tmp)
|
|
420
|
+
return false;
|
|
421
|
+
}
|
|
422
|
+
if (!equal(len[1], bar.get(tmp))) {
|
|
423
|
+
return false;
|
|
424
|
+
}
|
|
425
|
+
}
|
|
426
|
+
return true;
|
|
427
|
+
}
|
|
428
|
+
if (ctor === ArrayBuffer) {
|
|
429
|
+
foo = new Uint8Array(foo);
|
|
430
|
+
bar = new Uint8Array(bar);
|
|
431
|
+
}
|
|
432
|
+
else if (ctor === DataView) {
|
|
433
|
+
if ((len = foo.byteLength) === bar.byteLength) {
|
|
434
|
+
while (len-- && foo.getInt8(len) === bar.getInt8(len))
|
|
435
|
+
;
|
|
436
|
+
}
|
|
437
|
+
return len === -1;
|
|
438
|
+
}
|
|
439
|
+
if (ArrayBuffer.isView(foo)) {
|
|
440
|
+
if ((len = foo.byteLength) === bar.byteLength) {
|
|
441
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
442
|
+
//@ts-ignore
|
|
443
|
+
while (len-- && foo[len] === bar[len])
|
|
444
|
+
;
|
|
445
|
+
}
|
|
446
|
+
return len === -1;
|
|
447
|
+
}
|
|
448
|
+
if (!ctor || typeof foo === 'object') {
|
|
449
|
+
len = 0;
|
|
450
|
+
for (ctor in foo) {
|
|
451
|
+
if (has.call(foo, ctor) && ++len && !has.call(bar, ctor))
|
|
452
|
+
return false;
|
|
453
|
+
if (!(ctor in bar) || !equal(foo[ctor], bar[ctor]))
|
|
454
|
+
return false;
|
|
455
|
+
}
|
|
456
|
+
return Object.keys(bar).length === len;
|
|
457
|
+
}
|
|
458
|
+
}
|
|
459
|
+
return foo !== foo && bar !== bar;
|
|
369
460
|
};
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
const
|
|
373
|
-
|
|
374
|
-
const
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
const cancel = () => {
|
|
387
|
-
flips.forEach((animation) => animation.cancel());
|
|
388
|
-
};
|
|
389
|
-
return {
|
|
390
|
-
updateInit,
|
|
391
|
-
play,
|
|
392
|
-
cancel,
|
|
393
|
-
onStart$,
|
|
394
|
-
onFinish$,
|
|
395
|
-
onCancel$,
|
|
396
|
-
};
|
|
461
|
+
|
|
462
|
+
const createMediaQueryObservable = (query) => {
|
|
463
|
+
const mq = window.matchMedia(query);
|
|
464
|
+
const observable = new Observable((observer) => {
|
|
465
|
+
const eventHandler = (event) => {
|
|
466
|
+
observer.next(event);
|
|
467
|
+
};
|
|
468
|
+
mq.addEventListener('change', eventHandler);
|
|
469
|
+
return () => {
|
|
470
|
+
mq.removeEventListener('change', eventHandler);
|
|
471
|
+
};
|
|
472
|
+
}).pipe(startWith(mq), map(({ matches }) => ({
|
|
473
|
+
matches,
|
|
474
|
+
query,
|
|
475
|
+
})));
|
|
476
|
+
return observable;
|
|
397
477
|
};
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
const
|
|
404
|
-
const
|
|
405
|
-
const
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
478
|
+
|
|
479
|
+
const isAttributeRenderBinding = (value) => typeof value === 'boolean';
|
|
480
|
+
const isAttributeValueBinding = (value) => typeof value === 'object';
|
|
481
|
+
const createReactiveBindings = (...values) => {
|
|
482
|
+
assertInInjectionContext(createReactiveBindings);
|
|
483
|
+
const rootElementRef = inject(ElementRef);
|
|
484
|
+
const destroy$ = createDestroy();
|
|
485
|
+
const subscriptions = [];
|
|
486
|
+
const pushedAttributes = [];
|
|
487
|
+
const defaults = {};
|
|
488
|
+
const push = (value) => {
|
|
489
|
+
const { attribute, observable, elementRef } = value;
|
|
490
|
+
const elRef = elementRef || rootElementRef;
|
|
491
|
+
const attributes = Array.isArray(attribute) ? attribute : [attribute];
|
|
492
|
+
pushedAttributes.push(attributes);
|
|
493
|
+
for (const attribute of attributes) {
|
|
494
|
+
if (!defaults[attribute]) {
|
|
495
|
+
defaults[attribute] = elRef.nativeElement.getAttribute(attribute) || undefined;
|
|
496
|
+
}
|
|
416
497
|
}
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
498
|
+
const subscription = observable
|
|
499
|
+
.pipe(takeUntil(destroy$), distinctUntilChanged((a, b) => {
|
|
500
|
+
if (isAttributeRenderBinding(a) && isAttributeRenderBinding(b)) {
|
|
501
|
+
return a === b;
|
|
502
|
+
}
|
|
503
|
+
else if (isAttributeValueBinding(a) && isAttributeValueBinding(b)) {
|
|
504
|
+
return a.render === b.render && a.value === b.value;
|
|
505
|
+
}
|
|
506
|
+
return false;
|
|
507
|
+
}))
|
|
508
|
+
.subscribe((value) => {
|
|
509
|
+
const currentAttributes = pushedAttributes.find((s) => s.some((current) => attributes.includes(current))) || [];
|
|
510
|
+
for (const attribute of currentAttributes) {
|
|
511
|
+
const isSingleClassMutation = attribute.startsWith('class.');
|
|
512
|
+
const isMultipleClassMutation = attribute === 'class';
|
|
513
|
+
const render = isAttributeRenderBinding(value) ? value : value.render;
|
|
514
|
+
if (isSingleClassMutation) {
|
|
515
|
+
const className = attribute.replace('class.', '');
|
|
516
|
+
if (!className) {
|
|
517
|
+
continue;
|
|
518
|
+
}
|
|
519
|
+
if (!render) {
|
|
520
|
+
elRef.nativeElement.classList.remove(className);
|
|
521
|
+
}
|
|
522
|
+
else {
|
|
523
|
+
elRef.nativeElement.classList.add(className);
|
|
524
|
+
}
|
|
525
|
+
}
|
|
526
|
+
else if (isMultipleClassMutation) {
|
|
527
|
+
const classes = isAttributeRenderBinding(value) ? '' : `${value.value}`;
|
|
528
|
+
if (!classes) {
|
|
529
|
+
continue;
|
|
530
|
+
}
|
|
531
|
+
if (!render) {
|
|
532
|
+
elRef.nativeElement.classList.remove(...classes.split(' '));
|
|
533
|
+
}
|
|
534
|
+
else {
|
|
535
|
+
elRef.nativeElement.classList.add(...classes.split(' '));
|
|
536
|
+
}
|
|
537
|
+
}
|
|
538
|
+
else {
|
|
539
|
+
const attributeValue = isAttributeRenderBinding(value) ? true : `${value.value}`;
|
|
540
|
+
if (!attribute) {
|
|
541
|
+
continue;
|
|
542
|
+
}
|
|
543
|
+
if (!render) {
|
|
544
|
+
elRef.nativeElement.removeAttribute(attribute);
|
|
545
|
+
}
|
|
546
|
+
else {
|
|
547
|
+
elRef.nativeElement.setAttribute(attribute, `${attributeValue}`);
|
|
548
|
+
}
|
|
549
|
+
}
|
|
550
|
+
}
|
|
447
551
|
});
|
|
448
|
-
|
|
449
|
-
animation.addEventListener('cancel', onAnimationCancel);
|
|
450
|
-
onStart$.next();
|
|
552
|
+
subscriptions.push({ attributes, subscription });
|
|
451
553
|
};
|
|
452
|
-
const
|
|
453
|
-
|
|
454
|
-
|
|
554
|
+
const remove = (...attributes) => {
|
|
555
|
+
for (const attribute of attributes) {
|
|
556
|
+
const sub = subscriptions.find((s) => s.attributes.includes(attribute));
|
|
557
|
+
const attributeStack = pushedAttributes.find((a) => a.includes(attribute));
|
|
558
|
+
if (sub) {
|
|
559
|
+
sub.attributes = sub.attributes.filter((a) => a !== attribute);
|
|
560
|
+
attributeStack?.splice(attributeStack.indexOf(attribute), 1);
|
|
561
|
+
if (sub.attributes.length === 0) {
|
|
562
|
+
sub.subscription.unsubscribe();
|
|
563
|
+
subscriptions.splice(subscriptions.indexOf(sub), 1);
|
|
564
|
+
}
|
|
565
|
+
}
|
|
566
|
+
}
|
|
455
567
|
};
|
|
568
|
+
const reset = () => {
|
|
569
|
+
for (const attribute in defaults) {
|
|
570
|
+
if (defaults[attribute] === undefined) {
|
|
571
|
+
rootElementRef.nativeElement.removeAttribute(attribute);
|
|
572
|
+
}
|
|
573
|
+
else {
|
|
574
|
+
rootElementRef.nativeElement.setAttribute(attribute, defaults[attribute]);
|
|
575
|
+
}
|
|
576
|
+
}
|
|
577
|
+
};
|
|
578
|
+
for (const value of values) {
|
|
579
|
+
push(value);
|
|
580
|
+
}
|
|
456
581
|
return {
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
onStart$: onStart$.asObservable(),
|
|
461
|
-
onFinish$: onFinish$.asObservable(),
|
|
462
|
-
onCancel$: onCancel$.asObservable(),
|
|
582
|
+
push,
|
|
583
|
+
remove,
|
|
584
|
+
reset,
|
|
463
585
|
};
|
|
464
586
|
};
|
|
465
587
|
|
|
466
|
-
const clamp = (value, min = 0, max = 100) => {
|
|
467
|
-
return Math.max(min, Math.min(max, value));
|
|
468
|
-
};
|
|
469
|
-
|
|
470
588
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
if (!val.enumerable || val.get || val.set || !val.configurable || !val.writable || key === '__proto__') {
|
|
490
|
-
Object.defineProperty(obj, key, val);
|
|
589
|
+
class BehaviorSubjectWithSubscriberCount extends BehaviorSubject {
|
|
590
|
+
constructor() {
|
|
591
|
+
super(...arguments);
|
|
592
|
+
this._subscriberCount = 0;
|
|
593
|
+
}
|
|
594
|
+
get subscriberCount() {
|
|
595
|
+
return this._subscriberCount;
|
|
596
|
+
}
|
|
597
|
+
subscribe(observerOrNext) {
|
|
598
|
+
this._subscriberCount++;
|
|
599
|
+
const sub = super.subscribe(observerOrNext);
|
|
600
|
+
return {
|
|
601
|
+
...sub,
|
|
602
|
+
unsubscribe: () => {
|
|
603
|
+
sub.unsubscribe();
|
|
604
|
+
this._subscriberCount--;
|
|
605
|
+
},
|
|
606
|
+
};
|
|
491
607
|
}
|
|
492
|
-
|
|
493
|
-
|
|
608
|
+
unsubscribe() {
|
|
609
|
+
this._subscriberCount--;
|
|
610
|
+
return super.unsubscribe();
|
|
611
|
+
}
|
|
612
|
+
}
|
|
613
|
+
|
|
614
|
+
const elementCanScroll = (element) => {
|
|
615
|
+
const { scrollHeight, clientHeight, scrollWidth, clientWidth } = element;
|
|
616
|
+
return scrollHeight > clientHeight || scrollWidth > clientWidth;
|
|
494
617
|
};
|
|
495
|
-
const
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
if (str === '[object Object]') {
|
|
501
|
-
tmp = Object.create(_og.__proto__ || null);
|
|
618
|
+
const isElementVisible = (options) => {
|
|
619
|
+
let { container } = options;
|
|
620
|
+
const { element } = options;
|
|
621
|
+
if (!element || container === null) {
|
|
622
|
+
return null;
|
|
502
623
|
}
|
|
503
|
-
|
|
504
|
-
|
|
624
|
+
container ||= document.documentElement;
|
|
625
|
+
const canScroll = elementCanScroll(container);
|
|
626
|
+
if (!canScroll) {
|
|
627
|
+
return { inline: true, block: true };
|
|
505
628
|
}
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
629
|
+
const elementRect = element.getBoundingClientRect();
|
|
630
|
+
const containerRect = container.getBoundingClientRect();
|
|
631
|
+
const elementInlineStart = elementRect.left;
|
|
632
|
+
const elementBlockStart = elementRect.top;
|
|
633
|
+
const containerInlineStart = containerRect.left;
|
|
634
|
+
const containerBlockStart = containerRect.top;
|
|
635
|
+
const elementInlineEnd = elementInlineStart + elementRect.width;
|
|
636
|
+
const elementBlockEnd = elementBlockStart + elementRect.height;
|
|
637
|
+
const containerInlineEnd = containerInlineStart + containerRect.width;
|
|
638
|
+
const containerBlockEnd = containerBlockStart + containerRect.height;
|
|
639
|
+
const isElementInlineVisible = elementInlineStart >= containerInlineStart && elementInlineEnd <= containerInlineEnd;
|
|
640
|
+
const isElementBlockVisible = elementBlockStart >= containerBlockStart && elementBlockEnd <= containerBlockEnd;
|
|
641
|
+
return { inline: isElementInlineVisible, block: isElementBlockVisible };
|
|
642
|
+
};
|
|
643
|
+
const scrollToElement = (options) => {
|
|
644
|
+
let { container } = options;
|
|
645
|
+
const { element, direction, behavior = 'smooth', origin = 'nearest', scrollBlockMargin = 0, scrollInlineMargin = 0, } = options;
|
|
646
|
+
if (!element || container === null) {
|
|
647
|
+
return;
|
|
511
648
|
}
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
});
|
|
649
|
+
container ||= document.documentElement;
|
|
650
|
+
const canScroll = elementCanScroll(container);
|
|
651
|
+
if (!canScroll) {
|
|
652
|
+
return;
|
|
517
653
|
}
|
|
518
|
-
|
|
519
|
-
|
|
654
|
+
const elementRect = element.getBoundingClientRect();
|
|
655
|
+
const containerRect = container.getBoundingClientRect();
|
|
656
|
+
const elementInlineSize = elementRect.width;
|
|
657
|
+
const elementBlockSize = elementRect.height;
|
|
658
|
+
const containerInlineSize = containerRect.width;
|
|
659
|
+
const containerBlockSize = containerRect.height;
|
|
660
|
+
const elementInlineStart = elementRect.left;
|
|
661
|
+
const elementBlockStart = elementRect.top;
|
|
662
|
+
const containerInlineStart = containerRect.left;
|
|
663
|
+
const containerBlockStart = containerRect.top;
|
|
664
|
+
const elementInlineEnd = elementInlineStart + elementInlineSize;
|
|
665
|
+
const elementBlockEnd = elementBlockStart + elementBlockSize;
|
|
666
|
+
const containerInlineEnd = containerInlineStart + containerInlineSize;
|
|
667
|
+
const containerBlockEnd = containerBlockStart + containerBlockSize;
|
|
668
|
+
const elementInlineCenter = elementInlineStart + elementInlineSize / 2;
|
|
669
|
+
const elementBlockCenter = elementBlockStart + elementBlockSize / 2;
|
|
670
|
+
const containerInlineCenter = containerInlineStart + containerInlineSize / 2;
|
|
671
|
+
const containerBlockCenter = containerBlockStart + containerBlockSize / 2;
|
|
672
|
+
const elementInlineOrigin = origin === 'center' ? elementInlineCenter : origin === 'end' ? elementInlineEnd : elementInlineStart;
|
|
673
|
+
const elementBlockOrigin = origin === 'center' ? elementBlockCenter : origin === 'end' ? elementBlockEnd : elementBlockStart;
|
|
674
|
+
const containerInlineOrigin = origin === 'center' ? containerInlineCenter : origin === 'end' ? containerInlineEnd : containerInlineStart;
|
|
675
|
+
const containerBlockOrigin = origin === 'center' ? containerBlockCenter : origin === 'end' ? containerBlockEnd : containerBlockStart;
|
|
676
|
+
const inlineOffset = elementInlineOrigin - containerInlineOrigin - scrollInlineMargin;
|
|
677
|
+
const blockOffset = elementBlockOrigin - containerBlockOrigin - scrollBlockMargin;
|
|
678
|
+
let inlineScroll = direction === 'block' ? undefined : inlineOffset;
|
|
679
|
+
let blockScroll = direction === 'inline' ? undefined : blockOffset;
|
|
680
|
+
if (origin === 'nearest') {
|
|
681
|
+
const elVisible = isElementVisible({ element, container });
|
|
682
|
+
if (elVisible?.inline && elVisible?.block) {
|
|
683
|
+
return;
|
|
684
|
+
}
|
|
685
|
+
if (elVisible?.inline) {
|
|
686
|
+
inlineScroll = undefined;
|
|
687
|
+
}
|
|
688
|
+
if (elVisible?.block) {
|
|
689
|
+
blockScroll = undefined;
|
|
690
|
+
}
|
|
520
691
|
}
|
|
521
|
-
|
|
522
|
-
|
|
692
|
+
container.scrollTo({
|
|
693
|
+
left: inlineScroll,
|
|
694
|
+
top: blockScroll,
|
|
695
|
+
behavior,
|
|
696
|
+
});
|
|
697
|
+
};
|
|
698
|
+
|
|
699
|
+
const scrollBehaviorSupported = supportsScrollBehavior();
|
|
700
|
+
class SmartBlockScrollStrategy {
|
|
701
|
+
constructor(_viewportRuler, _routerState, document) {
|
|
702
|
+
this._viewportRuler = _viewportRuler;
|
|
703
|
+
this._routerState = _routerState;
|
|
704
|
+
this._previousHTMLStyles = { top: '', left: '' };
|
|
705
|
+
this._previousScrollPosition = { top: 0, left: 0 };
|
|
706
|
+
this._isEnabled = false;
|
|
707
|
+
this._urlSubscription = null;
|
|
708
|
+
this._didNavigate = false;
|
|
709
|
+
this._document = document;
|
|
523
710
|
}
|
|
524
|
-
|
|
525
|
-
|
|
711
|
+
attach() {
|
|
712
|
+
// noop
|
|
526
713
|
}
|
|
527
|
-
|
|
528
|
-
|
|
714
|
+
enable() {
|
|
715
|
+
if (this._canBeEnabled()) {
|
|
716
|
+
const root = this._document.documentElement;
|
|
717
|
+
this._previousScrollPosition = this._viewportRuler.getViewportScrollPosition();
|
|
718
|
+
this._didNavigate = false;
|
|
719
|
+
this._previousHTMLStyles.left = root.style.left || '';
|
|
720
|
+
this._previousHTMLStyles.top = root.style.top || '';
|
|
721
|
+
root.style.left = coerceCssPixelValue(-this._previousScrollPosition.left);
|
|
722
|
+
root.style.top = coerceCssPixelValue(-this._previousScrollPosition.top);
|
|
723
|
+
root.classList.add('cdk-global-scrollblock');
|
|
724
|
+
this._isEnabled = true;
|
|
725
|
+
this._urlSubscription = this._routerState.route$
|
|
726
|
+
.pipe(skip(1), take(1), tap(() => {
|
|
727
|
+
this._didNavigate = true;
|
|
728
|
+
}))
|
|
729
|
+
.subscribe();
|
|
730
|
+
}
|
|
529
731
|
}
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
732
|
+
disable() {
|
|
733
|
+
if (this._isEnabled) {
|
|
734
|
+
this._urlSubscription?.unsubscribe();
|
|
735
|
+
const html = this._document.documentElement;
|
|
736
|
+
const body = this._document.body;
|
|
737
|
+
const htmlStyle = html.style;
|
|
738
|
+
const bodyStyle = body.style;
|
|
739
|
+
const previousHtmlScrollBehavior = htmlStyle.scrollBehavior || '';
|
|
740
|
+
const previousBodyScrollBehavior = bodyStyle.scrollBehavior || '';
|
|
741
|
+
this._isEnabled = false;
|
|
742
|
+
htmlStyle.left = this._previousHTMLStyles.left;
|
|
743
|
+
htmlStyle.top = this._previousHTMLStyles.top;
|
|
744
|
+
html.classList.remove('cdk-global-scrollblock');
|
|
745
|
+
if (scrollBehaviorSupported) {
|
|
746
|
+
htmlStyle.scrollBehavior = bodyStyle.scrollBehavior = 'auto';
|
|
747
|
+
}
|
|
748
|
+
if (!this._didNavigate) {
|
|
749
|
+
window.scroll(this._previousScrollPosition.left, this._previousScrollPosition.top);
|
|
750
|
+
}
|
|
751
|
+
if (scrollBehaviorSupported) {
|
|
752
|
+
htmlStyle.scrollBehavior = previousHtmlScrollBehavior;
|
|
753
|
+
bodyStyle.scrollBehavior = previousBodyScrollBehavior;
|
|
754
|
+
}
|
|
755
|
+
}
|
|
534
756
|
}
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
757
|
+
_canBeEnabled() {
|
|
758
|
+
const html = this._document.documentElement;
|
|
759
|
+
if (html.classList.contains('cdk-global-scrollblock') || this._isEnabled) {
|
|
760
|
+
return false;
|
|
538
761
|
}
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
762
|
+
return true;
|
|
763
|
+
}
|
|
764
|
+
}
|
|
765
|
+
|
|
766
|
+
const provideViewportConfig = (viewportConfig) => {
|
|
767
|
+
return { provide: VIEWPORT_CONFIG, useValue: viewportConfig };
|
|
768
|
+
};
|
|
769
|
+
|
|
770
|
+
const ANIMATABLE_TOKEN = new InjectionToken('ANIMATABLE_DIRECTIVE_TOKEN');
|
|
771
|
+
class AnimatableDirective {
|
|
772
|
+
constructor() {
|
|
773
|
+
this._didEmitStart = false;
|
|
774
|
+
this._parent = inject(ANIMATABLE_TOKEN, { optional: true, skipSelf: true });
|
|
775
|
+
this._destroy$ = createDestroy();
|
|
776
|
+
this._elementRef = inject(ElementRef);
|
|
777
|
+
this._animationStart$ = new Subject();
|
|
778
|
+
this._animationEnd$ = new Subject();
|
|
779
|
+
this._animatedElement$ = new BehaviorSubject(this._elementRef.nativeElement);
|
|
780
|
+
this.animationStart$ = this._animationStart$.asObservable().pipe(debounceTime(0));
|
|
781
|
+
this.animationEnd$ = this._animationEnd$.asObservable().pipe(debounceTime(0));
|
|
782
|
+
this._hostActiveAnimationCount$ = new BehaviorSubject(0);
|
|
783
|
+
this._totalActiveAnimationCount$ = new BehaviorSubject(0);
|
|
784
|
+
this.isAnimating$ = this._totalActiveAnimationCount$.pipe(map((count) => count > 0), debounceTime(0));
|
|
785
|
+
}
|
|
786
|
+
set animatedElement(value) {
|
|
787
|
+
let newElement = null;
|
|
788
|
+
if (value === null || value === undefined) {
|
|
789
|
+
newElement = this._elementRef.nativeElement;
|
|
790
|
+
}
|
|
791
|
+
else if (typeof value === 'string') {
|
|
792
|
+
const el = document.querySelector(value);
|
|
793
|
+
if (el) {
|
|
794
|
+
newElement = el;
|
|
795
|
+
}
|
|
796
|
+
else {
|
|
797
|
+
if (isDevMode()) {
|
|
798
|
+
console.warn(`Element with selector ${value} not found. Animatable directive will use host element.`);
|
|
799
|
+
}
|
|
800
|
+
newElement = this._elementRef.nativeElement;
|
|
801
|
+
}
|
|
802
|
+
}
|
|
803
|
+
else {
|
|
804
|
+
newElement = value;
|
|
805
|
+
}
|
|
806
|
+
if (this._animatedElement$.value !== newElement) {
|
|
807
|
+
this._animatedElement$.next(newElement);
|
|
808
|
+
}
|
|
809
|
+
}
|
|
810
|
+
ngOnInit() {
|
|
811
|
+
this._animatedElement$
|
|
812
|
+
.pipe(tap((el) => {
|
|
813
|
+
this._totalActiveAnimationCount$.next(this._totalActiveAnimationCount$.value - this._hostActiveAnimationCount$.value);
|
|
814
|
+
this._hostActiveAnimationCount$.next(0);
|
|
815
|
+
merge(fromEvent(el, 'animationstart'), fromEvent(el, 'transitionstart'))
|
|
816
|
+
.pipe(filter((e) => e.target === el), // skip events from children
|
|
817
|
+
tap(() => {
|
|
818
|
+
const count = this._hostActiveAnimationCount$.value + 1;
|
|
819
|
+
this._hostActiveAnimationCount$.next(count);
|
|
820
|
+
this._totalActiveAnimationCount$.next(count);
|
|
821
|
+
}), takeUntil(this._destroy$), takeUntil(this._animatedElement$.pipe(skip(1))))
|
|
822
|
+
.subscribe();
|
|
823
|
+
merge(fromEvent(el, 'animationend'), fromEvent(el, 'animationcancel'), fromEvent(el, 'transitionend'), fromEvent(el, 'transitioncancel'))
|
|
824
|
+
.pipe(filter((e) => e.target === el), // skip events from children
|
|
825
|
+
tap(() => {
|
|
826
|
+
const count = this._hostActiveAnimationCount$.value - 1;
|
|
827
|
+
this._hostActiveAnimationCount$.next(count);
|
|
828
|
+
this._totalActiveAnimationCount$.next(count);
|
|
829
|
+
}), takeUntil(this._destroy$), takeUntil(this._animatedElement$.pipe(skip(1))))
|
|
830
|
+
.subscribe();
|
|
831
|
+
}), takeUntil(this._destroy$))
|
|
832
|
+
.subscribe();
|
|
833
|
+
this._totalActiveAnimationCount$
|
|
834
|
+
.pipe(tap((count) => {
|
|
835
|
+
if (count > 0 && !this._didEmitStart) {
|
|
836
|
+
this._animationStart$.next();
|
|
837
|
+
this._didEmitStart = true;
|
|
838
|
+
}
|
|
839
|
+
else if (count === 0) {
|
|
840
|
+
this._animationEnd$.next();
|
|
841
|
+
this._didEmitStart = false;
|
|
842
|
+
}
|
|
843
|
+
}), takeUntil(this._destroy$))
|
|
844
|
+
.subscribe();
|
|
845
|
+
if (this._parent) {
|
|
846
|
+
this._parent._hostActiveAnimationCount$
|
|
847
|
+
.pipe(takeUntil(this._destroy$), tap((count) => {
|
|
848
|
+
this._totalActiveAnimationCount$.next(count + this._hostActiveAnimationCount$.value);
|
|
849
|
+
}))
|
|
850
|
+
.subscribe();
|
|
543
851
|
}
|
|
544
852
|
}
|
|
545
|
-
|
|
546
|
-
}
|
|
853
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AnimatableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
854
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: AnimatableDirective, isStandalone: true, selector: "[etAnimatable]", inputs: { animatedElement: ["etAnimatable", "animatedElement"] }, providers: [
|
|
855
|
+
{
|
|
856
|
+
provide: ANIMATABLE_TOKEN,
|
|
857
|
+
useExisting: AnimatableDirective,
|
|
858
|
+
},
|
|
859
|
+
], exportAs: ["etAnimatable"], ngImport: i0 }); }
|
|
860
|
+
}
|
|
861
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AnimatableDirective, decorators: [{
|
|
862
|
+
type: Directive,
|
|
863
|
+
args: [{
|
|
864
|
+
selector: '[etAnimatable]',
|
|
865
|
+
exportAs: 'etAnimatable',
|
|
866
|
+
standalone: true,
|
|
867
|
+
providers: [
|
|
868
|
+
{
|
|
869
|
+
provide: ANIMATABLE_TOKEN,
|
|
870
|
+
useExisting: AnimatableDirective,
|
|
871
|
+
},
|
|
872
|
+
],
|
|
873
|
+
}]
|
|
874
|
+
}], propDecorators: { animatedElement: [{
|
|
875
|
+
type: Input,
|
|
876
|
+
args: ['etAnimatable']
|
|
877
|
+
}] } });
|
|
547
878
|
|
|
548
|
-
const
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
const getCookie = (name) => {
|
|
557
|
-
if (typeof document === 'undefined') {
|
|
558
|
-
return null;
|
|
559
|
-
}
|
|
560
|
-
// From https://stackoverflow.com/questions/10730362/get-cookie-by-name
|
|
561
|
-
return ('; ' + document.cookie).split(`; ${name}=`).pop()?.split(';')[0];
|
|
562
|
-
};
|
|
563
|
-
const setCookie = (name, data, expiresInDays = 30, domain = getDomain()) => {
|
|
564
|
-
if (typeof document === 'undefined') {
|
|
565
|
-
return;
|
|
566
|
-
}
|
|
567
|
-
const date = new Date();
|
|
568
|
-
date.setTime(date.getTime() + expiresInDays * 24 * 60 * 60 * 1000);
|
|
569
|
-
document.cookie = `${name}=${data}; path=/; expires=${date.toUTCString()}; domain=${domain}; SameSite=Lax;`;
|
|
570
|
-
};
|
|
571
|
-
const deleteCookie = (name, path, domain = getDomain()) => {
|
|
572
|
-
if (hasCookie(name)) {
|
|
573
|
-
document.cookie =
|
|
574
|
-
name +
|
|
575
|
-
'=' +
|
|
576
|
-
(path ? ';path=' + path : '') +
|
|
577
|
-
(domain ? ';domain=' + domain : '') +
|
|
578
|
-
';expires=Thu, 01 Jan 1970 00:00:01 GMT';
|
|
579
|
-
}
|
|
879
|
+
const ANIMATED_LIFECYCLE_TOKEN = new InjectionToken('ANIMATED_LIFECYCLE_DIRECTIVE_TOKEN');
|
|
880
|
+
const ANIMATION_CLASSES = {
|
|
881
|
+
enterFrom: 'et-animation-enter-from',
|
|
882
|
+
enterActive: 'et-animation-enter-active',
|
|
883
|
+
enterTo: 'et-animation-enter-to',
|
|
884
|
+
leaveFrom: 'et-animation-leave-from',
|
|
885
|
+
leaveActive: 'et-animation-leave-active',
|
|
886
|
+
leaveTo: 'et-animation-leave-to',
|
|
580
887
|
};
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
888
|
+
class AnimatedLifecycleDirective {
|
|
889
|
+
constructor() {
|
|
890
|
+
this._destroy$ = createDestroy();
|
|
891
|
+
this._elementRef = inject(ElementRef);
|
|
892
|
+
this._animatable = inject(ANIMATABLE_TOKEN);
|
|
893
|
+
this._classList = this._elementRef.nativeElement.classList;
|
|
894
|
+
this._state$ = new BehaviorSubject('init');
|
|
895
|
+
this.state$ = this._state$.asObservable();
|
|
896
|
+
this._bindings = createReactiveBindings({
|
|
897
|
+
attribute: 'class.et-force-invisible',
|
|
898
|
+
observable: this._state$.pipe(map((state) => state === 'init')),
|
|
899
|
+
});
|
|
592
900
|
}
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
597
|
-
/* eslint-disable no-var */
|
|
598
|
-
/**
|
|
599
|
-
* Stolen from dequal to avoid adding a dependency
|
|
600
|
-
* https://github.com/lukeed/dequal
|
|
601
|
-
*
|
|
602
|
-
* The MIT License (MIT)
|
|
603
|
-
*
|
|
604
|
-
* Copyright (c) Luke Edwards <luke.edwards05@gmail.com> (lukeed.com)
|
|
605
|
-
*
|
|
606
|
-
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
607
|
-
* of this software and associated documentation files (the "Software"), to deal
|
|
608
|
-
* in the Software without restriction, including without limitation the rights
|
|
609
|
-
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
610
|
-
* copies of the Software, and to permit persons to whom the Software is
|
|
611
|
-
* furnished to do so, subject to the following conditions:
|
|
612
|
-
*
|
|
613
|
-
* The above copyright notice and this permission notice shall be included in
|
|
614
|
-
* all copies or substantial portions of the Software.
|
|
615
|
-
*
|
|
616
|
-
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
617
|
-
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
618
|
-
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
619
|
-
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
620
|
-
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
621
|
-
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
|
622
|
-
* THE SOFTWARE.
|
|
623
|
-
*/
|
|
624
|
-
const has = Object.prototype.hasOwnProperty;
|
|
625
|
-
function find(iter, tar, key) {
|
|
626
|
-
for (key of iter.keys()) {
|
|
627
|
-
if (equal(key, tar))
|
|
628
|
-
return key;
|
|
901
|
+
get state() {
|
|
902
|
+
return this._state$.value;
|
|
629
903
|
}
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
if (foo === bar)
|
|
634
|
-
return true;
|
|
635
|
-
if (foo && bar && (ctor = foo.constructor) === bar.constructor) {
|
|
636
|
-
if (ctor === Date)
|
|
637
|
-
return foo.getTime() === bar.getTime();
|
|
638
|
-
if (ctor === RegExp)
|
|
639
|
-
return foo.toString() === bar.toString();
|
|
640
|
-
if (ctor === Array) {
|
|
641
|
-
if ((len = foo.length) === bar.length) {
|
|
642
|
-
while (len-- && equal(foo[len], bar[len]))
|
|
643
|
-
;
|
|
644
|
-
}
|
|
645
|
-
return len === -1;
|
|
904
|
+
enter(config) {
|
|
905
|
+
if (this.state !== 'init' && this.state !== 'left' && isDevMode()) {
|
|
906
|
+
console.warn('Tried to enter but the element is not in the initial state. This may result in unexpected behavior.', this);
|
|
646
907
|
}
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
908
|
+
this._state$.next('entering');
|
|
909
|
+
if (!config?.onlyTransition) {
|
|
910
|
+
this._classList.add(ANIMATION_CLASSES.enterFrom);
|
|
911
|
+
}
|
|
912
|
+
forceReflow();
|
|
913
|
+
this._classList.add(ANIMATION_CLASSES.enterActive);
|
|
914
|
+
fromNextFrame()
|
|
915
|
+
.pipe(tap(() => {
|
|
916
|
+
if (!config?.onlyTransition) {
|
|
917
|
+
this._classList.remove(ANIMATION_CLASSES.enterFrom);
|
|
918
|
+
this._classList.add(ANIMATION_CLASSES.enterTo);
|
|
650
919
|
}
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
return false;
|
|
657
|
-
}
|
|
658
|
-
if (!bar.has(tmp))
|
|
659
|
-
return false;
|
|
920
|
+
}), switchMap(() => this._animatable.animationEnd$), tap(() => {
|
|
921
|
+
this._state$.next('entered');
|
|
922
|
+
this._classList.remove(ANIMATION_CLASSES.enterActive);
|
|
923
|
+
if (!config?.onlyTransition) {
|
|
924
|
+
this._classList.remove(ANIMATION_CLASSES.enterTo);
|
|
660
925
|
}
|
|
661
|
-
|
|
926
|
+
}), takeUntil(this._destroy$), take(1))
|
|
927
|
+
.subscribe();
|
|
928
|
+
}
|
|
929
|
+
leave(config) {
|
|
930
|
+
if (this.state !== 'entered' && this.state !== 'entering' && isDevMode()) {
|
|
931
|
+
console.warn('Tried to leave while already leaving or left. This may result in unexpected behavior.', this);
|
|
662
932
|
}
|
|
663
|
-
if (
|
|
664
|
-
|
|
665
|
-
|
|
933
|
+
if (this._classList.contains(ANIMATION_CLASSES.enterFrom) ||
|
|
934
|
+
this._classList.contains(ANIMATION_CLASSES.enterActive) ||
|
|
935
|
+
this._classList.contains(ANIMATION_CLASSES.enterTo)) {
|
|
936
|
+
this._classList.remove(ANIMATION_CLASSES.enterFrom);
|
|
937
|
+
this._classList.remove(ANIMATION_CLASSES.enterActive);
|
|
938
|
+
this._classList.remove(ANIMATION_CLASSES.enterTo);
|
|
939
|
+
}
|
|
940
|
+
this._state$.next('leaving');
|
|
941
|
+
if (!config?.onlyTransition) {
|
|
942
|
+
this._classList.add(ANIMATION_CLASSES.leaveFrom);
|
|
943
|
+
}
|
|
944
|
+
forceReflow();
|
|
945
|
+
this._classList.add(ANIMATION_CLASSES.leaveActive);
|
|
946
|
+
fromNextFrame()
|
|
947
|
+
.pipe(tap(() => {
|
|
948
|
+
if (!config?.onlyTransition) {
|
|
949
|
+
this._classList.remove(ANIMATION_CLASSES.leaveFrom);
|
|
950
|
+
this._classList.add(ANIMATION_CLASSES.leaveTo);
|
|
666
951
|
}
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
|
|
952
|
+
}), switchMap(() => this._animatable.animationEnd$), tap(() => {
|
|
953
|
+
this._state$.next('left');
|
|
954
|
+
this._classList.remove(ANIMATION_CLASSES.leaveActive);
|
|
955
|
+
if (!config?.onlyTransition) {
|
|
956
|
+
this._classList.remove(ANIMATION_CLASSES.leaveTo);
|
|
957
|
+
}
|
|
958
|
+
}), takeUntil(this._destroy$), take(1))
|
|
959
|
+
.subscribe();
|
|
960
|
+
}
|
|
961
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AnimatedLifecycleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
962
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: AnimatedLifecycleDirective, isStandalone: true, selector: "[etAnimatedLifecycle]", providers: [
|
|
963
|
+
{
|
|
964
|
+
provide: ANIMATED_LIFECYCLE_TOKEN,
|
|
965
|
+
useExisting: AnimatedLifecycleDirective,
|
|
966
|
+
},
|
|
967
|
+
], exportAs: ["etAnimatedLifecycle"], hostDirectives: [{ directive: AnimatableDirective }], ngImport: i0 }); }
|
|
968
|
+
}
|
|
969
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AnimatedLifecycleDirective, decorators: [{
|
|
970
|
+
type: Directive,
|
|
971
|
+
args: [{
|
|
972
|
+
selector: '[etAnimatedLifecycle]',
|
|
973
|
+
exportAs: 'etAnimatedLifecycle',
|
|
974
|
+
standalone: true,
|
|
975
|
+
providers: [
|
|
976
|
+
{
|
|
977
|
+
provide: ANIMATED_LIFECYCLE_TOKEN,
|
|
978
|
+
useExisting: AnimatedLifecycleDirective,
|
|
979
|
+
},
|
|
980
|
+
],
|
|
981
|
+
hostDirectives: [AnimatableDirective],
|
|
982
|
+
}]
|
|
983
|
+
}] });
|
|
984
|
+
|
|
985
|
+
class AnimatedOverlayDirective {
|
|
986
|
+
constructor() {
|
|
987
|
+
this._destroy$ = createDestroy();
|
|
988
|
+
this._overlayService = inject(Overlay);
|
|
989
|
+
this._injector = inject(Injector);
|
|
990
|
+
this._viewContainerRef = inject(ViewContainerRef);
|
|
991
|
+
this._zone = inject(NgZone);
|
|
992
|
+
this._elementRef = inject(ElementRef);
|
|
993
|
+
this._portal = null;
|
|
994
|
+
this._overlayRef = null;
|
|
995
|
+
this._componentRef = null;
|
|
996
|
+
this._popper = null;
|
|
997
|
+
this._beforeOpened = null;
|
|
998
|
+
this._afterOpened = null;
|
|
999
|
+
this._beforeClosed = null;
|
|
1000
|
+
this._afterClosed = null;
|
|
1001
|
+
/**
|
|
1002
|
+
* The placement of the tooltip.
|
|
1003
|
+
* @default 'auto'
|
|
1004
|
+
*/
|
|
1005
|
+
this.placement = 'auto';
|
|
1006
|
+
/**
|
|
1007
|
+
* The offset of the tooltip.
|
|
1008
|
+
* @see https://popper.js.org/docs/v2/modifiers/offset/#offset-1
|
|
1009
|
+
*/
|
|
1010
|
+
this.offset = null;
|
|
1011
|
+
/**
|
|
1012
|
+
* The arrow padding.
|
|
1013
|
+
* @see https://popper.js.org/docs/v2/modifiers/arrow/#padding
|
|
1014
|
+
* @default 4
|
|
1015
|
+
*/
|
|
1016
|
+
this.arrowPadding = null;
|
|
1017
|
+
}
|
|
1018
|
+
get isMounted() {
|
|
1019
|
+
return !!this._componentRef;
|
|
1020
|
+
}
|
|
1021
|
+
get portal() {
|
|
1022
|
+
return this._portal;
|
|
1023
|
+
}
|
|
1024
|
+
get overlayRef() {
|
|
1025
|
+
return this._overlayRef;
|
|
1026
|
+
}
|
|
1027
|
+
get componentRef() {
|
|
1028
|
+
return this._componentRef;
|
|
1029
|
+
}
|
|
1030
|
+
get popper() {
|
|
1031
|
+
return this._popper;
|
|
1032
|
+
}
|
|
1033
|
+
mount(config) {
|
|
1034
|
+
const { component, providers, data } = config;
|
|
1035
|
+
this._beforeOpened?.next();
|
|
1036
|
+
const injector = Injector.create({
|
|
1037
|
+
parent: this._injector,
|
|
1038
|
+
providers: providers ?? [],
|
|
1039
|
+
});
|
|
1040
|
+
this._overlayRef = this._overlayService.create();
|
|
1041
|
+
this._portal = this._portal ?? new ComponentPortal(component, this._viewContainerRef, injector);
|
|
1042
|
+
this._componentRef = this._overlayRef.attach(this._portal);
|
|
1043
|
+
if (data) {
|
|
1044
|
+
Object.assign(this._componentRef.instance, data);
|
|
1045
|
+
}
|
|
1046
|
+
this._componentRef.instance._markForCheck?.();
|
|
1047
|
+
this._zone.runOutsideAngular(() => {
|
|
1048
|
+
if (!this._componentRef) {
|
|
1049
|
+
return;
|
|
677
1050
|
}
|
|
678
|
-
|
|
1051
|
+
this._popper = createPopper(this._elementRef.nativeElement, this._componentRef.location.nativeElement, {
|
|
1052
|
+
placement: this.placement,
|
|
1053
|
+
modifiers: [
|
|
1054
|
+
...(this.offset
|
|
1055
|
+
? [
|
|
1056
|
+
{
|
|
1057
|
+
name: 'offset',
|
|
1058
|
+
options: {
|
|
1059
|
+
offset: this.offset,
|
|
1060
|
+
},
|
|
1061
|
+
},
|
|
1062
|
+
]
|
|
1063
|
+
: []),
|
|
1064
|
+
...(this.arrowPadding
|
|
1065
|
+
? [
|
|
1066
|
+
{
|
|
1067
|
+
name: 'arrow',
|
|
1068
|
+
options: {
|
|
1069
|
+
padding: this.arrowPadding,
|
|
1070
|
+
},
|
|
1071
|
+
},
|
|
1072
|
+
]
|
|
1073
|
+
: []),
|
|
1074
|
+
],
|
|
1075
|
+
});
|
|
1076
|
+
// We need to wait for the tooltip content to be rendered
|
|
1077
|
+
nextFrame(() => {
|
|
1078
|
+
if (!this._componentRef) {
|
|
1079
|
+
return;
|
|
1080
|
+
}
|
|
1081
|
+
this._popper?.update();
|
|
1082
|
+
this._componentRef.instance._animatedLifecycle?.enter();
|
|
1083
|
+
this._componentRef.instance._animatedLifecycle?.state$
|
|
1084
|
+
.pipe(tap((s) => {
|
|
1085
|
+
if (s === 'entered') {
|
|
1086
|
+
this._afterOpened?.next();
|
|
1087
|
+
}
|
|
1088
|
+
}), take(1), takeUntil(this._destroy$))
|
|
1089
|
+
.subscribe();
|
|
1090
|
+
});
|
|
1091
|
+
});
|
|
1092
|
+
}
|
|
1093
|
+
unmount() {
|
|
1094
|
+
if (!this._componentRef) {
|
|
1095
|
+
return;
|
|
679
1096
|
}
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
1097
|
+
this._beforeClosed?.next();
|
|
1098
|
+
this._componentRef.instance._animatedLifecycle?.leave();
|
|
1099
|
+
this._componentRef.instance._animatedLifecycle?.state$
|
|
1100
|
+
.pipe(filter((s) => s === 'left'), take(1))
|
|
1101
|
+
.subscribe(() => this._destroy());
|
|
1102
|
+
}
|
|
1103
|
+
beforeOpened() {
|
|
1104
|
+
if (!this._beforeOpened) {
|
|
1105
|
+
this._beforeOpened = new Subject();
|
|
683
1106
|
}
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
return len === -1;
|
|
1107
|
+
return this._beforeOpened;
|
|
1108
|
+
}
|
|
1109
|
+
afterOpened() {
|
|
1110
|
+
if (!this._afterOpened) {
|
|
1111
|
+
this._afterOpened = new Subject();
|
|
690
1112
|
}
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
;
|
|
697
|
-
}
|
|
698
|
-
return len === -1;
|
|
1113
|
+
return this._afterOpened;
|
|
1114
|
+
}
|
|
1115
|
+
beforeClosed() {
|
|
1116
|
+
if (!this._beforeClosed) {
|
|
1117
|
+
this._beforeClosed = new Subject();
|
|
699
1118
|
}
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
if (!(ctor in bar) || !equal(foo[ctor], bar[ctor]))
|
|
706
|
-
return false;
|
|
707
|
-
}
|
|
708
|
-
return Object.keys(bar).length === len;
|
|
1119
|
+
return this._beforeClosed;
|
|
1120
|
+
}
|
|
1121
|
+
afterClosed() {
|
|
1122
|
+
if (!this._afterClosed) {
|
|
1123
|
+
this._afterClosed = new Subject();
|
|
709
1124
|
}
|
|
1125
|
+
return this._afterClosed;
|
|
710
1126
|
}
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
}
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
}
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
})
|
|
728
|
-
|
|
729
|
-
|
|
1127
|
+
_destroy() {
|
|
1128
|
+
this._zone.runOutsideAngular(() => {
|
|
1129
|
+
this._popper?.destroy();
|
|
1130
|
+
this._popper = null;
|
|
1131
|
+
});
|
|
1132
|
+
if (this._overlayRef) {
|
|
1133
|
+
this._overlayRef.dispose();
|
|
1134
|
+
this._overlayRef = null;
|
|
1135
|
+
}
|
|
1136
|
+
if (this._componentRef) {
|
|
1137
|
+
this._componentRef.destroy();
|
|
1138
|
+
this._componentRef = null;
|
|
1139
|
+
}
|
|
1140
|
+
this._afterClosed?.next();
|
|
1141
|
+
}
|
|
1142
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AnimatedOverlayDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1143
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: AnimatedOverlayDirective, isStandalone: true, inputs: { placement: "placement", offset: "offset", arrowPadding: "arrowPadding" }, ngImport: i0 }); }
|
|
1144
|
+
}
|
|
1145
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AnimatedOverlayDirective, decorators: [{
|
|
1146
|
+
type: Directive,
|
|
1147
|
+
args: [{
|
|
1148
|
+
standalone: true,
|
|
1149
|
+
}]
|
|
1150
|
+
}], propDecorators: { placement: [{
|
|
1151
|
+
type: Input
|
|
1152
|
+
}], offset: [{
|
|
1153
|
+
type: Input
|
|
1154
|
+
}], arrowPadding: [{
|
|
1155
|
+
type: Input
|
|
1156
|
+
}] } });
|
|
730
1157
|
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
1158
|
+
/* eslint-disable @typescript-eslint/no-non-null-assertion */
|
|
1159
|
+
class ClickObserverFactory {
|
|
1160
|
+
create() {
|
|
1161
|
+
return fromEvent(document, 'click');
|
|
1162
|
+
}
|
|
1163
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: ClickObserverFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1164
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: ClickObserverFactory, providedIn: 'root' }); }
|
|
1165
|
+
}
|
|
1166
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: ClickObserverFactory, decorators: [{
|
|
1167
|
+
type: Injectable,
|
|
1168
|
+
args: [{ providedIn: 'root' }]
|
|
1169
|
+
}] });
|
|
1170
|
+
class ClickObserverService {
|
|
1171
|
+
constructor(_clickObserverFactory) {
|
|
1172
|
+
this._clickObserverFactory = _clickObserverFactory;
|
|
1173
|
+
this._observedElements = new Map();
|
|
1174
|
+
}
|
|
1175
|
+
ngOnDestroy() {
|
|
1176
|
+
this._observedElements.forEach((_, element) => this._cleanupObserver(element));
|
|
1177
|
+
}
|
|
1178
|
+
observe(elementOrRef) {
|
|
1179
|
+
const element = coerceElement(elementOrRef);
|
|
1180
|
+
return new Observable((observer) => {
|
|
1181
|
+
const stream = this._observeElement(element);
|
|
1182
|
+
const subscription = stream.subscribe(observer);
|
|
1183
|
+
return () => {
|
|
1184
|
+
subscription.unsubscribe();
|
|
1185
|
+
this._unobserveElement(element);
|
|
1186
|
+
};
|
|
1187
|
+
});
|
|
1188
|
+
}
|
|
1189
|
+
_observeElement(element) {
|
|
1190
|
+
if (!this._observedElements.has(element)) {
|
|
1191
|
+
const stream = new Subject();
|
|
1192
|
+
const observer = this._clickObserverFactory.create();
|
|
1193
|
+
const sub = observer.subscribe((event) => stream.next(event));
|
|
1194
|
+
this._observedElements.set(element, { observer: sub, stream, count: 1 });
|
|
748
1195
|
}
|
|
749
|
-
|
|
750
|
-
.
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
|
|
1196
|
+
else {
|
|
1197
|
+
this._observedElements.get(element).count++;
|
|
1198
|
+
}
|
|
1199
|
+
return this._observedElements.get(element).stream;
|
|
1200
|
+
}
|
|
1201
|
+
_unobserveElement(element) {
|
|
1202
|
+
if (this._observedElements.has(element)) {
|
|
1203
|
+
this._observedElements.get(element).count--;
|
|
1204
|
+
if (!this._observedElements.get(element).count) {
|
|
1205
|
+
this._cleanupObserver(element);
|
|
756
1206
|
}
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
const render = isAttributeRenderBinding(value) ? value : value.render;
|
|
765
|
-
if (isSingleClassMutation) {
|
|
766
|
-
const className = attribute.replace('class.', '');
|
|
767
|
-
if (!className) {
|
|
768
|
-
continue;
|
|
769
|
-
}
|
|
770
|
-
if (!render) {
|
|
771
|
-
elRef.nativeElement.classList.remove(className);
|
|
772
|
-
}
|
|
773
|
-
else {
|
|
774
|
-
elRef.nativeElement.classList.add(className);
|
|
775
|
-
}
|
|
776
|
-
}
|
|
777
|
-
else if (isMultipleClassMutation) {
|
|
778
|
-
const classes = isAttributeRenderBinding(value) ? '' : `${value.value}`;
|
|
779
|
-
if (!classes) {
|
|
780
|
-
continue;
|
|
781
|
-
}
|
|
782
|
-
if (!render) {
|
|
783
|
-
elRef.nativeElement.classList.remove(...classes.split(' '));
|
|
784
|
-
}
|
|
785
|
-
else {
|
|
786
|
-
elRef.nativeElement.classList.add(...classes.split(' '));
|
|
787
|
-
}
|
|
788
|
-
}
|
|
789
|
-
else {
|
|
790
|
-
const attributeValue = isAttributeRenderBinding(value) ? true : `${value.value}`;
|
|
791
|
-
if (!attribute) {
|
|
792
|
-
continue;
|
|
793
|
-
}
|
|
794
|
-
if (!render) {
|
|
795
|
-
elRef.nativeElement.removeAttribute(attribute);
|
|
796
|
-
}
|
|
797
|
-
else {
|
|
798
|
-
elRef.nativeElement.setAttribute(attribute, `${attributeValue}`);
|
|
799
|
-
}
|
|
800
|
-
}
|
|
1207
|
+
}
|
|
1208
|
+
}
|
|
1209
|
+
_cleanupObserver(element) {
|
|
1210
|
+
if (this._observedElements.has(element)) {
|
|
1211
|
+
const { observer, stream } = this._observedElements.get(element);
|
|
1212
|
+
if (observer) {
|
|
1213
|
+
observer.unsubscribe();
|
|
801
1214
|
}
|
|
1215
|
+
stream.complete();
|
|
1216
|
+
this._observedElements.delete(element);
|
|
1217
|
+
}
|
|
1218
|
+
}
|
|
1219
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: ClickObserverService, deps: [{ token: ClickObserverFactory }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1220
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: ClickObserverService, providedIn: 'root' }); }
|
|
1221
|
+
}
|
|
1222
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: ClickObserverService, decorators: [{
|
|
1223
|
+
type: Injectable,
|
|
1224
|
+
args: [{ providedIn: 'root' }]
|
|
1225
|
+
}], ctorParameters: function () { return [{ type: ClickObserverFactory }]; } });
|
|
1226
|
+
|
|
1227
|
+
/* eslint-disable @typescript-eslint/no-non-null-assertion */
|
|
1228
|
+
class MutationObserverFactory {
|
|
1229
|
+
create(callback) {
|
|
1230
|
+
return typeof MutationObserver === 'undefined' ? null : new MutationObserver(callback);
|
|
1231
|
+
}
|
|
1232
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: MutationObserverFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1233
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: MutationObserverFactory, providedIn: 'root' }); }
|
|
1234
|
+
}
|
|
1235
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: MutationObserverFactory, decorators: [{
|
|
1236
|
+
type: Injectable,
|
|
1237
|
+
args: [{ providedIn: 'root' }]
|
|
1238
|
+
}] });
|
|
1239
|
+
class ContentObserverService {
|
|
1240
|
+
constructor(_mutationObserverFactory) {
|
|
1241
|
+
this._mutationObserverFactory = _mutationObserverFactory;
|
|
1242
|
+
this._observedElements = new Map();
|
|
1243
|
+
}
|
|
1244
|
+
ngOnDestroy() {
|
|
1245
|
+
this._observedElements.forEach((_, element) => this._cleanupObserver(element));
|
|
1246
|
+
}
|
|
1247
|
+
observe(elementOrRef) {
|
|
1248
|
+
const element = coerceElement(elementOrRef);
|
|
1249
|
+
return new Observable((observer) => {
|
|
1250
|
+
const stream = this._observeElement(element);
|
|
1251
|
+
const subscription = stream.subscribe(observer);
|
|
1252
|
+
return () => {
|
|
1253
|
+
subscription.unsubscribe();
|
|
1254
|
+
this._unobserveElement(element);
|
|
1255
|
+
};
|
|
802
1256
|
});
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
const
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
subscriptions.splice(subscriptions.indexOf(sub), 1);
|
|
815
|
-
}
|
|
1257
|
+
}
|
|
1258
|
+
_observeElement(element) {
|
|
1259
|
+
if (!this._observedElements.has(element)) {
|
|
1260
|
+
const stream = new Subject();
|
|
1261
|
+
const observer = this._mutationObserverFactory.create((mutations) => stream.next(mutations));
|
|
1262
|
+
if (observer) {
|
|
1263
|
+
observer.observe(element, {
|
|
1264
|
+
characterData: true,
|
|
1265
|
+
childList: true,
|
|
1266
|
+
subtree: true,
|
|
1267
|
+
});
|
|
816
1268
|
}
|
|
1269
|
+
this._observedElements.set(element, { observer, stream, count: 1 });
|
|
817
1270
|
}
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
for (const attribute in defaults) {
|
|
821
|
-
if (defaults[attribute] === undefined) {
|
|
822
|
-
rootElementRef.nativeElement.removeAttribute(attribute);
|
|
823
|
-
}
|
|
824
|
-
else {
|
|
825
|
-
rootElementRef.nativeElement.setAttribute(attribute, defaults[attribute]);
|
|
826
|
-
}
|
|
1271
|
+
else {
|
|
1272
|
+
this._observedElements.get(element).count++;
|
|
827
1273
|
}
|
|
828
|
-
|
|
829
|
-
for (const value of values) {
|
|
830
|
-
push(value);
|
|
831
|
-
}
|
|
832
|
-
return {
|
|
833
|
-
push,
|
|
834
|
-
remove,
|
|
835
|
-
reset,
|
|
836
|
-
};
|
|
837
|
-
};
|
|
838
|
-
|
|
839
|
-
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
840
|
-
class BehaviorSubjectWithSubscriberCount extends BehaviorSubject {
|
|
841
|
-
constructor() {
|
|
842
|
-
super(...arguments);
|
|
843
|
-
this._subscriberCount = 0;
|
|
844
|
-
}
|
|
845
|
-
get subscriberCount() {
|
|
846
|
-
return this._subscriberCount;
|
|
1274
|
+
return this._observedElements.get(element).stream;
|
|
847
1275
|
}
|
|
848
|
-
|
|
849
|
-
this.
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
this._subscriberCount--;
|
|
856
|
-
},
|
|
857
|
-
};
|
|
1276
|
+
_unobserveElement(element) {
|
|
1277
|
+
if (this._observedElements.has(element)) {
|
|
1278
|
+
this._observedElements.get(element).count--;
|
|
1279
|
+
if (!this._observedElements.get(element).count) {
|
|
1280
|
+
this._cleanupObserver(element);
|
|
1281
|
+
}
|
|
1282
|
+
}
|
|
858
1283
|
}
|
|
859
|
-
|
|
860
|
-
this.
|
|
861
|
-
|
|
1284
|
+
_cleanupObserver(element) {
|
|
1285
|
+
if (this._observedElements.has(element)) {
|
|
1286
|
+
const { observer, stream } = this._observedElements.get(element);
|
|
1287
|
+
if (observer) {
|
|
1288
|
+
observer.disconnect();
|
|
1289
|
+
}
|
|
1290
|
+
stream.complete();
|
|
1291
|
+
this._observedElements.delete(element);
|
|
1292
|
+
}
|
|
862
1293
|
}
|
|
1294
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: ContentObserverService, deps: [{ token: MutationObserverFactory }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1295
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: ContentObserverService, providedIn: 'root' }); }
|
|
863
1296
|
}
|
|
1297
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: ContentObserverService, decorators: [{
|
|
1298
|
+
type: Injectable,
|
|
1299
|
+
args: [{ providedIn: 'root' }]
|
|
1300
|
+
}], ctorParameters: function () { return [{ type: MutationObserverFactory }]; } });
|
|
864
1301
|
|
|
865
|
-
|
|
866
|
-
|
|
867
|
-
|
|
868
|
-
};
|
|
869
|
-
const isElementVisible = (options) => {
|
|
870
|
-
let { container } = options;
|
|
871
|
-
const { element } = options;
|
|
872
|
-
if (!element || container === null) {
|
|
873
|
-
return null;
|
|
874
|
-
}
|
|
875
|
-
container ||= document.documentElement;
|
|
876
|
-
const canScroll = elementCanScroll(container);
|
|
877
|
-
if (!canScroll) {
|
|
878
|
-
return { inline: true, block: true };
|
|
879
|
-
}
|
|
880
|
-
const elementRect = element.getBoundingClientRect();
|
|
881
|
-
const containerRect = container.getBoundingClientRect();
|
|
882
|
-
const elementInlineStart = elementRect.left;
|
|
883
|
-
const elementBlockStart = elementRect.top;
|
|
884
|
-
const containerInlineStart = containerRect.left;
|
|
885
|
-
const containerBlockStart = containerRect.top;
|
|
886
|
-
const elementInlineEnd = elementInlineStart + elementRect.width;
|
|
887
|
-
const elementBlockEnd = elementBlockStart + elementRect.height;
|
|
888
|
-
const containerInlineEnd = containerInlineStart + containerRect.width;
|
|
889
|
-
const containerBlockEnd = containerBlockStart + containerRect.height;
|
|
890
|
-
const isElementInlineVisible = elementInlineStart >= containerInlineStart && elementInlineEnd <= containerInlineEnd;
|
|
891
|
-
const isElementBlockVisible = elementBlockStart >= containerBlockStart && elementBlockEnd <= containerBlockEnd;
|
|
892
|
-
return { inline: isElementInlineVisible, block: isElementBlockVisible };
|
|
893
|
-
};
|
|
894
|
-
const scrollToElement = (options) => {
|
|
895
|
-
let { container } = options;
|
|
896
|
-
const { element, direction, behavior = 'smooth', origin = 'nearest', scrollBlockMargin = 0, scrollInlineMargin = 0, } = options;
|
|
897
|
-
if (!element || container === null) {
|
|
898
|
-
return;
|
|
1302
|
+
class FocusVisibleService {
|
|
1303
|
+
get isFocusVisible() {
|
|
1304
|
+
return this._hadKeyboardEvent;
|
|
899
1305
|
}
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
1306
|
+
constructor() {
|
|
1307
|
+
this._document = inject(DOCUMENT);
|
|
1308
|
+
this._hadKeyboardEvent = false;
|
|
1309
|
+
this._document.addEventListener('keydown', this.onKeyDown.bind(this), true);
|
|
1310
|
+
this._document.addEventListener('mousedown', this.onPointerDown.bind(this), true);
|
|
1311
|
+
this._document.addEventListener('pointerdown', this.onPointerDown.bind(this), true);
|
|
1312
|
+
this._document.addEventListener('touchstart', this.onPointerDown.bind(this), true);
|
|
904
1313
|
}
|
|
905
|
-
|
|
906
|
-
|
|
907
|
-
const elementInlineSize = elementRect.width;
|
|
908
|
-
const elementBlockSize = elementRect.height;
|
|
909
|
-
const containerInlineSize = containerRect.width;
|
|
910
|
-
const containerBlockSize = containerRect.height;
|
|
911
|
-
const elementInlineStart = elementRect.left;
|
|
912
|
-
const elementBlockStart = elementRect.top;
|
|
913
|
-
const containerInlineStart = containerRect.left;
|
|
914
|
-
const containerBlockStart = containerRect.top;
|
|
915
|
-
const elementInlineEnd = elementInlineStart + elementInlineSize;
|
|
916
|
-
const elementBlockEnd = elementBlockStart + elementBlockSize;
|
|
917
|
-
const containerInlineEnd = containerInlineStart + containerInlineSize;
|
|
918
|
-
const containerBlockEnd = containerBlockStart + containerBlockSize;
|
|
919
|
-
const elementInlineCenter = elementInlineStart + elementInlineSize / 2;
|
|
920
|
-
const elementBlockCenter = elementBlockStart + elementBlockSize / 2;
|
|
921
|
-
const containerInlineCenter = containerInlineStart + containerInlineSize / 2;
|
|
922
|
-
const containerBlockCenter = containerBlockStart + containerBlockSize / 2;
|
|
923
|
-
const elementInlineOrigin = origin === 'center' ? elementInlineCenter : origin === 'end' ? elementInlineEnd : elementInlineStart;
|
|
924
|
-
const elementBlockOrigin = origin === 'center' ? elementBlockCenter : origin === 'end' ? elementBlockEnd : elementBlockStart;
|
|
925
|
-
const containerInlineOrigin = origin === 'center' ? containerInlineCenter : origin === 'end' ? containerInlineEnd : containerInlineStart;
|
|
926
|
-
const containerBlockOrigin = origin === 'center' ? containerBlockCenter : origin === 'end' ? containerBlockEnd : containerBlockStart;
|
|
927
|
-
const inlineOffset = elementInlineOrigin - containerInlineOrigin - scrollInlineMargin;
|
|
928
|
-
const blockOffset = elementBlockOrigin - containerBlockOrigin - scrollBlockMargin;
|
|
929
|
-
let inlineScroll = direction === 'block' ? undefined : inlineOffset;
|
|
930
|
-
let blockScroll = direction === 'inline' ? undefined : blockOffset;
|
|
931
|
-
if (origin === 'nearest') {
|
|
932
|
-
const elVisible = isElementVisible({ element, container });
|
|
933
|
-
if (elVisible?.inline && elVisible?.block) {
|
|
1314
|
+
onKeyDown(e) {
|
|
1315
|
+
if (e.metaKey || e.altKey || e.ctrlKey) {
|
|
934
1316
|
return;
|
|
935
1317
|
}
|
|
936
|
-
|
|
937
|
-
inlineScroll = undefined;
|
|
938
|
-
}
|
|
939
|
-
if (elVisible?.block) {
|
|
940
|
-
blockScroll = undefined;
|
|
941
|
-
}
|
|
1318
|
+
this._hadKeyboardEvent = true;
|
|
942
1319
|
}
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
|
|
947
|
-
});
|
|
948
|
-
}
|
|
1320
|
+
onPointerDown() {
|
|
1321
|
+
this._hadKeyboardEvent = false;
|
|
1322
|
+
}
|
|
1323
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: FocusVisibleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1324
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: FocusVisibleService, providedIn: 'root' }); }
|
|
1325
|
+
}
|
|
1326
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: FocusVisibleService, decorators: [{
|
|
1327
|
+
type: Injectable,
|
|
1328
|
+
args: [{
|
|
1329
|
+
providedIn: 'root',
|
|
1330
|
+
}]
|
|
1331
|
+
}], ctorParameters: function () { return []; } });
|
|
949
1332
|
|
|
950
|
-
|
|
951
|
-
class
|
|
952
|
-
|
|
953
|
-
|
|
954
|
-
this._routerState = _routerState;
|
|
955
|
-
this._previousHTMLStyles = { top: '', left: '' };
|
|
956
|
-
this._previousScrollPosition = { top: 0, left: 0 };
|
|
957
|
-
this._isEnabled = false;
|
|
958
|
-
this._urlSubscription = null;
|
|
959
|
-
this._didNavigate = false;
|
|
960
|
-
this._document = document;
|
|
1333
|
+
/* eslint-disable @typescript-eslint/no-non-null-assertion */
|
|
1334
|
+
class ResizeObserverFactory {
|
|
1335
|
+
create(callback) {
|
|
1336
|
+
return typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(callback);
|
|
961
1337
|
}
|
|
962
|
-
|
|
963
|
-
|
|
1338
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: ResizeObserverFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1339
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: ResizeObserverFactory, providedIn: 'root' }); }
|
|
1340
|
+
}
|
|
1341
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: ResizeObserverFactory, decorators: [{
|
|
1342
|
+
type: Injectable,
|
|
1343
|
+
args: [{ providedIn: 'root' }]
|
|
1344
|
+
}] });
|
|
1345
|
+
class ResizeObserverService {
|
|
1346
|
+
constructor(_mutationObserverFactory) {
|
|
1347
|
+
this._mutationObserverFactory = _mutationObserverFactory;
|
|
1348
|
+
this._observedElements = new Map();
|
|
964
1349
|
}
|
|
965
|
-
|
|
966
|
-
|
|
967
|
-
const root = this._document.documentElement;
|
|
968
|
-
this._previousScrollPosition = this._viewportRuler.getViewportScrollPosition();
|
|
969
|
-
this._didNavigate = false;
|
|
970
|
-
this._previousHTMLStyles.left = root.style.left || '';
|
|
971
|
-
this._previousHTMLStyles.top = root.style.top || '';
|
|
972
|
-
root.style.left = coerceCssPixelValue(-this._previousScrollPosition.left);
|
|
973
|
-
root.style.top = coerceCssPixelValue(-this._previousScrollPosition.top);
|
|
974
|
-
root.classList.add('cdk-global-scrollblock');
|
|
975
|
-
this._isEnabled = true;
|
|
976
|
-
this._urlSubscription = this._routerState.route$
|
|
977
|
-
.pipe(skip(1), take(1), tap(() => {
|
|
978
|
-
this._didNavigate = true;
|
|
979
|
-
}))
|
|
980
|
-
.subscribe();
|
|
981
|
-
}
|
|
1350
|
+
ngOnDestroy() {
|
|
1351
|
+
this._observedElements.forEach((_, element) => this._cleanupObserver(element));
|
|
982
1352
|
}
|
|
983
|
-
|
|
984
|
-
|
|
985
|
-
|
|
986
|
-
const
|
|
987
|
-
const
|
|
988
|
-
|
|
989
|
-
|
|
990
|
-
|
|
991
|
-
|
|
992
|
-
|
|
993
|
-
|
|
994
|
-
|
|
995
|
-
|
|
996
|
-
|
|
997
|
-
|
|
998
|
-
|
|
999
|
-
|
|
1000
|
-
window.scroll(this._previousScrollPosition.left, this._previousScrollPosition.top);
|
|
1353
|
+
observe(elementOrRef) {
|
|
1354
|
+
const element = coerceElement(elementOrRef);
|
|
1355
|
+
return new Observable((observer) => {
|
|
1356
|
+
const stream = this._observeElement(element);
|
|
1357
|
+
const subscription = stream.subscribe(observer);
|
|
1358
|
+
return () => {
|
|
1359
|
+
subscription.unsubscribe();
|
|
1360
|
+
this._unobserveElement(element);
|
|
1361
|
+
};
|
|
1362
|
+
});
|
|
1363
|
+
}
|
|
1364
|
+
_observeElement(element) {
|
|
1365
|
+
if (!this._observedElements.has(element)) {
|
|
1366
|
+
const stream = new Subject();
|
|
1367
|
+
const observer = this._mutationObserverFactory.create((resizes) => stream.next(resizes));
|
|
1368
|
+
if (observer) {
|
|
1369
|
+
observer.observe(element);
|
|
1001
1370
|
}
|
|
1002
|
-
|
|
1003
|
-
|
|
1004
|
-
|
|
1371
|
+
this._observedElements.set(element, { observer, stream, count: 1 });
|
|
1372
|
+
}
|
|
1373
|
+
else {
|
|
1374
|
+
this._observedElements.get(element).count++;
|
|
1375
|
+
}
|
|
1376
|
+
return this._observedElements.get(element).stream;
|
|
1377
|
+
}
|
|
1378
|
+
_unobserveElement(element) {
|
|
1379
|
+
if (this._observedElements.has(element)) {
|
|
1380
|
+
this._observedElements.get(element).count--;
|
|
1381
|
+
if (!this._observedElements.get(element).count) {
|
|
1382
|
+
this._cleanupObserver(element);
|
|
1005
1383
|
}
|
|
1006
1384
|
}
|
|
1007
1385
|
}
|
|
1008
|
-
|
|
1009
|
-
|
|
1010
|
-
|
|
1011
|
-
|
|
1386
|
+
_cleanupObserver(element) {
|
|
1387
|
+
if (this._observedElements.has(element)) {
|
|
1388
|
+
const { observer, stream } = this._observedElements.get(element);
|
|
1389
|
+
if (observer) {
|
|
1390
|
+
observer.disconnect();
|
|
1391
|
+
}
|
|
1392
|
+
stream.complete();
|
|
1393
|
+
this._observedElements.delete(element);
|
|
1012
1394
|
}
|
|
1013
|
-
return true;
|
|
1014
1395
|
}
|
|
1396
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: ResizeObserverService, deps: [{ token: ResizeObserverFactory }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1397
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: ResizeObserverService, providedIn: 'root' }); }
|
|
1015
1398
|
}
|
|
1016
|
-
|
|
1017
|
-
|
|
1018
|
-
|
|
1019
|
-
};
|
|
1399
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: ResizeObserverService, decorators: [{
|
|
1400
|
+
type: Injectable,
|
|
1401
|
+
args: [{ providedIn: 'root' }]
|
|
1402
|
+
}], ctorParameters: function () { return [{ type: ResizeObserverFactory }]; } });
|
|
1020
1403
|
|
|
1021
1404
|
const routerDisableScrollTop = (config = {}) => {
|
|
1022
1405
|
if (!config.asReturnRoute) {
|
|
@@ -1288,225 +1671,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
|
|
|
1288
1671
|
type: Optional
|
|
1289
1672
|
}] }, { type: i1.BreakpointObserver }]; }, propDecorators: { _getViewportSize: [], _buildMediaQuery: [] } });
|
|
1290
1673
|
|
|
1291
|
-
const ANIMATABLE_TOKEN = new InjectionToken('ANIMATABLE_DIRECTIVE_TOKEN');
|
|
1292
|
-
class AnimatableDirective {
|
|
1293
|
-
constructor() {
|
|
1294
|
-
this._didEmitStart = false;
|
|
1295
|
-
this._parent = inject(ANIMATABLE_TOKEN, { optional: true, skipSelf: true });
|
|
1296
|
-
this._destroy$ = inject(DestroyService, { host: true }).destroy$;
|
|
1297
|
-
this._elementRef = inject(ElementRef);
|
|
1298
|
-
this._animationStart$ = new Subject();
|
|
1299
|
-
this._animationEnd$ = new Subject();
|
|
1300
|
-
this._animatedElement$ = new BehaviorSubject(this._elementRef.nativeElement);
|
|
1301
|
-
this.animationStart$ = this._animationStart$.asObservable().pipe(debounceTime(0));
|
|
1302
|
-
this.animationEnd$ = this._animationEnd$.asObservable().pipe(debounceTime(0));
|
|
1303
|
-
this._hostActiveAnimationCount$ = new BehaviorSubject(0);
|
|
1304
|
-
this._totalActiveAnimationCount$ = new BehaviorSubject(0);
|
|
1305
|
-
this.isAnimating$ = this._totalActiveAnimationCount$.pipe(map((count) => count > 0), debounceTime(0));
|
|
1306
|
-
}
|
|
1307
|
-
set animatedElement(value) {
|
|
1308
|
-
let newElement = null;
|
|
1309
|
-
if (value === null || value === undefined) {
|
|
1310
|
-
newElement = this._elementRef.nativeElement;
|
|
1311
|
-
}
|
|
1312
|
-
else if (typeof value === 'string') {
|
|
1313
|
-
const el = document.querySelector(value);
|
|
1314
|
-
if (el) {
|
|
1315
|
-
newElement = el;
|
|
1316
|
-
}
|
|
1317
|
-
else {
|
|
1318
|
-
if (isDevMode()) {
|
|
1319
|
-
console.warn(`Element with selector ${value} not found. Animatable directive will use host element.`);
|
|
1320
|
-
}
|
|
1321
|
-
newElement = this._elementRef.nativeElement;
|
|
1322
|
-
}
|
|
1323
|
-
}
|
|
1324
|
-
else {
|
|
1325
|
-
newElement = value;
|
|
1326
|
-
}
|
|
1327
|
-
if (this._animatedElement$.value !== newElement) {
|
|
1328
|
-
this._animatedElement$.next(newElement);
|
|
1329
|
-
}
|
|
1330
|
-
}
|
|
1331
|
-
ngOnInit() {
|
|
1332
|
-
this._animatedElement$
|
|
1333
|
-
.pipe(tap((el) => {
|
|
1334
|
-
this._totalActiveAnimationCount$.next(this._totalActiveAnimationCount$.value - this._hostActiveAnimationCount$.value);
|
|
1335
|
-
this._hostActiveAnimationCount$.next(0);
|
|
1336
|
-
merge(fromEvent(el, 'animationstart'), fromEvent(el, 'transitionstart'))
|
|
1337
|
-
.pipe(filter((e) => e.target === el), // skip events from children
|
|
1338
|
-
tap(() => {
|
|
1339
|
-
const count = this._hostActiveAnimationCount$.value + 1;
|
|
1340
|
-
this._hostActiveAnimationCount$.next(count);
|
|
1341
|
-
this._totalActiveAnimationCount$.next(count);
|
|
1342
|
-
}), takeUntil(this._destroy$), takeUntil(this._animatedElement$.pipe(skip(1))))
|
|
1343
|
-
.subscribe();
|
|
1344
|
-
merge(fromEvent(el, 'animationend'), fromEvent(el, 'animationcancel'), fromEvent(el, 'transitionend'), fromEvent(el, 'transitioncancel'))
|
|
1345
|
-
.pipe(filter((e) => e.target === el), // skip events from children
|
|
1346
|
-
tap(() => {
|
|
1347
|
-
const count = this._hostActiveAnimationCount$.value - 1;
|
|
1348
|
-
this._hostActiveAnimationCount$.next(count);
|
|
1349
|
-
this._totalActiveAnimationCount$.next(count);
|
|
1350
|
-
}), takeUntil(this._destroy$), takeUntil(this._animatedElement$.pipe(skip(1))))
|
|
1351
|
-
.subscribe();
|
|
1352
|
-
}), takeUntil(this._destroy$))
|
|
1353
|
-
.subscribe();
|
|
1354
|
-
this._totalActiveAnimationCount$
|
|
1355
|
-
.pipe(tap((count) => {
|
|
1356
|
-
if (count > 0 && !this._didEmitStart) {
|
|
1357
|
-
this._animationStart$.next();
|
|
1358
|
-
this._didEmitStart = true;
|
|
1359
|
-
}
|
|
1360
|
-
else if (count === 0) {
|
|
1361
|
-
this._animationEnd$.next();
|
|
1362
|
-
this._didEmitStart = false;
|
|
1363
|
-
}
|
|
1364
|
-
}), takeUntil(this._destroy$))
|
|
1365
|
-
.subscribe();
|
|
1366
|
-
if (this._parent) {
|
|
1367
|
-
this._parent._hostActiveAnimationCount$
|
|
1368
|
-
.pipe(takeUntil(this._destroy$), tap((count) => {
|
|
1369
|
-
this._totalActiveAnimationCount$.next(count + this._hostActiveAnimationCount$.value);
|
|
1370
|
-
}))
|
|
1371
|
-
.subscribe();
|
|
1372
|
-
}
|
|
1373
|
-
}
|
|
1374
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AnimatableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1375
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: AnimatableDirective, isStandalone: true, selector: "[etAnimatable]", inputs: { animatedElement: ["etAnimatable", "animatedElement"] }, providers: [
|
|
1376
|
-
{
|
|
1377
|
-
provide: ANIMATABLE_TOKEN,
|
|
1378
|
-
useExisting: AnimatableDirective,
|
|
1379
|
-
},
|
|
1380
|
-
DestroyService,
|
|
1381
|
-
], exportAs: ["etAnimatable"], ngImport: i0 }); }
|
|
1382
|
-
}
|
|
1383
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AnimatableDirective, decorators: [{
|
|
1384
|
-
type: Directive,
|
|
1385
|
-
args: [{
|
|
1386
|
-
selector: '[etAnimatable]',
|
|
1387
|
-
exportAs: 'etAnimatable',
|
|
1388
|
-
standalone: true,
|
|
1389
|
-
providers: [
|
|
1390
|
-
{
|
|
1391
|
-
provide: ANIMATABLE_TOKEN,
|
|
1392
|
-
useExisting: AnimatableDirective,
|
|
1393
|
-
},
|
|
1394
|
-
DestroyService,
|
|
1395
|
-
],
|
|
1396
|
-
}]
|
|
1397
|
-
}], propDecorators: { animatedElement: [{
|
|
1398
|
-
type: Input,
|
|
1399
|
-
args: ['etAnimatable']
|
|
1400
|
-
}] } });
|
|
1401
|
-
|
|
1402
|
-
const ANIMATED_LIFECYCLE_TOKEN = new InjectionToken('ANIMATED_LIFECYCLE_DIRECTIVE_TOKEN');
|
|
1403
|
-
const ANIMATION_CLASSES = {
|
|
1404
|
-
enterFrom: 'et-animation-enter-from',
|
|
1405
|
-
enterActive: 'et-animation-enter-active',
|
|
1406
|
-
enterTo: 'et-animation-enter-to',
|
|
1407
|
-
leaveFrom: 'et-animation-leave-from',
|
|
1408
|
-
leaveActive: 'et-animation-leave-active',
|
|
1409
|
-
leaveTo: 'et-animation-leave-to',
|
|
1410
|
-
};
|
|
1411
|
-
class AnimatedLifecycleDirective {
|
|
1412
|
-
constructor() {
|
|
1413
|
-
this._destroy$ = inject(DestroyService, { host: true }).destroy$;
|
|
1414
|
-
this._elementRef = inject(ElementRef);
|
|
1415
|
-
this._animatable = inject(ANIMATABLE_TOKEN);
|
|
1416
|
-
this._classList = this._elementRef.nativeElement.classList;
|
|
1417
|
-
this._state$ = new BehaviorSubject('init');
|
|
1418
|
-
this.state$ = this._state$.asObservable();
|
|
1419
|
-
this._bindings = createReactiveBindings({
|
|
1420
|
-
attribute: 'class.et-force-invisible',
|
|
1421
|
-
observable: this._state$.pipe(map((state) => state === 'init')),
|
|
1422
|
-
});
|
|
1423
|
-
}
|
|
1424
|
-
get state() {
|
|
1425
|
-
return this._state$.value;
|
|
1426
|
-
}
|
|
1427
|
-
enter(config) {
|
|
1428
|
-
if (this.state !== 'init' && this.state !== 'left' && isDevMode()) {
|
|
1429
|
-
console.warn('Tried to enter but the element is not in the initial state. This may result in unexpected behavior.', this);
|
|
1430
|
-
}
|
|
1431
|
-
this._state$.next('entering');
|
|
1432
|
-
if (!config?.onlyTransition) {
|
|
1433
|
-
this._classList.add(ANIMATION_CLASSES.enterFrom);
|
|
1434
|
-
}
|
|
1435
|
-
forceReflow();
|
|
1436
|
-
this._classList.add(ANIMATION_CLASSES.enterActive);
|
|
1437
|
-
fromNextFrame()
|
|
1438
|
-
.pipe(tap(() => {
|
|
1439
|
-
if (!config?.onlyTransition) {
|
|
1440
|
-
this._classList.remove(ANIMATION_CLASSES.enterFrom);
|
|
1441
|
-
this._classList.add(ANIMATION_CLASSES.enterTo);
|
|
1442
|
-
}
|
|
1443
|
-
}), switchMap(() => this._animatable.animationEnd$), tap(() => {
|
|
1444
|
-
this._state$.next('entered');
|
|
1445
|
-
this._classList.remove(ANIMATION_CLASSES.enterActive);
|
|
1446
|
-
if (!config?.onlyTransition) {
|
|
1447
|
-
this._classList.remove(ANIMATION_CLASSES.enterTo);
|
|
1448
|
-
}
|
|
1449
|
-
}), takeUntil(this._destroy$), take(1))
|
|
1450
|
-
.subscribe();
|
|
1451
|
-
}
|
|
1452
|
-
leave(config) {
|
|
1453
|
-
if (this.state !== 'entered' && this.state !== 'entering' && isDevMode()) {
|
|
1454
|
-
console.warn('Tried to leave while already leaving or left. This may result in unexpected behavior.', this);
|
|
1455
|
-
}
|
|
1456
|
-
if (this._classList.contains(ANIMATION_CLASSES.enterFrom) ||
|
|
1457
|
-
this._classList.contains(ANIMATION_CLASSES.enterActive) ||
|
|
1458
|
-
this._classList.contains(ANIMATION_CLASSES.enterTo)) {
|
|
1459
|
-
this._classList.remove(ANIMATION_CLASSES.enterFrom);
|
|
1460
|
-
this._classList.remove(ANIMATION_CLASSES.enterActive);
|
|
1461
|
-
this._classList.remove(ANIMATION_CLASSES.enterTo);
|
|
1462
|
-
}
|
|
1463
|
-
this._state$.next('leaving');
|
|
1464
|
-
if (!config?.onlyTransition) {
|
|
1465
|
-
this._classList.add(ANIMATION_CLASSES.leaveFrom);
|
|
1466
|
-
}
|
|
1467
|
-
forceReflow();
|
|
1468
|
-
this._classList.add(ANIMATION_CLASSES.leaveActive);
|
|
1469
|
-
fromNextFrame()
|
|
1470
|
-
.pipe(tap(() => {
|
|
1471
|
-
if (!config?.onlyTransition) {
|
|
1472
|
-
this._classList.remove(ANIMATION_CLASSES.leaveFrom);
|
|
1473
|
-
this._classList.add(ANIMATION_CLASSES.leaveTo);
|
|
1474
|
-
}
|
|
1475
|
-
}), switchMap(() => this._animatable.animationEnd$), tap(() => {
|
|
1476
|
-
this._state$.next('left');
|
|
1477
|
-
this._classList.remove(ANIMATION_CLASSES.leaveActive);
|
|
1478
|
-
if (!config?.onlyTransition) {
|
|
1479
|
-
this._classList.remove(ANIMATION_CLASSES.leaveTo);
|
|
1480
|
-
}
|
|
1481
|
-
}), takeUntil(this._destroy$), take(1))
|
|
1482
|
-
.subscribe();
|
|
1483
|
-
}
|
|
1484
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AnimatedLifecycleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1485
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: AnimatedLifecycleDirective, isStandalone: true, selector: "[etAnimatedLifecycle]", providers: [
|
|
1486
|
-
{
|
|
1487
|
-
provide: ANIMATED_LIFECYCLE_TOKEN,
|
|
1488
|
-
useExisting: AnimatedLifecycleDirective,
|
|
1489
|
-
},
|
|
1490
|
-
DestroyService,
|
|
1491
|
-
], exportAs: ["etAnimatedLifecycle"], hostDirectives: [{ directive: AnimatableDirective }], ngImport: i0 }); }
|
|
1492
|
-
}
|
|
1493
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AnimatedLifecycleDirective, decorators: [{
|
|
1494
|
-
type: Directive,
|
|
1495
|
-
args: [{
|
|
1496
|
-
selector: '[etAnimatedLifecycle]',
|
|
1497
|
-
exportAs: 'etAnimatedLifecycle',
|
|
1498
|
-
standalone: true,
|
|
1499
|
-
providers: [
|
|
1500
|
-
{
|
|
1501
|
-
provide: ANIMATED_LIFECYCLE_TOKEN,
|
|
1502
|
-
useExisting: AnimatedLifecycleDirective,
|
|
1503
|
-
},
|
|
1504
|
-
DestroyService,
|
|
1505
|
-
],
|
|
1506
|
-
hostDirectives: [AnimatableDirective],
|
|
1507
|
-
}]
|
|
1508
|
-
}] });
|
|
1509
|
-
|
|
1510
1674
|
class ClickOutsideDirective {
|
|
1511
1675
|
constructor() {
|
|
1512
1676
|
this._elementRef = inject(ElementRef);
|
|
@@ -1547,7 +1711,7 @@ const CURSOR_DRAG_SCROLLING_PREPARED_CLASS = 'et-cursor-drag-scroll--prepared';
|
|
|
1547
1711
|
class CursorDragScrollDirective {
|
|
1548
1712
|
constructor() {
|
|
1549
1713
|
this._subscriptions = [];
|
|
1550
|
-
this._destroy$ =
|
|
1714
|
+
this._destroy$ = createDestroy();
|
|
1551
1715
|
this._elementRef = inject(ElementRef);
|
|
1552
1716
|
this._contentObserverService = inject(ContentObserverService);
|
|
1553
1717
|
this._resizeObserverService = inject(ResizeObserverService);
|
|
@@ -1669,7 +1833,7 @@ class CursorDragScrollDirective {
|
|
|
1669
1833
|
}
|
|
1670
1834
|
}
|
|
1671
1835
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: CursorDragScrollDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1672
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: CursorDragScrollDirective, isStandalone: true, selector: "[etCursorDragScroll]", inputs: { enabled: ["etCursorDragScroll", "enabled"] },
|
|
1836
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: CursorDragScrollDirective, isStandalone: true, selector: "[etCursorDragScroll]", inputs: { enabled: ["etCursorDragScroll", "enabled"] }, exportAs: ["etCursorDragScroll"], ngImport: i0 }); }
|
|
1673
1837
|
}
|
|
1674
1838
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: CursorDragScrollDirective, decorators: [{
|
|
1675
1839
|
type: Directive,
|
|
@@ -1677,7 +1841,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
|
|
|
1677
1841
|
selector: '[etCursorDragScroll]',
|
|
1678
1842
|
exportAs: 'etCursorDragScroll',
|
|
1679
1843
|
standalone: true,
|
|
1680
|
-
providers: [DestroyService],
|
|
1681
1844
|
}]
|
|
1682
1845
|
}], propDecorators: { enabled: [{
|
|
1683
1846
|
type: Input,
|
|
@@ -1987,7 +2150,7 @@ const OBSERVE_SCROLL_STATE = new InjectionToken('OBSERVE_SCROLL_STATE');
|
|
|
1987
2150
|
|
|
1988
2151
|
class ObserveScrollStateDirective {
|
|
1989
2152
|
constructor() {
|
|
1990
|
-
this._destroy$ =
|
|
2153
|
+
this._destroy$ = createDestroy();
|
|
1991
2154
|
this._elementRef = inject(ElementRef);
|
|
1992
2155
|
this._contentObserverService = inject(ContentObserverService);
|
|
1993
2156
|
this._resizeObserverService = inject(ResizeObserverService);
|
|
@@ -2125,7 +2288,6 @@ class ObserveScrollStateDirective {
|
|
|
2125
2288
|
provide: OBSERVE_SCROLL_STATE,
|
|
2126
2289
|
useExisting: ObserveScrollStateDirective,
|
|
2127
2290
|
},
|
|
2128
|
-
DestroyService,
|
|
2129
2291
|
], exportAs: ["etObserveScrollState"], ngImport: i0 }); }
|
|
2130
2292
|
}
|
|
2131
2293
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: ObserveScrollStateDirective, decorators: [{
|
|
@@ -2139,7 +2301,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
|
|
|
2139
2301
|
provide: OBSERVE_SCROLL_STATE,
|
|
2140
2302
|
useExisting: ObserveScrollStateDirective,
|
|
2141
2303
|
},
|
|
2142
|
-
DestroyService,
|
|
2143
2304
|
],
|
|
2144
2305
|
}]
|
|
2145
2306
|
}], propDecorators: { observerRootMargin: [{
|
|
@@ -2754,5 +2915,5 @@ const Validators = {
|
|
|
2754
2915
|
* Generated bundle index. Do not edit.
|
|
2755
2916
|
*/
|
|
2756
2917
|
|
|
2757
|
-
export { ANIMATABLE_TOKEN, ANIMATED_LIFECYCLE_TOKEN, AnimatableDirective, AnimatedLifecycleDirective, BehaviorSubjectWithSubscriberCount, ClickObserverFactory, ClickObserverService, ClickOutsideDirective, ContentObserverService, CursorDragScrollDirective, DEFAULT_VIEWPORT_CONFIG, DELAYABLE_TOKEN, DelayableDirective,
|
|
2918
|
+
export { ANIMATABLE_TOKEN, ANIMATED_LIFECYCLE_TOKEN, AnimatableDirective, AnimatedLifecycleDirective, AnimatedOverlayDirective, BehaviorSubjectWithSubscriberCount, ClickObserverFactory, ClickObserverService, ClickOutsideDirective, ContentObserverService, CursorDragScrollDirective, DEFAULT_VIEWPORT_CONFIG, DELAYABLE_TOKEN, DelayableDirective, FocusVisibleService, IS_ARRAY_NOT_EMPTY, IS_EMAIL, IsArrayNotEmpty, IsEmail, LetContext, LetDirective, MUST_MATCH, Memo, MustMatch, MutationObserverFactory, NormalizeGameResultTypePipe, NormalizeMatchParticipantsPipe, NormalizeMatchScorePipe, NormalizeMatchStatePipe, NormalizeMatchTypePipe, OBSERVE_SCROLL_STATE, ObserveContentDirective, ObserveResizeDirective, ObserveScrollStateDirective, RepeatDirective, ResizeObserverFactory, ResizeObserverService, RouterStateService, SCROLL_OBSERVER_FIRST_ELEMENT_CLASS, SCROLL_OBSERVER_IGNORE_TARGET_CLASS, SCROLL_OBSERVER_LAST_ELEMENT_CLASS, SEO_DIRECTIVE_TOKEN, ScrollObserverFirstElementDirective, ScrollObserverIgnoreTargetDirective, ScrollObserverLastElementDirective, SeoDirective, SmartBlockScrollStrategy, StructuredDataComponent, ToArrayPipe, TypedQueryList, VIEWPORT_CONFIG, Validators, ViewportService, clamp, clone, createDestroy, createFlipAnimation, createFlipAnimationGroup, createMediaQueryObservable, createReactiveBindings, deleteCookie, elementCanScroll, equal, forceReflow, fromNextFrame, getCookie, getDomain, getGroupMatchPoints, getGroupMatchScore, getKnockoutMatchScore, getMatchScoreSubLine, hasCookie, isElementVisible, isGroupMatch, isKnockoutMatch, mergeSeoConfig, nextFrame, normalizeGameResultType, normalizeMatchParticipant, normalizeMatchParticipants, normalizeMatchScore, normalizeMatchState, normalizeMatchType, provideViewportConfig, routerDisableScrollTop, scrollToElement, setCookie, toArray, toArrayTrackByFn };
|
|
2758
2919
|
//# sourceMappingURL=ethlete-core.mjs.map
|