@memberjunction/ng-base-forms 3.4.0 → 4.1.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.
Files changed (80) hide show
  1. package/dist/lib/base-form-component.d.ts +103 -215
  2. package/dist/lib/base-form-component.d.ts.map +1 -1
  3. package/dist/lib/base-form-component.js +384 -544
  4. package/dist/lib/base-form-component.js.map +1 -1
  5. package/dist/lib/container/record-form-container.component.d.ts +165 -0
  6. package/dist/lib/container/record-form-container.component.d.ts.map +1 -0
  7. package/dist/lib/container/record-form-container.component.js +534 -0
  8. package/dist/lib/container/record-form-container.component.js.map +1 -0
  9. package/dist/lib/explorer-entity-data-grid.component.d.ts +7 -9
  10. package/dist/lib/explorer-entity-data-grid.component.d.ts.map +1 -1
  11. package/dist/lib/explorer-entity-data-grid.component.js +15 -16
  12. package/dist/lib/explorer-entity-data-grid.component.js.map +1 -1
  13. package/dist/lib/field/form-field.component.d.ts +268 -0
  14. package/dist/lib/field/form-field.component.d.ts.map +1 -0
  15. package/dist/lib/field/form-field.component.js +1194 -0
  16. package/dist/lib/field/form-field.component.js.map +1 -0
  17. package/dist/lib/form-state.interface.d.ts +2 -0
  18. package/dist/lib/form-state.interface.d.ts.map +1 -1
  19. package/dist/lib/form-state.interface.js.map +1 -1
  20. package/dist/lib/form-state.service.d.ts +14 -0
  21. package/dist/lib/form-state.service.d.ts.map +1 -1
  22. package/dist/lib/form-state.service.js +19 -0
  23. package/dist/lib/form-state.service.js.map +1 -1
  24. package/dist/lib/panel/collapsible-panel.component.d.ts +139 -0
  25. package/dist/lib/panel/collapsible-panel.component.d.ts.map +1 -0
  26. package/dist/lib/panel/collapsible-panel.component.js +468 -0
  27. package/dist/lib/panel/collapsible-panel.component.js.map +1 -0
  28. package/dist/lib/section-loader-component.d.ts.map +1 -1
  29. package/dist/lib/section-loader-component.js +3 -2
  30. package/dist/lib/section-loader-component.js.map +1 -1
  31. package/dist/lib/toolbar/form-toolbar.component.d.ts +170 -0
  32. package/dist/lib/toolbar/form-toolbar.component.d.ts.map +1 -0
  33. package/dist/lib/toolbar/form-toolbar.component.js +830 -0
  34. package/dist/lib/toolbar/form-toolbar.component.js.map +1 -0
  35. package/dist/lib/types/form-events.d.ts +90 -0
  36. package/dist/lib/types/form-events.d.ts.map +1 -0
  37. package/dist/lib/types/form-events.js +45 -0
  38. package/dist/lib/types/form-events.js.map +1 -0
  39. package/dist/lib/types/form-types.d.ts +150 -0
  40. package/dist/lib/types/form-types.d.ts.map +1 -0
  41. package/dist/lib/types/form-types.js +12 -0
  42. package/dist/lib/types/form-types.js.map +1 -0
  43. package/dist/lib/types/navigation-events.d.ts +88 -0
  44. package/dist/lib/types/navigation-events.d.ts.map +1 -0
  45. package/dist/lib/types/navigation-events.js +2 -0
  46. package/dist/lib/types/navigation-events.js.map +1 -0
  47. package/dist/lib/types/toolbar-config.d.ts +66 -0
  48. package/dist/lib/types/toolbar-config.d.ts.map +1 -0
  49. package/dist/lib/types/toolbar-config.js +38 -0
  50. package/dist/lib/types/toolbar-config.js.map +1 -0
  51. package/dist/module.d.ts +28 -20
  52. package/dist/module.d.ts.map +1 -1
  53. package/dist/module.js +47 -74
  54. package/dist/module.js.map +1 -1
  55. package/dist/public-api.d.ts +20 -8
  56. package/dist/public-api.d.ts.map +1 -1
  57. package/dist/public-api.js +24 -9
  58. package/dist/public-api.js.map +1 -1
  59. package/package.json +27 -30
  60. package/README.md +0 -449
  61. package/dist/lib/base-field-component.d.ts +0 -152
  62. package/dist/lib/base-field-component.d.ts.map +0 -1
  63. package/dist/lib/base-field-component.js +0 -667
  64. package/dist/lib/base-field-component.js.map +0 -1
  65. package/dist/lib/base-form-context.d.ts +0 -23
  66. package/dist/lib/base-form-context.d.ts.map +0 -1
  67. package/dist/lib/base-form-context.js +0 -10
  68. package/dist/lib/base-form-context.js.map +0 -1
  69. package/dist/lib/collapsible-panel.component.d.ts +0 -68
  70. package/dist/lib/collapsible-panel.component.d.ts.map +0 -1
  71. package/dist/lib/collapsible-panel.component.js +0 -330
  72. package/dist/lib/collapsible-panel.component.js.map +0 -1
  73. package/dist/lib/form-section-controls.component.d.ts +0 -35
  74. package/dist/lib/form-section-controls.component.d.ts.map +0 -1
  75. package/dist/lib/form-section-controls.component.js +0 -272
  76. package/dist/lib/form-section-controls.component.js.map +0 -1
  77. package/dist/lib/link-field.component.d.ts +0 -62
  78. package/dist/lib/link-field.component.d.ts.map +0 -1
  79. package/dist/lib/link-field.component.js +0 -391
  80. package/dist/lib/link-field.component.js.map +0 -1
@@ -1,667 +0,0 @@
1
- import { Component, Input, Output, EventEmitter, ViewChild } from '@angular/core';
2
- import { EntityFieldTSType } from '@memberjunction/core';
3
- import { IsEncryptedSentinel, IsValueEncrypted } from '@memberjunction/global';
4
- import { BaseRecordComponent } from './base-record-component';
5
- import { languages } from '@codemirror/language-data';
6
- import { EncryptionEngineBase } from '@memberjunction/core-entities';
7
- import * as i0 from "@angular/core";
8
- import * as i1 from "@angular/common";
9
- import * as i2 from "@angular/forms";
10
- import * as i3 from "@progress/kendo-angular-inputs";
11
- import * as i4 from "@progress/kendo-angular-dateinputs";
12
- import * as i5 from "@progress/kendo-angular-dropdowns";
13
- import * as i6 from "@memberjunction/ng-link-directives";
14
- import * as i7 from "@memberjunction/ng-code-editor";
15
- import * as i8 from "@memberjunction/ng-markdown";
16
- import * as i9 from "./link-field.component";
17
- const _c0 = ["markdown"];
18
- function MJFormField_Conditional_0_div_0_label_1_Template(rf, ctx) { if (rf & 1) {
19
- i0.ɵɵelement(0, "label", 4);
20
- } if (rf & 2) {
21
- const ctx_r0 = i0.ɵɵnextContext(3);
22
- i0.ɵɵproperty("innerHTML", ctx_r0.HighlightedDisplayName, i0.ɵɵsanitizeHtml);
23
- } }
24
- function MJFormField_Conditional_0_div_0_Conditional_2_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
25
- i0.ɵɵelementStart(0, "span", 7);
26
- i0.ɵɵtext(1);
27
- i0.ɵɵelementEnd();
28
- } if (rf & 2) {
29
- const ctx_r0 = i0.ɵɵnextContext(5);
30
- i0.ɵɵadvance();
31
- i0.ɵɵtextInterpolate(ctx_r0.Value);
32
- } }
33
- function MJFormField_Conditional_0_div_0_Conditional_2_Conditional_0_Conditional_2_Template(rf, ctx) { if (rf & 1) {
34
- i0.ɵɵelementStart(0, "span", 8);
35
- i0.ɵɵelement(1, "i", 11);
36
- i0.ɵɵtext(2);
37
- i0.ɵɵelementEnd();
38
- } if (rf & 2) {
39
- const ctx_r0 = i0.ɵɵnextContext(5);
40
- i0.ɵɵadvance(2);
41
- i0.ɵɵtextInterpolate1(" ", ctx_r0.EncryptedDisplayMask, " ");
42
- } }
43
- function MJFormField_Conditional_0_div_0_Conditional_2_Conditional_0_Template(rf, ctx) { if (rf & 1) {
44
- const _r2 = i0.ɵɵgetCurrentView();
45
- i0.ɵɵelementStart(0, "span", 5);
46
- i0.ɵɵtemplate(1, MJFormField_Conditional_0_div_0_Conditional_2_Conditional_0_Conditional_1_Template, 2, 1, "span", 7)(2, MJFormField_Conditional_0_div_0_Conditional_2_Conditional_0_Conditional_2_Template, 3, 1, "span", 8);
47
- i0.ɵɵelementStart(3, "button", 9);
48
- i0.ɵɵlistener("click", function MJFormField_Conditional_0_div_0_Conditional_2_Conditional_0_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.toggleEncryptedValueVisibility()); });
49
- i0.ɵɵelement(4, "i", 10);
50
- i0.ɵɵelementEnd()();
51
- } if (rf & 2) {
52
- const ctx_r0 = i0.ɵɵnextContext(4);
53
- i0.ɵɵadvance();
54
- i0.ɵɵconditional(ctx_r0.isEncryptedValueRevealed ? 1 : 2);
55
- i0.ɵɵadvance(2);
56
- i0.ɵɵproperty("title", ctx_r0.isEncryptedValueRevealed ? "Hide value" : "Show value");
57
- i0.ɵɵadvance();
58
- i0.ɵɵclassProp("fa-eye", !ctx_r0.isEncryptedValueRevealed)("fa-eye-slash", ctx_r0.isEncryptedValueRevealed);
59
- } }
60
- function MJFormField_Conditional_0_div_0_Conditional_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
61
- i0.ɵɵelementStart(0, "span", 6);
62
- i0.ɵɵelement(1, "i", 11);
63
- i0.ɵɵtext(2);
64
- i0.ɵɵelementEnd();
65
- } if (rf & 2) {
66
- const ctx_r0 = i0.ɵɵnextContext(4);
67
- i0.ɵɵadvance(2);
68
- i0.ɵɵtextInterpolate1(" ", ctx_r0.EncryptedDisplayMask, " ");
69
- } }
70
- function MJFormField_Conditional_0_div_0_Conditional_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
71
- i0.ɵɵelement(0, "span");
72
- } }
73
- function MJFormField_Conditional_0_div_0_Conditional_2_Template(rf, ctx) { if (rf & 1) {
74
- i0.ɵɵtemplate(0, MJFormField_Conditional_0_div_0_Conditional_2_Conditional_0_Template, 5, 6, "span", 5)(1, MJFormField_Conditional_0_div_0_Conditional_2_Conditional_1_Template, 3, 1, "span", 6)(2, MJFormField_Conditional_0_div_0_Conditional_2_Conditional_2_Template, 1, 0, "span");
75
- } if (rf & 2) {
76
- const ctx_r0 = i0.ɵɵnextContext(3);
77
- i0.ɵɵconditional(ctx_r0.CanRevealEncryptedValue ? 0 : ctx_r0.IsValueProtected ? 1 : 2);
78
- } }
79
- function MJFormField_Conditional_0_div_0_Conditional_3_Case_0_Conditional_0_Template(rf, ctx) { if (rf & 1) {
80
- i0.ɵɵelement(0, "mj-code-editor", 15);
81
- } if (rf & 2) {
82
- const ctx_r0 = i0.ɵɵnextContext(5);
83
- i0.ɵɵproperty("value", ctx_r0.record.Get(ctx_r0.FieldName))("readonly", true)("languages", ctx_r0.languages)("language", "JavaScript");
84
- } }
85
- function MJFormField_Conditional_0_div_0_Conditional_3_Case_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
86
- i0.ɵɵelement(0, "input", 16);
87
- } if (rf & 2) {
88
- const ctx_r0 = i0.ɵɵnextContext(5);
89
- i0.ɵɵproperty("checked", ctx_r0.Value);
90
- } }
91
- function MJFormField_Conditional_0_div_0_Conditional_3_Case_0_Conditional_2_Template(rf, ctx) { if (rf & 1) {
92
- i0.ɵɵelement(0, "mj-markdown", 17, 0);
93
- } if (rf & 2) {
94
- const ctx_r0 = i0.ɵɵnextContext(5);
95
- i0.ɵɵproperty("data", ctx_r0.record.Get(ctx_r0.FieldName));
96
- } }
97
- function MJFormField_Conditional_0_div_0_Conditional_3_Case_0_Conditional_3_Template(rf, ctx) { if (rf & 1) {
98
- i0.ɵɵelementStart(0, "span");
99
- i0.ɵɵtext(1);
100
- i0.ɵɵelementEnd();
101
- } if (rf & 2) {
102
- const ctx_r0 = i0.ɵɵnextContext(5);
103
- i0.ɵɵadvance();
104
- i0.ɵɵtextInterpolate(ctx_r0.FormatValue(ctx_r0.FieldName, 0));
105
- } }
106
- function MJFormField_Conditional_0_div_0_Conditional_3_Case_0_Template(rf, ctx) { if (rf & 1) {
107
- i0.ɵɵtemplate(0, MJFormField_Conditional_0_div_0_Conditional_3_Case_0_Conditional_0_Template, 1, 4, "mj-code-editor", 15)(1, MJFormField_Conditional_0_div_0_Conditional_3_Case_0_Conditional_1_Template, 1, 1, "input", 16)(2, MJFormField_Conditional_0_div_0_Conditional_3_Case_0_Conditional_2_Template, 2, 1, "mj-markdown", 17)(3, MJFormField_Conditional_0_div_0_Conditional_3_Case_0_Conditional_3_Template, 2, 1, "span");
108
- } if (rf & 2) {
109
- const ctx_r0 = i0.ɵɵnextContext(4);
110
- i0.ɵɵconditional(ctx_r0.ExtendedType === "Code" ? 0 : ctx_r0.Type === "checkbox" ? 1 : ctx_r0.FieldInfo.Length === -1 ? 2 : 3);
111
- } }
112
- function MJFormField_Conditional_0_div_0_Conditional_3_Case_1_Template(rf, ctx) { if (rf & 1) {
113
- i0.ɵɵelementStart(0, "span", 12);
114
- i0.ɵɵtext(1);
115
- i0.ɵɵelementEnd();
116
- } if (rf & 2) {
117
- const ctx_r0 = i0.ɵɵnextContext(4);
118
- i0.ɵɵproperty("field", ctx_r0.record.GetFieldByName(ctx_r0.FieldName));
119
- i0.ɵɵadvance();
120
- i0.ɵɵtextInterpolate(ctx_r0.FormatValue(ctx_r0.FieldName, 0));
121
- } }
122
- function MJFormField_Conditional_0_div_0_Conditional_3_Case_2_Template(rf, ctx) { if (rf & 1) {
123
- i0.ɵɵelementStart(0, "span", 13);
124
- i0.ɵɵtext(1);
125
- i0.ɵɵelementEnd();
126
- } if (rf & 2) {
127
- const ctx_r0 = i0.ɵɵnextContext(4);
128
- i0.ɵɵproperty("field", ctx_r0.record.GetFieldByName(ctx_r0.FieldName));
129
- i0.ɵɵadvance();
130
- i0.ɵɵtextInterpolate(ctx_r0.FormatValue(ctx_r0.FieldName, 0));
131
- } }
132
- function MJFormField_Conditional_0_div_0_Conditional_3_Case_3_Template(rf, ctx) { if (rf & 1) {
133
- i0.ɵɵelementStart(0, "span", 14);
134
- i0.ɵɵtext(1);
135
- i0.ɵɵelementEnd();
136
- } if (rf & 2) {
137
- const ctx_r0 = i0.ɵɵnextContext(4);
138
- i0.ɵɵproperty("record", ctx_r0.record)("fieldName", ctx_r0.FieldName);
139
- i0.ɵɵadvance();
140
- i0.ɵɵtextInterpolate(ctx_r0.FormatValue(ctx_r0.FieldName, 0));
141
- } }
142
- function MJFormField_Conditional_0_div_0_Conditional_3_Template(rf, ctx) { if (rf & 1) {
143
- i0.ɵɵtemplate(0, MJFormField_Conditional_0_div_0_Conditional_3_Case_0_Template, 4, 1)(1, MJFormField_Conditional_0_div_0_Conditional_3_Case_1_Template, 2, 2, "span", 12)(2, MJFormField_Conditional_0_div_0_Conditional_3_Case_2_Template, 2, 2, "span", 13)(3, MJFormField_Conditional_0_div_0_Conditional_3_Case_3_Template, 2, 3, "span", 14);
144
- } if (rf & 2) {
145
- let tmp_3_0;
146
- const ctx_r0 = i0.ɵɵnextContext(3);
147
- i0.ɵɵconditional((tmp_3_0 = ctx_r0.LinkType) === "None" ? 0 : tmp_3_0 === "Email" ? 1 : tmp_3_0 === "URL" ? 2 : tmp_3_0 === "Record" ? 3 : -1);
148
- } }
149
- function MJFormField_Conditional_0_div_0_Template(rf, ctx) { if (rf & 1) {
150
- i0.ɵɵelementStart(0, "div", 2);
151
- i0.ɵɵtemplate(1, MJFormField_Conditional_0_div_0_label_1_Template, 1, 1, "label", 3)(2, MJFormField_Conditional_0_div_0_Conditional_2_Template, 3, 1)(3, MJFormField_Conditional_0_div_0_Conditional_3_Template, 4, 1);
152
- i0.ɵɵelementEnd();
153
- } if (rf & 2) {
154
- const ctx_r0 = i0.ɵɵnextContext(2);
155
- i0.ɵɵadvance();
156
- i0.ɵɵproperty("ngIf", ctx_r0.ShowLabel);
157
- i0.ɵɵadvance();
158
- i0.ɵɵconditional(ctx_r0.IsEncryptedField ? 2 : 3);
159
- } }
160
- function MJFormField_Conditional_0_div_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
161
- i0.ɵɵelement(0, "label", 4);
162
- } if (rf & 2) {
163
- const ctx_r0 = i0.ɵɵnextContext(3);
164
- i0.ɵɵproperty("innerHTML", ctx_r0.HighlightedDisplayName, i0.ɵɵsanitizeHtml);
165
- } }
166
- function MJFormField_Conditional_0_div_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
167
- const _r3 = i0.ɵɵgetCurrentView();
168
- i0.ɵɵelementStart(0, "div", 18)(1, "span", 21);
169
- i0.ɵɵelement(2, "i", 11);
170
- i0.ɵɵtext(3);
171
- i0.ɵɵelementEnd();
172
- i0.ɵɵelementStart(4, "div", 22)(5, "kendo-textbox", 23);
173
- i0.ɵɵtwoWayListener("ngModelChange", function MJFormField_Conditional_0_div_1_Conditional_2_Template_kendo_textbox_ngModelChange_5_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r0.EncryptedEditValue, $event) || (ctx_r0.EncryptedEditValue = $event); return i0.ɵɵresetView($event); });
174
- i0.ɵɵelementEnd();
175
- i0.ɵɵelementStart(6, "button", 9);
176
- i0.ɵɵlistener("click", function MJFormField_Conditional_0_div_1_Conditional_2_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.toggleNewValueVisibility()); });
177
- i0.ɵɵelement(7, "i", 10);
178
- i0.ɵɵelementEnd()();
179
- i0.ɵɵelementStart(8, "span", 24);
180
- i0.ɵɵtext(9, "Enter a new value to overwrite the existing encrypted data (current value cannot be displayed)");
181
- i0.ɵɵelementEnd()();
182
- } if (rf & 2) {
183
- const ctx_r0 = i0.ɵɵnextContext(3);
184
- i0.ɵɵadvance(3);
185
- i0.ɵɵtextInterpolate1(" ", ctx_r0.EncryptedDisplayMask, " ");
186
- i0.ɵɵadvance(2);
187
- i0.ɵɵtwoWayProperty("ngModel", ctx_r0.EncryptedEditValue);
188
- i0.ɵɵproperty("placeholder", "Enter new value to replace encrypted data")("type", ctx_r0.isNewValueRevealed ? "text" : "password");
189
- i0.ɵɵadvance();
190
- i0.ɵɵproperty("title", ctx_r0.isNewValueRevealed ? "Hide value" : "Show value");
191
- i0.ɵɵadvance();
192
- i0.ɵɵclassProp("fa-eye", !ctx_r0.isNewValueRevealed)("fa-eye-slash", ctx_r0.isNewValueRevealed);
193
- } }
194
- function MJFormField_Conditional_0_div_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
195
- const _r4 = i0.ɵɵgetCurrentView();
196
- i0.ɵɵelementStart(0, "div", 19)(1, "div", 22)(2, "kendo-textbox", 25);
197
- i0.ɵɵtwoWayListener("ngModelChange", function MJFormField_Conditional_0_div_1_Conditional_3_Template_kendo_textbox_ngModelChange_2_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r0.Value, $event) || (ctx_r0.Value = $event); return i0.ɵɵresetView($event); });
198
- i0.ɵɵelementEnd();
199
- i0.ɵɵelementStart(3, "button", 9);
200
- i0.ɵɵlistener("click", function MJFormField_Conditional_0_div_1_Conditional_3_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.toggleEncryptedValueVisibility()); });
201
- i0.ɵɵelement(4, "i", 10);
202
- i0.ɵɵelementEnd()()();
203
- } if (rf & 2) {
204
- const ctx_r0 = i0.ɵɵnextContext(3);
205
- i0.ɵɵadvance(2);
206
- i0.ɵɵtwoWayProperty("ngModel", ctx_r0.Value);
207
- i0.ɵɵproperty("type", ctx_r0.isEncryptedValueRevealed ? "text" : "password");
208
- i0.ɵɵadvance();
209
- i0.ɵɵproperty("title", ctx_r0.isEncryptedValueRevealed ? "Hide value" : "Show value");
210
- i0.ɵɵadvance();
211
- i0.ɵɵclassProp("fa-eye", !ctx_r0.isEncryptedValueRevealed)("fa-eye-slash", ctx_r0.isEncryptedValueRevealed);
212
- } }
213
- function MJFormField_Conditional_0_div_1_Conditional_4_Template(rf, ctx) { if (rf & 1) {
214
- i0.ɵɵelement(0, "mj-link-field", 20);
215
- } if (rf & 2) {
216
- const ctx_r0 = i0.ɵɵnextContext(3);
217
- i0.ɵɵproperty("record", ctx_r0.record)("FieldName", ctx_r0.FieldName)("LinkComponentType", ctx_r0.LinkComponentType);
218
- } }
219
- function MJFormField_Conditional_0_div_1_Conditional_5_Case_0_Template(rf, ctx) { if (rf & 1) {
220
- const _r5 = i0.ɵɵgetCurrentView();
221
- i0.ɵɵelementStart(0, "mj-code-editor", 32);
222
- i0.ɵɵtwoWayListener("ngModelChange", function MJFormField_Conditional_0_div_1_Conditional_5_Case_0_Template_mj_code_editor_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(4); i0.ɵɵtwoWayBindingSet(ctx_r0.Value, $event) || (ctx_r0.Value = $event); return i0.ɵɵresetView($event); });
223
- i0.ɵɵelementEnd();
224
- } if (rf & 2) {
225
- const ctx_r0 = i0.ɵɵnextContext(4);
226
- i0.ɵɵtwoWayProperty("ngModel", ctx_r0.Value);
227
- i0.ɵɵproperty("languages", ctx_r0.languages)("language", "JavaScript");
228
- } }
229
- function MJFormField_Conditional_0_div_1_Conditional_5_Case_1_Template(rf, ctx) { if (rf & 1) {
230
- const _r6 = i0.ɵɵgetCurrentView();
231
- i0.ɵɵelementStart(0, "kendo-textbox", 33);
232
- i0.ɵɵtwoWayListener("ngModelChange", function MJFormField_Conditional_0_div_1_Conditional_5_Case_1_Template_kendo_textbox_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(4); i0.ɵɵtwoWayBindingSet(ctx_r0.Value, $event) || (ctx_r0.Value = $event); return i0.ɵɵresetView($event); });
233
- i0.ɵɵelementEnd();
234
- } if (rf & 2) {
235
- const ctx_r0 = i0.ɵɵnextContext(4);
236
- i0.ɵɵtwoWayProperty("ngModel", ctx_r0.Value);
237
- } }
238
- function MJFormField_Conditional_0_div_1_Conditional_5_Case_2_Template(rf, ctx) { if (rf & 1) {
239
- const _r7 = i0.ɵɵgetCurrentView();
240
- i0.ɵɵelementStart(0, "kendo-textarea", 33);
241
- i0.ɵɵtwoWayListener("ngModelChange", function MJFormField_Conditional_0_div_1_Conditional_5_Case_2_Template_kendo_textarea_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(4); i0.ɵɵtwoWayBindingSet(ctx_r0.Value, $event) || (ctx_r0.Value = $event); return i0.ɵɵresetView($event); });
242
- i0.ɵɵelementEnd();
243
- } if (rf & 2) {
244
- const ctx_r0 = i0.ɵɵnextContext(4);
245
- i0.ɵɵtwoWayProperty("ngModel", ctx_r0.Value);
246
- } }
247
- function MJFormField_Conditional_0_div_1_Conditional_5_Case_3_Template(rf, ctx) { if (rf & 1) {
248
- const _r8 = i0.ɵɵgetCurrentView();
249
- i0.ɵɵelementStart(0, "kendo-numerictextbox", 34);
250
- i0.ɵɵtwoWayListener("valueChange", function MJFormField_Conditional_0_div_1_Conditional_5_Case_3_Template_kendo_numerictextbox_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r0 = i0.ɵɵnextContext(4); i0.ɵɵtwoWayBindingSet(ctx_r0.Value, $event) || (ctx_r0.Value = $event); return i0.ɵɵresetView($event); });
251
- i0.ɵɵelementEnd();
252
- } if (rf & 2) {
253
- const ctx_r0 = i0.ɵɵnextContext(4);
254
- i0.ɵɵtwoWayProperty("value", ctx_r0.Value);
255
- } }
256
- function MJFormField_Conditional_0_div_1_Conditional_5_Case_4_Template(rf, ctx) { if (rf & 1) {
257
- const _r9 = i0.ɵɵgetCurrentView();
258
- i0.ɵɵelementStart(0, "kendo-datepicker", 34);
259
- i0.ɵɵtwoWayListener("valueChange", function MJFormField_Conditional_0_div_1_Conditional_5_Case_4_Template_kendo_datepicker_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r0 = i0.ɵɵnextContext(4); i0.ɵɵtwoWayBindingSet(ctx_r0.Value, $event) || (ctx_r0.Value = $event); return i0.ɵɵresetView($event); });
260
- i0.ɵɵelementEnd();
261
- } if (rf & 2) {
262
- const ctx_r0 = i0.ɵɵnextContext(4);
263
- i0.ɵɵtwoWayProperty("value", ctx_r0.Value);
264
- } }
265
- function MJFormField_Conditional_0_div_1_Conditional_5_Case_5_Template(rf, ctx) { if (rf & 1) {
266
- const _r10 = i0.ɵɵgetCurrentView();
267
- i0.ɵɵelementStart(0, "input", 35);
268
- i0.ɵɵtwoWayListener("ngModelChange", function MJFormField_Conditional_0_div_1_Conditional_5_Case_5_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r0 = i0.ɵɵnextContext(4); i0.ɵɵtwoWayBindingSet(ctx_r0.Value, $event) || (ctx_r0.Value = $event); return i0.ɵɵresetView($event); });
269
- i0.ɵɵelementEnd();
270
- } if (rf & 2) {
271
- const ctx_r0 = i0.ɵɵnextContext(4);
272
- i0.ɵɵtwoWayProperty("ngModel", ctx_r0.Value);
273
- } }
274
- function MJFormField_Conditional_0_div_1_Conditional_5_Case_6_Template(rf, ctx) { if (rf & 1) {
275
- const _r11 = i0.ɵɵgetCurrentView();
276
- i0.ɵɵelementStart(0, "kendo-dropdownlist", 36);
277
- i0.ɵɵtwoWayListener("ngModelChange", function MJFormField_Conditional_0_div_1_Conditional_5_Case_6_Template_kendo_dropdownlist_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r0 = i0.ɵɵnextContext(4); i0.ɵɵtwoWayBindingSet(ctx_r0.Value, $event) || (ctx_r0.Value = $event); return i0.ɵɵresetView($event); });
278
- i0.ɵɵelementEnd();
279
- } if (rf & 2) {
280
- const ctx_r0 = i0.ɵɵnextContext(4);
281
- i0.ɵɵproperty("data", ctx_r0.PossibleValues);
282
- i0.ɵɵtwoWayProperty("ngModel", ctx_r0.Value);
283
- } }
284
- function MJFormField_Conditional_0_div_1_Conditional_5_Case_7_Template(rf, ctx) { if (rf & 1) {
285
- const _r12 = i0.ɵɵgetCurrentView();
286
- i0.ɵɵelementStart(0, "kendo-combobox", 37);
287
- i0.ɵɵtwoWayListener("ngModelChange", function MJFormField_Conditional_0_div_1_Conditional_5_Case_7_Template_kendo_combobox_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r0 = i0.ɵɵnextContext(4); i0.ɵɵtwoWayBindingSet(ctx_r0.Value, $event) || (ctx_r0.Value = $event); return i0.ɵɵresetView($event); });
288
- i0.ɵɵelementEnd();
289
- } if (rf & 2) {
290
- const ctx_r0 = i0.ɵɵnextContext(4);
291
- i0.ɵɵproperty("data", ctx_r0.PossibleValues)("allowCustom", true);
292
- i0.ɵɵtwoWayProperty("ngModel", ctx_r0.Value);
293
- } }
294
- function MJFormField_Conditional_0_div_1_Conditional_5_Template(rf, ctx) { if (rf & 1) {
295
- i0.ɵɵtemplate(0, MJFormField_Conditional_0_div_1_Conditional_5_Case_0_Template, 1, 3, "mj-code-editor", 26)(1, MJFormField_Conditional_0_div_1_Conditional_5_Case_1_Template, 1, 1, "kendo-textbox", 27)(2, MJFormField_Conditional_0_div_1_Conditional_5_Case_2_Template, 1, 1, "kendo-textarea", 27)(3, MJFormField_Conditional_0_div_1_Conditional_5_Case_3_Template, 1, 1, "kendo-numerictextbox", 28)(4, MJFormField_Conditional_0_div_1_Conditional_5_Case_4_Template, 1, 1, "kendo-datepicker", 28)(5, MJFormField_Conditional_0_div_1_Conditional_5_Case_5_Template, 1, 1, "input", 29)(6, MJFormField_Conditional_0_div_1_Conditional_5_Case_6_Template, 1, 2, "kendo-dropdownlist", 30)(7, MJFormField_Conditional_0_div_1_Conditional_5_Case_7_Template, 1, 3, "kendo-combobox", 31);
296
- } if (rf & 2) {
297
- let tmp_3_0;
298
- const ctx_r0 = i0.ɵɵnextContext(3);
299
- i0.ɵɵconditional((tmp_3_0 = ctx_r0.Type) === "code" ? 0 : tmp_3_0 === "textbox" ? 1 : tmp_3_0 === "textarea" ? 2 : tmp_3_0 === "numerictextbox" ? 3 : tmp_3_0 === "datepicker" ? 4 : tmp_3_0 === "checkbox" ? 5 : tmp_3_0 === "dropdownlist" ? 6 : tmp_3_0 === "combobox" ? 7 : -1);
300
- } }
301
- function MJFormField_Conditional_0_div_1_Template(rf, ctx) { if (rf & 1) {
302
- i0.ɵɵelementStart(0, "div", 2);
303
- i0.ɵɵtemplate(1, MJFormField_Conditional_0_div_1_Conditional_1_Template, 1, 1, "label", 4)(2, MJFormField_Conditional_0_div_1_Conditional_2_Template, 10, 9, "div", 18)(3, MJFormField_Conditional_0_div_1_Conditional_3_Template, 5, 7, "div", 19)(4, MJFormField_Conditional_0_div_1_Conditional_4_Template, 1, 3, "mj-link-field", 20)(5, MJFormField_Conditional_0_div_1_Conditional_5_Template, 8, 1);
304
- i0.ɵɵelementEnd();
305
- } if (rf & 2) {
306
- const ctx_r0 = i0.ɵɵnextContext(2);
307
- i0.ɵɵadvance();
308
- i0.ɵɵconditional(ctx_r0.ShowLabel ? 1 : -1);
309
- i0.ɵɵadvance();
310
- i0.ɵɵconditional(ctx_r0.IsBlindEncryptedEdit ? 2 : ctx_r0.IsEncryptedField ? 3 : ctx_r0.FieldInfo && ctx_r0.FieldInfo.RelatedEntity && ctx_r0.FieldInfo.RelatedEntity.length > 0 ? 4 : 5);
311
- } }
312
- function MJFormField_Conditional_0_Template(rf, ctx) { if (rf & 1) {
313
- i0.ɵɵtemplate(0, MJFormField_Conditional_0_div_0_Template, 4, 2, "div", 1)(1, MJFormField_Conditional_0_div_1_Template, 6, 2, "div", 1);
314
- } if (rf & 2) {
315
- const ctx_r0 = i0.ɵɵnextContext();
316
- i0.ɵɵproperty("ngIf", (!ctx_r0.EditMode || ctx_r0.IsFieldReadOnly) && !ctx_r0.shouldHideField);
317
- i0.ɵɵadvance();
318
- i0.ɵɵproperty("ngIf", ctx_r0.EditMode && !ctx_r0.IsFieldReadOnly);
319
- } }
320
- /**
321
- * This component is used to automatically generate a UI for any field in a given BaseEntity object. The CodeGen tool will generate forms and form sections that
322
- * use this component. This component automatically determines the type of the field and generates the appropriate UI element for it. It is possible to use other
323
- * elements to render a field as desired in a custom form, think of this component as a nice "base" component you can use for many cases, and you can create custom
324
- * components for field rendering/editing when needed.
325
- */
326
- export class MJFormField extends BaseRecordComponent {
327
- renderer;
328
- /**
329
- * The record object that contains the field to be rendered. This object should be an instance of BaseEntity or a derived class.
330
- */
331
- record;
332
- /**
333
- * EditMode must be bound to the containing form's edit mode/state. When the form is in edit mode, the field will be rendered as an editable control (if not a read only field), otherwise the field will be rendered read-only.
334
- */
335
- EditMode = false;
336
- /**
337
- * The name of the field in the entity to be rendered.
338
- */
339
- FieldName = '';
340
- /**
341
- * The type of control to be rendered for the field. The default is 'textbox'. Other possible values are 'textarea', 'numerictextbox', 'datepicker', 'checkbox', 'dropdownlist', 'combobox', 'code'.
342
- */
343
- Type = 'textbox';
344
- /**
345
- * Optional, the type of link field that should be shown. Email and URL fields will be rendered as hyperlinks, Record fields will be rendered as links to the record. The default is 'None'. Record Fields are only
346
- * valid when the FieldName field is a foreign key field to another entity.
347
- */
348
- LinkType = 'None';
349
- /**
350
- * Optional, when the field type is a linked field, you can specify if a search box is shown or a dropdown component is shown. The default is 'search'.
351
- */
352
- LinkComponentType = 'Dropdown';
353
- /**
354
- * If set to false, the label for the field will not be shown. The default is true.
355
- */
356
- ShowLabel = true;
357
- /**
358
- * Form context containing all form-level state (filter, showEmptyFields, etc.)
359
- */
360
- formContext;
361
- /**
362
- * When true (default), the field will be hidden when it has no value and is in read-only mode.
363
- * This helps reduce visual clutter by hiding empty fields.
364
- */
365
- hideWhenEmptyInReadOnlyMode = true;
366
- languages = languages;
367
- _displayName = null;
368
- /**
369
- * Display Name to show on the the control. By default, this is derived from the DisplayName in the entity field metadata, and can be overridden if desired by setting this property manually. Leave it empty to use the default.
370
- */
371
- get DisplayName() {
372
- if (!this._displayName) {
373
- const ef = this.record.Fields.find((f) => f.CodeName == this.FieldName)?.EntityFieldInfo;
374
- if (ef)
375
- this._displayName = ef.DisplayNameOrName;
376
- else
377
- this._displayName = this.FieldName;
378
- }
379
- return this._displayName;
380
- }
381
- // use the custom value
382
- set DisplayName(newValue) {
383
- this._displayName = newValue;
384
- }
385
- /**
386
- * Returns the display name with search highlighting applied if formContext.sectionFilter is set
387
- */
388
- get HighlightedDisplayName() {
389
- const displayName = this.DisplayName;
390
- const filter = this.formContext?.sectionFilter;
391
- if (!filter || !filter.trim()) {
392
- return displayName;
393
- }
394
- const searchTerm = filter.toLowerCase().trim();
395
- if (!displayName.toLowerCase().includes(searchTerm)) {
396
- return displayName;
397
- }
398
- // Escape special regex characters
399
- const escapedTerm = this.escapeRegex(searchTerm);
400
- const regex = new RegExp(escapedTerm, 'gi');
401
- return displayName.replace(regex, '<mark class="search-highlight">$&</mark>');
402
- }
403
- escapeRegex(term) {
404
- return term.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
405
- }
406
- get ExtendedType() {
407
- const entityField = this.record.GetFieldByName(this.FieldName);
408
- if (!entityField) {
409
- return '';
410
- }
411
- return entityField.EntityFieldInfo.ExtendedType;
412
- }
413
- _possibleValues = null;
414
- /**
415
- * 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.
416
- * If the field is not a dropdownlist or combobox, this property is ignored. If you would like to specify a custom list of values, you can set this property manually.
417
- */
418
- get PossibleValues() {
419
- if (!this._possibleValues) {
420
- const ef = this.record.Fields.find((f) => f.CodeName == this.FieldName)?.EntityFieldInfo;
421
- if (ef && ef.ValueListType !== 'None')
422
- this._possibleValues = ef.EntityFieldValues.map((v) => v.Value);
423
- else
424
- this._possibleValues = [];
425
- }
426
- return this._possibleValues;
427
- }
428
- // use the custom value if provided
429
- set PossibleValues(newValue) {
430
- this._possibleValues = newValue;
431
- }
432
- get Value() {
433
- const v = this.record.Get(this.FieldName);
434
- const f = this.record.Fields.find((f) => f.CodeName == this.FieldName);
435
- if (v === null || v === undefined) {
436
- // check to see if this is a text type of field
437
- if (f?.EntityFieldInfo.TSType === EntityFieldTSType.String)
438
- return '';
439
- }
440
- // get here, return the value as it is
441
- return v;
442
- }
443
- set Value(newValue) {
444
- if (!this.IsFieldReadOnly) {
445
- this.record.Set(this.FieldName, newValue);
446
- this.ValueChange.emit(newValue);
447
- }
448
- // ignore this if it is read only
449
- }
450
- ValueChange = new EventEmitter();
451
- /**
452
- * Returns true if the field is read only. This is determined by the ReadOnly property in the entity field metadata.
453
- */
454
- get IsFieldReadOnly() {
455
- const f = this.record.Fields.find((f) => f.CodeName == this.FieldName);
456
- if (f)
457
- return f.ReadOnly;
458
- else
459
- throw new Error(`Field ${this.FieldName} not found in record ${this.record.EntityInfo.Name}`);
460
- }
461
- get FieldInfo() {
462
- const f = this.record.Fields.find((f) => f.Name == this.FieldName);
463
- if (f)
464
- return f.EntityFieldInfo;
465
- else
466
- throw new Error(`Field ${this.FieldName} not found in record ${this.record.EntityInfo.Name}`);
467
- }
468
- /**
469
- * Returns true if the field should be hidden (empty value in read-only mode with hideWhenEmptyInReadOnlyMode enabled)
470
- */
471
- get shouldHideField() {
472
- // If form-level "Show Empty Fields" is enabled, never hide
473
- if (this.formContext?.showEmptyFields) {
474
- return false;
475
- }
476
- // Don't hide if the feature is disabled or we're in edit mode
477
- if (!this.hideWhenEmptyInReadOnlyMode || this.EditMode) {
478
- return false;
479
- }
480
- // Check if the field has a value
481
- const value = this.record.Get(this.FieldName);
482
- return value === null || value === undefined || value === '';
483
- }
484
- /**
485
- * Returns true if the field is configured for encryption in the entity metadata
486
- */
487
- get IsEncryptedField() {
488
- return this.FieldInfo?.Encrypt === true;
489
- }
490
- /**
491
- * Returns true if the field allows decrypted values to be shown in the API
492
- */
493
- get AllowDecryptInAPI() {
494
- return this.FieldInfo?.AllowDecryptInAPI === true;
495
- }
496
- /**
497
- * Returns true if the field's current value is the encrypted sentinel value,
498
- * indicating that the actual value is protected and cannot be shown.
499
- */
500
- get IsValueEncryptedSentinel() {
501
- const value = this.record.Get(this.FieldName);
502
- return IsEncryptedSentinel(value);
503
- }
504
- /**
505
- * Returns true if the field's current value should be treated as protected for display purposes.
506
- * For encrypted fields where AllowDecryptInAPI=false, any non-empty value should be hidden.
507
- */
508
- get IsValueProtected() {
509
- const f = this.record.GetFieldByName(this.FieldName);
510
- if (f?.EntityFieldInfo?.Encrypt && f?.EntityFieldInfo.EncryptionKeyID) {
511
- const value = this.record.Get(this.FieldName);
512
- // If value is sentinel or encrypted ciphertext, it's protected
513
- const key = EncryptionEngineBase.Instance.GetKeyByID(f.EntityFieldInfo.EncryptionKeyID);
514
- if (IsValueEncrypted(value, key?.Marker)) {
515
- return true;
516
- }
517
- // For encrypted fields where AllowDecryptInAPI=false, treat any non-null value as protected
518
- const fieldInfo = this.FieldInfo;
519
- if (fieldInfo?.Encrypt && !fieldInfo.AllowDecryptInAPI) {
520
- return value !== null && value !== undefined && value !== '';
521
- }
522
- }
523
- return false;
524
- }
525
- /**
526
- * Returns true if the encrypted field has a value that can be revealed (AllowDecryptInAPI=true)
527
- */
528
- get CanRevealEncryptedValue() {
529
- if (!this.IsEncryptedField)
530
- return false;
531
- if (!this.AllowDecryptInAPI)
532
- return false;
533
- const value = this.record.Get(this.FieldName);
534
- return value !== null && value !== undefined && value !== '';
535
- }
536
- /**
537
- * Controls whether the encrypted value is currently visible (for AllowDecryptInAPI=true fields)
538
- */
539
- isEncryptedValueRevealed = false;
540
- /**
541
- * Controls whether the new value being typed is visible (for blind edit mode)
542
- */
543
- isNewValueRevealed = false;
544
- /**
545
- * Toggles the visibility of the encrypted value
546
- */
547
- toggleEncryptedValueVisibility() {
548
- this.isEncryptedValueRevealed = !this.isEncryptedValueRevealed;
549
- }
550
- /**
551
- * Toggles the visibility of the new value being typed (for blind edit mode)
552
- */
553
- toggleNewValueVisibility() {
554
- this.isNewValueRevealed = !this.isNewValueRevealed;
555
- }
556
- /**
557
- * For encrypted fields in edit mode where AllowDecryptInAPI=false,
558
- * we need a separate edit value that starts empty (user can't see existing value)
559
- */
560
- _encryptedEditValue = '';
561
- /**
562
- * Gets the value for editing encrypted fields.
563
- * For AllowDecryptInAPI=false fields, returns empty string initially (user can't see existing value)
564
- * For AllowDecryptInAPI=true fields, returns the actual value
565
- */
566
- get EncryptedEditValue() {
567
- if (this.AllowDecryptInAPI) {
568
- return this.Value ?? '';
569
- }
570
- return this._encryptedEditValue;
571
- }
572
- /**
573
- * Sets the encrypted edit value and updates the record
574
- */
575
- set EncryptedEditValue(newValue) {
576
- this._encryptedEditValue = newValue;
577
- if (newValue && newValue.length > 0) {
578
- // Only update the record if user has entered something
579
- this.record.Set(this.FieldName, newValue);
580
- this.ValueChange.emit(newValue);
581
- }
582
- }
583
- /**
584
- * Returns true if editing an encrypted field that doesn't allow viewing existing value
585
- */
586
- get IsBlindEncryptedEdit() {
587
- return this.IsEncryptedField && !this.AllowDecryptInAPI && this.IsValueProtected;
588
- }
589
- /**
590
- * The masked display text for encrypted values (shows dots instead of actual value)
591
- */
592
- EncryptedDisplayMask = '••••••••';
593
- markdown;
594
- constructor(renderer) {
595
- super();
596
- this.renderer = renderer;
597
- }
598
- ngAfterViewInit() {
599
- if (this.markdown) {
600
- // Create a MutationObserver to watch for changes in the markdown component
601
- const observer = new MutationObserver((mutations) => {
602
- mutations.forEach((mutation) => {
603
- if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
604
- // Get the first child element inside the markdown component
605
- const el = this.markdown?.element.nativeElement.firstChild;
606
- if (el) {
607
- // Apply styles using Renderer2
608
- this.renderer.setStyle(el, 'margin-top', '0');
609
- this.renderer.setStyle(el, 'margin-bottom', '0');
610
- // only apply font size if the element is a paragraph
611
- if (el.tagName === 'P')
612
- this.renderer.setStyle(el, 'font-size', '14px');
613
- }
614
- }
615
- });
616
- });
617
- // Start observing the markdown component for child node additions
618
- observer.observe(this.markdown.element.nativeElement, { childList: true });
619
- }
620
- }
621
- static ɵfac = function MJFormField_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MJFormField)(i0.ɵɵdirectiveInject(i0.Renderer2)); };
622
- static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJFormField, selectors: [["mj-form-field"]], viewQuery: function MJFormField_Query(rf, ctx) { if (rf & 1) {
623
- i0.ɵɵviewQuery(_c0, 5);
624
- } if (rf & 2) {
625
- let _t;
626
- i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.markdown = _t.first);
627
- } }, inputs: { record: "record", EditMode: "EditMode", FieldName: "FieldName", Type: "Type", LinkType: "LinkType", LinkComponentType: "LinkComponentType", ShowLabel: "ShowLabel", formContext: "formContext", hideWhenEmptyInReadOnlyMode: "hideWhenEmptyInReadOnlyMode", DisplayName: "DisplayName", PossibleValues: "PossibleValues", Value: "Value" }, outputs: { ValueChange: "ValueChange" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 1, vars: 1, consts: [["markdown", ""], ["class", "record-form-row", 4, "ngIf"], [1, "record-form-row"], [3, "innerHTML", 4, "ngIf"], [3, "innerHTML"], [1, "encrypted-value-container"], ["title", "This value is encrypted and protected", 1, "encrypted-value"], [1, "encrypted-revealed-value"], [1, "encrypted-value"], ["type", "button", 1, "encrypted-toggle-btn", 3, "click", "title"], [1, "fa-solid"], [1, "fa-solid", "fa-lock", "encrypted-icon"], ["mjEmailLink", "", 3, "field"], ["mjWebLink", "", 3, "field"], ["mjFieldLink", "", 3, "record", "fieldName"], [3, "value", "readonly", "languages", "language"], ["type", "checkbox", "kendoCheckBox", "", "disabled", "", 3, "checked"], [3, "data"], [1, "encrypted-field-edit"], [1, "encrypted-field-edit-visible"], [3, "record", "FieldName", "LinkComponentType"], ["title", "Current value is encrypted and cannot be viewed", 1, "encrypted-current-value"], [1, "encrypted-input-container"], [1, "encrypted-input", 3, "ngModelChange", "ngModel", "placeholder", "type"], [1, "encrypted-hint"], [1, "encrypted-input", 3, "ngModelChange", "ngModel", "type"], [3, "ngModel", "languages", "language"], [3, "ngModel"], [1, "narrower-component", 3, "value"], ["type", "checkbox", "kendoCheckBox", "", 3, "ngModel"], [3, "data", "ngModel"], [3, "data", "allowCustom", "ngModel"], [3, "ngModelChange", "ngModel", "languages", "language"], [3, "ngModelChange", "ngModel"], [1, "narrower-component", 3, "valueChange", "value"], ["type", "checkbox", "kendoCheckBox", "", 3, "ngModelChange", "ngModel"], [3, "ngModelChange", "data", "ngModel"], [3, "ngModelChange", "data", "allowCustom", "ngModel"]], template: function MJFormField_Template(rf, ctx) { if (rf & 1) {
628
- i0.ɵɵtemplate(0, MJFormField_Conditional_0_Template, 2, 2);
629
- } if (rf & 2) {
630
- i0.ɵɵconditional(ctx.record.IsSaved || !ctx.IsFieldReadOnly ? 0 : -1);
631
- } }, 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.CodeEditorComponent, i8.MarkdownComponent, i9.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.narrower-component[_ngcontent-%COMP%] {\n width: 435px;\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.record-form-row[_ngcontent-%COMP%] > [_ngcontent-%COMP%]:nth-child(2) {\n overflow-wrap: break-word;\n word-wrap: break-word;\n word-break: break-word;\n min-width: 0;\n max-width: 100%;\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: 14px; \n\n}\n\n\n\n.record-form-row[_ngcontent-%COMP%] label[_ngcontent-%COMP%] .search-highlight {\n background-color: #fef08a;\n color: #854d0e;\n padding: 0;\n border-radius: 2px;\n font-weight: 700;\n box-shadow: 0 0 0 2px #fef08a;\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}\n\n\n\n.encrypted-value[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n color: #666;\n font-family: monospace;\n letter-spacing: 2px;\n}\n\n.encrypted-value-container[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n}\n\n.encrypted-revealed-value[_ngcontent-%COMP%] {\n font-family: inherit;\n}\n\n.encrypted-icon[_ngcontent-%COMP%] {\n color: #888;\n font-size: 12px;\n}\n\n.encrypted-toggle-btn[_ngcontent-%COMP%] {\n background: none;\n border: 1px solid #ccc;\n border-radius: 4px;\n padding: 4px 8px;\n cursor: pointer;\n color: #666;\n font-size: 12px;\n transition: all 0.2s ease;\n}\n\n.encrypted-toggle-btn[_ngcontent-%COMP%]:hover {\n background-color: #f0f0f0;\n border-color: #999;\n color: #333;\n}\n\n.encrypted-field-edit[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.encrypted-field-edit-visible[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.encrypted-input-container[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.encrypted-current-value[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n color: #666;\n font-family: monospace;\n letter-spacing: 2px;\n font-size: 13px;\n background-color: #f5f5f5;\n padding: 4px 8px;\n border-radius: 4px;\n width: fit-content;\n}\n\n.encrypted-input[_ngcontent-%COMP%] {\n max-width: 400px;\n}\n\n.encrypted-hint[_ngcontent-%COMP%] {\n font-size: 11px;\n color: #888;\n font-style: italic;\n}"] });
632
- }
633
- (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJFormField, [{
634
- type: Component,
635
- 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) && !shouldHideField\">\n <label *ngIf=\"ShowLabel\" [innerHTML]=\"HighlightedDisplayName\"></label>\n @if (IsEncryptedField) {\n <!-- Encrypted field in read-only mode -->\n @if (CanRevealEncryptedValue) {\n <!-- AllowDecryptInAPI=true: Show masked by default with reveal button -->\n <span class=\"encrypted-value-container\">\n @if (isEncryptedValueRevealed) {\n <span class=\"encrypted-revealed-value\">{{Value}}</span>\n }\n @else {\n <span class=\"encrypted-value\">\n <i class=\"fa-solid fa-lock encrypted-icon\"></i>\n {{EncryptedDisplayMask}}\n </span>\n }\n <button type=\"button\"\n class=\"encrypted-toggle-btn\"\n (click)=\"toggleEncryptedValueVisibility()\"\n [title]=\"isEncryptedValueRevealed ? 'Hide value' : 'Show value'\">\n <i class=\"fa-solid\" [class.fa-eye]=\"!isEncryptedValueRevealed\" [class.fa-eye-slash]=\"isEncryptedValueRevealed\"></i>\n </button>\n </span>\n }\n @else if (IsValueProtected) {\n <!-- AllowDecryptInAPI=false or sentinel: Always show masked, no reveal option -->\n <span class=\"encrypted-value\" title=\"This value is encrypted and protected\">\n <i class=\"fa-solid fa-lock encrypted-icon\"></i>\n {{EncryptedDisplayMask}}\n </span>\n }\n @else {\n <!-- Encrypted field with no value -->\n <span></span>\n }\n }\n @else {\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 (Type === 'checkbox') {\n <!-- Render checkboxes as disabled checkbox controls in read mode -->\n <input type=\"checkbox\" [checked]=\"Value\" kendoCheckBox disabled />\n }\n @else if (FieldInfo.Length === -1) {\n <!-- this is a varchar(max) type of field -->\n <mj-markdown #markdown [data]=\"record.Get(FieldName)\"></mj-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 }\n </div>\n <div class=\"record-form-row\" *ngIf=\"EditMode && !IsFieldReadOnly\">\n @if (ShowLabel) {\n <label [innerHTML]=\"HighlightedDisplayName\"></label>\n }\n @if (IsBlindEncryptedEdit) {\n <!-- Encrypted field where user cannot see existing value (AllowDecryptInAPI=false) -->\n <div class=\"encrypted-field-edit\">\n <span class=\"encrypted-current-value\" title=\"Current value is encrypted and cannot be viewed\">\n <i class=\"fa-solid fa-lock encrypted-icon\"></i>\n {{EncryptedDisplayMask}}\n </span>\n <div class=\"encrypted-input-container\">\n <kendo-textbox\n [(ngModel)]=\"EncryptedEditValue\"\n [placeholder]=\"'Enter new value to replace encrypted data'\"\n class=\"encrypted-input\"\n [type]=\"isNewValueRevealed ? 'text' : 'password'\">\n </kendo-textbox>\n <button type=\"button\"\n class=\"encrypted-toggle-btn\"\n (click)=\"toggleNewValueVisibility()\"\n [title]=\"isNewValueRevealed ? 'Hide value' : 'Show value'\">\n <i class=\"fa-solid\" [class.fa-eye]=\"!isNewValueRevealed\" [class.fa-eye-slash]=\"isNewValueRevealed\"></i>\n </button>\n </div>\n <span class=\"encrypted-hint\">Enter a new value to overwrite the existing encrypted data (current value cannot be displayed)</span>\n </div>\n }\n @else if (IsEncryptedField) {\n <!-- Encrypted field where user CAN see existing value (AllowDecryptInAPI=true) -->\n <div class=\"encrypted-field-edit-visible\">\n <div class=\"encrypted-input-container\">\n <kendo-textbox\n [(ngModel)]=\"Value\"\n class=\"encrypted-input\"\n [type]=\"isEncryptedValueRevealed ? 'text' : 'password'\">\n </kendo-textbox>\n <button type=\"button\"\n class=\"encrypted-toggle-btn\"\n (click)=\"toggleEncryptedValueVisibility()\"\n [title]=\"isEncryptedValueRevealed ? 'Hide value' : 'Show value'\">\n <i class=\"fa-solid\" [class.fa-eye]=\"!isEncryptedValueRevealed\" [class.fa-eye-slash]=\"isEncryptedValueRevealed\"></i>\n </button>\n </div>\n </div>\n }\n @else 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\"></kendo-textarea>\n }\n @case ('numerictextbox') {\n <kendo-numerictextbox [(value)]=\"Value\" class=\"narrower-component\" />\n }\n @case ('datepicker') {\n <kendo-datepicker [(value)]=\"Value\" class=\"narrower-component\"></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.narrower-component {\n width: 435px;\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/* Enable wrapping and vertical scrolling for field values */\n.record-form-row > :nth-child(2) {\n overflow-wrap: break-word;\n word-wrap: break-word;\n word-break: break-word;\n min-width: 0;\n max-width: 100%;\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: 14px; /* Match app standard text size (changed from 1rem) */\n}\n\n/* Search highlighting for field labels */\n.record-form-row label ::ng-deep .search-highlight {\n background-color: #fef08a;\n color: #854d0e;\n padding: 0;\n border-radius: 2px;\n font-weight: 700;\n box-shadow: 0 0 0 2px #fef08a;\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\n/* Encrypted field styles */\n.encrypted-value {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n color: #666;\n font-family: monospace;\n letter-spacing: 2px;\n}\n\n.encrypted-value-container {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n}\n\n.encrypted-revealed-value {\n font-family: inherit;\n}\n\n.encrypted-icon {\n color: #888;\n font-size: 12px;\n}\n\n.encrypted-toggle-btn {\n background: none;\n border: 1px solid #ccc;\n border-radius: 4px;\n padding: 4px 8px;\n cursor: pointer;\n color: #666;\n font-size: 12px;\n transition: all 0.2s ease;\n}\n\n.encrypted-toggle-btn:hover {\n background-color: #f0f0f0;\n border-color: #999;\n color: #333;\n}\n\n.encrypted-field-edit {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.encrypted-field-edit-visible {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.encrypted-input-container {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.encrypted-current-value {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n color: #666;\n font-family: monospace;\n letter-spacing: 2px;\n font-size: 13px;\n background-color: #f5f5f5;\n padding: 4px 8px;\n border-radius: 4px;\n width: fit-content;\n}\n\n.encrypted-input {\n max-width: 400px;\n}\n\n.encrypted-hint {\n font-size: 11px;\n color: #888;\n font-style: italic;\n}\n "] }]
636
- }], () => [{ type: i0.Renderer2 }], { record: [{
637
- type: Input
638
- }], EditMode: [{
639
- type: Input
640
- }], FieldName: [{
641
- type: Input
642
- }], Type: [{
643
- type: Input
644
- }], LinkType: [{
645
- type: Input
646
- }], LinkComponentType: [{
647
- type: Input
648
- }], ShowLabel: [{
649
- type: Input
650
- }], formContext: [{
651
- type: Input
652
- }], hideWhenEmptyInReadOnlyMode: [{
653
- type: Input
654
- }], DisplayName: [{
655
- type: Input
656
- }], PossibleValues: [{
657
- type: Input
658
- }], Value: [{
659
- type: Input
660
- }], ValueChange: [{
661
- type: Output
662
- }], markdown: [{
663
- type: ViewChild,
664
- args: ['markdown', { static: false }]
665
- }] }); })();
666
- (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJFormField, { className: "MJFormField", filePath: "src/lib/base-field-component.ts", lineNumber: 21 }); })();
667
- //# sourceMappingURL=base-field-component.js.map