@propbinder/mobile-design 0.2.7 → 0.2.8

package/fesm2022/propbinder-mobile-design.mjs

@@ -11799,6 +11799,264 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
   `, 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-primary-surface, #6B5FF5);color:var(--color-primary-content, #ffffff);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-primary-surface, #6B5FF5);color:var(--color-primary-content, #ffffff);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
  *
@@ -13500,216 +13758,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
@@ -16921,123 +17038,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-primary-surface, #6B5FF5);color:var(--color-primary-content, #ffffff);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-primary-surface, #6B5FF5);color:var(--color-primary-content, #ffffff);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;
@@ -18916,5 +18916,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, DsMobileBottomSheetWrapperComponent, DsMobileChatModalComponent, DsMobileChatModalService, DsMobileActionsBottomSheetComponent as DsMobileCommentActionsBottomSheetComponent, DsMobileCommentComponent, DsMobileContactListItemComponent, DsMobileContentComponent, DsMobileContentSectionComponent, DsMobileDropdownComponent, DsMobileEmptyStateComponent, DsMobileFabComponent, DsMobileHandbookDetailModalComponent, DsMobileHandbookDetailModalService, DsMobileHandbookFolderComponent, DsMobileHandbookFolderMiniComponent, DsMobileHeaderContentComponent, DsMobileHeaderContentTileComponent, DsMobileInlinePhotoComponent, DsMobileInlineTabsComponent, DsMobileInteractiveListItemInquiryComponent, DsMobileInteractiveListItemMessageComponent, DsMobileInteractiveListItemPostComponent, DsMobileLightboxImageComponent as DsMobileLightboxComponent, DsMobileLightboxFooterComponent, DsMobileLightboxHeaderComponent, DsMobileLightboxImageComponent, DsMobileLightboxPdfComponent, DsMobileLightboxService, DsMobileListItemComponent, DsMobileListItemStaticComponent, DsMobileLongPressDirective, DsMobileMessageBubbleComponent, DsMobileMessageComposerComponent, DsMobileModalBaseComponent, DsMobileModalService, DsMobileNewInquiryModalComponent, DsMobileNewInquiryModalService, DsMobilePageDetailsComponent, DsMobilePageMainComponent, DsMobileActionsBottomSheetComponent as DsMobilePostActionsBottomSheetComponent, DsMobilePostComposerComponent, DsMobilePostCreateBottomSheetComponent, DsMobilePostDetailModalComponent, DsMobilePostDetailModalService, DsMobileProfileActionsSheetComponent, DsMobileTabBarComponent, DsMobileTabsComponent, DsTextInputComponent, MobileCommunityPageComponent, MobileHandbookPageComponent, MobileHomePageComponent, MobileInquiriesPageComponent, MobileInquiryDetailPageComponent, MobileModalBase, MobilePageBase, MobilePostDetailPageComponent, MobileTabsExampleComponent, PostActionsComponent, PostAttachmentsComponent, PostContentComponent, PostCreatePageComponent, PostMediaComponent, PostPdfAttachmentComponent, PostTextComponent, SectionHeaderComponent, SignInPageComponent, TileContentComponent, TileIconComponent, TileLabelComponent, TileValueComponent, UserService, WhitelabelDemoPage, WhitelabelService, customBackTransition, customPageTransition };
+export { ActionCommentComponent, ActionLikeComponent, ContentRowComponent, DsAvatarWithBadgeComponent, DsMobileActionsBottomSheetComponent, DsMobileAttachmentPreviewComponent, DsMobileBottomSheetService, DsMobileBottomSheetWrapperComponent, DsMobileCardInlineBannerComponent, DsMobileCardInlineComponent, DsMobileCardInlineContactComponent, DsMobileCardInlineFileComponent, DsMobileChatModalComponent, DsMobileChatModalService, DsMobileActionsBottomSheetComponent as DsMobileCommentActionsBottomSheetComponent, DsMobileCommentComponent, DsMobileContactListItemComponent, DsMobileContentComponent, DsMobileContentSectionComponent, DsMobileDropdownComponent, DsMobileEmptyStateComponent, DsMobileFabComponent, DsMobileHandbookDetailModalComponent, DsMobileHandbookDetailModalService, DsMobileHandbookFolderComponent, DsMobileHandbookFolderMiniComponent, DsMobileHeaderContentComponent, DsMobileHeaderContentTileComponent, DsMobileInlinePhotoComponent, DsMobileInlineTabsComponent, DsMobileInteractiveListItemInquiryComponent, DsMobileInteractiveListItemMessageComponent, DsMobileInteractiveListItemPostComponent, DsMobileLightboxImageComponent as DsMobileLightboxComponent, DsMobileLightboxFooterComponent, DsMobileLightboxHeaderComponent, DsMobileLightboxImageComponent, DsMobileLightboxPdfComponent, DsMobileLightboxService, DsMobileListItemComponent, DsMobileListItemStaticComponent, DsMobileLongPressDirective, DsMobileMessageBubbleComponent, DsMobileMessageComposerComponent, DsMobileModalBaseComponent, DsMobileModalService, DsMobileNewInquiryModalComponent, DsMobileNewInquiryModalService, DsMobilePageDetailsComponent, DsMobilePageMainComponent, DsMobileActionsBottomSheetComponent as DsMobilePostActionsBottomSheetComponent, DsMobilePostComposerComponent, DsMobilePostCreateBottomSheetComponent, DsMobilePostDetailModalComponent, DsMobilePostDetailModalService, DsMobileProfileActionsSheetComponent, DsMobileTabBarComponent, DsMobileTabsComponent, DsTextInputComponent, MobileCommunityPageComponent, MobileHandbookPageComponent, MobileHomePageComponent, MobileInquiriesPageComponent, MobileInquiryDetailPageComponent, MobileModalBase, MobilePageBase, MobilePostDetailPageComponent, MobileTabsExampleComponent, PostActionsComponent, PostAttachmentsComponent, PostContentComponent, PostCreatePageComponent, PostMediaComponent, PostPdfAttachmentComponent, PostTextComponent, SectionHeaderComponent, SignInPageComponent, TileContentComponent, TileIconComponent, TileLabelComponent, TileValueComponent, UserService, WhitelabelDemoPage, WhitelabelService, customBackTransition, customPageTransition };
 //# sourceMappingURL=propbinder-mobile-design.mjs.map