@propbinder/mobile-design 0.2.7 → 0.2.9

package/index.d.ts

@@ -1237,7 +1237,7 @@ declare class DsMobileDropdownComponent {
      * Computed offset Y for Ionic Popover
      * Uses CSS variable for precise control
      */
-    offsetY: _angular_core.Signal<"-4px" | "4px">;
+    offsetY: _angular_core.Signal<"4px" | "-4px">;
     /**
      * Computed offset X for Ionic Popover
      * Negative value to shift left by trigger position + add 20px left margin
@@ -3930,6 +3930,261 @@ declare class DsMobilePostDetailModalService extends BaseModalService {
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<DsMobilePostDetailModalService>;
 }
 
+/**
+ * DsMobileCardInlineComponent
+ *
+ * A versatile, always-interactive inline card component for standalone or small-group usage.
+ * Designed for tappable card-like elements such as file attachments, contact cards, etc.
+ * Not intended for long scrolling lists - use ds-mobile-list-item for that purpose.
+ *
+ * Features:
+ * - Always interactive/tappable (unless disabled)
+ * - Two layout variants: default (column) and compact (row)
+ * - Flexible content projection with leading/main/trailing slots
+ * - Consistent styling with rounded corners and neutral background
+ * - Built-in hover and active states
+ * - Accessibility features (role, tabindex, aria attributes)
+ *
+ * @example
+ * ```html
+ * <!-- Default variant (column layout) -->
+ * <ds-mobile-card-inline
+ *   [variant]="'default'"
+ *   (cardClick)="handleClick()">
+ *
+ *   <div content-leading>
+ *     <ds-avatar initials="JD" />
+ *   </div>
+ *
+ *   <div content-main>
+ *     <div class="title">Document Title</div>
+ *     <div class="subtitle">PDF · 1.2 MB</div>
+ *   </div>
+ *
+ *   <ds-icon content-trailing name="remixArrowRightSLine" />
+ * </ds-mobile-card-inline>
+ *
+ * <!-- Compact variant (row layout) -->
+ * <ds-mobile-card-inline
+ *   [variant]="'compact'"
+ *   (cardClick)="handleClick()">
+ *
+ *   <ds-avatar content-leading size="sm" />
+ *
+ *   <div content-main>
+ *     <span class="name">File.pdf</span>
+ *     <span class="size">245 KB</span>
+ *   </div>
+ *
+ *   <ds-icon content-trailing name="remixArrowRightSLine" />
+ * </ds-mobile-card-inline>
+ *
+ * <!-- Disabled state -->
+ * <ds-mobile-card-inline [disabled]="true">
+ *   <div content-main>Disabled card</div>
+ * </ds-mobile-card-inline>
+ * ```
+ */
+declare class DsMobileCardInlineComponent {
+    /**
+     * Display variant
+     * - 'default' - Column layout with standard padding (gap: 12px, padding: 10px 12px)
+     * - 'compact' - Row layout with reduced padding (gap: 8px, padding: 10px)
+     */
+    variant: _angular_core.InputSignal<"default" | "compact">;
+    /**
+     * Whether the card is disabled
+     * Disables all interactions and reduces opacity
+     */
+    disabled: _angular_core.InputSignal<boolean>;
+    /**
+     * Emits when the card is clicked (if not disabled)
+     */
+    cardClick: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Handle click events
+     */
+    handleClick(event: Event): void;
+    /**
+     * Handle keyboard events (Enter/Space)
+     */
+    handleKeyDown(event: KeyboardEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileCardInlineComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileCardInlineComponent, "ds-mobile-card-inline", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "cardClick": "cardClick"; }, never, ["[content-leading]", "[content-main]", "*", "[content-trailing]"], true, never>;
+}
+
+/**
+ * DsMobileCardInlineBannerComponent
+ *
+ * Specialized interactive component for displaying notification banners.
+ * Used to show unread message notifications above inquiry details.
+ *
+ * Features:
+ * - Neutral background matching file/contact cards
+ * - Avatar icon with message symbol
+ * - Title and timestamp
+ * - Unread count badge
+ * - Chevron for navigation indication
+ *
+ * @example
+ * ```html
+ * <ds-mobile-card-inline-banner
+ *   [title]="'New messages'"
+ *   [timestamp]="'2 min ago'"
+ *   [unreadCount]="3"
+ *   (bannerClick)="navigateToMessages()">
+ * </ds-mobile-card-inline-banner>
+ * ```
+ */
+declare class DsMobileCardInlineBannerComponent {
+    /**
+     * Banner title (e.g., "New messages", "Unread messages")
+     */
+    title: _angular_core.InputSignal<string>;
+    /**
+     * Timestamp text (e.g., "2 min ago", "Just now")
+     */
+    timestamp: _angular_core.InputSignal<string>;
+    /**
+     * Number of unread items (optional, shows badge if > 0)
+     */
+    unreadCount: _angular_core.InputSignal<number>;
+    /**
+     * Layout variant
+     * - 'default' - Standard padding and column layout
+     * - 'compact' - Reduced padding and row layout
+     */
+    layout: _angular_core.InputSignal<"default" | "compact">;
+    /**
+     * Emits when the banner is clicked
+     */
+    bannerClick: _angular_core.OutputEmitterRef<void>;
+    handleBannerClick(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileCardInlineBannerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileCardInlineBannerComponent, "ds-mobile-card-inline-banner", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "timestamp": { "alias": "timestamp"; "required": false; "isSignal": true; }; "unreadCount": { "alias": "unreadCount"; "required": false; "isSignal": true; }; "layout": { "alias": "layout"; "required": false; "isSignal": true; }; }, { "bannerClick": "bannerClick"; }, never, never, true, never>;
+}
+
+/**
+ * DsMobileCardInlineContactComponent
+ *
+ * Specialized interactive component for displaying contacts.
+ * Displays contact name with avatar initials and metadata (person name + phone number).
+ * Similar styling to file attachments with rounded corners and hover states.
+ *
+ * @example
+ * ```html
+ * <ds-mobile-card-inline-contact
+ *   [name]="'Mortensen & Søn ApS'"
+ *   [initials]="'M'"
+ *   [contactPerson]="'John Mortensen'"
+ *   [phoneNumber]="'+45 12 34 56 78'"
+ *   [clickable]="true"
+ *   (contactClick)="openContact()">
+ * </ds-mobile-card-inline-contact>
+ * ```
+ */
+declare class DsMobileCardInlineContactComponent {
+    /**
+     * Contact/company name
+     */
+    name: _angular_core.InputSignal<string>;
+    /**
+     * Avatar initials (usually 1-2 letters)
+     */
+    initials: _angular_core.InputSignal<string>;
+    /**
+     * Contact person name (optional)
+     */
+    contactPerson: _angular_core.InputSignal<string>;
+    /**
+     * Phone number (optional)
+     */
+    phoneNumber: _angular_core.InputSignal<string>;
+    /**
+     * Layout variant
+     * - 'default' - Standard padding and column layout
+     * - 'compact' - Reduced padding and row layout
+     */
+    layout: _angular_core.InputSignal<"default" | "compact">;
+    /**
+     * Whether the contact item is clickable
+     */
+    clickable: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether to show chevron icon
+     */
+    showChevron: _angular_core.InputSignal<boolean>;
+    /**
+     * Emits when the contact item is clicked (if clickable)
+     */
+    contactClick: _angular_core.OutputEmitterRef<void>;
+    handleContactClick(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileCardInlineContactComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileCardInlineContactComponent, "ds-mobile-card-inline-contact", never, { "name": { "alias": "name"; "required": true; "isSignal": true; }; "initials": { "alias": "initials"; "required": true; "isSignal": true; }; "contactPerson": { "alias": "contactPerson"; "required": false; "isSignal": true; }; "phoneNumber": { "alias": "phoneNumber"; "required": false; "isSignal": true; }; "layout": { "alias": "layout"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; "showChevron": { "alias": "showChevron"; "required": false; "isSignal": true; }; }, { "contactClick": "contactClick"; }, never, never, true, never>;
+}
+
+/**
+ * DsMobileCardInlineFileComponent
+ *
+ * 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-card-inline-file
+ *   [fileName]="'Document.pdf'"
+ *   [fileSize]="'1.2 MB'"
+ *   [variant]="'pdf'"
+ *   [layout]="'compact'"
+ *   (fileClick)="openFile()">
+ * </ds-mobile-card-inline-file>
+ * ```
+ */
+declare class DsMobileCardInlineFileComponent {
+    /**
+     * 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">;
+    /**
+     * Layout variant
+     * - 'default' - Standard padding and column layout
+     * - 'compact' - Reduced padding and row layout
+     */
+    layout: _angular_core.InputSignal<"default" | "compact">;
+    /**
+     * Optional URL to open when clicked
+     * If provided, clicking the card will open this URL in a new tab
+     */
+    fileUrl: _angular_core.InputSignal<string | undefined>;
+    /**
+     * 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(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileCardInlineFileComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileCardInlineFileComponent, "ds-mobile-card-inline-file", never, { "fileName": { "alias": "fileName"; "required": false; "isSignal": true; }; "fileSize": { "alias": "fileSize"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "layout": { "alias": "layout"; "required": false; "isSignal": true; }; "fileUrl": { "alias": "fileUrl"; "required": false; "isSignal": true; }; }, { "fileClick": "fileClick"; }, never, never, true, never>;
+}
+
 /**
  * Chat message data interface
  */
@@ -3983,7 +4238,7 @@ interface ChatParticipant {
  *
  * Represents the data needed to display a chat conversation.
  *
-* @example
+ * @example
  * ```typescript
  * const chatData: ChatModalData = {
  *   participant: {
@@ -5601,5 +5856,5 @@ declare const customPageTransition: (_: HTMLElement, opts: any) => Animation;
  */
 declare const customBackTransition: (_: HTMLElement, opts: any) => Animation;
 
-export { ActionCommentComponent, ActionLikeComponent, ContentRowComponent, DsAvatarWithBadgeComponent, DsMobileActionsBottomSheetComponent, DsMobileAttachmentPreviewComponent, DsMobileBottomSheetService, DsMobileBottomSheetWrapperComponent, DsMobileChatModalComponent, DsMobileChatModalService, DsMobileActionsBottomSheetComponent as DsMobileCommentActionsBottomSheetComponent, DsMobileCommentComponent, DsMobileContactListItemComponent, DsMobileContentComponent, DsMobileContentSectionComponent, DsMobileDropdownComponent, DsMobileEmptyStateComponent, DsMobileFabComponent, DsMobileHandbookDetailModalComponent, DsMobileHandbookDetailModalService, DsMobileHandbookFolderComponent, DsMobileHandbookFolderMiniComponent, DsMobileHeaderContentComponent, DsMobileHeaderContentTileComponent, DsMobileInlinePhotoComponent, DsMobileInlineTabsComponent, DsMobileInteractiveListItemInquiryComponent, DsMobileInteractiveListItemMessageComponent, DsMobileInteractiveListItemPostComponent, DsMobileLightboxImageComponent as DsMobileLightboxComponent, DsMobileLightboxFooterComponent, DsMobileLightboxHeaderComponent, DsMobileLightboxImageComponent, DsMobileLightboxPdfComponent, DsMobileLightboxService, DsMobileListItemComponent, DsMobileListItemStaticComponent, DsMobileLongPressDirective, DsMobileMessageBubbleComponent, DsMobileMessageComposerComponent, DsMobileModalBaseComponent, DsMobileModalService, DsMobileNewInquiryModalComponent, DsMobileNewInquiryModalService, DsMobilePageDetailsComponent, DsMobilePageMainComponent, DsMobileActionsBottomSheetComponent as DsMobilePostActionsBottomSheetComponent, DsMobilePostComposerComponent, DsMobilePostCreateBottomSheetComponent, DsMobilePostDetailModalComponent, DsMobilePostDetailModalService, DsMobileProfileActionsSheetComponent, 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, WhitelabelDemoPage, WhitelabelService, customBackTransition, customPageTransition };
+export { ActionCommentComponent, ActionLikeComponent, ContentRowComponent, DsAvatarWithBadgeComponent, DsMobileActionsBottomSheetComponent, DsMobileAttachmentPreviewComponent, DsMobileBottomSheetService, DsMobileBottomSheetWrapperComponent, DsMobileCardInlineBannerComponent, DsMobileCardInlineComponent, DsMobileCardInlineContactComponent, DsMobileCardInlineFileComponent, DsMobileChatModalComponent, DsMobileChatModalService, DsMobileActionsBottomSheetComponent as DsMobileCommentActionsBottomSheetComponent, DsMobileCommentComponent, DsMobileContactListItemComponent, DsMobileContentComponent, DsMobileContentSectionComponent, DsMobileDropdownComponent, DsMobileEmptyStateComponent, DsMobileFabComponent, DsMobileHandbookDetailModalComponent, DsMobileHandbookDetailModalService, DsMobileHandbookFolderComponent, DsMobileHandbookFolderMiniComponent, DsMobileHeaderContentComponent, DsMobileHeaderContentTileComponent, DsMobileInlinePhotoComponent, DsMobileInlineTabsComponent, DsMobileInteractiveListItemInquiryComponent, DsMobileInteractiveListItemMessageComponent, DsMobileInteractiveListItemPostComponent, DsMobileLightboxImageComponent as DsMobileLightboxComponent, DsMobileLightboxFooterComponent, DsMobileLightboxHeaderComponent, DsMobileLightboxImageComponent, DsMobileLightboxPdfComponent, DsMobileLightboxService, DsMobileListItemComponent, DsMobileListItemStaticComponent, DsMobileLongPressDirective, DsMobileMessageBubbleComponent, DsMobileMessageComposerComponent, DsMobileModalBaseComponent, DsMobileModalService, DsMobileNewInquiryModalComponent, DsMobileNewInquiryModalService, DsMobilePageDetailsComponent, DsMobilePageMainComponent, DsMobileActionsBottomSheetComponent as DsMobilePostActionsBottomSheetComponent, DsMobilePostComposerComponent, DsMobilePostCreateBottomSheetComponent, DsMobilePostDetailModalComponent, DsMobilePostDetailModalService, DsMobileProfileActionsSheetComponent, 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, WhitelabelDemoPage, WhitelabelService, customBackTransition, customPageTransition };
 export type { ActionGroup, ActionItem, ActionResult, 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, ModalOptions, NewInquiryData, NewInquiryModalOptions, Post, ActionResult as PostActionResult, PostDetailData, TabConfig, WhitelabelConfig };

package/package.json

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