@acorex/cdk 22.1.0-next.31 → 22.1.0-next.32
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/acorex-cdk-accordion.mjs +19 -19
- package/fesm2022/acorex-cdk-carousel.mjs +25 -7
- package/fesm2022/acorex-cdk-carousel.mjs.map +1 -1
- package/fesm2022/acorex-cdk-clipboard.mjs +6 -6
- package/fesm2022/acorex-cdk-common.mjs +169 -93
- package/fesm2022/acorex-cdk-common.mjs.map +1 -1
- package/fesm2022/acorex-cdk-dom.mjs +3 -3
- package/fesm2022/acorex-cdk-drag-drop.mjs +210 -68
- package/fesm2022/acorex-cdk-drag-drop.mjs.map +1 -1
- package/fesm2022/acorex-cdk-drawer.mjs +10 -10
- package/fesm2022/acorex-cdk-focus-trap.mjs +3 -3
- package/fesm2022/acorex-cdk-full-screen.mjs +26 -147
- package/fesm2022/acorex-cdk-full-screen.mjs.map +1 -1
- package/fesm2022/acorex-cdk-gesture.mjs +36 -7
- package/fesm2022/acorex-cdk-gesture.mjs.map +1 -1
- package/fesm2022/acorex-cdk-highlight.mjs +108 -0
- package/fesm2022/acorex-cdk-highlight.mjs.map +1 -0
- package/fesm2022/acorex-cdk-horizontal-scroll.mjs +104 -44
- package/fesm2022/acorex-cdk-horizontal-scroll.mjs.map +1 -1
- package/fesm2022/acorex-cdk-input-mask.mjs +3 -3
- package/fesm2022/acorex-cdk-list-navigation.mjs +10 -10
- package/fesm2022/acorex-cdk-outline.mjs +277 -74
- package/fesm2022/acorex-cdk-outline.mjs.map +1 -1
- package/fesm2022/acorex-cdk-overlay.mjs +192 -18
- package/fesm2022/acorex-cdk-overlay.mjs.map +1 -1
- package/fesm2022/acorex-cdk-pan-view.mjs +3 -3
- package/fesm2022/acorex-cdk-resizable.mjs +3 -3
- package/fesm2022/acorex-cdk-selection.mjs +10 -10
- package/fesm2022/acorex-cdk-shimmer.mjs +220 -0
- package/fesm2022/acorex-cdk-shimmer.mjs.map +1 -0
- package/fesm2022/acorex-cdk-sliding-item.mjs +3 -3
- package/fesm2022/acorex-cdk-sticky.mjs +3 -3
- package/fesm2022/acorex-cdk-uploader.mjs +9 -9
- package/fesm2022/acorex-cdk-virtual-scroll.mjs +10 -10
- package/fesm2022/acorex-cdk-z-index.mjs +3 -3
- package/package.json +10 -6
- package/shimmer/README.md +11 -0
- package/types/acorex-cdk-carousel.d.ts +2 -0
- package/types/acorex-cdk-clipboard.d.ts +1 -1
- package/types/acorex-cdk-common.d.ts +36 -19
- package/types/acorex-cdk-drag-drop.d.ts +31 -4
- package/types/acorex-cdk-full-screen.d.ts +18 -43
- package/types/acorex-cdk-gesture.d.ts +13 -1
- package/types/acorex-cdk-highlight.d.ts +54 -0
- package/types/acorex-cdk-horizontal-scroll.d.ts +23 -9
- package/types/acorex-cdk-outline.d.ts +20 -0
- package/types/acorex-cdk-overlay.d.ts +47 -4
- package/types/acorex-cdk-shimmer.d.ts +68 -0
- package/types/acorex-cdk-uploader.d.ts +1 -1
- package/fesm2022/acorex-cdk-double-click.mjs +0 -178
- package/fesm2022/acorex-cdk-double-click.mjs.map +0 -1
- package/types/acorex-cdk-double-click.d.ts +0 -66
|
@@ -51,10 +51,10 @@ class AXFocusTrapDirective {
|
|
|
51
51
|
const delta = event.key === 'ArrowRight' ? 1 : -1;
|
|
52
52
|
items[(activeIndex + delta + items.length) % items.length]?.focus();
|
|
53
53
|
}
|
|
54
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
55
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.
|
|
54
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXFocusTrapDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
55
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: AXFocusTrapDirective, isStandalone: true, selector: "[axFocusTrap]", inputs: { arrowNavigation: { classPropertyName: "arrowNavigation", publicName: "axFocusTrapArrowNavigation", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown": "handleKeyboardEvent($event)" } }, ngImport: i0 }); }
|
|
56
56
|
}
|
|
57
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
57
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXFocusTrapDirective, decorators: [{
|
|
58
58
|
type: Directive,
|
|
59
59
|
args: [{
|
|
60
60
|
selector: '[axFocusTrap]',
|
|
@@ -1,193 +1,72 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { AXFullScreenService } from '@acorex/core/full-screen';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
|
-
import {
|
|
3
|
+
import { input, output, inject, ElementRef, effect, untracked, Directive } from '@angular/core';
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
|
-
* Fullscreen directive
|
|
6
|
+
* Fullscreen directive with overlay and browser modes.
|
|
7
7
|
* Usage: <element axFullscreen #fullscreen="axFullscreen"></element>
|
|
8
8
|
* Then: fullscreen.toggle() or fullscreen.enter() or fullscreen.exit()
|
|
9
9
|
*/
|
|
10
10
|
class AXFullScreenDirective {
|
|
11
11
|
constructor() {
|
|
12
12
|
/**
|
|
13
|
-
*
|
|
13
|
+
* Fullscreen implementation mode.
|
|
14
|
+
* @defaultValue 'overlay'
|
|
14
15
|
*/
|
|
15
|
-
this.
|
|
16
|
-
...(ngDevMode ? [{ debugName: "
|
|
16
|
+
this.mode = input('overlay', /* @ts-ignore */
|
|
17
|
+
...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
|
|
17
18
|
/**
|
|
18
|
-
*
|
|
19
|
-
*/
|
|
20
|
-
this.originalStyles = {};
|
|
21
|
-
/**
|
|
22
|
-
* Original parent element reference
|
|
23
|
-
*/
|
|
24
|
-
this.originalParent = null;
|
|
25
|
-
/**
|
|
26
|
-
* Fullscreen container element
|
|
27
|
-
*/
|
|
28
|
-
this.fullscreenContainer = null;
|
|
29
|
-
/**
|
|
30
|
-
* Fullscreen change event
|
|
19
|
+
* Fullscreen change event for this host element.
|
|
31
20
|
*/
|
|
32
21
|
this.fullscreenChange = output();
|
|
33
|
-
/**
|
|
34
|
-
* Z-index token for this fullscreen instance
|
|
35
|
-
*/
|
|
36
|
-
this.zToken = null;
|
|
37
|
-
this.renderer = inject(Renderer2);
|
|
38
22
|
this.elementRef = inject(ElementRef);
|
|
39
|
-
this.
|
|
40
|
-
// Sync state changes to output
|
|
23
|
+
this.fullScreenService = inject(AXFullScreenService);
|
|
41
24
|
effect(() => {
|
|
42
|
-
const
|
|
25
|
+
const isActive = this.fullScreenService.isActive(this.elementRef.nativeElement);
|
|
43
26
|
untracked(() => {
|
|
44
|
-
this.fullscreenChange.emit(
|
|
27
|
+
this.fullscreenChange.emit(isActive);
|
|
45
28
|
});
|
|
46
29
|
});
|
|
47
30
|
}
|
|
48
31
|
/**
|
|
49
|
-
* Toggle fullscreen state
|
|
32
|
+
* Toggle fullscreen state.
|
|
50
33
|
*/
|
|
51
34
|
toggle() {
|
|
52
|
-
|
|
53
|
-
this.exit();
|
|
54
|
-
}
|
|
55
|
-
else {
|
|
56
|
-
this.enter();
|
|
57
|
-
}
|
|
35
|
+
this.fullScreenService.toggle(this.elementRef.nativeElement, this.mode());
|
|
58
36
|
}
|
|
59
37
|
/**
|
|
60
|
-
* Enter fullscreen mode
|
|
38
|
+
* Enter fullscreen mode.
|
|
61
39
|
*/
|
|
62
40
|
enter() {
|
|
63
|
-
|
|
64
|
-
return;
|
|
65
|
-
}
|
|
66
|
-
const element = this.elementRef.nativeElement;
|
|
67
|
-
try {
|
|
68
|
-
// Store original styles and parent
|
|
69
|
-
this.storeOriginalStyles(element);
|
|
70
|
-
this.originalParent = element.parentElement;
|
|
71
|
-
// Acquire z-index token
|
|
72
|
-
this.zToken = this.zIndexService.acquire();
|
|
73
|
-
// Create fullscreen container
|
|
74
|
-
this.fullscreenContainer = this.renderer.createElement('div');
|
|
75
|
-
this.renderer.setStyle(this.fullscreenContainer, 'position', 'fixed');
|
|
76
|
-
this.renderer.setStyle(this.fullscreenContainer, 'top', '0');
|
|
77
|
-
this.renderer.setStyle(this.fullscreenContainer, 'left', '0');
|
|
78
|
-
this.renderer.setStyle(this.fullscreenContainer, 'width', '100vw');
|
|
79
|
-
this.renderer.setStyle(this.fullscreenContainer, 'height', '100vh');
|
|
80
|
-
this.renderer.setStyle(this.fullscreenContainer, 'z-index', String(this.zToken.zIndex));
|
|
81
|
-
this.renderer.setStyle(this.fullscreenContainer, 'background-color', '#ffffff');
|
|
82
|
-
this.renderer.setStyle(this.fullscreenContainer, 'overflow', 'auto');
|
|
83
|
-
// Move element to container
|
|
84
|
-
this.renderer.appendChild(this.fullscreenContainer, element);
|
|
85
|
-
// Apply fullscreen styles to element
|
|
86
|
-
this.renderer.setStyle(element, 'position', 'relative');
|
|
87
|
-
this.renderer.setStyle(element, 'width', '100%');
|
|
88
|
-
this.renderer.setStyle(element, 'height', '100%');
|
|
89
|
-
this.renderer.setStyle(element, 'margin', '0');
|
|
90
|
-
this.renderer.setStyle(element, 'padding', '0');
|
|
91
|
-
// Append container to body
|
|
92
|
-
this.renderer.appendChild(document.body, this.fullscreenContainer);
|
|
93
|
-
// Prevent body scroll
|
|
94
|
-
this.renderer.setStyle(document.body, 'overflow', 'hidden');
|
|
95
|
-
this.isFullscreenState.set(true);
|
|
96
|
-
}
|
|
97
|
-
catch (error) {
|
|
98
|
-
console.error('Error entering fullscreen:', error);
|
|
99
|
-
this.restoreOriginalStyles(element);
|
|
100
|
-
}
|
|
41
|
+
this.fullScreenService.enter(this.elementRef.nativeElement, this.mode());
|
|
101
42
|
}
|
|
102
43
|
/**
|
|
103
|
-
* Exit fullscreen mode
|
|
44
|
+
* Exit fullscreen mode.
|
|
104
45
|
*/
|
|
105
46
|
exit() {
|
|
106
|
-
|
|
107
|
-
return;
|
|
108
|
-
}
|
|
109
|
-
const element = this.elementRef.nativeElement;
|
|
110
|
-
try {
|
|
111
|
-
// Restore body scroll
|
|
112
|
-
this.renderer.removeStyle(document.body, 'overflow');
|
|
113
|
-
// Move element back to original parent
|
|
114
|
-
if (this.fullscreenContainer && this.originalParent) {
|
|
115
|
-
this.renderer.removeChild(this.fullscreenContainer, element);
|
|
116
|
-
this.renderer.appendChild(this.originalParent, element);
|
|
117
|
-
// Remove container
|
|
118
|
-
this.renderer.removeChild(document.body, this.fullscreenContainer);
|
|
119
|
-
this.fullscreenContainer = null;
|
|
120
|
-
}
|
|
121
|
-
// Release z-index token
|
|
122
|
-
this.zIndexService.release(this.zToken);
|
|
123
|
-
this.zToken = null;
|
|
124
|
-
// Restore original styles
|
|
125
|
-
this.restoreOriginalStyles(element);
|
|
126
|
-
this.isFullscreenState.set(false);
|
|
127
|
-
}
|
|
128
|
-
catch (error) {
|
|
129
|
-
console.error('Error exiting fullscreen:', error);
|
|
130
|
-
}
|
|
47
|
+
this.fullScreenService.exit(this.elementRef.nativeElement);
|
|
131
48
|
}
|
|
132
49
|
/**
|
|
133
|
-
* Check if currently in fullscreen mode
|
|
50
|
+
* Check if this host is currently in fullscreen mode.
|
|
134
51
|
*/
|
|
135
52
|
isFullscreen() {
|
|
136
|
-
return this.
|
|
137
|
-
}
|
|
138
|
-
/**
|
|
139
|
-
* Store original element styles
|
|
140
|
-
*/
|
|
141
|
-
storeOriginalStyles(element) {
|
|
142
|
-
const computedStyle = window.getComputedStyle(element);
|
|
143
|
-
this.originalStyles = {
|
|
144
|
-
position: computedStyle.position,
|
|
145
|
-
top: computedStyle.top,
|
|
146
|
-
left: computedStyle.left,
|
|
147
|
-
width: computedStyle.width,
|
|
148
|
-
height: computedStyle.height,
|
|
149
|
-
zIndex: computedStyle.zIndex,
|
|
150
|
-
backgroundColor: computedStyle.backgroundColor,
|
|
151
|
-
margin: computedStyle.margin,
|
|
152
|
-
padding: computedStyle.padding,
|
|
153
|
-
};
|
|
53
|
+
return this.fullScreenService.isActive(this.elementRef.nativeElement);
|
|
154
54
|
}
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
restoreOriginalStyles(element) {
|
|
159
|
-
if (!this.originalStyles) {
|
|
160
|
-
return;
|
|
55
|
+
ngOnDestroy() {
|
|
56
|
+
if (this.fullScreenService.isActive(this.elementRef.nativeElement)) {
|
|
57
|
+
this.fullScreenService.exit(this.elementRef.nativeElement);
|
|
161
58
|
}
|
|
162
|
-
// Restore each style property
|
|
163
|
-
Object.entries(this.originalStyles).forEach(([key, value]) => {
|
|
164
|
-
const styleKey = this.camelToKebabCase(key);
|
|
165
|
-
if (value) {
|
|
166
|
-
this.renderer.setStyle(element, styleKey, value);
|
|
167
|
-
}
|
|
168
|
-
else {
|
|
169
|
-
this.renderer.removeStyle(element, styleKey);
|
|
170
|
-
}
|
|
171
|
-
});
|
|
172
|
-
this.originalStyles = {};
|
|
173
|
-
}
|
|
174
|
-
/**
|
|
175
|
-
* Convert camelCase to kebab-case for CSS properties
|
|
176
|
-
*/
|
|
177
|
-
camelToKebabCase(str) {
|
|
178
|
-
return str.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();
|
|
179
59
|
}
|
|
180
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
181
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "
|
|
60
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXFullScreenDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
61
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: AXFullScreenDirective, isStandalone: true, selector: "[axFullscreen]", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fullscreenChange: "fullscreenChange" }, exportAs: ["axFullscreen"], ngImport: i0 }); }
|
|
182
62
|
}
|
|
183
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
63
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXFullScreenDirective, decorators: [{
|
|
184
64
|
type: Directive,
|
|
185
65
|
args: [{
|
|
186
66
|
selector: '[axFullscreen]',
|
|
187
|
-
standalone: true,
|
|
188
67
|
exportAs: 'axFullscreen',
|
|
189
68
|
}]
|
|
190
|
-
}], ctorParameters: () => [], propDecorators: { fullscreenChange: [{ type: i0.Output, args: ["fullscreenChange"] }] } });
|
|
69
|
+
}], ctorParameters: () => [], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], fullscreenChange: [{ type: i0.Output, args: ["fullscreenChange"] }] } });
|
|
191
70
|
|
|
192
71
|
/**
|
|
193
72
|
* Generated bundle index. Do not edit.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"acorex-cdk-full-screen.mjs","sources":["../../../../packages/cdk/full-screen/src/lib/full-screen.directive.ts","../../../../packages/cdk/full-screen/src/acorex-cdk-full-screen.ts"],"sourcesContent":["import { AXZIndexService, AXZToken } from '@acorex/core/z-index';\nimport { Directive, effect, ElementRef, inject, output, Renderer2, signal, untracked } from '@angular/core';\n\n/**\n * Fullscreen directive that provides CSS-based fullscreen functionality\n * Usage: <element axFullscreen #fullscreen=\"axFullscreen\"></element>\n * Then: fullscreen.toggle() or fullscreen.enter() or fullscreen.exit()\n */\n@Directive({\n selector: '[axFullscreen]',\n standalone: true,\n exportAs: 'axFullscreen',\n})\nexport class AXFullScreenDirective {\n /**\n * Current fullscreen state\n */\n private readonly isFullscreenState = signal<boolean>(false);\n\n /**\n * Original element styles to restore\n */\n private originalStyles: {\n position?: string;\n top?: string;\n left?: string;\n width?: string;\n height?: string;\n zIndex?: string;\n backgroundColor?: string;\n margin?: string;\n padding?: string;\n } = {};\n\n /**\n * Original parent element reference\n */\n private originalParent: HTMLElement | null = null;\n\n /**\n * Fullscreen container element\n */\n private fullscreenContainer: HTMLElement | null = null;\n\n /**\n * Fullscreen change event\n */\n readonly fullscreenChange = output<boolean>();\n\n /**\n * Z-index token for this fullscreen instance\n */\n private zToken: AXZToken | null = null;\n\n private readonly renderer = inject(Renderer2);\n private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n private readonly zIndexService = inject(AXZIndexService);\n\n constructor() {\n // Sync state changes to output\n effect(() => {\n const isFullscreen = this.isFullscreenState();\n untracked(() => {\n this.fullscreenChange.emit(isFullscreen);\n });\n });\n }\n\n /**\n * Toggle fullscreen state\n */\n toggle(): void {\n if (this.isFullscreenState()) {\n this.exit();\n } else {\n this.enter();\n }\n }\n\n /**\n * Enter fullscreen mode using CSS\n */\n enter(): void {\n if (this.isFullscreenState()) {\n return;\n }\n\n const element = this.elementRef.nativeElement;\n\n try {\n // Store original styles and parent\n this.storeOriginalStyles(element);\n this.originalParent = element.parentElement;\n\n // Acquire z-index token\n this.zToken = this.zIndexService.acquire();\n\n // Create fullscreen container\n this.fullscreenContainer = this.renderer.createElement('div');\n this.renderer.setStyle(this.fullscreenContainer, 'position', 'fixed');\n this.renderer.setStyle(this.fullscreenContainer, 'top', '0');\n this.renderer.setStyle(this.fullscreenContainer, 'left', '0');\n this.renderer.setStyle(this.fullscreenContainer, 'width', '100vw');\n this.renderer.setStyle(this.fullscreenContainer, 'height', '100vh');\n this.renderer.setStyle(this.fullscreenContainer, 'z-index', String(this.zToken.zIndex));\n this.renderer.setStyle(this.fullscreenContainer, 'background-color', '#ffffff');\n this.renderer.setStyle(this.fullscreenContainer, 'overflow', 'auto');\n\n // Move element to container\n this.renderer.appendChild(this.fullscreenContainer, element);\n\n // Apply fullscreen styles to element\n this.renderer.setStyle(element, 'position', 'relative');\n this.renderer.setStyle(element, 'width', '100%');\n this.renderer.setStyle(element, 'height', '100%');\n this.renderer.setStyle(element, 'margin', '0');\n this.renderer.setStyle(element, 'padding', '0');\n\n // Append container to body\n this.renderer.appendChild(document.body, this.fullscreenContainer);\n\n // Prevent body scroll\n this.renderer.setStyle(document.body, 'overflow', 'hidden');\n\n this.isFullscreenState.set(true);\n } catch (error) {\n console.error('Error entering fullscreen:', error);\n this.restoreOriginalStyles(element);\n }\n }\n\n /**\n * Exit fullscreen mode\n */\n exit(): void {\n if (!this.isFullscreenState()) {\n return;\n }\n\n const element = this.elementRef.nativeElement;\n\n try {\n // Restore body scroll\n this.renderer.removeStyle(document.body, 'overflow');\n\n // Move element back to original parent\n if (this.fullscreenContainer && this.originalParent) {\n this.renderer.removeChild(this.fullscreenContainer, element);\n this.renderer.appendChild(this.originalParent, element);\n\n // Remove container\n this.renderer.removeChild(document.body, this.fullscreenContainer);\n this.fullscreenContainer = null;\n }\n\n // Release z-index token\n this.zIndexService.release(this.zToken);\n this.zToken = null;\n\n // Restore original styles\n this.restoreOriginalStyles(element);\n\n this.isFullscreenState.set(false);\n } catch (error) {\n console.error('Error exiting fullscreen:', error);\n }\n }\n\n /**\n * Check if currently in fullscreen mode\n */\n isFullscreen(): boolean {\n return this.isFullscreenState();\n }\n\n /**\n * Store original element styles\n */\n private storeOriginalStyles(element: HTMLElement): void {\n const computedStyle = window.getComputedStyle(element);\n this.originalStyles = {\n position: computedStyle.position,\n top: computedStyle.top,\n left: computedStyle.left,\n width: computedStyle.width,\n height: computedStyle.height,\n zIndex: computedStyle.zIndex,\n backgroundColor: computedStyle.backgroundColor,\n margin: computedStyle.margin,\n padding: computedStyle.padding,\n };\n }\n\n /**\n * Restore original element styles\n */\n private restoreOriginalStyles(element: HTMLElement): void {\n if (!this.originalStyles) {\n return;\n }\n\n // Restore each style property\n Object.entries(this.originalStyles).forEach(([key, value]) => {\n const styleKey = this.camelToKebabCase(key);\n if (value) {\n this.renderer.setStyle(element, styleKey, value);\n } else {\n this.renderer.removeStyle(element, styleKey);\n }\n });\n\n this.originalStyles = {};\n }\n\n /**\n * Convert camelCase to kebab-case for CSS properties\n */\n private camelToKebabCase(str: string): string {\n return str.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"acorex-cdk-full-screen.mjs","sources":["../../../../packages/cdk/full-screen/src/lib/full-screen.directive.ts","../../../../packages/cdk/full-screen/src/acorex-cdk-full-screen.ts"],"sourcesContent":["import { AXFullScreenMode, AXFullScreenService } from '@acorex/core/full-screen';\nimport { Directive, effect, ElementRef, inject, input, OnDestroy, output, untracked } from '@angular/core';\n\n/**\n * Fullscreen directive with overlay and browser modes.\n * Usage: <element axFullscreen #fullscreen=\"axFullscreen\"></element>\n * Then: fullscreen.toggle() or fullscreen.enter() or fullscreen.exit()\n */\n@Directive({\n selector: '[axFullscreen]',\n exportAs: 'axFullscreen',\n})\nexport class AXFullScreenDirective implements OnDestroy {\n /**\n * Fullscreen implementation mode.\n * @defaultValue 'overlay'\n */\n readonly mode = input<AXFullScreenMode>('overlay');\n\n /**\n * Fullscreen change event for this host element.\n */\n readonly fullscreenChange = output<boolean>();\n\n private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n private readonly fullScreenService = inject(AXFullScreenService);\n\n constructor() {\n effect(() => {\n const isActive = this.fullScreenService.isActive(this.elementRef.nativeElement);\n untracked(() => {\n this.fullscreenChange.emit(isActive);\n });\n });\n }\n\n /**\n * Toggle fullscreen state.\n */\n toggle(): void {\n this.fullScreenService.toggle(this.elementRef.nativeElement, this.mode());\n }\n\n /**\n * Enter fullscreen mode.\n */\n enter(): void {\n this.fullScreenService.enter(this.elementRef.nativeElement, this.mode());\n }\n\n /**\n * Exit fullscreen mode.\n */\n exit(): void {\n this.fullScreenService.exit(this.elementRef.nativeElement);\n }\n\n /**\n * Check if this host is currently in fullscreen mode.\n */\n isFullscreen(): boolean {\n return this.fullScreenService.isActive(this.elementRef.nativeElement);\n }\n\n ngOnDestroy(): void {\n if (this.fullScreenService.isActive(this.elementRef.nativeElement)) {\n this.fullScreenService.exit(this.elementRef.nativeElement);\n }\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAGA;;;;AAIG;MAKU,qBAAqB,CAAA;AAehC,IAAA,WAAA,GAAA;AAdA;;;AAGG;QACM,IAAA,CAAA,IAAI,GAAG,KAAK,CAAmB,SAAS;iFAAC;AAElD;;AAEG;QACM,IAAA,CAAA,gBAAgB,GAAG,MAAM,EAAW;AAE5B,QAAA,IAAA,CAAA,UAAU,GAAG,MAAM,CAA0B,UAAU,CAAC;AACxD,QAAA,IAAA,CAAA,iBAAiB,GAAG,MAAM,CAAC,mBAAmB,CAAC;QAG9D,MAAM,CAAC,MAAK;AACV,YAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC;YAC/E,SAAS,CAAC,MAAK;AACb,gBAAA,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC;AACtC,YAAA,CAAC,CAAC;AACJ,QAAA,CAAC,CAAC;IACJ;AAEA;;AAEG;IACH,MAAM,GAAA;AACJ,QAAA,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC;IAC3E;AAEA;;AAEG;IACH,KAAK,GAAA;AACH,QAAA,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC;IAC1E;AAEA;;AAEG;IACH,IAAI,GAAA;QACF,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC;IAC5D;AAEA;;AAEG;IACH,YAAY,GAAA;AACV,QAAA,OAAO,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC;IACvE;IAEA,WAAW,GAAA;AACT,QAAA,IAAI,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,EAAE;YAClE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC;QAC5D;IACF;8GAxDW,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAArB,qBAAqB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,gBAAA,EAAA,kBAAA,EAAA,EAAA,QAAA,EAAA,CAAA,cAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;2FAArB,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAJjC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,gBAAgB;AAC1B,oBAAA,QAAQ,EAAE,cAAc;AACzB,iBAAA;;;ACXD;;AAEG;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { isPlatformBrowser } from '@angular/common';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
|
-
import { inject, ElementRef, NgZone, PLATFORM_ID, input, output, afterNextRender, effect, untracked, Directive } from '@angular/core';
|
|
3
|
+
import { inject, ElementRef, NgZone, PLATFORM_ID, input, linkedSignal, output, afterNextRender, effect, untracked, Directive } from '@angular/core';
|
|
4
4
|
|
|
5
5
|
const HAMMER_EVENTS = 'tap doubletap press pan panstart panmove panend swipe pinch rotate';
|
|
6
6
|
const HIGH_FREQUENCY_EVENTS = new Set(['pan', 'panmove', 'pinch', 'rotate']);
|
|
@@ -25,6 +25,9 @@ class AXGestureDirective {
|
|
|
25
25
|
*/
|
|
26
26
|
this.direction = input('horizontal', /* @ts-ignore */
|
|
27
27
|
...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
|
|
28
|
+
/** Internal direction state; can be overridden programmatically by host directives. */
|
|
29
|
+
this.gestureDirection = linkedSignal(() => this.direction(), /* @ts-ignore */
|
|
30
|
+
...(ngDevMode ? [{ debugName: "gestureDirection" }] : /* istanbul ignore next */ []));
|
|
28
31
|
/**
|
|
29
32
|
* Enables the multi-touch pinch recognizer. Disabled by default.
|
|
30
33
|
*/
|
|
@@ -40,6 +43,12 @@ class AXGestureDirective {
|
|
|
40
43
|
*/
|
|
41
44
|
this.disabled = input(false, /* @ts-ignore */
|
|
42
45
|
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
46
|
+
/**
|
|
47
|
+
* Maximum interval in milliseconds between taps for double-tap recognition.
|
|
48
|
+
* Maps to Hammer.js tap recognizer `interval`. Defaults to Hammer's built-in value (300ms).
|
|
49
|
+
*/
|
|
50
|
+
this.tapInterval = input(undefined, /* @ts-ignore */
|
|
51
|
+
...(ngDevMode ? [{ debugName: "tapInterval" }] : /* istanbul ignore next */ []));
|
|
43
52
|
this.tap = output();
|
|
44
53
|
this.doubletap = output();
|
|
45
54
|
this.press = output();
|
|
@@ -74,10 +83,11 @@ class AXGestureDirective {
|
|
|
74
83
|
});
|
|
75
84
|
this.#config = effect(() => {
|
|
76
85
|
this.options();
|
|
77
|
-
this.
|
|
86
|
+
this.gestureDirection();
|
|
78
87
|
this.enablePinch();
|
|
79
88
|
this.enableRotate();
|
|
80
89
|
this.disabled();
|
|
90
|
+
this.tapInterval();
|
|
81
91
|
untracked(() => {
|
|
82
92
|
if (this.ready)
|
|
83
93
|
void this.setup();
|
|
@@ -103,6 +113,17 @@ class AXGestureDirective {
|
|
|
103
113
|
}
|
|
104
114
|
#init;
|
|
105
115
|
#config;
|
|
116
|
+
/**
|
|
117
|
+
* Suppresses native click propagation when Hammer.js is active so tap/doubletap
|
|
118
|
+
* outputs are the single source of click handling.
|
|
119
|
+
*/
|
|
120
|
+
onHostClick(event) {
|
|
121
|
+
if (this.disabled() || !this.hammer)
|
|
122
|
+
return;
|
|
123
|
+
event.preventDefault();
|
|
124
|
+
event.stopPropagation();
|
|
125
|
+
event.stopImmediatePropagation();
|
|
126
|
+
}
|
|
106
127
|
ngOnDestroy() {
|
|
107
128
|
this.setupId++;
|
|
108
129
|
this.teardown();
|
|
@@ -124,11 +145,16 @@ class AXGestureDirective {
|
|
|
124
145
|
}
|
|
125
146
|
}
|
|
126
147
|
const hammer = new HammerLib(this.el.nativeElement, options);
|
|
127
|
-
const direction = this.toHammerDirection(HammerLib, this.
|
|
148
|
+
const direction = this.toHammerDirection(HammerLib, this.gestureDirection());
|
|
128
149
|
hammer.get('pan')?.set({ direction });
|
|
129
150
|
hammer.get('swipe')?.set({ direction });
|
|
130
151
|
hammer.get('pinch')?.set({ enable: this.enablePinch() });
|
|
131
152
|
hammer.get('rotate')?.set({ enable: this.enableRotate() });
|
|
153
|
+
const interval = this.tapInterval();
|
|
154
|
+
if (interval != null) {
|
|
155
|
+
hammer.get('tap')?.set({ interval });
|
|
156
|
+
hammer.get('doubletap')?.set({ interval });
|
|
157
|
+
}
|
|
132
158
|
hammer.on(HAMMER_EVENTS, this.onHammerEvent);
|
|
133
159
|
this.hammer = hammer;
|
|
134
160
|
});
|
|
@@ -154,16 +180,19 @@ class AXGestureDirective {
|
|
|
154
180
|
this.hammer.destroy();
|
|
155
181
|
this.hammer = null;
|
|
156
182
|
}
|
|
157
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
158
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.
|
|
183
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXGestureDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
184
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: AXGestureDirective, isStandalone: true, selector: "[axGesture]", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, enablePinch: { classPropertyName: "enablePinch", publicName: "enablePinch", isSignal: true, isRequired: false, transformFunction: null }, enableRotate: { classPropertyName: "enableRotate", publicName: "enableRotate", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, tapInterval: { classPropertyName: "tapInterval", publicName: "tapInterval", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tap: "tap", doubletap: "doubletap", press: "press", pan: "pan", panstart: "panstart", panmove: "panmove", panend: "panend", swipe: "swipe", pinch: "pinch", rotate: "rotate" }, host: { listeners: { "click": "onHostClick($event)" } }, exportAs: ["axGesture"], ngImport: i0 }); }
|
|
159
185
|
}
|
|
160
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
186
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXGestureDirective, decorators: [{
|
|
161
187
|
type: Directive,
|
|
162
188
|
args: [{
|
|
163
189
|
selector: '[axGesture]',
|
|
164
190
|
exportAs: 'axGesture',
|
|
191
|
+
host: {
|
|
192
|
+
'(click)': 'onHostClick($event)',
|
|
193
|
+
},
|
|
165
194
|
}]
|
|
166
|
-
}], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], enablePinch: [{ type: i0.Input, args: [{ isSignal: true, alias: "enablePinch", required: false }] }], enableRotate: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableRotate", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], tap: [{ type: i0.Output, args: ["tap"] }], doubletap: [{ type: i0.Output, args: ["doubletap"] }], press: [{ type: i0.Output, args: ["press"] }], pan: [{ type: i0.Output, args: ["pan"] }], panstart: [{ type: i0.Output, args: ["panstart"] }], panmove: [{ type: i0.Output, args: ["panmove"] }], panend: [{ type: i0.Output, args: ["panend"] }], swipe: [{ type: i0.Output, args: ["swipe"] }], pinch: [{ type: i0.Output, args: ["pinch"] }], rotate: [{ type: i0.Output, args: ["rotate"] }] } });
|
|
195
|
+
}], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], enablePinch: [{ type: i0.Input, args: [{ isSignal: true, alias: "enablePinch", required: false }] }], enableRotate: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableRotate", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], tapInterval: [{ type: i0.Input, args: [{ isSignal: true, alias: "tapInterval", required: false }] }], tap: [{ type: i0.Output, args: ["tap"] }], doubletap: [{ type: i0.Output, args: ["doubletap"] }], press: [{ type: i0.Output, args: ["press"] }], pan: [{ type: i0.Output, args: ["pan"] }], panstart: [{ type: i0.Output, args: ["panstart"] }], panmove: [{ type: i0.Output, args: ["panmove"] }], panend: [{ type: i0.Output, args: ["panend"] }], swipe: [{ type: i0.Output, args: ["swipe"] }], pinch: [{ type: i0.Output, args: ["pinch"] }], rotate: [{ type: i0.Output, args: ["rotate"] }] } });
|
|
167
196
|
|
|
168
197
|
/**
|
|
169
198
|
* Generated bundle index. Do not edit.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"acorex-cdk-gesture.mjs","sources":["../../../../packages/cdk/gesture/src/lib/gesture.directive.ts","../../../../packages/cdk/gesture/src/acorex-cdk-gesture.ts"],"sourcesContent":["import { isPlatformBrowser } from '@angular/common';\nimport {\n afterNextRender,\n Directive,\n effect,\n ElementRef,\n inject,\n input,\n NgZone,\n OnDestroy,\n output,\n OutputEmitterRef,\n PLATFORM_ID,\n untracked,\n} from '@angular/core';\nimport { AXGestureDirection, AXGestureEvent, AXGestureManager, AXGestureOptions } from './gesture.types';\n\nconst HAMMER_EVENTS = 'tap doubletap press pan panstart panmove panend swipe pinch rotate';\nconst HIGH_FREQUENCY_EVENTS = new Set(['pan', 'panmove', 'pinch', 'rotate']);\n\ntype HammerStatic = {\n new (element: HTMLElement | SVGElement, options?: AXGestureOptions): AXGestureManager;\n DIRECTION_ALL: number;\n DIRECTION_HORIZONTAL: number;\n DIRECTION_VERTICAL: number;\n};\n\n/**\n * Attaches Hammer.js gesture recognition to the host element.\n *\n * Usage:\n * <div axGesture [direction]=\"'all'\" (tap)=\"onTap($event)\" (pan)=\"onPan($event)\"></div>\n */\n@Directive({\n selector: '[axGesture]',\n exportAs: 'axGesture',\n})\nexport class AXGestureDirective implements OnDestroy {\n private readonly el = inject(ElementRef<HTMLElement>);\n private readonly zone = inject(NgZone);\n private readonly platformId = inject(PLATFORM_ID);\n\n /**\n * Extra Hammer.js options forwarded to the manager constructor.\n */\n options = input<AXGestureOptions>({});\n\n /**\n * Pan and swipe direction. Defaults to horizontal, matching Hammer.js.\n */\n direction = input<AXGestureDirection>('horizontal');\n\n /**\n * Enables the multi-touch pinch recognizer. Disabled by default.\n */\n enablePinch = input(false);\n\n /**\n * Enables the multi-touch rotate recognizer. Disabled by default.\n */\n enableRotate = input(false);\n\n /**\n * Stops gesture recognition when true.\n */\n disabled = input(false);\n\n tap = output<AXGestureEvent>();\n doubletap = output<AXGestureEvent>();\n press = output<AXGestureEvent>();\n pan = output<AXGestureEvent>();\n panstart = output<AXGestureEvent>();\n panmove = output<AXGestureEvent>();\n panend = output<AXGestureEvent>();\n swipe = output<AXGestureEvent>();\n pinch = output<AXGestureEvent>();\n rotate = output<AXGestureEvent>();\n\n private hammer: AXGestureManager | null = null;\n private hammerLib: HammerStatic | null = null;\n private setupId = 0;\n private ready = false;\n\n private readonly emitters: Record<string, OutputEmitterRef<AXGestureEvent>> = {\n tap: this.tap,\n doubletap: this.doubletap,\n press: this.press,\n pan: this.pan,\n panstart: this.panstart,\n panmove: this.panmove,\n panend: this.panend,\n swipe: this.swipe,\n pinch: this.pinch,\n rotate: this.rotate,\n };\n\n /**\n * The underlying Hammer manager, or null when not initialized.\n */\n get manager(): AXGestureManager | null {\n return this.hammer;\n }\n\n #init = afterNextRender(() => {\n if (!isPlatformBrowser(this.platformId)) return;\n this.ready = true;\n void this.setup();\n });\n\n #config = effect(() => {\n this.options();\n this.direction();\n this.enablePinch();\n this.enableRotate();\n this.disabled();\n untracked(() => {\n if (this.ready) void this.setup();\n });\n });\n\n ngOnDestroy(): void {\n this.setupId++;\n this.teardown();\n }\n\n private async setup(): Promise<void> {\n const id = ++this.setupId;\n this.teardown();\n if (this.disabled() || !isPlatformBrowser(this.platformId)) return;\n\n const HammerLib = await this.loadHammer();\n if (id !== this.setupId) return;\n\n this.zone.runOutsideAngular(() => {\n const options: AXGestureOptions = { ...this.options() };\n if (!options.touchAction) {\n const hostTouchAction = this.el.nativeElement.style.touchAction;\n if (hostTouchAction) {\n options.touchAction = hostTouchAction;\n }\n }\n\n const hammer = new HammerLib(this.el.nativeElement, options);\n const direction = this.toHammerDirection(HammerLib, this.direction());\n\n hammer.get('pan')?.set({ direction });\n hammer.get('swipe')?.set({ direction });\n hammer.get('pinch')?.set({ enable: this.enablePinch() });\n hammer.get('rotate')?.set({ enable: this.enableRotate() });\n hammer.on(HAMMER_EVENTS, this.onHammerEvent);\n\n this.hammer = hammer;\n });\n }\n\n private async loadHammer(): Promise<HammerStatic> {\n if (this.hammerLib) return this.hammerLib;\n const mod = (await import('hammerjs')) as unknown as HammerStatic & { default?: HammerStatic };\n this.hammerLib = mod.default ?? mod;\n return this.hammerLib;\n }\n\n private toHammerDirection(HammerLib: HammerStatic, direction: AXGestureDirection): number {\n if (direction === 'all') return HammerLib.DIRECTION_ALL;\n if (direction === 'vertical') return HammerLib.DIRECTION_VERTICAL;\n return HammerLib.DIRECTION_HORIZONTAL;\n }\n\n private teardown(): void {\n if (!this.hammer) return;\n this.hammer.off(HAMMER_EVENTS, this.onHammerEvent);\n this.hammer.destroy();\n this.hammer = null;\n }\n\n private readonly onHammerEvent = (ev: AXGestureEvent) => {\n const emit = this.emitters[ev.type];\n if (!emit) return;\n if (HIGH_FREQUENCY_EVENTS.has(ev.type)) {\n emit.emit(ev);\n return;\n }\n this.zone.run(() => emit.emit(ev));\n };\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"acorex-cdk-gesture.mjs","sources":["../../../../packages/cdk/gesture/src/lib/gesture.directive.ts","../../../../packages/cdk/gesture/src/acorex-cdk-gesture.ts"],"sourcesContent":["import { isPlatformBrowser } from '@angular/common';\nimport {\n afterNextRender,\n Directive,\n effect,\n ElementRef,\n inject,\n input,\n linkedSignal,\n NgZone,\n OnDestroy,\n output,\n OutputEmitterRef,\n PLATFORM_ID,\n untracked,\n} from '@angular/core';\nimport { AXGestureDirection, AXGestureEvent, AXGestureManager, AXGestureOptions } from './gesture.types';\n\nconst HAMMER_EVENTS = 'tap doubletap press pan panstart panmove panend swipe pinch rotate';\nconst HIGH_FREQUENCY_EVENTS = new Set(['pan', 'panmove', 'pinch', 'rotate']);\n\ntype HammerStatic = {\n new (element: HTMLElement | SVGElement, options?: AXGestureOptions): AXGestureManager;\n DIRECTION_ALL: number;\n DIRECTION_HORIZONTAL: number;\n DIRECTION_VERTICAL: number;\n};\n\n/**\n * Attaches Hammer.js gesture recognition to the host element.\n *\n * Usage:\n * <div axGesture [direction]=\"'all'\" (tap)=\"onTap($event)\" (pan)=\"onPan($event)\"></div>\n */\n@Directive({\n selector: '[axGesture]',\n exportAs: 'axGesture',\n host: {\n '(click)': 'onHostClick($event)',\n },\n})\nexport class AXGestureDirective implements OnDestroy {\n private readonly el = inject(ElementRef<HTMLElement>);\n private readonly zone = inject(NgZone);\n private readonly platformId = inject(PLATFORM_ID);\n\n /**\n * Extra Hammer.js options forwarded to the manager constructor.\n */\n options = input<AXGestureOptions>({});\n\n /**\n * Pan and swipe direction. Defaults to horizontal, matching Hammer.js.\n */\n direction = input<AXGestureDirection>('horizontal');\n\n /** Internal direction state; can be overridden programmatically by host directives. */\n readonly gestureDirection = linkedSignal(() => this.direction());\n\n /**\n * Enables the multi-touch pinch recognizer. Disabled by default.\n */\n enablePinch = input(false);\n\n /**\n * Enables the multi-touch rotate recognizer. Disabled by default.\n */\n enableRotate = input(false);\n\n /**\n * Stops gesture recognition when true.\n */\n disabled = input(false);\n\n /**\n * Maximum interval in milliseconds between taps for double-tap recognition.\n * Maps to Hammer.js tap recognizer `interval`. Defaults to Hammer's built-in value (300ms).\n */\n tapInterval = input<number | undefined>(undefined);\n\n tap = output<AXGestureEvent>();\n doubletap = output<AXGestureEvent>();\n press = output<AXGestureEvent>();\n pan = output<AXGestureEvent>();\n panstart = output<AXGestureEvent>();\n panmove = output<AXGestureEvent>();\n panend = output<AXGestureEvent>();\n swipe = output<AXGestureEvent>();\n pinch = output<AXGestureEvent>();\n rotate = output<AXGestureEvent>();\n\n private hammer: AXGestureManager | null = null;\n private hammerLib: HammerStatic | null = null;\n private setupId = 0;\n private ready = false;\n\n private readonly emitters: Record<string, OutputEmitterRef<AXGestureEvent>> = {\n tap: this.tap,\n doubletap: this.doubletap,\n press: this.press,\n pan: this.pan,\n panstart: this.panstart,\n panmove: this.panmove,\n panend: this.panend,\n swipe: this.swipe,\n pinch: this.pinch,\n rotate: this.rotate,\n };\n\n /**\n * The underlying Hammer manager, or null when not initialized.\n */\n get manager(): AXGestureManager | null {\n return this.hammer;\n }\n\n #init = afterNextRender(() => {\n if (!isPlatformBrowser(this.platformId)) return;\n this.ready = true;\n void this.setup();\n });\n\n #config = effect(() => {\n this.options();\n this.gestureDirection();\n this.enablePinch();\n this.enableRotate();\n this.disabled();\n this.tapInterval();\n untracked(() => {\n if (this.ready) void this.setup();\n });\n });\n\n /**\n * Suppresses native click propagation when Hammer.js is active so tap/doubletap\n * outputs are the single source of click handling.\n */\n protected onHostClick(event: MouseEvent): void {\n if (this.disabled() || !this.hammer) return;\n event.preventDefault();\n event.stopPropagation();\n event.stopImmediatePropagation();\n }\n\n ngOnDestroy(): void {\n this.setupId++;\n this.teardown();\n }\n\n private async setup(): Promise<void> {\n const id = ++this.setupId;\n this.teardown();\n if (this.disabled() || !isPlatformBrowser(this.platformId)) return;\n\n const HammerLib = await this.loadHammer();\n if (id !== this.setupId) return;\n\n this.zone.runOutsideAngular(() => {\n const options: AXGestureOptions = { ...this.options() };\n if (!options.touchAction) {\n const hostTouchAction = this.el.nativeElement.style.touchAction;\n if (hostTouchAction) {\n options.touchAction = hostTouchAction;\n }\n }\n\n const hammer = new HammerLib(this.el.nativeElement, options);\n const direction = this.toHammerDirection(HammerLib, this.gestureDirection());\n\n hammer.get('pan')?.set({ direction });\n hammer.get('swipe')?.set({ direction });\n hammer.get('pinch')?.set({ enable: this.enablePinch() });\n hammer.get('rotate')?.set({ enable: this.enableRotate() });\n\n const interval = this.tapInterval();\n if (interval != null) {\n hammer.get('tap')?.set({ interval });\n hammer.get('doubletap')?.set({ interval });\n }\n\n hammer.on(HAMMER_EVENTS, this.onHammerEvent);\n\n this.hammer = hammer;\n });\n }\n\n private async loadHammer(): Promise<HammerStatic> {\n if (this.hammerLib) return this.hammerLib;\n const mod = (await import('hammerjs')) as unknown as HammerStatic & { default?: HammerStatic };\n this.hammerLib = mod.default ?? mod;\n return this.hammerLib;\n }\n\n private toHammerDirection(HammerLib: HammerStatic, direction: AXGestureDirection): number {\n if (direction === 'all') return HammerLib.DIRECTION_ALL;\n if (direction === 'vertical') return HammerLib.DIRECTION_VERTICAL;\n return HammerLib.DIRECTION_HORIZONTAL;\n }\n\n private teardown(): void {\n if (!this.hammer) return;\n this.hammer.off(HAMMER_EVENTS, this.onHammerEvent);\n this.hammer.destroy();\n this.hammer = null;\n }\n\n private readonly onHammerEvent = (ev: AXGestureEvent) => {\n const emit = this.emitters[ev.type];\n if (!emit) return;\n if (HIGH_FREQUENCY_EVENTS.has(ev.type)) {\n emit.emit(ev);\n return;\n }\n this.zone.run(() => emit.emit(ev));\n };\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { inject, ElementRef, DestroyRef, input, booleanAttribute, output, afterRenderEffect, Directive, Pipe } from '@angular/core';
|
|
3
|
+
import { AXHighlightService, splitHighlightSegments } from '@acorex/core/utils';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* Directive that highlights text within the host element or its descendants.
|
|
7
|
+
*
|
|
8
|
+
* Usage:
|
|
9
|
+
* ```html
|
|
10
|
+
* <div [axHighlight]="query()">...</div>
|
|
11
|
+
* <table [axHighlight]="query()" highlightSelector="tbody td">...</table>
|
|
12
|
+
* ```
|
|
13
|
+
*/
|
|
14
|
+
class AXHighlightDirective {
|
|
15
|
+
constructor() {
|
|
16
|
+
this.host = inject(ElementRef);
|
|
17
|
+
this.destroyRef = inject(DestroyRef);
|
|
18
|
+
this.highlightService = inject(AXHighlightService);
|
|
19
|
+
/**
|
|
20
|
+
* Text or list of texts to search and highlight.
|
|
21
|
+
*/
|
|
22
|
+
this.axHighlight = input('', /* @ts-ignore */
|
|
23
|
+
...(ngDevMode ? [{ debugName: "axHighlight" }] : /* istanbul ignore next */ []));
|
|
24
|
+
/**
|
|
25
|
+
* Optional CSS selector scoped to the host element.
|
|
26
|
+
* When omitted, highlighting is applied to the host element itself.
|
|
27
|
+
*/
|
|
28
|
+
this.highlightSelector = input(/* @ts-ignore */
|
|
29
|
+
...(ngDevMode ? [undefined, { debugName: "highlightSelector" }] : /* istanbul ignore next */ []));
|
|
30
|
+
/**
|
|
31
|
+
* Optional highlight behavior configuration.
|
|
32
|
+
*/
|
|
33
|
+
this.highlightOptions = input(/* @ts-ignore */
|
|
34
|
+
...(ngDevMode ? [undefined, { debugName: "highlightOptions" }] : /* istanbul ignore next */ []));
|
|
35
|
+
/**
|
|
36
|
+
* When true, highlighting is disabled and any existing highlights are cleared.
|
|
37
|
+
*/
|
|
38
|
+
this.highlightDisabled = input(false, { ...(ngDevMode ? { debugName: "highlightDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
39
|
+
/**
|
|
40
|
+
* Emits the number of matches highlighted after each render cycle.
|
|
41
|
+
*/
|
|
42
|
+
this.matchCount = output();
|
|
43
|
+
afterRenderEffect(() => {
|
|
44
|
+
const target = this.resolveTarget();
|
|
45
|
+
if (this.highlightDisabled()) {
|
|
46
|
+
this.highlightService.clear(target);
|
|
47
|
+
this.matchCount.emit(0);
|
|
48
|
+
return;
|
|
49
|
+
}
|
|
50
|
+
const terms = this.axHighlight();
|
|
51
|
+
const normalizedTerms = (Array.isArray(terms) ? terms : [terms]).map((term) => term.trim()).filter(Boolean);
|
|
52
|
+
if (!normalizedTerms.length) {
|
|
53
|
+
this.highlightService.clear(target);
|
|
54
|
+
this.matchCount.emit(0);
|
|
55
|
+
return;
|
|
56
|
+
}
|
|
57
|
+
const count = this.highlightService.highlight(target, normalizedTerms, this.highlightOptions());
|
|
58
|
+
this.matchCount.emit(count);
|
|
59
|
+
});
|
|
60
|
+
this.destroyRef.onDestroy(() => {
|
|
61
|
+
this.highlightService.clear(this.resolveTarget());
|
|
62
|
+
});
|
|
63
|
+
}
|
|
64
|
+
resolveTarget() {
|
|
65
|
+
const selector = this.highlightSelector()?.trim();
|
|
66
|
+
const hostElement = this.host.nativeElement;
|
|
67
|
+
if (!selector) {
|
|
68
|
+
return hostElement;
|
|
69
|
+
}
|
|
70
|
+
return Array.from(hostElement.querySelectorAll(selector));
|
|
71
|
+
}
|
|
72
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXHighlightDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
73
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: AXHighlightDirective, isStandalone: true, selector: "[axHighlight]", inputs: { axHighlight: { classPropertyName: "axHighlight", publicName: "axHighlight", isSignal: true, isRequired: false, transformFunction: null }, highlightSelector: { classPropertyName: "highlightSelector", publicName: "highlightSelector", isSignal: true, isRequired: false, transformFunction: null }, highlightOptions: { classPropertyName: "highlightOptions", publicName: "highlightOptions", isSignal: true, isRequired: false, transformFunction: null }, highlightDisabled: { classPropertyName: "highlightDisabled", publicName: "highlightDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { matchCount: "matchCount" }, ngImport: i0 }); }
|
|
74
|
+
}
|
|
75
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXHighlightDirective, decorators: [{
|
|
76
|
+
type: Directive,
|
|
77
|
+
args: [{
|
|
78
|
+
selector: '[axHighlight]',
|
|
79
|
+
}]
|
|
80
|
+
}], ctorParameters: () => [], propDecorators: { axHighlight: [{ type: i0.Input, args: [{ isSignal: true, alias: "axHighlight", required: false }] }], highlightSelector: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightSelector", required: false }] }], highlightOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightOptions", required: false }] }], highlightDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightDisabled", required: false }] }], matchCount: [{ type: i0.Output, args: ["matchCount"] }] } });
|
|
81
|
+
|
|
82
|
+
/**
|
|
83
|
+
* Pure pipe that splits text into highlight segments for template rendering.
|
|
84
|
+
*/
|
|
85
|
+
class AXHighlightTextPipe {
|
|
86
|
+
transform(text, query, options) {
|
|
87
|
+
const content = text ?? '';
|
|
88
|
+
if (query == null) {
|
|
89
|
+
return content ? [{ text: content, match: false }] : [];
|
|
90
|
+
}
|
|
91
|
+
return splitHighlightSegments(content, query, options);
|
|
92
|
+
}
|
|
93
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXHighlightTextPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
94
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.6", ngImport: i0, type: AXHighlightTextPipe, isStandalone: true, name: "axHighlightText" }); }
|
|
95
|
+
}
|
|
96
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXHighlightTextPipe, decorators: [{
|
|
97
|
+
type: Pipe,
|
|
98
|
+
args: [{
|
|
99
|
+
name: 'axHighlightText',
|
|
100
|
+
}]
|
|
101
|
+
}] });
|
|
102
|
+
|
|
103
|
+
/**
|
|
104
|
+
* Generated bundle index. Do not edit.
|
|
105
|
+
*/
|
|
106
|
+
|
|
107
|
+
export { AXHighlightDirective, AXHighlightTextPipe };
|
|
108
|
+
//# sourceMappingURL=acorex-cdk-highlight.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"acorex-cdk-highlight.mjs","sources":["../../../../packages/cdk/highlight/src/lib/highlight.directive.ts","../../../../packages/cdk/highlight/src/lib/highlight-text.pipe.ts","../../../../packages/cdk/highlight/src/acorex-cdk-highlight.ts"],"sourcesContent":["import {\n afterRenderEffect,\n booleanAttribute,\n DestroyRef,\n Directive,\n ElementRef,\n inject,\n input,\n output,\n} from '@angular/core';\nimport { AXHighlightOptions, AXHighlightService } from '@acorex/core/utils';\n\n/**\n * Directive that highlights text within the host element or its descendants.\n *\n * Usage:\n * ```html\n * <div [axHighlight]=\"query()\">...</div>\n * <table [axHighlight]=\"query()\" highlightSelector=\"tbody td\">...</table>\n * ```\n */\n@Directive({\n selector: '[axHighlight]',\n})\nexport class AXHighlightDirective {\n private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n private readonly destroyRef = inject(DestroyRef);\n private readonly highlightService = inject(AXHighlightService);\n\n /**\n * Text or list of texts to search and highlight.\n */\n readonly axHighlight = input<string | readonly string[]>('');\n\n /**\n * Optional CSS selector scoped to the host element.\n * When omitted, highlighting is applied to the host element itself.\n */\n readonly highlightSelector = input<string>();\n\n /**\n * Optional highlight behavior configuration.\n */\n readonly highlightOptions = input<AXHighlightOptions>();\n\n /**\n * When true, highlighting is disabled and any existing highlights are cleared.\n */\n readonly highlightDisabled = input(false, { transform: booleanAttribute });\n\n /**\n * Emits the number of matches highlighted after each render cycle.\n */\n readonly matchCount = output<number>();\n\n constructor() {\n afterRenderEffect(() => {\n const target = this.resolveTarget();\n\n if (this.highlightDisabled()) {\n this.highlightService.clear(target);\n this.matchCount.emit(0);\n return;\n }\n\n const terms = this.axHighlight();\n const normalizedTerms = (Array.isArray(terms) ? terms : [terms]).map((term) => term.trim()).filter(Boolean);\n\n if (!normalizedTerms.length) {\n this.highlightService.clear(target);\n this.matchCount.emit(0);\n return;\n }\n\n const count = this.highlightService.highlight(target, normalizedTerms, this.highlightOptions());\n this.matchCount.emit(count);\n });\n\n this.destroyRef.onDestroy(() => {\n this.highlightService.clear(this.resolveTarget());\n });\n }\n\n private resolveTarget(): Element | Element[] {\n const selector = this.highlightSelector()?.trim();\n const hostElement = this.host.nativeElement;\n\n if (!selector) {\n return hostElement;\n }\n\n return Array.from(hostElement.querySelectorAll(selector));\n }\n}\n","import { AXHighlightOptions, AXHighlightSegment, splitHighlightSegments } from '@acorex/core/utils';\nimport { Pipe, PipeTransform } from '@angular/core';\n\n/**\n * Pure pipe that splits text into highlight segments for template rendering.\n */\n@Pipe({\n name: 'axHighlightText',\n})\nexport class AXHighlightTextPipe implements PipeTransform {\n transform(\n text: string | null | undefined,\n query: string | readonly string[] | null | undefined,\n options?: AXHighlightOptions,\n ): AXHighlightSegment[] {\n const content = text ?? '';\n if (query == null) {\n return content ? [{ text: content, match: false }] : [];\n }\n\n return splitHighlightSegments(content, query, options);\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|