@propbinder/mobile-design 0.2.48 → 0.2.50

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

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

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

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

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

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

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

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