@propbinder/mobile-design 0.2.16 → 0.2.21

package/fesm2022/propbinder-mobile-design.mjs

@@ -788,7 +788,7 @@ class MobilePageBase {
     ngOnDestroy() {
         // Clean up Capacitor listener if it exists
         if (this.networkListenerId) {
-            Network.removeAllListeners().catch(err => {
+            Network.removeAllListeners().catch((err) => {
                 console.warn('Failed to remove network listeners', err);
             });
         }
@@ -2888,7 +2888,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  * Demonstrates the whitelabeling system with theme selection, brand colors, and logo previews.
  * Opens as a full-screen modal similar to post details.
  */
-class WhitelabelDemoModalComponent {
+let WhitelabelDemoModalComponent$1 = class WhitelabelDemoModalComponent {
     whitelabelService = inject(WhitelabelService);
     modalController = inject(ModalController);
     // Current active theme
@@ -3509,8 +3509,8 @@ class WhitelabelDemoModalComponent {
         </div>
     </ion-content>
   `, isInline: true, styles: [":host{display:flex;flex-direction:column;height:100%;width:100%;background:var(--color-background-neutral-primary, #ffffff)}.modal-header{flex-shrink:0;background:var(--color-background-neutral-primary, #ffffff);border-bottom:1px solid var(--border-color-default, #e0e0e0);padding:0 16px}ion-content,.modal-content{--background: #ffffff;flex:1;width:100%}.header-content{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px}.header-title{font-family:Brockmann,sans-serif;font-size:17px;font-weight:600;color:var(--color-text-primary, #1a1a1a);flex:1}.close-button{flex-shrink:0;border-radius:50%}.close-button::ng-deep button{border-radius:50%!important;width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important;background:var(--color-background-neutral-secondary, #f5f5f5)!important;color:var(--color-text-primary, #1a1a1a)!important}.demo-container{padding:20px;max-width:600px;margin:0 auto;width:100%}.demo-section{margin-bottom:32px}.demo-section h2{margin-bottom:16px;font-size:18px;font-weight:600;color:#333}.theme-buttons{display:flex;gap:12px;flex-wrap:wrap}.theme-btn{padding:8px 16px;border-radius:8px;font-size:14px;font-weight:500;border:none;cursor:pointer;transition:all .2s ease;background:#e0e0e0;color:#333}.theme-btn:active{transform:scale(.98)}.theme-btn.active{background:var(--color-secondary-surface);color:var(--color-secondary-content)}.logo-preview{display:flex;align-items:center;justify-content:center;padding:24px;background:var(--color-brand-secondary);border-radius:12px;min-height:80px}.logomark-preview{display:flex;align-items:center;justify-content:center;padding:24px;background:#fff;border:1px solid #e0e0e0;border-radius:12px;min-height:80px}.preview-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.preview-tile{background:#fff;border-radius:12px}.preview-tile h3{font-size:13px;font-weight:600;color:#666;margin-top:0;margin-bottom:12px}.app-icon-sizes{display:flex;gap:24px;align-items:flex-end;justify-content:center;padding:24px;background:#fff;border-radius:12px;border:1px solid var(--border-color-default, #e0e0e0);flex-wrap:wrap}.app-icon-demo{display:flex;flex-direction:column;align-items:center;gap:12px;--app-icon-background: var(--color-app-icon-surface)}.app-icon-demo span{font-size:12px;color:#666;font-family:monospace}.color-section{background:#fff;border-radius:12px}.color-swatches{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px}.swatch{padding:16px;border-radius:8px;text-align:center}.swatch-label{font-size:12px;font-weight:600;margin-bottom:4px}.swatch-value{font-size:11px;opacity:.8;font-family:monospace}.swatch--app-icon-surface{background:var(--color-app-icon-surface);color:var(--color-app-icon-content)}.swatch--app-icon-content{background:var(--color-app-icon-content);color:var(--color-app-icon-surface);border:1px solid #e0e0e0}.swatch--accent{background:var(--color-accent);color:var(--color-on-accent)}.swatch--on-accent{background:var(--color-on-accent);color:var(--color-accent);border:1px solid #e0e0e0}.swatch--header-surface{background:var(--color-header-surface);color:var(--color-header-content)}.swatch--header-content{background:var(--color-header-content);color:var(--color-header-surface);border:1px solid #e0e0e0}.color-inputs{display:flex;flex-direction:column;gap:12px}.color-group-label{font-size:13px;font-weight:600;color:#333;margin-top:8px}.color-row{display:flex;align-items:center;gap:12px}.color-row label{min-width:70px;font-size:13px;color:#666}.color-row input[type=color]{width:40px;height:32px;border:none;border-radius:6px;cursor:pointer;padding:0}.color-row input[type=text]{flex:1;padding:8px 12px;border:1px solid #ddd;border-radius:6px;font-family:monospace;font-size:13px}.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0}.toggle-row label{font-size:14px;color:#333;font-weight:500}.toggle-row input[type=checkbox]{width:48px;height:28px;-webkit-appearance:none;appearance:none;background:#ddd;border-radius:14px;position:relative;cursor:pointer;transition:background .2s ease;flex-shrink:0}.toggle-row input[type=checkbox]:checked{background:var(--color-accent)}.toggle-row input[type=checkbox]:before{content:\"\";position:absolute;width:24px;height:24px;border-radius:50%;background:#fff;top:2px;left:2px;transition:transform .2s ease;box-shadow:0 1px 3px #0003}.toggle-row input[type=checkbox]:checked:before{transform:translate(20px)}.radio-group{display:flex;gap:16px;margin-bottom:16px}.radio-option{display:flex;align-items:center;gap:8px;cursor:pointer}.radio-option input[type=radio]{width:18px;height:18px;cursor:pointer;accent-color:var(--color-accent)}.radio-option label{font-size:14px;color:#333;cursor:pointer;font-weight:500}.bg-preview{height:80px;border-radius:8px;margin-bottom:16px;border:1px solid #e0e0e0;position:relative;overflow:hidden}.bg-preview:after{content:\"Preview\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:12px;font-weight:600;color:#0000004d;text-shadow:0 1px 2px rgba(255,255,255,.5)}@supports (padding: env(safe-area-inset-bottom)){.demo-container{padding-bottom:calc(20px + env(safe-area-inset-bottom))}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: DsLogoComponent, selector: "ds-logo", inputs: ["variant", "size", "customHeight", "customWidth"] }, { kind: "component", type: DsAvatarWithBadgeComponent, selector: "ds-avatar-with-badge", inputs: ["type", "size", "initials", "src", "iconName", "showBadge", "badgePosition"] }, { kind: "component", type: DsAppIconComponent, selector: "ds-app-icon", inputs: ["size"] }, { kind: "component", type: DsIconButtonComponent, selector: "ds-icon-button", inputs: ["variant", "size", "icon", "disabled", "loading", "pressed", "expanded", "ariaLabel", "tooltip", "tooltipDisabled", "tooltipPlacement"], outputs: ["clicked", "focused", "blurred"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WhitelabelDemoModalComponent, decorators: [{
+};
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WhitelabelDemoModalComponent$1, decorators: [{
             type: Component,
             args: [{ selector: 'ds-whitelabel-demo-modal', standalone: true, imports: [
                         CommonModule,
@@ -3907,7 +3907,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  * }
  * ```
  */
-class WhitelabelDemoModalService {
+let WhitelabelDemoModalService$1 = class WhitelabelDemoModalService {
     modalController;
     constructor(modalController) {
         this.modalController = modalController;
@@ -3921,7 +3921,7 @@ class WhitelabelDemoModalService {
         try {
             // console.log('[WhitelabelDemoModal] Opening...');
             const modal = await this.modalController.create({
-                component: WhitelabelDemoModalComponent,
+                component: WhitelabelDemoModalComponent$1,
                 cssClass: 'ds-whitelabel-demo-modal',
                 mode: 'ios',
                 presentingElement: document.querySelector('ion-router-outlet') || undefined,
@@ -3961,8 +3961,8 @@ class WhitelabelDemoModalService {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WhitelabelDemoModalService, deps: [{ token: i1.ModalController }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WhitelabelDemoModalService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WhitelabelDemoModalService, decorators: [{
+};
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WhitelabelDemoModalService$1, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -4015,7 +4015,7 @@ class DsMobilePageMainComponent extends MobilePageBase {
     modalController = inject(ModalController);
     router = inject(Router);
     userService = inject(UserService);
-    whitelabelDemoModal = inject(WhitelabelDemoModalService);
+    whitelabelDemoModal = inject(WhitelabelDemoModalService$1);
     // Computed property to check if running on native platform
     isNativePlatform = computed(() => this.platform.is('ios') || this.platform.is('android') || this.platform.is('capacitor'), ...(ngDevMode ? [{ debugName: "isNativePlatform" }] : []));
     // Inputs - Title
@@ -5322,6 +5322,200 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             args: [{ selector: 'tile-value', standalone: true, template: `<ng-content />`, styles: [":host{font-family:Brockmann,sans-serif;font-size:var(--font-size-lg);font-weight:600;line-height:26px;letter-spacing:-.72px;color:var(--color-header-content, #ffffff);display:block}\n"] }]
         }] });
 
+/**
+ * DsMobileSystemMessageBannerComponent
+ *
+ * Full-width centered banner component for displaying system messages in chat conversations.
+ * Uses the same text styling as message bubbles for consistency.
+ *
+ * Features:
+ * - Full-width centered layout
+ * - Subtle background with theming support
+ * - Same typography as message bubbles
+ * - Optional icon support
+ *
+ * Common use cases:
+ * - Inquiry status updates ("Your inquiry has been assigned to...")
+ * - System notifications ("This inquiry is marked as resolved")
+ * - Auto-replies ("We aim to respond within 24 hours...")
+ * - Time/date separators
+ *
+ * @example
+ * ```html
+ * <!-- Simple system message -->
+ * <ds-mobile-system-message-banner
+ *   [message]="'Ricki Meihlen har overtaget din henvendelse og vil kontakte dig snart.'">
+ * </ds-mobile-system-message-banner>
+ *
+ * <!-- With icon -->
+ * <ds-mobile-system-message-banner
+ *   [message]="'Vi bestræber os på at svare inden for 24 timer på hverdage.'"
+ *   [iconName]="'remixInformationLine'">
+ * </ds-mobile-system-message-banner>
+ * ```
+ */
+class DsMobileSystemMessageBannerComponent {
+    /**
+     * System message text to display
+     */
+    message = input.required(...(ngDevMode ? [{ debugName: "message" }] : []));
+    /**
+     * Optional icon name (currently using inline SVG for info icon)
+     * Can be extended to support full icon library integration
+     */
+    iconName = input('', ...(ngDevMode ? [{ debugName: "iconName" }] : []));
+    /**
+     * Whether this system message appears directly after a timestamp
+     * When true, removes top padding to reduce spacing
+     */
+    afterTimestamp = input(false, ...(ngDevMode ? [{ debugName: "afterTimestamp" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileSystemMessageBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DsMobileSystemMessageBannerComponent, isStandalone: true, selector: "ds-mobile-system-message-banner", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null }, afterTimestamp: { classPropertyName: "afterTimestamp", publicName: "afterTimestamp", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.after-timestamp": "afterTimestamp()" } }, ngImport: i0, template: `
+    <div class="system-message-container">
+      <div class="system-message-content">
+        @if (iconName()) {
+          <span class="system-message-icon">
+            <!-- Icon slot - you can add ds-icon component here if needed -->
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM11 7h2v2h-2V7zm0 4h2v6h-2v-6z"/>
+            </svg>
+          </span>
+        }
+        <p class="system-message-text">{{ message() }}</p>
+      </div>
+    </div>
+  `, isInline: true, styles: [":host{display:block;width:100%;padding:12px 0}:host(.after-timestamp){padding-top:0}.system-message-container{display:flex;justify-content:center;align-items:center;width:100%;padding:0 16px}.system-message-content{display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 16px;background:var(--color-background-neutral-secondary, #f5f5f5);border-radius:16px;max-width:85%;text-align:center}.system-message-icon{flex-shrink:0;width:16px;height:16px;color:var(--color-text-tertiary, #a0a0a0)}.system-message-text{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:20px;letter-spacing:-.3px;color:var(--color-text-secondary, #666666);margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileSystemMessageBannerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-mobile-system-message-banner', standalone: true, imports: [CommonModule], host: {
+                        '[class.after-timestamp]': 'afterTimestamp()'
+                    }, template: `
+    <div class="system-message-container">
+      <div class="system-message-content">
+        @if (iconName()) {
+          <span class="system-message-icon">
+            <!-- Icon slot - you can add ds-icon component here if needed -->
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM11 7h2v2h-2V7zm0 4h2v6h-2v-6z"/>
+            </svg>
+          </span>
+        }
+        <p class="system-message-text">{{ message() }}</p>
+      </div>
+    </div>
+  `, styles: [":host{display:block;width:100%;padding:12px 0}:host(.after-timestamp){padding-top:0}.system-message-container{display:flex;justify-content:center;align-items:center;width:100%;padding:0 16px}.system-message-content{display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 16px;background:var(--color-background-neutral-secondary, #f5f5f5);border-radius:16px;max-width:85%;text-align:center}.system-message-icon{flex-shrink:0;width:16px;height:16px;color:var(--color-text-tertiary, #a0a0a0)}.system-message-text{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:20px;letter-spacing:-.3px;color:var(--color-text-secondary, #666666);margin:0}\n"] }]
+        }], propDecorators: { message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: true }] }], iconName: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconName", required: false }] }], afterTimestamp: [{ type: i0.Input, args: [{ isSignal: true, alias: "afterTimestamp", required: false }] }] } });
+
+/**
+ * DsMobileFileAttachmentComponent
+ *
+ * File attachment display for various document types.
+ * Shows file info card with icon, filename, and file size.
+ * Supports PDF and generic document formats.
+ * Emits click event to open file in viewer.
+ *
+ * @example
+ * ```html
+ * <ds-mobile-file-attachment
+ *   [fileName]="'Document.pdf'"
+ *   [fileSize]="'1.2 MB'"
+ *   [variant]="'pdf'"
+ *   (fileClick)="openFile()">
+ * </ds-mobile-file-attachment>
+ * ```
+ */
+class DsMobileFileAttachmentComponent {
+    /**
+     * 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" }] : []));
+    /**
+     * 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(event) {
+        event.stopPropagation();
+        this.fileClick.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileFileAttachmentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DsMobileFileAttachmentComponent, isStandalone: true, selector: "ds-mobile-file-attachment", 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 } }, outputs: { fileClick: "fileClick" }, host: { listeners: { "click": "handleClick($event)" } }, ngImport: i0, template: `
+    <div class="file-avatar" [class.pdf]="variant() === 'pdf'" [class.doc]="variant() === 'doc'">
+      <ds-avatar
+        type="icon"
+        [iconName]="getIconName()"
+        size="lg"
+      />
+    </div>
+    
+    <div class="file-info">
+      <div class="file-name">{{ fileName() }}</div>
+      @if (fileSize()) {
+        <div class="file-meta">{{ getFileTypeLabel() }} · {{ fileSize() }}</div>
+      } @else {
+        <div class="file-meta">{{ getFileTypeLabel() }}</div>
+      }
+    </div>
+    
+    <ds-icon 
+      name="remixArrowRightSLine" 
+      size="20px"
+      class="open-icon"
+    />
+  `, isInline: true, styles: [":host{display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--color-background-neutral-secondary, #f5f5f5);border-radius:16px;cursor:pointer;transition:all .2s ease}:host:hover{background:var(--color-background-neutral-secondary-hover, #ebebeb)}:host:active{transform:scale(.98)}.file-avatar{flex-shrink:0}.file-avatar.pdf::ng-deep .avatar--icon{background-color:#ff5757!important}.file-avatar.doc::ng-deep .avatar--icon{background-color:var(--color-blue-base, #3B82F6)!important}.file-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.file-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);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-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)}.open-icon{color:var(--color-text-tertiary, #a3a3a3);flex-shrink:0}\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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileFileAttachmentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-mobile-file-attachment', standalone: true, imports: [CommonModule, DsAvatarComponent, DsIconComponent], host: {
+                        '(click)': 'handleClick($event)'
+                    }, template: `
+    <div class="file-avatar" [class.pdf]="variant() === 'pdf'" [class.doc]="variant() === 'doc'">
+      <ds-avatar
+        type="icon"
+        [iconName]="getIconName()"
+        size="lg"
+      />
+    </div>
+    
+    <div class="file-info">
+      <div class="file-name">{{ fileName() }}</div>
+      @if (fileSize()) {
+        <div class="file-meta">{{ getFileTypeLabel() }} · {{ fileSize() }}</div>
+      } @else {
+        <div class="file-meta">{{ getFileTypeLabel() }}</div>
+      }
+    </div>
+    
+    <ds-icon 
+      name="remixArrowRightSLine" 
+      size="20px"
+      class="open-icon"
+    />
+  `, styles: [":host{display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--color-background-neutral-secondary, #f5f5f5);border-radius:16px;cursor:pointer;transition:all .2s ease}:host:hover{background:var(--color-background-neutral-secondary-hover, #ebebeb)}:host:active{transform:scale(.98)}.file-avatar{flex-shrink:0}.file-avatar.pdf::ng-deep .avatar--icon{background-color:#ff5757!important}.file-avatar.doc::ng-deep .avatar--icon{background-color:var(--color-blue-base, #3B82F6)!important}.file-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.file-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);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-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)}.open-icon{color:var(--color-text-tertiary, #a3a3a3);flex-shrink:0}\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 }] }], fileClick: [{ type: i0.Output, args: ["fileClick"] }] } });
+
 /**
  * DsMobileCommentComponent
  *
@@ -9703,107 +9897,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             }] } });
 
 /**
- * DsMobileSystemMessageBannerComponent
- *
- * Full-width centered banner component for displaying system messages in chat conversations.
- * Uses the same text styling as message bubbles for consistency.
- *
- * Features:
- * - Full-width centered layout
- * - Subtle background with theming support
- * - Same typography as message bubbles
- * - Optional icon support
- *
- * Common use cases:
- * - Inquiry status updates ("Your inquiry has been assigned to...")
- * - System notifications ("This inquiry is marked as resolved")
- * - Auto-replies ("We aim to respond within 24 hours...")
- * - Time/date separators
- *
- * @example
- * ```html
- * <!-- Simple system message -->
- * <ds-mobile-system-message-banner
- *   [message]="'Ricki Meihlen har overtaget din henvendelse og vil kontakte dig snart.'">
- * </ds-mobile-system-message-banner>
+ * DsMobileLightboxHeaderComponent
  *
- * <!-- With icon -->
- * <ds-mobile-system-message-banner
- *   [message]="'Vi bestræber os på at svare inden for 24 timer på hverdage.'"
- *   [iconName]="'remixInformationLine'">
- * </ds-mobile-system-message-banner>
- * ```
+ * Shared header component for all lightbox types (image, PDF, etc.)
+ * Displays author information and close button with consistent styling.
  */
-class DsMobileSystemMessageBannerComponent {
+class DsMobileLightboxHeaderComponent {
     /**
-     * System message text to display
+     * Author information to display
      */
-    message = input.required(...(ngDevMode ? [{ debugName: "message" }] : []));
+    author = input(...(ngDevMode ? [undefined, { debugName: "author" }] : []));
     /**
-     * Optional icon name (currently using inline SVG for info icon)
-     * Can be extended to support full icon library integration
+     * Emitted when close button is clicked
      */
-    iconName = input('', ...(ngDevMode ? [{ debugName: "iconName" }] : []));
+    closeClick = output();
     /**
-     * Whether this system message appears directly after a timestamp
-     * When true, removes top padding to reduce spacing
-     */
-    afterTimestamp = input(false, ...(ngDevMode ? [{ debugName: "afterTimestamp" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileSystemMessageBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DsMobileSystemMessageBannerComponent, isStandalone: true, selector: "ds-mobile-system-message-banner", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null }, afterTimestamp: { classPropertyName: "afterTimestamp", publicName: "afterTimestamp", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.after-timestamp": "afterTimestamp()" } }, ngImport: i0, template: `
-    <div class="system-message-container">
-      <div class="system-message-content">
-        @if (iconName()) {
-          <span class="system-message-icon">
-            <!-- Icon slot - you can add ds-icon component here if needed -->
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-              <path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM11 7h2v2h-2V7zm0 4h2v6h-2v-6z"/>
-            </svg>
-          </span>
-        }
-        <p class="system-message-text">{{ message() }}</p>
-      </div>
-    </div>
-  `, isInline: true, styles: [":host{display:block;width:100%;padding:12px 0}:host(.after-timestamp){padding-top:0}.system-message-container{display:flex;justify-content:center;align-items:center;width:100%;padding:0 16px}.system-message-content{display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 16px;background:var(--color-background-neutral-secondary, #f5f5f5);border-radius:16px;max-width:85%;text-align:center}.system-message-icon{flex-shrink:0;width:16px;height:16px;color:var(--color-text-tertiary, #a0a0a0)}.system-message-text{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:20px;letter-spacing:-.3px;color:var(--color-text-secondary, #666666);margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileSystemMessageBannerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ds-mobile-system-message-banner', standalone: true, imports: [CommonModule], host: {
-                        '[class.after-timestamp]': 'afterTimestamp()'
-                    }, template: `
-    <div class="system-message-container">
-      <div class="system-message-content">
-        @if (iconName()) {
-          <span class="system-message-icon">
-            <!-- Icon slot - you can add ds-icon component here if needed -->
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-              <path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM11 7h2v2h-2V7zm0 4h2v6h-2v-6z"/>
-            </svg>
-          </span>
-        }
-        <p class="system-message-text">{{ message() }}</p>
-      </div>
-    </div>
-  `, styles: [":host{display:block;width:100%;padding:12px 0}:host(.after-timestamp){padding-top:0}.system-message-container{display:flex;justify-content:center;align-items:center;width:100%;padding:0 16px}.system-message-content{display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 16px;background:var(--color-background-neutral-secondary, #f5f5f5);border-radius:16px;max-width:85%;text-align:center}.system-message-icon{flex-shrink:0;width:16px;height:16px;color:var(--color-text-tertiary, #a0a0a0)}.system-message-text{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:20px;letter-spacing:-.3px;color:var(--color-text-secondary, #666666);margin:0}\n"] }]
-        }], propDecorators: { message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: true }] }], iconName: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconName", required: false }] }], afterTimestamp: [{ type: i0.Input, args: [{ isSignal: true, alias: "afterTimestamp", required: false }] }] } });
-
-/**
- * DsMobileLightboxHeaderComponent
- *
- * Shared header component for all lightbox types (image, PDF, etc.)
- * Displays author information and close button with consistent styling.
- */
-class DsMobileLightboxHeaderComponent {
-    /**
-     * Author information to display
-     */
-    author = input(...(ngDevMode ? [undefined, { debugName: "author" }] : []));
-    /**
-     * Emitted when close button is clicked
-     */
-    closeClick = output();
-    /**
-     * Emitted when share button is clicked
+     * Emitted when share button is clicked
      */
     shareClick = output();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileLightboxHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -16351,115 +16460,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
   `, styles: [":host{display:block;width:100%}.text-input-wrapper{position:relative;width:100%}.text-input{width:100%;height:48px;padding:0 16px;box-sizing:border-box;font-family:Brockmann,system-ui,-apple-system,sans-serif;font-size:var(--font-size-base);font-weight:400;line-height:1.4;color:var(--text-color-default-primary);background-color:var(--color-background-neutral-primary);border:1px solid var(--border-color-default);border-radius:8px;transition:border-color var(--transition-duration-fast) var(--ease-smooth),background-color var(--transition-duration-fast) var(--ease-smooth),box-shadow var(--transition-duration-fast) var(--ease-smooth);outline:none;-webkit-appearance:none;appearance:none}.text-input::placeholder{color:var(--text-color-default-tertiary)}.text-input:hover:not(:disabled):not(:focus){border-color:var(--border-color-default);background-color:var(--color-background-neutral-primary-hover)}.text-input:focus{border-color:var(--color-accent);background-color:var(--color-background-neutral-primary);box-shadow:0 0 0 3px var(--outline-color-default)}.text-input.error{border-color:var(--color-destructive-base)}.text-input.error:focus{border-color:var(--color-destructive-base);box-shadow:0 0 0 3px #dc26261a}.text-input:disabled{background-color:var(--color-background-neutral-disabled);border-color:var(--border-color-default);color:var(--text-color-default-disabled);cursor:not-allowed}.text-input:disabled::placeholder{color:var(--text-color-default-disabled)}.error-message{margin-top:8px;font-family:Brockmann,system-ui,-apple-system,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:1.4;color:var(--color-destructive-base)}\n"] }]
         }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], inputmode: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputmode", required: false }] }], autoClearError: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoClearError", required: false }] }], validator: [{ type: i0.Input, args: [{ isSignal: true, alias: "validator", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], blur: [{ type: i0.Output, args: ["blur"] }], focus: [{ type: i0.Output, args: ["focus"] }], errorCleared: [{ type: i0.Output, args: ["errorCleared"] }] } });
 
-/**
- * DsMobileFileAttachmentComponent
- *
- * File attachment display for various document types.
- * Shows file info card with icon, filename, and file size.
- * Supports PDF and generic document formats.
- * Emits click event to open file in viewer.
- *
- * @example
- * ```html
- * <ds-mobile-file-attachment
- *   [fileName]="'Document.pdf'"
- *   [fileSize]="'1.2 MB'"
- *   [variant]="'pdf'"
- *   (fileClick)="openFile()">
- * </ds-mobile-file-attachment>
- * ```
- */
-class DsMobileFileAttachmentComponent {
-    /**
-     * 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" }] : []));
-    /**
-     * 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(event) {
-        event.stopPropagation();
-        this.fileClick.emit();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileFileAttachmentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DsMobileFileAttachmentComponent, isStandalone: true, selector: "ds-mobile-file-attachment", 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 } }, outputs: { fileClick: "fileClick" }, host: { listeners: { "click": "handleClick($event)" } }, ngImport: i0, template: `
-    <div class="file-avatar" [class.pdf]="variant() === 'pdf'" [class.doc]="variant() === 'doc'">
-      <ds-avatar
-        type="icon"
-        [iconName]="getIconName()"
-        size="lg"
-      />
-    </div>
-    
-    <div class="file-info">
-      <div class="file-name">{{ fileName() }}</div>
-      @if (fileSize()) {
-        <div class="file-meta">{{ getFileTypeLabel() }} · {{ fileSize() }}</div>
-      } @else {
-        <div class="file-meta">{{ getFileTypeLabel() }}</div>
-      }
-    </div>
-    
-    <ds-icon 
-      name="remixArrowRightSLine" 
-      size="20px"
-      class="open-icon"
-    />
-  `, isInline: true, styles: [":host{display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--color-background-neutral-secondary, #f5f5f5);border-radius:16px;cursor:pointer;transition:all .2s ease}:host:hover{background:var(--color-background-neutral-secondary-hover, #ebebeb)}:host:active{transform:scale(.98)}.file-avatar{flex-shrink:0}.file-avatar.pdf::ng-deep .avatar--icon{background-color:#ff5757!important}.file-avatar.doc::ng-deep .avatar--icon{background-color:var(--color-blue-base, #3B82F6)!important}.file-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.file-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);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-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)}.open-icon{color:var(--color-text-tertiary, #a3a3a3);flex-shrink:0}\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"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileFileAttachmentComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ds-mobile-file-attachment', standalone: true, imports: [CommonModule, DsAvatarComponent, DsIconComponent], host: {
-                        '(click)': 'handleClick($event)'
-                    }, template: `
-    <div class="file-avatar" [class.pdf]="variant() === 'pdf'" [class.doc]="variant() === 'doc'">
-      <ds-avatar
-        type="icon"
-        [iconName]="getIconName()"
-        size="lg"
-      />
-    </div>
-    
-    <div class="file-info">
-      <div class="file-name">{{ fileName() }}</div>
-      @if (fileSize()) {
-        <div class="file-meta">{{ getFileTypeLabel() }} · {{ fileSize() }}</div>
-      } @else {
-        <div class="file-meta">{{ getFileTypeLabel() }}</div>
-      }
-    </div>
-    
-    <ds-icon 
-      name="remixArrowRightSLine" 
-      size="20px"
-      class="open-icon"
-    />
-  `, styles: [":host{display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--color-background-neutral-secondary, #f5f5f5);border-radius:16px;cursor:pointer;transition:all .2s ease}:host:hover{background:var(--color-background-neutral-secondary-hover, #ebebeb)}:host:active{transform:scale(.98)}.file-avatar{flex-shrink:0}.file-avatar.pdf::ng-deep .avatar--icon{background-color:#ff5757!important}.file-avatar.doc::ng-deep .avatar--icon{background-color:var(--color-blue-base, #3B82F6)!important}.file-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.file-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);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-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)}.open-icon{color:var(--color-text-tertiary, #a3a3a3);flex-shrink:0}\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 }] }], fileClick: [{ type: i0.Output, args: ["fileClick"] }] } });
-
 /**
  * DsMobileFabComponent
  *
@@ -19644,6 +19644,1093 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
   `, styles: [".activity-list{display:flex;flex-direction:column;gap:12px;position:relative}.activity-list ds-mobile-list-item:not(:last-child) [content-leading]:after{content:\"\";position:absolute;top:40px;left:50%;transform:translate(-50%);width:1px;height:calc(100% - 2px);background:var(--border-color-default, #e5e5e5);z-index:0}.activity-icon-wrapper{width:100%;height:100%;border-radius:8px;background:var(--color-background-neutral-secondary, #f5f5f5);display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;z-index:1}.avatar-wrapper{position:relative;display:flex;align-items:start;justify-content:center;flex-shrink:0;width:100%;height:100%;z-index:1}.avatar-badge{position:absolute;bottom:-6px;right:-6px;width:20px;height:20px;border-radius:8px;background:var(--color-brand-secondary, #5d5fef);display:flex;align-items:center;justify-content:center;border:2px solid var(--color-background-primary, #ffffff)}.avatar-badge svg{width:10px;position:relative;top:1px;fill:#fff}.activity-content{display:flex;flex-direction:column;gap:4px}.activity-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:500;line-height:20px;letter-spacing:-.3px;color:var(--text-color-default-primary, #202227);margin:0}.activity-title .actor-name{font-weight:600;color:var(--text-color-default-primary, #202227)}.activity-title .activity-text{color:var(--text-color-default-secondary, #545B66);font-weight:400}.activity-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:20px;letter-spacing:-.3px;color:var(--text-color-default-secondary, #545B66);margin:0}.activity-timestamp{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;letter-spacing:-.26px;color:var(--text-color-default-tertiary, #737373);display:flex;align-items:center;gap:4px;margin-top:2px}.detail-label{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;letter-spacing:-.26px;color:var(--text-color-default-tertiary, #737373)}.detail-value{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:24px;letter-spacing:-.3px;color:var(--text-color-default-primary, #202227)}.detail-value.description-text{padding:0 0 8px}.detail-tag{display:inline-flex;align-items:center;padding:4px 12px;border-radius:12px;background:var(--color-background-neutral-secondary, #f5f5f5);font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:500;color:var(--text-color-default-secondary, #525866);margin-top:4px;margin-bottom:10px;width:-moz-fit-content;width:fit-content}.photo-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.photo-add{width:100%;aspect-ratio:1;border-radius:12px;border:1px dashed var(--border-color-default, #e5e5e5);background:var(--color-background-neutral-secondary, #f5f5f5);display:flex;align-items:center;justify-content:center;cursor:pointer}.photo-item{width:100%;aspect-ratio:1;border-radius:12px;-o-object-fit:cover;object-fit:cover}\n"] }]
         }], ctorParameters: () => [{ type: UserService }, { type: DsMobileLightboxService }, { type: DsMobileChatModalService }] });
 
+/**
+ * Whitelabel Demo Modal Component
+ *
+ * Demonstrates the whitelabeling system with theme selection, brand colors, and logo previews.
+ * Opens as a full-screen modal similar to post details.
+ */
+class WhitelabelDemoModalComponent {
+    whitelabelService = inject(WhitelabelService);
+    modalController = inject(ModalController);
+    // Current active theme
+    currentTheme = 'default';
+    // Custom color inputs
+    customAppIconSurface = '#6B5FF5';
+    customAppIconContent = '#FFFFFF';
+    customAccent = '#6B5FF5';
+    customOnAccent = '#FFFFFF';
+    customHeaderSurface = '#221a4c';
+    customHeaderContent = '#FFFFFF';
+    customHeaderAccent = 'rgba(255, 255, 255, 0.15)';
+    customOnHeaderAccent = '#FFFFFF';
+    // Sign-in background inputs
+    customSignInBgSolid = '#D6C7FF';
+    customSignInBgGradientStart = '#D6C7FF';
+    customSignInBgGradientEnd = '#8A9BFF';
+    customSignInContentColor = '#1a1a1a';
+    ngOnInit() {
+        this.updateCustomColorInputs();
+        this.updateSignInBgInputs();
+        this.updateSignInContentColorInput();
+        this.detectCurrentTheme();
+    }
+    /**
+     * Detect the current active theme based on colors
+     */
+    detectCurrentTheme() {
+        const headerSurface = this.whitelabelService.headerSurface().toUpperCase();
+        if (headerSurface === '#A70923') {
+            this.currentTheme = 'cej';
+        }
+        else if (headerSurface === '#660036') {
+            this.currentTheme = 'pka';
+        }
+        else if (headerSurface === '#262424') {
+            this.currentTheme = 'clave';
+        }
+        else if (headerSurface === '#1D4A49') {
+            this.currentTheme = 'freedom';
+        }
+        else {
+            this.currentTheme = 'default';
+        }
+    }
+    /**
+     * Close the modal
+     */
+    close() {
+        this.modalController.dismiss();
+    }
+    applyDefaultTheme() {
+        this.currentTheme = 'default';
+        this.whitelabelService.updateConfig({
+            logoUrl: '/Assets/logos/propbinder-logomark.svg',
+            logoMarkUrl: '/Assets/logos/propbinder-logomark.svg',
+            logoAlt: 'Propbinder',
+            logoSize: 'md',
+            appIconSurface: '#6B5FF5',
+            appIconContent: '#FFFFFF',
+            accent: '#6B5FF5',
+            onAccent: '#FFFFFF',
+            headerSurface: '#221a4c',
+            headerContent: '#FFFFFF',
+            headerAccent: '#6B5FF5',
+            onHeaderAccent: '#FFFFFF',
+            showCityIllustration: true,
+            signInBgType: 'gradient',
+            signInBgSolid: '#D6C7FF',
+            signInBgGradientStart: '#D6C7FF',
+            signInBgGradientEnd: '#8A9BFF',
+            signInContentColor: '#1a1a1a',
+            organizationName: 'Propbinder',
+            organizationId: 'default'
+        });
+        this.updateCustomColorInputs();
+        this.updateSignInBgInputs();
+        this.updateSignInContentColorInput();
+    }
+    applyCejTheme() {
+        this.currentTheme = 'cej';
+        this.whitelabelService.updateConfig({
+            logoUrl: '/Assets/logos/cej-logo.png',
+            logoMarkUrl: '/Assets/logos/cej-logo.png',
+            logoAlt: 'CEJ',
+            logoSize: 'xl',
+            appIconSurface: '#A70923',
+            appIconContent: '#FFFFFF',
+            accent: '#dc092c',
+            onAccent: '#FFFFFF',
+            headerSurface: '#A70923',
+            headerContent: '#FFFFFF',
+            headerAccent: '#dc092c',
+            onHeaderAccent: '#FFFFFF',
+            showCityIllustration: false,
+            signInBgType: 'gradient',
+            signInBgSolid: '#FFE5E8',
+            signInBgGradientStart: '#FFE5E8',
+            signInBgGradientEnd: '#FFC7CE',
+            signInContentColor: '#1a1a1a',
+            organizationName: 'CEJ',
+            organizationId: 'cej'
+        });
+        this.updateCustomColorInputs();
+        this.updateSignInBgInputs();
+        this.updateSignInContentColorInput();
+    }
+    applyPkaTheme() {
+        this.currentTheme = 'pka';
+        this.whitelabelService.updateConfig({
+            logoUrl: '/Assets/logos/pka-logo.svg',
+            logoMarkUrl: '/Assets/logos/pka-logo.svg',
+            logoAlt: 'PKA',
+            logoSize: 'md',
+            appIconSurface: '#CC006C',
+            appIconContent: '#FFFFFF',
+            accent: '#CC006C',
+            onAccent: '#FFFFFF',
+            headerSurface: '#660036',
+            headerContent: '#FFFFFF',
+            headerAccent: '#CC006C',
+            onHeaderAccent: '#FFFFFF',
+            showCityIllustration: false,
+            signInBgType: 'gradient',
+            signInBgSolid: '#FFE0F0',
+            signInBgGradientStart: '#FFE0F0',
+            signInBgGradientEnd: '#FFB3D9',
+            signInContentColor: '#1a1a1a',
+            organizationName: 'PKA',
+            organizationId: 'pka'
+        });
+        this.updateCustomColorInputs();
+        this.updateSignInBgInputs();
+        this.updateSignInContentColorInput();
+    }
+    applyClaveTheme() {
+        this.currentTheme = 'clave';
+        this.whitelabelService.updateConfig({
+            logoUrl: '/Assets/logos/clave-logo.svg',
+            logoMarkUrl: '/Assets/logos/clave-logo.svg',
+            logoAlt: 'Clave',
+            logoSize: 'lg',
+            appIconSurface: '#262424',
+            appIconContent: '#FFFFFF',
+            accent: '#868764',
+            onAccent: '#FFFFFF',
+            headerSurface: '#262424',
+            headerContent: '#FFFFFF',
+            headerAccent: '#868764',
+            onHeaderAccent: '#FFFFFF',
+            showCityIllustration: false,
+            signInBgType: 'gradient',
+            signInBgSolid: '#E8E8E0',
+            signInBgGradientStart: '#E8E8E0',
+            signInBgGradientEnd: '#D4D4C3',
+            signInContentColor: '#1a1a1a',
+            organizationName: 'Clave',
+            organizationId: 'clave'
+        });
+        this.updateCustomColorInputs();
+        this.updateSignInBgInputs();
+        this.updateSignInContentColorInput();
+    }
+    applyFreedomTheme() {
+        this.currentTheme = 'freedom';
+        this.whitelabelService.updateConfig({
+            logoUrl: '/Assets/logos/freedom-logo.svg',
+            logoMarkUrl: '/Assets/logos/freedom-logomark.svg',
+            logoAlt: 'Freedom',
+            logoSize: 'md',
+            appIconSurface: '#1D4A49',
+            appIconContent: '#FFFFFF',
+            accent: '#1D4A49',
+            onAccent: '#FFFFFF',
+            headerSurface: '#1D4A49',
+            headerContent: '#FFFFFF',
+            headerAccent: '#AACFC3',
+            onHeaderAccent: '#1D4A49',
+            showCityIllustration: false,
+            signInBgType: 'gradient',
+            signInBgSolid: '#D5E8E6',
+            signInBgGradientStart: '#D5E8E6',
+            signInBgGradientEnd: '#AACFC3',
+            signInContentColor: '#FFFFFF',
+            organizationName: 'Freedom',
+            organizationId: 'freedom'
+        });
+        this.updateCustomColorInputs();
+        this.updateSignInBgInputs();
+        this.updateSignInContentColorInput();
+    }
+    applyCustomColors() {
+        this.whitelabelService.updateColors({
+            appIconSurface: this.customAppIconSurface,
+            appIconContent: this.customAppIconContent,
+            accent: this.customAccent,
+            onAccent: this.customOnAccent,
+            headerSurface: this.customHeaderSurface,
+            headerContent: this.customHeaderContent,
+            headerAccent: this.customHeaderAccent,
+            onHeaderAccent: this.customOnHeaderAccent
+        });
+    }
+    toggleCityIllustration() {
+        this.whitelabelService.updateConfig({
+            showCityIllustration: !this.whitelabelService.showCityIllustration()
+        });
+    }
+    updateSignInBgType(type) {
+        this.whitelabelService.updateConfig({
+            signInBgType: type
+        });
+    }
+    updateLogoSize(size) {
+        this.whitelabelService.updateConfig({
+            logoSize: size,
+            logoHeight: undefined // Clear custom height to use size-based calculation
+        });
+    }
+    applySignInBackground() {
+        this.whitelabelService.updateConfig({
+            signInBgSolid: this.customSignInBgSolid,
+            signInBgGradientStart: this.customSignInBgGradientStart,
+            signInBgGradientEnd: this.customSignInBgGradientEnd
+        });
+    }
+    applySignInContentColor() {
+        this.whitelabelService.updateConfig({
+            signInContentColor: this.customSignInContentColor
+        });
+    }
+    updateSignInBgInputs() {
+        this.customSignInBgSolid = this.whitelabelService.signInBgSolid();
+        this.customSignInBgGradientStart = this.whitelabelService.signInBgGradientStart();
+        this.customSignInBgGradientEnd = this.whitelabelService.signInBgGradientEnd();
+    }
+    updateSignInContentColorInput() {
+        this.customSignInContentColor = this.whitelabelService.signInContentColor();
+    }
+    updateCustomColorInputs() {
+        this.customAppIconSurface = this.whitelabelService.appIconSurface();
+        this.customAppIconContent = this.whitelabelService.appIconContent();
+        this.customAccent = this.whitelabelService.accent();
+        this.customOnAccent = this.whitelabelService.onAccent();
+        this.customHeaderSurface = this.whitelabelService.headerSurface();
+        this.customHeaderContent = this.whitelabelService.headerContent();
+        this.customHeaderAccent = this.whitelabelService.headerAccent();
+        this.customOnHeaderAccent = this.whitelabelService.onHeaderAccent();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WhitelabelDemoModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: WhitelabelDemoModalComponent, isStandalone: true, selector: "ds-whitelabel-demo-modal", ngImport: i0, template: `
+    <!-- Fixed Header -->
+    <div class="modal-header">
+      <div class="header-content">
+        <span class="header-title">Whitelabel</span>
+        <ds-icon-button
+          icon="remixCloseLine"
+          variant="secondary"
+          size="lg"
+          (click)="close()"
+          class="close-button"
+          aria-label="Close">
+        </ds-icon-button>
+      </div>
+    </div>
+    
+    <!-- Scrollable Content -->
+    <ion-content [scrollY]="true" class="modal-content">
+      <div class="demo-container">
+          <!-- Theme Selection -->
+          <div class="demo-section">
+            <h2>Theme</h2>
+            <div class="theme-buttons">
+              <button class="theme-btn" (click)="applyDefaultTheme()" [class.active]="currentTheme === 'default'">
+                Propbinder
+              </button>
+              <button class="theme-btn" (click)="applyCejTheme()" [class.active]="currentTheme === 'cej'">
+                CEJ
+              </button>
+              <button class="theme-btn" (click)="applyPkaTheme()" [class.active]="currentTheme === 'pka'">
+                PKA
+              </button>
+              <button class="theme-btn" (click)="applyClaveTheme()" [class.active]="currentTheme === 'clave'">
+                Clave
+              </button>
+              <button class="theme-btn" (click)="applyFreedomTheme()" [class.active]="currentTheme === 'freedom'">
+                Freedom
+              </button>
+            </div>
+          </div>
+          
+          <!-- Sign-in Page Options -->
+          <div class="demo-section">
+            <h2>Sign-in Page</h2>
+            <div class="color-section">
+              <div class="toggle-row">
+                <label>Show City Illustration</label>
+                <input
+                  type="checkbox"
+                  [checked]="whitelabelService.showCityIllustration()"
+                  [disabled]="currentTheme !== 'default'"
+                  (change)="toggleCityIllustration()"
+                  [style.opacity]="currentTheme !== 'default' ? '0.5' : '1'"
+                  [style.cursor]="currentTheme !== 'default' ? 'not-allowed' : 'pointer'"
+                />
+              </div>
+              
+              <div style="margin-top: 24px;">
+                <h3 style="font-size: 14px; font-weight: 600; color: #333; margin: 0 0 12px 0;">Background</h3>
+                
+                <!-- Background type selector -->
+                <div class="radio-group">
+                  <div class="radio-option">
+                    <input 
+                      type="radio" 
+                      id="bg-solid"
+                      name="bgType"
+                      value="solid"
+                      [checked]="whitelabelService.signInBgType() === 'solid'"
+                      (change)="updateSignInBgType('solid')"
+                    />
+                    <label for="bg-solid">Solid</label>
+                  </div>
+                  <div class="radio-option">
+                    <input 
+                      type="radio" 
+                      id="bg-gradient"
+                      name="bgType"
+                      value="gradient"
+                      [checked]="whitelabelService.signInBgType() === 'gradient'"
+                      (change)="updateSignInBgType('gradient')"
+                    />
+                    <label for="bg-gradient">Gradient</label>
+                  </div>
+                </div>
+                
+                <!-- Background preview -->
+                <div class="bg-preview" [style.background]="whitelabelService.signInBgStyle()"></div>
+                
+                <!-- Solid color input -->
+                @if (whitelabelService.signInBgType() === 'solid') {
+                  <div class="color-row">
+                    <label>Color</label>
+                    <input 
+                      type="color" 
+                      [(ngModel)]="customSignInBgSolid"
+                      (change)="applySignInBackground()"
+                    />
+                    <input 
+                      type="text" 
+                      [(ngModel)]="customSignInBgSolid"
+                      (change)="applySignInBackground()"
+                    />
+                  </div>
+                }
+                
+                <!-- Gradient color inputs -->
+                @if (whitelabelService.signInBgType() === 'gradient') {
+                  <div class="color-row">
+                    <label>Start</label>
+                    <input 
+                      type="color" 
+                      [(ngModel)]="customSignInBgGradientStart"
+                      (change)="applySignInBackground()"
+                    />
+                    <input 
+                      type="text" 
+                      [(ngModel)]="customSignInBgGradientStart"
+                      (change)="applySignInBackground()"
+                    />
+                  </div>
+                  <div class="color-row">
+                    <label>End</label>
+                    <input 
+                      type="color" 
+                      [(ngModel)]="customSignInBgGradientEnd"
+                      (change)="applySignInBackground()"
+                    />
+                    <input 
+                      type="text" 
+                      [(ngModel)]="customSignInBgGradientEnd"
+                      (change)="applySignInBackground()"
+                    />
+                  </div>
+                }
+                
+                <!-- Sign-in content color -->
+                <div style="margin-top: 24px;">
+                  <h3 style="font-size: 14px; font-weight: 600; color: #333; margin: 0 0 12px 0;">Content Color</h3>
+                  <div class="color-row">
+                    <label>Text</label>
+                    <input 
+                      type="color" 
+                      [(ngModel)]="customSignInContentColor"
+                      (change)="applySignInContentColor()"
+                    />
+                    <input 
+                      type="text" 
+                      [(ngModel)]="customSignInContentColor"
+                      (change)="applySignInContentColor()"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <!-- Logo & Logomark Preview -->
+          <div class="demo-section">
+            <h2>Logo Preview</h2>
+            
+            <!-- Logo Size Selector -->
+            <div style="margin-bottom: 16px;">
+              <h3 style="font-size: 14px; font-weight: 600; color: #333; margin: 0 0 12px 0;">Header Logo Size</h3>
+              <div class="theme-buttons">
+                <button
+                  class="theme-btn"
+                  (click)="updateLogoSize('sm')"
+                  [class.active]="whitelabelService.logoSize() === 'sm'">
+                  Small (24px)
+                </button>
+                <button
+                  class="theme-btn"
+                  (click)="updateLogoSize('md')"
+                  [class.active]="whitelabelService.logoSize() === 'md'">
+                  Medium (28px)
+                </button>
+                <button
+                  class="theme-btn"
+                  (click)="updateLogoSize('lg')"
+                  [class.active]="whitelabelService.logoSize() === 'lg'">
+                  Large (32px)
+                </button>
+                <button
+                  class="theme-btn"
+                  (click)="updateLogoSize('xl')"
+                  [class.active]="whitelabelService.logoSize() === 'xl'">
+                  XLarge (36px)
+                </button>
+              </div>
+            </div>
+            
+            <div class="preview-grid">
+              <div class="preview-tile">
+                <h3>Logo</h3>
+                <div class="logo-preview">
+                  <ds-logo variant="full" />
+                </div>
+              </div>
+              <div class="preview-tile">
+                <h3>Logomark</h3>
+                <div class="logomark-preview">
+                  <ds-avatar-with-badge
+                    [type]="'initials'"
+                    [initials]="'KN'"
+                    [size]="'md'"
+                    [badgePosition]="'bottom-right'"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <!-- App Icon -->
+          <div class="demo-section">
+            <h2>App Icon</h2>
+            <div class="app-icon-sizes">
+              <div class="app-icon-demo">
+                <ds-app-icon size="xl" />
+              </div>
+            </div>
+          </div>
+          
+          <!-- Brand Colors -->
+          <div class="demo-section">
+            <h2>Brand Colors</h2>
+            <div class="color-section">
+              <div class="color-swatches">
+                <div class="swatch swatch--app-icon-surface">
+                  <div class="swatch-label">App Icon Surface</div>
+                  <div class="swatch-value">{{ whitelabelService.appIconSurface() }}</div>
+                </div>
+                <div class="swatch swatch--app-icon-content">
+                  <div class="swatch-label">App Icon Content</div>
+                  <div class="swatch-value">{{ whitelabelService.appIconContent() }}</div>
+                </div>
+                <div class="swatch swatch--accent">
+                  <div class="swatch-label">Accent</div>
+                  <div class="swatch-value">{{ whitelabelService.accent() }}</div>
+                </div>
+                <div class="swatch swatch--on-accent">
+                  <div class="swatch-label">On Accent</div>
+                  <div class="swatch-value">{{ whitelabelService.onAccent() }}</div>
+                </div>
+                <div class="swatch swatch--header-surface">
+                  <div class="swatch-label">Header Surface</div>
+                  <div class="swatch-value">{{ whitelabelService.headerSurface() }}</div>
+                </div>
+                <div class="swatch swatch--header-content">
+                  <div class="swatch-label">Header Content</div>
+                  <div class="swatch-value">{{ whitelabelService.headerContent() }}</div>
+                </div>
+              </div>
+              
+              <div class="color-inputs">
+                <div class="color-group-label">App Icon</div>
+                <div class="color-row">
+                  <label>Surface</label>
+                  <input 
+                    type="color" 
+                    [(ngModel)]="customAppIconSurface"
+                    (change)="applyCustomColors()"
+                  />
+                  <input 
+                    type="text" 
+                    [(ngModel)]="customAppIconSurface"
+                    (change)="applyCustomColors()"
+                  />
+                </div>
+                <div class="color-row">
+                  <label>Content</label>
+                  <input 
+                    type="color" 
+                    [(ngModel)]="customAppIconContent"
+                    (change)="applyCustomColors()"
+                  />
+                  <input 
+                    type="text" 
+                    [(ngModel)]="customAppIconContent"
+                    (change)="applyCustomColors()"
+                  />
+                </div>
+                
+                <div class="color-group-label">Accent</div>
+                <div class="color-row">
+                  <label>Base</label>
+                  <input 
+                    type="color" 
+                    [(ngModel)]="customAccent"
+                    (change)="applyCustomColors()"
+                  />
+                  <input 
+                    type="text" 
+                    [(ngModel)]="customAccent"
+                    (change)="applyCustomColors()"
+                  />
+                </div>
+                <div class="color-row">
+                  <label>On Accent</label>
+                  <input 
+                    type="color" 
+                    [(ngModel)]="customOnAccent"
+                    (change)="applyCustomColors()"
+                  />
+                  <input 
+                    type="text" 
+                    [(ngModel)]="customOnAccent"
+                    (change)="applyCustomColors()"
+                  />
+                </div>
+                
+                <div class="color-group-label">Header</div>
+                <div class="color-row">
+                  <label>Surface</label>
+                  <input 
+                    type="color" 
+                    [(ngModel)]="customHeaderSurface"
+                    (change)="applyCustomColors()"
+                  />
+                  <input 
+                    type="text" 
+                    [(ngModel)]="customHeaderSurface"
+                    (change)="applyCustomColors()"
+                  />
+                </div>
+                <div class="color-row">
+                  <label>Content</label>
+                  <input 
+                    type="color" 
+                    [(ngModel)]="customHeaderContent"
+                    (change)="applyCustomColors()"
+                  />
+                  <input 
+                    type="text" 
+                    [(ngModel)]="customHeaderContent"
+                    (change)="applyCustomColors()"
+                  />
+                </div>
+                <div class="color-row">
+                  <label>Accent</label>
+                  <input 
+                    type="color" 
+                    [(ngModel)]="customHeaderAccent"
+                    (change)="applyCustomColors()"
+                  />
+                  <input 
+                    type="text" 
+                    [(ngModel)]="customHeaderAccent"
+                    (change)="applyCustomColors()"
+                  />
+                </div>
+                <div class="color-row">
+                  <label>On Accent</label>
+                  <input 
+                    type="color" 
+                    [(ngModel)]="customOnHeaderAccent"
+                    (change)="applyCustomColors()"
+                  />
+                  <input 
+                    type="text" 
+                    [(ngModel)]="customOnHeaderAccent"
+                    (change)="applyCustomColors()"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+    </ion-content>
+  `, isInline: true, styles: [":host{display:flex;flex-direction:column;height:100%;width:100%;background:var(--color-background-neutral-primary, #ffffff)}.modal-header{flex-shrink:0;background:var(--color-background-neutral-primary, #ffffff);border-bottom:1px solid var(--border-color-default, #e0e0e0);padding:0 16px}ion-content,.modal-content{--background: #ffffff;flex:1;width:100%}.header-content{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px}.header-title{font-family:Brockmann,sans-serif;font-size:17px;font-weight:600;color:var(--color-text-primary, #1a1a1a);flex:1}.close-button{flex-shrink:0;border-radius:50%}.close-button::ng-deep button{border-radius:50%!important;width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important;background:var(--color-background-neutral-secondary, #f5f5f5)!important;color:var(--color-text-primary, #1a1a1a)!important}.demo-container{padding:20px;max-width:600px;margin:0 auto;width:100%}.demo-section{margin-bottom:32px}.demo-section h2{margin-bottom:16px;font-size:18px;font-weight:600;color:#333}.theme-buttons{display:flex;gap:12px;flex-wrap:wrap}.theme-btn{padding:8px 16px;border-radius:8px;font-size:14px;font-weight:500;border:none;cursor:pointer;transition:all .2s ease;background:#e0e0e0;color:#333}.theme-btn:active{transform:scale(.98)}.theme-btn.active{background:var(--color-secondary-surface);color:var(--color-secondary-content)}.logo-preview{display:flex;align-items:center;justify-content:center;padding:24px;background:var(--color-brand-secondary);border-radius:12px;min-height:80px}.logomark-preview{display:flex;align-items:center;justify-content:center;padding:24px;background:#fff;border:1px solid #e0e0e0;border-radius:12px;min-height:80px}.preview-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.preview-tile{background:#fff;border-radius:12px}.preview-tile h3{font-size:13px;font-weight:600;color:#666;margin-top:0;margin-bottom:12px}.app-icon-sizes{display:flex;gap:24px;align-items:flex-end;justify-content:center;padding:24px;background:#fff;border-radius:12px;border:1px solid var(--border-color-default, #e0e0e0);flex-wrap:wrap}.app-icon-demo{display:flex;flex-direction:column;align-items:center;gap:12px;--app-icon-background: var(--color-app-icon-surface)}.app-icon-demo span{font-size:12px;color:#666;font-family:monospace}.color-section{background:#fff;border-radius:12px}.color-swatches{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px}.swatch{padding:16px;border-radius:8px;text-align:center}.swatch-label{font-size:12px;font-weight:600;margin-bottom:4px}.swatch-value{font-size:11px;opacity:.8;font-family:monospace}.swatch--app-icon-surface{background:var(--color-app-icon-surface);color:var(--color-app-icon-content)}.swatch--app-icon-content{background:var(--color-app-icon-content);color:var(--color-app-icon-surface);border:1px solid #e0e0e0}.swatch--accent{background:var(--color-accent);color:var(--color-on-accent)}.swatch--on-accent{background:var(--color-on-accent);color:var(--color-accent);border:1px solid #e0e0e0}.swatch--header-surface{background:var(--color-header-surface);color:var(--color-header-content)}.swatch--header-content{background:var(--color-header-content);color:var(--color-header-surface);border:1px solid #e0e0e0}.color-inputs{display:flex;flex-direction:column;gap:12px}.color-group-label{font-size:13px;font-weight:600;color:#333;margin-top:8px}.color-row{display:flex;align-items:center;gap:12px}.color-row label{min-width:70px;font-size:13px;color:#666}.color-row input[type=color]{width:40px;height:32px;border:none;border-radius:6px;cursor:pointer;padding:0}.color-row input[type=text]{flex:1;padding:8px 12px;border:1px solid #ddd;border-radius:6px;font-family:monospace;font-size:13px}.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0}.toggle-row label{font-size:14px;color:#333;font-weight:500}.toggle-row input[type=checkbox]{width:48px;height:28px;-webkit-appearance:none;appearance:none;background:#ddd;border-radius:14px;position:relative;cursor:pointer;transition:background .2s ease;flex-shrink:0}.toggle-row input[type=checkbox]:checked{background:var(--color-accent)}.toggle-row input[type=checkbox]:before{content:\"\";position:absolute;width:24px;height:24px;border-radius:50%;background:#fff;top:2px;left:2px;transition:transform .2s ease;box-shadow:0 1px 3px #0003}.toggle-row input[type=checkbox]:checked:before{transform:translate(20px)}.radio-group{display:flex;gap:16px;margin-bottom:16px}.radio-option{display:flex;align-items:center;gap:8px;cursor:pointer}.radio-option input[type=radio]{width:18px;height:18px;cursor:pointer;accent-color:var(--color-accent)}.radio-option label{font-size:14px;color:#333;cursor:pointer;font-weight:500}.bg-preview{height:80px;border-radius:8px;margin-bottom:16px;border:1px solid #e0e0e0;position:relative;overflow:hidden}.bg-preview:after{content:\"Preview\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:12px;font-weight:600;color:#0000004d;text-shadow:0 1px 2px rgba(255,255,255,.5)}@supports (padding: env(safe-area-inset-bottom)){.demo-container{padding-bottom:calc(20px + env(safe-area-inset-bottom))}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: DsLogoComponent, selector: "ds-logo", inputs: ["variant", "size", "customHeight", "customWidth"] }, { kind: "component", type: DsAvatarWithBadgeComponent, selector: "ds-avatar-with-badge", inputs: ["type", "size", "initials", "src", "iconName", "showBadge", "badgePosition"] }, { kind: "component", type: DsAppIconComponent, selector: "ds-app-icon", inputs: ["size"] }, { kind: "component", type: DsIconButtonComponent, selector: "ds-icon-button", inputs: ["variant", "size", "icon", "disabled", "loading", "pressed", "expanded", "ariaLabel", "tooltip", "tooltipDisabled", "tooltipPlacement"], outputs: ["clicked", "focused", "blurred"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WhitelabelDemoModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-whitelabel-demo-modal', standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        IonContent,
+                        DsLogoComponent,
+                        DsAvatarWithBadgeComponent,
+                        DsAppIconComponent,
+                        DsIconButtonComponent
+                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: `
+    <!-- Fixed Header -->
+    <div class="modal-header">
+      <div class="header-content">
+        <span class="header-title">Whitelabel</span>
+        <ds-icon-button
+          icon="remixCloseLine"
+          variant="secondary"
+          size="lg"
+          (click)="close()"
+          class="close-button"
+          aria-label="Close">
+        </ds-icon-button>
+      </div>
+    </div>
+    
+    <!-- Scrollable Content -->
+    <ion-content [scrollY]="true" class="modal-content">
+      <div class="demo-container">
+          <!-- Theme Selection -->
+          <div class="demo-section">
+            <h2>Theme</h2>
+            <div class="theme-buttons">
+              <button class="theme-btn" (click)="applyDefaultTheme()" [class.active]="currentTheme === 'default'">
+                Propbinder
+              </button>
+              <button class="theme-btn" (click)="applyCejTheme()" [class.active]="currentTheme === 'cej'">
+                CEJ
+              </button>
+              <button class="theme-btn" (click)="applyPkaTheme()" [class.active]="currentTheme === 'pka'">
+                PKA
+              </button>
+              <button class="theme-btn" (click)="applyClaveTheme()" [class.active]="currentTheme === 'clave'">
+                Clave
+              </button>
+              <button class="theme-btn" (click)="applyFreedomTheme()" [class.active]="currentTheme === 'freedom'">
+                Freedom
+              </button>
+            </div>
+          </div>
+          
+          <!-- Sign-in Page Options -->
+          <div class="demo-section">
+            <h2>Sign-in Page</h2>
+            <div class="color-section">
+              <div class="toggle-row">
+                <label>Show City Illustration</label>
+                <input
+                  type="checkbox"
+                  [checked]="whitelabelService.showCityIllustration()"
+                  [disabled]="currentTheme !== 'default'"
+                  (change)="toggleCityIllustration()"
+                  [style.opacity]="currentTheme !== 'default' ? '0.5' : '1'"
+                  [style.cursor]="currentTheme !== 'default' ? 'not-allowed' : 'pointer'"
+                />
+              </div>
+              
+              <div style="margin-top: 24px;">
+                <h3 style="font-size: 14px; font-weight: 600; color: #333; margin: 0 0 12px 0;">Background</h3>
+                
+                <!-- Background type selector -->
+                <div class="radio-group">
+                  <div class="radio-option">
+                    <input 
+                      type="radio" 
+                      id="bg-solid"
+                      name="bgType"
+                      value="solid"
+                      [checked]="whitelabelService.signInBgType() === 'solid'"
+                      (change)="updateSignInBgType('solid')"
+                    />
+                    <label for="bg-solid">Solid</label>
+                  </div>
+                  <div class="radio-option">
+                    <input 
+                      type="radio" 
+                      id="bg-gradient"
+                      name="bgType"
+                      value="gradient"
+                      [checked]="whitelabelService.signInBgType() === 'gradient'"
+                      (change)="updateSignInBgType('gradient')"
+                    />
+                    <label for="bg-gradient">Gradient</label>
+                  </div>
+                </div>
+                
+                <!-- Background preview -->
+                <div class="bg-preview" [style.background]="whitelabelService.signInBgStyle()"></div>
+                
+                <!-- Solid color input -->
+                @if (whitelabelService.signInBgType() === 'solid') {
+                  <div class="color-row">
+                    <label>Color</label>
+                    <input 
+                      type="color" 
+                      [(ngModel)]="customSignInBgSolid"
+                      (change)="applySignInBackground()"
+                    />
+                    <input 
+                      type="text" 
+                      [(ngModel)]="customSignInBgSolid"
+                      (change)="applySignInBackground()"
+                    />
+                  </div>
+                }
+                
+                <!-- Gradient color inputs -->
+                @if (whitelabelService.signInBgType() === 'gradient') {
+                  <div class="color-row">
+                    <label>Start</label>
+                    <input 
+                      type="color" 
+                      [(ngModel)]="customSignInBgGradientStart"
+                      (change)="applySignInBackground()"
+                    />
+                    <input 
+                      type="text" 
+                      [(ngModel)]="customSignInBgGradientStart"
+                      (change)="applySignInBackground()"
+                    />
+                  </div>
+                  <div class="color-row">
+                    <label>End</label>
+                    <input 
+                      type="color" 
+                      [(ngModel)]="customSignInBgGradientEnd"
+                      (change)="applySignInBackground()"
+                    />
+                    <input 
+                      type="text" 
+                      [(ngModel)]="customSignInBgGradientEnd"
+                      (change)="applySignInBackground()"
+                    />
+                  </div>
+                }
+                
+                <!-- Sign-in content color -->
+                <div style="margin-top: 24px;">
+                  <h3 style="font-size: 14px; font-weight: 600; color: #333; margin: 0 0 12px 0;">Content Color</h3>
+                  <div class="color-row">
+                    <label>Text</label>
+                    <input 
+                      type="color" 
+                      [(ngModel)]="customSignInContentColor"
+                      (change)="applySignInContentColor()"
+                    />
+                    <input 
+                      type="text" 
+                      [(ngModel)]="customSignInContentColor"
+                      (change)="applySignInContentColor()"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <!-- Logo & Logomark Preview -->
+          <div class="demo-section">
+            <h2>Logo Preview</h2>
+            
+            <!-- Logo Size Selector -->
+            <div style="margin-bottom: 16px;">
+              <h3 style="font-size: 14px; font-weight: 600; color: #333; margin: 0 0 12px 0;">Header Logo Size</h3>
+              <div class="theme-buttons">
+                <button
+                  class="theme-btn"
+                  (click)="updateLogoSize('sm')"
+                  [class.active]="whitelabelService.logoSize() === 'sm'">
+                  Small (24px)
+                </button>
+                <button
+                  class="theme-btn"
+                  (click)="updateLogoSize('md')"
+                  [class.active]="whitelabelService.logoSize() === 'md'">
+                  Medium (28px)
+                </button>
+                <button
+                  class="theme-btn"
+                  (click)="updateLogoSize('lg')"
+                  [class.active]="whitelabelService.logoSize() === 'lg'">
+                  Large (32px)
+                </button>
+                <button
+                  class="theme-btn"
+                  (click)="updateLogoSize('xl')"
+                  [class.active]="whitelabelService.logoSize() === 'xl'">
+                  XLarge (36px)
+                </button>
+              </div>
+            </div>
+            
+            <div class="preview-grid">
+              <div class="preview-tile">
+                <h3>Logo</h3>
+                <div class="logo-preview">
+                  <ds-logo variant="full" />
+                </div>
+              </div>
+              <div class="preview-tile">
+                <h3>Logomark</h3>
+                <div class="logomark-preview">
+                  <ds-avatar-with-badge
+                    [type]="'initials'"
+                    [initials]="'KN'"
+                    [size]="'md'"
+                    [badgePosition]="'bottom-right'"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <!-- App Icon -->
+          <div class="demo-section">
+            <h2>App Icon</h2>
+            <div class="app-icon-sizes">
+              <div class="app-icon-demo">
+                <ds-app-icon size="xl" />
+              </div>
+            </div>
+          </div>
+          
+          <!-- Brand Colors -->
+          <div class="demo-section">
+            <h2>Brand Colors</h2>
+            <div class="color-section">
+              <div class="color-swatches">
+                <div class="swatch swatch--app-icon-surface">
+                  <div class="swatch-label">App Icon Surface</div>
+                  <div class="swatch-value">{{ whitelabelService.appIconSurface() }}</div>
+                </div>
+                <div class="swatch swatch--app-icon-content">
+                  <div class="swatch-label">App Icon Content</div>
+                  <div class="swatch-value">{{ whitelabelService.appIconContent() }}</div>
+                </div>
+                <div class="swatch swatch--accent">
+                  <div class="swatch-label">Accent</div>
+                  <div class="swatch-value">{{ whitelabelService.accent() }}</div>
+                </div>
+                <div class="swatch swatch--on-accent">
+                  <div class="swatch-label">On Accent</div>
+                  <div class="swatch-value">{{ whitelabelService.onAccent() }}</div>
+                </div>
+                <div class="swatch swatch--header-surface">
+                  <div class="swatch-label">Header Surface</div>
+                  <div class="swatch-value">{{ whitelabelService.headerSurface() }}</div>
+                </div>
+                <div class="swatch swatch--header-content">
+                  <div class="swatch-label">Header Content</div>
+                  <div class="swatch-value">{{ whitelabelService.headerContent() }}</div>
+                </div>
+              </div>
+              
+              <div class="color-inputs">
+                <div class="color-group-label">App Icon</div>
+                <div class="color-row">
+                  <label>Surface</label>
+                  <input 
+                    type="color" 
+                    [(ngModel)]="customAppIconSurface"
+                    (change)="applyCustomColors()"
+                  />
+                  <input 
+                    type="text" 
+                    [(ngModel)]="customAppIconSurface"
+                    (change)="applyCustomColors()"
+                  />
+                </div>
+                <div class="color-row">
+                  <label>Content</label>
+                  <input 
+                    type="color" 
+                    [(ngModel)]="customAppIconContent"
+                    (change)="applyCustomColors()"
+                  />
+                  <input 
+                    type="text" 
+                    [(ngModel)]="customAppIconContent"
+                    (change)="applyCustomColors()"
+                  />
+                </div>
+                
+                <div class="color-group-label">Accent</div>
+                <div class="color-row">
+                  <label>Base</label>
+                  <input 
+                    type="color" 
+                    [(ngModel)]="customAccent"
+                    (change)="applyCustomColors()"
+                  />
+                  <input 
+                    type="text" 
+                    [(ngModel)]="customAccent"
+                    (change)="applyCustomColors()"
+                  />
+                </div>
+                <div class="color-row">
+                  <label>On Accent</label>
+                  <input 
+                    type="color" 
+                    [(ngModel)]="customOnAccent"
+                    (change)="applyCustomColors()"
+                  />
+                  <input 
+                    type="text" 
+                    [(ngModel)]="customOnAccent"
+                    (change)="applyCustomColors()"
+                  />
+                </div>
+                
+                <div class="color-group-label">Header</div>
+                <div class="color-row">
+                  <label>Surface</label>
+                  <input 
+                    type="color" 
+                    [(ngModel)]="customHeaderSurface"
+                    (change)="applyCustomColors()"
+                  />
+                  <input 
+                    type="text" 
+                    [(ngModel)]="customHeaderSurface"
+                    (change)="applyCustomColors()"
+                  />
+                </div>
+                <div class="color-row">
+                  <label>Content</label>
+                  <input 
+                    type="color" 
+                    [(ngModel)]="customHeaderContent"
+                    (change)="applyCustomColors()"
+                  />
+                  <input 
+                    type="text" 
+                    [(ngModel)]="customHeaderContent"
+                    (change)="applyCustomColors()"
+                  />
+                </div>
+                <div class="color-row">
+                  <label>Accent</label>
+                  <input 
+                    type="color" 
+                    [(ngModel)]="customHeaderAccent"
+                    (change)="applyCustomColors()"
+                  />
+                  <input 
+                    type="text" 
+                    [(ngModel)]="customHeaderAccent"
+                    (change)="applyCustomColors()"
+                  />
+                </div>
+                <div class="color-row">
+                  <label>On Accent</label>
+                  <input 
+                    type="color" 
+                    [(ngModel)]="customOnHeaderAccent"
+                    (change)="applyCustomColors()"
+                  />
+                  <input 
+                    type="text" 
+                    [(ngModel)]="customOnHeaderAccent"
+                    (change)="applyCustomColors()"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+    </ion-content>
+  `, styles: [":host{display:flex;flex-direction:column;height:100%;width:100%;background:var(--color-background-neutral-primary, #ffffff)}.modal-header{flex-shrink:0;background:var(--color-background-neutral-primary, #ffffff);border-bottom:1px solid var(--border-color-default, #e0e0e0);padding:0 16px}ion-content,.modal-content{--background: #ffffff;flex:1;width:100%}.header-content{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px}.header-title{font-family:Brockmann,sans-serif;font-size:17px;font-weight:600;color:var(--color-text-primary, #1a1a1a);flex:1}.close-button{flex-shrink:0;border-radius:50%}.close-button::ng-deep button{border-radius:50%!important;width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important;background:var(--color-background-neutral-secondary, #f5f5f5)!important;color:var(--color-text-primary, #1a1a1a)!important}.demo-container{padding:20px;max-width:600px;margin:0 auto;width:100%}.demo-section{margin-bottom:32px}.demo-section h2{margin-bottom:16px;font-size:18px;font-weight:600;color:#333}.theme-buttons{display:flex;gap:12px;flex-wrap:wrap}.theme-btn{padding:8px 16px;border-radius:8px;font-size:14px;font-weight:500;border:none;cursor:pointer;transition:all .2s ease;background:#e0e0e0;color:#333}.theme-btn:active{transform:scale(.98)}.theme-btn.active{background:var(--color-secondary-surface);color:var(--color-secondary-content)}.logo-preview{display:flex;align-items:center;justify-content:center;padding:24px;background:var(--color-brand-secondary);border-radius:12px;min-height:80px}.logomark-preview{display:flex;align-items:center;justify-content:center;padding:24px;background:#fff;border:1px solid #e0e0e0;border-radius:12px;min-height:80px}.preview-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.preview-tile{background:#fff;border-radius:12px}.preview-tile h3{font-size:13px;font-weight:600;color:#666;margin-top:0;margin-bottom:12px}.app-icon-sizes{display:flex;gap:24px;align-items:flex-end;justify-content:center;padding:24px;background:#fff;border-radius:12px;border:1px solid var(--border-color-default, #e0e0e0);flex-wrap:wrap}.app-icon-demo{display:flex;flex-direction:column;align-items:center;gap:12px;--app-icon-background: var(--color-app-icon-surface)}.app-icon-demo span{font-size:12px;color:#666;font-family:monospace}.color-section{background:#fff;border-radius:12px}.color-swatches{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px}.swatch{padding:16px;border-radius:8px;text-align:center}.swatch-label{font-size:12px;font-weight:600;margin-bottom:4px}.swatch-value{font-size:11px;opacity:.8;font-family:monospace}.swatch--app-icon-surface{background:var(--color-app-icon-surface);color:var(--color-app-icon-content)}.swatch--app-icon-content{background:var(--color-app-icon-content);color:var(--color-app-icon-surface);border:1px solid #e0e0e0}.swatch--accent{background:var(--color-accent);color:var(--color-on-accent)}.swatch--on-accent{background:var(--color-on-accent);color:var(--color-accent);border:1px solid #e0e0e0}.swatch--header-surface{background:var(--color-header-surface);color:var(--color-header-content)}.swatch--header-content{background:var(--color-header-content);color:var(--color-header-surface);border:1px solid #e0e0e0}.color-inputs{display:flex;flex-direction:column;gap:12px}.color-group-label{font-size:13px;font-weight:600;color:#333;margin-top:8px}.color-row{display:flex;align-items:center;gap:12px}.color-row label{min-width:70px;font-size:13px;color:#666}.color-row input[type=color]{width:40px;height:32px;border:none;border-radius:6px;cursor:pointer;padding:0}.color-row input[type=text]{flex:1;padding:8px 12px;border:1px solid #ddd;border-radius:6px;font-family:monospace;font-size:13px}.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0}.toggle-row label{font-size:14px;color:#333;font-weight:500}.toggle-row input[type=checkbox]{width:48px;height:28px;-webkit-appearance:none;appearance:none;background:#ddd;border-radius:14px;position:relative;cursor:pointer;transition:background .2s ease;flex-shrink:0}.toggle-row input[type=checkbox]:checked{background:var(--color-accent)}.toggle-row input[type=checkbox]:before{content:\"\";position:absolute;width:24px;height:24px;border-radius:50%;background:#fff;top:2px;left:2px;transition:transform .2s ease;box-shadow:0 1px 3px #0003}.toggle-row input[type=checkbox]:checked:before{transform:translate(20px)}.radio-group{display:flex;gap:16px;margin-bottom:16px}.radio-option{display:flex;align-items:center;gap:8px;cursor:pointer}.radio-option input[type=radio]{width:18px;height:18px;cursor:pointer;accent-color:var(--color-accent)}.radio-option label{font-size:14px;color:#333;cursor:pointer;font-weight:500}.bg-preview{height:80px;border-radius:8px;margin-bottom:16px;border:1px solid #e0e0e0;position:relative;overflow:hidden}.bg-preview:after{content:\"Preview\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:12px;font-weight:600;color:#0000004d;text-shadow:0 1px 2px rgba(255,255,255,.5)}@supports (padding: env(safe-area-inset-bottom)){.demo-container{padding-bottom:calc(20px + env(safe-area-inset-bottom))}}\n"] }]
+        }] });
+
+/**
+ * WhitelabelDemoModalService
+ *
+ * Service for displaying the whitelabel demo in a full-screen modal.
+ * Built on Ionic's modal system with native gestures and animations.
+ *
+ * @example
+ * ```typescript
+ * constructor(private whitelabelModal: WhitelabelDemoModalService) {}
+ *
+ * async openDemo() {
+ *   await this.whitelabelModal.open();
+ * }
+ * ```
+ */
+class WhitelabelDemoModalService {
+    modalController;
+    constructor(modalController) {
+        this.modalController = modalController;
+    }
+    /**
+     * Open the whitelabel demo modal
+     *
+     * @returns Promise that resolves when the modal is presented
+     */
+    async open() {
+        try {
+            // console.log('[WhitelabelDemoModal] Opening...');
+            const modal = await this.modalController.create({
+                component: WhitelabelDemoModalComponent,
+                cssClass: 'ds-whitelabel-demo-modal',
+                mode: 'ios',
+                presentingElement: document.querySelector('ion-router-outlet') || undefined,
+                backdropDismiss: true,
+                showBackdrop: true,
+                animated: true,
+                keyboardClose: true,
+                // Control the presenting element animation
+                enterAnimation: undefined, // Use default
+                leaveAnimation: undefined, // Use default
+            });
+            // console.log('[WhitelabelDemoModal] Modal created, presenting...');
+            await modal.present();
+            // console.log('[WhitelabelDemoModal] Modal presented');
+        }
+        catch (error) {
+            // console.error('[WhitelabelDemoModal] Error opening modal:', error);
+            throw error;
+        }
+    }
+    /**
+     * Close the currently open whitelabel demo 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.16", ngImport: i0, type: WhitelabelDemoModalService, deps: [{ token: i1.ModalController }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WhitelabelDemoModalService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WhitelabelDemoModalService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i1.ModalController }] });
+
 /**
  * MobileTabsExampleComponent
  *