@propbinder/mobile-design 0.2.25 → 0.2.27

package/index.d.ts

@@ -5375,6 +5375,18 @@ declare class DsMobileNewInquiryModalComponent implements OnInit, AfterViewInit
      * Callback function when form is submitted
      */
     onSubmit?: (data: NewInquiryData) => void | Promise<void>;
+    /**
+     * Placeholder for the title field
+     */
+    titlePlaceholder: string;
+    /**
+     * Placeholder for the description field
+     */
+    descriptionPlaceholder: string;
+    /**
+     * Label for the submit button
+     */
+    submitButtonLabel: string;
     /**
      * Form title field
      */
@@ -5438,7 +5450,7 @@ declare class DsMobileNewInquiryModalComponent implements OnInit, AfterViewInit
      */
     handleSubmit(): Promise<void>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileNewInquiryModalComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileNewInquiryModalComponent, "ds-mobile-new-inquiry-modal", never, { "loading": { "alias": "loading"; "required": false; }; "error": { "alias": "error"; "required": false; }; "onSubmit": { "alias": "onSubmit"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileNewInquiryModalComponent, "ds-mobile-new-inquiry-modal", never, { "loading": { "alias": "loading"; "required": false; }; "error": { "alias": "error"; "required": false; }; "onSubmit": { "alias": "onSubmit"; "required": false; }; "titlePlaceholder": { "alias": "titlePlaceholder"; "required": false; }; "descriptionPlaceholder": { "alias": "descriptionPlaceholder"; "required": false; }; "submitButtonLabel": { "alias": "submitButtonLabel"; "required": false; }; }, {}, never, never, true, never>;
 }
 
 /**
@@ -5451,6 +5463,12 @@ interface NewInquiryModalOptions {
     loading?: boolean;
     /** Initial error message */
     error?: string;
+    /** Custom placeholder for title field */
+    titlePlaceholder?: string;
+    /** Custom placeholder for description field */
+    descriptionPlaceholder?: string;
+    /** Custom label for submit button */
+    submitButtonLabel?: string;
 }
 /**
  * DsMobileNewInquiryModalService
@@ -5913,7 +5931,7 @@ declare class DsTextInputComponent implements ControlValueAccessor {
     hasError: _angular_core.InputSignal<boolean>;
     errorMessage: _angular_core.InputSignal<string>;
     autocomplete: _angular_core.InputSignal<string>;
-    inputmode: _angular_core.InputSignal<"search" | "text" | "url" | "numeric" | "email" | "tel" | undefined>;
+    inputmode: _angular_core.InputSignal<"search" | "text" | "numeric" | "url" | "email" | "tel" | undefined>;
     autoClearError: _angular_core.InputSignal<boolean>;
     validator: _angular_core.InputSignal<((value: string) => boolean) | null>;
     valueChange: _angular_core.OutputEmitterRef<string>;
@@ -6225,6 +6243,10 @@ declare class DsMobileIllustrationComponent {
      * @default '120px'
      */
     size: _angular_core.InputSignal<string>;
+    /**
+     * Accessible description for the illustration
+     */
+    alt: _angular_core.InputSignal<string>;
     constructor(sanitizer: DomSanitizer);
     /**
      * Inline SVG content for each variant
@@ -6235,7 +6257,7 @@ declare class DsMobileIllustrationComponent {
      */
     svgContent: _angular_core.Signal<SafeHtml>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileIllustrationComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileIllustrationComponent, "ds-mobile-illustration", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileIllustrationComponent, "ds-mobile-illustration", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "alt": { "alias": "alt"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@propbinder/mobile-design",
-  "version": "0.2.25",
+  "version": "0.2.27",
   "peerDependencies": {
     "@angular/common": "^20.3.0 || ^21.0.0",
     "@angular/core": "^20.3.0 || ^21.0.0"

package/styles/ionic.css

@@ -598,24 +598,29 @@ ion-tab-button::part(native) {
    Base Modal Styles (Shared across all modals)
    ============================================ */
 
-.ds-modal-base {
+ion-modal.ds-modal-base {
   --background: var(--color-background-neutral-primary, #ffffff);
   --width: 100%;
   --max-width: 640px;
-  --height: 100dvh; /* Full viewport height - content top offset creates gap */
+  /* Subtract top offset from total height to avoid bottom clipping */
+    --height: calc(100dvh - var(--app-sheet-top-offset, 24px)) !important;
+    --max-height: calc(100dvh - var(--app-sheet-top-offset, 24px)) !important;
   --border-radius: 16px 16px 0 0;
+  display: flex !important;
+    align-items: flex-end !important;
 }
 
-.ds-modal-base::part(content) {
+ion-modal.ds-modal-base::part(content) {
   border-radius: 16px 16px 0 0;
   box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
   background: var(--color-background-neutral-primary, #ffffff);
   max-width: 640px;
   margin: 0 auto;
-  /* Use top positioning instead of margin-top to work with fixed positioning */
-  top: var(--app-sheet-top-offset) !important;
-  height: calc(100% - var(--app-sheet-top-offset)) !important;
-  max-height: calc(100vh - var(--app-sheet-top-offset)) !important;
+  /* Reset Ionic's default top offset and stick to bottom */
+    top: auto !important;
+    bottom: 0 !important;
+    height: 100% !important;
+    position: relative !important;
 }
 
 /* Auto-height support for base modals */
@@ -630,6 +635,8 @@ ion-tab-button::part(native) {
   margin-top: auto !important;
   position: relative !important;
   top: auto !important;
+  max-height: calc(100dvh - var(--app-sheet-top-offset, 24px)) !important;
+    bottom: 0 !important;
 }
 
 .ds-modal-base.auto-height ion-content {