@propbinder/mobile-design 0.2.15 → 0.2.16

package/index.d.ts

@@ -3014,6 +3014,132 @@ declare class DsMobileTabsComponent implements OnInit {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileTabsComponent, "ds-mobile-tabs", never, { "tabs": { "alias": "tabs"; "required": false; }; "avatarType": { "alias": "avatarType"; "required": false; }; "avatarInitials": { "alias": "avatarInitials"; "required": false; }; "avatarSrc": { "alias": "avatarSrc"; "required": false; }; "avatarIconName": { "alias": "avatarIconName"; "required": false; }; }, { "avatarClick": "avatarClick"; }, never, never, true, never>;
 }
 
+/**
+ * DsMobileSwiperComponent
+ *
+ * A reusable swiper/carousel component with configurable child width and spacing.
+ *
+ * Features:
+ * - First slide is left-aligned
+ * - Middle slides are centered when active
+ * - Last slide is right-aligned
+ * - Configurable slide width and gap
+ * - Content projection via ng-content
+ *
+ * Usage:
+ * ```html
+ * <ds-mobile-swiper [slideWidth]="'75vw'" [gap]="16">
+ *   <div class="swiper-slide">Slide 1</div>
+ *   <div class="swiper-slide">Slide 2</div>
+ *   <div class="swiper-slide">Slide 3</div>
+ * </ds-mobile-swiper>
+ * ```
+ */
+declare class DsMobileSwiperComponent implements AfterViewInit, OnDestroy {
+    private elementRef;
+    /**
+     * Width of each slide (e.g., '75vw', '300px', '80%')
+     */
+    slideWidth: _angular_core.InputSignal<string>;
+    /**
+     * Gap between slides in pixels
+     */
+    gap: _angular_core.InputSignal<number>;
+    /**
+     * Enable pagination dots
+     */
+    pagination: _angular_core.InputSignal<boolean>;
+    /**
+     * Enable auto height - container adapts to active slide's height
+     */
+    autoHeight: _angular_core.InputSignal<boolean>;
+    /**
+     * Enable progressive opacity based on slide position
+     * Slides fade in/out smoothly as they move toward/away from center
+     */
+    progressiveOpacity: _angular_core.InputSignal<boolean>;
+    /**
+     * Enable progressive scale based on slide position
+     * Slides scale down smoothly as they move away from center
+     */
+    progressiveScale: _angular_core.InputSignal<boolean>;
+    swiperContainer: ElementRef;
+    private swiperInstance;
+    constructor(elementRef: ElementRef);
+    ngAfterViewInit(): void;
+    private initializeSwiper;
+    /**
+     * Navigate to previous slide
+     */
+    slidePrev(): void;
+    /**
+     * Navigate to next slide
+     */
+    slideNext(): void;
+    /**
+     * Check if at the beginning
+     */
+    isBeginning(): boolean;
+    /**
+     * Check if at the end
+     */
+    isEnd(): boolean;
+    ngOnDestroy(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileSwiperComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileSwiperComponent, "ds-mobile-swiper", never, { "slideWidth": { "alias": "slideWidth"; "required": false; "isSignal": true; }; "gap": { "alias": "gap"; "required": false; "isSignal": true; }; "pagination": { "alias": "pagination"; "required": false; "isSignal": true; }; "autoHeight": { "alias": "autoHeight"; "required": false; "isSignal": true; }; "progressiveOpacity": { "alias": "progressiveOpacity"; "required": false; "isSignal": true; }; "progressiveScale": { "alias": "progressiveScale"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * DsMobileSystemMessageBannerComponent
+ *
+ * Full-width centered banner component for displaying system messages in chat conversations.
+ * Uses the same text styling as message bubbles for consistency.
+ *
+ * Features:
+ * - Full-width centered layout
+ * - Subtle background with theming support
+ * - Same typography as message bubbles
+ * - Optional icon support
+ *
+ * Common use cases:
+ * - Inquiry status updates ("Your inquiry has been assigned to...")
+ * - System notifications ("This inquiry is marked as resolved")
+ * - Auto-replies ("We aim to respond within 24 hours...")
+ * - Time/date separators
+ *
+ * @example
+ * ```html
+ * <!-- Simple system message -->
+ * <ds-mobile-system-message-banner
+ *   [message]="'Ricki Meihlen har overtaget din henvendelse og vil kontakte dig snart.'">
+ * </ds-mobile-system-message-banner>
+ *
+ * <!-- With icon -->
+ * <ds-mobile-system-message-banner
+ *   [message]="'Vi bestræber os på at svare inden for 24 timer på hverdage.'"
+ *   [iconName]="'remixInformationLine'">
+ * </ds-mobile-system-message-banner>
+ * ```
+ */
+declare class DsMobileSystemMessageBannerComponent {
+    /**
+     * System message text to display
+     */
+    message: _angular_core.InputSignal<string>;
+    /**
+     * Optional icon name (currently using inline SVG for info icon)
+     * Can be extended to support full icon library integration
+     */
+    iconName: _angular_core.InputSignal<string>;
+    /**
+     * Whether this system message appears directly after a timestamp
+     * When true, removes top padding to reduce spacing
+     */
+    afterTimestamp: _angular_core.InputSignal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileSystemMessageBannerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileSystemMessageBannerComponent, "ds-mobile-system-message-banner", never, { "message": { "alias": "message"; "required": true; "isSignal": true; }; "iconName": { "alias": "iconName"; "required": false; "isSignal": true; }; "afterTimestamp": { "alias": "afterTimestamp"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
 /**
  * Media file types supported by the lightbox
  */
@@ -5685,6 +5811,56 @@ declare class DsTextInputComponent implements ControlValueAccessor {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsTextInputComponent, "ds-text-input", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "hasError": { "alias": "hasError"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "inputmode": { "alias": "inputmode"; "required": false; "isSignal": true; }; "autoClearError": { "alias": "autoClearError"; "required": false; "isSignal": true; }; "validator": { "alias": "validator"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "blur": "blur"; "focus": "focus"; "errorCleared": "errorCleared"; }, never, never, true, never>;
 }
 
+/**
+ * DsMobileFileAttachmentComponent
+ *
+ * File attachment display for various document types.
+ * Shows file info card with icon, filename, and file size.
+ * Supports PDF and generic document formats.
+ * Emits click event to open file in viewer.
+ *
+ * @example
+ * ```html
+ * <ds-mobile-file-attachment
+ *   [fileName]="'Document.pdf'"
+ *   [fileSize]="'1.2 MB'"
+ *   [variant]="'pdf'"
+ *   (fileClick)="openFile()">
+ * </ds-mobile-file-attachment>
+ * ```
+ */
+declare class DsMobileFileAttachmentComponent {
+    /**
+     * File name
+     */
+    fileName: _angular_core.InputSignal<string>;
+    /**
+     * File size display (e.g., "1.2 MB")
+     */
+    fileSize: _angular_core.InputSignal<string>;
+    /**
+     * File type variant
+     * - 'pdf' - PDF document (red icon)
+     * - 'doc' - Generic document (blue icon)
+     */
+    variant: _angular_core.InputSignal<"pdf" | "doc">;
+    /**
+     * Emits when the file attachment is clicked
+     */
+    fileClick: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Get the appropriate icon name based on variant
+     */
+    getIconName(): string;
+    /**
+     * Get the file type label based on variant
+     */
+    getFileTypeLabel(): string;
+    handleClick(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileFileAttachmentComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileFileAttachmentComponent, "ds-mobile-file-attachment", never, { "fileName": { "alias": "fileName"; "required": false; "isSignal": true; }; "fileSize": { "alias": "fileSize"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, { "fileClick": "fileClick"; }, never, never, true, never>;
+}
+
 /**
  * DsMobileFabComponent
  *
@@ -5840,6 +6016,48 @@ declare class DsAvatarWithBadgeComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsAvatarWithBadgeComponent, "ds-avatar-with-badge", never, { "type": { "alias": "type"; "required": false; }; "size": { "alias": "size"; "required": false; }; "initials": { "alias": "initials"; "required": false; }; "src": { "alias": "src"; "required": false; }; "iconName": { "alias": "iconName"; "required": false; }; "showBadge": { "alias": "showBadge"; "required": false; }; "badgePosition": { "alias": "badgePosition"; "required": false; }; }, {}, never, never, true, never>;
 }
 
+/**
+ * DsMobileActionListItemComponent
+ *
+ * Specialized list item for action sheets and menus.
+ * Wraps ds-mobile-list-item with action-specific styling:
+ * - Vertically centered content
+ * - Interactive by default
+ * - No dividers (controlled per-item)
+ *
+ * @example
+ * ```html
+ * <ds-mobile-action-list-item
+ *   title="Edit"
+ *   [showDivider]="true"
+ *   (itemClick)="handleEdit()">
+ *   <ds-icon content-leading name="remixEditLine" size="20px" />
+ * </ds-mobile-action-list-item>
+ * ```
+ */
+declare class DsMobileActionListItemComponent {
+    /**
+     * Action title text
+     */
+    title: _angular_core.InputSignal<string>;
+    /**
+     * Whether to show divider below item
+     * @default false
+     */
+    showDivider: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether the action is disabled
+     * @default false
+     */
+    disabled: _angular_core.InputSignal<boolean>;
+    /**
+     * Emits when the action item is clicked
+     */
+    itemClick: _angular_core.OutputEmitterRef<void>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileActionListItemComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileActionListItemComponent, "ds-mobile-action-list-item", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "showDivider": { "alias": "showDivider"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; }, never, ["[action-icon]", "[content-trailing]"], true, never>;
+}
+
 type LogoVariant = 'full' | 'mark';
 type LogoSize = 'sm' | 'md' | 'lg' | 'xl';
 /**
@@ -6045,81 +6263,6 @@ declare class DsMobilePropertyBannerComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobilePropertyBannerComponent, "ds-mobile-property-banner", never, { "address": { "alias": "address"; "required": true; "isSignal": true; }; "photoUrl": { "alias": "photoUrl"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-/**
- * DsMobileSwiperComponent
- *
- * A reusable swiper/carousel component with configurable child width and spacing.
- *
- * Features:
- * - First slide is left-aligned
- * - Middle slides are centered when active
- * - Last slide is right-aligned
- * - Configurable slide width and gap
- * - Content projection via ng-content
- *
- * Usage:
- * ```html
- * <ds-mobile-swiper [slideWidth]="'75vw'" [gap]="16">
- *   <div class="swiper-slide">Slide 1</div>
- *   <div class="swiper-slide">Slide 2</div>
- *   <div class="swiper-slide">Slide 3</div>
- * </ds-mobile-swiper>
- * ```
- */
-declare class DsMobileSwiperComponent implements AfterViewInit, OnDestroy {
-    private elementRef;
-    /**
-     * Width of each slide (e.g., '75vw', '300px', '80%')
-     */
-    slideWidth: _angular_core.InputSignal<string>;
-    /**
-     * Gap between slides in pixels
-     */
-    gap: _angular_core.InputSignal<number>;
-    /**
-     * Enable pagination dots
-     */
-    pagination: _angular_core.InputSignal<boolean>;
-    /**
-     * Enable auto height - container adapts to active slide's height
-     */
-    autoHeight: _angular_core.InputSignal<boolean>;
-    /**
-     * Enable progressive opacity based on slide position
-     * Slides fade in/out smoothly as they move toward/away from center
-     */
-    progressiveOpacity: _angular_core.InputSignal<boolean>;
-    /**
-     * Enable progressive scale based on slide position
-     * Slides scale down smoothly as they move away from center
-     */
-    progressiveScale: _angular_core.InputSignal<boolean>;
-    swiperContainer: ElementRef;
-    private swiperInstance;
-    constructor(elementRef: ElementRef);
-    ngAfterViewInit(): void;
-    private initializeSwiper;
-    /**
-     * Navigate to previous slide
-     */
-    slidePrev(): void;
-    /**
-     * Navigate to next slide
-     */
-    slideNext(): void;
-    /**
-     * Check if at the beginning
-     */
-    isBeginning(): boolean;
-    /**
-     * Check if at the end
-     */
-    isEnd(): boolean;
-    ngOnDestroy(): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileSwiperComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileSwiperComponent, "ds-mobile-swiper", never, { "slideWidth": { "alias": "slideWidth"; "required": false; "isSignal": true; }; "gap": { "alias": "gap"; "required": false; "isSignal": true; }; "pagination": { "alias": "pagination"; "required": false; "isSignal": true; }; "autoHeight": { "alias": "autoHeight"; "required": false; "isSignal": true; }; "progressiveOpacity": { "alias": "progressiveOpacity"; "required": false; "isSignal": true; }; "progressiveScale": { "alias": "progressiveScale"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
-}
-
 /**
  * User service for managing current user data globally
  */
@@ -6652,5 +6795,5 @@ declare const customPageTransition: (_: HTMLElement, opts: any) => Animation;
  */
 declare const customBackTransition: (_: HTMLElement, opts: any) => Animation;
 
-export { ActionCommentComponent, ActionLikeComponent, ContentRowComponent, DsAppIconComponent, DsAvatarWithBadgeComponent, DsLogoComponent, DsMobileActionsBottomSheetComponent, DsMobileAttachmentPreviewComponent, DsMobileBottomSheetService, DsMobileBottomSheetWrapperComponent, DsMobileCardInlineBannerComponent, DsMobileCardInlineComponent, DsMobileCardInlineContactComponent, DsMobileCardInlineFileComponent, DsMobileChatModalComponent, DsMobileChatModalService, DsMobileActionsBottomSheetComponent as DsMobileCommentActionsBottomSheetComponent, DsMobileCommentComponent, DsMobileContactListItemComponent, DsMobileContentComponent, DsMobileDropdownComponent, DsMobileEmptyStateComponent, DsMobileFabComponent, DsMobileHandbookDetailModalComponent, DsMobileHandbookDetailModalService, DsMobileHandbookFolderComponent, DsMobileHandbookFolderMiniComponent, DsMobileHeaderContentComponent, DsMobileHeaderContentTileComponent, DsMobileIllustrationComponent, DsMobileInlinePhotoComponent, DsMobileInlineTabsComponent, DsMobileInteractiveListItemInquiryComponent, DsMobileInteractiveListItemMessageComponent, DsMobileInteractiveListItemPostComponent, DsMobileLightboxImageComponent as DsMobileLightboxComponent, DsMobileLightboxFooterComponent, DsMobileLightboxHeaderComponent, DsMobileLightboxImageComponent, DsMobileLightboxPdfComponent, DsMobileLightboxService, DsMobileListItemComponent, DsMobileListItemStaticComponent, DsMobileLoaderOverlayComponent, DsMobileLongPressDirective, DsMobileMessageBubbleComponent, DsMobileMessageComposerComponent, DsMobileModalBaseComponent, DsMobileModalService, DsMobileNewInquiryModalComponent, DsMobileNewInquiryModalService, DsMobileOfflineBannerComponent, DsMobilePageDetailsComponent, DsMobilePageMainComponent, DsMobileActionsBottomSheetComponent as DsMobilePostActionsBottomSheetComponent, DsMobilePostComposerComponent, DsMobilePostCreateBottomSheetComponent, DsMobilePostDetailModalComponent, DsMobilePostDetailModalService, DsMobileProfileActionsSheetComponent, DsMobilePropertyBannerComponent, DsMobileSectionComponent, DsMobileTabBarComponent, DsMobileTabsComponent, DsTextInputComponent, MobileCommunityPageComponent, MobileHandbookPageComponent, MobileHomePageComponent, MobileInquiriesPageComponent, MobileInquiryDetailPageComponent, MobileModalBase, MobilePageBase, MobilePostDetailPageComponent, MobileTabsExampleComponent, PostActionsComponent, PostAttachmentsComponent, PostContentComponent, PostCreatePageComponent, PostMediaComponent, PostPdfAttachmentComponent, PostTextComponent, SectionHeaderComponent, SignInPageComponent, TileContentComponent, TileIconComponent, TileLabelComponent, TileValueComponent, UserService, WhitelabelDemoModalComponent, WhitelabelDemoModalService, WhitelabelService, customBackTransition, customPageTransition };
+export { ActionCommentComponent, ActionLikeComponent, ContentRowComponent, DsAppIconComponent, DsAvatarWithBadgeComponent, DsLogoComponent, DsMobileActionListItemComponent, DsMobileActionsBottomSheetComponent, DsMobileAttachmentPreviewComponent, DsMobileBottomSheetService, DsMobileBottomSheetWrapperComponent, DsMobileCardInlineBannerComponent, DsMobileCardInlineComponent, DsMobileCardInlineContactComponent, DsMobileCardInlineFileComponent, DsMobileChatModalComponent, DsMobileChatModalService, DsMobileActionsBottomSheetComponent as DsMobileCommentActionsBottomSheetComponent, DsMobileCommentComponent, DsMobileContactListItemComponent, DsMobileContentComponent, DsMobileDropdownComponent, DsMobileEmptyStateComponent, DsMobileFabComponent, DsMobileFileAttachmentComponent, DsMobileHandbookDetailModalComponent, DsMobileHandbookDetailModalService, DsMobileHandbookFolderComponent, DsMobileHandbookFolderMiniComponent, DsMobileHeaderContentComponent, DsMobileHeaderContentTileComponent, DsMobileIllustrationComponent, DsMobileInlinePhotoComponent, DsMobileInlineTabsComponent, DsMobileInteractiveListItemInquiryComponent, DsMobileInteractiveListItemMessageComponent, DsMobileInteractiveListItemPostComponent, DsMobileLightboxImageComponent as DsMobileLightboxComponent, DsMobileLightboxFooterComponent, DsMobileLightboxHeaderComponent, DsMobileLightboxImageComponent, DsMobileLightboxPdfComponent, DsMobileLightboxService, DsMobileListItemComponent, DsMobileListItemStaticComponent, DsMobileLoaderOverlayComponent, DsMobileLongPressDirective, DsMobileMessageBubbleComponent, DsMobileMessageComposerComponent, DsMobileModalBaseComponent, DsMobileModalService, DsMobileNewInquiryModalComponent, DsMobileNewInquiryModalService, DsMobileOfflineBannerComponent, DsMobilePageDetailsComponent, DsMobilePageMainComponent, DsMobileActionsBottomSheetComponent as DsMobilePostActionsBottomSheetComponent, DsMobilePostComposerComponent, DsMobilePostCreateBottomSheetComponent, DsMobilePostDetailModalComponent, DsMobilePostDetailModalService, DsMobileProfileActionsSheetComponent, DsMobilePropertyBannerComponent, DsMobileSectionComponent, DsMobileSwiperComponent, DsMobileSystemMessageBannerComponent, DsMobileTabBarComponent, DsMobileTabsComponent, DsTextInputComponent, MobileCommunityPageComponent, MobileHandbookPageComponent, MobileHomePageComponent, MobileInquiriesPageComponent, MobileInquiryDetailPageComponent, MobileModalBase, MobilePageBase, MobilePostDetailPageComponent, MobileTabsExampleComponent, PostActionsComponent, PostAttachmentsComponent, PostContentComponent, PostCreatePageComponent, PostMediaComponent, PostPdfAttachmentComponent, PostTextComponent, SectionHeaderComponent, SignInPageComponent, TileContentComponent, TileIconComponent, TileLabelComponent, TileValueComponent, UserService, WhitelabelDemoModalComponent, WhitelabelDemoModalService, WhitelabelService, customBackTransition, customPageTransition };
 export type { ActionGroup, ActionItem, ActionResult, AppIconSize, AttachmentData, AttachmentFileType, AttachmentItem, AvatarSize, AvatarType, BadgePosition, BottomSheetOptions, ChatAttachment, ChatMessage, ChatModalData, ChatParticipant, Comment, ActionResult as CommentActionResult, CommentData, ContactItem, ContentWidth, DropdownAlign, DropdownPosition, DsMobileDropdownItem, HandbookDetailData, HandbookItem, InlineTabItem, InquiryPhoto, Language, LightboxAuthor, LightboxImage, LightboxImageOptions, LightboxMediaFile, LightboxMediaType, LightboxOptions, LightboxPdf, LightboxPdfOptions, LogoSize, LogoVariant, ModalOptions, NetworkStatus, NewInquiryData, NewInquiryModalOptions, Post, ActionResult as PostActionResult, PostDetailData, TabConfig, WhitelabelConfig };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@propbinder/mobile-design",
-  "version": "0.2.15",
+  "version": "0.2.16",
   "peerDependencies": {
     "@angular/common": "^20.3.0 || ^21.0.0",
     "@angular/core": "^20.3.0 || ^21.0.0"