@propbinder/mobile-design 0.0.2 → 0.0.21

package/package.json

@@ -1,12 +1,39 @@
-{
-  "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
-}
+{
+  "name": "@propbinder/mobile-design",
+  "version": "0.0.21",
+  "peerDependencies": {
+    "@angular/common": "^20.3.0 || ^21.0.0",
+    "@angular/core": "^20.3.0 || ^21.0.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"
+}

package/ng-package.json

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

package/src/animations/page-transitions.ts

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

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

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

package/src/components/app-layout/ds-mobile-app-layout.css

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