@propbinder/mobile-design 0.2.48 → 0.2.50

package/ng-package.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/mobile-design-lib",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  },
+  "assets": [
+    {
+      "input": "src/styles",
+      "glob": "**/*.css",
+      "output": "styles"
+    },
+    {
+      "input": "src/components/shared",
+      "glob": "*.css",
+      "output": "styles"
+    },
+    {
+      "input": "src/assets",
+      "glob": "**/*",
+      "output": "assets"
+    }
+  ]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@propbinder/mobile-design",
-  "version": "0.2.48",
+  "version": "0.2.50",
   "peerDependencies": {
     "@angular/common": "^20.3.0 || ^21.0.0",
     "@angular/core": "^20.3.0 || ^21.0.0"
@@ -8,41 +8,5 @@
   "dependencies": {
     "tslib": "^2.3.0"
   },
-  "sideEffects": [
-    "./styles/**/*.css",
-    "./ui/**/*.css"
-  ],
-  "module": "fesm2022/propbinder-mobile-design.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "default": "./fesm2022/propbinder-mobile-design.mjs"
-    },
-    "./styles/*": {
-      "default": "./styles/*"
-    },
-    "./styles/globals.css": {
-      "default": "./styles/globals.css"
-    },
-    "./styles/ionic.css": {
-      "default": "./styles/ionic.css"
-    },
-    "./styles/mobile-common.css": {
-      "default": "./styles/mobile-common.css"
-    },
-    "./styles/mobile-page-base.css": {
-      "default": "./styles/mobile-page-base.css"
-    },
-    "./ui/*": {
-      "default": "./ui/*"
-    },
-    "./assets/*": {
-      "default": "./assets/*"
-    }
-  },
-  "types": "./index.d.ts"
-}
+  "sideEffects": false
+}

package/src/animations/page-transitions.ts

@@ -0,0 +1,165 @@
+import { Animation } from '@ionic/angular';
+import { createAnimation } from '@ionic/core';
+
+/**
+ * Custom page transition - iOS-style push/pop with dark overlay
+ * 
+ * FORWARD (navigating TO detail):
+ * - Entering page (detail): slides in from RIGHT, z-index 10 (on top)
+ * - Leaving page (list): slides LEFT slightly, z-index 9 (underneath)
+ * - Dark overlay: fades in on leaving page (opacity 0 to 0.70)
+ * 
+ * REVERSE (swipe back FROM detail):
+ * - Entering page (list): slides in from LEFT, z-index 9 (underneath)
+ * - Leaving page (detail): slides out to RIGHT, z-index 10 (on top)
+ * - Dark overlay: fades out on entering page (main page underneath, opacity 0.70 to 0)
+ */
+export const customPageTransition = (_: HTMLElement, opts: any): Animation => {
+  const DURATION = 600;
+  const isBackDirection = opts.direction === 'back';
+  
+  const rootTransition = createAnimation()
+    .duration(opts.duration || DURATION)
+    .easing('cubic-bezier(0.32,0.72,0,1)');
+
+  // Create overlay element
+  // Forward: overlay on leaving page (main page underneath)
+  // Back: overlay on entering page (main page underneath)
+  const overlayEl = document.createElement('div');
+  overlayEl.style.position = 'absolute';
+  overlayEl.style.top = '0';
+  overlayEl.style.left = '0';
+  overlayEl.style.right = '0';
+  overlayEl.style.bottom = '0';
+  overlayEl.style.backgroundColor = '#000';
+  overlayEl.style.opacity = isBackDirection ? '0.70' : '0';
+  overlayEl.style.zIndex = '1';
+  overlayEl.style.pointerEvents = 'none';
+  
+  // Add overlay to the page that should have it (main page underneath)
+  // Forward: leaving page is main page
+  // Back: entering page is main page
+  const targetPageEl = isBackDirection ? opts.enteringEl : opts.leavingEl;
+  if (targetPageEl) {
+    const currentPosition = window.getComputedStyle(targetPageEl).position;
+    if (currentPosition === 'static') {
+      targetPageEl.style.position = 'relative';
+    }
+    targetPageEl.appendChild(overlayEl);
+  }
+  
+  // Entering page animation
+  const enteringPage = createAnimation()
+    .addElement(opts.enteringEl)
+    .beforeRemoveClass('ion-page-invisible')
+    .beforeStyles({
+      'z-index': isBackDirection ? '9' : '10',
+      'opacity': '1'
+    })
+    .fromTo('transform', 
+      isBackDirection ? 'translateX(-20%)' : 'translateX(100%)',  
+      'translateX(0)'
+    );
+
+  // Leaving page animation
+  const leavingPage = createAnimation()
+    .addElement(opts.leavingEl)
+    .beforeStyles({
+      'z-index': isBackDirection ? '10' : '9'
+    })
+    .fromTo('transform', 
+      'translateX(0)', 
+      isBackDirection ? 'translateX(100%)' : 'translateX(-20%)'
+    );
+
+  // Overlay fade animation
+  const overlayAnimation = createAnimation()
+    .addElement(overlayEl)
+    .fromTo('opacity',
+      isBackDirection ? '0.70' : '0',
+      isBackDirection ? '0' : '0.70'
+    );
+
+  // Clean up overlay after animation completes
+  rootTransition.afterAddWrite(() => {
+    if (overlayEl && overlayEl.parentNode) {
+      overlayEl.parentNode.removeChild(overlayEl);
+    }
+  });
+
+  rootTransition.addAnimation([enteringPage, leavingPage, overlayAnimation]);
+  
+  return rootTransition;
+};
+
+/**
+ * Custom back transition - iOS style where page slides out to reveal page underneath
+ * The entering page (inquiries) slides in from the LEFT underneath
+ * The leaving page (detail) slides out to the RIGHT on top
+ * Dark overlay: fades out on entering page (main page underneath, opacity 0.70 to 0)
+ */
+export const customBackTransition = (_: HTMLElement, opts: any): Animation => {
+  const DURATION = 700;
+  
+  const rootTransition = createAnimation()
+    .duration(opts.duration || DURATION)
+    .easing('cubic-bezier(0.32,0.72,0,1)');
+
+  // Create overlay element for the entering page (main page underneath)
+  // This page should already have an overlay from the forward transition, but we'll ensure it exists
+  const overlayEl = document.createElement('div');
+  overlayEl.style.position = 'absolute';
+  overlayEl.style.top = '0';
+  overlayEl.style.left = '0';
+  overlayEl.style.right = '0';
+  overlayEl.style.bottom = '0';
+  overlayEl.style.backgroundColor = '#000';
+  overlayEl.style.opacity = '0.70';
+  overlayEl.style.zIndex = '1';
+  overlayEl.style.pointerEvents = 'none';
+  
+  // Ensure entering page has relative positioning for overlay
+  const enteringPageEl = opts.enteringEl as HTMLElement;
+  if (enteringPageEl) {
+    const currentPosition = window.getComputedStyle(enteringPageEl).position;
+    if (currentPosition === 'static') {
+      enteringPageEl.style.position = 'relative';
+    }
+    enteringPageEl.appendChild(overlayEl);
+  }
+
+  // Entering page: underneath, sliding in from LEFT (-20% to 0)
+  const enteringPage = createAnimation()
+    .addElement(opts.enteringEl)
+    .beforeRemoveClass('ion-page-invisible')
+    .beforeStyles({
+      'z-index': '9',
+      'opacity': '1'
+    })
+    .fromTo('transform', 'translateX(-20%)', 'translateX(0)');
+
+  // Leaving page: on top, sliding out to the RIGHT (0 to 100%)
+  const leavingPage = createAnimation()
+    .addElement(opts.leavingEl)
+    .beforeStyles({
+      'z-index': '10',
+    })
+    .fromTo('transform', 'translateX(0)', 'translateX(100%)');
+
+  // Overlay fade out animation on the entering page (main page)
+  const overlayAnimation = createAnimation()
+    .addElement(overlayEl)
+    .fromTo('opacity', '0.70', '0');
+
+  // Clean up overlay after animation completes
+  rootTransition.afterAddWrite(() => {
+    if (overlayEl && overlayEl.parentNode) {
+      overlayEl.parentNode.removeChild(overlayEl);
+    }
+  });
+
+  rootTransition.addAnimation([enteringPage, leavingPage, overlayAnimation]);
+  
+  return rootTransition;
+};
+

package/src/components/action-list-item/ds-mobile-action-list-item.ts

@@ -0,0 +1,102 @@
+import { Component, input, output } from '@angular/core';
+import { DsMobileListItemComponent } from '../list-item/ds-mobile-list-item';
+
+/**
+ * DsMobileActionListItemComponent
+ *
+ * Specialized list item for action sheets and menus.
+ * Wraps ds-mobile-list-item with action-specific styling:
+ * - Vertically centered content
+ * - Interactive by default
+ * - No dividers (controlled per-item)
+ *
+ * @example
+ * ```html
+ * <ds-mobile-action-list-item
+ *   title="Edit"
+ *   [showDivider]="true"
+ *   (itemClick)="handleEdit()">
+ *   <ds-icon content-leading name="remixEditLine" size="20px" />
+ * </ds-mobile-action-list-item>
+ * ```
+ */
+@Component({
+  selector: 'ds-mobile-action-list-item',
+  standalone: true,
+  imports: [DsMobileListItemComponent],
+  template: `
+    <ds-mobile-list-item [title]="title()" [interactive]="true" [enableLongPress]="false" [showDivider]="showDivider()" [disabled]="disabled()" (itemClick)="itemClick.emit()">
+      <div class="action-icon-wrapper" content-leading>
+        <ng-content select="[action-icon]" />
+      </div>
+
+      <div content-trailing>
+        <ng-content select="[content-trailing]" />
+      </div>
+    </ds-mobile-list-item>
+  `,
+  styles: [
+    `
+      /* Center all content vertically for action items */
+      :host ::ng-deep ds-mobile-list-item .list-item-inner {
+        align-items: center;
+      }
+
+      /* Center icon within leading slot */
+      :host ::ng-deep ds-mobile-list-item .content-leading {
+        align-items: center;
+        justify-content: center;
+      }
+
+      /* Wrapper div must fill parent height and center icon */
+      :host ::ng-deep .action-icon-wrapper {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+      }
+
+      /* Remove gap from content-main for single-line actions */
+      :host ::ng-deep ds-mobile-list-item .content-main {
+        gap: 0;
+        justify-content: center;
+      }
+
+      /* Remove blue focus border/ring and set Ionic variables */
+      :host {
+        outline: none;
+        --background-focused: transparent;
+        --background-activated: transparent;
+        -webkit-tap-highlight-color: transparent;
+      }
+
+      :host ::ng-deep ds-mobile-list-item {
+        outline: none;
+      }
+    `,
+  ],
+})
+export class DsMobileActionListItemComponent {
+  /**
+   * Action title text
+   */
+  title = input.required<string>();
+
+  /**
+   * Whether to show divider below item
+   * @default false
+   */
+  showDivider = input<boolean>(false);
+
+  /**
+   * Whether the action is disabled
+   * @default false
+   */
+  disabled = input<boolean>(false);
+
+  /**
+   * Emits when the action item is clicked
+   */
+  itemClick = output<void>();
+}

package/src/components/action-list-item/index.ts

@@ -0,0 +1,2 @@
+export * from './ds-mobile-action-list-item';
+

package/src/components/app-icon/ds-app-icon.ts

@@ -0,0 +1,133 @@
+import { Component, Input, inject, computed } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { WhitelabelService } from '../../services/whitelabel.service';
+
+export type AppIconSize = 'sm' | 'md' | 'lg' | 'xl';
+
+/**
+ * DsAppIconComponent
+ * 
+ * Displays the organization's logomark styled as an app icon with rounded corners
+ * and shadow. The logomark fill color adapts to the background.
+ * Perfect for sign-in pages, splash screens, etc.
+ * 
+ * Uses percentage-based padding and border-radius for perfect proportional scaling.
+ * 
+ * @example
+ * Sign-in page (large):
+ * ```html
+ * <ds-app-icon size="xl" />
+ * ```
+ * 
+ * Settings preview (small):
+ * ```html
+ * <ds-app-icon size="sm" />
+ * ```
+ */
+@Component({
+  selector: 'ds-app-icon',
+  standalone: true,
+  imports: [CommonModule],
+  host: {
+    '[class]': 'sizeClass()'
+  },
+  template: `
+    <div class="app-icon">
+      <img 
+        [src]="whitelabelService.logoMarkUrl()"
+        [alt]="whitelabelService.logoAlt() + ' app icon'"
+        class="app-icon__logo"
+      />
+    </div>
+  `,
+  styles: [`
+    :host {
+      display: inline-block;
+      flex-shrink: 0;
+      vertical-align: top;
+    }
+    
+    .app-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: var(--app-icon-background, var(--color-app-icon-surface, #6B5FF5));
+      /* Rounded corners - scales with size */
+      border-radius: 20%;
+      /* Padding scales with size - logomark fills ~70% of container */
+      padding: 15%;
+      width: 100%;
+      height: 100%;
+    }
+    
+    .app-icon__logo {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+      display: block;
+    }
+    
+    /* Size variants - applied to :host, everything inside scales automatically! */
+    :host(.app-icon--sm) { 
+      width: 16px; 
+      height: 16px;
+    }
+    
+    :host(.app-icon--sm) .app-icon {
+      box-shadow: 
+        inset 0 0 0.75px 0 rgba(255, 255, 255, 0.5),
+        inset 0 0 15px 0 rgba(255, 255, 255, 0.2);
+    }
+    
+    :host(.app-icon--md) { 
+      width: 24px; 
+      height: 24px;
+    }
+    
+    :host(.app-icon--md) .app-icon {
+      box-shadow: 
+        inset 0 0 1.5px 0 rgba(255, 255, 255, 0.5),
+        inset 0 0 30px 0 rgba(255, 255, 255, 0.2);
+    }
+    
+    :host(.app-icon--lg) { 
+      width: 32px; 
+      height: 32px;
+    }
+    
+    :host(.app-icon--lg) .app-icon {
+      box-shadow: 
+        inset 0 0 2.25px 0 rgba(255, 255, 255, 0.5),
+        inset 0 0 45px 0 rgba(255, 255, 255, 0.2);
+    }
+    
+    :host(.app-icon--xl) { 
+      width: 64px; 
+      height: 64px;
+    }
+    
+    :host(.app-icon--xl) .app-icon {
+      box-shadow: 
+        inset 0 0 3px 0 rgba(255, 255, 255, 0.5),
+        inset 0 0 60px 0 rgba(255, 255, 255, 0.2);
+    }
+  `]
+})
+export class DsAppIconComponent {
+  whitelabelService = inject(WhitelabelService);
+  
+  /**
+   * Size of the app icon
+   * - sm: 16x16px (padding: 2.4px, radius: 3.2px)
+   * - md: 32x32px (padding: 4.8px, radius: 6.4px)
+   * - lg: 48x48px (padding: 7.2px, radius: 9.6px)
+   * - xl: 64x64px (padding: 9.6px, radius: 12.8px)
+   */
+  @Input() size: AppIconSize = 'lg';
+  
+  /**
+   * Computed CSS class for size variant
+   */
+  sizeClass = computed(() => `app-icon app-icon--${this.size}`);
+}
+

package/src/components/app-icon/index.ts

@@ -0,0 +1,2 @@
+export { DsAppIconComponent, type AppIconSize } from './ds-app-icon';
+

package/src/components/attachment-preview/ds-mobile-attachment-preview.css

@@ -0,0 +1,139 @@
+/* ============================================
+   ATTACHMENT PREVIEW COMPONENT
+   ============================================ */
+
+:host {
+  display: block;
+}
+
+.attachment-preview {
+  position: relative;
+  width: 96px;
+  height: 96px;
+  border-radius: 12px;
+  overflow: visible;
+}
+
+.attachment-preview.loading {
+  opacity: 0.8;
+}
+
+/* ============================================
+   IMAGE PREVIEW
+   ============================================ */
+
+.preview-image {
+  width: 100%;
+  height: 100%;
+  display: block;
+  border-radius: 12px;
+  border: 1px solid var(--border-color-default);
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
+/* ============================================
+   FILE PREVIEW
+   ============================================ */
+
+.preview-file {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 10px;
+  background: var(--color-background-neutral-primary, #ffffff);
+  border: 1px solid var(--border-color-default);
+  border-radius: 12px;
+  padding: 8px;
+  padding-bottom: 10px;
+}
+
+.file-info {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  width: 100%;
+  min-width: 0;
+}
+
+.file-name {
+  font-family: 'Brockmann', sans-serif;
+  font-size: var(--font-size-xs);
+  font-weight: 400;
+  color: var(--text-color-default-primary);
+  text-align: center;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: 1.2;
+}
+
+.file-type-label {
+  font-family: 'Brockmann', sans-serif;
+  font-size: var(--font-size-xs);
+  font-weight: 400;
+  color: var(--text-color-default-tertiary);
+  line-height: 1;
+}
+
+.file-avatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* File type avatar colors */
+.file-avatar ::ng-deep .file-pdf .avatar--icon {
+  background-color: #ff5757 !important;
+}
+
+.file-avatar ::ng-deep .file-doc .avatar--icon,
+.file-avatar ::ng-deep .file-docx .avatar--icon {
+  background-color: var(--color-blue-base, #3B82F6) !important;
+}
+
+.file-avatar ::ng-deep .file-xls .avatar--icon,
+.file-avatar ::ng-deep .file-xlsx .avatar--icon {
+  background-color: var(--color-green-base, #10B981) !important;
+}
+
+.file-avatar ::ng-deep .file-other .avatar--icon {
+  background-color: var(--text-color-default-tertiary, #999999) !important;
+}
+
+/* ============================================
+   REMOVE BUTTON
+   ============================================ */
+
+.remove-btn {
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(8px);
+  border: 2px solid white;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  padding: 0;
+}
+
+.remove-btn:hover {
+  background: rgba(0, 0, 0, 0.8);
+  transform: scale(1.05);
+}
+
+.remove-btn:active {
+  transform: scale(0.95);
+}