@propbinder/mobile-design 0.2.48 → 0.2.50

package/src/components/bottom-sheet/ds-mobile-profile-actions-sheet.ts

@@ -0,0 +1,614 @@
+import {
+  Component,
+  Input,
+  signal,
+  computed,
+  ViewChild,
+  ElementRef,
+  afterNextRender,
+  Injector,
+  OnInit,
+  OnChanges,
+  SimpleChanges,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ModalController } from '@ionic/angular/standalone';
+import { DsIconComponent, DsIconButtonComponent } from '@propbinder/design-system';
+import { DsMobileActionListItemComponent } from '../action-list-item/ds-mobile-action-list-item';
+import { ActionResult, ActionItem, ActionGroup } from './ds-mobile-actions-bottom-sheet';
+import { DsMobileBottomSheetWrapperComponent } from './ds-mobile-bottom-sheet-wrapper';
+import { DsMobileBottomSheetHeaderComponent } from './ds-mobile-bottom-sheet-header';
+
+export interface Language {
+  code: string;
+  nativeName: string;
+  englishName: string;
+  flagIcon: string; // Path to flag SVG or icon name
+}
+
+/**
+ * DsMobileProfileActionsSheetComponent
+ *
+ * Bottom sheet for profile actions with navigable language selection.
+ * Features a smooth slide-in navigation pattern for sub-menus.
+ *
+ * @example
+ * ```typescript
+ * const sheet = await this.modalController.create({
+ *   component: DsMobileProfileActionsSheetComponent,
+ *   componentProps: {
+ *     actionGroups: [...],
+ *     currentLanguage: 'da',
+ *     availableLanguages: [...]
+ *   },
+ *   breakpoints: [0, 1],
+ *   initialBreakpoint: 1,
+ *   handle: true,
+ *   cssClass: ['ds-bottom-sheet', 'auto-height']
+ * });
+ *
+ * const result = await sheet.onWillDismiss();
+ * if (result.data?.action) {
+ *   // Handle the action (e.g., 'language:da', 'profile', 'logout')
+ * }
+ * ```
+ */
+@Component({
+  selector: 'ds-mobile-profile-actions-sheet',
+  standalone: true,
+  imports: [CommonModule, DsIconComponent, DsMobileActionListItemComponent, DsMobileBottomSheetWrapperComponent, DsMobileBottomSheetHeaderComponent],
+  template: `
+    <ds-mobile-bottom-sheet-wrapper>
+      <div class="profile-sheet-content" #sheetWrapper>
+        <!-- View Container with CSS Animation -->
+        <div class="view-container" #viewContainer 
+             [class.show-language]="currentView() === 'language'" 
+             [class.is-animating]="isAnimating()"
+             [style.height.px]="isAnimating() ? containerHeight() : null">
+          <!-- Main Actions View -->
+          <div class="view main-view" [class.active]="currentView() === 'main'">
+            <div class="actions-list">
+              @for (group of actionGroups; track $index; let isLast = $last) {
+              <!-- Action Group -->
+              <div class="action-group">
+                @for (actionItem of group.actions; track actionItem.action; let isLastInGroup = $last) {
+                <ds-mobile-action-list-item
+                  [title]="actionItem.title"
+                  [showDivider]="!isLastInGroup"
+                  [class.destructive]="actionItem.destructive"
+                  (itemClick)="handleActionClick(actionItem)"
+                >
+                  <ds-icon action-icon [name]="actionItem.icon" size="20px" [class.destructive-icon]="actionItem.destructive" />
+
+                  @if (actionItem.showChevron || actionItem.subtitle || actionItem.flagIcon) {
+                  <div content-trailing class="trailing-content">
+                    @if (actionItem.flagIcon) {
+                    <img [src]="actionItem.flagIcon" [alt]="actionItem.title + ' flag'" class="subtitle-flag" />
+                    } @if (actionItem.subtitle) {
+                    <span class="subtitle">{{ actionItem.subtitle }}</span>
+                    } @if (actionItem.showChevron) {
+                    <ds-icon name="remixArrowRightSLine" size="20px" class="chevron-icon" />
+                    }
+                  </div>
+                  }
+                </ds-mobile-action-list-item>
+                }
+              </div>
+
+              <!-- Full-width divider between groups -->
+              @if (!isLast) {
+              <div class="action-group-divider"></div>
+              } }
+            </div>
+          </div>
+
+          <!-- Language Selection View -->
+          <div class="view language-view" [class.active]="currentView() === 'language'">
+            <!-- Header with back and done buttons -->
+            <ds-mobile-bottom-sheet-header
+              title="Sprog"
+              leftButtonLabel="Tilbage"
+              rightButtonLabel="Færdig"
+              [rightButtonDisabled]="!hasLanguageChanged()"
+              (leftButtonClick)="navigateBack()"
+              (rightButtonClick)="confirmLanguageSelection()">
+            </ds-mobile-bottom-sheet-header>
+
+            <!-- Language Options -->
+            <div class="language-list">
+              @for (language of availableLanguages; track language.code; let isLast = $last) {
+              <ds-mobile-action-list-item [title]="language.nativeName" [showDivider]="!isLast" (itemClick)="selectLanguage(language.code)">
+                <!-- Country Flag -->
+                <img action-icon [src]="language.flagIcon" [alt]="language.englishName + ' flag'" class="language-flag" />
+
+                <!-- Radio Indicator in trailing slot -->
+                <div content-trailing class="radio-wrapper">
+                  <div class="radio-indicator" [class.radio-checked]="language.code === selectedLanguage()">
+                    <div class="radio-inner"></div>
+                  </div>
+                </div>
+              </ds-mobile-action-list-item>
+              }
+            </div>
+          </div>
+        </div>
+      </div>
+    </ds-mobile-bottom-sheet-wrapper>
+  `,
+  styles: [
+    `
+      :host {
+        display: block;
+        height: auto;
+      }
+
+      .profile-sheet-content {
+        overflow: hidden;
+        width: 100%;
+      }
+
+      /* View Container - holds both views side by side */
+      .view-container {
+        display: grid;
+        grid-template-columns: 50% 50%;
+        width: 200%;
+        transform: translateX(0);
+        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.15s ease-in-out;
+        overflow: hidden;
+        /* Height will be set dynamically via inline style */
+      }
+
+      .view-container.show-language {
+        transform: translateX(-50%);
+      }
+
+      /* Individual Views */
+      .view {
+        width: 100%;
+        /* Remove any min-height constraints */
+      }
+
+      .view-container:not(.is-animating) .view:not(.active) {
+        height: 0 !important;
+        overflow: hidden !important;
+      }
+
+      /* Main View */
+      .main-view {
+        padding-top: 16px;
+      }
+
+      .actions-list {
+        display: flex;
+        flex-direction: column;
+      }
+
+      .action-group {
+        display: flex;
+        flex-direction: column;
+        padding: 0 16px;
+      }
+
+      /* Language View */
+      .language-view {
+        display: flex;
+        flex-direction: column;
+      }
+
+      /* Language list styles */
+      .language-list {
+        padding: 8px 16px;
+      }
+
+      .language-flag {
+        width: 24px;
+        height: 24px;
+        object-fit: cover;
+      }
+
+      /* Radio wrapper to ensure proper positioning */
+      .radio-wrapper {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      /* Radio Button Indicator (Custom styled to match DS radio) */
+      .radio-indicator {
+        width: 20px;
+        height: 20px;
+        border: 2px solid var(--color-border-default, #d1d5db);
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.2s ease;
+        flex-shrink: 0;
+      }
+
+      .radio-indicator.radio-checked {
+        border-color: var(--color-accent, #7c3aed);
+      }
+
+      .radio-inner {
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        background: transparent;
+        transition: background 0.2s ease;
+      }
+
+      .radio-checked .radio-inner {
+        background: var(--color-accent, #7c3aed);
+      }
+
+      /* Trailing Content (Subtitle + Chevron) */
+      .trailing-content {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      .subtitle-flag {
+        width: 16px;
+        height: 16px;
+        object-fit: cover;
+        border-radius: 2px;
+      }
+
+      .subtitle {
+        font-size: 15px;
+        color: var(--color-text-subtle, #6b7280);
+        line-height: 20px;
+      }
+
+      .chevron-icon {
+        color: var(--color-text-secondary, #737373);
+      }
+
+      .check-icon {
+        color: var(--color-primary-base, #7c3aed);
+      }
+
+      /* Override default background for action items */
+      ::ng-deep ds-mobile-action-list-item ds-mobile-list-item {
+        --color-background-primary: transparent;
+        --color-background-neutral-primary-hover: var(--color-background-neutral-secondary, #f5f5f5);
+      }
+
+      ::ng-deep ds-mobile-action-list-item ds-mobile-list-item .list-item-inner::before {
+        z-index: 0 !important;
+      }
+
+      ::ng-deep ds-mobile-action-list-item ds-mobile-list-item .content-leading,
+      ::ng-deep ds-mobile-action-list-item ds-mobile-list-item .content-main,
+      ::ng-deep ds-mobile-action-list-item ds-mobile-list-item .content-trailing {
+        position: relative;
+        z-index: 1;
+      }
+
+      /* Destructive action styling */
+      ds-mobile-action-list-item.destructive {
+        --text-color-default-primary: var(--color-error-base, #ef4444);
+      }
+
+      .destructive-icon {
+        color: var(--color-error-base, #ef4444);
+      }
+
+      /* Full-width divider between action groups */
+      .action-group-divider {
+        height: 1px;
+        background: var(--color-border-subtle, #e5e5e5);
+        margin: 8px 0;
+      }
+    `,
+  ],
+})
+export class DsMobileProfileActionsSheetComponent implements OnInit, OnChanges {
+  /**
+   * Action groups to display in main view
+   */
+  @Input() actionGroups: ActionGroup[] = [];
+
+  /**
+   * Currently selected language code
+   */
+  @Input() currentLanguage: string = 'da';
+
+  /**
+   * Initial language (for tracking changes)
+   */
+  private initialLanguage: string = '';
+
+  /**
+   * Currently selected language in the view (before confirmation)
+   */
+  selectedLanguage = signal<string>('');
+
+  /**
+   * Check if language has changed
+   */
+  hasLanguageChanged = computed(() => {
+    return this.selectedLanguage() !== this.initialLanguage && this.selectedLanguage() !== '';
+  });
+
+  /**
+   * Available languages for selection
+   */
+  @Input() availableLanguages: Language[] = [
+    {
+      code: 'da',
+      nativeName: 'Dansk',
+      englishName: 'Danish',
+      flagIcon: '/Assets/country-flags/denmark.svg',
+    },
+    {
+      code: 'en',
+      nativeName: 'English',
+      englishName: 'English',
+      flagIcon: '/Assets/country-flags/united kingdom.svg',
+    },
+    {
+      code: 'sv',
+      nativeName: 'Svenska',
+      englishName: 'Swedish',
+      flagIcon: '/Assets/country-flags/sweden.svg',
+    },
+    {
+      code: 'no',
+      nativeName: 'Norsk',
+      englishName: 'Norwegian',
+      flagIcon: '/Assets/country-flags/norway.svg',
+    },
+    {
+      code: 'de',
+      nativeName: 'Deutsch',
+      englishName: 'German',
+      flagIcon: '/Assets/country-flags/germany.svg',
+    },
+  ];
+
+  /**
+   * Current view state
+   */
+  currentView = signal<'main' | 'language'>('main');
+
+  /**
+   * Reference to the view container for height calculations
+   */
+  @ViewChild('viewContainer', { read: ElementRef })
+  viewContainer?: ElementRef<HTMLDivElement>;
+
+  /**
+   * Reference to the profile actions sheet wrapper
+   */
+  @ViewChild('sheetWrapper', { read: ElementRef })
+  sheetWrapper?: ElementRef<HTMLDivElement>;
+
+  /**
+   * Current container height (for dynamic transitions)
+   */
+  containerHeight = signal<number | null>(null);
+
+  /**
+   * Is animating between views
+   */
+  isAnimating = signal<boolean>(false);
+
+  constructor(private modalController: ModalController, private injector: Injector) {
+    // Set initial height after render
+    afterNextRender(
+      () => {
+        this.updateHeight();
+      },
+      { injector: this.injector }
+    );
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['currentLanguage']) {
+      const val = changes['currentLanguage'].currentValue;
+      if (val) {
+        this.selectedLanguage.set(val);
+        this.initialLanguage = val;
+      }
+    }
+  }
+
+  ngOnInit(): void {
+    // Try to get language from localStorage as fallback
+    const storedLangCode = this.getLanguageFromStorage();
+    
+    if (storedLangCode) {
+      this.selectedLanguage.set(storedLangCode);
+      this.initialLanguage = storedLangCode;
+    } else if (!this.selectedLanguage()) {
+      // Fallback to input if storage is empty
+      this.selectedLanguage.set(this.currentLanguage);
+      this.initialLanguage = this.currentLanguage;
+    }
+  }
+
+  /**
+   * Try to resolve short language code from localStorage ('selectedLanguage' key)
+   */
+  private getLanguageFromStorage(): string | null {
+    try {
+      const stored = localStorage.getItem('selectedLanguage'); // e.g. "da-DK", "sv-SE"
+      if (!stored) return null;
+
+      // Find the code from availableLanguages that matches this locale/string
+      // We check if any language code is part of the stored string (e.g. 'da' in 'da-DK')
+      const match = this.availableLanguages.find(lang => 
+        lang.code === stored || stored.startsWith(lang.code + '-')
+      );
+
+      return match ? match.code : null;
+    } catch (e) {
+      return null;
+    }
+  }
+
+  /**
+   * Handle action item click
+   */
+  handleActionClick(actionItem: ActionItem): void {
+    // If it's the language action, navigate to language view
+    if (actionItem.action === 'language') {
+      this.animateViewTransition('language');
+      return;
+    }
+
+    // Otherwise, dismiss with the action
+    this.selectAction(actionItem.action);
+  }
+
+  /**
+   * Navigate back to main view
+   */
+  navigateBack(): void {
+    if (this.currentView() === 'language') {
+      this.animateViewTransition('main');
+    }
+  }
+
+  /**
+   * Confirm language selection and dismiss
+   */
+  confirmLanguageSelection(): void {
+    if (this.hasLanguageChanged()) {
+      this.modalController.dismiss({ action: `language:${this.selectedLanguage()}` } as ActionResult, 'select');
+    } else {
+      // If no change, just go back
+      this.navigateBack();
+    }
+  }
+
+  /**
+   * Handle language selection (update selection, don't dismiss)
+   */
+  selectLanguage(languageCode: string): void {
+    this.selectedLanguage.set(languageCode);
+  }
+
+  /**
+   * Get current language flag icon
+   */
+  getCurrentLanguageFlag(): string {
+    const language = this.availableLanguages.find((lang) => lang.code === this.currentLanguage);
+    return language?.flagIcon || '';
+  }
+
+  /**
+   * Update container height based on active view
+   */
+  private updateHeight(): void {
+    if (!this.viewContainer || !this.sheetWrapper) return;
+
+    const container = this.viewContainer.nativeElement;
+    const activeView = this.currentView() === 'main' ? container.querySelector('.main-view') : container.querySelector('.language-view');
+
+    if (activeView instanceof HTMLElement) {
+      const height = activeView.scrollHeight;
+      this.containerHeight.set(height);
+    }
+  }
+
+  /**
+   * Animate view transition with height change
+   */
+  private async animateViewTransition(toView: 'main' | 'language'): Promise<void> {
+    if (!this.viewContainer || !this.sheetWrapper || this.isAnimating()) return;
+
+    this.isAnimating.set(true);
+
+    const container = this.viewContainer.nativeElement;
+
+    // Step 1: Fade out current view (150ms)
+    container.style.opacity = '0';
+
+    await this.delay(150);
+
+    // Step 2: Measure target view height
+    // We need to temporarily position it to measure accurately
+    const mainView = container.querySelector('.main-view') as HTMLElement;
+    const langView = container.querySelector('.language-view') as HTMLElement;
+    const targetView = toView === 'main' ? mainView : langView;
+
+    // Temporarily make both views absolute positioned at same location to measure
+    const containerStyle = window.getComputedStyle(container);
+    const currentHeight = container.offsetHeight;
+
+    // Save current state
+    const savedTransition = container.style.transition;
+    const savedTransform = container.style.transform;
+
+    // Disable transitions and position target view for measurement
+    container.style.transition = 'none';
+    container.style.height = `${currentHeight}px`;
+
+    // Position target view to measure it
+    if (mainView && langView) {
+      mainView.style.position = 'absolute';
+      mainView.style.left = '0';
+      mainView.style.top = '0';
+      mainView.style.width = '50%';
+      mainView.style.visibility = toView === 'main' ? 'visible' : 'hidden';
+
+      langView.style.position = 'absolute';
+      langView.style.left = '0';
+      langView.style.top = '0';
+      langView.style.width = '50%';
+      langView.style.visibility = toView === 'language' ? 'visible' : 'hidden';
+    }
+
+    // Force reflow and measure
+    container.offsetHeight;
+    const newHeight = targetView ? targetView.scrollHeight : currentHeight;
+
+    // Restore grid layout
+    if (mainView && langView) {
+      mainView.style.position = '';
+      mainView.style.left = '';
+      mainView.style.top = '';
+      mainView.style.width = '';
+      mainView.style.visibility = '';
+
+      langView.style.position = '';
+      langView.style.left = '';
+      langView.style.top = '';
+      langView.style.width = '';
+      langView.style.visibility = '';
+    }
+
+    // Wait a frame
+    await this.delay(10);
+
+    // Step 3: Re-enable transitions, switch view, and set new height
+    container.style.transition = savedTransition || '';
+    this.currentView.set(toView);
+    this.containerHeight.set(newHeight);
+
+    // Step 4: Wait for height animation (300ms) then fade in
+    await this.delay(250);
+    container.style.opacity = '1';
+
+    await this.delay(150);
+    this.isAnimating.set(false);
+  }
+
+  /**
+   * Helper to create delay promise
+   */
+  private delay(ms: number): Promise<void> {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+  }
+
+  /**
+   * Handle regular action selection
+   */
+  selectAction(action: string): void {
+    this.modalController.dismiss({ action } as ActionResult, 'select');
+  }
+}

package/src/components/bottom-sheet/index.ts

@@ -0,0 +1,8 @@
+export * from './ds-mobile-actions-bottom-sheet';
+export * from './ds-mobile-bottom-sheet.service';
+export * from './ds-mobile-bottom-sheet-wrapper';
+export * from './ds-mobile-bottom-sheet-header';
+export * from './ds-mobile-confirmation-sheet';
+export * from './ds-mobile-post-create-bottom-sheet';
+export { DsMobileProfileActionsSheetComponent } from './ds-mobile-profile-actions-sheet';
+export type { Language } from './ds-mobile-profile-actions-sheet';

package/src/components/bottom-sheet/modal-shadow-fix.ts

@@ -0,0 +1,42 @@
+/**
+ * Disable pointer events for Ionic's internal modal shadow layer.
+ *
+ * The .modal-shadow element is rendered inside ion-modal's Shadow DOM and can
+ * intercept backdrop taps even when visually hidden.
+ */
+export function disableModalShadowPointerEvents(modal: HTMLIonModalElement): void {
+  const applyFix = () => {
+    const modalShadow = modal.shadowRoot?.querySelector<HTMLElement>('.modal-shadow');
+    if (!modalShadow) {
+      return;
+    }
+
+    modalShadow.style.setProperty('pointer-events', 'none', 'important');
+    modalShadow.style.setProperty('box-shadow', 'none', 'important');
+  };
+
+  applyFix();
+
+  if (!modal.shadowRoot) {
+    return;
+  }
+
+  const observer = new MutationObserver(() => {
+    applyFix();
+  });
+
+  observer.observe(modal.shadowRoot, {
+    childList: true,
+    subtree: true,
+    attributes: true,
+    attributeFilter: ['class', 'style'],
+  });
+
+  modal.addEventListener(
+    'ionModalDidDismiss',
+    () => {
+      observer.disconnect();
+    },
+    { once: true }
+  );
+}