@acorex/cdk 22.1.8 → 22.2.0-next.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/auto-follow-scroll/README.md +9 -0
- package/fesm2022/acorex-cdk-accordion.mjs +19 -19
- package/fesm2022/acorex-cdk-accordion.mjs.map +1 -1
- package/fesm2022/acorex-cdk-auto-follow-scroll.mjs +187 -0
- package/fesm2022/acorex-cdk-auto-follow-scroll.mjs.map +1 -0
- 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-clipboard.mjs.map +1 -1
- package/fesm2022/acorex-cdk-common.mjs +146 -92
- package/fesm2022/acorex-cdk-common.mjs.map +1 -1
- package/fesm2022/acorex-cdk-dom.mjs +3 -3
- package/fesm2022/acorex-cdk-dom.mjs.map +1 -1
- package/fesm2022/acorex-cdk-drag-drop.mjs +158 -68
- package/fesm2022/acorex-cdk-drag-drop.mjs.map +1 -1
- package/fesm2022/acorex-cdk-drawer.mjs +11 -11
- package/fesm2022/acorex-cdk-drawer.mjs.map +1 -1
- package/fesm2022/acorex-cdk-focus-trap.mjs +3 -3
- package/fesm2022/acorex-cdk-focus-trap.mjs.map +1 -1
- 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 +30 -4
- package/fesm2022/acorex-cdk-gesture.mjs.map +1 -1
- package/fesm2022/acorex-cdk-highlight.mjs +8 -78
- package/fesm2022/acorex-cdk-highlight.mjs.map +1 -1
- package/fesm2022/acorex-cdk-horizontal-scroll.mjs +27 -10
- package/fesm2022/acorex-cdk-horizontal-scroll.mjs.map +1 -1
- package/fesm2022/acorex-cdk-input-mask.mjs +3 -3
- package/fesm2022/acorex-cdk-input-mask.mjs.map +1 -1
- package/fesm2022/acorex-cdk-list-navigation.mjs +10 -10
- package/fesm2022/acorex-cdk-list-navigation.mjs.map +1 -1
- package/fesm2022/acorex-cdk-outline.mjs +277 -74
- package/fesm2022/acorex-cdk-outline.mjs.map +1 -1
- package/fesm2022/acorex-cdk-overlay.mjs +224 -21
- package/fesm2022/acorex-cdk-overlay.mjs.map +1 -1
- package/fesm2022/acorex-cdk-pan-view.mjs +3 -3
- package/fesm2022/acorex-cdk-pan-view.mjs.map +1 -1
- package/fesm2022/acorex-cdk-qrcode.mjs.map +1 -1
- package/fesm2022/acorex-cdk-resizable.mjs +483 -200
- package/fesm2022/acorex-cdk-resizable.mjs.map +1 -1
- package/fesm2022/acorex-cdk-selection.mjs +10 -10
- package/fesm2022/acorex-cdk-selection.mjs.map +1 -1
- 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-sliding-item.mjs.map +1 -1
- package/fesm2022/acorex-cdk-sticky.mjs +3 -3
- package/fesm2022/acorex-cdk-sticky.mjs.map +1 -1
- package/fesm2022/acorex-cdk-uploader.mjs +9 -9
- package/fesm2022/acorex-cdk-uploader.mjs.map +1 -1
- package/fesm2022/acorex-cdk-viewport-guard.mjs +616 -0
- package/fesm2022/acorex-cdk-viewport-guard.mjs.map +1 -0
- package/fesm2022/acorex-cdk-virtual-scroll.mjs +10 -10
- package/fesm2022/acorex-cdk-virtual-scroll.mjs.map +1 -1
- package/fesm2022/acorex-cdk-wysiwyg.mjs +689 -37
- package/fesm2022/acorex-cdk-wysiwyg.mjs.map +1 -1
- package/fesm2022/acorex-cdk-z-index.mjs +3 -3
- package/fesm2022/acorex-cdk-z-index.mjs.map +1 -1
- package/fesm2022/acorex-cdk.mjs.map +1 -1
- package/package.json +23 -7
- package/shimmer/README.md +11 -0
- package/types/acorex-cdk-auto-follow-scroll.d.ts +72 -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 +43 -17
- package/types/acorex-cdk-full-screen.d.ts +18 -43
- package/types/acorex-cdk-gesture.d.ts +11 -1
- package/types/acorex-cdk-highlight.d.ts +1 -28
- package/types/acorex-cdk-horizontal-scroll.d.ts +3 -0
- package/types/acorex-cdk-outline.d.ts +20 -0
- package/types/acorex-cdk-overlay.d.ts +60 -4
- package/types/acorex-cdk-resizable.d.ts +80 -38
- package/types/acorex-cdk-shimmer.d.ts +68 -0
- package/types/acorex-cdk-uploader.d.ts +1 -1
- package/types/acorex-cdk-viewport-guard.d.ts +99 -0
- package/types/acorex-cdk-wysiwyg.d.ts +118 -14
- package/wysiwyg/README.md +3 -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
|
@@ -1,6 +1,26 @@
|
|
|
1
1
|
import * as _angular_core from '@angular/core';
|
|
2
2
|
import { AfterViewInit, OnDestroy } from '@angular/core';
|
|
3
3
|
|
|
4
|
+
type AXResizeHandle = 'start' | 'end' | 'top' | 'bottom' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
|
|
5
|
+
interface AXResizeSize {
|
|
6
|
+
width: number;
|
|
7
|
+
height: number;
|
|
8
|
+
}
|
|
9
|
+
/**
|
|
10
|
+
* Resize event payload. `value` / `oldValue` remain the host width so existing
|
|
11
|
+
* width-only listeners (`AXValueChangedEvent<number>`) keep compiling. Use `size`
|
|
12
|
+
* / `oldSize` when both axes matter.
|
|
13
|
+
*/
|
|
14
|
+
interface AXResizeChangedEvent {
|
|
15
|
+
component: unknown;
|
|
16
|
+
htmlElement?: HTMLElement;
|
|
17
|
+
isUserInteraction?: boolean;
|
|
18
|
+
name?: string;
|
|
19
|
+
value?: number;
|
|
20
|
+
oldValue?: number;
|
|
21
|
+
size: AXResizeSize;
|
|
22
|
+
oldSize: AXResizeSize;
|
|
23
|
+
}
|
|
4
24
|
declare class AXResizableDirective implements AfterViewInit, OnDestroy {
|
|
5
25
|
private readonly el;
|
|
6
26
|
private readonly platformService;
|
|
@@ -9,67 +29,89 @@ declare class AXResizableDirective implements AfterViewInit, OnDestroy {
|
|
|
9
29
|
private readonly platformID;
|
|
10
30
|
private readonly isBrowser;
|
|
11
31
|
private hostElement;
|
|
12
|
-
private
|
|
13
|
-
private isResizing;
|
|
32
|
+
private readonly resizeHandles;
|
|
33
|
+
private readonly isResizing;
|
|
34
|
+
private activeHandle;
|
|
14
35
|
private initialElementWidth;
|
|
15
|
-
private
|
|
16
|
-
private
|
|
17
|
-
private
|
|
18
|
-
private
|
|
19
|
-
private
|
|
20
|
-
private
|
|
21
|
-
private readonly
|
|
36
|
+
private initialElementHeight;
|
|
37
|
+
private startX;
|
|
38
|
+
private startY;
|
|
39
|
+
private startWidth;
|
|
40
|
+
private startHeight;
|
|
41
|
+
private startRatio;
|
|
42
|
+
private readonly subscriptions;
|
|
43
|
+
private resizeObserver?;
|
|
44
|
+
private readonly boundPointerDown;
|
|
45
|
+
private readonly boundPointerMove;
|
|
46
|
+
private readonly boundPointerUp;
|
|
47
|
+
private readonly boundPointerEnter;
|
|
48
|
+
private readonly boundPointerLeave;
|
|
22
49
|
private readonly boundDoubleClick;
|
|
23
|
-
private readonly
|
|
50
|
+
private readonly isRTL;
|
|
24
51
|
/** Define if directive is active or not */
|
|
25
52
|
axResizable: _angular_core.ModelSignal<boolean>;
|
|
53
|
+
/** Logical handles to render. Defaults to the inline-end edge. */
|
|
54
|
+
handles: _angular_core.ModelSignal<AXResizeHandle[]>;
|
|
26
55
|
/** Minimum width for the resizable element. */
|
|
27
56
|
minWidth: _angular_core.ModelSignal<number>;
|
|
28
57
|
/** Maximum width for the resizable element. Defaults to parent width if not provided. */
|
|
29
58
|
maxWidth: _angular_core.ModelSignal<number>;
|
|
30
|
-
/**
|
|
59
|
+
/** Minimum height for the resizable element. */
|
|
60
|
+
minHeight: _angular_core.ModelSignal<number>;
|
|
61
|
+
/** Maximum height for the resizable element. Defaults to parent height if not provided. */
|
|
62
|
+
maxHeight: _angular_core.ModelSignal<number>;
|
|
63
|
+
/** Behavior on double-click: 'reset', 'maximize', or 'fit'. */
|
|
31
64
|
dblClickAction: _angular_core.ModelSignal<"reset" | "maximize" | "fit">;
|
|
32
65
|
/** Define initial width for the element. */
|
|
33
66
|
width: _angular_core.ModelSignal<number>;
|
|
34
67
|
/** Define reset width for the element. */
|
|
35
68
|
defaultWidth: _angular_core.ModelSignal<number>;
|
|
69
|
+
/** Define initial height for the element. */
|
|
70
|
+
height: _angular_core.ModelSignal<number>;
|
|
71
|
+
/** Define reset height for the element. */
|
|
72
|
+
defaultHeight: _angular_core.ModelSignal<number>;
|
|
73
|
+
/** Lock the element's aspect ratio from the size captured at pointer-down. */
|
|
74
|
+
lockAspectRatio: _angular_core.ModelSignal<boolean>;
|
|
36
75
|
/** Event emitted when resizing starts. */
|
|
37
|
-
onResizingStarted: _angular_core.OutputEmitterRef<
|
|
76
|
+
onResizingStarted: _angular_core.OutputEmitterRef<AXResizeChangedEvent>;
|
|
38
77
|
/** Event emitted when resizing ends. */
|
|
39
|
-
onResizingEnded: _angular_core.OutputEmitterRef<
|
|
78
|
+
onResizingEnded: _angular_core.OutputEmitterRef<AXResizeChangedEvent>;
|
|
40
79
|
/** Event emitted on double-click. */
|
|
41
|
-
onResizingDblClick: _angular_core.OutputEmitterRef<
|
|
80
|
+
onResizingDblClick: _angular_core.OutputEmitterRef<AXResizeChangedEvent>;
|
|
42
81
|
constructor();
|
|
43
82
|
ngAfterViewInit(): void;
|
|
44
83
|
ngOnDestroy(): void;
|
|
45
|
-
private
|
|
46
|
-
private
|
|
47
|
-
private
|
|
48
|
-
private
|
|
84
|
+
private reconcileHandles;
|
|
85
|
+
private createHandle;
|
|
86
|
+
private attachHandleListeners;
|
|
87
|
+
private destroyHandle;
|
|
88
|
+
private destroyAllHandles;
|
|
49
89
|
private applyHandleStyles;
|
|
50
|
-
private
|
|
51
|
-
private
|
|
52
|
-
private
|
|
53
|
-
private
|
|
54
|
-
private
|
|
55
|
-
private
|
|
56
|
-
private
|
|
57
|
-
private
|
|
58
|
-
private
|
|
90
|
+
private updateAllHandlePositions;
|
|
91
|
+
private positionHandle;
|
|
92
|
+
private applyInlineSide;
|
|
93
|
+
private applySizeFromModel;
|
|
94
|
+
private applySize;
|
|
95
|
+
private onPointerDown;
|
|
96
|
+
private onPointerMove;
|
|
97
|
+
private onPointerUp;
|
|
98
|
+
private onPointerEnter;
|
|
99
|
+
private onPointerLeave;
|
|
59
100
|
private onDoubleClick;
|
|
60
|
-
private
|
|
61
|
-
private
|
|
101
|
+
private computeSize;
|
|
102
|
+
private clampSize;
|
|
103
|
+
private resetToInitialSize;
|
|
104
|
+
private maximizeToMaxSize;
|
|
62
105
|
private fitToContent;
|
|
106
|
+
private getCurrentSize;
|
|
107
|
+
private createResizeEvent;
|
|
108
|
+
private getHandleType;
|
|
109
|
+
private getCursorForHandle;
|
|
110
|
+
private getActiveCursor;
|
|
111
|
+
private stopResizing;
|
|
63
112
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXResizableDirective, never>;
|
|
64
|
-
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AXResizableDirective, "[axResizable]", never, { "axResizable": { "alias": "axResizable"; "required": false; "isSignal": true; }; "minWidth": { "alias": "minWidth"; "required": false; "isSignal": true; }; "maxWidth": { "alias": "maxWidth"; "required": false; "isSignal": true; }; "dblClickAction": { "alias": "dblClickAction"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "defaultWidth": { "alias": "defaultWidth"; "required": false; "isSignal": true; }; }, { "axResizable": "axResizableChange"; "minWidth": "minWidthChange"; "maxWidth": "maxWidthChange"; "dblClickAction": "dblClickActionChange"; "width": "widthChange"; "defaultWidth": "defaultWidthChange"; "onResizingStarted": "onResizingStarted"; "onResizingEnded": "onResizingEnded"; "onResizingDblClick": "onResizingDblClick"; }, never, never, true, never>;
|
|
65
|
-
}
|
|
66
|
-
interface AXValueChangedEvent<T> {
|
|
67
|
-
component: unknown;
|
|
68
|
-
htmlElement?: HTMLElement;
|
|
69
|
-
isUserInteraction?: boolean;
|
|
70
|
-
name?: string;
|
|
71
|
-
value?: T;
|
|
72
|
-
oldValue?: T;
|
|
113
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AXResizableDirective, "[axResizable]", never, { "axResizable": { "alias": "axResizable"; "required": false; "isSignal": true; }; "handles": { "alias": "handles"; "required": false; "isSignal": true; }; "minWidth": { "alias": "minWidth"; "required": false; "isSignal": true; }; "maxWidth": { "alias": "maxWidth"; "required": false; "isSignal": true; }; "minHeight": { "alias": "minHeight"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "dblClickAction": { "alias": "dblClickAction"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "defaultWidth": { "alias": "defaultWidth"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "defaultHeight": { "alias": "defaultHeight"; "required": false; "isSignal": true; }; "lockAspectRatio": { "alias": "lockAspectRatio"; "required": false; "isSignal": true; }; }, { "axResizable": "axResizableChange"; "handles": "handlesChange"; "minWidth": "minWidthChange"; "maxWidth": "maxWidthChange"; "minHeight": "minHeightChange"; "maxHeight": "maxHeightChange"; "dblClickAction": "dblClickActionChange"; "width": "widthChange"; "defaultWidth": "defaultWidthChange"; "height": "heightChange"; "defaultHeight": "defaultHeightChange"; "lockAspectRatio": "lockAspectRatioChange"; "onResizingStarted": "onResizingStarted"; "onResizingEnded": "onResizingEnded"; "onResizingDblClick": "onResizingDblClick"; }, never, never, true, never>;
|
|
73
114
|
}
|
|
74
115
|
|
|
75
116
|
export { AXResizableDirective };
|
|
117
|
+
export type { AXResizeChangedEvent, AXResizeHandle, AXResizeSize };
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
import * as _angular_core from '@angular/core';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Applies the shimmer text effect to a host element.
|
|
5
|
+
*/
|
|
6
|
+
declare class AXShimmerDirective {
|
|
7
|
+
#private;
|
|
8
|
+
private readonly hostElement;
|
|
9
|
+
private readonly destroyRef;
|
|
10
|
+
private readonly platformId;
|
|
11
|
+
private readonly refresh;
|
|
12
|
+
/**
|
|
13
|
+
* Plays the shimmer animation once instead of looping.
|
|
14
|
+
*
|
|
15
|
+
* @defaultValue false
|
|
16
|
+
*/
|
|
17
|
+
once: _angular_core.InputSignal<boolean>;
|
|
18
|
+
/**
|
|
19
|
+
* Reverses the shimmer sweep direction.
|
|
20
|
+
*
|
|
21
|
+
* @defaultValue false
|
|
22
|
+
*/
|
|
23
|
+
reverse: _angular_core.InputSignal<boolean>;
|
|
24
|
+
/**
|
|
25
|
+
* Disables the shimmer effect and renders normal text.
|
|
26
|
+
*
|
|
27
|
+
* @defaultValue false
|
|
28
|
+
*/
|
|
29
|
+
disabled: _angular_core.InputSignal<boolean>;
|
|
30
|
+
/**
|
|
31
|
+
* Duration of one shimmer sweep in milliseconds.
|
|
32
|
+
*
|
|
33
|
+
* @defaultValue 2000
|
|
34
|
+
*/
|
|
35
|
+
duration: _angular_core.InputSignal<number>;
|
|
36
|
+
/**
|
|
37
|
+
* Width of the highlight band. Numbers use the spacing scale; strings accept any CSS length.
|
|
38
|
+
*/
|
|
39
|
+
spread: _angular_core.InputSignal<string | number>;
|
|
40
|
+
/**
|
|
41
|
+
* Tilt of the highlight band in degrees.
|
|
42
|
+
*
|
|
43
|
+
* @defaultValue 20
|
|
44
|
+
*/
|
|
45
|
+
angle: _angular_core.InputSignal<number>;
|
|
46
|
+
/**
|
|
47
|
+
* Explicit highlight color. Accepts ACoreX semantic colors (`primary`, `danger`, …) or any CSS color value.
|
|
48
|
+
* Falls back to a tint derived from currentColor when omitted.
|
|
49
|
+
*/
|
|
50
|
+
color: _angular_core.InputSignal<string>;
|
|
51
|
+
constructor();
|
|
52
|
+
private get element();
|
|
53
|
+
private resolveSpread;
|
|
54
|
+
private isSemanticColor;
|
|
55
|
+
private resolveHighlightColor;
|
|
56
|
+
private isDarkMode;
|
|
57
|
+
private isRtl;
|
|
58
|
+
private prefersReducedMotion;
|
|
59
|
+
private buildBackgroundImage;
|
|
60
|
+
private applyShimmerStyles;
|
|
61
|
+
private clearShimmerStyles;
|
|
62
|
+
private restartShimmerAnimation;
|
|
63
|
+
private cancelShimmerAnimation;
|
|
64
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXShimmerDirective, never>;
|
|
65
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AXShimmerDirective, "[axShimmer]", never, { "once": { "alias": "once"; "required": false; "isSignal": true; }; "reverse": { "alias": "reverse"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "duration": { "alias": "duration"; "required": false; "isSignal": true; }; "spread": { "alias": "spread"; "required": false; "isSignal": true; }; "angle": { "alias": "angle"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
export { AXShimmerDirective };
|
|
@@ -381,7 +381,7 @@ declare class AXUploaderService {
|
|
|
381
381
|
private bindEvents;
|
|
382
382
|
private applyFileTypeValidation;
|
|
383
383
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXUploaderService, never>;
|
|
384
|
-
static ɵprov: _angular_core.ɵɵInjectableDeclaration<
|
|
384
|
+
static ɵprov: _angular_core.ɵɵInjectableDeclaration<any>;
|
|
385
385
|
}
|
|
386
386
|
|
|
387
387
|
export { AXUploadRequest, AXUploaderBrowseDirective, AXUploaderService, AXUploaderZoneDirective };
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
import * as _angular_core from '@angular/core';
|
|
2
|
+
import { TemplateRef } from '@angular/core';
|
|
3
|
+
|
|
4
|
+
type AXScreenOrientation = 'portrait' | 'landscape';
|
|
5
|
+
/** Optional copy. Empty fields fall back to the translated defaults. */
|
|
6
|
+
interface AXViewportGuardMessage {
|
|
7
|
+
kicker?: string | null;
|
|
8
|
+
title?: string | null;
|
|
9
|
+
message?: string | null;
|
|
10
|
+
hint?: string | null;
|
|
11
|
+
}
|
|
12
|
+
/** Resolved warning passed into a custom template as `let-message`. */
|
|
13
|
+
interface AXViewportGuardTemplateData {
|
|
14
|
+
kind: 'size' | 'orientation';
|
|
15
|
+
orientation: AXScreenOrientation | null;
|
|
16
|
+
kicker: string;
|
|
17
|
+
title: string;
|
|
18
|
+
message: string;
|
|
19
|
+
hint: string;
|
|
20
|
+
}
|
|
21
|
+
/** Context of `axViewportGuardTemplate`. `$implicit` and `message` are the same data. */
|
|
22
|
+
interface AXViewportGuardTemplateContext {
|
|
23
|
+
$implicit: AXViewportGuardTemplateData;
|
|
24
|
+
message: AXViewportGuardTemplateData;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
/**
|
|
28
|
+
* Hides the host when the viewport is smaller than the given size.
|
|
29
|
+
*
|
|
30
|
+
* ```html
|
|
31
|
+
* <div axMinViewport="1024" [minHeight]="640" [message]="copy" [template]="warning"></div>
|
|
32
|
+
* ```
|
|
33
|
+
*/
|
|
34
|
+
declare class AXMinViewportDirective {
|
|
35
|
+
/** Minimum viewport width in CSS pixels. */
|
|
36
|
+
readonly minWidth: _angular_core.InputSignalWithTransform<number, unknown>;
|
|
37
|
+
/** Minimum viewport height in CSS pixels. Omitted heights are ignored. */
|
|
38
|
+
readonly minHeight: _angular_core.InputSignalWithTransform<number, unknown>;
|
|
39
|
+
/** Replaces any part of the default translated warning. */
|
|
40
|
+
readonly message: _angular_core.InputSignal<AXViewportGuardMessage>;
|
|
41
|
+
/** Custom warning. `let-message` receives the resolved copy. */
|
|
42
|
+
readonly template: _angular_core.InputSignal<TemplateRef<AXViewportGuardTemplateContext>>;
|
|
43
|
+
private readonly presenter;
|
|
44
|
+
private readonly projectedTemplate;
|
|
45
|
+
constructor();
|
|
46
|
+
private request;
|
|
47
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXMinViewportDirective, never>;
|
|
48
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AXMinViewportDirective, "[axMinViewport]", ["axMinViewport"], { "minWidth": { "alias": "axMinViewport"; "required": false; "isSignal": true; }; "minHeight": { "alias": "minHeight"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "template": { "alias": "template"; "required": false; "isSignal": true; }; }, {}, ["projectedTemplate"], never, true, never>;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
/**
|
|
52
|
+
* On a phone, hides the host when the device is not in the required orientation.
|
|
53
|
+
*
|
|
54
|
+
* ```html
|
|
55
|
+
* <div axOrientationLock="landscape" [message]="copy" [template]="warning"></div>
|
|
56
|
+
* ```
|
|
57
|
+
*/
|
|
58
|
+
declare class AXOrientationLockDirective {
|
|
59
|
+
/** Orientation that keeps the page visible. */
|
|
60
|
+
readonly orientation: _angular_core.InputSignal<AXScreenOrientation>;
|
|
61
|
+
/**
|
|
62
|
+
* Limits the guard to phones. Set to false to apply it on every device.
|
|
63
|
+
*
|
|
64
|
+
* @defaultValue true
|
|
65
|
+
*/
|
|
66
|
+
readonly phonesOnly: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
67
|
+
/** Replaces any part of the default translated warning. */
|
|
68
|
+
readonly message: _angular_core.InputSignal<AXViewportGuardMessage>;
|
|
69
|
+
/** Custom warning. `let-message` receives the resolved copy. */
|
|
70
|
+
readonly template: _angular_core.InputSignal<TemplateRef<AXViewportGuardTemplateContext>>;
|
|
71
|
+
private readonly presenter;
|
|
72
|
+
private readonly projectedTemplate;
|
|
73
|
+
constructor();
|
|
74
|
+
private request;
|
|
75
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXOrientationLockDirective, never>;
|
|
76
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AXOrientationLockDirective, "[axOrientationLock]", ["axOrientationLock"], { "orientation": { "alias": "axOrientationLock"; "required": true; "isSignal": true; }; "phonesOnly": { "alias": "phonesOnly"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "template": { "alias": "template"; "required": false; "isSignal": true; }; }, {}, ["projectedTemplate"], never, true, never>;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
/**
|
|
80
|
+
* Types an `ng-template` whose `let-message` is the resolved guard copy.
|
|
81
|
+
*
|
|
82
|
+
* ```html
|
|
83
|
+
* <ng-template #warning axViewportGuardTemplate let-message>
|
|
84
|
+
* <h2>{{ message.title }}</h2>
|
|
85
|
+
* <p>{{ message.message }}</p>
|
|
86
|
+
* </ng-template>
|
|
87
|
+
*
|
|
88
|
+
* <div axMinViewport="1024" [template]="warning"></div>
|
|
89
|
+
* ```
|
|
90
|
+
*/
|
|
91
|
+
declare class AXViewportGuardTemplateDirective {
|
|
92
|
+
readonly template: TemplateRef<any>;
|
|
93
|
+
static ngTemplateContextGuard(_directive: AXViewportGuardTemplateDirective, _context: unknown): _context is AXViewportGuardTemplateContext;
|
|
94
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXViewportGuardTemplateDirective, never>;
|
|
95
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AXViewportGuardTemplateDirective, "ng-template[axViewportGuardTemplate]", never, {}, {}, never, never, true, never>;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
export { AXMinViewportDirective, AXOrientationLockDirective, AXViewportGuardTemplateDirective };
|
|
99
|
+
export type { AXScreenOrientation, AXViewportGuardMessage, AXViewportGuardTemplateContext, AXViewportGuardTemplateData };
|
|
@@ -1,12 +1,85 @@
|
|
|
1
1
|
import * as _angular_core from '@angular/core';
|
|
2
|
-
import
|
|
2
|
+
import { Extensions, Editor } from '@tiptap/core';
|
|
3
|
+
|
|
4
|
+
type AXWysiwygEditor = Editor;
|
|
5
|
+
type AXWysiwygHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
|
|
6
|
+
type AXWysiwygTextAlign = 'left' | 'center' | 'right' | 'justify';
|
|
7
|
+
type AXWysiwygFontSizeToken = 'small' | 'large' | 'huge';
|
|
8
|
+
type AXWysiwygTextDirection = 'rtl' | 'ltr';
|
|
9
|
+
interface AXWysiwygRange {
|
|
10
|
+
index: number;
|
|
11
|
+
length: number;
|
|
12
|
+
}
|
|
13
|
+
type AXWysiwygCommand = 'bold' | 'italic' | 'underline' | 'strike' | 'code' | 'codeBlock' | 'heading' | 'paragraph' | 'bulletList' | 'orderedList' | 'blockquote' | 'textAlign' | 'color' | 'highlight' | 'link' | 'image' | 'video' | 'undo' | 'redo' | 'clearFormatting' | 'direction' | 'fontSize';
|
|
14
|
+
interface AXWysiwygFeatures {
|
|
15
|
+
textAlign?: boolean;
|
|
16
|
+
image?: boolean;
|
|
17
|
+
link?: boolean;
|
|
18
|
+
video?: boolean;
|
|
19
|
+
color?: boolean;
|
|
20
|
+
highlight?: boolean;
|
|
21
|
+
placeholder?: boolean;
|
|
22
|
+
fontSize?: boolean;
|
|
23
|
+
textDirection?: boolean;
|
|
24
|
+
}
|
|
25
|
+
declare const AX_DEFAULT_WYSIWYG_FEATURES: AXWysiwygFeatures;
|
|
26
|
+
interface AXWysiwygState {
|
|
27
|
+
bold: boolean;
|
|
28
|
+
italic: boolean;
|
|
29
|
+
underline: boolean;
|
|
30
|
+
strike: boolean;
|
|
31
|
+
code: boolean;
|
|
32
|
+
codeBlock: boolean;
|
|
33
|
+
headingLevel: AXWysiwygHeadingLevel | null;
|
|
34
|
+
bulletList: boolean;
|
|
35
|
+
orderedList: boolean;
|
|
36
|
+
blockquote: boolean;
|
|
37
|
+
textAlign: AXWysiwygTextAlign | null;
|
|
38
|
+
textColor: string | null;
|
|
39
|
+
highlightColor: string | null;
|
|
40
|
+
linkHref: string | null;
|
|
41
|
+
fontSize: AXWysiwygFontSizeToken | null;
|
|
42
|
+
textDirection: AXWysiwygTextDirection | null;
|
|
43
|
+
canUndo: boolean;
|
|
44
|
+
canRedo: boolean;
|
|
45
|
+
isEmpty: boolean;
|
|
46
|
+
isFocused: boolean;
|
|
47
|
+
}
|
|
48
|
+
declare const AX_EMPTY_WYSIWYG_STATE: AXWysiwygState;
|
|
49
|
+
interface AXWysiwygInitOptions {
|
|
50
|
+
content?: string;
|
|
51
|
+
editable?: boolean;
|
|
52
|
+
placeholder?: string;
|
|
53
|
+
features?: AXWysiwygFeatures;
|
|
54
|
+
extensions?: Extensions;
|
|
55
|
+
/** @deprecated Use `editable: false` instead. */
|
|
56
|
+
readOnly?: boolean;
|
|
57
|
+
onUpdate?: (editor: AXWysiwygEditor) => void;
|
|
58
|
+
onFocus?: (editor: AXWysiwygEditor) => void;
|
|
59
|
+
onBlur?: (editor: AXWysiwygEditor) => void;
|
|
60
|
+
onSelectionUpdate?: (editor: AXWysiwygEditor) => void;
|
|
61
|
+
}
|
|
62
|
+
interface AXWysiwygLoadExtensionsOptions {
|
|
63
|
+
features?: AXWysiwygFeatures;
|
|
64
|
+
placeholder?: string;
|
|
65
|
+
}
|
|
3
66
|
|
|
4
|
-
type Wysiwyg = Quill;
|
|
5
|
-
type WysiwygOptions = QuillOptions;
|
|
6
67
|
declare class AXWysiwyg {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
68
|
+
readonly editor: _angular_core.WritableSignal<Editor>;
|
|
69
|
+
readonly state: _angular_core.WritableSignal<AXWysiwygState>;
|
|
70
|
+
readonly ready: _angular_core.WritableSignal<boolean>;
|
|
71
|
+
private readonly platformId;
|
|
72
|
+
private destroyed;
|
|
73
|
+
private applyingContent;
|
|
74
|
+
init(container: HTMLElement | string, options?: AXWysiwygInitOptions): Promise<void>;
|
|
75
|
+
destroy(): void;
|
|
76
|
+
setContent(value: string | null | undefined, emit?: boolean): void;
|
|
77
|
+
getHTML(): string;
|
|
78
|
+
get JSONoutput(): unknown;
|
|
79
|
+
getText(): string;
|
|
80
|
+
isEmpty(): boolean;
|
|
81
|
+
setEditable(editable: boolean): void;
|
|
82
|
+
get HTMLoutput(): string;
|
|
10
83
|
bold(value: boolean): void;
|
|
11
84
|
italic(value: boolean): void;
|
|
12
85
|
underLine(value: boolean): void;
|
|
@@ -15,17 +88,48 @@ declare class AXWysiwyg {
|
|
|
15
88
|
header(value: number): void;
|
|
16
89
|
list(value: 'ordered' | 'bullet' | ''): void;
|
|
17
90
|
align(value: 'center' | 'right' | 'left' | 'justify'): void;
|
|
18
|
-
direction(value:
|
|
19
|
-
fontSize(value: 'small' | false | 'large' | 'huge', range:
|
|
20
|
-
get HTMLoutput(): string;
|
|
21
|
-
undo(): void;
|
|
22
|
-
redo(): void;
|
|
91
|
+
direction(value: AXWysiwygTextDirection): void;
|
|
92
|
+
fontSize(value: 'small' | false | 'large' | 'huge', range: AXWysiwygRange): void;
|
|
23
93
|
background(value: string): void;
|
|
24
94
|
addImage(value: string): void;
|
|
95
|
+
insertVideo(src: string): void;
|
|
96
|
+
codeBlock(range: AXWysiwygRange, status: boolean): void;
|
|
25
97
|
focus(): void;
|
|
26
98
|
blur(): void;
|
|
27
|
-
|
|
99
|
+
toggleBold(): void;
|
|
100
|
+
toggleItalic(): void;
|
|
101
|
+
toggleUnderline(): void;
|
|
102
|
+
toggleStrike(): void;
|
|
103
|
+
toggleCode(): void;
|
|
104
|
+
toggleCodeBlock(): void;
|
|
105
|
+
toggleHeading(level: AXWysiwygHeadingLevel): void;
|
|
106
|
+
setParagraph(): void;
|
|
107
|
+
toggleBulletList(): void;
|
|
108
|
+
toggleOrderedList(): void;
|
|
109
|
+
toggleBlockquote(): void;
|
|
110
|
+
setTextAlign(align: AXWysiwygTextAlign): void;
|
|
111
|
+
setTextDirection(direction: AXWysiwygTextDirection | null): void;
|
|
112
|
+
setFontSize(size: AXWysiwygFontSizeToken | null): void;
|
|
113
|
+
setColor(color: string): void;
|
|
114
|
+
unsetColor(): void;
|
|
115
|
+
setHighlight(color: string): void;
|
|
116
|
+
unsetHighlight(): void;
|
|
117
|
+
setLink(href: string): void;
|
|
118
|
+
unsetLink(): void;
|
|
119
|
+
insertImage(src: string, alt?: string): void;
|
|
120
|
+
undo(): void;
|
|
121
|
+
redo(): void;
|
|
122
|
+
clearFormatting(): void;
|
|
123
|
+
execute(command: AXWysiwygCommand, payload?: unknown): void;
|
|
124
|
+
isActive(name: string, attrs?: Record<string, unknown>): boolean;
|
|
125
|
+
can(command: 'undo' | 'redo'): boolean;
|
|
126
|
+
private setMarkActive;
|
|
127
|
+
private refreshState;
|
|
128
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXWysiwyg, never>;
|
|
129
|
+
static ɵprov: _angular_core.ɵɵInjectableDeclaration<any>;
|
|
28
130
|
}
|
|
29
131
|
|
|
30
|
-
|
|
31
|
-
|
|
132
|
+
declare function loadAXWysiwygExtensions(options?: AXWysiwygLoadExtensionsOptions): Promise<Extensions>;
|
|
133
|
+
|
|
134
|
+
export { AXWysiwyg, AX_DEFAULT_WYSIWYG_FEATURES, AX_EMPTY_WYSIWYG_STATE, loadAXWysiwygExtensions };
|
|
135
|
+
export type { AXWysiwygCommand, AXWysiwygEditor, AXWysiwygFeatures, AXWysiwygFontSizeToken, AXWysiwygHeadingLevel, AXWysiwygInitOptions, AXWysiwygLoadExtensionsOptions, AXWysiwygRange, AXWysiwygState, AXWysiwygTextAlign, AXWysiwygTextDirection };
|
package/wysiwyg/README.md
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
1
|
# @acorex/cdk/wysiwyg
|
|
2
2
|
|
|
3
|
-
Secondary entry point of `@acorex/cdk`.
|
|
3
|
+
Secondary entry point of `@acorex/cdk`. Headless TipTap-powered rich text API. Import from `@acorex/cdk/wysiwyg`.
|
|
4
|
+
|
|
5
|
+
Requires `@tiptap/*` peer dependencies (lazy-loaded at runtime).
|