monkey-style-guide 21.2.15 → 21.2.17
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -2,11 +2,11 @@ import { trigger, state, style, transition, animate, keyframes } from '@angular/
|
|
|
2
2
|
import * as i1 from '@angular/common';
|
|
3
3
|
import { CommonModule, NgTemplateOutlet, CurrencyPipe, AsyncPipe } from '@angular/common';
|
|
4
4
|
import * as i0 from '@angular/core';
|
|
5
|
-
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,
|
|
5
|
+
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';
|
|
6
6
|
import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
|
|
7
7
|
import * as i1$1 from '@angular/forms';
|
|
8
8
|
import { Validators, NgControl, FormsModule, ReactiveFormsModule, FormControlDirective, NgModel, FormControlName, FormGroupDirective, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
|
|
9
|
-
import { filter, of, map, BehaviorSubject, combineLatest, distinctUntilChanged, firstValueFrom,
|
|
9
|
+
import { filter, of, map, BehaviorSubject, combineLatest, distinctUntilChanged, firstValueFrom, Subject, debounceTime, switchMap, catchError, Subscription } from 'rxjs';
|
|
10
10
|
import * as i1$2 from '@angular/cdk/overlay';
|
|
11
11
|
import { Overlay, OverlayPositionBuilder, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
|
|
12
12
|
import { ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
|
|
@@ -2231,24 +2231,18 @@ class MonkeyFormFieldComponent {
|
|
|
2231
2231
|
this._id = value || this._uid;
|
|
2232
2232
|
}
|
|
2233
2233
|
get control() {
|
|
2234
|
-
return this._formFieldControl;
|
|
2234
|
+
return this._formFieldControl();
|
|
2235
2235
|
}
|
|
2236
2236
|
get labelId() {
|
|
2237
2237
|
return this._labelId;
|
|
2238
2238
|
}
|
|
2239
|
-
get showHeader() {
|
|
2240
|
-
return this.hasLabel || this.hasHelper;
|
|
2241
|
-
}
|
|
2242
|
-
get showFooter() {
|
|
2243
|
-
return this.hasInfo || this.hasError;
|
|
2244
|
-
}
|
|
2245
2239
|
get showInvalid() {
|
|
2246
2240
|
if (this.showLoading) {
|
|
2247
2241
|
return false;
|
|
2248
2242
|
}
|
|
2249
2243
|
const touched = this.control.ngControl?.touched || false;
|
|
2250
2244
|
const invalid = this.control.ngControl?.invalid || false;
|
|
2251
|
-
return (this.hasError && !this._isFocused && touched && invalid && !this.control.disableToBeDirty);
|
|
2245
|
+
return (this.hasError() && !this._isFocused && touched && invalid && !this.control.disableToBeDirty);
|
|
2252
2246
|
}
|
|
2253
2247
|
get showCalendar() {
|
|
2254
2248
|
return this.control.type === 'date' && !this.hideAction;
|
|
@@ -2264,30 +2258,17 @@ class MonkeyFormFieldComponent {
|
|
|
2264
2258
|
}
|
|
2265
2259
|
constructor() {
|
|
2266
2260
|
this.size = 'md';
|
|
2267
|
-
this.noFooterSpace = false;
|
|
2261
|
+
this.noFooterSpace = input(false, { ...(ngDevMode ? { debugName: "noFooterSpace" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2268
2262
|
this.displayOnly = input(false, ...(ngDevMode ? [{ debugName: "displayOnly" }] : /* istanbul ignore next */ []));
|
|
2269
2263
|
this.onDisplayOnlyChange = output();
|
|
2270
|
-
this.
|
|
2271
|
-
|
|
2272
|
-
});
|
|
2273
|
-
this.
|
|
2274
|
-
|
|
2275
|
-
});
|
|
2276
|
-
this.
|
|
2277
|
-
|
|
2278
|
-
});
|
|
2279
|
-
this._prefixChildren = ContentChildren(MonkeyPrefixDirective, {
|
|
2280
|
-
descendants: true
|
|
2281
|
-
});
|
|
2282
|
-
this._suffixChildren = ContentChildren(MonkeySuffixDirective, {
|
|
2283
|
-
descendants: true
|
|
2284
|
-
});
|
|
2285
|
-
this._infoChildren = ContentChildren(MonkeyInfoDirective, {
|
|
2286
|
-
descendants: true
|
|
2287
|
-
});
|
|
2288
|
-
this._errorChildren = ContentChildren(MonkeyErrorDirective, {
|
|
2289
|
-
descendants: true
|
|
2290
|
-
});
|
|
2264
|
+
this._formFieldControl = contentChild(MonkeyFormFieldControl, { ...(ngDevMode ? { debugName: "_formFieldControl" } : /* istanbul ignore next */ {}), descendants: true });
|
|
2265
|
+
this._displayChild = contentChild(MonkeyDisplayDirective, { ...(ngDevMode ? { debugName: "_displayChild" } : /* istanbul ignore next */ {}), descendants: true });
|
|
2266
|
+
this._labelChildren = contentChildren(MonkeyLabelDirective, { ...(ngDevMode ? { debugName: "_labelChildren" } : /* istanbul ignore next */ {}), descendants: true });
|
|
2267
|
+
this._helperChildren = contentChildren(MonkeyHelperDirective, { ...(ngDevMode ? { debugName: "_helperChildren" } : /* istanbul ignore next */ {}), descendants: true });
|
|
2268
|
+
this._prefixChildren = contentChildren(MonkeyPrefixDirective, { ...(ngDevMode ? { debugName: "_prefixChildren" } : /* istanbul ignore next */ {}), descendants: true });
|
|
2269
|
+
this._suffixChildren = contentChildren(MonkeySuffixDirective, { ...(ngDevMode ? { debugName: "_suffixChildren" } : /* istanbul ignore next */ {}), descendants: true });
|
|
2270
|
+
this._infoChildren = contentChildren(MonkeyInfoDirective, { ...(ngDevMode ? { debugName: "_infoChildren" } : /* istanbul ignore next */ {}), descendants: true });
|
|
2271
|
+
this._errorChildren = contentChildren(MonkeyErrorDirective, { ...(ngDevMode ? { debugName: "_errorChildren" } : /* istanbul ignore next */ {}), descendants: true });
|
|
2291
2272
|
this.elementRef = inject(ElementRef);
|
|
2292
2273
|
this._changeDetectorRef = inject(ChangeDetectorRef);
|
|
2293
2274
|
this._idGenerator = inject(IdGenerator);
|
|
@@ -2298,12 +2279,16 @@ class MonkeyFormFieldComponent {
|
|
|
2298
2279
|
this._previousControl = null;
|
|
2299
2280
|
this.currencySymbol = getCurrencySymbol(inject(DEFAULT_CURRENCY_CODE));
|
|
2300
2281
|
this.percentSymbol = '%';
|
|
2301
|
-
this.hasLabel =
|
|
2302
|
-
this.hasHelper =
|
|
2303
|
-
this.hasPrefix =
|
|
2304
|
-
this.hasSuffix =
|
|
2305
|
-
this.hasInfo =
|
|
2306
|
-
this.hasError =
|
|
2282
|
+
this.hasLabel = computed(() => this._labelChildren().length > 0, ...(ngDevMode ? [{ debugName: "hasLabel" }] : /* istanbul ignore next */ []));
|
|
2283
|
+
this.hasHelper = computed(() => this._helperChildren().length > 0, ...(ngDevMode ? [{ debugName: "hasHelper" }] : /* istanbul ignore next */ []));
|
|
2284
|
+
this.hasPrefix = computed(() => this._prefixChildren().length > 0, ...(ngDevMode ? [{ debugName: "hasPrefix" }] : /* istanbul ignore next */ []));
|
|
2285
|
+
this.hasSuffix = computed(() => this._suffixChildren().length > 0, ...(ngDevMode ? [{ debugName: "hasSuffix" }] : /* istanbul ignore next */ []));
|
|
2286
|
+
this.hasInfo = computed(() => this._infoChildren().length > 0, ...(ngDevMode ? [{ debugName: "hasInfo" }] : /* istanbul ignore next */ []));
|
|
2287
|
+
this.hasError = computed(() => this._errorChildren().length > 0, ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
|
|
2288
|
+
this.showHeader = computed(() => this.hasLabel() || this.hasHelper(), ...(ngDevMode ? [{ debugName: "showHeader" }] : /* istanbul ignore next */ []));
|
|
2289
|
+
this.showFooter = computed(() => {
|
|
2290
|
+
return !this.noFooterSpace() || this.hasInfo() || this.hasError();
|
|
2291
|
+
}, ...(ngDevMode ? [{ debugName: "showFooter" }] : /* istanbul ignore next */ []));
|
|
2307
2292
|
this.hideBorder = computed(() => {
|
|
2308
2293
|
const { control } = this;
|
|
2309
2294
|
return (control?.type === 'input-code' ||
|
|
@@ -2325,6 +2310,16 @@ class MonkeyFormFieldComponent {
|
|
|
2325
2310
|
const value = this.displayOnly();
|
|
2326
2311
|
this.internalDisplayOnly.set(value);
|
|
2327
2312
|
});
|
|
2313
|
+
effect(() => {
|
|
2314
|
+
const suffix = this._suffixChildren()[0];
|
|
2315
|
+
if (!suffix) {
|
|
2316
|
+
return;
|
|
2317
|
+
}
|
|
2318
|
+
suffix.action = (event) => {
|
|
2319
|
+
event.preventDefault();
|
|
2320
|
+
event.stopPropagation();
|
|
2321
|
+
};
|
|
2322
|
+
});
|
|
2328
2323
|
}
|
|
2329
2324
|
updateFocusState() {
|
|
2330
2325
|
if (this.control.focused && !this._isFocused) {
|
|
@@ -2339,45 +2334,6 @@ class MonkeyFormFieldComponent {
|
|
|
2339
2334
|
throw Error('monkey-form-field must have a MonkeyFormFieldControl');
|
|
2340
2335
|
}
|
|
2341
2336
|
}
|
|
2342
|
-
checkPrefixAndSuffix() {
|
|
2343
|
-
this.hasPrefix = !!this._prefixChildren?.length;
|
|
2344
|
-
this.hasSuffix = !!this._suffixChildren?.length;
|
|
2345
|
-
const suffix = this._suffixChildren?.get?.(0);
|
|
2346
|
-
if (suffix) {
|
|
2347
|
-
suffix.action = (event) => {
|
|
2348
|
-
event.preventDefault();
|
|
2349
|
-
event.stopPropagation();
|
|
2350
|
-
};
|
|
2351
|
-
}
|
|
2352
|
-
}
|
|
2353
|
-
initializePrefixAndSuffix() {
|
|
2354
|
-
this.checkPrefixAndSuffix();
|
|
2355
|
-
if (this._prefixChildren?.changes || this._suffixChildren?.changes) {
|
|
2356
|
-
merge(this._prefixChildren?.changes, this._suffixChildren?.changes).subscribe(() => {
|
|
2357
|
-
this.checkPrefixAndSuffix();
|
|
2358
|
-
this._changeDetectorRef.markForCheck();
|
|
2359
|
-
});
|
|
2360
|
-
}
|
|
2361
|
-
}
|
|
2362
|
-
checkInfoError() {
|
|
2363
|
-
this.hasInfo = !!this._infoChildren?.length;
|
|
2364
|
-
this.hasError = !!this._errorChildren?.length;
|
|
2365
|
-
}
|
|
2366
|
-
initializeInfoError() {
|
|
2367
|
-
this.checkInfoError();
|
|
2368
|
-
if (this._infoChildren?.changes || this._errorChildren?.changes) {
|
|
2369
|
-
merge(this._infoChildren?.changes, this._errorChildren?.changes).subscribe(() => {
|
|
2370
|
-
this.checkInfoError();
|
|
2371
|
-
this._changeDetectorRef.markForCheck();
|
|
2372
|
-
});
|
|
2373
|
-
}
|
|
2374
|
-
}
|
|
2375
|
-
initializeComponents() {
|
|
2376
|
-
this.hasLabel = Array.isArray(this._labelChildren) && this._labelChildren.length > 0;
|
|
2377
|
-
this.hasHelper = Array.isArray(this._helperChildren) && this._helperChildren.length > 0;
|
|
2378
|
-
this.initializePrefixAndSuffix();
|
|
2379
|
-
this.initializeInfoError();
|
|
2380
|
-
}
|
|
2381
2337
|
initializeControl() {
|
|
2382
2338
|
const { control } = this;
|
|
2383
2339
|
this._stateChanges?.unsubscribe();
|
|
@@ -2405,8 +2361,7 @@ class MonkeyFormFieldComponent {
|
|
|
2405
2361
|
}
|
|
2406
2362
|
ngAfterContentInit() {
|
|
2407
2363
|
this.handleFormFieldControl();
|
|
2408
|
-
this.
|
|
2409
|
-
if (this.displayOnly() && !this._displayChild) {
|
|
2364
|
+
if (this.displayOnly() && !this._displayChild()) {
|
|
2410
2365
|
throw new Error('monkey-form-field: When `displayOnly` is true, a <monkey-display> element is required inside.');
|
|
2411
2366
|
}
|
|
2412
2367
|
}
|
|
@@ -2425,7 +2380,7 @@ class MonkeyFormFieldComponent {
|
|
|
2425
2380
|
const touched = this.control.ngControl?.touched;
|
|
2426
2381
|
const invalid = this.control.ngControl?.invalid;
|
|
2427
2382
|
const isFocused = this._isFocused;
|
|
2428
|
-
const hasInfoChildren = this._infoChildren
|
|
2383
|
+
const hasInfoChildren = this._infoChildren().length > 0;
|
|
2429
2384
|
const isControlEnabled = !this.control.disabled;
|
|
2430
2385
|
const isControlDisableToBeDirty = !this.control.disableToBeDirty;
|
|
2431
2386
|
const isTouched = touched;
|
|
@@ -2477,7 +2432,7 @@ class MonkeyFormFieldComponent {
|
|
|
2477
2432
|
}, 0);
|
|
2478
2433
|
}
|
|
2479
2434
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MonkeyFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2480
|
-
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:
|
|
2435
|
+
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: true, isRequired: false, transformFunction: null }, 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 }); }
|
|
2481
2436
|
}
|
|
2482
2437
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MonkeyFormFieldComponent, decorators: [{
|
|
2483
2438
|
type: Component,
|
|
@@ -2487,11 +2442,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
|
|
|
2487
2442
|
'[class.mecx-form-field-focused]': 'control.focused',
|
|
2488
2443
|
'[class.mecx-form-field-invalid]': 'showInvalid',
|
|
2489
2444
|
'[class.mecx-form-field-borderless]': 'hideBorder()',
|
|
2490
|
-
'[class.no-footer-space]': 'noFooterSpace',
|
|
2445
|
+
'[class.no-footer-space]': 'noFooterSpace()',
|
|
2491
2446
|
'[attr.id]': 'id',
|
|
2492
2447
|
'[id]': 'id',
|
|
2493
2448
|
'[class]': 'size'
|
|
2494
|
-
}, 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"] }]
|
|
2449
|
+
}, 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"] }]
|
|
2495
2450
|
}], ctorParameters: () => [], propDecorators: { id: [{
|
|
2496
2451
|
type: Input
|
|
2497
2452
|
}], hideAction: [{
|
|
@@ -2502,13 +2457,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
|
|
|
2502
2457
|
args: [{ transform: booleanAttribute }]
|
|
2503
2458
|
}], size: [{
|
|
2504
2459
|
type: Input
|
|
2505
|
-
}], noFooterSpace: [{
|
|
2506
|
-
type: Input,
|
|
2507
|
-
args: [{ transform: booleanAttribute }]
|
|
2508
|
-
}], displayOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayOnly", required: false }] }], onDisplayOnlyChange: [{ type: i0.Output, args: ["onDisplayOnlyChange"] }], _formFieldControl: [{
|
|
2509
|
-
type: ContentChild,
|
|
2510
|
-
args: [MonkeyFormFieldControl]
|
|
2511
|
-
}] } });
|
|
2460
|
+
}], noFooterSpace: [{ type: i0.Input, args: [{ isSignal: true, alias: "noFooterSpace", required: false }] }], 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 }] }] } });
|
|
2512
2461
|
|
|
2513
2462
|
/** ************************
|
|
2514
2463
|
* Copyright Monkey Exchange. All Rights Reserved
|