monkey-style-guide 21.2.14 → 21.2.16

package/README.md

@@ -15,6 +15,49 @@ Run `ng build monkey-style-guide-v2` to build the project. The build artifacts w
 
 After building your library with `ng build monkey-style-guide-v2`, go to the dist folder `cd dist/monkey-style-guide-v2` and run `npm publish`.
 
+## Internationalization
+
+The library ships its own strings (`MonkeyDictionaryService`) in four buckets: `pt-BR`, `es-CL`,
+`es-MX` and `en-US`. `pt-BR` is the default and the per-key fallback.
+
+By default the active bucket comes from Angular's `LOCALE_ID`, which is fixed at bootstrap. Apps that
+resolve the language later (whitelabel/program config, a language switcher) should provide
+`MECX_I18N_LANG` and push every language change into it — the dictionary then re-renders mounted
+components without remounting them.
+
+```ts
+// app.config.ts
+const i18nLang$ = new BehaviorSubject<string>(env.locale.lang);
+
+providers: [
+  { provide: MECX_I18N_LANG, useValue: i18nLang$ },
+  { provide: LOCALE_ID, useValue: env.locale.lang }
+];
+```
+
+```ts
+// wherever the app switches language
+handleI18N(lang: string, obj?: any): void {
+  if (obj) { this._translateService.setTranslation(lang, obj, true); }
+  this._translateService.use(lang);
+  this._i18nLang.next(lang);
+}
+```
+
+When `MECX_I18N_LANG` is not provided the service behaves as before, reading `LOCALE_ID` once.
+
+Notes:
+
+- A language outside the four buckets falls back to `pt-BR` per key, never to blank labels. A new
+  language needs a full bucket — every key, including the nested `FILTER-BAR.DATE.*`,
+  `FILTER-BAR.OPERATOR.*` and `TABLE.ROW.*` groups — or the UI comes out mixed-language.
+- Overrides pushed through `MECX_I18N_WRAPPER` are merged into the bucket that is active when they
+  arrive, so push the new language into `MECX_I18N_LANG` **before** pushing its overrides.
+- This covers the dictionary only. `LOCALE_ID` also drives Angular's `date`, `currency`, `number` and
+  `percent` pipes, whose locale data is registered at bootstrap and cannot be swapped at runtime — so
+  a switched app can show pt-BR labels next to `MM/dd/yyyy` dates. Use `registerLocaleData` and a
+  reload for pipe formats.
+
 ## Running unit tests
 
 Run `ng test monkey-style-guide-v2` to execute the unit tests via [Karma](https://karma-runner.github.io).

package/fesm2022/monkey-style-guide.mjs

@@ -2,11 +2,11 @@ import { trigger, state, style, transition, animate, keyframes } from '@angular/
 import * as i1 from '@angular/common';
 import { CommonModule, NgTemplateOutlet, CurrencyPipe, AsyncPipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, input, Component, TemplateRef, inject, booleanAttribute, Input, HostBinding, ViewEncapsulation, output, InjectionToken, EventEmitter, Output, ViewContainerRef, ElementRef, NgZone, DestroyRef, Optional, Inject, Directive, LOCALE_ID, signal, computed, HostListener, effect, ContentChildren, ChangeDetectorRef, DEFAULT_CURRENCY_CODE, ContentChild, NgModule, ViewChild, ChangeDetectionStrategy, Injector, forwardRef, viewChild, untracked, afterNextRender, ViewChildren, model, contentChild, contentChildren, DOCUMENT } from '@angular/core';
+import { Injectable, input, Component, TemplateRef, inject, booleanAttribute, Input, HostBinding, ViewEncapsulation, output, InjectionToken, EventEmitter, Output, ViewContainerRef, ElementRef, NgZone, DestroyRef, Optional, Inject, Directive, LOCALE_ID, signal, computed, HostListener, effect, contentChild, contentChildren, ChangeDetectorRef, DEFAULT_CURRENCY_CODE, NgModule, ViewChild, ContentChild, ChangeDetectionStrategy, Injector, forwardRef, ContentChildren, viewChild, untracked, afterNextRender, ViewChildren, model, DOCUMENT } from '@angular/core';
 import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import * as i1$1 from '@angular/forms';
 import { Validators, NgControl, FormsModule, ReactiveFormsModule, FormControlDirective, NgModel, FormControlName, FormGroupDirective, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
-import { filter, of, map, BehaviorSubject, firstValueFrom, merge, Subject, debounceTime, distinctUntilChanged, switchMap, catchError, Subscription } from 'rxjs';
+import { filter, of, map, BehaviorSubject, combineLatest, distinctUntilChanged, firstValueFrom, Subject, debounceTime, switchMap, catchError, Subscription } from 'rxjs';
 import * as i1$2 from '@angular/cdk/overlay';
 import { Overlay, OverlayPositionBuilder, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
 import { ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
@@ -827,6 +827,7 @@ const MECX_I18N_WRAPPER = new InjectionToken('');
 const MECX_POPOVER_OPTIONS = new InjectionToken('MECX_POPOVER_OPTIONS');
 const MECX_COUNTRY_ISO_CODE = new InjectionToken('BR');
 const MECX_GOOGLE_API_KEY = new InjectionToken('');
+const MECX_I18N_LANG = new InjectionToken('MECX_I18N_LANG');
 function injectTokenWithWarning(token, name) {
     const value = inject(token, { optional: true });
     if (!value) {
@@ -1285,10 +1286,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
  * This style guide was developed by Monkey Exchange Team
  * MIT Licence
  ************************* */
+const DEFAULT_LOCALE = 'pt-BR';
 class MonkeyDictionaryService {
     constructor() {
         this._localeId = inject(LOCALE_ID);
         this._destroyRef = inject(DestroyRef);
+        this._lang$ = inject(MECX_I18N_LANG, { optional: true }) ??
+            new BehaviorSubject(this._localeId || DEFAULT_LOCALE);
         this._data$ = new BehaviorSubject({
             'pt-BR': {
                 EDIT: 'Editar',
@@ -1735,7 +1739,7 @@ class MonkeyDictionaryService {
     }
     handleWrapperValues(value) {
         try {
-            const locale = this._localeId || 'pt-BR';
+            const locale = this._lang$.value || DEFAULT_LOCALE;
             const wrappedData = JSON.parse(value);
             const currentData = this._data$.value;
             const updated = {
@@ -1753,10 +1757,10 @@ class MonkeyDictionaryService {
         }
     }
     get(key) {
-        const locale = this._localeId || 'pt-BR';
-        return this._data$.pipe(map((data) => {
-            return data[locale]?.[key] ?? null;
-        }));
+        return combineLatest([this._data$, this._lang$]).pipe(map(([data, lang]) => {
+            const locale = lang || DEFAULT_LOCALE;
+            return data[locale]?.[key] ?? data[DEFAULT_LOCALE]?.[key] ?? null;
+        }), distinctUntilChanged());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MonkeyDictionaryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MonkeyDictionaryService, providedIn: 'root' }); }
@@ -2227,24 +2231,18 @@ class MonkeyFormFieldComponent {
         this._id = value || this._uid;
     }
     get control() {
-        return this._formFieldControl;
+        return this._formFieldControl();
     }
     get labelId() {
         return this._labelId;
     }
-    get showHeader() {
-        return this.hasLabel || this.hasHelper;
-    }
-    get showFooter() {
-        return this.hasInfo || this.hasError;
-    }
     get showInvalid() {
         if (this.showLoading) {
             return false;
         }
         const touched = this.control.ngControl?.touched || false;
         const invalid = this.control.ngControl?.invalid || false;
-        return (this.hasError && !this._isFocused && touched && invalid && !this.control.disableToBeDirty);
+        return (this.hasError() && !this._isFocused && touched && invalid && !this.control.disableToBeDirty);
     }
     get showCalendar() {
         return this.control.type === 'date' && !this.hideAction;
@@ -2263,27 +2261,14 @@ class MonkeyFormFieldComponent {
         this.noFooterSpace = false;
         this.displayOnly = input(false, ...(ngDevMode ? [{ debugName: "displayOnly" }] : /* istanbul ignore next */ []));
         this.onDisplayOnlyChange = output();
-        this._displayChild = ContentChildren(MonkeyDisplayDirective, {
-            descendants: true
-        });
-        this._labelChildren = ContentChildren(MonkeyLabelDirective, {
-            descendants: true
-        });
-        this._helperChildren = ContentChildren(MonkeyHelperDirective, {
-            descendants: true
-        });
-        this._prefixChildren = ContentChildren(MonkeyPrefixDirective, {
-            descendants: true
-        });
-        this._suffixChildren = ContentChildren(MonkeySuffixDirective, {
-            descendants: true
-        });
-        this._infoChildren = ContentChildren(MonkeyInfoDirective, {
-            descendants: true
-        });
-        this._errorChildren = ContentChildren(MonkeyErrorDirective, {
-            descendants: true
-        });
+        this._formFieldControl = contentChild(MonkeyFormFieldControl, { ...(ngDevMode ? { debugName: "_formFieldControl" } : /* istanbul ignore next */ {}), descendants: true });
+        this._displayChild = contentChild(MonkeyDisplayDirective, { ...(ngDevMode ? { debugName: "_displayChild" } : /* istanbul ignore next */ {}), descendants: true });
+        this._labelChildren = contentChildren(MonkeyLabelDirective, { ...(ngDevMode ? { debugName: "_labelChildren" } : /* istanbul ignore next */ {}), descendants: true });
+        this._helperChildren = contentChildren(MonkeyHelperDirective, { ...(ngDevMode ? { debugName: "_helperChildren" } : /* istanbul ignore next */ {}), descendants: true });
+        this._prefixChildren = contentChildren(MonkeyPrefixDirective, { ...(ngDevMode ? { debugName: "_prefixChildren" } : /* istanbul ignore next */ {}), descendants: true });
+        this._suffixChildren = contentChildren(MonkeySuffixDirective, { ...(ngDevMode ? { debugName: "_suffixChildren" } : /* istanbul ignore next */ {}), descendants: true });
+        this._infoChildren = contentChildren(MonkeyInfoDirective, { ...(ngDevMode ? { debugName: "_infoChildren" } : /* istanbul ignore next */ {}), descendants: true });
+        this._errorChildren = contentChildren(MonkeyErrorDirective, { ...(ngDevMode ? { debugName: "_errorChildren" } : /* istanbul ignore next */ {}), descendants: true });
         this.elementRef = inject(ElementRef);
         this._changeDetectorRef = inject(ChangeDetectorRef);
         this._idGenerator = inject(IdGenerator);
@@ -2294,12 +2279,14 @@ class MonkeyFormFieldComponent {
         this._previousControl = null;
         this.currencySymbol = getCurrencySymbol(inject(DEFAULT_CURRENCY_CODE));
         this.percentSymbol = '%';
-        this.hasLabel = false;
-        this.hasHelper = false;
-        this.hasPrefix = false;
-        this.hasSuffix = false;
-        this.hasInfo = false;
-        this.hasError = false;
+        this.hasLabel = computed(() => this._labelChildren().length > 0, ...(ngDevMode ? [{ debugName: "hasLabel" }] : /* istanbul ignore next */ []));
+        this.hasHelper = computed(() => this._helperChildren().length > 0, ...(ngDevMode ? [{ debugName: "hasHelper" }] : /* istanbul ignore next */ []));
+        this.hasPrefix = computed(() => this._prefixChildren().length > 0, ...(ngDevMode ? [{ debugName: "hasPrefix" }] : /* istanbul ignore next */ []));
+        this.hasSuffix = computed(() => this._suffixChildren().length > 0, ...(ngDevMode ? [{ debugName: "hasSuffix" }] : /* istanbul ignore next */ []));
+        this.hasInfo = computed(() => this._infoChildren().length > 0, ...(ngDevMode ? [{ debugName: "hasInfo" }] : /* istanbul ignore next */ []));
+        this.hasError = computed(() => this._errorChildren().length > 0, ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
+        this.showHeader = computed(() => this.hasLabel() || this.hasHelper(), ...(ngDevMode ? [{ debugName: "showHeader" }] : /* istanbul ignore next */ []));
+        this.showFooter = computed(() => this.hasInfo() || this.hasError(), ...(ngDevMode ? [{ debugName: "showFooter" }] : /* istanbul ignore next */ []));
         this.hideBorder = computed(() => {
             const { control } = this;
             return (control?.type === 'input-code' ||
@@ -2321,6 +2308,16 @@ class MonkeyFormFieldComponent {
             const value = this.displayOnly();
             this.internalDisplayOnly.set(value);
         });
+        effect(() => {
+            const suffix = this._suffixChildren()[0];
+            if (!suffix) {
+                return;
+            }
+            suffix.action = (event) => {
+                event.preventDefault();
+                event.stopPropagation();
+            };
+        });
     }
     updateFocusState() {
         if (this.control.focused && !this._isFocused) {
@@ -2335,45 +2332,6 @@ class MonkeyFormFieldComponent {
             throw Error('monkey-form-field must have a MonkeyFormFieldControl');
         }
     }
-    checkPrefixAndSuffix() {
-        this.hasPrefix = !!this._prefixChildren?.length;
-        this.hasSuffix = !!this._suffixChildren?.length;
-        const suffix = this._suffixChildren?.get?.(0);
-        if (suffix) {
-            suffix.action = (event) => {
-                event.preventDefault();
-                event.stopPropagation();
-            };
-        }
-    }
-    initializePrefixAndSuffix() {
-        this.checkPrefixAndSuffix();
-        if (this._prefixChildren?.changes || this._suffixChildren?.changes) {
-            merge(this._prefixChildren?.changes, this._suffixChildren?.changes).subscribe(() => {
-                this.checkPrefixAndSuffix();
-                this._changeDetectorRef.markForCheck();
-            });
-        }
-    }
-    checkInfoError() {
-        this.hasInfo = !!this._infoChildren?.length;
-        this.hasError = !!this._errorChildren?.length;
-    }
-    initializeInfoError() {
-        this.checkInfoError();
-        if (this._infoChildren?.changes || this._errorChildren?.changes) {
-            merge(this._infoChildren?.changes, this._errorChildren?.changes).subscribe(() => {
-                this.checkInfoError();
-                this._changeDetectorRef.markForCheck();
-            });
-        }
-    }
-    initializeComponents() {
-        this.hasLabel = Array.isArray(this._labelChildren) && this._labelChildren.length > 0;
-        this.hasHelper = Array.isArray(this._helperChildren) && this._helperChildren.length > 0;
-        this.initializePrefixAndSuffix();
-        this.initializeInfoError();
-    }
     initializeControl() {
         const { control } = this;
         this._stateChanges?.unsubscribe();
@@ -2401,8 +2359,7 @@ class MonkeyFormFieldComponent {
     }
     ngAfterContentInit() {
         this.handleFormFieldControl();
-        this.initializeComponents();
-        if (this.displayOnly() && !this._displayChild) {
+        if (this.displayOnly() && !this._displayChild()) {
             throw new Error('monkey-form-field: When `displayOnly` is true, a <monkey-display> element is required inside.');
         }
     }
@@ -2421,7 +2378,7 @@ class MonkeyFormFieldComponent {
         const touched = this.control.ngControl?.touched;
         const invalid = this.control.ngControl?.invalid;
         const isFocused = this._isFocused;
-        const hasInfoChildren = this._infoChildren && this._infoChildren.length > 0;
+        const hasInfoChildren = this._infoChildren().length > 0;
         const isControlEnabled = !this.control.disabled;
         const isControlDisableToBeDirty = !this.control.disableToBeDirty;
         const isTouched = touched;
@@ -2473,7 +2430,7 @@ class MonkeyFormFieldComponent {
         }, 0);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MonkeyFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MonkeyFormFieldComponent, isStandalone: false, selector: "monkey-form-field", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, hideAction: { classPropertyName: "hideAction", publicName: "hideAction", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, enableClear: { classPropertyName: "enableClear", publicName: "enableClear", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, noFooterSpace: { classPropertyName: "noFooterSpace", publicName: "noFooterSpace", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, displayOnly: { classPropertyName: "displayOnly", publicName: "displayOnly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDisplayOnlyChange: "onDisplayOnlyChange" }, host: { properties: { "class.mecx-disabled": "control.disabled", "class.mecx-form-field-focused": "control.focused", "class.mecx-form-field-invalid": "showInvalid", "class.mecx-form-field-borderless": "hideBorder()", "class.no-footer-space": "noFooterSpace", "attr.id": "id", "id": "id", "class": "size" }, classAttribute: "mecx-form-field" }, queries: [{ propertyName: "_formFieldControl", first: true, predicate: MonkeyFormFieldControl, descendants: true }], exportAs: ["monkeyFormField"], ngImport: i0, template: "@if (internalDisplayOnly()) {\r\n  <div class=\"mecx-form-field-display-only\" (click)=\"onCancelDisplayOnly($event)\">\r\n    <div class=\"mecx-form-field-display-only-header\">\r\n      <ng-container *ngTemplateOutlet=\"labelTpl\"></ng-container>\r\n    </div>\r\n    <div class=\"mecx-form-field-display-only-body\">\r\n      <ng-content select=\"monkey-display\"></ng-content>\r\n    </div>\r\n    <div class=\"mecx-form-field-display-only-action\">\r\n      {{ editDictionary | async }} <util-icon name=\"edit\" />\r\n    </div>\r\n  </div>\r\n} @else {\r\n  @if (showHeader) {\r\n    <div class=\"mecx-form-field-header\" (click)=\"control.onContainerClick($event)\">\r\n      <label [id]=\"labelId\" [attr.for]=\"control.id\">\r\n        <ng-container *ngTemplateOutlet=\"labelTpl\"></ng-container>\r\n      </label>\r\n      <ng-content select=\"monkey-helper\"></ng-content>\r\n    </div>\r\n  }\r\n\r\n  <div class=\"mecx-form-field-body\" (click)=\"control.onContainerClick($event)\">\r\n    @if (hasPrefix) {\r\n      <ng-content select=\"monkey-prefix\"></ng-content>\r\n    }\r\n    @if (getSymbols(); as symbols) {\r\n      <div class=\"mecx-form-field-prefix-symbol\">\r\n        {{ symbols }}\r\n      </div>\r\n    }\r\n\r\n    <ng-content></ng-content>\r\n\r\n    @if (showClear()) {\r\n      <util-icon class=\"mecx-clear\" name=\"clear\" (click)=\"onClear($event)\" />\r\n    }\r\n    @if (showCalendar) {\r\n      <util-icon class=\"mecx-calendar\" name=\"calendar\" (click)=\"onOpenCalendar($event)\" />\r\n    }\r\n    @if (showLoading) {\r\n      <util-icon class=\"mecx-form-field-loading\" name=\"loading\" />\r\n    }\r\n\r\n    @if (hasSuffix) {\r\n      <ng-content select=\"monkey-suffix\"></ng-content>\r\n    }\r\n  </div>\r\n\r\n  @if (showFooter) {\r\n    <div class=\"mecx-form-field-footer\" (click)=\"control.onContainerClick($event)\">\r\n      @switch (getFooterMessages()) {\r\n        @case ('error') {\r\n          <ng-content select=\"monkey-error\"></ng-content>\r\n        }\r\n        @case ('info') {\r\n          <div class=\"mecx-form-field-info\">\r\n            <ng-content select=\"monkey-info\"></ng-content>\r\n          </div>\r\n        }\r\n      }\r\n    </div>\r\n  }\r\n}\r\n\r\n<ng-template #labelTpl>\r\n  <ng-content select=\"monkey-label\"></ng-content>\r\n</ng-template>\r\n", styles: [".mecx-form-field{width:100%;display:inline-flex;flex-direction:column;min-width:0;text-align:left;gap:6px}.mecx-disabled .mecx-form-field{cursor:not-allowed;pointer-events:none}.mecx-form-field-header{display:flex;justify-content:space-between;align-items:flex-end}.mecx-disabled .mecx-form-field-header label{pointer-events:none}.mecx-form-field-loading{display:flex}.mecx-form-field-loading svg path{fill:var(--mecx-color-theme-main)}.mecx-form-field-body{width:100%;border-radius:4px;border:2px solid var(--mecx-color-gray-400);padding:8px;gap:4px;background:var(--mecx-color-white);color:var(--mecx-color-gray-500);box-sizing:border-box;height:40px;display:flex;align-items:center;position:relative}.mecx-form-field-invalid .mecx-form-field-body{border:2px solid var(--mecx-color-error-700)}.mecx-form-field-invalid .mecx-form-field-body .mecx-option:not(.mecx-option-disabled).radio:before{border:2px solid var(--mecx-color-error-700)}.mecx-form-field-focused .mecx-form-field-body{border-color:var(--mecx-color-gray-900)}.mecx-disabled .mecx-form-field-body{border-color:var(--mecx-color-gray-50);background:var(--mecx-color-gray-50);border-radius:8px;cursor:not-allowed}.mecx-form-field-body .mecx-clear,.mecx-form-field-body .mecx-calendar{display:flex;align-items:center;justify-content:center;cursor:pointer}.mecx-form-field-body .mecx-calendar svg path{fill:var(--mecx-color-theme-main)}.sm .mecx-form-field-body{height:32px}.sm .mecx-form-field-body monkey-prefix .mk-i,.sm .mecx-form-field-body monkey-suffix .mk-i{width:16px;height:16px;font-size:16px}.sm .mecx-form-field-body util-icon svg{transform:scale(.72)}.md .mecx-form-field-body{height:40px}.md .mecx-form-field-body monkey-prefix .mk-i,.md .mecx-form-field-body monkey-suffix .mk-i{width:20px;height:20px;font-size:20px}.md .mecx-form-field-body util-icon{transform:scale(.834)}.lg .mecx-form-field-body{height:48px}.mecx-form-field-footer{display:flex;flex-direction:column;min-height:16px}.no-footer-space .mecx-form-field-footer{min-height:initial}.mecx-form-field-prefix-symbol{color:var(--mecx-color-gray-700);font-size:16px;font-weight:400;font-style:normal;width:22px;text-align:center}.mecx-form-field-prefix-symbol .mk-i{display:flex}.mecx-disabled .mecx-form-field-prefix-symbol{color:var(--mecx-color-gray-400)!important;pointer-events:none}.mecx-form-field-borderless .mecx-form-field-body{background-color:transparent;border:0;border-radius:0;padding:0;height:unset;align-items:flex-start;outline:none;outline-offset:unset}.mecx-form-field-borderless.mecx-form-field-focused .mecx-form-field-body{outline:none;outline-offset:unset}.mecx-form-field-display-only{position:relative;display:inline-flex;width:100%;cursor:pointer}.mecx-form-field-display-only-header{width:50%;max-width:255px}@media(max-width:767.98px){.mecx-form-field-display-only-header{width:100%}}.mecx-form-field-display-only-header monkey-label{color:var(--mecx-color-gray-700);font-size:14px;font-weight:400;line-height:24px;letter-spacing:.14px;word-wrap:break-word}.mecx-form-field-display-only-body{color:var(--mecx-color-gray-900);font-size:14px;font-weight:400;line-height:24px;letter-spacing:.14px;word-wrap:break-word}.mecx-form-field-display-only-action{position:absolute;right:0;display:none;align-items:center;gap:4px;color:var(--mecx-color-gray-900);font-size:14px;font-weight:400;line-height:24px;letter-spacing:.14px;word-wrap:break-word;background:var(--mecx-color-white);padding:0 10px}.mecx-form-field-display-only-action util-icon svg{width:20px;height:20px}.mecx-form-field-display-only:hover .mecx-form-field-display-only-action{display:inline-flex;text-decoration:underline}\n/*!\n* Bootstrap Grid v5.3.7 (https://getbootstrap.com/)\n* Copyright 2011-2025 The Bootstrap Authors\n* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n*/\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MonkeyFormFieldComponent, isStandalone: false, selector: "monkey-form-field", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, hideAction: { classPropertyName: "hideAction", publicName: "hideAction", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, enableClear: { classPropertyName: "enableClear", publicName: "enableClear", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, noFooterSpace: { classPropertyName: "noFooterSpace", publicName: "noFooterSpace", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, displayOnly: { classPropertyName: "displayOnly", publicName: "displayOnly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDisplayOnlyChange: "onDisplayOnlyChange" }, host: { properties: { "class.mecx-disabled": "control.disabled", "class.mecx-form-field-focused": "control.focused", "class.mecx-form-field-invalid": "showInvalid", "class.mecx-form-field-borderless": "hideBorder()", "class.no-footer-space": "noFooterSpace", "attr.id": "id", "id": "id", "class": "size" }, classAttribute: "mecx-form-field" }, queries: [{ propertyName: "_formFieldControl", first: true, predicate: MonkeyFormFieldControl, descendants: true, isSignal: true }, { propertyName: "_displayChild", first: true, predicate: MonkeyDisplayDirective, descendants: true, isSignal: true }, { propertyName: "_labelChildren", predicate: MonkeyLabelDirective, descendants: true, isSignal: true }, { propertyName: "_helperChildren", predicate: MonkeyHelperDirective, descendants: true, isSignal: true }, { propertyName: "_prefixChildren", predicate: MonkeyPrefixDirective, descendants: true, isSignal: true }, { propertyName: "_suffixChildren", predicate: MonkeySuffixDirective, descendants: true, isSignal: true }, { propertyName: "_infoChildren", predicate: MonkeyInfoDirective, descendants: true, isSignal: true }, { propertyName: "_errorChildren", predicate: MonkeyErrorDirective, descendants: true, isSignal: true }], exportAs: ["monkeyFormField"], ngImport: i0, template: "@if (internalDisplayOnly()) {\r\n  <div class=\"mecx-form-field-display-only\" (click)=\"onCancelDisplayOnly($event)\">\r\n    <div class=\"mecx-form-field-display-only-header\">\r\n      <ng-container *ngTemplateOutlet=\"labelTpl\"></ng-container>\r\n    </div>\r\n    <div class=\"mecx-form-field-display-only-body\">\r\n      <ng-content select=\"monkey-display\"></ng-content>\r\n    </div>\r\n    <div class=\"mecx-form-field-display-only-action\">\r\n      {{ editDictionary | async }} <util-icon name=\"edit\" />\r\n    </div>\r\n  </div>\r\n} @else {\r\n  @if (showHeader()) {\r\n    <div class=\"mecx-form-field-header\" (click)=\"control.onContainerClick($event)\">\r\n      <label [id]=\"labelId\" [attr.for]=\"control.id\">\r\n        <ng-container *ngTemplateOutlet=\"labelTpl\"></ng-container>\r\n      </label>\r\n      <ng-content select=\"monkey-helper\"></ng-content>\r\n    </div>\r\n  }\r\n\r\n  <div class=\"mecx-form-field-body\" (click)=\"control.onContainerClick($event)\">\r\n    @if (hasPrefix()) {\r\n      <ng-content select=\"monkey-prefix\"></ng-content>\r\n    }\r\n    @if (getSymbols(); as symbols) {\r\n      <div class=\"mecx-form-field-prefix-symbol\">\r\n        {{ symbols }}\r\n      </div>\r\n    }\r\n\r\n    <ng-content></ng-content>\r\n\r\n    @if (showClear()) {\r\n      <util-icon class=\"mecx-clear\" name=\"clear\" (click)=\"onClear($event)\" />\r\n    }\r\n    @if (showCalendar) {\r\n      <util-icon class=\"mecx-calendar\" name=\"calendar\" (click)=\"onOpenCalendar($event)\" />\r\n    }\r\n    @if (showLoading) {\r\n      <util-icon class=\"mecx-form-field-loading\" name=\"loading\" />\r\n    }\r\n\r\n    @if (hasSuffix()) {\r\n      <ng-content select=\"monkey-suffix\"></ng-content>\r\n    }\r\n  </div>\r\n\r\n  @if (showFooter()) {\r\n    <div class=\"mecx-form-field-footer\" (click)=\"control.onContainerClick($event)\">\r\n      @switch (getFooterMessages()) {\r\n        @case ('error') {\r\n          <ng-content select=\"monkey-error\"></ng-content>\r\n        }\r\n        @case ('info') {\r\n          <div class=\"mecx-form-field-info\">\r\n            <ng-content select=\"monkey-info\"></ng-content>\r\n          </div>\r\n        }\r\n      }\r\n    </div>\r\n  }\r\n}\r\n\r\n<ng-template #labelTpl>\r\n  <ng-content select=\"monkey-label\"></ng-content>\r\n</ng-template>\r\n", styles: [".mecx-form-field{width:100%;display:inline-flex;flex-direction:column;min-width:0;text-align:left;gap:6px}.mecx-disabled .mecx-form-field{cursor:not-allowed;pointer-events:none}.mecx-form-field-header{display:flex;justify-content:space-between;align-items:flex-end}.mecx-disabled .mecx-form-field-header label{pointer-events:none}.mecx-form-field-loading{display:flex}.mecx-form-field-loading svg path{fill:var(--mecx-color-theme-main)}.mecx-form-field-body{width:100%;border-radius:4px;border:2px solid var(--mecx-color-gray-400);padding:8px;gap:4px;background:var(--mecx-color-white);color:var(--mecx-color-gray-500);box-sizing:border-box;height:40px;display:flex;align-items:center;position:relative}.mecx-form-field-invalid .mecx-form-field-body{border:2px solid var(--mecx-color-error-700)}.mecx-form-field-invalid .mecx-form-field-body .mecx-option:not(.mecx-option-disabled).radio:before{border:2px solid var(--mecx-color-error-700)}.mecx-form-field-focused .mecx-form-field-body{border-color:var(--mecx-color-gray-900)}.mecx-disabled .mecx-form-field-body{border-color:var(--mecx-color-gray-50);background:var(--mecx-color-gray-50);border-radius:8px;cursor:not-allowed}.mecx-form-field-body .mecx-clear,.mecx-form-field-body .mecx-calendar{display:flex;align-items:center;justify-content:center;cursor:pointer}.mecx-form-field-body .mecx-calendar svg path{fill:var(--mecx-color-theme-main)}.sm .mecx-form-field-body{height:32px}.sm .mecx-form-field-body monkey-prefix .mk-i,.sm .mecx-form-field-body monkey-suffix .mk-i{width:16px;height:16px;font-size:16px}.sm .mecx-form-field-body util-icon svg{transform:scale(.72)}.md .mecx-form-field-body{height:40px}.md .mecx-form-field-body monkey-prefix .mk-i,.md .mecx-form-field-body monkey-suffix .mk-i{width:20px;height:20px;font-size:20px}.md .mecx-form-field-body util-icon{transform:scale(.834)}.lg .mecx-form-field-body{height:48px}.mecx-form-field-footer{display:flex;flex-direction:column;min-height:16px}.no-footer-space .mecx-form-field-footer{min-height:initial}.mecx-form-field-prefix-symbol{color:var(--mecx-color-gray-700);font-size:16px;font-weight:400;font-style:normal;width:22px;text-align:center}.mecx-form-field-prefix-symbol .mk-i{display:flex}.mecx-disabled .mecx-form-field-prefix-symbol{color:var(--mecx-color-gray-400)!important;pointer-events:none}.mecx-form-field-borderless .mecx-form-field-body{background-color:transparent;border:0;border-radius:0;padding:0;height:unset;align-items:flex-start;outline:none;outline-offset:unset}.mecx-form-field-borderless.mecx-form-field-focused .mecx-form-field-body{outline:none;outline-offset:unset}.mecx-form-field-display-only{position:relative;display:inline-flex;width:100%;cursor:pointer}.mecx-form-field-display-only-header{width:50%;max-width:255px}@media(max-width:767.98px){.mecx-form-field-display-only-header{width:100%}}.mecx-form-field-display-only-header monkey-label{color:var(--mecx-color-gray-700);font-size:14px;font-weight:400;line-height:24px;letter-spacing:.14px;word-wrap:break-word}.mecx-form-field-display-only-body{color:var(--mecx-color-gray-900);font-size:14px;font-weight:400;line-height:24px;letter-spacing:.14px;word-wrap:break-word}.mecx-form-field-display-only-action{position:absolute;right:0;display:none;align-items:center;gap:4px;color:var(--mecx-color-gray-900);font-size:14px;font-weight:400;line-height:24px;letter-spacing:.14px;word-wrap:break-word;background:var(--mecx-color-white);padding:0 10px}.mecx-form-field-display-only-action util-icon svg{width:20px;height:20px}.mecx-form-field-display-only:hover .mecx-form-field-display-only-action{display:inline-flex;text-decoration:underline}\n/*!\n* Bootstrap Grid v5.3.7 (https://getbootstrap.com/)\n* Copyright 2011-2025 The Bootstrap Authors\n* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n*/\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: UtilIconComponent, selector: "util-icon", inputs: ["name"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MonkeyFormFieldComponent, decorators: [{
             type: Component,
@@ -2487,7 +2444,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                         '[attr.id]': 'id',
                         '[id]': 'id',
                         '[class]': 'size'
-                    }, standalone: false, template: "@if (internalDisplayOnly()) {\r\n  <div class=\"mecx-form-field-display-only\" (click)=\"onCancelDisplayOnly($event)\">\r\n    <div class=\"mecx-form-field-display-only-header\">\r\n      <ng-container *ngTemplateOutlet=\"labelTpl\"></ng-container>\r\n    </div>\r\n    <div class=\"mecx-form-field-display-only-body\">\r\n      <ng-content select=\"monkey-display\"></ng-content>\r\n    </div>\r\n    <div class=\"mecx-form-field-display-only-action\">\r\n      {{ editDictionary | async }} <util-icon name=\"edit\" />\r\n    </div>\r\n  </div>\r\n} @else {\r\n  @if (showHeader) {\r\n    <div class=\"mecx-form-field-header\" (click)=\"control.onContainerClick($event)\">\r\n      <label [id]=\"labelId\" [attr.for]=\"control.id\">\r\n        <ng-container *ngTemplateOutlet=\"labelTpl\"></ng-container>\r\n      </label>\r\n      <ng-content select=\"monkey-helper\"></ng-content>\r\n    </div>\r\n  }\r\n\r\n  <div class=\"mecx-form-field-body\" (click)=\"control.onContainerClick($event)\">\r\n    @if (hasPrefix) {\r\n      <ng-content select=\"monkey-prefix\"></ng-content>\r\n    }\r\n    @if (getSymbols(); as symbols) {\r\n      <div class=\"mecx-form-field-prefix-symbol\">\r\n        {{ symbols }}\r\n      </div>\r\n    }\r\n\r\n    <ng-content></ng-content>\r\n\r\n    @if (showClear()) {\r\n      <util-icon class=\"mecx-clear\" name=\"clear\" (click)=\"onClear($event)\" />\r\n    }\r\n    @if (showCalendar) {\r\n      <util-icon class=\"mecx-calendar\" name=\"calendar\" (click)=\"onOpenCalendar($event)\" />\r\n    }\r\n    @if (showLoading) {\r\n      <util-icon class=\"mecx-form-field-loading\" name=\"loading\" />\r\n    }\r\n\r\n    @if (hasSuffix) {\r\n      <ng-content select=\"monkey-suffix\"></ng-content>\r\n    }\r\n  </div>\r\n\r\n  @if (showFooter) {\r\n    <div class=\"mecx-form-field-footer\" (click)=\"control.onContainerClick($event)\">\r\n      @switch (getFooterMessages()) {\r\n        @case ('error') {\r\n          <ng-content select=\"monkey-error\"></ng-content>\r\n        }\r\n        @case ('info') {\r\n          <div class=\"mecx-form-field-info\">\r\n            <ng-content select=\"monkey-info\"></ng-content>\r\n          </div>\r\n        }\r\n      }\r\n    </div>\r\n  }\r\n}\r\n\r\n<ng-template #labelTpl>\r\n  <ng-content select=\"monkey-label\"></ng-content>\r\n</ng-template>\r\n", styles: [".mecx-form-field{width:100%;display:inline-flex;flex-direction:column;min-width:0;text-align:left;gap:6px}.mecx-disabled .mecx-form-field{cursor:not-allowed;pointer-events:none}.mecx-form-field-header{display:flex;justify-content:space-between;align-items:flex-end}.mecx-disabled .mecx-form-field-header label{pointer-events:none}.mecx-form-field-loading{display:flex}.mecx-form-field-loading svg path{fill:var(--mecx-color-theme-main)}.mecx-form-field-body{width:100%;border-radius:4px;border:2px solid var(--mecx-color-gray-400);padding:8px;gap:4px;background:var(--mecx-color-white);color:var(--mecx-color-gray-500);box-sizing:border-box;height:40px;display:flex;align-items:center;position:relative}.mecx-form-field-invalid .mecx-form-field-body{border:2px solid var(--mecx-color-error-700)}.mecx-form-field-invalid .mecx-form-field-body .mecx-option:not(.mecx-option-disabled).radio:before{border:2px solid var(--mecx-color-error-700)}.mecx-form-field-focused .mecx-form-field-body{border-color:var(--mecx-color-gray-900)}.mecx-disabled .mecx-form-field-body{border-color:var(--mecx-color-gray-50);background:var(--mecx-color-gray-50);border-radius:8px;cursor:not-allowed}.mecx-form-field-body .mecx-clear,.mecx-form-field-body .mecx-calendar{display:flex;align-items:center;justify-content:center;cursor:pointer}.mecx-form-field-body .mecx-calendar svg path{fill:var(--mecx-color-theme-main)}.sm .mecx-form-field-body{height:32px}.sm .mecx-form-field-body monkey-prefix .mk-i,.sm .mecx-form-field-body monkey-suffix .mk-i{width:16px;height:16px;font-size:16px}.sm .mecx-form-field-body util-icon svg{transform:scale(.72)}.md .mecx-form-field-body{height:40px}.md .mecx-form-field-body monkey-prefix .mk-i,.md .mecx-form-field-body monkey-suffix .mk-i{width:20px;height:20px;font-size:20px}.md .mecx-form-field-body util-icon{transform:scale(.834)}.lg .mecx-form-field-body{height:48px}.mecx-form-field-footer{display:flex;flex-direction:column;min-height:16px}.no-footer-space .mecx-form-field-footer{min-height:initial}.mecx-form-field-prefix-symbol{color:var(--mecx-color-gray-700);font-size:16px;font-weight:400;font-style:normal;width:22px;text-align:center}.mecx-form-field-prefix-symbol .mk-i{display:flex}.mecx-disabled .mecx-form-field-prefix-symbol{color:var(--mecx-color-gray-400)!important;pointer-events:none}.mecx-form-field-borderless .mecx-form-field-body{background-color:transparent;border:0;border-radius:0;padding:0;height:unset;align-items:flex-start;outline:none;outline-offset:unset}.mecx-form-field-borderless.mecx-form-field-focused .mecx-form-field-body{outline:none;outline-offset:unset}.mecx-form-field-display-only{position:relative;display:inline-flex;width:100%;cursor:pointer}.mecx-form-field-display-only-header{width:50%;max-width:255px}@media(max-width:767.98px){.mecx-form-field-display-only-header{width:100%}}.mecx-form-field-display-only-header monkey-label{color:var(--mecx-color-gray-700);font-size:14px;font-weight:400;line-height:24px;letter-spacing:.14px;word-wrap:break-word}.mecx-form-field-display-only-body{color:var(--mecx-color-gray-900);font-size:14px;font-weight:400;line-height:24px;letter-spacing:.14px;word-wrap:break-word}.mecx-form-field-display-only-action{position:absolute;right:0;display:none;align-items:center;gap:4px;color:var(--mecx-color-gray-900);font-size:14px;font-weight:400;line-height:24px;letter-spacing:.14px;word-wrap:break-word;background:var(--mecx-color-white);padding:0 10px}.mecx-form-field-display-only-action util-icon svg{width:20px;height:20px}.mecx-form-field-display-only:hover .mecx-form-field-display-only-action{display:inline-flex;text-decoration:underline}\n/*!\n* Bootstrap Grid v5.3.7 (https://getbootstrap.com/)\n* Copyright 2011-2025 The Bootstrap Authors\n* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n*/\n"] }]
+                    }, standalone: false, template: "@if (internalDisplayOnly()) {\r\n  <div class=\"mecx-form-field-display-only\" (click)=\"onCancelDisplayOnly($event)\">\r\n    <div class=\"mecx-form-field-display-only-header\">\r\n      <ng-container *ngTemplateOutlet=\"labelTpl\"></ng-container>\r\n    </div>\r\n    <div class=\"mecx-form-field-display-only-body\">\r\n      <ng-content select=\"monkey-display\"></ng-content>\r\n    </div>\r\n    <div class=\"mecx-form-field-display-only-action\">\r\n      {{ editDictionary | async }} <util-icon name=\"edit\" />\r\n    </div>\r\n  </div>\r\n} @else {\r\n  @if (showHeader()) {\r\n    <div class=\"mecx-form-field-header\" (click)=\"control.onContainerClick($event)\">\r\n      <label [id]=\"labelId\" [attr.for]=\"control.id\">\r\n        <ng-container *ngTemplateOutlet=\"labelTpl\"></ng-container>\r\n      </label>\r\n      <ng-content select=\"monkey-helper\"></ng-content>\r\n    </div>\r\n  }\r\n\r\n  <div class=\"mecx-form-field-body\" (click)=\"control.onContainerClick($event)\">\r\n    @if (hasPrefix()) {\r\n      <ng-content select=\"monkey-prefix\"></ng-content>\r\n    }\r\n    @if (getSymbols(); as symbols) {\r\n      <div class=\"mecx-form-field-prefix-symbol\">\r\n        {{ symbols }}\r\n      </div>\r\n    }\r\n\r\n    <ng-content></ng-content>\r\n\r\n    @if (showClear()) {\r\n      <util-icon class=\"mecx-clear\" name=\"clear\" (click)=\"onClear($event)\" />\r\n    }\r\n    @if (showCalendar) {\r\n      <util-icon class=\"mecx-calendar\" name=\"calendar\" (click)=\"onOpenCalendar($event)\" />\r\n    }\r\n    @if (showLoading) {\r\n      <util-icon class=\"mecx-form-field-loading\" name=\"loading\" />\r\n    }\r\n\r\n    @if (hasSuffix()) {\r\n      <ng-content select=\"monkey-suffix\"></ng-content>\r\n    }\r\n  </div>\r\n\r\n  @if (showFooter()) {\r\n    <div class=\"mecx-form-field-footer\" (click)=\"control.onContainerClick($event)\">\r\n      @switch (getFooterMessages()) {\r\n        @case ('error') {\r\n          <ng-content select=\"monkey-error\"></ng-content>\r\n        }\r\n        @case ('info') {\r\n          <div class=\"mecx-form-field-info\">\r\n            <ng-content select=\"monkey-info\"></ng-content>\r\n          </div>\r\n        }\r\n      }\r\n    </div>\r\n  }\r\n}\r\n\r\n<ng-template #labelTpl>\r\n  <ng-content select=\"monkey-label\"></ng-content>\r\n</ng-template>\r\n", styles: [".mecx-form-field{width:100%;display:inline-flex;flex-direction:column;min-width:0;text-align:left;gap:6px}.mecx-disabled .mecx-form-field{cursor:not-allowed;pointer-events:none}.mecx-form-field-header{display:flex;justify-content:space-between;align-items:flex-end}.mecx-disabled .mecx-form-field-header label{pointer-events:none}.mecx-form-field-loading{display:flex}.mecx-form-field-loading svg path{fill:var(--mecx-color-theme-main)}.mecx-form-field-body{width:100%;border-radius:4px;border:2px solid var(--mecx-color-gray-400);padding:8px;gap:4px;background:var(--mecx-color-white);color:var(--mecx-color-gray-500);box-sizing:border-box;height:40px;display:flex;align-items:center;position:relative}.mecx-form-field-invalid .mecx-form-field-body{border:2px solid var(--mecx-color-error-700)}.mecx-form-field-invalid .mecx-form-field-body .mecx-option:not(.mecx-option-disabled).radio:before{border:2px solid var(--mecx-color-error-700)}.mecx-form-field-focused .mecx-form-field-body{border-color:var(--mecx-color-gray-900)}.mecx-disabled .mecx-form-field-body{border-color:var(--mecx-color-gray-50);background:var(--mecx-color-gray-50);border-radius:8px;cursor:not-allowed}.mecx-form-field-body .mecx-clear,.mecx-form-field-body .mecx-calendar{display:flex;align-items:center;justify-content:center;cursor:pointer}.mecx-form-field-body .mecx-calendar svg path{fill:var(--mecx-color-theme-main)}.sm .mecx-form-field-body{height:32px}.sm .mecx-form-field-body monkey-prefix .mk-i,.sm .mecx-form-field-body monkey-suffix .mk-i{width:16px;height:16px;font-size:16px}.sm .mecx-form-field-body util-icon svg{transform:scale(.72)}.md .mecx-form-field-body{height:40px}.md .mecx-form-field-body monkey-prefix .mk-i,.md .mecx-form-field-body monkey-suffix .mk-i{width:20px;height:20px;font-size:20px}.md .mecx-form-field-body util-icon{transform:scale(.834)}.lg .mecx-form-field-body{height:48px}.mecx-form-field-footer{display:flex;flex-direction:column;min-height:16px}.no-footer-space .mecx-form-field-footer{min-height:initial}.mecx-form-field-prefix-symbol{color:var(--mecx-color-gray-700);font-size:16px;font-weight:400;font-style:normal;width:22px;text-align:center}.mecx-form-field-prefix-symbol .mk-i{display:flex}.mecx-disabled .mecx-form-field-prefix-symbol{color:var(--mecx-color-gray-400)!important;pointer-events:none}.mecx-form-field-borderless .mecx-form-field-body{background-color:transparent;border:0;border-radius:0;padding:0;height:unset;align-items:flex-start;outline:none;outline-offset:unset}.mecx-form-field-borderless.mecx-form-field-focused .mecx-form-field-body{outline:none;outline-offset:unset}.mecx-form-field-display-only{position:relative;display:inline-flex;width:100%;cursor:pointer}.mecx-form-field-display-only-header{width:50%;max-width:255px}@media(max-width:767.98px){.mecx-form-field-display-only-header{width:100%}}.mecx-form-field-display-only-header monkey-label{color:var(--mecx-color-gray-700);font-size:14px;font-weight:400;line-height:24px;letter-spacing:.14px;word-wrap:break-word}.mecx-form-field-display-only-body{color:var(--mecx-color-gray-900);font-size:14px;font-weight:400;line-height:24px;letter-spacing:.14px;word-wrap:break-word}.mecx-form-field-display-only-action{position:absolute;right:0;display:none;align-items:center;gap:4px;color:var(--mecx-color-gray-900);font-size:14px;font-weight:400;line-height:24px;letter-spacing:.14px;word-wrap:break-word;background:var(--mecx-color-white);padding:0 10px}.mecx-form-field-display-only-action util-icon svg{width:20px;height:20px}.mecx-form-field-display-only:hover .mecx-form-field-display-only-action{display:inline-flex;text-decoration:underline}\n/*!\n* Bootstrap Grid v5.3.7 (https://getbootstrap.com/)\n* Copyright 2011-2025 The Bootstrap Authors\n* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n*/\n"] }]
         }], ctorParameters: () => [], propDecorators: { id: [{
                 type: Input
             }], hideAction: [{
@@ -2501,10 +2458,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
             }], noFooterSpace: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], displayOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayOnly", required: false }] }], onDisplayOnlyChange: [{ type: i0.Output, args: ["onDisplayOnlyChange"] }], _formFieldControl: [{
-                type: ContentChild,
-                args: [MonkeyFormFieldControl]
-            }] } });
+            }], displayOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayOnly", required: false }] }], onDisplayOnlyChange: [{ type: i0.Output, args: ["onDisplayOnlyChange"] }], _formFieldControl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MonkeyFormFieldControl), { ...{ descendants: true }, isSignal: true }] }], _displayChild: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MonkeyDisplayDirective), { ...{ descendants: true }, isSignal: true }] }], _labelChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MonkeyLabelDirective), { ...{ descendants: true }, isSignal: true }] }], _helperChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MonkeyHelperDirective), { ...{ descendants: true }, isSignal: true }] }], _prefixChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MonkeyPrefixDirective), { ...{ descendants: true }, isSignal: true }] }], _suffixChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MonkeySuffixDirective), { ...{ descendants: true }, isSignal: true }] }], _infoChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MonkeyInfoDirective), { ...{ descendants: true }, isSignal: true }] }], _errorChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MonkeyErrorDirective), { ...{ descendants: true }, isSignal: true }] }] } });
 
 /** ************************
  * Copyright Monkey Exchange. All Rights Reserved
@@ -11980,5 +11934,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { MECX_COUNTRY_ISO_CODE, MECX_GOOGLE_API_KEY, MECX_I18N_WRAPPER, MECX_MODAL_DATA, MECX_MODAL_DEFAULT_CONFIG, MECX_POPOVER_OPTIONS, MonkeyAccordionComponent, MonkeyActionBarComponent, MonkeyAlertComponent, MonkeyAutocompleteAddressComponent, MonkeyAutocompleteComponent, MonkeyAvatarComponent, MonkeyBadgeComponent, MonkeyBadgeDirective, MonkeyBreadcrumbComponent, MonkeyButtonComponent, MonkeyCheckboxComponent, MonkeyComplexFilterBarComponent, MonkeyDateRangeComponent, MonkeyDictionaryService, MonkeyDisplayDirective, MonkeyDividerComponent, MonkeyDownloadButtonComponent, MonkeyEcxAddressService, MonkeyErrorDirective, MonkeyFilterBarComponent, MonkeyFilterBarService, MonkeyFilterChipComponent, MonkeyFilterMenuComponent, MonkeyFilterMenuItemComponent, MonkeyFilterSegmentComponent, MonkeyFilterTriggerComponent, MonkeyFormDirective, MonkeyFormFieldComponent, MonkeyFormFieldControl, MonkeyFormFieldModule, MonkeyHelperDirective, MonkeyIconButtonComponent, MonkeyInfoDirective, MonkeyInputCodeComponent, MonkeyInputCurrencyDirective, MonkeyInputDateRangeComponent, MonkeyInputDirective, MonkeyInputModule, MonkeyInputPhoneComponent, MonkeyInputUploadComponent, MonkeyLabelDirective, MonkeyModalActionsDirective, MonkeyModalComponent, MonkeyModalConfig, MonkeyModalContentDirective, MonkeyModalModule, MonkeyModalRef, MonkeyModalService, MonkeyModalSubtitleDirective, MonkeyModalTitleDirective, MonkeyOptionComponent, MonkeyPaginationActionComponent, MonkeyPaginationLabelComponent, MonkeyPaginationSizeComponent, MonkeyPassNumberComponent, MonkeyPassSecretNumberComponent, MonkeyPopoverContentComponent, MonkeyPopoverDirective, MonkeyPrefixDirective, MonkeyRadioButtonComponent, MonkeyScrollbarComponent, MonkeySecurityLevelComponent, MonkeySelectComponent, MonkeyStatusComponent, MonkeyStepComponent, MonkeyStepperComponent, MonkeyStepperModule, MonkeyStepperService, MonkeySuffixDirective, MonkeyTabComponent, MonkeyTabLinkDirective, MonkeyTableCellDirective, MonkeyTableColumnDirective, MonkeyTableComponent, MonkeyTableEmptyDirective, MonkeyTableHeaderCellDirective, MonkeyTableLoadingDirective, MonkeyTableRowDetailDirective, MonkeyTabsComponent, MonkeyTabsModule, MonkeyToastComponent, MonkeyToastRef, MonkeyToastService, MonkeyToggleComponent, MonkeyToggleLineButtonComponent, MonkeyToggleLineComponent, MonkeyTooltipComponent, MonkeyTooltipDirective, MonkeyUserProfileButtonComponent, MonkeyUserProfileComponent, addKeys, appliedFrom, ariaSortOf, arityOf, conditionsOf, getCurrencySymbol, indexAtOffset, injectTokenWithWarning, interpolate, isComplete, mergeOrder, offsetOfIndex, panelOf, removeKeys, sameColumnState, selectionState, sortByOrder, toPx, toggleKey, totalHeight, withCondition, withType };
+export { MECX_COUNTRY_ISO_CODE, MECX_GOOGLE_API_KEY, MECX_I18N_LANG, MECX_I18N_WRAPPER, MECX_MODAL_DATA, MECX_MODAL_DEFAULT_CONFIG, MECX_POPOVER_OPTIONS, MonkeyAccordionComponent, MonkeyActionBarComponent, MonkeyAlertComponent, MonkeyAutocompleteAddressComponent, MonkeyAutocompleteComponent, MonkeyAvatarComponent, MonkeyBadgeComponent, MonkeyBadgeDirective, MonkeyBreadcrumbComponent, MonkeyButtonComponent, MonkeyCheckboxComponent, MonkeyComplexFilterBarComponent, MonkeyDateRangeComponent, MonkeyDictionaryService, MonkeyDisplayDirective, MonkeyDividerComponent, MonkeyDownloadButtonComponent, MonkeyEcxAddressService, MonkeyErrorDirective, MonkeyFilterBarComponent, MonkeyFilterBarService, MonkeyFilterChipComponent, MonkeyFilterMenuComponent, MonkeyFilterMenuItemComponent, MonkeyFilterSegmentComponent, MonkeyFilterTriggerComponent, MonkeyFormDirective, MonkeyFormFieldComponent, MonkeyFormFieldControl, MonkeyFormFieldModule, MonkeyHelperDirective, MonkeyIconButtonComponent, MonkeyInfoDirective, MonkeyInputCodeComponent, MonkeyInputCurrencyDirective, MonkeyInputDateRangeComponent, MonkeyInputDirective, MonkeyInputModule, MonkeyInputPhoneComponent, MonkeyInputUploadComponent, MonkeyLabelDirective, MonkeyModalActionsDirective, MonkeyModalComponent, MonkeyModalConfig, MonkeyModalContentDirective, MonkeyModalModule, MonkeyModalRef, MonkeyModalService, MonkeyModalSubtitleDirective, MonkeyModalTitleDirective, MonkeyOptionComponent, MonkeyPaginationActionComponent, MonkeyPaginationLabelComponent, MonkeyPaginationSizeComponent, MonkeyPassNumberComponent, MonkeyPassSecretNumberComponent, MonkeyPopoverContentComponent, MonkeyPopoverDirective, MonkeyPrefixDirective, MonkeyRadioButtonComponent, MonkeyScrollbarComponent, MonkeySecurityLevelComponent, MonkeySelectComponent, MonkeyStatusComponent, MonkeyStepComponent, MonkeyStepperComponent, MonkeyStepperModule, MonkeyStepperService, MonkeySuffixDirective, MonkeyTabComponent, MonkeyTabLinkDirective, MonkeyTableCellDirective, MonkeyTableColumnDirective, MonkeyTableComponent, MonkeyTableEmptyDirective, MonkeyTableHeaderCellDirective, MonkeyTableLoadingDirective, MonkeyTableRowDetailDirective, MonkeyTabsComponent, MonkeyTabsModule, MonkeyToastComponent, MonkeyToastRef, MonkeyToastService, MonkeyToggleComponent, MonkeyToggleLineButtonComponent, MonkeyToggleLineComponent, MonkeyTooltipComponent, MonkeyTooltipDirective, MonkeyUserProfileButtonComponent, MonkeyUserProfileComponent, addKeys, appliedFrom, ariaSortOf, arityOf, conditionsOf, getCurrencySymbol, indexAtOffset, injectTokenWithWarning, interpolate, isComplete, mergeOrder, offsetOfIndex, panelOf, removeKeys, sameColumnState, selectionState, sortByOrder, toPx, toggleKey, totalHeight, withCondition, withType };
 //# sourceMappingURL=monkey-style-guide.mjs.map