@vallift/ngl 22.0.34 → 22.0.36

package/fesm2022/vallift-ngl.mjs

@@ -26,6 +26,10 @@ const DEFAULT_NGL_INPUT_CONFIG = {
 const DEFAULT_NGL_BUTTON_CONFIG = {
     size: 'md',
 };
+const DEFAULT_NGL_OVERLAY_CONFIG = {
+    showHeaderBorder: true,
+    showActionsBorder: true,
+};
 const DEFAULT_NGL_LIST_RESPONSE = {
     data: 'data',
     totalCount: 'totalCount',
@@ -873,7 +877,8 @@ class OverlayService {
         this.renderer = this.rendererFactory.createRenderer(null, null);
     }
     basePanelClass = ['bg-white', 'shadow-2'];
-    modalMaxHeightClass = 'max-h-[80vh]';
+    /** Default max height leaves ~1rem gap above and below the viewport. */
+    modalMaxHeight = 'calc(100dvh - 2rem)';
     openNearElement(component, triggerElement, options) {
         const { positionPreference = 'bottomLeft', disableClose = false, data, scrollStrategy = 'block', isMobileResponsive = false } = options ?? {};
         const isMobile = this.breakpointObserver.isMatched([Breakpoints.XSmall, Breakpoints.Small]);
@@ -967,7 +972,7 @@ class OverlayService {
         return dialogRef;
     }
     openModal(component, options) {
-        const { disableClose = false, maxHeightClass, data, fitContent = false, panelClass } = options ?? {};
+        const { disableClose = false, maxHeight = this.modalMaxHeight, data, fitContent = false, panelClass, } = options ?? {};
         const positionStrategy = this.overlay
             .position()
             .global()
@@ -978,8 +983,8 @@ class OverlayService {
             : ['sm:w-4/5', 'md:w-3/5', 'lg:w-2/5'];
         const defaultPanelClass = [
             ...this.basePanelClass,
-            maxHeightClass ?? this.modalMaxHeightClass,
             'rounded-3xl',
+            'overflow-hidden',
             ...widthClasses,
         ];
         let dialogRef = this.dialog.open(component, {
@@ -987,15 +992,16 @@ class OverlayService {
             disableClose: disableClose,
             backdropClass: ['bg-black/20'],
             panelClass: panelClass ?? defaultPanelClass,
+            maxHeight,
             data: data
         });
-        this.setOverlayMaxHeight(maxHeightClass ?? this.modalMaxHeightClass);
+        this.setOverlayMaxHeight(maxHeight);
         return dialogRef;
     }
-    setOverlayMaxHeight(maxHeightClass) {
+    setOverlayMaxHeight(maxHeight) {
         const overlayElement = document.querySelector('.base-overlay');
         if (overlayElement) {
-            this.renderer.addClass(overlayElement, maxHeightClass);
+            this.renderer.setStyle(overlayElement, 'max-height', maxHeight);
         }
     }
     openBackdrop(component, options) {
@@ -3961,8 +3967,9 @@ class BaseFormControl {
     ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
     required = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
-    touched = model(false, /* @ts-ignore */
+    touched = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+    touch = output();
     isFocused = model(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isFocused" }] : /* istanbul ignore next */ []));
     showRequiredIndicator = computed(() => this.required(), /* @ts-ignore */
@@ -3983,15 +3990,15 @@ class BaseFormControl {
     onBlur() {
         this.isFocused.set(false);
         if (!this.disabled()) {
-            this.touched.set(true);
+            this.touch.emit();
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: BaseFormControl, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", type: BaseFormControl, isStandalone: true, inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, isFocused: { classPropertyName: "isFocused", publicName: "isFocused", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", isFocused: "isFocusedChange" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", type: BaseFormControl, isStandalone: true, inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, isFocused: { classPropertyName: "isFocused", publicName: "isFocused", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touch: "touch", isFocused: "isFocusedChange" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: BaseFormControl, decorators: [{
             type: Directive
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], isFocused: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFocused", required: false }] }, { type: i0.Output, args: ["isFocusedChange"] }] } });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], isFocused: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFocused", required: false }] }, { type: i0.Output, args: ["isFocusedChange"] }] } });
 
 class BaseSignalTextInputControl extends BaseFormControl {
     nglConfig = inject(NGL_CONFIG, { optional: true });
@@ -4048,7 +4055,7 @@ class SignalTextField extends BaseSignalTextInputControl {
     // Behavior
     showClearButton = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "showClearButton" }] : /* istanbul ignore next */ []));
-    debounceValueChange = input(true, /* @ts-ignore */
+    debounceValueChange = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "debounceValueChange" }] : /* istanbul ignore next */ []));
     debounceMs = input(600, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "debounceMs" }] : /* istanbul ignore next */ []));
@@ -5080,13 +5087,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
         }], propDecorators: { placeholderImage: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderImage", required: false }] }], imageUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageUrl", required: false }] }] } });
 
 class BaseOverlayComponent {
+    nglConfig = inject(NGL_CONFIG, { optional: true });
     container;
     actionsDiv;
     actionsContainerDiv;
     title = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    description = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
     showTitle = input(true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "showTitle" }] : /* istanbul ignore next */ []));
+    showHeaderBorder = input(this.nglConfig?.overlay?.showHeaderBorder ?? DEFAULT_NGL_OVERLAY_CONFIG.showHeaderBorder, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showHeaderBorder" }] : /* istanbul ignore next */ []));
+    showActionsBorder = input(this.nglConfig?.overlay?.showActionsBorder ?? DEFAULT_NGL_OVERLAY_CONFIG.showActionsBorder, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showActionsBorder" }] : /* istanbul ignore next */ []));
     showBackButton = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "showBackButton" }] : /* istanbul ignore next */ []));
     enableDefaultLayout = input(true, /* @ts-ignore */
@@ -5111,13 +5125,13 @@ class BaseOverlayComponent {
         this.dialogRef.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: BaseOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: BaseOverlayComponent, isStandalone: true, selector: "app-base-overlay", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, showTitle: { classPropertyName: "showTitle", publicName: "showTitle", isSignal: true, isRequired: false, transformFunction: null }, showBackButton: { classPropertyName: "showBackButton", publicName: "showBackButton", isSignal: true, isRequired: false, transformFunction: null }, enableDefaultLayout: { classPropertyName: "enableDefaultLayout", publicName: "enableDefaultLayout", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onBackClicked: "onBackClicked" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "actionsDiv", first: true, predicate: ["actions"], descendants: true }, { propertyName: "actionsContainerDiv", first: true, predicate: ["actionsContainer"], descendants: true }], ngImport: i0, template: "<div class=\"base-overlay flex flex-col rounded-3xl h-full overflow-hidden bg-white relative\">\n\n  @if (enableDefaultLayout()) {\n    @if (showTitle()) {\n      <div class=\"flex justify-center items-center px-3 py-6 border-b border-neutral-200\">\n\n        @if (showBackButton()) {\n          <div class=\"absolute left-3 rounded-full p-3 cursor-pointer hover:bg-neutral-50 transition-all duration-500\"\n               (click)=\"goBack()\">\n            <svg class=\"w-[18px] h-[18px] text-neutral-600\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n                 fill=\"none\">\n              <path d=\"M20 11V13H8.00003L13.5 18.5L12.08 19.92L4.16003 12L12.08 4.07996L13.5 5.49996L8.00003 11H20Z\"\n                    fill=\"currentColor\"/>\n            </svg>\n          </div>\n        }\n\n        <span class=\"text-body1\">{{ title() }}</span>\n        <div class=\"absolute right-3 rounded-lg p-2 border border-neutral-300 cursor-pointer hover:bg-neutral-50\"\n             (click)=\"onCloseClicked()\">\n          <svg class=\"w-[18px] h-[18px]\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <path\n              d=\"M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z\"\n              fill=\"currentColor\"/>\n          </svg>\n        </div>\n      </div>\n    }\n  }\n\n  <div class=\"flex-1 min-h-0 overflow-y-auto\" [ngClass]=\"enableDefaultLayout() ? 'px-5 py-4' : ''\">\n    <ng-content select=\"[body]\">\n      <ng-container #container></ng-container>\n    </ng-content>\n  </div>\n\n\n  @if (enableDefaultLayout()) {\n    <div #actionsContainer class=\"actions-container border-t border-neutral-200 px-4 py-4\">\n      <div #actions class=\"w-full\">\n        <ng-content select=\"[actions]\"></ng-content>\n      </div>\n    </div>\n  }\n\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: BaseOverlayComponent, isStandalone: true, selector: "app-base-overlay", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, showTitle: { classPropertyName: "showTitle", publicName: "showTitle", isSignal: true, isRequired: false, transformFunction: null }, showHeaderBorder: { classPropertyName: "showHeaderBorder", publicName: "showHeaderBorder", isSignal: true, isRequired: false, transformFunction: null }, showActionsBorder: { classPropertyName: "showActionsBorder", publicName: "showActionsBorder", isSignal: true, isRequired: false, transformFunction: null }, showBackButton: { classPropertyName: "showBackButton", publicName: "showBackButton", isSignal: true, isRequired: false, transformFunction: null }, enableDefaultLayout: { classPropertyName: "enableDefaultLayout", publicName: "enableDefaultLayout", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onBackClicked: "onBackClicked" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "actionsDiv", first: true, predicate: ["actions"], descendants: true }, { propertyName: "actionsContainerDiv", first: true, predicate: ["actionsContainer"], descendants: true }], ngImport: i0, template: "<div class=\"base-overlay relative flex max-h-full min-h-0 flex-col overflow-hidden rounded-3xl bg-white\">\n\n  @if (enableDefaultLayout()) {\n    @if (showTitle()) {\n      <div\n        class=\"flex shrink-0 items-start gap-2 px-5 py-4\"\n        [class.border-b]=\"showHeaderBorder()\"\n        [class.border-neutral-200]=\"showHeaderBorder()\">\n\n        @if (showBackButton()) {\n          <button\n            type=\"button\"\n            class=\"shrink-0 cursor-pointer rounded-full p-2 text-neutral-600 transition-colors hover:bg-neutral-50\"\n            (click)=\"goBack()\"\n            aria-label=\"Back\">\n            <svg class=\"h-[18px] w-[18px]\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n              <path d=\"M20 11V13H8.00003L13.5 18.5L12.08 19.92L4.16003 12L12.08 4.07996L13.5 5.49996L8.00003 11H20Z\"\n                    fill=\"currentColor\"/>\n            </svg>\n          </button>\n        }\n\n        <div class=\"min-w-0 flex-1 pt-0.5\">\n          <div class=\"text-h6 text-role-body\">{{ title() }}</div>\n          @if (description()) {\n            <p class=\"mt-1 text-caption text-role-caption\">{{ description() }}</p>\n          }\n        </div>\n\n        <button\n          type=\"button\"\n          class=\"shrink-0 cursor-pointer rounded-lg p-2 text-neutral-600 transition-colors hover:bg-neutral-50\"\n          (click)=\"onCloseClicked()\"\n          aria-label=\"Close\">\n          <svg class=\"h-[18px] w-[18px]\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <path\n              d=\"M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z\"\n              fill=\"currentColor\"/>\n          </svg>\n        </button>\n      </div>\n    }\n  }\n\n  <div\n    class=\"min-h-0 flex-1 overflow-y-auto overscroll-y-contain\"\n    [ngClass]=\"enableDefaultLayout() ? 'px-5 py-4' : ''\">\n    <ng-content select=\"[body]\">\n      <ng-container #container></ng-container>\n    </ng-content>\n  </div>\n\n\n  @if (enableDefaultLayout()) {\n    <div\n      #actionsContainer\n      class=\"actions-container shrink-0 px-4 py-4\"\n      [class.border-t]=\"showActionsBorder()\"\n      [class.border-neutral-200]=\"showActionsBorder()\">\n      <div #actions class=\"w-full\">\n        <ng-content select=\"[actions]\"></ng-content>\n      </div>\n    </div>\n  }\n\n</div>\n", styles: [":host{display:block;max-height:100%;min-height:0}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: BaseOverlayComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-base-overlay', imports: [
                         NgClass
-                    ], standalone: true, template: "<div class=\"base-overlay flex flex-col rounded-3xl h-full overflow-hidden bg-white relative\">\n\n  @if (enableDefaultLayout()) {\n    @if (showTitle()) {\n      <div class=\"flex justify-center items-center px-3 py-6 border-b border-neutral-200\">\n\n        @if (showBackButton()) {\n          <div class=\"absolute left-3 rounded-full p-3 cursor-pointer hover:bg-neutral-50 transition-all duration-500\"\n               (click)=\"goBack()\">\n            <svg class=\"w-[18px] h-[18px] text-neutral-600\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n                 fill=\"none\">\n              <path d=\"M20 11V13H8.00003L13.5 18.5L12.08 19.92L4.16003 12L12.08 4.07996L13.5 5.49996L8.00003 11H20Z\"\n                    fill=\"currentColor\"/>\n            </svg>\n          </div>\n        }\n\n        <span class=\"text-body1\">{{ title() }}</span>\n        <div class=\"absolute right-3 rounded-lg p-2 border border-neutral-300 cursor-pointer hover:bg-neutral-50\"\n             (click)=\"onCloseClicked()\">\n          <svg class=\"w-[18px] h-[18px]\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <path\n              d=\"M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z\"\n              fill=\"currentColor\"/>\n          </svg>\n        </div>\n      </div>\n    }\n  }\n\n  <div class=\"flex-1 min-h-0 overflow-y-auto\" [ngClass]=\"enableDefaultLayout() ? 'px-5 py-4' : ''\">\n    <ng-content select=\"[body]\">\n      <ng-container #container></ng-container>\n    </ng-content>\n  </div>\n\n\n  @if (enableDefaultLayout()) {\n    <div #actionsContainer class=\"actions-container border-t border-neutral-200 px-4 py-4\">\n      <div #actions class=\"w-full\">\n        <ng-content select=\"[actions]\"></ng-content>\n      </div>\n    </div>\n  }\n\n</div>\n" }]
+                    ], standalone: true, template: "<div class=\"base-overlay relative flex max-h-full min-h-0 flex-col overflow-hidden rounded-3xl bg-white\">\n\n  @if (enableDefaultLayout()) {\n    @if (showTitle()) {\n      <div\n        class=\"flex shrink-0 items-start gap-2 px-5 py-4\"\n        [class.border-b]=\"showHeaderBorder()\"\n        [class.border-neutral-200]=\"showHeaderBorder()\">\n\n        @if (showBackButton()) {\n          <button\n            type=\"button\"\n            class=\"shrink-0 cursor-pointer rounded-full p-2 text-neutral-600 transition-colors hover:bg-neutral-50\"\n            (click)=\"goBack()\"\n            aria-label=\"Back\">\n            <svg class=\"h-[18px] w-[18px]\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n              <path d=\"M20 11V13H8.00003L13.5 18.5L12.08 19.92L4.16003 12L12.08 4.07996L13.5 5.49996L8.00003 11H20Z\"\n                    fill=\"currentColor\"/>\n            </svg>\n          </button>\n        }\n\n        <div class=\"min-w-0 flex-1 pt-0.5\">\n          <div class=\"text-h6 text-role-body\">{{ title() }}</div>\n          @if (description()) {\n            <p class=\"mt-1 text-caption text-role-caption\">{{ description() }}</p>\n          }\n        </div>\n\n        <button\n          type=\"button\"\n          class=\"shrink-0 cursor-pointer rounded-lg p-2 text-neutral-600 transition-colors hover:bg-neutral-50\"\n          (click)=\"onCloseClicked()\"\n          aria-label=\"Close\">\n          <svg class=\"h-[18px] w-[18px]\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <path\n              d=\"M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z\"\n              fill=\"currentColor\"/>\n          </svg>\n        </button>\n      </div>\n    }\n  }\n\n  <div\n    class=\"min-h-0 flex-1 overflow-y-auto overscroll-y-contain\"\n    [ngClass]=\"enableDefaultLayout() ? 'px-5 py-4' : ''\">\n    <ng-content select=\"[body]\">\n      <ng-container #container></ng-container>\n    </ng-content>\n  </div>\n\n\n  @if (enableDefaultLayout()) {\n    <div\n      #actionsContainer\n      class=\"actions-container shrink-0 px-4 py-4\"\n      [class.border-t]=\"showActionsBorder()\"\n      [class.border-neutral-200]=\"showActionsBorder()\">\n      <div #actions class=\"w-full\">\n        <ng-content select=\"[actions]\"></ng-content>\n      </div>\n    </div>\n  }\n\n</div>\n", styles: [":host{display:block;max-height:100%;min-height:0}\n"] }]
         }], propDecorators: { container: [{
                 type: ViewChild,
                 args: ['container', { read: ViewContainerRef, static: true }]
@@ -5127,7 +5141,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
             }], actionsContainerDiv: [{
                 type: ViewChild,
                 args: ['actionsContainer', { static: false }]
-            }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], showTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTitle", required: false }] }], showBackButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBackButton", required: false }] }], enableDefaultLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableDefaultLayout", required: false }] }], onBackClicked: [{ type: i0.Output, args: ["onBackClicked"] }] } });
+            }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], showTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTitle", required: false }] }], showHeaderBorder: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeaderBorder", required: false }] }], showActionsBorder: [{ type: i0.Input, args: [{ isSignal: true, alias: "showActionsBorder", required: false }] }], showBackButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBackButton", required: false }] }], enableDefaultLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableDefaultLayout", required: false }] }], onBackClicked: [{ type: i0.Output, args: ["onBackClicked"] }] } });
 
 class OverlayWizardUtils {
     uiState = signal([], /* @ts-ignore */
@@ -8391,10 +8405,11 @@ class SignalNumberField extends BaseSignalTextInputControl {
     ...(ngDevMode ? [{ debugName: "hideSpinButtons" }] : /* istanbul ignore next */ []));
     showClearButton = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "showClearButton" }] : /* istanbul ignore next */ []));
-    debounceValueChange = input(true, /* @ts-ignore */
+    debounceValueChange = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "debounceValueChange" }] : /* istanbul ignore next */ []));
     debounceMs = input(600, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "debounceMs" }] : /* istanbul ignore next */ []));
+    // Outputs
     valueChange = output();
     enter = output();
     clear = output();
@@ -9077,10 +9092,11 @@ class SignalPhoneNumberField extends BaseSignalTextInputControl {
     ...(ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []));
     showClearButton = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "showClearButton" }] : /* istanbul ignore next */ []));
-    debounceValueChange = input(true, /* @ts-ignore */
+    debounceValueChange = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "debounceValueChange" }] : /* istanbul ignore next */ []));
     debounceMs = input(600, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "debounceMs" }] : /* istanbul ignore next */ []));
+    // Outputs
     valueChange = output();
     enter = output();
     clear = output();
@@ -9381,7 +9397,7 @@ class SignalTextarea extends BaseSignalTextInputControl {
     // Behavior
     showClearButton = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "showClearButton" }] : /* istanbul ignore next */ []));
-    debounceValueChange = input(true, /* @ts-ignore */
+    debounceValueChange = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "debounceValueChange" }] : /* istanbul ignore next */ []));
     debounceMs = input(600, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "debounceMs" }] : /* istanbul ignore next */ []));
@@ -9745,6 +9761,7 @@ class SignalRadioGroup extends BaseFormControl {
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     options = input([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    valueChange = output();
     instanceId = ++nextGroupId;
     groupLabelId = computed(() => `signal-radio-group-label-${this.instanceId}`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "groupLabelId" }] : /* istanbul ignore next */ []));
@@ -9758,10 +9775,11 @@ class SignalRadioGroup extends BaseFormControl {
     ...(ngDevMode ? [{ debugName: "hasOptions" }] : /* istanbul ignore next */ []));
     showGroupError = this.showError;
     setValue(value) {
-        if (this.readonly()) {
+        if (this.disabled() || this.readonly()) {
             return;
         }
         super.setValue(value);
+        this.valueChange.emit(value);
     }
     markOptionFocus() {
         this.isFocused.set(true);
@@ -9777,16 +9795,16 @@ class SignalRadioGroup extends BaseFormControl {
         }
         this.isFocused.set(false);
         if (!this.disabled()) {
-            this.touched.set(true);
+            this.touch.emit();
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalRadioGroup, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalRadioGroup, isStandalone: true, selector: "lib-signal-radio-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, groupName: { classPropertyName: "groupName", publicName: "groupName", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: SIGNAL_RADIO_GROUP, useExisting: SignalRadioGroup }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n  [label]=\"label()\"\n  [showExternalLabel]=\"true\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [hint]=\"hint()\"\n  [inputId]=\"groupLabelId()\">\n\n  <div\n    input\n    role=\"radiogroup\"\n    [class]=\"orientationClasses()\"\n    [attr.aria-labelledby]=\"label() ? groupLabelId() : null\"\n    [attr.aria-invalid]=\"showError() || null\"\n    (focusout)=\"onGroupFocusOut($event)\">\n    @if (hasOptions()) {\n      @for (option of options(); track option.value) {\n        <lib-signal-radio\n          [optionValue]=\"option.value\"\n          [label]=\"option.label\"\n          [hint]=\"option.hint ?? ''\"\n          [size]=\"size()\"\n          [disabled]=\"disabled() || !!option.disabled\" />\n      }\n    } @else {\n      <ng-content />\n    }\n  </div>\n\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { kind: "component", type: SignalRadio, selector: "lib-signal-radio", inputs: ["groupName", "optionValue", "label", "hint", "id", "size"], outputs: ["valueChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalRadioGroup, isStandalone: true, selector: "lib-signal-radio-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, groupName: { classPropertyName: "groupName", publicName: "groupName", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, providers: [{ provide: SIGNAL_RADIO_GROUP, useExisting: SignalRadioGroup }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n  [label]=\"label()\"\n  [showExternalLabel]=\"true\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [hint]=\"hint()\"\n  [inputId]=\"groupLabelId()\">\n\n  <div\n    input\n    role=\"radiogroup\"\n    [class]=\"orientationClasses()\"\n    [attr.aria-labelledby]=\"label() ? groupLabelId() : null\"\n    [attr.aria-invalid]=\"showError() || null\"\n    (focusout)=\"onGroupFocusOut($event)\">\n    @if (hasOptions()) {\n      @for (option of options(); track option.value) {\n        <lib-signal-radio\n          [optionValue]=\"option.value\"\n          [label]=\"option.label\"\n          [hint]=\"option.hint ?? ''\"\n          [size]=\"size()\"\n          [disabled]=\"disabled() || !!option.disabled\" />\n      }\n    } @else {\n      <ng-content />\n    }\n  </div>\n\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }, { kind: "component", type: SignalRadio, selector: "lib-signal-radio", inputs: ["groupName", "optionValue", "label", "hint", "id", "size"], outputs: ["valueChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalRadioGroup, decorators: [{
             type: Component,
             args: [{ selector: 'lib-signal-radio-group', imports: [BaseSignalInput, SignalRadio], providers: [{ provide: SIGNAL_RADIO_GROUP, useExisting: SignalRadioGroup }], template: "<lib-base-signal-input\n  [label]=\"label()\"\n  [showExternalLabel]=\"true\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [hint]=\"hint()\"\n  [inputId]=\"groupLabelId()\">\n\n  <div\n    input\n    role=\"radiogroup\"\n    [class]=\"orientationClasses()\"\n    [attr.aria-labelledby]=\"label() ? groupLabelId() : null\"\n    [attr.aria-invalid]=\"showError() || null\"\n    (focusout)=\"onGroupFocusOut($event)\">\n    @if (hasOptions()) {\n      @for (option of options(); track option.value) {\n        <lib-signal-radio\n          [optionValue]=\"option.value\"\n          [label]=\"option.label\"\n          [hint]=\"option.hint ?? ''\"\n          [size]=\"size()\"\n          [disabled]=\"disabled() || !!option.disabled\" />\n      }\n    } @else {\n      <ng-content />\n    }\n  </div>\n\n</lib-base-signal-input>\n" }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], groupName: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupName", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }] } });
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], groupName: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupName", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
 
 let nextSwitchId = 0;
 class SignalSwitch extends BaseFormControl {
@@ -10168,7 +10186,7 @@ class SignalDropdown extends BaseSignalTextInputControl {
     // Behavior
     showClearButton = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "showClearButton" }] : /* istanbul ignore next */ []));
-    debounceValueChange = input(true, /* @ts-ignore */
+    debounceValueChange = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "debounceValueChange" }] : /* istanbul ignore next */ []));
     debounceMs = input(600, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "debounceMs" }] : /* istanbul ignore next */ []));
@@ -10177,6 +10195,7 @@ class SignalDropdown extends BaseSignalTextInputControl {
     mobilePresentation = input('modal', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "mobilePresentation" }] : /* istanbul ignore next */ []));
     // Outputs
+    // Outputs
     valueChange = output();
     postfixIconClick = output();
     instanceId = ++nextDropdownId;
@@ -10409,10 +10428,7 @@ class SignalDropdown extends BaseSignalTextInputControl {
             ? this.overlayService.openBottomSheet(SignalDropdownPanelOverlayComponent, openOptions)
             : presentation === 'fullScreen'
                 ? this.overlayService.openFullScreen(SignalDropdownPanelOverlayComponent, openOptions)
-                : this.overlayService.openModal(SignalDropdownPanelOverlayComponent, {
-                    ...openOptions,
-                    maxHeightClass: 'max-h-[80vh]',
-                });
+                : this.overlayService.openModal(SignalDropdownPanelOverlayComponent, openOptions);
         this.mobileDialogRef = dialogRef;
         this.isOpen.set(true);
         this.mobileDialogSub?.unsubscribe();
@@ -10737,7 +10753,7 @@ class SignalMultiSelectDropdown extends BaseSignalTextInputControl {
     // Behavior
     showClearButton = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "showClearButton" }] : /* istanbul ignore next */ []));
-    debounceValueChange = input(true, /* @ts-ignore */
+    debounceValueChange = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "debounceValueChange" }] : /* istanbul ignore next */ []));
     debounceMs = input(600, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "debounceMs" }] : /* istanbul ignore next */ []));
@@ -10748,6 +10764,7 @@ class SignalMultiSelectDropdown extends BaseSignalTextInputControl {
     mobileOkLabel = input('OK', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "mobileOkLabel" }] : /* istanbul ignore next */ []));
     // Outputs
+    // Outputs
     valueChange = output();
     postfixIconClick = output();
     instanceId = ++nextMultiSelectDropdownId;
@@ -11013,10 +11030,7 @@ class SignalMultiSelectDropdown extends BaseSignalTextInputControl {
             ? this.overlayService.openBottomSheet(SignalMultiSelectDropdownPanelOverlayComponent, openOptions)
             : presentation === 'fullScreen'
                 ? this.overlayService.openFullScreen(SignalMultiSelectDropdownPanelOverlayComponent, openOptions)
-                : this.overlayService.openModal(SignalMultiSelectDropdownPanelOverlayComponent, {
-                    ...openOptions,
-                    maxHeightClass: 'max-h-[80vh]',
-                });
+                : this.overlayService.openModal(SignalMultiSelectDropdownPanelOverlayComponent, openOptions);
         this.mobileDialogRef = dialogRef;
         this.isOpen.set(true);
         this.mobileDialogSub?.unsubscribe();
@@ -11259,10 +11273,11 @@ class SignalDatePicker extends BaseFormControl {
     ...(ngDevMode ? [{ debugName: "disabledDays" }] : /* istanbul ignore next */ []));
     disabledDates = input([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "disabledDates" }] : /* istanbul ignore next */ []));
-    debounceValueChange = input(true, /* @ts-ignore */
+    debounceValueChange = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "debounceValueChange" }] : /* istanbul ignore next */ []));
     debounceMs = input(600, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "debounceMs" }] : /* istanbul ignore next */ []));
+    // Outputs
     valueChange = output();
     dateSelected = output();
     uiMode = signal('date', /* @ts-ignore */
@@ -11719,7 +11734,7 @@ class SignalDateField extends BaseSignalTextInputControl {
     ...(ngDevMode ? [undefined, { debugName: "fieldName" }] : /* istanbul ignore next */ []));
     autocomplete = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "autocomplete" }] : /* istanbul ignore next */ []));
-    debounceValueChange = input(true, /* @ts-ignore */
+    debounceValueChange = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "debounceValueChange" }] : /* istanbul ignore next */ []));
     debounceMs = input(600, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "debounceMs" }] : /* istanbul ignore next */ []));
@@ -11741,6 +11756,7 @@ class SignalDateField extends BaseSignalTextInputControl {
     ...(ngDevMode ? [{ debugName: "disabledDays" }] : /* istanbul ignore next */ []));
     disabledDates = input([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "disabledDates" }] : /* istanbul ignore next */ []));
+    // Outputs
     valueChange = output();
     dateSelected = output();
     clear = output();
@@ -12103,10 +12119,11 @@ class SignalDateRangePicker extends BaseFormControl {
     ...(ngDevMode ? [{ debugName: "disabledDays" }] : /* istanbul ignore next */ []));
     disabledDates = input([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "disabledDates" }] : /* istanbul ignore next */ []));
-    debounceValueChange = input(true, /* @ts-ignore */
+    debounceValueChange = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "debounceValueChange" }] : /* istanbul ignore next */ []));
     debounceMs = input(600, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "debounceMs" }] : /* istanbul ignore next */ []));
+    // Outputs
     valueChange = output();
     dateRangeSelected = output();
     uiMode = signal('date', /* @ts-ignore */
@@ -12610,7 +12627,7 @@ class SignalDateRangeField extends BaseSignalTextInputControl {
     ...(ngDevMode ? [undefined, { debugName: "fieldName" }] : /* istanbul ignore next */ []));
     autocomplete = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "autocomplete" }] : /* istanbul ignore next */ []));
-    debounceValueChange = input(true, /* @ts-ignore */
+    debounceValueChange = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "debounceValueChange" }] : /* istanbul ignore next */ []));
     debounceMs = input(600, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "debounceMs" }] : /* istanbul ignore next */ []));
@@ -12632,6 +12649,7 @@ class SignalDateRangeField extends BaseSignalTextInputControl {
     ...(ngDevMode ? [{ debugName: "disabledDays" }] : /* istanbul ignore next */ []));
     disabledDates = input([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "disabledDates" }] : /* istanbul ignore next */ []));
+    // Outputs
     valueChange = output();
     dateRangeSelected = output();
     clear = output();
@@ -13077,10 +13095,11 @@ class SignalTimePicker extends BaseFormControl {
     ...(ngDevMode ? [{ debugName: "timeFormat" }] : /* istanbul ignore next */ []));
     embedded = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "embedded" }] : /* istanbul ignore next */ []));
-    debounceValueChange = input(true, /* @ts-ignore */
+    debounceValueChange = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "debounceValueChange" }] : /* istanbul ignore next */ []));
     debounceMs = input(600, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "debounceMs" }] : /* istanbul ignore next */ []));
+    // Outputs
     valueChange = output();
     timeSelected = output();
     is24HourFormat = signal(false, /* @ts-ignore */
@@ -13387,7 +13406,7 @@ class SignalTimeField extends BaseSignalTextInputControl {
     ...(ngDevMode ? [undefined, { debugName: "fieldName" }] : /* istanbul ignore next */ []));
     autocomplete = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "autocomplete" }] : /* istanbul ignore next */ []));
-    debounceValueChange = input(true, /* @ts-ignore */
+    debounceValueChange = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "debounceValueChange" }] : /* istanbul ignore next */ []));
     debounceMs = input(600, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "debounceMs" }] : /* istanbul ignore next */ []));
@@ -13397,6 +13416,7 @@ class SignalTimeField extends BaseSignalTextInputControl {
     ...(ngDevMode ? [{ debugName: "mobilePresentation" }] : /* istanbul ignore next */ []));
     okLabel = input('OK', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "okLabel" }] : /* istanbul ignore next */ []));
+    // Outputs
     valueChange = output();
     timeSelected = output();
     clear = output();
@@ -13735,6 +13755,7 @@ class SignalOtpField extends BaseFormControl {
     ...(ngDevMode ? [{ debugName: "obscureChar" }] : /* istanbul ignore next */ []));
     id = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
+    valueChange = output();
     completed = output();
     digitInputs;
     destroyRef = inject(DestroyRef);
@@ -13953,6 +13974,7 @@ class SignalOtpField extends BaseFormControl {
     commitDigits(digits) {
         const value = digitsToValue(digits);
         this.setValue(value);
+        this.valueChange.emit(value);
         if (value.length === this.length() && digits.every((digit) => digit !== '')) {
             this.completed.emit(value);
         }
@@ -14028,12 +14050,12 @@ class SignalOtpField extends BaseFormControl {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalOtpField, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalOtpField, isStandalone: true, selector: "lib-signal-otp-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null }, maskMode: { classPropertyName: "maskMode", publicName: "maskMode", isSignal: true, isRequired: false, transformFunction: null }, maskDelayMs: { classPropertyName: "maskDelayMs", publicName: "maskDelayMs", isSignal: true, isRequired: false, transformFunction: null }, obscureChar: { classPropertyName: "obscureChar", publicName: "obscureChar", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { completed: "completed" }, viewQueries: [{ propertyName: "digitInputs", predicate: ["digitInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n  [label]=\"label()\"\n  [showExternalLabel]=\"!!label()\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [hint]=\"hint()\"\n  [inputId]=\"inputId()\">\n\n  <div\n    input\n    role=\"group\"\n    class=\"flex flex-wrap gap-2\"\n    [attr.aria-label]=\"label() || 'One-time password'\"\n    [attr.aria-required]=\"showRequiredIndicator() || null\"\n    [attr.aria-invalid]=\"showError() || null\">\n\n    @for (index of digitIndices(); track index) {\n      <div\n        class=\"group\"\n        [class]=\"cellClasses(index)\"\n        (click)=\"onCellClick(index)\">\n        @if (shouldShowOverlay(index)) {\n          <span\n            class=\"pointer-events-none absolute inset-0 flex items-center justify-center text-lg font-semibold text-role-body\"\n            aria-hidden=\"true\">\n            {{ displayChar(index) }}\n          </span>\n        }\n\n        <input\n          #digitInput\n          class=\"relative z-10\"\n          [class]=\"inputClasses(index)\"\n          [type]=\"maskMode() === 'alwaysObscure' ? 'password' : 'text'\"\n          inputmode=\"numeric\"\n          pattern=\"[0-9]*\"\n          maxlength=\"1\"\n          autocomplete=\"one-time-code\"\n          [id]=\"index === 0 ? inputId() : null\"\n          [disabled]=\"disabled()\"\n          [readonly]=\"readonly()\"\n          [attr.aria-readonly]=\"readonly() || null\"\n          [attr.aria-label]=\"'Digit ' + (index + 1) + ' of ' + length()\"\n          (input)=\"onInput($event, index)\"\n          (keydown)=\"onKeyDown($event, index)\"\n          (paste)=\"onPaste($event, index)\"\n          (focus)=\"onCellFocus(index)\"\n          (blur)=\"onCellBlur()\" />\n      </div>\n    }\n  </div>\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalOtpField, isStandalone: true, selector: "lib-signal-otp-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null }, maskMode: { classPropertyName: "maskMode", publicName: "maskMode", isSignal: true, isRequired: false, transformFunction: null }, maskDelayMs: { classPropertyName: "maskDelayMs", publicName: "maskDelayMs", isSignal: true, isRequired: false, transformFunction: null }, obscureChar: { classPropertyName: "obscureChar", publicName: "obscureChar", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", completed: "completed" }, viewQueries: [{ propertyName: "digitInputs", predicate: ["digitInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n  [label]=\"label()\"\n  [showExternalLabel]=\"!!label()\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [hint]=\"hint()\"\n  [inputId]=\"inputId()\">\n\n  <div\n    input\n    role=\"group\"\n    class=\"flex flex-wrap gap-2\"\n    [attr.aria-label]=\"label() || 'One-time password'\"\n    [attr.aria-required]=\"showRequiredIndicator() || null\"\n    [attr.aria-invalid]=\"showError() || null\">\n\n    @for (index of digitIndices(); track index) {\n      <div\n        class=\"group\"\n        [class]=\"cellClasses(index)\"\n        (click)=\"onCellClick(index)\">\n        @if (shouldShowOverlay(index)) {\n          <span\n            class=\"pointer-events-none absolute inset-0 flex items-center justify-center text-lg font-semibold text-role-body\"\n            aria-hidden=\"true\">\n            {{ displayChar(index) }}\n          </span>\n        }\n\n        <input\n          #digitInput\n          class=\"relative z-10\"\n          [class]=\"inputClasses(index)\"\n          [type]=\"maskMode() === 'alwaysObscure' ? 'password' : 'text'\"\n          inputmode=\"numeric\"\n          pattern=\"[0-9]*\"\n          maxlength=\"1\"\n          autocomplete=\"one-time-code\"\n          [id]=\"index === 0 ? inputId() : null\"\n          [disabled]=\"disabled()\"\n          [readonly]=\"readonly()\"\n          [attr.aria-readonly]=\"readonly() || null\"\n          [attr.aria-label]=\"'Digit ' + (index + 1) + ' of ' + length()\"\n          (input)=\"onInput($event, index)\"\n          (keydown)=\"onKeyDown($event, index)\"\n          (paste)=\"onPaste($event, index)\"\n          (focus)=\"onCellFocus(index)\"\n          (blur)=\"onCellBlur()\" />\n      </div>\n    }\n  </div>\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalOtpField, decorators: [{
             type: Component,
             args: [{ selector: 'lib-signal-otp-field', imports: [BaseSignalInput], template: "<lib-base-signal-input\n  [label]=\"label()\"\n  [showExternalLabel]=\"!!label()\"\n  [showRequired]=\"showRequiredIndicator()\"\n  [showError]=\"showError()\"\n  [errorMessage]=\"errorMessage()\"\n  [disabled]=\"disabled()\"\n  [hint]=\"hint()\"\n  [inputId]=\"inputId()\">\n\n  <div\n    input\n    role=\"group\"\n    class=\"flex flex-wrap gap-2\"\n    [attr.aria-label]=\"label() || 'One-time password'\"\n    [attr.aria-required]=\"showRequiredIndicator() || null\"\n    [attr.aria-invalid]=\"showError() || null\">\n\n    @for (index of digitIndices(); track index) {\n      <div\n        class=\"group\"\n        [class]=\"cellClasses(index)\"\n        (click)=\"onCellClick(index)\">\n        @if (shouldShowOverlay(index)) {\n          <span\n            class=\"pointer-events-none absolute inset-0 flex items-center justify-center text-lg font-semibold text-role-body\"\n            aria-hidden=\"true\">\n            {{ displayChar(index) }}\n          </span>\n        }\n\n        <input\n          #digitInput\n          class=\"relative z-10\"\n          [class]=\"inputClasses(index)\"\n          [type]=\"maskMode() === 'alwaysObscure' ? 'password' : 'text'\"\n          inputmode=\"numeric\"\n          pattern=\"[0-9]*\"\n          maxlength=\"1\"\n          autocomplete=\"one-time-code\"\n          [id]=\"index === 0 ? inputId() : null\"\n          [disabled]=\"disabled()\"\n          [readonly]=\"readonly()\"\n          [attr.aria-readonly]=\"readonly() || null\"\n          [attr.aria-label]=\"'Digit ' + (index + 1) + ' of ' + length()\"\n          (input)=\"onInput($event, index)\"\n          (keydown)=\"onKeyDown($event, index)\"\n          (paste)=\"onPaste($event, index)\"\n          (focus)=\"onCellFocus(index)\"\n          (blur)=\"onCellBlur()\" />\n      </div>\n    }\n  </div>\n</lib-base-signal-input>\n" }]
-        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: false }] }], maskMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "maskMode", required: false }] }], maskDelayMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "maskDelayMs", required: false }] }], obscureChar: [{ type: i0.Input, args: [{ isSignal: true, alias: "obscureChar", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], completed: [{ type: i0.Output, args: ["completed"] }], digitInputs: [{
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: false }] }], maskMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "maskMode", required: false }] }], maskDelayMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "maskDelayMs", required: false }] }], obscureChar: [{ type: i0.Input, args: [{ isSignal: true, alias: "obscureChar", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], completed: [{ type: i0.Output, args: ["completed"] }], digitInputs: [{
                 type: ViewChildren,
                 args: ['digitInput']
             }] } });
@@ -15412,6 +15434,7 @@ function provideNglConfig(config) {
         ...config,
         input: { ...DEFAULT_NGL_INPUT_CONFIG, ...config.input },
         button: { ...DEFAULT_NGL_BUTTON_CONFIG, ...config.button },
+        overlay: { ...DEFAULT_NGL_OVERLAY_CONFIG, ...config.overlay },
         listResponse: { ...DEFAULT_NGL_LIST_RESPONSE, ...config.listResponse },
     };
     const providers = [
@@ -15505,5 +15528,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AlertDialogComponent, AppErrorComponent, AppSvgIconComponent, BaseApiService, BaseControlValueAccessor, BaseControlValueAccessorV2, BaseControlValueAccessorV3, BaseInputComponent, BaseOverlayComponent, BaseSignalInput, BaseTableComponent, BreadcrumbComponent, ButtonComponent, CheckboxComponent, ClickOutsideDirective, CloseButtonComponent, ColorConverterService, ColorFormats, ColorPickerComponent, ColorPickerDirective, ContextMenuButtonComponent, ContextMenuIconComponent, DEFAULT_NGL_BUTTON_CONFIG, DEFAULT_NGL_INPUT_CONFIG, DEFAULT_NGL_LIST_RESPONSE, DEFAULT_PHONE_COUNTRIES, DataTableComponent, DateInputComponent, DatePickerComponent, DatePickerOverlayComponent, DateRangePickerComponent, DateUtils, DropdownComponent, DynamicRendererComponent, EnvBannerComponent, FORM_ERRORS, FileUploaderComponent, FormValidationUtils, HumanizeFormMessagesPipe, InfiniteScrollDirective, InfiniteScrollModule, InputDateFormat, InvalidControlScrollContainerDirective, InvalidControlScrollDirective, InvalidTokenError, ListviewComponent, LoaderComponent, LoaderService, MultiSelectDropdownAppearance, MultiSelectDropdownComponent, MultiSelectionFieldComponent, NGL_CONFIG, NetworkImageComponent, NglService, NoDataComponent, NoDataTableComponent, NumberInputComponent, OpenFloatingMenuDirective, OverlayContextMenuComponent, OverlayService, OverlayWizardUtils, PaginationComponent, PaginationState, PhoneNumberInputComponent, RadioButtonComponent, RequestState, ResizableColumnDirective, ResponsiveHelperComponent, SIGNAL_FORM_ERRORS, SharedConstants, ShimmerComponent, SignalButton, SignalCheckbox, SignalColorField, SignalDataTableComponent, SignalDateField, SignalDatePicker, SignalDateRangeField, SignalDateRangePicker, SignalDropdown, SignalError, SignalFormDirective, SignalFormValidators, SignalMultiSelectDropdown, SignalNumberField, SignalOtpField, SignalPhoneNumberField, SignalRadio, SignalRadioGroup, SignalRangeSlider, SignalRating, SignalSlider, SignalSwitch, SignalTextField, SignalTextarea, SignalTimeField, SignalTimePicker, SingleItemPickerInputComponent, SingleSelectionFieldComponent, SortableTableDirective, SpinnerComponent, State, StatusBadgeComponent, SvgUrlIconComponent, SwitchComponent, TableCustomComponent, TableResizableColumnsDirective, TemplateResolverArrayUtil, TemplateResolverFormat, TextAreaInputComponent, TextInputComponent, ThemeService, TimePickerComponent, ToastComponent, ToastService, ToasterComponent, TooltipDirective, UnsavedAwareDirective, arrayToCSV, arrayToSeparator, arrayToSpaceSeparator, deepEqual, defaultErrors, defaultSignalFormErrors, getDynamicTypeStructure, getSignalButtonClasses, getSignalButtonIconClasses, getSignalButtonSpinnerBorderClass, getSignalFieldErrorMessage, getSignalValidationErrorMessage, isDynamicType, isValid, jsonEqual, jwtDecode, mmddyyyyDateValidatorAsync, onlyFutureDateValidator, onlyPastDateValidator, openLink, phoneNumbers, phoneNumbersAll, printInvalidFields, provideNglConfig, resolveTemplateWithObject, toSentenceCase, validateSignalForm };
+export { AlertDialogComponent, AppErrorComponent, AppSvgIconComponent, BaseApiService, BaseControlValueAccessor, BaseControlValueAccessorV2, BaseControlValueAccessorV3, BaseInputComponent, BaseOverlayComponent, BaseSignalInput, BaseTableComponent, BreadcrumbComponent, ButtonComponent, CheckboxComponent, ClickOutsideDirective, CloseButtonComponent, ColorConverterService, ColorFormats, ColorPickerComponent, ColorPickerDirective, ContextMenuButtonComponent, ContextMenuIconComponent, DEFAULT_NGL_BUTTON_CONFIG, DEFAULT_NGL_INPUT_CONFIG, DEFAULT_NGL_LIST_RESPONSE, DEFAULT_NGL_OVERLAY_CONFIG, DEFAULT_PHONE_COUNTRIES, DataTableComponent, DateInputComponent, DatePickerComponent, DatePickerOverlayComponent, DateRangePickerComponent, DateUtils, DropdownComponent, DynamicRendererComponent, EnvBannerComponent, FORM_ERRORS, FileUploaderComponent, FormValidationUtils, HumanizeFormMessagesPipe, InfiniteScrollDirective, InfiniteScrollModule, InputDateFormat, InvalidControlScrollContainerDirective, InvalidControlScrollDirective, InvalidTokenError, ListviewComponent, LoaderComponent, LoaderService, MultiSelectDropdownAppearance, MultiSelectDropdownComponent, MultiSelectionFieldComponent, NGL_CONFIG, NetworkImageComponent, NglService, NoDataComponent, NoDataTableComponent, NumberInputComponent, OpenFloatingMenuDirective, OverlayContextMenuComponent, OverlayService, OverlayWizardUtils, PaginationComponent, PaginationState, PhoneNumberInputComponent, RadioButtonComponent, RequestState, ResizableColumnDirective, ResponsiveHelperComponent, SIGNAL_FORM_ERRORS, SharedConstants, ShimmerComponent, SignalButton, SignalCheckbox, SignalColorField, SignalDataTableComponent, SignalDateField, SignalDatePicker, SignalDateRangeField, SignalDateRangePicker, SignalDropdown, SignalError, SignalFormDirective, SignalFormValidators, SignalMultiSelectDropdown, SignalNumberField, SignalOtpField, SignalPhoneNumberField, SignalRadio, SignalRadioGroup, SignalRangeSlider, SignalRating, SignalSlider, SignalSwitch, SignalTextField, SignalTextarea, SignalTimeField, SignalTimePicker, SingleItemPickerInputComponent, SingleSelectionFieldComponent, SortableTableDirective, SpinnerComponent, State, StatusBadgeComponent, SvgUrlIconComponent, SwitchComponent, TableCustomComponent, TableResizableColumnsDirective, TemplateResolverArrayUtil, TemplateResolverFormat, TextAreaInputComponent, TextInputComponent, ThemeService, TimePickerComponent, ToastComponent, ToastService, ToasterComponent, TooltipDirective, UnsavedAwareDirective, arrayToCSV, arrayToSeparator, arrayToSpaceSeparator, deepEqual, defaultErrors, defaultSignalFormErrors, getDynamicTypeStructure, getSignalButtonClasses, getSignalButtonIconClasses, getSignalButtonSpinnerBorderClass, getSignalFieldErrorMessage, getSignalValidationErrorMessage, isDynamicType, isValid, jsonEqual, jwtDecode, mmddyyyyDateValidatorAsync, onlyFutureDateValidator, onlyPastDateValidator, openLink, phoneNumbers, phoneNumbersAll, printInvalidFields, provideNglConfig, resolveTemplateWithObject, toSentenceCase, validateSignalForm };
 //# sourceMappingURL=vallift-ngl.mjs.map