@ethlete/core 0.2.0-next.6 → 0.2.0-next.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/directives/click-outside/click-outside.directive.mjs +3 -3
- package/esm2020/lib/directives/cursor-drag-scroll/cursor-drag-scroll.directive.mjs +45 -21
- package/esm2020/lib/directives/destroy/destroy.directive.mjs +22 -0
- package/esm2020/lib/directives/destroy/public-api.mjs +2 -0
- package/esm2020/lib/directives/let/let.directive.mjs +3 -3
- package/esm2020/lib/directives/observe-content/observe-content.directive.mjs +3 -3
- package/esm2020/lib/directives/observe-resize/observe-resize.directive.mjs +3 -3
- package/esm2020/lib/directives/observe-scroll-state/observe-scroll-state.directive.mjs +20 -5
- package/esm2020/lib/directives/public-api.mjs +8 -5
- package/esm2020/lib/directives/repeat/repeat.directive.mjs +3 -3
- package/esm2020/lib/directives/scroll-observer-first-element/index.mjs +2 -0
- package/esm2020/lib/directives/scroll-observer-first-element/public-api.mjs +2 -0
- package/esm2020/lib/directives/scroll-observer-first-element/scroll-observer-first-element.directive.mjs +31 -0
- package/esm2020/lib/directives/scroll-observer-ignore-target/scroll-observer-ignore-target.directive.mjs +3 -3
- package/esm2020/lib/directives/scroll-observer-last-element/index.mjs +2 -0
- package/esm2020/lib/directives/scroll-observer-last-element/public-api.mjs +2 -0
- package/esm2020/lib/directives/scroll-observer-last-element/scroll-observer-last-element.directive.mjs +34 -0
- package/esm2020/lib/pipes/to-array/to-array.pipe.mjs +3 -3
- package/esm2020/lib/services/click-observer.service.mjs +6 -6
- package/esm2020/lib/services/content-observer.service.mjs +6 -6
- package/esm2020/lib/services/destroy.service.mjs +6 -11
- package/esm2020/lib/services/focus-visible.service.mjs +3 -3
- package/esm2020/lib/services/public-api.mjs +6 -6
- package/esm2020/lib/services/resize-observer.service.mjs +6 -6
- package/esm2020/lib/services/viewport.service.mjs +3 -3
- package/fesm2015/ethlete-core.mjs +620 -511
- package/fesm2015/ethlete-core.mjs.map +1 -1
- package/fesm2020/ethlete-core.mjs +617 -508
- package/fesm2020/ethlete-core.mjs.map +1 -1
- package/lib/directives/click-outside/click-outside.directive.d.ts +1 -1
- package/lib/directives/cursor-drag-scroll/cursor-drag-scroll.directive.d.ts +8 -2
- package/lib/directives/destroy/destroy.directive.d.ts +9 -0
- package/lib/directives/destroy/public-api.d.ts +1 -0
- package/lib/directives/let/let.directive.d.ts +1 -1
- package/lib/directives/observe-content/observe-content.directive.d.ts +1 -1
- package/lib/directives/observe-resize/observe-resize.directive.d.ts +1 -1
- package/lib/directives/observe-scroll-state/observe-scroll-state.directive.d.ts +1 -1
- package/lib/directives/public-api.d.ts +7 -4
- package/lib/directives/repeat/repeat.directive.d.ts +1 -1
- package/lib/directives/scroll-observer-first-element/index.d.ts +1 -0
- package/lib/directives/scroll-observer-first-element/public-api.d.ts +1 -0
- package/lib/directives/scroll-observer-first-element/scroll-observer-first-element.directive.d.ts +10 -0
- package/lib/directives/scroll-observer-ignore-target/scroll-observer-ignore-target.directive.d.ts +1 -1
- package/lib/directives/scroll-observer-last-element/index.d.ts +1 -0
- package/lib/directives/scroll-observer-last-element/public-api.d.ts +1 -0
- package/lib/directives/scroll-observer-last-element/scroll-observer-last-element.directive.d.ts +10 -0
- package/lib/services/destroy.service.d.ts +1 -1
- package/lib/services/public-api.d.ts +5 -5
- package/package.json +4 -4
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { InjectionToken,
|
|
3
|
-
import {
|
|
4
|
-
import { BehaviorSubject, combineLatest, map, shareReplay,
|
|
2
|
+
import { InjectionToken, Injectable, inject, Inject, Optional, ElementRef, EventEmitter, Directive, Output, Input, NgZone, HostBinding, Pipe } from '@angular/core';
|
|
3
|
+
import { coerceElement, coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
|
|
4
|
+
import { fromEvent, Observable, Subject, BehaviorSubject, combineLatest, map, shareReplay, startWith, debounceTime, tap, takeUntil, take } from 'rxjs';
|
|
5
|
+
import { DOCUMENT } from '@angular/common';
|
|
5
6
|
import { __decorate, __metadata } from 'tslib';
|
|
6
7
|
import * as i1 from '@angular/cdk/layout';
|
|
7
|
-
import { DOCUMENT } from '@angular/common';
|
|
8
8
|
import { debounceTime as debounceTime$1 } from 'rxjs/operators';
|
|
9
9
|
|
|
10
10
|
const VIEWPORT_CONFIG = new InjectionToken('ViewportConfig');
|
|
@@ -48,131 +48,313 @@ const Memo = (config = {}) => (_, __, descriptor) => {
|
|
|
48
48
|
return descriptor;
|
|
49
49
|
};
|
|
50
50
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
56
|
-
this.etLet = null;
|
|
51
|
+
/* eslint-disable @typescript-eslint/no-non-null-assertion */
|
|
52
|
+
class ClickObserverFactory {
|
|
53
|
+
create() {
|
|
54
|
+
return fromEvent(document, 'click');
|
|
57
55
|
}
|
|
58
56
|
}
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
57
|
+
ClickObserverFactory.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: ClickObserverFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
58
|
+
ClickObserverFactory.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: ClickObserverFactory, providedIn: 'root' });
|
|
59
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: ClickObserverFactory, decorators: [{
|
|
60
|
+
type: Injectable,
|
|
61
|
+
args: [{ providedIn: 'root' }]
|
|
62
|
+
}] });
|
|
63
|
+
class ClickObserverService {
|
|
64
|
+
constructor(_clickObserverFactory) {
|
|
65
|
+
this._clickObserverFactory = _clickObserverFactory;
|
|
66
|
+
this._observedElements = new Map();
|
|
67
67
|
}
|
|
68
|
-
|
|
69
|
-
this.
|
|
70
|
-
this._updateView();
|
|
68
|
+
ngOnDestroy() {
|
|
69
|
+
this._observedElements.forEach((_, element) => this._cleanupObserver(element));
|
|
71
70
|
}
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
return
|
|
71
|
+
observe(elementOrRef) {
|
|
72
|
+
const element = coerceElement(elementOrRef);
|
|
73
|
+
return new Observable((observer) => {
|
|
74
|
+
const stream = this._observeElement(element);
|
|
75
|
+
const subscription = stream.subscribe(observer);
|
|
76
|
+
return () => {
|
|
77
|
+
subscription.unsubscribe();
|
|
78
|
+
this._unobserveElement(element);
|
|
79
|
+
};
|
|
80
|
+
});
|
|
75
81
|
}
|
|
76
|
-
|
|
77
|
-
if (!this.
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
82
|
+
_observeElement(element) {
|
|
83
|
+
if (!this._observedElements.has(element)) {
|
|
84
|
+
const stream = new Subject();
|
|
85
|
+
const observer = this._clickObserverFactory.create();
|
|
86
|
+
const sub = observer.subscribe((event) => stream.next(event));
|
|
87
|
+
this._observedElements.set(element, { observer: sub, stream, count: 1 });
|
|
88
|
+
}
|
|
89
|
+
else {
|
|
90
|
+
this._observedElements.get(element).count++;
|
|
91
|
+
}
|
|
92
|
+
return this._observedElements.get(element).stream;
|
|
93
|
+
}
|
|
94
|
+
_unobserveElement(element) {
|
|
95
|
+
if (this._observedElements.has(element)) {
|
|
96
|
+
this._observedElements.get(element).count--;
|
|
97
|
+
if (!this._observedElements.get(element).count) {
|
|
98
|
+
this._cleanupObserver(element);
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
_cleanupObserver(element) {
|
|
103
|
+
if (this._observedElements.has(element)) {
|
|
104
|
+
const { observer, stream } = this._observedElements.get(element);
|
|
105
|
+
if (observer) {
|
|
106
|
+
observer.unsubscribe();
|
|
81
107
|
}
|
|
108
|
+
stream.complete();
|
|
109
|
+
this._observedElements.delete(element);
|
|
82
110
|
}
|
|
83
111
|
}
|
|
84
112
|
}
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
88
|
-
type:
|
|
89
|
-
args: [{
|
|
90
|
-
|
|
91
|
-
standalone: true,
|
|
92
|
-
}]
|
|
93
|
-
}], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }]; }, propDecorators: { etLet: [{
|
|
94
|
-
type: Input
|
|
95
|
-
}] } });
|
|
113
|
+
ClickObserverService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: ClickObserverService, deps: [{ token: ClickObserverFactory }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
114
|
+
ClickObserverService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: ClickObserverService, providedIn: 'root' });
|
|
115
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: ClickObserverService, decorators: [{
|
|
116
|
+
type: Injectable,
|
|
117
|
+
args: [{ providedIn: 'root' }]
|
|
118
|
+
}], ctorParameters: function () { return [{ type: ClickObserverFactory }]; } });
|
|
96
119
|
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
this._repeatCount = 2;
|
|
120
|
+
/* eslint-disable @typescript-eslint/no-non-null-assertion */
|
|
121
|
+
class MutationObserverFactory {
|
|
122
|
+
create(callback) {
|
|
123
|
+
return typeof MutationObserver === 'undefined' ? null : new MutationObserver(callback);
|
|
102
124
|
}
|
|
103
|
-
|
|
104
|
-
|
|
125
|
+
}
|
|
126
|
+
MutationObserverFactory.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: MutationObserverFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
127
|
+
MutationObserverFactory.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: MutationObserverFactory, providedIn: 'root' });
|
|
128
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: MutationObserverFactory, decorators: [{
|
|
129
|
+
type: Injectable,
|
|
130
|
+
args: [{ providedIn: 'root' }]
|
|
131
|
+
}] });
|
|
132
|
+
class ContentObserverService {
|
|
133
|
+
constructor(_mutationObserverFactory) {
|
|
134
|
+
this._mutationObserverFactory = _mutationObserverFactory;
|
|
135
|
+
this._observedElements = new Map();
|
|
105
136
|
}
|
|
106
|
-
|
|
107
|
-
this.
|
|
137
|
+
ngOnDestroy() {
|
|
138
|
+
this._observedElements.forEach((_, element) => this._cleanupObserver(element));
|
|
108
139
|
}
|
|
109
|
-
|
|
110
|
-
|
|
140
|
+
observe(elementOrRef) {
|
|
141
|
+
const element = coerceElement(elementOrRef);
|
|
142
|
+
return new Observable((observer) => {
|
|
143
|
+
const stream = this._observeElement(element);
|
|
144
|
+
const subscription = stream.subscribe(observer);
|
|
145
|
+
return () => {
|
|
146
|
+
subscription.unsubscribe();
|
|
147
|
+
this._unobserveElement(element);
|
|
148
|
+
};
|
|
149
|
+
});
|
|
111
150
|
}
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
151
|
+
_observeElement(element) {
|
|
152
|
+
if (!this._observedElements.has(element)) {
|
|
153
|
+
const stream = new Subject();
|
|
154
|
+
const observer = this._mutationObserverFactory.create((mutations) => stream.next(mutations));
|
|
155
|
+
if (observer) {
|
|
156
|
+
observer.observe(element, {
|
|
157
|
+
characterData: true,
|
|
158
|
+
childList: true,
|
|
159
|
+
subtree: true,
|
|
160
|
+
});
|
|
161
|
+
}
|
|
162
|
+
this._observedElements.set(element, { observer, stream, count: 1 });
|
|
115
163
|
}
|
|
164
|
+
else {
|
|
165
|
+
this._observedElements.get(element).count++;
|
|
166
|
+
}
|
|
167
|
+
return this._observedElements.get(element).stream;
|
|
116
168
|
}
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
standalone: true,
|
|
125
|
-
}]
|
|
126
|
-
}], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }]; }, propDecorators: { repeatCount: [{
|
|
127
|
-
type: Input,
|
|
128
|
-
args: ['etRepeat']
|
|
129
|
-
}] } });
|
|
130
|
-
|
|
131
|
-
class ViewportService {
|
|
132
|
-
constructor(_viewportConfig, _breakpointObserver) {
|
|
133
|
-
this._breakpointObserver = _breakpointObserver;
|
|
134
|
-
this._isXs$ = new BehaviorSubject(false);
|
|
135
|
-
this._isSm$ = new BehaviorSubject(false);
|
|
136
|
-
this._isMd$ = new BehaviorSubject(false);
|
|
137
|
-
this._isLg$ = new BehaviorSubject(false);
|
|
138
|
-
this._isXl$ = new BehaviorSubject(false);
|
|
139
|
-
this._is2Xl$ = new BehaviorSubject(false);
|
|
140
|
-
this.currentViewport$ = combineLatest([this.isXs$, this.isSm$, this.isMd$, this.isLg$, this.isXl$, this.is2Xl$]).pipe(map((val) => this.getCurrentViewport(val)), shareReplay());
|
|
141
|
-
this._viewportConfig = _viewportConfig || DEFAULT_VIEWPORT_CONFIG;
|
|
142
|
-
this._observeDefaultBreakpoints();
|
|
143
|
-
}
|
|
144
|
-
get isXs$() {
|
|
145
|
-
return this._isXs$.asObservable();
|
|
169
|
+
_unobserveElement(element) {
|
|
170
|
+
if (this._observedElements.has(element)) {
|
|
171
|
+
this._observedElements.get(element).count--;
|
|
172
|
+
if (!this._observedElements.get(element).count) {
|
|
173
|
+
this._cleanupObserver(element);
|
|
174
|
+
}
|
|
175
|
+
}
|
|
146
176
|
}
|
|
147
|
-
|
|
148
|
-
|
|
177
|
+
_cleanupObserver(element) {
|
|
178
|
+
if (this._observedElements.has(element)) {
|
|
179
|
+
const { observer, stream } = this._observedElements.get(element);
|
|
180
|
+
if (observer) {
|
|
181
|
+
observer.disconnect();
|
|
182
|
+
}
|
|
183
|
+
stream.complete();
|
|
184
|
+
this._observedElements.delete(element);
|
|
185
|
+
}
|
|
149
186
|
}
|
|
150
|
-
|
|
151
|
-
|
|
187
|
+
}
|
|
188
|
+
ContentObserverService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: ContentObserverService, deps: [{ token: MutationObserverFactory }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
189
|
+
ContentObserverService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: ContentObserverService, providedIn: 'root' });
|
|
190
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: ContentObserverService, decorators: [{
|
|
191
|
+
type: Injectable,
|
|
192
|
+
args: [{ providedIn: 'root' }]
|
|
193
|
+
}], ctorParameters: function () { return [{ type: MutationObserverFactory }]; } });
|
|
194
|
+
|
|
195
|
+
class DestroyService {
|
|
196
|
+
constructor() {
|
|
197
|
+
this._destroy$ = new Subject();
|
|
198
|
+
this.destroy$ = this._destroy$.asObservable();
|
|
152
199
|
}
|
|
153
|
-
|
|
154
|
-
|
|
200
|
+
ngOnDestroy() {
|
|
201
|
+
this._destroy$.next(true);
|
|
202
|
+
this._destroy$.unsubscribe();
|
|
155
203
|
}
|
|
156
|
-
|
|
157
|
-
|
|
204
|
+
}
|
|
205
|
+
DestroyService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DestroyService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
206
|
+
DestroyService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DestroyService });
|
|
207
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DestroyService, decorators: [{
|
|
208
|
+
type: Injectable
|
|
209
|
+
}] });
|
|
210
|
+
|
|
211
|
+
class FocusVisibleService {
|
|
212
|
+
constructor() {
|
|
213
|
+
this._document = inject(DOCUMENT);
|
|
214
|
+
this._hadKeyboardEvent = false;
|
|
215
|
+
this._document.addEventListener('keydown', this.onKeyDown.bind(this), true);
|
|
216
|
+
this._document.addEventListener('mousedown', this.onPointerDown.bind(this), true);
|
|
217
|
+
this._document.addEventListener('pointerdown', this.onPointerDown.bind(this), true);
|
|
218
|
+
this._document.addEventListener('touchstart', this.onPointerDown.bind(this), true);
|
|
158
219
|
}
|
|
159
|
-
get
|
|
160
|
-
return this.
|
|
220
|
+
get isFocusVisible() {
|
|
221
|
+
return this._hadKeyboardEvent;
|
|
161
222
|
}
|
|
162
|
-
|
|
163
|
-
|
|
223
|
+
onKeyDown(e) {
|
|
224
|
+
if (e.metaKey || e.altKey || e.ctrlKey) {
|
|
225
|
+
return;
|
|
226
|
+
}
|
|
227
|
+
this._hadKeyboardEvent = true;
|
|
164
228
|
}
|
|
165
|
-
|
|
166
|
-
|
|
229
|
+
onPointerDown() {
|
|
230
|
+
this._hadKeyboardEvent = false;
|
|
167
231
|
}
|
|
168
|
-
|
|
169
|
-
|
|
232
|
+
}
|
|
233
|
+
FocusVisibleService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: FocusVisibleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
234
|
+
FocusVisibleService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: FocusVisibleService, providedIn: 'root' });
|
|
235
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: FocusVisibleService, decorators: [{
|
|
236
|
+
type: Injectable,
|
|
237
|
+
args: [{
|
|
238
|
+
providedIn: 'root',
|
|
239
|
+
}]
|
|
240
|
+
}], ctorParameters: function () { return []; } });
|
|
241
|
+
|
|
242
|
+
/* eslint-disable @typescript-eslint/no-non-null-assertion */
|
|
243
|
+
class ResizeObserverFactory {
|
|
244
|
+
create(callback) {
|
|
245
|
+
return typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(callback);
|
|
170
246
|
}
|
|
171
|
-
|
|
172
|
-
|
|
247
|
+
}
|
|
248
|
+
ResizeObserverFactory.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: ResizeObserverFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
249
|
+
ResizeObserverFactory.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: ResizeObserverFactory, providedIn: 'root' });
|
|
250
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: ResizeObserverFactory, decorators: [{
|
|
251
|
+
type: Injectable,
|
|
252
|
+
args: [{ providedIn: 'root' }]
|
|
253
|
+
}] });
|
|
254
|
+
class ResizeObserverService {
|
|
255
|
+
constructor(_mutationObserverFactory) {
|
|
256
|
+
this._mutationObserverFactory = _mutationObserverFactory;
|
|
257
|
+
this._observedElements = new Map();
|
|
173
258
|
}
|
|
174
|
-
|
|
175
|
-
|
|
259
|
+
ngOnDestroy() {
|
|
260
|
+
this._observedElements.forEach((_, element) => this._cleanupObserver(element));
|
|
261
|
+
}
|
|
262
|
+
observe(elementOrRef) {
|
|
263
|
+
const element = coerceElement(elementOrRef);
|
|
264
|
+
return new Observable((observer) => {
|
|
265
|
+
const stream = this._observeElement(element);
|
|
266
|
+
const subscription = stream.subscribe(observer);
|
|
267
|
+
return () => {
|
|
268
|
+
subscription.unsubscribe();
|
|
269
|
+
this._unobserveElement(element);
|
|
270
|
+
};
|
|
271
|
+
});
|
|
272
|
+
}
|
|
273
|
+
_observeElement(element) {
|
|
274
|
+
if (!this._observedElements.has(element)) {
|
|
275
|
+
const stream = new Subject();
|
|
276
|
+
const observer = this._mutationObserverFactory.create((resizes) => stream.next(resizes));
|
|
277
|
+
if (observer) {
|
|
278
|
+
observer.observe(element);
|
|
279
|
+
}
|
|
280
|
+
this._observedElements.set(element, { observer, stream, count: 1 });
|
|
281
|
+
}
|
|
282
|
+
else {
|
|
283
|
+
this._observedElements.get(element).count++;
|
|
284
|
+
}
|
|
285
|
+
return this._observedElements.get(element).stream;
|
|
286
|
+
}
|
|
287
|
+
_unobserveElement(element) {
|
|
288
|
+
if (this._observedElements.has(element)) {
|
|
289
|
+
this._observedElements.get(element).count--;
|
|
290
|
+
if (!this._observedElements.get(element).count) {
|
|
291
|
+
this._cleanupObserver(element);
|
|
292
|
+
}
|
|
293
|
+
}
|
|
294
|
+
}
|
|
295
|
+
_cleanupObserver(element) {
|
|
296
|
+
if (this._observedElements.has(element)) {
|
|
297
|
+
const { observer, stream } = this._observedElements.get(element);
|
|
298
|
+
if (observer) {
|
|
299
|
+
observer.disconnect();
|
|
300
|
+
}
|
|
301
|
+
stream.complete();
|
|
302
|
+
this._observedElements.delete(element);
|
|
303
|
+
}
|
|
304
|
+
}
|
|
305
|
+
}
|
|
306
|
+
ResizeObserverService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: ResizeObserverService, deps: [{ token: ResizeObserverFactory }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
307
|
+
ResizeObserverService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: ResizeObserverService, providedIn: 'root' });
|
|
308
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: ResizeObserverService, decorators: [{
|
|
309
|
+
type: Injectable,
|
|
310
|
+
args: [{ providedIn: 'root' }]
|
|
311
|
+
}], ctorParameters: function () { return [{ type: ResizeObserverFactory }]; } });
|
|
312
|
+
|
|
313
|
+
class ViewportService {
|
|
314
|
+
constructor(_viewportConfig, _breakpointObserver) {
|
|
315
|
+
this._breakpointObserver = _breakpointObserver;
|
|
316
|
+
this._isXs$ = new BehaviorSubject(false);
|
|
317
|
+
this._isSm$ = new BehaviorSubject(false);
|
|
318
|
+
this._isMd$ = new BehaviorSubject(false);
|
|
319
|
+
this._isLg$ = new BehaviorSubject(false);
|
|
320
|
+
this._isXl$ = new BehaviorSubject(false);
|
|
321
|
+
this._is2Xl$ = new BehaviorSubject(false);
|
|
322
|
+
this.currentViewport$ = combineLatest([this.isXs$, this.isSm$, this.isMd$, this.isLg$, this.isXl$, this.is2Xl$]).pipe(map((val) => this.getCurrentViewport(val)), shareReplay());
|
|
323
|
+
this._viewportConfig = _viewportConfig || DEFAULT_VIEWPORT_CONFIG;
|
|
324
|
+
this._observeDefaultBreakpoints();
|
|
325
|
+
}
|
|
326
|
+
get isXs$() {
|
|
327
|
+
return this._isXs$.asObservable();
|
|
328
|
+
}
|
|
329
|
+
get isXs() {
|
|
330
|
+
return this._isXs$.value;
|
|
331
|
+
}
|
|
332
|
+
get isSm$() {
|
|
333
|
+
return this._isSm$.asObservable();
|
|
334
|
+
}
|
|
335
|
+
get isSm() {
|
|
336
|
+
return this._isSm$.value;
|
|
337
|
+
}
|
|
338
|
+
get isMd$() {
|
|
339
|
+
return this._isMd$.asObservable();
|
|
340
|
+
}
|
|
341
|
+
get isMd() {
|
|
342
|
+
return this._isMd$.value;
|
|
343
|
+
}
|
|
344
|
+
get isLg$() {
|
|
345
|
+
return this._isLg$.asObservable();
|
|
346
|
+
}
|
|
347
|
+
get isLg() {
|
|
348
|
+
return this._isLg$.value;
|
|
349
|
+
}
|
|
350
|
+
get isXl$() {
|
|
351
|
+
return this._isXl$.asObservable();
|
|
352
|
+
}
|
|
353
|
+
get isXl() {
|
|
354
|
+
return this._isXl$.value;
|
|
355
|
+
}
|
|
356
|
+
get is2Xl$() {
|
|
357
|
+
return this._is2Xl$.asObservable();
|
|
176
358
|
}
|
|
177
359
|
get is2Xl() {
|
|
178
360
|
return this._is2Xl$.value;
|
|
@@ -258,8 +440,8 @@ class ViewportService {
|
|
|
258
440
|
return 'xs';
|
|
259
441
|
}
|
|
260
442
|
}
|
|
261
|
-
ViewportService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
262
|
-
ViewportService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
443
|
+
ViewportService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: ViewportService, deps: [{ token: VIEWPORT_CONFIG, optional: true }, { token: i1.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
444
|
+
ViewportService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: ViewportService, providedIn: 'root' });
|
|
263
445
|
__decorate([
|
|
264
446
|
Memo(),
|
|
265
447
|
__metadata("design:type", Function),
|
|
@@ -276,7 +458,7 @@ __decorate([
|
|
|
276
458
|
__metadata("design:paramtypes", [Object]),
|
|
277
459
|
__metadata("design:returntype", void 0)
|
|
278
460
|
], ViewportService.prototype, "_buildMediaQuery", null);
|
|
279
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
461
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: ViewportService, decorators: [{
|
|
280
462
|
type: Injectable,
|
|
281
463
|
args: [{
|
|
282
464
|
providedIn: 'root',
|
|
@@ -288,276 +470,264 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.9", ngImpor
|
|
|
288
470
|
type: Optional
|
|
289
471
|
}] }, { type: i1.BreakpointObserver }]; }, propDecorators: { _getViewportSize: [], _buildMediaQuery: [] } });
|
|
290
472
|
|
|
291
|
-
class
|
|
473
|
+
class ClickOutsideDirective {
|
|
292
474
|
constructor() {
|
|
293
|
-
this.
|
|
294
|
-
this.
|
|
295
|
-
this.
|
|
296
|
-
this.
|
|
297
|
-
this._document.addEventListener('pointerdown', this.onPointerDown.bind(this), true);
|
|
298
|
-
this._document.addEventListener('touchstart', this.onPointerDown.bind(this), true);
|
|
299
|
-
}
|
|
300
|
-
get isFocusVisible() {
|
|
301
|
-
return this._hadKeyboardEvent;
|
|
475
|
+
this._elementRef = inject(ElementRef);
|
|
476
|
+
this._clickObserverService = inject(ClickObserverService);
|
|
477
|
+
this._subscription = null;
|
|
478
|
+
this.etClickOutside = new EventEmitter();
|
|
302
479
|
}
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
480
|
+
ngOnInit() {
|
|
481
|
+
setTimeout(() => {
|
|
482
|
+
this._subscription = this._clickObserverService.observe(this._elementRef.nativeElement).subscribe((event) => {
|
|
483
|
+
const activeElement = event.target;
|
|
484
|
+
const isInside = this._elementRef.nativeElement.contains(activeElement);
|
|
485
|
+
if (!isInside) {
|
|
486
|
+
this.etClickOutside.emit(event);
|
|
487
|
+
}
|
|
488
|
+
});
|
|
489
|
+
});
|
|
308
490
|
}
|
|
309
|
-
|
|
310
|
-
this.
|
|
491
|
+
ngOnDestroy() {
|
|
492
|
+
this._subscription?.unsubscribe();
|
|
311
493
|
}
|
|
312
494
|
}
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
316
|
-
type:
|
|
495
|
+
ClickOutsideDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: ClickOutsideDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
496
|
+
ClickOutsideDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: ClickOutsideDirective, isStandalone: true, selector: "[etClickOutside]", outputs: { etClickOutside: "etClickOutside" }, ngImport: i0 });
|
|
497
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: ClickOutsideDirective, decorators: [{
|
|
498
|
+
type: Directive,
|
|
317
499
|
args: [{
|
|
318
|
-
|
|
500
|
+
selector: '[etClickOutside]',
|
|
501
|
+
standalone: true,
|
|
319
502
|
}]
|
|
320
|
-
}],
|
|
503
|
+
}], propDecorators: { etClickOutside: [{
|
|
504
|
+
type: Output
|
|
505
|
+
}] } });
|
|
321
506
|
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
this.
|
|
507
|
+
const provideViewportConfig = (viewportConfig) => {
|
|
508
|
+
return { provide: VIEWPORT_CONFIG, useValue: viewportConfig };
|
|
509
|
+
};
|
|
510
|
+
|
|
511
|
+
const clamp = (value, min = 0, max = 100) => {
|
|
512
|
+
return Math.max(min, Math.min(max, value));
|
|
513
|
+
};
|
|
514
|
+
|
|
515
|
+
const elementCanScroll = (element) => {
|
|
516
|
+
const { scrollHeight, clientHeight, scrollWidth, clientWidth } = element;
|
|
517
|
+
return scrollHeight > clientHeight || scrollWidth > clientWidth;
|
|
518
|
+
};
|
|
519
|
+
|
|
520
|
+
const CURSOR_DRAG_SCROLLING_CLASS = 'et-cursor-drag-scroll--scrolling';
|
|
521
|
+
const CURSOR_DRAG_SCROLLING_PREPARED_CLASS = 'et-cursor-drag-scroll--prepared';
|
|
522
|
+
|
|
523
|
+
class CursorDragScrollDirective {
|
|
524
|
+
constructor() {
|
|
525
|
+
this._subscriptions = [];
|
|
526
|
+
this._destroy$ = inject(DestroyService).destroy$;
|
|
527
|
+
this._elementRef = inject(ElementRef);
|
|
528
|
+
this._contentObserverService = inject(ContentObserverService);
|
|
529
|
+
this._resizeObserverService = inject(ResizeObserverService);
|
|
530
|
+
this._bufferUntilScroll = 5;
|
|
531
|
+
this._mouseUp$ = new Subject();
|
|
532
|
+
this._isScrolling = false;
|
|
533
|
+
this._canScroll = false;
|
|
534
|
+
this._currentScrollState = {
|
|
535
|
+
top: 0,
|
|
536
|
+
left: 0,
|
|
537
|
+
x: 0,
|
|
538
|
+
y: 0,
|
|
539
|
+
};
|
|
540
|
+
this._enabled = false;
|
|
341
541
|
}
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
return new Observable((observer) => {
|
|
345
|
-
const stream = this._observeElement(element);
|
|
346
|
-
const subscription = stream.subscribe(observer);
|
|
347
|
-
return () => {
|
|
348
|
-
subscription.unsubscribe();
|
|
349
|
-
this._unobserveElement(element);
|
|
350
|
-
};
|
|
351
|
-
});
|
|
542
|
+
get enabled() {
|
|
543
|
+
return this._enabled;
|
|
352
544
|
}
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
if (observer) {
|
|
358
|
-
observer.observe(element);
|
|
359
|
-
}
|
|
360
|
-
this._observedElements.set(element, { observer, stream, count: 1 });
|
|
545
|
+
set enabled(value) {
|
|
546
|
+
this._enabled = coerceBooleanProperty(value);
|
|
547
|
+
if (this._enabled) {
|
|
548
|
+
this._enableCursorDragScroll();
|
|
361
549
|
}
|
|
362
550
|
else {
|
|
363
|
-
this.
|
|
551
|
+
this._disableCursorDragScroll();
|
|
364
552
|
}
|
|
365
|
-
return this._observedElements.get(element).stream;
|
|
366
553
|
}
|
|
367
|
-
|
|
368
|
-
if (this.
|
|
369
|
-
this.
|
|
370
|
-
if (!this._observedElements.get(element).count) {
|
|
371
|
-
this._cleanupObserver(element);
|
|
372
|
-
}
|
|
554
|
+
ngAfterViewInit() {
|
|
555
|
+
if (this.enabled) {
|
|
556
|
+
this._enableCursorDragScroll();
|
|
373
557
|
}
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
if (this._observedElements.has(element)) {
|
|
377
|
-
const { observer, stream } = this._observedElements.get(element);
|
|
378
|
-
if (observer) {
|
|
379
|
-
observer.disconnect();
|
|
380
|
-
}
|
|
381
|
-
stream.complete();
|
|
382
|
-
this._observedElements.delete(element);
|
|
558
|
+
else {
|
|
559
|
+
this._disableCursorDragScroll();
|
|
383
560
|
}
|
|
384
561
|
}
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
}
|
|
398
|
-
}
|
|
399
|
-
MutationObserverFactory.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: MutationObserverFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
400
|
-
MutationObserverFactory.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: MutationObserverFactory, providedIn: 'root' });
|
|
401
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: MutationObserverFactory, decorators: [{
|
|
402
|
-
type: Injectable,
|
|
403
|
-
args: [{ providedIn: 'root' }]
|
|
404
|
-
}] });
|
|
405
|
-
class ContentObserverService {
|
|
406
|
-
constructor(_mutationObserverFactory) {
|
|
407
|
-
this._mutationObserverFactory = _mutationObserverFactory;
|
|
408
|
-
this._observedElements = new Map();
|
|
562
|
+
_enableCursorDragScroll() {
|
|
563
|
+
const contentResizeSub = combineLatest([
|
|
564
|
+
this._contentObserverService.observe(this._elementRef.nativeElement).pipe(startWith(null)),
|
|
565
|
+
this._resizeObserverService.observe(this._elementRef.nativeElement).pipe(startWith(null)),
|
|
566
|
+
])
|
|
567
|
+
.pipe(debounceTime(25), tap(() => this._updateCanScrollState()), takeUntil(this._destroy$))
|
|
568
|
+
.subscribe();
|
|
569
|
+
const mousedownSub = fromEvent(this._elementRef.nativeElement, 'mousedown')
|
|
570
|
+
.pipe(tap((e) => this._onMouseDown(e)), takeUntil(this._destroy$))
|
|
571
|
+
.subscribe();
|
|
572
|
+
this._subscriptions.push(contentResizeSub, mousedownSub);
|
|
573
|
+
this._updateCanScrollState();
|
|
409
574
|
}
|
|
410
|
-
|
|
411
|
-
this.
|
|
575
|
+
_disableCursorDragScroll() {
|
|
576
|
+
this._subscriptions.forEach((sub) => sub.unsubscribe());
|
|
577
|
+
this._subscriptions.length = 0;
|
|
578
|
+
this._elementRef.nativeElement.style.cursor = 'default';
|
|
412
579
|
}
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
580
|
+
_onMouseDown(e) {
|
|
581
|
+
if (!this._elementRef?.nativeElement || !this._canScroll) {
|
|
582
|
+
return;
|
|
583
|
+
}
|
|
584
|
+
const element = this._elementRef.nativeElement;
|
|
585
|
+
element.classList.add(CURSOR_DRAG_SCROLLING_PREPARED_CLASS);
|
|
586
|
+
this._elementRef.nativeElement.style.scrollSnapType = 'none';
|
|
587
|
+
this._elementRef.nativeElement.style.scrollBehavior = 'unset';
|
|
588
|
+
this._currentScrollState = {
|
|
589
|
+
left: this._elementRef.nativeElement.scrollLeft,
|
|
590
|
+
top: this._elementRef.nativeElement.scrollTop,
|
|
591
|
+
x: e.clientX,
|
|
592
|
+
y: e.clientY,
|
|
593
|
+
};
|
|
594
|
+
fromEvent(document, 'mousemove')
|
|
595
|
+
.pipe(tap((e) => this._mouseMoveHandler(e)), takeUntil(this._mouseUp$), takeUntil(this._destroy$))
|
|
596
|
+
.subscribe();
|
|
597
|
+
fromEvent(document, 'mouseup')
|
|
598
|
+
.pipe(tap(() => this._mouseUpHandler()), take(1), takeUntil(this._destroy$))
|
|
599
|
+
.subscribe();
|
|
423
600
|
}
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
601
|
+
_mouseMoveHandler(e) {
|
|
602
|
+
e.preventDefault();
|
|
603
|
+
if (!this._elementRef?.nativeElement) {
|
|
604
|
+
return;
|
|
605
|
+
}
|
|
606
|
+
const dx = e.clientX - this._currentScrollState.x;
|
|
607
|
+
const dy = e.clientY - this._currentScrollState.y;
|
|
608
|
+
if (Math.abs(dx) > this._bufferUntilScroll || Math.abs(dy) > this._bufferUntilScroll) {
|
|
609
|
+
const element = this._elementRef.nativeElement;
|
|
610
|
+
if (!this._isScrolling) {
|
|
611
|
+
this._isScrolling = true;
|
|
612
|
+
element.style.cursor = 'grabbing';
|
|
613
|
+
element.classList.add(CURSOR_DRAG_SCROLLING_CLASS);
|
|
614
|
+
element.scroll({
|
|
615
|
+
top: this._currentScrollState.top - dy,
|
|
616
|
+
left: this._currentScrollState.left - dx,
|
|
617
|
+
behavior: 'smooth',
|
|
433
618
|
});
|
|
434
619
|
}
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
this._observedElements.get(element).count++;
|
|
439
|
-
}
|
|
440
|
-
return this._observedElements.get(element).stream;
|
|
441
|
-
}
|
|
442
|
-
_unobserveElement(element) {
|
|
443
|
-
if (this._observedElements.has(element)) {
|
|
444
|
-
this._observedElements.get(element).count--;
|
|
445
|
-
if (!this._observedElements.get(element).count) {
|
|
446
|
-
this._cleanupObserver(element);
|
|
620
|
+
else {
|
|
621
|
+
element.scrollTop = this._currentScrollState.top - dy;
|
|
622
|
+
element.scrollLeft = this._currentScrollState.left - dx;
|
|
447
623
|
}
|
|
448
624
|
}
|
|
449
625
|
}
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
}
|
|
456
|
-
stream.complete();
|
|
457
|
-
this._observedElements.delete(element);
|
|
626
|
+
_mouseUpHandler() {
|
|
627
|
+
this._mouseUp$.next(true);
|
|
628
|
+
this._isScrolling = false;
|
|
629
|
+
if (!this._elementRef?.nativeElement) {
|
|
630
|
+
return;
|
|
458
631
|
}
|
|
632
|
+
this._elementRef.nativeElement.style.scrollSnapType = '';
|
|
633
|
+
this._elementRef.nativeElement.style.scrollBehavior = '';
|
|
634
|
+
this._elementRef.nativeElement.style.cursor = 'grab';
|
|
635
|
+
this._elementRef.nativeElement.classList.remove(CURSOR_DRAG_SCROLLING_CLASS);
|
|
636
|
+
this._elementRef.nativeElement.classList.remove(CURSOR_DRAG_SCROLLING_PREPARED_CLASS);
|
|
459
637
|
}
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
type: Injectable,
|
|
465
|
-
args: [{ providedIn: 'root' }]
|
|
466
|
-
}], ctorParameters: function () { return [{ type: MutationObserverFactory }]; } });
|
|
467
|
-
|
|
468
|
-
/* eslint-disable @typescript-eslint/no-non-null-assertion */
|
|
469
|
-
class ClickObserverFactory {
|
|
470
|
-
create() {
|
|
471
|
-
return fromEvent(document, 'click');
|
|
472
|
-
}
|
|
473
|
-
}
|
|
474
|
-
ClickObserverFactory.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: ClickObserverFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
475
|
-
ClickObserverFactory.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: ClickObserverFactory, providedIn: 'root' });
|
|
476
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.9", ngImport: i0, type: ClickObserverFactory, decorators: [{
|
|
477
|
-
type: Injectable,
|
|
478
|
-
args: [{ providedIn: 'root' }]
|
|
479
|
-
}] });
|
|
480
|
-
class ClickObserverService {
|
|
481
|
-
constructor(_clickObserverFactory) {
|
|
482
|
-
this._clickObserverFactory = _clickObserverFactory;
|
|
483
|
-
this._observedElements = new Map();
|
|
484
|
-
}
|
|
485
|
-
ngOnDestroy() {
|
|
486
|
-
this._observedElements.forEach((_, element) => this._cleanupObserver(element));
|
|
487
|
-
}
|
|
488
|
-
observe(elementOrRef) {
|
|
489
|
-
const element = coerceElement(elementOrRef);
|
|
490
|
-
return new Observable((observer) => {
|
|
491
|
-
const stream = this._observeElement(element);
|
|
492
|
-
const subscription = stream.subscribe(observer);
|
|
493
|
-
return () => {
|
|
494
|
-
subscription.unsubscribe();
|
|
495
|
-
this._unobserveElement(element);
|
|
496
|
-
};
|
|
497
|
-
});
|
|
498
|
-
}
|
|
499
|
-
_observeElement(element) {
|
|
500
|
-
if (!this._observedElements.has(element)) {
|
|
501
|
-
const stream = new Subject();
|
|
502
|
-
const observer = this._clickObserverFactory.create();
|
|
503
|
-
const sub = observer.subscribe((event) => stream.next(event));
|
|
504
|
-
this._observedElements.set(element, { observer: sub, stream, count: 1 });
|
|
638
|
+
_updateCanScrollState() {
|
|
639
|
+
this._canScroll = elementCanScroll(this._elementRef.nativeElement);
|
|
640
|
+
if (this._canScroll) {
|
|
641
|
+
this._elementRef.nativeElement.style.cursor = 'grab';
|
|
505
642
|
}
|
|
506
643
|
else {
|
|
507
|
-
this.
|
|
508
|
-
}
|
|
509
|
-
return this._observedElements.get(element).stream;
|
|
510
|
-
}
|
|
511
|
-
_unobserveElement(element) {
|
|
512
|
-
if (this._observedElements.has(element)) {
|
|
513
|
-
this._observedElements.get(element).count--;
|
|
514
|
-
if (!this._observedElements.get(element).count) {
|
|
515
|
-
this._cleanupObserver(element);
|
|
516
|
-
}
|
|
517
|
-
}
|
|
518
|
-
}
|
|
519
|
-
_cleanupObserver(element) {
|
|
520
|
-
if (this._observedElements.has(element)) {
|
|
521
|
-
const { observer, stream } = this._observedElements.get(element);
|
|
522
|
-
if (observer) {
|
|
523
|
-
observer.unsubscribe();
|
|
524
|
-
}
|
|
525
|
-
stream.complete();
|
|
526
|
-
this._observedElements.delete(element);
|
|
644
|
+
this._elementRef.nativeElement.style.cursor = 'default';
|
|
527
645
|
}
|
|
528
646
|
}
|
|
529
|
-
}
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
533
|
-
type:
|
|
534
|
-
args: [{
|
|
535
|
-
|
|
647
|
+
}
|
|
648
|
+
CursorDragScrollDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: CursorDragScrollDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
649
|
+
CursorDragScrollDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: CursorDragScrollDirective, isStandalone: true, selector: "[etCursorDragScroll]", inputs: { enabled: ["etCursorDragScroll", "enabled"] }, providers: [DestroyService], exportAs: ["etCursorDragScroll"], ngImport: i0 });
|
|
650
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: CursorDragScrollDirective, decorators: [{
|
|
651
|
+
type: Directive,
|
|
652
|
+
args: [{
|
|
653
|
+
selector: '[etCursorDragScroll]',
|
|
654
|
+
exportAs: 'etCursorDragScroll',
|
|
655
|
+
standalone: true,
|
|
656
|
+
providers: [DestroyService],
|
|
657
|
+
}]
|
|
658
|
+
}], propDecorators: { enabled: [{
|
|
659
|
+
type: Input,
|
|
660
|
+
args: ['etCursorDragScroll']
|
|
661
|
+
}] } });
|
|
536
662
|
|
|
537
|
-
class
|
|
663
|
+
class DestroyDirective {
|
|
538
664
|
constructor() {
|
|
539
665
|
this._destroy$ = new Subject();
|
|
540
|
-
|
|
541
|
-
get destroy$() {
|
|
542
|
-
return this._destroy$.asObservable();
|
|
666
|
+
this.destroy$ = this._destroy$.asObservable();
|
|
543
667
|
}
|
|
544
668
|
ngOnDestroy() {
|
|
545
669
|
this._destroy$.next(true);
|
|
546
670
|
this._destroy$.unsubscribe();
|
|
547
671
|
}
|
|
548
672
|
}
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
552
|
-
type:
|
|
673
|
+
DestroyDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DestroyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
674
|
+
DestroyDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: DestroyDirective, isStandalone: true, ngImport: i0 });
|
|
675
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DestroyDirective, decorators: [{
|
|
676
|
+
type: Directive,
|
|
553
677
|
args: [{
|
|
554
|
-
|
|
678
|
+
standalone: true,
|
|
555
679
|
}]
|
|
556
680
|
}] });
|
|
557
681
|
|
|
558
|
-
class
|
|
682
|
+
class LetContext {
|
|
559
683
|
constructor() {
|
|
560
|
-
|
|
684
|
+
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
685
|
+
this.$implicit = null;
|
|
686
|
+
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
687
|
+
this.etLet = null;
|
|
688
|
+
}
|
|
689
|
+
}
|
|
690
|
+
|
|
691
|
+
class LetDirective {
|
|
692
|
+
constructor(_viewContainer, templateRef) {
|
|
693
|
+
this._viewContainer = _viewContainer;
|
|
694
|
+
this._context = new LetContext();
|
|
695
|
+
this._templateRef = null;
|
|
696
|
+
this._viewRef = null;
|
|
697
|
+
this._templateRef = templateRef;
|
|
698
|
+
}
|
|
699
|
+
set etLet(value) {
|
|
700
|
+
this._context.$implicit = this._context.etLet = value;
|
|
701
|
+
this._updateView();
|
|
702
|
+
}
|
|
703
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
704
|
+
static ngTemplateContextGuard(dir, ctx) {
|
|
705
|
+
return true;
|
|
706
|
+
}
|
|
707
|
+
_updateView() {
|
|
708
|
+
if (!this._viewRef) {
|
|
709
|
+
this._viewContainer.clear();
|
|
710
|
+
if (this._templateRef) {
|
|
711
|
+
this._viewRef = this._viewContainer.createEmbeddedView(this._templateRef, this._context);
|
|
712
|
+
}
|
|
713
|
+
}
|
|
714
|
+
}
|
|
715
|
+
}
|
|
716
|
+
LetDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: LetDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
717
|
+
LetDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: LetDirective, isStandalone: true, selector: "[etLet]", inputs: { etLet: "etLet" }, ngImport: i0 });
|
|
718
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: LetDirective, decorators: [{
|
|
719
|
+
type: Directive,
|
|
720
|
+
args: [{
|
|
721
|
+
selector: '[etLet]',
|
|
722
|
+
standalone: true,
|
|
723
|
+
}]
|
|
724
|
+
}], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }]; }, propDecorators: { etLet: [{
|
|
725
|
+
type: Input
|
|
726
|
+
}] } });
|
|
727
|
+
|
|
728
|
+
class ObserveContentDirective {
|
|
729
|
+
constructor() {
|
|
730
|
+
this._contentObserver = inject(ContentObserverService);
|
|
561
731
|
this._elementRef = inject(ElementRef);
|
|
562
732
|
this._ngZone = inject(NgZone);
|
|
563
733
|
this.event = new EventEmitter();
|
|
@@ -589,38 +759,38 @@ class ObserveResizeDirective {
|
|
|
589
759
|
}
|
|
590
760
|
_subscribe() {
|
|
591
761
|
this._unsubscribe();
|
|
592
|
-
const stream = this.
|
|
762
|
+
const stream = this._contentObserver.observe(this._elementRef);
|
|
593
763
|
this._ngZone.runOutsideAngular(() => {
|
|
594
|
-
this._currentSubscription = (this.debounce ? stream.pipe(debounceTime(this.debounce)) : stream).subscribe(this.event);
|
|
764
|
+
this._currentSubscription = (this.debounce ? stream.pipe(debounceTime$1(this.debounce)) : stream).subscribe(this.event);
|
|
595
765
|
});
|
|
596
766
|
}
|
|
597
767
|
_unsubscribe() {
|
|
598
768
|
this._currentSubscription?.unsubscribe();
|
|
599
769
|
}
|
|
600
770
|
}
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
771
|
+
ObserveContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: ObserveContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
772
|
+
ObserveContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: ObserveContentDirective, isStandalone: true, selector: "[etObserveContent]", inputs: { disabled: ["etObserveContentDisabled", "disabled"], debounce: ["etObserveContentDebounce", "debounce"] }, outputs: { event: "etObserveContent" }, exportAs: ["etObserveContent"], ngImport: i0 });
|
|
773
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: ObserveContentDirective, decorators: [{
|
|
604
774
|
type: Directive,
|
|
605
775
|
args: [{
|
|
606
|
-
selector: '[
|
|
607
|
-
exportAs: '
|
|
776
|
+
selector: '[etObserveContent]',
|
|
777
|
+
exportAs: 'etObserveContent',
|
|
608
778
|
standalone: true,
|
|
609
779
|
}]
|
|
610
780
|
}], propDecorators: { event: [{
|
|
611
781
|
type: Output,
|
|
612
|
-
args: ['
|
|
782
|
+
args: ['etObserveContent']
|
|
613
783
|
}], disabled: [{
|
|
614
784
|
type: Input,
|
|
615
|
-
args: ['
|
|
785
|
+
args: ['etObserveContentDisabled']
|
|
616
786
|
}], debounce: [{
|
|
617
787
|
type: Input,
|
|
618
|
-
args: ['
|
|
788
|
+
args: ['etObserveContentDebounce']
|
|
619
789
|
}] } });
|
|
620
790
|
|
|
621
|
-
class
|
|
791
|
+
class ObserveResizeDirective {
|
|
622
792
|
constructor() {
|
|
623
|
-
this.
|
|
793
|
+
this._resizeObserver = inject(ResizeObserverService);
|
|
624
794
|
this._elementRef = inject(ElementRef);
|
|
625
795
|
this._ngZone = inject(NgZone);
|
|
626
796
|
this.event = new EventEmitter();
|
|
@@ -652,88 +822,69 @@ class ObserveContentDirective {
|
|
|
652
822
|
}
|
|
653
823
|
_subscribe() {
|
|
654
824
|
this._unsubscribe();
|
|
655
|
-
const stream = this.
|
|
825
|
+
const stream = this._resizeObserver.observe(this._elementRef);
|
|
656
826
|
this._ngZone.runOutsideAngular(() => {
|
|
657
|
-
this._currentSubscription = (this.debounce ? stream.pipe(debounceTime
|
|
827
|
+
this._currentSubscription = (this.debounce ? stream.pipe(debounceTime(this.debounce)) : stream).subscribe(this.event);
|
|
658
828
|
});
|
|
659
829
|
}
|
|
660
830
|
_unsubscribe() {
|
|
661
831
|
this._currentSubscription?.unsubscribe();
|
|
662
832
|
}
|
|
663
833
|
}
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
834
|
+
ObserveResizeDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: ObserveResizeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
835
|
+
ObserveResizeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: ObserveResizeDirective, isStandalone: true, selector: "[etObserveResize]", inputs: { disabled: ["etObserveResizeDisabled", "disabled"], debounce: ["etObserveResizeDebounce", "debounce"] }, outputs: { event: "etObserveResize" }, exportAs: ["etObserveResize"], ngImport: i0 });
|
|
836
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: ObserveResizeDirective, decorators: [{
|
|
667
837
|
type: Directive,
|
|
668
838
|
args: [{
|
|
669
|
-
selector: '[
|
|
670
|
-
exportAs: '
|
|
839
|
+
selector: '[etObserveResize]',
|
|
840
|
+
exportAs: 'etObserveResize',
|
|
671
841
|
standalone: true,
|
|
672
842
|
}]
|
|
673
843
|
}], propDecorators: { event: [{
|
|
674
844
|
type: Output,
|
|
675
|
-
args: ['
|
|
845
|
+
args: ['etObserveResize']
|
|
676
846
|
}], disabled: [{
|
|
677
847
|
type: Input,
|
|
678
|
-
args: ['
|
|
848
|
+
args: ['etObserveResizeDisabled']
|
|
679
849
|
}], debounce: [{
|
|
680
850
|
type: Input,
|
|
681
|
-
args: ['
|
|
851
|
+
args: ['etObserveResizeDebounce']
|
|
682
852
|
}] } });
|
|
683
853
|
|
|
684
|
-
|
|
854
|
+
const SCROLL_OBSERVER_FIRST_ELEMENT_CLASS = 'et-scroll-observer-first-element';
|
|
855
|
+
class ScrollObserverFirstElementDirective {
|
|
685
856
|
constructor() {
|
|
686
|
-
this.
|
|
687
|
-
this._clickObserverService = inject(ClickObserverService);
|
|
688
|
-
this._subscription = null;
|
|
689
|
-
this.etClickOutside = new EventEmitter();
|
|
857
|
+
this._isFirstElement = false;
|
|
690
858
|
}
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
this._subscription = this._clickObserverService.observe(this._elementRef.nativeElement).subscribe((event) => {
|
|
694
|
-
const activeElement = event.target;
|
|
695
|
-
const isInside = this._elementRef.nativeElement.contains(activeElement);
|
|
696
|
-
if (!isInside) {
|
|
697
|
-
this.etClickOutside.emit(event);
|
|
698
|
-
}
|
|
699
|
-
});
|
|
700
|
-
});
|
|
859
|
+
get isFirstElement() {
|
|
860
|
+
return this._isFirstElement;
|
|
701
861
|
}
|
|
702
|
-
|
|
703
|
-
this.
|
|
862
|
+
set isFirstElement(value) {
|
|
863
|
+
this._isFirstElement = coerceBooleanProperty(value);
|
|
704
864
|
}
|
|
705
865
|
}
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
866
|
+
ScrollObserverFirstElementDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: ScrollObserverFirstElementDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
867
|
+
ScrollObserverFirstElementDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: ScrollObserverFirstElementDirective, isStandalone: true, selector: "[etScrollObserverFirstElement]", inputs: { isFirstElement: ["etScrollObserverFirstElement", "isFirstElement"] }, host: { properties: { "class.et-scroll-observer-first-element": "this.isFirstElement" } }, ngImport: i0 });
|
|
868
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: ScrollObserverFirstElementDirective, decorators: [{
|
|
709
869
|
type: Directive,
|
|
710
870
|
args: [{
|
|
711
|
-
selector: '[
|
|
871
|
+
selector: '[etScrollObserverFirstElement]',
|
|
712
872
|
standalone: true,
|
|
713
873
|
}]
|
|
714
|
-
}], propDecorators: {
|
|
715
|
-
type:
|
|
874
|
+
}], propDecorators: { isFirstElement: [{
|
|
875
|
+
type: Input,
|
|
876
|
+
args: ['etScrollObserverFirstElement']
|
|
877
|
+
}, {
|
|
878
|
+
type: HostBinding,
|
|
879
|
+
args: [`class.${SCROLL_OBSERVER_FIRST_ELEMENT_CLASS}`]
|
|
716
880
|
}] } });
|
|
717
881
|
|
|
718
|
-
const provideViewportConfig = (viewportConfig) => {
|
|
719
|
-
return { provide: VIEWPORT_CONFIG, useValue: viewportConfig };
|
|
720
|
-
};
|
|
721
|
-
|
|
722
|
-
const clamp = (value, min = 0, max = 100) => {
|
|
723
|
-
return Math.max(min, Math.min(max, value));
|
|
724
|
-
};
|
|
725
|
-
|
|
726
|
-
const elementCanScroll = (element) => {
|
|
727
|
-
const { scrollHeight, clientHeight, scrollWidth, clientWidth } = element;
|
|
728
|
-
return scrollHeight > clientHeight || scrollWidth > clientWidth;
|
|
729
|
-
};
|
|
730
|
-
|
|
731
882
|
const SCROLL_OBSERVER_IGNORE_TARGET_CLASS = 'et-scroll-observer-ignore-target';
|
|
732
883
|
class ScrollObserverIgnoreTargetDirective {
|
|
733
884
|
}
|
|
734
|
-
ScrollObserverIgnoreTargetDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
735
|
-
ScrollObserverIgnoreTargetDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
736
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
885
|
+
ScrollObserverIgnoreTargetDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: ScrollObserverIgnoreTargetDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
886
|
+
ScrollObserverIgnoreTargetDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: ScrollObserverIgnoreTargetDirective, isStandalone: true, selector: "[etScrollObserverIgnoreTarget]", host: { classAttribute: "et-scroll-observer-ignore-target" }, ngImport: i0 });
|
|
887
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: ScrollObserverIgnoreTargetDirective, decorators: [{
|
|
737
888
|
type: Directive,
|
|
738
889
|
args: [{
|
|
739
890
|
selector: '[etScrollObserverIgnoreTarget]',
|
|
@@ -744,6 +895,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.9", ngImpor
|
|
|
744
895
|
}]
|
|
745
896
|
}] });
|
|
746
897
|
|
|
898
|
+
const SCROLL_OBSERVER_LAST_ELEMENT_CLASS = 'et-scroll-observer-last-element';
|
|
899
|
+
class ScrollObserverLastElementDirective {
|
|
900
|
+
constructor() {
|
|
901
|
+
this._isLastElement = false;
|
|
902
|
+
}
|
|
903
|
+
get isLastElement() {
|
|
904
|
+
return this._isLastElement;
|
|
905
|
+
}
|
|
906
|
+
set isLastElement(value) {
|
|
907
|
+
this._isLastElement = coerceBooleanProperty(value);
|
|
908
|
+
}
|
|
909
|
+
}
|
|
910
|
+
ScrollObserverLastElementDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: ScrollObserverLastElementDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
911
|
+
ScrollObserverLastElementDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: ScrollObserverLastElementDirective, isStandalone: true, selector: "[etScrollObserverLastElement]", inputs: { isLastElement: ["etScrollObserverLastElement", "isLastElement"] }, host: { properties: { "class.et-scroll-observer-last-element": "this.isLastElement" }, classAttribute: "et-scroll-observer-last-element" }, ngImport: i0 });
|
|
912
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: ScrollObserverLastElementDirective, decorators: [{
|
|
913
|
+
type: Directive,
|
|
914
|
+
args: [{
|
|
915
|
+
selector: '[etScrollObserverLastElement]',
|
|
916
|
+
standalone: true,
|
|
917
|
+
host: {
|
|
918
|
+
class: SCROLL_OBSERVER_LAST_ELEMENT_CLASS,
|
|
919
|
+
},
|
|
920
|
+
}]
|
|
921
|
+
}], propDecorators: { isLastElement: [{
|
|
922
|
+
type: Input,
|
|
923
|
+
args: ['etScrollObserverLastElement']
|
|
924
|
+
}, {
|
|
925
|
+
type: HostBinding,
|
|
926
|
+
args: [`class.${SCROLL_OBSERVER_LAST_ELEMENT_CLASS}`]
|
|
927
|
+
}] } });
|
|
928
|
+
|
|
747
929
|
const OBSERVE_SCROLL_STATE = new InjectionToken('OBSERVE_SCROLL_STATE');
|
|
748
930
|
|
|
749
931
|
class ObserveScrollStateDirective {
|
|
@@ -762,10 +944,18 @@ class ObserveScrollStateDirective {
|
|
|
762
944
|
this.etObserveScrollState = new EventEmitter();
|
|
763
945
|
}
|
|
764
946
|
get _firstCurrentChild() {
|
|
947
|
+
const explicitFirstElement = this._elementRef.nativeElement.querySelector(`.${SCROLL_OBSERVER_FIRST_ELEMENT_CLASS}`);
|
|
948
|
+
if (explicitFirstElement) {
|
|
949
|
+
return explicitFirstElement;
|
|
950
|
+
}
|
|
765
951
|
const element = this._elementRef.nativeElement.children[0];
|
|
766
952
|
return this._getNonIgnoredChild(element, 'next');
|
|
767
953
|
}
|
|
768
954
|
get _lastCurrentChild() {
|
|
955
|
+
const explicitLastElement = this._elementRef.nativeElement.querySelector(`.${SCROLL_OBSERVER_LAST_ELEMENT_CLASS}`);
|
|
956
|
+
if (explicitLastElement) {
|
|
957
|
+
return explicitLastElement;
|
|
958
|
+
}
|
|
769
959
|
const element = this._elementRef.nativeElement.children[this._elementRef.nativeElement.children.length - 1];
|
|
770
960
|
return this._getNonIgnoredChild(element, 'previous');
|
|
771
961
|
}
|
|
@@ -789,7 +979,8 @@ class ObserveScrollStateDirective {
|
|
|
789
979
|
this._resizeObserverService
|
|
790
980
|
.observe(this._elementRef.nativeElement)
|
|
791
981
|
.pipe(debounceTime(25), tap(() => {
|
|
792
|
-
|
|
982
|
+
const canScroll = elementCanScroll(this._elementRef.nativeElement);
|
|
983
|
+
if ((!this._intersectionObserver && canScroll) || (this._intersectionObserver && !canScroll)) {
|
|
793
984
|
this._checkChildren();
|
|
794
985
|
}
|
|
795
986
|
}), takeUntil(this._destroy$))
|
|
@@ -839,12 +1030,14 @@ class ObserveScrollStateDirective {
|
|
|
839
1030
|
_observeChild(child, element) {
|
|
840
1031
|
this._intersectionObserver?.observe(element);
|
|
841
1032
|
this._observedChildren[child] = element;
|
|
1033
|
+
element.classList.add(`et-scroll-observer-observing-${child}-element`);
|
|
842
1034
|
}
|
|
843
1035
|
_unobserveChild(child) {
|
|
844
1036
|
const observedChild = this._observedChildren[child];
|
|
845
1037
|
if (!observedChild) {
|
|
846
1038
|
return;
|
|
847
1039
|
}
|
|
1040
|
+
observedChild.classList.remove('et-scroll-observer-observing-first-element', 'et-scroll-observer-observing-last-element');
|
|
848
1041
|
this._intersectionObserver?.unobserve(observedChild);
|
|
849
1042
|
this._observedChildren[child] = null;
|
|
850
1043
|
}
|
|
@@ -866,14 +1059,15 @@ class ObserveScrollStateDirective {
|
|
|
866
1059
|
return element;
|
|
867
1060
|
}
|
|
868
1061
|
}
|
|
869
|
-
ObserveScrollStateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
870
|
-
ObserveScrollStateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1062
|
+
ObserveScrollStateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: ObserveScrollStateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1063
|
+
ObserveScrollStateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: ObserveScrollStateDirective, isStandalone: true, selector: "[etObserveScrollState]", inputs: { observerRootMargin: "observerRootMargin", observerThreshold: "observerThreshold" }, outputs: { etObserveScrollState: "etObserveScrollState" }, providers: [
|
|
871
1064
|
{
|
|
872
1065
|
provide: OBSERVE_SCROLL_STATE,
|
|
873
1066
|
useExisting: ObserveScrollStateDirective,
|
|
874
1067
|
},
|
|
1068
|
+
DestroyService,
|
|
875
1069
|
], exportAs: ["etObserveScrollState"], ngImport: i0 });
|
|
876
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1070
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: ObserveScrollStateDirective, decorators: [{
|
|
877
1071
|
type: Directive,
|
|
878
1072
|
args: [{
|
|
879
1073
|
selector: '[etObserveScrollState]',
|
|
@@ -884,6 +1078,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.9", ngImpor
|
|
|
884
1078
|
provide: OBSERVE_SCROLL_STATE,
|
|
885
1079
|
useExisting: ObserveScrollStateDirective,
|
|
886
1080
|
},
|
|
1081
|
+
DestroyService,
|
|
887
1082
|
],
|
|
888
1083
|
}]
|
|
889
1084
|
}], propDecorators: { observerRootMargin: [{
|
|
@@ -894,125 +1089,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.9", ngImpor
|
|
|
894
1089
|
type: Output
|
|
895
1090
|
}] } });
|
|
896
1091
|
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
this._destroy$ = inject(DestroyService).destroy$;
|
|
903
|
-
this._elementRef = inject(ElementRef);
|
|
904
|
-
this._contentObserverService = inject(ContentObserverService);
|
|
905
|
-
this._resizeObserverService = inject(ResizeObserverService);
|
|
906
|
-
this._bufferUntilScroll = 5;
|
|
907
|
-
this._mouseUp$ = new Subject();
|
|
908
|
-
this._isScrolling = false;
|
|
909
|
-
this._canScroll = false;
|
|
910
|
-
this._currentScrollState = {
|
|
911
|
-
top: 0,
|
|
912
|
-
left: 0,
|
|
913
|
-
x: 0,
|
|
914
|
-
y: 0,
|
|
915
|
-
};
|
|
916
|
-
}
|
|
917
|
-
ngAfterViewInit() {
|
|
918
|
-
combineLatest([
|
|
919
|
-
this._contentObserverService.observe(this._elementRef.nativeElement),
|
|
920
|
-
this._resizeObserverService.observe(this._elementRef.nativeElement),
|
|
921
|
-
])
|
|
922
|
-
.pipe(tap(() => this._updateCanScrollState()), takeUntil(this._destroy$))
|
|
923
|
-
.subscribe();
|
|
924
|
-
fromEvent(this._elementRef.nativeElement, 'mousedown')
|
|
925
|
-
.pipe(tap((e) => this._onMouseDown(e)), takeUntil(this._destroy$))
|
|
926
|
-
.subscribe();
|
|
927
|
-
this._updateCanScrollState();
|
|
928
|
-
}
|
|
929
|
-
_onMouseDown(e) {
|
|
930
|
-
if (!this._elementRef?.nativeElement || !this._canScroll) {
|
|
931
|
-
return;
|
|
932
|
-
}
|
|
933
|
-
const element = this._elementRef.nativeElement;
|
|
934
|
-
element.classList.add(CURSOR_DRAG_SCROLLING_PREPARED_CLASS);
|
|
935
|
-
this._elementRef.nativeElement.style.scrollSnapType = 'none';
|
|
936
|
-
this._elementRef.nativeElement.style.scrollBehavior = 'unset';
|
|
937
|
-
this._currentScrollState = {
|
|
938
|
-
left: this._elementRef.nativeElement.scrollLeft,
|
|
939
|
-
top: this._elementRef.nativeElement.scrollTop,
|
|
940
|
-
x: e.clientX,
|
|
941
|
-
y: e.clientY,
|
|
942
|
-
};
|
|
943
|
-
fromEvent(document, 'mousemove')
|
|
944
|
-
.pipe(tap((e) => this._mouseMoveHandler(e)), takeUntil(this._mouseUp$), takeUntil(this._destroy$))
|
|
945
|
-
.subscribe();
|
|
946
|
-
fromEvent(document, 'mouseup')
|
|
947
|
-
.pipe(tap(() => this._mouseUpHandler()), take(1), takeUntil(this._destroy$))
|
|
948
|
-
.subscribe();
|
|
1092
|
+
class RepeatDirective {
|
|
1093
|
+
constructor(_mainTemplateRef, _viewContainerRef) {
|
|
1094
|
+
this._mainTemplateRef = _mainTemplateRef;
|
|
1095
|
+
this._viewContainerRef = _viewContainerRef;
|
|
1096
|
+
this._repeatCount = 2;
|
|
949
1097
|
}
|
|
950
|
-
|
|
951
|
-
|
|
952
|
-
if (!this._elementRef?.nativeElement) {
|
|
953
|
-
return;
|
|
954
|
-
}
|
|
955
|
-
const dx = e.clientX - this._currentScrollState.x;
|
|
956
|
-
const dy = e.clientY - this._currentScrollState.y;
|
|
957
|
-
if (Math.abs(dx) > this._bufferUntilScroll || Math.abs(dy) > this._bufferUntilScroll) {
|
|
958
|
-
const element = this._elementRef.nativeElement;
|
|
959
|
-
if (!this._isScrolling) {
|
|
960
|
-
this._isScrolling = true;
|
|
961
|
-
element.style.cursor = 'grabbing';
|
|
962
|
-
element.classList.add(CURSOR_DRAG_SCROLLING_CLASS);
|
|
963
|
-
element.scroll({
|
|
964
|
-
top: this._currentScrollState.top - dy,
|
|
965
|
-
left: this._currentScrollState.left - dx,
|
|
966
|
-
behavior: 'smooth',
|
|
967
|
-
});
|
|
968
|
-
}
|
|
969
|
-
else {
|
|
970
|
-
element.scrollTop = this._currentScrollState.top - dy;
|
|
971
|
-
element.scrollLeft = this._currentScrollState.left - dx;
|
|
972
|
-
}
|
|
973
|
-
}
|
|
1098
|
+
get repeatCount() {
|
|
1099
|
+
return this._repeatCount;
|
|
974
1100
|
}
|
|
975
|
-
|
|
976
|
-
this.
|
|
977
|
-
this._isScrolling = false;
|
|
978
|
-
if (!this._elementRef?.nativeElement) {
|
|
979
|
-
return;
|
|
980
|
-
}
|
|
981
|
-
this._elementRef.nativeElement.style.scrollSnapType = '';
|
|
982
|
-
this._elementRef.nativeElement.style.scrollBehavior = '';
|
|
983
|
-
this._elementRef.nativeElement.style.cursor = 'grab';
|
|
984
|
-
this._elementRef.nativeElement.classList.remove(CURSOR_DRAG_SCROLLING_CLASS);
|
|
985
|
-
this._elementRef.nativeElement.classList.remove(CURSOR_DRAG_SCROLLING_PREPARED_CLASS);
|
|
1101
|
+
set repeatCount(value) {
|
|
1102
|
+
this._repeatCount = coerceNumberProperty(value);
|
|
986
1103
|
}
|
|
987
|
-
|
|
988
|
-
this.
|
|
989
|
-
if (this._canScroll) {
|
|
990
|
-
this._elementRef.nativeElement.style.cursor = 'grab';
|
|
991
|
-
}
|
|
992
|
-
else {
|
|
993
|
-
this._elementRef.nativeElement.style.cursor = 'default';
|
|
994
|
-
}
|
|
1104
|
+
ngOnInit() {
|
|
1105
|
+
this._render();
|
|
995
1106
|
}
|
|
996
|
-
|
|
997
|
-
|
|
998
|
-
|
|
999
|
-
}
|
|
1000
|
-
if (this._elementRef.nativeElement.scrollHeight > this._elementRef.nativeElement.clientHeight) {
|
|
1001
|
-
return true;
|
|
1107
|
+
_render() {
|
|
1108
|
+
for (let i = 0; i < this.repeatCount; i++) {
|
|
1109
|
+
this._viewContainerRef.createEmbeddedView(this._mainTemplateRef);
|
|
1002
1110
|
}
|
|
1003
|
-
return false;
|
|
1004
1111
|
}
|
|
1005
1112
|
}
|
|
1006
|
-
|
|
1007
|
-
|
|
1008
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1113
|
+
RepeatDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: RepeatDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
1114
|
+
RepeatDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.0", type: RepeatDirective, isStandalone: true, selector: "[etRepeat]", inputs: { repeatCount: ["etRepeat", "repeatCount"] }, ngImport: i0 });
|
|
1115
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: RepeatDirective, decorators: [{
|
|
1009
1116
|
type: Directive,
|
|
1010
1117
|
args: [{
|
|
1011
|
-
selector: '[
|
|
1012
|
-
exportAs: 'etCursorDragScroll',
|
|
1118
|
+
selector: '[etRepeat]',
|
|
1013
1119
|
standalone: true,
|
|
1014
1120
|
}]
|
|
1015
|
-
}] }
|
|
1121
|
+
}], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }]; }, propDecorators: { repeatCount: [{
|
|
1122
|
+
type: Input,
|
|
1123
|
+
args: ['etRepeat']
|
|
1124
|
+
}] } });
|
|
1016
1125
|
|
|
1017
1126
|
const toArray = (value) => {
|
|
1018
1127
|
return Array.from({ length: value }, (_, i) => i);
|
|
@@ -1024,9 +1133,9 @@ class ToArrayPipe {
|
|
|
1024
1133
|
this.transform = toArray;
|
|
1025
1134
|
}
|
|
1026
1135
|
}
|
|
1027
|
-
ToArrayPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1028
|
-
ToArrayPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
1029
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1136
|
+
ToArrayPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: ToArrayPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
1137
|
+
ToArrayPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.0.0", ngImport: i0, type: ToArrayPipe, isStandalone: true, name: "toArray" });
|
|
1138
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: ToArrayPipe, decorators: [{
|
|
1030
1139
|
type: Pipe,
|
|
1031
1140
|
args: [{ name: 'toArray', standalone: true }]
|
|
1032
1141
|
}] });
|
|
@@ -1035,5 +1144,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.9", ngImpor
|
|
|
1035
1144
|
* Generated bundle index. Do not edit.
|
|
1036
1145
|
*/
|
|
1037
1146
|
|
|
1038
|
-
export { ClickObserverFactory, ClickObserverService, ClickOutsideDirective, ContentObserverService, CursorDragScrollDirective, DEFAULT_VIEWPORT_CONFIG, DestroyService, FocusVisibleService, LetContext, LetDirective, Memo, MutationObserverFactory, OBSERVE_SCROLL_STATE, ObserveContentDirective, ObserveResizeDirective, ObserveScrollStateDirective, RepeatDirective, ResizeObserverFactory, ResizeObserverService, SCROLL_OBSERVER_IGNORE_TARGET_CLASS, ScrollObserverIgnoreTargetDirective, ToArrayPipe, VIEWPORT_CONFIG, ViewportService, clamp, elementCanScroll, provideViewportConfig, toArray, toArrayTrackByFn };
|
|
1147
|
+
export { ClickObserverFactory, ClickObserverService, ClickOutsideDirective, ContentObserverService, CursorDragScrollDirective, DEFAULT_VIEWPORT_CONFIG, DestroyDirective, DestroyService, FocusVisibleService, LetContext, LetDirective, Memo, MutationObserverFactory, OBSERVE_SCROLL_STATE, ObserveContentDirective, ObserveResizeDirective, ObserveScrollStateDirective, RepeatDirective, ResizeObserverFactory, ResizeObserverService, SCROLL_OBSERVER_FIRST_ELEMENT_CLASS, SCROLL_OBSERVER_IGNORE_TARGET_CLASS, SCROLL_OBSERVER_LAST_ELEMENT_CLASS, ScrollObserverFirstElementDirective, ScrollObserverIgnoreTargetDirective, ScrollObserverLastElementDirective, ToArrayPipe, VIEWPORT_CONFIG, ViewportService, clamp, elementCanScroll, provideViewportConfig, toArray, toArrayTrackByFn };
|
|
1039
1148
|
//# sourceMappingURL=ethlete-core.mjs.map
|