@propbinder/mobile-design 0.4.43 → 0.4.44

package/fesm2022/propbinder-mobile-design.mjs

@@ -607,6 +607,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImpo
  * ```html
  * <ds-logo variant="header" size="lg" />
  * ```
+ *
+ * Spinner/loading logo on the dark header surface (headerLogoUrl override, else the logomark):
+ * ```html
+ * <ds-logo variant="spinner" size="lg" />
+ * ```
  */
 class DsLogoComponent {
     whitelabelService = inject(WhitelabelService);
@@ -622,6 +627,13 @@ class DsLogoComponent {
             const headerLogoUrl = this.whitelabelService.headerLogoUrl();
             return headerLogoUrl || logoUrl || logoMarkUrl;
         }
+        if (this.variant === 'spinner') {
+            // Loading spinner sits on the dark header surface. Prefer the header override
+            // (a light/dark-surface badge), then the compact logomark, then the full logo.
+            // Distinct from 'header' which falls back to the full wordmark, not the mark.
+            const headerLogoUrl = this.whitelabelService.headerLogoUrl();
+            return headerLogoUrl || logoMarkUrl || logoUrl;
+        }
         if (this.variant === 'full') {
             // Use logo, fall back to logomark if logo doesn't exist
             return logoUrl || logoMarkUrl;
@@ -633,8 +645,8 @@ class DsLogoComponent {
     }
     get logoAlt() {
         const alt = this.whitelabelService.logoAlt();
-        // 'mark' is the compact logomark; 'full' and 'header' show the wordmark
-        return this.variant === 'mark' ? `${alt} logo` : alt;
+        // 'mark' and 'spinner' are compact marks; 'full' and 'header' show the wordmark
+        return this.variant === 'mark' || this.variant === 'spinner' ? `${alt} logo` : alt;
     }
     /**
      * Priority: customHeight input > whitelabel config logoHeight > default 32px
@@ -20243,9 +20255,9 @@ class DsMobileTabBarComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: DsMobileTabBarComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", type: DsMobileTabBarComponent, isStandalone: true, selector: "ds-mobile-tab-bar", inputs: { tabs: "tabs", avatarType: "avatarType", avatarInitials: "avatarInitials", avatarSrc: "avatarSrc", avatarIconName: "avatarIconName", profileMenuItems: "profileMenuItems", notificationCount: "notificationCount", moreMenuItems: "moreMenuItems", moreMenuLabel: "moreMenuLabel", moreMenuIcon: "moreMenuIcon", moreMenuIconActive: "moreMenuIconActive" }, outputs: { notificationClick: "notificationClick", avatarClick: "avatarClick", profileActionSelected: "profileActionSelected", moreMenuItemSelected: "moreMenuItemSelected" }, ngImport: i0, template: `
     <ion-tab-bar [attr.slot]="isDesktop() ? 'top' : 'bottom'" class="ds-tab-bar" [class.ds-tab-bar--desktop]="isDesktop()">
-      <!-- Logo (desktop only, full logo in header) -->
+      <!-- Logo (desktop only, header variant: headerLogoUrl override, else full logo) -->
       <div class="ds-tab-bar__logo">
-        <ds-logo variant="full" size="lg" />
+        <ds-logo variant="header" size="lg" />
       </div>
 
       <!-- Tab buttons container -->
@@ -20299,9 +20311,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImpo
             type: Component,
             args: [{ selector: 'ds-mobile-tab-bar', standalone: true, imports: [CommonModule, IonTabBar, IonTabButton, IonLabel, DsIconComponent, DsAvatarComponent, DsLogoComponent, DsMobileNotificationButtonComponent], template: `
     <ion-tab-bar [attr.slot]="isDesktop() ? 'top' : 'bottom'" class="ds-tab-bar" [class.ds-tab-bar--desktop]="isDesktop()">
-      <!-- Logo (desktop only, full logo in header) -->
+      <!-- Logo (desktop only, header variant: headerLogoUrl override, else full logo) -->
       <div class="ds-tab-bar__logo">
-        <ds-logo variant="full" size="lg" />
+        <ds-logo variant="header" size="lg" />
       </div>
 
       <!-- Tab buttons container -->
@@ -21882,7 +21894,7 @@ class DsMobileAppLoadingComponent {
       <div class="app-loading__backdrop" (animationend)="onAnimEnd($event)"></div>
       <div class="app-loading__content">
         <div class="app-loading__ring"></div>
-        <ds-logo class="app-loading__logo" variant="mark" />
+        <ds-logo class="app-loading__logo" variant="spinner" />
       </div>
     </div>
   `, isInline: true, styles: [":host{display:block;position:fixed;inset:0;z-index:9999}.app-loading{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center}.app-loading__backdrop{position:absolute;inset:0;background:var(--color-header-surface, #2D2356)}.app-loading__content{position:relative;display:flex;align-items:center;justify-content:center;transform:scale(1.2);z-index:1}.app-loading__ring{position:absolute;width:96px;height:96px;border-radius:50%;border:2.5px solid rgba(255,255,255,.15);border-top-color:#ffffffbf;animation:ringSpinner .75s linear infinite}@keyframes ringSpinner{to{transform:rotate(360deg)}}.app-loading--exiting .app-loading__content{animation:contentExit 1.5s var(--spring-curve-bouncy) forwards}.app-loading--exiting .app-loading__ring{animation:ringFade .15s ease forwards}.app-loading--exiting .app-loading__backdrop{animation:backdropFade .3s ease forwards}@keyframes contentExit{0%{transform:translateY(0) scale(1.2);opacity:1}to{transform:translateY(-256px) scale(0);opacity:0}}@keyframes ringFade{to{opacity:0}}@keyframes backdropFade{to{opacity:0}}\n"], dependencies: [{ kind: "component", type: DsLogoComponent, selector: "ds-logo", inputs: ["variant", "size", "customHeight", "customWidth"] }] });
@@ -21898,7 +21910,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", ngImpo
       <div class="app-loading__backdrop" (animationend)="onAnimEnd($event)"></div>
       <div class="app-loading__content">
         <div class="app-loading__ring"></div>
-        <ds-logo class="app-loading__logo" variant="mark" />
+        <ds-logo class="app-loading__logo" variant="spinner" />
       </div>
     </div>
   `, styles: [":host{display:block;position:fixed;inset:0;z-index:9999}.app-loading{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center}.app-loading__backdrop{position:absolute;inset:0;background:var(--color-header-surface, #2D2356)}.app-loading__content{position:relative;display:flex;align-items:center;justify-content:center;transform:scale(1.2);z-index:1}.app-loading__ring{position:absolute;width:96px;height:96px;border-radius:50%;border:2.5px solid rgba(255,255,255,.15);border-top-color:#ffffffbf;animation:ringSpinner .75s linear infinite}@keyframes ringSpinner{to{transform:rotate(360deg)}}.app-loading--exiting .app-loading__content{animation:contentExit 1.5s var(--spring-curve-bouncy) forwards}.app-loading--exiting .app-loading__ring{animation:ringFade .15s ease forwards}.app-loading--exiting .app-loading__backdrop{animation:backdropFade .3s ease forwards}@keyframes contentExit{0%{transform:translateY(0) scale(1.2);opacity:1}to{transform:translateY(-256px) scale(0);opacity:0}}@keyframes ringFade{to{opacity:0}}@keyframes backdropFade{to{opacity:0}}\n"] }]