@propbinder/mobile-design 0.2.5 → 0.2.6

package/fesm2022/propbinder-mobile-design.mjs

@@ -6998,6 +6998,534 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 type: Output
             }] } });
 
+/**
+ * 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>
+ * ```
+ */
+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 = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    /**
+     * Whether the card is disabled
+     * Disables all interactions and reduces opacity
+     */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    /**
+     * Emits when the card is clicked (if not disabled)
+     */
+    cardClick = output();
+    /**
+     * Handle click events
+     */
+    handleClick(event) {
+        if (this.disabled()) {
+            return;
+        }
+        // Don't emit click if it came from an interactive child element
+        const target = event.target;
+        const closestInteractive = target.closest('button, a, input, select, textarea, [role="button"]');
+        // Check if the interactive element is a child, not the host itself
+        if (closestInteractive && closestInteractive !== event.currentTarget) {
+            return;
+        }
+        this.cardClick.emit();
+    }
+    /**
+     * Handle keyboard events (Enter/Space)
+     */
+    handleKeyDown(event) {
+        if (this.disabled()) {
+            return;
+        }
+        event.preventDefault();
+        this.cardClick.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobileCardInlineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: DsMobileCardInlineComponent, isStandalone: true, selector: "ds-mobile-card-inline", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cardClick: "cardClick" }, host: { listeners: { "click": "handleClick($event)", "keydown.enter": "handleKeyDown($event)", "keydown.space": "handleKeyDown($event)" }, properties: { "class.disabled": "disabled()", "class.variant-compact": "variant() === \"compact\"", "class.variant-default": "variant() === \"default\"", "attr.role": "\"button\"", "attr.tabindex": "disabled() ? null : \"0\"", "attr.aria-disabled": "disabled() ? \"true\" : null" } }, ngImport: i0, template: `
+    <div class="card-inline-inner">
+      <div class="content-leading">
+        <ng-content select="[content-leading]" />
+      </div>
+      
+      <div class="content-main">
+        <ng-content select="[content-main]" />
+        <ng-content />
+      </div>
+      
+      <div class="content-trailing">
+        <ng-content select="[content-trailing]" />
+      </div>
+    </div>
+  `, isInline: true, styles: [":host{display:flex;align-items:center;background:var(--color-background-neutral-secondary, #f5f5f5);border-radius:16px;cursor:pointer;transition:all .2s ease;box-sizing:border-box}:host(.variant-default){gap:12px;padding:10px 12px}:host(.variant-compact){gap:8px;padding:10px}@media (hover: hover) and (pointer: fine){:host(:hover):not(.disabled){background:var(--color-background-neutral-secondary-hover, #ebebeb)}}:host(:active):not(.disabled){transform:scale(.98);background:var(--color-background-neutral-secondary-hover, #ebebeb)}:host(:focus-visible):not(.disabled){outline:2px solid var(--color-brand-primary, #5d5fef);outline-offset:2px}:host(.disabled){opacity:.5;pointer-events:none;cursor:not-allowed}.card-inline-inner{display:flex;align-items:center;gap:inherit;width:100%;min-width:0}.content-leading{flex-shrink:0;display:flex;align-items:center;justify-content:center}.content-main{flex:1;min-width:0;display:flex;align-items:center}:host(.variant-compact) .content-main{flex-direction:row;gap:8px}:host(.variant-default) .content-main{flex-direction:column;align-items:flex-start;gap:2px}.content-trailing{flex-shrink:0;display:flex;align-items:center}::ng-deep .item-avatar{flex-shrink:0}::ng-deep .item-content{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:2px}:host(.variant-compact) ::ng-deep .item-content{flex-direction:row;align-items:center;justify-content:flex-start;gap:8px}::ng-deep .item-name{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:600;line-height:20px;letter-spacing:-.3px;color:var(--color-text-primary, #1a1a1a);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}::ng-deep .item-meta{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;letter-spacing:-.26px;color:var(--color-text-tertiary, #737373);margin:0;display:flex;align-items:center;justify-content:flex-start;gap:4px;white-space:nowrap;flex-shrink:0}::ng-deep .item-trailing{display:flex;align-items:center;color:var(--color-text-tertiary, #a3a3a3);flex-shrink:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobileCardInlineComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-mobile-card-inline', standalone: true, imports: [CommonModule], host: {
+                        '[class.disabled]': 'disabled()',
+                        '[class.variant-compact]': 'variant() === "compact"',
+                        '[class.variant-default]': 'variant() === "default"',
+                        '[attr.role]': '"button"',
+                        '[attr.tabindex]': 'disabled() ? null : "0"',
+                        '[attr.aria-disabled]': 'disabled() ? "true" : null',
+                        '(click)': 'handleClick($event)',
+                        '(keydown.enter)': 'handleKeyDown($event)',
+                        '(keydown.space)': 'handleKeyDown($event)'
+                    }, template: `
+    <div class="card-inline-inner">
+      <div class="content-leading">
+        <ng-content select="[content-leading]" />
+      </div>
+      
+      <div class="content-main">
+        <ng-content select="[content-main]" />
+        <ng-content />
+      </div>
+      
+      <div class="content-trailing">
+        <ng-content select="[content-trailing]" />
+      </div>
+    </div>
+  `, styles: [":host{display:flex;align-items:center;background:var(--color-background-neutral-secondary, #f5f5f5);border-radius:16px;cursor:pointer;transition:all .2s ease;box-sizing:border-box}:host(.variant-default){gap:12px;padding:10px 12px}:host(.variant-compact){gap:8px;padding:10px}@media (hover: hover) and (pointer: fine){:host(:hover):not(.disabled){background:var(--color-background-neutral-secondary-hover, #ebebeb)}}:host(:active):not(.disabled){transform:scale(.98);background:var(--color-background-neutral-secondary-hover, #ebebeb)}:host(:focus-visible):not(.disabled){outline:2px solid var(--color-brand-primary, #5d5fef);outline-offset:2px}:host(.disabled){opacity:.5;pointer-events:none;cursor:not-allowed}.card-inline-inner{display:flex;align-items:center;gap:inherit;width:100%;min-width:0}.content-leading{flex-shrink:0;display:flex;align-items:center;justify-content:center}.content-main{flex:1;min-width:0;display:flex;align-items:center}:host(.variant-compact) .content-main{flex-direction:row;gap:8px}:host(.variant-default) .content-main{flex-direction:column;align-items:flex-start;gap:2px}.content-trailing{flex-shrink:0;display:flex;align-items:center}::ng-deep .item-avatar{flex-shrink:0}::ng-deep .item-content{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:2px}:host(.variant-compact) ::ng-deep .item-content{flex-direction:row;align-items:center;justify-content:flex-start;gap:8px}::ng-deep .item-name{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:600;line-height:20px;letter-spacing:-.3px;color:var(--color-text-primary, #1a1a1a);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}::ng-deep .item-meta{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;letter-spacing:-.26px;color:var(--color-text-tertiary, #737373);margin:0;display:flex;align-items:center;justify-content:flex-start;gap:4px;white-space:nowrap;flex-shrink:0}::ng-deep .item-trailing{display:flex;align-items:center;color:var(--color-text-tertiary, #a3a3a3);flex-shrink:0}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], cardClick: [{ type: i0.Output, args: ["cardClick"] }] } });
+
+/**
+ * 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>
+ * ```
+ */
+class DsMobileCardInlineBannerComponent {
+    /**
+     * Banner title (e.g., "New messages", "Unread messages")
+     */
+    title = input.required(...(ngDevMode ? [{ debugName: "title" }] : []));
+    /**
+     * Timestamp text (e.g., "2 min ago", "Just now")
+     */
+    timestamp = input('', ...(ngDevMode ? [{ debugName: "timestamp" }] : []));
+    /**
+     * Number of unread items (optional, shows badge if > 0)
+     */
+    unreadCount = input(0, ...(ngDevMode ? [{ debugName: "unreadCount" }] : []));
+    /**
+     * Layout variant
+     * - 'default' - Standard padding and column layout
+     * - 'compact' - Reduced padding and row layout
+     */
+    layout = input('default', ...(ngDevMode ? [{ debugName: "layout" }] : []));
+    /**
+     * Emits when the banner is clicked
+     */
+    bannerClick = output();
+    handleBannerClick() {
+        this.bannerClick.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobileCardInlineBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsMobileCardInlineBannerComponent, isStandalone: true, selector: "ds-mobile-card-inline-banner", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, timestamp: { classPropertyName: "timestamp", publicName: "timestamp", isSignal: true, isRequired: false, transformFunction: null }, unreadCount: { classPropertyName: "unreadCount", publicName: "unreadCount", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { bannerClick: "bannerClick" }, ngImport: i0, template: `
+    <ds-mobile-card-inline
+      [variant]="layout()"
+      (cardClick)="handleBannerClick()">
+      
+      <div content-leading class="item-avatar">
+        <ds-avatar
+          type="icon"
+          [iconName]="'remixNotificationLine'"
+          [size]="layout() === 'compact' ? 'sm' : 'md'"
+        />
+      </div>
+      
+      <div content-main class="item-content">
+        <div class="item-name">{{ title() }}</div>
+        
+        @if (timestamp()) {
+          <div class="item-meta">
+            <span>{{ timestamp() }}</span>
+          </div>
+        }
+      </div>
+      
+      <div content-trailing class="item-trailing">
+        @if (unreadCount() && unreadCount()! > 0) {
+          <span class="unread-badge">{{ unreadCount() }}</span>
+        }
+        <ds-icon name="remixArrowRightSLine" size="20px" />
+      </div>
+    </ds-mobile-card-inline>
+  `, isInline: true, styles: [".unread-badge{min-width:24px;height:16px;padding:0 6px;border-radius:10px;background:var(--color-background-neutral-tertiary, #e5e5e5);color:var(--color-text-primary, #1a1a1a);font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:600;display:flex;align-items:center;justify-content:center;line-height:1;margin-right:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }, { kind: "component", type: DsAvatarComponent, selector: "ds-avatar", inputs: ["type", "size", "initials", "src", "alt", "iconName", "iconColor"] }, { kind: "component", type: DsMobileCardInlineComponent, selector: "ds-mobile-card-inline", inputs: ["variant", "disabled"], outputs: ["cardClick"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobileCardInlineBannerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-mobile-card-inline-banner', standalone: true, imports: [CommonModule, DsIconComponent, DsAvatarComponent, DsMobileCardInlineComponent], template: `
+    <ds-mobile-card-inline
+      [variant]="layout()"
+      (cardClick)="handleBannerClick()">
+      
+      <div content-leading class="item-avatar">
+        <ds-avatar
+          type="icon"
+          [iconName]="'remixNotificationLine'"
+          [size]="layout() === 'compact' ? 'sm' : 'md'"
+        />
+      </div>
+      
+      <div content-main class="item-content">
+        <div class="item-name">{{ title() }}</div>
+        
+        @if (timestamp()) {
+          <div class="item-meta">
+            <span>{{ timestamp() }}</span>
+          </div>
+        }
+      </div>
+      
+      <div content-trailing class="item-trailing">
+        @if (unreadCount() && unreadCount()! > 0) {
+          <span class="unread-badge">{{ unreadCount() }}</span>
+        }
+        <ds-icon name="remixArrowRightSLine" size="20px" />
+      </div>
+    </ds-mobile-card-inline>
+  `, styles: [".unread-badge{min-width:24px;height:16px;padding:0 6px;border-radius:10px;background:var(--color-background-neutral-tertiary, #e5e5e5);color:var(--color-text-primary, #1a1a1a);font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:600;display:flex;align-items:center;justify-content:center;line-height:1;margin-right:8px}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], timestamp: [{ type: i0.Input, args: [{ isSignal: true, alias: "timestamp", required: false }] }], unreadCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "unreadCount", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], bannerClick: [{ type: i0.Output, args: ["bannerClick"] }] } });
+
+/**
+ * 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>
+ * ```
+ */
+class DsMobileCardInlineContactComponent {
+    /**
+     * Contact/company name
+     */
+    name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
+    /**
+     * Avatar initials (usually 1-2 letters)
+     */
+    initials = input.required(...(ngDevMode ? [{ debugName: "initials" }] : []));
+    /**
+     * Contact person name (optional)
+     */
+    contactPerson = input('', ...(ngDevMode ? [{ debugName: "contactPerson" }] : []));
+    /**
+     * Phone number (optional)
+     */
+    phoneNumber = input('', ...(ngDevMode ? [{ debugName: "phoneNumber" }] : []));
+    /**
+     * Layout variant
+     * - 'default' - Standard padding and column layout
+     * - 'compact' - Reduced padding and row layout
+     */
+    layout = input('default', ...(ngDevMode ? [{ debugName: "layout" }] : []));
+    /**
+     * Whether the contact item is clickable
+     */
+    clickable = input(true, ...(ngDevMode ? [{ debugName: "clickable" }] : []));
+    /**
+     * Whether to show chevron icon
+     */
+    showChevron = input(true, ...(ngDevMode ? [{ debugName: "showChevron" }] : []));
+    /**
+     * Emits when the contact item is clicked (if clickable)
+     */
+    contactClick = output();
+    handleContactClick() {
+        this.contactClick.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobileCardInlineContactComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsMobileCardInlineContactComponent, isStandalone: true, selector: "ds-mobile-card-inline-contact", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: true, transformFunction: null }, contactPerson: { classPropertyName: "contactPerson", publicName: "contactPerson", isSignal: true, isRequired: false, transformFunction: null }, phoneNumber: { classPropertyName: "phoneNumber", publicName: "phoneNumber", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, showChevron: { classPropertyName: "showChevron", publicName: "showChevron", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { contactClick: "contactClick" }, ngImport: i0, template: `
+    <ds-mobile-card-inline
+      [variant]="layout()"
+      [disabled]="!clickable()"
+      (cardClick)="handleContactClick()">
+      
+      <div content-leading class="item-avatar">
+        <ds-avatar
+          [initials]="initials()"
+          type="initials"
+          [size]="layout() === 'compact' ? 'sm' : 'md'"
+        />
+      </div>
+      
+      <div content-main class="item-content">
+        <div class="item-name">{{ name() }}</div>
+        
+        @if (contactPerson() || phoneNumber()) {
+          <div class="item-meta">
+            @if (contactPerson()) {
+              <span>{{ contactPerson() }}</span>
+            }
+            @if (contactPerson() && phoneNumber()) {
+              <span>·</span>
+            }
+            @if (phoneNumber()) {
+              <span>{{ phoneNumber() }}</span>
+            }
+          </div>
+        }
+      </div>
+      
+      @if (showChevron()) {
+        <div content-trailing class="item-trailing">
+          <ds-icon name="remixArrowRightSLine" size="20px" />
+        </div>
+      }
+    </ds-mobile-card-inline>
+  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }, { kind: "component", type: DsAvatarComponent, selector: "ds-avatar", inputs: ["type", "size", "initials", "src", "alt", "iconName", "iconColor"] }, { kind: "component", type: DsMobileCardInlineComponent, selector: "ds-mobile-card-inline", inputs: ["variant", "disabled"], outputs: ["cardClick"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobileCardInlineContactComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-mobile-card-inline-contact', standalone: true, imports: [CommonModule, DsIconComponent, DsAvatarComponent, DsMobileCardInlineComponent], template: `
+    <ds-mobile-card-inline
+      [variant]="layout()"
+      [disabled]="!clickable()"
+      (cardClick)="handleContactClick()">
+      
+      <div content-leading class="item-avatar">
+        <ds-avatar
+          [initials]="initials()"
+          type="initials"
+          [size]="layout() === 'compact' ? 'sm' : 'md'"
+        />
+      </div>
+      
+      <div content-main class="item-content">
+        <div class="item-name">{{ name() }}</div>
+        
+        @if (contactPerson() || phoneNumber()) {
+          <div class="item-meta">
+            @if (contactPerson()) {
+              <span>{{ contactPerson() }}</span>
+            }
+            @if (contactPerson() && phoneNumber()) {
+              <span>·</span>
+            }
+            @if (phoneNumber()) {
+              <span>{{ phoneNumber() }}</span>
+            }
+          </div>
+        }
+      </div>
+      
+      @if (showChevron()) {
+        <div content-trailing class="item-trailing">
+          <ds-icon name="remixArrowRightSLine" size="20px" />
+        </div>
+      }
+    </ds-mobile-card-inline>
+  ` }]
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], initials: [{ type: i0.Input, args: [{ isSignal: true, alias: "initials", required: true }] }], contactPerson: [{ type: i0.Input, args: [{ isSignal: true, alias: "contactPerson", required: false }] }], phoneNumber: [{ type: i0.Input, args: [{ isSignal: true, alias: "phoneNumber", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], showChevron: [{ type: i0.Input, args: [{ isSignal: true, alias: "showChevron", required: false }] }], contactClick: [{ type: i0.Output, args: ["contactClick"] }] } });
+
+/**
+ * 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>
+ * ```
+ */
+class DsMobileCardInlineFileComponent {
+    /**
+     * File name
+     */
+    fileName = input('Document', ...(ngDevMode ? [{ debugName: "fileName" }] : []));
+    /**
+     * File size display (e.g., "1.2 MB")
+     */
+    fileSize = input('', ...(ngDevMode ? [{ debugName: "fileSize" }] : []));
+    /**
+     * File type variant
+     * - 'pdf' - PDF document (red icon)
+     * - 'doc' - Generic document (blue icon)
+     */
+    variant = input('doc', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    /**
+     * Layout variant
+     * - 'default' - Standard padding and column layout
+     * - 'compact' - Reduced padding and row layout
+     */
+    layout = input('default', ...(ngDevMode ? [{ debugName: "layout" }] : []));
+    /**
+     * Emits when the file attachment is clicked
+     */
+    fileClick = output();
+    /**
+     * Get the appropriate icon name based on variant
+     */
+    getIconName() {
+        return this.variant() === 'pdf' ? 'remixFileTextLine' : 'remixAttachmentLine';
+    }
+    /**
+     * Get the file type label based on variant
+     */
+    getFileTypeLabel() {
+        return this.variant() === 'pdf' ? 'PDF' : 'DOC';
+    }
+    handleClick() {
+        this.fileClick.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobileCardInlineFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsMobileCardInlineFileComponent, isStandalone: true, selector: "ds-mobile-card-inline-file", inputs: { fileName: { classPropertyName: "fileName", publicName: "fileName", isSignal: true, isRequired: false, transformFunction: null }, fileSize: { classPropertyName: "fileSize", publicName: "fileSize", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fileClick: "fileClick" }, ngImport: i0, template: `
+    <ds-mobile-card-inline
+      [variant]="layout()"
+      (cardClick)="handleClick()">
+      
+      <div content-leading class="item-avatar" [class.pdf]="variant() === 'pdf'" [class.doc]="variant() === 'doc'">
+        <ds-avatar
+          type="icon"
+          [iconName]="getIconName()"
+          [size]="layout() === 'compact' ? 'sm' : 'md'"
+        />
+      </div>
+      
+      <div content-main class="item-content">
+        <div class="item-name">{{ fileName() }}</div>
+        @if (fileSize()) {
+          <div class="item-meta">{{ getFileTypeLabel() }} · {{ fileSize() }}</div>
+        } @else {
+          <div class="item-meta">{{ getFileTypeLabel() }}</div>
+        }
+      </div>
+      
+      <ds-icon 
+        content-trailing
+        name="remixArrowRightSLine" 
+        size="20px"
+        class="item-trailing"
+      />
+    </ds-mobile-card-inline>
+  `, isInline: true, styles: [".item-avatar.pdf ::ng-deep .avatar--icon{background-color:#ff5757!important}.item-avatar.doc ::ng-deep .avatar--icon{background-color:var(--color-blue-base, #3B82F6)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsAvatarComponent, selector: "ds-avatar", inputs: ["type", "size", "initials", "src", "alt", "iconName", "iconColor"] }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }, { kind: "component", type: DsMobileCardInlineComponent, selector: "ds-mobile-card-inline", inputs: ["variant", "disabled"], outputs: ["cardClick"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobileCardInlineFileComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-mobile-card-inline-file', standalone: true, imports: [CommonModule, DsAvatarComponent, DsIconComponent, DsMobileCardInlineComponent], template: `
+    <ds-mobile-card-inline
+      [variant]="layout()"
+      (cardClick)="handleClick()">
+      
+      <div content-leading class="item-avatar" [class.pdf]="variant() === 'pdf'" [class.doc]="variant() === 'doc'">
+        <ds-avatar
+          type="icon"
+          [iconName]="getIconName()"
+          [size]="layout() === 'compact' ? 'sm' : 'md'"
+        />
+      </div>
+      
+      <div content-main class="item-content">
+        <div class="item-name">{{ fileName() }}</div>
+        @if (fileSize()) {
+          <div class="item-meta">{{ getFileTypeLabel() }} · {{ fileSize() }}</div>
+        } @else {
+          <div class="item-meta">{{ getFileTypeLabel() }}</div>
+        }
+      </div>
+      
+      <ds-icon 
+        content-trailing
+        name="remixArrowRightSLine" 
+        size="20px"
+        class="item-trailing"
+      />
+    </ds-mobile-card-inline>
+  `, styles: [".item-avatar.pdf ::ng-deep .avatar--icon{background-color:#ff5757!important}.item-avatar.doc ::ng-deep .avatar--icon{background-color:var(--color-blue-base, #3B82F6)!important}\n"] }]
+        }], propDecorators: { fileName: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileName", required: false }] }], fileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileSize", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], fileClick: [{ type: i0.Output, args: ["fileClick"] }] } });
+
 /**
  * DsMobileLightboxHeaderComponent
  *
@@ -10083,481 +10611,211 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 type: Input
             }], currentUserName: [{
                 type: Input
-            }], currentUserInitialsInput: [{
-                type: Input
-            }], loading: [{
-                type: Input
-            }], error: [{
-                type: Input
-            }], onSubmitComment: [{
-                type: Input
-            }], onToggleCommentLike: [{
-                type: Input
-            }], onEditComment: [{
-                type: Input
-            }], onDeleteComment: [{
-                type: Input
-            }], commentInput: [{
-                type: ViewChild,
-                args: ['commentInput']
-            }] } });
-
-/**
- * BaseModalService
- *
- * Abstract base class for all modal services in the application.
- * Enforces consistent modal configuration and presentation across all modals.
- *
- * **Features:**
- * - Standardized modal presentation (stacked effect with gap at top)
- * - Consistent backdrop and dismissal behavior
- * - Automatic safe area handling
- * - Native iOS-style animations
- *
- * **Why use this:**
- * - Ensures all modals have the same look and feel
- * - Prevents inconsistencies in modal configuration
- * - Single source of truth for modal settings
- * - Makes it impossible to forget critical configuration
- *
- * @example
- * ```typescript
- * @Injectable({ providedIn: 'root' })
- * export class MyModalService extends BaseModalService {
- *   async open(data: MyData) {
- *     const modal = await this.createModal(
- *       MyModalComponent,
- *       { data }
- *     );
- *     await modal.present();
- *   }
- * }
- * ```
- */
-class BaseModalService {
-    modalController;
-    constructor(modalController) {
-        this.modalController = modalController;
-    }
-    /**
-     * Create a modal with standardized configuration
-     *
-     * This method enforces consistent modal behavior across the app:
-     * - Uses 'ds-modal-base' CSS class for consistent styling
-     * - iOS mode for native feel
-     * - presentingElement for stacked modal effect
-     * - Standard backdrop and dismissal settings
-     *
-     * @param component The component to display in the modal
-     * @param componentProps Props to pass to the component
-     * @param customOptions Optional overrides for specific modal needs
-     * @returns Promise resolving to the created modal
-     *
-     * @example
-     * ```typescript
-     * const modal = await this.createModal(
-     *   PostDetailComponent,
-     *   { postId: '123', loading: false }
-     * );
-     * await modal.present();
-     * ```
-     */
-    async createModal(component, componentProps, customOptions) {
-        return await this.modalController.create({
-            component,
-            componentProps,
-            // Standard configuration for all modals
-            cssClass: 'ds-modal-base',
-            mode: 'ios',
-            presentingElement: document.querySelector('ion-router-outlet') || undefined,
-            backdropDismiss: true,
-            showBackdrop: true,
-            animated: true,
-            // Allow service-specific overrides if needed
-            ...customOptions,
-        });
-    }
-    /**
-     * Close the currently open modal
-     *
-     * @param data Optional data to pass back when dismissing
-     * @returns Promise that resolves when the modal is dismissed
-     */
-    async close(data) {
-        return this.modalController.dismiss(data);
-    }
-    /**
-     * Get the top-most modal if one exists
-     *
-     * @returns Promise that resolves to the modal element or undefined
-     */
-    async getTop() {
-        return this.modalController.getTop();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: BaseModalService, deps: [{ token: i1.ModalController }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: BaseModalService });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: BaseModalService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: i1.ModalController }] });
-
-/**
- * DsMobilePostDetailModalService
- *
- * Service for displaying post details in a full-screen modal.
- * Built on Ionic's modal system with native gestures and animations.
- * Follows the same pattern as DsMobileLightboxService for consistent behavior.
- *
- * Features:
- * - Full post content display
- * - Comments section
- * - Like/comment actions
- * - Image lightbox integration
- * - Native modal animations
- * - Safe area support
- *
- * @example
- * ```typescript
- * constructor(private postModal: DsMobilePostDetailModalService) {}
- *
- * async openPost() {
- *   await this.postModal.open({
- *     postId: '123',
- *     authorName: 'John Doe',
- *     authorRole: 'Tenant',
- *     timestamp: '2h ago',
- *     avatarInitials: 'JD',
- *     content: 'Just moved into my new apartment!',
- *     isLiked: false,
- *     likeCount: 42,
- *     commentCount: 12,
- *     comments: [
- *       {
- *         authorName: 'Jane Smith',
- *         authorRole: 'Tenant',
- *         timestamp: '1h ago',
- *         avatarInitials: 'JS',
- *         content: 'Welcome to the community!'
- *       }
- *     ]
- *   });
- * }
- * ```
- */
-class DsMobilePostDetailModalService extends BaseModalService {
-    constructor(modalController) {
-        super(modalController);
-    }
-    /**
-     * Open the post detail modal
-     *
-     * @param postData Post data to display
-     * @param options Optional loading and error states
-     * @returns Promise that resolves when the modal is presented
-     */
-    async open(postData, options) {
-        console.log('[PostDetailModal] Opening with data:', postData);
-        console.log('[PostDetailModal] options.onSubmitComment =', options?.onSubmitComment);
-        const modal = await this.createModal(DsMobilePostDetailModalComponent, {
-            postData: postData,
-            loading: options?.loading ?? false,
-            error: options?.error,
-            onSubmitComment: options?.onSubmitComment,
-            onToggleCommentLike: options?.onToggleCommentLike,
-            currentUserName: options?.currentUserName ?? '',
-            currentUserInitialsInput: options?.currentUserInitials ?? '',
-        }, {
-            keyboardClose: true, // Keep keyboard close behavior for this modal
-        });
-        console.log('[PostDetailModal] Modal created, presenting...');
-        await modal.present();
-        console.log('[PostDetailModal] Modal presented');
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobilePostDetailModalService, deps: [{ token: i1.ModalController }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobilePostDetailModalService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobilePostDetailModalService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [{ type: i1.ModalController }] });
-
-/**
- * Mobile Post Detail Modal Module
- *
- * Service and component for displaying posts in a modal
- */
-
-/**
- * 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()">
+            }], currentUserInitialsInput: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }], onSubmitComment: [{
+                type: Input
+            }], onToggleCommentLike: [{
+                type: Input
+            }], onEditComment: [{
+                type: Input
+            }], onDeleteComment: [{
+                type: Input
+            }], commentInput: [{
+                type: ViewChild,
+                args: ['commentInput']
+            }] } });
+
+/**
+ * BaseModalService
  *
- *   <ds-avatar content-leading size="sm" />
+ * Abstract base class for all modal services in the application.
+ * Enforces consistent modal configuration and presentation across all modals.
  *
- *   <div content-main>
- *     <span class="name">File.pdf</span>
- *     <span class="size">245 KB</span>
- *   </div>
+ * **Features:**
+ * - Standardized modal presentation (stacked effect with gap at top)
+ * - Consistent backdrop and dismissal behavior
+ * - Automatic safe area handling
+ * - Native iOS-style animations
  *
- *   <ds-icon content-trailing name="remixArrowRightSLine" />
- * </ds-mobile-card-inline>
+ * **Why use this:**
+ * - Ensures all modals have the same look and feel
+ * - Prevents inconsistencies in modal configuration
+ * - Single source of truth for modal settings
+ * - Makes it impossible to forget critical configuration
  *
- * <!-- Disabled state -->
- * <ds-mobile-card-inline [disabled]="true">
- *   <div content-main>Disabled card</div>
- * </ds-mobile-card-inline>
+ * @example
+ * ```typescript
+ * @Injectable({ providedIn: 'root' })
+ * export class MyModalService extends BaseModalService {
+ *   async open(data: MyData) {
+ *     const modal = await this.createModal(
+ *       MyModalComponent,
+ *       { data }
+ *     );
+ *     await modal.present();
+ *   }
+ * }
  * ```
  */
-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 = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
-    /**
-     * Whether the card is disabled
-     * Disables all interactions and reduces opacity
-     */
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+class BaseModalService {
+    modalController;
+    constructor(modalController) {
+        this.modalController = modalController;
+    }
     /**
-     * Emits when the card is clicked (if not disabled)
+     * Create a modal with standardized configuration
+     *
+     * This method enforces consistent modal behavior across the app:
+     * - Uses 'ds-modal-base' CSS class for consistent styling
+     * - iOS mode for native feel
+     * - presentingElement for stacked modal effect
+     * - Standard backdrop and dismissal settings
+     *
+     * @param component The component to display in the modal
+     * @param componentProps Props to pass to the component
+     * @param customOptions Optional overrides for specific modal needs
+     * @returns Promise resolving to the created modal
+     *
+     * @example
+     * ```typescript
+     * const modal = await this.createModal(
+     *   PostDetailComponent,
+     *   { postId: '123', loading: false }
+     * );
+     * await modal.present();
+     * ```
      */
-    cardClick = output();
+    async createModal(component, componentProps, customOptions) {
+        return await this.modalController.create({
+            component,
+            componentProps,
+            // Standard configuration for all modals
+            cssClass: 'ds-modal-base',
+            mode: 'ios',
+            presentingElement: document.querySelector('ion-router-outlet') || undefined,
+            backdropDismiss: true,
+            showBackdrop: true,
+            animated: true,
+            // Allow service-specific overrides if needed
+            ...customOptions,
+        });
+    }
     /**
-     * Handle click events
+     * Close the currently open modal
+     *
+     * @param data Optional data to pass back when dismissing
+     * @returns Promise that resolves when the modal is dismissed
      */
-    handleClick(event) {
-        if (this.disabled()) {
-            return;
-        }
-        // Don't emit click if it came from an interactive child element
-        const target = event.target;
-        const closestInteractive = target.closest('button, a, input, select, textarea, [role="button"]');
-        // Check if the interactive element is a child, not the host itself
-        if (closestInteractive && closestInteractive !== event.currentTarget) {
-            return;
-        }
-        this.cardClick.emit();
+    async close(data) {
+        return this.modalController.dismiss(data);
     }
     /**
-     * Handle keyboard events (Enter/Space)
+     * Get the top-most modal if one exists
+     *
+     * @returns Promise that resolves to the modal element or undefined
      */
-    handleKeyDown(event) {
-        if (this.disabled()) {
-            return;
-        }
-        event.preventDefault();
-        this.cardClick.emit();
+    async getTop() {
+        return this.modalController.getTop();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobileCardInlineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: DsMobileCardInlineComponent, isStandalone: true, selector: "ds-mobile-card-inline", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cardClick: "cardClick" }, host: { listeners: { "click": "handleClick($event)", "keydown.enter": "handleKeyDown($event)", "keydown.space": "handleKeyDown($event)" }, properties: { "class.disabled": "disabled()", "class.variant-compact": "variant() === \"compact\"", "class.variant-default": "variant() === \"default\"", "attr.role": "\"button\"", "attr.tabindex": "disabled() ? null : \"0\"", "attr.aria-disabled": "disabled() ? \"true\" : null" } }, ngImport: i0, template: `
-    <div class="card-inline-inner">
-      <div class="content-leading">
-        <ng-content select="[content-leading]" />
-      </div>
-      
-      <div class="content-main">
-        <ng-content select="[content-main]" />
-        <ng-content />
-      </div>
-      
-      <div class="content-trailing">
-        <ng-content select="[content-trailing]" />
-      </div>
-    </div>
-  `, isInline: true, styles: [":host{display:flex;align-items:center;background:var(--color-background-neutral-secondary, #f5f5f5);border-radius:16px;cursor:pointer;transition:all .2s ease;box-sizing:border-box}:host(.variant-default){gap:12px;padding:10px 12px}:host(.variant-compact){gap:8px;padding:10px}@media (hover: hover) and (pointer: fine){:host(:hover):not(.disabled){background:var(--color-background-neutral-secondary-hover, #ebebeb)}}:host(:active):not(.disabled){transform:scale(.98);background:var(--color-background-neutral-secondary-hover, #ebebeb)}:host(:focus-visible):not(.disabled){outline:2px solid var(--color-brand-primary, #5d5fef);outline-offset:2px}:host(.disabled){opacity:.5;pointer-events:none;cursor:not-allowed}.card-inline-inner{display:flex;align-items:center;gap:inherit;width:100%;min-width:0}.content-leading{flex-shrink:0;display:flex;align-items:center;justify-content:center}.content-main{flex:1;min-width:0;display:flex;align-items:center}:host(.variant-compact) .content-main{flex-direction:row;gap:8px}:host(.variant-default) .content-main{flex-direction:column;align-items:flex-start;gap:2px}.content-trailing{flex-shrink:0;display:flex;align-items:center}::ng-deep .item-avatar{flex-shrink:0}::ng-deep .item-content{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:2px}:host(.variant-compact) ::ng-deep .item-content{flex-direction:row;align-items:center;justify-content:flex-start;gap:8px}::ng-deep .item-name{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:600;line-height:20px;letter-spacing:-.3px;color:var(--color-text-primary, #1a1a1a);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}::ng-deep .item-meta{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;letter-spacing:-.26px;color:var(--color-text-tertiary, #737373);margin:0;display:flex;align-items:center;justify-content:flex-start;gap:4px;white-space:nowrap;flex-shrink:0}::ng-deep .item-trailing{display:flex;align-items:center;color:var(--color-text-tertiary, #a3a3a3);flex-shrink:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: BaseModalService, deps: [{ token: i1.ModalController }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: BaseModalService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobileCardInlineComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ds-mobile-card-inline', standalone: true, imports: [CommonModule], host: {
-                        '[class.disabled]': 'disabled()',
-                        '[class.variant-compact]': 'variant() === "compact"',
-                        '[class.variant-default]': 'variant() === "default"',
-                        '[attr.role]': '"button"',
-                        '[attr.tabindex]': 'disabled() ? null : "0"',
-                        '[attr.aria-disabled]': 'disabled() ? "true" : null',
-                        '(click)': 'handleClick($event)',
-                        '(keydown.enter)': 'handleKeyDown($event)',
-                        '(keydown.space)': 'handleKeyDown($event)'
-                    }, template: `
-    <div class="card-inline-inner">
-      <div class="content-leading">
-        <ng-content select="[content-leading]" />
-      </div>
-      
-      <div class="content-main">
-        <ng-content select="[content-main]" />
-        <ng-content />
-      </div>
-      
-      <div class="content-trailing">
-        <ng-content select="[content-trailing]" />
-      </div>
-    </div>
-  `, styles: [":host{display:flex;align-items:center;background:var(--color-background-neutral-secondary, #f5f5f5);border-radius:16px;cursor:pointer;transition:all .2s ease;box-sizing:border-box}:host(.variant-default){gap:12px;padding:10px 12px}:host(.variant-compact){gap:8px;padding:10px}@media (hover: hover) and (pointer: fine){:host(:hover):not(.disabled){background:var(--color-background-neutral-secondary-hover, #ebebeb)}}:host(:active):not(.disabled){transform:scale(.98);background:var(--color-background-neutral-secondary-hover, #ebebeb)}:host(:focus-visible):not(.disabled){outline:2px solid var(--color-brand-primary, #5d5fef);outline-offset:2px}:host(.disabled){opacity:.5;pointer-events:none;cursor:not-allowed}.card-inline-inner{display:flex;align-items:center;gap:inherit;width:100%;min-width:0}.content-leading{flex-shrink:0;display:flex;align-items:center;justify-content:center}.content-main{flex:1;min-width:0;display:flex;align-items:center}:host(.variant-compact) .content-main{flex-direction:row;gap:8px}:host(.variant-default) .content-main{flex-direction:column;align-items:flex-start;gap:2px}.content-trailing{flex-shrink:0;display:flex;align-items:center}::ng-deep .item-avatar{flex-shrink:0}::ng-deep .item-content{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:2px}:host(.variant-compact) ::ng-deep .item-content{flex-direction:row;align-items:center;justify-content:flex-start;gap:8px}::ng-deep .item-name{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:600;line-height:20px;letter-spacing:-.3px;color:var(--color-text-primary, #1a1a1a);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}::ng-deep .item-meta{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;letter-spacing:-.26px;color:var(--color-text-tertiary, #737373);margin:0;display:flex;align-items:center;justify-content:flex-start;gap:4px;white-space:nowrap;flex-shrink:0}::ng-deep .item-trailing{display:flex;align-items:center;color:var(--color-text-tertiary, #a3a3a3);flex-shrink:0}\n"] }]
-        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], cardClick: [{ type: i0.Output, args: ["cardClick"] }] } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: BaseModalService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i1.ModalController }] });
 
 /**
- * DsMobileCardInlineFileComponent
+ * DsMobilePostDetailModalService
  *
- * 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.
+ * Service for displaying post details in a full-screen modal.
+ * Built on Ionic's modal system with native gestures and animations.
+ * Follows the same pattern as DsMobileLightboxService for consistent behavior.
+ *
+ * Features:
+ * - Full post content display
+ * - Comments section
+ * - Like/comment actions
+ * - Image lightbox integration
+ * - Native modal animations
+ * - Safe area support
  *
  * @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>
- * ```
- */
-class DsMobileCardInlineFileComponent {
-    /**
-     * File name
-     */
-    fileName = input('Document', ...(ngDevMode ? [{ debugName: "fileName" }] : []));
-    /**
-     * File size display (e.g., "1.2 MB")
-     */
-    fileSize = input('', ...(ngDevMode ? [{ debugName: "fileSize" }] : []));
-    /**
-     * File type variant
-     * - 'pdf' - PDF document (red icon)
-     * - 'doc' - Generic document (blue icon)
-     */
-    variant = input('doc', ...(ngDevMode ? [{ debugName: "variant" }] : []));
-    /**
-     * Layout variant
-     * - 'default' - Standard padding and column layout
-     * - 'compact' - Reduced padding and row layout
-     */
-    layout = input('default', ...(ngDevMode ? [{ debugName: "layout" }] : []));
-    /**
-     * Emits when the file attachment is clicked
-     */
-    fileClick = output();
-    /**
-     * Get the appropriate icon name based on variant
-     */
-    getIconName() {
-        return this.variant() === 'pdf' ? 'remixFileTextLine' : 'remixAttachmentLine';
+ * ```typescript
+ * constructor(private postModal: DsMobilePostDetailModalService) {}
+ *
+ * async openPost() {
+ *   await this.postModal.open({
+ *     postId: '123',
+ *     authorName: 'John Doe',
+ *     authorRole: 'Tenant',
+ *     timestamp: '2h ago',
+ *     avatarInitials: 'JD',
+ *     content: 'Just moved into my new apartment!',
+ *     isLiked: false,
+ *     likeCount: 42,
+ *     commentCount: 12,
+ *     comments: [
+ *       {
+ *         authorName: 'Jane Smith',
+ *         authorRole: 'Tenant',
+ *         timestamp: '1h ago',
+ *         avatarInitials: 'JS',
+ *         content: 'Welcome to the community!'
+ *       }
+ *     ]
+ *   });
+ * }
+ * ```
+ */
+class DsMobilePostDetailModalService extends BaseModalService {
+    constructor(modalController) {
+        super(modalController);
     }
     /**
-     * Get the file type label based on variant
+     * Open the post detail modal
+     *
+     * @param postData Post data to display
+     * @param options Optional loading and error states
+     * @returns Promise that resolves when the modal is presented
      */
-    getFileTypeLabel() {
-        return this.variant() === 'pdf' ? 'PDF' : 'DOC';
-    }
-    handleClick() {
-        this.fileClick.emit();
+    async open(postData, options) {
+        console.log('[PostDetailModal] Opening with data:', postData);
+        console.log('[PostDetailModal] options.onSubmitComment =', options?.onSubmitComment);
+        const modal = await this.createModal(DsMobilePostDetailModalComponent, {
+            postData: postData,
+            loading: options?.loading ?? false,
+            error: options?.error,
+            onSubmitComment: options?.onSubmitComment,
+            onToggleCommentLike: options?.onToggleCommentLike,
+            currentUserName: options?.currentUserName ?? '',
+            currentUserInitialsInput: options?.currentUserInitials ?? '',
+        }, {
+            keyboardClose: true, // Keep keyboard close behavior for this modal
+        });
+        console.log('[PostDetailModal] Modal created, presenting...');
+        await modal.present();
+        console.log('[PostDetailModal] Modal presented');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobileCardInlineFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsMobileCardInlineFileComponent, isStandalone: true, selector: "ds-mobile-card-inline-file", inputs: { fileName: { classPropertyName: "fileName", publicName: "fileName", isSignal: true, isRequired: false, transformFunction: null }, fileSize: { classPropertyName: "fileSize", publicName: "fileSize", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fileClick: "fileClick" }, ngImport: i0, template: `
-    <ds-mobile-card-inline
-      [variant]="layout()"
-      (cardClick)="handleClick()">
-      
-      <div content-leading class="item-avatar" [class.pdf]="variant() === 'pdf'" [class.doc]="variant() === 'doc'">
-        <ds-avatar
-          type="icon"
-          [iconName]="getIconName()"
-          [size]="layout() === 'compact' ? 'sm' : 'md'"
-        />
-      </div>
-      
-      <div content-main class="item-content">
-        <div class="item-name">{{ fileName() }}</div>
-        @if (fileSize()) {
-          <div class="item-meta">{{ getFileTypeLabel() }} · {{ fileSize() }}</div>
-        } @else {
-          <div class="item-meta">{{ getFileTypeLabel() }}</div>
-        }
-      </div>
-      
-      <ds-icon 
-        content-trailing
-        name="remixArrowRightSLine" 
-        size="20px"
-        class="item-trailing"
-      />
-    </ds-mobile-card-inline>
-  `, isInline: true, styles: [".item-avatar.pdf ::ng-deep .avatar--icon{background-color:#ff5757!important}.item-avatar.doc ::ng-deep .avatar--icon{background-color:var(--color-blue-base, #3B82F6)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsAvatarComponent, selector: "ds-avatar", inputs: ["type", "size", "initials", "src", "alt", "iconName", "iconColor"] }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }, { kind: "component", type: DsMobileCardInlineComponent, selector: "ds-mobile-card-inline", inputs: ["variant", "disabled"], outputs: ["cardClick"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobilePostDetailModalService, deps: [{ token: i1.ModalController }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobilePostDetailModalService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobileCardInlineFileComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ds-mobile-card-inline-file', standalone: true, imports: [CommonModule, DsAvatarComponent, DsIconComponent, DsMobileCardInlineComponent], template: `
-    <ds-mobile-card-inline
-      [variant]="layout()"
-      (cardClick)="handleClick()">
-      
-      <div content-leading class="item-avatar" [class.pdf]="variant() === 'pdf'" [class.doc]="variant() === 'doc'">
-        <ds-avatar
-          type="icon"
-          [iconName]="getIconName()"
-          [size]="layout() === 'compact' ? 'sm' : 'md'"
-        />
-      </div>
-      
-      <div content-main class="item-content">
-        <div class="item-name">{{ fileName() }}</div>
-        @if (fileSize()) {
-          <div class="item-meta">{{ getFileTypeLabel() }} · {{ fileSize() }}</div>
-        } @else {
-          <div class="item-meta">{{ getFileTypeLabel() }}</div>
-        }
-      </div>
-      
-      <ds-icon 
-        content-trailing
-        name="remixArrowRightSLine" 
-        size="20px"
-        class="item-trailing"
-      />
-    </ds-mobile-card-inline>
-  `, styles: [".item-avatar.pdf ::ng-deep .avatar--icon{background-color:#ff5757!important}.item-avatar.doc ::ng-deep .avatar--icon{background-color:var(--color-blue-base, #3B82F6)!important}\n"] }]
-        }], propDecorators: { fileName: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileName", required: false }] }], fileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileSize", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], fileClick: [{ type: i0.Output, args: ["fileClick"] }] } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobilePostDetailModalService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i1.ModalController }] });
+
+/**
+ * Mobile Post Detail Modal Module
+ *
+ * Service and component for displaying posts in a modal
+ */
 
 /**
  * DsMobileSystemMessageBannerComponent
@@ -11871,216 +12129,75 @@ class DsMobileHandbookFolderMiniComponent {
             'grey': 'grey'
         };
         const colorName = variantMap[this.variant] || 'light-purple';
-        return `var(--color-${colorName}-${suffix})`;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobileHandbookFolderMiniComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: DsMobileHandbookFolderMiniComponent, isStandalone: true, selector: "ds-mobile-handbook-folder-mini", inputs: { variant: "variant", iconName: "iconName" }, ngImport: i0, template: `
-    <div class="mini-folder-container">
-      <!-- Folder Tab SVG -->
-      <svg 
-        class="mini-folder-tab" 
-        width="101" 
-        height="24" 
-        viewBox="0 0 101 24" 
-        fill="none" 
-        xmlns="http://www.w3.org/2000/svg">
-        <path 
-          d="M100.037 23.9999L100.5 24L0 24.0001V10.7646C0 4.80853 4.91797 -0.0234985 11 -0.0196688L66.4213 -0.0322266C69.3519 -0.0115886 72.197 1.20548 74.2473 3.29947L90.6765 20.0951C93.1218 22.5925 96.5417 23.9999 100.037 23.9999Z" 
-          [attr.fill]="getColorVar('strong')"/>
-      </svg>
-      
-      <!-- Folder Back -->
-      <div class="mini-folder-back" [style.background-color]="getColorVar('strong')">
-        <!-- Folder Front -->
-        <div 
-          class="mini-folder-front" 
-          [style.background-color]="getColorVar('base')">
-          <ds-icon 
-            [name]="iconName" 
-            [size]="'14px'"
-            [style.color]="'white'" />
-        </div>
-      </div>
-    </div>
-  `, isInline: true, styles: [":host{display:inline-block;width:32px;height:32px;flex-shrink:0}.mini-folder-container{position:relative;width:100%;height:100%;display:flex;flex-direction:column}.mini-folder-tab{width:50%;height:auto;display:block}.mini-folder-back{height:28px;border-radius:0 4px 4px;position:relative;margin-top:-1px}.mini-folder-front{position:absolute;bottom:0;left:0;right:0;height:24px;border-radius:4px;display:flex;align-items:center;justify-content:center;z-index:2;box-shadow:inset 0 8px 8px #fff3,inset 0 .5px .5px #ffffff4d}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobileHandbookFolderMiniComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ds-mobile-handbook-folder-mini', standalone: true, imports: [CommonModule, DsIconComponent], template: `
-    <div class="mini-folder-container">
-      <!-- Folder Tab SVG -->
-      <svg 
-        class="mini-folder-tab" 
-        width="101" 
-        height="24" 
-        viewBox="0 0 101 24" 
-        fill="none" 
-        xmlns="http://www.w3.org/2000/svg">
-        <path 
-          d="M100.037 23.9999L100.5 24L0 24.0001V10.7646C0 4.80853 4.91797 -0.0234985 11 -0.0196688L66.4213 -0.0322266C69.3519 -0.0115886 72.197 1.20548 74.2473 3.29947L90.6765 20.0951C93.1218 22.5925 96.5417 23.9999 100.037 23.9999Z" 
-          [attr.fill]="getColorVar('strong')"/>
-      </svg>
-      
-      <!-- Folder Back -->
-      <div class="mini-folder-back" [style.background-color]="getColorVar('strong')">
-        <!-- Folder Front -->
-        <div 
-          class="mini-folder-front" 
-          [style.background-color]="getColorVar('base')">
-          <ds-icon 
-            [name]="iconName" 
-            [size]="'14px'"
-            [style.color]="'white'" />
-        </div>
-      </div>
-    </div>
-  `, styles: [":host{display:inline-block;width:32px;height:32px;flex-shrink:0}.mini-folder-container{position:relative;width:100%;height:100%;display:flex;flex-direction:column}.mini-folder-tab{width:50%;height:auto;display:block}.mini-folder-back{height:28px;border-radius:0 4px 4px;position:relative;margin-top:-1px}.mini-folder-front{position:absolute;bottom:0;left:0;right:0;height:24px;border-radius:4px;display:flex;align-items:center;justify-content:center;z-index:2;box-shadow:inset 0 8px 8px #fff3,inset 0 .5px .5px #ffffff4d}\n"] }]
-        }], propDecorators: { variant: [{
-                type: Input
-            }], iconName: [{
-                type: Input
-            }] } });
-
-/**
- * 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>
- * ```
- */
-class DsMobileCardInlineContactComponent {
-    /**
-     * Contact/company name
-     */
-    name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
-    /**
-     * Avatar initials (usually 1-2 letters)
-     */
-    initials = input.required(...(ngDevMode ? [{ debugName: "initials" }] : []));
-    /**
-     * Contact person name (optional)
-     */
-    contactPerson = input('', ...(ngDevMode ? [{ debugName: "contactPerson" }] : []));
-    /**
-     * Phone number (optional)
-     */
-    phoneNumber = input('', ...(ngDevMode ? [{ debugName: "phoneNumber" }] : []));
-    /**
-     * Layout variant
-     * - 'default' - Standard padding and column layout
-     * - 'compact' - Reduced padding and row layout
-     */
-    layout = input('default', ...(ngDevMode ? [{ debugName: "layout" }] : []));
-    /**
-     * Whether the contact item is clickable
-     */
-    clickable = input(true, ...(ngDevMode ? [{ debugName: "clickable" }] : []));
-    /**
-     * Whether to show chevron icon
-     */
-    showChevron = input(true, ...(ngDevMode ? [{ debugName: "showChevron" }] : []));
-    /**
-     * Emits when the contact item is clicked (if clickable)
-     */
-    contactClick = output();
-    handleContactClick() {
-        this.contactClick.emit();
+        return `var(--color-${colorName}-${suffix})`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobileCardInlineContactComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsMobileCardInlineContactComponent, isStandalone: true, selector: "ds-mobile-card-inline-contact", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: true, transformFunction: null }, contactPerson: { classPropertyName: "contactPerson", publicName: "contactPerson", isSignal: true, isRequired: false, transformFunction: null }, phoneNumber: { classPropertyName: "phoneNumber", publicName: "phoneNumber", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, showChevron: { classPropertyName: "showChevron", publicName: "showChevron", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { contactClick: "contactClick" }, ngImport: i0, template: `
-    <ds-mobile-card-inline
-      [variant]="layout()"
-      [disabled]="!clickable()"
-      (cardClick)="handleContactClick()">
-      
-      <div content-leading class="item-avatar">
-        <ds-avatar
-          [initials]="initials()"
-          type="initials"
-          [size]="layout() === 'compact' ? 'sm' : 'md'"
-        />
-      </div>
-      
-      <div content-main class="item-content">
-        <div class="item-name">{{ name() }}</div>
-        
-        @if (contactPerson() || phoneNumber()) {
-          <div class="item-meta">
-            @if (contactPerson()) {
-              <span>{{ contactPerson() }}</span>
-            }
-            @if (contactPerson() && phoneNumber()) {
-              <span>·</span>
-            }
-            @if (phoneNumber()) {
-              <span>{{ phoneNumber() }}</span>
-            }
-          </div>
-        }
-      </div>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobileHandbookFolderMiniComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: DsMobileHandbookFolderMiniComponent, isStandalone: true, selector: "ds-mobile-handbook-folder-mini", inputs: { variant: "variant", iconName: "iconName" }, ngImport: i0, template: `
+    <div class="mini-folder-container">
+      <!-- Folder Tab SVG -->
+      <svg 
+        class="mini-folder-tab" 
+        width="101" 
+        height="24" 
+        viewBox="0 0 101 24" 
+        fill="none" 
+        xmlns="http://www.w3.org/2000/svg">
+        <path 
+          d="M100.037 23.9999L100.5 24L0 24.0001V10.7646C0 4.80853 4.91797 -0.0234985 11 -0.0196688L66.4213 -0.0322266C69.3519 -0.0115886 72.197 1.20548 74.2473 3.29947L90.6765 20.0951C93.1218 22.5925 96.5417 23.9999 100.037 23.9999Z" 
+          [attr.fill]="getColorVar('strong')"/>
+      </svg>
       
-      @if (showChevron()) {
-        <div content-trailing class="item-trailing">
-          <ds-icon name="remixArrowRightSLine" size="20px" />
+      <!-- Folder Back -->
+      <div class="mini-folder-back" [style.background-color]="getColorVar('strong')">
+        <!-- Folder Front -->
+        <div 
+          class="mini-folder-front" 
+          [style.background-color]="getColorVar('base')">
+          <ds-icon 
+            [name]="iconName" 
+            [size]="'14px'"
+            [style.color]="'white'" />
         </div>
-      }
-    </ds-mobile-card-inline>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }, { kind: "component", type: DsAvatarComponent, selector: "ds-avatar", inputs: ["type", "size", "initials", "src", "alt", "iconName", "iconColor"] }, { kind: "component", type: DsMobileCardInlineComponent, selector: "ds-mobile-card-inline", inputs: ["variant", "disabled"], outputs: ["cardClick"] }] });
+      </div>
+    </div>
+  `, isInline: true, styles: [":host{display:inline-block;width:32px;height:32px;flex-shrink:0}.mini-folder-container{position:relative;width:100%;height:100%;display:flex;flex-direction:column}.mini-folder-tab{width:50%;height:auto;display:block}.mini-folder-back{height:28px;border-radius:0 4px 4px;position:relative;margin-top:-1px}.mini-folder-front{position:absolute;bottom:0;left:0;right:0;height:24px;border-radius:4px;display:flex;align-items:center;justify-content:center;z-index:2;box-shadow:inset 0 8px 8px #fff3,inset 0 .5px .5px #ffffff4d}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobileCardInlineContactComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobileHandbookFolderMiniComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ds-mobile-card-inline-contact', standalone: true, imports: [CommonModule, DsIconComponent, DsAvatarComponent, DsMobileCardInlineComponent], template: `
-    <ds-mobile-card-inline
-      [variant]="layout()"
-      [disabled]="!clickable()"
-      (cardClick)="handleContactClick()">
-      
-      <div content-leading class="item-avatar">
-        <ds-avatar
-          [initials]="initials()"
-          type="initials"
-          [size]="layout() === 'compact' ? 'sm' : 'md'"
-        />
-      </div>
-      
-      <div content-main class="item-content">
-        <div class="item-name">{{ name() }}</div>
-        
-        @if (contactPerson() || phoneNumber()) {
-          <div class="item-meta">
-            @if (contactPerson()) {
-              <span>{{ contactPerson() }}</span>
-            }
-            @if (contactPerson() && phoneNumber()) {
-              <span>·</span>
-            }
-            @if (phoneNumber()) {
-              <span>{{ phoneNumber() }}</span>
-            }
-          </div>
-        }
-      </div>
+            args: [{ selector: 'ds-mobile-handbook-folder-mini', standalone: true, imports: [CommonModule, DsIconComponent], template: `
+    <div class="mini-folder-container">
+      <!-- Folder Tab SVG -->
+      <svg 
+        class="mini-folder-tab" 
+        width="101" 
+        height="24" 
+        viewBox="0 0 101 24" 
+        fill="none" 
+        xmlns="http://www.w3.org/2000/svg">
+        <path 
+          d="M100.037 23.9999L100.5 24L0 24.0001V10.7646C0 4.80853 4.91797 -0.0234985 11 -0.0196688L66.4213 -0.0322266C69.3519 -0.0115886 72.197 1.20548 74.2473 3.29947L90.6765 20.0951C93.1218 22.5925 96.5417 23.9999 100.037 23.9999Z" 
+          [attr.fill]="getColorVar('strong')"/>
+      </svg>
       
-      @if (showChevron()) {
-        <div content-trailing class="item-trailing">
-          <ds-icon name="remixArrowRightSLine" size="20px" />
+      <!-- Folder Back -->
+      <div class="mini-folder-back" [style.background-color]="getColorVar('strong')">
+        <!-- Folder Front -->
+        <div 
+          class="mini-folder-front" 
+          [style.background-color]="getColorVar('base')">
+          <ds-icon 
+            [name]="iconName" 
+            [size]="'14px'"
+            [style.color]="'white'" />
         </div>
-      }
-    </ds-mobile-card-inline>
-  ` }]
-        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], initials: [{ type: i0.Input, args: [{ isSignal: true, alias: "initials", required: true }] }], contactPerson: [{ type: i0.Input, args: [{ isSignal: true, alias: "contactPerson", required: false }] }], phoneNumber: [{ type: i0.Input, args: [{ isSignal: true, alias: "phoneNumber", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], showChevron: [{ type: i0.Input, args: [{ isSignal: true, alias: "showChevron", required: false }] }], contactClick: [{ type: i0.Output, args: ["contactClick"] }] } });
+      </div>
+    </div>
+  `, styles: [":host{display:inline-block;width:32px;height:32px;flex-shrink:0}.mini-folder-container{position:relative;width:100%;height:100%;display:flex;flex-direction:column}.mini-folder-tab{width:50%;height:auto;display:block}.mini-folder-back{height:28px;border-radius:0 4px 4px;position:relative;margin-top:-1px}.mini-folder-front{position:absolute;bottom:0;left:0;right:0;height:24px;border-radius:4px;display:flex;align-items:center;justify-content:center;z-index:2;box-shadow:inset 0 8px 8px #fff3,inset 0 .5px .5px #ffffff4d}\n"] }]
+        }], propDecorators: { variant: [{
+                type: Input
+            }], iconName: [{
+                type: Input
+            }] } });
 
 /**
  * DsMobileSwiperComponent
@@ -13145,7 +13262,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
   `, styles: [":host{display:block;position:fixed;z-index:1000;pointer-events:none}.fab-container{position:relative;pointer-events:none;animation:fabEnter .3s cubic-bezier(.4,0,.2,1) forwards}@keyframes fabEnter{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}:host(.fab-bottom-right){bottom:88px;right:20px}:host(.fab-bottom-left){bottom:88px;left:20px}:host(.fab-bottom-center){bottom:88px;left:50%;transform:translate(-50%)}:host-context(body.plt-capacitor):not(.plt-desktop).fab-bottom-right,:host-context(body.plt-cordova):not(.plt-desktop).fab-bottom-right{bottom:calc(64px + env(safe-area-inset-bottom))!important}:host-context(body.plt-capacitor):not(.plt-desktop).fab-bottom-left,:host-context(body.plt-cordova):not(.plt-desktop).fab-bottom-left{bottom:calc(64px + env(safe-area-inset-bottom))!important}:host-context(body.plt-capacitor):not(.plt-desktop).fab-bottom-center,:host-context(body.plt-cordova):not(.plt-desktop).fab-bottom-center{bottom:calc(64px + env(safe-area-inset-bottom))!important}@supports (padding-right: env(safe-area-inset-right)){:host(.fab-bottom-right){right:calc(20px + env(safe-area-inset-right))}}@supports (padding-left: env(safe-area-inset-left)){:host(.fab-bottom-left){left:calc(20px + env(safe-area-inset-left))}}@media (min-width: 768px){:host-context(.plt-desktop).fab-bottom-right{bottom:40px;right:40px}:host-context(.plt-desktop).fab-bottom-left{bottom:40px;left:40px}:host-context(.plt-desktop).fab-bottom-center{bottom:40px}@supports (padding-right: env(safe-area-inset-right)){:host-context(.plt-desktop).fab-bottom-right{right:calc(40px + env(safe-area-inset-right))}}@supports (padding-left: env(safe-area-inset-left)){:host-context(.plt-desktop).fab-bottom-left{left:calc(40px + env(safe-area-inset-left))}}}.fab-button{pointer-events:auto;display:block}.fab-button::ng-deep button{width:56px!important;height:56px!important;min-width:56px!important;min-height:56px!important;border-radius:50%!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important;background:var(--color-background-brand)!important;color:var(--color-primary-content)!important;border:none!important;box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f;transition:all .2s cubic-bezier(.4,0,.2,1)}.fab-button::ng-deep button:hover:not(:disabled){background:var(--color-brand-base-hover, var(--color-background-brand))!important;box-shadow:0 5px 7px -2px #0003,0 8px 14px #00000024,0 2px 22px #0000001f;transform:scale(1.05)}.fab-button::ng-deep button:active:not(:disabled){box-shadow:0 2px 4px -1px #0003,0 4px 8px #00000024,0 1px 14px #0000001f;transform:scale(.95)}.fab-button::ng-deep button:disabled{opacity:.5;cursor:not-allowed;box-shadow:0 2px 4px -1px #0000001a,0 4px 8px #00000014,0 1px 14px #0000000f}.fab-button::ng-deep button .btn__icon,.fab-button::ng-deep button .btn__icon svg{color:var(--color-primary-content)!important;fill:var(--color-primary-content)!important}.fab-button::ng-deep button .btn__icon{display:flex!important;align-items:center!important;justify-content:center!important;flex-shrink:0!important}.fab-button::ng-deep button .btn__icon svg{width:24px!important;height:24px!important}\n"] }]
         }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], fabClick: [{ type: i0.Output, args: ["fabClick"] }] } });
 
-// Mobile Page Components
+// Page Components
 
 /**
  * PostsService
@@ -15161,123 +15278,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
   `, styles: [".inquiries-container{display:flex;flex-direction:column}.inquiry-list-wrapper{display:flex;flex-direction:column;margin-top:-8px}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center}.empty-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;color:var(--color-text-primary);margin:16px 0 8px}.empty-state-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);color:var(--color-text-secondary);margin:0}\n"] }]
         }], ctorParameters: () => [{ type: UserService }, { type: i1.NavController }, { type: DsMobileNewInquiryModalService }] });
 
-/**
- * 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>
- * ```
- */
-class DsMobileCardInlineBannerComponent {
-    /**
-     * Banner title (e.g., "New messages", "Unread messages")
-     */
-    title = input.required(...(ngDevMode ? [{ debugName: "title" }] : []));
-    /**
-     * Timestamp text (e.g., "2 min ago", "Just now")
-     */
-    timestamp = input('', ...(ngDevMode ? [{ debugName: "timestamp" }] : []));
-    /**
-     * Number of unread items (optional, shows badge if > 0)
-     */
-    unreadCount = input(0, ...(ngDevMode ? [{ debugName: "unreadCount" }] : []));
-    /**
-     * Layout variant
-     * - 'default' - Standard padding and column layout
-     * - 'compact' - Reduced padding and row layout
-     */
-    layout = input('default', ...(ngDevMode ? [{ debugName: "layout" }] : []));
-    /**
-     * Emits when the banner is clicked
-     */
-    bannerClick = output();
-    handleBannerClick() {
-        this.bannerClick.emit();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobileCardInlineBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsMobileCardInlineBannerComponent, isStandalone: true, selector: "ds-mobile-card-inline-banner", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, timestamp: { classPropertyName: "timestamp", publicName: "timestamp", isSignal: true, isRequired: false, transformFunction: null }, unreadCount: { classPropertyName: "unreadCount", publicName: "unreadCount", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { bannerClick: "bannerClick" }, ngImport: i0, template: `
-    <ds-mobile-card-inline
-      [variant]="layout()"
-      (cardClick)="handleBannerClick()">
-      
-      <div content-leading class="item-avatar">
-        <ds-avatar
-          type="icon"
-          [iconName]="'remixNotificationLine'"
-          [size]="layout() === 'compact' ? 'sm' : 'md'"
-        />
-      </div>
-      
-      <div content-main class="item-content">
-        <div class="item-name">{{ title() }}</div>
-        
-        @if (timestamp()) {
-          <div class="item-meta">
-            <span>{{ timestamp() }}</span>
-          </div>
-        }
-      </div>
-      
-      <div content-trailing class="item-trailing">
-        @if (unreadCount() && unreadCount()! > 0) {
-          <span class="unread-badge">{{ unreadCount() }}</span>
-        }
-        <ds-icon name="remixArrowRightSLine" size="20px" />
-      </div>
-    </ds-mobile-card-inline>
-  `, isInline: true, styles: [".unread-badge{min-width:24px;height:16px;padding:0 6px;border-radius:10px;background:var(--color-background-neutral-tertiary, #e5e5e5);color:var(--color-text-primary, #1a1a1a);font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:600;display:flex;align-items:center;justify-content:center;line-height:1;margin-right:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }, { kind: "component", type: DsAvatarComponent, selector: "ds-avatar", inputs: ["type", "size", "initials", "src", "alt", "iconName", "iconColor"] }, { kind: "component", type: DsMobileCardInlineComponent, selector: "ds-mobile-card-inline", inputs: ["variant", "disabled"], outputs: ["cardClick"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobileCardInlineBannerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ds-mobile-card-inline-banner', standalone: true, imports: [CommonModule, DsIconComponent, DsAvatarComponent, DsMobileCardInlineComponent], template: `
-    <ds-mobile-card-inline
-      [variant]="layout()"
-      (cardClick)="handleBannerClick()">
-      
-      <div content-leading class="item-avatar">
-        <ds-avatar
-          type="icon"
-          [iconName]="'remixNotificationLine'"
-          [size]="layout() === 'compact' ? 'sm' : 'md'"
-        />
-      </div>
-      
-      <div content-main class="item-content">
-        <div class="item-name">{{ title() }}</div>
-        
-        @if (timestamp()) {
-          <div class="item-meta">
-            <span>{{ timestamp() }}</span>
-          </div>
-        }
-      </div>
-      
-      <div content-trailing class="item-trailing">
-        @if (unreadCount() && unreadCount()! > 0) {
-          <span class="unread-badge">{{ unreadCount() }}</span>
-        }
-        <ds-icon name="remixArrowRightSLine" size="20px" />
-      </div>
-    </ds-mobile-card-inline>
-  `, styles: [".unread-badge{min-width:24px;height:16px;padding:0 6px;border-radius:10px;background:var(--color-background-neutral-tertiary, #e5e5e5);color:var(--color-text-primary, #1a1a1a);font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:600;display:flex;align-items:center;justify-content:center;line-height:1;margin-right:8px}\n"] }]
-        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], timestamp: [{ type: i0.Input, args: [{ isSignal: true, alias: "timestamp", required: false }] }], unreadCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "unreadCount", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], bannerClick: [{ type: i0.Output, args: ["bannerClick"] }] } });
-
 class MobileInquiryDetailPageComponent {
     userService;
     lightbox;
@@ -17134,5 +17134,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ActionCommentComponent, ActionLikeComponent, ContentRowComponent, DsAvatarWithBadgeComponent, DsMobileActionsBottomSheetComponent, DsMobileAttachmentPreviewComponent, DsMobileBottomSheetService, DsMobileChatModalComponent, DsMobileChatModalService, DsMobileActionsBottomSheetComponent as DsMobileCommentActionsBottomSheetComponent, DsMobileCommentComponent, DsMobileContactListItemComponent, DsMobileContentComponent, DsMobileContentSectionComponent, 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, 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, DsMobileCardInlineBannerComponent, DsMobileCardInlineComponent, DsMobileCardInlineContactComponent, DsMobileCardInlineFileComponent, DsMobileChatModalComponent, DsMobileChatModalService, DsMobileActionsBottomSheetComponent as DsMobileCommentActionsBottomSheetComponent, DsMobileCommentComponent, DsMobileContactListItemComponent, DsMobileContentComponent, DsMobileContentSectionComponent, 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, 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 };
 //# sourceMappingURL=propbinder-mobile-design.mjs.map