@propbinder/mobile-design 0.0.1 → 0.0.2

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/mobile-design-lib",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -1,39 +1,12 @@
-{
-  "name": "@propbinder/mobile-design",
-  "version": "0.0.1",
-  "peerDependencies": {
-    "@angular/common": "^20.3.0",
-    "@angular/core": "^20.3.0"
-  },
-  "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"
-    },
-    "./ui/*": {
-      "default": "./ui/*"
-    },
-    "./assets/*": {
-      "default": "./assets/*"
-    }
-  },
-  "types": "./index.d.ts"
-}
+{
+  "name": "@propbinder/mobile-design",
+  "version": "0.0.2",
+  "peerDependencies": {
+    "@angular/common": "^20.3.0",
+    "@angular/core": "^20.3.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false
+}

package/src/animations/page-transitions.ts

@@ -0,0 +1,86 @@
+import { Animation } from '@ionic/angular';
+import { createAnimation } from '@ionic/core';
+
+/**
+ * Custom page transition - iOS-style push/pop
+ * 
+ * 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)
+ * 
+ * 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)
+ */
+export const customPageTransition = (_: HTMLElement, opts: any): Animation => {
+  const DURATION = 400;
+  const isBackDirection = opts.direction === 'back';
+  
+  const rootTransition = createAnimation()
+    .duration(opts.duration || DURATION)
+    .easing('cubic-bezier(0.32,0.72,0,1)');
+
+  // 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%)'
+    );
+
+  rootTransition.addAnimation([enteringPage, leavingPage]);
+  
+  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
+ */
+export const customBackTransition = (_: HTMLElement, opts: any): Animation => {
+  const DURATION = 400;
+  
+  const rootTransition = createAnimation()
+    .duration(opts.duration || DURATION)
+    .easing('cubic-bezier(0.32,0.72,0,1)');
+
+  // 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%)');
+
+  rootTransition.addAnimation([enteringPage, leavingPage]);
+  
+  return rootTransition;
+};
+

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

@@ -0,0 +1,83 @@
+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 content-leading>
+        <ng-content select="[action-icon]" />
+      </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;
+    }
+    
+    /* Remove gap from content-main for single-line actions */
+    :host ::ng-deep ds-mobile-list-item .content-main {
+      gap: 0;
+      justify-content: center;
+    }
+  `]
+})
+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-layout/ds-mobile-app-layout.css

@@ -0,0 +1,343 @@
+/* ============================================
+   HOST & BASE LAYOUT
+   ============================================ */
+
+:host {
+  display: block;
+  height: 100vh; /* Fallback for older browsers */
+  height: 100svh; /* Small viewport height - excludes browser UI */
+}
+
+/* ============================================
+   IONIC OVERRIDES - TABS
+   ============================================ */
+
+ion-tabs {
+  height: 100%;
+  background: var(--color-brand-secondary);
+}
+
+/* ============================================
+   IONIC OVERRIDES - HEADER
+   ============================================ */
+
+ion-header {
+  background: var(--color-brand-secondary);
+  box-shadow: none;
+  position: relative;
+  z-index: 10;
+}
+
+/* Gradient fade effect at bottom of header */
+ion-header::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 30px;
+  background: linear-gradient(
+    to bottom,
+    var(--color-brand-secondary) 0%,
+    transparent 100%
+  );
+  pointer-events: none;
+  z-index: 1;
+}
+
+ion-header ion-toolbar {
+  --background: var(--color-brand-secondary);
+  --border-width: 0;
+  --box-shadow: none;
+  --padding-top: var(--ion-safe-area-top, 0px);
+  --padding-bottom: 0;
+  --padding-start: 0;
+  --padding-end: 0;
+}
+
+ion-header.header-translucent ion-toolbar {
+  --backdrop-filter: none;
+}
+
+/* ============================================
+   IONIC OVERRIDES - CONTENT
+   ============================================ */
+
+ion-content {
+  --background: transparent;
+  --padding-top: 0;
+  --padding-start: 0;
+  --padding-end: 0;
+  --padding-bottom: 0;
+  /* Explicitly avoid creating stacking context */
+  isolation: auto;
+  border-radius: 24px;
+  overflow: hidden;
+}
+
+ion-content::part(scroll) {
+  /* Ensure smooth scrolling on iOS */
+  -webkit-overflow-scrolling: touch;
+  /* Block browser overscroll - ion-refresher provides its own elastic pull animation */
+  overscroll-behavior-y: none;
+}
+
+/* ============================================
+   IONIC OVERRIDES - REFRESHER
+   ============================================ */
+
+/* Ionic Refresher Styling - provides native-feeling elastic pull */
+ion-refresher {
+  z-index: 0; /* Below everything */
+}
+
+ion-refresher-content {
+  --color: white;
+}
+
+/* ============================================
+   TAB BAR
+   ============================================ */
+
+ion-tab-bar {
+  --background: var(--color-background-neutral-primary);
+  padding: 8px 0;
+}
+
+/* Mobile: Bottom tab bar styling */
+ion-tab-bar[slot="bottom"] {
+  border-top: 1px solid var(--border-color-default);
+  /* Add padding for home indicator (safe-area) on both iOS and Android */
+  padding-bottom: calc(var(--ion-safe-area-bottom, 0px) + 8px);
+  /* Also ensure proper padding at the top */
+  padding-top: 8px;
+}
+
+/* Desktop: Top tab bar styling - floating overlay */
+ion-tab-bar[slot="top"] {
+  --background: transparent;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  border-bottom: none;
+  padding: 12px 0;
+  max-width: 1400px;
+  margin: 0 auto;
+  display: flex;
+  justify-content: flex-start;
+  gap: 8px;
+}
+
+/* On larger screens or PWA mode, remove the extra Safari toolbar padding */
+@media (min-width: 769px) {
+  ion-tab-bar {
+    padding-bottom: var(--ion-safe-area-bottom, 0px);
+  }
+}
+
+@media (display-mode: standalone) {
+  ion-tab-bar {
+    padding-bottom: var(--ion-safe-area-bottom, 0px) !important;
+  }
+}
+
+ion-tab-button {
+  --color: var(--text-color-default-tertiary);
+  --color-selected: var(--color-brand-base);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+}
+
+/* Desktop: Horizontal pill layout */
+@media (min-width: 768px) {
+  ion-tab-button {
+    flex-direction: row;
+    height: 36px;
+    padding: 0px 12px;
+    border-radius: 40px;
+    transition: background-color 0.2s ease;
+    width: -moz-fit-content;
+    width: fit-content;
+    min-width: auto;
+    flex: 0 0 auto;
+  }
+  
+  ion-tab-button .button-native {
+    width: auto;
+    padding: 0;
+  }
+  
+  ion-tab-button a,
+  ion-tab-button span {
+    width: auto;
+  }
+  
+  ion-tab-button ds-icon {
+    margin-right: 4px;
+  }
+
+  ion-tab-button.tab-selected {
+    background: var(--color-brand-base);
+  }
+}
+
+ion-tab-button ion-label {
+  font-size: var(--font-size-2xs);
+}
+
+/* Desktop: Larger label, always white */
+@media (min-width: 768px) {
+  ion-tab-button ion-label {
+    font-size: var(--font-size-base);
+    font-weight: 500;
+    line-height: 24px;
+    letter-spacing: -0.64px;
+    color: white;
+  }
+}
+
+ion-tab-button ds-icon {
+  color: var(--text-color-default-tertiary);
+}
+
+ion-tab-button.tab-selected ds-icon {
+  color: var(--color-brand-base);
+}
+
+/* Desktop: Icon sizing and colors */
+@media (min-width: 768px) {
+  ion-tab-button ds-icon {
+    color: white;
+    width: 20px;
+    height: 20px;
+  }
+  
+  ion-tab-button.tab-selected ds-icon {
+    color: white;
+  }
+}
+
+/* ============================================
+   HEADER VARIANT: HOME
+   ============================================ */
+
+.header-home {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  /* Add safe area padding for Android/iOS notched devices */
+  padding-top: calc(12px + var(--ion-safe-area-top, 0px));
+  background: var(--color-brand-secondary);
+  position: relative;
+  z-index: 2;
+}
+
+.logomark {
+  height: 28px;
+  width: auto;
+  flex-shrink: 0;
+}
+
+.header-home__actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+}
+
+.header-home__actions ds-avatar {
+  cursor: pointer;
+  transition: opacity var(--transition-duration-fast) var(--ease-smooth);
+}
+
+.header-home__actions ds-avatar:hover {
+  opacity: 0.9;
+}
+
+.header-home__actions ds-avatar:active {
+  opacity: 0.8;
+}
+
+/* ============================================
+   HEADER VARIANT: SIMPLE
+   ============================================ */
+
+.header-simple {
+  padding: 12px 16px;
+  /* Add safe area padding for Android/iOS notched devices */
+  padding-top: calc(12px + var(--ion-safe-area-top, 0px));
+  background: transparent;
+}
+
+.header-simple .header-title {
+  font-size: var(--font-size-xl);
+  font-weight: 600;
+  color: white;
+  margin: 0;
+}
+
+/* ============================================
+   HEADER VARIANT: BACK
+   ============================================ */
+
+.header-back {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  /* Add safe area padding for Android/iOS notched devices */
+  padding-top: calc(12px + var(--ion-safe-area-top, 0px));
+  background: transparent;
+}
+
+.back-button {
+  background: none;
+  border: none;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: white;
+  transition: opacity var(--transition-duration-fast) var(--ease-smooth);
+}
+
+.back-button:hover {
+  opacity: 0.8;
+}
+
+.back-button:active {
+  opacity: 0.6;
+}
+
+.back-button ds-icon {
+  color: white;
+}
+
+.header-back .header-title {
+  font-size: var(--font-size-xl);
+  font-weight: 600;
+  color: white;
+  margin: 0;
+  flex: 1;
+}
+
+/* ============================================
+   EXPANDABLE HEADER (for home page pattern)
+   ============================================ */
+
+.header-expandable {
+  background: var(--color-brand-secondary);
+  padding: 24px 16px;
+  color: white;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+