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