@propbinder/mobile-design 0.2.48 → 0.2.50

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

@@ -0,0 +1,214 @@
+/**
+ * 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

@@ -0,0 +1,84 @@
+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');
+  }
+}