monkey-style-guide 21.2.16 → 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.
|
@@ -2258,7 +2258,7 @@ class MonkeyFormFieldComponent {
|
|
|
2258
2258
|
}
|
|
2259
2259
|
constructor() {
|
|
2260
2260
|
this.size = 'md';
|
|
2261
|
-
this.noFooterSpace = false;
|
|
2261
|
+
this.noFooterSpace = input(false, { ...(ngDevMode ? { debugName: "noFooterSpace" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2262
2262
|
this.displayOnly = input(false, ...(ngDevMode ? [{ debugName: "displayOnly" }] : /* istanbul ignore next */ []));
|
|
2263
2263
|
this.onDisplayOnlyChange = output();
|
|
2264
2264
|
this._formFieldControl = contentChild(MonkeyFormFieldControl, { ...(ngDevMode ? { debugName: "_formFieldControl" } : /* istanbul ignore next */ {}), descendants: true });
|
|
@@ -2286,7 +2286,9 @@ class MonkeyFormFieldComponent {
|
|
|
2286
2286
|
this.hasInfo = computed(() => this._infoChildren().length > 0, ...(ngDevMode ? [{ debugName: "hasInfo" }] : /* istanbul ignore next */ []));
|
|
2287
2287
|
this.hasError = computed(() => this._errorChildren().length > 0, ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
|
|
2288
2288
|
this.showHeader = computed(() => this.hasLabel() || this.hasHelper(), ...(ngDevMode ? [{ debugName: "showHeader" }] : /* istanbul ignore next */ []));
|
|
2289
|
-
this.showFooter = computed(() =>
|
|
2289
|
+
this.showFooter = computed(() => {
|
|
2290
|
+
return !this.noFooterSpace() || this.hasInfo() || this.hasError();
|
|
2291
|
+
}, ...(ngDevMode ? [{ debugName: "showFooter" }] : /* istanbul ignore next */ []));
|
|
2290
2292
|
this.hideBorder = computed(() => {
|
|
2291
2293
|
const { control } = this;
|
|
2292
2294
|
return (control?.type === 'input-code' ||
|
|
@@ -2430,7 +2432,7 @@ class MonkeyFormFieldComponent {
|
|
|
2430
2432
|
}, 0);
|
|
2431
2433
|
}
|
|
2432
2434
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MonkeyFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2433
|
-
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 }); }
|
|
2434
2436
|
}
|
|
2435
2437
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MonkeyFormFieldComponent, decorators: [{
|
|
2436
2438
|
type: Component,
|
|
@@ -2440,7 +2442,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
|
|
|
2440
2442
|
'[class.mecx-form-field-focused]': 'control.focused',
|
|
2441
2443
|
'[class.mecx-form-field-invalid]': 'showInvalid',
|
|
2442
2444
|
'[class.mecx-form-field-borderless]': 'hideBorder()',
|
|
2443
|
-
'[class.no-footer-space]': 'noFooterSpace',
|
|
2445
|
+
'[class.no-footer-space]': 'noFooterSpace()',
|
|
2444
2446
|
'[attr.id]': 'id',
|
|
2445
2447
|
'[id]': 'id',
|
|
2446
2448
|
'[class]': 'size'
|
|
@@ -2455,10 +2457,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
|
|
|
2455
2457
|
args: [{ transform: booleanAttribute }]
|
|
2456
2458
|
}], size: [{
|
|
2457
2459
|
type: Input
|
|
2458
|
-
}], noFooterSpace: [{
|
|
2459
|
-
type: Input,
|
|
2460
|
-
args: [{ transform: booleanAttribute }]
|
|
2461
|
-
}], 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 }] }] } });
|
|
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 }] }] } });
|
|
2462
2461
|
|
|
2463
2462
|
/** ************************
|
|
2464
2463
|
* Copyright Monkey Exchange. All Rights Reserved
|