ngx-kit 6.2.0 → 6.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/drawer-menu/README.md +125 -77
- package/fesm2022/ngx-kit-date-picker.mjs +10 -8
- package/fesm2022/ngx-kit-date-picker.mjs.map +1 -1
- package/fesm2022/ngx-kit-drawer-menu.mjs +302 -140
- package/fesm2022/ngx-kit-drawer-menu.mjs.map +1 -1
- package/fesm2022/ngx-kit-image-editor.mjs +2 -2
- package/fesm2022/ngx-kit-image-editor.mjs.map +1 -1
- package/fesm2022/ngx-kit-message.mjs +2 -2
- package/fesm2022/ngx-kit-message.mjs.map +1 -1
- package/package.json +1 -1
- package/types/ngx-kit-date-picker.d.ts +2 -1
- package/types/ngx-kit-drawer-menu.d.ts +97 -86
|
@@ -1,186 +1,348 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, model, inject, DOCUMENT, DestroyRef,
|
|
3
|
-
import { DirectionService
|
|
2
|
+
import { input, signal, model, computed, inject, DOCUMENT, DestroyRef, effect, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
+
import { DirectionService } from 'ngx-kit/shared';
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
|
-
*
|
|
7
|
-
* سه‌بعدی/ژله‌ای) و ۳ رفتار برای محتوای صفحه (overlay/push/reveal) —
|
|
8
|
-
* دقیقاً مدل کتابخونه‌های حرفه‌ای مثل react-burger-menu یا Ionic Menu، ولی
|
|
9
|
-
* signal-based و بدون هیچ وابستگی خارجی.
|
|
6
|
+
* Structural (not reference) equality for the `responsive` config.
|
|
10
7
|
*
|
|
11
|
-
*
|
|
12
|
-
*
|
|
13
|
-
*
|
|
14
|
-
*
|
|
15
|
-
*
|
|
16
|
-
*
|
|
17
|
-
*
|
|
18
|
-
* - افکت‌های jelly/pull با keyframe سه‌مرحله‌ای (overshoot → نوسان → استقرار)
|
|
19
|
-
* پیاده شدن، نه فقط یه transition ساده.
|
|
8
|
+
* Consumers are expected to pass this as an inline object literal (see README),
|
|
9
|
+
* which means the parent template creates a brand-new object on every change
|
|
10
|
+
* detection run. Without this comparator, the `responsive` input signal sees a
|
|
11
|
+
* "change" on every such run even when nothing actually changed, which re-triggers
|
|
12
|
+
* the viewport-sync effect and forcibly resets `open` back to the configured
|
|
13
|
+
* desktop/mobile default — silently overriding whatever the user just did by
|
|
14
|
+
* dragging, clicking, or toggling the drawer.
|
|
20
15
|
*/
|
|
16
|
+
function responsiveConfigsEqual(a, b) {
|
|
17
|
+
return (a === b ||
|
|
18
|
+
(a.mode === b.mode &&
|
|
19
|
+
a.breakpoint === b.breakpoint &&
|
|
20
|
+
a.desktopOpen === b.desktopOpen &&
|
|
21
|
+
a.mobileOpen === b.mobileOpen &&
|
|
22
|
+
a.desktopBehavior === b.desktopBehavior &&
|
|
23
|
+
a.mobileBehavior === b.mobileBehavior &&
|
|
24
|
+
a.respectPinned === b.respectPinned));
|
|
25
|
+
}
|
|
21
26
|
class NgxDrawerMenuComponent {
|
|
22
27
|
side = input('start', /* @ts-ignore */
|
|
23
28
|
...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
|
|
24
|
-
|
|
29
|
+
mode = input('overlay', /* @ts-ignore */
|
|
30
|
+
...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
|
|
31
|
+
/** When responsive mode is active, desktop/mobile can use different layout behavior. */
|
|
32
|
+
desktopBehavior = input('dock', /* @ts-ignore */
|
|
33
|
+
...(ngDevMode ? [{ debugName: "desktopBehavior" }] : /* istanbul ignore next */ []));
|
|
34
|
+
mobileBehavior = input('overlay', /* @ts-ignore */
|
|
35
|
+
...(ngDevMode ? [{ debugName: "mobileBehavior" }] : /* istanbul ignore next */ []));
|
|
36
|
+
responsiveDesktopBehavior = signal(null, /* @ts-ignore */
|
|
37
|
+
...(ngDevMode ? [{ debugName: "responsiveDesktopBehavior" }] : /* istanbul ignore next */ []));
|
|
38
|
+
responsiveMobileBehavior = signal(null, /* @ts-ignore */
|
|
39
|
+
...(ngDevMode ? [{ debugName: "responsiveMobileBehavior" }] : /* istanbul ignore next */ []));
|
|
40
|
+
effect = input('fabric', /* @ts-ignore */
|
|
25
41
|
...(ngDevMode ? [{ debugName: "effect" }] : /* istanbul ignore next */ []));
|
|
26
|
-
|
|
27
|
-
...(ngDevMode ? [{ debugName: "contentBehavior" }] : /* istanbul ignore next */ []));
|
|
28
|
-
width = input(280, /* @ts-ignore */
|
|
42
|
+
width = input(300, /* @ts-ignore */
|
|
29
43
|
...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
|
|
30
|
-
|
|
31
|
-
...(ngDevMode ? [{ debugName: "
|
|
32
|
-
|
|
33
|
-
...(ngDevMode ? [{ debugName: "
|
|
34
|
-
|
|
35
|
-
...(ngDevMode ? [{ debugName: "
|
|
44
|
+
maxWidth = input(420, /* @ts-ignore */
|
|
45
|
+
...(ngDevMode ? [{ debugName: "maxWidth" }] : /* istanbul ignore next */ []));
|
|
46
|
+
edgeSize = input(34, /* @ts-ignore */
|
|
47
|
+
...(ngDevMode ? [{ debugName: "edgeSize" }] : /* istanbul ignore next */ []));
|
|
48
|
+
dragThreshold = input(0.38, /* @ts-ignore */
|
|
49
|
+
...(ngDevMode ? [{ debugName: "dragThreshold" }] : /* istanbul ignore next */ []));
|
|
50
|
+
velocityThreshold = input(0.45, /* @ts-ignore */
|
|
51
|
+
...(ngDevMode ? [{ debugName: "velocityThreshold" }] : /* istanbul ignore next */ []));
|
|
52
|
+
/** Opens/closes the panel from the edge and while the panel itself is dragged. */
|
|
36
53
|
swipeEnabled = input(true, /* @ts-ignore */
|
|
37
54
|
...(ngDevMode ? [{ debugName: "swipeEnabled" }] : /* istanbul ignore next */ []));
|
|
38
|
-
/**
|
|
55
|
+
/** Allows closing by clicking the backdrop. */
|
|
56
|
+
backdropClose = input(true, /* @ts-ignore */
|
|
57
|
+
...(ngDevMode ? [{ debugName: "backdropClose" }] : /* istanbul ignore next */ []));
|
|
58
|
+
/** Allows Escape to close the drawer. */
|
|
59
|
+
escapeClose = input(true, /* @ts-ignore */
|
|
60
|
+
...(ngDevMode ? [{ debugName: "escapeClose" }] : /* istanbul ignore next */ []));
|
|
61
|
+
/** The drawer starts open unless explicitly configured otherwise. */
|
|
62
|
+
open = model(true, /* @ts-ignore */
|
|
63
|
+
...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
|
|
64
|
+
/** Pinned drawers are intended for persistent desktop navigation. */
|
|
65
|
+
pinned = model(false, /* @ts-ignore */
|
|
66
|
+
...(ngDevMode ? [{ debugName: "pinned" }] : /* istanbul ignore next */ []));
|
|
67
|
+
/** Responsive behavior. Can be overridden with individual inputs below. */
|
|
68
|
+
responsive = input({
|
|
69
|
+
mode: 'auto',
|
|
70
|
+
breakpoint: 768,
|
|
71
|
+
desktopOpen: true,
|
|
72
|
+
mobileOpen: false,
|
|
73
|
+
respectPinned: true,
|
|
74
|
+
desktopBehavior: 'dock',
|
|
75
|
+
mobileBehavior: 'overlay',
|
|
76
|
+
}, /* @ts-ignore */
|
|
77
|
+
...(ngDevMode ? [{ debugName: "responsive" }] : /* istanbul ignore next */ []));
|
|
78
|
+
/** Convenience aliases for the common responsive configuration. */
|
|
39
79
|
respondToViewport = input(true, /* @ts-ignore */
|
|
40
80
|
...(ngDevMode ? [{ debugName: "respondToViewport" }] : /* istanbul ignore next */ []));
|
|
81
|
+
mobileBreakpoint = input(768, /* @ts-ignore */
|
|
82
|
+
...(ngDevMode ? [{ debugName: "mobileBreakpoint" }] : /* istanbul ignore next */ []));
|
|
41
83
|
openOnDesktop = input(true, /* @ts-ignore */
|
|
42
84
|
...(ngDevMode ? [{ debugName: "openOnDesktop" }] : /* istanbul ignore next */ []));
|
|
43
85
|
openOnMobile = input(false, /* @ts-ignore */
|
|
44
86
|
...(ngDevMode ? [{ debugName: "openOnMobile" }] : /* istanbul ignore next */ []));
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
...(ngDevMode ? [{ debugName: "
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
...(ngDevMode ? [{ debugName: "
|
|
56
|
-
|
|
87
|
+
/** Visual tuning. */
|
|
88
|
+
curtainStrips = input(9, /* @ts-ignore */
|
|
89
|
+
...(ngDevMode ? [{ debugName: "curtainStrips" }] : /* istanbul ignore next */ []));
|
|
90
|
+
backdropOpacity = input(0.46, /* @ts-ignore */
|
|
91
|
+
...(ngDevMode ? [{ debugName: "backdropOpacity" }] : /* istanbul ignore next */ []));
|
|
92
|
+
transitionMs = input(420, /* @ts-ignore */
|
|
93
|
+
...(ngDevMode ? [{ debugName: "transitionMs" }] : /* istanbul ignore next */ []));
|
|
94
|
+
focusOnOpen = input(true, /* @ts-ignore */
|
|
95
|
+
...(ngDevMode ? [{ debugName: "focusOnOpen" }] : /* istanbul ignore next */ []));
|
|
96
|
+
dragProgress = signal(null, /* @ts-ignore */
|
|
97
|
+
...(ngDevMode ? [{ debugName: "dragProgress" }] : /* istanbul ignore next */ []));
|
|
98
|
+
dragVelocity = signal(0, /* @ts-ignore */
|
|
99
|
+
...(ngDevMode ? [{ debugName: "dragVelocity" }] : /* istanbul ignore next */ []));
|
|
100
|
+
isMobile = signal(false, /* @ts-ignore */
|
|
101
|
+
...(ngDevMode ? [{ debugName: "isMobile" }] : /* istanbul ignore next */ []));
|
|
102
|
+
effectiveBehavior = computed(() => {
|
|
103
|
+
if (!this.respondToViewport() || this.responsive().mode === 'off') {
|
|
104
|
+
return this.mode() === 'push' ? 'dock' : 'overlay';
|
|
105
|
+
}
|
|
106
|
+
return this.isMobile()
|
|
107
|
+
? (this.responsiveMobileBehavior() ?? this.mobileBehavior())
|
|
108
|
+
: (this.responsiveDesktopBehavior() ?? this.desktopBehavior());
|
|
109
|
+
}, /* @ts-ignore */
|
|
110
|
+
...(ngDevMode ? [{ debugName: "effectiveBehavior" }] : /* istanbul ignore next */ []));
|
|
111
|
+
isDocked = computed(() => this.respondToViewport() ? this.effectiveBehavior() === 'dock' : this.mode() === 'push', /* @ts-ignore */
|
|
112
|
+
...(ngDevMode ? [{ debugName: "isDocked" }] : /* istanbul ignore next */ []));
|
|
113
|
+
usesOverlay = computed(() => !this.isDocked(), /* @ts-ignore */
|
|
114
|
+
...(ngDevMode ? [{ debugName: "usesOverlay" }] : /* istanbul ignore next */ []));
|
|
115
|
+
isDragging = computed(() => this.dragProgress() !== null, /* @ts-ignore */
|
|
57
116
|
...(ngDevMode ? [{ debugName: "isDragging" }] : /* istanbul ignore next */ []));
|
|
58
|
-
|
|
59
|
-
...(ngDevMode ? [{ debugName: "
|
|
60
|
-
|
|
117
|
+
progress = computed(() => this.dragProgress() ?? (this.open() ? 1 : 0), /* @ts-ignore */
|
|
118
|
+
...(ngDevMode ? [{ debugName: "progress" }] : /* istanbul ignore next */ []));
|
|
119
|
+
isActuallyOpen = computed(() => this.progress() > 0.001, /* @ts-ignore */
|
|
120
|
+
...(ngDevMode ? [{ debugName: "isActuallyOpen" }] : /* istanbul ignore next */ []));
|
|
121
|
+
strips = computed(() => Array.from({ length: Math.max(3, this.curtainStrips()) }, (_, i) => i), /* @ts-ignore */
|
|
61
122
|
...(ngDevMode ? [{ debugName: "strips" }] : /* istanbul ignore next */ []));
|
|
62
|
-
/**
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
...(ngDevMode ? [{ debugName: "
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
123
|
+
/** Physical side: true means the drawer is attached to the physical left edge. */
|
|
124
|
+
isPhysicalLeft = computed(() => {
|
|
125
|
+
const rtl = this.directionService.isRtl();
|
|
126
|
+
return this.side() === 'start' ? !rtl : rtl;
|
|
127
|
+
}, /* @ts-ignore */
|
|
128
|
+
...(ngDevMode ? [{ debugName: "isPhysicalLeft" }] : /* istanbul ignore next */ []));
|
|
129
|
+
physicalSign = computed(() => (this.isPhysicalLeft() ? 1 : -1), /* @ts-ignore */
|
|
130
|
+
...(ngDevMode ? [{ debugName: "physicalSign" }] : /* istanbul ignore next */ []));
|
|
131
|
+
effectiveMode = computed(() => {
|
|
132
|
+
if (!this.respondToViewport() || this.responsive().mode === 'off')
|
|
133
|
+
return this.mode();
|
|
134
|
+
return this.effectiveBehavior() === 'dock' ? 'push' : 'overlay';
|
|
135
|
+
}, /* @ts-ignore */
|
|
136
|
+
...(ngDevMode ? [{ debugName: "effectiveMode" }] : /* istanbul ignore next */ []));
|
|
137
|
+
duration = computed(() => `${this.transitionMs()}ms`, /* @ts-ignore */
|
|
138
|
+
...(ngDevMode ? [{ debugName: "duration" }] : /* istanbul ignore next */ []));
|
|
139
|
+
directionService = inject(DirectionService);
|
|
140
|
+
document = inject(DOCUMENT);
|
|
141
|
+
destroyRef = inject(DestroyRef);
|
|
142
|
+
pointerId = null;
|
|
74
143
|
dragStartX = 0;
|
|
75
|
-
|
|
76
|
-
|
|
144
|
+
dragStartProgress = 0;
|
|
145
|
+
dragLastX = 0;
|
|
146
|
+
dragLastTime = 0;
|
|
147
|
+
lastVelocity = 0;
|
|
148
|
+
activePointerTarget = null;
|
|
149
|
+
resizeObserver;
|
|
150
|
+
mediaQuery;
|
|
151
|
+
mediaQueryListener;
|
|
152
|
+
lastManagedViewportState = null;
|
|
77
153
|
constructor() {
|
|
78
|
-
// قفل اسکرول پس‌زمینه حین باز بودن پنل (فقط در حالت overlay واقعاً لازمه،
|
|
79
|
-
// ولی در push/reveal هم بی‌ضرره و تجربه‌ی بهتری می‌ده)
|
|
80
154
|
effect((onCleanup) => {
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
155
|
+
const locked = this.open() && this.effectiveMode() === 'overlay';
|
|
156
|
+
if (!locked)
|
|
157
|
+
return;
|
|
158
|
+
const body = this.document.body;
|
|
159
|
+
const previous = body.style.overflow;
|
|
160
|
+
body.style.overflow = 'hidden';
|
|
161
|
+
onCleanup(() => (body.style.overflow = previous));
|
|
88
162
|
});
|
|
89
|
-
// پخش انیمیشن keyframeمحور فقط لحظه‌ای که open() واقعاً عوض می‌شه (نه هر CD)
|
|
90
163
|
effect(() => {
|
|
91
|
-
const
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
164
|
+
const config = this.responsive();
|
|
165
|
+
const enabled = this.respondToViewport() && config.mode !== 'off';
|
|
166
|
+
const breakpoint = config.breakpoint ?? this.mobileBreakpoint();
|
|
167
|
+
const desktopOpen = config.desktopOpen ?? this.openOnDesktop();
|
|
168
|
+
const mobileOpen = config.mobileOpen ?? this.openOnMobile();
|
|
169
|
+
const desktopBehavior = config.desktopBehavior ?? this.desktopBehavior();
|
|
170
|
+
const mobileBehavior = config.mobileBehavior ?? this.mobileBehavior();
|
|
171
|
+
this.responsiveDesktopBehavior.set(desktopBehavior);
|
|
172
|
+
this.responsiveMobileBehavior.set(mobileBehavior);
|
|
173
|
+
this.setupViewportSync(enabled, breakpoint, desktopOpen, mobileOpen, config.respectPinned ?? true);
|
|
174
|
+
});
|
|
175
|
+
this.destroyRef.onDestroy(() => {
|
|
176
|
+
this.disposePointer();
|
|
177
|
+
this.disposeViewportSync();
|
|
99
178
|
});
|
|
100
|
-
this.destroyRef.onDestroy(() => this.stopDrag?.());
|
|
101
|
-
// هماهنگیِ زنده با breakpoint
|
|
102
|
-
if (typeof window !== 'undefined') {
|
|
103
|
-
const mql = window.matchMedia(`(min-width: ${this.mobileBreakpoint()}px)`);
|
|
104
|
-
const applyForCurrentViewport = (isDesktop) => {
|
|
105
|
-
if (this.respondToViewport()) {
|
|
106
|
-
this.open.set(isDesktop ? this.openOnDesktop() : this.openOnMobile());
|
|
107
|
-
}
|
|
108
|
-
};
|
|
109
|
-
applyForCurrentViewport(mql.matches);
|
|
110
|
-
const handler = (e) => applyForCurrentViewport(e.matches);
|
|
111
|
-
mql.addEventListener('change', handler);
|
|
112
|
-
this.destroyRef.onDestroy(() => mql.removeEventListener('change', handler));
|
|
113
|
-
}
|
|
114
179
|
}
|
|
115
|
-
|
|
116
|
-
if (this.open())
|
|
117
|
-
|
|
180
|
+
toggle() {
|
|
181
|
+
if (this.pinned() && this.open())
|
|
182
|
+
return;
|
|
183
|
+
this.open.update((value) => !value);
|
|
118
184
|
}
|
|
119
|
-
|
|
120
|
-
|
|
185
|
+
openDrawer() {
|
|
186
|
+
this.open.set(true);
|
|
187
|
+
}
|
|
188
|
+
closeDrawer() {
|
|
189
|
+
if (!this.pinned())
|
|
121
190
|
this.open.set(false);
|
|
122
191
|
}
|
|
123
|
-
|
|
124
|
-
this.
|
|
192
|
+
pin() {
|
|
193
|
+
this.pinned.set(true);
|
|
194
|
+
this.open.set(true);
|
|
125
195
|
}
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
const isRtl = this.directionService.isRtl();
|
|
129
|
-
return this.side() === 'start' ? !isRtl : isRtl;
|
|
196
|
+
unpin() {
|
|
197
|
+
this.pinned.set(false);
|
|
130
198
|
}
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
return `${order * 28}ms`;
|
|
199
|
+
onEscape() {
|
|
200
|
+
if (this.escapeClose() && !this.pinned())
|
|
201
|
+
this.closeDrawer();
|
|
135
202
|
}
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
if (!this.swipeEnabled() || this.open())
|
|
203
|
+
onBackdropPointerDown(event) {
|
|
204
|
+
if (!this.backdropClose() || this.pinned() || !this.usesOverlay())
|
|
139
205
|
return;
|
|
140
|
-
|
|
206
|
+
event.preventDefault();
|
|
207
|
+
this.closeDrawer();
|
|
141
208
|
}
|
|
142
|
-
|
|
143
|
-
if (!this.open())
|
|
209
|
+
onEdgePointerDown(event) {
|
|
210
|
+
if (!this.swipeEnabled() || this.open() || this.pinned())
|
|
144
211
|
return;
|
|
145
|
-
this.beginDrag(
|
|
212
|
+
this.beginDrag(event, 0);
|
|
146
213
|
}
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
this.
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
214
|
+
onPanelPointerDown(event) {
|
|
215
|
+
if (!this.swipeEnabled() || !this.open() || this.pinned())
|
|
216
|
+
return;
|
|
217
|
+
if (event.button !== 0)
|
|
218
|
+
return;
|
|
219
|
+
this.beginDrag(event, 1);
|
|
220
|
+
}
|
|
221
|
+
beginDrag(event, startProgress) {
|
|
222
|
+
if (this.pointerId !== null)
|
|
223
|
+
return;
|
|
224
|
+
const target = event.currentTarget;
|
|
225
|
+
if (!target)
|
|
226
|
+
return;
|
|
227
|
+
this.pointerId = event.pointerId;
|
|
228
|
+
this.activePointerTarget = target;
|
|
229
|
+
this.dragStartX = event.clientX;
|
|
230
|
+
this.dragLastX = event.clientX;
|
|
231
|
+
this.dragLastTime = performance.now();
|
|
232
|
+
this.dragStartProgress = startProgress;
|
|
233
|
+
this.lastVelocity = 0;
|
|
234
|
+
this.dragProgress.set(startProgress);
|
|
235
|
+
target.setPointerCapture?.(event.pointerId);
|
|
236
|
+
event.preventDefault();
|
|
237
|
+
target.addEventListener('pointermove', this.onPointerMove);
|
|
238
|
+
target.addEventListener('pointerup', this.onPointerUp);
|
|
239
|
+
target.addEventListener('pointercancel', this.onPointerCancel);
|
|
240
|
+
}
|
|
241
|
+
onPointerMove = (event) => {
|
|
242
|
+
if (event.pointerId !== this.pointerId)
|
|
243
|
+
return;
|
|
244
|
+
const now = performance.now();
|
|
245
|
+
const dx = event.clientX - this.dragStartX;
|
|
246
|
+
const signedDistance = dx * this.physicalSign();
|
|
247
|
+
const next = this.clamp01(this.dragStartProgress + signedDistance / this.width());
|
|
248
|
+
const dt = Math.max(8, now - this.dragLastTime);
|
|
249
|
+
this.lastVelocity = ((event.clientX - this.dragLastX) * this.physicalSign()) / dt;
|
|
250
|
+
this.dragVelocity.set(this.lastVelocity);
|
|
251
|
+
this.dragLastX = event.clientX;
|
|
252
|
+
this.dragLastTime = now;
|
|
253
|
+
this.dragProgress.set(next);
|
|
254
|
+
event.preventDefault();
|
|
255
|
+
};
|
|
256
|
+
onPointerUp = (event) => {
|
|
257
|
+
if (event.pointerId !== this.pointerId)
|
|
258
|
+
return;
|
|
259
|
+
const progress = this.dragProgress() ?? this.dragStartProgress;
|
|
260
|
+
const velocity = this.dragVelocity();
|
|
261
|
+
const opening = velocity > this.velocityThreshold();
|
|
262
|
+
const closing = velocity < -this.velocityThreshold();
|
|
263
|
+
let shouldOpen;
|
|
264
|
+
if (opening)
|
|
265
|
+
shouldOpen = true;
|
|
266
|
+
else if (closing)
|
|
267
|
+
shouldOpen = false;
|
|
268
|
+
else
|
|
269
|
+
shouldOpen = progress >= this.dragThreshold();
|
|
270
|
+
this.open.set(shouldOpen);
|
|
271
|
+
this.dragProgress.set(null);
|
|
272
|
+
this.dragVelocity.set(0);
|
|
273
|
+
this.disposePointer(event.pointerId);
|
|
274
|
+
};
|
|
275
|
+
onPointerCancel = (event) => {
|
|
276
|
+
if (event.pointerId !== this.pointerId)
|
|
277
|
+
return;
|
|
278
|
+
const progress = this.dragProgress() ?? this.dragStartProgress;
|
|
279
|
+
this.open.set(progress >= 0.5);
|
|
280
|
+
this.dragProgress.set(null);
|
|
281
|
+
this.dragVelocity.set(0);
|
|
282
|
+
this.disposePointer(event.pointerId);
|
|
283
|
+
};
|
|
284
|
+
disposePointer(pointerId) {
|
|
285
|
+
if (pointerId !== undefined && this.pointerId !== pointerId)
|
|
286
|
+
return;
|
|
287
|
+
const target = this.activePointerTarget;
|
|
288
|
+
if (target) {
|
|
289
|
+
target.removeEventListener('pointermove', this.onPointerMove);
|
|
290
|
+
target.removeEventListener('pointerup', this.onPointerUp);
|
|
291
|
+
target.removeEventListener('pointercancel', this.onPointerCancel);
|
|
292
|
+
if (this.pointerId !== null) {
|
|
293
|
+
try {
|
|
294
|
+
target.releasePointerCapture?.(this.pointerId);
|
|
295
|
+
}
|
|
296
|
+
catch {
|
|
297
|
+
// Pointer capture may already be released by the browser.
|
|
298
|
+
}
|
|
299
|
+
}
|
|
300
|
+
}
|
|
301
|
+
this.pointerId = null;
|
|
302
|
+
this.activePointerTarget = null;
|
|
303
|
+
}
|
|
304
|
+
setupViewportSync(enabled, breakpoint, desktopOpen, mobileOpen, respectPinned) {
|
|
305
|
+
this.disposeViewportSync();
|
|
306
|
+
if (!enabled || typeof window === 'undefined') {
|
|
307
|
+
this.isMobile.set(false);
|
|
308
|
+
return;
|
|
309
|
+
}
|
|
310
|
+
this.mediaQuery = window.matchMedia(`(max-width: ${Math.max(0, breakpoint - 0.02)}px)`);
|
|
311
|
+
const apply = (isMobile) => {
|
|
312
|
+
this.isMobile.set(isMobile);
|
|
313
|
+
if (respectPinned && this.pinned())
|
|
314
|
+
return;
|
|
315
|
+
const next = isMobile ? mobileOpen : desktopOpen;
|
|
316
|
+
if (this.lastManagedViewportState === next)
|
|
317
|
+
return;
|
|
318
|
+
this.lastManagedViewportState = next;
|
|
319
|
+
this.open.set(next);
|
|
320
|
+
};
|
|
321
|
+
apply(this.mediaQuery.matches);
|
|
322
|
+
this.mediaQueryListener = (event) => apply(event.matches);
|
|
323
|
+
this.mediaQuery.addEventListener('change', this.mediaQueryListener);
|
|
324
|
+
}
|
|
325
|
+
disposeViewportSync() {
|
|
326
|
+
if (this.mediaQuery && this.mediaQueryListener) {
|
|
327
|
+
this.mediaQuery.removeEventListener('change', this.mediaQueryListener);
|
|
328
|
+
}
|
|
329
|
+
this.mediaQuery = undefined;
|
|
330
|
+
this.mediaQueryListener = undefined;
|
|
331
|
+
this.lastManagedViewportState = null;
|
|
168
332
|
}
|
|
169
|
-
|
|
170
|
-
return
|
|
171
|
-
? (ev.touches[0]?.clientX ?? ev.changedTouches[0]?.clientX ?? 0)
|
|
172
|
-
: ev.clientX;
|
|
333
|
+
clamp01(value) {
|
|
334
|
+
return Math.max(0, Math.min(1, value));
|
|
173
335
|
}
|
|
174
336
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDrawerMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
175
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: NgxDrawerMenuComponent, isStandalone: true, selector: "ngx-drawer-menu", inputs: { side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, effect: { classPropertyName: "effect", publicName: "effect", isSignal: true, isRequired: false, transformFunction: null }, contentBehavior: { classPropertyName: "contentBehavior", publicName: "contentBehavior", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, swipeEdgeSize: { classPropertyName: "swipeEdgeSize", publicName: "swipeEdgeSize", isSignal: true, isRequired: false, transformFunction: null }, curtainStrips: { classPropertyName: "curtainStrips", publicName: "curtainStrips", isSignal: true, isRequired: false, transformFunction: null }, backdropClose: { classPropertyName: "backdropClose", publicName: "backdropClose", isSignal: true, isRequired: false, transformFunction: null }, swipeEnabled: { classPropertyName: "swipeEnabled", publicName: "swipeEnabled", isSignal: true, isRequired: false, transformFunction: null }, respondToViewport: { classPropertyName: "respondToViewport", publicName: "respondToViewport", isSignal: true, isRequired: false, transformFunction: null }, openOnDesktop: { classPropertyName: "openOnDesktop", publicName: "openOnDesktop", isSignal: true, isRequired: false, transformFunction: null }, openOnMobile: { classPropertyName: "openOnMobile", publicName: "openOnMobile", isSignal: true, isRequired: false, transformFunction: null }, mobileBreakpoint: { classPropertyName: "mobileBreakpoint", publicName: "mobileBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { listeners: { "document:keydown.escape": "onEscape()" }, classAttribute: "ngx-drawer-menu-host" }, ngImport: i0, template: "<div\r\n class=\"ngx-drawer-root\"\r\n [class]=\"'behavior-' + contentBehavior()\"\r\n [style.perspective.px]=\"1200\">\r\n @if (swipeEnabled() && !open()) {\r\n <div\r\n class=\"ngx-drawer-edge-zone\"\r\n [class.edge-start]=\"side() === 'start'\"\r\n [class.edge-end]=\"side() === 'end'\"\r\n [style.--ngx-drawer-edge-size]=\"swipeEdgeSize() + 'px'\"\r\n (mousedown)=\"onEdgeDragStart($event)\"\r\n (touchstart)=\"onEdgeDragStart($event)\"></div>\r\n }\r\n\r\n @if (visualOpen() > 0 && contentBehavior() === 'overlay') {\r\n <div\r\n class=\"ngx-drawer-backdrop\"\r\n [style.opacity]=\"visualOpen()\"\r\n [class.no-transition]=\"isDragging()\"\r\n (click)=\"closeFromBackdrop()\"></div>\r\n }\r\n\r\n <div\r\n class=\"ngx-drawer-main\"\r\n [class.no-transition]=\"isDragging()\"\r\n [style.--ngx-drawer-width]=\"width() + 'px'\"\r\n [style.--ngx-drawer-open]=\"visualOpen()\"\r\n [style.--ngx-drawer-dir]=\"pushDirSign()\">\r\n <ng-content></ng-content>\r\n\r\n @if (visualOpen() > 0 && contentBehavior() !== 'overlay') {\r\n <div\r\n class=\"ngx-drawer-main-dim\"\r\n [style.opacity]=\"visualOpen() * 0.35\"\r\n (click)=\"closeFromBackdrop()\"></div>\r\n }\r\n </div>\r\n\r\n <aside\r\n class=\"ngx-drawer-panel\"\r\n [class]=\"'effect-' + effect()\"\r\n [class.side-start]=\"side() === 'start'\"\r\n [class.side-end]=\"side() === 'end'\"\r\n [class.no-transition]=\"isDragging()\"\r\n [class.is-open]=\"open()\"\r\n [class.playing]=\"playEffectClass()\"\r\n [style.--ngx-drawer-width]=\"width() + 'px'\"\r\n [style.--ngx-drawer-open]=\"visualOpen()\"\r\n role=\"dialog\"\r\n aria-modal=\"true\">\r\n <div\r\n class=\"ngx-drawer-drag-handle\"\r\n [class.edge-start]=\"side() === 'start'\"\r\n [class.edge-end]=\"side() === 'end'\"\r\n (mousedown)=\"onPanelDragStart($event)\"\r\n (touchstart)=\"onPanelDragStart($event)\"></div>\r\n\r\n <div class=\"ngx-drawer-content\">\r\n <ng-content select=\"[drawerContent]\"></ng-content>\r\n </div>\r\n\r\n @if (effect() === 'curtain') {\r\n <div\r\n class=\"ngx-drawer-curtain\"\r\n [class.open]=\"open()\"\r\n [class.revealed]=\"visualOpen() >= 1 && !isDragging()\">\r\n @for (i of strips(); track i) {\r\n <div\r\n class=\"ngx-drawer-strip\"\r\n [class.side-start]=\"side() === 'start'\"\r\n [class.side-end]=\"side() === 'end'\"\r\n [style.transition-delay]=\"stripDelay(i)\"></div>\r\n }\r\n </div>\r\n }\r\n </aside>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:contents}:host{display:block;position:relative}.ngx-drawer-root{display:block;position:relative;min-block-size:100%}.ngx-drawer-edge-zone{position:fixed;inset-block:0;inline-size:var(--ngx-drawer-edge-size, 24px);z-index:1400;touch-action:pan-y}.ngx-drawer-edge-zone.edge-start{inset-inline-start:0}.ngx-drawer-edge-zone.edge-end{inset-inline-end:0}.ngx-drawer-backdrop{position:fixed;inset:0;background:#00000080;z-index:1450;transition:opacity .22s ease}.ngx-drawer-backdrop.no-transition{transition:none}.ngx-drawer-main{position:relative;min-block-size:100%;transition:transform .32s cubic-bezier(.22,.9,.32,1)}.ngx-drawer-main.no-transition{transition:none}.ngx-drawer-main-dim{position:absolute;inset:0;background:#000;pointer-events:auto;transition:opacity .22s ease}.behavior-push .ngx-drawer-main{transform:translate(calc(var(--ngx-drawer-open, 0) * var(--ngx-drawer-width, 280px) * var(--ngx-drawer-dir, 1)))}.behavior-reveal .ngx-drawer-main{transform-origin:center;border-radius:calc(var(--ngx-drawer-open, 0) * 16px);overflow:hidden;transform:scale(calc(1 - .08 * var(--ngx-drawer-open, 0))) translate(calc(var(--ngx-drawer-open, 0) * var(--ngx-drawer-width, 280px) * .28 * var(--ngx-drawer-dir, 1)))}.ngx-drawer-panel{position:fixed;inset-block:0;inline-size:var(--ngx-drawer-width, 280px);background:light-dark(#ffffff,#1c1c20);color:light-dark(#111827,#f4f4f5);z-index:1500;box-shadow:0 0 24px #00000040;overflow:hidden;transition:inset-inline-start .32s cubic-bezier(.22,.9,.32,1),inset-inline-end .32s cubic-bezier(.22,.9,.32,1),transform .32s cubic-bezier(.22,.9,.32,1),opacity .32s ease}.ngx-drawer-panel.side-start{inset-inline-start:calc((var(--ngx-drawer-open, 0) - 1) * var(--ngx-drawer-width, 280px))}.ngx-drawer-panel.side-end{inset-inline-end:calc((var(--ngx-drawer-open, 0) - 1) * var(--ngx-drawer-width, 280px))}.ngx-drawer-panel.no-transition{transition:none}.ngx-drawer-drag-handle{position:absolute;inset-block:0;inline-size:20px;z-index:2;touch-action:pan-y}.ngx-drawer-drag-handle.edge-start{inset-inline-end:-10px}.ngx-drawer-drag-handle.edge-end{inset-inline-start:-10px}.ngx-drawer-content{position:relative;block-size:100%;overflow-y:auto}.effect-scale.side-start{inset-inline-start:0;inset-inline-end:auto}.effect-scale.side-end{inset-inline-start:auto;inset-inline-end:0}.effect-scale{transform-origin:center;transform:scale(calc(.72 + .28 * var(--ngx-drawer-open, 0)));opacity:var(--ngx-drawer-open, 0);pointer-events:none}.effect-scale.is-open{pointer-events:auto}.effect-rotate3d{transform-style:preserve-3d;opacity:calc(.35 + .65 * var(--ngx-drawer-open, 0))}.effect-rotate3d.side-start{inset-inline-start:0;inset-inline-end:auto;transform-origin:left center;transform:rotateY(calc((1 - var(--ngx-drawer-open, 0)) * -100deg))}.effect-rotate3d.side-end{inset-inline-start:auto;inset-inline-end:0;transform-origin:right center;transform:rotateY(calc((1 - var(--ngx-drawer-open, 0)) * 100deg))}.effect-flip3d{transform-style:preserve-3d;box-shadow:0 0 30px #00000059}.effect-flip3d.side-start{inset-inline-start:0;inset-inline-end:auto;transform-origin:left center;transform:rotateY(calc((1 - var(--ngx-drawer-open, 0)) * -115deg)) translateZ(calc((1 - var(--ngx-drawer-open, 0)) * -50px))}.effect-flip3d.side-end{inset-inline-start:auto;inset-inline-end:0;transform-origin:right center;transform:rotateY(calc((1 - var(--ngx-drawer-open, 0)) * 115deg)) translateZ(calc((1 - var(--ngx-drawer-open, 0)) * -50px))}@keyframes ngx-drawer-jelly-open{0%{transform:scaleX(.55) skewY(4deg)}35%{transform:scaleX(1.09) skewY(-2.5deg)}55%{transform:scaleX(.96) skewY(1.5deg)}75%{transform:scaleX(1.03) skewY(-.6deg)}to{transform:scaleX(1) skewY(0)}}@keyframes ngx-drawer-jelly-close{0%{transform:scaleX(1) skewY(0)}30%{transform:scaleX(1.07) skewY(2deg)}to{transform:scaleX(.4) skewY(-5deg)}}.effect-jelly.side-start{transform-origin:left center}.effect-jelly.side-end{transform-origin:right center}.effect-jelly.playing.is-open{animation:ngx-drawer-jelly-open .62s cubic-bezier(.34,1.56,.64,1) both}.effect-jelly.playing:not(.is-open){animation:ngx-drawer-jelly-close .48s ease-in both}@keyframes ngx-drawer-pull-open{0%{transform:scaleX(.5)}60%{transform:scaleX(1.14)}to{transform:scaleX(1)}}@keyframes ngx-drawer-pull-close{0%{transform:scaleX(1)}40%{transform:scaleX(1.12)}to{transform:scaleX(.5)}}.effect-pull.side-start{transform-origin:left center}.effect-pull.side-end{transform-origin:right center}.effect-pull.playing.is-open{animation:ngx-drawer-pull-open .42s cubic-bezier(.16,1,.3,1) both}.effect-pull.playing:not(.is-open){animation:ngx-drawer-pull-close .38s ease-in both}.ngx-drawer-curtain{position:absolute;inset:0;display:flex;z-index:1;pointer-events:none}.ngx-drawer-curtain.revealed{display:none}.ngx-drawer-strip{flex:1 1 0;background:light-dark(#ffffff,#1c1c20);transform:scaleX(1);transition:transform .32s cubic-bezier(.65,0,.35,1)}.ngx-drawer-strip.side-start{transform-origin:left center}.ngx-drawer-strip.side-end{transform-origin:right center}.ngx-drawer-curtain.open .ngx-drawer-strip{transform:scaleX(0)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
337
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: NgxDrawerMenuComponent, isStandalone: true, selector: "ngx-drawer-menu", inputs: { side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, desktopBehavior: { classPropertyName: "desktopBehavior", publicName: "desktopBehavior", isSignal: true, isRequired: false, transformFunction: null }, mobileBehavior: { classPropertyName: "mobileBehavior", publicName: "mobileBehavior", isSignal: true, isRequired: false, transformFunction: null }, effect: { classPropertyName: "effect", publicName: "effect", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, edgeSize: { classPropertyName: "edgeSize", publicName: "edgeSize", isSignal: true, isRequired: false, transformFunction: null }, dragThreshold: { classPropertyName: "dragThreshold", publicName: "dragThreshold", isSignal: true, isRequired: false, transformFunction: null }, velocityThreshold: { classPropertyName: "velocityThreshold", publicName: "velocityThreshold", isSignal: true, isRequired: false, transformFunction: null }, swipeEnabled: { classPropertyName: "swipeEnabled", publicName: "swipeEnabled", isSignal: true, isRequired: false, transformFunction: null }, backdropClose: { classPropertyName: "backdropClose", publicName: "backdropClose", isSignal: true, isRequired: false, transformFunction: null }, escapeClose: { classPropertyName: "escapeClose", publicName: "escapeClose", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, pinned: { classPropertyName: "pinned", publicName: "pinned", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, respondToViewport: { classPropertyName: "respondToViewport", publicName: "respondToViewport", isSignal: true, isRequired: false, transformFunction: null }, mobileBreakpoint: { classPropertyName: "mobileBreakpoint", publicName: "mobileBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, openOnDesktop: { classPropertyName: "openOnDesktop", publicName: "openOnDesktop", isSignal: true, isRequired: false, transformFunction: null }, openOnMobile: { classPropertyName: "openOnMobile", publicName: "openOnMobile", isSignal: true, isRequired: false, transformFunction: null }, curtainStrips: { classPropertyName: "curtainStrips", publicName: "curtainStrips", isSignal: true, isRequired: false, transformFunction: null }, backdropOpacity: { classPropertyName: "backdropOpacity", publicName: "backdropOpacity", isSignal: true, isRequired: false, transformFunction: null }, transitionMs: { classPropertyName: "transitionMs", publicName: "transitionMs", isSignal: true, isRequired: false, transformFunction: null }, focusOnOpen: { classPropertyName: "focusOnOpen", publicName: "focusOnOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", pinned: "pinnedChange" }, host: { listeners: { "keydown.escape": "onEscape()" }, classAttribute: "ngx-drawer-menu-host" }, ngImport: i0, template: "<div\n class=\"ngx-drawer\"\n [class.is-open]=\"isActuallyOpen()\"\n [class.is-dragging]=\"isDragging()\"\n [class.is-pinned]=\"pinned()\"\n [class.is-docked]=\"isDocked()\"\n [class.is-overlay]=\"usesOverlay()\"\n [class.side-start]=\"side() === 'start'\"\n [class.side-end]=\"side() === 'end'\"\n [class.physical-left]=\"isPhysicalLeft()\"\n [class.physical-right]=\"!isPhysicalLeft()\"\n [class.mode-overlay]=\"effectiveMode() === 'overlay'\"\n [class.mode-push]=\"effectiveMode() === 'push'\"\n [class.mode-reveal]=\"effectiveMode() === 'reveal'\"\n [class.effect-slide]=\"effect() === 'slide'\"\n [class.effect-spring]=\"effect() === 'spring'\"\n [class.effect-fabric]=\"effect() === 'fabric'\"\n [class.effect-curtain]=\"effect() === 'curtain'\"\n [class.effect-elastic]=\"effect() === 'elastic'\"\n [class.effect-reveal]=\"effect() === 'reveal'\"\n [style.--ngx-progress]=\"progress()\"\n [style.--ngx-width.px]=\"width()\"\n [style.--ngx-edge-size.px]=\"edgeSize()\"\n [style.--ngx-max-width.px]=\"maxWidth()\"\n [style.--ngx-duration]=\"duration()\"\n [style.--ngx-backdrop-opacity]=\"backdropOpacity()\"\n [style.--ngx-physical-sign]=\"physicalSign()\"\n [style.--ngx-closed-translate.px]=\"(1 - progress()) * -width() * physicalSign()\"\n [style.--ngx-transform-origin]=\"isPhysicalLeft() ? 'left center' : 'right center'\"\n [style.--ngx-fabric-skew]=\"(1 - progress()) * 10 + 'deg'\">\n @if (swipeEnabled() && !isActuallyOpen() && !pinned()) {\n <div\n class=\"ngx-drawer-edge-zone\"\n [class.edge-start]=\"side() === 'start'\"\n [class.edge-end]=\"side() === 'end'\"\n (pointerdown)=\"onEdgePointerDown($event)\"\n aria-hidden=\"true\"></div>\n }\n\n @if (isActuallyOpen() && usesOverlay()) {\n <button\n class=\"ngx-drawer-backdrop\"\n type=\"button\"\n tabindex=\"-1\"\n aria-label=\"Close navigation\"\n (pointerdown)=\"onBackdropPointerDown($event)\"></button>\n }\n\n <main class=\"ngx-drawer-main\">\n <ng-content></ng-content>\n </main>\n\n <aside\n class=\"ngx-drawer-panel\"\n [attr.aria-hidden]=\"!isActuallyOpen()\"\n [attr.inert]=\"!isActuallyOpen() ? '' : null\"\n role=\"navigation\">\n <div class=\"ngx-drawer-fabric\" aria-hidden=\"true\">\n <div class=\"ngx-fabric-fold fold-1\"></div>\n <div class=\"ngx-fabric-fold fold-2\"></div>\n <div class=\"ngx-fabric-fold fold-3\"></div>\n <div class=\"ngx-fabric-fold fold-4\"></div>\n <div class=\"ngx-fabric-edge\"></div>\n </div>\n\n <!-- Full-height drag affordance at the physical edge of the panel. -->\n @if (swipeEnabled() && !pinned()) {\n <div\n class=\"ngx-drawer-drag-handle\"\n [class.handle-start]=\"side() === 'start'\"\n [class.handle-end]=\"side() === 'end'\"\n (pointerdown)=\"onPanelPointerDown($event)\"\n aria-hidden=\"true\">\n <span></span>\n </div>\n }\n\n <div class=\"ngx-drawer-inner\">\n <div class=\"ngx-drawer-content\">\n <ng-content select=\"[drawerContent]\"></ng-content>\n </div>\n </div>\n\n @if (effect() === 'curtain') {\n <div class=\"ngx-drawer-curtain\" aria-hidden=\"true\">\n @for (i of strips(); track i) {\n <span\n class=\"ngx-drawer-strip\"\n [style.--strip-index]=\"i\"\n [style.--strip-count]=\"curtainStrips()\"></span>\n }\n </div>\n }\n </aside>\n</div>\n", styles: [":host{display:block;min-block-size:100%;--ngx-ease: cubic-bezier(.22, .9, .28, 1);--ngx-spring: cubic-bezier(.17, .88, .32, 1.24)}.ngx-drawer{position:relative;min-block-size:100%;isolation:isolate;color:light-dark(#101114,#f5f7fb);--progress: var(--ngx-progress, 0);--closed-offset: var(--ngx-closed-translate, 0px)}.ngx-drawer-edge-zone{position:fixed;inset-block:0;inline-size:max(var(--ngx-edge-size, 34px),env(safe-area-inset-left),env(safe-area-inset-right));z-index:1600;touch-action:none;cursor:ew-resize}.ngx-drawer-edge-zone.edge-start{inset-inline-start:0}.ngx-drawer-edge-zone.edge-end{inset-inline-end:0}.ngx-drawer.is-docked{display:grid;grid-template-rows:minmax(0,1fr);min-inline-size:0;overflow:clip}.ngx-drawer.is-docked.side-start{grid-template-columns:calc(var(--progress) * min(var(--ngx-width),var(--ngx-max-width))) minmax(0,1fr)}.ngx-drawer.is-docked.side-end{grid-template-columns:minmax(0,1fr) calc(var(--progress) * min(var(--ngx-width),var(--ngx-max-width)))}.ngx-drawer.is-docked .ngx-drawer-main{position:relative;min-inline-size:0;min-block-size:100%;grid-row:1;transition:min-inline-size var(--ngx-duration) var(--ngx-ease),transform var(--ngx-duration) var(--ngx-ease)}.ngx-drawer.is-docked.side-start .ngx-drawer-main{grid-column:2}.ngx-drawer.is-docked.side-end .ngx-drawer-main{grid-column:1}.ngx-drawer.is-docked .ngx-drawer-panel{position:relative;inset:auto!important;grid-row:1;inline-size:auto;min-inline-size:0;max-inline-size:none;block-size:100%;overflow:hidden;z-index:2;transform:none!important;box-shadow:none;border-radius:0}.ngx-drawer.is-docked.side-start .ngx-drawer-panel{grid-column:1}.ngx-drawer.is-docked.side-end .ngx-drawer-panel{grid-column:2}.ngx-drawer.is-overlay{min-block-size:100%;overflow:clip}.ngx-drawer-backdrop{position:fixed;inset:0;z-index:1450;appearance:none;border:0;padding:0;background:#000;cursor:default;opacity:calc(var(--progress) * var(--ngx-backdrop-opacity));transition:opacity var(--ngx-duration) var(--ngx-ease)}.ngx-drawer.is-overlay .ngx-drawer-main{position:relative;min-block-size:100%;min-inline-size:0;z-index:1}.ngx-drawer.is-dragging .ngx-drawer-main,.ngx-drawer.is-dragging .ngx-drawer-backdrop,.ngx-drawer.is-dragging .ngx-drawer-panel{transition:none!important}.ngx-drawer-panel{position:fixed;inset-block:0;z-index:1500;inline-size:min(var(--ngx-width),var(--ngx-max-width));max-inline-size:calc(100vw - 12px);overflow:visible;background:light-dark(#fff,#181a1f);box-shadow:0 18px 55px #00000029,0 4px 18px #0000001f;will-change:transform;transition:transform var(--ngx-duration) var(--ngx-ease),box-shadow .26s ease;contain:layout}.ngx-drawer.is-overlay.side-start .ngx-drawer-panel{inset-inline-start:0;transform:translate3d(var(--closed-offset),0,0)}.ngx-drawer.is-overlay.side-end .ngx-drawer-panel{inset-inline-end:0;transform:translate3d(var(--closed-offset),0,0)}.ngx-drawer-drag-handle{position:absolute;inset-block:0;inline-size:42px;z-index:30;touch-action:none;cursor:ew-resize}.ngx-drawer-drag-handle.handle-start{inset-inline-end:-18px}.ngx-drawer-drag-handle.handle-end{inset-inline-start:-18px}.ngx-drawer-drag-handle span{position:absolute;inset-block-start:50%;inline-size:4px;block-size:54px;border-radius:999px;background:color-mix(in srgb,currentColor 18%,transparent);opacity:0;transform:translateY(-50%);transition:opacity .14s ease,block-size .14s ease}.ngx-drawer-drag-handle.handle-start span{inset-inline-start:0}.ngx-drawer-drag-handle.handle-end span{inset-inline-end:0}.ngx-drawer-drag-handle:hover span,.ngx-drawer-drag-handle:active span{opacity:.9;block-size:68px}.ngx-drawer-inner{position:relative;block-size:100%;min-block-size:100%;z-index:5;overflow:hidden}.ngx-drawer-content{position:relative;block-size:100%;min-block-size:100%;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}.ngx-drawer.is-overlay.mode-push .ngx-drawer-main{transition:transform var(--ngx-duration) var(--ngx-ease)}.ngx-drawer.is-overlay.mode-push.physical-left .ngx-drawer-main{transform:translate3d(calc(var(--progress) * var(--ngx-width)),0,0)}.ngx-drawer.is-overlay.mode-push.physical-right .ngx-drawer-main{transform:translate3d(calc(var(--progress) * var(--ngx-width) * -1),0,0)}.ngx-drawer.is-overlay.mode-reveal .ngx-drawer-main{border-radius:calc(var(--progress) * 20px);transform:scale(calc(1 - var(--progress) * .055));overflow:clip}.effect-slide .ngx-drawer-panel{transform:translate3d(var(--closed-offset),0,0)}.effect-spring .ngx-drawer-panel{transform:translate3d(var(--closed-offset),0,0) scaleX(calc(.92 + var(--progress) * .08));transform-origin:center}.effect-elastic .ngx-drawer-panel{transform:translate3d(var(--closed-offset),0,0) scaleX(calc(1 + sin((var(--progress) - .5) * 3.14)*.035))}.effect-fabric .ngx-drawer-panel{transform:translate3d(var(--closed-offset),0,0) skewY(calc((1 - var(--progress)) * var(--ngx-fabric-skew))) scaleX(calc(.78 + var(--progress) * .22))}.effect-curtain .ngx-drawer-panel{transform:translate3d(var(--closed-offset),0,0) scaleX(calc(.82 + var(--progress) * .18))}.effect-reveal .ngx-drawer-panel{transform:translate3d(var(--closed-offset),0,0) scaleY(calc(.96 + var(--progress) * .04))}.ngx-drawer.is-docked .ngx-drawer-panel,.ngx-drawer.is-docked.effect-fabric .ngx-drawer-panel,.ngx-drawer.is-docked.effect-spring .ngx-drawer-panel,.ngx-drawer.is-docked.effect-elastic .ngx-drawer-panel,.ngx-drawer.is-docked.effect-curtain .ngx-drawer-panel,.ngx-drawer.is-docked.effect-reveal .ngx-drawer-panel{transform:none!important}.ngx-drawer-fabric{position:absolute;inset:0;pointer-events:none;z-index:8;overflow:hidden;opacity:calc((1 - var(--progress)) * .9);transition:opacity .22s ease;mix-blend-mode:multiply}.ngx-fabric-fold{position:absolute;inset-block:-5%;inline-size:19%;transform-origin:center;background:linear-gradient(90deg,#fff0,#ffffff29 28%,#00000024 52%,#ffffff1a 72%,#fff0);filter:blur(.4px)}.ngx-fabric-fold.fold-1{inset-inline-start:1%;transform:skewY(6deg)}.ngx-fabric-fold.fold-2{inset-inline-start:21%;transform:skewY(-4deg)}.ngx-fabric-fold.fold-3{inset-inline-start:43%;transform:skewY(5deg)}.ngx-fabric-fold.fold-4{inset-inline-start:65%;transform:skewY(-3deg)}.ngx-fabric-edge{position:absolute;inset-block:0;inline-size:18px;background:linear-gradient(90deg,rgba(0,0,0,.25),transparent);filter:blur(3px)}.ngx-drawer.side-end .ngx-fabric-edge{inset-inline-end:0}.ngx-drawer.side-start .ngx-fabric-edge{inset-inline-start:0}.ngx-drawer-curtain{position:absolute;inset:0;z-index:11;display:flex;pointer-events:none;overflow:hidden}.ngx-drawer-strip{flex:1 1 0;block-size:100%;background:linear-gradient(90deg,#ffffff0f,#ffffff3d,#00000014,#ffffff14);transform-origin:center;transform:scaleX(calc(1 - var(--progress)));transition:transform var(--ngx-duration) var(--ngx-ease);transition-delay:calc(var(--strip-index) / var(--strip-count) * 60ms)}.ngx-drawer.is-dragging .ngx-drawer-strip{transition:none}@media(prefers-reduced-motion:reduce){.ngx-drawer *,.ngx-drawer{transition-duration:1ms!important;animation-duration:1ms!important}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
176
338
|
}
|
|
177
339
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxDrawerMenuComponent, decorators: [{
|
|
178
340
|
type: Component,
|
|
179
|
-
args: [{ selector: 'ngx-drawer-menu', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
args: ['document:keydown.escape']
|
|
183
|
-
|
|
341
|
+
args: [{ selector: 'ngx-drawer-menu', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
342
|
+
class: 'ngx-drawer-menu-host',
|
|
343
|
+
'(keydown.escape)': 'onEscape()',
|
|
344
|
+
}, template: "<div\n class=\"ngx-drawer\"\n [class.is-open]=\"isActuallyOpen()\"\n [class.is-dragging]=\"isDragging()\"\n [class.is-pinned]=\"pinned()\"\n [class.is-docked]=\"isDocked()\"\n [class.is-overlay]=\"usesOverlay()\"\n [class.side-start]=\"side() === 'start'\"\n [class.side-end]=\"side() === 'end'\"\n [class.physical-left]=\"isPhysicalLeft()\"\n [class.physical-right]=\"!isPhysicalLeft()\"\n [class.mode-overlay]=\"effectiveMode() === 'overlay'\"\n [class.mode-push]=\"effectiveMode() === 'push'\"\n [class.mode-reveal]=\"effectiveMode() === 'reveal'\"\n [class.effect-slide]=\"effect() === 'slide'\"\n [class.effect-spring]=\"effect() === 'spring'\"\n [class.effect-fabric]=\"effect() === 'fabric'\"\n [class.effect-curtain]=\"effect() === 'curtain'\"\n [class.effect-elastic]=\"effect() === 'elastic'\"\n [class.effect-reveal]=\"effect() === 'reveal'\"\n [style.--ngx-progress]=\"progress()\"\n [style.--ngx-width.px]=\"width()\"\n [style.--ngx-edge-size.px]=\"edgeSize()\"\n [style.--ngx-max-width.px]=\"maxWidth()\"\n [style.--ngx-duration]=\"duration()\"\n [style.--ngx-backdrop-opacity]=\"backdropOpacity()\"\n [style.--ngx-physical-sign]=\"physicalSign()\"\n [style.--ngx-closed-translate.px]=\"(1 - progress()) * -width() * physicalSign()\"\n [style.--ngx-transform-origin]=\"isPhysicalLeft() ? 'left center' : 'right center'\"\n [style.--ngx-fabric-skew]=\"(1 - progress()) * 10 + 'deg'\">\n @if (swipeEnabled() && !isActuallyOpen() && !pinned()) {\n <div\n class=\"ngx-drawer-edge-zone\"\n [class.edge-start]=\"side() === 'start'\"\n [class.edge-end]=\"side() === 'end'\"\n (pointerdown)=\"onEdgePointerDown($event)\"\n aria-hidden=\"true\"></div>\n }\n\n @if (isActuallyOpen() && usesOverlay()) {\n <button\n class=\"ngx-drawer-backdrop\"\n type=\"button\"\n tabindex=\"-1\"\n aria-label=\"Close navigation\"\n (pointerdown)=\"onBackdropPointerDown($event)\"></button>\n }\n\n <main class=\"ngx-drawer-main\">\n <ng-content></ng-content>\n </main>\n\n <aside\n class=\"ngx-drawer-panel\"\n [attr.aria-hidden]=\"!isActuallyOpen()\"\n [attr.inert]=\"!isActuallyOpen() ? '' : null\"\n role=\"navigation\">\n <div class=\"ngx-drawer-fabric\" aria-hidden=\"true\">\n <div class=\"ngx-fabric-fold fold-1\"></div>\n <div class=\"ngx-fabric-fold fold-2\"></div>\n <div class=\"ngx-fabric-fold fold-3\"></div>\n <div class=\"ngx-fabric-fold fold-4\"></div>\n <div class=\"ngx-fabric-edge\"></div>\n </div>\n\n <!-- Full-height drag affordance at the physical edge of the panel. -->\n @if (swipeEnabled() && !pinned()) {\n <div\n class=\"ngx-drawer-drag-handle\"\n [class.handle-start]=\"side() === 'start'\"\n [class.handle-end]=\"side() === 'end'\"\n (pointerdown)=\"onPanelPointerDown($event)\"\n aria-hidden=\"true\">\n <span></span>\n </div>\n }\n\n <div class=\"ngx-drawer-inner\">\n <div class=\"ngx-drawer-content\">\n <ng-content select=\"[drawerContent]\"></ng-content>\n </div>\n </div>\n\n @if (effect() === 'curtain') {\n <div class=\"ngx-drawer-curtain\" aria-hidden=\"true\">\n @for (i of strips(); track i) {\n <span\n class=\"ngx-drawer-strip\"\n [style.--strip-index]=\"i\"\n [style.--strip-count]=\"curtainStrips()\"></span>\n }\n </div>\n }\n </aside>\n</div>\n", styles: [":host{display:block;min-block-size:100%;--ngx-ease: cubic-bezier(.22, .9, .28, 1);--ngx-spring: cubic-bezier(.17, .88, .32, 1.24)}.ngx-drawer{position:relative;min-block-size:100%;isolation:isolate;color:light-dark(#101114,#f5f7fb);--progress: var(--ngx-progress, 0);--closed-offset: var(--ngx-closed-translate, 0px)}.ngx-drawer-edge-zone{position:fixed;inset-block:0;inline-size:max(var(--ngx-edge-size, 34px),env(safe-area-inset-left),env(safe-area-inset-right));z-index:1600;touch-action:none;cursor:ew-resize}.ngx-drawer-edge-zone.edge-start{inset-inline-start:0}.ngx-drawer-edge-zone.edge-end{inset-inline-end:0}.ngx-drawer.is-docked{display:grid;grid-template-rows:minmax(0,1fr);min-inline-size:0;overflow:clip}.ngx-drawer.is-docked.side-start{grid-template-columns:calc(var(--progress) * min(var(--ngx-width),var(--ngx-max-width))) minmax(0,1fr)}.ngx-drawer.is-docked.side-end{grid-template-columns:minmax(0,1fr) calc(var(--progress) * min(var(--ngx-width),var(--ngx-max-width)))}.ngx-drawer.is-docked .ngx-drawer-main{position:relative;min-inline-size:0;min-block-size:100%;grid-row:1;transition:min-inline-size var(--ngx-duration) var(--ngx-ease),transform var(--ngx-duration) var(--ngx-ease)}.ngx-drawer.is-docked.side-start .ngx-drawer-main{grid-column:2}.ngx-drawer.is-docked.side-end .ngx-drawer-main{grid-column:1}.ngx-drawer.is-docked .ngx-drawer-panel{position:relative;inset:auto!important;grid-row:1;inline-size:auto;min-inline-size:0;max-inline-size:none;block-size:100%;overflow:hidden;z-index:2;transform:none!important;box-shadow:none;border-radius:0}.ngx-drawer.is-docked.side-start .ngx-drawer-panel{grid-column:1}.ngx-drawer.is-docked.side-end .ngx-drawer-panel{grid-column:2}.ngx-drawer.is-overlay{min-block-size:100%;overflow:clip}.ngx-drawer-backdrop{position:fixed;inset:0;z-index:1450;appearance:none;border:0;padding:0;background:#000;cursor:default;opacity:calc(var(--progress) * var(--ngx-backdrop-opacity));transition:opacity var(--ngx-duration) var(--ngx-ease)}.ngx-drawer.is-overlay .ngx-drawer-main{position:relative;min-block-size:100%;min-inline-size:0;z-index:1}.ngx-drawer.is-dragging .ngx-drawer-main,.ngx-drawer.is-dragging .ngx-drawer-backdrop,.ngx-drawer.is-dragging .ngx-drawer-panel{transition:none!important}.ngx-drawer-panel{position:fixed;inset-block:0;z-index:1500;inline-size:min(var(--ngx-width),var(--ngx-max-width));max-inline-size:calc(100vw - 12px);overflow:visible;background:light-dark(#fff,#181a1f);box-shadow:0 18px 55px #00000029,0 4px 18px #0000001f;will-change:transform;transition:transform var(--ngx-duration) var(--ngx-ease),box-shadow .26s ease;contain:layout}.ngx-drawer.is-overlay.side-start .ngx-drawer-panel{inset-inline-start:0;transform:translate3d(var(--closed-offset),0,0)}.ngx-drawer.is-overlay.side-end .ngx-drawer-panel{inset-inline-end:0;transform:translate3d(var(--closed-offset),0,0)}.ngx-drawer-drag-handle{position:absolute;inset-block:0;inline-size:42px;z-index:30;touch-action:none;cursor:ew-resize}.ngx-drawer-drag-handle.handle-start{inset-inline-end:-18px}.ngx-drawer-drag-handle.handle-end{inset-inline-start:-18px}.ngx-drawer-drag-handle span{position:absolute;inset-block-start:50%;inline-size:4px;block-size:54px;border-radius:999px;background:color-mix(in srgb,currentColor 18%,transparent);opacity:0;transform:translateY(-50%);transition:opacity .14s ease,block-size .14s ease}.ngx-drawer-drag-handle.handle-start span{inset-inline-start:0}.ngx-drawer-drag-handle.handle-end span{inset-inline-end:0}.ngx-drawer-drag-handle:hover span,.ngx-drawer-drag-handle:active span{opacity:.9;block-size:68px}.ngx-drawer-inner{position:relative;block-size:100%;min-block-size:100%;z-index:5;overflow:hidden}.ngx-drawer-content{position:relative;block-size:100%;min-block-size:100%;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}.ngx-drawer.is-overlay.mode-push .ngx-drawer-main{transition:transform var(--ngx-duration) var(--ngx-ease)}.ngx-drawer.is-overlay.mode-push.physical-left .ngx-drawer-main{transform:translate3d(calc(var(--progress) * var(--ngx-width)),0,0)}.ngx-drawer.is-overlay.mode-push.physical-right .ngx-drawer-main{transform:translate3d(calc(var(--progress) * var(--ngx-width) * -1),0,0)}.ngx-drawer.is-overlay.mode-reveal .ngx-drawer-main{border-radius:calc(var(--progress) * 20px);transform:scale(calc(1 - var(--progress) * .055));overflow:clip}.effect-slide .ngx-drawer-panel{transform:translate3d(var(--closed-offset),0,0)}.effect-spring .ngx-drawer-panel{transform:translate3d(var(--closed-offset),0,0) scaleX(calc(.92 + var(--progress) * .08));transform-origin:center}.effect-elastic .ngx-drawer-panel{transform:translate3d(var(--closed-offset),0,0) scaleX(calc(1 + sin((var(--progress) - .5) * 3.14)*.035))}.effect-fabric .ngx-drawer-panel{transform:translate3d(var(--closed-offset),0,0) skewY(calc((1 - var(--progress)) * var(--ngx-fabric-skew))) scaleX(calc(.78 + var(--progress) * .22))}.effect-curtain .ngx-drawer-panel{transform:translate3d(var(--closed-offset),0,0) scaleX(calc(.82 + var(--progress) * .18))}.effect-reveal .ngx-drawer-panel{transform:translate3d(var(--closed-offset),0,0) scaleY(calc(.96 + var(--progress) * .04))}.ngx-drawer.is-docked .ngx-drawer-panel,.ngx-drawer.is-docked.effect-fabric .ngx-drawer-panel,.ngx-drawer.is-docked.effect-spring .ngx-drawer-panel,.ngx-drawer.is-docked.effect-elastic .ngx-drawer-panel,.ngx-drawer.is-docked.effect-curtain .ngx-drawer-panel,.ngx-drawer.is-docked.effect-reveal .ngx-drawer-panel{transform:none!important}.ngx-drawer-fabric{position:absolute;inset:0;pointer-events:none;z-index:8;overflow:hidden;opacity:calc((1 - var(--progress)) * .9);transition:opacity .22s ease;mix-blend-mode:multiply}.ngx-fabric-fold{position:absolute;inset-block:-5%;inline-size:19%;transform-origin:center;background:linear-gradient(90deg,#fff0,#ffffff29 28%,#00000024 52%,#ffffff1a 72%,#fff0);filter:blur(.4px)}.ngx-fabric-fold.fold-1{inset-inline-start:1%;transform:skewY(6deg)}.ngx-fabric-fold.fold-2{inset-inline-start:21%;transform:skewY(-4deg)}.ngx-fabric-fold.fold-3{inset-inline-start:43%;transform:skewY(5deg)}.ngx-fabric-fold.fold-4{inset-inline-start:65%;transform:skewY(-3deg)}.ngx-fabric-edge{position:absolute;inset-block:0;inline-size:18px;background:linear-gradient(90deg,rgba(0,0,0,.25),transparent);filter:blur(3px)}.ngx-drawer.side-end .ngx-fabric-edge{inset-inline-end:0}.ngx-drawer.side-start .ngx-fabric-edge{inset-inline-start:0}.ngx-drawer-curtain{position:absolute;inset:0;z-index:11;display:flex;pointer-events:none;overflow:hidden}.ngx-drawer-strip{flex:1 1 0;block-size:100%;background:linear-gradient(90deg,#ffffff0f,#ffffff3d,#00000014,#ffffff14);transform-origin:center;transform:scaleX(calc(1 - var(--progress)));transition:transform var(--ngx-duration) var(--ngx-ease);transition-delay:calc(var(--strip-index) / var(--strip-count) * 60ms)}.ngx-drawer.is-dragging .ngx-drawer-strip{transition:none}@media(prefers-reduced-motion:reduce){.ngx-drawer *,.ngx-drawer{transition-duration:1ms!important;animation-duration:1ms!important}}\n"] }]
|
|
345
|
+
}], ctorParameters: () => [], propDecorators: { side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], desktopBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "desktopBehavior", required: false }] }], mobileBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileBehavior", required: false }] }], effect: [{ type: i0.Input, args: [{ isSignal: true, alias: "effect", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], edgeSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "edgeSize", required: false }] }], dragThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragThreshold", required: false }] }], velocityThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "velocityThreshold", required: false }] }], swipeEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "swipeEnabled", required: false }] }], backdropClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdropClose", required: false }] }], escapeClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "escapeClose", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], pinned: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinned", required: false }] }, { type: i0.Output, args: ["pinnedChange"] }], responsive: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsive", required: false }] }], respondToViewport: [{ type: i0.Input, args: [{ isSignal: true, alias: "respondToViewport", required: false }] }], mobileBreakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileBreakpoint", required: false }] }], openOnDesktop: [{ type: i0.Input, args: [{ isSignal: true, alias: "openOnDesktop", required: false }] }], openOnMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "openOnMobile", required: false }] }], curtainStrips: [{ type: i0.Input, args: [{ isSignal: true, alias: "curtainStrips", required: false }] }], backdropOpacity: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdropOpacity", required: false }] }], transitionMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "transitionMs", required: false }] }], focusOnOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusOnOpen", required: false }] }] } });
|
|
184
346
|
|
|
185
347
|
/**
|
|
186
348
|
* Generated bundle index. Do not edit.
|