@propbinder/mobile-design 0.2.50 → 0.2.52

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

@@ -1,182 +0,0 @@
-import { Component, input, output } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { DsIconComponent } from '@propbinder/design-system';
-import { DsAvatarComponent } from '@propbinder/design-system';
-
-/**
- * DsMobileContactListItemComponent
- * 
- * Specialized interactive component for displaying contacts.
- * Displays contact name with avatar initials and metadata (person name + phone number).
- * Similar styling to file attachments with rounded corners and hover states.
- * 
- * @example
- * ```html
- * <ds-mobile-contact-list-item
- *   [name]="'Mortensen & Søn ApS'"
- *   [initials]="'M'"
- *   [contactPerson]="'John Mortensen'"
- *   [phoneNumber]="'+45 12 34 56 78'"
- *   [clickable]="true"
- *   (contactClick)="openContact()">
- * </ds-mobile-contact-list-item>
- * ```
- */
-@Component({
-  selector: 'ds-mobile-contact-list-item',
-  standalone: true,
-  imports: [CommonModule, DsIconComponent, DsAvatarComponent],
-  host: {
-    '[class.clickable]': 'clickable()',
-    '(click)': 'handleContactClick()'
-  },
-  styles: [`
-    :host {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      padding: 10px 12px;
-      background: var(--color-background-neutral-secondary, #f5f5f5);
-      border-radius: 16px;
-      transition: all 0.2s ease;
-    }
-    
-    :host.clickable {
-      cursor: pointer;
-    }
-    
-    :host.clickable:hover {
-      background: var(--color-background-neutral-secondary-hover, #ebebeb);
-    }
-    
-    :host.clickable:active {
-      transform: scale(0.98);
-    }
-    
-    .contact-avatar {
-      flex-shrink: 0;
-    }
-
-    .contact-content {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      gap: 2px;
-      flex: 1;
-      min-width: 0;
-    }
-    
-    .contact-name {
-      font-family: 'Brockmann', sans-serif;
-      font-size: var(--font-size-sm);
-      font-weight: 600;
-      line-height: 20px;
-      letter-spacing: -0.3px;
-      color: var(--color-text-primary, #1a1a1a);
-      margin: 0;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-    
-    .contact-meta {
-      font-family: 'Brockmann', sans-serif;
-      font-size: var(--font-size-xs);
-      font-weight: 400;
-      line-height: 1.2;
-      letter-spacing: -0.26px;
-      color: var(--color-text-tertiary, #737373);
-      display: flex;
-      align-items: center;
-      gap: 4px;
-      margin: 0;
-    }
-    
-    .meta-separator {
-      color: var(--color-text-tertiary, #a0a0a0);
-    }
-    
-    .contact-trailing {
-      display: flex;
-      align-items: center;
-      color: var(--color-text-tertiary, #a3a3a3);
-      flex-shrink: 0;
-    }
-  `],
-  template: `
-    <div class="contact-avatar">
-      <ds-avatar
-        [initials]="initials()"
-        type="initials"
-        size="md"
-      />
-    </div>
-    
-    <div class="contact-content">
-      <div class="contact-name">{{ name() }}</div>
-      
-      @if (contactPerson() || phoneNumber()) {
-        <div class="contact-meta">
-          @if (contactPerson()) {
-            <span>{{ contactPerson() }}</span>
-          }
-          @if (contactPerson() && phoneNumber()) {
-            <span class="meta-separator">·</span>
-          }
-          @if (phoneNumber()) {
-            <span>{{ phoneNumber() }}</span>
-          }
-        </div>
-      }
-    </div>
-    
-    @if (showChevron()) {
-      <div class="contact-trailing">
-        <ds-icon name="remixArrowRightSLine" size="20px" />
-      </div>
-    }
-  `
-})
-export class DsMobileContactListItemComponent {
-  /**
-   * Contact/company name
-   */
-  name = input.required<string>();
-  
-  /**
-   * Avatar initials (usually 1-2 letters)
-   */
-  initials = input.required<string>();
-  
-  /**
-   * Contact person name (optional)
-   */
-  contactPerson = input<string>('');
-  
-  /**
-   * Phone number (optional)
-   */
-  phoneNumber = input<string>('');
-  
-  /**
-   * Whether the contact item is clickable
-   */
-  clickable = input<boolean>(true);
-  
-  /**
-   * Whether to show chevron icon
-   */
-  showChevron = input<boolean>(true);
-  
-  /**
-   * Emits when the contact item is clicked (if clickable)
-   */
-  contactClick = output<void>();
-  
-  handleContactClick(): void {
-    if (this.clickable()) {
-      this.contactClick.emit();
-    }
-  }
-}
-

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

@@ -1,2 +0,0 @@
-export { DsMobileContactListItemComponent } from './ds-mobile-contact-list-item';
-

package/src/components/content/ds-mobile-content.ts

@@ -1,139 +0,0 @@
-import { Component, input } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-/**
- * DsMobileContentComponent
- *
- * Main content container for mobile pages with flexible layout options.
- * Provides consistent spacing and layout patterns.
- *
- * **Note:** For production use, prefer `ds-mobile-section` for individual sections.
- * This component is maintained for grid layouts and prototyping.
- *
- * @example
- * ```html
- * <!-- Default: stacked layout -->
- * <ds-mobile-content>
- *   <ds-mobile-section>...</ds-mobile-section>
- *   <ds-mobile-section>...</ds-mobile-section>
- * </ds-mobile-content>
- *
- * <!-- Grid layout -->
- * <ds-mobile-content layout="grid-2">
- *   <div>Grid item 1</div>
- *   <div>Grid item 2</div>
- * </ds-mobile-content>
- * ```
- */
-@Component({
-  selector: 'ds-mobile-content',
-  standalone: true,
-  imports: [CommonModule],
-  host: {
-    '[class.layout-stacked]': 'layout() === "stacked"',
-    '[class.layout-grid-2]': 'layout() === "grid-2"',
-    '[class.layout-grid-3]': 'layout() === "grid-3"',
-  },
-  styles: [
-    `
-      :host {
-        display: flex;
-        flex-direction: column;
-        gap: 16px;
-        max-width: 640px;
-        margin: 0 auto;
-      }
-
-      /* Grid layouts */
-      :host.layout-grid-2 {
-        display: grid;
-        grid-template-columns: repeat(2, 1fr);
-        gap: 16px;
-      }
-
-      :host.layout-grid-3 {
-        display: grid;
-        grid-template-columns: repeat(3, 1fr);
-        gap: 16px;
-      }
-
-      @media (max-width: 768px) {
-        :host.layout-grid-2,
-        :host.layout-grid-3 {
-          grid-template-columns: 1fr;
-        }
-      }
-    `,
-  ],
-  template: `<ng-content />`,
-})
-export class DsMobileContentComponent {
-  /**
-   * Layout mode for content sections
-   * - 'stacked' - Vertical stack with 32px gap (default)
-   * - 'grid-2' - 2 column grid
-   * - 'grid-3' - 3 column grid (stacks on mobile)
-   */
-  layout = input<'stacked' | 'grid-2' | 'grid-3'>('stacked');
-}
-
-/**
- * SectionHeaderComponent
- *
- * Semantic placeholder header for content sections.
- * Used for prototyping/placeholders.
- */
-@Component({
-  selector: 'section-header',
-  standalone: true,
-  host: {
-    '[class.w-half]': 'width() === "half"',
-    '[class.w-third]': 'width() === "third"',
-    '[class.w-full]': 'width() === "full"',
-  },
-  styles: [
-    `
-      :host {
-        height: 20px;
-        border-radius: 8px;
-        background: var(--color-background-neutral-tertiary);
-        display: block;
-      }
-
-      :host.w-half {
-        width: 50%;
-      }
-      :host.w-third {
-        width: 33%;
-      }
-      :host.w-full {
-        width: 100%;
-      }
-    `,
-  ],
-  template: `<ng-content />`,
-})
-export class SectionHeaderComponent {
-  /** Width of the header placeholder */
-  width = input<'half' | 'third' | 'full'>('half');
-}
-
-/**
- * ContentRowComponent
- *
- * Horizontal row container for content items.
- */
-@Component({
-  selector: 'content-row',
-  standalone: true,
-  styles: [
-    `
-      :host {
-        display: flex;
-        gap: 12px;
-      }
-    `,
-  ],
-  template: `<ng-content />`,
-})
-export class ContentRowComponent {}

package/src/components/content/index.ts

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

package/src/components/dropdown/ds-mobile-dropdown.css

@@ -1,199 +0,0 @@
-/* Override Ionic Popover default styles using their CSS variables */
-ion-popover {
-  --background: transparent;
-  --box-shadow: none;
-  --backdrop-opacity: 0;
-  --max-width: 192px;
-}
-
-/* Target the popover content wrapper - APPLY BLUR HERE */
-ion-popover::part(content) {
-  background: rgba(255, 255, 255, 0.5) !important;
-  backdrop-filter: blur(12px) !important;
-  -webkit-backdrop-filter: blur(12px) !important;
-  box-shadow: 
-    0 2px 8px rgba(0, 0, 0, 0.08),
-    0 4px 16px rgba(0, 0, 0, 0.12) !important;
-  border: 1px solid rgba(255, 255, 255, 1) !important;
-  border-radius: 16px !important;
-  padding: 4px !important;
-  outline: none !important;
-  max-width: 192px !important;
-}
-
-ion-popover::part(backdrop) {
-  background: transparent !important;
-}
-
-/* Dropdown container - inherits frosted glass from parent */
-.ds-mobile-dropdown {
-  position: relative;
-  width: 100%;
-  background: transparent !important;
-  border: none !important;
-  box-shadow: none !important;
-  overflow-y: auto;
-  animation: slideIn var(--spring-duration-medium) var(--spring-curve-bouncy);
-  padding: 0;
-}
-
-/* Position above anchor */
-.ds-mobile-dropdown--above {
-  /* No specific positioning needed - Ionic handles it */
-  animation: slideUp var(--spring-duration-medium) var(--spring-curve-bouncy);
-}
-
-/* Position below anchor */
-.ds-mobile-dropdown--below {
-  /* No specific positioning needed - Ionic handles it */
-}
-
-/* Alignment */
-.ds-mobile-dropdown--align-start {
-  /* Ionic handles alignment */
-}
-
-.ds-mobile-dropdown--align-end {
-  /* Ionic handles alignment */
-}
-
-/* Dropdown item - three-slot layout */
-.ds-mobile-dropdown__item {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 4px 12px;
-  background: none;
-  width: 100%;
-  text-align: left;
-  cursor: pointer;
-  transition: background 0.15s ease;
-  min-height: 40px;
-  justify-content: flex-start;
-  border-radius: 14px;
-}
-
-.ds-mobile-dropdown__item:last-child {
-  border-bottom: none;
-}
-
-.ds-mobile-dropdown__item:hover:not(.ds-mobile-dropdown__item--disabled) {
-  background: rgba(0, 0, 0, 0.04);
-}
-
-.ds-mobile-dropdown__item:active:not(.ds-mobile-dropdown__item--disabled) {
-  background: rgba(0, 0, 0, 0.08);
-  transition: background 0s;
-}
-
-/* Disabled state */
-.ds-mobile-dropdown__item--disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-/* Three-slot layout */
-.ds-mobile-dropdown__slot {
-  display: flex;
-  align-items: center;
-}
-
-/* Leading slot - fixed width for icons/avatars */
-.ds-mobile-dropdown__slot--leading {
-  flex-shrink: 0;
-  justify-content: center;
-}
-
-/* Main slot - flexible width for labels */
-.ds-mobile-dropdown__slot--main {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  text-align: left;
-  align-items: flex-start;
-}
-
-/* Trailing slot - fixed width for trailing icons */
-.ds-mobile-dropdown__slot--trailing {
-  flex-shrink: 0;
-  margin-left: auto;
-}
-
-/* Label text */
-.ds-mobile-dropdown__label {
-  font-family: 'Brockmann', sans-serif;
-  font-size: var(--font-size-sm);
-  font-weight: 600;
-  line-height: 20px;
-  color: var(--color-text-primary, #1a1a1a);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  text-align: left;
-}
-
-/* Empty state */
-.ds-mobile-dropdown__empty {
-  padding: 24px 16px;
-  text-align: center;
-  font-family: 'Brockmann', sans-serif;
-  font-size: var(--font-size-sm);
-  line-height: 18px;
-  color: var(--color-text-secondary, #737373);
-}
-
-/* Slide in animation with scale */
-@keyframes slideIn {
-  from {
-    opacity: 0;
-    transform: translateY(8px) scale(0.75);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-}
-
-/* Dropdown positioned above slides up instead of down */
-.ds-mobile-dropdown--above {
-  animation: slideUp var(--spring-duration-medium) var(--spring-curve-bouncy);
-}
-
-/* Ionic handles exit animations automatically - we keep these for custom behavior if needed */
-
-@keyframes slideOut {
-  from {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-  to {
-    opacity: 0;
-    transform: translateY(8px) scale(0.75);
-  }
-}
-
-@keyframes slideDown {
-  from {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-  to {
-    opacity: 0;
-    transform: translateY(-8px) scale(0.75);
-  }
-}
-
-@keyframes slideUp {
-  from {
-    opacity: 0;
-    transform: translateY(-8px) scale(0.75);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-}
-