@propbinder/mobile-design 0.3.40 → 0.3.41

package/fesm2022/propbinder-mobile-design.mjs

@@ -681,28 +681,69 @@ class DsMobileSkeletonLoaderComponent {
      * @default 0
      */
     borderRadius = input(0, ...(ngDevMode ? [{ debugName: "borderRadius" }] : []));
+    /**
+     * Variant of the skeleton layout
+     * @default 'list'
+     */
+    variant = input('list', ...(ngDevMode ? [{ debugName: "variant" }] : []));
     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 } }, 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 } }, ngImport: i0, template: `
     <div 
       class="skeleton-loader-overlay" 
       [style.border-radius.px]="borderRadius()"
       role="status"
       aria-live="polite"
       aria-label="Loading">
-      <div class="skeleton-list">
-        <!-- Generate 4 skeleton rows to mimic a generic list -->
-        @for (i of [1, 2, 3, 4]; track i) {
-          <div class="skeleton-item">
-            <div class="skeleton-avatar shimmer"></div>
-            <div class="skeleton-text-container">
-              <div class="skeleton-text-line shimmer"></div>
-              <div class="skeleton-text-line shimmer short"></div>
+      
+      <!-- List Variant (Default) -->
+      @if (variant() === 'list') {
+        <div class="skeleton-list">
+          @for (i of [1, 2, 3, 4]; track i) {
+            <div class="skeleton-item">
+              <div class="skeleton-avatar shimmer"></div>
+              <div class="skeleton-text-container">
+                <div class="skeleton-text-line shimmer"></div>
+                <div class="skeleton-text-line shimmer short"></div>
+              </div>
             </div>
-          </div>
-        }
-      </div>
+          }
+        </div>
+      }
+
+      <!-- Card Variant -->
+      @if (variant() === 'card') {
+        <div class="skeleton-card-list">
+          @for (i of [1, 2]; track i) {
+            <div class="skeleton-card pulse"></div>
+          }
+        </div>
+      }
+
+      <!-- Details Variant -->
+      @if (variant() === 'details') {
+        <div class="skeleton-details">
+          <div class="skeleton-title pulse"></div>
+          <div class="skeleton-text-line pulse full"></div>
+          <div class="skeleton-text-line pulse full"></div>
+          <div class="skeleton-text-line pulse short"></div>
+          <div class="skeleton-box pulse"></div>
+        </div>
+      }
+
+      <!-- Handbook Variant (Grid of folders) -->
+      @if (variant() === 'handbook') {
+        <div class="skeleton-handbook-grid">
+          @for (i of [1, 2, 3, 4]; track i) {
+            <div class="skeleton-folder-card">
+              <div class="skeleton-folder-icon pulse"></div>
+              <div class="skeleton-text-line pulse" style="width: 80%;"></div>
+              <div class="skeleton-text-line pulse short"></div>
+            </div>
+          }
+        </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%}.shimmer{background:var(--color-background-tertiary, #f0f0f0);background-image:linear-gradient(90deg,#fff0 0,#ffffff80 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}}@media (prefers-color-scheme: dark){.shimmer{background:var(--color-background-tertiary-dark, #2a2a2a);background-image:linear-gradient(90deg,#fff0 0,#ffffff0d 40px,#fff0 80px)}}\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: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 }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileSkeletonLoaderComponent, decorators: [{
             type: Component,
@@ -713,21 +754,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
       role="status"
       aria-live="polite"
       aria-label="Loading">
-      <div class="skeleton-list">
-        <!-- Generate 4 skeleton rows to mimic a generic list -->
-        @for (i of [1, 2, 3, 4]; track i) {
-          <div class="skeleton-item">
-            <div class="skeleton-avatar shimmer"></div>
-            <div class="skeleton-text-container">
-              <div class="skeleton-text-line shimmer"></div>
-              <div class="skeleton-text-line shimmer short"></div>
+      
+      <!-- List Variant (Default) -->
+      @if (variant() === 'list') {
+        <div class="skeleton-list">
+          @for (i of [1, 2, 3, 4]; track i) {
+            <div class="skeleton-item">
+              <div class="skeleton-avatar shimmer"></div>
+              <div class="skeleton-text-container">
+                <div class="skeleton-text-line shimmer"></div>
+                <div class="skeleton-text-line shimmer short"></div>
+              </div>
             </div>
-          </div>
-        }
-      </div>
+          }
+        </div>
+      }
+
+      <!-- Card Variant -->
+      @if (variant() === 'card') {
+        <div class="skeleton-card-list">
+          @for (i of [1, 2]; track i) {
+            <div class="skeleton-card pulse"></div>
+          }
+        </div>
+      }
+
+      <!-- Details Variant -->
+      @if (variant() === 'details') {
+        <div class="skeleton-details">
+          <div class="skeleton-title pulse"></div>
+          <div class="skeleton-text-line pulse full"></div>
+          <div class="skeleton-text-line pulse full"></div>
+          <div class="skeleton-text-line pulse short"></div>
+          <div class="skeleton-box pulse"></div>
+        </div>
+      }
+
+      <!-- Handbook Variant (Grid of folders) -->
+      @if (variant() === 'handbook') {
+        <div class="skeleton-handbook-grid">
+          @for (i of [1, 2, 3, 4]; track i) {
+            <div class="skeleton-folder-card">
+              <div class="skeleton-folder-icon pulse"></div>
+              <div class="skeleton-text-line pulse" style="width: 80%;"></div>
+              <div class="skeleton-text-line pulse short"></div>
+            </div>
+          }
+        </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%}.shimmer{background:var(--color-background-tertiary, #f0f0f0);background-image:linear-gradient(90deg,#fff0 0,#ffffff80 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}}@media (prefers-color-scheme: dark){.shimmer{background:var(--color-background-tertiary-dark, #2a2a2a);background-image:linear-gradient(90deg,#fff0 0,#ffffff0d 40px,#fff0 80px)}}\n"] }]
-        }], propDecorators: { borderRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderRadius", 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: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 }] }] } });
 
 class DsMobileCountBadgeComponent {
     count = input.required(...(ngDevMode ? [{ debugName: "count" }] : []));
@@ -807,6 +884,16 @@ class MobilePageBase {
      * until they explicitly opt in.
      */
     contentLoading = input(false, ...(ngDevMode ? [{ debugName: "contentLoading" }] : []));
+    /**
+     * Layout variant for the skeleton loader when contentLoading is true.
+     * - 'list': Default list layout with shimmer animation
+     * - 'card': Grid of cards with pulse animation
+     * - 'details': Detail page structure with pulse animation
+     * - 'handbook': Grid of handbook folders with pulse animation
+     *
+     * @default 'list'
+     */
+    contentLoadingVariant = input('list', ...(ngDevMode ? [{ debugName: "contentLoadingVariant" }] : []));
     /**
      * Maximum content width (desktop only)
      *
@@ -952,11 +1039,11 @@ class MobilePageBase {
         window.removeEventListener('offline', this.handleOffline);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MobilePageBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.16", type: MobilePageBase, isStandalone: true, inputs: { contentLoading: { classPropertyName: "contentLoading", publicName: "contentLoading", isSignal: true, isRequired: false, transformFunction: null }, contentWidth: { classPropertyName: "contentWidth", publicName: "contentWidth", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.16", type: MobilePageBase, isStandalone: true, inputs: { contentLoading: { classPropertyName: "contentLoading", publicName: "contentLoading", isSignal: true, isRequired: false, transformFunction: null }, contentLoadingVariant: { classPropertyName: "contentLoadingVariant", publicName: "contentLoadingVariant", isSignal: true, isRequired: false, transformFunction: null }, contentWidth: { classPropertyName: "contentWidth", publicName: "contentWidth", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MobilePageBase, decorators: [{
             type: Directive
-        }], propDecorators: { contentLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentLoading", required: false }] }], contentWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentWidth", required: false }] }] } });
+        }], propDecorators: { contentLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentLoading", required: false }] }], contentLoadingVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentLoadingVariant", required: false }] }], contentWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentWidth", required: false }] }] } });
 
 /**
  * DsMobileLongPressDirective
@@ -6218,7 +6305,7 @@ class DsMobilePageMainComponent extends MobilePageBase {
       <!-- Content wrapper -->
       <div class="content-wrapper">
         @if (contentLoading()) {
-          <ds-mobile-skeleton-loader [borderRadius]="24" />
+          <ds-mobile-skeleton-loader [borderRadius]="24" [variant]="contentLoadingVariant()" />
         }
 
         <!-- Offline indicator slot (appears at top of content) -->
@@ -6230,7 +6317,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"] }, { 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"] }, { 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,
@@ -6307,7 +6394,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" />
+          <ds-mobile-skeleton-loader [borderRadius]="24" [variant]="contentLoadingVariant()" />
         }
 
         <!-- Offline indicator slot (appears at top of content) -->
@@ -6774,7 +6861,7 @@ class DsMobilePageDetailsComponent extends MobilePageBase {
       <!-- Content wrapper -->
       <div class="content-wrapper">
         @if (contentLoading()) {
-          <ds-mobile-skeleton-loader [borderRadius]="24" />
+          <ds-mobile-skeleton-loader [borderRadius]="24" [variant]="contentLoadingVariant()" />
         }
 
         <!-- Offline indicator slot (appears at top of content) -->
@@ -6785,7 +6872,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"] }, { 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"] }, { 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,
@@ -6867,7 +6954,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" />
+          <ds-mobile-skeleton-loader [borderRadius]="24" [variant]="contentLoadingVariant()" />
         }
 
         <!-- Offline indicator slot (appears at top of content) -->