@propbinder/mobile-design 0.2.97 → 0.2.98

package/fesm2022/propbinder-mobile-design.mjs

@@ -22880,6 +22880,10 @@ class DsMobileCardInlineContactComponent {
      * Phone number (optional)
      */
     phoneNumber = input('', ...(ngDevMode ? [{ debugName: "phoneNumber" }] : []));
+    /**
+     * Email address (optional)
+     */
+    email = input('', ...(ngDevMode ? [{ debugName: "email" }] : []));
     /**
      * Layout variant
      * - 'default' - Standard padding and column layout
@@ -22910,7 +22914,7 @@ class DsMobileCardInlineContactComponent {
         this.contactClick.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileCardInlineContactComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DsMobileCardInlineContactComponent, isStandalone: true, selector: "ds-mobile-card-inline-contact", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, imageUrl: { classPropertyName: "imageUrl", publicName: "imageUrl", isSignal: true, isRequired: false, transformFunction: null }, contactPerson: { classPropertyName: "contactPerson", publicName: "contactPerson", isSignal: true, isRequired: false, transformFunction: null }, phoneNumber: { classPropertyName: "phoneNumber", publicName: "phoneNumber", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, showChevron: { classPropertyName: "showChevron", publicName: "showChevron", isSignal: true, isRequired: false, transformFunction: null }, showEditButton: { classPropertyName: "showEditButton", publicName: "showEditButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { contactClick: "contactClick", editClick: "editClick" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DsMobileCardInlineContactComponent, isStandalone: true, selector: "ds-mobile-card-inline-contact", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, imageUrl: { classPropertyName: "imageUrl", publicName: "imageUrl", isSignal: true, isRequired: false, transformFunction: null }, contactPerson: { classPropertyName: "contactPerson", publicName: "contactPerson", isSignal: true, isRequired: false, transformFunction: null }, phoneNumber: { classPropertyName: "phoneNumber", publicName: "phoneNumber", isSignal: true, isRequired: false, transformFunction: null }, email: { classPropertyName: "email", publicName: "email", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, showChevron: { classPropertyName: "showChevron", publicName: "showChevron", isSignal: true, isRequired: false, transformFunction: null }, showEditButton: { classPropertyName: "showEditButton", publicName: "showEditButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { contactClick: "contactClick", editClick: "editClick" }, ngImport: i0, template: `
     <ds-mobile-card-inline
       [variant]="layout()"
       [disabled]="!clickable()"
@@ -22931,17 +22935,23 @@ class DsMobileCardInlineContactComponent {
       <div content-main class="item-content">
         <div class="item-name">{{ name() }}</div>
         
-        @if (contactPerson() || phoneNumber()) {
+        @if (contactPerson() || phoneNumber() || email()) {
           <div class="item-meta">
             @if (contactPerson()) {
               <span>{{ contactPerson() }}</span>
             }
-            @if (contactPerson() && phoneNumber()) {
+            @if (contactPerson() && (phoneNumber() || email())) {
               <span>·</span>
             }
             @if (phoneNumber()) {
               <span>{{ phoneNumber() }}</span>
             }
+            @if (phoneNumber() && email()) {
+              <span>·</span>
+            }
+            @if (email()) {
+              <span>{{ email() }}</span>
+            }
           </div>
         }
       </div>
@@ -22981,17 +22991,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
       <div content-main class="item-content">
         <div class="item-name">{{ name() }}</div>
         
-        @if (contactPerson() || phoneNumber()) {
+        @if (contactPerson() || phoneNumber() || email()) {
           <div class="item-meta">
             @if (contactPerson()) {
               <span>{{ contactPerson() }}</span>
             }
-            @if (contactPerson() && phoneNumber()) {
+            @if (contactPerson() && (phoneNumber() || email())) {
               <span>·</span>
             }
             @if (phoneNumber()) {
               <span>{{ phoneNumber() }}</span>
             }
+            @if (phoneNumber() && email()) {
+              <span>·</span>
+            }
+            @if (email()) {
+              <span>{{ email() }}</span>
+            }
           </div>
         }
       </div>
@@ -23007,7 +23023,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
       }
     </ds-mobile-card-inline>
   `, styles: [".item-image{width:36px;height:36px;border-radius:8px;object-fit:cover;flex-shrink:0;background:var(--color-background-neutral-tertiary, #E5E7EB)}:host ::ng-deep .item-trailing ds-icon-button .btn{border-radius:50%}\n"] }]
-        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], initials: [{ type: i0.Input, args: [{ isSignal: true, alias: "initials", required: false }] }], imageUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageUrl", required: false }] }], contactPerson: [{ type: i0.Input, args: [{ isSignal: true, alias: "contactPerson", required: false }] }], phoneNumber: [{ type: i0.Input, args: [{ isSignal: true, alias: "phoneNumber", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], showChevron: [{ type: i0.Input, args: [{ isSignal: true, alias: "showChevron", required: false }] }], showEditButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showEditButton", required: false }] }], contactClick: [{ type: i0.Output, args: ["contactClick"] }], editClick: [{ type: i0.Output, args: ["editClick"] }] } });
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], initials: [{ type: i0.Input, args: [{ isSignal: true, alias: "initials", required: false }] }], imageUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageUrl", required: false }] }], contactPerson: [{ type: i0.Input, args: [{ isSignal: true, alias: "contactPerson", required: false }] }], phoneNumber: [{ type: i0.Input, args: [{ isSignal: true, alias: "phoneNumber", required: false }] }], email: [{ type: i0.Input, args: [{ isSignal: true, alias: "email", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], showChevron: [{ type: i0.Input, args: [{ isSignal: true, alias: "showChevron", required: false }] }], showEditButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showEditButton", required: false }] }], contactClick: [{ type: i0.Output, args: ["contactClick"] }], editClick: [{ type: i0.Output, args: ["editClick"] }] } });
 
 /**
  * DsMobileNewInquiryModalComponent
@@ -27752,6 +27768,15 @@ class DsMobileHandbookDetailModalComponent {
      * Error state - when set, shows error message
      */
     error;
+    // Translations
+    textItems = 'emner';
+    textClose = 'Luk';
+    textEmptyTitle = 'Ingen emner endnu';
+    textEmptyDescription = 'Denne mappe er tom';
+    textCall = 'Ring';
+    textCopyPhone = 'Kopier nummer';
+    textEmail = 'Skriv e-mail';
+    textCopyEmail = 'Kopier e-mail';
     // Signal for reactive handbook data
     handbook = signal({
         title: '',
@@ -27820,26 +27845,27 @@ class DsMobileHandbookDetailModalComponent {
      * Handle contact click - shows bottom sheet with call and copy actions
      */
     async handleContactClick(contact) {
-        // Only show actions if there's a phone number
-        if (!contact.phoneNumber) {
+        // Only show actions if there's a phone number or email
+        if (!contact.phoneNumber && !contact.email) {
             return;
         }
-        const actionGroups = [
-            {
+        const actionGroups = [];
+        if (contact.phoneNumber) {
+            actionGroups.push({
                 actions: [
-                    {
-                        action: 'call',
-                        title: 'Ring',
-                        icon: 'remixPhoneLine',
-                    },
-                    {
-                        action: 'copy',
-                        title: 'Kopier nummer',
-                        icon: 'remixFileCopyLine',
-                    },
+                    { action: 'call', title: this.textCall, icon: 'remixPhoneLine' },
+                    { action: 'copy_phone', title: this.textCopyPhone, icon: 'remixFileCopyLine' },
                 ],
-            },
-        ];
+            });
+        }
+        if (contact.email) {
+            actionGroups.push({
+                actions: [
+                    { action: 'email', title: this.textEmail, icon: 'remixMailLine' },
+                    { action: 'copy_email', title: this.textCopyEmail, icon: 'remixFileCopyLine' },
+                ],
+            });
+        }
         const sheet = await this.modalController.create({
             component: DsMobileActionsBottomSheetComponent,
             componentProps: {
@@ -27863,27 +27889,34 @@ class DsMobileHandbookDetailModalComponent {
     async handleContactAction(action, contact) {
         switch (action) {
             case 'call':
-                // Open phone dialer with the contact's phone number
-                if (contact.phoneNumber) {
+                if (contact.phoneNumber)
                     window.location.href = `tel:${contact.phoneNumber}`;
-                }
                 break;
+            case 'copy_phone':
             case 'copy':
-                // Copy phone number to clipboard
                 if (contact.phoneNumber) {
                     try {
-                        // Try modern Clipboard API first
                         await navigator.clipboard.writeText(contact.phoneNumber);
-                        console.log('Phone number copied to clipboard:', contact.phoneNumber);
-                        // TODO: Show toast notification if you have a toast service
                     }
                     catch (err) {
-                        console.error('Failed to copy phone number:', err);
-                        // Fallback: Try older execCommand method
                         this.fallbackCopyToClipboard(contact.phoneNumber);
                     }
                 }
                 break;
+            case 'email':
+                if (contact.email)
+                    window.location.href = `mailto:${contact.email}`;
+                break;
+            case 'copy_email':
+                if (contact.email) {
+                    try {
+                        await navigator.clipboard.writeText(contact.email);
+                    }
+                    catch (err) {
+                        this.fallbackCopyToClipboard(contact.email);
+                    }
+                }
+                break;
         }
     }
     /**
@@ -27920,8 +27953,8 @@ class DsMobileHandbookDetailModalComponent {
         // Attachment action is now handled by DsMobileCardInlineFileComponent via fileUrl input
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileHandbookDetailModalComponent, deps: [{ token: i1.ModalController }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DsMobileHandbookDetailModalComponent, isStandalone: true, selector: "ds-mobile-handbook-detail-modal", inputs: { handbookData: "handbookData", loading: "loading", error: "error" }, ngImport: i0, template: `
-    <ds-mobile-modal-base [loading]="loading" [error]="error" [headerTitle]="handbook().title" [headerMeta]="handbook().itemCount + ' emner'" closeButtonLabel="Luk">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DsMobileHandbookDetailModalComponent, isStandalone: true, selector: "ds-mobile-handbook-detail-modal", inputs: { handbookData: "handbookData", loading: "loading", error: "error", textItems: "textItems", textClose: "textClose", textEmptyTitle: "textEmptyTitle", textEmptyDescription: "textEmptyDescription", textCall: "textCall", textCopyPhone: "textCopyPhone", textEmail: "textEmail", textCopyEmail: "textCopyEmail" }, ngImport: i0, template: `
+    <ds-mobile-modal-base [loading]="loading" [error]="error" [headerTitle]="handbook().title" [headerMeta]="handbook().itemCount + ' ' + textItems" [closeButtonLabel]="textClose">
       <!-- Header Folder Icon -->
       <ds-mobile-handbook-folder-mini header-leading [variant]="handbook().variant" [customColor]="handbook().customColor" [iconName]="handbook().iconName">
       </ds-mobile-handbook-folder-mini>
@@ -27955,6 +27988,7 @@ class DsMobileHandbookDetailModalComponent {
                       [initials]="contact.initials"
                       [contactPerson]="contact.contactPerson || ''"
                       [phoneNumber]="contact.phoneNumber || ''"
+                      [email]="contact.email || ''"
                       [clickable]="true"
                       (contactClick)="handleContactClick(contact)"
                     >
@@ -27982,13 +28016,13 @@ class DsMobileHandbookDetailModalComponent {
         <ds-mobile-section>
           <div class="handbook-empty-state">
             <img src="/Assets/Empty%20state-chat.png" alt="No items yet" class="empty-state-image" />
-            <h3 class="empty-state-title">No items yet</h3>
-            <p class="empty-state-description">This folder is empty</p>
+            <h3 class="empty-state-title">{{ textEmptyTitle }}</h3>
+            <p class="empty-state-description">{{ textEmptyDescription }}</p>
           </div>
         </ds-mobile-section>
       }
     </ds-mobile-modal-base>
-  `, isInline: true, styles: [".handbook-detail-container{display:flex;flex-direction:column;width:100%;flex:1}.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-group{display:flex;flex-direction:column;gap:8px}.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}::ng-deep .item-description p{margin:0 0 12px}::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}::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-image{width:100%;max-width:100%;height:280px;-o-object-fit:cover;object-fit:cover;border-radius:12px;display:block}.contacts-attachments-group{display:flex;flex-direction:column;gap:8px}.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)}@supports (padding: env(safe-area-inset-bottom)){.handbook-detail-container{padding-bottom:calc(20px + env(safe-area-inset-bottom))}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsMobileHandbookFolderMiniComponent, selector: "ds-mobile-handbook-folder-mini", inputs: ["variant", "customColor", "iconName"] }, { kind: "component", type: DsMobileCardInlineFileComponent, selector: "ds-mobile-card-inline-file", inputs: ["fileName", "fileSize", "variant", "layout", "fileUrl"], outputs: ["fileClick"] }, { kind: "component", type: DsMobileCardInlineContactComponent, selector: "ds-mobile-card-inline-contact", inputs: ["name", "initials", "imageUrl", "contactPerson", "phoneNumber", "layout", "clickable", "showChevron", "showEditButton"], outputs: ["contactClick", "editClick"] }, { kind: "component", type: DsMobileSwiperComponent, selector: "ds-mobile-swiper", inputs: ["slideWidth", "gap", "pagination", "autoHeight", "progressiveOpacity", "progressiveScale"] }, { kind: "component", type: DsMobileModalBaseComponent, selector: "ds-mobile-modal-base", inputs: ["headerTitleInteractive", "showHeader"], outputs: ["titleClick"] }, { kind: "component", type: DsMobileSectionComponent, selector: "ds-mobile-section", inputs: ["headline", "icon", "linkText", "padding", "paddingDesktop", "gap", "contentGap", "showBorder", "overflow"], outputs: ["linkClick"] }] });
+  `, isInline: true, styles: [".handbook-detail-container{display:flex;flex-direction:column;width:100%;flex:1}.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-group{display:flex;flex-direction:column;gap:8px}.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}::ng-deep .item-description p{margin:0 0 12px}::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}::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-image{width:100%;max-width:100%;height:280px;-o-object-fit:cover;object-fit:cover;border-radius:12px;display:block}.contacts-attachments-group{display:flex;flex-direction:column;gap:8px}.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)}@supports (padding: env(safe-area-inset-bottom)){.handbook-detail-container{padding-bottom:calc(20px + env(safe-area-inset-bottom))}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsMobileHandbookFolderMiniComponent, selector: "ds-mobile-handbook-folder-mini", inputs: ["variant", "customColor", "iconName"] }, { kind: "component", type: DsMobileCardInlineFileComponent, selector: "ds-mobile-card-inline-file", inputs: ["fileName", "fileSize", "variant", "layout", "fileUrl"], outputs: ["fileClick"] }, { kind: "component", type: DsMobileCardInlineContactComponent, selector: "ds-mobile-card-inline-contact", inputs: ["name", "initials", "imageUrl", "contactPerson", "phoneNumber", "email", "layout", "clickable", "showChevron", "showEditButton"], outputs: ["contactClick", "editClick"] }, { kind: "component", type: DsMobileSwiperComponent, selector: "ds-mobile-swiper", inputs: ["slideWidth", "gap", "pagination", "autoHeight", "progressiveOpacity", "progressiveScale"] }, { kind: "component", type: DsMobileModalBaseComponent, selector: "ds-mobile-modal-base", inputs: ["headerTitleInteractive", "showHeader"], outputs: ["titleClick"] }, { kind: "component", type: DsMobileSectionComponent, selector: "ds-mobile-section", inputs: ["headline", "icon", "linkText", "padding", "paddingDesktop", "gap", "contentGap", "showBorder", "overflow"], outputs: ["linkClick"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileHandbookDetailModalComponent, decorators: [{
             type: Component,
@@ -28001,7 +28035,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         DsMobileModalBaseComponent,
                         DsMobileSectionComponent,
                     ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: `
-    <ds-mobile-modal-base [loading]="loading" [error]="error" [headerTitle]="handbook().title" [headerMeta]="handbook().itemCount + ' emner'" closeButtonLabel="Luk">
+    <ds-mobile-modal-base [loading]="loading" [error]="error" [headerTitle]="handbook().title" [headerMeta]="handbook().itemCount + ' ' + textItems" [closeButtonLabel]="textClose">
       <!-- Header Folder Icon -->
       <ds-mobile-handbook-folder-mini header-leading [variant]="handbook().variant" [customColor]="handbook().customColor" [iconName]="handbook().iconName">
       </ds-mobile-handbook-folder-mini>
@@ -28035,6 +28069,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                       [initials]="contact.initials"
                       [contactPerson]="contact.contactPerson || ''"
                       [phoneNumber]="contact.phoneNumber || ''"
+                      [email]="contact.email || ''"
                       [clickable]="true"
                       (contactClick)="handleContactClick(contact)"
                     >
@@ -28062,8 +28097,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         <ds-mobile-section>
           <div class="handbook-empty-state">
             <img src="/Assets/Empty%20state-chat.png" alt="No items yet" class="empty-state-image" />
-            <h3 class="empty-state-title">No items yet</h3>
-            <p class="empty-state-description">This folder is empty</p>
+            <h3 class="empty-state-title">{{ textEmptyTitle }}</h3>
+            <p class="empty-state-description">{{ textEmptyDescription }}</p>
           </div>
         </ds-mobile-section>
       }
@@ -28075,6 +28110,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }], error: [{
                 type: Input
+            }], textItems: [{
+                type: Input
+            }], textClose: [{
+                type: Input
+            }], textEmptyTitle: [{
+                type: Input
+            }], textEmptyDescription: [{
+                type: Input
+            }], textCall: [{
+                type: Input
+            }], textCopyPhone: [{
+                type: Input
+            }], textEmail: [{
+                type: Input
+            }], textCopyEmail: [{
+                type: Input
             }] } });
 
 /**
@@ -37324,7 +37375,7 @@ class DsMobileInviteMemberSheetComponent {
         </div>
       </div>
     </div>
-  `, isInline: true, styles: [":host{display:flex;flex-direction:column;height:100%}.sheet-content{overflow:hidden;width:100%;flex:1;background:var(--color-background-neutral-primary, #ffffff)}.view-container{display:grid;grid-template-columns:50% 50%;width:200%;transform:translate(0);transition:transform .3s cubic-bezier(.4,0,.2,1),height .3s cubic-bezier(.4,0,.2,1),opacity .15s ease-in-out;overflow:hidden}.view-container.show-step2{transform:translate(-50%)}.view{width:100%;display:flex;flex-direction:column}.view-container:not(.is-animating) .view:not(.active){height:0!important;overflow:hidden!important}.step-content{flex:1;overflow-y:auto;background:var(--color-background-neutral-primary, #ffffff)}.info-card{background:var(--color-background-neutral-secondary, #F5F6F8);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:10px}.info-row{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--text-color-default-secondary, #545B66)}.info-row svg{flex-shrink:0;margin-top:1px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DsMobileBottomSheetHeaderComponent, selector: "ds-mobile-bottom-sheet-header", inputs: ["title", "leftButtonLabel", "rightButtonLabel", "rightButtonDisabled", "rightButtonLoading", "showLeftButton", "showRightButton"], outputs: ["leftButtonClick", "rightButtonClick"] }, { kind: "component", type: DsMobileSectionComponent, selector: "ds-mobile-section", inputs: ["headline", "icon", "linkText", "padding", "paddingDesktop", "gap", "contentGap", "showBorder", "overflow"], outputs: ["linkClick"] }, { kind: "component", type: DsTextInputComponent, selector: "ds-text-input", inputs: ["type", "label", "placeholder", "disabled", "readonly", "required", "hasError", "errorMessage", "autocomplete", "inputmode", "autoClearError", "validator"], outputs: ["valueChange", "blur", "focus", "errorCleared"] }, { kind: "component", type: DsMobileCardInlineContactComponent, selector: "ds-mobile-card-inline-contact", inputs: ["name", "initials", "imageUrl", "contactPerson", "phoneNumber", "layout", "clickable", "showChevron", "showEditButton"], outputs: ["contactClick", "editClick"] }] });
+  `, isInline: true, styles: [":host{display:flex;flex-direction:column;height:100%}.sheet-content{overflow:hidden;width:100%;flex:1;background:var(--color-background-neutral-primary, #ffffff)}.view-container{display:grid;grid-template-columns:50% 50%;width:200%;transform:translate(0);transition:transform .3s cubic-bezier(.4,0,.2,1),height .3s cubic-bezier(.4,0,.2,1),opacity .15s ease-in-out;overflow:hidden}.view-container.show-step2{transform:translate(-50%)}.view{width:100%;display:flex;flex-direction:column}.view-container:not(.is-animating) .view:not(.active){height:0!important;overflow:hidden!important}.step-content{flex:1;overflow-y:auto;background:var(--color-background-neutral-primary, #ffffff)}.info-card{background:var(--color-background-neutral-secondary, #F5F6F8);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:10px}.info-row{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--text-color-default-secondary, #545B66)}.info-row svg{flex-shrink:0;margin-top:1px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DsMobileBottomSheetHeaderComponent, selector: "ds-mobile-bottom-sheet-header", inputs: ["title", "leftButtonLabel", "rightButtonLabel", "rightButtonDisabled", "rightButtonLoading", "showLeftButton", "showRightButton"], outputs: ["leftButtonClick", "rightButtonClick"] }, { kind: "component", type: DsMobileSectionComponent, selector: "ds-mobile-section", inputs: ["headline", "icon", "linkText", "padding", "paddingDesktop", "gap", "contentGap", "showBorder", "overflow"], outputs: ["linkClick"] }, { kind: "component", type: DsTextInputComponent, selector: "ds-text-input", inputs: ["type", "label", "placeholder", "disabled", "readonly", "required", "hasError", "errorMessage", "autocomplete", "inputmode", "autoClearError", "validator"], outputs: ["valueChange", "blur", "focus", "errorCleared"] }, { kind: "component", type: DsMobileCardInlineContactComponent, selector: "ds-mobile-card-inline-contact", inputs: ["name", "initials", "imageUrl", "contactPerson", "phoneNumber", "email", "layout", "clickable", "showChevron", "showEditButton"], outputs: ["contactClick", "editClick"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileInviteMemberSheetComponent, decorators: [{
             type: Component,
@@ -37846,7 +37897,7 @@ class AcceptInvitePageComponent {
         </ds-mobile-section>
       }
     </ds-mobile-page-details>
-  `, isInline: true, styles: [".field-group{display:flex;flex-direction:column;gap:8px}.section-label{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:600;color:var(--text-color-default-primary);margin:0;letter-spacing:-.2px;line-height:1.4}.accept-cta{padding:8px 0 4px}.accept-cta ds-button{display:block;width:100%}.accept-cta ::ng-deep ds-button>button{width:100%;border-radius:9999px}.accept-hint{margin:10px 0 0;font-size:13px;color:var(--text-color-default-tertiary, #7C8694);text-align:center}.expired-banner{display:flex;align-items:center;gap:10px;padding:14px 16px;border-radius:12px;background:var(--color-background-warning-secondary, #FEF3C7)}.expired-banner__icon{width:20px;height:20px;flex-shrink:0;color:var(--color-warning-base, #D97706)}.expired-banner__text{font-family:Brockmann,sans-serif;font-size:14px;font-weight:500;line-height:1.4;color:var(--color-warning-content, #92400E);margin:0}.resend-cta{padding:8px 0 4px}.resend-cta ds-button{display:block;width:100%}.resend-cta ::ng-deep ds-button>button{width:100%;border-radius:9999px}.resend-hint{margin:10px 0 0;font-size:13px;color:var(--text-color-default-tertiary, #7C8694);text-align:center}@keyframes slideDown{0%{transform:translateY(-8px);opacity:0}to{transform:translateY(0);opacity:1}}.success-notice{padding:14px 16px;border-radius:12px;background:var(--color-background-success-secondary, #DCFCE7);display:flex;align-items:center;gap:10px;font-family:Brockmann,sans-serif;font-size:14px;font-weight:500;color:var(--color-success-base, #158452);animation:slideDown .2s ease-out}.success-check{width:20px;height:20px;border-radius:50%;background:var(--color-success-base, #158452);display:flex;align-items:center;justify-content:center;flex-shrink:0}\n"], dependencies: [{ kind: "component", type: DsButtonComponent, selector: "ds-button", inputs: ["variant", "size", "disabled", "loading", "pressed", "expanded", "leadingIcon", "trailingIcon", "ariaLabel", "iconOnly"], outputs: ["clicked", "focused", "blurred"] }, { kind: "component", type: DsMobilePageDetailsComponent, selector: "ds-mobile-page-details", inputs: ["title", "editableTitle", "backRoute", "contentPadding", "tabs", "activeTab", "showRefresh", "scrollThreshold", "headerFadeDistance"], outputs: ["back", "tabChange", "refresh", "scroll", "titleClick"] }, { kind: "component", type: DsMobileSectionComponent, selector: "ds-mobile-section", inputs: ["headline", "icon", "linkText", "padding", "paddingDesktop", "gap", "contentGap", "showBorder", "overflow"], outputs: ["linkClick"] }, { kind: "component", type: DsMobileCardInlineContactComponent, selector: "ds-mobile-card-inline-contact", inputs: ["name", "initials", "imageUrl", "contactPerson", "phoneNumber", "layout", "clickable", "showChevron", "showEditButton"], outputs: ["contactClick", "editClick"] }] });
+  `, isInline: true, styles: [".field-group{display:flex;flex-direction:column;gap:8px}.section-label{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:600;color:var(--text-color-default-primary);margin:0;letter-spacing:-.2px;line-height:1.4}.accept-cta{padding:8px 0 4px}.accept-cta ds-button{display:block;width:100%}.accept-cta ::ng-deep ds-button>button{width:100%;border-radius:9999px}.accept-hint{margin:10px 0 0;font-size:13px;color:var(--text-color-default-tertiary, #7C8694);text-align:center}.expired-banner{display:flex;align-items:center;gap:10px;padding:14px 16px;border-radius:12px;background:var(--color-background-warning-secondary, #FEF3C7)}.expired-banner__icon{width:20px;height:20px;flex-shrink:0;color:var(--color-warning-base, #D97706)}.expired-banner__text{font-family:Brockmann,sans-serif;font-size:14px;font-weight:500;line-height:1.4;color:var(--color-warning-content, #92400E);margin:0}.resend-cta{padding:8px 0 4px}.resend-cta ds-button{display:block;width:100%}.resend-cta ::ng-deep ds-button>button{width:100%;border-radius:9999px}.resend-hint{margin:10px 0 0;font-size:13px;color:var(--text-color-default-tertiary, #7C8694);text-align:center}@keyframes slideDown{0%{transform:translateY(-8px);opacity:0}to{transform:translateY(0);opacity:1}}.success-notice{padding:14px 16px;border-radius:12px;background:var(--color-background-success-secondary, #DCFCE7);display:flex;align-items:center;gap:10px;font-family:Brockmann,sans-serif;font-size:14px;font-weight:500;color:var(--color-success-base, #158452);animation:slideDown .2s ease-out}.success-check{width:20px;height:20px;border-radius:50%;background:var(--color-success-base, #158452);display:flex;align-items:center;justify-content:center;flex-shrink:0}\n"], dependencies: [{ kind: "component", type: DsButtonComponent, selector: "ds-button", inputs: ["variant", "size", "disabled", "loading", "pressed", "expanded", "leadingIcon", "trailingIcon", "ariaLabel", "iconOnly"], outputs: ["clicked", "focused", "blurred"] }, { kind: "component", type: DsMobilePageDetailsComponent, selector: "ds-mobile-page-details", inputs: ["title", "editableTitle", "backRoute", "contentPadding", "tabs", "activeTab", "showRefresh", "scrollThreshold", "headerFadeDistance"], outputs: ["back", "tabChange", "refresh", "scroll", "titleClick"] }, { kind: "component", type: DsMobileSectionComponent, selector: "ds-mobile-section", inputs: ["headline", "icon", "linkText", "padding", "paddingDesktop", "gap", "contentGap", "showBorder", "overflow"], outputs: ["linkClick"] }, { kind: "component", type: DsMobileCardInlineContactComponent, selector: "ds-mobile-card-inline-contact", inputs: ["name", "initials", "imageUrl", "contactPerson", "phoneNumber", "email", "layout", "clickable", "showChevron", "showEditButton"], outputs: ["contactClick", "editClick"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AcceptInvitePageComponent, decorators: [{
             type: Component,