@propbinder/mobile-design 0.1.21 → 0.2.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/fesm2022/propbinder-mobile-design.mjs +10568 -9191
- package/fesm2022/propbinder-mobile-design.mjs.map +1 -1
- package/index.d.ts +646 -32
- package/package.json +1 -1
- package/styles/ionic.css +76 -2
- package/styles/mobile-page-base.css +195 -153
package/index.d.ts
CHANGED
|
@@ -338,11 +338,12 @@ declare class DsMobilePageMainComponent extends MobilePageBase implements AfterV
|
|
|
338
338
|
private modalController;
|
|
339
339
|
private router;
|
|
340
340
|
private userService;
|
|
341
|
+
private whitelabelDemoModal;
|
|
341
342
|
isNativePlatform: _angular_core.Signal<boolean>;
|
|
342
343
|
title: _angular_core.InputSignal<string>;
|
|
343
344
|
headerTitle: _angular_core.InputSignal<string>;
|
|
344
345
|
headerSubtitle: _angular_core.InputSignal<string>;
|
|
345
|
-
avatarType: _angular_core.InputSignal<"
|
|
346
|
+
avatarType: _angular_core.InputSignal<"initials" | "photo" | "icon">;
|
|
346
347
|
avatarInitials: _angular_core.InputSignal<string>;
|
|
347
348
|
avatarSrc: _angular_core.InputSignal<string>;
|
|
348
349
|
avatarIconName: _angular_core.InputSignal<string>;
|
|
@@ -676,7 +677,7 @@ declare class DsMobileCommentComponent {
|
|
|
676
677
|
/**
|
|
677
678
|
* Avatar type
|
|
678
679
|
*/
|
|
679
|
-
avatarType: _angular_core.InputSignal<"
|
|
680
|
+
avatarType: _angular_core.InputSignal<"initials" | "photo" | "icon">;
|
|
680
681
|
/**
|
|
681
682
|
* Whether the comment is clickable
|
|
682
683
|
*/
|
|
@@ -689,6 +690,13 @@ declare class DsMobileCommentComponent {
|
|
|
689
690
|
* Whether the comment is liked by current user
|
|
690
691
|
*/
|
|
691
692
|
isLiked: _angular_core.ModelSignal<boolean>;
|
|
693
|
+
/**
|
|
694
|
+
* Emits when like is toggled (after UI is opdateret)
|
|
695
|
+
*/
|
|
696
|
+
likeToggled: _angular_core.OutputEmitterRef<{
|
|
697
|
+
active: boolean;
|
|
698
|
+
count: number;
|
|
699
|
+
}>;
|
|
692
700
|
/**
|
|
693
701
|
* Number of likes
|
|
694
702
|
*/
|
|
@@ -752,7 +760,7 @@ declare class DsMobileCommentComponent {
|
|
|
752
760
|
*/
|
|
753
761
|
handleMoreButtonClick(event: Event): void;
|
|
754
762
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileCommentComponent, never>;
|
|
755
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileCommentComponent, "ds-mobile-comment", never, { "authorName": { "alias": "authorName"; "required": true; "isSignal": true; }; "authorRole": { "alias": "authorRole"; "required": true; "isSignal": true; }; "timestamp": { "alias": "timestamp"; "required": true; "isSignal": true; }; "content": { "alias": "content"; "required": true; "isSignal": true; }; "avatarInitials": { "alias": "avatarInitials"; "required": false; "isSignal": true; }; "avatarType": { "alias": "avatarType"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; "isOwnComment": { "alias": "isOwnComment"; "required": false; "isSignal": true; }; "isLiked": { "alias": "isLiked"; "required": false; "isSignal": true; }; "likeCount": { "alias": "likeCount"; "required": false; "isSignal": true; }; }, { "isLiked": "isLikedChange"; "likeCount": "likeCountChange"; "commentClick": "commentClick"; "replyClick": "replyClick"; "editClick": "editClick"; "longPress": "longPress"; }, never, never, true, never>;
|
|
763
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileCommentComponent, "ds-mobile-comment", never, { "authorName": { "alias": "authorName"; "required": true; "isSignal": true; }; "authorRole": { "alias": "authorRole"; "required": true; "isSignal": true; }; "timestamp": { "alias": "timestamp"; "required": true; "isSignal": true; }; "content": { "alias": "content"; "required": true; "isSignal": true; }; "avatarInitials": { "alias": "avatarInitials"; "required": false; "isSignal": true; }; "avatarType": { "alias": "avatarType"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; "isOwnComment": { "alias": "isOwnComment"; "required": false; "isSignal": true; }; "isLiked": { "alias": "isLiked"; "required": false; "isSignal": true; }; "likeCount": { "alias": "likeCount"; "required": false; "isSignal": true; }; }, { "isLiked": "isLikedChange"; "likeToggled": "likeToggled"; "likeCount": "likeCountChange"; "commentClick": "commentClick"; "replyClick": "replyClick"; "editClick": "editClick"; "longPress": "longPress"; }, never, never, true, never>;
|
|
756
764
|
}
|
|
757
765
|
|
|
758
766
|
/**
|
|
@@ -780,7 +788,7 @@ declare class DsMobilePostComposerComponent {
|
|
|
780
788
|
/**
|
|
781
789
|
* Avatar type
|
|
782
790
|
*/
|
|
783
|
-
avatarType: _angular_core.InputSignal<"
|
|
791
|
+
avatarType: _angular_core.InputSignal<"initials" | "photo" | "icon">;
|
|
784
792
|
/**
|
|
785
793
|
* Avatar photo source (for photo type)
|
|
786
794
|
*/
|
|
@@ -806,6 +814,320 @@ declare class DsMobilePostComposerComponent {
|
|
|
806
814
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobilePostComposerComponent, "ds-mobile-post-composer", never, { "avatarInitials": { "alias": "avatarInitials"; "required": false; "isSignal": true; }; "avatarType": { "alias": "avatarType"; "required": false; "isSignal": true; }; "avatarSrc": { "alias": "avatarSrc"; "required": false; "isSignal": true; }; "avatarIconName": { "alias": "avatarIconName"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "buttonText": { "alias": "buttonText"; "required": false; "isSignal": true; }; }, { "composerClick": "composerClick"; }, never, never, true, never>;
|
|
807
815
|
}
|
|
808
816
|
|
|
817
|
+
/**
|
|
818
|
+
* DsMobileMessageComposerComponent
|
|
819
|
+
*
|
|
820
|
+
* Reusable message composer component extracted from post-detail-modal.
|
|
821
|
+
* Can be used for both comments and chat messages.
|
|
822
|
+
*
|
|
823
|
+
* Features:
|
|
824
|
+
* - Text input with auto-resize
|
|
825
|
+
* - Avatar display
|
|
826
|
+
* - Send button (appears when text is entered)
|
|
827
|
+
* - Optional mention menu support
|
|
828
|
+
* - Optional edit/reply indicators
|
|
829
|
+
* - Keyboard handling for mobile
|
|
830
|
+
* - Safe area support
|
|
831
|
+
*
|
|
832
|
+
* @example
|
|
833
|
+
* ```html
|
|
834
|
+
* <ds-mobile-message-composer
|
|
835
|
+
* [avatarInitials]="'JD'"
|
|
836
|
+
* [placeholder]="'Write a message...'"
|
|
837
|
+
* (messageSent)="handleMessage($event)">
|
|
838
|
+
* </ds-mobile-message-composer>
|
|
839
|
+
* ```
|
|
840
|
+
*/
|
|
841
|
+
declare class DsMobileMessageComposerComponent implements AfterViewInit, OnDestroy {
|
|
842
|
+
/**
|
|
843
|
+
* Avatar initials
|
|
844
|
+
*/
|
|
845
|
+
avatarInitials: _angular_core.InputSignal<string>;
|
|
846
|
+
/**
|
|
847
|
+
* Avatar type
|
|
848
|
+
*/
|
|
849
|
+
avatarType: _angular_core.InputSignal<"initials" | "photo" | "icon">;
|
|
850
|
+
/**
|
|
851
|
+
* Avatar photo source (for photo type)
|
|
852
|
+
*/
|
|
853
|
+
avatarSrc: _angular_core.InputSignal<string>;
|
|
854
|
+
/**
|
|
855
|
+
* Placeholder text for the input
|
|
856
|
+
*/
|
|
857
|
+
placeholder: _angular_core.InputSignal<string>;
|
|
858
|
+
/**
|
|
859
|
+
* Send button aria label
|
|
860
|
+
*/
|
|
861
|
+
sendButtonLabel: _angular_core.InputSignal<string>;
|
|
862
|
+
/**
|
|
863
|
+
* Edit indicator text (when editing)
|
|
864
|
+
*/
|
|
865
|
+
editIndicatorText: _angular_core.InputSignal<string>;
|
|
866
|
+
/**
|
|
867
|
+
* Reply indicator text prefix
|
|
868
|
+
*/
|
|
869
|
+
replyIndicatorText: _angular_core.InputSignal<string>;
|
|
870
|
+
/**
|
|
871
|
+
* Whether to enable mention support
|
|
872
|
+
*/
|
|
873
|
+
enableMentions: _angular_core.InputSignal<boolean>;
|
|
874
|
+
/**
|
|
875
|
+
* Available users for mentions (if mentions enabled)
|
|
876
|
+
*/
|
|
877
|
+
mentionUsers: _angular_core.InputSignal<{
|
|
878
|
+
name: string;
|
|
879
|
+
initials: string;
|
|
880
|
+
role: string;
|
|
881
|
+
}[]>;
|
|
882
|
+
/**
|
|
883
|
+
* Auto-focus input on mount
|
|
884
|
+
*/
|
|
885
|
+
autoFocus: _angular_core.InputSignal<boolean>;
|
|
886
|
+
/**
|
|
887
|
+
* ViewChild for message input
|
|
888
|
+
*/
|
|
889
|
+
messageInput?: ElementRef<HTMLTextAreaElement>;
|
|
890
|
+
/**
|
|
891
|
+
* Message text signal
|
|
892
|
+
*/
|
|
893
|
+
messageText: _angular_core.WritableSignal<string>;
|
|
894
|
+
/**
|
|
895
|
+
* Editing message state (optional)
|
|
896
|
+
*/
|
|
897
|
+
editingMessage: _angular_core.WritableSignal<{
|
|
898
|
+
authorName: string;
|
|
899
|
+
originalContent: string;
|
|
900
|
+
timestamp: string;
|
|
901
|
+
} | null>;
|
|
902
|
+
/**
|
|
903
|
+
* Replying to state (optional)
|
|
904
|
+
*/
|
|
905
|
+
replyingTo: _angular_core.WritableSignal<{
|
|
906
|
+
authorName: string;
|
|
907
|
+
content: string;
|
|
908
|
+
} | null>;
|
|
909
|
+
/**
|
|
910
|
+
* Mention menu state
|
|
911
|
+
*/
|
|
912
|
+
showMentionMenu: _angular_core.WritableSignal<boolean>;
|
|
913
|
+
/**
|
|
914
|
+
* Mention query for filtering
|
|
915
|
+
*/
|
|
916
|
+
mentionQuery: _angular_core.WritableSignal<string>;
|
|
917
|
+
/**
|
|
918
|
+
* Filtered users based on mention query
|
|
919
|
+
*/
|
|
920
|
+
filteredUsers: _angular_core.Signal<{
|
|
921
|
+
name: string;
|
|
922
|
+
initials: string;
|
|
923
|
+
role: string;
|
|
924
|
+
}[]>;
|
|
925
|
+
/**
|
|
926
|
+
* Emits when a message is sent
|
|
927
|
+
*/
|
|
928
|
+
messageSent: _angular_core.OutputEmitterRef<{
|
|
929
|
+
content: string;
|
|
930
|
+
isReply?: boolean;
|
|
931
|
+
replyTo?: string;
|
|
932
|
+
isEdit?: boolean;
|
|
933
|
+
}>;
|
|
934
|
+
/**
|
|
935
|
+
* Emits when edit is cancelled
|
|
936
|
+
*/
|
|
937
|
+
editCancelled: _angular_core.OutputEmitterRef<void>;
|
|
938
|
+
/**
|
|
939
|
+
* Emits when reply is cancelled
|
|
940
|
+
*/
|
|
941
|
+
replyCancelled: _angular_core.OutputEmitterRef<void>;
|
|
942
|
+
/**
|
|
943
|
+
* Emits when mention is selected
|
|
944
|
+
*/
|
|
945
|
+
mentionSelected: _angular_core.OutputEmitterRef<{
|
|
946
|
+
userName: string;
|
|
947
|
+
}>;
|
|
948
|
+
ngAfterViewInit(): void;
|
|
949
|
+
ngOnDestroy(): void;
|
|
950
|
+
/**
|
|
951
|
+
* Set up keyboard event listeners
|
|
952
|
+
*/
|
|
953
|
+
private setupKeyboardListeners;
|
|
954
|
+
/**
|
|
955
|
+
* Clean up keyboard event listeners
|
|
956
|
+
*/
|
|
957
|
+
private cleanupKeyboardListeners;
|
|
958
|
+
/**
|
|
959
|
+
* Show the keyboard when user interacts with input
|
|
960
|
+
*/
|
|
961
|
+
showKeyboard(): void;
|
|
962
|
+
/**
|
|
963
|
+
* Handle input changes and detect @ mentions
|
|
964
|
+
*/
|
|
965
|
+
handleInput(event: Event): void;
|
|
966
|
+
/**
|
|
967
|
+
* Select a user from mention menu
|
|
968
|
+
*/
|
|
969
|
+
selectMention(userName: string): void;
|
|
970
|
+
/**
|
|
971
|
+
* Cancel edit
|
|
972
|
+
*/
|
|
973
|
+
cancelEdit(): void;
|
|
974
|
+
/**
|
|
975
|
+
* Cancel reply
|
|
976
|
+
*/
|
|
977
|
+
cancelReply(): void;
|
|
978
|
+
/**
|
|
979
|
+
* Set reply state (for external use)
|
|
980
|
+
*/
|
|
981
|
+
setReply(authorName: string, content: string): void;
|
|
982
|
+
/**
|
|
983
|
+
* Set edit state (for external use)
|
|
984
|
+
*/
|
|
985
|
+
setEdit(authorName: string, originalContent: string, timestamp: string): void;
|
|
986
|
+
/**
|
|
987
|
+
* Clear composer state
|
|
988
|
+
*/
|
|
989
|
+
clear(): void;
|
|
990
|
+
/**
|
|
991
|
+
* Focus the input
|
|
992
|
+
*/
|
|
993
|
+
focus(): void;
|
|
994
|
+
/**
|
|
995
|
+
* Send message
|
|
996
|
+
*/
|
|
997
|
+
sendMessage(): void;
|
|
998
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileMessageComposerComponent, never>;
|
|
999
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileMessageComposerComponent, "ds-mobile-message-composer", never, { "avatarInitials": { "alias": "avatarInitials"; "required": false; "isSignal": true; }; "avatarType": { "alias": "avatarType"; "required": false; "isSignal": true; }; "avatarSrc": { "alias": "avatarSrc"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "sendButtonLabel": { "alias": "sendButtonLabel"; "required": false; "isSignal": true; }; "editIndicatorText": { "alias": "editIndicatorText"; "required": false; "isSignal": true; }; "replyIndicatorText": { "alias": "replyIndicatorText"; "required": false; "isSignal": true; }; "enableMentions": { "alias": "enableMentions"; "required": false; "isSignal": true; }; "mentionUsers": { "alias": "mentionUsers"; "required": false; "isSignal": true; }; "autoFocus": { "alias": "autoFocus"; "required": false; "isSignal": true; }; }, { "messageSent": "messageSent"; "editCancelled": "editCancelled"; "replyCancelled": "replyCancelled"; "mentionSelected": "mentionSelected"; }, never, never, true, never>;
|
|
1000
|
+
}
|
|
1001
|
+
|
|
1002
|
+
/**
|
|
1003
|
+
* Chat attachment interface
|
|
1004
|
+
*/
|
|
1005
|
+
interface ChatAttachment {
|
|
1006
|
+
id: string;
|
|
1007
|
+
type: 'image' | 'pdf' | 'file';
|
|
1008
|
+
url: string;
|
|
1009
|
+
name: string;
|
|
1010
|
+
size?: number;
|
|
1011
|
+
thumbnail?: string;
|
|
1012
|
+
}
|
|
1013
|
+
/**
|
|
1014
|
+
* DsMobileMessageBubbleComponent
|
|
1015
|
+
*
|
|
1016
|
+
* Individual message bubble component for chat conversations.
|
|
1017
|
+
* Supports left-aligned (sender) and right-aligned (user) messages with different styling.
|
|
1018
|
+
*
|
|
1019
|
+
* Features:
|
|
1020
|
+
* - Left/right alignment based on sender
|
|
1021
|
+
* - Avatar display (left for sender, right for user)
|
|
1022
|
+
* - Message content with text wrapping
|
|
1023
|
+
* - Timestamp display
|
|
1024
|
+
* - Read receipt indicator (for user's messages)
|
|
1025
|
+
* - Attachment support
|
|
1026
|
+
* - Long press support for actions
|
|
1027
|
+
*
|
|
1028
|
+
* @example
|
|
1029
|
+
* ```html
|
|
1030
|
+
* <!-- Sender's message (left-aligned) -->
|
|
1031
|
+
* <ds-mobile-message-bubble
|
|
1032
|
+
* [isOwnMessage]="false"
|
|
1033
|
+
* [senderName]="'Ricki Meihlen'"
|
|
1034
|
+
* [content]="'We have received your case...'"
|
|
1035
|
+
* [timestamp]="'12:34'"
|
|
1036
|
+
* [avatarInitials]="'RM'">
|
|
1037
|
+
* </ds-mobile-message-bubble>
|
|
1038
|
+
*
|
|
1039
|
+
* <!-- User's message (right-aligned) -->
|
|
1040
|
+
* <ds-mobile-message-bubble
|
|
1041
|
+
* [isOwnMessage]="true"
|
|
1042
|
+
* [senderName]="'You'"
|
|
1043
|
+
* [content]="'Thank you!'"
|
|
1044
|
+
* [timestamp]="'12:35'"
|
|
1045
|
+
* [readStatus]="true"
|
|
1046
|
+
* [avatarInitials]="'JD'">
|
|
1047
|
+
* </ds-mobile-message-bubble>
|
|
1048
|
+
* ```
|
|
1049
|
+
*/
|
|
1050
|
+
declare class DsMobileMessageBubbleComponent {
|
|
1051
|
+
/**
|
|
1052
|
+
* Message content text
|
|
1053
|
+
*/
|
|
1054
|
+
content: _angular_core.InputSignal<string>;
|
|
1055
|
+
/**
|
|
1056
|
+
* Whether this is the current user's message (right-aligned)
|
|
1057
|
+
*/
|
|
1058
|
+
isOwnMessage: _angular_core.InputSignal<boolean>;
|
|
1059
|
+
/**
|
|
1060
|
+
* Sender's name (for display purposes)
|
|
1061
|
+
*/
|
|
1062
|
+
senderName: _angular_core.InputSignal<string>;
|
|
1063
|
+
/**
|
|
1064
|
+
* Timestamp text (e.g., "12:34", "08-12-2025 13:18")
|
|
1065
|
+
*/
|
|
1066
|
+
timestamp: _angular_core.InputSignal<string>;
|
|
1067
|
+
/**
|
|
1068
|
+
* Avatar initials
|
|
1069
|
+
*/
|
|
1070
|
+
avatarInitials: _angular_core.InputSignal<string>;
|
|
1071
|
+
/**
|
|
1072
|
+
* Avatar type
|
|
1073
|
+
*/
|
|
1074
|
+
avatarType: _angular_core.InputSignal<"initials" | "photo" | "icon">;
|
|
1075
|
+
/**
|
|
1076
|
+
* Avatar photo source (for photo type)
|
|
1077
|
+
*/
|
|
1078
|
+
avatarSrc: _angular_core.InputSignal<string>;
|
|
1079
|
+
/**
|
|
1080
|
+
* Whether to show read receipt (only for user's messages)
|
|
1081
|
+
*/
|
|
1082
|
+
/**
|
|
1083
|
+
* Message attachments
|
|
1084
|
+
*/
|
|
1085
|
+
attachments: _angular_core.InputSignal<ChatAttachment[] | undefined>;
|
|
1086
|
+
/**
|
|
1087
|
+
* Whether the message is clickable
|
|
1088
|
+
*/
|
|
1089
|
+
clickable: _angular_core.InputSignal<boolean>;
|
|
1090
|
+
/**
|
|
1091
|
+
* Emits when attachment is clicked
|
|
1092
|
+
*/
|
|
1093
|
+
attachmentClick: _angular_core.OutputEmitterRef<ChatAttachment>;
|
|
1094
|
+
/**
|
|
1095
|
+
* Emits when the message is long-pressed
|
|
1096
|
+
*/
|
|
1097
|
+
longPress: _angular_core.OutputEmitterRef<void>;
|
|
1098
|
+
/**
|
|
1099
|
+
* Long press tracking
|
|
1100
|
+
*/
|
|
1101
|
+
private longPressTimer;
|
|
1102
|
+
private longPressTriggered;
|
|
1103
|
+
private touchStartX;
|
|
1104
|
+
private touchStartY;
|
|
1105
|
+
private readonly LONG_PRESS_DURATION;
|
|
1106
|
+
private readonly MOVE_THRESHOLD;
|
|
1107
|
+
/**
|
|
1108
|
+
* Handle attachment click
|
|
1109
|
+
*/
|
|
1110
|
+
handleAttachmentClick(attachment: ChatAttachment): void;
|
|
1111
|
+
/**
|
|
1112
|
+
* Handle touch start for long press detection
|
|
1113
|
+
*/
|
|
1114
|
+
handleTouchStart(event: TouchEvent): void;
|
|
1115
|
+
/**
|
|
1116
|
+
* Handle touch end to clear long press timer
|
|
1117
|
+
*/
|
|
1118
|
+
handleTouchEnd(event: TouchEvent): void;
|
|
1119
|
+
/**
|
|
1120
|
+
* Handle touch move to cancel long press if moved too much
|
|
1121
|
+
*/
|
|
1122
|
+
handleTouchMove(event: TouchEvent): void;
|
|
1123
|
+
/**
|
|
1124
|
+
* Handle context menu (right-click on desktop) to trigger long press action
|
|
1125
|
+
*/
|
|
1126
|
+
handleContextMenu(event: Event): void;
|
|
1127
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileMessageBubbleComponent, never>;
|
|
1128
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileMessageBubbleComponent, "ds-mobile-message-bubble", never, { "content": { "alias": "content"; "required": true; "isSignal": true; }; "isOwnMessage": { "alias": "isOwnMessage"; "required": false; "isSignal": true; }; "senderName": { "alias": "senderName"; "required": false; "isSignal": true; }; "timestamp": { "alias": "timestamp"; "required": true; "isSignal": true; }; "avatarInitials": { "alias": "avatarInitials"; "required": false; "isSignal": true; }; "avatarType": { "alias": "avatarType"; "required": false; "isSignal": true; }; "avatarSrc": { "alias": "avatarSrc"; "required": false; "isSignal": true; }; "attachments": { "alias": "attachments"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; }, { "attachmentClick": "attachmentClick"; "longPress": "longPress"; }, never, never, true, never>;
|
|
1129
|
+
}
|
|
1130
|
+
|
|
809
1131
|
/**
|
|
810
1132
|
* DsMobileLongPressDirective
|
|
811
1133
|
*
|
|
@@ -979,11 +1301,17 @@ declare class DsMobileListItemComponent {
|
|
|
979
1301
|
leadingSize: _angular_core.InputSignal<string>;
|
|
980
1302
|
/**
|
|
981
1303
|
* Display variant
|
|
982
|
-
* -
|
|
983
|
-
* - 'detail' - Full detail view
|
|
1304
|
+
* - undefined (default) - Standard display
|
|
984
1305
|
* - 'compact' - Compact display for nested/related items
|
|
985
1306
|
*/
|
|
986
|
-
variant: _angular_core.InputSignal<"
|
|
1307
|
+
variant: _angular_core.InputSignal<"compact" | undefined>;
|
|
1308
|
+
/**
|
|
1309
|
+
* Vertical alignment of leading and main content slots
|
|
1310
|
+
* - 'top' - Align to top (default)
|
|
1311
|
+
* - 'center' - Align to center
|
|
1312
|
+
* - 'bottom' - Align to bottom
|
|
1313
|
+
*/
|
|
1314
|
+
align: _angular_core.InputSignal<"center" | "top" | "bottom">;
|
|
987
1315
|
/**
|
|
988
1316
|
* Whether the list item is interactive (clickable and long-pressable)
|
|
989
1317
|
* When true, adds interactive background, cursor pointer, and touch handlers
|
|
@@ -1082,7 +1410,7 @@ declare class DsMobileListItemComponent {
|
|
|
1082
1410
|
*/
|
|
1083
1411
|
handleMoreButtonClick(event: Event): void;
|
|
1084
1412
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileListItemComponent, never>;
|
|
1085
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileListItemComponent, "ds-mobile-list-item", never, { "leadingSize": { "alias": "leadingSize"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "enableLongPress": { "alias": "enableLongPress"; "required": false; "isSignal": true; }; "showDesktopMoreButton": { "alias": "showDesktopMoreButton"; "required": false; "isSignal": true; }; "interactiveOffset": { "alias": "interactiveOffset"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "showDivider": { "alias": "showDivider"; "required": false; "isSignal": true; }; "dividerSpacing": { "alias": "dividerSpacing"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; "moreButtonClick": "moreButtonClick"; }, never, ["[content-leading]", "[content-main]", "*", "[content-trailing]"], true, [{ directive: typeof DsMobileLongPressDirective; inputs: {}; outputs: { "longPress": "longPress"; }; }]>;
|
|
1413
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileListItemComponent, "ds-mobile-list-item", never, { "leadingSize": { "alias": "leadingSize"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "enableLongPress": { "alias": "enableLongPress"; "required": false; "isSignal": true; }; "showDesktopMoreButton": { "alias": "showDesktopMoreButton"; "required": false; "isSignal": true; }; "interactiveOffset": { "alias": "interactiveOffset"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "showDivider": { "alias": "showDivider"; "required": false; "isSignal": true; }; "dividerSpacing": { "alias": "dividerSpacing"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; "moreButtonClick": "moreButtonClick"; }, never, ["[content-leading]", "[content-main]", "*", "[content-trailing]"], true, [{ directive: typeof DsMobileLongPressDirective; inputs: {}; outputs: { "longPress": "longPress"; }; }]>;
|
|
1086
1414
|
}
|
|
1087
1415
|
|
|
1088
1416
|
/**
|
|
@@ -1185,7 +1513,7 @@ declare class DsMobileInteractiveListItemPostComponent {
|
|
|
1185
1513
|
/**
|
|
1186
1514
|
* Avatar type
|
|
1187
1515
|
*/
|
|
1188
|
-
avatarType: _angular_core.InputSignal<"
|
|
1516
|
+
avatarType: _angular_core.InputSignal<"initials" | "photo" | "icon">;
|
|
1189
1517
|
/**
|
|
1190
1518
|
* Avatar photo source (for photo type)
|
|
1191
1519
|
*/
|
|
@@ -1200,11 +1528,10 @@ declare class DsMobileInteractiveListItemPostComponent {
|
|
|
1200
1528
|
showBadge: _angular_core.InputSignal<boolean>;
|
|
1201
1529
|
/**
|
|
1202
1530
|
* Display variant
|
|
1203
|
-
* -
|
|
1204
|
-
* - 'detail' - Full detail view
|
|
1531
|
+
* - undefined (default) - Standard display
|
|
1205
1532
|
* - 'compact' - Compact display for nested/related posts
|
|
1206
1533
|
*/
|
|
1207
|
-
variant: _angular_core.InputSignal<"
|
|
1534
|
+
variant: _angular_core.InputSignal<"compact" | undefined>;
|
|
1208
1535
|
/**
|
|
1209
1536
|
* Whether the post card is clickable
|
|
1210
1537
|
*/
|
|
@@ -1409,11 +1736,10 @@ declare class DsMobileInteractiveListItemInquiryComponent {
|
|
|
1409
1736
|
iconColor: _angular_core.InputSignal<string>;
|
|
1410
1737
|
/**
|
|
1411
1738
|
* Display variant
|
|
1412
|
-
* -
|
|
1413
|
-
* - 'detail' - Full detail view
|
|
1739
|
+
* - undefined (default) - Standard display
|
|
1414
1740
|
* - 'compact' - Compact display
|
|
1415
1741
|
*/
|
|
1416
|
-
variant: _angular_core.InputSignal<"
|
|
1742
|
+
variant: _angular_core.InputSignal<"compact" | undefined>;
|
|
1417
1743
|
/**
|
|
1418
1744
|
* Whether the inquiry item is clickable
|
|
1419
1745
|
*/
|
|
@@ -1471,6 +1797,10 @@ declare class DsMobileInteractiveListItemMessageComponent {
|
|
|
1471
1797
|
* Sender's role (e.g., "Tenant", "Property Manager")
|
|
1472
1798
|
*/
|
|
1473
1799
|
senderRole: _angular_core.InputSignal<string>;
|
|
1800
|
+
/**
|
|
1801
|
+
* Timestamp for the message (e.g., "2h ago", "2t siden")
|
|
1802
|
+
*/
|
|
1803
|
+
timestamp: _angular_core.InputSignal<string>;
|
|
1474
1804
|
/**
|
|
1475
1805
|
* Message preview text
|
|
1476
1806
|
*/
|
|
@@ -1482,7 +1812,7 @@ declare class DsMobileInteractiveListItemMessageComponent {
|
|
|
1482
1812
|
/**
|
|
1483
1813
|
* Avatar type
|
|
1484
1814
|
*/
|
|
1485
|
-
avatarType: _angular_core.InputSignal<"
|
|
1815
|
+
avatarType: _angular_core.InputSignal<"initials" | "photo" | "icon">;
|
|
1486
1816
|
/**
|
|
1487
1817
|
* Avatar photo source (for photo type)
|
|
1488
1818
|
*/
|
|
@@ -1506,7 +1836,7 @@ declare class DsMobileInteractiveListItemMessageComponent {
|
|
|
1506
1836
|
handleMessageClick(): void;
|
|
1507
1837
|
handleLongPress(): void;
|
|
1508
1838
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileInteractiveListItemMessageComponent, never>;
|
|
1509
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileInteractiveListItemMessageComponent, "ds-mobile-interactive-list-item-message", never, { "senderName": { "alias": "senderName"; "required": true; "isSignal": true; }; "senderRole": { "alias": "senderRole"; "required": true; "isSignal": true; }; "message": { "alias": "message"; "required": true; "isSignal": true; }; "avatarInitials": { "alias": "avatarInitials"; "required": false; "isSignal": true; }; "avatarType": { "alias": "avatarType"; "required": false; "isSignal": true; }; "avatarSrc": { "alias": "avatarSrc"; "required": false; "isSignal": true; }; "unread": { "alias": "unread"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; }, { "messageClick": "messageClick"; "longPress": "longPress"; }, never, never, true, never>;
|
|
1839
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileInteractiveListItemMessageComponent, "ds-mobile-interactive-list-item-message", never, { "senderName": { "alias": "senderName"; "required": true; "isSignal": true; }; "senderRole": { "alias": "senderRole"; "required": true; "isSignal": true; }; "timestamp": { "alias": "timestamp"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": true; "isSignal": true; }; "avatarInitials": { "alias": "avatarInitials"; "required": false; "isSignal": true; }; "avatarType": { "alias": "avatarType"; "required": false; "isSignal": true; }; "avatarSrc": { "alias": "avatarSrc"; "required": false; "isSignal": true; }; "unread": { "alias": "unread"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; }, { "messageClick": "messageClick"; "longPress": "longPress"; }, never, never, true, never>;
|
|
1510
1840
|
}
|
|
1511
1841
|
|
|
1512
1842
|
/**
|
|
@@ -1848,6 +2178,8 @@ interface LightboxImageOptions {
|
|
|
1848
2178
|
enableSwipe?: boolean;
|
|
1849
2179
|
/** Show image info (title, description) */
|
|
1850
2180
|
showInfo?: boolean;
|
|
2181
|
+
/** Show like & comment action buttons */
|
|
2182
|
+
showActions?: boolean;
|
|
1851
2183
|
/** Animation type for opening */
|
|
1852
2184
|
animation?: 'fade' | 'zoom' | 'slide';
|
|
1853
2185
|
}
|
|
@@ -1988,6 +2320,7 @@ declare class DsMobileLightboxImageComponent implements OnInit, AfterViewInit, O
|
|
|
1988
2320
|
showControls: boolean;
|
|
1989
2321
|
enableSwipe: boolean;
|
|
1990
2322
|
showInfo: boolean;
|
|
2323
|
+
showActions: boolean;
|
|
1991
2324
|
animation: 'fade' | 'zoom' | 'slide';
|
|
1992
2325
|
onCloseRequested?: () => void;
|
|
1993
2326
|
swiperContainer: ElementRef<HTMLDivElement>;
|
|
@@ -2161,8 +2494,12 @@ declare class DsMobileLightboxHeaderComponent {
|
|
|
2161
2494
|
* Emitted when close button is clicked
|
|
2162
2495
|
*/
|
|
2163
2496
|
closeClick: _angular_core.OutputEmitterRef<void>;
|
|
2497
|
+
/**
|
|
2498
|
+
* Emitted when share button is clicked
|
|
2499
|
+
*/
|
|
2500
|
+
shareClick: _angular_core.OutputEmitterRef<void>;
|
|
2164
2501
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileLightboxHeaderComponent, never>;
|
|
2165
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileLightboxHeaderComponent, "ds-mobile-lightbox-header", never, { "author": { "alias": "author"; "required": false; "isSignal": true; }; }, { "closeClick": "closeClick"; }, never, never, true, never>;
|
|
2502
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileLightboxHeaderComponent, "ds-mobile-lightbox-header", never, { "author": { "alias": "author"; "required": false; "isSignal": true; }; }, { "closeClick": "closeClick"; "shareClick": "shareClick"; }, never, never, true, never>;
|
|
2166
2503
|
}
|
|
2167
2504
|
|
|
2168
2505
|
/**
|
|
@@ -2184,6 +2521,11 @@ declare class DsMobileLightboxFooterComponent {
|
|
|
2184
2521
|
* Total number of images
|
|
2185
2522
|
*/
|
|
2186
2523
|
totalImages: _angular_core.InputSignal<number>;
|
|
2524
|
+
/**
|
|
2525
|
+
* Whether to show like & comment action buttons
|
|
2526
|
+
* @default false
|
|
2527
|
+
*/
|
|
2528
|
+
showActions: _angular_core.InputSignal<boolean>;
|
|
2187
2529
|
/**
|
|
2188
2530
|
* Whether the content is liked
|
|
2189
2531
|
*/
|
|
@@ -2212,12 +2554,8 @@ declare class DsMobileLightboxFooterComponent {
|
|
|
2212
2554
|
* Emitted when comment button is clicked
|
|
2213
2555
|
*/
|
|
2214
2556
|
commentClick: _angular_core.OutputEmitterRef<void>;
|
|
2215
|
-
/**
|
|
2216
|
-
* Emitted when share button is clicked
|
|
2217
|
-
*/
|
|
2218
|
-
shareClick: _angular_core.OutputEmitterRef<void>;
|
|
2219
2557
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileLightboxFooterComponent, never>;
|
|
2220
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileLightboxFooterComponent, "ds-mobile-lightbox-footer", never, { "showNavigation": { "alias": "showNavigation"; "required": false; "isSignal": true; }; "currentIndex": { "alias": "currentIndex"; "required": false; "isSignal": true; }; "totalImages": { "alias": "totalImages"; "required": false; "isSignal": true; }; "isLiked": { "alias": "isLiked"; "required": false; "isSignal": true; }; "likeCount": { "alias": "likeCount"; "required": false; "isSignal": true; }; "commentCount": { "alias": "commentCount"; "required": false; "isSignal": true; }; }, { "prevClick": "prevClick"; "nextClick": "nextClick"; "likeClick": "likeClick"; "commentClick": "commentClick";
|
|
2558
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileLightboxFooterComponent, "ds-mobile-lightbox-footer", never, { "showNavigation": { "alias": "showNavigation"; "required": false; "isSignal": true; }; "currentIndex": { "alias": "currentIndex"; "required": false; "isSignal": true; }; "totalImages": { "alias": "totalImages"; "required": false; "isSignal": true; }; "showActions": { "alias": "showActions"; "required": false; "isSignal": true; }; "isLiked": { "alias": "isLiked"; "required": false; "isSignal": true; }; "likeCount": { "alias": "likeCount"; "required": false; "isSignal": true; }; "commentCount": { "alias": "commentCount"; "required": false; "isSignal": true; }; }, { "prevClick": "prevClick"; "nextClick": "nextClick"; "likeClick": "likeClick"; "commentClick": "commentClick"; }, never, never, true, never>;
|
|
2221
2559
|
}
|
|
2222
2560
|
|
|
2223
2561
|
/**
|
|
@@ -2543,6 +2881,8 @@ interface PostDetailData {
|
|
|
2543
2881
|
* ```
|
|
2544
2882
|
*/
|
|
2545
2883
|
interface CommentData {
|
|
2884
|
+
/** Unique comment identifier */
|
|
2885
|
+
id?: string;
|
|
2546
2886
|
/** Comment author name */
|
|
2547
2887
|
authorName: string;
|
|
2548
2888
|
/** Author role */
|
|
@@ -2600,6 +2940,17 @@ declare class DsMobilePostDetailModalComponent implements AfterViewInit, OnDestr
|
|
|
2600
2940
|
postId: string;
|
|
2601
2941
|
text: string;
|
|
2602
2942
|
}) => void;
|
|
2943
|
+
onToggleCommentLike?: (payload: {
|
|
2944
|
+
commentId: string;
|
|
2945
|
+
active: boolean;
|
|
2946
|
+
}) => void;
|
|
2947
|
+
onEditComment?: (payload: {
|
|
2948
|
+
commentId: string;
|
|
2949
|
+
newText: string;
|
|
2950
|
+
}) => void;
|
|
2951
|
+
onDeleteComment?: (payload: {
|
|
2952
|
+
commentId: string;
|
|
2953
|
+
}) => void;
|
|
2603
2954
|
/**
|
|
2604
2955
|
* Loading state - when true, shows loading indicator
|
|
2605
2956
|
* Set this to true while fetching post data from your API
|
|
@@ -2619,6 +2970,7 @@ declare class DsMobilePostDetailModalComponent implements AfterViewInit, OnDestr
|
|
|
2619
2970
|
content: string;
|
|
2620
2971
|
} | null>;
|
|
2621
2972
|
editingComment: _angular_core.WritableSignal<{
|
|
2973
|
+
id?: string;
|
|
2622
2974
|
authorName: string;
|
|
2623
2975
|
originalContent: string;
|
|
2624
2976
|
timestamp: string;
|
|
@@ -2679,7 +3031,16 @@ declare class DsMobilePostDetailModalComponent implements AfterViewInit, OnDestr
|
|
|
2679
3031
|
/**
|
|
2680
3032
|
* Handle edit comment
|
|
2681
3033
|
*/
|
|
2682
|
-
handleEditComment(
|
|
3034
|
+
handleEditComment(comment: CommentData): void;
|
|
3035
|
+
/**
|
|
3036
|
+
* Handle comment like/unlike toggle
|
|
3037
|
+
* @param comment The comment being liked/unliked
|
|
3038
|
+
* @param ev Event data with active state and new count
|
|
3039
|
+
*/
|
|
3040
|
+
handleCommentLikeToggle(comment: CommentData, ev: {
|
|
3041
|
+
active: boolean;
|
|
3042
|
+
count: number;
|
|
3043
|
+
}): void;
|
|
2683
3044
|
/**
|
|
2684
3045
|
* Close the modal
|
|
2685
3046
|
*/
|
|
@@ -2697,7 +3058,7 @@ declare class DsMobilePostDetailModalComponent implements AfterViewInit, OnDestr
|
|
|
2697
3058
|
*/
|
|
2698
3059
|
handleCommentLongPress(authorName: string, content: string, isOwnComment: boolean): Promise<void>;
|
|
2699
3060
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobilePostDetailModalComponent, never>;
|
|
2700
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobilePostDetailModalComponent, "ds-mobile-post-detail-modal", never, { "postData": { "alias": "postData"; "required": false; }; "currentUserName": { "alias": "currentUserName"; "required": false; }; "currentUserInitialsInput": { "alias": "currentUserInitialsInput"; "required": false; }; "onSubmitComment": { "alias": "onSubmitComment"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "error": { "alias": "error"; "required": false; }; }, {}, never, never, true, never>;
|
|
3061
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobilePostDetailModalComponent, "ds-mobile-post-detail-modal", never, { "postData": { "alias": "postData"; "required": false; }; "currentUserName": { "alias": "currentUserName"; "required": false; }; "currentUserInitialsInput": { "alias": "currentUserInitialsInput"; "required": false; }; "onSubmitComment": { "alias": "onSubmitComment"; "required": false; }; "onToggleCommentLike": { "alias": "onToggleCommentLike"; "required": false; }; "onEditComment": { "alias": "onEditComment"; "required": false; }; "onDeleteComment": { "alias": "onDeleteComment"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "error": { "alias": "error"; "required": false; }; }, {}, never, never, true, never>;
|
|
2701
3062
|
}
|
|
2702
3063
|
|
|
2703
3064
|
/**
|
|
@@ -2760,6 +3121,17 @@ declare class DsMobilePostDetailModalService {
|
|
|
2760
3121
|
postId: string;
|
|
2761
3122
|
text: string;
|
|
2762
3123
|
}) => void;
|
|
3124
|
+
onToggleCommentLike?: (payload: {
|
|
3125
|
+
commentId: string;
|
|
3126
|
+
active: boolean;
|
|
3127
|
+
}) => void;
|
|
3128
|
+
onEditComment?: (payload: {
|
|
3129
|
+
commentId: string;
|
|
3130
|
+
newText: string;
|
|
3131
|
+
}) => void;
|
|
3132
|
+
onDeleteComment?: (payload: {
|
|
3133
|
+
commentId: string;
|
|
3134
|
+
}) => void;
|
|
2763
3135
|
currentUserName?: string;
|
|
2764
3136
|
currentUserInitials?: string;
|
|
2765
3137
|
}): Promise<void>;
|
|
@@ -2780,6 +3152,243 @@ declare class DsMobilePostDetailModalService {
|
|
|
2780
3152
|
static ɵprov: _angular_core.ɵɵInjectableDeclaration<DsMobilePostDetailModalService>;
|
|
2781
3153
|
}
|
|
2782
3154
|
|
|
3155
|
+
/**
|
|
3156
|
+
* Chat message data interface
|
|
3157
|
+
*/
|
|
3158
|
+
interface ChatMessage {
|
|
3159
|
+
id: string;
|
|
3160
|
+
content: string;
|
|
3161
|
+
senderId: string;
|
|
3162
|
+
senderName: string;
|
|
3163
|
+
senderRole?: string;
|
|
3164
|
+
timestamp: string;
|
|
3165
|
+
avatarInitials?: string;
|
|
3166
|
+
avatarType?: 'initials' | 'photo' | 'icon';
|
|
3167
|
+
avatarSrc?: string;
|
|
3168
|
+
isOwnMessage: boolean;
|
|
3169
|
+
attachments?: ChatAttachment[];
|
|
3170
|
+
}
|
|
3171
|
+
/**
|
|
3172
|
+
* Chat participant interface
|
|
3173
|
+
*/
|
|
3174
|
+
interface ChatParticipant {
|
|
3175
|
+
id: string;
|
|
3176
|
+
name: string;
|
|
3177
|
+
role?: string;
|
|
3178
|
+
avatarInitials?: string;
|
|
3179
|
+
avatarType?: 'initials' | 'photo' | 'icon';
|
|
3180
|
+
avatarSrc?: string;
|
|
3181
|
+
}
|
|
3182
|
+
/**
|
|
3183
|
+
* Chat modal data interface
|
|
3184
|
+
*
|
|
3185
|
+
* Represents the data needed to display a chat conversation.
|
|
3186
|
+
*
|
|
3187
|
+
* @example
|
|
3188
|
+
* ```typescript
|
|
3189
|
+
* const chatData: ChatModalData = {
|
|
3190
|
+
* participant: {
|
|
3191
|
+
* id: '123',
|
|
3192
|
+
* name: 'Ricki Meihlen',
|
|
3193
|
+
* role: 'Inquiry assignee',
|
|
3194
|
+
* avatarInitials: 'RM'
|
|
3195
|
+
* },
|
|
3196
|
+
* messages: [
|
|
3197
|
+
* {
|
|
3198
|
+
* id: '1',
|
|
3199
|
+
* content: 'We have received your case...',
|
|
3200
|
+
* senderId: '123',
|
|
3201
|
+
* senderName: 'Ricki Meihlen',
|
|
3202
|
+
* timestamp: '12:34',
|
|
3203
|
+
* isOwnMessage: false,
|
|
3204
|
+
* avatarInitials: 'RM'
|
|
3205
|
+
* }
|
|
3206
|
+
* ],
|
|
3207
|
+
* currentUserId: '456'
|
|
3208
|
+
* };
|
|
3209
|
+
* ```
|
|
3210
|
+
*/
|
|
3211
|
+
interface ChatModalData {
|
|
3212
|
+
/** The other participant in the conversation */
|
|
3213
|
+
participant: ChatParticipant;
|
|
3214
|
+
/** Array of messages in the conversation */
|
|
3215
|
+
messages: ChatMessage[];
|
|
3216
|
+
/** Current user's ID */
|
|
3217
|
+
currentUserId: string;
|
|
3218
|
+
/** Current user's avatar initials */
|
|
3219
|
+
currentUserInitials?: string;
|
|
3220
|
+
/** Current user's avatar type */
|
|
3221
|
+
currentUserAvatarType?: 'initials' | 'photo' | 'icon';
|
|
3222
|
+
/** Current user's avatar source */
|
|
3223
|
+
currentUserAvatarSrc?: string;
|
|
3224
|
+
/** Auto-focus input when modal opens */
|
|
3225
|
+
autoFocus?: boolean;
|
|
3226
|
+
}
|
|
3227
|
+
/**
|
|
3228
|
+
* DsMobileChatModalComponent
|
|
3229
|
+
*
|
|
3230
|
+
* Modal component for displaying and managing chat conversations.
|
|
3231
|
+
* Follows the same pattern as post-detail-modal for consistent behavior.
|
|
3232
|
+
*
|
|
3233
|
+
* Features:
|
|
3234
|
+
* - Header with participant info and close button
|
|
3235
|
+
* - Scrollable message thread
|
|
3236
|
+
* - Fixed message composer at bottom
|
|
3237
|
+
* - Keyboard handling
|
|
3238
|
+
* - Safe area support
|
|
3239
|
+
*
|
|
3240
|
+
* This component is typically not used directly - use DsMobileChatModalService instead.
|
|
3241
|
+
*
|
|
3242
|
+
* @example
|
|
3243
|
+
* ```typescript
|
|
3244
|
+
* // Don't instantiate directly - use the service:
|
|
3245
|
+
* constructor(private chatModal: DsMobileChatModalService) {}
|
|
3246
|
+
*
|
|
3247
|
+
* openChat() {
|
|
3248
|
+
* this.chatModal.open({
|
|
3249
|
+
* participant: { id: '123', name: 'Ricki Meihlen' },
|
|
3250
|
+
* messages: [...],
|
|
3251
|
+
* currentUserId: '456'
|
|
3252
|
+
* });
|
|
3253
|
+
* }
|
|
3254
|
+
* ```
|
|
3255
|
+
*/
|
|
3256
|
+
declare class DsMobileChatModalComponent implements OnInit, AfterViewInit, OnDestroy {
|
|
3257
|
+
private modalController;
|
|
3258
|
+
chatData: ChatModalData;
|
|
3259
|
+
/**
|
|
3260
|
+
* Loading state - when true, shows loading indicator
|
|
3261
|
+
*/
|
|
3262
|
+
loading: boolean;
|
|
3263
|
+
/**
|
|
3264
|
+
* Error state - when set, shows error message
|
|
3265
|
+
*/
|
|
3266
|
+
error?: string;
|
|
3267
|
+
participant: _angular_core.WritableSignal<ChatParticipant>;
|
|
3268
|
+
messages: _angular_core.WritableSignal<ChatMessage[]>;
|
|
3269
|
+
currentUserInitials: _angular_core.WritableSignal<string>;
|
|
3270
|
+
currentUserAvatarType: _angular_core.WritableSignal<"initials" | "photo" | "icon">;
|
|
3271
|
+
currentUserAvatarSrc: _angular_core.WritableSignal<string>;
|
|
3272
|
+
autoFocus: _angular_core.WritableSignal<boolean>;
|
|
3273
|
+
constructor(modalController: ModalController);
|
|
3274
|
+
ngOnInit(): void;
|
|
3275
|
+
ngAfterViewInit(): void;
|
|
3276
|
+
ngOnDestroy(): void;
|
|
3277
|
+
/**
|
|
3278
|
+
* Scroll to bottom of messages
|
|
3279
|
+
*/
|
|
3280
|
+
private scrollToBottom;
|
|
3281
|
+
/**
|
|
3282
|
+
* Close the modal
|
|
3283
|
+
*/
|
|
3284
|
+
close(): void;
|
|
3285
|
+
/**
|
|
3286
|
+
* Handle message sent from composer
|
|
3287
|
+
*/
|
|
3288
|
+
handleMessageSent(event: {
|
|
3289
|
+
content: string;
|
|
3290
|
+
isReply?: boolean;
|
|
3291
|
+
replyTo?: string;
|
|
3292
|
+
isEdit?: boolean;
|
|
3293
|
+
}): void;
|
|
3294
|
+
/**
|
|
3295
|
+
* Handle attachment click
|
|
3296
|
+
*/
|
|
3297
|
+
handleAttachmentClick(attachment: ChatAttachment): void;
|
|
3298
|
+
/**
|
|
3299
|
+
* Handle message long press
|
|
3300
|
+
*/
|
|
3301
|
+
handleMessageLongPress(message: ChatMessage): void;
|
|
3302
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileChatModalComponent, never>;
|
|
3303
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileChatModalComponent, "ds-mobile-chat-modal", never, { "chatData": { "alias": "chatData"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "error": { "alias": "error"; "required": false; }; }, {}, never, never, true, never>;
|
|
3304
|
+
}
|
|
3305
|
+
|
|
3306
|
+
/**
|
|
3307
|
+
* DsMobileChatModalService
|
|
3308
|
+
*
|
|
3309
|
+
* Service for displaying chat conversations in a full-screen modal.
|
|
3310
|
+
* Built on Ionic's modal system with native gestures and animations.
|
|
3311
|
+
* Follows the same pattern as DsMobilePostDetailModalService for consistent behavior.
|
|
3312
|
+
*
|
|
3313
|
+
* Features:
|
|
3314
|
+
* - Full conversation display
|
|
3315
|
+
* - Message thread with bubbles
|
|
3316
|
+
* - Message composer
|
|
3317
|
+
* - Native modal animations
|
|
3318
|
+
* - Safe area support
|
|
3319
|
+
* - Keyboard handling
|
|
3320
|
+
*
|
|
3321
|
+
* @example
|
|
3322
|
+
* ```typescript
|
|
3323
|
+
* constructor(private chatModal: DsMobileChatModalService) {}
|
|
3324
|
+
*
|
|
3325
|
+
* async openChat() {
|
|
3326
|
+
* await this.chatModal.open({
|
|
3327
|
+
* participant: {
|
|
3328
|
+
* id: '123',
|
|
3329
|
+
* name: 'Ricki Meihlen',
|
|
3330
|
+
* role: 'Inquiry assignee',
|
|
3331
|
+
* avatarInitials: 'RM'
|
|
3332
|
+
* },
|
|
3333
|
+
* messages: [
|
|
3334
|
+
* {
|
|
3335
|
+
* id: '1',
|
|
3336
|
+
* content: 'We have received your case...',
|
|
3337
|
+
* senderId: '123',
|
|
3338
|
+
* senderName: 'Ricki Meihlen',
|
|
3339
|
+
* timestamp: '12:34',
|
|
3340
|
+
* isOwnMessage: false,
|
|
3341
|
+
* avatarInitials: 'RM'
|
|
3342
|
+
* },
|
|
3343
|
+
* {
|
|
3344
|
+
* id: '2',
|
|
3345
|
+
* content: 'Thank you!',
|
|
3346
|
+
* senderId: '456',
|
|
3347
|
+
* senderName: 'You',
|
|
3348
|
+
* timestamp: '12:35',
|
|
3349
|
+
* isOwnMessage: true,
|
|
3350
|
+
* avatarInitials: 'JD',
|
|
3351
|
+
* readStatus: true
|
|
3352
|
+
* }
|
|
3353
|
+
* ],
|
|
3354
|
+
* currentUserId: '456',
|
|
3355
|
+
* currentUserInitials: 'JD',
|
|
3356
|
+
* autoFocus: true
|
|
3357
|
+
* });
|
|
3358
|
+
* }
|
|
3359
|
+
* ```
|
|
3360
|
+
*/
|
|
3361
|
+
declare class DsMobileChatModalService {
|
|
3362
|
+
private modalController;
|
|
3363
|
+
constructor(modalController: ModalController);
|
|
3364
|
+
/**
|
|
3365
|
+
* Open the chat modal
|
|
3366
|
+
*
|
|
3367
|
+
* @param chatData Chat data to display
|
|
3368
|
+
* @param options Optional loading and error states
|
|
3369
|
+
* @returns Promise that resolves when the modal is presented
|
|
3370
|
+
*/
|
|
3371
|
+
open(chatData: ChatModalData, options?: {
|
|
3372
|
+
loading?: boolean;
|
|
3373
|
+
error?: string;
|
|
3374
|
+
}): Promise<void>;
|
|
3375
|
+
/**
|
|
3376
|
+
* Close the currently open chat modal
|
|
3377
|
+
*
|
|
3378
|
+
* @param data Optional data to pass back when dismissing
|
|
3379
|
+
* @returns Promise that resolves when the modal is dismissed
|
|
3380
|
+
*/
|
|
3381
|
+
close(data?: any): Promise<boolean>;
|
|
3382
|
+
/**
|
|
3383
|
+
* Get the top-most modal if one exists
|
|
3384
|
+
*
|
|
3385
|
+
* @returns Promise that resolves to the modal element or undefined
|
|
3386
|
+
*/
|
|
3387
|
+
getTop(): Promise<HTMLIonModalElement | undefined>;
|
|
3388
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileChatModalService, never>;
|
|
3389
|
+
static ɵprov: _angular_core.ɵɵInjectableDeclaration<DsMobileChatModalService>;
|
|
3390
|
+
}
|
|
3391
|
+
|
|
2783
3392
|
/**
|
|
2784
3393
|
* Handbook detail data interface
|
|
2785
3394
|
*
|
|
@@ -3197,7 +3806,7 @@ declare class DsMobileHandbookFolderMiniComponent {
|
|
|
3197
3806
|
* ```
|
|
3198
3807
|
*/
|
|
3199
3808
|
declare class DsTextInputComponent implements ControlValueAccessor {
|
|
3200
|
-
type: _angular_core.InputSignal<"search" | "
|
|
3809
|
+
type: _angular_core.InputSignal<"search" | "text" | "url" | "email" | "tel" | "password">;
|
|
3201
3810
|
placeholder: _angular_core.InputSignal<string>;
|
|
3202
3811
|
disabled: _angular_core.InputSignal<boolean>;
|
|
3203
3812
|
readonly: _angular_core.InputSignal<boolean>;
|
|
@@ -3205,7 +3814,7 @@ declare class DsTextInputComponent implements ControlValueAccessor {
|
|
|
3205
3814
|
hasError: _angular_core.InputSignal<boolean>;
|
|
3206
3815
|
errorMessage: _angular_core.InputSignal<string>;
|
|
3207
3816
|
autocomplete: _angular_core.InputSignal<string>;
|
|
3208
|
-
inputmode: _angular_core.InputSignal<"search" | "
|
|
3817
|
+
inputmode: _angular_core.InputSignal<"search" | "text" | "numeric" | "url" | "email" | "tel" | undefined>;
|
|
3209
3818
|
autoClearError: _angular_core.InputSignal<boolean>;
|
|
3210
3819
|
validator: _angular_core.InputSignal<((value: string) => boolean) | null>;
|
|
3211
3820
|
valueChange: _angular_core.OutputEmitterRef<string>;
|
|
@@ -3241,7 +3850,7 @@ declare class UserService {
|
|
|
3241
3850
|
private _avatarSrc;
|
|
3242
3851
|
private _profileMenuItems;
|
|
3243
3852
|
readonly avatarInitials: _angular_core.Signal<string>;
|
|
3244
|
-
readonly avatarType: _angular_core.Signal<"
|
|
3853
|
+
readonly avatarType: _angular_core.Signal<"initials" | "photo" | "icon">;
|
|
3245
3854
|
readonly avatarSrc: _angular_core.Signal<string>;
|
|
3246
3855
|
readonly profileMenuItems: _angular_core.Signal<ActionGroup[] | undefined>;
|
|
3247
3856
|
/**
|
|
@@ -3373,6 +3982,8 @@ declare class MobileInquiryDetailPageComponent extends MobilePageBase implements
|
|
|
3373
3982
|
userService: UserService;
|
|
3374
3983
|
private navCtrl;
|
|
3375
3984
|
private elementRef;
|
|
3985
|
+
private lightbox;
|
|
3986
|
+
private chatModal;
|
|
3376
3987
|
ionContent?: IonContent;
|
|
3377
3988
|
private platform;
|
|
3378
3989
|
isNativePlatform: _angular_core.Signal<boolean>;
|
|
@@ -3382,13 +3993,15 @@ declare class MobileInquiryDetailPageComponent extends MobilePageBase implements
|
|
|
3382
3993
|
activities: ActivityItem[];
|
|
3383
3994
|
messageThreads: MessageThread[];
|
|
3384
3995
|
unreadMessagesCount: _angular_core.Signal<number>;
|
|
3385
|
-
|
|
3996
|
+
photos: LightboxImage[];
|
|
3997
|
+
constructor(userService: UserService, navCtrl: NavController, elementRef: ElementRef, lightbox: DsMobileLightboxService, chatModal: DsMobileChatModalService);
|
|
3386
3998
|
ngAfterViewInit(): void;
|
|
3387
3999
|
setActiveTab(tabId: string): void;
|
|
3388
4000
|
goBack(): void;
|
|
3389
4001
|
handleScroll(event: any): void;
|
|
3390
4002
|
handleRefresh(event: any): void;
|
|
3391
|
-
openMessage(messageId: string): void
|
|
4003
|
+
openMessage(messageId: string): Promise<void>;
|
|
4004
|
+
openPhotoLightbox(index: number): Promise<void>;
|
|
3392
4005
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MobileInquiryDetailPageComponent, never>;
|
|
3393
4006
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<MobileInquiryDetailPageComponent, "app-mobile-inquiry-detail-page", never, {}, {}, never, never, true, never>;
|
|
3394
4007
|
}
|
|
@@ -3592,6 +4205,7 @@ declare class WhitelabelDemoPage implements OnInit {
|
|
|
3592
4205
|
applyCejTheme(): void;
|
|
3593
4206
|
applyPkaTheme(): void;
|
|
3594
4207
|
applyClaveTheme(): void;
|
|
4208
|
+
applyFreedomTheme(): void;
|
|
3595
4209
|
applyCustomColors(): void;
|
|
3596
4210
|
private updateCustomColorInputs;
|
|
3597
4211
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<WhitelabelDemoPage, never>;
|
|
@@ -3617,5 +4231,5 @@ declare const customPageTransition: (_: HTMLElement, opts: any) => Animation;
|
|
|
3617
4231
|
*/
|
|
3618
4232
|
declare const customBackTransition: (_: HTMLElement, opts: any) => Animation;
|
|
3619
4233
|
|
|
3620
|
-
export { ActionCommentComponent, ActionLikeComponent, ContentRowComponent, DsMobileActionsBottomSheetComponent, DsMobileBottomSheetService, DsMobileActionsBottomSheetComponent as DsMobileCommentActionsBottomSheetComponent, DsMobileCommentComponent, DsMobileContactListItemComponent, DsMobileContentComponent, DsMobileContentSectionComponent, DsMobileHandbookDetailModalComponent, DsMobileHandbookDetailModalService, DsMobileHandbookFolderComponent, DsMobileHandbookFolderMiniComponent, DsMobileHeaderContentComponent, DsMobileHeaderContentTileComponent, DsMobileInlinePhotoComponent, DsMobileInlineTabsComponent, DsMobileInteractiveListItemInquiryComponent, DsMobileInteractiveListItemMessageComponent, DsMobileInteractiveListItemPostComponent, DsMobileLightboxImageComponent as DsMobileLightboxComponent, DsMobileLightboxFooterComponent, DsMobileLightboxHeaderComponent, DsMobileLightboxImageComponent, DsMobileLightboxPdfComponent, DsMobileLightboxService, DsMobileListItemComponent, DsMobileListItemStaticComponent, DsMobileLongPressDirective, DsMobileModalService, DsMobilePageDetailsComponent, DsMobilePageMainComponent, DsMobileActionsBottomSheetComponent as DsMobilePostActionsBottomSheetComponent, DsMobilePostComposerComponent, DsMobilePostCreateBottomSheetComponent, DsMobilePostDetailModalComponent, DsMobilePostDetailModalService, DsMobileTabBarComponent, DsMobileTabsComponent, DsTextInputComponent, MobileCommunityPageComponent, MobileHandbookPageComponent, MobileHomePageComponent, MobileInquiriesPageComponent, MobileInquiryDetailPageComponent, MobilePageBase, MobilePostDetailPageComponent, MobileTabsExampleComponent, PostActionsComponent, PostAttachmentsComponent, PostContentComponent, PostCreatePageComponent, PostMediaComponent, PostPdfAttachmentComponent, PostTextComponent, SectionHeaderComponent, TileContentComponent, TileIconComponent, TileLabelComponent, TileValueComponent, UserService, WhitelabelDemoPage, WhitelabelService, customBackTransition, customPageTransition };
|
|
3621
|
-
export type { ActionGroup, ActionItem, ActionResult, AttachmentItem, BottomSheetOptions, ActionResult as CommentActionResult, CommentData, ContactItem, ContentWidth, HandbookDetailData, HandbookItem, InlineTabItem, LightboxAuthor, LightboxImage, LightboxImageOptions, LightboxMediaFile, LightboxMediaType, LightboxOptions, LightboxPdf, LightboxPdfOptions, ModalOptions, ActionResult as PostActionResult, PostDetailData, TabConfig, WhitelabelConfig };
|
|
4234
|
+
export { ActionCommentComponent, ActionLikeComponent, ContentRowComponent, DsMobileActionsBottomSheetComponent, DsMobileBottomSheetService, DsMobileChatModalComponent, DsMobileChatModalService, DsMobileActionsBottomSheetComponent as DsMobileCommentActionsBottomSheetComponent, DsMobileCommentComponent, DsMobileContactListItemComponent, DsMobileContentComponent, DsMobileContentSectionComponent, DsMobileHandbookDetailModalComponent, DsMobileHandbookDetailModalService, DsMobileHandbookFolderComponent, DsMobileHandbookFolderMiniComponent, DsMobileHeaderContentComponent, DsMobileHeaderContentTileComponent, DsMobileInlinePhotoComponent, DsMobileInlineTabsComponent, DsMobileInteractiveListItemInquiryComponent, DsMobileInteractiveListItemMessageComponent, DsMobileInteractiveListItemPostComponent, DsMobileLightboxImageComponent as DsMobileLightboxComponent, DsMobileLightboxFooterComponent, DsMobileLightboxHeaderComponent, DsMobileLightboxImageComponent, DsMobileLightboxPdfComponent, DsMobileLightboxService, DsMobileListItemComponent, DsMobileListItemStaticComponent, DsMobileLongPressDirective, DsMobileMessageBubbleComponent, DsMobileMessageComposerComponent, DsMobileModalService, DsMobilePageDetailsComponent, DsMobilePageMainComponent, DsMobileActionsBottomSheetComponent as DsMobilePostActionsBottomSheetComponent, DsMobilePostComposerComponent, DsMobilePostCreateBottomSheetComponent, DsMobilePostDetailModalComponent, DsMobilePostDetailModalService, DsMobileTabBarComponent, DsMobileTabsComponent, DsTextInputComponent, MobileCommunityPageComponent, MobileHandbookPageComponent, MobileHomePageComponent, MobileInquiriesPageComponent, MobileInquiryDetailPageComponent, MobilePageBase, MobilePostDetailPageComponent, MobileTabsExampleComponent, PostActionsComponent, PostAttachmentsComponent, PostContentComponent, PostCreatePageComponent, PostMediaComponent, PostPdfAttachmentComponent, PostTextComponent, SectionHeaderComponent, TileContentComponent, TileIconComponent, TileLabelComponent, TileValueComponent, UserService, WhitelabelDemoPage, WhitelabelService, customBackTransition, customPageTransition };
|
|
4235
|
+
export type { ActionGroup, ActionItem, ActionResult, AttachmentItem, BottomSheetOptions, ChatAttachment, ChatMessage, ChatModalData, ChatParticipant, ActionResult as CommentActionResult, CommentData, ContactItem, ContentWidth, HandbookDetailData, HandbookItem, InlineTabItem, LightboxAuthor, LightboxImage, LightboxImageOptions, LightboxMediaFile, LightboxMediaType, LightboxOptions, LightboxPdf, LightboxPdfOptions, ModalOptions, ActionResult as PostActionResult, PostDetailData, TabConfig, WhitelabelConfig };
|