@propbinder/mobile-design 0.2.50 → 0.2.53

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

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

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

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