@propbinder/mobile-design 0.2.50 → 0.2.53

package/src/components/handbook-detail-modal/ds-mobile-handbook-detail-modal.css

@@ -1,214 +0,0 @@
-/**
- * Handbook Detail Modal Styles
- *
- * Component-specific styles for the handbook detail modal.
- * Base modal styles are inherited from ds-mobile-modal-base.
- */
-
-/* ============================================
-   HANDBOOK CONTENT
-   ============================================ */
-
-/* Old container no longer needed - sections provide structure */
-.handbook-detail-container {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  flex: 1;
-}
-
-/* Old item wrapper no longer needed - using ds-mobile-section now */
-.handbook-item {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-  padding: 0;
-  border-bottom: none;
-}
-
-.handbook-item.last-item {
-  border-bottom: none;
-}
-
-/* ============================================
-   ITEM TEXT CONTENT
-   ============================================ */
-
-/* Old text group no longer needed - section headline provides title */
-.item-text-group {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-/* Old title no longer needed - section headline provides this */
-.item-title {
-  font-family: 'Brockmann', sans-serif;
-  font-size: 16px;
-  font-weight: 600;
-  line-height: 24px;
-  color: var(--color-text-primary, #1a1a1a);
-  margin: 0;
-}
-
-.item-description {
-  font-family: 'Brockmann', sans-serif;
-  font-size: var(--font-size-sm);
-  line-height: 22px;
-  color: var(--color-text-primary, #1a1a1a);
-  margin: 0;
-}
-
-/* ============================================
-   RICH TEXT (TinyMCE innerHTML) STYLES
-   ::ng-deep required to penetrate Angular view encapsulation
-   ============================================ */
-
-::ng-deep .item-description p {
-  margin: 0 0 12px 0;
-}
-
-::ng-deep .item-description p:last-child {
-  margin-bottom: 0;
-}
-
-::ng-deep .item-description strong,
-::ng-deep .item-description b {
-  font-weight: 600;
-}
-
-::ng-deep .item-description em,
-::ng-deep .item-description i {
-  font-style: italic;
-}
-
-::ng-deep .item-description u {
-  text-decoration: underline;
-  text-underline-offset: 2px;
-}
-
-::ng-deep .item-description h1,
-::ng-deep .item-description h2,
-::ng-deep .item-description h3,
-::ng-deep .item-description h4 {
-  font-family: 'Brockmann', sans-serif;
-  font-weight: 600;
-  line-height: 1.4;
-  color: var(--color-text-primary, #1a1a1a);
-  margin: 0;
-  padding-top: 16px;
-  padding-bottom: 4px;
-}
-
-::ng-deep .item-description h1:first-child,
-::ng-deep .item-description h2:first-child,
-::ng-deep .item-description h3:first-child,
-::ng-deep .item-description h4:first-child {
-  padding-top: 0;
-}
-
-::ng-deep .item-description h1 {
-  font-size: var(--font-size-xl, 20px);
-}
-
-::ng-deep .item-description h2 {
-  font-size: var(--font-size-lg, 18px);
-}
-
-::ng-deep .item-description h3,
-::ng-deep .item-description h4 {
-  font-size: var(--font-size-base, 16px);
-}
-
-::ng-deep .item-description ul,
-::ng-deep .item-description ol {
-  padding-left: 20px;
-  margin: 0 0 12px 0;
-}
-
-::ng-deep .item-description ul:last-child,
-::ng-deep .item-description ol:last-child {
-  margin-bottom: 0;
-}
-
-::ng-deep .item-description li {
-  font-family: 'Brockmann', sans-serif;
-  font-size: var(--font-size-sm);
-  line-height: 22px;
-  color: var(--color-text-primary, #1a1a1a);
-  margin-bottom: 4px;
-}
-
-::ng-deep .item-description li:last-child {
-  margin-bottom: 0;
-}
-
-/* ============================================
-   ITEM IMAGES
-   ============================================ */
-
-.item-image {
-  width: 100%;
-  max-width: 100%;
-  height: 280px;
-  -o-object-fit: cover;
-     object-fit: cover;
-  border-radius: 12px;
-  display: block;
-}
-
-/* ============================================
-   CONTACTS AND ATTACHMENTS
-   ============================================ */
-
-.contacts-attachments-group {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-/* ============================================
-   EMPTY STATE
-   ============================================ */
-
-/* Old empty state wrapper - now handled by section */
-.handbook-empty-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 60px 20px;
-  text-align: center;
-}
-
-.empty-state-image {
-  width: 96px;
-  height: 96px;
-}
-
-.empty-state-title {
-  font-family: 'Brockmann', sans-serif;
-  font-size: var(--font-size-base);
-  font-weight: 600;
-  line-height: 1.3;
-  color: var(--color-text-primary, #1a1a1a);
-}
-
-.empty-state-description {
-  font-family: 'Brockmann', sans-serif;
-  font-size: var(--font-size-sm);
-  font-weight: 400;
-  line-height: 1.4;
-  color: var(--color-text-secondary, #737373);
-}
-
-/* ============================================
-   SAFE AREA SUPPORT
-   ============================================ */
-
-@supports (padding: env(safe-area-inset-bottom)) {
-  .handbook-detail-container {
-    padding-bottom: calc(20px + env(safe-area-inset-bottom));
-  }
-}

package/src/components/handbook-detail-modal/ds-mobile-handbook-detail-modal.service.ts

@@ -1,84 +0,0 @@
-import { Injectable } from '@angular/core';
-import { ModalController } from '@ionic/angular/standalone';
-import {
-  DsMobileHandbookDetailModalComponent,
-  HandbookDetailData,
-} from './ds-mobile-handbook-detail-modal';
-import { BaseModalService } from '../../services/base-modal.service';
-
-/**
- * DsMobileHandbookDetailModalService
- *
- * Service for displaying handbook folder details in a full-screen modal.
- * Built on Ionic's modal system with native gestures and animations.
- *
- * Features:
- * - Full handbook content display
- * - Items list with descriptions
- * - Images and attachments
- * - Contact information
- * - Native modal animations
- * - Safe area support
- *
- * @example
- * ```typescript
- * constructor(private handbookModal: DsMobileHandbookDetailModalService) {}
- *
- * async openHandbook() {
- *   await this.handbookModal.open({
- *     title: 'Utilities',
- *     variant: 'pink',
- *     iconName: 'remixLightbulbLine',
- *     itemCount: 8,
- *     items: [
- *       {
- *         title: 'Hjertestarter',
- *         description: 'Installed on the 4th floor...',
- *         images: ['/path/to/image.jpg'],
- *         contacts: [
- *           { name: 'Mortensen & Søn ApS', initials: 'M' }
- *         ]
- *       }
- *     ]
- *   });
- * }
- * ```
- */
-@Injectable({
-  providedIn: 'root',
-})
-export class DsMobileHandbookDetailModalService extends BaseModalService {
-  constructor(modalController: ModalController) {
-    super(modalController);
-  }
-
-  /**
-   * Open the handbook detail modal
-   *
-   * @param handbookData Handbook data to display
-   * @param options Optional loading and error states
-   * @returns Promise that resolves when the modal is presented
-   */
-  async open(
-    handbookData: HandbookDetailData,
-    options?: { loading?: boolean; error?: string }
-  ): Promise<void> {
-    // console.log('[HandbookDetailModal] Opening with data:', handbookData);
-
-    const modal = await this.createModal(
-      DsMobileHandbookDetailModalComponent,
-      {
-        handbookData: handbookData,
-        loading: options?.loading ?? false,
-        error: options?.error,
-      },
-      {
-        keyboardClose: true, // Keep keyboard close behavior for this modal
-      }
-    );
-
-    // console.log('[HandbookDetailModal] Modal created, presenting...');
-    await modal.present();
-    // console.log('[HandbookDetailModal] Modal presented');
-  }
-}