@propbinder/mobile-design 0.2.74 → 0.2.75

package/fesm2022/propbinder-mobile-design.mjs

@@ -5,7 +5,7 @@ import { CommonModule, isPlatformBrowser } from '@angular/common';
 import * as i1$3 from '@angular/router';
 import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';
 import * as i1 from '@ionic/angular/standalone';
-import { ModalController, IonHeader, IonToolbar, IonTitle, IonButtons, IonContent, Platform, IonRefresher, IonRefresherContent, IonPopover, AlertController, IonSpinner, IonTabBar, IonTabButton, IonLabel, IonTabs, IonTab, IonPicker, IonPickerColumn, IonPickerColumnOption, IonInfiniteScroll, IonInfiniteScrollContent } from '@ionic/angular/standalone';
+import { ModalController, IonHeader, IonToolbar, IonTitle, IonButtons, IonContent, Platform, IonRefresher, IonRefresherContent, IonPopover, AlertController, IonSpinner, IonTabBar, IonTabButton, IonLabel, IonTabs, IonTab, IonPicker, IonPickerColumn, IonPickerColumnOption, IonInfiniteScroll, IonInfiniteScrollContent, NavController } from '@ionic/angular/standalone';
 import { ImpactStyle, Haptics } from '@capacitor/haptics';
 import { DsIconButtonComponent, DsIconComponent, DsButtonComponent, DsAvatarComponent, DsShapeIndicatorComponent, DsTextareaComponent, DsDatepickerComponent, DsCheckboxComponent, DsInputTimeComponent, DsLabelComponent, DsBadgeComponent } from '@propbinder/design-system';
 import { StatusBar, Style } from '@capacitor/status-bar';
@@ -12268,6 +12268,325 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }] } });
 
+const DEFAULT_COMMUNITY_ADMIN_LABELS = {
+    pageTitle: 'Fællesskabsadministrator',
+    closeButton: 'Luk',
+    addButtonAriaLabel: 'Tilføj administrator',
+    emptyState: 'Ingen administratorer endnu',
+    emptyStateDescription: 'Tilføj beboere som administratorer, så de kan hjælpe med at administrere fællesskabet.',
+    removeConfirmTitle: 'Fjern administrator?',
+    removeConfirmMessage: (name) => `${name} fjernes som administrator.`,
+    removeConfirmButton: 'Fjern',
+    cancelButton: 'Annuller',
+    addPickerTitle: 'Tilføj administrator',
+    addPickerSearchPlaceholder: 'Søg efter beboer',
+    addPickerSearchAriaLabel: 'Søg efter beboer',
+    addPickerEmpty: 'Ingen beboere fundet',
+    onboardingTitle: 'Du er nu fællesskabsadministrator',
+    onboardingMessage: 'Du kan nu oprette bookbare faciliteter i fællesskabet, samt fastgøre eller slette opslag i dit ejendomsfællesskab.',
+    onboardingButton: 'Forstået',
+};
+/**
+ * Full-screen modal for managing community administrators.
+ *
+ * The main view lists current admins with a "more" menu to remove them.
+ * Tapping the "+" header button opens a stacked picker modal to add new admins
+ * from the available tenants list.
+ */
+class DsMobileCommunityAdminsModalComponent {
+    modalCtrl = inject(ModalController);
+    bottomSheet = inject(DsMobileBottomSheetService);
+    getAdminsSnapshot;
+    availableTenants = [];
+    currentUserId = '';
+    onAddAdmin;
+    onRemoveAdmin;
+    labels;
+    lbl;
+    localAdmins = [];
+    get showAddButton() {
+        return !!this.onAddAdmin && this.availableTenants.length > 0;
+    }
+    ngOnInit() {
+        this.lbl = { ...DEFAULT_COMMUNITY_ADMIN_LABELS, ...this.labels };
+        this.syncAdmins();
+    }
+    syncAdmins() {
+        this.localAdmins = [...(this.getAdminsSnapshot?.() ?? [])];
+    }
+    async confirmRemoveAdmin(admin) {
+        if (!this.onRemoveAdmin || admin.id === this.currentUserId)
+            return;
+        const confirm = await this.bottomSheet.create({
+            component: DsMobileConfirmationSheetComponent,
+            componentProps: {
+                title: this.lbl.removeConfirmMessage(admin.name),
+                buttonText: this.lbl.removeConfirmButton,
+                destructive: true,
+                showIllustration: false,
+                showCancelButton: true,
+            },
+            breakpoints: [0, 1],
+            initialBreakpoint: 1,
+            handle: true,
+            cssClass: 'auto-height',
+        });
+        const result = await confirm.onWillDismiss();
+        if (result.role !== 'confirm')
+            return;
+        await Promise.resolve(this.onRemoveAdmin(admin.id));
+        this.syncAdmins();
+    }
+    async openAddAdminPicker() {
+        if (!this.onAddAdmin)
+            return;
+        const currentAdminIds = new Set(this.localAdmins.map(a => a.id));
+        const pickable = this.availableTenants.filter(t => !currentAdminIds.has(t.id));
+        if (pickable.length === 0)
+            return;
+        const picker = await this.modalCtrl.create({
+            component: DsMobileCommunityAdminPickerComponent,
+            componentProps: {
+                tenants: pickable,
+                labels: this.lbl,
+            },
+            cssClass: 'ds-modal-base',
+            mode: 'ios',
+            presentingElement: document.querySelector('ion-router-outlet') || undefined,
+            backdropDismiss: true,
+            showBackdrop: true,
+            animated: true,
+        });
+        await picker.present();
+        const { data, role } = await picker.onWillDismiss();
+        if (role === 'selected' && data?.tenantId) {
+            await Promise.resolve(this.onAddAdmin(data.tenantId));
+            this.syncAdmins();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileCommunityAdminsModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DsMobileCommunityAdminsModalComponent, isStandalone: true, selector: "ds-mobile-community-admins-modal", inputs: { getAdminsSnapshot: "getAdminsSnapshot", availableTenants: "availableTenants", currentUserId: "currentUserId", onAddAdmin: "onAddAdmin", onRemoveAdmin: "onRemoveAdmin", labels: "labels" }, ngImport: i0, template: `
+    <ds-mobile-modal-base
+      [headerTitle]="lbl.pageTitle"
+      [closeButtonLabel]="lbl.closeButton"
+      contentPadding="0"
+      [hasFixedBottom]="false"
+    >
+      @if (showAddButton) {
+        <div header-trailing>
+          <ds-icon-button
+            icon="remixAddLine"
+            variant="secondary"
+            size="md"
+            (clicked)="openAddAdminPicker()"
+            [attr.aria-label]="lbl.addButtonAriaLabel"
+          />
+        </div>
+      }
+
+      <ds-mobile-section contentGap="0px" padding="12px 20px 20px 20px" [showBorder]="false">
+        @if (localAdmins.length > 0) {
+          @for (admin of localAdmins; track admin.id) {
+            <ds-mobile-contact-list-item
+              [name]="admin.name"
+              [initials]="admin.avatarInitials || ''"
+              [contactPerson]="admin.unit || ''"
+              [avatarSrc]="admin.avatarSrc || ''"
+              [avatarType]="admin.avatarType || 'initials'"
+              [clickable]="false"
+              [showChevron]="false"
+              [showDeleteAction]="admin.id !== currentUserId"
+              (deleteClick)="confirmRemoveAdmin(admin)"
+            />
+          }
+        } @else {
+          <p class="empty-state">{{ lbl.emptyState }}</p>
+        }
+      </ds-mobile-section>
+    </ds-mobile-modal-base>
+  `, isInline: true, styles: [".empty-state{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);color:var(--color-text-tertiary);text-align:center;padding:24px 16px;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsMobileModalBaseComponent, selector: "ds-mobile-modal-base", inputs: ["headerTitleInteractive", "showHeader"], outputs: ["titleClick"] }, { kind: "component", type: DsIconButtonComponent, selector: "ds-icon-button", inputs: ["variant", "size", "icon", "disabled", "loading", "pressed", "expanded", "ariaLabel", "tooltip", "tooltipDisabled", "tooltipPlacement"], outputs: ["clicked", "focused", "blurred"] }, { kind: "component", type: DsMobileSectionComponent, selector: "ds-mobile-section", inputs: ["headline", "icon", "linkText", "padding", "paddingDesktop", "gap", "contentGap", "showBorder", "overflow"], outputs: ["linkClick"] }, { kind: "component", type: DsMobileContactListItemComponent, selector: "ds-mobile-contact-list-item", inputs: ["name", "nameSuffix", "initials", "avatarSrc", "avatarType", "avatarIconName", "showBadge", "contactPerson", "phoneNumber", "clickable", "showChevron", "showMoreMenu", "moreMenuAriaLabel", "selectionMode", "selected", "showDeleteAction", "variant", "align"], outputs: ["contactClick", "selectionToggle", "moreClick", "deleteClick"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileCommunityAdminsModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-mobile-community-admins-modal', standalone: true, imports: [
+                        CommonModule,
+                        DsMobileModalBaseComponent,
+                        DsIconButtonComponent,
+                        DsMobileSectionComponent,
+                        DsMobileContactListItemComponent,
+                    ], template: `
+    <ds-mobile-modal-base
+      [headerTitle]="lbl.pageTitle"
+      [closeButtonLabel]="lbl.closeButton"
+      contentPadding="0"
+      [hasFixedBottom]="false"
+    >
+      @if (showAddButton) {
+        <div header-trailing>
+          <ds-icon-button
+            icon="remixAddLine"
+            variant="secondary"
+            size="md"
+            (clicked)="openAddAdminPicker()"
+            [attr.aria-label]="lbl.addButtonAriaLabel"
+          />
+        </div>
+      }
+
+      <ds-mobile-section contentGap="0px" padding="12px 20px 20px 20px" [showBorder]="false">
+        @if (localAdmins.length > 0) {
+          @for (admin of localAdmins; track admin.id) {
+            <ds-mobile-contact-list-item
+              [name]="admin.name"
+              [initials]="admin.avatarInitials || ''"
+              [contactPerson]="admin.unit || ''"
+              [avatarSrc]="admin.avatarSrc || ''"
+              [avatarType]="admin.avatarType || 'initials'"
+              [clickable]="false"
+              [showChevron]="false"
+              [showDeleteAction]="admin.id !== currentUserId"
+              (deleteClick)="confirmRemoveAdmin(admin)"
+            />
+          }
+        } @else {
+          <p class="empty-state">{{ lbl.emptyState }}</p>
+        }
+      </ds-mobile-section>
+    </ds-mobile-modal-base>
+  `, styles: [".empty-state{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);color:var(--color-text-tertiary);text-align:center;padding:24px 16px;margin:0}\n"] }]
+        }], propDecorators: { getAdminsSnapshot: [{
+                type: Input,
+                args: [{ required: true }]
+            }], availableTenants: [{
+                type: Input
+            }], currentUserId: [{
+                type: Input
+            }], onAddAdmin: [{
+                type: Input
+            }], onRemoveAdmin: [{
+                type: Input
+            }], labels: [{
+                type: Input
+            }] } });
+/**
+ * Internal stacked picker for selecting a single tenant to promote to admin.
+ */
+class DsMobileCommunityAdminPickerComponent {
+    modalCtrl = inject(ModalController);
+    tenants = [];
+    labels;
+    lbl;
+    searchQuery = signal('', ...(ngDevMode ? [{ debugName: "searchQuery" }] : []));
+    tenantsSig = signal([], ...(ngDevMode ? [{ debugName: "tenantsSig" }] : []));
+    ngOnInit() {
+        this.lbl = this.labels ?? DEFAULT_COMMUNITY_ADMIN_LABELS;
+        this.tenantsSig.set(this.tenants ?? []);
+    }
+    filteredTenants = computed(() => {
+        const q = this.searchQuery().toLowerCase().trim();
+        const list = this.tenantsSig();
+        if (!q)
+            return list;
+        return list.filter(t => t.name.toLowerCase().includes(q) ||
+            (t.unit ?? '').toLowerCase().includes(q));
+    }, ...(ngDevMode ? [{ debugName: "filteredTenants" }] : []));
+    selectTenant(tenant) {
+        void this.modalCtrl.dismiss({ tenantId: tenant.id }, 'selected');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileCommunityAdminPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DsMobileCommunityAdminPickerComponent, isStandalone: true, selector: "ds-mobile-community-admin-picker", inputs: { tenants: "tenants", labels: "labels" }, ngImport: i0, template: `
+    <ds-mobile-modal-base
+      [headerTitle]="lbl.addPickerTitle"
+      [closeButtonLabel]="lbl.closeButton"
+      [hasFixedBottom]="false"
+      [enableKeyboardHandling]="true"
+      contentPadding="0"
+    >
+      <div header-below>
+        <ds-mobile-list-search
+          [placeholder]="lbl.addPickerSearchPlaceholder"
+          [ariaLabel]="lbl.addPickerSearchAriaLabel"
+          [showDivider]="false"
+          [value]="searchQuery()"
+          (valueChange)="searchQuery.set($event)"
+        />
+      </div>
+
+      <ds-mobile-section contentGap="0px" padding="12px 20px 20px 20px" [showBorder]="false">
+        @if (filteredTenants().length > 0) {
+          @for (t of filteredTenants(); track t.id) {
+            <ds-mobile-contact-list-item
+              [name]="t.name"
+              [initials]="t.avatarInitials || ''"
+              [contactPerson]="t.unit || ''"
+              [avatarSrc]="t.avatarSrc || ''"
+              [avatarType]="t.avatarType || 'initials'"
+              [clickable]="true"
+              [showMoreMenu]="false"
+              [showChevron]="false"
+              (contactClick)="selectTenant(t)"
+            />
+          }
+        } @else {
+          <p class="search-empty">{{ lbl.addPickerEmpty }}</p>
+        }
+      </ds-mobile-section>
+    </ds-mobile-modal-base>
+  `, isInline: true, styles: [".search-empty{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);color:var(--color-text-tertiary);text-align:center;padding:24px 16px;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsMobileModalBaseComponent, selector: "ds-mobile-modal-base", inputs: ["headerTitleInteractive", "showHeader"], outputs: ["titleClick"] }, { kind: "component", type: DsMobileSectionComponent, selector: "ds-mobile-section", inputs: ["headline", "icon", "linkText", "padding", "paddingDesktop", "gap", "contentGap", "showBorder", "overflow"], outputs: ["linkClick"] }, { kind: "component", type: DsMobileListSearchComponent, selector: "ds-mobile-list-search", inputs: ["placeholder", "ariaLabel", "value", "showDivider"], outputs: ["valueChange"] }, { kind: "component", type: DsMobileContactListItemComponent, selector: "ds-mobile-contact-list-item", inputs: ["name", "nameSuffix", "initials", "avatarSrc", "avatarType", "avatarIconName", "showBadge", "contactPerson", "phoneNumber", "clickable", "showChevron", "showMoreMenu", "moreMenuAriaLabel", "selectionMode", "selected", "showDeleteAction", "variant", "align"], outputs: ["contactClick", "selectionToggle", "moreClick", "deleteClick"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileCommunityAdminPickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-mobile-community-admin-picker', standalone: true, imports: [
+                        CommonModule,
+                        DsMobileModalBaseComponent,
+                        DsMobileSectionComponent,
+                        DsMobileListSearchComponent,
+                        DsMobileContactListItemComponent,
+                    ], template: `
+    <ds-mobile-modal-base
+      [headerTitle]="lbl.addPickerTitle"
+      [closeButtonLabel]="lbl.closeButton"
+      [hasFixedBottom]="false"
+      [enableKeyboardHandling]="true"
+      contentPadding="0"
+    >
+      <div header-below>
+        <ds-mobile-list-search
+          [placeholder]="lbl.addPickerSearchPlaceholder"
+          [ariaLabel]="lbl.addPickerSearchAriaLabel"
+          [showDivider]="false"
+          [value]="searchQuery()"
+          (valueChange)="searchQuery.set($event)"
+        />
+      </div>
+
+      <ds-mobile-section contentGap="0px" padding="12px 20px 20px 20px" [showBorder]="false">
+        @if (filteredTenants().length > 0) {
+          @for (t of filteredTenants(); track t.id) {
+            <ds-mobile-contact-list-item
+              [name]="t.name"
+              [initials]="t.avatarInitials || ''"
+              [contactPerson]="t.unit || ''"
+              [avatarSrc]="t.avatarSrc || ''"
+              [avatarType]="t.avatarType || 'initials'"
+              [clickable]="true"
+              [showMoreMenu]="false"
+              [showChevron]="false"
+              (contactClick)="selectTenant(t)"
+            />
+          }
+        } @else {
+          <p class="search-empty">{{ lbl.addPickerEmpty }}</p>
+        }
+      </ds-mobile-section>
+    </ds-mobile-modal-base>
+  `, styles: [".search-empty{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);color:var(--color-text-tertiary);text-align:center;padding:24px 16px;margin:0}\n"] }]
+        }], propDecorators: { tenants: [{
+                type: Input
+            }], labels: [{
+                type: Input
+            }] } });
+
 function isPeerDirectConversation(c) {
     return c.kind === 'direct';
 }
@@ -12398,6 +12717,71 @@ function sysMsg(id, systemKind, systemMeta, ts) {
     };
 }
 
+const RADIUS_PX = {
+    sm: 6,
+    md: 8,
+    lg: 12,
+    xl: 16,
+};
+class DsMobileVendorAvatarComponent {
+    name = input('', ...(ngDevMode ? [{ debugName: "name" }] : []));
+    logo = input('', ...(ngDevMode ? [{ debugName: "logo" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    radiusPx = computed(() => RADIUS_PX[this.size()], ...(ngDevMode ? [{ debugName: "radiusPx" }] : []));
+    sizePx = computed(() => {
+        const map = { sm: 24, md: 32, lg: 48, xl: 64 };
+        return map[this.size()];
+    }, ...(ngDevMode ? [{ debugName: "sizePx" }] : []));
+    initials = computed(() => {
+        return this.name()
+            .split(/\s+/)
+            .filter(w => w.length > 0)
+            .slice(0, 2)
+            .map(w => w[0].toUpperCase())
+            .join('');
+    }, ...(ngDevMode ? [{ debugName: "initials" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileVendorAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DsMobileVendorAvatarComponent, isStandalone: true, selector: "ds-mobile-vendor-avatar", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, logo: { classPropertyName: "logo", publicName: "logo", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    @if (logo()) {
+      <div
+        class="vendor-avatar-logo"
+        [style.width.px]="sizePx()"
+        [style.height.px]="sizePx()"
+        [style.border-radius.px]="radiusPx()">
+        <img [src]="logo()" [alt]="name()" />
+      </div>
+    } @else {
+      <div [style.--vendor-avatar-radius.px]="radiusPx()">
+        <ds-avatar
+          type="initials"
+          [size]="size()"
+          [initials]="initials()" />
+      </div>
+    }
+  `, isInline: true, styles: [":host{display:inline-flex;flex-shrink:0}.vendor-avatar-logo{display:inline-flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;background:transparent}.vendor-avatar-logo img{width:100%;height:100%;object-fit:contain;display:block}:host ::ng-deep ds-avatar .avatar{border-radius:var(--vendor-avatar-radius)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsAvatarComponent, selector: "ds-avatar", inputs: ["type", "size", "initials", "src", "alt", "iconName", "iconColor"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileVendorAvatarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-mobile-vendor-avatar', standalone: true, imports: [CommonModule, DsAvatarComponent], template: `
+    @if (logo()) {
+      <div
+        class="vendor-avatar-logo"
+        [style.width.px]="sizePx()"
+        [style.height.px]="sizePx()"
+        [style.border-radius.px]="radiusPx()">
+        <img [src]="logo()" [alt]="name()" />
+      </div>
+    } @else {
+      <div [style.--vendor-avatar-radius.px]="radiusPx()">
+        <ds-avatar
+          type="initials"
+          [size]="size()"
+          [initials]="initials()" />
+      </div>
+    }
+  `, styles: [":host{display:inline-flex;flex-shrink:0}.vendor-avatar-logo{display:inline-flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;background:transparent}.vendor-avatar-logo img{width:100%;height:100%;object-fit:contain;display:block}:host ::ng-deep ds-avatar .avatar{border-radius:var(--vendor-avatar-radius)}\n"] }]
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], logo: [{ type: i0.Input, args: [{ isSignal: true, alias: "logo", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+
 /**
  * DsMobileCardInlineComponent
  *
@@ -15595,6 +15979,11 @@ class DsMobileChatModalComponent {
               (click)="onGroupTitleClick()"
             />
           }
+        } @else if (participant().avatarShape === 'squircle') {
+          <ds-mobile-vendor-avatar
+            [name]="participant().name"
+            [logo]="participant().avatarSrc || ''"
+            size="md" />
         } @else {
           <ds-avatar-with-badge
             [initials]="participant().avatarInitials || ''"
@@ -15658,6 +16047,11 @@ class DsMobileChatModalComponent {
                 style="cursor: pointer"
                 (click)="onGroupTitleClick(); $event.stopPropagation()"
               />
+            } @else if (participant().avatarShape === 'squircle') {
+              <ds-mobile-vendor-avatar
+                [name]="participant().name"
+                [logo]="participant().avatarSrc || ''"
+                size="xl" />
             } @else {
               <ds-avatar-with-badge
                 [initials]="participant().avatarInitials || ''"
@@ -15809,13 +16203,14 @@ class DsMobileChatModalComponent {
         </ds-mobile-message-composer>
       </div>
     </ds-mobile-modal-base>
-  `, isInline: true, styles: [".author-details{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.author-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}.author-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);display:flex;align-items:center;gap:6px}.author-meta .separator{color:var(--color-text-tertiary, #a0a0a0)}.lightbox-context .author-name,.overlay-context .author-name{color:#fffffff2}.lightbox-context .author-meta,.overlay-context .author-meta{color:#ffffffb3}.lightbox-context .author-meta .separator,.overlay-context .author-meta .separator{color:#ffffff80}.section-headline{font-size:var(--font-size-base);font-weight:600;color:var(--text-color-default-primary);padding:16px 0;margin:0;letter-spacing:-.2px;display:flex;align-items:center;gap:6px}.empty-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;line-height:1.3;color:var(--text-color-default-primary, #202227);margin:0 0 8px}.empty-state-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:1.4;color:var(--text-color-default-secondary, #545B66);margin:0}.ghost-input-clean ::ng-deep .ds-input,.ghost-input-clean ::ng-deep .ds-textarea,.ghost-input-clean ::ng-deep .textarea-container{outline:none!important;border:none!important;padding:0!important}:host ::ng-deep ds-textarea.ghost-input-clean .textarea-container{padding:0!important}.ghost-input-clean ::ng-deep .ds-input:hover,.ghost-input-clean ::ng-deep .ds-textarea:hover,.ghost-input-clean ::ng-deep .textarea-container:hover,.ghost-input-clean ::ng-deep .ds-input:focus,.ghost-input-clean ::ng-deep .ds-textarea:focus,.ghost-input-clean ::ng-deep .textarea-container:focus,.ghost-input-clean ::ng-deep .ds-input:focus-within,.ghost-input-clean ::ng-deep .ds-textarea:focus-within,.ghost-input-clean ::ng-deep .textarea-container:focus-within{outline:none!important;border:none!important;box-shadow:none!important}.ghost-input-clean ::ng-deep textarea{outline:none!important;border:none!important;box-shadow:none!important;resize:none!important}.ghost-input-clean ::ng-deep textarea:hover,.ghost-input-clean ::ng-deep textarea:focus{outline:none!important;border:none!important;box-shadow:none!important}\n", ":host ::ng-deep .modal-content-container{padding-top:0}:host-context(.chat-modal--settings) ::ng-deep .modal-header{border-bottom:none}:host-context(.chat-modal--add-members) ::ng-deep .modal-header{border-bottom:1px solid var(--border-color-default)}.chat-messages-container{display:flex;flex-direction:column;width:100%}.chat-system-line{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs, 12px);font-weight:400;line-height:1.35;color:var(--text-color-default-tertiary, #737373);text-align:center;margin:8px 24px}.chat-avatar-section{display:flex;flex-direction:column;align-items:center;gap:12px;padding:48px 0 0;background:var(--color-background-neutral-primary, #ffffff)}.chat-avatar-info{display:flex;flex-direction:column;align-items:center;gap:4px}.chat-avatar-name{display:flex;align-items:center;gap:6px;font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;line-height:1.3;color:var(--color-text-primary, #1a1a1a)}.chat-avatar-role{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;color:var(--color-text-secondary, #666666)}.chat-avatar-meta{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;color:var(--color-text-tertiary, #737373);display:flex;align-items:center;gap:4px}.messages-list{display:flex;flex-direction:column;width:100%;padding:16px 0 0;align-items:stretch}.messages-list ds-mobile-message-bubble{width:100%;display:flex}.timestamp-header{display:flex;justify-content:center;margin:16px 0 8px}.timestamp-text{font-family:Brockmann,sans-serif;font-size:12px;font-weight:400;color:var(--color-text-secondary);padding:4px 12px}.message-file-attachments{display:flex;flex-direction:column;gap:8px;margin-bottom:12px;padding:0 20px 0 60px;max-width:100%}.message-file-attachments.own-message{padding:0 0 0 96px;align-items:flex-end}.message-file-attachments ds-mobile-card-inline-file{max-width:280px;width:100%}.message-image-attachment{width:96px;height:96px;cursor:pointer;border-radius:12px;overflow:hidden;position:relative;transition:transform .2s ease;border:1px solid var(--border-color-default, #e5e5e5)}.message-image-attachment:active{transform:scale(.98)}.message-image-attachment .inline-image{width:100%;height:100%;display:block;-o-object-fit:cover;object-fit:cover}.group-settings-back-btn{flex-shrink:0;border-radius:50%}.group-settings-back-btn::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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsAvatarWithBadgeComponent, selector: "ds-avatar-with-badge", inputs: ["type", "size", "initials", "src", "iconName", "showBadge", "badgePosition"] }, { kind: "component", type: DsMobileMessageComposerComponent, selector: "ds-mobile-message-composer", inputs: ["avatarInitials", "avatarType", "avatarSrc", "placeholder", "sendButtonLabel", "attachmentButtonLabel", "showAttachmentButton", "editIndicatorText", "replyIndicatorText", "enableMentions", "mentionUsers", "autoFocus"], outputs: ["messageSent", "editCancelled", "replyCancelled", "mentionSelected", "attachmentClicked", "attachmentsChanged"] }, { kind: "component", type: DsMobileMessageBubbleComponent, selector: "ds-mobile-message-bubble", inputs: ["content", "isOwnMessage", "senderName", "timestamp", "showTimestamp", "avatarInitials", "avatarType", "avatarSrc", "showAvatar", "clusterPosition", "attachments", "clickable", "isNewMessage", "isDeleted", "showEditedHint", "editedHintText"], outputs: ["attachmentClick", "longPress", "messageClick"] }, { kind: "component", type: DsMobileModalBaseComponent, selector: "ds-mobile-modal-base", inputs: ["headerTitleInteractive", "showHeader"], outputs: ["titleClick"] }, { kind: "component", type: DsMobileCardInlineFileComponent, selector: "ds-mobile-card-inline-file", inputs: ["fileName", "fileSize", "variant", "layout", "fileUrl"], outputs: ["fileClick"] }, { kind: "component", type: DsMobileSystemMessageBannerComponent, selector: "ds-mobile-system-message-banner", inputs: ["message", "iconName", "afterTimestamp"] }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }, { kind: "component", type: DsIconButtonComponent, selector: "ds-icon-button", inputs: ["variant", "size", "icon", "disabled", "loading", "pressed", "expanded", "ariaLabel", "tooltip", "tooltipDisabled", "tooltipPlacement"], outputs: ["clicked", "focused", "blurred"] }, { kind: "component", type: DsMobileSectionComponent, selector: "ds-mobile-section", inputs: ["headline", "icon", "linkText", "padding", "paddingDesktop", "gap", "contentGap", "showBorder", "overflow"], outputs: ["linkClick"] }, { kind: "component", type: DsMobileGroupAvatarStackComponent, selector: "ds-mobile-group-avatar-stack", inputs: ["members", "customAvatarUrl", "size", "layout", "currentUserId"] }, { kind: "component", type: DsMobileListSearchComponent, selector: "ds-mobile-list-search", inputs: ["placeholder", "ariaLabel", "value", "showDivider"], outputs: ["valueChange"] }, { kind: "component", type: DsMobileChatGroupPanelsComponent, selector: "ds-mobile-chat-group-panels", inputs: ["panelView", "group", "membersForStack", "participantName", "currentUserId", "isAdmin", "canEditGroupDetails", "canAddGroupMembers", "canLeaveGroup", "canRemoveMember", "canMessageMember", "allTenantsForPicker", "searchQuery", "labels"], outputs: ["navigateTo", "renameGroup", "setGroupAvatarUrl", "addMembers", "removeMember", "messageMember", "leaveGroup"] }] });
+  `, isInline: true, styles: [".author-details{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.author-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}.author-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);display:flex;align-items:center;gap:6px}.author-meta .separator{color:var(--color-text-tertiary, #a0a0a0)}.lightbox-context .author-name,.overlay-context .author-name{color:#fffffff2}.lightbox-context .author-meta,.overlay-context .author-meta{color:#ffffffb3}.lightbox-context .author-meta .separator,.overlay-context .author-meta .separator{color:#ffffff80}.section-headline{font-size:var(--font-size-base);font-weight:600;color:var(--text-color-default-primary);padding:16px 0;margin:0;letter-spacing:-.2px;display:flex;align-items:center;gap:6px}.empty-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;line-height:1.3;color:var(--text-color-default-primary, #202227);margin:0 0 8px}.empty-state-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:1.4;color:var(--text-color-default-secondary, #545B66);margin:0}.ghost-input-clean ::ng-deep .ds-input,.ghost-input-clean ::ng-deep .ds-textarea,.ghost-input-clean ::ng-deep .textarea-container{outline:none!important;border:none!important;padding:0!important}:host ::ng-deep ds-textarea.ghost-input-clean .textarea-container{padding:0!important}.ghost-input-clean ::ng-deep .ds-input:hover,.ghost-input-clean ::ng-deep .ds-textarea:hover,.ghost-input-clean ::ng-deep .textarea-container:hover,.ghost-input-clean ::ng-deep .ds-input:focus,.ghost-input-clean ::ng-deep .ds-textarea:focus,.ghost-input-clean ::ng-deep .textarea-container:focus,.ghost-input-clean ::ng-deep .ds-input:focus-within,.ghost-input-clean ::ng-deep .ds-textarea:focus-within,.ghost-input-clean ::ng-deep .textarea-container:focus-within{outline:none!important;border:none!important;box-shadow:none!important}.ghost-input-clean ::ng-deep textarea{outline:none!important;border:none!important;box-shadow:none!important;resize:none!important}.ghost-input-clean ::ng-deep textarea:hover,.ghost-input-clean ::ng-deep textarea:focus{outline:none!important;border:none!important;box-shadow:none!important}\n", ":host ::ng-deep .modal-content-container{padding-top:0}:host-context(.chat-modal--settings) ::ng-deep .modal-header{border-bottom:none}:host-context(.chat-modal--add-members) ::ng-deep .modal-header{border-bottom:1px solid var(--border-color-default)}.chat-messages-container{display:flex;flex-direction:column;width:100%}.chat-system-line{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs, 12px);font-weight:400;line-height:1.35;color:var(--text-color-default-tertiary, #737373);text-align:center;margin:8px 24px}.chat-avatar-section{display:flex;flex-direction:column;align-items:center;gap:12px;padding:48px 0 0;background:var(--color-background-neutral-primary, #ffffff)}.chat-avatar-info{display:flex;flex-direction:column;align-items:center;gap:4px}.chat-avatar-name{display:flex;align-items:center;gap:6px;font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;line-height:1.3;color:var(--color-text-primary, #1a1a1a)}.chat-avatar-role{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;color:var(--color-text-secondary, #666666)}.chat-avatar-meta{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;color:var(--color-text-tertiary, #737373);display:flex;align-items:center;gap:4px}.messages-list{display:flex;flex-direction:column;width:100%;padding:16px 0 0;align-items:stretch}.messages-list ds-mobile-message-bubble{width:100%;display:flex}.timestamp-header{display:flex;justify-content:center;margin:16px 0 8px}.timestamp-text{font-family:Brockmann,sans-serif;font-size:12px;font-weight:400;color:var(--color-text-secondary);padding:4px 12px}.message-file-attachments{display:flex;flex-direction:column;gap:8px;margin-bottom:12px;padding:0 20px 0 60px;max-width:100%}.message-file-attachments.own-message{padding:0 0 0 96px;align-items:flex-end}.message-file-attachments ds-mobile-card-inline-file{max-width:280px;width:100%}.message-image-attachment{width:96px;height:96px;cursor:pointer;border-radius:12px;overflow:hidden;position:relative;transition:transform .2s ease;border:1px solid var(--border-color-default, #e5e5e5)}.message-image-attachment:active{transform:scale(.98)}.message-image-attachment .inline-image{width:100%;height:100%;display:block;-o-object-fit:cover;object-fit:cover}.group-settings-back-btn{flex-shrink:0;border-radius:50%}.group-settings-back-btn::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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsAvatarWithBadgeComponent, selector: "ds-avatar-with-badge", inputs: ["type", "size", "initials", "src", "iconName", "showBadge", "badgePosition"] }, { kind: "component", type: DsMobileVendorAvatarComponent, selector: "ds-mobile-vendor-avatar", inputs: ["name", "logo", "size"] }, { kind: "component", type: DsMobileMessageComposerComponent, selector: "ds-mobile-message-composer", inputs: ["avatarInitials", "avatarType", "avatarSrc", "placeholder", "sendButtonLabel", "attachmentButtonLabel", "showAttachmentButton", "editIndicatorText", "replyIndicatorText", "enableMentions", "mentionUsers", "autoFocus"], outputs: ["messageSent", "editCancelled", "replyCancelled", "mentionSelected", "attachmentClicked", "attachmentsChanged"] }, { kind: "component", type: DsMobileMessageBubbleComponent, selector: "ds-mobile-message-bubble", inputs: ["content", "isOwnMessage", "senderName", "timestamp", "showTimestamp", "avatarInitials", "avatarType", "avatarSrc", "showAvatar", "clusterPosition", "attachments", "clickable", "isNewMessage", "isDeleted", "showEditedHint", "editedHintText"], outputs: ["attachmentClick", "longPress", "messageClick"] }, { kind: "component", type: DsMobileModalBaseComponent, selector: "ds-mobile-modal-base", inputs: ["headerTitleInteractive", "showHeader"], outputs: ["titleClick"] }, { kind: "component", type: DsMobileCardInlineFileComponent, selector: "ds-mobile-card-inline-file", inputs: ["fileName", "fileSize", "variant", "layout", "fileUrl"], outputs: ["fileClick"] }, { kind: "component", type: DsMobileSystemMessageBannerComponent, selector: "ds-mobile-system-message-banner", inputs: ["message", "iconName", "afterTimestamp"] }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }, { kind: "component", type: DsIconButtonComponent, selector: "ds-icon-button", inputs: ["variant", "size", "icon", "disabled", "loading", "pressed", "expanded", "ariaLabel", "tooltip", "tooltipDisabled", "tooltipPlacement"], outputs: ["clicked", "focused", "blurred"] }, { kind: "component", type: DsMobileSectionComponent, selector: "ds-mobile-section", inputs: ["headline", "icon", "linkText", "padding", "paddingDesktop", "gap", "contentGap", "showBorder", "overflow"], outputs: ["linkClick"] }, { kind: "component", type: DsMobileGroupAvatarStackComponent, selector: "ds-mobile-group-avatar-stack", inputs: ["members", "customAvatarUrl", "size", "layout", "currentUserId"] }, { kind: "component", type: DsMobileListSearchComponent, selector: "ds-mobile-list-search", inputs: ["placeholder", "ariaLabel", "value", "showDivider"], outputs: ["valueChange"] }, { kind: "component", type: DsMobileChatGroupPanelsComponent, selector: "ds-mobile-chat-group-panels", inputs: ["panelView", "group", "membersForStack", "participantName", "currentUserId", "isAdmin", "canEditGroupDetails", "canAddGroupMembers", "canLeaveGroup", "canRemoveMember", "canMessageMember", "allTenantsForPicker", "searchQuery", "labels"], outputs: ["navigateTo", "renameGroup", "setGroupAvatarUrl", "addMembers", "removeMember", "messageMember", "leaveGroup"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileChatModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ds-mobile-chat-modal', standalone: true, imports: [
                         CommonModule,
                         DsAvatarWithBadgeComponent,
+                        DsMobileVendorAvatarComponent,
                         DsMobileMessageComposerComponent,
                         DsMobileMessageBubbleComponent,
                         DsMobileModalBaseComponent,
@@ -15866,6 +16261,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
               (click)="onGroupTitleClick()"
             />
           }
+        } @else if (participant().avatarShape === 'squircle') {
+          <ds-mobile-vendor-avatar
+            [name]="participant().name"
+            [logo]="participant().avatarSrc || ''"
+            size="md" />
         } @else {
           <ds-avatar-with-badge
             [initials]="participant().avatarInitials || ''"
@@ -15929,6 +16329,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 style="cursor: pointer"
                 (click)="onGroupTitleClick(); $event.stopPropagation()"
               />
+            } @else if (participant().avatarShape === 'squircle') {
+              <ds-mobile-vendor-avatar
+                [name]="participant().name"
+                [logo]="participant().avatarSrc || ''"
+                size="xl" />
             } @else {
               <ds-avatar-with-badge
                 [initials]="participant().avatarInitials || ''"
@@ -16711,12 +17116,23 @@ class DsMobileTenantPickerModalComponent {
     modalCtrl = inject(ModalController);
     peerMessaging = inject(PeerMessagingService);
     peerChat = inject(PeerChatLauncherService);
+    /**
+     * When true the modal acts as a simple single-select picker:
+     * tapping a tenant dismisses with `{ tenantId }` (role `'selected'`).
+     * The "more" menu and group-selection footer are hidden.
+     */
+    pickMode = false;
+    /** Optional set of tenant IDs to exclude from the list (e.g. already-selected admins). */
+    excludeIds;
     searchQuery = signal('', ...(ngDevMode ? [{ debugName: "searchQuery" }] : []));
     selectionMode = signal(false, ...(ngDevMode ? [{ debugName: "selectionMode" }] : []));
     selectedIds = signal(new Set(), ...(ngDevMode ? [{ debugName: "selectedIds" }] : []));
     filteredTenants = computed(() => {
         const q = this.searchQuery().toLowerCase().trim();
-        const tenants = this.peerMessaging.tenants();
+        let tenants = this.peerMessaging.tenants();
+        if (this.excludeIds?.size) {
+            tenants = tenants.filter(t => !this.excludeIds.has(t.id));
+        }
         if (!q)
             return tenants;
         return tenants.filter(t => t.name.toLowerCase().includes(q) || t.unit.toLowerCase().includes(q));
@@ -16738,6 +17154,10 @@ class DsMobileTenantPickerModalComponent {
     async onTenantClick(tenant) {
         if (this.selectionMode())
             return;
+        if (this.pickMode) {
+            await this.modalCtrl.dismiss({ tenantId: tenant.id }, 'selected');
+            return;
+        }
         await this.modalCtrl.dismiss(null, 'cancel');
         await this.peerChat.openTenant(tenant, { autoFocus: true });
     }
@@ -16787,7 +17207,7 @@ class DsMobileTenantPickerModalComponent {
         await this.peerChat.createGroup(ids, groupName);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileTenantPickerModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DsMobileTenantPickerModalComponent, isStandalone: true, selector: "ds-mobile-tenant-picker-modal", ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DsMobileTenantPickerModalComponent, isStandalone: true, selector: "ds-mobile-tenant-picker-modal", inputs: { pickMode: "pickMode", excludeIds: "excludeIds" }, ngImport: i0, template: `
     <ds-mobile-modal-base
       headerTitle="Beboere"
       closeButtonLabel="Luk"
@@ -16813,8 +17233,8 @@ class DsMobileTenantPickerModalComponent {
               [initials]="tenant.initials"
               [contactPerson]="tenant.unit"
               [clickable]="true"
-              [showMoreMenu]="!selectionMode()"
-              [selectionMode]="selectionMode()"
+              [showMoreMenu]="!pickMode && !selectionMode()"
+              [selectionMode]="!pickMode && selectionMode()"
               [selected]="selectedIds().has(tenant.id)"
               (selectionToggle)="toggleTenant(tenant.id)"
               (contactClick)="onTenantClick(tenant)"
@@ -16880,8 +17300,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
               [initials]="tenant.initials"
               [contactPerson]="tenant.unit"
               [clickable]="true"
-              [showMoreMenu]="!selectionMode()"
-              [selectionMode]="selectionMode()"
+              [showMoreMenu]="!pickMode && !selectionMode()"
+              [selectionMode]="!pickMode && selectionMode()"
               [selected]="selectedIds().has(tenant.id)"
               (selectionToggle)="toggleTenant(tenant.id)"
               (contactClick)="onTenantClick(tenant)"
@@ -16912,7 +17332,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
       }
     </ds-mobile-modal-base>
   `, styles: [".search-empty{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);color:var(--color-text-tertiary);text-align:center;padding:24px 16px;margin:0}.group-footer{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--border-color-default, #e5e5e5);background:var(--color-background-neutral-primary, #fff)}.group-footer ds-button{display:block;flex:1;min-width:0;width:100%}.group-footer ::ng-deep button{width:100%;border-radius:99px}\n"] }]
-        }] });
+        }], propDecorators: { pickMode: [{
+                type: Input
+            }], excludeIds: [{
+                type: Input
+            }] } });
 
 var index = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -17819,7 +18243,7 @@ class DsMobileInteractiveListItemBookingComponent {
         </div>
       }
     </ds-mobile-list-item>
-  `, isInline: true, styles: [":host{display:block}:host:last-child{--divider-display: none;--item-padding-bottom: 0}.booking-thumbnail{position:relative;flex-shrink:0;width:64px;height:64px;border-radius:12px;overflow:hidden;background:var(--color-surface-secondary, #f5f5f5);display:flex;align-items:center;justify-content:center}.booking-thumbnail img{width:100%;height:100%;object-fit:cover}.booking-thumbnail-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--text-color-default-tertiary, #737373)}.booking-content{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}.booking-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm, 14px);font-weight:600;line-height:20px;letter-spacing:-.3px;color:var(--text-color-default-primary, #202227);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.booking-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm, 14px);font-weight:400;line-height:20px;letter-spacing:-.3px;color:var(--text-color-default-secondary, #545B66);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.booking-meta{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs, 12px);font-weight:400;line-height:1.2;letter-spacing:-.26px;color:var(--text-color-default-secondary, #545B66);display:flex;align-items:center;gap:8px;margin-top:4px}.booking-status{display:flex;align-items:center;gap:6px;font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:500;line-height:1.2;letter-spacing:-.26px;color:var(--text-color-default-secondary, #545B66)}.booking-status.available-today{color:var(--color-accent, #5d5fef)}.booking-status.available-from{color:var(--color-warning, #f59e0b)}.booking-status.unavailable{color:var(--text-color-default-tertiary, #737373)}.booking-datetime{display:flex;align-items:center;gap:4px;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-secondary, #545B66)}.booking-trailing{display:flex;align-items:center;color:var(--color-text-tertiary, #a3a3a3)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }, { kind: "component", type: DsShapeIndicatorComponent, selector: "ds-shape-indicator", inputs: ["shape", "variant", "label"] }, { kind: "component", type: DsMobileListItemComponent, selector: "ds-mobile-list-item", inputs: ["leadingSize", "variant", "align", "flushTop", "interactive", "disabled", "loading", "enableLongPress", "showDesktopMoreButton", "moreActions", "moreButtonAriaLabel", "interactiveOffset", "title", "subtitle", "showDivider", "dividerSpacing"], outputs: ["itemClick", "moreButtonClick"] }, { kind: "component", type: DsMobileLoaderOverlayComponent, selector: "ds-mobile-loader-overlay", inputs: ["spinnerSize", "borderRadius"] }] });
+  `, isInline: true, styles: [":host{display:block}:host:first-child{--item-padding-top: 0}:host:last-child{--divider-display: none;--item-padding-bottom: 0}.booking-thumbnail{position:relative;flex-shrink:0;width:64px;height:64px;border-radius:12px;overflow:hidden;background:var(--color-surface-secondary, #f5f5f5);display:flex;align-items:center;justify-content:center}.booking-thumbnail img{width:100%;height:100%;object-fit:cover}.booking-thumbnail-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--text-color-default-tertiary, #737373)}.booking-content{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}.booking-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm, 14px);font-weight:600;line-height:20px;letter-spacing:-.3px;color:var(--text-color-default-primary, #202227);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.booking-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm, 14px);font-weight:400;line-height:20px;letter-spacing:-.3px;color:var(--text-color-default-secondary, #545B66);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.booking-meta{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs, 12px);font-weight:400;line-height:1.2;letter-spacing:-.26px;color:var(--text-color-default-secondary, #545B66);display:flex;align-items:center;gap:8px;margin-top:4px}.booking-status{display:flex;align-items:center;gap:6px;font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:500;line-height:1.2;letter-spacing:-.26px;color:var(--text-color-default-secondary, #545B66)}.booking-status.available-today{color:var(--color-accent, #5d5fef)}.booking-status.available-from{color:var(--color-warning, #f59e0b)}.booking-status.unavailable{color:var(--text-color-default-tertiary, #737373)}.booking-datetime{display:flex;align-items:center;gap:4px;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-secondary, #545B66)}.booking-trailing{display:flex;align-items:center;color:var(--color-text-tertiary, #a3a3a3)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }, { kind: "component", type: DsShapeIndicatorComponent, selector: "ds-shape-indicator", inputs: ["shape", "variant", "label"] }, { kind: "component", type: DsMobileListItemComponent, selector: "ds-mobile-list-item", inputs: ["leadingSize", "variant", "align", "flushTop", "interactive", "disabled", "loading", "enableLongPress", "showDesktopMoreButton", "moreActions", "moreButtonAriaLabel", "interactiveOffset", "title", "subtitle", "showDivider", "dividerSpacing"], outputs: ["itemClick", "moreButtonClick"] }, { kind: "component", type: DsMobileLoaderOverlayComponent, selector: "ds-mobile-loader-overlay", inputs: ["spinnerSize", "borderRadius"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileInteractiveListItemBookingComponent, decorators: [{
             type: Component,
@@ -17899,7 +18323,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         </div>
       }
     </ds-mobile-list-item>
-  `, styles: [":host{display:block}:host:last-child{--divider-display: none;--item-padding-bottom: 0}.booking-thumbnail{position:relative;flex-shrink:0;width:64px;height:64px;border-radius:12px;overflow:hidden;background:var(--color-surface-secondary, #f5f5f5);display:flex;align-items:center;justify-content:center}.booking-thumbnail img{width:100%;height:100%;object-fit:cover}.booking-thumbnail-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--text-color-default-tertiary, #737373)}.booking-content{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}.booking-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm, 14px);font-weight:600;line-height:20px;letter-spacing:-.3px;color:var(--text-color-default-primary, #202227);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.booking-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm, 14px);font-weight:400;line-height:20px;letter-spacing:-.3px;color:var(--text-color-default-secondary, #545B66);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.booking-meta{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs, 12px);font-weight:400;line-height:1.2;letter-spacing:-.26px;color:var(--text-color-default-secondary, #545B66);display:flex;align-items:center;gap:8px;margin-top:4px}.booking-status{display:flex;align-items:center;gap:6px;font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:500;line-height:1.2;letter-spacing:-.26px;color:var(--text-color-default-secondary, #545B66)}.booking-status.available-today{color:var(--color-accent, #5d5fef)}.booking-status.available-from{color:var(--color-warning, #f59e0b)}.booking-status.unavailable{color:var(--text-color-default-tertiary, #737373)}.booking-datetime{display:flex;align-items:center;gap:4px;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-secondary, #545B66)}.booking-trailing{display:flex;align-items:center;color:var(--color-text-tertiary, #a3a3a3)}\n"] }]
+  `, styles: [":host{display:block}:host:first-child{--item-padding-top: 0}:host:last-child{--divider-display: none;--item-padding-bottom: 0}.booking-thumbnail{position:relative;flex-shrink:0;width:64px;height:64px;border-radius:12px;overflow:hidden;background:var(--color-surface-secondary, #f5f5f5);display:flex;align-items:center;justify-content:center}.booking-thumbnail img{width:100%;height:100%;object-fit:cover}.booking-thumbnail-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--text-color-default-tertiary, #737373)}.booking-content{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}.booking-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm, 14px);font-weight:600;line-height:20px;letter-spacing:-.3px;color:var(--text-color-default-primary, #202227);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.booking-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm, 14px);font-weight:400;line-height:20px;letter-spacing:-.3px;color:var(--text-color-default-secondary, #545B66);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.booking-meta{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs, 12px);font-weight:400;line-height:1.2;letter-spacing:-.26px;color:var(--text-color-default-secondary, #545B66);display:flex;align-items:center;gap:8px;margin-top:4px}.booking-status{display:flex;align-items:center;gap:6px;font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:500;line-height:1.2;letter-spacing:-.26px;color:var(--text-color-default-secondary, #545B66)}.booking-status.available-today{color:var(--color-accent, #5d5fef)}.booking-status.available-from{color:var(--color-warning, #f59e0b)}.booking-status.unavailable{color:var(--text-color-default-tertiary, #737373)}.booking-datetime{display:flex;align-items:center;gap:4px;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-secondary, #545B66)}.booking-trailing{display:flex;align-items:center;color:var(--color-text-tertiary, #a3a3a3)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { thumbnail: [{ type: i0.Input, args: [{ isSignal: true, alias: "thumbnail", required: false }] }], facilityTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "facilityTitle", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], bookingDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "bookingDate", required: false }] }], bookingTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "bookingTime", required: false }] }], availabilityStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "availabilityStatus", required: false }] }], statusLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusLabel", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], showChevron: [{ type: i0.Input, args: [{ isSignal: true, alias: "showChevron", required: false }] }], enableLongPress: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableLongPress", required: false }] }], moreActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "moreActions", required: false }] }], bookingClick: [{ type: i0.Output, args: ["bookingClick"] }], longPress: [{ type: i0.Output, args: ["longPress"] }] } });
 
 /**
@@ -21628,6 +22052,10 @@ class DsMobileNewInquiryModalComponent {
      * Label for the submit button
      */
     submitButtonLabel = 'Submit';
+    /**
+     * Pre-set category included in the emitted NewInquiryData (e.g. vendor id)
+     */
+    category;
     /**
      * Form title field
      */
@@ -21863,6 +22291,7 @@ class DsMobileNewInquiryModalComponent {
                 title: this.title.trim(),
                 description: this.description.trim(),
                 attachments: this.attachments(),
+                ...(this.category && { category: this.category }),
             };
             if (this.onSubmit) {
                 await this.onSubmit(inquiryData);
@@ -21935,7 +22364,7 @@ class DsMobileNewInquiryModalComponent {
         return null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileNewInquiryModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DsMobileNewInquiryModalComponent, isStandalone: true, selector: "ds-mobile-new-inquiry-modal", inputs: { loading: "loading", error: "error", onSubmit: "onSubmit", titlePlaceholder: "titlePlaceholder", descriptionPlaceholder: "descriptionPlaceholder", submitButtonLabel: "submitButtonLabel" }, viewQueries: [{ propertyName: "titleInputRef", first: true, predicate: ["titleInput"], descendants: true, read: ElementRef }, { propertyName: "descriptionInputRef", first: true, predicate: ["descriptionInput"], descendants: true, read: ElementRef }, { propertyName: "titleInput", first: true, predicate: ["titleInput"], descendants: true }, { propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DsMobileNewInquiryModalComponent, isStandalone: true, selector: "ds-mobile-new-inquiry-modal", inputs: { loading: "loading", error: "error", onSubmit: "onSubmit", titlePlaceholder: "titlePlaceholder", descriptionPlaceholder: "descriptionPlaceholder", submitButtonLabel: "submitButtonLabel", category: "category" }, viewQueries: [{ propertyName: "titleInputRef", first: true, predicate: ["titleInput"], descendants: true, read: ElementRef }, { propertyName: "descriptionInputRef", first: true, predicate: ["descriptionInput"], descendants: true, read: ElementRef }, { propertyName: "titleInput", first: true, predicate: ["titleInput"], descendants: true }, { propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: `
     <ds-mobile-modal-base [loading]="loading" [error]="error" [showHeader]="false" [hasFixedBottom]="true" [enableKeyboardHandling]="true" [keyboardContentBehavior]="'overlay'" closeButtonLabel="Close" [onCloseRequest]="handleCloseRequest">
       <!-- Form Content -->
       <ds-mobile-section>
@@ -22143,6 +22572,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }], submitButtonLabel: [{
                 type: Input
+            }], category: [{
+                type: Input
             }] } });
 
 /**
@@ -22197,6 +22628,7 @@ class DsMobileNewInquiryModalService extends BaseModalService {
             ...(options?.titlePlaceholder && { titlePlaceholder: options.titlePlaceholder }),
             ...(options?.descriptionPlaceholder && { descriptionPlaceholder: options.descriptionPlaceholder }),
             ...(options?.submitButtonLabel && { submitButtonLabel: options.submitButtonLabel }),
+            ...(options?.category && { category: options.category }),
         }, {
             keyboardClose: false, // Don't close on keyboard hide for this modal
         });
@@ -28947,6 +29379,267 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 args: ['pageComponent']
             }] } });
 
+class DsMobileInteractiveListItemServiceComponent {
+    title = input.required(...(ngDevMode ? [{ debugName: "title" }] : []));
+    description = input('', ...(ngDevMode ? [{ debugName: "description" }] : []));
+    logo = input('', ...(ngDevMode ? [{ debugName: "logo" }] : []));
+    showChevron = input(false, ...(ngDevMode ? [{ debugName: "showChevron" }] : []));
+    serviceClick = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileInteractiveListItemServiceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DsMobileInteractiveListItemServiceComponent, isStandalone: true, selector: "ds-mobile-interactive-list-item-service", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, logo: { classPropertyName: "logo", publicName: "logo", isSignal: true, isRequired: false, transformFunction: null }, showChevron: { classPropertyName: "showChevron", publicName: "showChevron", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { serviceClick: "serviceClick" }, ngImport: i0, template: `
+    <ds-mobile-list-item
+      [leadingSize]="'32px'"
+      [align]="'top'"
+      [interactive]="true"
+      [enableLongPress]="false"
+      (itemClick)="serviceClick.emit()">
+
+      <div content-leading>
+        <ds-mobile-vendor-avatar
+          [name]="title()"
+          [logo]="logo()"
+          size="md" />
+      </div>
+
+      <div content-main>
+        <div class="service-content">
+          <h3 class="service-title">{{ title() }}</h3>
+          @if (description()) {
+            <p class="service-description">{{ description() }}</p>
+          }
+        </div>
+      </div>
+
+      @if (showChevron()) {
+        <div content-trailing>
+          <div class="service-trailing">
+            <ds-icon name="remixArrowRightSLine" size="20px" />
+          </div>
+        </div>
+      }
+    </ds-mobile-list-item>
+  `, isInline: true, styles: [":host{display:block}:host:first-child{--item-padding-top: 0}:host:last-child{--divider-display: none;--item-padding-bottom: 0}.service-content{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.service-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm, 14px);font-weight:600;line-height:20px;letter-spacing:-.3px;color:var(--text-color-default-primary, #202227);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.service-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm, 14px);font-weight:400;line-height:20px;letter-spacing:-.3px;color:var(--text-color-default-secondary, #545B66);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.service-trailing{display:flex;align-items:center;color:var(--color-text-tertiary, #a3a3a3)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }, { kind: "component", type: DsMobileListItemComponent, selector: "ds-mobile-list-item", inputs: ["leadingSize", "variant", "align", "flushTop", "interactive", "disabled", "loading", "enableLongPress", "showDesktopMoreButton", "moreActions", "moreButtonAriaLabel", "interactiveOffset", "title", "subtitle", "showDivider", "dividerSpacing"], outputs: ["itemClick", "moreButtonClick"] }, { kind: "component", type: DsMobileVendorAvatarComponent, selector: "ds-mobile-vendor-avatar", inputs: ["name", "logo", "size"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileInteractiveListItemServiceComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-mobile-interactive-list-item-service', standalone: true, imports: [CommonModule, DsIconComponent, DsMobileListItemComponent, DsMobileVendorAvatarComponent], template: `
+    <ds-mobile-list-item
+      [leadingSize]="'32px'"
+      [align]="'top'"
+      [interactive]="true"
+      [enableLongPress]="false"
+      (itemClick)="serviceClick.emit()">
+
+      <div content-leading>
+        <ds-mobile-vendor-avatar
+          [name]="title()"
+          [logo]="logo()"
+          size="md" />
+      </div>
+
+      <div content-main>
+        <div class="service-content">
+          <h3 class="service-title">{{ title() }}</h3>
+          @if (description()) {
+            <p class="service-description">{{ description() }}</p>
+          }
+        </div>
+      </div>
+
+      @if (showChevron()) {
+        <div content-trailing>
+          <div class="service-trailing">
+            <ds-icon name="remixArrowRightSLine" size="20px" />
+          </div>
+        </div>
+      }
+    </ds-mobile-list-item>
+  `, styles: [":host{display:block}:host:first-child{--item-padding-top: 0}:host:last-child{--divider-display: none;--item-padding-bottom: 0}.service-content{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.service-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm, 14px);font-weight:600;line-height:20px;letter-spacing:-.3px;color:var(--text-color-default-primary, #202227);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.service-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm, 14px);font-weight:400;line-height:20px;letter-spacing:-.3px;color:var(--text-color-default-secondary, #545B66);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.service-trailing{display:flex;align-items:center;color:var(--color-text-tertiary, #a3a3a3)}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], logo: [{ type: i0.Input, args: [{ isSignal: true, alias: "logo", required: false }] }], showChevron: [{ type: i0.Input, args: [{ isSignal: true, alias: "showChevron", required: false }] }], serviceClick: [{ type: i0.Output, args: ["serviceClick"] }] } });
+
+class DsMobileServiceVendorSheetComponent {
+    vendorName;
+    vendorDescription = '';
+    vendorImage = '';
+    vendorLogo = '';
+    bookButtonLabel = 'Book';
+    modalController = inject(ModalController);
+    async handleBook() {
+        await this.modalController.dismiss(null, 'book');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileServiceVendorSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DsMobileServiceVendorSheetComponent, isStandalone: true, selector: "ds-mobile-service-vendor-sheet", inputs: { vendorName: "vendorName", vendorDescription: "vendorDescription", vendorImage: "vendorImage", vendorLogo: "vendorLogo", bookButtonLabel: "bookButtonLabel" }, ngImport: i0, template: `
+    <ds-mobile-modal-base
+      [headerTitle]="vendorName"
+      [showHeader]="true"
+      [hasFixedBottom]="true">
+
+      <ds-mobile-vendor-avatar
+        header-leading
+        [name]="vendorName"
+        [logo]="vendorLogo"
+        size="md" />
+
+      <ds-mobile-section [showBorder]="false" padding="20px 20px 0 20px">
+        @if (vendorImage) {
+          <div class="hero-image-container">
+            <img class="hero-image" [src]="vendorImage" [alt]="vendorName" />
+          </div>
+        } @else {
+          <div class="hero-empty-state">
+            <ds-mobile-vendor-avatar
+              [name]="vendorName"
+              [logo]="vendorLogo"
+              size="xl" />
+          </div>
+        }
+      </ds-mobile-section>
+
+      <ds-mobile-section padding="20px 20px 20px 20px">
+        @if (vendorDescription) {
+          <div class="vendor-description" [innerHTML]="vendorDescription"></div>
+        }
+      </ds-mobile-section>
+
+      <div fixed-bottom>
+        <div class="booking-action">
+          <ds-button
+            size="md"
+            variant="primary"
+            [fullWidth]="true"
+            (clicked)="handleBook()">
+            {{ bookButtonLabel }}
+          </ds-button>
+        </div>
+      </div>
+    </ds-mobile-modal-base>
+  `, isInline: true, styles: [".hero-image-container{width:100%;aspect-ratio:16 / 9;border-radius:12px;overflow:hidden;background:var(--color-surface-secondary, #f5f5f5)}.hero-image{width:100%;height:100%;object-fit:cover;display:block}.hero-empty-state{width:100%;aspect-ratio:16 / 9;border-radius:12px;background:var(--color-background-neutral-secondary, #f5f5f5);display:flex;align-items:center;justify-content:center}.vendor-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-base, 16px);line-height:1.6;color:var(--text-color-default-primary, #202227)}::ng-deep .vendor-description p{margin:12px 0 0}::ng-deep .vendor-description p:first-child,::ng-deep .vendor-description h3+p{margin-top:0}::ng-deep .vendor-description h3{font-family:Brockmann,sans-serif;font-size:var(--font-size-lg, 18px);font-weight:600;line-height:1.4;color:var(--text-color-default-primary, #202227);margin:0!important;padding:24px 0 8px!important;display:block}::ng-deep .vendor-description h3:first-child{padding-top:0!important}::ng-deep .vendor-description ul{list-style:disc;padding-left:20px;margin:0 0 12px}::ng-deep .vendor-description ul li{font-family:Brockmann,sans-serif;font-size:var(--font-size-base, 16px);line-height:1.6;color:var(--text-color-default-primary, #202227);margin-top:4px}::ng-deep .vendor-description ul li:first-child{margin-top:0}.booking-action{padding:16px 20px;background:var(--color-surface-primary, #ffffff);border-top:1px solid var(--color-border, #e5e5e5)}.booking-action ::ng-deep ds-button{display:block;width:100%}.booking-action ::ng-deep ds-button button{width:100%;border-radius:100px;height:44px;min-height:44px;max-height:44px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsButtonComponent, selector: "ds-button", inputs: ["variant", "size", "disabled", "loading", "pressed", "expanded", "leadingIcon", "trailingIcon", "ariaLabel", "iconOnly"], outputs: ["clicked", "focused", "blurred"] }, { kind: "component", type: DsMobileModalBaseComponent, selector: "ds-mobile-modal-base", inputs: ["headerTitleInteractive", "showHeader"], outputs: ["titleClick"] }, { kind: "component", type: DsMobileSectionComponent, selector: "ds-mobile-section", inputs: ["headline", "icon", "linkText", "padding", "paddingDesktop", "gap", "contentGap", "showBorder", "overflow"], outputs: ["linkClick"] }, { kind: "component", type: DsMobileVendorAvatarComponent, selector: "ds-mobile-vendor-avatar", inputs: ["name", "logo", "size"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileServiceVendorSheetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-mobile-service-vendor-sheet', standalone: true, imports: [
+                        CommonModule,
+                        DsButtonComponent,
+                        DsMobileModalBaseComponent,
+                        DsMobileSectionComponent,
+                        DsMobileVendorAvatarComponent,
+                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: `
+    <ds-mobile-modal-base
+      [headerTitle]="vendorName"
+      [showHeader]="true"
+      [hasFixedBottom]="true">
+
+      <ds-mobile-vendor-avatar
+        header-leading
+        [name]="vendorName"
+        [logo]="vendorLogo"
+        size="md" />
+
+      <ds-mobile-section [showBorder]="false" padding="20px 20px 0 20px">
+        @if (vendorImage) {
+          <div class="hero-image-container">
+            <img class="hero-image" [src]="vendorImage" [alt]="vendorName" />
+          </div>
+        } @else {
+          <div class="hero-empty-state">
+            <ds-mobile-vendor-avatar
+              [name]="vendorName"
+              [logo]="vendorLogo"
+              size="xl" />
+          </div>
+        }
+      </ds-mobile-section>
+
+      <ds-mobile-section padding="20px 20px 20px 20px">
+        @if (vendorDescription) {
+          <div class="vendor-description" [innerHTML]="vendorDescription"></div>
+        }
+      </ds-mobile-section>
+
+      <div fixed-bottom>
+        <div class="booking-action">
+          <ds-button
+            size="md"
+            variant="primary"
+            [fullWidth]="true"
+            (clicked)="handleBook()">
+            {{ bookButtonLabel }}
+          </ds-button>
+        </div>
+      </div>
+    </ds-mobile-modal-base>
+  `, styles: [".hero-image-container{width:100%;aspect-ratio:16 / 9;border-radius:12px;overflow:hidden;background:var(--color-surface-secondary, #f5f5f5)}.hero-image{width:100%;height:100%;object-fit:cover;display:block}.hero-empty-state{width:100%;aspect-ratio:16 / 9;border-radius:12px;background:var(--color-background-neutral-secondary, #f5f5f5);display:flex;align-items:center;justify-content:center}.vendor-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-base, 16px);line-height:1.6;color:var(--text-color-default-primary, #202227)}::ng-deep .vendor-description p{margin:12px 0 0}::ng-deep .vendor-description p:first-child,::ng-deep .vendor-description h3+p{margin-top:0}::ng-deep .vendor-description h3{font-family:Brockmann,sans-serif;font-size:var(--font-size-lg, 18px);font-weight:600;line-height:1.4;color:var(--text-color-default-primary, #202227);margin:0!important;padding:24px 0 8px!important;display:block}::ng-deep .vendor-description h3:first-child{padding-top:0!important}::ng-deep .vendor-description ul{list-style:disc;padding-left:20px;margin:0 0 12px}::ng-deep .vendor-description ul li{font-family:Brockmann,sans-serif;font-size:var(--font-size-base, 16px);line-height:1.6;color:var(--text-color-default-primary, #202227);margin-top:4px}::ng-deep .vendor-description ul li:first-child{margin-top:0}.booking-action{padding:16px 20px;background:var(--color-surface-primary, #ffffff);border-top:1px solid var(--color-border, #e5e5e5)}.booking-action ::ng-deep ds-button{display:block;width:100%}.booking-action ::ng-deep ds-button button{width:100%;border-radius:100px;height:44px;min-height:44px;max-height:44px}\n"] }]
+        }], propDecorators: { vendorName: [{
+                type: Input,
+                args: [{ required: true }]
+            }], vendorDescription: [{
+                type: Input
+            }], vendorImage: [{
+                type: Input
+            }], vendorLogo: [{
+                type: Input
+            }], bookButtonLabel: [{
+                type: Input
+            }] } });
+class DsMobileServiceVendorModalService extends BaseModalService {
+    constructor(modalController) {
+        super(modalController);
+    }
+    async open(props) {
+        const modal = await this.createModal(DsMobileServiceVendorSheetComponent, props);
+        await modal.present();
+        return modal;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileServiceVendorModalService, deps: [{ token: i1.ModalController }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileServiceVendorModalService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileServiceVendorModalService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i1.ModalController }] });
+
+class InquiriesService {
+    inquiries = signal([
+        {
+            id: '1',
+            title: 'Tørretumbler virker ikke',
+            description: 'I de sidste tre dage har jeg oplevet vedvarende problemer med tørretumbleren. Den starter, men stopper efter få minutter.',
+            status: 'open',
+            timestamp: '12 dage siden',
+            category: 'appliance',
+        },
+        {
+            id: '2',
+            title: 'Problem med vandtryk',
+            description: 'Lavt vandtryk i badeværelseshåndvasken. Det er blevet gradvist værre i løbet af den sidste uge.',
+            status: 'open',
+            timestamp: '5 dage siden',
+            category: 'plumbing',
+        },
+        {
+            id: '3',
+            title: 'Varme virker ikke ordentligt',
+            description: 'Varmesystemet holder ikke den indstillede temperatur. Lejligheden er meget koldere, end den burde være.',
+            status: 'closed',
+            timestamp: '2 måneder siden',
+            category: 'heating',
+        },
+    ], ...(ngDevMode ? [{ debugName: "inquiries" }] : []));
+    openInquiries = computed(() => this.inquiries().filter(i => i.status === 'open'), ...(ngDevMode ? [{ debugName: "openInquiries" }] : []));
+    getById(id) {
+        return this.inquiries().find(i => i.id === id);
+    }
+    addInquiry(inquiry) {
+        this.inquiries.update(list => [inquiry, ...list]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InquiriesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InquiriesService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InquiriesService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 /**
  * PageLoadingService
  *
@@ -29238,36 +29931,18 @@ class MobileHomePageComponent {
     recentPosts = computed(() => this.postsService.posts()
         .filter(post => post.id !== 'post-4') // Exclude pinned post
         .slice(0, 3), ...(ngDevMode ? [{ debugName: "recentPosts" }] : []));
-    // Mock inquiry data
-    allInquiries = signal([
-        {
-            id: '1',
-            title: 'Tørretumbler virker ikke',
-            description: 'I de sidste tre dage har jeg oplevet vedvarende problemer med tørretumbleren. Den starter, men stopper efter få minutter.',
-            status: 'open',
-            timestamp: '12 dage siden'
-        },
-        {
-            id: '2',
-            title: 'Problem med vandtryk',
-            description: 'Lavt vandtryk i badeværelseshåndvasken. Det er blevet gradvist værre i løbet af den sidste uge.',
-            status: 'open',
-            timestamp: '5 dage siden'
-        },
-        {
-            id: '3',
-            title: 'Varme virker ikke ordentligt',
-            description: 'Varmesystemet holder ikke den indstillede temperatur. Lejligheden er meget koldere, end den burde være.',
-            status: 'closed',
-            timestamp: '2 måneder siden'
-        }
-    ], ...(ngDevMode ? [{ debugName: "allInquiries" }] : []));
-    // Filter for open inquiries and limit to 3
-    openInquiries = computed(() => this.allInquiries()
-        .filter(inquiry => inquiry.status === 'open')
-        .slice(0, 3), ...(ngDevMode ? [{ debugName: "openInquiries" }] : []));
+    inquiriesService = inject(InquiriesService);
+    openInquiries = computed(() => this.inquiriesService.openInquiries().slice(0, 3), ...(ngDevMode ? [{ debugName: "openInquiries" }] : []));
     recentPeerMessages = computed(() => this.peerMessaging.conversations().slice(0, 3), ...(ngDevMode ? [{ debugName: "recentPeerMessages" }] : []));
+    allVendors = signal([
+        { id: 'v-1', name: 'CleanTeam ApS', category: 'Rengøring', description: 'Trappevask og vinduespolering', phone: '+45 70 20 30 40', logo: '/Assets/dummy-logos/cleanteam-logo.svg', thumbnail: '/Assets/Dummy-photos/clean-team.jpg', fullDescription: '<h3>Rengøring</h3><p>CleanTeam ApS tilbyder professionel trappevask og vinduespolering for ejendommen. Servicen udføres ugentligt og kan tilpasses jeres behov.</p><h3>Pris</h3><p>350 kr. per besøg</p>' },
+        { id: 'v-3', name: 'Blik Partner A/S', category: 'VVS', description: 'VVS-service og akut udkald', phone: '+45 33 44 55 66', thumbnail: '/Assets/Dummy-photos/plumbing.jpg', fullDescription: '<h3>VVS</h3><p>BlikPartner A/S er jeres VVS-partner til alt fra løbende vedligeholdelse til akutte udkald. Vi dækker reparation af vandrør, afløb, radiatorer og blandingsbatterier.</p><h3>Pris</h3><p>450 kr. per udkald + tid</p>' },
+        { id: 'v-4', name: 'ElektroTek ApS', category: 'Elektriker', description: 'El-installationer og fejlsøgning', phone: '+45 23 45 67 89', logo: '/Assets/dummy-logos/electrician-logo.svg', thumbnail: '/Assets/Dummy-photos/electrician.jpg', heroImage: '/Assets/Dummy-photos/electrician.jpg', fullDescription: '<h3>Elektriker</h3><p>ElektroTek ApS varetager el-installationer, fejlsøgning og lovpligtige eftersyn for ejendommen. Vi udfører også småopgaver som udskiftning af kontakter og lampeudtag.</p><h3>Pris</h3><p>395 kr. per time</p>' },
+    ], ...(ngDevMode ? [{ debugName: "allVendors" }] : []));
+    previewVendors = computed(() => this.allVendors().slice(0, 3), ...(ngDevMode ? [{ debugName: "previewVendors" }] : []));
     modalCtrl = inject(ModalController);
+    vendorModal = inject(DsMobileServiceVendorModalService);
+    newInquiryModal = inject(DsMobileNewInquiryModalService);
     constructor(router, navCtrl, userService, postsService, postModal, trackingPermissionService, bottomSheet, familyAccessService, peerMessaging, peerChat) {
         this.router = router;
         this.navCtrl = navCtrl;
@@ -29346,6 +30021,48 @@ class MobileHomePageComponent {
         });
         await modal.present();
     }
+    navigateToServices() {
+        void this.navCtrl.navigateForward(['/services'], { animation: customPageTransition });
+    }
+    async openVendorSheet(vendor) {
+        const modal = await this.vendorModal.open({
+            vendorName: vendor.name,
+            vendorDescription: vendor.fullDescription || vendor.description || '',
+            vendorImage: vendor.heroImage || '',
+            vendorLogo: vendor.logo,
+        });
+        const result = await modal.onWillDismiss();
+        if (result.role === 'book') {
+            await this.openInquiryForVendor(vendor);
+        }
+    }
+    async openInquiryForVendor(vendor) {
+        await this.newInquiryModal.open({
+            titlePlaceholder: 'Emne for henvendelsen',
+            descriptionPlaceholder: 'Beskriv hvad du har brug for…',
+            submitButtonLabel: 'Send henvendelse',
+            category: vendor.category,
+            onSubmit: async (data) => {
+                const inquiryId = `service-${Date.now()}`;
+                this.inquiriesService.addInquiry({
+                    id: inquiryId,
+                    title: data.title,
+                    description: data.description,
+                    status: 'open',
+                    timestamp: 'Lige nu',
+                    category: data.category || vendor.category,
+                    vendorName: vendor.name,
+                    vendorLogo: vendor.logo,
+                });
+                await this.newInquiryModal.close();
+                setTimeout(() => {
+                    this.navCtrl.navigateForward([`/inquiry-detail/${inquiryId}`], {
+                        animation: customPageTransition,
+                    });
+                }, 300);
+            },
+        });
+    }
     navigateToMessages() {
         void this.navCtrl.navigateForward(['/messages'], { animation: customPageTransition });
     }
@@ -29525,6 +30242,24 @@ class MobileHomePageComponent {
         </div>
       </ds-mobile-section>
       
+      <!-- Services preview -->
+      @if (previewVendors().length > 0) {
+        <ds-mobile-section
+          headline="Services"
+          linkText="Se alle"
+          contentGap="0px"
+          (linkClick)="navigateToServices()">
+          @for (vendor of previewVendors(); track vendor.id) {
+            <ds-mobile-interactive-list-item-service
+              [title]="vendor.name"
+              [description]="vendor.description || ''"
+              [logo]="vendor.logo || ''"
+              (serviceClick)="openVendorSheet(vendor)"
+            />
+          }
+        </ds-mobile-section>
+      }
+
       <!-- Recent Community Posts Section (empty state) -->
       <ds-mobile-section>
         <div class="empty-state">
@@ -29582,7 +30317,7 @@ class MobileHomePageComponent {
     </ds-mobile-page-main>
     } <!-- end @if (!isCoveringScreen()) -->
 
-  `, isInline: true, styles: [".posts-list,.messages-preview-list{display:flex;flex-direction:column}.property-banner-nav{display:block;width:100%;border-radius:12px;cursor:pointer;-webkit-tap-highlight-color:transparent}.property-banner-nav:focus-visible{outline:2px solid var(--color-accent, #6B5FF5);outline-offset:2px}.inquiries-list{display:flex;flex-direction:column}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;text-align:center}.empty-state ds-button{display:block;margin-top:16px}.empty-state ds-button::ng-deep .btn{width:100%;border-radius:9999px}.empty-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;color:var(--color-text-primary);margin-top:-16px;z-index:4}.empty-state-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);color:var(--color-text-secondary);margin:0}@keyframes slideDown{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}.welcome-toast{padding:10px 14px;border-radius:12px;background:var(--color-background-brand-secondary, #EEF0FF);display:flex;align-items:flex-start;gap:10px;font-size:14px;font-weight:500;color:var(--color-accent, #6B5FF5);animation:slideDown .2s ease-out}.toast-icon{width:20px;height:20px;border-radius:50%;background:var(--color-accent, #6B5FF5);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff;margin-top:1px}.welcome-toast-content{flex:1;display:flex;flex-direction:column;gap:2px}.welcome-toast-heading{font-family:Brockmann,sans-serif;font-size:14px;font-weight:600;color:var(--color-brand-content, #3B3691);margin:0}.welcome-toast-text{font-family:Brockmann,sans-serif;font-size:13px;line-height:1.4;color:var(--color-brand-content, #3B3691);margin:0;opacity:.8}.welcome-toast-text strong{font-weight:600;opacity:1}.toast-dismiss{margin-left:auto;background:none;border:none;cursor:pointer;flex-shrink:0;color:var(--color-accent, #6B5FF5);display:flex;align-items:center;justify-content:center}.home-content--animating{animation:homeReveal .3s var(--spring-curve-smooth) both}@keyframes homeReveal{0%{opacity:0;transform:translateY(128px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "component", type: DsButtonComponent, selector: "ds-button", inputs: ["variant", "size", "disabled", "loading", "pressed", "expanded", "leadingIcon", "trailingIcon", "ariaLabel", "iconOnly"], outputs: ["clicked", "focused", "blurred"] }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }, { kind: "component", type: DsMobilePageMainComponent, selector: "ds-mobile-page-main", inputs: ["title", "headerTitle", "headerSubtitle", "firstEntry", "avatarType", "avatarInitials", "avatarSrc", "avatarIconName", "showRefresh", "showCondensedHeader", "scrollThreshold", "headerFadeDistance", "contentPadding", "profileMenuItems"], outputs: ["avatarClick", "profileActionSelected", "refresh", "scroll"] }, { kind: "component", type: DsMobileSectionComponent, selector: "ds-mobile-section", inputs: ["headline", "icon", "linkText", "padding", "paddingDesktop", "gap", "contentGap", "showBorder", "overflow"], outputs: ["linkClick"] }, { kind: "component", type: DsMobileIllustrationComponent, selector: "ds-mobile-illustration", inputs: ["variant", "size", "alt"] }, { kind: "component", type: DsMobilePropertyBannerComponent, selector: "ds-mobile-property-banner", inputs: ["address", "photoUrl", "tenantCount"] }, { kind: "component", type: DsMobileInteractiveListItemPostComponent, selector: "ds-mobile-interactive-list-item-post", inputs: ["authorName", "authorRole", "timestamp", "avatarInitials", "avatarType", "avatarSrc", "avatarIconName", "showBadge", "variant", "align", "clickable", "enableLongPress", "moreActions"], outputs: ["postClick", "commentClick", "longPress"] }, { kind: "component", type: DsMobileInteractiveListItemInquiryComponent, selector: "ds-mobile-interactive-list-item-inquiry", inputs: ["title", "description", "status", "statusLabel", "timestamp", "iconName", "iconColor", "variant", "align", "clickable", "showChevron", "enableLongPress", "moreActions"], outputs: ["inquiryClick", "longPress"] }, { kind: "component", type: DsMobileInteractiveListItemMessageComponent, selector: "ds-mobile-interactive-list-item-message", inputs: ["senderName", "senderRole", "timestamp", "message", "avatarInitials", "avatarType", "avatarSrc", "unread", "clickable", "align", "showAvatarBadge", "groupStackMembers", "groupCustomAvatarUrl", "groupStackExcludeParticipantId"], outputs: ["messageClick", "longPress"] }, { kind: "component", type: DsMobileOfflineBannerComponent, selector: "ds-mobile-offline-banner", inputs: ["icon", "title", "message"] }, { kind: "component", type: PostContentComponent, selector: "post-content" }, { kind: "component", type: PostTextComponent, selector: "post-text" }, { kind: "component", type: PostActionsComponent, selector: "post-actions" }, { kind: "component", type: ActionLikeComponent, selector: "action-like", inputs: ["active", "count"], outputs: ["activeChange", "countChange", "likeClick"] }, { kind: "component", type: ActionCommentComponent, selector: "action-comment", inputs: ["count"], outputs: ["commentClick"] }] });
+  `, isInline: true, styles: [".posts-list,.messages-preview-list{display:flex;flex-direction:column}.property-banner-nav{display:block;width:100%;border-radius:12px;cursor:pointer;-webkit-tap-highlight-color:transparent}.property-banner-nav:focus-visible{outline:2px solid var(--color-accent, #6B5FF5);outline-offset:2px}.inquiries-list,.services-preview-list{display:flex;flex-direction:column}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;text-align:center}.empty-state ds-button{display:block;margin-top:16px}.empty-state ds-button::ng-deep .btn{width:100%;border-radius:9999px}.empty-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;color:var(--color-text-primary);margin-top:-16px;z-index:4}.empty-state-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);color:var(--color-text-secondary);margin:0}@keyframes slideDown{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}.welcome-toast{padding:10px 14px;border-radius:12px;background:var(--color-background-brand-secondary, #EEF0FF);display:flex;align-items:flex-start;gap:10px;font-size:14px;font-weight:500;color:var(--color-accent, #6B5FF5);animation:slideDown .2s ease-out}.toast-icon{width:20px;height:20px;border-radius:50%;background:var(--color-accent, #6B5FF5);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff;margin-top:1px}.welcome-toast-content{flex:1;display:flex;flex-direction:column;gap:2px}.welcome-toast-heading{font-family:Brockmann,sans-serif;font-size:14px;font-weight:600;color:var(--color-brand-content, #3B3691);margin:0}.welcome-toast-text{font-family:Brockmann,sans-serif;font-size:13px;line-height:1.4;color:var(--color-brand-content, #3B3691);margin:0;opacity:.8}.welcome-toast-text strong{font-weight:600;opacity:1}.toast-dismiss{margin-left:auto;background:none;border:none;cursor:pointer;flex-shrink:0;color:var(--color-accent, #6B5FF5);display:flex;align-items:center;justify-content:center}.home-content--animating{animation:homeReveal .3s var(--spring-curve-smooth) both}@keyframes homeReveal{0%{opacity:0;transform:translateY(128px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "component", type: DsButtonComponent, selector: "ds-button", inputs: ["variant", "size", "disabled", "loading", "pressed", "expanded", "leadingIcon", "trailingIcon", "ariaLabel", "iconOnly"], outputs: ["clicked", "focused", "blurred"] }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }, { kind: "component", type: DsMobilePageMainComponent, selector: "ds-mobile-page-main", inputs: ["title", "headerTitle", "headerSubtitle", "firstEntry", "avatarType", "avatarInitials", "avatarSrc", "avatarIconName", "showRefresh", "showCondensedHeader", "scrollThreshold", "headerFadeDistance", "contentPadding", "profileMenuItems"], outputs: ["avatarClick", "profileActionSelected", "refresh", "scroll"] }, { kind: "component", type: DsMobileSectionComponent, selector: "ds-mobile-section", inputs: ["headline", "icon", "linkText", "padding", "paddingDesktop", "gap", "contentGap", "showBorder", "overflow"], outputs: ["linkClick"] }, { kind: "component", type: DsMobileIllustrationComponent, selector: "ds-mobile-illustration", inputs: ["variant", "size", "alt"] }, { kind: "component", type: DsMobilePropertyBannerComponent, selector: "ds-mobile-property-banner", inputs: ["address", "photoUrl", "tenantCount"] }, { kind: "component", type: DsMobileInteractiveListItemPostComponent, selector: "ds-mobile-interactive-list-item-post", inputs: ["authorName", "authorRole", "timestamp", "avatarInitials", "avatarType", "avatarSrc", "avatarIconName", "showBadge", "variant", "align", "clickable", "enableLongPress", "moreActions"], outputs: ["postClick", "commentClick", "longPress"] }, { kind: "component", type: DsMobileInteractiveListItemInquiryComponent, selector: "ds-mobile-interactive-list-item-inquiry", inputs: ["title", "description", "status", "statusLabel", "timestamp", "iconName", "iconColor", "variant", "align", "clickable", "showChevron", "enableLongPress", "moreActions"], outputs: ["inquiryClick", "longPress"] }, { kind: "component", type: DsMobileInteractiveListItemMessageComponent, selector: "ds-mobile-interactive-list-item-message", inputs: ["senderName", "senderRole", "timestamp", "message", "avatarInitials", "avatarType", "avatarSrc", "unread", "clickable", "align", "showAvatarBadge", "groupStackMembers", "groupCustomAvatarUrl", "groupStackExcludeParticipantId"], outputs: ["messageClick", "longPress"] }, { kind: "component", type: DsMobileInteractiveListItemServiceComponent, selector: "ds-mobile-interactive-list-item-service", inputs: ["title", "description", "logo", "showChevron"], outputs: ["serviceClick"] }, { kind: "component", type: DsMobileOfflineBannerComponent, selector: "ds-mobile-offline-banner", inputs: ["icon", "title", "message"] }, { kind: "component", type: PostContentComponent, selector: "post-content" }, { kind: "component", type: PostTextComponent, selector: "post-text" }, { kind: "component", type: PostActionsComponent, selector: "post-actions" }, { kind: "component", type: ActionLikeComponent, selector: "action-like", inputs: ["active", "count"], outputs: ["activeChange", "countChange", "likeClick"] }, { kind: "component", type: ActionCommentComponent, selector: "action-comment", inputs: ["count"], outputs: ["commentClick"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MobileHomePageComponent, decorators: [{
             type: Component,
@@ -29596,6 +30331,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         DsMobileInteractiveListItemPostComponent,
                         DsMobileInteractiveListItemInquiryComponent,
                         DsMobileInteractiveListItemMessageComponent,
+                        DsMobileInteractiveListItemBookingComponent,
+                        DsMobileInteractiveListItemServiceComponent,
                         DsMobileOfflineBannerComponent,
                         PostContentComponent,
                         PostTextComponent,
@@ -29745,6 +30482,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         </div>
       </ds-mobile-section>
       
+      <!-- Services preview -->
+      @if (previewVendors().length > 0) {
+        <ds-mobile-section
+          headline="Services"
+          linkText="Se alle"
+          contentGap="0px"
+          (linkClick)="navigateToServices()">
+          @for (vendor of previewVendors(); track vendor.id) {
+            <ds-mobile-interactive-list-item-service
+              [title]="vendor.name"
+              [description]="vendor.description || ''"
+              [logo]="vendor.logo || ''"
+              (serviceClick)="openVendorSheet(vendor)"
+            />
+          }
+        </ds-mobile-section>
+      }
+
       <!-- Recent Community Posts Section (empty state) -->
       <ds-mobile-section>
         <div class="empty-state">
@@ -29802,7 +30557,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
     </ds-mobile-page-main>
     } <!-- end @if (!isCoveringScreen()) -->
 
-  `, styles: [".posts-list,.messages-preview-list{display:flex;flex-direction:column}.property-banner-nav{display:block;width:100%;border-radius:12px;cursor:pointer;-webkit-tap-highlight-color:transparent}.property-banner-nav:focus-visible{outline:2px solid var(--color-accent, #6B5FF5);outline-offset:2px}.inquiries-list{display:flex;flex-direction:column}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;text-align:center}.empty-state ds-button{display:block;margin-top:16px}.empty-state ds-button::ng-deep .btn{width:100%;border-radius:9999px}.empty-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;color:var(--color-text-primary);margin-top:-16px;z-index:4}.empty-state-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);color:var(--color-text-secondary);margin:0}@keyframes slideDown{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}.welcome-toast{padding:10px 14px;border-radius:12px;background:var(--color-background-brand-secondary, #EEF0FF);display:flex;align-items:flex-start;gap:10px;font-size:14px;font-weight:500;color:var(--color-accent, #6B5FF5);animation:slideDown .2s ease-out}.toast-icon{width:20px;height:20px;border-radius:50%;background:var(--color-accent, #6B5FF5);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff;margin-top:1px}.welcome-toast-content{flex:1;display:flex;flex-direction:column;gap:2px}.welcome-toast-heading{font-family:Brockmann,sans-serif;font-size:14px;font-weight:600;color:var(--color-brand-content, #3B3691);margin:0}.welcome-toast-text{font-family:Brockmann,sans-serif;font-size:13px;line-height:1.4;color:var(--color-brand-content, #3B3691);margin:0;opacity:.8}.welcome-toast-text strong{font-weight:600;opacity:1}.toast-dismiss{margin-left:auto;background:none;border:none;cursor:pointer;flex-shrink:0;color:var(--color-accent, #6B5FF5);display:flex;align-items:center;justify-content:center}.home-content--animating{animation:homeReveal .3s var(--spring-curve-smooth) both}@keyframes homeReveal{0%{opacity:0;transform:translateY(128px)}to{opacity:1;transform:translateY(0)}}\n"] }]
+  `, styles: [".posts-list,.messages-preview-list{display:flex;flex-direction:column}.property-banner-nav{display:block;width:100%;border-radius:12px;cursor:pointer;-webkit-tap-highlight-color:transparent}.property-banner-nav:focus-visible{outline:2px solid var(--color-accent, #6B5FF5);outline-offset:2px}.inquiries-list,.services-preview-list{display:flex;flex-direction:column}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;text-align:center}.empty-state ds-button{display:block;margin-top:16px}.empty-state ds-button::ng-deep .btn{width:100%;border-radius:9999px}.empty-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;color:var(--color-text-primary);margin-top:-16px;z-index:4}.empty-state-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);color:var(--color-text-secondary);margin:0}@keyframes slideDown{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}.welcome-toast{padding:10px 14px;border-radius:12px;background:var(--color-background-brand-secondary, #EEF0FF);display:flex;align-items:flex-start;gap:10px;font-size:14px;font-weight:500;color:var(--color-accent, #6B5FF5);animation:slideDown .2s ease-out}.toast-icon{width:20px;height:20px;border-radius:50%;background:var(--color-accent, #6B5FF5);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff;margin-top:1px}.welcome-toast-content{flex:1;display:flex;flex-direction:column;gap:2px}.welcome-toast-heading{font-family:Brockmann,sans-serif;font-size:14px;font-weight:600;color:var(--color-brand-content, #3B3691);margin:0}.welcome-toast-text{font-family:Brockmann,sans-serif;font-size:13px;line-height:1.4;color:var(--color-brand-content, #3B3691);margin:0;opacity:.8}.welcome-toast-text strong{font-weight:600;opacity:1}.toast-dismiss{margin-left:auto;background:none;border:none;cursor:pointer;flex-shrink:0;color:var(--color-accent, #6B5FF5);display:flex;align-items:center;justify-content:center}.home-content--animating{animation:homeReveal .3s var(--spring-curve-smooth) both}@keyframes homeReveal{0%{opacity:0;transform:translateY(128px)}to{opacity:1;transform:translateY(0)}}\n"] }]
         }], ctorParameters: () => [{ type: i1$3.Router }, { type: i1.NavController }, { type: UserService }, { type: PostsService }, { type: DsMobilePostDetailModalService }, { type: TrackingPermissionService }, { type: DsMobileBottomSheetService }, { type: FamilyAccessService }, { type: PeerMessagingService }, { type: PeerChatLauncherService }], propDecorators: { pageComponent: [{
                 type: ViewChild,
                 args: ['pageComponent']
@@ -29813,6 +30568,7 @@ class MobileInquiriesPageComponent {
     navCtrl;
     newInquiryModal;
     pageComponent;
+    inquiriesService = inject(InquiriesService);
     constructor(userService, navCtrl, newInquiryModal) {
         this.userService = userService;
         this.navCtrl = navCtrl;
@@ -29824,52 +30580,13 @@ class MobileInquiriesPageComponent {
         { id: 'open', label: 'Åben' },
         { id: 'closed', label: 'Lukket' }
     ];
-    inquiries = signal([
-        {
-            id: '1',
-            title: 'Tørretumbler virker ikke',
-            description: 'I de sidste tre dage har jeg oplevet vedvarende problemer med tørretumbleren. Den starter, men stopper efter få minutter.',
-            status: 'open',
-            timestamp: '12 dage siden',
-            category: 'appliance'
-        },
-        {
-            id: '2',
-            title: 'Problem med vandtryk',
-            description: 'Lavt vandtryk i badeværelseshåndvasken. Det er blevet gradvist værre i løbet af den sidste uge.',
-            status: 'open',
-            timestamp: '5 dage siden',
-            category: 'plumbing'
-        },
-        {
-            id: '3',
-            title: 'Varme virker ikke ordentligt',
-            description: 'Varmesystemet holder ikke den indstillede temperatur. Lejligheden er meget koldere, end den burde være.',
-            status: 'closed',
-            timestamp: '2 måneder siden',
-            category: 'heating'
-        }
-    ], ...(ngDevMode ? [{ debugName: "inquiries" }] : []));
-    // Computed signals that automatically update when dependencies change
     filteredInquiries = computed(() => {
-        const all = this.inquiries();
+        const all = this.inquiriesService.inquiries();
         const status = this.filterStatus();
-        if (status === 'all') {
+        if (status === 'all')
             return all;
-        }
-        else if (status === 'open') {
-            return all.filter(i => i.status === 'open');
-        }
-        else {
-            return all.filter(i => i.status === 'closed');
-        }
+        return all.filter(i => i.status === status);
     }, ...(ngDevMode ? [{ debugName: "filteredInquiries" }] : []));
-    openInquiries = computed(() => {
-        return this.inquiries().filter(i => i.status === 'open');
-    }, ...(ngDevMode ? [{ debugName: "openInquiries" }] : []));
-    closedInquiries = computed(() => {
-        return this.inquiries().filter(i => i.status === 'closed');
-    }, ...(ngDevMode ? [{ debugName: "closedInquiries" }] : []));
     setFilter(status) {
         this.filterStatus.set(status);
     }
@@ -29908,16 +30625,14 @@ class MobileInquiriesPageComponent {
                 console.log('New inquiry submitted:', data);
                 // In a real app, call your API to create the inquiry
                 // await this.inquiryService.createInquiry(data);
-                // Add the new inquiry to the list (mock for now)
-                const newInquiry = {
+                this.inquiriesService.addInquiry({
                     id: `inquiry-${Date.now()}`,
                     title: data.title,
                     description: data.description,
                     status: 'open',
-                    timestamp: 'Just now',
-                    category: 'other'
-                };
-                this.inquiries.update(inquiries => [newInquiry, ...inquiries]);
+                    timestamp: 'Lige nu',
+                    category: data.category || 'other',
+                });
                 // Close the modal
                 await this.newInquiryModal.close();
             }
@@ -30086,12 +30801,25 @@ class MobileInquiryDetailPageComponent {
     userService;
     lightbox;
     chatModal;
+    route = inject(ActivatedRoute);
+    inquiriesService = inject(InquiriesService);
     inquiryTitle = 'Tørretumbler virker ikke';
+    inquiryDescription = 'I de sidste tre dage har vi oplevet vedvarende problemer med tørretumbleren i vores lejlighed. På trods af at vi følger betjeningsvejledningen, fejler maskinen konsekvent i at fuldføre sine tørrecyklusser.';
+    inquiryCategory = 'Husholdningsapparater';
+    inquiryTimestamp = '22. feb 2025';
+    vendorName = '';
+    vendorInitials = '';
+    vendorLogo = '';
+    isServiceInquiry = false;
     activeTab = signal('details', ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
     tabItems = [
         { id: 'details', label: 'Detaljer' },
         { id: 'messages', label: 'Beskeder', badge: 0 }
     ];
+    serviceMessageThread = [];
+    get activeMessages() {
+        return this.isServiceInquiry ? this.serviceMessageThread : this.messageThreads;
+    }
     messageThreads = [
         {
             id: '1',
@@ -30114,16 +30842,13 @@ class MobileInquiryDetailPageComponent {
             unread: false
         }
     ];
-    unreadMessagesCount = computed(() => {
-        const count = this.messageThreads.length;
-        // Update badge in tab items
+    updateMessagesBadge() {
+        const count = this.activeMessages.length;
         const messagesTab = this.tabItems.find(t => t.id === 'messages');
         if (messagesTab) {
             messagesTab.badge = count;
         }
-        return count;
-    }, ...(ngDevMode ? [{ debugName: "unreadMessagesCount" }] : []));
-    // Photos for lightbox
+    }
     photos = [
         { type: 'image', src: '/Assets/Dummy-photos/handyman.jpg', alt: 'Handyman', title: 'Handyman' },
         { type: 'image', src: '/Assets/Dummy-photos/balcony-view.jpg', alt: 'Balcony view', title: 'Balcony view' },
@@ -30131,7 +30856,6 @@ class MobileInquiryDetailPageComponent {
         { type: 'image', src: '/Assets/Dummy-photos/yard.jpg', alt: 'Yard', title: 'Yard' },
         { type: 'image', src: '/Assets/Dummy-photos/mailboxes.jpg', alt: 'Mailboxes', title: 'Mailboxes' }
     ];
-    // Photo URLs for inline-photo component
     get photoUrls() {
         return this.photos.map(photo => photo.src);
     }
@@ -30139,16 +30863,48 @@ class MobileInquiryDetailPageComponent {
         this.userService = userService;
         this.lightbox = lightbox;
         this.chatModal = chatModal;
-        // Trigger initial badge update
-        this.unreadMessagesCount();
+        this.updateMessagesBadge();
+    }
+    ngOnInit() {
+        const id = this.route.snapshot.paramMap.get('id');
+        if (id) {
+            const inquiry = this.inquiriesService.getById(id);
+            if (inquiry) {
+                this.inquiryTitle = inquiry.title;
+                this.inquiryDescription = inquiry.description;
+                this.inquiryCategory = inquiry.category;
+                this.inquiryTimestamp = inquiry.timestamp;
+                if (inquiry.vendorName) {
+                    this.isServiceInquiry = true;
+                    this.vendorName = inquiry.vendorName;
+                    this.vendorInitials = inquiry.vendorName
+                        .split(/\s+/)
+                        .filter(w => w.length > 0)
+                        .slice(0, 2)
+                        .map(w => w[0].toUpperCase())
+                        .join('');
+                    this.vendorLogo = inquiry.vendorLogo || '';
+                    this.serviceMessageThread = [
+                        {
+                            id: 'service-msg-1',
+                            senderName: this.userService.displayName() || this.userService.avatarInitials(),
+                            senderAvatar: '',
+                            senderInitials: this.userService.avatarInitials(),
+                            message: inquiry.description,
+                            role: 'Beboer',
+                            timestamp: inquiry.timestamp,
+                            unread: false,
+                        },
+                    ];
+                }
+            }
+        }
+        this.updateMessagesBadge();
     }
     setActiveTab(tabId) {
         this.activeTab.set(tabId);
     }
-    goBack() {
-        // Navigation is handled by ds-mobile-page-details component
-        // This is just for any custom logic if needed
-    }
+    goBack() { }
     handleRefresh(event) {
         console.log('Pull-to-refresh triggered');
         setTimeout(() => {
@@ -30156,30 +30912,21 @@ class MobileInquiryDetailPageComponent {
             event.target.complete();
         }, 1000);
     }
-    /**
-     * Check if there are unread messages
-     */
     hasUnreadMessages() {
-        return this.messageThreads.some(m => m.unread);
+        return !this.isServiceInquiry && this.messageThreads.some(m => m.unread);
     }
-    /**
-     * Navigate to messages tab when banner is clicked
-     */
     navigateToMessagesTab() {
         this.setActiveTab('messages');
     }
     async openMessage(messageId) {
-        console.log('Opening message:', messageId);
-        // Find the message thread
-        const messageThread = this.messageThreads.find(m => m.id === messageId);
-        if (!messageThread) {
-            console.error('Message thread not found:', messageId);
+        if (this.isServiceInquiry) {
+            await this.openVendorChat();
             return;
         }
-        // Check if this is an empty state chat (no timestamp and system message)
+        const messageThread = this.messageThreads.find(m => m.id === messageId);
+        if (!messageThread)
+            return;
         const isEmptyChat = messageThread.message.includes('har overtaget din henvendelse') && !messageThread.timestamp;
-        // Prepare chat modal data
-        // In a real app, you would fetch the actual messages from your API
         const chatData = {
             participant: {
                 id: messageId,
@@ -30189,14 +30936,13 @@ class MobileInquiryDetailPageComponent {
                 avatarType: 'initials'
             },
             messages: isEmptyChat ? [] : [
-                // Day 1 - Yesterday morning (9:15 AM)
                 {
                     id: '1',
                     content: 'Godmorgen! Jeg ville lige følge op på din henvendelse vedrørende vedligeholdelsesplanen.',
                     senderId: messageId,
                     senderName: messageThread.senderName,
                     senderRole: messageThread.role,
-                    timestamp: new Date(Date.now() - 86400000 - 32700000), // Yesterday 9:15 AM
+                    timestamp: new Date(Date.now() - 86400000 - 32700000),
                     isOwnMessage: false,
                     avatarInitials: messageThread.senderInitials,
                     avatarType: 'initials',
@@ -30207,7 +30953,7 @@ class MobileInquiryDetailPageComponent {
                     senderId: messageId,
                     senderName: messageThread.senderName,
                     senderRole: messageThread.role,
-                    timestamp: new Date(Date.now() - 86400000 - 32520000), // Yesterday 9:18 AM (grouped with previous)
+                    timestamp: new Date(Date.now() - 86400000 - 32520000),
                     isOwnMessage: false,
                     avatarInitials: messageThread.senderInitials,
                     avatarType: 'initials',
@@ -30217,7 +30963,7 @@ class MobileInquiryDetailPageComponent {
                     content: 'Tak fordi du kiggede på det! Hvad fandt du?',
                     senderId: 'current-user',
                     senderName: 'You',
-                    timestamp: new Date(Date.now() - 86400000 - 32100000), // Yesterday 9:25 AM (new group - 7 min gap)
+                    timestamp: new Date(Date.now() - 86400000 - 32100000),
                     isOwnMessage: true,
                     avatarInitials: this.userService.avatarInitials(),
                     avatarType: 'initials',
@@ -30227,19 +30973,18 @@ class MobileInquiryDetailPageComponent {
                     content: 'Kan du også sende mig vedligeholdelsesrapporten?',
                     senderId: 'current-user',
                     senderName: 'You',
-                    timestamp: new Date(Date.now() - 86400000 - 31980000), // Yesterday 9:27 AM (grouped with previous)
+                    timestamp: new Date(Date.now() - 86400000 - 31980000),
                     isOwnMessage: true,
                     avatarInitials: this.userService.avatarInitials(),
                     avatarType: 'initials',
                 },
-                // Day 1 - Yesterday afternoon (2:30 PM - large time gap)
                 {
                     id: '5',
                     content: messageThread.message,
                     senderId: messageId,
                     senderName: messageThread.senderName,
                     senderRole: messageThread.role,
-                    timestamp: new Date(Date.now() - 86400000 - 13800000), // Yesterday 2:30 PM (new group - 5 hour gap)
+                    timestamp: new Date(Date.now() - 86400000 - 13800000),
                     isOwnMessage: false,
                     avatarInitials: messageThread.senderInitials,
                     avatarType: 'initials',
@@ -30250,18 +30995,17 @@ class MobileInquiryDetailPageComponent {
                     senderId: messageId,
                     senderName: messageThread.senderName,
                     senderRole: messageThread.role,
-                    timestamp: new Date(Date.now() - 86400000 - 13620000), // Yesterday 2:33 PM (grouped with previous)
+                    timestamp: new Date(Date.now() - 86400000 - 13620000),
                     isOwnMessage: false,
                     avatarInitials: messageThread.senderInitials,
                     avatarType: 'initials',
                 },
-                // Day 2 - Today morning (10:45 AM - new day)
                 {
                     id: '7',
                     content: 'Perfekt! Jeg har gennemgået rapporten, og alt ser godt ud.',
                     senderId: 'current-user',
                     senderName: 'You',
-                    timestamp: new Date(Date.now() - 7500000), // Today 10:45 AM (new group - new day)
+                    timestamp: new Date(Date.now() - 7500000),
                     isOwnMessage: true,
                     avatarInitials: this.userService.avatarInitials(),
                     avatarType: 'initials',
@@ -30271,19 +31015,18 @@ class MobileInquiryDetailPageComponent {
                     content: 'Hvornår kan vi planlægge vedligeholdelsesarbejdet?',
                     senderId: 'current-user',
                     senderName: 'You',
-                    timestamp: new Date(Date.now() - 7320000), // Today 10:48 AM (grouped with previous)
+                    timestamp: new Date(Date.now() - 7320000),
                     isOwnMessage: true,
                     avatarInitials: this.userService.avatarInitials(),
                     avatarType: 'initials',
                 },
-                // Day 2 - Today (just now - 2 minutes ago)
                 {
                     id: '9',
                     content: 'Dejligt at høre! Jeg kan planlægge det til næste tirsdag kl. 09.00. Passer det dig?',
                     senderId: messageId,
                     senderName: messageThread.senderName,
                     senderRole: messageThread.role,
-                    timestamp: new Date(Date.now() - 120000), // 2 minutes ago (new group - several hours gap)
+                    timestamp: new Date(Date.now() - 120000),
                     isOwnMessage: false,
                     avatarInitials: messageThread.senderInitials,
                     avatarType: 'initials',
@@ -30294,7 +31037,7 @@ class MobileInquiryDetailPageComponent {
                     senderId: messageId,
                     senderName: messageThread.senderName,
                     senderRole: messageThread.role,
-                    timestamp: new Date(Date.now() - 60000), // 1 minute ago (grouped with previous)
+                    timestamp: new Date(Date.now() - 60000),
                     isOwnMessage: false,
                     avatarInitials: messageThread.senderInitials,
                     avatarType: 'initials',
@@ -30305,7 +31048,37 @@ class MobileInquiryDetailPageComponent {
             currentUserAvatarType: 'initials',
             autoFocus: false
         };
-        // Open the chat modal
+        await this.chatModal.open(chatData);
+    }
+    async openVendorChat() {
+        const chatData = {
+            participant: {
+                id: 'vendor',
+                name: this.vendorName,
+                role: 'Leverandør',
+                avatarInitials: this.vendorInitials,
+                avatarType: this.vendorLogo ? 'photo' : 'initials',
+                avatarSrc: this.vendorLogo,
+                avatarShape: 'squircle',
+            },
+            messages: [
+                {
+                    id: 'service-initial',
+                    content: this.inquiryDescription,
+                    senderId: 'current-user',
+                    senderName: 'You',
+                    timestamp: new Date(),
+                    isOwnMessage: true,
+                    avatarInitials: this.userService.avatarInitials(),
+                    avatarType: 'initials',
+                },
+            ],
+            threadContext: 'peer',
+            currentUserId: 'current-user',
+            currentUserInitials: this.userService.avatarInitials(),
+            currentUserAvatarType: 'initials',
+            autoFocus: true,
+        };
         await this.chatModal.open(chatData);
     }
     async openPhotoLightbox(index) {
@@ -30330,26 +31103,35 @@ class MobileInquiryDetailPageComponent {
       
       <!-- Messages Tab Content -->
       @if (activeTab() === 'messages') {
-        <ds-mobile-section contentGap="0">
-          @for (message of messageThreads; track message.id) {
-            <ds-mobile-interactive-list-item-message
-              [senderName]="message.senderName"
-              [senderRole]="message.role"
-              [timestamp]="message.timestamp"
-              [message]="message.message"
-              [avatarInitials]="message.senderInitials"
-              [showAvatarBadge]="true"
-              [unread]="message.unread"
-              (messageClick)="openMessage(message.id)">
-            </ds-mobile-interactive-list-item-message>
-          }
-        </ds-mobile-section>
+        @if (activeMessages.length > 0) {
+          <ds-mobile-section contentGap="0">
+            @for (message of activeMessages; track message.id) {
+              <ds-mobile-interactive-list-item-message
+                [senderName]="message.senderName"
+                [senderRole]="message.role"
+                [timestamp]="message.timestamp"
+                [message]="message.message"
+                [avatarInitials]="message.senderInitials"
+                [showAvatarBadge]="!isServiceInquiry"
+                [unread]="message.unread"
+                (messageClick)="openMessage(message.id)">
+              </ds-mobile-interactive-list-item-message>
+            }
+          </ds-mobile-section>
+        } @else {
+          <ds-mobile-section>
+            <div class="empty-messages">
+              <img class="empty-messages-image" src="/Assets/Empty state-chat.png" alt="Ingen beskeder" />
+              <p class="empty-messages-text">Ingen beskeder endnu</p>
+            </div>
+          </ds-mobile-section>
+        }
       }
       
       <!-- Details Tab Content -->
       @if (activeTab() === 'details') {
-        <!-- Unread Messages Banner -->
-        @if (hasUnreadMessages()) {
+        <!-- Unread Messages Banner (legacy only) -->
+        @if (!isServiceInquiry && hasUnreadMessages()) {
           <ds-mobile-section>
             <ds-mobile-card-inline-banner
               [title]="'Du har ulæste beskeder'"
@@ -30360,41 +31142,57 @@ class MobileInquiryDetailPageComponent {
           </ds-mobile-section>
         }
         
-        <!-- All Details in One Section -->
         <ds-mobile-section contentGap="0">
-          <!-- Assignee -->
-          <ds-mobile-list-item [leadingSize]="'32px'" [showDivider]="true">
-            <div content-leading>
-              <ds-avatar-with-badge
-                [size]="'sm'"
-                [type]="'initials'"
-                [initials]="'R'" />
-            </div>
-            <div content-main>
-              <div class="detail-label">Sagsbehandler</div>
-              <div class="detail-value">Ricki Meihlen</div>
-            </div>
-          </ds-mobile-list-item>
-          
-          <!-- Technician -->
-          <ds-mobile-list-item [leadingSize]="'32px'" [showDivider]="true">
-            <div content-leading>
-              <ds-avatar-with-badge
-                [size]="'sm'"
-                [type]="'initials'"
-                [initials]="'M'" />
-            </div>
-            <div content-main>
-              <div class="detail-label">Tekniker</div>
-              <div class="detail-value">Martin Smith</div>
-            </div>
-          </ds-mobile-list-item>
+          <!-- Vendor company (service inquiries) -->
+          @if (isServiceInquiry && vendorName) {
+            <ds-mobile-list-item [leadingSize]="'32px'" [showDivider]="true">
+              <div content-leading>
+                <ds-mobile-vendor-avatar
+                  [name]="vendorName"
+                  [logo]="vendorLogo"
+                  size="md" />
+              </div>
+              <div content-main>
+                <div class="detail-label">Leverandør</div>
+                <div class="detail-value">{{ vendorName }}</div>
+              </div>
+            </ds-mobile-list-item>
+          }
+
+          <!-- Assignee + Technician (legacy inquiries only) -->
+          @if (!isServiceInquiry) {
+            <ds-mobile-list-item [leadingSize]="'32px'" [showDivider]="true">
+              <div content-leading>
+                <ds-avatar-with-badge
+                  [size]="'sm'"
+                  [type]="'initials'"
+                  [initials]="'R'" />
+              </div>
+              <div content-main>
+                <div class="detail-label">Sagsbehandler</div>
+                <div class="detail-value">Ricki Meihlen</div>
+              </div>
+            </ds-mobile-list-item>
+            
+            <ds-mobile-list-item [leadingSize]="'32px'" [showDivider]="true">
+              <div content-leading>
+                <ds-avatar-with-badge
+                  [size]="'sm'"
+                  [type]="'initials'"
+                  [initials]="'M'" />
+              </div>
+              <div content-main>
+                <div class="detail-label">Tekniker</div>
+                <div class="detail-value">Martin Smith</div>
+              </div>
+            </ds-mobile-list-item>
+          }
           
           <!-- Creation Date -->
           <ds-mobile-list-item [leadingSize]="'32px'" [showDivider]="true" [align]="'center'">
             <ds-icon content-leading name="remixTimeLine" size="20px" color="tertiary" />
             <div content-main>
-              <div class="detail-value">22. feb 2025</div>
+              <div class="detail-value">{{ inquiryTimestamp }}</div>
             </div>
           </ds-mobile-list-item>
           
@@ -30407,30 +31205,32 @@ class MobileInquiryDetailPageComponent {
           </ds-mobile-list-item>
           
           <!-- Description -->
-          <ds-mobile-list-item [leadingSize]="'32px'" [showDivider]="photoUrls.length > 0">
+          <ds-mobile-list-item [leadingSize]="'32px'" [showDivider]="!isServiceInquiry && photoUrls.length > 0">
             <ds-icon content-leading name="remixAlignLeft" size="20px" color="tertiary" />
             <div content-main style="display:flex;flex-direction:column;gap:8px">
               <div class="detail-value description-text">
-                I de sidste tre dage har vi oplevet vedvarende problemer med tørretumbleren i vores lejlighed. På trods af at vi følger betjeningsvejledningen, fejler maskinen konsekvent i at fuldføre sine tørrecyklusser.
+                {{ inquiryDescription }}
               </div>
-              <ds-badge content="Husholdningsapparater" size="sm"/>
+              <ds-badge [content]="inquiryCategory" size="sm"/>
             </div>
           </ds-mobile-list-item>
           
-          <!-- Photos -->
-          <ds-mobile-list-item [leadingSize]="'32px'" [showDivider]="false">
-            <ds-icon content-leading name="remixCameraLine" size="20px" color="tertiary" />
-            <div content-main>
-              <ds-mobile-inline-photo 
-                [images]="photoUrls"
-                [useGrid]="false"
-                (photoClick)="openPhotoLightbox($event.index)" />
-            </div>
-          </ds-mobile-list-item>
+          <!-- Photos (legacy inquiries only) -->
+          @if (!isServiceInquiry) {
+            <ds-mobile-list-item [leadingSize]="'32px'" [showDivider]="false">
+              <ds-icon content-leading name="remixCameraLine" size="20px" color="tertiary" />
+              <div content-main>
+                <ds-mobile-inline-photo 
+                  [images]="photoUrls"
+                  [useGrid]="false"
+                  (photoClick)="openPhotoLightbox($event.index)" />
+              </div>
+            </ds-mobile-list-item>
+          }
         </ds-mobile-section>
       }
     </ds-mobile-page-details>
-  `, isInline: true, 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-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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }, { kind: "component", type: DsAvatarWithBadgeComponent, selector: "ds-avatar-with-badge", inputs: ["type", "size", "initials", "src", "iconName", "showBadge", "badgePosition"] }, { kind: "component", type: DsMobilePageDetailsComponent, selector: "ds-mobile-page-details", inputs: ["title", "backRoute", "contentPadding", "tabs", "activeTab", "showRefresh", "scrollThreshold", "headerFadeDistance"], outputs: ["back", "tabChange", "refresh", "scroll"] }, { kind: "component", type: DsMobileInteractiveListItemMessageComponent, selector: "ds-mobile-interactive-list-item-message", inputs: ["senderName", "senderRole", "timestamp", "message", "avatarInitials", "avatarType", "avatarSrc", "unread", "clickable", "align", "showAvatarBadge", "groupStackMembers", "groupCustomAvatarUrl", "groupStackExcludeParticipantId"], outputs: ["messageClick", "longPress"] }, { kind: "component", type: DsMobileListItemComponent, selector: "ds-mobile-list-item", inputs: ["leadingSize", "variant", "align", "flushTop", "interactive", "disabled", "loading", "enableLongPress", "showDesktopMoreButton", "moreActions", "moreButtonAriaLabel", "interactiveOffset", "title", "subtitle", "showDivider", "dividerSpacing"], outputs: ["itemClick", "moreButtonClick"] }, { kind: "component", type: DsBadgeComponent, selector: "ds-badge", inputs: ["variant", "contentType", "content", "leadingIcon", "indicatorShape"] }, { kind: "component", type: DsMobileCardInlineBannerComponent, selector: "ds-mobile-card-inline-banner", inputs: ["title", "timestamp", "unreadCount", "layout"], outputs: ["bannerClick"] }, { kind: "component", type: DsMobileSectionComponent, selector: "ds-mobile-section", inputs: ["headline", "icon", "linkText", "padding", "paddingDesktop", "gap", "contentGap", "showBorder", "overflow"], outputs: ["linkClick"] }, { kind: "component", type: DsMobileInlinePhotoComponent, selector: "ds-mobile-inline-photo", inputs: ["images", "loadingStates", "author", "maxVisible", "useGrid"], outputs: ["photoClick"] }] });
+  `, isInline: true, 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-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}.empty-messages{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;gap:12px}.empty-messages-image{width:96px;height:96px;-o-object-fit:contain;object-fit:contain}.empty-messages-text{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm, 14px);color:var(--text-color-default-secondary, #71727a);margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }, { kind: "component", type: DsAvatarWithBadgeComponent, selector: "ds-avatar-with-badge", inputs: ["type", "size", "initials", "src", "iconName", "showBadge", "badgePosition"] }, { kind: "component", type: DsMobileVendorAvatarComponent, selector: "ds-mobile-vendor-avatar", inputs: ["name", "logo", "size"] }, { kind: "component", type: DsMobilePageDetailsComponent, selector: "ds-mobile-page-details", inputs: ["title", "backRoute", "contentPadding", "tabs", "activeTab", "showRefresh", "scrollThreshold", "headerFadeDistance"], outputs: ["back", "tabChange", "refresh", "scroll"] }, { kind: "component", type: DsMobileInteractiveListItemMessageComponent, selector: "ds-mobile-interactive-list-item-message", inputs: ["senderName", "senderRole", "timestamp", "message", "avatarInitials", "avatarType", "avatarSrc", "unread", "clickable", "align", "showAvatarBadge", "groupStackMembers", "groupCustomAvatarUrl", "groupStackExcludeParticipantId"], outputs: ["messageClick", "longPress"] }, { kind: "component", type: DsMobileListItemComponent, selector: "ds-mobile-list-item", inputs: ["leadingSize", "variant", "align", "flushTop", "interactive", "disabled", "loading", "enableLongPress", "showDesktopMoreButton", "moreActions", "moreButtonAriaLabel", "interactiveOffset", "title", "subtitle", "showDivider", "dividerSpacing"], outputs: ["itemClick", "moreButtonClick"] }, { kind: "component", type: DsBadgeComponent, selector: "ds-badge", inputs: ["variant", "contentType", "content", "leadingIcon", "indicatorShape"] }, { kind: "component", type: DsMobileCardInlineBannerComponent, selector: "ds-mobile-card-inline-banner", inputs: ["title", "timestamp", "unreadCount", "layout"], outputs: ["bannerClick"] }, { kind: "component", type: DsMobileSectionComponent, selector: "ds-mobile-section", inputs: ["headline", "icon", "linkText", "padding", "paddingDesktop", "gap", "contentGap", "showBorder", "overflow"], outputs: ["linkClick"] }, { kind: "component", type: DsMobileInlinePhotoComponent, selector: "ds-mobile-inline-photo", inputs: ["images", "loadingStates", "author", "maxVisible", "useGrid"], outputs: ["photoClick"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MobileInquiryDetailPageComponent, decorators: [{
             type: Component,
@@ -30438,6 +31238,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         CommonModule,
                         DsIconComponent,
                         DsAvatarWithBadgeComponent,
+                        DsMobileVendorAvatarComponent,
                         DsMobilePageDetailsComponent,
                         DsMobileInteractiveListItemMessageComponent,
                         DsMobileListItemComponent,
@@ -30458,26 +31259,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
       
       <!-- Messages Tab Content -->
       @if (activeTab() === 'messages') {
-        <ds-mobile-section contentGap="0">
-          @for (message of messageThreads; track message.id) {
-            <ds-mobile-interactive-list-item-message
-              [senderName]="message.senderName"
-              [senderRole]="message.role"
-              [timestamp]="message.timestamp"
-              [message]="message.message"
-              [avatarInitials]="message.senderInitials"
-              [showAvatarBadge]="true"
-              [unread]="message.unread"
-              (messageClick)="openMessage(message.id)">
-            </ds-mobile-interactive-list-item-message>
-          }
-        </ds-mobile-section>
+        @if (activeMessages.length > 0) {
+          <ds-mobile-section contentGap="0">
+            @for (message of activeMessages; track message.id) {
+              <ds-mobile-interactive-list-item-message
+                [senderName]="message.senderName"
+                [senderRole]="message.role"
+                [timestamp]="message.timestamp"
+                [message]="message.message"
+                [avatarInitials]="message.senderInitials"
+                [showAvatarBadge]="!isServiceInquiry"
+                [unread]="message.unread"
+                (messageClick)="openMessage(message.id)">
+              </ds-mobile-interactive-list-item-message>
+            }
+          </ds-mobile-section>
+        } @else {
+          <ds-mobile-section>
+            <div class="empty-messages">
+              <img class="empty-messages-image" src="/Assets/Empty state-chat.png" alt="Ingen beskeder" />
+              <p class="empty-messages-text">Ingen beskeder endnu</p>
+            </div>
+          </ds-mobile-section>
+        }
       }
       
       <!-- Details Tab Content -->
       @if (activeTab() === 'details') {
-        <!-- Unread Messages Banner -->
-        @if (hasUnreadMessages()) {
+        <!-- Unread Messages Banner (legacy only) -->
+        @if (!isServiceInquiry && hasUnreadMessages()) {
           <ds-mobile-section>
             <ds-mobile-card-inline-banner
               [title]="'Du har ulæste beskeder'"
@@ -30488,41 +31298,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
           </ds-mobile-section>
         }
         
-        <!-- All Details in One Section -->
         <ds-mobile-section contentGap="0">
-          <!-- Assignee -->
-          <ds-mobile-list-item [leadingSize]="'32px'" [showDivider]="true">
-            <div content-leading>
-              <ds-avatar-with-badge
-                [size]="'sm'"
-                [type]="'initials'"
-                [initials]="'R'" />
-            </div>
-            <div content-main>
-              <div class="detail-label">Sagsbehandler</div>
-              <div class="detail-value">Ricki Meihlen</div>
-            </div>
-          </ds-mobile-list-item>
-          
-          <!-- Technician -->
-          <ds-mobile-list-item [leadingSize]="'32px'" [showDivider]="true">
-            <div content-leading>
-              <ds-avatar-with-badge
-                [size]="'sm'"
-                [type]="'initials'"
-                [initials]="'M'" />
-            </div>
-            <div content-main>
-              <div class="detail-label">Tekniker</div>
-              <div class="detail-value">Martin Smith</div>
-            </div>
-          </ds-mobile-list-item>
+          <!-- Vendor company (service inquiries) -->
+          @if (isServiceInquiry && vendorName) {
+            <ds-mobile-list-item [leadingSize]="'32px'" [showDivider]="true">
+              <div content-leading>
+                <ds-mobile-vendor-avatar
+                  [name]="vendorName"
+                  [logo]="vendorLogo"
+                  size="md" />
+              </div>
+              <div content-main>
+                <div class="detail-label">Leverandør</div>
+                <div class="detail-value">{{ vendorName }}</div>
+              </div>
+            </ds-mobile-list-item>
+          }
+
+          <!-- Assignee + Technician (legacy inquiries only) -->
+          @if (!isServiceInquiry) {
+            <ds-mobile-list-item [leadingSize]="'32px'" [showDivider]="true">
+              <div content-leading>
+                <ds-avatar-with-badge
+                  [size]="'sm'"
+                  [type]="'initials'"
+                  [initials]="'R'" />
+              </div>
+              <div content-main>
+                <div class="detail-label">Sagsbehandler</div>
+                <div class="detail-value">Ricki Meihlen</div>
+              </div>
+            </ds-mobile-list-item>
+            
+            <ds-mobile-list-item [leadingSize]="'32px'" [showDivider]="true">
+              <div content-leading>
+                <ds-avatar-with-badge
+                  [size]="'sm'"
+                  [type]="'initials'"
+                  [initials]="'M'" />
+              </div>
+              <div content-main>
+                <div class="detail-label">Tekniker</div>
+                <div class="detail-value">Martin Smith</div>
+              </div>
+            </ds-mobile-list-item>
+          }
           
           <!-- Creation Date -->
           <ds-mobile-list-item [leadingSize]="'32px'" [showDivider]="true" [align]="'center'">
             <ds-icon content-leading name="remixTimeLine" size="20px" color="tertiary" />
             <div content-main>
-              <div class="detail-value">22. feb 2025</div>
+              <div class="detail-value">{{ inquiryTimestamp }}</div>
             </div>
           </ds-mobile-list-item>
           
@@ -30535,30 +31361,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
           </ds-mobile-list-item>
           
           <!-- Description -->
-          <ds-mobile-list-item [leadingSize]="'32px'" [showDivider]="photoUrls.length > 0">
+          <ds-mobile-list-item [leadingSize]="'32px'" [showDivider]="!isServiceInquiry && photoUrls.length > 0">
             <ds-icon content-leading name="remixAlignLeft" size="20px" color="tertiary" />
             <div content-main style="display:flex;flex-direction:column;gap:8px">
               <div class="detail-value description-text">
-                I de sidste tre dage har vi oplevet vedvarende problemer med tørretumbleren i vores lejlighed. På trods af at vi følger betjeningsvejledningen, fejler maskinen konsekvent i at fuldføre sine tørrecyklusser.
+                {{ inquiryDescription }}
               </div>
-              <ds-badge content="Husholdningsapparater" size="sm"/>
+              <ds-badge [content]="inquiryCategory" size="sm"/>
             </div>
           </ds-mobile-list-item>
           
-          <!-- Photos -->
-          <ds-mobile-list-item [leadingSize]="'32px'" [showDivider]="false">
-            <ds-icon content-leading name="remixCameraLine" size="20px" color="tertiary" />
-            <div content-main>
-              <ds-mobile-inline-photo 
-                [images]="photoUrls"
-                [useGrid]="false"
-                (photoClick)="openPhotoLightbox($event.index)" />
-            </div>
-          </ds-mobile-list-item>
+          <!-- Photos (legacy inquiries only) -->
+          @if (!isServiceInquiry) {
+            <ds-mobile-list-item [leadingSize]="'32px'" [showDivider]="false">
+              <ds-icon content-leading name="remixCameraLine" size="20px" color="tertiary" />
+              <div content-main>
+                <ds-mobile-inline-photo 
+                  [images]="photoUrls"
+                  [useGrid]="false"
+                  (photoClick)="openPhotoLightbox($event.index)" />
+              </div>
+            </ds-mobile-list-item>
+          }
         </ds-mobile-section>
       }
     </ds-mobile-page-details>
-  `, 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-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"] }]
+  `, 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-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}.empty-messages{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;gap:12px}.empty-messages-image{width:96px;height:96px;-o-object-fit:contain;object-fit:contain}.empty-messages-text{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm, 14px);color:var(--text-color-default-secondary, #71727a);margin:0}\n"] }]
         }], ctorParameters: () => [{ type: UserService }, { type: DsMobileLightboxService }, { type: DsMobileChatModalService }] });
 
 /**
@@ -31727,6 +32555,12 @@ class MobileTabsExampleComponent {
                 icon: 'remixGroupLine',
                 destructive: false,
             },
+            {
+                action: 'manage-admins',
+                title: 'Fællesskabsadministrator',
+                icon: 'remixUserStarLine',
+                destructive: false,
+            },
         ];
         if (this.trackingPermissionService.shouldShowSettingsReminder()) {
             accountActions.push({
@@ -31829,6 +32663,13 @@ class MobileTabsExampleComponent {
             iconActive: 'remixMessage3Fill',
             route: 'messages',
         },
+        {
+            id: 'services',
+            label: 'Services',
+            icon: 'remixServiceLine',
+            iconActive: 'remixServiceFill',
+            route: 'services',
+        },
     ];
     /**
      * Profile menu items configuration.
@@ -31854,6 +32695,11 @@ class MobileTabsExampleComponent {
                 animation: customPageTransition
             });
         }
+        if (result.action === 'manage-admins') {
+            this.navCtrl.navigateForward(['/community-admins'], {
+                animation: customPageTransition
+            });
+        }
         // Handle appearance action here (opens modal)
         if (result.action === 'appearance') {
             console.log('Opening whitelabel demo...');
@@ -34533,12 +35379,15 @@ class FamilyAccessPageComponent {
         <ds-mobile-section>
           <div class="members-list">
             @for (member of service.members(); track member.id; let isFirst = $first; let isLast = $last) {
-              <ds-mobile-list-item [showDivider]="!isLast" [leadingSize]="'36px'" [flushTop]="isFirst">
+              <ds-mobile-list-item [showDivider]="!isLast" [leadingSize]="'32px'" [flushTop]="isFirst">
 
                 <div content-leading>
-                  <div class="member-avatar member-avatar--{{ member.status }}">
-                    {{ member.initials }}
-                  </div>
+                  <ds-avatar-with-badge
+                    type="initials"
+                    [initials]="member.initials"
+                    size="md"
+                    [showBadge]="false"
+                  />
                 </div>
 
                 <div content-main class="member-details">
@@ -34581,7 +35430,7 @@ class FamilyAccessPageComponent {
       }
 
     </ds-mobile-page-details>
-  `, isInline: true, styles: [".empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;text-align:center}.empty-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;color:var(--color-text-primary);margin-top:-16px;z-index:4}.empty-state-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);color:var(--color-text-secondary);margin:0}.empty-state ds-button{display:block;margin-top:16px}.empty-state ds-button::ng-deep .btn{width:100%;border-radius:9999px}.invite-cta{padding:8px 0 4px}.invite-cta ds-button{display:block;width:100%}.invite-cta ::ng-deep ds-button>button{width:100%;border-radius:9999px}.members-list{display:flex;flex-direction:column;gap:0}.member-avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600}.member-avatar--active{background:var(--color-background-brand-secondary, #EEF0FF);color:var(--color-brand-secondary, #6B5FF5)}.member-avatar--pending{background:var(--color-background-warning-secondary, #FEF3C7);color:var(--color-warning-base, #d97706)}.member-avatar--expired{background:var(--color-background-error-secondary, #FEE2E2);color:var(--color-error-base, #dc2626)}.member-details{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.member-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}.member-status-row{display:flex;align-items:center;gap:6px;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)}.status-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}.status-dot--active{background:var(--color-success-base, #158452)}.status-dot--pending{background:var(--color-warning-base, #d97706)}.status-dot--expired{background:var(--color-error-base, #dc2626)}.member-trailing-action{display:flex;align-items:center}.member-trailing-action ds-icon-button::ng-deep button{box-sizing:border-box;width:2rem;height:2rem;min-width:2rem;border-radius:50%!important}@keyframes slideDown{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}.success-toast{padding:10px 14px;border-radius:12px;background:var(--color-background-success-secondary, #DCFCE7);display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500;color:var(--color-success-base, #158452);animation:slideDown .2s ease-out}.toast-icon{width:20px;height:20px;border-radius:50%;background:var(--color-success-base, #158452);display:flex;align-items:center;justify-content:center;flex-shrink:0}.toast-dismiss{margin-left:auto;background:none;border:none;cursor:pointer;flex-shrink:0}\n"], dependencies: [{ kind: "component", type: DsMobilePageDetailsComponent, selector: "ds-mobile-page-details", inputs: ["title", "backRoute", "contentPadding", "tabs", "activeTab", "showRefresh", "scrollThreshold", "headerFadeDistance"], outputs: ["back", "tabChange", "refresh", "scroll"] }, { kind: "component", type: DsMobileSectionComponent, selector: "ds-mobile-section", inputs: ["headline", "icon", "linkText", "padding", "paddingDesktop", "gap", "contentGap", "showBorder", "overflow"], outputs: ["linkClick"] }, { kind: "component", type: DsMobileIllustrationComponent, selector: "ds-mobile-illustration", inputs: ["variant", "size", "alt"] }, { kind: "component", type: DsMobileListItemComponent, selector: "ds-mobile-list-item", inputs: ["leadingSize", "variant", "align", "flushTop", "interactive", "disabled", "loading", "enableLongPress", "showDesktopMoreButton", "moreActions", "moreButtonAriaLabel", "interactiveOffset", "title", "subtitle", "showDivider", "dividerSpacing"], outputs: ["itemClick", "moreButtonClick"] }, { kind: "component", type: DsButtonComponent, selector: "ds-button", inputs: ["variant", "size", "disabled", "loading", "pressed", "expanded", "leadingIcon", "trailingIcon", "ariaLabel", "iconOnly"], outputs: ["clicked", "focused", "blurred"] }, { kind: "component", type: DsIconButtonComponent, selector: "ds-icon-button", inputs: ["variant", "size", "icon", "disabled", "loading", "pressed", "expanded", "ariaLabel", "tooltip", "tooltipDisabled", "tooltipPlacement"], outputs: ["clicked", "focused", "blurred"] }] });
+  `, isInline: true, styles: [".empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;text-align:center}.empty-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;color:var(--color-text-primary);margin-top:-16px;z-index:4}.empty-state-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);color:var(--color-text-secondary);margin:0}.empty-state ds-button{display:block;margin-top:16px}.empty-state ds-button::ng-deep .btn{width:100%;border-radius:9999px}.invite-cta{padding:8px 0 4px}.invite-cta ds-button{display:block;width:100%}.invite-cta ::ng-deep ds-button>button{width:100%;border-radius:9999px}.members-list{display:flex;flex-direction:column;gap:0}.member-details{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.member-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}.member-status-row{display:flex;align-items:center;gap:6px;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)}.status-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}.status-dot--active{background:var(--color-success-base, #158452)}.status-dot--pending{background:var(--color-warning-base, #d97706)}.status-dot--expired{background:var(--color-error-base, #dc2626)}.member-trailing-action{display:flex;align-items:center}.member-trailing-action ds-icon-button::ng-deep button{box-sizing:border-box;width:2rem;height:2rem;min-width:2rem;border-radius:50%!important}@keyframes slideDown{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}.success-toast{padding:10px 14px;border-radius:12px;background:var(--color-background-success-secondary, #DCFCE7);display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500;color:var(--color-success-base, #158452);animation:slideDown .2s ease-out}.toast-icon{width:20px;height:20px;border-radius:50%;background:var(--color-success-base, #158452);display:flex;align-items:center;justify-content:center;flex-shrink:0}.toast-dismiss{margin-left:auto;background:none;border:none;cursor:pointer;flex-shrink:0}\n"], dependencies: [{ kind: "component", type: DsMobilePageDetailsComponent, selector: "ds-mobile-page-details", inputs: ["title", "backRoute", "contentPadding", "tabs", "activeTab", "showRefresh", "scrollThreshold", "headerFadeDistance"], outputs: ["back", "tabChange", "refresh", "scroll"] }, { kind: "component", type: DsMobileSectionComponent, selector: "ds-mobile-section", inputs: ["headline", "icon", "linkText", "padding", "paddingDesktop", "gap", "contentGap", "showBorder", "overflow"], outputs: ["linkClick"] }, { kind: "component", type: DsMobileIllustrationComponent, selector: "ds-mobile-illustration", inputs: ["variant", "size", "alt"] }, { kind: "component", type: DsMobileListItemComponent, selector: "ds-mobile-list-item", inputs: ["leadingSize", "variant", "align", "flushTop", "interactive", "disabled", "loading", "enableLongPress", "showDesktopMoreButton", "moreActions", "moreButtonAriaLabel", "interactiveOffset", "title", "subtitle", "showDivider", "dividerSpacing"], outputs: ["itemClick", "moreButtonClick"] }, { kind: "component", type: DsAvatarWithBadgeComponent, selector: "ds-avatar-with-badge", inputs: ["type", "size", "initials", "src", "iconName", "showBadge", "badgePosition"] }, { kind: "component", type: DsButtonComponent, selector: "ds-button", inputs: ["variant", "size", "disabled", "loading", "pressed", "expanded", "leadingIcon", "trailingIcon", "ariaLabel", "iconOnly"], outputs: ["clicked", "focused", "blurred"] }, { 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: FamilyAccessPageComponent, decorators: [{
             type: Component,
@@ -34590,6 +35439,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         DsMobileSectionComponent,
                         DsMobileIllustrationComponent,
                         DsMobileListItemComponent,
+                        DsAvatarWithBadgeComponent,
                         DsButtonComponent,
                         DsIconButtonComponent,
                     ], template: `
@@ -34634,12 +35484,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         <ds-mobile-section>
           <div class="members-list">
             @for (member of service.members(); track member.id; let isFirst = $first; let isLast = $last) {
-              <ds-mobile-list-item [showDivider]="!isLast" [leadingSize]="'36px'" [flushTop]="isFirst">
+              <ds-mobile-list-item [showDivider]="!isLast" [leadingSize]="'32px'" [flushTop]="isFirst">
 
                 <div content-leading>
-                  <div class="member-avatar member-avatar--{{ member.status }}">
-                    {{ member.initials }}
-                  </div>
+                  <ds-avatar-with-badge
+                    type="initials"
+                    [initials]="member.initials"
+                    size="md"
+                    [showBadge]="false"
+                  />
                 </div>
 
                 <div content-main class="member-details">
@@ -34682,7 +35535,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
       }
 
     </ds-mobile-page-details>
-  `, styles: [".empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;text-align:center}.empty-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;color:var(--color-text-primary);margin-top:-16px;z-index:4}.empty-state-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);color:var(--color-text-secondary);margin:0}.empty-state ds-button{display:block;margin-top:16px}.empty-state ds-button::ng-deep .btn{width:100%;border-radius:9999px}.invite-cta{padding:8px 0 4px}.invite-cta ds-button{display:block;width:100%}.invite-cta ::ng-deep ds-button>button{width:100%;border-radius:9999px}.members-list{display:flex;flex-direction:column;gap:0}.member-avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600}.member-avatar--active{background:var(--color-background-brand-secondary, #EEF0FF);color:var(--color-brand-secondary, #6B5FF5)}.member-avatar--pending{background:var(--color-background-warning-secondary, #FEF3C7);color:var(--color-warning-base, #d97706)}.member-avatar--expired{background:var(--color-background-error-secondary, #FEE2E2);color:var(--color-error-base, #dc2626)}.member-details{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.member-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}.member-status-row{display:flex;align-items:center;gap:6px;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)}.status-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}.status-dot--active{background:var(--color-success-base, #158452)}.status-dot--pending{background:var(--color-warning-base, #d97706)}.status-dot--expired{background:var(--color-error-base, #dc2626)}.member-trailing-action{display:flex;align-items:center}.member-trailing-action ds-icon-button::ng-deep button{box-sizing:border-box;width:2rem;height:2rem;min-width:2rem;border-radius:50%!important}@keyframes slideDown{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}.success-toast{padding:10px 14px;border-radius:12px;background:var(--color-background-success-secondary, #DCFCE7);display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500;color:var(--color-success-base, #158452);animation:slideDown .2s ease-out}.toast-icon{width:20px;height:20px;border-radius:50%;background:var(--color-success-base, #158452);display:flex;align-items:center;justify-content:center;flex-shrink:0}.toast-dismiss{margin-left:auto;background:none;border:none;cursor:pointer;flex-shrink:0}\n"] }]
+  `, styles: [".empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;text-align:center}.empty-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;color:var(--color-text-primary);margin-top:-16px;z-index:4}.empty-state-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);color:var(--color-text-secondary);margin:0}.empty-state ds-button{display:block;margin-top:16px}.empty-state ds-button::ng-deep .btn{width:100%;border-radius:9999px}.invite-cta{padding:8px 0 4px}.invite-cta ds-button{display:block;width:100%}.invite-cta ::ng-deep ds-button>button{width:100%;border-radius:9999px}.members-list{display:flex;flex-direction:column;gap:0}.member-details{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.member-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}.member-status-row{display:flex;align-items:center;gap:6px;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)}.status-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}.status-dot--active{background:var(--color-success-base, #158452)}.status-dot--pending{background:var(--color-warning-base, #d97706)}.status-dot--expired{background:var(--color-error-base, #dc2626)}.member-trailing-action{display:flex;align-items:center}.member-trailing-action ds-icon-button::ng-deep button{box-sizing:border-box;width:2rem;height:2rem;min-width:2rem;border-radius:50%!important}@keyframes slideDown{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}.success-toast{padding:10px 14px;border-radius:12px;background:var(--color-background-success-secondary, #DCFCE7);display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500;color:var(--color-success-base, #158452);animation:slideDown .2s ease-out}.toast-icon{width:20px;height:20px;border-radius:50%;background:var(--color-success-base, #158452);display:flex;align-items:center;justify-content:center;flex-shrink:0}.toast-dismiss{margin-left:auto;background:none;border:none;cursor:pointer;flex-shrink:0}\n"] }]
         }] });
 
 class AcceptInvitePageComponent {
@@ -35105,6 +35958,228 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
   `, styles: [".empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:64px 20px;text-align:center}.empty-state-image{width:96px;height:96px;margin-bottom:24px;opacity:.4}.empty-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;color:var(--color-text-primary);margin:0 0 8px}.empty-state-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);color:var(--color-text-secondary);margin:0}\n"] }]
         }] });
 
+const DEFAULT_SERVICE_PAGE_LABELS = {
+    pageTitle: 'Services',
+    emptyState: 'Ingen services tilknyttet',
+    emptyStateDescription: 'Der er ingen serviceaftaler knyttet til din ejendom endnu.',
+};
+function stripHtml(html) {
+    const div = document.createElement('div');
+    div.innerHTML = html;
+    return div.textContent?.trim() || '';
+}
+const MOCK_VENDORS = [
+    {
+        id: 'v-1',
+        name: 'CleanTeam ApS',
+        category: 'Rengøring',
+        description: 'Trappevask og vinduespolering',
+        phone: '+45 70 20 30 40',
+        logo: '/Assets/dummy-logos/cleanteam-logo.svg',
+        thumbnail: '/Assets/Dummy-photos/clean-team.jpg',
+        fullDescription: '<h3>Rengøring</h3><p>CleanTeam ApS tilbyder professionel trappevask og vinduespolering for ejendommen. Servicen udføres ugentligt og kan tilpasses jeres behov.</p><h3>Pris</h3><p>350 kr. per besøg</p>',
+        price: '350 kr. per besøg',
+        availabilityStatus: 'available-today',
+        statusLabel: 'Ledig i dag',
+    },
+    {
+        id: 'v-2',
+        name: 'Nordisk Rengøring',
+        category: 'Rengøring',
+        description: 'Erhvervs- og boligrengøring',
+        logo: '/Assets/dummy-logos/nordiccleaning-logo.svg',
+        thumbnail: '/Assets/Dummy-photos/nordic-cleaning.jpg',
+        heroImage: '/Assets/Dummy-photos/nordic-cleaning.jpg',
+        fullDescription: '<h3>Rengøring</h3><p>Nordisk Rengøring leverer fleksibel erhvervs- og boligrengøring. Vi tilpasser rengøringen til jeres specifikke behov.</p><h3>Pris</h3><p>275 kr. per time</p>',
+        price: '275 kr. per time',
+        availabilityStatus: 'available-from',
+        statusLabel: 'Ledig fra 5. maj',
+    },
+    {
+        id: 'v-3',
+        name: 'Blik Partner A/S',
+        category: 'VVS',
+        description: 'VVS-service og akut udkald',
+        phone: '+45 33 44 55 66',
+        thumbnail: '/Assets/Dummy-photos/plumbing.jpg',
+        fullDescription: '<h3>VVS</h3><p>BlikPartner A/S er jeres VVS-partner til alt fra løbende vedligeholdelse til akutte udkald. Vi dækker reparation af vandrør, afløb, radiatorer og blandingsbatterier.</p><h3>Pris</h3><p>450 kr. per udkald + tid</p>',
+        price: '450 kr. per udkald + tid',
+        availabilityStatus: 'available-today',
+        statusLabel: 'Ledig i dag',
+    },
+    {
+        id: 'v-4',
+        name: 'ElektroTek ApS',
+        category: 'Elektriker',
+        description: 'El-installationer og fejlsøgning',
+        phone: '+45 23 45 67 89',
+        logo: '/Assets/dummy-logos/electrician-logo.svg',
+        thumbnail: '/Assets/Dummy-photos/electrician.jpg',
+        heroImage: '/Assets/Dummy-photos/electrician.jpg',
+        fullDescription: '<h3>Elektriker</h3><p>ElektroTek ApS varetager el-installationer, fejlsøgning og lovpligtige eftersyn for ejendommen. Vi udfører også småopgaver som udskiftning af kontakter og lampeudtag.</p><h3>Pris</h3><p>395 kr. per time</p>',
+        price: '395 kr. per time',
+        availabilityStatus: 'available-today',
+        statusLabel: 'Ledig i dag',
+    },
+    {
+        id: 'v-5',
+        name: 'HaveService Danmark',
+        category: 'Have & Grønne arealer',
+        description: 'Pleje af fællesarealer og haver',
+        logo: '/Assets/dummy-logos/gardener-logo.svg',
+        thumbnail: '/Assets/Dummy-photos/gardener.jpg',
+        heroImage: '/Assets/Dummy-photos/gardener.jpg',
+        fullDescription: '<h3>Have & Grønne arealer</h3><p>HaveService Danmark står for den løbende pleje af fællesarealer og haver — herunder græsslåning, hækklipning, ukrudtsbekæmpelse og sæsonbeplantning.</p><h3>Pris</h3><p>500 kr. per besøg</p>',
+        price: '500 kr. per besøg',
+        availabilityStatus: 'unavailable',
+        statusLabel: 'Ikke tilgængelig',
+    },
+];
+class ServicesPageComponent {
+    pageComponent;
+    vendorModal = inject(DsMobileServiceVendorModalService);
+    newInquiryModal = inject(DsMobileNewInquiryModalService);
+    inquiriesService = inject(InquiriesService);
+    navCtrl = inject(NavController);
+    userService = inject(UserService);
+    lbl = { ...DEFAULT_SERVICE_PAGE_LABELS };
+    vendors = signal(MOCK_VENDORS, ...(ngDevMode ? [{ debugName: "vendors" }] : []));
+    stripHtml = stripHtml;
+    async openVendorSheet(vendor) {
+        const modal = await this.vendorModal.open({
+            vendorName: vendor.name,
+            vendorDescription: vendor.fullDescription || vendor.description || '',
+            vendorImage: vendor.heroImage || '',
+            vendorLogo: vendor.logo,
+        });
+        const result = await modal.onWillDismiss();
+        if (result.role === 'book') {
+            await this.openInquiryForVendor(vendor);
+        }
+    }
+    async openInquiryForVendor(vendor) {
+        await this.newInquiryModal.open({
+            titlePlaceholder: 'Emne for henvendelsen',
+            descriptionPlaceholder: 'Beskriv hvad du har brug for…',
+            submitButtonLabel: 'Send henvendelse',
+            category: vendor.category,
+            onSubmit: async (data) => {
+                const inquiryId = `service-${Date.now()}`;
+                this.inquiriesService.addInquiry({
+                    id: inquiryId,
+                    title: data.title,
+                    description: data.description,
+                    status: 'open',
+                    timestamp: 'Lige nu',
+                    category: data.category || vendor.category,
+                    vendorName: vendor.name,
+                    vendorLogo: vendor.logo,
+                });
+                await this.newInquiryModal.close();
+                setTimeout(() => {
+                    this.navCtrl.navigateForward([`/inquiry-detail/${inquiryId}`], {
+                        animation: customPageTransition,
+                    });
+                }, 300);
+            },
+        });
+    }
+    handleRefresh(event) {
+        setTimeout(() => {
+            event.target?.complete?.();
+        }, 1000);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ServicesPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ServicesPageComponent, isStandalone: true, selector: "app-services-page", viewQueries: [{ propertyName: "pageComponent", first: true, predicate: ["pageComponent"], descendants: true }], ngImport: i0, template: `
+    <ds-mobile-page-main
+      #pageComponent
+      [title]="lbl.pageTitle"
+      [avatarInitials]="userService.avatarInitials()"
+      [avatarType]="userService.avatarType()"
+      (refresh)="handleRefresh($event)"
+    >
+      @if (pageComponent.isOffline()) {
+        <ds-mobile-offline-banner
+          offline-indicator
+          title="Ingen internetforbindelse"
+          message="Nogle funktioner kan være utilgængelige"
+        />
+      }
+
+      @if (vendors().length === 0) {
+        <ds-mobile-section>
+          <div class="empty-state">
+            <ds-mobile-illustration variant="inquiry" [alt]="lbl.emptyState" />
+            <h3 class="empty-state-title">{{ lbl.emptyState }}</h3>
+            <p class="empty-state-description">{{ lbl.emptyStateDescription }}</p>
+          </div>
+        </ds-mobile-section>
+      } @else {
+        <ds-mobile-section contentGap="0px">
+          @for (vendor of vendors(); track vendor.id) {
+            <ds-mobile-interactive-list-item-service
+              [title]="vendor.name"
+              [description]="stripHtml(vendor.fullDescription || vendor.description || '')"
+              [logo]="vendor.logo || ''"
+              (serviceClick)="openVendorSheet(vendor)"
+            />
+          }
+        </ds-mobile-section>
+      }
+    </ds-mobile-page-main>
+  `, isInline: true, styles: [".empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;text-align:center}.empty-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;color:var(--color-text-primary);margin-top:-16px;z-index:4}.empty-state-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);color:var(--color-text-secondary);margin:0}\n"], dependencies: [{ kind: "component", type: DsMobilePageMainComponent, selector: "ds-mobile-page-main", inputs: ["title", "headerTitle", "headerSubtitle", "firstEntry", "avatarType", "avatarInitials", "avatarSrc", "avatarIconName", "showRefresh", "showCondensedHeader", "scrollThreshold", "headerFadeDistance", "contentPadding", "profileMenuItems"], outputs: ["avatarClick", "profileActionSelected", "refresh", "scroll"] }, { kind: "component", type: DsMobileSectionComponent, selector: "ds-mobile-section", inputs: ["headline", "icon", "linkText", "padding", "paddingDesktop", "gap", "contentGap", "showBorder", "overflow"], outputs: ["linkClick"] }, { kind: "component", type: DsMobileIllustrationComponent, selector: "ds-mobile-illustration", inputs: ["variant", "size", "alt"] }, { kind: "component", type: DsMobileInteractiveListItemServiceComponent, selector: "ds-mobile-interactive-list-item-service", inputs: ["title", "description", "logo", "showChevron"], outputs: ["serviceClick"] }, { kind: "component", type: DsMobileOfflineBannerComponent, selector: "ds-mobile-offline-banner", inputs: ["icon", "title", "message"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ServicesPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-services-page', standalone: true, imports: [
+                        DsMobilePageMainComponent,
+                        DsMobileSectionComponent,
+                        DsMobileIllustrationComponent,
+                        DsMobileInteractiveListItemServiceComponent,
+                        DsMobileOfflineBannerComponent,
+                    ], template: `
+    <ds-mobile-page-main
+      #pageComponent
+      [title]="lbl.pageTitle"
+      [avatarInitials]="userService.avatarInitials()"
+      [avatarType]="userService.avatarType()"
+      (refresh)="handleRefresh($event)"
+    >
+      @if (pageComponent.isOffline()) {
+        <ds-mobile-offline-banner
+          offline-indicator
+          title="Ingen internetforbindelse"
+          message="Nogle funktioner kan være utilgængelige"
+        />
+      }
+
+      @if (vendors().length === 0) {
+        <ds-mobile-section>
+          <div class="empty-state">
+            <ds-mobile-illustration variant="inquiry" [alt]="lbl.emptyState" />
+            <h3 class="empty-state-title">{{ lbl.emptyState }}</h3>
+            <p class="empty-state-description">{{ lbl.emptyStateDescription }}</p>
+          </div>
+        </ds-mobile-section>
+      } @else {
+        <ds-mobile-section contentGap="0px">
+          @for (vendor of vendors(); track vendor.id) {
+            <ds-mobile-interactive-list-item-service
+              [title]="vendor.name"
+              [description]="stripHtml(vendor.fullDescription || vendor.description || '')"
+              [logo]="vendor.logo || ''"
+              (serviceClick)="openVendorSheet(vendor)"
+            />
+          }
+        </ds-mobile-section>
+      }
+    </ds-mobile-page-main>
+  `, styles: [".empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;text-align:center}.empty-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;color:var(--color-text-primary);margin-top:-16px;z-index:4}.empty-state-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);color:var(--color-text-secondary);margin:0}\n"] }]
+        }], propDecorators: { pageComponent: [{
+                type: ViewChild,
+                args: ['pageComponent']
+            }] } });
+
 /**
  * Services Barrel File
  *
@@ -35128,5 +36203,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AcceptInvitePageComponent, ActionCommentComponent, ActionLikeComponent, AvatarUploadPageComponent, BaseModalService, ContentRowComponent, CreateAccountPageComponent, DsAppIconComponent, DsAvatarWithBadgeComponent, DsLogoComponent, DsMobileAccessSheetComponent, DsMobileActionListItemComponent, DsMobileActionsBottomSheetComponent, DsMobileAddGroupTenantsModalComponent, DsMobileAppLoadingComponent, DsMobileAttachmentPreviewComponent, DsMobileBookingConfirmationWrapperComponent, DsMobileBookingModalComponent, DsMobileBookingModalService, DsMobileBookingSummaryComponent, DsMobileBottomSheetHeaderComponent, DsMobileBottomSheetService, DsMobileBottomSheetWrapperComponent, DsMobileCapacitySheetComponent, DsMobileCardInlineBannerComponent, DsMobileCardInlineComponent, DsMobileCardInlineContactComponent, DsMobileCardInlineFileComponent, DsMobileChatModalComponent, DsMobileChatModalService, DsMobileActionsBottomSheetComponent as DsMobileCommentActionsBottomSheetComponent, DsMobileCommentComponent, DsMobileConfirmationSheetComponent, DsMobileContactListItemComponent, DsMobileContentComponent, DsMobileCreateGroupModalComponent, DsMobileDropdownComponent, DsMobileEditGroupModalComponent, DsMobileEmptyStateComponent, DsMobileFabComponent, DsMobileFacilityArchiveConfirmationComponent, DsMobileFacilityCreationConfirmationWrapperComponent, DsMobileFacilityCreationModalComponent, DsMobileFacilityCreationModalService, DsMobileFacilityDeleteConfirmationComponent, DsMobileFacilityDetailModalComponent, DsMobileFacilityDetailModalService, DsMobileFileAttachmentComponent, DsMobileGroupAvatarStackComponent, DsMobileGroupMembersModalComponent, DsMobileHandbookDetailModalComponent, DsMobileHandbookDetailModalService, DsMobileHandbookFolderComponent, DsMobileHandbookFolderMiniComponent, DsMobileHeaderContentComponent, DsMobileHeaderContentTileComponent, DsMobileIllustrationComponent, DsMobileImagePlaceholderComponent, DsMobileInlinePhotoComponent, DsMobileInlineTabsComponent, DsMobileInteractiveListItemBookingComponent, DsMobileInteractiveListItemInquiryComponent, DsMobileInteractiveListItemMessageComponent, DsMobileInteractiveListItemPostComponent, DsMobileLightboxImageComponent as DsMobileLightboxComponent, DsMobileLightboxFooterComponent, DsMobileLightboxHeaderComponent, DsMobileLightboxImageComponent, DsMobileLightboxPdfComponent, DsMobileLightboxService, DsMobileListItemComponent, DsMobileListItemStaticComponent, DsMobileListSearchComponent, DsMobileLoaderOverlayComponent, DsMobileLongPressDirective, DsMobileMediaActionsPanelComponent, DsMobileMessageBubbleComponent, DsMobileMessageComposerComponent, DsMobileModalBaseComponent, DsMobileModalService, DsMobileNewInquiryModalComponent, DsMobileNewInquiryModalService, DsMobileOfflineBannerComponent, DsMobilePageDetailsComponent, DsMobilePageMainComponent, DsMobilePillComponent, DsMobileActionsBottomSheetComponent as DsMobilePostActionsBottomSheetComponent, DsMobilePostComposerComponent, DsMobilePostCreateBottomSheetComponent, DsMobilePostDetailModalComponent, DsMobilePostDetailModalService, DsMobilePriceSheetComponent, DsMobileProfileActionsSheetComponent, DsMobilePromptBottomSheetComponent, DsMobilePropertyBannerComponent, DsMobileRichTextEditorComponent, DsMobileSectionComponent, DsMobileSwiperComponent, DsMobileSwiperWithNavComponent, DsMobileSystemMessageBannerComponent, DsMobileTabBarComponent, DsMobileTabsComponent, DsMobileTenantPickerModalComponent, DsMobileWhenCanBookSheetComponent, DsMobileWhoCanBookSheetComponent, DsTextInputComponent, FamilyAccessPageComponent, FamilyAccessService, InviteSuccessPageComponent, MediaPickerService, MobileBookingPageComponent, MobileCommunityPageComponent, MobileHandbookPageComponent, MobileHomePageComponent, MobileInquiriesPageComponent, MobileInquiryDetailPageComponent, MobileModalBase, MobilePageBase, MobilePostDetailPageComponent, MobileTabsExampleComponent, PageLoadingService, PostActionsComponent, PostAttachmentsComponent, PostContentComponent, PostCreatePageComponent, PostMediaComponent, PostPdfAttachmentComponent, PostTextComponent, PostsService, SectionHeaderComponent, SignInPageComponent, SignInToAcceptPageComponent, TenantChatPageComponent, TileContentComponent, TileIconComponent, TileLabelComponent, TileValueComponent, TrackingPermissionService, UserService, WhitelabelDemoModalComponent, WhitelabelDemoModalService, WhitelabelService, customBackTransition, customPageTransition };
+export { AcceptInvitePageComponent, ActionCommentComponent, ActionLikeComponent, AvatarUploadPageComponent, BaseModalService, ContentRowComponent, CreateAccountPageComponent, DEFAULT_SERVICE_PAGE_LABELS, DsAppIconComponent, DsAvatarWithBadgeComponent, DsLogoComponent, DsMobileAccessSheetComponent, DsMobileActionListItemComponent, DsMobileActionsBottomSheetComponent, DsMobileAddGroupTenantsModalComponent, DsMobileAppLoadingComponent, DsMobileAttachmentPreviewComponent, DsMobileBookingConfirmationWrapperComponent, DsMobileBookingModalComponent, DsMobileBookingModalService, DsMobileBookingSummaryComponent, DsMobileBottomSheetHeaderComponent, DsMobileBottomSheetService, DsMobileBottomSheetWrapperComponent, DsMobileCapacitySheetComponent, DsMobileCardInlineBannerComponent, DsMobileCardInlineComponent, DsMobileCardInlineContactComponent, DsMobileCardInlineFileComponent, DsMobileChatModalComponent, DsMobileChatModalService, DsMobileActionsBottomSheetComponent as DsMobileCommentActionsBottomSheetComponent, DsMobileCommentComponent, DsMobileCommunityAdminPickerComponent, DsMobileCommunityAdminsModalComponent, DsMobileConfirmationSheetComponent, DsMobileContactListItemComponent, DsMobileContentComponent, DsMobileCreateGroupModalComponent, DsMobileDropdownComponent, DsMobileEditGroupModalComponent, DsMobileEmptyStateComponent, DsMobileFabComponent, DsMobileFacilityArchiveConfirmationComponent, DsMobileFacilityCreationConfirmationWrapperComponent, DsMobileFacilityCreationModalComponent, DsMobileFacilityCreationModalService, DsMobileFacilityDeleteConfirmationComponent, DsMobileFacilityDetailModalComponent, DsMobileFacilityDetailModalService, DsMobileFileAttachmentComponent, DsMobileGroupAvatarStackComponent, DsMobileGroupMembersModalComponent, DsMobileHandbookDetailModalComponent, DsMobileHandbookDetailModalService, DsMobileHandbookFolderComponent, DsMobileHandbookFolderMiniComponent, DsMobileHeaderContentComponent, DsMobileHeaderContentTileComponent, DsMobileIllustrationComponent, DsMobileImagePlaceholderComponent, DsMobileInlinePhotoComponent, DsMobileInlineTabsComponent, DsMobileInteractiveListItemBookingComponent, DsMobileInteractiveListItemInquiryComponent, DsMobileInteractiveListItemMessageComponent, DsMobileInteractiveListItemPostComponent, DsMobileLightboxImageComponent as DsMobileLightboxComponent, DsMobileLightboxFooterComponent, DsMobileLightboxHeaderComponent, DsMobileLightboxImageComponent, DsMobileLightboxPdfComponent, DsMobileLightboxService, DsMobileListItemComponent, DsMobileListItemStaticComponent, DsMobileListSearchComponent, DsMobileLoaderOverlayComponent, DsMobileLongPressDirective, DsMobileMediaActionsPanelComponent, DsMobileMessageBubbleComponent, DsMobileMessageComposerComponent, DsMobileModalBaseComponent, DsMobileModalService, DsMobileNewInquiryModalComponent, DsMobileNewInquiryModalService, DsMobileOfflineBannerComponent, DsMobilePageDetailsComponent, DsMobilePageMainComponent, DsMobilePillComponent, DsMobileActionsBottomSheetComponent as DsMobilePostActionsBottomSheetComponent, DsMobilePostComposerComponent, DsMobilePostCreateBottomSheetComponent, DsMobilePostDetailModalComponent, DsMobilePostDetailModalService, DsMobilePriceSheetComponent, DsMobileProfileActionsSheetComponent, DsMobilePromptBottomSheetComponent, DsMobilePropertyBannerComponent, DsMobileRichTextEditorComponent, DsMobileSectionComponent, DsMobileServiceVendorModalService, DsMobileServiceVendorSheetComponent, DsMobileSwiperComponent, DsMobileSwiperWithNavComponent, DsMobileSystemMessageBannerComponent, DsMobileTabBarComponent, DsMobileTabsComponent, DsMobileTenantPickerModalComponent, DsMobileWhenCanBookSheetComponent, DsMobileWhoCanBookSheetComponent, DsTextInputComponent, FamilyAccessPageComponent, FamilyAccessService, InquiriesService, InviteSuccessPageComponent, MediaPickerService, MobileBookingPageComponent, MobileCommunityPageComponent, MobileHandbookPageComponent, MobileHomePageComponent, MobileInquiriesPageComponent, MobileInquiryDetailPageComponent, MobileModalBase, MobilePageBase, MobilePostDetailPageComponent, MobileTabsExampleComponent, PageLoadingService, PostActionsComponent, PostAttachmentsComponent, PostContentComponent, PostCreatePageComponent, PostMediaComponent, PostPdfAttachmentComponent, PostTextComponent, PostsService, SectionHeaderComponent, ServicesPageComponent, SignInPageComponent, SignInToAcceptPageComponent, TenantChatPageComponent, TileContentComponent, TileIconComponent, TileLabelComponent, TileValueComponent, TrackingPermissionService, UserService, WhitelabelDemoModalComponent, WhitelabelDemoModalService, WhitelabelService, customBackTransition, customPageTransition };
 //# sourceMappingURL=propbinder-mobile-design.mjs.map