@propbinder/mobile-design 0.3.42 → 0.3.43

package/fesm2022/propbinder-mobile-design.mjs

@@ -686,11 +686,21 @@ class DsMobileSkeletonLoaderComponent {
      * @default 'list'
      */
     variant = input('list', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    /**
+     * Optional max width (e.g. '640px') to constrain the skeleton loader on desktop
+     */
+    maxWidth = input(undefined, ...(ngDevMode ? [{ debugName: "maxWidth" }] : []));
+    /**
+     * If true, centers the skeleton loader horizontally (useful with maxWidth)
+     */
+    centered = input(false, ...(ngDevMode ? [{ debugName: "centered" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileSkeletonLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DsMobileSkeletonLoaderComponent, isStandalone: true, selector: "ds-mobile-skeleton-loader", inputs: { borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DsMobileSkeletonLoaderComponent, isStandalone: true, selector: "ds-mobile-skeleton-loader", inputs: { borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, centered: { classPropertyName: "centered", publicName: "centered", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <div 
       class="skeleton-loader-overlay" 
       [style.border-radius.px]="borderRadius()"
+      [style.max-width]="maxWidth()"
+      [style.margin]="centered() ? '0 auto' : undefined"
       role="status"
       aria-live="polite"
       aria-label="Loading">
@@ -743,7 +753,7 @@ class DsMobileSkeletonLoaderComponent {
         </div>
       }
     </div>
-  `, isInline: true, styles: [":host{display:contents}.skeleton-loader-overlay{position:absolute;inset:0;display:flex;flex-direction:column;z-index:9999;border-radius:inherit;padding:16px;overflow:hidden;pointer-events:none}.skeleton-list{display:flex;flex-direction:column;gap:24px;width:100%}.skeleton-item{display:flex;flex-direction:row;align-items:center;gap:16px;width:100%}.skeleton-avatar{width:48px;height:48px;border-radius:50%;flex-shrink:0}.skeleton-text-container{display:flex;flex-direction:column;gap:10px;flex-grow:1}.skeleton-text-line{height:12px;border-radius:6px;width:100%}.skeleton-text-line.short{width:60%}.skeleton-text-line.full{width:100%}.skeleton-card-list{display:flex;flex-direction:column;gap:16px;width:100%}.skeleton-card{width:100%;height:120px;border-radius:12px}.skeleton-details{display:flex;flex-direction:column;gap:12px;width:100%}.skeleton-title{width:70%;height:24px;border-radius:8px;margin-bottom:16px}.skeleton-box{width:100%;height:200px;border-radius:12px;margin-top:16px}.skeleton-handbook-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:100%}.skeleton-folder-card{display:flex;flex-direction:column;align-items:center;gap:10px}.skeleton-folder-icon{width:100%;aspect-ratio:1;border-radius:16px}.shimmer{background:#f2f4f5;background-image:linear-gradient(90deg,#fff0 0,#fff9 40px,#fff0 80px);background-size:600px 100%;animation:shimmer 1.5s infinite linear}@keyframes shimmer{0%{background-position:-300px 0}to{background-position:300px 0}}body.dark .shimmer,.dark-theme .shimmer{background:#2a2a2a;background-image:linear-gradient(90deg,#fff0 0,#ffffff0d 40px,#fff0 80px)}.pulse{background:#f2f4f5;animation:pulse 2s infinite ease-in-out}@keyframes pulse{0%{background-color:#f2f4f5}50%{background-color:#e6e8ec}to{background-color:#f2f4f5}}body.dark .pulse,.dark-theme .pulse{background:#2a2a2a;animation:pulse-dark 2s infinite ease-in-out}@keyframes pulse-dark{0%{background-color:#2a2a2a}50%{background-color:#383838}to{background-color:#2a2a2a}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+  `, isInline: true, styles: [":host{display:contents}.skeleton-loader-overlay{position:absolute;inset:0;display:flex;flex-direction:column;z-index:9999;border-radius:inherit;padding:20px;overflow:hidden;pointer-events:none;background-color:var(--color-background-neutral-primary)}.skeleton-list{display:flex;flex-direction:column;gap:24px;width:100%}.skeleton-item{display:flex;flex-direction:row;align-items:center;gap:16px;width:100%}.skeleton-avatar{width:48px;height:48px;border-radius:50%;flex-shrink:0}.skeleton-text-container{display:flex;flex-direction:column;gap:10px;flex-grow:1}.skeleton-text-line{height:12px;border-radius:6px;width:100%}.skeleton-text-line.short{width:60%}.skeleton-text-line.full{width:100%}.skeleton-card-list{display:flex;flex-direction:column;gap:16px;width:100%}.skeleton-card{width:100%;height:120px;border-radius:12px}.skeleton-details{display:flex;flex-direction:column;gap:12px;width:100%}.skeleton-title{width:70%;height:24px;border-radius:8px;margin-bottom:16px}.skeleton-box{width:100%;height:200px;border-radius:12px;margin-top:16px}.skeleton-handbook-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:100%}.skeleton-folder-card{display:flex;flex-direction:column;align-items:center;gap:10px}.skeleton-folder-icon{width:100%;aspect-ratio:1;border-radius:16px}.shimmer{background:#f2f4f5;background-image:linear-gradient(90deg,#fff0 0,#fff9 40px,#fff0 80px);background-size:600px 100%;animation:shimmer 1.5s infinite linear}@keyframes shimmer{0%{background-position:-300px 0}to{background-position:300px 0}}body.dark .shimmer,.dark-theme .shimmer{background:#2a2a2a;background-image:linear-gradient(90deg,#fff0 0,#ffffff0d 40px,#fff0 80px)}.pulse{background:#f2f4f5;animation:pulse 2s infinite ease-in-out}@keyframes pulse{0%{background-color:#f2f4f5}50%{background-color:#e6e8ec}to{background-color:#f2f4f5}}body.dark .pulse,.dark-theme .pulse{background:#2a2a2a;animation:pulse-dark 2s infinite ease-in-out}@keyframes pulse-dark{0%{background-color:#2a2a2a}50%{background-color:#383838}to{background-color:#2a2a2a}}@media (min-width: 768px){.skeleton-loader-overlay{padding:32px 0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileSkeletonLoaderComponent, decorators: [{
             type: Component,
@@ -751,6 +761,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
     <div 
       class="skeleton-loader-overlay" 
       [style.border-radius.px]="borderRadius()"
+      [style.max-width]="maxWidth()"
+      [style.margin]="centered() ? '0 auto' : undefined"
       role="status"
       aria-live="polite"
       aria-label="Loading">
@@ -803,8 +815,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         </div>
       }
     </div>
-  `, styles: [":host{display:contents}.skeleton-loader-overlay{position:absolute;inset:0;display:flex;flex-direction:column;z-index:9999;border-radius:inherit;padding:16px;overflow:hidden;pointer-events:none}.skeleton-list{display:flex;flex-direction:column;gap:24px;width:100%}.skeleton-item{display:flex;flex-direction:row;align-items:center;gap:16px;width:100%}.skeleton-avatar{width:48px;height:48px;border-radius:50%;flex-shrink:0}.skeleton-text-container{display:flex;flex-direction:column;gap:10px;flex-grow:1}.skeleton-text-line{height:12px;border-radius:6px;width:100%}.skeleton-text-line.short{width:60%}.skeleton-text-line.full{width:100%}.skeleton-card-list{display:flex;flex-direction:column;gap:16px;width:100%}.skeleton-card{width:100%;height:120px;border-radius:12px}.skeleton-details{display:flex;flex-direction:column;gap:12px;width:100%}.skeleton-title{width:70%;height:24px;border-radius:8px;margin-bottom:16px}.skeleton-box{width:100%;height:200px;border-radius:12px;margin-top:16px}.skeleton-handbook-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:100%}.skeleton-folder-card{display:flex;flex-direction:column;align-items:center;gap:10px}.skeleton-folder-icon{width:100%;aspect-ratio:1;border-radius:16px}.shimmer{background:#f2f4f5;background-image:linear-gradient(90deg,#fff0 0,#fff9 40px,#fff0 80px);background-size:600px 100%;animation:shimmer 1.5s infinite linear}@keyframes shimmer{0%{background-position:-300px 0}to{background-position:300px 0}}body.dark .shimmer,.dark-theme .shimmer{background:#2a2a2a;background-image:linear-gradient(90deg,#fff0 0,#ffffff0d 40px,#fff0 80px)}.pulse{background:#f2f4f5;animation:pulse 2s infinite ease-in-out}@keyframes pulse{0%{background-color:#f2f4f5}50%{background-color:#e6e8ec}to{background-color:#f2f4f5}}body.dark .pulse,.dark-theme .pulse{background:#2a2a2a;animation:pulse-dark 2s infinite ease-in-out}@keyframes pulse-dark{0%{background-color:#2a2a2a}50%{background-color:#383838}to{background-color:#2a2a2a}}\n"] }]
-        }], propDecorators: { borderRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderRadius", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
+  `, styles: [":host{display:contents}.skeleton-loader-overlay{position:absolute;inset:0;display:flex;flex-direction:column;z-index:9999;border-radius:inherit;padding:20px;overflow:hidden;pointer-events:none;background-color:var(--color-background-neutral-primary)}.skeleton-list{display:flex;flex-direction:column;gap:24px;width:100%}.skeleton-item{display:flex;flex-direction:row;align-items:center;gap:16px;width:100%}.skeleton-avatar{width:48px;height:48px;border-radius:50%;flex-shrink:0}.skeleton-text-container{display:flex;flex-direction:column;gap:10px;flex-grow:1}.skeleton-text-line{height:12px;border-radius:6px;width:100%}.skeleton-text-line.short{width:60%}.skeleton-text-line.full{width:100%}.skeleton-card-list{display:flex;flex-direction:column;gap:16px;width:100%}.skeleton-card{width:100%;height:120px;border-radius:12px}.skeleton-details{display:flex;flex-direction:column;gap:12px;width:100%}.skeleton-title{width:70%;height:24px;border-radius:8px;margin-bottom:16px}.skeleton-box{width:100%;height:200px;border-radius:12px;margin-top:16px}.skeleton-handbook-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:100%}.skeleton-folder-card{display:flex;flex-direction:column;align-items:center;gap:10px}.skeleton-folder-icon{width:100%;aspect-ratio:1;border-radius:16px}.shimmer{background:#f2f4f5;background-image:linear-gradient(90deg,#fff0 0,#fff9 40px,#fff0 80px);background-size:600px 100%;animation:shimmer 1.5s infinite linear}@keyframes shimmer{0%{background-position:-300px 0}to{background-position:300px 0}}body.dark .shimmer,.dark-theme .shimmer{background:#2a2a2a;background-image:linear-gradient(90deg,#fff0 0,#ffffff0d 40px,#fff0 80px)}.pulse{background:#f2f4f5;animation:pulse 2s infinite ease-in-out}@keyframes pulse{0%{background-color:#f2f4f5}50%{background-color:#e6e8ec}to{background-color:#f2f4f5}}body.dark .pulse,.dark-theme .pulse{background:#2a2a2a;animation:pulse-dark 2s infinite ease-in-out}@keyframes pulse-dark{0%{background-color:#2a2a2a}50%{background-color:#383838}to{background-color:#2a2a2a}}@media (min-width: 768px){.skeleton-loader-overlay{padding:32px 0}}\n"] }]
+        }], propDecorators: { borderRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderRadius", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], centered: [{ type: i0.Input, args: [{ isSignal: true, alias: "centered", required: false }] }] } });
 
 class DsMobileCountBadgeComponent {
     count = input.required(...(ngDevMode ? [{ debugName: "count" }] : []));
@@ -6305,7 +6317,7 @@ class DsMobilePageMainComponent extends MobilePageBase {
       <!-- Content wrapper -->
       <div class="content-wrapper">
         @if (contentLoading()) {
-          <ds-mobile-skeleton-loader [borderRadius]="24" [variant]="contentLoadingVariant()" />
+          <ds-mobile-skeleton-loader [borderRadius]="24" [variant]="contentLoadingVariant()" maxWidth="640px" [centered]="true" />
         }
 
         <!-- Offline indicator slot (appears at top of content) -->
@@ -6317,7 +6329,7 @@ class DsMobilePageMainComponent extends MobilePageBase {
         </div>
       </div>
     </ion-content>
-  `, isInline: true, styles: [":host{display:flex;flex-direction:column;align-items:center;height:100%;background:var(--color-header-surface);width:100%}:host ion-header{background:var(--color-header-surface);box-shadow:none;height:72px;min-height:72px;margin-top:var(--app-header-top-offset)}:host ion-header ion-toolbar{--background: var(--color-header-surface);--border-width: 0;--box-shadow: none;--padding-top: 0;--padding-bottom: 0;--padding-start: 0;--padding-end: 0;--min-height: 72px;height:72px;min-height:72px;padding:0}@media (min-width: 768px){:host ion-header{height:88px;min-height:88px}:host ion-header ion-toolbar{--min-height: 88px;height:88px;min-height:88px}}@media (min-width: 768px){:host ion-header{display:none;height:auto}}:host .header-main,:host .header-details,.header-details{display:flex;align-items:center;justify-content:space-between;background:var(--color-header-surface);position:relative}:host .header-main__title,:host .header-details .header-title,.header-details .header-title{position:absolute;left:50%;transform:translate(-50%);font-size:var(--font-size-base);font-weight:600;color:var(--color-header-content);margin:0;padding:0;--color: var(--color-header-content)}.header-details .header-title{transform:translate(-50%) translateY(-100%);opacity:0!important;pointer-events:none;transition:transform .2s ease,opacity .2s ease!important}.header-scrolled .header-details .header-title{opacity:1!important;pointer-events:auto;transform:translate(-50%) translateY(0)}:host .header-details .back-button,.header-details .back-button{background:none;border:none;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--color-header-content);transition:opacity var(--transition-duration-fast, .2s) var(--ease-smooth, ease);z-index:10;position:relative}:host .header-details .back-button:hover,.header-details .back-button:hover{opacity:.8}:host .header-details .back-button:active,.header-details .back-button:active{opacity:.6}:host ion-content{--background: var(--color-header-surface);--padding-top: 0;--padding-start: 0;--padding-end: 0;--padding-bottom: 0;border-radius:24px 24px 0 0;overflow:hidden}:host ion-content::part(scroll){display:flex;flex-direction:column;min-height:100%;-webkit-overflow-scrolling:touch}.plt-ios :host ion-content{--background: var(--color-background-neutral-primary)}@media (min-width: 768px){:host ion-content{border-radius:24px 24px 0 0}}:host ion-header[collapse=condense]{display:none}@media (min-width: 768px){:host ion-header[collapse=condense]{display:none}}:host ion-refresher{z-index:0}:host ion-refresher-content{--color: var(--color-header-content)}:host .content-wrapper{width:100%;position:relative;z-index:20;flex:1;display:flex;flex-direction:column;background:var(--color-background-neutral-primary);border-radius:24px 24px 0 0;overflow:visible;transform:translateZ(0);will-change:transform;isolation:isolate;box-shadow:0 300px 0 0 var(--color-background-neutral-primary);padding-top:0;padding-left:var(--content-wrapper-padding, 20px);padding-right:var(--content-wrapper-padding, 20px);padding-bottom:calc(var(--mobile-content-spacing) + var(--mobile-tab-bar-height) + var(--app-safe-bottom, 0px))}:host .content-inner{max-width:640px;margin:0 auto;width:100%}@media (min-width: 768px){:host .content-wrapper{padding-top:0;padding-left:var(--content-wrapper-padding, 20px);padding-right:var(--content-wrapper-padding, 20px)}}:host .header-expandable{background:var(--color-header-surface);padding:32px 20px 24px;color:var(--header-content-color, white);position:sticky;top:0;z-index:5;transition:opacity .1s ease-out,transform .1s ease-out;flex:0 0 auto;min-height:-moz-min-content;min-height:min-content}:host .header-expandable-inner{display:flex;flex-direction:column;gap:20px;max-width:640px;margin:0 auto}:host .header-expandable__text{margin-bottom:0;gap:4px;display:flex;flex-direction:column}:host .header-expandable__title{font-size:var(--font-size-2xl);font-weight:600;color:var(--header-content-color, white);margin:0}:host .header-expandable__subtitle{font-size:var(--font-size-sm);font-weight:400;color:var(--header-content-color, white);opacity:.85;margin:0}@media (min-width: 768px){:host .header-expandable{padding:48px 20px 32px}:host .header-expandable__title{font-size:var(--font-size-3xl)}:host .header-expandable__subtitle{font-size:var(--font-size-base)}}@media (min-width: 992px){:host .header-expandable{padding-left:var(--content-padding-lg);padding-right:var(--content-padding-lg)}}@media (min-width: 1440px){:host .header-expandable{padding-left:var(--content-padding-xl);padding-right:var(--content-padding-xl)}}@media (min-width: 1768px){:host .header-expandable{padding-left:var(--content-padding-2xl);padding-right:var(--content-padding-2xl)}}@media (min-width: 1920px){:host .header-expandable{padding-left:var(--content-padding-3xl);padding-right:var(--content-padding-3xl)}}\n", ".header-main{padding:0 20px;height:72px}.header-main__title{transform:translate(-50%) translateY(-100%);opacity:0;transition:transform .6s ease,opacity .6s ease;padding:0;--color: var(--color-header-content)}.header-scrolled .header-main__title{opacity:1;transform:translate(-50%) translateY(0)}.header-main__actions{display:flex;align-items:center;gap:8px}.header-main__actions ds-avatar{cursor:pointer;-webkit-tap-highlight-color:transparent}@keyframes logoSlideIn{0%{transform:translateY(-200%);scale:.75;opacity:0}to{transform:translateY(0);scale:1;opacity:1}}.logo--first-entry{animation:logoSlideIn .75s var(--spring-curve-bouncy) .7s both}@media (min-width: 768px){.header-main{padding:16px 24px;height:88px}.header-main__title{display:none}}ion-refresher{--color: var(--color-header-content)}ion-refresher-content{--color: var(--color-header-content)}ion-refresher-content::part(spinner){color:var(--color-header-content)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: DsAvatarComponent, selector: "ds-avatar", inputs: ["type", "size", "initials", "src", "alt", "iconName", "iconColor"] }, { kind: "component", type: DsLogoComponent, selector: "ds-logo", inputs: ["variant", "size", "customHeight", "customWidth"] }, { kind: "component", type: DsMobileSkeletonLoaderComponent, selector: "ds-mobile-skeleton-loader", inputs: ["borderRadius", "variant"] }, { kind: "component", type: DsMobileNotificationButtonComponent, selector: "ds-mobile-notification-button", inputs: ["count"], outputs: ["clicked"] }] });
+  `, isInline: true, styles: [":host{display:flex;flex-direction:column;align-items:center;height:100%;background:var(--color-header-surface);width:100%}:host ion-header{background:var(--color-header-surface);box-shadow:none;height:72px;min-height:72px;margin-top:var(--app-header-top-offset)}:host ion-header ion-toolbar{--background: var(--color-header-surface);--border-width: 0;--box-shadow: none;--padding-top: 0;--padding-bottom: 0;--padding-start: 0;--padding-end: 0;--min-height: 72px;height:72px;min-height:72px;padding:0}@media (min-width: 768px){:host ion-header{height:88px;min-height:88px}:host ion-header ion-toolbar{--min-height: 88px;height:88px;min-height:88px}}@media (min-width: 768px){:host ion-header{display:none;height:auto}}:host .header-main,:host .header-details,.header-details{display:flex;align-items:center;justify-content:space-between;background:var(--color-header-surface);position:relative}:host .header-main__title,:host .header-details .header-title,.header-details .header-title{position:absolute;left:50%;transform:translate(-50%);font-size:var(--font-size-base);font-weight:600;color:var(--color-header-content);margin:0;padding:0;--color: var(--color-header-content)}.header-details .header-title{transform:translate(-50%) translateY(-100%);opacity:0!important;pointer-events:none;transition:transform .2s ease,opacity .2s ease!important}.header-scrolled .header-details .header-title{opacity:1!important;pointer-events:auto;transform:translate(-50%) translateY(0)}:host .header-details .back-button,.header-details .back-button{background:none;border:none;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--color-header-content);transition:opacity var(--transition-duration-fast, .2s) var(--ease-smooth, ease);z-index:10;position:relative}:host .header-details .back-button:hover,.header-details .back-button:hover{opacity:.8}:host .header-details .back-button:active,.header-details .back-button:active{opacity:.6}:host ion-content{--background: var(--color-header-surface);--padding-top: 0;--padding-start: 0;--padding-end: 0;--padding-bottom: 0;border-radius:24px 24px 0 0;overflow:hidden}:host ion-content::part(scroll){display:flex;flex-direction:column;min-height:100%;-webkit-overflow-scrolling:touch}.plt-ios :host ion-content{--background: var(--color-background-neutral-primary)}@media (min-width: 768px){:host ion-content{border-radius:24px 24px 0 0}}:host ion-header[collapse=condense]{display:none}@media (min-width: 768px){:host ion-header[collapse=condense]{display:none}}:host ion-refresher{z-index:0}:host ion-refresher-content{--color: var(--color-header-content)}:host .content-wrapper{width:100%;position:relative;z-index:20;flex:1;display:flex;flex-direction:column;background:var(--color-background-neutral-primary);border-radius:24px 24px 0 0;overflow:visible;transform:translateZ(0);will-change:transform;isolation:isolate;box-shadow:0 300px 0 0 var(--color-background-neutral-primary);padding-top:0;padding-left:var(--content-wrapper-padding, 20px);padding-right:var(--content-wrapper-padding, 20px);padding-bottom:calc(var(--mobile-content-spacing) + var(--mobile-tab-bar-height) + var(--app-safe-bottom, 0px))}:host .content-inner{max-width:640px;margin:0 auto;width:100%}@media (min-width: 768px){:host .content-wrapper{padding-top:0;padding-left:var(--content-wrapper-padding, 20px);padding-right:var(--content-wrapper-padding, 20px)}}:host .header-expandable{background:var(--color-header-surface);padding:32px 20px 24px;color:var(--header-content-color, white);position:sticky;top:0;z-index:5;transition:opacity .1s ease-out,transform .1s ease-out;flex:0 0 auto;min-height:-moz-min-content;min-height:min-content}:host .header-expandable-inner{display:flex;flex-direction:column;gap:20px;max-width:640px;margin:0 auto}:host .header-expandable__text{margin-bottom:0;gap:4px;display:flex;flex-direction:column}:host .header-expandable__title{font-size:var(--font-size-2xl);font-weight:600;color:var(--header-content-color, white);margin:0}:host .header-expandable__subtitle{font-size:var(--font-size-sm);font-weight:400;color:var(--header-content-color, white);opacity:.85;margin:0}@media (min-width: 768px){:host .header-expandable{padding:48px 20px 32px}:host .header-expandable__title{font-size:var(--font-size-3xl)}:host .header-expandable__subtitle{font-size:var(--font-size-base)}}@media (min-width: 992px){:host .header-expandable{padding-left:var(--content-padding-lg);padding-right:var(--content-padding-lg)}}@media (min-width: 1440px){:host .header-expandable{padding-left:var(--content-padding-xl);padding-right:var(--content-padding-xl)}}@media (min-width: 1768px){:host .header-expandable{padding-left:var(--content-padding-2xl);padding-right:var(--content-padding-2xl)}}@media (min-width: 1920px){:host .header-expandable{padding-left:var(--content-padding-3xl);padding-right:var(--content-padding-3xl)}}\n", ".header-main{padding:0 20px;height:72px}.header-main__title{transform:translate(-50%) translateY(-100%);opacity:0;transition:transform .6s ease,opacity .6s ease;padding:0;--color: var(--color-header-content)}.header-scrolled .header-main__title{opacity:1;transform:translate(-50%) translateY(0)}.header-main__actions{display:flex;align-items:center;gap:8px}.header-main__actions ds-avatar{cursor:pointer;-webkit-tap-highlight-color:transparent}@keyframes logoSlideIn{0%{transform:translateY(-200%);scale:.75;opacity:0}to{transform:translateY(0);scale:1;opacity:1}}.logo--first-entry{animation:logoSlideIn .75s var(--spring-curve-bouncy) .7s both}@media (min-width: 768px){.header-main{padding:16px 24px;height:88px}.header-main__title{display:none}}ion-refresher{--color: var(--color-header-content)}ion-refresher-content{--color: var(--color-header-content)}ion-refresher-content::part(spinner){color:var(--color-header-content)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: DsAvatarComponent, selector: "ds-avatar", inputs: ["type", "size", "initials", "src", "alt", "iconName", "iconColor"] }, { kind: "component", type: DsLogoComponent, selector: "ds-logo", inputs: ["variant", "size", "customHeight", "customWidth"] }, { kind: "component", type: DsMobileSkeletonLoaderComponent, selector: "ds-mobile-skeleton-loader", inputs: ["borderRadius", "variant", "maxWidth", "centered"] }, { kind: "component", type: DsMobileNotificationButtonComponent, selector: "ds-mobile-notification-button", inputs: ["count"], outputs: ["clicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobilePageMainComponent, decorators: [{
             type: Component,
@@ -6394,7 +6406,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
       <!-- Content wrapper -->
       <div class="content-wrapper">
         @if (contentLoading()) {
-          <ds-mobile-skeleton-loader [borderRadius]="24" [variant]="contentLoadingVariant()" />
+          <ds-mobile-skeleton-loader [borderRadius]="24" [variant]="contentLoadingVariant()" maxWidth="640px" [centered]="true" />
         }
 
         <!-- Offline indicator slot (appears at top of content) -->
@@ -6861,7 +6873,7 @@ class DsMobilePageDetailsComponent extends MobilePageBase {
       <!-- Content wrapper -->
       <div class="content-wrapper">
         @if (contentLoading()) {
-          <ds-mobile-skeleton-loader [borderRadius]="24" [variant]="contentLoadingVariant()" />
+          <ds-mobile-skeleton-loader [borderRadius]="24" [variant]="contentLoadingVariant()" maxWidth="640px" [centered]="true" />
         }
 
         <!-- Offline indicator slot (appears at top of content) -->
@@ -6872,7 +6884,7 @@ class DsMobilePageDetailsComponent extends MobilePageBase {
         </div>
       </div>
     </ion-content>
-  `, isInline: true, styles: [":host{display:flex;flex-direction:column;align-items:center;height:100%;background:var(--color-header-surface);width:100%}:host ion-header{background:var(--color-header-surface);box-shadow:none;height:72px;min-height:72px;margin-top:var(--app-header-top-offset)}:host ion-header ion-toolbar{--background: var(--color-header-surface);--border-width: 0;--box-shadow: none;--padding-top: 0;--padding-bottom: 0;--padding-start: 0;--padding-end: 0;--min-height: 72px;height:72px;min-height:72px;padding:0}@media (min-width: 768px){:host ion-header{height:88px;min-height:88px}:host ion-header ion-toolbar{--min-height: 88px;height:88px;min-height:88px}}@media (min-width: 768px){:host ion-header{display:none;height:auto}}:host .header-main,:host .header-details,.header-details{display:flex;align-items:center;justify-content:space-between;background:var(--color-header-surface);position:relative}:host .header-main__title,:host .header-details .header-title,.header-details .header-title{position:absolute;left:50%;transform:translate(-50%);font-size:var(--font-size-base);font-weight:600;color:var(--color-header-content);margin:0;padding:0;--color: var(--color-header-content)}.header-details .header-title{transform:translate(-50%) translateY(-100%);opacity:0!important;pointer-events:none;transition:transform .2s ease,opacity .2s ease!important}.header-scrolled .header-details .header-title{opacity:1!important;pointer-events:auto;transform:translate(-50%) translateY(0)}:host .header-details .back-button,.header-details .back-button{background:none;border:none;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--color-header-content);transition:opacity var(--transition-duration-fast, .2s) var(--ease-smooth, ease);z-index:10;position:relative}:host .header-details .back-button:hover,.header-details .back-button:hover{opacity:.8}:host .header-details .back-button:active,.header-details .back-button:active{opacity:.6}:host ion-content{--background: var(--color-header-surface);--padding-top: 0;--padding-start: 0;--padding-end: 0;--padding-bottom: 0;border-radius:24px 24px 0 0;overflow:hidden}:host ion-content::part(scroll){display:flex;flex-direction:column;min-height:100%;-webkit-overflow-scrolling:touch}.plt-ios :host ion-content{--background: var(--color-background-neutral-primary)}@media (min-width: 768px){:host ion-content{border-radius:24px 24px 0 0}}:host ion-header[collapse=condense]{display:none}@media (min-width: 768px){:host ion-header[collapse=condense]{display:none}}:host ion-refresher{z-index:0}:host ion-refresher-content{--color: var(--color-header-content)}:host .content-wrapper{width:100%;position:relative;z-index:20;flex:1;display:flex;flex-direction:column;background:var(--color-background-neutral-primary);border-radius:24px 24px 0 0;overflow:visible;transform:translateZ(0);will-change:transform;isolation:isolate;box-shadow:0 300px 0 0 var(--color-background-neutral-primary);padding-top:0;padding-left:var(--content-wrapper-padding, 20px);padding-right:var(--content-wrapper-padding, 20px);padding-bottom:calc(var(--mobile-content-spacing) + var(--mobile-tab-bar-height) + var(--app-safe-bottom, 0px))}:host .content-inner{max-width:640px;margin:0 auto;width:100%}@media (min-width: 768px){:host .content-wrapper{padding-top:0;padding-left:var(--content-wrapper-padding, 20px);padding-right:var(--content-wrapper-padding, 20px)}}:host .header-expandable{background:var(--color-header-surface);padding:32px 20px 24px;color:var(--header-content-color, white);position:sticky;top:0;z-index:5;transition:opacity .1s ease-out,transform .1s ease-out;flex:0 0 auto;min-height:-moz-min-content;min-height:min-content}:host .header-expandable-inner{display:flex;flex-direction:column;gap:20px;max-width:640px;margin:0 auto}:host .header-expandable__text{margin-bottom:0;gap:4px;display:flex;flex-direction:column}:host .header-expandable__title{font-size:var(--font-size-2xl);font-weight:600;color:var(--header-content-color, white);margin:0}:host .header-expandable__subtitle{font-size:var(--font-size-sm);font-weight:400;color:var(--header-content-color, white);opacity:.85;margin:0}@media (min-width: 768px){:host .header-expandable{padding:48px 20px 32px}:host .header-expandable__title{font-size:var(--font-size-3xl)}:host .header-expandable__subtitle{font-size:var(--font-size-base)}}@media (min-width: 992px){:host .header-expandable{padding-left:var(--content-padding-lg);padding-right:var(--content-padding-lg)}}@media (min-width: 1440px){:host .header-expandable{padding-left:var(--content-padding-xl);padding-right:var(--content-padding-xl)}}@media (min-width: 1768px){:host .header-expandable{padding-left:var(--content-padding-2xl);padding-right:var(--content-padding-2xl)}}@media (min-width: 1920px){:host .header-expandable{padding-left:var(--content-padding-3xl);padding-right:var(--content-padding-3xl)}}\n", "ion-refresher{--color: var(--color-header-content)}ion-refresher-content{--color: var(--color-header-content)}ion-refresher-content::part(spinner){color:var(--color-header-content)}.header-details{gap:12px;padding:0 20px;height:72px;min-height:72px}:host .header-details .back-button{width:36px;height:36px;border-radius:50%;background:color-mix(in srgb,var(--color-header-content) 10%,transparent)!important;flex-shrink:0;border:none;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--color-header-content);transition:background var(--transition-duration-fast) var(--ease-smooth);z-index:10}:host .header-details .back-button:hover{background:color-mix(in srgb,var(--color-header-content) 16%,transparent)!important}:host .header-details .back-button:active{background:color-mix(in srgb,var(--color-header-content) 22%,transparent)!important}.header-details .header-title{left:64px}@media (min-width: 768px){ion-header{display:block!important;height:88px;min-height:88px}ion-header ion-toolbar{--min-height: 88px;height:88px;min-height:88px}.header-details{padding:16px 24px;height:88px;min-height:88px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }, { kind: "component", type: DsMobileSkeletonLoaderComponent, selector: "ds-mobile-skeleton-loader", inputs: ["borderRadius", "variant"] }, { kind: "component", type: DsMobileInlineTabsComponent, selector: "ds-mobile-inline-tabs", inputs: ["tabs", "activeTab"], outputs: ["tabChange"] }] });
+  `, isInline: true, styles: [":host{display:flex;flex-direction:column;align-items:center;height:100%;background:var(--color-header-surface);width:100%}:host ion-header{background:var(--color-header-surface);box-shadow:none;height:72px;min-height:72px;margin-top:var(--app-header-top-offset)}:host ion-header ion-toolbar{--background: var(--color-header-surface);--border-width: 0;--box-shadow: none;--padding-top: 0;--padding-bottom: 0;--padding-start: 0;--padding-end: 0;--min-height: 72px;height:72px;min-height:72px;padding:0}@media (min-width: 768px){:host ion-header{height:88px;min-height:88px}:host ion-header ion-toolbar{--min-height: 88px;height:88px;min-height:88px}}@media (min-width: 768px){:host ion-header{display:none;height:auto}}:host .header-main,:host .header-details,.header-details{display:flex;align-items:center;justify-content:space-between;background:var(--color-header-surface);position:relative}:host .header-main__title,:host .header-details .header-title,.header-details .header-title{position:absolute;left:50%;transform:translate(-50%);font-size:var(--font-size-base);font-weight:600;color:var(--color-header-content);margin:0;padding:0;--color: var(--color-header-content)}.header-details .header-title{transform:translate(-50%) translateY(-100%);opacity:0!important;pointer-events:none;transition:transform .2s ease,opacity .2s ease!important}.header-scrolled .header-details .header-title{opacity:1!important;pointer-events:auto;transform:translate(-50%) translateY(0)}:host .header-details .back-button,.header-details .back-button{background:none;border:none;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--color-header-content);transition:opacity var(--transition-duration-fast, .2s) var(--ease-smooth, ease);z-index:10;position:relative}:host .header-details .back-button:hover,.header-details .back-button:hover{opacity:.8}:host .header-details .back-button:active,.header-details .back-button:active{opacity:.6}:host ion-content{--background: var(--color-header-surface);--padding-top: 0;--padding-start: 0;--padding-end: 0;--padding-bottom: 0;border-radius:24px 24px 0 0;overflow:hidden}:host ion-content::part(scroll){display:flex;flex-direction:column;min-height:100%;-webkit-overflow-scrolling:touch}.plt-ios :host ion-content{--background: var(--color-background-neutral-primary)}@media (min-width: 768px){:host ion-content{border-radius:24px 24px 0 0}}:host ion-header[collapse=condense]{display:none}@media (min-width: 768px){:host ion-header[collapse=condense]{display:none}}:host ion-refresher{z-index:0}:host ion-refresher-content{--color: var(--color-header-content)}:host .content-wrapper{width:100%;position:relative;z-index:20;flex:1;display:flex;flex-direction:column;background:var(--color-background-neutral-primary);border-radius:24px 24px 0 0;overflow:visible;transform:translateZ(0);will-change:transform;isolation:isolate;box-shadow:0 300px 0 0 var(--color-background-neutral-primary);padding-top:0;padding-left:var(--content-wrapper-padding, 20px);padding-right:var(--content-wrapper-padding, 20px);padding-bottom:calc(var(--mobile-content-spacing) + var(--mobile-tab-bar-height) + var(--app-safe-bottom, 0px))}:host .content-inner{max-width:640px;margin:0 auto;width:100%}@media (min-width: 768px){:host .content-wrapper{padding-top:0;padding-left:var(--content-wrapper-padding, 20px);padding-right:var(--content-wrapper-padding, 20px)}}:host .header-expandable{background:var(--color-header-surface);padding:32px 20px 24px;color:var(--header-content-color, white);position:sticky;top:0;z-index:5;transition:opacity .1s ease-out,transform .1s ease-out;flex:0 0 auto;min-height:-moz-min-content;min-height:min-content}:host .header-expandable-inner{display:flex;flex-direction:column;gap:20px;max-width:640px;margin:0 auto}:host .header-expandable__text{margin-bottom:0;gap:4px;display:flex;flex-direction:column}:host .header-expandable__title{font-size:var(--font-size-2xl);font-weight:600;color:var(--header-content-color, white);margin:0}:host .header-expandable__subtitle{font-size:var(--font-size-sm);font-weight:400;color:var(--header-content-color, white);opacity:.85;margin:0}@media (min-width: 768px){:host .header-expandable{padding:48px 20px 32px}:host .header-expandable__title{font-size:var(--font-size-3xl)}:host .header-expandable__subtitle{font-size:var(--font-size-base)}}@media (min-width: 992px){:host .header-expandable{padding-left:var(--content-padding-lg);padding-right:var(--content-padding-lg)}}@media (min-width: 1440px){:host .header-expandable{padding-left:var(--content-padding-xl);padding-right:var(--content-padding-xl)}}@media (min-width: 1768px){:host .header-expandable{padding-left:var(--content-padding-2xl);padding-right:var(--content-padding-2xl)}}@media (min-width: 1920px){:host .header-expandable{padding-left:var(--content-padding-3xl);padding-right:var(--content-padding-3xl)}}\n", "ion-refresher{--color: var(--color-header-content)}ion-refresher-content{--color: var(--color-header-content)}ion-refresher-content::part(spinner){color:var(--color-header-content)}.header-details{gap:12px;padding:0 20px;height:72px;min-height:72px}:host .header-details .back-button{width:36px;height:36px;border-radius:50%;background:color-mix(in srgb,var(--color-header-content) 10%,transparent)!important;flex-shrink:0;border:none;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--color-header-content);transition:background var(--transition-duration-fast) var(--ease-smooth);z-index:10}:host .header-details .back-button:hover{background:color-mix(in srgb,var(--color-header-content) 16%,transparent)!important}:host .header-details .back-button:active{background:color-mix(in srgb,var(--color-header-content) 22%,transparent)!important}.header-details .header-title{left:64px}@media (min-width: 768px){ion-header{display:block!important;height:88px;min-height:88px}ion-header ion-toolbar{--min-height: 88px;height:88px;min-height:88px}.header-details{padding:16px 24px;height:88px;min-height:88px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }, { kind: "component", type: DsMobileSkeletonLoaderComponent, selector: "ds-mobile-skeleton-loader", inputs: ["borderRadius", "variant", "maxWidth", "centered"] }, { kind: "component", type: DsMobileInlineTabsComponent, selector: "ds-mobile-inline-tabs", inputs: ["tabs", "activeTab"], outputs: ["tabChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobilePageDetailsComponent, decorators: [{
             type: Component,
@@ -6954,7 +6966,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
       <!-- Content wrapper -->
       <div class="content-wrapper">
         @if (contentLoading()) {
-          <ds-mobile-skeleton-loader [borderRadius]="24" [variant]="contentLoadingVariant()" />
+          <ds-mobile-skeleton-loader [borderRadius]="24" [variant]="contentLoadingVariant()" maxWidth="640px" [centered]="true" />
         }
 
         <!-- Offline indicator slot (appears at top of content) -->
@@ -7207,7 +7219,7 @@ class DsMobileSectionComponent {
         <ng-content />
       </div>
     </section>
-  `, isInline: true, styles: [":host{display:block;width:100%;border-bottom:1px solid transparent;transition:border-color .2s ease}:host(.has-border){border-bottom-color:var(--border-color-default)}:host(.has-border):last-child{border-bottom-color:transparent}.section{width:100%;display:flex;flex-direction:column;padding:var(--section-padding, 20px);gap:var(--section-gap, 12px);overflow:var(--section-overflow)}@media (min-width: 768px){.section{padding:var(--section-padding-desktop, var(--section-padding, 32px))}ds-mobile-page-main :host .section,ds-mobile-page-details :host .section{padding-left:0;padding-right:0}}.section-header{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:24px}.section-headline{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;color:var(--text-color-default-primary);margin:0;padding:0;letter-spacing:-.2px;display:flex;align-items:center;gap:6px;line-height:1.4}.section-link{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:500;color:var(--color-accent, #5d5fef);text-decoration:none;cursor:pointer;white-space:nowrap;transition:opacity .2s ease;-webkit-tap-highlight-color:transparent;display:flex;align-items:center;gap:2px;line-height:1;-webkit-user-select:none;user-select:none}.section-link:hover{opacity:.8}.section-link:active{opacity:.6}.section-content{display:flex;flex-direction:column;gap:var(--section-content-gap)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }] });
+  `, isInline: true, styles: [":host{display:block;width:100%;border-bottom:1px solid transparent;transition:border-color .2s ease}:host(.has-border){border-bottom-color:var(--border-color-default)}:host(.has-border):last-child{border-bottom-color:transparent}.section{width:100%;display:flex;flex-direction:column;padding:var(--section-padding, 20px);gap:var(--section-gap, 12px);overflow:var(--section-overflow)}@media (min-width: 768px){.section{padding:var(--section-padding-desktop, var(--section-padding, 32px))}:host-context(ds-mobile-page-main) .section,:host-context(ds-mobile-page-details) .section{padding-left:0;padding-right:0}}.section-header{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:24px}.section-headline{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;color:var(--text-color-default-primary);margin:0;padding:0;letter-spacing:-.2px;display:flex;align-items:center;gap:6px;line-height:1.4}.section-link{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:500;color:var(--color-accent, #5d5fef);text-decoration:none;cursor:pointer;white-space:nowrap;transition:opacity .2s ease;-webkit-tap-highlight-color:transparent;display:flex;align-items:center;gap:2px;line-height:1;-webkit-user-select:none;user-select:none}.section-link:hover{opacity:.8}.section-link:active{opacity:.6}.section-content{display:flex;flex-direction:column;gap:var(--section-content-gap)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileSectionComponent, decorators: [{
             type: Component,
@@ -7239,7 +7251,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         <ng-content />
       </div>
     </section>
-  `, styles: [":host{display:block;width:100%;border-bottom:1px solid transparent;transition:border-color .2s ease}:host(.has-border){border-bottom-color:var(--border-color-default)}:host(.has-border):last-child{border-bottom-color:transparent}.section{width:100%;display:flex;flex-direction:column;padding:var(--section-padding, 20px);gap:var(--section-gap, 12px);overflow:var(--section-overflow)}@media (min-width: 768px){.section{padding:var(--section-padding-desktop, var(--section-padding, 32px))}ds-mobile-page-main :host .section,ds-mobile-page-details :host .section{padding-left:0;padding-right:0}}.section-header{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:24px}.section-headline{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;color:var(--text-color-default-primary);margin:0;padding:0;letter-spacing:-.2px;display:flex;align-items:center;gap:6px;line-height:1.4}.section-link{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:500;color:var(--color-accent, #5d5fef);text-decoration:none;cursor:pointer;white-space:nowrap;transition:opacity .2s ease;-webkit-tap-highlight-color:transparent;display:flex;align-items:center;gap:2px;line-height:1;-webkit-user-select:none;user-select:none}.section-link:hover{opacity:.8}.section-link:active{opacity:.6}.section-content{display:flex;flex-direction:column;gap:var(--section-content-gap)}\n"] }]
+  `, styles: [":host{display:block;width:100%;border-bottom:1px solid transparent;transition:border-color .2s ease}:host(.has-border){border-bottom-color:var(--border-color-default)}:host(.has-border):last-child{border-bottom-color:transparent}.section{width:100%;display:flex;flex-direction:column;padding:var(--section-padding, 20px);gap:var(--section-gap, 12px);overflow:var(--section-overflow)}@media (min-width: 768px){.section{padding:var(--section-padding-desktop, var(--section-padding, 32px))}:host-context(ds-mobile-page-main) .section,:host-context(ds-mobile-page-details) .section{padding-left:0;padding-right:0}}.section-header{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:24px}.section-headline{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;color:var(--text-color-default-primary);margin:0;padding:0;letter-spacing:-.2px;display:flex;align-items:center;gap:6px;line-height:1.4}.section-link{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:500;color:var(--color-accent, #5d5fef);text-decoration:none;cursor:pointer;white-space:nowrap;transition:opacity .2s ease;-webkit-tap-highlight-color:transparent;display:flex;align-items:center;gap:2px;line-height:1;-webkit-user-select:none;user-select:none}.section-link:hover{opacity:.8}.section-link:active{opacity:.6}.section-content{display:flex;flex-direction:column;gap:var(--section-content-gap)}\n"] }]
         }], propDecorators: { headline: [{ type: i0.Input, args: [{ isSignal: true, alias: "headline", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], linkText: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkText", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], paddingDesktop: [{ type: i0.Input, args: [{ isSignal: true, alias: "paddingDesktop", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], contentGap: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentGap", required: false }] }], showBorder: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBorder", required: false }] }], overflow: [{ type: i0.Input, args: [{ isSignal: true, alias: "overflow", required: false }] }], linkClick: [{ type: i0.Output, args: ["linkClick"] }] } });
 
 /**
@@ -31221,7 +31233,7 @@ class MobileCommunityPageComponent {
     pinnedPosts = computed(() => {
         // Get all posts that are explicitly marked as pinned
         const allPosts = this.postsService.posts();
-        return allPosts.filter(post => post.isPinned === true);
+        return allPosts.filter((post) => post.isPinned === true);
     }, ...(ngDevMode ? [{ debugName: "pinnedPosts" }] : []));
     // Computed to check if there are any posts to display
     hasAnyPosts = computed(() => {
@@ -31239,7 +31251,13 @@ class MobileCommunityPageComponent {
         this.postModal = postModal;
         this.userService = userService;
         this.postsService = postsService;
+        // Vis skeleton loader med en random delay mellem 0 og 2000 ms
+        const randomTimeout = Math.floor(Math.random() * 2000);
+        setTimeout(() => {
+            this.isLoading.set(false);
+        }, randomTimeout);
     }
+    isLoading = signal(true, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
     /**
      * Handle infinite scroll event
      * Loads more posts when user scrolls to bottom
@@ -31290,11 +31308,11 @@ class MobileCommunityPageComponent {
                 ...post,
                 postId: post.id,
                 avatarType: post.avatarType === 'icon' ? undefined : post.avatarType,
-                focusComment
+                focusComment,
             };
             await this.postModal.open(postData, {
                 currentUserName: 'Lars Mikkelsen', // Current user name
-                currentUserInitials: this.userService.avatarInitials()
+                currentUserInitials: this.userService.avatarInitials(),
             });
         }
     }
@@ -31305,11 +31323,11 @@ class MobileCommunityPageComponent {
             component: DsMobilePostCreateBottomSheetComponent,
             componentProps: {
                 // This helps the component know it should auto-focus
-                autoFocus: true
+                autoFocus: true,
             },
             breakpoints: [0, 0.95, 1],
             initialBreakpoint: 0.95,
-            handle: true
+            handle: true,
         });
         // Handle the result when the sheet is dismissed
         const result = await sheet.onWillDismiss();
@@ -31330,7 +31348,7 @@ class MobileCommunityPageComponent {
                 isLiked: false,
                 likeCount: 0,
                 commentCount: 0,
-                comments: []
+                comments: [],
             };
             // Add to the beginning of the posts array via service
             this.postsService.addPost(newPost);
@@ -31348,7 +31366,7 @@ class MobileCommunityPageComponent {
             name: 'Sophie Andersen',
             role: 'Lejer',
             avatarInitials: 'SA',
-            timestamp: '4t siden'
+            timestamp: '4t siden',
         };
         // Open the lightbox with the image
         await this.lightbox.open({
@@ -31361,14 +31379,14 @@ class MobileCommunityPageComponent {
                     description: description,
                     isLiked: true,
                     likeCount: 156,
-                    commentCount: 34
-                }
+                    commentCount: 34,
+                },
             ],
             author: authorMeta,
             enableZoom: true,
             showControls: false, // Single image, no need for controls
             showActions: true, // Show like & comment actions
-            showInfo: true
+            showInfo: true,
         });
     }
     async openHouseRulesPdf() {
@@ -31378,7 +31396,7 @@ class MobileCommunityPageComponent {
             name: 'Karen Nielsen',
             role: 'Ejendomsadministrator',
             avatarInitials: 'KN',
-            timestamp: '2d siden'
+            timestamp: '2d siden',
         };
         // Open the PDF lightbox
         // Use absolute path for production deployment (Vercel, etc.)
@@ -31389,9 +31407,9 @@ class MobileCommunityPageComponent {
                 title: 'House Rules',
                 description: 'Building regulations and community guidelines',
                 fileSize: 250880, // 245 KB in bytes
-                pageCount: 8
+                pageCount: 8,
             },
-            author: authorMeta
+            author: authorMeta,
         });
     }
     /**
@@ -31402,13 +31420,13 @@ class MobileCommunityPageComponent {
         const sheet = await this.bottomSheet.create({
             component: DsMobileActionsBottomSheetComponent,
             componentProps: {
-                isOwnContent: isOwnPost
+                isOwnContent: isOwnPost,
             },
             breakpoints: [0, 1],
             initialBreakpoint: 1,
             handle: true,
             backdropDismiss: true,
-            cssClass: 'auto-height'
+            cssClass: 'auto-height',
         });
         const result = await sheet.onWillDismiss();
         if (result.role === 'select' && result.data) {
@@ -31429,13 +31447,13 @@ class MobileCommunityPageComponent {
                             autoFocus: true,
                             isEditMode: true,
                             postId: postId,
-                            initialContent: post.content
+                            initialContent: post.content,
                         },
                         breakpoints: [0, 0.95, 1],
                         initialBreakpoint: 0.95,
                         handle: true,
                         backdropBlur: true,
-                        backdropOpacity: 0.6
+                        backdropOpacity: 0.6,
                     });
                     // Handle the result when the sheet is dismissed
                     const editResult = await editSheet.onWillDismiss();
@@ -31444,7 +31462,7 @@ class MobileCommunityPageComponent {
                         // Update the post via service
                         this.postsService.updatePost(postId, {
                             content: editResult.data.content,
-                            timestamp: 'Lige nu'
+                            timestamp: 'Lige nu',
                         });
                     }
                     break;
@@ -31461,7 +31479,7 @@ class MobileCommunityPageComponent {
                     if (likePost) {
                         this.postsService.updatePost(postId, {
                             isLiked: !likePost.isLiked,
-                            likeCount: likePost.isLiked ? likePost.likeCount - 1 : likePost.likeCount + 1
+                            likeCount: likePost.isLiked ? likePost.likeCount - 1 : likePost.likeCount + 1,
                         });
                     }
                     break;
@@ -31505,18 +31523,16 @@ class MobileCommunityPageComponent {
       [notificationCount]="notificationService.unreadCount()"
       [avatarInitials]="userService.avatarInitials()"
       [avatarType]="userService.avatarType()"
+      [contentLoading]="isLoading()"
+      [contentLoadingVariant]="'card'"
       (notificationClick)="handleNotificationClick()"
-      (refresh)="handleRefresh($event)">
-      
+      (refresh)="handleRefresh($event)"
+    >
       <!-- Offline indicator -->
       @if (pageComponent.isOffline()) {
-        <ds-mobile-offline-banner 
-          offline-indicator
-          title="Ingen internetforbindelse"
-          message="Nogle funktioner kan være utilgængelige">
-        </ds-mobile-offline-banner>
+        <ds-mobile-offline-banner offline-indicator title="Ingen internetforbindelse" message="Nogle funktioner kan være utilgængelige"> </ds-mobile-offline-banner>
       }
-      
+
       <!-- Post Composer in header-expandable -->
       <ds-mobile-post-composer
         header-content
@@ -31525,21 +31541,20 @@ class MobileCommunityPageComponent {
         [avatarSrc]="userService.avatarSrc()"
         (composerClick)="openPostCreator()"
       />
-      
+
       <!-- Pinned Posts Section -->
-      <ds-mobile-section 
-        headline="Fastgjorte opslag"
-        icon="remixPushpinFill">
+      <ds-mobile-section headline="Fastgjorte opslag" icon="remixPushpinFill">
         <div class="pinned-posts-swiper-wrapper">
-          <ds-mobile-swiper 
+          <ds-mobile-swiper
             #pinnedSwiper
             class="pinned-posts-swiper"
-            [slideWidth]="'100%'" 
+            [slideWidth]="'100%'"
             [gap]="32"
             [pagination]="true"
             [autoHeight]="true"
             [progressiveOpacity]="true"
-            [progressiveScale]="true">
+            [progressiveScale]="true"
+          >
             @for (post of pinnedPosts(); track post.id) {
               <div class="swiper-slide">
                 <ds-mobile-interactive-list-item-post
@@ -31555,24 +31570,19 @@ class MobileCommunityPageComponent {
                   [moreActions]="true"
                   (postClick)="openPost(post.id)"
                   (commentClick)="openPost(post.id, true)"
-                  (longPress)="handlePostLongPress(post.id, false)">
-                  
+                  (longPress)="handlePostLongPress(post.id, false)"
+                >
                   <post-content>
                     <post-text>{{ post.content }}</post-text>
-                    
+
                     @if (post.id === 'post-4') {
                       <post-attachments>
-                        <ds-mobile-card-inline-file
-                          [fileName]="'Husregler.pdf'"
-                          [fileSize]="'245 KB'"
-                          [variant]="'pdf'"
-                          [layout]="'compact'"
-                          (fileClick)="openHouseRulesPdf()">
+                        <ds-mobile-card-inline-file [fileName]="'Husregler.pdf'" [fileSize]="'245 KB'" [variant]="'pdf'" [layout]="'compact'" (fileClick)="openHouseRulesPdf()">
                         </ds-mobile-card-inline-file>
                       </post-attachments>
                     }
                   </post-content>
-                  
+
                   <post-actions>
                     <action-like [count]="post.likeCount" [active]="post.isLiked" />
                     <action-comment [count]="post.commentCount" (commentClick)="openPost(post.id, true)" />
@@ -31581,7 +31591,7 @@ class MobileCommunityPageComponent {
               </div>
             }
           </ds-mobile-swiper>
-          
+
           <!-- Navigation Buttons -->
           <div class="swiper-nav-buttons">
             <ds-icon-button
@@ -31605,159 +31615,144 @@ class MobileCommunityPageComponent {
           </div>
         </div>
       </ds-mobile-section>
-      
+
       <!-- All Posts Section -->
-      <ds-mobile-section
-        headline="Alle opslag">
+      <ds-mobile-section headline="Alle opslag">
         @if (hasAnyPosts()) {
           <div class="post-list-wrapper">
             <!-- All Posts Loop -->
             @for (post of allPosts(); track post.id) {
-                @if (post.hasInlinePhotos && post.id === 'post-2') {
-                  <!-- Post 2: With multiple images (grid layout) -->
-                  <ds-mobile-interactive-list-item-post
-                    [authorName]="post.authorName"
-                    [authorRole]="post.authorRole"
-                    [timestamp]="post.timestamp"
-                    [avatarInitials]="post.avatarInitials || ''"
-                    [avatarType]="post.avatarType"
-                    [clickable]="true"
-                    [moreActions]="true"
-                    (postClick)="openPost(post.id)"
-                    (commentClick)="openPost(post.id, true)"
-                    (longPress)="handlePostLongPress(post.id, post.authorRole === 'Dig')">
-                    
-                    <post-content>
-                      <post-text>{{ post.content }}</post-text>
-                      <ds-mobile-inline-photo
-                        [images]="[
-                          '/assets/Dummy-photos/balcony-view.jpg',
-                          '/assets/Dummy-photos/staircase.jpg',
-                          '/assets/Dummy-photos/park.jpg',
-                          '/assets/Dummy-photos/yard.jpg'
-                        ]"
-                        [author]="{
-                          name: 'Sophie Andersen',
-                          role: 'Lejer',
-                          avatarInitials: 'SA',
-                          avatarType: 'initials',
-                          timestamp: '4t siden'
-                        }"
-                      />
-                    </post-content>
-                    
-                    <post-actions>
-                      <action-like [active]="post.isLiked" [count]="post.likeCount" />
-                      <action-comment [count]="post.commentCount" (commentClick)="openPost(post.id, true)" />
-                    </post-actions>
-                  </ds-mobile-interactive-list-item-post>
-                } @else if (post.hasInlinePhotos && post.id === 'post-3.5') {
-                  <!-- Post 3.5: Property Manager showcase with 6+ photos -->
-                  <ds-mobile-interactive-list-item-post
-                    [authorName]="post.authorName"
-                    [authorRole]="post.authorRole"
-                    [timestamp]="post.timestamp"
-                    [avatarInitials]="post.avatarInitials || ''"
-                    [avatarType]="post.avatarType"
-                    [showBadge]="post.showBadge || false"
-                    [clickable]="true"
-                    [moreActions]="true"
-                    (postClick)="openPost(post.id)"
-                    (commentClick)="openPost(post.id, true)"
-                    (longPress)="handlePostLongPress(post.id, false)">
-                    
-                    <post-content>
+              @if (post.hasInlinePhotos && post.id === 'post-2') {
+                <!-- Post 2: With multiple images (grid layout) -->
+                <ds-mobile-interactive-list-item-post
+                  [authorName]="post.authorName"
+                  [authorRole]="post.authorRole"
+                  [timestamp]="post.timestamp"
+                  [avatarInitials]="post.avatarInitials || ''"
+                  [avatarType]="post.avatarType"
+                  [clickable]="true"
+                  [moreActions]="true"
+                  (postClick)="openPost(post.id)"
+                  (commentClick)="openPost(post.id, true)"
+                  (longPress)="handlePostLongPress(post.id, post.authorRole === 'Dig')"
+                >
+                  <post-content>
+                    <post-text>{{ post.content }}</post-text>
+                    <ds-mobile-inline-photo
+                      [images]="['/assets/Dummy-photos/balcony-view.jpg', '/assets/Dummy-photos/staircase.jpg', '/assets/Dummy-photos/park.jpg', '/assets/Dummy-photos/yard.jpg']"
+                      [author]="{
+                        name: 'Sophie Andersen',
+                        role: 'Lejer',
+                        avatarInitials: 'SA',
+                        avatarType: 'initials',
+                        timestamp: '4t siden',
+                      }"
+                    />
+                  </post-content>
+
+                  <post-actions>
+                    <action-like [active]="post.isLiked" [count]="post.likeCount" />
+                    <action-comment [count]="post.commentCount" (commentClick)="openPost(post.id, true)" />
+                  </post-actions>
+                </ds-mobile-interactive-list-item-post>
+              } @else if (post.hasInlinePhotos && post.id === 'post-3.5') {
+                <!-- Post 3.5: Property Manager showcase with 6+ photos -->
+                <ds-mobile-interactive-list-item-post
+                  [authorName]="post.authorName"
+                  [authorRole]="post.authorRole"
+                  [timestamp]="post.timestamp"
+                  [avatarInitials]="post.avatarInitials || ''"
+                  [avatarType]="post.avatarType"
+                  [showBadge]="post.showBadge || false"
+                  [clickable]="true"
+                  [moreActions]="true"
+                  (postClick)="openPost(post.id)"
+                  (commentClick)="openPost(post.id, true)"
+                  (longPress)="handlePostLongPress(post.id, false)"
+                >
+                  <post-content>
+                    <post-text>{{ post.content }}</post-text>
+                    <ds-mobile-inline-photo
+                      [images]="[
+                        '/assets/Dummy-photos/mailboxes.jpg',
+                        '/assets/Dummy-photos/staircase.jpg',
+                        '/assets/Dummy-photos/yard.jpg',
+                        '/assets/Dummy-photos/park.jpg',
+                        '/assets/Dummy-photos/balcony-view.jpg',
+                        '/assets/Dummy-photos/handyman.jpg',
+                      ]"
+                      [author]="{
+                        name: 'Karen Nielsen',
+                        role: 'Ejendomsadministrator',
+                        avatarInitials: 'KN',
+                        avatarType: 'initials',
+                        timestamp: '2d siden',
+                      }"
+                      [maxVisible]="5"
+                    />
+                  </post-content>
+
+                  <post-actions>
+                    <action-like [count]="post.likeCount" />
+                    <action-comment [count]="post.commentCount" (commentClick)="openPost(post.id, true)" />
+                  </post-actions>
+                </ds-mobile-interactive-list-item-post>
+              } @else {
+                <!-- Regular Post -->
+                <ds-mobile-interactive-list-item-post
+                  [authorName]="post.authorName"
+                  [authorRole]="post.authorRole"
+                  [timestamp]="post.timestamp"
+                  [avatarType]="post.avatarType"
+                  [avatarSrc]="post.avatarSrc || ''"
+                  [avatarInitials]="post.avatarInitials || ''"
+                  [clickable]="true"
+                  [moreActions]="true"
+                  (postClick)="openPost(post.id)"
+                  (commentClick)="openPost(post.id, true)"
+                  (longPress)="handlePostLongPress(post.id, post.authorRole === 'Dig')"
+                >
+                  <post-content>
+                    @if (post.content) {
                       <post-text>{{ post.content }}</post-text>
-                      <ds-mobile-inline-photo
-                        [images]="[
-                          '/assets/Dummy-photos/mailboxes.jpg',
-                          '/assets/Dummy-photos/staircase.jpg',
-                          '/assets/Dummy-photos/yard.jpg',
-                          '/assets/Dummy-photos/park.jpg',
-                          '/assets/Dummy-photos/balcony-view.jpg',
-                          '/assets/Dummy-photos/handyman.jpg'
-                        ]"
-                        [author]="{
-                          name: 'Karen Nielsen',
-                          role: 'Ejendomsadministrator',
-                          avatarInitials: 'KN',
-                          avatarType: 'initials',
-                          timestamp: '2d siden'
-                        }"
-                        [maxVisible]="5"
-                      />
-                    </post-content>
-                    
-                    <post-actions>
-                      <action-like [count]="post.likeCount" />
-                      <action-comment [count]="post.commentCount" (commentClick)="openPost(post.id, true)" />
-                    </post-actions>
-                  </ds-mobile-interactive-list-item-post>
-                } @else {
-                  <!-- Regular Post -->
-                  <ds-mobile-interactive-list-item-post
-                    [authorName]="post.authorName"
-                    [authorRole]="post.authorRole"
-                    [timestamp]="post.timestamp"
-                    [avatarType]="post.avatarType"
-                    [avatarSrc]="post.avatarSrc || ''"
-                    [avatarInitials]="post.avatarInitials || ''"
-                    [clickable]="true"
-                    [moreActions]="true"
-                    (postClick)="openPost(post.id)"
-                    (commentClick)="openPost(post.id, true)"
-                    (longPress)="handlePostLongPress(post.id, post.authorRole === 'Dig')">
-                    
-                    <post-content>
-                      @if (post.content) {
-                        <post-text>{{ post.content }}</post-text>
-                      }
-                      @if (post.imageSrc) {
-                        <post-media>
-                          <img 
-                            [src]="post.imageSrc" 
-                            [alt]="post.imageAlt || 'Posted image'" 
-                            class="clickable-image"
-                            (click)="openImageLightbox(post.imageSrc, post.imageAlt || 'Posted image', post.content, $event)"
-                          />
-                        </post-media>
-                      }
-                    </post-content>
-                    
-                    <post-actions>
-                      <action-like [count]="post.likeCount" [active]="post.isLiked" />
-                      <action-comment [count]="post.commentCount" (commentClick)="openPost(post.id, true)" />
-                    </post-actions>
-                  </ds-mobile-interactive-list-item-post>
-                }
+                    }
+                    @if (post.imageSrc) {
+                      <post-media>
+                        <img
+                          [src]="post.imageSrc"
+                          [alt]="post.imageAlt || 'Posted image'"
+                          class="clickable-image"
+                          (click)="openImageLightbox(post.imageSrc, post.imageAlt || 'Posted image', post.content, $event)"
+                        />
+                      </post-media>
+                    }
+                  </post-content>
+
+                  <post-actions>
+                    <action-like [count]="post.likeCount" [active]="post.isLiked" />
+                    <action-comment [count]="post.commentCount" (commentClick)="openPost(post.id, true)" />
+                  </post-actions>
+                </ds-mobile-interactive-list-item-post>
               }
-            </div>
-          } @else {
-            <!-- Empty State -->
-            <div class="community-empty-state">
-              <img 
-                src="/assets/Empty%20state-chat.png" 
-                alt="Ingen opslag endnu" 
-                class="empty-state-image"
-              />
-              <h3 class="empty-state-title">Ingen opslag endnu</h3>
-              <p class="empty-state-description">Vær den første til at dele noget med dit fællesskab</p>
-            </div>
-          }
-          
-          <!-- Infinite Scroll -->
-          @if (hasAnyPosts()) {
-            <ion-infinite-scroll
-              threshold="100px"
-              [disabled]="!hasMorePosts() || pageComponent.isOffline()"
-              (ionInfinite)="onInfiniteScroll($event)">
-              <ion-infinite-scroll-content
-                loadingSpinner="crescent">
-              </ion-infinite-scroll-content>
-            </ion-infinite-scroll>
-          }
-        </ds-mobile-section>
-      </ds-mobile-page-main>
+            }
+          </div>
+        } @else {
+          <!-- Empty State -->
+          <div class="community-empty-state">
+            <img src="/assets/Empty%20state-chat.png" alt="Ingen opslag endnu" class="empty-state-image" />
+            <h3 class="empty-state-title">Ingen opslag endnu</h3>
+            <p class="empty-state-description">Vær den første til at dele noget med dit fællesskab</p>
+          </div>
+        }
+
+        <!-- Infinite Scroll -->
+        @if (hasAnyPosts()) {
+          <ion-infinite-scroll threshold="100px" [disabled]="!hasMorePosts() || pageComponent.isOffline()" (ionInfinite)="onInfiniteScroll($event)">
+            <ion-infinite-scroll-content loadingSpinner="crescent"> </ion-infinite-scroll-content>
+          </ion-infinite-scroll>
+        }
+      </ds-mobile-section>
+    </ds-mobile-page-main>
   `, isInline: true, styles: [".pinned-posts-swiper-wrapper{padding:0;position:relative}.swiper-nav-buttons{display:contents}.swiper-nav-button{position:absolute;top:50%;transform:translateY(-50%);z-index:10}.swiper-nav-button:first-child{left:-48px}.swiper-nav-button:last-child{right:-48px}::ng-deep .swiper-nav-button button{border-radius:50%!important;width:48px!important;height:48px!important;padding:0!important}@media (max-width: 767px){.swiper-nav-buttons{display:none}}::ng-deep .pinned-posts-swiper .swiper-slide{width:100%;max-width:600px;height:auto}@media (min-width: 768px){::ng-deep .pinned-posts-swiper .swiper-slide{max-width:100%}}.swiper-post-item{width:100%;height:auto}::ng-deep .pinned-posts-swiper .swiper-slide ds-mobile-interactive-list-item-post{height:auto}::ng-deep .pinned-posts-swiper .swiper-wrapper{height:auto;align-items:flex-start}.post-list-wrapper{display:flex;flex-direction:column}.clickable-image{cursor:pointer;transition:transform .2s ease,opacity .2s ease;border-radius:8px;display:block;width:100%;aspect-ratio:16/9;object-fit:cover}.clickable-image:active{transform:scale(.98);opacity:.9}.community-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center}.empty-state-image{width:96px;height:96px;margin-bottom:24px}.empty-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;color:var(--color-text-primary);margin:16px 0 8px}.empty-state-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);color:var(--color-text-secondary);margin:0}ion-infinite-scroll{--color: var(--color-primary-surface)}ion-infinite-scroll-content{--color: var(--color-primary-surface)}ion-infinite-scroll-content::part(spinner){color:var(--color-primary-surface)}\n"], dependencies: [{ kind: "component", type: DsMobilePageMainComponent, selector: "ds-mobile-page-main", inputs: ["title", "headerTitle", "headerSubtitle", "firstEntry", "avatarType", "avatarInitials", "avatarSrc", "avatarIconName", "showNotification", "notificationCount", "showRefresh", "showCondensedHeader", "scrollThreshold", "headerFadeDistance", "contentPadding", "profileMenuItems"], outputs: ["notificationClick", "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: 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: DsMobilePostComposerComponent, selector: "ds-mobile-post-composer", inputs: ["avatarInitials", "avatarType", "avatarSrc", "avatarIconName", "placeholder", "buttonText"], outputs: ["composerClick"] }, { kind: "component", type: DsMobileSwiperComponent, selector: "ds-mobile-swiper", inputs: ["slideWidth", "gap", "pagination", "autoHeight", "progressiveOpacity", "progressiveScale"] }, { kind: "component", type: PostContentComponent, selector: "post-content" }, { kind: "component", type: PostTextComponent, selector: "post-text" }, { kind: "component", type: PostMediaComponent, selector: "post-media" }, { kind: "component", type: PostAttachmentsComponent, selector: "post-attachments" }, { 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"] }, { kind: "component", type: DsMobileCardInlineFileComponent, selector: "ds-mobile-card-inline-file", inputs: ["fileName", "fileSize", "variant", "layout", "fileUrl"], outputs: ["fileClick"] }, { 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: DsMobileInlinePhotoComponent, selector: "ds-mobile-inline-photo", inputs: ["images", "loadingStates", "author", "maxVisible", "useGrid"], outputs: ["photoClick"] }, { kind: "component", type: DsMobileOfflineBannerComponent, selector: "ds-mobile-offline-banner", inputs: ["icon", "title", "message"] }, { kind: "component", type: IonInfiniteScroll, selector: "ion-infinite-scroll", inputs: ["disabled", "position", "threshold"] }, { kind: "component", type: IonInfiniteScrollContent, selector: "ion-infinite-scroll-content", inputs: ["loadingSpinner", "loadingText"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MobileCommunityPageComponent, decorators: [{
@@ -31780,7 +31775,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         DsMobileInlinePhotoComponent,
                         DsMobileOfflineBannerComponent,
                         IonInfiniteScroll,
-                        IonInfiniteScrollContent
+                        IonInfiniteScrollContent,
                     ], template: `
     <ds-mobile-page-main
       #pageComponent
@@ -31788,18 +31783,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
       [notificationCount]="notificationService.unreadCount()"
       [avatarInitials]="userService.avatarInitials()"
       [avatarType]="userService.avatarType()"
+      [contentLoading]="isLoading()"
+      [contentLoadingVariant]="'card'"
       (notificationClick)="handleNotificationClick()"
-      (refresh)="handleRefresh($event)">
-      
+      (refresh)="handleRefresh($event)"
+    >
       <!-- Offline indicator -->
       @if (pageComponent.isOffline()) {
-        <ds-mobile-offline-banner 
-          offline-indicator
-          title="Ingen internetforbindelse"
-          message="Nogle funktioner kan være utilgængelige">
-        </ds-mobile-offline-banner>
+        <ds-mobile-offline-banner offline-indicator title="Ingen internetforbindelse" message="Nogle funktioner kan være utilgængelige"> </ds-mobile-offline-banner>
       }
-      
+
       <!-- Post Composer in header-expandable -->
       <ds-mobile-post-composer
         header-content
@@ -31808,21 +31801,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         [avatarSrc]="userService.avatarSrc()"
         (composerClick)="openPostCreator()"
       />
-      
+
       <!-- Pinned Posts Section -->
-      <ds-mobile-section 
-        headline="Fastgjorte opslag"
-        icon="remixPushpinFill">
+      <ds-mobile-section headline="Fastgjorte opslag" icon="remixPushpinFill">
         <div class="pinned-posts-swiper-wrapper">
-          <ds-mobile-swiper 
+          <ds-mobile-swiper
             #pinnedSwiper
             class="pinned-posts-swiper"
-            [slideWidth]="'100%'" 
+            [slideWidth]="'100%'"
             [gap]="32"
             [pagination]="true"
             [autoHeight]="true"
             [progressiveOpacity]="true"
-            [progressiveScale]="true">
+            [progressiveScale]="true"
+          >
             @for (post of pinnedPosts(); track post.id) {
               <div class="swiper-slide">
                 <ds-mobile-interactive-list-item-post
@@ -31838,24 +31830,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                   [moreActions]="true"
                   (postClick)="openPost(post.id)"
                   (commentClick)="openPost(post.id, true)"
-                  (longPress)="handlePostLongPress(post.id, false)">
-                  
+                  (longPress)="handlePostLongPress(post.id, false)"
+                >
                   <post-content>
                     <post-text>{{ post.content }}</post-text>
-                    
+
                     @if (post.id === 'post-4') {
                       <post-attachments>
-                        <ds-mobile-card-inline-file
-                          [fileName]="'Husregler.pdf'"
-                          [fileSize]="'245 KB'"
-                          [variant]="'pdf'"
-                          [layout]="'compact'"
-                          (fileClick)="openHouseRulesPdf()">
+                        <ds-mobile-card-inline-file [fileName]="'Husregler.pdf'" [fileSize]="'245 KB'" [variant]="'pdf'" [layout]="'compact'" (fileClick)="openHouseRulesPdf()">
                         </ds-mobile-card-inline-file>
                       </post-attachments>
                     }
                   </post-content>
-                  
+
                   <post-actions>
                     <action-like [count]="post.likeCount" [active]="post.isLiked" />
                     <action-comment [count]="post.commentCount" (commentClick)="openPost(post.id, true)" />
@@ -31864,7 +31851,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
               </div>
             }
           </ds-mobile-swiper>
-          
+
           <!-- Navigation Buttons -->
           <div class="swiper-nav-buttons">
             <ds-icon-button
@@ -31888,159 +31875,144 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
           </div>
         </div>
       </ds-mobile-section>
-      
+
       <!-- All Posts Section -->
-      <ds-mobile-section
-        headline="Alle opslag">
+      <ds-mobile-section headline="Alle opslag">
         @if (hasAnyPosts()) {
           <div class="post-list-wrapper">
             <!-- All Posts Loop -->
             @for (post of allPosts(); track post.id) {
-                @if (post.hasInlinePhotos && post.id === 'post-2') {
-                  <!-- Post 2: With multiple images (grid layout) -->
-                  <ds-mobile-interactive-list-item-post
-                    [authorName]="post.authorName"
-                    [authorRole]="post.authorRole"
-                    [timestamp]="post.timestamp"
-                    [avatarInitials]="post.avatarInitials || ''"
-                    [avatarType]="post.avatarType"
-                    [clickable]="true"
-                    [moreActions]="true"
-                    (postClick)="openPost(post.id)"
-                    (commentClick)="openPost(post.id, true)"
-                    (longPress)="handlePostLongPress(post.id, post.authorRole === 'Dig')">
-                    
-                    <post-content>
-                      <post-text>{{ post.content }}</post-text>
-                      <ds-mobile-inline-photo
-                        [images]="[
-                          '/assets/Dummy-photos/balcony-view.jpg',
-                          '/assets/Dummy-photos/staircase.jpg',
-                          '/assets/Dummy-photos/park.jpg',
-                          '/assets/Dummy-photos/yard.jpg'
-                        ]"
-                        [author]="{
-                          name: 'Sophie Andersen',
-                          role: 'Lejer',
-                          avatarInitials: 'SA',
-                          avatarType: 'initials',
-                          timestamp: '4t siden'
-                        }"
-                      />
-                    </post-content>
-                    
-                    <post-actions>
-                      <action-like [active]="post.isLiked" [count]="post.likeCount" />
-                      <action-comment [count]="post.commentCount" (commentClick)="openPost(post.id, true)" />
-                    </post-actions>
-                  </ds-mobile-interactive-list-item-post>
-                } @else if (post.hasInlinePhotos && post.id === 'post-3.5') {
-                  <!-- Post 3.5: Property Manager showcase with 6+ photos -->
-                  <ds-mobile-interactive-list-item-post
-                    [authorName]="post.authorName"
-                    [authorRole]="post.authorRole"
-                    [timestamp]="post.timestamp"
-                    [avatarInitials]="post.avatarInitials || ''"
-                    [avatarType]="post.avatarType"
-                    [showBadge]="post.showBadge || false"
-                    [clickable]="true"
-                    [moreActions]="true"
-                    (postClick)="openPost(post.id)"
-                    (commentClick)="openPost(post.id, true)"
-                    (longPress)="handlePostLongPress(post.id, false)">
-                    
-                    <post-content>
+              @if (post.hasInlinePhotos && post.id === 'post-2') {
+                <!-- Post 2: With multiple images (grid layout) -->
+                <ds-mobile-interactive-list-item-post
+                  [authorName]="post.authorName"
+                  [authorRole]="post.authorRole"
+                  [timestamp]="post.timestamp"
+                  [avatarInitials]="post.avatarInitials || ''"
+                  [avatarType]="post.avatarType"
+                  [clickable]="true"
+                  [moreActions]="true"
+                  (postClick)="openPost(post.id)"
+                  (commentClick)="openPost(post.id, true)"
+                  (longPress)="handlePostLongPress(post.id, post.authorRole === 'Dig')"
+                >
+                  <post-content>
+                    <post-text>{{ post.content }}</post-text>
+                    <ds-mobile-inline-photo
+                      [images]="['/assets/Dummy-photos/balcony-view.jpg', '/assets/Dummy-photos/staircase.jpg', '/assets/Dummy-photos/park.jpg', '/assets/Dummy-photos/yard.jpg']"
+                      [author]="{
+                        name: 'Sophie Andersen',
+                        role: 'Lejer',
+                        avatarInitials: 'SA',
+                        avatarType: 'initials',
+                        timestamp: '4t siden',
+                      }"
+                    />
+                  </post-content>
+
+                  <post-actions>
+                    <action-like [active]="post.isLiked" [count]="post.likeCount" />
+                    <action-comment [count]="post.commentCount" (commentClick)="openPost(post.id, true)" />
+                  </post-actions>
+                </ds-mobile-interactive-list-item-post>
+              } @else if (post.hasInlinePhotos && post.id === 'post-3.5') {
+                <!-- Post 3.5: Property Manager showcase with 6+ photos -->
+                <ds-mobile-interactive-list-item-post
+                  [authorName]="post.authorName"
+                  [authorRole]="post.authorRole"
+                  [timestamp]="post.timestamp"
+                  [avatarInitials]="post.avatarInitials || ''"
+                  [avatarType]="post.avatarType"
+                  [showBadge]="post.showBadge || false"
+                  [clickable]="true"
+                  [moreActions]="true"
+                  (postClick)="openPost(post.id)"
+                  (commentClick)="openPost(post.id, true)"
+                  (longPress)="handlePostLongPress(post.id, false)"
+                >
+                  <post-content>
+                    <post-text>{{ post.content }}</post-text>
+                    <ds-mobile-inline-photo
+                      [images]="[
+                        '/assets/Dummy-photos/mailboxes.jpg',
+                        '/assets/Dummy-photos/staircase.jpg',
+                        '/assets/Dummy-photos/yard.jpg',
+                        '/assets/Dummy-photos/park.jpg',
+                        '/assets/Dummy-photos/balcony-view.jpg',
+                        '/assets/Dummy-photos/handyman.jpg',
+                      ]"
+                      [author]="{
+                        name: 'Karen Nielsen',
+                        role: 'Ejendomsadministrator',
+                        avatarInitials: 'KN',
+                        avatarType: 'initials',
+                        timestamp: '2d siden',
+                      }"
+                      [maxVisible]="5"
+                    />
+                  </post-content>
+
+                  <post-actions>
+                    <action-like [count]="post.likeCount" />
+                    <action-comment [count]="post.commentCount" (commentClick)="openPost(post.id, true)" />
+                  </post-actions>
+                </ds-mobile-interactive-list-item-post>
+              } @else {
+                <!-- Regular Post -->
+                <ds-mobile-interactive-list-item-post
+                  [authorName]="post.authorName"
+                  [authorRole]="post.authorRole"
+                  [timestamp]="post.timestamp"
+                  [avatarType]="post.avatarType"
+                  [avatarSrc]="post.avatarSrc || ''"
+                  [avatarInitials]="post.avatarInitials || ''"
+                  [clickable]="true"
+                  [moreActions]="true"
+                  (postClick)="openPost(post.id)"
+                  (commentClick)="openPost(post.id, true)"
+                  (longPress)="handlePostLongPress(post.id, post.authorRole === 'Dig')"
+                >
+                  <post-content>
+                    @if (post.content) {
                       <post-text>{{ post.content }}</post-text>
-                      <ds-mobile-inline-photo
-                        [images]="[
-                          '/assets/Dummy-photos/mailboxes.jpg',
-                          '/assets/Dummy-photos/staircase.jpg',
-                          '/assets/Dummy-photos/yard.jpg',
-                          '/assets/Dummy-photos/park.jpg',
-                          '/assets/Dummy-photos/balcony-view.jpg',
-                          '/assets/Dummy-photos/handyman.jpg'
-                        ]"
-                        [author]="{
-                          name: 'Karen Nielsen',
-                          role: 'Ejendomsadministrator',
-                          avatarInitials: 'KN',
-                          avatarType: 'initials',
-                          timestamp: '2d siden'
-                        }"
-                        [maxVisible]="5"
-                      />
-                    </post-content>
-                    
-                    <post-actions>
-                      <action-like [count]="post.likeCount" />
-                      <action-comment [count]="post.commentCount" (commentClick)="openPost(post.id, true)" />
-                    </post-actions>
-                  </ds-mobile-interactive-list-item-post>
-                } @else {
-                  <!-- Regular Post -->
-                  <ds-mobile-interactive-list-item-post
-                    [authorName]="post.authorName"
-                    [authorRole]="post.authorRole"
-                    [timestamp]="post.timestamp"
-                    [avatarType]="post.avatarType"
-                    [avatarSrc]="post.avatarSrc || ''"
-                    [avatarInitials]="post.avatarInitials || ''"
-                    [clickable]="true"
-                    [moreActions]="true"
-                    (postClick)="openPost(post.id)"
-                    (commentClick)="openPost(post.id, true)"
-                    (longPress)="handlePostLongPress(post.id, post.authorRole === 'Dig')">
-                    
-                    <post-content>
-                      @if (post.content) {
-                        <post-text>{{ post.content }}</post-text>
-                      }
-                      @if (post.imageSrc) {
-                        <post-media>
-                          <img 
-                            [src]="post.imageSrc" 
-                            [alt]="post.imageAlt || 'Posted image'" 
-                            class="clickable-image"
-                            (click)="openImageLightbox(post.imageSrc, post.imageAlt || 'Posted image', post.content, $event)"
-                          />
-                        </post-media>
-                      }
-                    </post-content>
-                    
-                    <post-actions>
-                      <action-like [count]="post.likeCount" [active]="post.isLiked" />
-                      <action-comment [count]="post.commentCount" (commentClick)="openPost(post.id, true)" />
-                    </post-actions>
-                  </ds-mobile-interactive-list-item-post>
-                }
+                    }
+                    @if (post.imageSrc) {
+                      <post-media>
+                        <img
+                          [src]="post.imageSrc"
+                          [alt]="post.imageAlt || 'Posted image'"
+                          class="clickable-image"
+                          (click)="openImageLightbox(post.imageSrc, post.imageAlt || 'Posted image', post.content, $event)"
+                        />
+                      </post-media>
+                    }
+                  </post-content>
+
+                  <post-actions>
+                    <action-like [count]="post.likeCount" [active]="post.isLiked" />
+                    <action-comment [count]="post.commentCount" (commentClick)="openPost(post.id, true)" />
+                  </post-actions>
+                </ds-mobile-interactive-list-item-post>
               }
-            </div>
-          } @else {
-            <!-- Empty State -->
-            <div class="community-empty-state">
-              <img 
-                src="/assets/Empty%20state-chat.png" 
-                alt="Ingen opslag endnu" 
-                class="empty-state-image"
-              />
-              <h3 class="empty-state-title">Ingen opslag endnu</h3>
-              <p class="empty-state-description">Vær den første til at dele noget med dit fællesskab</p>
-            </div>
-          }
-          
-          <!-- Infinite Scroll -->
-          @if (hasAnyPosts()) {
-            <ion-infinite-scroll
-              threshold="100px"
-              [disabled]="!hasMorePosts() || pageComponent.isOffline()"
-              (ionInfinite)="onInfiniteScroll($event)">
-              <ion-infinite-scroll-content
-                loadingSpinner="crescent">
-              </ion-infinite-scroll-content>
-            </ion-infinite-scroll>
-          }
-        </ds-mobile-section>
-      </ds-mobile-page-main>
+            }
+          </div>
+        } @else {
+          <!-- Empty State -->
+          <div class="community-empty-state">
+            <img src="/assets/Empty%20state-chat.png" alt="Ingen opslag endnu" class="empty-state-image" />
+            <h3 class="empty-state-title">Ingen opslag endnu</h3>
+            <p class="empty-state-description">Vær den første til at dele noget med dit fællesskab</p>
+          </div>
+        }
+
+        <!-- Infinite Scroll -->
+        @if (hasAnyPosts()) {
+          <ion-infinite-scroll threshold="100px" [disabled]="!hasMorePosts() || pageComponent.isOffline()" (ionInfinite)="onInfiniteScroll($event)">
+            <ion-infinite-scroll-content loadingSpinner="crescent"> </ion-infinite-scroll-content>
+          </ion-infinite-scroll>
+        }
+      </ds-mobile-section>
+    </ds-mobile-page-main>
   `, styles: [".pinned-posts-swiper-wrapper{padding:0;position:relative}.swiper-nav-buttons{display:contents}.swiper-nav-button{position:absolute;top:50%;transform:translateY(-50%);z-index:10}.swiper-nav-button:first-child{left:-48px}.swiper-nav-button:last-child{right:-48px}::ng-deep .swiper-nav-button button{border-radius:50%!important;width:48px!important;height:48px!important;padding:0!important}@media (max-width: 767px){.swiper-nav-buttons{display:none}}::ng-deep .pinned-posts-swiper .swiper-slide{width:100%;max-width:600px;height:auto}@media (min-width: 768px){::ng-deep .pinned-posts-swiper .swiper-slide{max-width:100%}}.swiper-post-item{width:100%;height:auto}::ng-deep .pinned-posts-swiper .swiper-slide ds-mobile-interactive-list-item-post{height:auto}::ng-deep .pinned-posts-swiper .swiper-wrapper{height:auto;align-items:flex-start}.post-list-wrapper{display:flex;flex-direction:column}.clickable-image{cursor:pointer;transition:transform .2s ease,opacity .2s ease;border-radius:8px;display:block;width:100%;aspect-ratio:16/9;object-fit:cover}.clickable-image:active{transform:scale(.98);opacity:.9}.community-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center}.empty-state-image{width:96px;height:96px;margin-bottom:24px}.empty-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;color:var(--color-text-primary);margin:16px 0 8px}.empty-state-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);color:var(--color-text-secondary);margin:0}ion-infinite-scroll{--color: var(--color-primary-surface)}ion-infinite-scroll-content{--color: var(--color-primary-surface)}ion-infinite-scroll-content::part(spinner){color:var(--color-primary-surface)}\n"] }]
         }], ctorParameters: () => [{ type: i1$3.Router }, { type: i1$3.ActivatedRoute }, { type: DsMobileBottomSheetService }, { type: DsMobileLightboxService }, { type: DsMobilePostDetailModalService }, { type: UserService }, { type: PostsService }], propDecorators: { pageComponent: [{
                 type: ViewChild,
@@ -32296,7 +32268,12 @@ class MobileHandbookPageComponent {
     ];
     constructor(userService) {
         this.userService = userService;
+        const randomTimeout = Math.floor(Math.random() * 2000);
+        setTimeout(() => {
+            this.isLoading.set(false);
+        }, randomTimeout);
     }
+    isLoading = signal(true, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
     async handleNotificationClick() {
         const tapped = await this.notificationModal.open();
         if (tapped)
@@ -32317,7 +32294,7 @@ class MobileHandbookPageComponent {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MobileHandbookPageComponent, deps: [{ token: UserService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: MobileHandbookPageComponent, isStandalone: true, selector: "app-mobile-handbook-page", viewQueries: [{ propertyName: "pageComponent", first: true, predicate: ["pageComponent"], descendants: true }], ngImport: i0, template: `
-    <ds-mobile-page-main #pageComponent title="Håndbog" [notificationCount]="notificationService.unreadCount()" [avatarInitials]="userService.avatarInitials()" [avatarType]="userService.avatarType()" (notificationClick)="handleNotificationClick()" (refresh)="handleRefresh($event)">
+    <ds-mobile-page-main #pageComponent title="Håndbog" [notificationCount]="notificationService.unreadCount()" [avatarInitials]="userService.avatarInitials()" [avatarType]="userService.avatarType()" [contentLoading]="isLoading()" [contentLoadingVariant]="'handbook'" (notificationClick)="handleNotificationClick()" (refresh)="handleRefresh($event)">
       <!-- Offline indicator -->
       @if (pageComponent.isOffline()) {
         <ds-mobile-offline-banner offline-indicator title="Ingen internetforbindelse" message="Nogle funktioner kan være utilgængelige"> </ds-mobile-offline-banner>
@@ -32343,7 +32320,7 @@ class MobileHandbookPageComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MobileHandbookPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-mobile-handbook-page', standalone: true, imports: [DsMobilePageMainComponent, DsMobileSectionComponent, DsMobileHandbookFolderComponent, DsMobileOfflineBannerComponent], template: `
-    <ds-mobile-page-main #pageComponent title="Håndbog" [notificationCount]="notificationService.unreadCount()" [avatarInitials]="userService.avatarInitials()" [avatarType]="userService.avatarType()" (notificationClick)="handleNotificationClick()" (refresh)="handleRefresh($event)">
+    <ds-mobile-page-main #pageComponent title="Håndbog" [notificationCount]="notificationService.unreadCount()" [avatarInitials]="userService.avatarInitials()" [avatarType]="userService.avatarType()" [contentLoading]="isLoading()" [contentLoadingVariant]="'handbook'" (notificationClick)="handleNotificationClick()" (refresh)="handleRefresh($event)">
       <!-- Offline indicator -->
       @if (pageComponent.isOffline()) {
         <ds-mobile-offline-banner offline-indicator title="Ingen internetforbindelse" message="Nogle funktioner kan være utilgængelige"> </ds-mobile-offline-banner>
@@ -33548,19 +33525,25 @@ class MobileInquiriesPageComponent {
         this.userService = userService;
         this.navCtrl = navCtrl;
         this.newInquiryModal = newInquiryModal;
+        // Vis skeleton loader med en random delay mellem 0 og 2000 ms
+        const randomTimeout = Math.floor(Math.random() * 2000);
+        setTimeout(() => {
+            this.isLoading.set(false);
+        }, randomTimeout);
     }
+    isLoading = signal(true, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
     filterStatus = signal('all', ...(ngDevMode ? [{ debugName: "filterStatus" }] : []));
     tabItems = [
         { id: 'all', label: 'Alle' },
         { id: 'open', label: 'Åben' },
-        { id: 'closed', label: 'Lukket' }
+        { id: 'closed', label: 'Lukket' },
     ];
     filteredInquiries = computed(() => {
         const all = this.inquiriesService.inquiries();
         const status = this.filterStatus();
         if (status === 'all')
             return all;
-        return all.filter(i => i.status === status);
+        return all.filter((i) => i.status === status);
     }, ...(ngDevMode ? [{ debugName: "filteredInquiries" }] : []));
     setFilter(status) {
         this.filterStatus.set(status);
@@ -33572,7 +33555,7 @@ class MobileInquiriesPageComponent {
         console.log('Opening inquiry:', inquiryId);
         // Navigate to inquiry detail page with custom transition (absolute path outside tabs for animations)
         this.navCtrl.navigateForward([`/inquiry-detail/${inquiryId}`], {
-            animation: customPageTransition
+            animation: customPageTransition,
         });
     }
     showInquiryActions(inquiryId) {
@@ -33615,7 +33598,7 @@ class MobileInquiriesPageComponent {
                 });
                 // Close the modal
                 await this.newInquiryModal.close();
-            }
+            },
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MobileInquiriesPageComponent, deps: [{ token: UserService }, { token: i1.NavController }, { token: DsMobileNewInquiryModalService }], target: i0.ɵɵFactoryTarget.Component });
@@ -33626,27 +33609,21 @@ class MobileInquiriesPageComponent {
       [notificationCount]="notificationService.unreadCount()"
       [avatarInitials]="userService.avatarInitials()"
       [avatarType]="userService.avatarType()"
+      [contentLoading]="isLoading()"
+      [contentLoadingVariant]="'list'"
       (notificationClick)="handleNotificationClick()"
-      (refresh)="handleRefresh($event)">
-      
+      (refresh)="handleRefresh($event)"
+    >
       <!-- Offline indicator -->
       @if (pageComponent.isOffline()) {
-        <ds-mobile-offline-banner 
-          offline-indicator
-          title="Ingen internetforbindelse"
-          message="Nogle funktioner kan være utilgængelige">
-        </ds-mobile-offline-banner>
+        <ds-mobile-offline-banner offline-indicator title="Ingen internetforbindelse" message="Nogle funktioner kan være utilgængelige"> </ds-mobile-offline-banner>
       }
-      
+
       <!-- Filter tabs in header -->
       <div header-content>
-        <ds-mobile-inline-tabs
-          [tabs]="tabItems"
-          [activeTab]="filterStatus()"
-          (tabChange)="setFilter($any($event))">
-        </ds-mobile-inline-tabs>
+        <ds-mobile-inline-tabs [tabs]="tabItems" [activeTab]="filterStatus()" (tabChange)="setFilter($any($event))"> </ds-mobile-inline-tabs>
       </div>
-      
+
       <ds-mobile-section>
         @if (filteredInquiries().length > 0) {
           <div class="inquiry-list-wrapper">
@@ -33660,7 +33637,8 @@ class MobileInquiriesPageComponent {
                 [clickable]="true"
                 [showChevron]="false"
                 [enableLongPress]="false"
-                (inquiryClick)="openInquiryDetail(inquiry.id)">
+                (inquiryClick)="openInquiryDetail(inquiry.id)"
+              >
               </ds-mobile-interactive-list-item-inquiry>
             }
           </div>
@@ -33684,12 +33662,7 @@ class MobileInquiriesPageComponent {
     </ds-mobile-page-main>
 
     <!-- FAB for creating new inquiry -->
-    <ds-mobile-fab
-      icon="remixAddLine"
-      position="bottom-right"
-      ariaLabel="Create new inquiry"
-      (clicked)="createNewInquiry()">
-    </ds-mobile-fab>
+    <ds-mobile-fab icon="remixAddLine" position="bottom-right" ariaLabel="Create new inquiry" (clicked)="createNewInquiry()"> </ds-mobile-fab>
   `, isInline: true, styles: [".inquiry-list-wrapper{display:flex;flex-direction:column;margin-top:-12px}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center}.empty-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;color:var(--color-text-primary);margin-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", "showNotification", "notificationCount", "showRefresh", "showCondensedHeader", "scrollThreshold", "headerFadeDistance", "contentPadding", "profileMenuItems"], outputs: ["notificationClick", "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: 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: DsMobileInlineTabsComponent, selector: "ds-mobile-inline-tabs", inputs: ["tabs", "activeTab"], outputs: ["tabChange"] }, { kind: "component", type: DsMobileOfflineBannerComponent, selector: "ds-mobile-offline-banner", inputs: ["icon", "title", "message"] }, { kind: "component", type: DsMobileFabComponent, selector: "ds-mobile-fab", inputs: ["icon", "position", "size", "ariaLabel", "disabled"], outputs: ["clicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MobileInquiriesPageComponent, decorators: [{
@@ -33701,9 +33674,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         DsMobileInteractiveListItemInquiryComponent,
                         DsMobileInlineTabsComponent,
                         DsMobileOfflineBannerComponent,
-                        DsMobileFabComponent
+                        DsMobileFabComponent,
                     ], host: {
-                        class: 'ion-page'
+                        class: 'ion-page',
                     }, template: `
     <ds-mobile-page-main
       #pageComponent
@@ -33711,27 +33684,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
       [notificationCount]="notificationService.unreadCount()"
       [avatarInitials]="userService.avatarInitials()"
       [avatarType]="userService.avatarType()"
+      [contentLoading]="isLoading()"
+      [contentLoadingVariant]="'list'"
       (notificationClick)="handleNotificationClick()"
-      (refresh)="handleRefresh($event)">
-      
+      (refresh)="handleRefresh($event)"
+    >
       <!-- Offline indicator -->
       @if (pageComponent.isOffline()) {
-        <ds-mobile-offline-banner 
-          offline-indicator
-          title="Ingen internetforbindelse"
-          message="Nogle funktioner kan være utilgængelige">
-        </ds-mobile-offline-banner>
+        <ds-mobile-offline-banner offline-indicator title="Ingen internetforbindelse" message="Nogle funktioner kan være utilgængelige"> </ds-mobile-offline-banner>
       }
-      
+
       <!-- Filter tabs in header -->
       <div header-content>
-        <ds-mobile-inline-tabs
-          [tabs]="tabItems"
-          [activeTab]="filterStatus()"
-          (tabChange)="setFilter($any($event))">
-        </ds-mobile-inline-tabs>
+        <ds-mobile-inline-tabs [tabs]="tabItems" [activeTab]="filterStatus()" (tabChange)="setFilter($any($event))"> </ds-mobile-inline-tabs>
       </div>
-      
+
       <ds-mobile-section>
         @if (filteredInquiries().length > 0) {
           <div class="inquiry-list-wrapper">
@@ -33745,7 +33712,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 [clickable]="true"
                 [showChevron]="false"
                 [enableLongPress]="false"
-                (inquiryClick)="openInquiryDetail(inquiry.id)">
+                (inquiryClick)="openInquiryDetail(inquiry.id)"
+              >
               </ds-mobile-interactive-list-item-inquiry>
             }
           </div>
@@ -33769,12 +33737,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
     </ds-mobile-page-main>
 
     <!-- FAB for creating new inquiry -->
-    <ds-mobile-fab
-      icon="remixAddLine"
-      position="bottom-right"
-      ariaLabel="Create new inquiry"
-      (clicked)="createNewInquiry()">
-    </ds-mobile-fab>
+    <ds-mobile-fab icon="remixAddLine" position="bottom-right" ariaLabel="Create new inquiry" (clicked)="createNewInquiry()"> </ds-mobile-fab>
   `, styles: [".inquiry-list-wrapper{display:flex;flex-direction:column;margin-top:-12px}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center}.empty-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;color:var(--color-text-primary);margin-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"] }]
         }], ctorParameters: () => [{ type: UserService }, { type: i1.NavController }, { type: DsMobileNewInquiryModalService }], propDecorators: { pageComponent: [{
                 type: ViewChild,
@@ -39041,5 +39004,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, DEFAULT_SERVICE_PAGE_LABELS, DsAppIconComponent, DsAvatarWithBadgeComponent, DsLogoComponent, DsMobileAccessSheetComponent, DsMobileActionListItemComponent, DsMobileActionsBottomSheetComponent, DsMobileAddGroupTenantsModalComponent, DsMobileAppLoadingComponent, DsMobileAttachmentPreviewComponent, DsMobileBookingCancelConfirmationComponent, DsMobileBookingConfirmationWrapperComponent, DsMobileBookingDetailSheetComponent, DsMobileBookingDetailSheetService, DsMobileBookingModalComponent, DsMobileBookingModalService, DsMobileBookingSummaryComponent, DsMobileBottomSheetHeaderComponent, DsMobileBottomSheetService, DsMobileBottomSheetWrapperComponent, DsMobileCapacitySheetComponent, DsMobileCardInlineBannerComponent, DsMobileCardInlineComponent, DsMobileCardInlineContactComponent, DsMobileCardInlineFileComponent, DsMobileChatModalComponent, DsMobileChatModalService, DsMobileActionsBottomSheetComponent as DsMobileCommentActionsBottomSheetComponent, DsMobileCommentComponent, DsMobileCommunityAdminPickerComponent, DsMobileCommunityAdminsModalComponent, DsMobileConfirmationSheetComponent, DsMobileContactListItemComponent, DsMobileContentComponent, DsMobileCountBadgeComponent, DsMobileCreateGroupModalComponent, DsMobileDropdownComponent, DsMobileEditGroupModalComponent, DsMobileEmptyStateComponent, DsMobileFabComponent, DsMobileFacilityArchiveConfirmationComponent, DsMobileFacilityCreationConfirmationWrapperComponent, DsMobileFacilityCreationModalComponent, DsMobileFacilityCreationModalService, DsMobileFacilityDeleteConfirmationComponent, DsMobileFacilityDetailModalComponent, DsMobileFacilityDetailModalService, DsMobileFileAttachmentComponent, DsMobileGlassSpinnerComponent, DsMobileGroupAvatarStackComponent, DsMobileGroupMembersModalComponent, DsMobileHandbookDetailModalComponent, DsMobileHandbookDetailModalService, DsMobileHandbookFolderComponent, DsMobileHandbookFolderMiniComponent, DsMobileHeaderContentComponent, DsMobileHeaderContentTileComponent, DsMobileIllustrationComponent, DsMobileImagePlaceholderComponent, DsMobileInlinePhotoComponent, DsMobileInlineTabsComponent, DsMobileInteractiveListItemBookingComponent, DsMobileInteractiveListItemInquiryComponent, DsMobileInteractiveListItemMessageComponent, DsMobileInteractiveListItemPostComponent, DsMobileLightboxImageComponent as DsMobileLightboxComponent, DsMobileLightboxFooterComponent, DsMobileLightboxHeaderComponent, DsMobileLightboxImageComponent, DsMobileLightboxImageWithDescriptionComponent, DsMobileLightboxPdfComponent, DsMobileLightboxService, DsMobileListItemComponent, DsMobileListItemStaticComponent, DsMobileListSearchComponent, DsMobileLoaderOverlayComponent, DsMobileLongPressDirective, DsMobileMediaActionsPanelComponent, DsMobileMessageBubbleComponent, DsMobileMessageComposerComponent, DsMobileModalBaseComponent, DsMobileModalService, DsMobileNewInquiryModalComponent, DsMobileNewInquiryModalService, DsMobileNotificationButtonComponent, DsMobileNotificationModalComponent, DsMobileNotificationModalService, DsMobileNotificationPromptComponent, 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, DsMobileToggleComponent, DsMobileWhenCanBookSheetComponent, DsMobileWhoCanBookSheetComponent, DsTextInputComponent, FamilyAccessPageComponent, FamilyAccessService, InquiriesService, InviteSuccessPageComponent, MediaPickerService, MobileBookingPageComponent, MobileCommunityPageComponent, MobileHandbookPageComponent, MobileHomePageComponent, MobileInquiriesPageComponent, MobileInquiryDetailPageComponent, MobileModalBase, MobilePageBase, MobilePostDetailPageComponent, MobileTabsExampleComponent, NOTIFICATION_ICON_MAP, NotificationPromptService, NotificationService, PageLoadingService, PostActionsComponent, PostAttachmentsComponent, PostContentComponent, PostCreatePageComponent, PostMediaComponent, PostPdfAttachmentComponent, PostTextComponent, PostsService, RelativeTimePipe, SAMPLE_NOTIFICATIONS, SectionHeaderComponent, ServicesPageComponent, SettingsModalService, SignInPageComponent, SignInToAcceptPageComponent, TenantChatPageComponent, TileContentComponent, TileIconComponent, TileLabelComponent, TileValueComponent, TrackingPermissionService, UserService, VENDOR_MODAL_SERVICE, WhitelabelDemoModalComponent, WhitelabelDemoModalService, WhitelabelService, customBackTransition, customPageTransition, dateBucket };
+export { AcceptInvitePageComponent, ActionCommentComponent, ActionLikeComponent, AvatarUploadPageComponent, BaseModalService, ContentRowComponent, CreateAccountPageComponent, DEFAULT_SERVICE_PAGE_LABELS, DsAppIconComponent, DsAvatarWithBadgeComponent, DsLogoComponent, DsMobileAccessSheetComponent, DsMobileActionListItemComponent, DsMobileActionsBottomSheetComponent, DsMobileAddGroupTenantsModalComponent, DsMobileAppLoadingComponent, DsMobileAttachmentPreviewComponent, DsMobileBookingCancelConfirmationComponent, DsMobileBookingConfirmationWrapperComponent, DsMobileBookingDetailSheetComponent, DsMobileBookingDetailSheetService, DsMobileBookingModalComponent, DsMobileBookingModalService, DsMobileBookingSummaryComponent, DsMobileBottomSheetHeaderComponent, DsMobileBottomSheetService, DsMobileBottomSheetWrapperComponent, DsMobileCapacitySheetComponent, DsMobileCardInlineBannerComponent, DsMobileCardInlineComponent, DsMobileCardInlineContactComponent, DsMobileCardInlineFileComponent, DsMobileChatModalComponent, DsMobileChatModalService, DsMobileActionsBottomSheetComponent as DsMobileCommentActionsBottomSheetComponent, DsMobileCommentComponent, DsMobileCommunityAdminPickerComponent, DsMobileCommunityAdminsModalComponent, DsMobileConfirmationSheetComponent, DsMobileContactListItemComponent, DsMobileContentComponent, DsMobileCountBadgeComponent, DsMobileCreateGroupModalComponent, DsMobileDropdownComponent, DsMobileEditGroupModalComponent, DsMobileEmptyStateComponent, DsMobileFabComponent, DsMobileFacilityArchiveConfirmationComponent, DsMobileFacilityCreationConfirmationWrapperComponent, DsMobileFacilityCreationModalComponent, DsMobileFacilityCreationModalService, DsMobileFacilityDeleteConfirmationComponent, DsMobileFacilityDetailModalComponent, DsMobileFacilityDetailModalService, DsMobileFileAttachmentComponent, DsMobileGlassSpinnerComponent, DsMobileGroupAvatarStackComponent, DsMobileGroupMembersModalComponent, DsMobileHandbookDetailModalComponent, DsMobileHandbookDetailModalService, DsMobileHandbookFolderComponent, DsMobileHandbookFolderMiniComponent, DsMobileHeaderContentComponent, DsMobileHeaderContentTileComponent, DsMobileIllustrationComponent, DsMobileImagePlaceholderComponent, DsMobileInlinePhotoComponent, DsMobileInlineTabsComponent, DsMobileInteractiveListItemBookingComponent, DsMobileInteractiveListItemInquiryComponent, DsMobileInteractiveListItemMessageComponent, DsMobileInteractiveListItemPostComponent, DsMobileLightboxImageComponent as DsMobileLightboxComponent, DsMobileLightboxFooterComponent, DsMobileLightboxHeaderComponent, DsMobileLightboxImageComponent, DsMobileLightboxImageWithDescriptionComponent, DsMobileLightboxPdfComponent, DsMobileLightboxService, DsMobileListItemComponent, DsMobileListItemStaticComponent, DsMobileListSearchComponent, DsMobileLoaderOverlayComponent, DsMobileLongPressDirective, DsMobileMediaActionsPanelComponent, DsMobileMessageBubbleComponent, DsMobileMessageComposerComponent, DsMobileModalBaseComponent, DsMobileModalService, DsMobileNewInquiryModalComponent, DsMobileNewInquiryModalService, DsMobileNotificationButtonComponent, DsMobileNotificationModalComponent, DsMobileNotificationModalService, DsMobileNotificationPromptComponent, 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, DsMobileToggleComponent, DsMobileWhenCanBookSheetComponent, DsMobileWhoCanBookSheetComponent, DsTextInputComponent, FamilyAccessPageComponent, FamilyAccessService, InquiriesService, InviteSuccessPageComponent, MediaPickerService, MobileBookingPageComponent, MobileCommunityPageComponent, MobileHandbookPageComponent, MobileHomePageComponent, MobileInquiriesPageComponent, MobileInquiryDetailPageComponent, MobileModalBase, MobilePageBase, MobilePostDetailPageComponent, MobileTabsExampleComponent, NOTIFICATION_ICON_MAP, NotificationPromptService, NotificationService, PageLoadingService, PeerChatLauncherService, PeerMessagingService, PostActionsComponent, PostAttachmentsComponent, PostContentComponent, PostCreatePageComponent, PostMediaComponent, PostPdfAttachmentComponent, PostTextComponent, PostsService, RelativeTimePipe, SAMPLE_NOTIFICATIONS, SectionHeaderComponent, ServicesPageComponent, SettingsModalService, SignInPageComponent, SignInToAcceptPageComponent, TenantChatPageComponent, TileContentComponent, TileIconComponent, TileLabelComponent, TileValueComponent, TrackingPermissionService, UserService, VENDOR_MODAL_SERVICE, WhitelabelDemoModalComponent, WhitelabelDemoModalService, WhitelabelService, customBackTransition, customPageTransition, dateBucket, isPeerDirectConversation, isPeerGroupConversation, peerTenantToParticipant };
 //# sourceMappingURL=propbinder-mobile-design.mjs.map