@haloduck/ui 2.0.49 → 2.1.1
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/haloduck-ui.mjs +4226 -285
- package/fesm2022/haloduck-ui.mjs.map +1 -1
- package/haloduck-ui-2.1.1.tgz +0 -0
- package/index.d.ts +550 -16
- package/package.json +13 -13
- package/public/i18n/haloduck/en.json +64 -12
- package/public/i18n/haloduck/ko.json +64 -12
- package/src/tailwind.css +126 -15
- package/haloduck-ui-2.0.49.tgz +0 -0
package/index.d.ts
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
+
import * as rxjs from 'rxjs';
|
|
2
|
+
import { Observable, Subject } from 'rxjs';
|
|
1
3
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { InjectionToken, OnInit, EventEmitter, AfterViewInit, OnChanges, ElementRef, SimpleChanges, OnDestroy, Type, Renderer2, Injector, TemplateRef } from '@angular/core';
|
|
4
|
+
import { InjectionToken, OnInit, EventEmitter, AfterViewInit, OnChanges, ElementRef, SimpleChanges, OnDestroy, Type, Renderer2, ChangeDetectorRef, Injector, TemplateRef } from '@angular/core';
|
|
3
5
|
import { HttpClient } from '@angular/common/http';
|
|
4
6
|
import { FormGroup, FormBuilder, ControlValueAccessor } from '@angular/forms';
|
|
5
|
-
import * as rxjs from 'rxjs';
|
|
6
|
-
import { Observable, Subject } from 'rxjs';
|
|
7
7
|
import { LngLat, MenuItemEx, SearchParams, TableRowProperty } from '@haloduck/core';
|
|
8
8
|
import { SafeHtml, DomSanitizer } from '@angular/platform-browser';
|
|
9
9
|
import * as THREE from 'three';
|
|
@@ -21,32 +21,64 @@ interface SocialLoginProvider {
|
|
|
21
21
|
[key: string]: string;
|
|
22
22
|
};
|
|
23
23
|
}
|
|
24
|
-
|
|
24
|
+
interface MetaData {
|
|
25
|
+
userType: string;
|
|
26
|
+
groupId: string;
|
|
27
|
+
}
|
|
28
|
+
interface AuthenticateConfig {
|
|
29
|
+
socialLoginProviders?: SocialLoginProvider[];
|
|
30
|
+
metaData?: MetaData;
|
|
31
|
+
useSignUp?: boolean;
|
|
32
|
+
}
|
|
33
|
+
declare const AUTHENTICATE_CONFIG: InjectionToken<AuthenticateConfig>;
|
|
34
|
+
declare function provideAuthenticateConfig(config: AuthenticateConfig): {
|
|
35
|
+
provide: InjectionToken<AuthenticateConfig>;
|
|
36
|
+
useValue: AuthenticateConfig;
|
|
37
|
+
};
|
|
25
38
|
declare function provideSocialLoginProviders(providers: SocialLoginProvider[]): {
|
|
26
|
-
provide: InjectionToken<
|
|
27
|
-
useValue:
|
|
39
|
+
provide: InjectionToken<AuthenticateConfig>;
|
|
40
|
+
useValue: AuthenticateConfig;
|
|
41
|
+
};
|
|
42
|
+
declare function provideAuthenticateMetadata(metadata: MetaData): {
|
|
43
|
+
provide: InjectionToken<AuthenticateConfig>;
|
|
44
|
+
useValue: AuthenticateConfig;
|
|
28
45
|
};
|
|
29
|
-
declare class AuthenticateComponent {
|
|
46
|
+
declare class AuthenticateComponent implements OnInit {
|
|
30
47
|
private fb;
|
|
31
48
|
private http;
|
|
32
49
|
private notificationService;
|
|
33
|
-
private
|
|
50
|
+
private injectedConfig;
|
|
51
|
+
private translateService;
|
|
34
52
|
metaData?: any;
|
|
35
|
-
socialLoginProviders
|
|
53
|
+
socialLoginProviders?: SocialLoginProvider[];
|
|
54
|
+
useSignUp?: boolean;
|
|
55
|
+
get effectiveMetaData(): any;
|
|
56
|
+
get effectiveSocialProviders(): SocialLoginProvider[];
|
|
57
|
+
get effectiveUseSignUp(): boolean;
|
|
36
58
|
showSocialLogin: boolean;
|
|
37
59
|
showDivider: boolean;
|
|
38
60
|
loginForm: FormGroup;
|
|
39
61
|
signupForm: FormGroup;
|
|
62
|
+
confirmSignupForm: FormGroup;
|
|
40
63
|
resetForm: FormGroup;
|
|
41
64
|
newPasswordForm: FormGroup;
|
|
42
65
|
otpForm: FormGroup;
|
|
43
|
-
stage: 'login' | 'signup' | 'reset' | 'newPassword' | 'otpVerify';
|
|
66
|
+
stage: 'login' | 'signup' | 'confirmSignup' | 'reset' | 'newPassword' | 'otpVerify';
|
|
44
67
|
emailForReset: string;
|
|
68
|
+
emailForConfirm: string;
|
|
69
|
+
isCurrentlySignedIn: boolean;
|
|
70
|
+
currentUserEmail: string;
|
|
45
71
|
constructor(fb: FormBuilder, http: HttpClient);
|
|
46
|
-
|
|
72
|
+
ngOnInit(): void;
|
|
73
|
+
checkCurrentUserStatus(): void;
|
|
74
|
+
switchStage(stage: 'login' | 'signup' | 'confirmSignup' | 'reset' | 'newPassword' | 'otpVerify'): void;
|
|
47
75
|
login(): void;
|
|
48
76
|
confirmNewPassword(): void;
|
|
49
77
|
signup(): void;
|
|
78
|
+
confirmSignup(): void;
|
|
79
|
+
resendConfirmationCode(): void;
|
|
80
|
+
handleAlreadyAuthenticatedUser(): void;
|
|
81
|
+
signOutCurrentUser(): void;
|
|
50
82
|
reset(): void;
|
|
51
83
|
verifyOtp(): void;
|
|
52
84
|
get passwordValue(): string;
|
|
@@ -60,15 +92,26 @@ declare class AuthenticateComponent {
|
|
|
60
92
|
label: string;
|
|
61
93
|
valid: boolean;
|
|
62
94
|
}[];
|
|
95
|
+
get signupPasswordValue(): string;
|
|
96
|
+
get signupIsMinLength(): boolean;
|
|
97
|
+
get signupHasUppercase(): boolean;
|
|
98
|
+
get signupHasLowercase(): boolean;
|
|
99
|
+
get signupHasNumber(): boolean;
|
|
100
|
+
get signupHasSpecialChar(): boolean;
|
|
101
|
+
get isSignupPasswordValid(): boolean;
|
|
102
|
+
get signupPasswordRules(): {
|
|
103
|
+
label: string;
|
|
104
|
+
valid: boolean;
|
|
105
|
+
}[];
|
|
63
106
|
get enabledSocialProviders(): SocialLoginProvider[];
|
|
64
107
|
isProviderEnabled(providerName: 'google' | 'apple' | 'kakao'): boolean;
|
|
65
108
|
loginWithGoogle(): void;
|
|
66
109
|
loginWithApple(): void;
|
|
67
110
|
loginWithKakao(): void;
|
|
68
111
|
getSocialLoginIcon(provider: string): string;
|
|
69
|
-
getSocialLoginLabel(provider: string):
|
|
112
|
+
getSocialLoginLabel(provider: string): rxjs.Observable<any>;
|
|
70
113
|
static ɵfac: i0.ɵɵFactoryDeclaration<AuthenticateComponent, never>;
|
|
71
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<AuthenticateComponent, "haloduck-authenticate", never, { "metaData": { "alias": "metaData"; "required": false; }; "socialLoginProviders": { "alias": "socialLoginProviders"; "required": false; }; "showSocialLogin": { "alias": "showSocialLogin"; "required": false; }; "showDivider": { "alias": "showDivider"; "required": false; }; }, {}, never, never, true, never>;
|
|
114
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<AuthenticateComponent, "haloduck-authenticate", never, { "metaData": { "alias": "metaData"; "required": false; }; "socialLoginProviders": { "alias": "socialLoginProviders"; "required": false; }; "useSignUp": { "alias": "useSignUp"; "required": false; }; "showSocialLogin": { "alias": "showSocialLogin"; "required": false; }; "showDivider": { "alias": "showDivider"; "required": false; }; }, {}, never, never, true, never>;
|
|
72
115
|
}
|
|
73
116
|
|
|
74
117
|
interface ProcessCognitoUserResponse {
|
|
@@ -432,7 +475,8 @@ declare class FlipComponent {
|
|
|
432
475
|
static ɵcmp: i0.ɵɵComponentDeclaration<FlipComponent, "haloduck-flip", never, { "title": { "alias": "title"; "required": false; }; "isOpen": { "alias": "isOpen"; "required": false; }; }, {}, never, ["*"], true, never>;
|
|
433
476
|
}
|
|
434
477
|
|
|
435
|
-
declare class ImageUploaderComponent implements ControlValueAccessor, OnInit {
|
|
478
|
+
declare class ImageUploaderComponent implements ControlValueAccessor, OnInit, AfterViewInit {
|
|
479
|
+
label: ElementRef;
|
|
436
480
|
disabled: boolean;
|
|
437
481
|
id: string;
|
|
438
482
|
alt: string;
|
|
@@ -469,6 +513,7 @@ declare class ImageUploaderComponent implements ControlValueAccessor, OnInit {
|
|
|
469
513
|
removeImage(): void;
|
|
470
514
|
setFiles(listFile: FileEx[]): void;
|
|
471
515
|
previewImage(imageUrl: string): void;
|
|
516
|
+
ngAfterViewInit(): void;
|
|
472
517
|
ngOnInit(): void;
|
|
473
518
|
static ɵfac: i0.ɵɵFactoryDeclaration<ImageUploaderComponent, never>;
|
|
474
519
|
static ɵcmp: i0.ɵɵComponentDeclaration<ImageUploaderComponent, "haloduck-image-uploader", never, { "disabled": { "alias": "disabled"; "required": false; }; "id": { "alias": "id"; "required": false; }; "alt": { "alias": "alt"; "required": false; }; "urlPrefix": { "alias": "urlPrefix"; "required": false; }; "keyPrefix": { "alias": "keyPrefix"; "required": false; }; "uploadApi": { "alias": "uploadApi"; "required": false; }; "backgroundImage": { "alias": "backgroundImage"; "required": false; }; "shouldPassToSibling": { "alias": "shouldPassToSibling"; "required": false; }; }, { "passToSibling": "passToSibling"; "fileAdded": "fileAdded"; "fileRemoved": "fileRemoved"; "error": "error"; }, never, ["*"], true, never>;
|
|
@@ -631,6 +676,8 @@ interface TableColumn {
|
|
|
631
676
|
hidden?: Observable<boolean>;
|
|
632
677
|
customRenderFn?: (data: any) => Observable<string>;
|
|
633
678
|
customRenderTemplate?: string;
|
|
679
|
+
fix?: 'left' | 'right' | 'none';
|
|
680
|
+
copyable?: boolean;
|
|
634
681
|
}
|
|
635
682
|
interface TableRow extends TableRowProperty {
|
|
636
683
|
[key: string]: any;
|
|
@@ -674,6 +721,9 @@ declare class TableComponent implements OnInit, AfterViewInit {
|
|
|
674
721
|
onAutoLoadTriggered(): void;
|
|
675
722
|
onRowClicked(row: TableRow): void;
|
|
676
723
|
onRowDblClicked(row: TableRow): void;
|
|
724
|
+
getFixedPosition(column: TableColumn, side: 'left' | 'right'): string | null;
|
|
725
|
+
getFixedZIndex(column: TableColumn): number;
|
|
726
|
+
copyToClipboard(event: Event, row: TableRow, column: TableColumn): Promise<void>;
|
|
677
727
|
ngOnInit(): void;
|
|
678
728
|
openSettings(): void;
|
|
679
729
|
ngAfterViewInit(): void;
|
|
@@ -831,6 +881,490 @@ declare class GroupedDirective implements OnInit {
|
|
|
831
881
|
static ɵdir: i0.ɵɵDirectiveDeclaration<GroupedDirective, "[haloduckGrouped]", never, { "haloduckGrouped": { "alias": "haloduckGrouped"; "required": false; }; "layoutClasses": { "alias": "layoutClasses"; "required": false; }; "bgClasses": { "alias": "bgClasses"; "required": false; }; "borderClasses": { "alias": "borderClasses"; "required": false; }; "labelText": { "alias": "labelText"; "required": false; }; "labelClasses": { "alias": "labelClasses"; "required": false; }; "labelOffset": { "alias": "labelOffset"; "required": false; }; }, {}, never, never, true, never>;
|
|
832
882
|
}
|
|
833
883
|
|
|
884
|
+
declare const WYSIWYG_ICONS: {
|
|
885
|
+
readonly undo: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 7v6h6\"/><path d=\"M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13\"/></svg>";
|
|
886
|
+
readonly redo: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 7v6h-6\"/><path d=\"M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3l3 2.7\"/></svg>";
|
|
887
|
+
readonly bold: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8\"/></svg>";
|
|
888
|
+
readonly italic: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"19\" x2=\"10\" y1=\"4\" y2=\"4\"/><line x1=\"14\" x2=\"5\" y1=\"20\" y2=\"20\"/><line x1=\"15\" x2=\"9\" y1=\"4\" y2=\"20\"/></svg>";
|
|
889
|
+
readonly underline: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 4v6a6 6 0 0 0 12 0V4\"/><line x1=\"4\" x2=\"20\" y1=\"20\" y2=\"20\"/></svg>";
|
|
890
|
+
readonly strikethrough: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M16 4H9a3 3 0 0 0-2.83 4\"/><path d=\"M14 12a4 4 0 0 1 0 8H6\"/><line x1=\"4\" x2=\"20\" y1=\"12\" y2=\"12\"/></svg>";
|
|
891
|
+
readonly superscript: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m4 19 8-8\"/><path d=\"m12 19-8-8\"/><path d=\"M20 12h-4c0-1.5.44-2 1.5-2.5S20 8.33 20 7c0-1.11-.9-2-2-2h-2\"/></svg>";
|
|
892
|
+
readonly subscript: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m4 5 8 8\"/><path d=\"m12 5-8 8\"/><path d=\"M20 19h-4c0-1.5.44-2 1.5-2.5S20 15.33 20 14c0-1.11-.9-2-2-2h-2\"/></svg>";
|
|
893
|
+
readonly alignLeft: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\"/><line x1=\"15\" x2=\"3\" y1=\"12\" y2=\"12\"/><line x1=\"17\" x2=\"3\" y1=\"18\" y2=\"18\"/></svg>";
|
|
894
|
+
readonly alignCenter: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\"/><line x1=\"17\" x2=\"7\" y1=\"12\" y2=\"12\"/><line x1=\"19\" x2=\"5\" y1=\"18\" y2=\"18\"/></svg>";
|
|
895
|
+
readonly alignRight: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\"/><line x1=\"21\" x2=\"9\" y1=\"12\" y2=\"12\"/><line x1=\"21\" x2=\"7\" y1=\"18\" y2=\"18\"/></svg>";
|
|
896
|
+
readonly alignJustify: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"3\" x2=\"21\" y1=\"6\" y2=\"6\"/><line x1=\"3\" x2=\"21\" y1=\"12\" y2=\"12\"/><line x1=\"3\" x2=\"21\" y1=\"18\" y2=\"18\"/></svg>";
|
|
897
|
+
readonly listBullet: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"8\" x2=\"21\" y1=\"6\" y2=\"6\"/><line x1=\"8\" x2=\"21\" y1=\"12\" y2=\"12\"/><line x1=\"8\" x2=\"21\" y1=\"18\" y2=\"18\"/><line x1=\"3\" x2=\"3.01\" y1=\"6\" y2=\"6\"/><line x1=\"3\" x2=\"3.01\" y1=\"12\" y2=\"12\"/><line x1=\"3\" x2=\"3.01\" y1=\"18\" y2=\"18\"/></svg>";
|
|
898
|
+
readonly listOrdered: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"10\" x2=\"21\" y1=\"6\" y2=\"6\"/><line x1=\"10\" x2=\"21\" y1=\"12\" y2=\"12\"/><line x1=\"10\" x2=\"21\" y1=\"18\" y2=\"18\"/><path d=\"M4 6h1v4\"/><path d=\"M4 10h2\"/><path d=\"M6 18H4c0-1 2-2 2-3s-1-1.5-2-1\"/></svg>";
|
|
899
|
+
readonly indentIncrease: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"3 8 7 12 3 16\"/><line x1=\"21\" x2=\"11\" y1=\"12\" y2=\"12\"/><line x1=\"21\" x2=\"11\" y1=\"6\" y2=\"6\"/><line x1=\"21\" x2=\"11\" y1=\"18\" y2=\"18\"/></svg>";
|
|
900
|
+
readonly indentDecrease: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"7 8 3 12 7 16\"/><line x1=\"21\" x2=\"11\" y1=\"12\" y2=\"12\"/><line x1=\"21\" x2=\"11\" y1=\"6\" y2=\"6\"/><line x1=\"21\" x2=\"11\" y1=\"18\" y2=\"18\"/></svg>";
|
|
901
|
+
readonly link: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71\"/><path d=\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71\"/></svg>";
|
|
902
|
+
readonly image: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" ry=\"2\"/><circle cx=\"9\" cy=\"9\" r=\"2\"/><path d=\"m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21\"/></svg>";
|
|
903
|
+
readonly imagePlus: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7\"/><line x1=\"16\" x2=\"22\" y1=\"5\" y2=\"5\"/><line x1=\"19\" x2=\"19\" y1=\"2\" y2=\"8\"/><circle cx=\"9\" cy=\"9\" r=\"2\"/><path d=\"m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21\"/></svg>";
|
|
904
|
+
readonly minus: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14\"/></svg>";
|
|
905
|
+
readonly heading1: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 12h8\"/><path d=\"M4 18V6\"/><path d=\"M12 18V6\"/><path d=\"m17 12 3-2v8\"/></svg>";
|
|
906
|
+
readonly heading2: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 12h8\"/><path d=\"M4 18V6\"/><path d=\"M12 18V6\"/><path d=\"M21 18h-4c0-4 4-3 4-6 0-1.5-2-2.5-4-1\"/></svg>";
|
|
907
|
+
readonly heading3: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 12h8\"/><path d=\"M4 18V6\"/><path d=\"M12 18V6\"/><path d=\"M17.5 10.5c1.7-1 3.5 0 3.5 1.5a2 2 0 0 1-2 2\"/><path d=\"M17 17.5c2 1.5 4 .3 4-1.5a2 2 0 0 0-2-2\"/></svg>";
|
|
908
|
+
readonly paragraph: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M13 4v16\"/><path d=\"M17 4v16\"/><path d=\"M19 4H9.5a4.5 4.5 0 0 0 0 9H13\"/></svg>";
|
|
909
|
+
readonly quote: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V21z\"/><path d=\"M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3z\"/></svg>";
|
|
910
|
+
readonly eraser: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m7 21-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21\"/><path d=\"M22 21H7\"/><path d=\"m5 11 9 9\"/></svg>";
|
|
911
|
+
readonly trash: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 6h18\"/><path d=\"M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6\"/><path d=\"M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2\"/></svg>";
|
|
912
|
+
readonly textColor: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 20h16\"/><path d=\"m6 16 6-12 6 12\"/><path d=\"M8 12h8\"/></svg>";
|
|
913
|
+
readonly highlighter: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 11-6 6v3h9l3-3\"/><path d=\"m22 12-4.6 4.6a2 2 0 0 1-2.8 0l-5.2-5.2a2 2 0 0 1 0-2.8L14 4\"/></svg>";
|
|
914
|
+
readonly typeInline: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"4 7 4 4 20 4 20 7\"/><line x1=\"9\" x2=\"15\" y1=\"20\" y2=\"20\"/><line x1=\"12\" x2=\"12\" y1=\"4\" y2=\"20\"/></svg>";
|
|
915
|
+
readonly wrapLeft: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"6\" height=\"6\" x=\"3\" y=\"3\" rx=\"1\"/><path d=\"M3 13h18\"/><path d=\"M3 17h18\"/><path d=\"M13 7h8\"/></svg>";
|
|
916
|
+
readonly wrapRight: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"6\" height=\"6\" x=\"15\" y=\"3\" rx=\"1\"/><path d=\"M3 13h18\"/><path d=\"M3 17h18\"/><path d=\"M3 7h8\"/></svg>";
|
|
917
|
+
readonly breakLeft: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"8\" height=\"6\" x=\"3\" y=\"9\" rx=\"1\"/><path d=\"M3 5h18\"/><path d=\"M3 19h18\"/></svg>";
|
|
918
|
+
readonly breakCenter: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"8\" height=\"6\" x=\"8\" y=\"9\" rx=\"1\"/><path d=\"M3 5h18\"/><path d=\"M3 19h18\"/></svg>";
|
|
919
|
+
readonly breakRight: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"8\" height=\"6\" x=\"13\" y=\"9\" rx=\"1\"/><path d=\"M3 5h18\"/><path d=\"M3 19h18\"/></svg>";
|
|
920
|
+
readonly chevronDown: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"/></svg>";
|
|
921
|
+
readonly layoutGrid: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"7\" height=\"7\" x=\"3\" y=\"3\" rx=\"1\"/><rect width=\"7\" height=\"7\" x=\"14\" y=\"3\" rx=\"1\"/><rect width=\"7\" height=\"7\" x=\"14\" y=\"14\" rx=\"1\"/><rect width=\"7\" height=\"7\" x=\"3\" y=\"14\" rx=\"1\"/></svg>";
|
|
922
|
+
readonly trash2: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 6h18\"/><path d=\"M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6\"/><path d=\"M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2\"/><line x1=\"10\" x2=\"10\" y1=\"11\" y2=\"17\"/><line x1=\"14\" x2=\"14\" y1=\"11\" y2=\"17\"/></svg>";
|
|
923
|
+
readonly cornerDownLeft: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"9 10 4 15 9 20\"/><path d=\"M20 4v7a4 4 0 0 1-4 4H4\"/></svg>";
|
|
924
|
+
readonly move: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"5 9 2 12 5 15\"/><polyline points=\"9 5 12 2 15 5\"/><polyline points=\"15 19 12 22 9 19\"/><polyline points=\"19 9 22 12 19 15\"/><line x1=\"2\" x2=\"22\" y1=\"12\" y2=\"12\"/><line x1=\"12\" x2=\"12\" y1=\"2\" y2=\"22\"/></svg>";
|
|
925
|
+
readonly plus: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"12\" x2=\"12\" y1=\"5\" y2=\"19\"/><line x1=\"5\" x2=\"19\" y1=\"12\" y2=\"12\"/></svg>";
|
|
926
|
+
};
|
|
927
|
+
type WysiwygIconName = keyof typeof WYSIWYG_ICONS;
|
|
928
|
+
|
|
929
|
+
type BlockElementType = 'image' | 'video' | 'iframe' | 'table' | 'blockquote' | 'code-block' | 'og-card';
|
|
930
|
+
type AlignmentType = 'inline' | 'wrap-left' | 'wrap-right' | 'break-left' | 'break-center' | 'break-right';
|
|
931
|
+
interface BlockElementConfig {
|
|
932
|
+
type: BlockElementType;
|
|
933
|
+
element: HTMLElement;
|
|
934
|
+
wrapper: HTMLElement;
|
|
935
|
+
resizable: boolean;
|
|
936
|
+
draggable: boolean;
|
|
937
|
+
aspectRatioLocked: boolean;
|
|
938
|
+
}
|
|
939
|
+
declare class WysiwygEditorComponent implements ControlValueAccessor, AfterViewInit, OnDestroy {
|
|
940
|
+
private cdr;
|
|
941
|
+
private http;
|
|
942
|
+
private sanitizer;
|
|
943
|
+
apiUrl: string;
|
|
944
|
+
editorContent: ElementRef<HTMLElement>;
|
|
945
|
+
label: ElementRef;
|
|
946
|
+
imageInput: ElementRef<HTMLInputElement>;
|
|
947
|
+
placeholder: string;
|
|
948
|
+
disabled: boolean;
|
|
949
|
+
height: string;
|
|
950
|
+
readonly: boolean;
|
|
951
|
+
uploadApi?: (file: File, keyPrefix: string) => Observable<string>;
|
|
952
|
+
keyPrefix: string;
|
|
953
|
+
urlPrefix?: string;
|
|
954
|
+
contentChange: EventEmitter<string>;
|
|
955
|
+
textChange: EventEmitter<string>;
|
|
956
|
+
uploadStart: EventEmitter<File>;
|
|
957
|
+
uploadComplete: EventEmitter<{
|
|
958
|
+
file: File;
|
|
959
|
+
key: string;
|
|
960
|
+
}>;
|
|
961
|
+
uploadError: EventEmitter<{
|
|
962
|
+
file: File;
|
|
963
|
+
error: any;
|
|
964
|
+
}>;
|
|
965
|
+
private value;
|
|
966
|
+
private resizing;
|
|
967
|
+
private selectedElement;
|
|
968
|
+
private savedSelection;
|
|
969
|
+
showImageToolbar: boolean;
|
|
970
|
+
selectedImage: HTMLImageElement | null;
|
|
971
|
+
imageToolbarPosition: {
|
|
972
|
+
x: number;
|
|
973
|
+
y: number;
|
|
974
|
+
};
|
|
975
|
+
currentImageAlign: 'inline' | 'wrap-left' | 'wrap-right' | 'break-left' | 'break-center' | 'break-right';
|
|
976
|
+
showBlockToolbar: boolean;
|
|
977
|
+
selectedBlock: BlockElementConfig | null;
|
|
978
|
+
blockToolbarPosition: {
|
|
979
|
+
x: number;
|
|
980
|
+
y: number;
|
|
981
|
+
};
|
|
982
|
+
currentBlockAlign: AlignmentType;
|
|
983
|
+
icons: Record<WysiwygIconName, SafeHtml>;
|
|
984
|
+
showTextColorPalette: boolean;
|
|
985
|
+
showBackgroundColorPalette: boolean;
|
|
986
|
+
showLayoutOutlines: boolean;
|
|
987
|
+
showPropertyEditor: boolean;
|
|
988
|
+
selectedLayoutElement: HTMLElement | null;
|
|
989
|
+
propertyEditorPosition: {
|
|
990
|
+
x: number;
|
|
991
|
+
y: number;
|
|
992
|
+
};
|
|
993
|
+
elementActionButtonsPosition: {
|
|
994
|
+
top: number;
|
|
995
|
+
right: number;
|
|
996
|
+
bottom: number;
|
|
997
|
+
left: number;
|
|
998
|
+
};
|
|
999
|
+
showDeleteButton: boolean;
|
|
1000
|
+
showInsertLineButton: boolean;
|
|
1001
|
+
showMoveButton: boolean;
|
|
1002
|
+
activePropertyTab: 'layout' | 'color' | 'typography';
|
|
1003
|
+
currentStyles: {
|
|
1004
|
+
paddingTop: string;
|
|
1005
|
+
paddingRight: string;
|
|
1006
|
+
paddingBottom: string;
|
|
1007
|
+
paddingLeft: string;
|
|
1008
|
+
marginTop: string;
|
|
1009
|
+
marginRight: string;
|
|
1010
|
+
marginBottom: string;
|
|
1011
|
+
marginLeft: string;
|
|
1012
|
+
width: string;
|
|
1013
|
+
height: string;
|
|
1014
|
+
color: string;
|
|
1015
|
+
backgroundColor: string;
|
|
1016
|
+
borderTopWidth: string;
|
|
1017
|
+
borderRightWidth: string;
|
|
1018
|
+
borderBottomWidth: string;
|
|
1019
|
+
borderLeftWidth: string;
|
|
1020
|
+
borderStyle: string;
|
|
1021
|
+
borderColor: string;
|
|
1022
|
+
borderTopLeftRadius: string;
|
|
1023
|
+
borderTopRightRadius: string;
|
|
1024
|
+
borderBottomRightRadius: string;
|
|
1025
|
+
borderBottomLeftRadius: string;
|
|
1026
|
+
fontSize: string;
|
|
1027
|
+
fontWeight: string;
|
|
1028
|
+
textAlign: string;
|
|
1029
|
+
lineHeight: string;
|
|
1030
|
+
display: string;
|
|
1031
|
+
flexDirection: string;
|
|
1032
|
+
justifyContent: string;
|
|
1033
|
+
alignItems: string;
|
|
1034
|
+
gap: string;
|
|
1035
|
+
imageAlign: 'inline' | 'wrap-left' | 'wrap-right' | 'break-left' | 'break-center' | 'break-right' | null;
|
|
1036
|
+
} | null;
|
|
1037
|
+
private isDragging;
|
|
1038
|
+
private draggedWrapper;
|
|
1039
|
+
private dragGhost;
|
|
1040
|
+
private dragOriginalParent;
|
|
1041
|
+
private dragOriginalNextSibling;
|
|
1042
|
+
private lastDropIndicator;
|
|
1043
|
+
private boundMouseMove;
|
|
1044
|
+
private boundMouseUp;
|
|
1045
|
+
private boundScrollHandler;
|
|
1046
|
+
private boundSelectionChangeHandler;
|
|
1047
|
+
private uploadingImages;
|
|
1048
|
+
isUploading: boolean;
|
|
1049
|
+
insertIndicator: {
|
|
1050
|
+
show: boolean;
|
|
1051
|
+
top: number;
|
|
1052
|
+
insertBefore: HTMLElement | null;
|
|
1053
|
+
};
|
|
1054
|
+
colors: string[];
|
|
1055
|
+
fontSizes: string[];
|
|
1056
|
+
fontFamilies: string[];
|
|
1057
|
+
onChange: (value: any) => void;
|
|
1058
|
+
onTouched: () => void;
|
|
1059
|
+
constructor(cdr: ChangeDetectorRef, http: HttpClient, sanitizer: DomSanitizer);
|
|
1060
|
+
ngAfterViewInit(): void;
|
|
1061
|
+
ngOnDestroy(): void;
|
|
1062
|
+
private cleanup;
|
|
1063
|
+
/**
|
|
1064
|
+
* Set up scroll handler to update action button positions during scroll
|
|
1065
|
+
*/
|
|
1066
|
+
private setupScrollHandler;
|
|
1067
|
+
/**
|
|
1068
|
+
* Clean up scroll handler
|
|
1069
|
+
*/
|
|
1070
|
+
private cleanupScrollHandler;
|
|
1071
|
+
/**
|
|
1072
|
+
* Set up selection change handler to track cursor position
|
|
1073
|
+
* This fixes mobile issue where focus is lost before mousedown saves selection
|
|
1074
|
+
*/
|
|
1075
|
+
private setupSelectionChangeHandler;
|
|
1076
|
+
/**
|
|
1077
|
+
* Save selection when it changes within the editor
|
|
1078
|
+
* Uses ShadowDOM-aware selection retrieval
|
|
1079
|
+
*/
|
|
1080
|
+
private saveSelectionOnChange;
|
|
1081
|
+
/**
|
|
1082
|
+
* Clean up selection change handler
|
|
1083
|
+
*/
|
|
1084
|
+
private cleanupSelectionChangeHandler;
|
|
1085
|
+
private setupPasteHandler;
|
|
1086
|
+
private createUrlPreviewCard;
|
|
1087
|
+
/**
|
|
1088
|
+
* Sanitize HTML content to prevent XSS and properly extract body content.
|
|
1089
|
+
* Uses regex pre-processing and DOMParser to handle complete HTML documents.
|
|
1090
|
+
*/
|
|
1091
|
+
private sanitizeHtml;
|
|
1092
|
+
private insertHtml;
|
|
1093
|
+
onInput(): void;
|
|
1094
|
+
/**
|
|
1095
|
+
* Save selection when user clicks/selects with mouse inside the editor.
|
|
1096
|
+
* Also ensures empty editor has a <p> tag for proper text input.
|
|
1097
|
+
*/
|
|
1098
|
+
onEditorMouseUp(): void;
|
|
1099
|
+
/**
|
|
1100
|
+
* Ensure empty editor has a <p> tag for proper text input structure
|
|
1101
|
+
*/
|
|
1102
|
+
private ensureInitialParagraph;
|
|
1103
|
+
/**
|
|
1104
|
+
* Handle keydown events directly on the editor content.
|
|
1105
|
+
* This ensures proper handling within Shadow DOM.
|
|
1106
|
+
*/
|
|
1107
|
+
onEditorKeyDown(event: KeyboardEvent): void;
|
|
1108
|
+
/**
|
|
1109
|
+
* Save selection when user navigates with keyboard (arrow keys, etc.)
|
|
1110
|
+
*/
|
|
1111
|
+
onEditorKeyUp(event: KeyboardEvent): void;
|
|
1112
|
+
/**
|
|
1113
|
+
* Immediately save the current selection with ShadowDOM support
|
|
1114
|
+
* Called during input when we KNOW the cursor is in the editor
|
|
1115
|
+
*/
|
|
1116
|
+
private saveSelectionImmediate;
|
|
1117
|
+
onContentChange(): void;
|
|
1118
|
+
/**
|
|
1119
|
+
* Remove empty resizable wrappers that no longer contain their content element.
|
|
1120
|
+
* This happens when users delete an image/video using keyboard or other means.
|
|
1121
|
+
*/
|
|
1122
|
+
private cleanupEmptyWrappers;
|
|
1123
|
+
saveSelection(): void;
|
|
1124
|
+
/**
|
|
1125
|
+
* Handle mousedown on toolbar to preserve editor selection
|
|
1126
|
+
* This is called BEFORE focus changes, so we can save the selection
|
|
1127
|
+
*/
|
|
1128
|
+
onToolbarMouseDown(event: MouseEvent): void;
|
|
1129
|
+
execCommand(command: string, value?: string | null): void;
|
|
1130
|
+
setFontSize(size: string): void;
|
|
1131
|
+
setFontFamily(font: string): void;
|
|
1132
|
+
toggleTextColorPalette(): void;
|
|
1133
|
+
toggleBackgroundColorPalette(): void;
|
|
1134
|
+
toggleLayoutMode(): void;
|
|
1135
|
+
/**
|
|
1136
|
+
* Handle element click in layout mode to show property editor
|
|
1137
|
+
*/
|
|
1138
|
+
onLayoutElementClick(event: MouseEvent): void;
|
|
1139
|
+
/**
|
|
1140
|
+
* Position element action buttons relative to the selected element
|
|
1141
|
+
* Button centers should be at the element's corners:
|
|
1142
|
+
* - Move button: top-left
|
|
1143
|
+
* - Delete button: top-right
|
|
1144
|
+
* - Insert line button: bottom-right
|
|
1145
|
+
*/
|
|
1146
|
+
private positionElementActionButtons;
|
|
1147
|
+
/**
|
|
1148
|
+
* Extract computed styles from the selected element
|
|
1149
|
+
*/
|
|
1150
|
+
private extractElementStyles;
|
|
1151
|
+
/**
|
|
1152
|
+
* Detect image alignment from element styles
|
|
1153
|
+
*/
|
|
1154
|
+
private detectImageAlignment;
|
|
1155
|
+
/**
|
|
1156
|
+
* Convert RGB color to hex format
|
|
1157
|
+
*/
|
|
1158
|
+
private rgbToHex;
|
|
1159
|
+
/**
|
|
1160
|
+
* Position the property editor panel near the clicked element
|
|
1161
|
+
*/
|
|
1162
|
+
private positionPropertyEditor;
|
|
1163
|
+
/**
|
|
1164
|
+
* Update a style property on the selected element
|
|
1165
|
+
*/
|
|
1166
|
+
updateElementStyle(property: string, value: string): void;
|
|
1167
|
+
/**
|
|
1168
|
+
* Convert camelCase property name to CSS property name
|
|
1169
|
+
*/
|
|
1170
|
+
private toCssProperty;
|
|
1171
|
+
/**
|
|
1172
|
+
* Close the property editor
|
|
1173
|
+
*/
|
|
1174
|
+
closePropertyEditor(): void;
|
|
1175
|
+
/**
|
|
1176
|
+
* Handle mouse move over editor content to show insert indicator between elements
|
|
1177
|
+
*/
|
|
1178
|
+
onEditorMouseMove(event: MouseEvent): void;
|
|
1179
|
+
/**
|
|
1180
|
+
* Hide insert indicator when mouse leaves editor
|
|
1181
|
+
*/
|
|
1182
|
+
onEditorMouseLeave(): void;
|
|
1183
|
+
/**
|
|
1184
|
+
* Insert a new paragraph block at the indicator position
|
|
1185
|
+
*/
|
|
1186
|
+
insertBlockAtIndicator(): void;
|
|
1187
|
+
/**
|
|
1188
|
+
* Move cursor to the beginning of an element
|
|
1189
|
+
*/
|
|
1190
|
+
private moveCursorToElement;
|
|
1191
|
+
/**
|
|
1192
|
+
* Update image alignment from property sidebar
|
|
1193
|
+
*/
|
|
1194
|
+
updateLayoutImageAlignment(alignment: 'inline' | 'wrap-left' | 'wrap-right' | 'break-left' | 'break-center' | 'break-right'): void;
|
|
1195
|
+
/**
|
|
1196
|
+
* Delete the selected layout element
|
|
1197
|
+
*/
|
|
1198
|
+
deleteLayoutElement(): void;
|
|
1199
|
+
/**
|
|
1200
|
+
* Start dragging the selected layout element
|
|
1201
|
+
* Called when the move button is pressed
|
|
1202
|
+
*/
|
|
1203
|
+
startLayoutElementDrag(event: MouseEvent): void;
|
|
1204
|
+
/**
|
|
1205
|
+
* Start mouse-based drag operation for layout element
|
|
1206
|
+
*/
|
|
1207
|
+
private startLayoutDrag;
|
|
1208
|
+
/**
|
|
1209
|
+
* Insert a new line (br or p) after the selected layout element
|
|
1210
|
+
*/
|
|
1211
|
+
insertLineAfterLayoutElement(): void;
|
|
1212
|
+
setTextColor(color: string): void;
|
|
1213
|
+
setBackgroundColor(color: string): void;
|
|
1214
|
+
insertLink(): void;
|
|
1215
|
+
editLink(): void;
|
|
1216
|
+
private findParentAnchor;
|
|
1217
|
+
insertImageUrl(): void;
|
|
1218
|
+
/**
|
|
1219
|
+
* Upload image from external URL to S3
|
|
1220
|
+
*/
|
|
1221
|
+
private uploadImageFromUrl;
|
|
1222
|
+
insertImageFromInput(event: Event): void;
|
|
1223
|
+
private insertImageFromFile;
|
|
1224
|
+
private insertImageAsBase64;
|
|
1225
|
+
private uploadImageToServer;
|
|
1226
|
+
private generateUploadId;
|
|
1227
|
+
private createUploadPlaceholder;
|
|
1228
|
+
private insertPlaceholderAtCursor;
|
|
1229
|
+
private replacePlaceholderWithImage;
|
|
1230
|
+
private showPlaceholderError;
|
|
1231
|
+
private updateUploadingState;
|
|
1232
|
+
private cancelPendingUploads;
|
|
1233
|
+
/**
|
|
1234
|
+
* Process external images in pasted HTML
|
|
1235
|
+
* Downloads external images, uploads to S3, and replaces src with CDN URL
|
|
1236
|
+
*/
|
|
1237
|
+
private processExternalImagesInHtml;
|
|
1238
|
+
/**
|
|
1239
|
+
* Create an inline placeholder for images being uploaded within pasted HTML
|
|
1240
|
+
*/
|
|
1241
|
+
private createInlineUploadPlaceholder;
|
|
1242
|
+
/**
|
|
1243
|
+
* Fetch external image and upload to S3
|
|
1244
|
+
*/
|
|
1245
|
+
private fetchAndUploadImage;
|
|
1246
|
+
private insertImage;
|
|
1247
|
+
/**
|
|
1248
|
+
* Handle external file drops (e.g., dropping image files from desktop)
|
|
1249
|
+
*/
|
|
1250
|
+
onDrop(event: DragEvent): void;
|
|
1251
|
+
/**
|
|
1252
|
+
* Handle dragover for external file drops
|
|
1253
|
+
*/
|
|
1254
|
+
onDragOver(event: DragEvent): void;
|
|
1255
|
+
private makeExistingImagesResizable;
|
|
1256
|
+
private makeResizable;
|
|
1257
|
+
/**
|
|
1258
|
+
* Add resize handles and dragging to an already-inserted wrapper.
|
|
1259
|
+
* This is called for newly inserted images where the wrapper is already in the DOM.
|
|
1260
|
+
*/
|
|
1261
|
+
private addResizeHandlesToWrapper;
|
|
1262
|
+
/**
|
|
1263
|
+
* Make an element draggable using mouse events (not HTML5 DnD API)
|
|
1264
|
+
* This gives us full control and works properly with Shadow DOM
|
|
1265
|
+
*/
|
|
1266
|
+
private makeImageDraggable;
|
|
1267
|
+
/**
|
|
1268
|
+
* Prepare for potential drag - actual drag starts only after mouse moves
|
|
1269
|
+
*/
|
|
1270
|
+
private prepareDrag;
|
|
1271
|
+
/**
|
|
1272
|
+
* Start mouse-based drag operation
|
|
1273
|
+
*/
|
|
1274
|
+
private startMouseDrag;
|
|
1275
|
+
/**
|
|
1276
|
+
* Clean up mouse drag listeners
|
|
1277
|
+
*/
|
|
1278
|
+
private cleanupMouseDrag;
|
|
1279
|
+
private getRangeFromPoint;
|
|
1280
|
+
private getNodeRect;
|
|
1281
|
+
/**
|
|
1282
|
+
* Determine the block element type from an HTML element
|
|
1283
|
+
*/
|
|
1284
|
+
private getBlockElementType;
|
|
1285
|
+
/**
|
|
1286
|
+
* Get alignment options based on block element type
|
|
1287
|
+
*/
|
|
1288
|
+
private getAlignmentOptions;
|
|
1289
|
+
/**
|
|
1290
|
+
* Check if an element type supports resizing
|
|
1291
|
+
*/
|
|
1292
|
+
private isResizable;
|
|
1293
|
+
/**
|
|
1294
|
+
* Make a block element draggable using mouse events (same as makeImageDraggable)
|
|
1295
|
+
*/
|
|
1296
|
+
private makeBlockElementDraggable;
|
|
1297
|
+
/**
|
|
1298
|
+
* Select a block element in the DOM so that keyboard actions (backspace/delete) will affect it
|
|
1299
|
+
*/
|
|
1300
|
+
private selectBlockElement;
|
|
1301
|
+
/**
|
|
1302
|
+
* Show popup toolbar for any block element
|
|
1303
|
+
*/
|
|
1304
|
+
private showBlockPopupToolbar;
|
|
1305
|
+
/**
|
|
1306
|
+
* Set alignment for the selected block element
|
|
1307
|
+
*/
|
|
1308
|
+
setBlockAlignment(alignment: AlignmentType): void;
|
|
1309
|
+
/**
|
|
1310
|
+
* Delete the selected block element
|
|
1311
|
+
* Uses selection and execCommand to support undo/redo
|
|
1312
|
+
*/
|
|
1313
|
+
deleteSelectedBlock(): void;
|
|
1314
|
+
/**
|
|
1315
|
+
* Delete an element while supporting undo/redo
|
|
1316
|
+
* by selecting it first and using execCommand
|
|
1317
|
+
*/
|
|
1318
|
+
private deleteElementWithUndo;
|
|
1319
|
+
private showImagePopupToolbar;
|
|
1320
|
+
setImageAlignment(alignment: 'inline' | 'wrap-left' | 'wrap-right' | 'break-left' | 'break-center' | 'break-right'): void;
|
|
1321
|
+
onMouseMove(event: MouseEvent): void;
|
|
1322
|
+
onMouseUp(event: MouseEvent): void;
|
|
1323
|
+
onDocumentClick(event: MouseEvent): void;
|
|
1324
|
+
onKeyDown(event: KeyboardEvent): void;
|
|
1325
|
+
writeValue(value: any): void;
|
|
1326
|
+
registerOnChange(fn: any): void;
|
|
1327
|
+
registerOnTouched(fn: any): void;
|
|
1328
|
+
setDisabledState(isDisabled: boolean): void;
|
|
1329
|
+
getContent(): string;
|
|
1330
|
+
getText(): string;
|
|
1331
|
+
/**
|
|
1332
|
+
* Set content in the editor.
|
|
1333
|
+
* Automatically extracts body content if a full HTML document is provided.
|
|
1334
|
+
*/
|
|
1335
|
+
setContent(content: string): void;
|
|
1336
|
+
/**
|
|
1337
|
+
* Extract body content from a string that might be a full HTML document.
|
|
1338
|
+
*/
|
|
1339
|
+
private extractBodyContent;
|
|
1340
|
+
/**
|
|
1341
|
+
* Get raw body content without the full HTML document wrapper.
|
|
1342
|
+
* Useful for internal operations or when you only need the content.
|
|
1343
|
+
*/
|
|
1344
|
+
getRawContent(): string;
|
|
1345
|
+
clear(): void;
|
|
1346
|
+
exportToPDFViaApi(filename?: string): Promise<void>;
|
|
1347
|
+
exportToPDF(filename?: string): Promise<void>;
|
|
1348
|
+
private waitForImagesToLoad;
|
|
1349
|
+
focus(): void;
|
|
1350
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<WysiwygEditorComponent, never>;
|
|
1351
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<WysiwygEditorComponent, "haloduck-wysiwyg-editor", never, { "apiUrl": { "alias": "apiUrl"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "height": { "alias": "height"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "uploadApi": { "alias": "uploadApi"; "required": false; }; "keyPrefix": { "alias": "keyPrefix"; "required": false; }; "urlPrefix": { "alias": "urlPrefix"; "required": false; }; }, { "contentChange": "contentChange"; "textChange": "textChange"; "uploadStart": "uploadStart"; "uploadComplete": "uploadComplete"; "uploadError": "uploadError"; }, never, ["*"], true, never>;
|
|
1352
|
+
}
|
|
1353
|
+
|
|
1354
|
+
declare class WysiwygViewerComponent implements OnChanges {
|
|
1355
|
+
private readonly sanitizer;
|
|
1356
|
+
content: string;
|
|
1357
|
+
showButtons: boolean;
|
|
1358
|
+
sanitizedContent: SafeHtml;
|
|
1359
|
+
ngOnChanges(changes: SimpleChanges): void;
|
|
1360
|
+
private updateContent;
|
|
1361
|
+
exportToPDF(filename?: string): Promise<void>;
|
|
1362
|
+
private waitForImagesToLoad;
|
|
1363
|
+
print(): void;
|
|
1364
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<WysiwygViewerComponent, never>;
|
|
1365
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<WysiwygViewerComponent, "haloduck-wysiwyg-viewer", never, { "content": { "alias": "content"; "required": false; }; "showButtons": { "alias": "showButtons"; "required": false; }; }, {}, never, never, true, never>;
|
|
1366
|
+
}
|
|
1367
|
+
|
|
834
1368
|
declare class AutoLoadDirective implements OnInit, OnDestroy, OnChanges {
|
|
835
1369
|
private readonly elementRef;
|
|
836
1370
|
private readonly ngZone;
|
|
@@ -926,5 +1460,5 @@ declare const provideHaloduckTransloco: () => {
|
|
|
926
1460
|
multi: boolean;
|
|
927
1461
|
}[];
|
|
928
1462
|
|
|
929
|
-
export { AuthenticateCallbackComponent, AuthenticateComponent, AutoLoadDirective, BreadcrumbComponent, ButtonComponent, CalendarComponent, ConfirmDialogService, CopyButtonComponent, DatePickerComponent, DateRangeComponent, DialogService, DrawCanvasComponent, ERROR_NOT_ACCEPTABLE_FILE_TYPE, ERROR_OVER_COUNT, ERROR_OVER_SIZE, ERROR_UPLOAD, FileUploaderComponent, FlipComponent, GroupedDirective, ImageUploaderComponent, ImageViewerComponent, InputComponent, LanguageSelectorComponent, MapToAddressComponent, NotificationComponent, NotificationService, PictureNameComponent,
|
|
930
|
-
export type { ButtonVariant, CalendarDate, DateRange, DateRangeDropdown, FileEx, GroupedConfig, Location, Notification, NotificationType, Option, ProcessCognitoUserResponse, SocialLoginProvider, TabItem, TableColumn, TableRow, TableSettings };
|
|
1463
|
+
export { AUTHENTICATE_CONFIG, AuthenticateCallbackComponent, AuthenticateComponent, AutoLoadDirective, BreadcrumbComponent, ButtonComponent, CalendarComponent, ConfirmDialogService, CopyButtonComponent, DatePickerComponent, DateRangeComponent, DialogService, DrawCanvasComponent, ERROR_NOT_ACCEPTABLE_FILE_TYPE, ERROR_OVER_COUNT, ERROR_OVER_SIZE, ERROR_UPLOAD, FileUploaderComponent, FlipComponent, GroupedDirective, ImageUploaderComponent, ImageViewerComponent, InputComponent, LanguageSelectorComponent, MapToAddressComponent, NotificationComponent, NotificationService, PictureNameComponent, SelectComponent, SelectDropdownComponent, SideMenuComponent, SideMenuItemComponent, StlViewerComponent, TableComponent, TableSettingComponent, TableSettingService, TabsComponent, TagInputComponent, TagViewerComponent, ToggleComponent, WysiwygEditorComponent, WysiwygViewerComponent, dateToString, google, provideAuthenticateConfig, provideAuthenticateMetadata, provideHaloduckTransloco, provideSocialLoginProviders };
|
|
1464
|
+
export type { AuthenticateConfig, ButtonVariant, CalendarDate, DateRange, DateRangeDropdown, FileEx, GroupedConfig, Location, MetaData, Notification, NotificationType, Option, ProcessCognitoUserResponse, SocialLoginProvider, TabItem, TableColumn, TableRow, TableSettings };
|