@memberjunction/ng-base-forms 2.4.0 → 2.5.0
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"base-field-component.d.ts","sourceRoot":"","sources":["../../src/lib/base-field-component.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,YAAY,EAAyB,aAAa,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAC3I,OAAO,EAAE,UAAU,
|
|
1
|
+
{"version":3,"file":"base-field-component.d.ts","sourceRoot":"","sources":["../../src/lib/base-field-component.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,YAAY,EAAyB,aAAa,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAC3I,OAAO,EAAE,UAAU,EAAe,eAAe,EAAqB,MAAM,sBAAsB,CAAC;AACnG,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;;AAGjD;;;;;GAKG;AACH,qBAKa,WAAY,SAAQ,mBAAoB,YAAW,aAAa;IAwHzE,OAAO,CAAC,QAAQ;IAChB,OAAO,CAAC,GAAG;IAxHb;;OAEG;IACM,MAAM,EAAG,UAAU,CAAC;IAC7B;;OAEG;IACM,QAAQ,EAAE,OAAO,CAAS;IACnC;;OAEG;IACM,SAAS,EAAE,MAAM,CAAM;IAChC;;OAEG;IACM,IAAI,EAAE,SAAS,GAAG,UAAU,GAAG,gBAAgB,GAAG,YAAY,GAAG,UAAU,GAAG,cAAc,GAAG,UAAU,GAAG,MAAM,CAAa;IACxI;;;OAGG;IACM,QAAQ,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAU;IAEhE;;OAEG;IACM,iBAAiB,EAAE,QAAQ,GAAG,UAAU,CAAc;IAE/D;;OAEG;IACM,SAAS,EAAE,OAAO,CAAQ;IAEnC,SAAS,uDAAa;IAEtB,OAAO,CAAC,YAAY,CAAuB;IAC3C;;OAEG;IACH,IACW,WAAW,IAAI,MAAM,CAO/B;IAED,IAAW,WAAW,CAAC,QAAQ,EAAE,MAAM,EAEtC;IAED,IAAW,YAAY,IAAI,MAAM,CAOhC;IAED,OAAO,CAAC,eAAe,CAAyB;IAChD;;;OAGG;IACH,IAAa,cAAc,IAAI,MAAM,EAAE,CAOtC;IAED,IAAI,cAAc,CAAC,QAAQ,EAAE,MAAM,EAAE,EAEpC;IAED,IACW,KAAK,IAAI,GAAG,CAUtB;IACD,IAAW,KAAK,CAAC,QAAQ,EAAE,GAAG,EAM7B;IACS,WAAW,oBAA2B;IAEhD;;OAEG;IACH,IAAW,eAAe,IAAI,OAAO,CAIpC;IAED,IAAW,SAAS,IAAI,eAAe,CAItC;IAEyC,QAAQ,EAAE,iBAAiB,GAAG,SAAS,CAAC;IAClF,OAAO,CAAC,QAAQ,CAA+B;gBAGrC,QAAQ,EAAE,SAAS,EACnB,GAAG,EAAE,iBAAiB;IAKhC,eAAe,IAAI,IAAI;yCA9HZ,WAAW;2CAAX,WAAW;CAqMvB"}
|
|
@@ -235,8 +235,11 @@ export class MJFormField extends BaseRecordComponent {
|
|
|
235
235
|
this._displayName = newValue;
|
|
236
236
|
}
|
|
237
237
|
get ExtendedType() {
|
|
238
|
-
|
|
239
|
-
|
|
238
|
+
const entityField = this.record.GetFieldByName(this.FieldName);
|
|
239
|
+
if (!entityField) {
|
|
240
|
+
return '';
|
|
241
|
+
}
|
|
242
|
+
return entityField.EntityFieldInfo.ExtendedType;
|
|
240
243
|
}
|
|
241
244
|
/**
|
|
242
245
|
* The possible values for the field. This is only used when the field is a dropdownlist or combobox. The possible values are derived from the EntityFieldValues in the entity field metadata.
|
|
@@ -364,7 +367,7 @@ MJFormField.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJFormField, se
|
|
|
364
367
|
} }, dependencies: [i1.NgIf, i2.CheckboxControlValueAccessor, i2.NgControlStatus, i2.NgModel, i3.TextAreaComponent, i3.TextBoxComponent, i3.NumericTextBoxComponent, i3.CheckBoxDirective, i4.DatePickerComponent, i5.ComboBoxComponent, i5.DropDownListComponent, i6.EmailLink, i6.FieldLink, i6.WebLink, i7.FillContainer, i8.CodeEditorComponent, i9.MarkdownComponent, i10.MJLinkField], styles: [".record-form-row[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: start;\n gap: 10px;\n margin-bottom: 12px;\n padding-top: 5px;\n padding-bottom: 5px;\n align-items: start; \n\n} \n \n \n.record-form-row[_ngcontent-%COMP%] label[_ngcontent-%COMP%] {\n font-weight: bold;\n padding-right: 10px;\n width: 240px;\n margin-bottom: 0;\n align-self: start; \n\n}\n\n\n\n\n\n.record-form-row[_ngcontent-%COMP%] markdown[_ngcontent-%COMP%] > p[_ngcontent-%COMP%], \n.record-form-row[_ngcontent-%COMP%] markdown[_ngcontent-%COMP%] > h1[_ngcontent-%COMP%], \n.record-form-row[_ngcontent-%COMP%] markdown[_ngcontent-%COMP%] > h2[_ngcontent-%COMP%], \n.record-form-row[_ngcontent-%COMP%] markdown[_ngcontent-%COMP%] > h3[_ngcontent-%COMP%], \n.record-form-row[_ngcontent-%COMP%] markdown[_ngcontent-%COMP%] > h4[_ngcontent-%COMP%], \n.record-form-row[_ngcontent-%COMP%] markdown[_ngcontent-%COMP%] > h5[_ngcontent-%COMP%], \n.record-form-row[_ngcontent-%COMP%] markdown[_ngcontent-%COMP%] > h6[_ngcontent-%COMP%] {\n margin:0 !important;\n}\n\nmarkdown[_ngcontent-%COMP%] {\n font-size: 1rem; \n\n}\n\n\n@media (min-width: 768px) {\n .record-form-row[_ngcontent-%COMP%] {\n display: grid; \n\n grid-template-columns: auto 1fr;\n align-items: start; \n\n gap: 10px;\n margin-bottom: 12px;\n padding-top: 5px;\n padding-bottom: 5px;\n }\n\n .record-form-row[_ngcontent-%COMP%] label[_ngcontent-%COMP%] {\n width: 240px;\n margin-bottom: 0;\n align-self: start; \n\n }\n}"] });
|
|
365
368
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJFormField, [{
|
|
366
369
|
type: Component,
|
|
367
|
-
args: [{ selector: 'mj-form-field', template: "<!--\n Using a blend of *ngIf and the new @switch control flow because of a bug in early Angular 17 where\n the @if wrapping the @switch didn't fully remove elements when swtiching back and forth. In the future if Angular fixes the bug\n we can get rid of the *ngIf outer div blocks and instead use @if and contain the @switch within the same div block.\n-->\n@if (record.IsSaved || !IsFieldReadOnly) {\n <!-- We only render a field if the record is either saved, or the field is editable. Meaning, for NEW records, we only show editable fields -->\n <div class=\"record-form-row\" *ngIf=\"!EditMode || IsFieldReadOnly\">\n <label *ngIf=\"ShowLabel\">{{DisplayName}}</label>\n @switch (LinkType) {\n @case ('None') {\n @if (ExtendedType === 'Code') {\n <mj-code-editor [value]=\"record.Get(FieldName)\" [readonly]=\"true\" [languages]=\"languages\" [language]=\"'JavaScript'\"></mj-code-editor>\n }\n @else if (FieldInfo.Length === -1) {\n <!-- this is a varchar(max) type of field -->\n <markdown #markdown [data]=\"record.Get(FieldName)\"></markdown>\n <!-- <span [innerHTML]=\"record.Get(FieldName) | formatText\"></span> -->\n }\n @else {\n <span>{{FormatValue(FieldName, 0)}}</span>\n }\n }\n @case ('Email') {\n <span mjEmailLink [field]=\"record.GetFieldByName(FieldName)
|
|
370
|
+
args: [{ selector: 'mj-form-field', template: "<!--\n Using a blend of *ngIf and the new @switch control flow because of a bug in early Angular 17 where\n the @if wrapping the @switch didn't fully remove elements when swtiching back and forth. In the future if Angular fixes the bug\n we can get rid of the *ngIf outer div blocks and instead use @if and contain the @switch within the same div block.\n-->\n@if (record.IsSaved || !IsFieldReadOnly) {\n <!-- We only render a field if the record is either saved, or the field is editable. Meaning, for NEW records, we only show editable fields -->\n <div class=\"record-form-row\" *ngIf=\"!EditMode || IsFieldReadOnly\">\n <label *ngIf=\"ShowLabel\">{{DisplayName}}</label>\n @switch (LinkType) {\n @case ('None') {\n @if (ExtendedType === 'Code') {\n <mj-code-editor [value]=\"record.Get(FieldName)\" [readonly]=\"true\" [languages]=\"languages\" [language]=\"'JavaScript'\"></mj-code-editor>\n }\n @else if (FieldInfo.Length === -1) {\n <!-- this is a varchar(max) type of field -->\n <markdown #markdown [data]=\"record.Get(FieldName)\"></markdown>\n <!-- <span [innerHTML]=\"record.Get(FieldName) | formatText\"></span> -->\n }\n @else {\n <span>{{FormatValue(FieldName, 0)}}</span>\n }\n }\n @case ('Email') {\n <span mjEmailLink [field]=\"record.GetFieldByName(FieldName)!\" >{{FormatValue(FieldName, 0)}}</span>\n }\n @case ('URL') {\n <span mjWebLink [field]=\"record.GetFieldByName(FieldName)!\" >{{FormatValue(FieldName, 0)}}</span>\n }\n @case ('Record') {\n <span mjFieldLink [record]=\"record\" [fieldName]=\"FieldName\" >{{FormatValue(FieldName, 0)}}</span>\n }\n }\n </div>\n <div class=\"record-form-row\" *ngIf=\"EditMode && !IsFieldReadOnly\">\n @if (ShowLabel) {\n <label>{{DisplayName}}</label>\n }\n @if (FieldInfo && FieldInfo.RelatedEntity && FieldInfo.RelatedEntity.length > 0) {\n <!-- Foreign Key Link here -->\n <mj-link-field [record]=\"record\" [FieldName]=\"FieldName\" [LinkComponentType]=\"LinkComponentType\"></mj-link-field>\n }\n @else {\n <!-- Not a foreign key -->\n @switch (Type) {\n @case ('code') {\n <mj-code-editor [(ngModel)]=\"Value\" [languages]=\"languages\" [language]=\"'JavaScript'\"></mj-code-editor>\n }\n @case ('textbox') {\n <kendo-textbox [(ngModel)]=\"Value\" />\n }\n @case ('textarea') {\n <kendo-textarea [(ngModel)]=\"Value\" mjFillContainer [fillWidth]=\"ShowLabel ? false : true\" [fillHeight]=\"ShowLabel ? false : true\" ></kendo-textarea>\n }\n @case ('numerictextbox') {\n <kendo-numerictextbox [(value)]=\"Value\" />\n }\n @case ('datepicker') {\n <kendo-datepicker [(value)]=\"Value\"></kendo-datepicker>\n }\n @case ('checkbox') {\n <input type=\"checkbox\" [(ngModel)]=\"Value\" kendoCheckBox />\n }\n @case ('dropdownlist') {\n <kendo-dropdownlist [data]=\"PossibleValues\" [(ngModel)]=\"Value\"></kendo-dropdownlist>\n }\n @case ('combobox') {\n <kendo-combobox [data]=\"PossibleValues\" [allowCustom]=\"true\" [(ngModel)]=\"Value\"></kendo-combobox>\n }\n }\n }\n </div>\n}\n", styles: [".record-form-row {\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: start;\n gap: 10px;\n margin-bottom: 12px;\n padding-top: 5px;\n padding-bottom: 5px;\n align-items: start; /* Ensure items are aligned at the top */\n} \n \n \n.record-form-row label {\n font-weight: bold;\n padding-right: 10px;\n width: 240px;\n margin-bottom: 0;\n align-self: start; /* Align the label to the start (top) */\n}\n\n/*\n Eliminate the default margin and padding for the markdown elements\n */\n.record-form-row markdown > p,\n.record-form-row markdown > h1,\n.record-form-row markdown > h2,\n.record-form-row markdown > h3,\n.record-form-row markdown > h4,\n.record-form-row markdown > h5,\n.record-form-row markdown > h6 {\n margin:0 !important;\n}\n\nmarkdown {\n font-size: 1rem; /* Adjust this value to match your app's regular text size */\n}\n\n\n@media (min-width: 768px) {\n .record-form-row {\n display: grid; /* Ensure grid display is used for larger screens as well */\n grid-template-columns: auto 1fr;\n align-items: start; /* Keep the alignment at the top */\n gap: 10px;\n margin-bottom: 12px;\n padding-top: 5px;\n padding-bottom: 5px;\n }\n\n .record-form-row label {\n width: 240px;\n margin-bottom: 0;\n align-self: start; /* Ensure the label is aligned to the top */\n }\n}\n "] }]
|
|
368
371
|
}], () => [{ type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }], { record: [{
|
|
369
372
|
type: Input
|
|
370
373
|
}], EditMode: [{
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@memberjunction/ng-base-forms",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.5.0",
|
|
4
4
|
"description": "MemberJunction: Angular Base Form Components",
|
|
5
5
|
"main": "./dist/public-api.js",
|
|
6
6
|
"typings": "./dist/public-api.d.ts",
|
|
@@ -25,15 +25,15 @@
|
|
|
25
25
|
"@angular/router": "18.0.2"
|
|
26
26
|
},
|
|
27
27
|
"dependencies": {
|
|
28
|
-
"@memberjunction/global": "2.
|
|
29
|
-
"@memberjunction/core": "2.
|
|
30
|
-
"@memberjunction/ng-code-editor": "2.
|
|
31
|
-
"@memberjunction/ng-shared": "2.
|
|
32
|
-
"@memberjunction/ng-tabstrip": "2.
|
|
33
|
-
"@memberjunction/ng-link-directives": "2.
|
|
34
|
-
"@memberjunction/ng-container-directives": "2.
|
|
35
|
-
"@memberjunction/ng-record-changes": "2.
|
|
36
|
-
"@memberjunction/ng-base-types": "2.
|
|
28
|
+
"@memberjunction/global": "2.5.0",
|
|
29
|
+
"@memberjunction/core": "2.5.0",
|
|
30
|
+
"@memberjunction/ng-code-editor": "2.5.0",
|
|
31
|
+
"@memberjunction/ng-shared": "2.5.0",
|
|
32
|
+
"@memberjunction/ng-tabstrip": "2.5.0",
|
|
33
|
+
"@memberjunction/ng-link-directives": "2.5.0",
|
|
34
|
+
"@memberjunction/ng-container-directives": "2.5.0",
|
|
35
|
+
"@memberjunction/ng-record-changes": "2.5.0",
|
|
36
|
+
"@memberjunction/ng-base-types": "2.5.0",
|
|
37
37
|
"@progress/kendo-angular-buttons": "16.2.0",
|
|
38
38
|
"@progress/kendo-angular-dropdowns": "16.2.0",
|
|
39
39
|
"@progress/kendo-angular-inputs": "16.2.0",
|