@propbinder/mobile-design 0.2.22 → 0.2.24

package/fesm2022/propbinder-mobile-design.mjs

@@ -1212,10 +1212,15 @@ class DsMobileListItemComponent {
         // (but not the host element itself)
         const target = event.target;
         const closestInteractive = target.closest('button, a, input, select, textarea, [role="button"]');
-        // Check if the interactive element is a child, not the host itself
+        // Only block if the interactive element is a REAL child action (like a button in trailing slot),
+        // but NOT if it's just the host itself or something inside leading/main that shouldn't block.
         if (closestInteractive && closestInteractive !== event.currentTarget) {
-            // console.log('[ListItem] Click ignored - came from interactive child:', closestInteractive);
-            return;
+            // If the target is inside content-leading or content-main, we generally want to allow the click
+            const isInsidePrimaryContent = !!target.closest('[content-leading], [content-main], .structured-title, .structured-subtitle');
+            if (!isInsidePrimaryContent) {
+                // console.log('[ListItem] Click ignored - came from interactive child in trailing/unknown slot:', closestInteractive);
+                return;
+            }
         }
         if (!this.longPressTriggered) {
             // console.log('[ListItem] Emitting itemClick');
@@ -2350,14 +2355,27 @@ class DsMobileProfileActionsSheetComponent {
     constructor(modalController, injector) {
         this.modalController = modalController;
         this.injector = injector;
-        // Initialize selected language when component is created
-        this.selectedLanguage.set(this.currentLanguage);
-        this.initialLanguage = this.currentLanguage;
         // Set initial height after render
         afterNextRender(() => {
             this.updateHeight();
         }, { injector: this.injector });
     }
+    ngOnChanges(changes) {
+        if (changes['currentLanguage']) {
+            const val = changes['currentLanguage'].currentValue;
+            if (val) {
+                this.selectedLanguage.set(val);
+                this.initialLanguage = val;
+            }
+        }
+    }
+    ngOnInit() {
+        // Fallback initialization if not already set by ngOnChanges
+        if (!this.selectedLanguage()) {
+            this.selectedLanguage.set(this.currentLanguage);
+            this.initialLanguage = this.currentLanguage;
+        }
+    }
     /**
      * Handle action item click
      */
@@ -2495,7 +2513,7 @@ class DsMobileProfileActionsSheetComponent {
         this.modalController.dismiss({ action }, 'select');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileProfileActionsSheetComponent, deps: [{ token: i1.ModalController }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DsMobileProfileActionsSheetComponent, isStandalone: true, selector: "ds-mobile-profile-actions-sheet", inputs: { actionGroups: "actionGroups", currentLanguage: "currentLanguage", availableLanguages: "availableLanguages" }, viewQueries: [{ propertyName: "viewContainer", first: true, predicate: ["viewContainer"], descendants: true, read: ElementRef }, { propertyName: "sheetWrapper", first: true, predicate: ["sheetWrapper"], descendants: true, read: ElementRef }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DsMobileProfileActionsSheetComponent, isStandalone: true, selector: "ds-mobile-profile-actions-sheet", inputs: { actionGroups: "actionGroups", currentLanguage: "currentLanguage", availableLanguages: "availableLanguages" }, viewQueries: [{ propertyName: "viewContainer", first: true, predicate: ["viewContainer"], descendants: true, read: ElementRef }, { propertyName: "sheetWrapper", first: true, predicate: ["sheetWrapper"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: `
     <ds-mobile-bottom-sheet-wrapper>
       <div class="profile-sheet-content" #sheetWrapper>
         <!-- View Container with CSS Animation -->
@@ -11805,21 +11823,14 @@ class MobileModalBase {
      * - Any custom CSS padding value
      *
      * @default '0'
-     *
-     * @example
-     * ```html
-     * <!-- Default: sections handle padding -->
-     * <ds-mobile-modal-base headerTitle="Details">
-     *   <ds-mobile-section headline="Info">...</ds-mobile-section>
-     * </ds-mobile-modal-base>
-     *
-     * <!-- Legacy: content without sections -->
-     * <ds-mobile-modal-base headerTitle="Details" contentPadding="20px">
-     *   <div>Padded content</div>
-     * </ds-mobile-modal-base>
-     * ```
      */
     contentPadding = input('0', ...(ngDevMode ? [{ debugName: "contentPadding" }] : []));
+    /**
+     * Enable auto-height behavior for bottom sheets
+     * When true, sets [fullscreen]="false" on ion-content and enforces flex: 0 0 auto
+     * @default false
+     */
+    isAutoHeight = input(false, ...(ngDevMode ? [{ debugName: "isAutoHeight" }] : []));
     /**
      * Emitted when modal is closed
      */
@@ -12065,14 +12076,14 @@ class MobileModalBase {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MobileModalBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.16", type: MobileModalBase, isStandalone: true, inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, headerTitle: { classPropertyName: "headerTitle", publicName: "headerTitle", isSignal: true, isRequired: false, transformFunction: null }, headerMeta: { classPropertyName: "headerMeta", publicName: "headerMeta", isSignal: true, isRequired: false, transformFunction: null }, closeButtonLabel: { classPropertyName: "closeButtonLabel", publicName: "closeButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, enableKeyboardHandling: { classPropertyName: "enableKeyboardHandling", publicName: "enableKeyboardHandling", isSignal: true, isRequired: false, transformFunction: null }, hasFixedBottom: { classPropertyName: "hasFixedBottom", publicName: "hasFixedBottom", isSignal: true, isRequired: false, transformFunction: null }, contentPadding: { classPropertyName: "contentPadding", publicName: "contentPadding", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", keyboardWillShow: "keyboardWillShow", keyboardWillHide: "keyboardWillHide" }, viewQueries: [{ propertyName: "ionContent", first: true, predicate: IonContent, descendants: true, read: IonContent }], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.16", type: MobileModalBase, isStandalone: true, inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, headerTitle: { classPropertyName: "headerTitle", publicName: "headerTitle", isSignal: true, isRequired: false, transformFunction: null }, headerMeta: { classPropertyName: "headerMeta", publicName: "headerMeta", isSignal: true, isRequired: false, transformFunction: null }, closeButtonLabel: { classPropertyName: "closeButtonLabel", publicName: "closeButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, enableKeyboardHandling: { classPropertyName: "enableKeyboardHandling", publicName: "enableKeyboardHandling", isSignal: true, isRequired: false, transformFunction: null }, hasFixedBottom: { classPropertyName: "hasFixedBottom", publicName: "hasFixedBottom", isSignal: true, isRequired: false, transformFunction: null }, contentPadding: { classPropertyName: "contentPadding", publicName: "contentPadding", isSignal: true, isRequired: false, transformFunction: null }, isAutoHeight: { classPropertyName: "isAutoHeight", publicName: "isAutoHeight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", keyboardWillShow: "keyboardWillShow", keyboardWillHide: "keyboardWillHide" }, viewQueries: [{ propertyName: "ionContent", first: true, predicate: IonContent, descendants: true, read: IonContent }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MobileModalBase, decorators: [{
             type: Directive
         }], propDecorators: { ionContent: [{
                 type: ViewChild,
                 args: [IonContent, { read: IonContent }]
-            }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], headerTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTitle", required: false }] }], headerMeta: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerMeta", required: false }] }], closeButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonLabel", required: false }] }], enableKeyboardHandling: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableKeyboardHandling", required: false }] }], hasFixedBottom: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasFixedBottom", required: false }] }], contentPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentPadding", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], keyboardWillShow: [{ type: i0.Output, args: ["keyboardWillShow"] }], keyboardWillHide: [{ type: i0.Output, args: ["keyboardWillHide"] }] } });
+            }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], headerTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTitle", required: false }] }], headerMeta: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerMeta", required: false }] }], closeButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonLabel", required: false }] }], enableKeyboardHandling: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableKeyboardHandling", required: false }] }], hasFixedBottom: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasFixedBottom", required: false }] }], contentPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentPadding", required: false }] }], isAutoHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "isAutoHeight", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], keyboardWillShow: [{ type: i0.Output, args: ["keyboardWillShow"] }], keyboardWillHide: [{ type: i0.Output, args: ["keyboardWillHide"] }] } });
 
 /**
  * DsMobileModalBaseComponent
@@ -12204,10 +12215,7 @@ class DsMobileModalBaseComponent extends MobileModalBase {
         if (showHeaderValue === false)
             return false;
         // Auto-detect: show header if there's any header content
-        return !!(this.headerTitle() ||
-            this.headerMeta() ||
-            this.hasContentInSlot(this.headerLeading) ||
-            this.hasContentInSlot(this.headerMain));
+        return !!(this.headerTitle() || this.headerMeta() || this.hasContentInSlot(this.headerLeading) || this.hasContentInSlot(this.headerMain));
     }
     /**
      * Check if a content child slot has actual content
@@ -12216,13 +12224,12 @@ class DsMobileModalBaseComponent extends MobileModalBase {
         if (!slot)
             return false;
         const element = slot.nativeElement;
-        return element && (element.childNodes.length > 0 ||
-            element.textContent?.trim().length > 0);
+        return element && (element.childNodes.length > 0 || element.textContent?.trim().length > 0);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileModalBaseComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DsMobileModalBaseComponent, isStandalone: true, selector: "ds-mobile-modal-base", inputs: { showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--modal-content-padding": "contentPadding()" } }, queries: [{ propertyName: "customLoadingState", first: true, predicate: ["[loading-state]"], descendants: true, read: ElementRef }, { propertyName: "customErrorState", first: true, predicate: ["[error-state]"], descendants: true, read: ElementRef }, { propertyName: "headerLeading", first: true, predicate: ["[header-leading]"], descendants: true, read: ElementRef }, { propertyName: "headerMain", first: true, predicate: ["[header-main]"], descendants: true, read: ElementRef }], viewQueries: [{ propertyName: "ionContent", first: true, predicate: IonContent, descendants: true, read: IonContent }], usesInheritance: true, ngImport: i0, template: `
-    <ion-content [fullscreen]="true" [scrollY]="true" class="modal-base-content">
-      <div class="modal-wrapper" [class.headerless]="!shouldShowHeader()">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DsMobileModalBaseComponent, isStandalone: true, selector: "ds-mobile-modal-base", inputs: { showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--modal-content-padding": "contentPadding()", "class.is-auto-height": "isAutoHeight()" } }, queries: [{ propertyName: "customLoadingState", first: true, predicate: ["[loading-state]"], descendants: true, read: ElementRef }, { propertyName: "customErrorState", first: true, predicate: ["[error-state]"], descendants: true, read: ElementRef }, { propertyName: "headerLeading", first: true, predicate: ["[header-leading]"], descendants: true, read: ElementRef }, { propertyName: "headerMain", first: true, predicate: ["[header-main]"], descendants: true, read: ElementRef }], viewQueries: [{ propertyName: "ionContent", first: true, predicate: IonContent, descendants: true, read: IonContent }], usesInheritance: true, ngImport: i0, template: `
+    <ion-content [fullscreen]="!isAutoHeight()" [scrollY]="!isAutoHeight()" class="modal-base-content" [class.is-auto-height]="isAutoHeight()">
+      <div class="modal-wrapper" [class.headerless]="!shouldShowHeader()" [class.is-auto-height]="isAutoHeight()">
         <!-- Header (conditional) -->
         @if (shouldShowHeader()) {
           <div class="modal-header">
@@ -12231,7 +12238,7 @@ class DsMobileModalBaseComponent extends MobileModalBase {
               <div class="header-leading">
                 <ng-content select="[header-leading]"></ng-content>
               </div>
-              
+
               <!-- Main (title + meta or custom) -->
               <div class="header-main">
                 @if (headerTitle()) {
@@ -12242,30 +12249,16 @@ class DsMobileModalBaseComponent extends MobileModalBase {
                 }
                 <ng-content select="[header-main]"></ng-content>
               </div>
-              
+
               <!-- Close button (in header) -->
-              <ds-icon-button 
-                icon="remixCloseLine"
-                variant="secondary"
-                size="lg"
-                (clicked)="close()"
-                class="close-button"
-                [attr.aria-label]="closeButtonLabel()"
-              />
+              <ds-icon-button icon="remixCloseLine" variant="secondary" size="lg" (clicked)="close()" class="close-button" [attr.aria-label]="closeButtonLabel()" />
             </div>
           </div>
         }
-        
+
         <!-- Absolute close button (when header is hidden) -->
         @if (!shouldShowHeader()) {
-          <ds-icon-button 
-            icon="remixCloseLine"
-            variant="secondary"
-            size="lg"
-            (clicked)="close()"
-            class="close-button-absolute"
-            [attr.aria-label]="closeButtonLabel()"
-          />
+          <ds-icon-button icon="remixCloseLine" variant="secondary" size="lg" (clicked)="close()" class="close-button-absolute" [attr.aria-label]="closeButtonLabel()" />
         }
 
         <!-- Content Container -->
@@ -12274,7 +12267,7 @@ class DsMobileModalBaseComponent extends MobileModalBase {
           <div class="custom-loading-slot" [class.state-hidden]="!(loading() && hasCustomLoadingState)">
             <ng-content select="[loading-state]"></ng-content>
           </div>
-          
+
           <!-- Default Loading State -->
           @if (loading() && !hasCustomLoadingState) {
             <div class="modal-loading-state">
@@ -12282,12 +12275,12 @@ class DsMobileModalBaseComponent extends MobileModalBase {
               <p class="loading-text">Loading...</p>
             </div>
           }
-          
+
           <!-- Custom Error State Slot - always present -->
           <div class="custom-error-slot" [class.state-hidden]="!(error() && !loading() && hasCustomErrorState)">
             <ng-content select="[error-state]"></ng-content>
           </div>
-          
+
           <!-- Default Error State -->
           @if (error() && !loading() && !hasCustomErrorState) {
             <div class="modal-error-state">
@@ -12296,7 +12289,7 @@ class DsMobileModalBaseComponent extends MobileModalBase {
               <p class="error-state-description">{{ error() }}</p>
             </div>
           }
-          
+
           <!-- Main content - always rendered but hidden when loading/error -->
           <div class="modal-main-content" [class.content-hidden]="loading() || !!error()">
             <ng-content></ng-content>
@@ -12306,24 +12299,20 @@ class DsMobileModalBaseComponent extends MobileModalBase {
     </ion-content>
 
     <!-- Fixed Bottom Component / Footer (slides with keyboard) -->
-    <div class="modal-fixed-bottom" [class.bottom-hidden]="!hasFixedBottom() || loading() || error()">
+    <div class="modal-fixed-bottom" [class.bottom-hidden]="!hasFixedBottom() || loading() || error()" [class.is-auto-height]="isAutoHeight()">
       <ng-content select="[fixed-bottom]"></ng-content>
       <ng-content select="[footer]"></ng-content>
     </div>
-  `, isInline: true, styles: [":host{display:block;position:relative;height:100%;width:100%}.modal-base-content{--background: var(--color-background-neutral-primary, #ffffff)}.modal-wrapper{display:flex;flex-direction:column;width:100%;background:var(--color-background-neutral-primary, #ffffff)}.modal-header{position:sticky;top:0;z-index:10;background:var(--color-background-neutral-primary, #ffffff);border-bottom:1px solid var(--border-color-default);padding:16px}.header-content{display:flex;align-items:center;justify-content:space-between;gap:12px}.header-leading{flex-shrink:0;display:flex;align-items:center}.header-leading:empty{display:none}.header-content:has(.header-leading:empty){gap:16px}.header-main{display:flex;flex-direction:column;min-width:0;flex:1;gap:2px}.modal-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:600;line-height:20px;letter-spacing:-.3px;color:var(--color-text-primary, #1a1a1a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.modal-meta{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;letter-spacing:-.26px;color:var(--color-text-tertiary, #737373);display:flex;align-items:center;gap:6px}.close-button{flex-shrink:0;border-radius:50%}.close-button::ng-deep button{border-radius:50%!important;width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important}.close-button-absolute{position:absolute;top:16px;right:16px;z-index:100;flex-shrink:0;border-radius:50%}.close-button-absolute::ng-deep button{border-radius:50%!important;width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important}.modal-content-container{display:flex;flex-direction:column;width:100%;max-width:640px;margin:0 auto;flex:1;position:relative;padding-bottom:var(--fixed-bottom-height, 0px);transition:padding-bottom .3s ease-out}.modal-wrapper.headerless .modal-content-container{padding-top:0}.modal-main-content{display:flex;flex-direction:column;width:100%;padding-top:0;padding-left:var(--modal-content-padding, 20px);padding-right:var(--modal-content-padding, 20px);padding-bottom:var(--modal-content-padding, 20px)}.modal-main-content.content-hidden,.state-hidden{display:none}.custom-loading-slot,.custom-error-slot{width:100%}.modal-loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center}.loading-spinner{width:48px;height:48px;border:3px solid var(--color-background-neutral-secondary, #f0f0f0);border-top-color:var(--color-primary-base, #2563eb);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:1.4;color:var(--color-text-secondary, #737373);margin-top:16px}.modal-error-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center;gap:16px}.error-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);margin:0}.error-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);margin:0}.modal-fixed-bottom{position:fixed;bottom:0;left:0;right:0;z-index:1000;pointer-events:none;background:var(--color-background-neutral-primary, #ffffff);box-shadow:0 300px 0 300px var(--color-background-neutral-primary, #ffffff);transform:translateY(calc(-1 * var(--keyboard-height, 0px)));transition:transform .3s cubic-bezier(.215,.61,.355,1);max-width:100vw;padding-bottom:8px}.modal-fixed-bottom>*{pointer-events:auto}.modal-fixed-bottom.bottom-hidden{display:none}@supports (padding: env(safe-area-inset-bottom)){.modal-content-container{padding-bottom:env(safe-area-inset-bottom)}}@media (prefers-reduced-motion: reduce){.modal-fixed-bottom{transition:none}.loading-spinner{animation:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: DsIconButtonComponent, selector: "ds-icon-button", inputs: ["variant", "size", "icon", "disabled", "loading", "pressed", "expanded", "ariaLabel", "tooltip", "tooltipDisabled", "tooltipPlacement"], outputs: ["clicked", "focused", "blurred"] }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }] });
+  `, isInline: true, styles: [":host{display:block;position:relative;height:100%;width:100%}:host(.is-auto-height){height:auto}.modal-base-content{--background: var(--color-background-neutral-primary, #ffffff)}.modal-base-content.is-auto-height{--height: auto;height:auto!important;flex:0 0 auto;display:block;contain:none!important}.modal-base-content.is-auto-height::part(scroll){position:relative!important;display:block!important;height:auto!important;overflow:visible!important}.modal-wrapper{display:flex;flex-direction:column;width:100%;background:var(--color-background-neutral-primary, #ffffff)}.modal-wrapper.is-auto-height{flex:0 0 auto}.modal-header{position:sticky;top:0;z-index:10;background:var(--color-background-neutral-primary, #ffffff);border-bottom:1px solid var(--border-color-default);padding:16px}.header-content{display:flex;align-items:center;justify-content:space-between;gap:12px}.header-leading{flex-shrink:0;display:flex;align-items:center}.header-leading:empty{display:none}.header-content:has(.header-leading:empty){gap:16px}.header-main{display:flex;flex-direction:column;min-width:0;flex:1;gap:2px}.modal-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:600;line-height:20px;letter-spacing:-.3px;color:var(--color-text-primary, #1a1a1a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.modal-meta{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;letter-spacing:-.26px;color:var(--color-text-tertiary, #737373);display:flex;align-items:center;gap:6px}.close-button{flex-shrink:0;border-radius:50%}.close-button::ng-deep button{border-radius:50%!important;width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important}.close-button-absolute{position:absolute;top:16px;right:16px;z-index:100;flex-shrink:0;border-radius:50%}.close-button-absolute::ng-deep button{border-radius:50%!important;width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important}.modal-content-container{display:flex;flex-direction:column;width:100%;max-width:640px;margin:0 auto;flex:1;position:relative;padding-bottom:var(--fixed-bottom-height, 0px);transition:padding-bottom .3s ease-out}:host-context(ion-modal.auto-height) .modal-content-container,.modal-wrapper.is-auto-height .modal-content-container{flex:0 0 auto}.modal-wrapper.headerless .modal-content-container{padding-top:0}.modal-main-content{display:flex;flex-direction:column;width:100%;padding-top:0;padding-left:var(--modal-content-padding, 20px);padding-right:var(--modal-content-padding, 20px);padding-bottom:var(--modal-content-padding, 20px)}.modal-main-content.content-hidden,.state-hidden{display:none}.custom-loading-slot,.custom-error-slot{width:100%}.modal-loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center}.loading-spinner{width:48px;height:48px;border:3px solid var(--color-background-neutral-secondary, #f0f0f0);border-top-color:var(--color-primary-base, #2563eb);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:1.4;color:var(--color-text-secondary, #737373);margin-top:16px}.modal-error-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center;gap:16px}.error-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);margin:0}.error-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);margin:0}.modal-fixed-bottom{position:fixed;bottom:0;left:0;right:0;z-index:1000;pointer-events:none;background:var(--color-background-neutral-primary, #ffffff);box-shadow:0 300px 0 300px var(--color-background-neutral-primary, #ffffff);transform:translateY(calc(-1 * var(--keyboard-height, 0px)));transition:transform .3s cubic-bezier(.215,.61,.355,1);max-width:100vw;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 16px)}.modal-fixed-bottom.is-auto-height{position:relative;bottom:auto;left:auto;right:auto;transform:none!important;box-shadow:none;z-index:1;background:var(--color-background-neutral-primary, #ffffff)}.modal-fixed-bottom>*{pointer-events:auto}.modal-fixed-bottom.bottom-hidden{display:none}@supports (padding: env(safe-area-inset-bottom)){.modal-content-container{padding-bottom:env(safe-area-inset-bottom)}}@media (prefers-reduced-motion: reduce){.modal-fixed-bottom{transition:none}.loading-spinner{animation:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: DsIconButtonComponent, selector: "ds-icon-button", inputs: ["variant", "size", "icon", "disabled", "loading", "pressed", "expanded", "ariaLabel", "tooltip", "tooltipDisabled", "tooltipPlacement"], outputs: ["clicked", "focused", "blurred"] }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileModalBaseComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ds-mobile-modal-base', standalone: true, imports: [
-                        CommonModule,
-                        IonContent,
-                        DsIconButtonComponent,
-                        DsIconComponent
-                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], host: {
-                        '[style.--modal-content-padding]': 'contentPadding()'
+            args: [{ selector: 'ds-mobile-modal-base', standalone: true, imports: [CommonModule, IonContent, DsIconButtonComponent, DsIconComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], host: {
+                        '[style.--modal-content-padding]': 'contentPadding()',
+                        '[class.is-auto-height]': 'isAutoHeight()',
                     }, template: `
-    <ion-content [fullscreen]="true" [scrollY]="true" class="modal-base-content">
-      <div class="modal-wrapper" [class.headerless]="!shouldShowHeader()">
+    <ion-content [fullscreen]="!isAutoHeight()" [scrollY]="!isAutoHeight()" class="modal-base-content" [class.is-auto-height]="isAutoHeight()">
+      <div class="modal-wrapper" [class.headerless]="!shouldShowHeader()" [class.is-auto-height]="isAutoHeight()">
         <!-- Header (conditional) -->
         @if (shouldShowHeader()) {
           <div class="modal-header">
@@ -12332,7 +12321,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
               <div class="header-leading">
                 <ng-content select="[header-leading]"></ng-content>
               </div>
-              
+
               <!-- Main (title + meta or custom) -->
               <div class="header-main">
                 @if (headerTitle()) {
@@ -12343,30 +12332,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 }
                 <ng-content select="[header-main]"></ng-content>
               </div>
-              
+
               <!-- Close button (in header) -->
-              <ds-icon-button 
-                icon="remixCloseLine"
-                variant="secondary"
-                size="lg"
-                (clicked)="close()"
-                class="close-button"
-                [attr.aria-label]="closeButtonLabel()"
-              />
+              <ds-icon-button icon="remixCloseLine" variant="secondary" size="lg" (clicked)="close()" class="close-button" [attr.aria-label]="closeButtonLabel()" />
             </div>
           </div>
         }
-        
+
         <!-- Absolute close button (when header is hidden) -->
         @if (!shouldShowHeader()) {
-          <ds-icon-button 
-            icon="remixCloseLine"
-            variant="secondary"
-            size="lg"
-            (clicked)="close()"
-            class="close-button-absolute"
-            [attr.aria-label]="closeButtonLabel()"
-          />
+          <ds-icon-button icon="remixCloseLine" variant="secondary" size="lg" (clicked)="close()" class="close-button-absolute" [attr.aria-label]="closeButtonLabel()" />
         }
 
         <!-- Content Container -->
@@ -12375,7 +12350,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
           <div class="custom-loading-slot" [class.state-hidden]="!(loading() && hasCustomLoadingState)">
             <ng-content select="[loading-state]"></ng-content>
           </div>
-          
+
           <!-- Default Loading State -->
           @if (loading() && !hasCustomLoadingState) {
             <div class="modal-loading-state">
@@ -12383,12 +12358,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
               <p class="loading-text">Loading...</p>
             </div>
           }
-          
+
           <!-- Custom Error State Slot - always present -->
           <div class="custom-error-slot" [class.state-hidden]="!(error() && !loading() && hasCustomErrorState)">
             <ng-content select="[error-state]"></ng-content>
           </div>
-          
+
           <!-- Default Error State -->
           @if (error() && !loading() && !hasCustomErrorState) {
             <div class="modal-error-state">
@@ -12397,7 +12372,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
               <p class="error-state-description">{{ error() }}</p>
             </div>
           }
-          
+
           <!-- Main content - always rendered but hidden when loading/error -->
           <div class="modal-main-content" [class.content-hidden]="loading() || !!error()">
             <ng-content></ng-content>
@@ -12407,11 +12382,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
     </ion-content>
 
     <!-- Fixed Bottom Component / Footer (slides with keyboard) -->
-    <div class="modal-fixed-bottom" [class.bottom-hidden]="!hasFixedBottom() || loading() || error()">
+    <div class="modal-fixed-bottom" [class.bottom-hidden]="!hasFixedBottom() || loading() || error()" [class.is-auto-height]="isAutoHeight()">
       <ng-content select="[fixed-bottom]"></ng-content>
       <ng-content select="[footer]"></ng-content>
     </div>
-  `, styles: [":host{display:block;position:relative;height:100%;width:100%}.modal-base-content{--background: var(--color-background-neutral-primary, #ffffff)}.modal-wrapper{display:flex;flex-direction:column;width:100%;background:var(--color-background-neutral-primary, #ffffff)}.modal-header{position:sticky;top:0;z-index:10;background:var(--color-background-neutral-primary, #ffffff);border-bottom:1px solid var(--border-color-default);padding:16px}.header-content{display:flex;align-items:center;justify-content:space-between;gap:12px}.header-leading{flex-shrink:0;display:flex;align-items:center}.header-leading:empty{display:none}.header-content:has(.header-leading:empty){gap:16px}.header-main{display:flex;flex-direction:column;min-width:0;flex:1;gap:2px}.modal-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:600;line-height:20px;letter-spacing:-.3px;color:var(--color-text-primary, #1a1a1a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.modal-meta{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;letter-spacing:-.26px;color:var(--color-text-tertiary, #737373);display:flex;align-items:center;gap:6px}.close-button{flex-shrink:0;border-radius:50%}.close-button::ng-deep button{border-radius:50%!important;width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important}.close-button-absolute{position:absolute;top:16px;right:16px;z-index:100;flex-shrink:0;border-radius:50%}.close-button-absolute::ng-deep button{border-radius:50%!important;width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important}.modal-content-container{display:flex;flex-direction:column;width:100%;max-width:640px;margin:0 auto;flex:1;position:relative;padding-bottom:var(--fixed-bottom-height, 0px);transition:padding-bottom .3s ease-out}.modal-wrapper.headerless .modal-content-container{padding-top:0}.modal-main-content{display:flex;flex-direction:column;width:100%;padding-top:0;padding-left:var(--modal-content-padding, 20px);padding-right:var(--modal-content-padding, 20px);padding-bottom:var(--modal-content-padding, 20px)}.modal-main-content.content-hidden,.state-hidden{display:none}.custom-loading-slot,.custom-error-slot{width:100%}.modal-loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center}.loading-spinner{width:48px;height:48px;border:3px solid var(--color-background-neutral-secondary, #f0f0f0);border-top-color:var(--color-primary-base, #2563eb);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:1.4;color:var(--color-text-secondary, #737373);margin-top:16px}.modal-error-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center;gap:16px}.error-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);margin:0}.error-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);margin:0}.modal-fixed-bottom{position:fixed;bottom:0;left:0;right:0;z-index:1000;pointer-events:none;background:var(--color-background-neutral-primary, #ffffff);box-shadow:0 300px 0 300px var(--color-background-neutral-primary, #ffffff);transform:translateY(calc(-1 * var(--keyboard-height, 0px)));transition:transform .3s cubic-bezier(.215,.61,.355,1);max-width:100vw;padding-bottom:8px}.modal-fixed-bottom>*{pointer-events:auto}.modal-fixed-bottom.bottom-hidden{display:none}@supports (padding: env(safe-area-inset-bottom)){.modal-content-container{padding-bottom:env(safe-area-inset-bottom)}}@media (prefers-reduced-motion: reduce){.modal-fixed-bottom{transition:none}.loading-spinner{animation:none}}\n"] }]
+  `, styles: [":host{display:block;position:relative;height:100%;width:100%}:host(.is-auto-height){height:auto}.modal-base-content{--background: var(--color-background-neutral-primary, #ffffff)}.modal-base-content.is-auto-height{--height: auto;height:auto!important;flex:0 0 auto;display:block;contain:none!important}.modal-base-content.is-auto-height::part(scroll){position:relative!important;display:block!important;height:auto!important;overflow:visible!important}.modal-wrapper{display:flex;flex-direction:column;width:100%;background:var(--color-background-neutral-primary, #ffffff)}.modal-wrapper.is-auto-height{flex:0 0 auto}.modal-header{position:sticky;top:0;z-index:10;background:var(--color-background-neutral-primary, #ffffff);border-bottom:1px solid var(--border-color-default);padding:16px}.header-content{display:flex;align-items:center;justify-content:space-between;gap:12px}.header-leading{flex-shrink:0;display:flex;align-items:center}.header-leading:empty{display:none}.header-content:has(.header-leading:empty){gap:16px}.header-main{display:flex;flex-direction:column;min-width:0;flex:1;gap:2px}.modal-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:600;line-height:20px;letter-spacing:-.3px;color:var(--color-text-primary, #1a1a1a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.modal-meta{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;letter-spacing:-.26px;color:var(--color-text-tertiary, #737373);display:flex;align-items:center;gap:6px}.close-button{flex-shrink:0;border-radius:50%}.close-button::ng-deep button{border-radius:50%!important;width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important}.close-button-absolute{position:absolute;top:16px;right:16px;z-index:100;flex-shrink:0;border-radius:50%}.close-button-absolute::ng-deep button{border-radius:50%!important;width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important}.modal-content-container{display:flex;flex-direction:column;width:100%;max-width:640px;margin:0 auto;flex:1;position:relative;padding-bottom:var(--fixed-bottom-height, 0px);transition:padding-bottom .3s ease-out}:host-context(ion-modal.auto-height) .modal-content-container,.modal-wrapper.is-auto-height .modal-content-container{flex:0 0 auto}.modal-wrapper.headerless .modal-content-container{padding-top:0}.modal-main-content{display:flex;flex-direction:column;width:100%;padding-top:0;padding-left:var(--modal-content-padding, 20px);padding-right:var(--modal-content-padding, 20px);padding-bottom:var(--modal-content-padding, 20px)}.modal-main-content.content-hidden,.state-hidden{display:none}.custom-loading-slot,.custom-error-slot{width:100%}.modal-loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center}.loading-spinner{width:48px;height:48px;border:3px solid var(--color-background-neutral-secondary, #f0f0f0);border-top-color:var(--color-primary-base, #2563eb);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:1.4;color:var(--color-text-secondary, #737373);margin-top:16px}.modal-error-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center;gap:16px}.error-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);margin:0}.error-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);margin:0}.modal-fixed-bottom{position:fixed;bottom:0;left:0;right:0;z-index:1000;pointer-events:none;background:var(--color-background-neutral-primary, #ffffff);box-shadow:0 300px 0 300px var(--color-background-neutral-primary, #ffffff);transform:translateY(calc(-1 * var(--keyboard-height, 0px)));transition:transform .3s cubic-bezier(.215,.61,.355,1);max-width:100vw;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 16px)}.modal-fixed-bottom.is-auto-height{position:relative;bottom:auto;left:auto;right:auto;transform:none!important;box-shadow:none;z-index:1;background:var(--color-background-neutral-primary, #ffffff)}.modal-fixed-bottom>*{pointer-events:auto}.modal-fixed-bottom.bottom-hidden{display:none}@supports (padding: env(safe-area-inset-bottom)){.modal-content-container{padding-bottom:env(safe-area-inset-bottom)}}@media (prefers-reduced-motion: reduce){.modal-fixed-bottom{transition:none}.loading-spinner{animation:none}}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { ionContent: [{
                 type: ViewChild,
                 args: [IonContent, { read: IonContent }]
@@ -14907,6 +14882,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  * ```
  */
 class DsMobileNewInquiryModalComponent {
+    modalController = inject(ModalController);
     titleInputRef;
     titleInput;
     fileInput;
@@ -15004,9 +14980,9 @@ class DsMobileNewInquiryModalComponent {
                     id: `photo-${Date.now()}`,
                     src: image.webPath,
                     type: 'image',
-                    name: `Photo ${this.attachments().length + 1}`
+                    name: `Photo ${this.attachments().length + 1}`,
                 };
-                this.attachments.update(attachments => [...attachments, newAttachment]);
+                this.attachments.update((attachments) => [...attachments, newAttachment]);
             }
         }
         catch (error) {
@@ -15018,7 +14994,7 @@ class DsMobileNewInquiryModalComponent {
      * Remove an attachment
      */
     removeAttachment(attachmentId) {
-        this.attachments.update(attachments => attachments.filter(a => a.id !== attachmentId));
+        this.attachments.update((attachments) => attachments.filter((a) => a.id !== attachmentId));
     }
     /**
      * Handle attachment button click
@@ -15069,7 +15045,7 @@ class DsMobileNewInquiryModalComponent {
         const k = 1024;
         const sizes = ['B', 'KB', 'MB', 'GB'];
         const i = Math.floor(Math.log(bytes) / Math.log(k));
-        return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
+        return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + sizes[i];
     }
     /**
      * Handle file selection from file input
@@ -15083,7 +15059,7 @@ class DsMobileNewInquiryModalComponent {
         // Process each selected file (up to the limit)
         const remainingSlots = 6 - this.attachments().length;
         const filesToProcess = Array.from(files).slice(0, remainingSlots);
-        filesToProcess.forEach(file => {
+        filesToProcess.forEach((file) => {
             const fileType = this.detectFileType(file);
             // Create a data URL for preview
             const reader = new FileReader();
@@ -15095,9 +15071,9 @@ class DsMobileNewInquiryModalComponent {
                         src: result,
                         type: fileType,
                         name: file.name,
-                        size: this.formatFileSize(file.size)
+                        size: this.formatFileSize(file.size),
                     };
-                    this.attachments.update(attachments => [...attachments, newAttachment]);
+                    this.attachments.update((attachments) => [...attachments, newAttachment]);
                 }
             };
             reader.readAsDataURL(file);
@@ -15117,13 +15093,14 @@ class DsMobileNewInquiryModalComponent {
             const inquiryData = {
                 title: this.title.trim(),
                 description: this.description.trim(),
-                attachments: this.attachments()
+                attachments: this.attachments(),
             };
             console.log('[NewInquiryModal] Submitting inquiry:', inquiryData);
             if (this.onSubmit) {
                 await this.onSubmit(inquiryData);
             }
-            // Success - modal will be closed by the service
+            // Success - close the modal
+            this.modalController.dismiss();
         }
         catch (error) {
             console.error('[NewInquiryModal] Error submitting inquiry:', error);
@@ -15141,8 +15118,9 @@ class DsMobileNewInquiryModalComponent {
       [showHeader]="false"
       [hasFixedBottom]="true"
       [enableKeyboardHandling]="true"
-      closeButtonLabel="Close">
-
+      [isAutoHeight]="true"
+      closeButtonLabel="Close"
+    >
       <!-- Form Content -->
       <ds-mobile-section>
         <!-- Title Field (Large Ghost Textarea) -->
@@ -15175,10 +15153,7 @@ class DsMobileNewInquiryModalComponent {
           <div class="attachment-previews-section">
             <div class="image-previews">
               @for (attachment of attachments(); track attachment.id) {
-                <ds-mobile-attachment-preview
-                  [attachment]="attachment"
-                  (remove)="removeAttachment($event)"
-                />
+                <ds-mobile-attachment-preview [attachment]="attachment" (remove)="removeAttachment($event)" />
               }
             </div>
           </div>
@@ -15189,13 +15164,7 @@ class DsMobileNewInquiryModalComponent {
           <div class="submit-content">
             <!-- Upload Actions (Left) -->
             <div class="upload-actions">
-              <ds-icon-button
-                icon="remixImageLine"
-                variant="secondary"
-                size="md"
-                (clicked)="addPhoto()"
-                [disabled]="attachments().length >= 6"
-                aria-label="Add photo">
+              <ds-icon-button icon="remixImageLine" variant="secondary" size="md" (clicked)="addPhoto()" [disabled]="attachments().length >= 6" aria-label="Add photo">
               </ds-icon-button>
               <ds-icon-button
                 icon="remixAttachmentLine"
@@ -15203,34 +15172,21 @@ class DsMobileNewInquiryModalComponent {
                 size="md"
                 (clicked)="handleAddAttachment()"
                 [disabled]="attachments().length >= 6"
-                aria-label="Add attachment">
+                aria-label="Add attachment"
+              >
               </ds-icon-button>
-              
+
               <!-- Hidden file input for file selection -->
-              <input
-                #fileInput
-                type="file"
-                accept="*/*"
-                multiple
-                (change)="handleFileSelect($event)"
-                style="display: none;"
-                aria-hidden="true"
-              />
+              <input #fileInput type="file" accept="*/*" multiple (change)="handleFileSelect($event)" style="display: none;" aria-hidden="true" />
             </div>
 
             <!-- Submit Button (Right) -->
-            <ds-button
-              variant="primary"
-              size="lg"
-              [disabled]="!isFormValid() || isSubmitting()"
-              (clicked)="handleSubmit()">
-              Submit
-            </ds-button>
+            <ds-button variant="primary" size="lg" [disabled]="!isFormValid() || isSubmitting()" (clicked)="handleSubmit()"> Submit </ds-button>
           </div>
         </div>
       </div>
     </ds-mobile-modal-base>
-  `, isInline: true, styles: [".author-details{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.author-name{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:600;line-height:20px;letter-spacing:-.3px;color:var(--color-text-primary, #1a1a1a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.author-meta{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;letter-spacing:-.26px;color:var(--color-text-tertiary, #737373);display:flex;align-items:center;gap:6px}.author-meta .separator{color:var(--color-text-tertiary, #a0a0a0)}.lightbox-context .author-name,.overlay-context .author-name{color:#fffffff2}.lightbox-context .author-meta,.overlay-context .author-meta{color:#ffffffb3}.lightbox-context .author-meta .separator,.overlay-context .author-meta .separator{color:#ffffff80}.section-headline{font-size:var(--font-size-base);font-weight:600;color:var(--text-color-default-primary);padding:16px 0;margin:0;letter-spacing:-.2px;display:flex;align-items:center;gap:6px}.empty-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;line-height:1.3;color:var(--text-color-default-primary, #202227);margin:0 0 8px}.empty-state-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:1.4;color:var(--text-color-default-secondary, #545B66);margin:0}.ghost-input-clean ::ng-deep .ds-input,.ghost-input-clean ::ng-deep .ds-textarea,.ghost-input-clean ::ng-deep .textarea-container{outline:none!important;border:none!important}.ghost-input-clean ::ng-deep .ds-input:hover,.ghost-input-clean ::ng-deep .ds-textarea:hover,.ghost-input-clean ::ng-deep .textarea-container:hover,.ghost-input-clean ::ng-deep .ds-input:focus,.ghost-input-clean ::ng-deep .ds-textarea:focus,.ghost-input-clean ::ng-deep .textarea-container:focus,.ghost-input-clean ::ng-deep .ds-input:focus-within,.ghost-input-clean ::ng-deep .ds-textarea:focus-within,.ghost-input-clean ::ng-deep .textarea-container:focus-within{outline:none!important;border:none!important;box-shadow:none!important}.ghost-input-clean ::ng-deep textarea{outline:none!important;border:none!important;box-shadow:none!important;resize:none!important}.ghost-input-clean ::ng-deep textarea:hover,.ghost-input-clean ::ng-deep textarea:focus{outline:none!important;border:none!important;box-shadow:none!important}\n", ".inquiry-title-input{flex:0 0 auto}.inquiry-title-input ::ng-deep textarea{font-size:var(--font-size-2xl);font-weight:400;line-height:1.2;max-height:200px;overflow-y:auto;resize:none;box-sizing:border-box;padding-right:52px}.fixed-bottom-container{background:var(--color-background-neutral-primary);border-top:1px solid var(--border-color-default)}.attachment-previews-section{padding:16px 20px;border-bottom:1px solid var(--border-color-default)}.image-previews{display:flex;flex-wrap:wrap;gap:8px}.submit-container{padding:16px 20px}.submit-content{display:flex;align-items:center;justify-content:space-between;gap:16px}.upload-actions{display:flex;align-items:center;gap:8px}.upload-actions ds-icon-button::ng-deep button{width:44px;height:44px;border-radius:50%}.submit-content ds-button::ng-deep button{border-radius:100px}.inquiry-description-input{display:flex;flex:1;min-height:0}.inquiry-description-input ::ng-deep .textarea-container{display:flex;flex:1;min-height:0}.inquiry-description-input ::ng-deep textarea{flex:1;min-height:200px;resize:none}@media (min-width: 768px){.submit-container{padding:20px 32px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: DsTextareaComponent, selector: "ds-textarea", inputs: ["variant", "placeholder", "disabled", "readonly", "required", "ghost", "rows", "cols", "maxlength", "minlength", "ariaLabel", "ariaDescribedBy", "ariaLabelledBy"], outputs: ["valueChange", "focused", "blurred"] }, { kind: "component", type: DsIconButtonComponent, selector: "ds-icon-button", inputs: ["variant", "size", "icon", "disabled", "loading", "pressed", "expanded", "ariaLabel", "tooltip", "tooltipDisabled", "tooltipPlacement"], outputs: ["clicked", "focused", "blurred"] }, { kind: "component", type: DsMobileModalBaseComponent, selector: "ds-mobile-modal-base", inputs: ["showHeader"] }, { kind: "component", type: DsMobileAttachmentPreviewComponent, selector: "ds-mobile-attachment-preview", inputs: ["attachment"], outputs: ["remove"] }, { kind: "component", type: DsMobileSectionComponent, selector: "ds-mobile-section", inputs: ["headline", "icon", "linkText", "padding", "gap", "contentGap", "showBorder", "overflow"], outputs: ["linkClick"] }] });
+  `, isInline: true, styles: [".author-details{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.author-name{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:600;line-height:20px;letter-spacing:-.3px;color:var(--color-text-primary, #1a1a1a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.author-meta{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;letter-spacing:-.26px;color:var(--color-text-tertiary, #737373);display:flex;align-items:center;gap:6px}.author-meta .separator{color:var(--color-text-tertiary, #a0a0a0)}.lightbox-context .author-name,.overlay-context .author-name{color:#fffffff2}.lightbox-context .author-meta,.overlay-context .author-meta{color:#ffffffb3}.lightbox-context .author-meta .separator,.overlay-context .author-meta .separator{color:#ffffff80}.section-headline{font-size:var(--font-size-base);font-weight:600;color:var(--text-color-default-primary);padding:16px 0;margin:0;letter-spacing:-.2px;display:flex;align-items:center;gap:6px}.empty-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;line-height:1.3;color:var(--text-color-default-primary, #202227);margin:0 0 8px}.empty-state-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:1.4;color:var(--text-color-default-secondary, #545B66);margin:0}.ghost-input-clean ::ng-deep .ds-input,.ghost-input-clean ::ng-deep .ds-textarea,.ghost-input-clean ::ng-deep .textarea-container{outline:none!important;border:none!important}.ghost-input-clean ::ng-deep .ds-input:hover,.ghost-input-clean ::ng-deep .ds-textarea:hover,.ghost-input-clean ::ng-deep .textarea-container:hover,.ghost-input-clean ::ng-deep .ds-input:focus,.ghost-input-clean ::ng-deep .ds-textarea:focus,.ghost-input-clean ::ng-deep .textarea-container:focus,.ghost-input-clean ::ng-deep .ds-input:focus-within,.ghost-input-clean ::ng-deep .ds-textarea:focus-within,.ghost-input-clean ::ng-deep .textarea-container:focus-within{outline:none!important;border:none!important;box-shadow:none!important}.ghost-input-clean ::ng-deep textarea{outline:none!important;border:none!important;box-shadow:none!important;resize:none!important}.ghost-input-clean ::ng-deep textarea:hover,.ghost-input-clean ::ng-deep textarea:focus{outline:none!important;border:none!important;box-shadow:none!important}\n", ".inquiry-title-input{flex:0 0 auto}.inquiry-title-input ::ng-deep textarea{font-size:var(--font-size-2xl);font-weight:400;line-height:1.2;max-height:200px;overflow-y:auto;resize:none;box-sizing:border-box;padding-right:52px}.fixed-bottom-container{background:var(--color-background-neutral-primary);border-top:1px solid var(--border-color-default)}.attachment-previews-section{padding:16px 20px;border-bottom:1px solid var(--border-color-default)}.image-previews{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}.image-previews::-webkit-scrollbar{display:none}.submit-container{padding:16px 20px}.submit-content{display:flex;align-items:center;justify-content:space-between;gap:16px}.upload-actions{display:flex;align-items:center;gap:8px}.upload-actions ds-icon-button::ng-deep button{width:44px;height:44px;border-radius:50%}.submit-content ds-button::ng-deep button{border-radius:100px}.inquiry-description-input{display:flex;flex:1;min-height:0}.inquiry-description-input ::ng-deep .textarea-container{display:flex;flex:1;min-height:0}.inquiry-description-input ::ng-deep textarea{flex:1;min-height:80px;resize:none}@media (min-width: 768px){.submit-container{padding:20px 32px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: DsTextareaComponent, selector: "ds-textarea", inputs: ["variant", "placeholder", "disabled", "readonly", "required", "ghost", "rows", "cols", "maxlength", "minlength", "ariaLabel", "ariaDescribedBy", "ariaLabelledBy"], outputs: ["valueChange", "focused", "blurred"] }, { kind: "component", type: DsIconButtonComponent, selector: "ds-icon-button", inputs: ["variant", "size", "icon", "disabled", "loading", "pressed", "expanded", "ariaLabel", "tooltip", "tooltipDisabled", "tooltipPlacement"], outputs: ["clicked", "focused", "blurred"] }, { kind: "component", type: DsMobileModalBaseComponent, selector: "ds-mobile-modal-base", inputs: ["showHeader"] }, { kind: "component", type: DsMobileAttachmentPreviewComponent, selector: "ds-mobile-attachment-preview", inputs: ["attachment"], outputs: ["remove"] }, { kind: "component", type: DsMobileSectionComponent, selector: "ds-mobile-section", inputs: ["headline", "icon", "linkText", "padding", "gap", "contentGap", "showBorder", "overflow"], outputs: ["linkClick"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileNewInquiryModalComponent, decorators: [{
             type: Component,
@@ -15242,7 +15198,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         DsIconButtonComponent,
                         DsMobileModalBaseComponent,
                         DsMobileAttachmentPreviewComponent,
-                        DsMobileSectionComponent
+                        DsMobileSectionComponent,
                     ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: `
     <ds-mobile-modal-base
       [loading]="loading"
@@ -15250,8 +15206,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
       [showHeader]="false"
       [hasFixedBottom]="true"
       [enableKeyboardHandling]="true"
-      closeButtonLabel="Close">
-
+      [isAutoHeight]="true"
+      closeButtonLabel="Close"
+    >
       <!-- Form Content -->
       <ds-mobile-section>
         <!-- Title Field (Large Ghost Textarea) -->
@@ -15284,10 +15241,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
           <div class="attachment-previews-section">
             <div class="image-previews">
               @for (attachment of attachments(); track attachment.id) {
-                <ds-mobile-attachment-preview
-                  [attachment]="attachment"
-                  (remove)="removeAttachment($event)"
-                />
+                <ds-mobile-attachment-preview [attachment]="attachment" (remove)="removeAttachment($event)" />
               }
             </div>
           </div>
@@ -15298,13 +15252,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
           <div class="submit-content">
             <!-- Upload Actions (Left) -->
             <div class="upload-actions">
-              <ds-icon-button
-                icon="remixImageLine"
-                variant="secondary"
-                size="md"
-                (clicked)="addPhoto()"
-                [disabled]="attachments().length >= 6"
-                aria-label="Add photo">
+              <ds-icon-button icon="remixImageLine" variant="secondary" size="md" (clicked)="addPhoto()" [disabled]="attachments().length >= 6" aria-label="Add photo">
               </ds-icon-button>
               <ds-icon-button
                 icon="remixAttachmentLine"
@@ -15312,34 +15260,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 size="md"
                 (clicked)="handleAddAttachment()"
                 [disabled]="attachments().length >= 6"
-                aria-label="Add attachment">
+                aria-label="Add attachment"
+              >
               </ds-icon-button>
-              
+
               <!-- Hidden file input for file selection -->
-              <input
-                #fileInput
-                type="file"
-                accept="*/*"
-                multiple
-                (change)="handleFileSelect($event)"
-                style="display: none;"
-                aria-hidden="true"
-              />
+              <input #fileInput type="file" accept="*/*" multiple (change)="handleFileSelect($event)" style="display: none;" aria-hidden="true" />
             </div>
 
             <!-- Submit Button (Right) -->
-            <ds-button
-              variant="primary"
-              size="lg"
-              [disabled]="!isFormValid() || isSubmitting()"
-              (clicked)="handleSubmit()">
-              Submit
-            </ds-button>
+            <ds-button variant="primary" size="lg" [disabled]="!isFormValid() || isSubmitting()" (clicked)="handleSubmit()"> Submit </ds-button>
           </div>
         </div>
       </div>
     </ds-mobile-modal-base>
-  `, styles: [".author-details{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.author-name{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:600;line-height:20px;letter-spacing:-.3px;color:var(--color-text-primary, #1a1a1a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.author-meta{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;letter-spacing:-.26px;color:var(--color-text-tertiary, #737373);display:flex;align-items:center;gap:6px}.author-meta .separator{color:var(--color-text-tertiary, #a0a0a0)}.lightbox-context .author-name,.overlay-context .author-name{color:#fffffff2}.lightbox-context .author-meta,.overlay-context .author-meta{color:#ffffffb3}.lightbox-context .author-meta .separator,.overlay-context .author-meta .separator{color:#ffffff80}.section-headline{font-size:var(--font-size-base);font-weight:600;color:var(--text-color-default-primary);padding:16px 0;margin:0;letter-spacing:-.2px;display:flex;align-items:center;gap:6px}.empty-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;line-height:1.3;color:var(--text-color-default-primary, #202227);margin:0 0 8px}.empty-state-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:1.4;color:var(--text-color-default-secondary, #545B66);margin:0}.ghost-input-clean ::ng-deep .ds-input,.ghost-input-clean ::ng-deep .ds-textarea,.ghost-input-clean ::ng-deep .textarea-container{outline:none!important;border:none!important}.ghost-input-clean ::ng-deep .ds-input:hover,.ghost-input-clean ::ng-deep .ds-textarea:hover,.ghost-input-clean ::ng-deep .textarea-container:hover,.ghost-input-clean ::ng-deep .ds-input:focus,.ghost-input-clean ::ng-deep .ds-textarea:focus,.ghost-input-clean ::ng-deep .textarea-container:focus,.ghost-input-clean ::ng-deep .ds-input:focus-within,.ghost-input-clean ::ng-deep .ds-textarea:focus-within,.ghost-input-clean ::ng-deep .textarea-container:focus-within{outline:none!important;border:none!important;box-shadow:none!important}.ghost-input-clean ::ng-deep textarea{outline:none!important;border:none!important;box-shadow:none!important;resize:none!important}.ghost-input-clean ::ng-deep textarea:hover,.ghost-input-clean ::ng-deep textarea:focus{outline:none!important;border:none!important;box-shadow:none!important}\n", ".inquiry-title-input{flex:0 0 auto}.inquiry-title-input ::ng-deep textarea{font-size:var(--font-size-2xl);font-weight:400;line-height:1.2;max-height:200px;overflow-y:auto;resize:none;box-sizing:border-box;padding-right:52px}.fixed-bottom-container{background:var(--color-background-neutral-primary);border-top:1px solid var(--border-color-default)}.attachment-previews-section{padding:16px 20px;border-bottom:1px solid var(--border-color-default)}.image-previews{display:flex;flex-wrap:wrap;gap:8px}.submit-container{padding:16px 20px}.submit-content{display:flex;align-items:center;justify-content:space-between;gap:16px}.upload-actions{display:flex;align-items:center;gap:8px}.upload-actions ds-icon-button::ng-deep button{width:44px;height:44px;border-radius:50%}.submit-content ds-button::ng-deep button{border-radius:100px}.inquiry-description-input{display:flex;flex:1;min-height:0}.inquiry-description-input ::ng-deep .textarea-container{display:flex;flex:1;min-height:0}.inquiry-description-input ::ng-deep textarea{flex:1;min-height:200px;resize:none}@media (min-width: 768px){.submit-container{padding:20px 32px}}\n"] }]
+  `, styles: [".author-details{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.author-name{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:600;line-height:20px;letter-spacing:-.3px;color:var(--color-text-primary, #1a1a1a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.author-meta{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;letter-spacing:-.26px;color:var(--color-text-tertiary, #737373);display:flex;align-items:center;gap:6px}.author-meta .separator{color:var(--color-text-tertiary, #a0a0a0)}.lightbox-context .author-name,.overlay-context .author-name{color:#fffffff2}.lightbox-context .author-meta,.overlay-context .author-meta{color:#ffffffb3}.lightbox-context .author-meta .separator,.overlay-context .author-meta .separator{color:#ffffff80}.section-headline{font-size:var(--font-size-base);font-weight:600;color:var(--text-color-default-primary);padding:16px 0;margin:0;letter-spacing:-.2px;display:flex;align-items:center;gap:6px}.empty-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;line-height:1.3;color:var(--text-color-default-primary, #202227);margin:0 0 8px}.empty-state-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:1.4;color:var(--text-color-default-secondary, #545B66);margin:0}.ghost-input-clean ::ng-deep .ds-input,.ghost-input-clean ::ng-deep .ds-textarea,.ghost-input-clean ::ng-deep .textarea-container{outline:none!important;border:none!important}.ghost-input-clean ::ng-deep .ds-input:hover,.ghost-input-clean ::ng-deep .ds-textarea:hover,.ghost-input-clean ::ng-deep .textarea-container:hover,.ghost-input-clean ::ng-deep .ds-input:focus,.ghost-input-clean ::ng-deep .ds-textarea:focus,.ghost-input-clean ::ng-deep .textarea-container:focus,.ghost-input-clean ::ng-deep .ds-input:focus-within,.ghost-input-clean ::ng-deep .ds-textarea:focus-within,.ghost-input-clean ::ng-deep .textarea-container:focus-within{outline:none!important;border:none!important;box-shadow:none!important}.ghost-input-clean ::ng-deep textarea{outline:none!important;border:none!important;box-shadow:none!important;resize:none!important}.ghost-input-clean ::ng-deep textarea:hover,.ghost-input-clean ::ng-deep textarea:focus{outline:none!important;border:none!important;box-shadow:none!important}\n", ".inquiry-title-input{flex:0 0 auto}.inquiry-title-input ::ng-deep textarea{font-size:var(--font-size-2xl);font-weight:400;line-height:1.2;max-height:200px;overflow-y:auto;resize:none;box-sizing:border-box;padding-right:52px}.fixed-bottom-container{background:var(--color-background-neutral-primary);border-top:1px solid var(--border-color-default)}.attachment-previews-section{padding:16px 20px;border-bottom:1px solid var(--border-color-default)}.image-previews{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}.image-previews::-webkit-scrollbar{display:none}.submit-container{padding:16px 20px}.submit-content{display:flex;align-items:center;justify-content:space-between;gap:16px}.upload-actions{display:flex;align-items:center;gap:8px}.upload-actions ds-icon-button::ng-deep button{width:44px;height:44px;border-radius:50%}.submit-content ds-button::ng-deep button{border-radius:100px}.inquiry-description-input{display:flex;flex:1;min-height:0}.inquiry-description-input ::ng-deep .textarea-container{display:flex;flex:1;min-height:0}.inquiry-description-input ::ng-deep textarea{flex:1;min-height:80px;resize:none}@media (min-width: 768px){.submit-container{padding:20px 32px}}\n"] }]
         }], propDecorators: { titleInputRef: [{
                 type: ViewChild,
                 args: ['titleInput', { read: ElementRef }]
@@ -15373,16 +15308,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  *
  * @example
  * ```typescript
- * constructor(private inquiryModal: DsMobileNewInquiryModalService) {}
+ * constructor(private newInquiryModal: DsMobileNewInquiryModalService) {}
  *
- * async createNewInquiry() {
- *   await this.inquiryModal.open({
+ * async createNewInquiry(): Promise<void> {
+ *   console.log('[InquiriesPage] FAB clicked, opening modal...');
+ *
+ *   await this.newInquiryModal.open({
  *     onSubmit: async (data) => {
  *       console.log('Creating inquiry:', data);
  *       // Call your API to create the inquiry
  *       await this.apiService.createInquiry(data);
  *       // Close the modal
- *       await this.inquiryModal.close();
+ *       await this.newInquiryModal.close();
  *     }
  *   });
  * }
@@ -15406,10 +15343,14 @@ class DsMobileNewInquiryModalService extends BaseModalService {
             error: options?.error,
         }, {
             keyboardClose: false, // Don't close on keyboard hide for this modal
+            cssClass: ['ds-modal-base', 'auto-height'],
+            breakpoints: [0, 1],
+            initialBreakpoint: 1,
+            handle: false,
         });
-        // console.log('[NewInquiryModal] Modal created, presenting...');
+        console.log('[NewInquiryModal] Modal created, presenting...');
         await modal.present();
-        // console.log('[NewInquiryModal] Modal presented');
+        console.log('[NewInquiryModal] Modal presented');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileNewInquiryModalService, deps: [{ token: i1.ModalController }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileNewInquiryModalService, providedIn: 'root' });
@@ -16524,7 +16465,7 @@ class DsMobileFabComponent {
     /**
      * Emitted when the FAB is clicked
      */
-    fabClick = output();
+    clicked = output();
     ngAfterViewInit() {
         // Only calculate position on mobile (not desktop)
         if (!this.platform.is('desktop')) {
@@ -16564,14 +16505,14 @@ class DsMobileFabComponent {
      */
     handleClick() {
         if (!this.disabled()) {
-            this.fabClick.emit();
+            this.clicked.emit();
         }
     }
     ngOnDestroy() {
         this.resizeObserver?.disconnect();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileFabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: DsMobileFabComponent, isStandalone: true, selector: "ds-mobile-fab", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fabClick: "fabClick" }, host: { properties: { "class.fab-bottom-right": "position() === \"bottom-right\"", "class.fab-bottom-left": "position() === \"bottom-left\"", "class.fab-bottom-center": "position() === \"bottom-center\"" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: DsMobileFabComponent, isStandalone: true, selector: "ds-mobile-fab", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "class.fab-bottom-right": "position() === \"bottom-right\"", "class.fab-bottom-left": "position() === \"bottom-left\"", "class.fab-bottom-center": "position() === \"bottom-center\"" } }, ngImport: i0, template: `
     <div class="fab-container">
       <ds-icon-button
         [icon]="icon()"
@@ -16579,7 +16520,7 @@ class DsMobileFabComponent {
         [size]="size()"
         [ariaLabel]="ariaLabel()"
         [disabled]="disabled()"
-        (click)="handleClick()"
+        (clicked)="handleClick()"
         class="fab-button">
       </ds-icon-button>
     </div>
@@ -16599,12 +16540,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         [size]="size()"
         [ariaLabel]="ariaLabel()"
         [disabled]="disabled()"
-        (click)="handleClick()"
+        (clicked)="handleClick()"
         class="fab-button">
       </ds-icon-button>
     </div>
   `, styles: [":host{display:block;position:fixed;z-index:1000;pointer-events:none}.fab-container{position:relative;pointer-events:none;animation:fabEnter .3s cubic-bezier(.4,0,.2,1) forwards}@keyframes fabEnter{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}:host(.fab-bottom-right){bottom:var(--fab-calculated-bottom, 84px);right:20px}:host(.fab-bottom-left){bottom:var(--fab-calculated-bottom, 84px);left:20px}:host(.fab-bottom-center){bottom:var(--fab-calculated-bottom, 84px);left:50%;transform:translate(-50%)}@supports (padding-right: env(safe-area-inset-right)){:host(.fab-bottom-right){right:calc(20px + env(safe-area-inset-right))}}@supports (padding-left: env(safe-area-inset-left)){:host(.fab-bottom-left){left:calc(20px + env(safe-area-inset-left))}}@media (min-width: 768px){:host-context(.plt-desktop).fab-bottom-right{bottom:40px;right:40px}:host-context(.plt-desktop).fab-bottom-left{bottom:40px;left:40px}:host-context(.plt-desktop).fab-bottom-center{bottom:40px}@supports (padding-right: env(safe-area-inset-right)){:host-context(.plt-desktop).fab-bottom-right{right:calc(40px + env(safe-area-inset-right))}}@supports (padding-left: env(safe-area-inset-left)){:host-context(.plt-desktop).fab-bottom-left{left:calc(40px + env(safe-area-inset-left))}}}.fab-button{pointer-events:auto;display:block}.fab-button::ng-deep button{width:56px!important;height:56px!important;min-width:56px!important;min-height:56px!important;border-radius:50%!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important;background:var(--color-accent)!important;color:var(--color-on-accent)!important;border:none!important;box-shadow:0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f;transition:all .2s cubic-bezier(.4,0,.2,1)}.fab-button::ng-deep button:hover:not(:disabled){background:var(--color-accent-hover)!important;box-shadow:0 5px 7px -2px #0003,0 8px 14px #00000024,0 2px 22px #0000001f;transform:scale(1.05)}.fab-button::ng-deep button:active:not(:disabled){background:var(--color-accent-active)!important;box-shadow:0 2px 4px -1px #0003,0 4px 8px #00000024,0 1px 14px #0000001f;transform:scale(.95)}.fab-button::ng-deep button:disabled{opacity:.5;cursor:not-allowed;box-shadow:0 2px 4px -1px #0000001a,0 4px 8px #00000014,0 1px 14px #0000000f}.fab-button::ng-deep button .btn__icon,.fab-button::ng-deep button .btn__icon svg{color:var(--color-on-accent)!important;fill:var(--color-on-accent)!important}.fab-button::ng-deep button .btn__icon{display:flex!important;align-items:center!important;justify-content:center!important;flex-shrink:0!important}.fab-button::ng-deep button .btn__icon svg{width:24px!important;height:24px!important}\n"] }]
-        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], fabClick: [{ type: i0.Output, args: ["fabClick"] }] } });
+        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
 
 /**
  * DsMobileOfflineBannerComponent
@@ -18993,7 +18934,7 @@ class MobileInquiriesPageComponent {
         }, 1000);
     }
     async createNewInquiry() {
-        console.log('Opening new inquiry modal...');
+        console.log('[InquiriesPage] FAB clicked, opening modal...');
         await this.newInquiryModal.open({
             onSubmit: async (data) => {
                 console.log('New inquiry submitted:', data);
@@ -19082,9 +19023,9 @@ class MobileInquiriesPageComponent {
       icon="remixAddLine"
       position="bottom-right"
       ariaLabel="Create new inquiry"
-      (fabClick)="createNewInquiry()">
+      (clicked)="createNewInquiry()">
     </ds-mobile-fab>
-  `, isInline: true, styles: [".inquiry-list-wrapper{display:flex;flex-direction:column;margin-top:-12px}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center}.empty-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;color:var(--color-text-primary);margin-top:-16px;z-index:4}.empty-state-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);color:var(--color-text-secondary);margin:0}\n"], dependencies: [{ kind: "component", type: DsMobilePageMainComponent, selector: "ds-mobile-page-main", inputs: ["title", "headerTitle", "headerSubtitle", "avatarType", "avatarInitials", "avatarSrc", "avatarIconName", "showRefresh", "showCondensedHeader", "scrollThreshold", "headerFadeDistance", "contentPadding", "profileMenuItems"], outputs: ["avatarClick", "profileActionSelected", "refresh", "scroll"] }, { kind: "component", type: DsMobileSectionComponent, selector: "ds-mobile-section", inputs: ["headline", "icon", "linkText", "padding", "gap", "contentGap", "showBorder", "overflow"], outputs: ["linkClick"] }, { kind: "component", type: DsMobileIllustrationComponent, selector: "ds-mobile-illustration", inputs: ["variant", "size"] }, { kind: "component", type: DsMobileInteractiveListItemInquiryComponent, selector: "ds-mobile-interactive-list-item-inquiry", inputs: ["title", "description", "status", "statusLabel", "timestamp", "iconName", "iconColor", "variant", "clickable", "showChevron", "enableLongPress"], outputs: ["inquiryClick", "longPress"] }, { kind: "component", type: DsMobileInlineTabsComponent, selector: "ds-mobile-inline-tabs", inputs: ["tabs", "activeTab"], outputs: ["tabChange"] }, { kind: "component", type: DsMobileOfflineBannerComponent, selector: "ds-mobile-offline-banner", inputs: ["icon", "title", "message"] }, { kind: "component", type: DsMobileFabComponent, selector: "ds-mobile-fab", inputs: ["icon", "position", "size", "ariaLabel", "disabled"], outputs: ["fabClick"] }] });
+  `, isInline: true, styles: [".inquiry-list-wrapper{display:flex;flex-direction:column;margin-top:-12px}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center}.empty-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;color:var(--color-text-primary);margin-top:-16px;z-index:4}.empty-state-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);color:var(--color-text-secondary);margin:0}\n"], dependencies: [{ kind: "component", type: DsMobilePageMainComponent, selector: "ds-mobile-page-main", inputs: ["title", "headerTitle", "headerSubtitle", "avatarType", "avatarInitials", "avatarSrc", "avatarIconName", "showRefresh", "showCondensedHeader", "scrollThreshold", "headerFadeDistance", "contentPadding", "profileMenuItems"], outputs: ["avatarClick", "profileActionSelected", "refresh", "scroll"] }, { kind: "component", type: DsMobileSectionComponent, selector: "ds-mobile-section", inputs: ["headline", "icon", "linkText", "padding", "gap", "contentGap", "showBorder", "overflow"], outputs: ["linkClick"] }, { kind: "component", type: DsMobileIllustrationComponent, selector: "ds-mobile-illustration", inputs: ["variant", "size"] }, { kind: "component", type: DsMobileInteractiveListItemInquiryComponent, selector: "ds-mobile-interactive-list-item-inquiry", inputs: ["title", "description", "status", "statusLabel", "timestamp", "iconName", "iconColor", "variant", "clickable", "showChevron", "enableLongPress"], outputs: ["inquiryClick", "longPress"] }, { kind: "component", type: DsMobileInlineTabsComponent, selector: "ds-mobile-inline-tabs", inputs: ["tabs", "activeTab"], outputs: ["tabChange"] }, { kind: "component", type: DsMobileOfflineBannerComponent, selector: "ds-mobile-offline-banner", inputs: ["icon", "title", "message"] }, { kind: "component", type: DsMobileFabComponent, selector: "ds-mobile-fab", inputs: ["icon", "position", "size", "ariaLabel", "disabled"], outputs: ["clicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MobileInquiriesPageComponent, decorators: [{
             type: Component,
@@ -19165,7 +19106,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
       icon="remixAddLine"
       position="bottom-right"
       ariaLabel="Create new inquiry"
-      (fabClick)="createNewInquiry()">
+      (clicked)="createNewInquiry()">
     </ds-mobile-fab>
   `, styles: [".inquiry-list-wrapper{display:flex;flex-direction:column;margin-top:-12px}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center}.empty-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;color:var(--color-text-primary);margin-top:-16px;z-index:4}.empty-state-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);color:var(--color-text-secondary);margin:0}\n"] }]
         }], ctorParameters: () => [{ type: UserService }, { type: i1.NavController }, { type: DsMobileNewInquiryModalService }], propDecorators: { pageComponent: [{