@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.
Files changed (81) hide show
  1. package/auto-follow-scroll/README.md +9 -0
  2. package/fesm2022/acorex-cdk-accordion.mjs +19 -19
  3. package/fesm2022/acorex-cdk-accordion.mjs.map +1 -1
  4. package/fesm2022/acorex-cdk-auto-follow-scroll.mjs +187 -0
  5. package/fesm2022/acorex-cdk-auto-follow-scroll.mjs.map +1 -0
  6. package/fesm2022/acorex-cdk-carousel.mjs +25 -7
  7. package/fesm2022/acorex-cdk-carousel.mjs.map +1 -1
  8. package/fesm2022/acorex-cdk-clipboard.mjs +6 -6
  9. package/fesm2022/acorex-cdk-clipboard.mjs.map +1 -1
  10. package/fesm2022/acorex-cdk-common.mjs +146 -92
  11. package/fesm2022/acorex-cdk-common.mjs.map +1 -1
  12. package/fesm2022/acorex-cdk-dom.mjs +3 -3
  13. package/fesm2022/acorex-cdk-dom.mjs.map +1 -1
  14. package/fesm2022/acorex-cdk-drag-drop.mjs +158 -68
  15. package/fesm2022/acorex-cdk-drag-drop.mjs.map +1 -1
  16. package/fesm2022/acorex-cdk-drawer.mjs +11 -11
  17. package/fesm2022/acorex-cdk-drawer.mjs.map +1 -1
  18. package/fesm2022/acorex-cdk-focus-trap.mjs +3 -3
  19. package/fesm2022/acorex-cdk-focus-trap.mjs.map +1 -1
  20. package/fesm2022/acorex-cdk-full-screen.mjs +26 -147
  21. package/fesm2022/acorex-cdk-full-screen.mjs.map +1 -1
  22. package/fesm2022/acorex-cdk-gesture.mjs +30 -4
  23. package/fesm2022/acorex-cdk-gesture.mjs.map +1 -1
  24. package/fesm2022/acorex-cdk-highlight.mjs +8 -78
  25. package/fesm2022/acorex-cdk-highlight.mjs.map +1 -1
  26. package/fesm2022/acorex-cdk-horizontal-scroll.mjs +27 -10
  27. package/fesm2022/acorex-cdk-horizontal-scroll.mjs.map +1 -1
  28. package/fesm2022/acorex-cdk-input-mask.mjs +3 -3
  29. package/fesm2022/acorex-cdk-input-mask.mjs.map +1 -1
  30. package/fesm2022/acorex-cdk-list-navigation.mjs +10 -10
  31. package/fesm2022/acorex-cdk-list-navigation.mjs.map +1 -1
  32. package/fesm2022/acorex-cdk-outline.mjs +277 -74
  33. package/fesm2022/acorex-cdk-outline.mjs.map +1 -1
  34. package/fesm2022/acorex-cdk-overlay.mjs +224 -21
  35. package/fesm2022/acorex-cdk-overlay.mjs.map +1 -1
  36. package/fesm2022/acorex-cdk-pan-view.mjs +3 -3
  37. package/fesm2022/acorex-cdk-pan-view.mjs.map +1 -1
  38. package/fesm2022/acorex-cdk-qrcode.mjs.map +1 -1
  39. package/fesm2022/acorex-cdk-resizable.mjs +483 -200
  40. package/fesm2022/acorex-cdk-resizable.mjs.map +1 -1
  41. package/fesm2022/acorex-cdk-selection.mjs +10 -10
  42. package/fesm2022/acorex-cdk-selection.mjs.map +1 -1
  43. package/fesm2022/acorex-cdk-shimmer.mjs +220 -0
  44. package/fesm2022/acorex-cdk-shimmer.mjs.map +1 -0
  45. package/fesm2022/acorex-cdk-sliding-item.mjs +3 -3
  46. package/fesm2022/acorex-cdk-sliding-item.mjs.map +1 -1
  47. package/fesm2022/acorex-cdk-sticky.mjs +3 -3
  48. package/fesm2022/acorex-cdk-sticky.mjs.map +1 -1
  49. package/fesm2022/acorex-cdk-uploader.mjs +9 -9
  50. package/fesm2022/acorex-cdk-uploader.mjs.map +1 -1
  51. package/fesm2022/acorex-cdk-viewport-guard.mjs +616 -0
  52. package/fesm2022/acorex-cdk-viewport-guard.mjs.map +1 -0
  53. package/fesm2022/acorex-cdk-virtual-scroll.mjs +10 -10
  54. package/fesm2022/acorex-cdk-virtual-scroll.mjs.map +1 -1
  55. package/fesm2022/acorex-cdk-wysiwyg.mjs +689 -37
  56. package/fesm2022/acorex-cdk-wysiwyg.mjs.map +1 -1
  57. package/fesm2022/acorex-cdk-z-index.mjs +3 -3
  58. package/fesm2022/acorex-cdk-z-index.mjs.map +1 -1
  59. package/fesm2022/acorex-cdk.mjs.map +1 -1
  60. package/package.json +23 -7
  61. package/shimmer/README.md +11 -0
  62. package/types/acorex-cdk-auto-follow-scroll.d.ts +72 -0
  63. package/types/acorex-cdk-carousel.d.ts +2 -0
  64. package/types/acorex-cdk-clipboard.d.ts +1 -1
  65. package/types/acorex-cdk-common.d.ts +36 -19
  66. package/types/acorex-cdk-drag-drop.d.ts +43 -17
  67. package/types/acorex-cdk-full-screen.d.ts +18 -43
  68. package/types/acorex-cdk-gesture.d.ts +11 -1
  69. package/types/acorex-cdk-highlight.d.ts +1 -28
  70. package/types/acorex-cdk-horizontal-scroll.d.ts +3 -0
  71. package/types/acorex-cdk-outline.d.ts +20 -0
  72. package/types/acorex-cdk-overlay.d.ts +60 -4
  73. package/types/acorex-cdk-resizable.d.ts +80 -38
  74. package/types/acorex-cdk-shimmer.d.ts +68 -0
  75. package/types/acorex-cdk-uploader.d.ts +1 -1
  76. package/types/acorex-cdk-viewport-guard.d.ts +99 -0
  77. package/types/acorex-cdk-wysiwyg.d.ts +118 -14
  78. package/wysiwyg/README.md +3 -1
  79. package/fesm2022/acorex-cdk-double-click.mjs +0 -178
  80. package/fesm2022/acorex-cdk-double-click.mjs.map +0 -1
  81. 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 resizeHandle?;
13
- private isResizing;
32
+ private readonly resizeHandles;
33
+ private readonly isResizing;
34
+ private activeHandle;
14
35
  private initialElementWidth;
15
- private startMoveWidth;
16
- private subscriptions;
17
- private readonly boundMouseDown;
18
- private readonly boundMouseMove;
19
- private readonly boundMouseUp;
20
- private readonly boundMouseEnter;
21
- private readonly boundMouseLeave;
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 resizeObserver;
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
- /** Behavior on double-click: 'reset' or 'maximize'. */
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<AXValueChangedEvent<number>>;
76
+ onResizingStarted: _angular_core.OutputEmitterRef<AXResizeChangedEvent>;
38
77
  /** Event emitted when resizing ends. */
39
- onResizingEnded: _angular_core.OutputEmitterRef<AXValueChangedEvent<number>>;
78
+ onResizingEnded: _angular_core.OutputEmitterRef<AXResizeChangedEvent>;
40
79
  /** Event emitted on double-click. */
41
- onResizingDblClick: _angular_core.OutputEmitterRef<AXValueChangedEvent<number>>;
80
+ onResizingDblClick: _angular_core.OutputEmitterRef<AXResizeChangedEvent>;
42
81
  constructor();
43
82
  ngAfterViewInit(): void;
44
83
  ngOnDestroy(): void;
45
- private setupResizableState;
46
- private applyWidthFromModel;
47
- private applyElementWidth;
48
- private createResizeHandle;
84
+ private reconcileHandles;
85
+ private createHandle;
86
+ private attachHandleListeners;
87
+ private destroyHandle;
88
+ private destroyAllHandles;
49
89
  private applyHandleStyles;
50
- private updateHandlePosition;
51
- private attachEventListeners;
52
- private cleanupEventListeners;
53
- private isRTL;
54
- private onMouseDown;
55
- private onMouseMove;
56
- private onMouseUp;
57
- private onMouseEnter;
58
- private onMouseLeave;
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 resetToInitialWidth;
61
- private maximizeToMaxWidth;
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<AXUploaderService>;
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 Quill, { QuillOptions, Range } from 'quill/quill.d.ts';
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
- quillObj: _angular_core.WritableSignal<Quill>;
8
- private platformId;
9
- init(container: HTMLElement | string, option?: WysiwygOptions): Promise<void>;
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: 'rtl' | 'ltr'): void;
19
- fontSize(value: 'small' | false | 'large' | 'huge', range: Range): void;
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
- codeBlock(range: Range, status: boolean): void;
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
- export { AXWysiwyg };
31
- export type { Wysiwyg, WysiwygOptions };
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`. It can be used by importing from `@acorex/cdk/wysiwyg`.
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).