@kouji-ui/core 0.3.0 → 0.5.0

package/fesm2022/kouji-ui-core.mjs

@@ -17374,11 +17374,15 @@ let kjFieldErrorIdCounter = 0;
  *
  * Carries `role="alert"` + `aria-live="polite"` so newly-shown errors
  * are announced. Hidden via `[hidden]` when the field is not in error
- * state.
+ * state — unless `kjFieldErrorReserve` is set, in which case the element
+ * keeps its box (`data-hidden` + `visibility: hidden` styling) so error
+ * text can appear and disappear without shifting the surrounding layout.
  *
  * @example
  * ```html
  * <span kjFieldError>Please enter a valid email.</span>
+ * <!-- Reserve the line so showing the error never moves the layout: -->
+ * <span kjFieldError kjFieldErrorReserve>Please enter a valid email.</span>
  * ```
  * @doc-category Core/Inputs
  * @doc
@@ -17389,6 +17393,12 @@ class KjFieldError {
     /** Override the auto-minted host id. */
     kjFieldErrorId = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "kjFieldErrorId" }] : /* istanbul ignore next */ []));
+    /**
+     * When set, the element keeps its layout box while the field is valid
+     * (`visibility: hidden` via `data-hidden` instead of `display: none`),
+     * so the error appearing never repositions the fields around it.
+     */
+    kjFieldErrorReserve = input(false, { ...(ngDevMode ? { debugName: "kjFieldErrorReserve" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** @internal */ id = (() => {
         const seq = ++kjFieldErrorIdCounter;
         return () => this.kjFieldErrorId() ?? `kj-field-error-${seq}`;
@@ -17399,7 +17409,7 @@ class KjFieldError {
         destroyRef.onDestroy(deregister);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjFieldError, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: KjFieldError, isStandalone: true, selector: "[kjFieldError]", inputs: { kjFieldErrorId: { classPropertyName: "kjFieldErrorId", publicName: "kjFieldErrorId", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "alert", "aria-live": "polite" }, properties: { "attr.id": "id()", "attr.hidden": "!ctx.invalid() ? \"\" : null" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: KjFieldError, isStandalone: true, selector: "[kjFieldError]", inputs: { kjFieldErrorId: { classPropertyName: "kjFieldErrorId", publicName: "kjFieldErrorId", isSignal: true, isRequired: false, transformFunction: null }, kjFieldErrorReserve: { classPropertyName: "kjFieldErrorReserve", publicName: "kjFieldErrorReserve", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "alert", "aria-live": "polite" }, properties: { "attr.id": "id()", "attr.hidden": "(!ctx.invalid() && !kjFieldErrorReserve()) ? \"\" : null", "attr.data-hidden": "(!ctx.invalid() && kjFieldErrorReserve()) ? \"\" : null", "attr.data-reserve": "kjFieldErrorReserve() ? \"\" : null" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjFieldError, decorators: [{
             type: Directive,
@@ -17410,10 +17420,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         role: 'alert',
                         'aria-live': 'polite',
                         '[attr.id]': 'id()',
-                        '[attr.hidden]': '!ctx.invalid() ? "" : null',
+                        '[attr.hidden]': '(!ctx.invalid() && !kjFieldErrorReserve()) ? "" : null',
+                        '[attr.data-hidden]': '(!ctx.invalid() && kjFieldErrorReserve()) ? "" : null',
+                        '[attr.data-reserve]': 'kjFieldErrorReserve() ? "" : null',
                     },
                 }]
-        }], ctorParameters: () => [], propDecorators: { kjFieldErrorId: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjFieldErrorId", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { kjFieldErrorId: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjFieldErrorId", required: false }] }], kjFieldErrorReserve: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjFieldErrorReserve", required: false }] }] } });
 
 /**
  * Compound input layout inside a `[kjField]`. Wraps an input together