@propbinder/mobile-design 0.2.50 → 0.2.52

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@propbinder/mobile-design",
-  "version": "0.2.50",
+  "version": "0.2.52",
   "peerDependencies": {
     "@angular/common": "^20.3.0 || ^21.0.0",
     "@angular/core": "^20.3.0 || ^21.0.0"
@@ -8,5 +8,41 @@
   "dependencies": {
     "tslib": "^2.3.0"
   },
-  "sideEffects": false
-}
+  "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"
+}

package/ng-package.json

@@ -1,24 +0,0 @@
-{
-  "$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/src/animations/page-transitions.ts

@@ -1,165 +0,0 @@
-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

@@ -1,102 +0,0 @@
-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

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

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

@@ -1,133 +0,0 @@
-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

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

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

@@ -1,139 +0,0 @@
-/* ============================================
-   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);
-}